igniteui-webcomponents/theming/theming-controller.js

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 { adoptStyles, css, } from 'lit';
import { getTheme } from './config.js';
import { _themeChangedEmitter, CHANGED_THEME_EVENT } from './theming-event.js';
class ThemingController {
    get theme() {
        return this._theme;
    }
    constructor(host, themes, config) {
        this._theme = 'bootstrap';
        this._variant = 'light';
        this._host = host;
        this._themes = themes;
        this._options = config;
        this._host.addController(this);
    }
    hostConnected() {
        this._handleThemeChanged();
        _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);
    }
    hostDisconnected() {
        _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);
    }
    handleEvent() {
        this._handleThemeChanged();
    }
    _getStyles() {
        const props = this._themes[this._variant];
        const styles = { shared: css ``, theme: css `` };
        for (const [name, sheet] of Object.entries(props)) {
            if (name === 'shared') {
                styles.shared = sheet;
            }
            if (name === this.theme) {
                styles.theme = sheet;
            }
        }
        return styles;
    }
    _adoptStyles() {
        const { theme: currentTheme, themeVariant } = getTheme();
        this._theme = currentTheme;
        this._variant = themeVariant;
        const ctor = this._host.constructor;
        const { shared, theme } = this._getStyles();
        adoptStyles(this._host.shadowRoot, [...ctor.elementStyles, shared, theme]);
    }
    _handleThemeChanged() {
        this._adoptStyles();
        this._options?.themeChange?.call(this._host, this._theme);
        this._host.requestUpdate();
    }
}
export function addThemingController(host, themes, config) {
    return new ThemingController(host, themes, config);
}
//# sourceMappingURL=theming-controller.js.map