@scania/tegel
Version:
Tegel Design System
100 lines (99 loc) • 3.48 kB
JavaScript
import { h } from "@stencil/core";
/**
* @slot - <default> - <b>Default</b> slot for content inside the block.
*
* @example
* <tds-block>
* <section>Semantic section content</section>
* </tds-block>
*/
export class TdsBlock {
constructor() {
/** 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' })));
}
static get is() { return "tds-block"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["block.scss"]
};
}
static get styleUrls() {
return {
"$": ["block.css"]
};
}
static get properties() {
return {
"modeVariant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary' | null",
"resolved": "\"primary\" | \"secondary\" | null",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Mode variant of the component, based on current mode."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "mode-variant",
"defaultValue": "null"
},
"componentTag": {
"type": "string",
"mutable": false,
"complexType": {
"original": "| 'section'\n | 'div'\n | 'article'\n | 'aside'\n | 'header'\n | 'footer'\n | 'nav'\n | 'main'",
"resolved": "\"article\" | \"aside\" | \"div\" | \"footer\" | \"header\" | \"main\" | \"nav\" | \"section\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the HTML tag to be used for the component wrapper."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "component-tag",
"defaultValue": "'div'"
}
};
}
static get elementRef() { return "host"; }
}