UNPKG

@trimble-oss/moduswebcomponents

Version:

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

1 lines 3.43 kB
import{r as e,d as s,h as o,e as t,g as r}from"./p-C1-Dpkp7.js";import{h as i}from"./p-tWS3Egrk.js";import{i as n}from"./p-DJ2rBB6r.js";const d=class{constructor(o){e(this,o),this.menuFocusout=s(this,"menuFocusout",7),this.menuSelectionChange=s(this,"menuSelectionChange",7),this.inheritedAttributes={},this.selectedItems=[],this.customClass="",this.orientation="vertical",this.selectionMode="single",this.size="md",this.getMenuRole=()=>"horizontal"===this.orientation?"menubar":"menu"}onSelectionModeChange(){this.selectedItems=[]}componentWillLoad(){i(this.el),this.el.ariaLabel||(this.el.ariaLabel="Tree menu"),this.inheritedAttributes=n(this.el)}getClasses(){if(this.isSubMenu){const e=["modus-wc-menu-dropdown"];return this.customClass&&e.push(this.customClass),e.join(" ")}const e=["modus-wc-menu modus-wc-w-full"],s=(({bordered:e,orientation:s,size:o})=>{let t="";return e&&(t=`${t} modus-wc-menu--bordered`),"horizontal"===s&&(t=`${t} modus-wc-menu-horizontal`),o&&(t=`${t} modus-wc-menu-${o}`),t.trim()})({bordered:this.bordered,orientation:this.orientation,size:this.size});return s&&e.push(s),this.customClass&&e.push(this.customClass),e.join(" ")}getTreeItems(){return Array.from(this.el.querySelectorAll("modus-wc-tree-item")).filter((e=>e.closest("modus-wc-tree-menu")===this.el))}handleItemSelect(e){if("multiple"!==this.selectionMode)return;const s=e.target,o=this.selectedItems.includes(s);e.detail.selected&&!o?this.selectedItems=[...this.selectedItems,s]:!e.detail.selected&&o&&(this.selectedItems=this.selectedItems.filter((e=>e!==s))),this.menuSelectionChange.emit({selectedItems:this.selectedItems})}handleKeyDown(e){if("ArrowDown"!==e.key&&"ArrowUp"!==e.key)return;e.preventDefault();const s=this.getTreeItems().filter((e=>!e.disabled));if(0===s.length)return;const o=document.activeElement,t=null==o?void 0:o.closest("modus-wc-tree-item"),r=s.indexOf(t);let i;i="ArrowDown"===e.key?r<s.length-1?r+1:0:r>0?r-1:s.length-1;const n=s[i].querySelector("li");n&&n.focus()}handleFocusout(e){this.el.contains(e.relatedTarget)||(this.menuFocusout.emit(e),this.isSubMenu&&e.stopPropagation())}render(){return o(t,{key:"4b1a4834b8e63748efd4e77fd5be7b4ff88e7193",class:this.isSubMenu?"modus-wc-menu-submenu":void 0},o("ul",Object.assign({key:"e007e38b0e97c7774d11ab2391b5f46ed5c07a71","aria-orientation":this.orientation,class:this.getClasses(),role:this.getMenuRole()},this.inheritedAttributes),o("slot",{key:"292c95ac103697013a0b6a6eea0b5043dee22f32"})))}get el(){return r(this)}static get watchers(){return{selectionMode:["onSelectionModeChange"]}}};d.style="modus-wc-tree-menu.modus-wc-menu-submenu{display:contents}modus-wc-tree-menu .modus-wc-menu{background-color:var(--modus-wc-color-base-page);border-radius:var(--modus-wc-border-radius-md);list-style:none;margin:0;padding:0;padding-inline-start:0}modus-wc-tree-menu .modus-wc-menu.modus-wc-menu--bordered{border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-200)}modus-wc-tree-menu .modus-wc-menu-dropdown{display:none;list-style:none}modus-wc-tree-menu .modus-wc-menu-dropdown-show{display:block}[data-theme=modus-classic-light] modus-wc-tree-menu .modus-wc-menu{background-color:var(--modus-wc-color-white);border-color:var(--modus-wc-color-gray-0)}[data-theme=modus-classic-dark] modus-wc-tree-menu .modus-wc-menu{background-color:var(--modus-wc-color-black);border-color:var(--modus-wc-color-gray-8)}";export{d as modus_wc_tree_menu}