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 { CHANGE_THEME_EVENT } from './theming-event.js';
class ThemeEventListeners {
    constructor() {
        this.listeners = new Set();
    }
    add(listener) {
        globalThis.addEventListener(CHANGE_THEME_EVENT, this);
        this.listeners.add(listener);
    }
    remove(listener) {
        this.listeners.delete(listener);
        if (this.listeners.size < 1) {
            globalThis.removeEventListener(CHANGE_THEME_EVENT, this);
        }
    }
    handleEvent() {
        for (const listener of this.listeners) {
            listener();
        }
    }
}
const _themeListeners = new ThemeEventListeners();
class ThemingController {
    constructor(host, themes) {
        this.themeChanged = () => {
            this.adoptStyles();
            this.onThemeChanged?.call(this.host, this.theme);
            this.host.requestUpdate();
        };
        this.themes = themes;
        this.host = host;
        this.host.addController(this);
    }
    hostConnected() {
        this.themeChanged();
        _themeListeners.add(this.themeChanged);
    }
    hostDisconnected() {
        _themeListeners.remove(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]);
    }
}
export function createThemeController(host, themes) {
    return new ThemingController(host, themes);
}
//# sourceMappingURL=theming-controller.js.map