@trimble-oss/moduswebcomponents/modus-wc/p-ac27e588.entry.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import{r as t,d as e,h as i,F as a,g as o}from"./p-C1-Dpkp7.js";import{h as s}from"./p-tWS3Egrk.js";const d=class{constructor(i){t(this,i),this.panelOpened=e(this,"panelOpened",7),this.panelClosed=e(this,"panelClosed",7),this.customClass="",this.expanded=!1,this.pushContent=!1,this.isInitialLoad=!0,this.handlePanelClose=()=>{this.closePanel()}}componentWillLoad(){s(this.el,!0)}componentDidLoad(){this.pushContent&&this.expanded&&this.targetElement&&this.adjustContent(),this.isInitialLoad=!1}handleExpandedChange(t){this.isInitialLoad||(t?this.openPanel():this.closePanel())}handleTargetChange(){this.expanded&&this.pushContent&&this.targetElement&&this.adjustContent()}openPanel(){this.panelOpened.emit(),this.pushContent&&this.adjustContent()}closePanel(){this.panelClosed.emit(),this.pushContent&&this.adjustContent()}adjustContent(){this.pushContent&&this.targetElement&&(this.targetElement.classList.add("modus-wc-utility-panel-push-target"),this.expanded?this.targetElement.classList.add("modus-wc-utility-panel-pushed"):this.targetElement.classList.remove("modus-wc-utility-panel-pushed"))}hasSlotContent(t){return!!this.el.querySelector(`[slot="${t}"]`)}render(){const t=this.hasSlotContent("header"),e=this.hasSlotContent("footer");return i("div",{key:"77463e7a669f37150359cac5847e46029bcdca1a",class:{"modus-wc-utility-panel":!0,open:this.expanded,[this.customClass]:!!this.customClass}},i("div",{key:"dd099aaa81f11f3c976f6673caad64fbc62fb4a1",class:"modus-wc-utility-panel-content"},t&&i(a,{key:"9b4cfca0336d99891538efe84053700fc8e84b65"},i("div",{key:"f180e9c5fb93f5cb7423bda2089822c9ed057fae",class:"modus-wc-utility-panel-header"},i("slot",{key:"f25a53917a0c58f7559f13e343eeff418f612760",name:"header"})),i("hr",{key:"373b5b57c1ea754374f5ad58f786c11deae0108c"})),i("div",{key:"8a5360e1e9cdee97ca05d8ca1578123a22ccd195",class:"modus-wc-utility-panel-body"},i("slot",{key:"3c59415e138d71eeb98ba3d19a045f69a6952043",name:"body"})),e&&i(a,{key:"411f7457beb4fececb3698931dfbe2a8d42f9389"},i("hr",{key:"2e87e52130e5e6a016f3ebd32eae535e93961064"}),i("div",{key:"2ce4306261cc637318f205b2df42eb1d4bcc6fcd",class:"modus-wc-utility-panel-footer"},i("slot",{key:"4f6ce2b18019f85c1181e02562d43ae1c273beeb",name:"footer"})))))}get el(){return o(this)}static get watchers(){return{expanded:["handleExpandedChange"],targetElement:["handleTargetChange"]}}};d.style="modus-wc-utility-panel{--modus-wc-utility-panel-padding:1rem;--modus-wc-utility-panel-width:312px;--modus-wc-utility-panel-header-height:50px;--modus-wc-utility-panel-border-color:var(--modus-wc-color-base-200);--modus-wc-utility-panel-box-shadow:-2px 0 4px rgb(0, 0, 0, 0.1);--modus-wc-utility-panel-transition-duration:0.3s}.modus-wc-utility-panel{background-color:var(--modus-wc-color-base-page);box-shadow:var(--modus-wc-utility-panel-box-shadow);color:var(--modus-wc-utility-panel-color);height:100%;position:absolute;right:calc(var(--modus-wc-utility-panel-width) * -1 - 12px);top:0;transition:right var(--modus-wc-utility-panel-transition-duration) ease-out;width:var(--modus-wc-utility-panel-width);z-index:1000}.modus-wc-utility-panel.open{background:var(--modus-wc-color-base-page);right:0;transition:right var(--modus-wc-utility-panel-transition-duration) ease-out}.modus-wc-utility-panel .modus-wc-utility-panel-content{background:var(--modus-wc-color-base-page);display:flex;flex-direction:column;height:100%}.modus-wc-utility-panel .modus-wc-utility-panel-content .modus-wc-utility-panel-header,.modus-wc-utility-panel .modus-wc-utility-panel-content .modus-wc-utility-panel-footer{align-items:center;background:var(--modus-wc-color-base-page);display:flex;height:var(--modus-wc-utility-panel-header-height);padding:0 var(--modus-wc-utility-panel-padding)}.modus-wc-utility-panel .modus-wc-utility-panel-content .modus-wc-utility-panel-body{background:var(--modus-wc-color-base-page);flex:1;overflow:auto;padding:var(--modus-wc-utility-panel-padding)}.modus-wc-utility-panel .modus-wc-utility-panel-content hr{border:none;border-top:1px solid var(--modus-wc-utility-panel-border-color);margin:0}";export{d as modus_wc_utility_panel}