@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 2.5 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as t,H as i,h as s,c as e}from"./p-c5a784ab.js";import{s as n}from"./p-9c1b2f31.js";const d="cbp-grid:not([hidden]){display:grid;max-width:100%}";const o=d;const a=t(class t extends i{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(t){t.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)||{}}n(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 t=window===null||window===void 0?void 0:window.matchMedia(`(max-width: ${this.breakpoint})`);if(t){t.addEventListener("change",(t=>this.handleBreakpointChange(t)));this.handleBreakpointChange(t)}}}render(){return s(e,{key:"124f9682096bcac1a5a772f450f6e8e59767bb8e"},s("slot",{key:"4f06047960bcb9abd97ce1f4e973018893c5d320"}))}get host(){return this}static get style(){return o}},[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 r(){if(typeof customElements==="undefined"){return}const t=["cbp-grid"];t.forEach((t=>{switch(t){case"cbp-grid":if(!customElements.get(t)){customElements.define(t,a)}break}}))}const h=a;const u=r;export{h as CbpGrid,u as defineCustomElement};
//# sourceMappingURL=cbp-grid.js.map