@cbpds/web-components
Version:
Web components for the CBP Design System.
181 lines (180 loc) • 7.03 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpGridItem {
constructor() {
this.gridColumnStart = undefined;
this.gridColumnEnd = undefined;
this.gridRowStart = undefined;
this.gridRowEnd = undefined;
this.alignSelf = undefined;
this.justifySelf = undefined;
this.gridArea = undefined;
this.sx = {};
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({ 'grid-column-start': this.gridColumnStart, 'grid-column-end': this.gridColumnEnd, 'grid-row-start': this.gridRowStart, 'grid-row-end': this.gridRowEnd, 'align-self': this.alignSelf, 'justify-self': this.justifySelf, 'grid-area': this.gridArea }, this.sx));
}
render() {
return (h(Host, { key: '73e18fd2866118b68da0963975f32c109cc8fd19' }, h("slot", { key: '90bb5eabe8d0ee9a3370d1b4a622f2fc6fdeed4d' })));
}
static get is() { return "cbp-grid-item"; }
static get originalStyleUrls() {
return {
"$": ["cbp-grid-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-grid-item.css"]
};
}
static get properties() {
return {
"gridColumnStart": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the starting position/edge of the grid item in the horizontal/column plane, which is used to calculate the size (including column and row spanning) and location within the grid."
},
"attribute": "grid-column-start",
"reflect": false
},
"gridColumnEnd": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the ending position/edge (non-inclusive) of the grid item in the horizontal/column plane, which is used to calculate the size (including column and row spanning) and location within the grid."
},
"attribute": "grid-column-end",
"reflect": false
},
"gridRowStart": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the starting position/edge of the grid item in the vertical/row plane, which is used to calculate the size (including column and row spanning) and location within the grid."
},
"attribute": "grid-row-start",
"reflect": false
},
"gridRowEnd": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the ending position/edge (non-inclusive) of the grid item in the vertical/row plane, which is used to calculate the size (including column and row spanning) and location within the grid."
},
"attribute": "grid-row-end",
"reflect": false
},
"alignSelf": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Aligns this specific grid item in the vertical/column axis, perpendicular to the inline axis, separate from the parent context."
},
"attribute": "align-self",
"reflect": false
},
"justifySelf": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Justifies this specific grid item content horizontally, along the inline/row axis, separate from the parent context."
},
"attribute": "justify-self",
"reflect": false
},
"gridArea": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Names the Grid Area for use with grid-template-area on the parent."
},
"attribute": "grid-area",
"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-grid-item.js.map