@cbpds/web-components
Version:
Web components for the CBP Design System.
129 lines (128 loc) • 5.08 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpTypography {
constructor() {
this.tag = "span";
this.variant = undefined;
this.divider = undefined;
this.context = undefined;
this.sx = {};
}
componentDidLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.renderedTag, Object.assign({}, this.sx));
}
render() {
const Tag = this.tag;
return (h(Host, { key: '5efe53299c88ae8f9eef2cb82758c3f20d1cc882' }, h(Tag, { key: '3bcba73d1d5ae047842a6e3343377201891aa30c', ref: (el) => this.renderedTag = el }, h("slot", { key: 'b99e109f57ea080e23c1f2658ed9c3e161016dbc' }))));
}
static get is() { return "cbp-typography"; }
static get originalStyleUrls() {
return {
"$": ["cbp-typography.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-typography.css"]
};
}
static get properties() {
return {
"tag": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'code' | 'pre' | 'div' | 'span'",
"resolved": "\"code\" | \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"pre\" | \"span\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the semantic tag to be rendered."
},
"attribute": "tag",
"reflect": false,
"defaultValue": "\"span\""
},
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'masthead-1' | 'masthead-2' | 'heading-xxl' | 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'heading-xs' | 'body-text' | 'subhead' | 'heading-dialog'",
"resolved": "\"body-text\" | \"heading-dialog\" | \"heading-lg\" | \"heading-md\" | \"heading-sm\" | \"heading-xl\" | \"heading-xs\" | \"heading-xxl\" | \"masthead-1\" | \"masthead-2\" | \"subhead\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the visual style of the text regardless of the semantic tag."
},
"attribute": "variant",
"reflect": true
},
"divider": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'underline' | 'fill'",
"resolved": "\"fill\" | \"underline\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether the text contains visual treatments that act as a divider."
},
"attribute": "divider",
"reflect": true
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-typography.js.map