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 { ContextConsumer } from '@lit/context';
import { adoptStyles, css, } from 'lit';
import { getTheme } from './config.js';
import { themeContext } from './context.js';
import { _themeChangedEmitter, CHANGED_THEME_EVENT } from './theming-event.js';
class ThemingController {
    get theme() {
        return this._theme;
    }
    get variant() {
        return this._variant;
    }
    constructor(host, themes, config) {
        this._theme = 'bootstrap';
        this._variant = 'light';
        this._themeSource = 'uninitialized';
        this._host = host;
        this._themes = themes;
        this._options = config;
        this._host.addController(this);
        this._contextConsumer = new ContextConsumer(this._host, {
            context: themeContext,
            callback: (value) => {
                if (value) {
                    this._applyContextTheme(value);
                }
            },
            subscribe: true,
        });
    }
    hostConnected() {
        this._applyGlobalTheme();
    }
    hostDisconnected() {
        if (this._themeSource === 'global') {
            _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);
        }
        this._themeSource = 'uninitialized';
        this._contextConsumer.value = undefined;
    }
    handleEvent() {
        if (this._themeSource === 'global') {
            this._applyGlobalTheme();
        }
    }
    _applyContextTheme(contextValue) {
        if (this._themeSource === 'global') {
            _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);
        }
        this._themeSource = 'context';
        this._applyTheme(contextValue.theme, contextValue.variant);
    }
    _applyGlobalTheme() {
        if (this._themeSource === 'uninitialized') {
            _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);
        }
        const { theme, themeVariant } = getTheme();
        this._themeSource = 'global';
        this._applyTheme(theme, themeVariant);
    }
    _applyTheme(theme, variant) {
        this._theme = theme;
        this._variant = variant;
        this._adoptStyles();
        this._options?.themeChange?.call(this._host, this._theme);
        this._host.requestUpdate();
    }
    _adoptStyles() {
        const ctor = this._host.constructor;
        const shared = this._themes[this._variant].shared || css ``;
        const theme = this._themes[this._variant][this._theme] || css ``;
        adoptStyles(this._host.shadowRoot, [...ctor.elementStyles, shared, theme]);
    }
}
export function addThemingController(host, themes, config) {
    return new ThemingController(host, themes, config);
}
//# sourceMappingURL=theming-controller.js.map