@scania/tegel
Version:
Tegel Design System
43 lines (39 loc) • 2 kB
JavaScript
import { r as registerInstance, h, a as getElement } from './index-9xxNGlso.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 TdsBlock = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** Mode variant of the component, based on current mode. */
this.modeVariant = null;
/** Specifies the HTML tag to be used for the component wrapper. */
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: '01743312d4accf10f2d372e149880bb8b53a9a97', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '84c2a61a6f4fc4c118ce73c83d78ca18a1607d0c' })));
}
get host() { return getElement(this); }
};
TdsBlock.style = blockCss();
export { TdsBlock as tds_block };