igniteui-webcomponents 7.2.4 → 7.3.0-beta.0

package/theming/theming-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"theming-controller.js","sourceRoot":"","sources":["../../src/theming/theming-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextConsumer } from '@lit/context';\nimport {\n  adoptStyles,\n  css,\n  type LitElement,\n  type ReactiveController,\n  type ReactiveControllerHost,\n  type ReactiveElement,\n} from 'lit';\n\nimport { getTheme } from './config.js';\nimport { themeContext } from './context.js';\nimport { _themeChangedEmitter, CHANGED_THEME_EVENT } from './theming-event.js';\nimport type {\n  Theme,\n  Themes,\n  ThemeVariant,\n  ThemingControllerConfig,\n} from './types.js';\n\ntype ThemeProviderSource = 'uninitialized' | 'context' | 'global';\n\n/**\n * A reactive controller that manages theme adoption for a Lit host element.\n *\n * It resolves the active theme from one of two sources, in order of priority:\n *\n * 1. **Context** — provided by an ancestor `<igc-theme-provider>` element via the Lit context API.\n * 2. **Global** — the application-wide theme set via `configureTheme()`.\n *\n * When a context provider is present, the controller subscribes to its updates\n * and stops listening to global theme change events. When the host element is\n * disconnected and reconnected outside a provider, it automatically falls back\n * to the global theme.\n *\n * Theme styles are applied directly to the host's shadow root via `adoptStyles`\n * every time the active theme or variant changes.\n *\n * @example\n * Basic usage — typically created via {@link addThemingController}:\n * ```typescript\n * import { addThemingController } from '../../theming/theming-controller.js';\n * import { all } from './themes/themes.js';\n *\n * export default class IgcMyComponent extends LitElement {\n *   constructor() {\n *     super();\n *     addThemingController(this, all);\n *   }\n * }\n * ```\n *\n * @example\n * Accessing the current theme and variant at runtime:\n * ```typescript\n * export default class IgcMyComponent extends LitElement {\n *   private readonly _themes = addThemingController(this, all);\n *\n *   protected override render() {\n *     // Conditionally render based on active theme\n *     return this._themes.variant === 'dark'\n *       ? html`<div class=\"dark-layout\"></div>`\n *       : html`<div class=\"light-layout\"></div>`;\n *   }\n * }\n * ```\n */\nclass ThemingController implements ReactiveController {\n  //#region Internal state\n\n  private readonly _host: ReactiveControllerHost & ReactiveElement;\n  private readonly _themes: Themes;\n  private readonly _options?: ThemingControllerConfig;\n  private readonly _contextConsumer: ContextConsumer<\n    typeof themeContext,\n    ReactiveElement\n  >;\n\n  private _theme: Theme = 'bootstrap';\n  private _variant: ThemeVariant = 'light';\n  private _themeSource: ThemeProviderSource = 'uninitialized';\n\n  //#endregion\n\n  //#region Public properties\n\n  /** Gets the current theme. */\n  public get theme(): Theme {\n    return this._theme;\n  }\n\n  /** Gets the current theme variant. */\n  public get variant(): ThemeVariant {\n    return this._variant;\n  }\n\n  //#endregion\n\n  constructor(\n    host: ReactiveControllerHost & ReactiveElement,\n    themes: Themes,\n    config?: ThemingControllerConfig\n  ) {\n    this._host = host;\n    this._themes = themes;\n    this._options = config;\n\n    this._host.addController(this);\n\n    this._contextConsumer = new ContextConsumer(this._host, {\n      context: themeContext,\n      callback: (value) => {\n        if (value) {\n          this._applyContextTheme(value);\n        }\n      },\n      subscribe: true,\n    });\n  }\n\n  //#region ReactiveController implementation\n\n  /** @internal */\n  public hostConnected(): void {\n    // Apply the global theme initially. When the host's first update cycle begins, if a context provider is\n    // present and has set its value, the callback will be invoked and override with the context value.\n    this._applyGlobalTheme();\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    if (this._themeSource === 'global') {\n      _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);\n    }\n\n    // Reset to initial state so that if the host reconnects in a different part of the tree,\n    // it can properly re-resolve the theme source.\n    this._themeSource = 'uninitialized';\n    this._contextConsumer.value = undefined;\n  }\n\n  //#endregion\n\n  //#region Event handling\n\n  /** @internal */\n  public handleEvent(): void {\n    if (this._themeSource === 'global') {\n      this._applyGlobalTheme();\n    }\n  }\n\n  //#endregion\n\n  //#region Internal methods\n\n  private _applyContextTheme(contextValue: {\n    theme: Theme;\n    variant: ThemeVariant;\n  }): void {\n    // If we were using global theme, unsubscribe from global events\n    if (this._themeSource === 'global') {\n      _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);\n    }\n\n    this._themeSource = 'context';\n    this._applyTheme(contextValue.theme, contextValue.variant);\n  }\n\n  private _applyGlobalTheme(): void {\n    // Subscribe to global events only on first initialization\n    if (this._themeSource === 'uninitialized') {\n      _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);\n    }\n\n    const { theme, themeVariant } = getTheme();\n\n    this._themeSource = 'global';\n    this._applyTheme(theme, themeVariant);\n  }\n\n  private _applyTheme(theme: Theme, variant: ThemeVariant): void {\n    this._theme = theme;\n    this._variant = variant;\n\n    this._adoptStyles();\n    this._options?.themeChange?.call(this._host, this._theme);\n    this._host.requestUpdate();\n  }\n\n  private _adoptStyles(): void {\n    const ctor = this._host.constructor as typeof LitElement;\n    const shared = this._themes[this._variant].shared || css``;\n    const theme = this._themes[this._variant][this._theme] || css``;\n\n    adoptStyles(this._host.shadowRoot!, [...ctor.elementStyles, shared, theme]);\n  }\n\n  //#endregion\n}\n\n/**\n * Creates and attaches a {@link ThemingController} to the given host element.\n *\n * This is the preferred way to add theming support to a component. The controller\n * is registered with the host's reactive controller lifecycle and automatically\n * resolves the active theme from an ancestor `<igc-theme-provider>` context or\n * falls back to the application-wide theme set via `configureTheme()`.\n *\n * @param host - The Lit element that will host the controller.\n * @param themes - The theme styles map containing `light` and `dark` variant entries,\n *   each keyed by theme name (`bootstrap`, `material`, `fluent`, `indigo`) and\n *   an optional `shared` entry applied regardless of theme.\n * @param config - Optional configuration.\n * @param config.themeChange - Callback invoked on the host whenever the active theme changes.\n *\n * @returns The created {@link ThemingController} instance.\n *\n * @example\n * Minimal setup in a component constructor:\n * ```typescript\n * import { addThemingController } from '../../theming/theming-controller.js';\n * import { all } from './themes/themes.js';\n *\n * export default class IgcMyComponent extends LitElement {\n *   constructor() {\n *     super();\n *     addThemingController(this, all);\n *   }\n * }\n * ```\n *\n * @example\n * With a `themeChange` callback and retained controller reference:\n * ```typescript\n * export default class IgcMyComponent extends LitElement {\n *   private readonly _themingController = addThemingController(this, all, {\n *     themeChange(theme) {\n *       // Called on `this` (the host) whenever the theme switches\n *       console.log(`Theme changed to: ${theme}`);\n *     },\n *   });\n *\n *   protected override render() {\n *     return html`<span>Current variant: ${this._themingController.variant}</span>`;\n *   }\n * }\n * ```\n */\nexport function addThemingController(\n  host: ReactiveControllerHost & ReactiveElement,\n  themes: Themes,\n  config?: ThemingControllerConfig\n): ThemingController {\n  return new ThemingController(host, themes, config);\n}\n\nexport type { ThemingController };\n"]}
+{"version":3,"file":"theming-controller.js","sourceRoot":"","sources":["../../src/theming/theming-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextConsumer } from '@lit/context';\nimport {\n  adoptStyles,\n  css,\n  type LitElement,\n  type ReactiveController,\n  type ReactiveControllerHost,\n  type ReactiveElement,\n} from 'lit';\n\nimport { getTheme } from './config.js';\nimport { themeContext } from './context.js';\nimport { _themeChangedEmitter, CHANGED_THEME_EVENT } from './theming-event.js';\nimport type {\n  Theme,\n  Themes,\n  ThemeVariant,\n  ThemingControllerConfig,\n} from './types.js';\n\ntype ThemeProviderSource = 'uninitialized' | 'context' | 'global';\n\n/**\n * A reactive controller that manages theme adoption for a Lit host element.\n *\n * It resolves the active theme from one of two sources, in order of priority:\n *\n * 1. **Context** — provided by an ancestor `<igc-theme-provider>` element via the Lit context API.\n * 2. **Global** — the application-wide theme set via `configureTheme()`.\n *\n * When a context provider is present, the controller subscribes to its updates\n * and stops listening to global theme change events. When the host element is\n * disconnected and reconnected outside a provider, it automatically falls back\n * to the global theme.\n *\n * Theme styles are applied directly to the host's shadow root via `adoptStyles`\n * every time the active theme or variant changes.\n *\n * @example\n * Basic usage — typically created via {@link addThemingController}:\n * ```typescript\n * import { addThemingController } from '#theming/theming-controller.js';\n * import { all } from './themes/themes.js';\n *\n * export default class IgcMyComponent extends LitElement {\n *   constructor() {\n *     super();\n *     addThemingController(this, all);\n *   }\n * }\n * ```\n *\n * @example\n * Accessing the current theme and variant at runtime:\n * ```typescript\n * export default class IgcMyComponent extends LitElement {\n *   private readonly _themes = addThemingController(this, all);\n *\n *   protected override render() {\n *     // Conditionally render based on active theme\n *     return this._themes.variant === 'dark'\n *       ? html`<div class=\"dark-layout\"></div>`\n *       : html`<div class=\"light-layout\"></div>`;\n *   }\n * }\n * ```\n */\nclass ThemingController implements ReactiveController {\n  //#region Internal state\n\n  private readonly _host: ReactiveControllerHost & ReactiveElement;\n  private readonly _themes: Themes;\n  private readonly _options?: ThemingControllerConfig;\n  private readonly _contextConsumer: ContextConsumer<\n    typeof themeContext,\n    ReactiveElement\n  >;\n\n  private _theme: Theme = 'bootstrap';\n  private _variant: ThemeVariant = 'light';\n  private _themeSource: ThemeProviderSource = 'uninitialized';\n\n  //#endregion\n\n  //#region Public properties\n\n  /** Gets the current theme. */\n  public get theme(): Theme {\n    return this._theme;\n  }\n\n  /** Gets the current theme variant. */\n  public get variant(): ThemeVariant {\n    return this._variant;\n  }\n\n  //#endregion\n\n  constructor(\n    host: ReactiveControllerHost & ReactiveElement,\n    themes: Themes,\n    config?: ThemingControllerConfig\n  ) {\n    this._host = host;\n    this._themes = themes;\n    this._options = config;\n\n    this._host.addController(this);\n\n    this._contextConsumer = new ContextConsumer(this._host, {\n      context: themeContext,\n      callback: (value) => {\n        if (value) {\n          this._applyContextTheme(value);\n        }\n      },\n      subscribe: true,\n    });\n  }\n\n  //#region ReactiveController implementation\n\n  /** @internal */\n  public hostConnected(): void {\n    // Apply the global theme initially. When the host's first update cycle begins, if a context provider is\n    // present and has set its value, the callback will be invoked and override with the context value.\n    this._applyGlobalTheme();\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    if (this._themeSource === 'global') {\n      _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);\n    }\n\n    // Reset to initial state so that if the host reconnects in a different part of the tree,\n    // it can properly re-resolve the theme source.\n    this._themeSource = 'uninitialized';\n    this._contextConsumer.value = undefined;\n  }\n\n  //#endregion\n\n  //#region Event handling\n\n  /** @internal */\n  public handleEvent(): void {\n    if (this._themeSource === 'global') {\n      this._applyGlobalTheme();\n    }\n  }\n\n  //#endregion\n\n  //#region Internal methods\n\n  private _applyContextTheme(contextValue: {\n    theme: Theme;\n    variant: ThemeVariant;\n  }): void {\n    // If we were using global theme, unsubscribe from global events\n    if (this._themeSource === 'global') {\n      _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);\n    }\n\n    this._themeSource = 'context';\n    this._applyTheme(contextValue.theme, contextValue.variant);\n  }\n\n  private _applyGlobalTheme(): void {\n    // Subscribe to global events only on first initialization\n    if (this._themeSource === 'uninitialized') {\n      _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);\n    }\n\n    const { theme, themeVariant } = getTheme();\n\n    this._themeSource = 'global';\n    this._applyTheme(theme, themeVariant);\n  }\n\n  private _applyTheme(theme: Theme, variant: ThemeVariant): void {\n    this._theme = theme;\n    this._variant = variant;\n\n    this._adoptStyles();\n    this._options?.themeChange?.call(this._host, this._theme);\n    this._host.requestUpdate();\n  }\n\n  private _adoptStyles(): void {\n    const ctor = this._host.constructor as typeof LitElement;\n    const shared = this._themes[this._variant].shared || css``;\n    const theme = this._themes[this._variant][this._theme] || css``;\n\n    adoptStyles(this._host.shadowRoot!, [...ctor.elementStyles, shared, theme]);\n  }\n\n  //#endregion\n}\n\n/**\n * Creates and attaches a {@link ThemingController} to the given host element.\n *\n * This is the preferred way to add theming support to a component. The controller\n * is registered with the host's reactive controller lifecycle and automatically\n * resolves the active theme from an ancestor `<igc-theme-provider>` context or\n * falls back to the application-wide theme set via `configureTheme()`.\n *\n * @param host - The Lit element that will host the controller.\n * @param themes - The theme styles map containing `light` and `dark` variant entries,\n *   each keyed by theme name (`bootstrap`, `material`, `fluent`, `indigo`) and\n *   an optional `shared` entry applied regardless of theme.\n * @param config - Optional configuration.\n * @param config.themeChange - Callback invoked on the host whenever the active theme changes.\n *\n * @returns The created {@link ThemingController} instance.\n *\n * @example\n * Minimal setup in a component constructor:\n * ```typescript\n * import { addThemingController } from '#theming/theming-controller.js';\n * import { all } from './themes/themes.js';\n *\n * export default class IgcMyComponent extends LitElement {\n *   constructor() {\n *     super();\n *     addThemingController(this, all);\n *   }\n * }\n * ```\n *\n * @example\n * With a `themeChange` callback and retained controller reference:\n * ```typescript\n * export default class IgcMyComponent extends LitElement {\n *   private readonly _themingController = addThemingController(this, all, {\n *     themeChange(theme) {\n *       // Called on `this` (the host) whenever the theme switches\n *       console.log(`Theme changed to: ${theme}`);\n *     },\n *   });\n *\n *   protected override render() {\n *     return html`<span>Current variant: ${this._themingController.variant}</span>`;\n *   }\n * }\n * ```\n */\nexport function addThemingController(\n  host: ReactiveControllerHost & ReactiveElement,\n  themes: Themes,\n  config?: ThemingControllerConfig\n): ThemingController {\n  return new ThemingController(host, themes, config);\n}\n\nexport type { ThemingController };\n"]}