@trimble-oss/moduswebcomponents/modus-wc/p-53a863b2.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 e,d as o,h as t,e as n,g as d}from"./p-C1-Dpkp7.js";import{h as i}from"./p-tWS3Egrk.js";import{i as a}from"./p-DJ2rBB6r.js";const m=class{constructor(t){e(this,t),this.expandedChange=o(this,"expandedChange",7),this.inheritedAttributes={},this.minWidth="4rem",this.collapseOnClickOutside=!0,this.customClass="",this.expanded=!1,this.maxWidth="256px",this.mode="overlay",this.targetContent="",this.handleClickOutside=e=>{this.expanded&&this.collapseOnClickOutside&&this.navRef&&((e.composedPath?e.composedPath():[e.target]).includes(this.navRef)||(this.expanded=!1))}}handleExpandedChange(){this.setTargetContentMargin(this.expanded,this.mode,this.targetContent),this.expandedChange.emit(this.expanded)}handleModeChange(e){this.setTargetContentMargin(this.expanded,e,this.targetContent)}handleTargetContentChange(e){this.setTargetContentMargin(this.expanded,this.mode,e)}componentWillLoad(){i(this.el,!0),this.inheritedAttributes=a(this.el)}connectedCallback(){this.collapseOnClickOutside&&document.addEventListener("click",this.handleClickOutside,!0)}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside,!0)}getClasses(){const e=["modus-wc-side-navigation"],o=(({expanded:e})=>{let o="";return e&&(o=`${o} modus-wc-side-navigation-expanded`),o.trim()})({expanded:this.expanded});return o&&e.push(o),this.customClass&&e.push(this.customClass),e.join(" ")}setTargetContentMargin(e,o,t){var n;const d=this.el.getRootNode(),i=null!==(n=(d instanceof ShadowRoot?d:document).querySelector(t))&&void 0!==n?n:document.querySelector(t);i&&"style"in i&&(i.style.marginLeft=e&&"push"===o?this.maxWidth:this.minWidth)}render(){return t(n,{key:"7b618cb223a03a664c60b195c9bd1209bf084e17"},t("nav",Object.assign({key:"cd4b9e40b3bdf277fb837ec316c108a79824c40e"},this.inheritedAttributes,{class:this.getClasses(),ref:e=>this.navRef=e,style:{width:this.expanded?this.maxWidth:this.minWidth}}),t("div",{key:"fbae3687bafa3945ad3c4ec5aa846556cebe8a48",class:"side-navigation-content"},t("slot",{key:"99bc02dc1b50e6790a9a6ac37c6e420f203189ad"}))))}get el(){return d(this)}static get watchers(){return{expanded:["handleExpandedChange"],mode:["handleModeChange"],targetContent:["handleTargetContentChange"]}}};m.style='@charset "UTF-8";modus-wc-side-navigation{display:block;height:100vh;position:relative}modus-wc-side-navigation .modus-wc-side-navigation{background:var(--modus-wc-color-base-page);color:var(--modus-wc-color-base-content);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{flex:1 1 auto;max-width:100%}modus-wc-side-navigation modus-wc-menu .modus-wc-menu{background-color:transparent;border-radius:0}modus-wc-side-navigation modus-wc-menu .modus-wc-menu>li{max-width:100%}modus-wc-side-navigation modus-wc-menu-item{max-width:100%}modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button{background-color:transparent;padding-inline-end:var(--modus-wc-spacing-xs);padding-inline-start:var(--modus-wc-spacing-xs)}modus-wc-side-navigation .side-navigation-content>modus-wc-menu modus-wc-menu-item .modus-wc-menu-item button{max-height:32px}[data-theme=modus-modern-light] modus-wc-side-navigation .modus-wc-side-navigation-expanded modus-wc-menu-item .modus-wc-menu-item>button .modus-wc-menu-item-content .modus-wc-menu-item-labels,[data-theme=modus-modern-dark] modus-wc-side-navigation .modus-wc-side-navigation-expanded modus-wc-menu-item .modus-wc-menu-item>button .modus-wc-menu-item-content .modus-wc-menu-item-labels{display:block;padding-inline-end:0;padding-inline-start:var(--modus-wc-spacing-md)}[data-theme=modus-modern-light] modus-wc-side-navigation .modus-wc-side-navigation,[data-theme=modus-modern-dark] modus-wc-side-navigation .modus-wc-side-navigation{background-size:cover;box-shadow:none}[data-theme=modus-modern-light] modus-wc-side-navigation .side-navigation-content,[data-theme=modus-modern-dark] modus-wc-side-navigation .side-navigation-content{color:var(--modus-wc-color-base-page);padding:0 var(--modus-wc-spacing-lg)}[data-theme=modus-modern-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item,[data-theme=modus-modern-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item{border-radius:var(--modus-wc-border-radius-btn);margin-bottom:var(--modus-wc-spacing-xs)}[data-theme=modus-modern-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item>button,[data-theme=modus-modern-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item>button{padding-inline-end:var(--modus-wc-spacing-md)}[data-theme=modus-modern-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item>button .modus-wc-menu-item-content .modus-wc-menu-item-labels,[data-theme=modus-modern-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item>button .modus-wc-menu-item-content .modus-wc-menu-item-labels{display:none;padding:0;padding-inline-end:var(--modus-wc-spacing-md)}[data-theme=modus-modern-light] modus-wc-side-navigation .side-navigation-content:has(modus-wc-tree-menu),[data-theme=modus-modern-dark] modus-wc-side-navigation .side-navigation-content:has(modus-wc-tree-menu){padding:0}[data-theme=modus-classic-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button,[data-theme=modus-classic-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button{background-color:transparent;padding:var(--modus-wc-spacing-md) 1.25rem;padding-inline-end:var(--modus-wc-spacing-lg);padding-inline-start:calc(var(--modus-wc-spacing-lg) + 0.25rem)}[data-theme=modus-classic-dark] modus-wc-side-navigation .modus-wc-side-navigation{background:var(--modus-wc-color-gray-10);background-size:cover;box-shadow:none}[data-theme=modus-classic-dark] modus-wc-side-navigation .side-navigation-content{color:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-side-navigation modus-wc-menu .modus-wc-menu{background:transparent;color:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-side-navigation modus-wc-menu .modus-wc-menu button:hover{background:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-side-navigation .modus-wc-side-navigation,[data-theme=connect-dark] modus-wc-side-navigation .modus-wc-side-navigation{background:transparent;box-shadow:none;color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-side-navigation .modus-wc-side-navigation:hover,[data-theme=connect-dark] modus-wc-side-navigation .modus-wc-side-navigation:hover{background:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-side-navigation,[data-theme=connect-dark] modus-wc-side-navigation{}[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu>modus-wc-menu-item .modus-wc-menu-item,[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu>modus-wc-menu-item .modus-wc-menu-item{background:transparent;color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-side-navigation,[data-theme=connect-dark] modus-wc-side-navigation{}[data-theme=connect-light] modus-wc-side-navigation .modus-wc-menu li.modus-wc-menu-item:hover,[data-theme=connect-dark] modus-wc-side-navigation .modus-wc-menu li.modus-wc-menu-item:hover{background-color:transparent !important}[data-theme=connect-light] modus-wc-side-navigation modus-wc-tree-menu .modus-wc-menu li.modus-wc-menu-item:hover,[data-theme=connect-dark] modus-wc-side-navigation modus-wc-tree-menu .modus-wc-menu li.modus-wc-menu-item:hover{background-color:transparent !important}[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu>modus-wc-menu-item .modus-wc-menu-item:hover,[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu>modus-wc-menu-item .modus-wc-menu-item:hover{background-color:transparent !important;color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-side-navigation .side-navigation-content,[data-theme=connect-dark] modus-wc-side-navigation .side-navigation-content{background:var(--modus-wc-color-connect-blue);color:var(--modus-wc-color-base-content)}[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu .modus-wc-menu,[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu .modus-wc-menu{background:transparent;color:var(--modus-wc-color-white)}[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu .modus-wc-menu button:hover,[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu .modus-wc-menu button:hover{background:var(--modus-wc-color-trimble-blue) !important;color:var(--modus-wc-color-white) !important}[data-theme=connect-light] modus-wc-side-navigation modus-wc-tree-item>li.modus-wc-menu-item:not(.modus-wc-menu-item-active)>.modus-wc-menu-item-interactive:hover,[data-theme=connect-dark] modus-wc-side-navigation modus-wc-tree-item>li.modus-wc-menu-item:not(.modus-wc-menu-item-active)>.modus-wc-menu-item-interactive:hover{background:var(--modus-wc-color-trimble-blue) !important;color:var(--modus-wc-color-white) !important}[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item,[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item{color:var(--modus-wc-color-white)}[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button,[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button{padding:var(--modus-wc-spacing-xs) 1.25rem;padding-inline-end:var(--modus-wc-spacing-lg);padding-inline-start:calc(var(--modus-wc-spacing-lg) + 0.25rem)}[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button:hover,[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button:hover{background:var(--modus-wc-color-trimble-blue) !important;color:var(--modus-wc-color-white) !important}[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button:focus,[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button:focus{color:var(--modus-wc-color-white)}[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button,[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button{background:var(--modus-wc-color-blue-light);color:var(--modus-wc-color-white);font-weight:var(--modus-wc-font-weight-semibold)}[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button:hover,[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button:hover{background:var(--modus-wc-color-primary);color:var(--modus-wc-color-white)}';export{m as modus_wc_side_navigation}