@cbpds/web-components
Version:
Web components for the CBP Design System.
93 lines (92 loc) • 3.02 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpStructuredListItem {
constructor() {
this.color = undefined;
this.selected = undefined;
this.sx = {};
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
stateChangedHandler({ detail: { checked } }) {
this.selected = checked;
}
render() {
return (h(Host, { key: '4b9590464c93336fee59d004b99f63405ec56b0e', role: "listitem" }, h("slot", { key: '59ff7236113a7ebd6678184e85b034bd38e9eacd' })));
}
static get is() { return "cbp-structured-list-item"; }
static get properties() {
return {
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'danger'",
"resolved": "\"danger\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally specifies a color variant based on design tokens."
},
"attribute": "color",
"reflect": true
},
"selected": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether the item is selected."
},
"attribute": "selected",
"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"; }
static get listeners() {
return [{
"name": "stateChanged",
"method": "stateChangedHandler",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=cbp-structured-list-item.js.map