@cbpds/web-components
Version:
Web components for the CBP Design System.
145 lines (144 loc) • 5.04 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpMulticol {
constructor() {
this.columns = undefined;
this.width = undefined;
this.gap = undefined;
this.rule = undefined;
this.nobreak = undefined;
this.sx = {};
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({ 'column-count': this.columns, 'column-width': this.width, 'column-gap': this.gap, 'column-rule': this.rule }, this.sx));
}
render() {
return (h(Host, { key: '87a9bf82ff63b4afbba4f5116bcf95390ceb03d8' }, h("slot", { key: '5b54a408036c4a85b519387af7b3d461d6d45c11' })));
}
static get is() { return "cbp-multicol"; }
static get originalStyleUrls() {
return {
"$": ["cbp-multicol.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-multicol.css"]
};
}
static get properties() {
return {
"columns": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the maximum number of columns"
},
"attribute": "columns",
"reflect": false
},
"width": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the minimum column width in CSS units (preferably relative units such as `rem`). \nThe column width may affect how many columns are actually used based upon available space."
},
"attribute": "width",
"reflect": false
},
"gap": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the gap between columns in CSS units (preferably relative units such as `rem`)."
},
"attribute": "gap",
"reflect": false
},
"rule": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the rule separating each column (syntax is similar to CSS borders, including a width, style, and color)."
},
"attribute": "rule",
"reflect": false
},
"nobreak": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies that children shall not be broken to spread contents across columns (using `break-inside: avoid` CSS)."
},
"attribute": "nobreak",
"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-multicol.js.map