@trimble-oss/moduswebcomponents/modus-wc/p-0202dce9.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,H as s,g as a}from"./p-D5XAQERj.js";import{i as o}from"./p-DlW2F98o.js";const n=class{constructor(i){t(this,i),this.expandedChange=e(this,"expandedChange"),this.inheritedAttributes={},this.minWidth="4rem",this.collapseOnClickOutside=!0,this.customClass="",this.expanded=!1,this.maxWidth="256px",this.mode="overlay",this.targetContent="",this.handleClickOutside=t=>{this.expanded&&this.collapseOnClickOutside&&this.navRef&&((t.composedPath?t.composedPath():[t.target]).includes(this.navRef)||(this.expanded=!1))}}handleExpandedChange(){this.setTargetContentMargin(this.expanded,this.mode,this.targetContent),this.expandedChange.emit(this.expanded)}handleModeChange(t){this.setTargetContentMargin(this.expanded,t,this.targetContent)}handleTargetContentChange(t){this.setTargetContentMargin(this.expanded,this.mode,t)}componentWillLoad(){this.inheritedAttributes=o(this.el)}connectedCallback(){this.collapseOnClickOutside&&document.addEventListener("click",this.handleClickOutside,!0)}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside,!0)}getClasses(){const t=["modus-wc-side-navigation"],e=(({expanded:t})=>{let e="";return t&&(e=`${e} modus-wc-side-navigation-expanded`),e.trim()})({expanded:this.expanded});return e&&t.push(e),this.customClass&&t.push(this.customClass),t.join(" ")}setTargetContentMargin(t,e,i){const s=document.querySelector(i);s&&"style"in s&&(s.style.marginLeft=t&&"push"===e?this.maxWidth:this.minWidth)}render(){return i(s,{key:"6bce6f85c55103144d1afeec06f484cc9babb6e6"},i("nav",Object.assign({key:"cb621050963ab5b06053ca2a37cf0af495b75571"},this.inheritedAttributes,{class:this.getClasses(),ref:t=>this.navRef=t,style:{width:this.expanded?this.maxWidth:this.minWidth}}),i("div",{key:"49a2fead0e7231c45928e8d1b995bd8c47851955",class:"side-navigation-content"},i("slot",{key:"b53246d439a92e9e8354ef2ca5619dc3bd002b06"}))))}get el(){return a(this)}static get watchers(){return{expanded:["handleExpandedChange"],mode:["handleModeChange"],targetContent:["handleTargetContentChange"]}}};n.style="modus-wc-side-navigation{display:block;height:100vh;position:relative}modus-wc-side-navigation .modus-wc-side-navigation{background:var(--modus-wc-color-white);box-shadow:rgba(36, 35, 45, 0.3) 1px 0 4px;color:var(--modus-wc-color-trimble-gray);display:flex;flex-direction:column;flex-shrink:0;height:100%;max-height:100vh;min-height:0;overflow:hidden;overflow-y:auto;position:absolute;transition:width 0.2s ease-out;z-index:999}modus-wc-side-navigation .side-navigation-content{background:var(--modus-wc-color-white);color:var(--modus-wc-color-trimble-gray);flex:1 1 auto}[data-theme=modus-classic-dark] modus-wc-side-navigation .side-navigation-content,[data-theme=modus-modern-dark] modus-wc-side-navigation .side-navigation-content{background:var(--modus-wc-color-gray-10);color:var(--modus-wc-color-white)}";export{n as modus_wc_side_navigation}