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 { CHANGED_THEME_EVENT, _themeChangedEmitter } from './theming-event.js';
class ThemingController {
    constructor(host, themes) {
        this.themes = themes;
        this.host = host;
        this.host.addController(this);
    }
    hostConnected() {
        this.themeChanged();
        _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);
    }
    hostDisconnected() {
        _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);
    }
    handleEvent() {
        this.themeChanged();
    }
    getStyles() {
        const styleSheets = Object.entries(this.themes[this.themeVariant]);
        const styles = { shared: css ``, theme: css `` };
        for (const [name, sheet] of styleSheets) {
            if (name === 'shared') {
                styles.shared = sheet;
            }
            if (name === this.theme) {
                styles.theme = sheet;
            }
        }
        return styles;
    }
    adoptStyles() {
        const { theme, themeVariant } = getTheme();
        this.theme = theme;
        this.themeVariant = themeVariant;
        const ctor = this.host.constructor;
        const { shared, theme: _theme } = this.getStyles();
        adoptStyles(this.host.shadowRoot, [...ctor.elementStyles, shared, _theme]);
    }
    themeChanged() {
        this.adoptStyles();
        this.onThemeChanged?.call(this.host, this.theme);
        this.host.requestUpdate();
    }
}
export function createThemeController(host, themes) {
    return new ThemingController(host, themes);
}
//# sourceMappingURL=theming-controller.js.map