@cbpds/web-components
Version:
Web components for the CBP Design System.
92 lines (91 loc) • 3.31 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpActionBar {
constructor() {
this.variant = 'inline';
this.context = undefined;
this.sx = {};
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
render() {
return (h(Host, { key: 'c7567f55be6ab46b58ccc6c5ada38dc5269a0e46' }, h("slot", { key: 'fad380f830f756bcc5958d24acff68c934311fcb', name: "cbp-action-bar-info" }), h("slot", { key: 'ef001c72af94d9ec44cd272f4a791402a517a4cc' })));
}
static get is() { return "cbp-action-bar"; }
static get originalStyleUrls() {
return {
"$": ["cbp-action-bar.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-action-bar.css"]
};
}
static get properties() {
return {
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'inline' | 'floating'",
"resolved": "\"floating\" | \"inline\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether the action bar is inline or floating. Defaults to inline."
},
"attribute": "variant",
"reflect": true,
"defaultValue": "'inline'"
},
"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-action-bar.js.map