UNPKG

@scania/tegel

Version:
45 lines (40 loc) 2 kB
'use strict'; var index = require('./index-DGsdvbvx.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) { index.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 (index.h(TagType, { key: '01743312d4accf10f2d372e149880bb8b53a9a97', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, index.h("slot", { key: '84c2a61a6f4fc4c118ce73c83d78ca18a1607d0c' }))); } get host() { return index.getElement(this); } }; TdsBlock.style = blockCss(); exports.tds_block = TdsBlock;