@cbpds/web-components
Version:
Web components for the CBP Design System.
302 lines (301 loc) • 12.9 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpGrid {
constructor() {
this.display = 'grid';
this.gridTemplateAreas = undefined;
this.gridTemplateColumns = undefined;
this.gridTemplateRows = undefined;
this.gridAutoFlow = undefined;
this.gridAutoColumns = undefined;
this.gridAutoRows = undefined;
this.alignItems = undefined;
this.justifyItems = undefined;
this.alignContent = undefined;
this.justifyContent = undefined;
this.gap = undefined;
this.breakpoint = undefined;
this.sx = {};
}
handleBreakpointChange(mql) {
mql.matches ? this.host.style.setProperty('display', 'block') : this.host.style.setProperty('display', this.display);
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({ 'display': this.display, 'grid-template-areas': this.gridTemplateAreas, 'grid-template-columns': this.gridTemplateColumns, 'grid-template-rows': this.gridTemplateRows, 'grid-auto-flow': this.gridAutoFlow, 'grid-auto-columns': this.gridAutoColumns, 'grid-auto-rows': this.gridAutoRows, 'align-content': this.alignContent, 'justify-content': this.justifyContent, 'align-items': this.alignItems, 'justify-items': this.justifyItems, 'grid-gap': this.gap }, this.sx));
}
componentDidLoad() {
if (this.breakpoint) {
const mediaQueryList = window === null || window === void 0 ? void 0 : window.matchMedia(`(max-width: ${this.breakpoint})`);
if (mediaQueryList) {
mediaQueryList.addEventListener('change', mql => this.handleBreakpointChange(mql));
this.handleBreakpointChange(mediaQueryList);
}
}
}
render() {
return (h(Host, { key: '124f9682096bcac1a5a772f450f6e8e59767bb8e' }, h("slot", { key: '4f06047960bcb9abd97ce1f4e973018893c5d320' })));
}
static get is() { return "cbp-grid"; }
static get originalStyleUrls() {
return {
"$": ["cbp-grid.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-grid.css"]
};
}
static get properties() {
return {
"display": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'grid' | 'inline-grid'",
"resolved": "\"grid\" | \"inline-grid\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the grid display. Defaults to \"grid\"."
},
"attribute": "display",
"reflect": true,
"defaultValue": "'grid'"
},
"gridTemplateAreas": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the grid via named grid areas (providing a visualization of the structure of the grid), which are not associated with any particular grid item, but can be referenced from the grid-placement properties."
},
"attribute": "grid-template-areas",
"reflect": false
},
"gridTemplateColumns": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'none' | string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the track sizing functions (and optionally line names) of the grid columns as a space-separated track list."
},
"attribute": "grid-template-columns",
"reflect": false
},
"gridTemplateRows": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'none' | string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the track sizing functions (and optionally line names) of the grid rows as a space-separated track list."
},
"attribute": "grid-template-rows",
"reflect": false
},
"gridAutoFlow": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'row' | 'column' | 'row dense' | 'column dense'",
"resolved": "\"column dense\" | \"column\" | \"row dense\" | \"row\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies how auto-placed items get flowed into the grid."
},
"attribute": "grid-auto-flow",
"reflect": false
},
"gridAutoColumns": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the size (in CSS units) of implicitly-created columns using the auto-placement algorithm."
},
"attribute": "grid-auto-columns",
"reflect": false
},
"gridAutoRows": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the size (in CSS units) of implicitly-created rows using the auto-placement algorithm."
},
"attribute": "grid-auto-rows",
"reflect": false
},
"alignItems": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'normal' | 'stretch' | 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline'",
"resolved": "\"baseline\" | \"center\" | \"end\" | \"first baseline\" | \"last baseline\" | \"normal\" | \"self-end\" | \"self-start\" | \"start\" | \"stretch\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Aligns grid items in the vertical/column axis, perpendicular to the inline axis."
},
"attribute": "align-items",
"reflect": false
},
"justifyItems": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'legacy' | 'normal' | 'stretch' | 'center' | 'safe center' | 'unsafe center' | 'start' | 'end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline' | 'first baseline' | 'last baseline'",
"resolved": "\"baseline\" | \"center\" | \"end\" | \"first baseline\" | \"last baseline\" | \"left\" | \"legacy\" | \"normal\" | \"right\" | \"safe center\" | \"self-end\" | \"self-start\" | \"start\" | \"stretch\" | \"unsafe center\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Justifies grid content horizontally, along the inline/row axis."
},
"attribute": "justify-items",
"reflect": false
},
"alignContent": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'normal' | 'stretch' | 'center' | 'start' | 'end' | 'space-around' | 'space-between' | 'space-evenly' | 'safe center' | 'unsafe center'",
"resolved": "\"center\" | \"end\" | \"normal\" | \"safe center\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\" | \"stretch\" | \"unsafe center\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Aligns grid content vertically when total grid size is smaller than container."
},
"attribute": "align-content",
"reflect": false
},
"justifyContent": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'normal' | 'stretch' | 'center' | 'start' | 'end' | 'left' | 'right' | 'space-around' | 'space-between' | 'space-evenly' | 'safe center' | 'unsafe center'",
"resolved": "\"center\" | \"end\" | \"left\" | \"normal\" | \"right\" | \"safe center\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\" | \"stretch\" | \"unsafe center\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Justifies grid content horizontally when total grid size is smaller than container."
},
"attribute": "justify-content",
"reflect": false
},
"gap": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the spacing between grid items in the form of a single value or space-separated row-gap and column-gap values (in CSS units)."
},
"attribute": "gap",
"reflect": false
},
"breakpoint": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The size (in CSS units; preferably relative units such as `rem`) below which the grid items linearize."
},
"attribute": "breakpoint",
"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.js.map