@cbpds/web-components
Version:
Web components for the CBP Design System.
235 lines (234 loc) • 9.58 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpFlex {
constructor() {
this.display = 'flex';
this.wrap = undefined;
this.direction = 'row';
this.alignItems = 'stretch';
this.alignContent = 'stretch';
this.justifyContent = 'flex-start';
this.gap = undefined;
this.breakpoint = undefined;
this.contentBreakpoint = undefined;
this.sx = {};
}
handleBreakpointChange(mql) {
mql.matches ? this.host.classList.add('cbp-flex-linearized') : this.host.classList.remove('cbp-flex-linearized');
}
componentWillLoad() {
var _a;
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({ 'display': this.display, 'flex-wrap': this.wrap, 'flex-direction': this.direction, 'align-items': this.alignItems, 'align-content': this.alignContent, 'justify-content': this.justifyContent, 'gap': this.gap, '--cbp-flex-linearized-margin': this.gap != undefined ? (_a = this.gap.split(' ')) === null || _a === void 0 ? void 0 : _a[0] : undefined }, 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: 'fdb7a14b3d02594f182eefbeb92d3c50ba8f006f' }, h("slot", { key: 'af9652912b7528de4aa3ccbcb227d1b7b94e7d1e' })));
}
static get is() { return "cbp-flex"; }
static get originalStyleUrls() {
return {
"$": ["cbp-flex.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-flex.css"]
};
}
static get properties() {
return {
"display": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'flex' | 'inline-flex'",
"resolved": "\"flex\" | \"inline-flex\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the display mode. Defaults to \"flex\""
},
"attribute": "display",
"reflect": true,
"defaultValue": "'flex'"
},
"wrap": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'nowrap' | 'wrap' | 'wrap-reverse'",
"resolved": "\"nowrap\" | \"wrap\" | \"wrap-reverse\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the wrapping behavior of the flex children. Browser default behavior is \"nowrap\"."
},
"attribute": "wrap",
"reflect": false
},
"direction": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'row' | 'row-reverse' | 'column' | 'column-reverse'",
"resolved": "\"column\" | \"column-reverse\" | \"row\" | \"row-reverse\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies how flex items are placed in the flex container by setting the direction of the flex container\u2019s main axis. Defaults to \"row\" for a horizontal flex context."
},
"attribute": "direction",
"reflect": false,
"defaultValue": "'row'"
},
"alignItems": {
"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 for all of the flex container\u2019s items along the cross-axis. Defaults to \"stretch\"."
},
"attribute": "align-items",
"reflect": false,
"defaultValue": "'stretch'"
},
"alignContent": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch'",
"resolved": "\"center\" | \"flex-end\" | \"flex-start\" | \"space-around\" | \"space-between\" | \"stretch\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the alignment of a flex container's items within the flex container (only when there is extra space in the cross-axis)."
},
"attribute": "align-content",
"reflect": false,
"defaultValue": "'stretch'"
},
"justifyContent": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'",
"resolved": "\"center\" | \"flex-end\" | \"flex-start\" | \"space-around\" | \"space-between\" | \"space-evenly\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the alignment of flex items along the main axis (of the current line) of the flex container."
},
"attribute": "justify-content",
"reflect": false,
"defaultValue": "'flex-start'"
},
"gap": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the gap between items in CSS units (preferably relative units such as rem). Accepts a single value for horizontal and vertical gap or two values representing column gap and row gap, respectively."
},
"attribute": "gap",
"reflect": false
},
"breakpoint": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the size at which the flex children are linearized, specified in CSS units (preferably relative units such as rem)."
},
"attribute": "breakpoint",
"reflect": false
},
"contentBreakpoint": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Not yet implemented"
},
"attribute": "content-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-flex.js.map