igniteui-webcomponents/components/common/controllers/adopt-styles.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, } from 'lit';
class AdoptedStylesController {
    static { this._cachedSheets = new WeakMap(); }
    static _invalidateCache(doc) {
        AdoptedStylesController._cachedSheets.delete(doc);
    }
    get hasAdoptedStyles() {
        return this._hasAdoptedStyles;
    }
    constructor(host) {
        this._hasAdoptedStyles = false;
        this._host = host;
        host.addController(this);
    }
    shouldAdoptStyles(condition) {
        condition ? this._adoptRootStyles() : this._clearAdoptedStyles();
    }
    invalidateCache(doc) {
        AdoptedStylesController._invalidateCache(doc ?? document);
    }
    hostDisconnected() {
        this._clearAdoptedStyles();
    }
    _adoptRootStyles() {
        const ownerDocument = this._host.ownerDocument;
        if (!AdoptedStylesController._cachedSheets.has(ownerDocument)) {
            AdoptedStylesController._cachedSheets.set(ownerDocument, this._cloneDocumentStyleSheets(ownerDocument));
        }
        const ctor = this._host.constructor;
        adoptStyles(this._host.shadowRoot, [
            ...ctor.elementStyles,
            ...AdoptedStylesController._cachedSheets.get(ownerDocument),
        ]);
        this._hasAdoptedStyles = true;
    }
    _clearAdoptedStyles() {
        const shadowRoot = this._host.shadowRoot;
        if (shadowRoot) {
            shadowRoot.adoptedStyleSheets = shadowRoot.adoptedStyleSheets.filter((sheet) => !AdoptedStylesController._cachedSheets
                .get(this._host.ownerDocument)
                ?.includes(sheet));
        }
        this._hasAdoptedStyles = false;
    }
    _cloneDocumentStyleSheets(ownerDocument) {
        const sheets = [];
        for (const sheet of ownerDocument.styleSheets) {
            try {
                const constructed = new CSSStyleSheet();
                let hasRules = false;
                for (const rule of sheet.cssRules) {
                    if (rule instanceof CSSImportRule) {
                        continue;
                    }
                    try {
                        constructed.insertRule(rule.cssText, constructed.cssRules.length);
                        hasRules = true;
                    }
                    catch {
                    }
                }
                if (hasRules) {
                    sheets.push(constructed);
                }
            }
            catch {
            }
        }
        return sheets;
    }
}
export function addAdoptedStylesController(host) {
    return new AdoptedStylesController(host);
}
//# sourceMappingURL=adopt-styles.js.map