@trimble-oss/moduswebcomponents/modus-wc/p-e64359b5.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,c as e,h as i,F as a,g as o}from"./p-D_4hbGjA.js";const s=class{constructor(i){t(this,i),this.panelOpened=e(this,"panelOpened"),this.panelClosed=e(this,"panelClosed"),this.expanded=!1,this.pushContent=!1,this.isInitialLoad=!0,this.handlePanelClose=()=>{this.closePanel()}}componentWillLoad(){}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:"1e4c8bbb47a878618cedccc729c125fc3c6857d8",class:{"modus-wc-utility-panel":!0,open:this.expanded}},i("div",{key:"6eeaf4322d5adef3da91a1b8e2bffeea67f8e5e7",class:"modus-wc-utility-panel-content"},t&&i(a,{key:"7345a4fb5eaae78bcc74a24ba050513d00fc14c6"},i("div",{key:"129956cb50472d1d1a40f76fa14f203febb406b0",class:"modus-wc-utility-panel-header"},i("slot",{key:"a3dd72d74f565e7c265f62eb78c23bcf4f35ff65",name:"header"})),i("hr",{key:"29b097b7ebc34ce0331e46e0cb367889c96e6fae"})),i("div",{key:"5b466b707dc2b3433d7fbc8206bd229763eabf21",class:"modus-wc-utility-panel-body"},i("slot",{key:"54fa25885059952ee5d9e536db3dec5331e38631",name:"body"})),e&&i(a,{key:"ada271406c99a2140318b6681bc5c93f0a249ef2"},i("hr",{key:"46569af475f6ea614e76b359852104f439ac09c3"}),i("div",{key:"956ac9cac387f68ad33f40ff47c4116a0d1ea376",class:"modus-wc-utility-panel-footer"},i("slot",{key:"99951432e6b67eb2c14d2c73293a4cb872612ca9",name:"footer"})))))}get el(){return o(this)}static get watchers(){return{expanded:["handleExpandedChange"],targetElement:["handleTargetChange"]}}};s.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:#cbcdd6;--modus-wc-utility-panel-box-shadow:-2px 0 4px rgba(0, 0, 0, 0.1);--modus-wc-utility-panel-transition-duration:0.3s}.modus-wc-utility-panel{background-color:var(--modus-wc-color-base-100);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-100);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-100);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-100);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{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{s as modus_wc_utility_panel}