@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 2.82 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as i,H as t,h as e,c as n}from"./p-9caf8482.js";import{s}from"./p-9c1b2f31.js";const d=":root{--cbp-grid-linearized-margin:0}cbp-grid:not([hidden]){display:grid;max-width:100%}cbp-grid:not([hidden]).cbp-grid-linearized{display:block !important}cbp-grid:not([hidden]).cbp-grid-linearized>*{margin-block-end:var(--cbp-grid-linearized-margin)}";const r=d;const o=i(class i extends t{constructor(){super();this.__registerHost();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(i){i.matches?this.host.classList.add("cbp-grid-linearized"):this.host.classList.remove("cbp-grid-linearized")}componentWillLoad(){var i;if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}s(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,"--cbp-grid-linearized-margin":this.gap!=undefined?(i=this.gap.split(" "))===null||i===void 0?void 0:i[0]:undefined},this.sx))}componentDidLoad(){if(this.breakpoint){const i=window===null||window===void 0?void 0:window.matchMedia(`(max-width: ${this.breakpoint})`);if(i){i.addEventListener("change",(i=>this.handleBreakpointChange(i)));this.handleBreakpointChange(i)}}}render(){return e(n,{key:"c788a59a27dca9f0867a297097ceb04029d943f3"},e("slot",{key:"2ba6d5b5162c3da7e198962d792a2f027a809571"}))}get host(){return this}static get style(){return r}},[4,"cbp-grid",{display:[513],gridTemplateAreas:[1,"grid-template-areas"],gridTemplateColumns:[1,"grid-template-columns"],gridTemplateRows:[1,"grid-template-rows"],gridAutoFlow:[1,"grid-auto-flow"],gridAutoColumns:[1,"grid-auto-columns"],gridAutoRows:[1,"grid-auto-rows"],alignItems:[1,"align-items"],justifyItems:[1,"justify-items"],alignContent:[1,"align-content"],justifyContent:[1,"justify-content"],gap:[1],breakpoint:[1],sx:[8]}]);function a(){if(typeof customElements==="undefined"){return}const i=["cbp-grid"];i.forEach((i=>{switch(i){case"cbp-grid":if(!customElements.get(i)){customElements.define(i,o)}break}}))}const c=o;const g=a;export{c as CbpGrid,g as defineCustomElement};
//# sourceMappingURL=cbp-grid.js.map