igniteui-webcomponents/theming/theming-decorator.d.ts

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

import type { LitElement } from 'lit';
import type { ThemeController, Themes } from './types.js';
/**
 * Class decorator to enable multiple theme support for a component.
 * The component will re-render on theme changes.
 *
 * Passing `{ exposeController: true }` in the decorator options will create an internal symbol
 * which can be used by {@link getThemeController} to additionally query and modify the component
 * based on the themes.
 *
 * Usage:
 *  ```ts
 *  import { LitElement, html } from 'lit';
 *  import { themes } from 'igniteui-webcomponents/themes';
 *  import { styles } from './themes/my-element.base.css.js';
 *  import { styles as shared } from './themes/shared/my-picker.common.css.js';
 *  import { all } from './themes/themes.js';
 *
 *  @themes(all)
 *  class MyElement extends LitElement {
 *    public static styles = [styles, shared];
 *  }
 *
 *  @themes(all, { exposeController: true })
 *  class MyElementWithExposedTheming extends LitElement {
 *    ...
 *
 *    render() {
 *      const theme = getThemeController(this)?.theme;
 *      ...
 *    }
 *  }
 *  ```
 */
export declare function themes(themes: Themes, options?: ThemeOptions): (proto: unknown) => void;
/**
 * Returns the theming controller for the given element if exposed.
 */
export declare function getThemeController(host: LitElement): ThemeController | undefined;
type ThemeOptions = {
    exposeController?: boolean;
};
export {};