p-cd36525e.entry.js

/*!
 * Built by BASIS
 * Copyright BASIS International Ltd.
 */
import{r as t,h as s,H as a,g as i}from"./p-0f27354a.js";const e=class{constructor(s){t(this,s),this.currentColumns=2,this.currentBreakpoint=null,this.breakpoints=[{minWidth:0,columns:1,name:"default"},{minWidth:"20em",columns:1,name:"small"},{minWidth:"40em",columns:2,name:"medium"}]}connectedCallback(){this.handleResize=this.handleResize.bind(this),this.handleMutations=this.handleMutations.bind(this),this.setupResizeObserver(),this.setupMutationObserver()}disconnectedCallback(){this.resizeObserver.disconnect(),this.mutationObserver.disconnect()}componentDidLoad(){this.updateLayout()}setupResizeObserver(){this.resizeObserver=new ResizeObserver(this.handleResize),this.resizeObserver.observe(this.el)}setupMutationObserver(){this.mutationObserver=new MutationObserver(this.handleMutations);const t={attributes:!0};(this.el?Array.from(this.el.children):[]).forEach((s=>{this.mutationObserver.observe(s,t)}))}convertToPixels(t){if("number"==typeof t)return t;{const s=document.createElement("div");s.style.width=t,document.body.appendChild(s);const a=s.clientWidth;return document.body.removeChild(s),a}}updateLayout(){((this.el?Array.from(this.el.children):[])||[]).forEach((t=>{let s=null,a=null;this.currentBreakpoint&&(s=t.getAttribute(`data-span-${this.currentBreakpoint}`),a=t.getAttribute(`data-column-${this.currentBreakpoint}`)),s||(s=t.getAttribute("data-span"));let i=s?parseInt(s,10):1;i>this.currentColumns&&(i=this.currentColumns),t.style.gridColumn=`span ${Math.min(i,this.currentColumns)}`,a||(a=t.getAttribute("data-column"));let e=a?parseInt(a,10):-1;e>=1&&(e>this.currentColumns&&(e=this.currentColumns),t.style.gridColumn=`${e} / span ${Math.min(i,this.currentColumns)}`)}))}handleResize(){const t=this.el.clientWidth,s=this.breakpoints.slice().reverse().find((s=>t>=this.convertToPixels(s.minWidth)));s?(this.currentColumns=s.columns,this.currentBreakpoint=s.name||null):(this.currentColumns=1,this.currentBreakpoint=null),this.updateLayout()}handleMutations(t){for(const s of t)if("attributes"===s.type){const t=s.attributeName;if(t.startsWith("data-span")||t.startsWith("data-column")){this.updateLayout();break}}}render(){const t=this.currentColumns.toString();return s(a,{key:"6260ee9eb745fa25c923538375ba54d60774ea15","data-columns":t,"data-breakpoint":this.currentBreakpoint||""},s("div",{key:"4a5a2734476a9ac175002ca71c4be92c5d58a07c",part:"control",style:{"--columns":t}},s("slot",{key:"b3e365971c16d02118120c6a3962c38ffb0ff476",onSlotchange:this.updateLayout})))}get el(){return i(this)}};e.style=":host{display:block}[part=control]{align-items:var(--dwc-columns-layout-vertical-alignment, auto);display:grid;grid-column-gap:var(--dwc-columns-layout-horizontal-spacing, 1em);grid-row-gap:var(--dwc-columns-layout-vertical-spacing, 1em);grid-template-columns:repeat(var(--columns, 2), 1fr);justify-items:var(--dwc-columns-layout-horizontal-alignment, auto)}::slotted(*){grid-column:span 1}";export{e as dwc_columns_layout}