@scania/tegel/dist/components/tds-block.js

Tegel Design System

import { p as proxyCustomElement, H, h } from './p-28ef5186.js';

const blockCss = ".tds-block{box-sizing:border-box;color:var(--tds-block-color);background-color:var(--tds-block-background);border-radius:4px;padding:16px;font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls)}.tds-block *{box-sizing:border-box}.tds-mode-variant-primary{background-color:var(--tds-block-background-primary)}.tds-mode-variant-secondary{background-color:var(--tds-block-background-secondary)}.tds-block-even{background-color:var(--tds-block-background-even)}.tds-block-odd{background-color:var(--tds-block-background-odd)}";
const TdsBlockStyle0 = blockCss;

const TdsBlock$1 = /*@__PURE__*/ proxyCustomElement(class TdsBlock extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.modeVariant = null;
        this.componentTag = 'div';
    }
    getNestingLevel() {
        let level = 0;
        let parent = this.host.parentElement;
        while (parent) {
            if (parent.tagName.toLowerCase() === 'tds-block') {
                level++;
            }
            parent = parent.parentElement;
        }
        return level;
    }
    render() {
        const TagType = this.componentTag;
        const nestingLevel = this.getNestingLevel();
        let evenOddClass = '';
        if (this.modeVariant === null) {
            if (nestingLevel % 2 === 0) {
                evenOddClass = 'tds-block-even';
            }
            else {
                evenOddClass = 'tds-block-odd';
            }
        }
        return (h(TagType, { key: '34385f3ac01d173e6bb568432418304186d261c7', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '569b04916fb165fb460711ec659ed2dc3e9ebd12' })));
    }
    get host() { return this; }
    static get style() { return TdsBlockStyle0; }
}, [1, "tds-block", {
        "modeVariant": [1, "mode-variant"],
        "componentTag": [1, "component-tag"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["tds-block"];
    components.forEach(tagName => { switch (tagName) {
        case "tds-block":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TdsBlock$1);
            }
            break;
    } });
}
defineCustomElement$1();

const TdsBlock = TdsBlock$1;
const defineCustomElement = defineCustomElement$1;

export { TdsBlock, defineCustomElement };