@cbpds/web-components
Version:
Web components for the CBP Design System.
95 lines (94 loc) • 3.17 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpSection {
constructor() {
this.tag = 'none';
this.accessibilityText = undefined;
this.sx = {};
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
render() {
const Tag = this.tag;
return (h(Host, { key: 'c9aa802a0a6c288a8ed74130e47e9547911a9182' }, this.tag != 'none' ?
h(Tag, { "aria-label": this.accessibilityText }, h("slot", null))
: h("slot", null)));
}
static get is() { return "cbp-section"; }
static get originalStyleUrls() {
return {
"$": ["cbp-section.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-section.css"]
};
}
static get properties() {
return {
"tag": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'div' | 'section' | 'none'",
"resolved": "\"div\" | \"none\" | \"section\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the tag to render. Use `section` with the `accessibilityText` property to make an accessible landmark element."
},
"attribute": "tag",
"reflect": false,
"defaultValue": "'none'"
},
"accessibilityText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies an accessible label as `aria-label` to make a `section` tag an accessible landmark element. Likely has no effect otherwise."
},
"attribute": "accessibility-text",
"reflect": false
},
"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-section.js.map