@cbpds/web-components
Version:
Web components for the CBP Design System.
145 lines (144 loc) • 5.45 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpFlexItem {
constructor() {
this.alignSelf = undefined;
this.order = undefined;
this.flexGrow = undefined;
this.flexShrink = undefined;
this.flexBasis = undefined;
this.sx = {};
}
componentWillLoad() {
if (typeof this.sx == "string") {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({ 'align-self': this.alignSelf, 'order': this.order, 'flex-grow': this.flexGrow, 'flex-shrink': this.flexShrink, 'flex-basis': this.flexBasis }, this.sx));
}
render() {
return (h(Host, { key: '6626f482159918ae5b06af8aeb700e0a6cb3f403' }, h("slot", { key: '69fb7a18bc77181b74a4316eb528eda820700e1f' })));
}
static get is() { return "cbp-flex-item"; }
static get originalStyleUrls() {
return {
"$": ["cbp-flex-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-flex-item.css"]
};
}
static get properties() {
return {
"alignSelf": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"auto\" | \"stretch\" | \"flex-start\" | \"flex-end\" | \"center\" | \"baseline\"",
"resolved": "\"auto\" | \"baseline\" | \"center\" | \"flex-end\" | \"flex-start\" | \"stretch\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the alignment of the specific flex item along the cross-axis separate from the parent context."
},
"attribute": "align-self",
"reflect": false
},
"order": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies an ordinal group value for sorting this flex item within its group. Defaults to zero, which renders the items in DOM order."
},
"attribute": "order",
"reflect": false
},
"flexGrow": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the growth factor the item will grow at relative to other items. Defaults to zero, as flex items do not grow by default."
},
"attribute": "flex-grow",
"reflect": false
},
"flexShrink": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the shrink factor the item will shrink at relative to other items. Defaults to 1, as flex items will shrink at an equal rate by default, taking content size into consideration."
},
"attribute": "flex-shrink",
"reflect": false
},
"flexBasis": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies a basis (in CSS units or content values) for calculating flex behavior different from the default of \"auto\" (which usually evaluates to \"content\")."
},
"attribute": "flex-basis",
"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-flex-item.js.map