@trimble-oss/moduswebcomponents/modus-wc/p-e9d1ff9b.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 o,c as e,h as t,H as n,g as a}from"./p-D_4hbGjA.js";import{i as d}from"./p-BLBSdonk.js";const i=class{constructor(t){o(this,t),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=o=>{this.expanded&&this.collapseOnClickOutside&&this.navRef&&((o.composedPath?o.composedPath():[o.target]).includes(this.navRef)||(this.expanded=!1))}}handleExpandedChange(){this.setTargetContentMargin(this.expanded,this.mode,this.targetContent),this.expandedChange.emit(this.expanded)}handleModeChange(o){this.setTargetContentMargin(this.expanded,o,this.targetContent)}handleTargetContentChange(o){this.setTargetContentMargin(this.expanded,this.mode,o)}componentWillLoad(){this.inheritedAttributes=d(this.el)}connectedCallback(){this.collapseOnClickOutside&&document.addEventListener("click",this.handleClickOutside,!0)}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside,!0)}getClasses(){const o=["modus-wc-side-navigation"],e=(({expanded:o})=>{let e="";return o&&(e=`${e} modus-wc-side-navigation-expanded`),e.trim()})({expanded:this.expanded});return e&&o.push(e),this.customClass&&o.push(this.customClass),o.join(" ")}setTargetContentMargin(o,e,t){const n=document.querySelector(t);n&&"style"in n&&(n.style.marginLeft=o&&"push"===e?this.maxWidth:this.minWidth)}render(){return t(n,{key:"f090ecdc0dd7db71bd01203dc45f849f691803f0"},t("nav",Object.assign({key:"946c078fd9eb11efc61cdd5026d9bb2ed4230da2"},this.inheritedAttributes,{class:this.getClasses(),ref:o=>this.navRef=o,style:{width:this.expanded?this.maxWidth:this.minWidth}}),t("div",{key:"2890c032403f084be52b027cd4aaac67461cff9c",class:"side-navigation-content"},t("slot",{key:"e57227ad5f848111b12251c6bc55f75f47629ea3"}))))}get el(){return a(this)}static get watchers(){return{expanded:["handleExpandedChange"],mode:["handleModeChange"],targetContent:["handleTargetContentChange"]}}};i.style='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);box-shadow:rgba(36, 35, 45, 0.3) 1px 0 4px;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{color:var(--modus-wc-color-base-content);flex:1 1 auto}modus-wc-side-navigation modus-wc-menu .modus-wc-menu{background-color:transparent;border-radius:0}modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button{background-color:transparent;border-radius:0;padding:var(--modus-wc-spacing-md) 1.25rem}[data-theme=modus-modern-light] modus-wc-side-navigation .modus-wc-side-navigation{background-image:url("dist/styles/assets/Sidenavpattern.svg");background-size:cover;box-shadow:none}[data-theme=modus-modern-dark] modus-wc-side-navigation .modus-wc-side-navigation{background:var(--modus-wc-color-trimble-gray);background-image:url("dist/styles/assets/Sidenavdarkpattern.svg");background-size:cover;box-shadow:none}[data-theme=modus-classic-dark] modus-wc-side-navigation .side-navigation-content{background:var(--modus-wc-color-gray-10);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-menubutton: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-navigationli.modus-wc-menu-item,[data-theme=connect-dark] modus-wc-side-navigationli.modus-wc-menu-item{background:transparent;color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-side-navigationli.modus-wc-menu-item:hover,[data-theme=connect-dark] modus-wc-side-navigationli.modus-wc-menu-item:hover{background:var(--modus-wc-color-primary);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-blue-dark);color:var(--modus-wc-color-base-content);flex:1 1 auto}[data-theme=connect-light] modus-wc-side-navigation .side-navigation-contentbutton:hover,[data-theme=connect-dark] modus-wc-side-navigation .side-navigation-contentbutton:hover{background:var(--modus-wc-color-primary)}[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-menubutton:hover,[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu .modus-wc-menubutton:hover{background:var(--modus-wc-color-primary);color:var(--modus-wc-color-white)}[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: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);color:var(--modus-wc-color-white)}[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-selected button,[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected 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-selected button:hover,[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected button:hover{background:var(--modus-wc-color-primary);color:var(--modus-wc-color-white)}';export{i as modus_wc_side_navigation}