@cbpds/web-components
Version:
Web components for the CBP Design System.
148 lines (147 loc) • 5.33 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpList {
constructor() {
this.variant = undefined;
this.tag = 'ul';
this.size = 'normal';
this.accessibilityText = undefined;
this.sx = {};
this.context = undefined;
}
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: '508de0dd5dbcf7f09cc98ae4fc869c7fdb6fb905' }, h(Tag, { key: '3443808040cd86c1d0145fc9ddfcd5390b61d45f', ref: (el) => this.renderedTag = el, "aria-label": this.accessibilityText }, h("slot", { key: '21a8ebbfbd35e3e52062b6c85f8d620c00f5131a' }))));
}
static get is() { return "cbp-list"; }
static get originalStyleUrls() {
return {
"$": ["cbp-list.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-list.css"]
};
}
static get properties() {
return {
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'unstyled' | 'link' | 'icon'",
"resolved": "\"icon\" | \"link\" | \"unstyled\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the variant of list (unstyled, icon, special)"
},
"attribute": "variant",
"reflect": true
},
"tag": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'ul' | 'ol' | 'dl'",
"resolved": "\"dl\" | \"ol\" | \"ul\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the semantic tag to be rendered."
},
"attribute": "tag",
"reflect": false,
"defaultValue": "'ul'"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'normal' | 'large'",
"resolved": "\"large\" | \"normal\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the font size for the list"
},
"attribute": "size",
"reflect": true,
"defaultValue": "'normal'"
},
"accessibilityText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies an accessible label for the list as an `aria-label`, similar to a table `caption`."
},
"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": "{}"
},
"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
}
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-list.js.map