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 26 kB
import{r as e,d as o,h as t,e as m,g as s}from"./p-C1-Dpkp7.js";import{h as n}from"./p-tWS3Egrk.js";import{i}from"./p-DJ2rBB6r.js";import{c as u}from"./p-BfP9ezJQ.js";const d=class{constructor(t){e(this,t),this.menuFocusout=o(this,"menuFocusout",7),this.menuSelectionChange=o(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(){n(this.el),this.el.ariaLabel||(this.el.ariaLabel="Menu"),this.inheritedAttributes=i(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"],o=(({bordered:e,orientation:o,size:t})=>{let m="";return e&&(m=`${m} modus-wc-menu--bordered`),"horizontal"===o&&(m=`${m} modus-wc-menu-horizontal`),t&&(m=`${m} modus-wc-menu-${t}`),m.trim()})({bordered:this.bordered,orientation:this.orientation,size:this.size});return o&&e.push(o),this.customClass&&e.push(this.customClass),e.join(" ")}getMenuItems(){return Array.from(this.el.querySelectorAll("modus-wc-menu-item")).filter((e=>e.closest("modus-wc-menu")===this.el))}handleItemSelect(e){if("multiple"!==this.selectionMode)return;const o=e.target,t=this.selectedItems.includes(o);e.detail.selected&&!t?this.selectedItems=[...this.selectedItems,o]:!e.detail.selected&&t&&(this.selectedItems=this.selectedItems.filter((e=>e!==o))),this.menuSelectionChange.emit({selectedItems:this.selectedItems})}handleKeyDown(e){if("ArrowDown"!==e.key&&"ArrowUp"!==e.key)return;e.preventDefault();const o=this.getMenuItems().filter((e=>!e.disabled));if(0===o.length)return;const t=document.activeElement,m=null==t?void 0:t.closest("modus-wc-menu-item"),s=o.indexOf(m);let n;n="ArrowDown"===e.key?s<o.length-1?s+1:0:s>0?s-1:o.length-1;const i=o[n].querySelector("li");i&&i.focus()}handleFocusout(e){this.el.contains(e.relatedTarget)||(this.menuFocusout.emit(e),this.isSubMenu&&e.stopPropagation())}render(){return t(m,{key:"19854fb1e7960407db704bb954ff66bb355ab042",class:this.isSubMenu?"modus-wc-menu-submenu":void 0},t("ul",Object.assign({key:"0752b609c2ed4a897c8a6e8ecc73718cff4c8d09","aria-orientation":this.orientation,class:this.getClasses(),role:this.getMenuRole()},this.inheritedAttributes),t("slot",{key:"4957e81fa8566c990a5f06464d2d26dee3af5ba7"})))}get el(){return s(this)}static get watchers(){return{selectionMode:["onSelectionModeChange"]}}};d.style="modus-wc-menu.modus-wc-menu-submenu{display:contents}modus-wc-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;overflow:hidden;padding:0;padding-inline-start:0}modus-wc-menu .modus-wc-menu.modus-wc-menu--bordered{border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-200)}modus-wc-menu .modus-wc-menu-dropdown{display:none;list-style:none}modus-wc-menu .modus-wc-menu-dropdown-show{display:block}[data-theme=modus-classic-light] modus-wc-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-menu .modus-wc-menu{background-color:var(--modus-wc-color-black);border-color:var(--modus-wc-color-gray-8)}";const c=class{constructor(t){e(this,t),this.itemSelect=o(this,"itemSelect",7),this.inheritedAttributes={},this.customClass="",this.label="",this.size="md",this.tooltipPosition="auto",this.value="",this.isExpanded=!1,this.handleItemSelect=()=>{if(this.hasSubmenu){const e=this.el.closest("modus-wc-side-navigation");if(e&&!e.expanded)return void this.itemSelect.emit({value:this.value});const o=this.el.querySelector(".modus-wc-menu-dropdown"),t=this.el.querySelector("li");if(o&&t){o.classList.toggle("modus-wc-menu-dropdown-show");const e=t.querySelector("button");this.isExpanded=o.classList.contains("modus-wc-menu-dropdown-show"),this.isExpanded?(t.classList.add("modus-wc-menu-item-expanded"),e&&e.classList.add("modus-wc-menu-dropdown-show")):(t.classList.remove("modus-wc-menu-item-expanded"),e&&e.classList.remove("modus-wc-menu-dropdown-show"))}}else"multiple"===this.resolveSelectionMode()||this.checkbox?this.selected=!this.selected:("single"===this.resolveSelectionMode()&&this.deselectSiblings(),this.selected=!0);this.itemSelect.emit({value:this.value,selected:this.selected})}}componentWillLoad(){n(this.el),this.inheritedAttributes=i(this.el),this._selectionMode=this.resolveSelectionMode()}componentDidLoad(){if("undefined"==typeof MutationObserver)return;const e=this.el.closest("modus-wc-menu");e&&(this.parentMenuObserver=new MutationObserver((e=>{for(const o of e)if("selection-mode"===o.attributeName){this.handleSelectionModeChange();break}})),this.parentMenuObserver.observe(e,{attributes:!0}))}disconnectedCallback(){var e;null===(e=this.parentMenuObserver)||void 0===e||e.disconnect()}handleSelectionModeChange(){this._selectionMode=this.resolveSelectionMode(),this.selected=!1}handleKeyDown(e){this.disabled||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleItemSelect())}async collapseSubmenu(){if(this.hasSubmenu&&this.isExpanded){const e=this.el.querySelector(".modus-wc-menu-dropdown"),o=this.el.querySelector("li");e&&o&&(e.classList.remove("modus-wc-menu-dropdown-show"),o.classList.remove("modus-wc-menu-item-expanded"),this.isExpanded=!1)}return Promise.resolve()}getRootMenu(){var e,o;let t=this.el.closest("modus-wc-menu");for(;t;){const m=null!==(o=null===(e=t.parentElement)||void 0===e?void 0:e.closest("modus-wc-menu"))&&void 0!==o?o:null;if(!m)break;t=m}return t}deselectSiblings(){const e=this.getRootMenu();e&&e.querySelectorAll("modus-wc-menu-item").forEach((e=>{e!==this.el&&(e.selected=!1)}))}resolveSelectionMode(){var e;return null===(e=this.el.closest("modus-wc-menu"))||void 0===e?void 0:e.selectionMode}getClasses(){const e=["modus-wc-menu-item"],o=(({active:e,bordered:o,disabled:t,focused:m,size:s})=>{let n="";return o&&(n=`${n} modus-wc-menu-item-bordered`),t&&(n=`${n} modus-wc-menu-item-disabled`),e&&(n=`${n} modus-wc-menu-item-active`),m&&(n=`${n} modus-wc-menu-item-focused`),s&&(n=`${n} modus-wc-menu-item-${s}`),n.trim()})({active:!this.hasSubmenu&&!!this.selected,bordered:this.bordered,disabled:this.disabled,focused:this.focused,size:this.size});return o&&e.push(o),this.customClass&&e.push(this.customClass),e.join(" ")}getButtonClasses(){return this.hasSubmenu?"modus-wc-menu-dropdown-toggle":""}getRole(e){return"multiple"===e?"menuitemcheckbox":"single"===e?"menuitemradio":"menuitem"}hasCheckbox(e){return this.checkbox||"multiple"===e}getAriaChecked(e){if(this.hasCheckbox(e))return this.selected?"true":"false"}getAriaSelected(e){if(!this.hasCheckbox(e))return"single"===e?this.selected?"true":"false":void 0}render(){const e=this._selectionMode;return t(m,{key:"08962b2c66e30cdc6222a2e4f02966c085be3f97"},t("li",Object.assign({key:"be6621a5e9a1a6c0a8a68c09d9df355bbfb5e491","aria-checked":this.getAriaChecked(e),"aria-selected":this.getAriaSelected(e),"aria-disabled":this.disabled,class:this.getClasses(),role:this.getRole(e),tabIndex:this.disabled?-1:0},this.inheritedAttributes),t("button",{key:"16730f36cf2c30cc8edd9b294ebf2fbf780c8f52",class:this.getButtonClasses(),disabled:this.disabled,onClick:this.handleItemSelect,tabIndex:-1,type:"button"},t("div",{key:"1a85d975363a5831584b2cf09aff08ec862580fb",class:"modus-wc-menu-item-content"},(this.checkbox||"multiple"===e)&&t("modus-wc-checkbox",{key:"45b72935af96ab83d638a96bda0ff5eb3667f0fe","aria-label":"Checkbox",disabled:this.disabled,size:this.size,value:!!this.selected}),t("slot",{key:"3d6a429564ed102acf8eaa068d42aecee654ddf1",name:"start-icon"}),t("div",{key:"e824b9bc909b8289d5c80a0d530e1c8aa423b228",class:"modus-wc-menu-item-labels"},this.tooltipContent?t("modus-wc-tooltip",{content:this.tooltipContent,position:this.tooltipPosition,customClass:"modus-wc-menu-item-tooltip"},t("div",null,this.label)):t("div",null,this.label),this.subLabel&&t("div",{key:"ae2b477265c3acc4e2d34cd0157110b47eadfc80",class:"modus-wc-menu-item-sublabel"},this.subLabel)))),t("slot",{key:"cfd85f94459545f39ac4b14844ee3f8aa50d93bf"})))}get el(){return s(this)}};c.style="modus-wc-menu-item .modus-wc-menu-item button{align-items:center;border-radius:inherit;display:flex;width:100%}modus-wc-menu-item .modus-wc-menu-item button:hover{background-color:transparent}modus-wc-menu-item .modus-wc-menu-item button:focus{background-color:transparent}modus-wc-menu-item .modus-wc-menu-item button.modus-wc-menu-dropdown-toggle::after{color:var(--modus-wc-color-base-content)}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content{align-items:center;display:flex;width:100%}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content [slot=start-icon]{padding-inline-end:var(--modus-wc-spacing-sm)}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content modus-wc-checkbox{padding-inline-end:var(--modus-wc-spacing-sm)}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content .modus-wc-menu-item-labels{padding-inline-end:var(--modus-wc-spacing-xs);padding-inline-start:var(--modus-wc-spacing-md);white-space:nowrap}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-sm);white-space:nowrap}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content .modus-wc-menu-item-selected-icon{margin-left:auto}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-sm button{font-size:var(--modus-wc-font-size-sm)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-sm button .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-xs)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-md button{font-size:var(--modus-wc-font-size-md)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-md button .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-sm)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-lg button{font-size:var(--modus-wc-font-size-lg)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-lg button .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-md)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-bordered{border-bottom:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-200);border-radius:0;border-top:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-200)}modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-selected){color:var(--modus-wc-color-base-content)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected{background-color:color-mix(in sRGB, var(--modus-wc-color-primary-pale) 50%, transparent);border-radius:inherit;color:var(--modus-wc-base-content)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected:focus{background-color:color-mix(in sRGB, var(--modus-wc-color-primary-pale) 50%, transparent)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected button{background-color:transparent}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected button:hover,modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected button:focus{background-color:transparent;border-radius:inherit;box-shadow:none;color:inherit}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active{background-color:color-mix(in sRGB, var(--modus-wc-color-primary-pale) 50%, transparent);border-radius:inherit;color:var(--modus-wc-color-base-content)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active:focus{background-color:color-mix(in sRGB, var(--modus-wc-color-primary-pale) 50%, transparent)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button{background-color:transparent}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button:hover,modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button:focus{background-color:transparent;border-radius:inherit;box-shadow:none;color:inherit}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-disabled{opacity:0.4}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-disabled button{pointer-events:none}modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-disabled):not(.modus-wc-menu-item-focused):not(:has(.modus-wc-menu-dropdown)):hover{background-color:var(--modus-wc-color-base-100);outline:none}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-focused:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):hover{background-color:var(--modus-wc-color-base-100)}modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-active):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):focus:not(:focus-visible),modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-active):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)).modus-wc-arrow-focused{background-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-primary);outline:none}modus-wc-menu-item .modus-wc-menu-item:focus-visible{background-color:transparent;outline:2px solid var(--modus-wc-color-primary);outline-offset:-2px}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-focused{border-radius:inherit;outline:2px solid var(--modus-wc-color-primary);outline-offset:-2px}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-active),[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-active){color:var(--modus-wc-color-gray-light)}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item button.modus-wc-menu-dropdown-toggle::after,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item button.modus-wc-menu-dropdown-toggle::after{color:var(--modus-wc-color-gray-3)}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-disabled):not(.modus-wc-menu-item-focused):not(:has(.modus-wc-menu-dropdown)):hover,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-disabled):not(.modus-wc-menu-item-focused):not(:has(.modus-wc-menu-dropdown)):hover{background-color:var(--modus-wc-color-gray-9);color:inherit;outline:none}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-focused:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):hover,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-focused:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):hover{background-color:var(--modus-wc-color-gray-9);color:inherit}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active,[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)),[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)){background-color:color-mix(in sRGB, var(--modus-wc-color-primary) 30%, transparent)}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button,[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)) button,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)) button{background-color:transparent}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button:hover,[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button:focus,[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)) button:hover,[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)) button:focus,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button:hover,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button:focus,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)) button:hover,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)) button:focus{background-color:transparent;box-shadow:none;color:inherit}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-active):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):focus:not(:focus-visible),[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-active):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)).modus-wc-arrow-focused,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-active):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):focus:not(:focus-visible),[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-active):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)).modus-wc-arrow-focused{background-color:var(--modus-wc-color-gray-9)}[data-theme=connect-light] modus-wc-menu-item .modus-wc-menu-item>button.modus-wc-menu-dropdown-toggle::after,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item>button.modus-wc-menu-dropdown-toggle::after{color:var(--modus-wc-color-white)}[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu .modus-wc-menu li.modus-wc-menu-item:not(.modus-wc-menu-item-active):hover{background-color:transparent}[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-disabled):not(.modus-wc-menu-item-focused):not(:has(.modus-wc-menu-dropdown)):hover{background-color:transparent;outline:none}[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-focused:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):hover{background-color:transparent}[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-active):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):focus:not(:focus-visible),[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-active):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)).modus-wc-arrow-focused{background-color:transparent}[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-active)>button:hover{background-color:var(--modus-wc-color-trimble-blue);color:var(--modus-wc-color-white)}";const a=class{constructor(t){e(this,t),this.dismissEscape=o(this,"dismissEscape",7),this.inheritedAttributes={},this.popperInstance=null,this.tooltipElement=null,this.triggerElement=null,this.content="",this.customClass="",this.disabled=!1,this.position="auto",this.escapeDismissed=!1,this.isVisible=!1,this.handleWindowResize=()=>{this.popperInstance&&this.isVisible&&this.popperInstance.update()},this.handleWindowScroll=()=>{this.popperInstance&&this.isVisible&&this.popperInstance.update()}}handlePositionChange(){this.popperInstance&&(this.popperInstance.setOptions({placement:"auto"===this.position?"top":this.position}),this.popperInstance.update())}handleContentChange(){this.contentElement||this.applyContentToTooltip()}handleContentElementChange(){this.applyContentToTooltip()}handleForceOpenChange(e){e&&!this.disabled?this.showTooltip():this.hideTooltip()}componentWillLoad(){n(this.el),this.inheritedAttributes=i(this.el)}elementKeyupHandler(e){"Escape"===e.code&&this.isVisible&&!this.forceOpen&&(this.escapeDismissed=!0,this.dismissEscape.emit(),this.hideTooltip())}componentDidLoad(){this.triggerElement=this.el.querySelector("div > :first-child"),this.tooltipElement=document.createElement("div"),this.tooltipElement.className=`modus-wc-tooltip-content ${this.customClass||""}`,this.tooltipElement.setAttribute("role","tooltip"),this.tooltipId&&(this.tooltipElement.id=this.tooltipId);const e=document.createElement("div");e.className="modus-wc-tooltip-arrow",this.tooltipElement.appendChild(e),this.tooltipElement.setAttribute("popover","manual"),this.applyContentToTooltip(),document.body.appendChild(this.tooltipElement),this.tooltipElement.style.display="none",this.triggerElement&&this.tooltipElement&&this.initializePopper(),!this.forceOpen||this.disabled||this.escapeDismissed||this.showTooltip()}disconnectedCallback(){if(this.popperInstance&&(this.popperInstance.destroy(),this.popperInstance=null),this.tooltipElement){if("function"==typeof this.tooltipElement.hidePopover)try{this.tooltipElement.hidePopover()}catch(e){}this.tooltipElement.parentElement&&this.tooltipElement.parentElement.removeChild(this.tooltipElement)}window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("scroll",this.handleWindowScroll,!0)}applyContentToTooltip(){if(!this.tooltipElement)return;const e=this.tooltipElement.querySelector(".modus-wc-tooltip-arrow");Array.from(this.tooltipElement.childNodes).forEach((o=>{o!==e&&this.tooltipElement.removeChild(o)})),this.tooltipElement.insertBefore(this.contentElement&&"nodeType"in this.contentElement?this.contentElement.cloneNode(!0):document.createTextNode(this.content),e)}initializePopper(){if(!this.triggerElement||!this.tooltipElement)return;const e="auto"===this.position?"top":this.position,o=this.tooltipElement.querySelector(".modus-wc-tooltip-arrow");this.popperInstance=u(this.triggerElement,this.tooltipElement,{placement:e,strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"preventOverflow",options:{padding:8,boundary:"viewport"}},{name:"flip",options:{fallbackPlacements:["top","right","bottom","left"],padding:8,boundary:"viewport"}},{name:"arrow",options:{element:o,padding:5}},{name:"computeStyles",options:{adaptive:!0,gpuAcceleration:!0}},{name:"eventListeners",options:{scroll:!0,resize:!0}}]}),window.addEventListener("resize",this.handleWindowResize),window.addEventListener("scroll",this.handleWindowScroll,!0)}showTooltip(){if(!this.disabled&&!this.escapeDismissed&&this.tooltipElement){if(this.tooltipElement.style.display="block","function"==typeof this.tooltipElement.showPopover)try{this.tooltipElement.showPopover()}catch(e){}this.isVisible=!0,this.popperInstance&&(this.popperInstance.update(),setTimeout((()=>{this.popperInstance&&this.popperInstance.update()}),10))}}hideTooltip(){if(this.tooltipElement&&(!this.forceOpen||this.escapeDismissed)){if("function"==typeof this.tooltipElement.hidePopover)try{this.tooltipElement.hidePopover()}catch(e){}this.tooltipElement.style.display="none",this.isVisible=!1}}handleMouseEnter(){this.escapeDismissed=!1,this.showTooltip()}handleMouseLeave(){this.forceOpen||this.hideTooltip()}render(){return t(m,{key:"cce7d08b0e748ee680f15744b442655d7a32c13e"},t("div",Object.assign({key:"7a384a1329786729aeee04a689f88b16b2951808","aria-describedby":this.tooltipId,id:this.tooltipId},this.inheritedAttributes),t("slot",{key:"13ef7dbaae4806f15d8dcb21ee5590b7e838504c"})))}get el(){return s(this)}static get watchers(){return{position:["handlePositionChange"],content:["handleContentChange"],contentElement:["handleContentElementChange"],forceOpen:["handleForceOpenChange"]}}};a.style='.modus-wc-tooltip-content[popover]{overflow:visible}.modus-wc-tooltip-content{background-color:var(--modus-wc-color-neutral-content);border-radius:0.25rem;color:var(--modus-wc-color-neutral);font-size:0.875rem;font-weight:var(--modus-wc-font-weight-regular);max-width:20rem;overflow-wrap:break-word;padding:0.25rem 0.5rem;pointer-events:none;position:relative;text-align:center;white-space:normal;width:max-content;z-index:1000}.modus-wc-tooltip-arrow,.modus-wc-tooltip-arrow::before{background:inherit;height:8px;position:absolute;width:8px}.modus-wc-tooltip-arrow{text-align:initial;visibility:hidden}.modus-wc-tooltip-arrow::before{background-color:var(--modus-wc-color-neutral-content);content:"";transform:rotate(45deg);visibility:visible}.modus-wc-tooltip-content[data-popper-placement^=top] .modus-wc-tooltip-arrow{bottom:-4px}.modus-wc-tooltip-content[data-popper-placement^=bottom] .modus-wc-tooltip-arrow{top:-4px}.modus-wc-tooltip-content[data-popper-placement^=left] .modus-wc-tooltip-arrow{right:-4px}.modus-wc-tooltip-content[data-popper-placement^=right] .modus-wc-tooltip-arrow{left:-4px}[data-theme=modus-classic-light] .modus-wc-tooltip-content{background-color:var(--modus-wc-color-gray-7);color:var(--modus-wc-color-white)}[data-theme=modus-classic-light] .modus-wc-tooltip-arrow::before{background-color:var(--modus-wc-color-gray-7)}[data-theme=modus-classic-dark] .modus-wc-tooltip-content{background-color:var(--modus-wc-color-gray-0);color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-dark] .modus-wc-tooltip-arrow::before{background-color:var(--modus-wc-color-gray-0)}[data-theme=connect-light] .modus-wc-tooltip-content,[data-theme=connect-dark] .modus-wc-tooltip-content{background-color:var(--modus-wc-color-base-content);color:var(--modus-wc-color-base-page)}[data-theme=connect-light] .modus-wc-tooltip-arrow::before,[data-theme=connect-dark] .modus-wc-tooltip-arrow::before{background-color:var(--modus-wc-color-base-content)}';export{d as modus_wc_menu,c as modus_wc_menu_item,a as modus_wc_tooltip}