@cbpds/web-components
Version:
Web components for the CBP Design System.
109 lines (108 loc) • 3.87 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpContainer {
constructor() {
this.background = undefined;
this.textColor = undefined;
this.width = undefined;
this.sx = {};
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({ "--cbp-container-color-text": this.textColor, "--cbp-container-color-background": this.background, "--cbp-container-inner-width": this.width }, this.sx));
}
render() {
return (h(Host, { key: 'd3646c0825f62fbb3196c0b0ac4e1560dd83eeb3' }, h("div", { key: '2b43031637f1670ec2186c5184b20af8285235c9', class: "cbp-container--inner" }, h("slot", { key: '6ac0219fbca7b5afecd19ba85983a24ac732b85b' }))));
}
static get is() { return "cbp-container"; }
static get originalStyleUrls() {
return {
"$": ["cbp-container.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-container.css"]
};
}
static get properties() {
return {
"background": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the CSS background of the parent container, which could be a solid color, an image, a gradient, or any combination (or multiples) achievable via the CSS `background` property."
},
"attribute": "background",
"reflect": false
},
"textColor": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the text color for content within the container, since it could be on any background."
},
"attribute": "text-color",
"reflect": false
},
"width": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the width of the inner container area."
},
"attribute": "width",
"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-container.js.map