element-vir/dist/declarative-element/properties/styles.js

Heroic. Reactive. Declarative. Type safe. Web components without compromise.

import { getObjectTypedKeys, mapObjectValues } from '@augment-vir/common';
import { unsafeCSS } from '../../lit-exports/base-lit-exports.js';
/**
 * Creates the input for an element definition's `styles` callback.
 *
 * @category Internal
 */
export function createStylesCallbackInput({ hostClassNames, cssVars, slotNamesMap, }) {
    return {
        hostClasses: mapObjectValues(hostClassNames, (key, name) => {
            return {
                name: unsafeCSS(name),
                selector: unsafeCSS(`:host(.${name})`),
            };
        }),
        cssVars,
        slotNames: mapObjectValues(slotNamesMap, (key, name) => {
            return unsafeCSS(name);
        }),
    };
}
/**
 * Used inside of an element instance to apply host classes on each render.
 *
 * @category Internal
 */
export function applyHostClasses({ host, hostClassesInit, hostClassNames, state, inputs, }) {
    if (!hostClassesInit) {
        return;
    }
    getObjectTypedKeys(hostClassesInit).forEach((hostClassKey) => {
        const maybeCallback = hostClassesInit[hostClassKey];
        const hostClassName = hostClassNames[hostClassKey];
        if (typeof maybeCallback === 'function') {
            const shouldApplyHostClass = maybeCallback({
                state,
                inputs,
            });
            if (shouldApplyHostClass) {
                host.classList.add(hostClassName);
            }
            else {
                host.classList.remove(hostClassName);
            }
        }
    });
}