@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
301 lines (295 loc) • 28.9 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-Blhe_h6i.js';
import { h as handleShadowDOMStyles } from './p-tWS3Egrk.js';
import { i as inheritAriaAttributes } from './p-DUWn6PrQ.js';
import { d as defineCustomElement$4 } from './p-C1uly3sM.js';
import { d as defineCustomElement$3 } from './p-BqauKZkb.js';
import { d as defineCustomElement$2 } from './p-BFz7tQrF.js';
const convertPropsToClasses = ({ active, bordered, disabled, focused, size, }) => {
let classes = '';
if (bordered) {
classes = `${classes} modus-wc-menu-item-bordered`;
}
if (disabled) {
classes = `${classes} modus-wc-menu-item-disabled`;
}
if (active) {
classes = `${classes} modus-wc-menu-item-active`;
}
if (focused) {
classes = `${classes} modus-wc-menu-item-focused`;
}
if (size) {
classes = `${classes} modus-wc-menu-item-${size}`;
}
return classes.trim();
};
const modusWcTreeItemCss = "modus-wc-tree-item .modus-wc-menu-item{display:flex;flex-direction:column;width:100%}modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive{align-items:center;border-radius:inherit;display:flex;width:100%}modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive:focus{background-color:transparent}modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive.modus-wc-menu-dropdown-toggle::after{color:var(--modus-wc-color-base-content)}modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive .modus-wc-menu-item-content{align-items:center;display:flex;width:100%}modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive .modus-wc-menu-item-content [slot=start]{padding-inline-end:var(--modus-wc-spacing-sm)}modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive .modus-wc-menu-item-content [slot=end]{margin-inline-start:auto;padding-inline-start:var(--modus-wc-spacing-sm)}modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive .modus-wc-menu-item-content [slot=end]:is(modus-wc-dropdown-menu){background-color:transparent;padding-inline-start:0}modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive .modus-wc-menu-item-content modus-wc-checkbox{padding-inline-end:var(--modus-wc-spacing-sm)}modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive .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-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive .modus-wc-menu-item-content .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-sm);white-space:nowrap}modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-sm .modus-wc-menu-item-interactive{font-size:var(--modus-wc-font-size-sm)}modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-sm .modus-wc-menu-item-interactive .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-xs)}modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-md .modus-wc-menu-item-interactive{font-size:var(--modus-wc-font-size-md)}modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-md .modus-wc-menu-item-interactive .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-sm)}modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-lg .modus-wc-menu-item-interactive{font-size:var(--modus-wc-font-size-lg)}modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-lg .modus-wc-menu-item-interactive .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-md)}modus-wc-tree-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-tree-item .modus-wc-menu-item.modus-wc-menu-item-bordered.modus-wc-menu-item-selected,modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-bordered.modus-wc-menu-item-active{border-color:transparent}modus-wc-tree-item .modus-wc-menu-item:not(.modus-wc-menu-item-selected){color:var(--modus-wc-color-base-content)}modus-wc-tree-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-tree-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-tree-item .modus-wc-menu-item.modus-wc-menu-item-selected .modus-wc-menu-item-interactive{background-color:transparent}modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-selected .modus-wc-menu-item-interactive:hover,modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-selected .modus-wc-menu-item-interactive:focus{background-color:transparent;border-radius:inherit;box-shadow:none;color:inherit}modus-wc-tree-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-tree-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-tree-item .modus-wc-menu-item.modus-wc-menu-item-active .modus-wc-menu-item-interactive{background-color:transparent}modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-active .modus-wc-menu-item-interactive:hover,modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-active .modus-wc-menu-item-interactive:focus{background-color:transparent;border-radius:inherit;box-shadow:none;color:inherit}modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-disabled{opacity:0.4}modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-disabled .modus-wc-menu-item-interactive{pointer-events:none}modus-wc-tree-item .modus-wc-menu-item:not(.modus-wc-menu-item-disabled):not(.modus-wc-menu-item-focused):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :hover)):not(:has([slot=end] :active)):not(:has([slot=start] :hover)):not(:has([slot=start] :active)):hover{background-color:var(--modus-wc-color-base-100);outline:none}modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-focused:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :hover)):not(:has([slot=end] :active)):not(:has([slot=start] :hover)):not(:has([slot=start] :active)):hover{background-color:var(--modus-wc-color-base-100)}modus-wc-tree-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-tree-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-tree-item .modus-wc-menu-item:focus-visible{background-color:transparent;outline:2px solid var(--modus-wc-color-primary);outline-offset:-2px}modus-wc-tree-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-modern-light] modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive:hover,[data-theme=modus-modern-dark] modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive:hover,[data-theme=modus-classic-light] modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive:hover,[data-theme=modus-classic-dark] modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive:hover{background-color:transparent}[data-theme=modus-classic-dark] modus-wc-tree-item .modus-wc-menu-item:not(.modus-wc-menu-item-active),[data-theme=connect-dark] modus-wc-tree-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-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive.modus-wc-menu-dropdown-toggle::after,[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive.modus-wc-menu-dropdown-toggle::after{color:var(--modus-wc-color-gray-3)}[data-theme=modus-classic-dark] modus-wc-tree-item .modus-wc-menu-item:not(.modus-wc-menu-item-disabled):not(.modus-wc-menu-item-focused):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :hover)):not(:has([slot=end] :active)):not(:has([slot=start] :hover)):not(:has([slot=start] :active)):hover,[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item:not(.modus-wc-menu-item-disabled):not(.modus-wc-menu-item-focused):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :hover)):not(:has([slot=end] :active)):not(:has([slot=start] :hover)):not(:has([slot=start] :active)):hover{background-color:var(--modus-wc-color-gray-9);color:inherit;outline:none}[data-theme=modus-classic-dark] modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-focused:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :hover)):not(:has([slot=end] :active)):not(:has([slot=start] :hover)):not(:has([slot=start] :active)):hover,[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-focused:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :hover)):not(:has([slot=end] :active)):not(:has([slot=start] :hover)):not(:has([slot=start] :active)):hover{background-color:var(--modus-wc-color-gray-9);color:inherit}[data-theme=modus-classic-dark] modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-active,[data-theme=modus-classic-dark] modus-wc-tree-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :active)):not(:has([slot=start] :active)),[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-active,[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :active)):not(:has([slot=start] :active)){background-color:color-mix(in sRGB, var(--modus-wc-color-primary) 30%, transparent)}[data-theme=modus-classic-dark] modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-active .modus-wc-menu-item-interactive,[data-theme=modus-classic-dark] modus-wc-tree-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :active)):not(:has([slot=start] :active)) .modus-wc-menu-item-interactive,[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-active .modus-wc-menu-item-interactive,[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :active)):not(:has([slot=start] :active)) .modus-wc-menu-item-interactive{background-color:transparent}[data-theme=modus-classic-dark] modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-active .modus-wc-menu-item-interactive:hover,[data-theme=modus-classic-dark] modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-active .modus-wc-menu-item-interactive:focus,[data-theme=modus-classic-dark] modus-wc-tree-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :active)):not(:has([slot=start] :active)) .modus-wc-menu-item-interactive:hover,[data-theme=modus-classic-dark] modus-wc-tree-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :active)):not(:has([slot=start] :active)) .modus-wc-menu-item-interactive:focus,[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-active .modus-wc-menu-item-interactive:hover,[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-active .modus-wc-menu-item-interactive:focus,[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :active)):not(:has([slot=start] :active)) .modus-wc-menu-item-interactive:hover,[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item:active:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :active)):not(:has([slot=start] :active)) .modus-wc-menu-item-interactive:focus{background-color:transparent;box-shadow:none;color:inherit}[data-theme=modus-classic-dark] modus-wc-tree-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-tree-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-tree-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-tree-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-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive .modus-wc-menu-item-content:not(:has([slot=start])) .modus-wc-menu-item-labels,[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive .modus-wc-menu-item-content:not(:has([slot=start])) .modus-wc-menu-item-labels{padding-inline-start:0}[data-theme=connect-light] modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive .modus-wc-menu-item-content:not(:has([slot=end])) .modus-wc-menu-item-labels,[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive .modus-wc-menu-item-content:not(:has([slot=end])) .modus-wc-menu-item-labels{padding-inline-end:0}[data-theme=connect-light] modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive .modus-wc-menu-item-labels,[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item .modus-wc-menu-item-interactive .modus-wc-menu-item-labels{font-weight:var(--modus-wc-font-weight-normal)}[data-theme=connect-light] modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-active .modus-wc-menu-item-interactive .modus-wc-menu-item-labels,[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-active .modus-wc-menu-item-interactive .modus-wc-menu-item-labels{font-weight:var(--modus-wc-font-weight-semibold)}[data-theme=connect-light] modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-md .modus-wc-menu-item-interactive .modus-wc-menu-item-labels,[data-theme=connect-dark] modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-md .modus-wc-menu-item-interactive .modus-wc-menu-item-labels{font-size:0.8125rem;line-height:1.125rem}[data-theme=connect-light] modus-wc-side-navigation modus-wc-tree-menu .modus-wc-menu li.modus-wc-menu-item:hover,[data-theme=connect-light] modus-wc-side-navigation modus-wc-tree-item .modus-wc-menu-item:hover{background-color:transparent}[data-theme=connect-light] modus-wc-side-navigation modus-wc-tree-item .modus-wc-menu-item:not(.modus-wc-menu-item-active)>.modus-wc-menu-item-interactive:hover{background-color: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 .modus-wc-menu-item:not(.modus-wc-menu-item-disabled):not(.modus-wc-menu-item-focused):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :hover)):not(:has([slot=end] :active)):not(:has([slot=start] :hover)):not(:has([slot=start] :active)):hover{background-color:transparent;outline:none}[data-theme=connect-light] modus-wc-side-navigation modus-wc-tree-item .modus-wc-menu-item.modus-wc-menu-item-focused:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):not(:has([slot=end] :hover)):not(:has([slot=end] :active)):not(:has([slot=start] :hover)):not(:has([slot=start] :active)):hover{background-color:transparent}modus-wc-tree-item .modus-wc-menu-item:not(.modus-wc-menu-item-active):has([slot=end] :active){background-color:transparent;color:inherit}modus-wc-tree-item .modus-wc-menu-item:has([slot=end] :active)>.modus-wc-menu-item-interactive{background-color:transparent;color:inherit}modus-wc-tree-item .modus-wc-menu-item:not(.modus-wc-menu-item-active):has([slot=start] :active){background-color:transparent;color:inherit}modus-wc-tree-item .modus-wc-menu-item:has([slot=start] :active)>.modus-wc-menu-item-interactive{background-color:transparent;color:inherit}";
const ModusWcTreeItem$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcTreeItem extends H {
constructor() {
super();
this.__registerHost();
this.itemSelect = createEvent(this, "itemSelect", 7);
this.inheritedAttributes = {};
/** Custom CSS class to apply to the li element. */
this.customClass = '';
/** The text rendered in the tree item. */
this.label = '';
/** The size of the tree item. */
this.size = 'md';
/** The position of the tooltip relative to the tree item. */
this.tooltipPosition = 'auto';
/** The unique identifying value of the tree item. */
this.value = '';
/** Internal state to track if submenu is expanded */
this.isExpanded = false;
this.handleItemClick = (event) => {
var _a;
if (this.isInteractiveSlotClick(event, 'end'))
return;
if (this.isInteractiveSlotClick(event, 'start'))
return;
this.handleItemSelect();
// Blurring the li prevents the focus ring from sticking after mouse click.
(_a = this.el.querySelector('li')) === null || _a === void 0 ? void 0 : _a.blur();
};
this.handleItemSelect = () => {
if (this.hasSubmenu) {
if (this.blockExpand) {
this.itemSelect.emit({ value: this.value });
return;
}
const sideNav = this.el.closest('modus-wc-side-navigation');
if (sideNav &&
!sideNav.expanded) {
this.itemSelect.emit({ value: this.value });
return;
}
const submenu = this.el.querySelector('.modus-wc-menu-dropdown');
const liElement = this.el.querySelector('li');
if (submenu && liElement) {
submenu.classList.toggle('modus-wc-menu-dropdown-show');
this.isExpanded = submenu.classList.contains('modus-wc-menu-dropdown-show');
if (this.isExpanded) {
liElement.classList.add('modus-wc-menu-item-expanded');
liElement.classList.add('modus-wc-menu-dropdown-show');
}
else {
liElement.classList.remove('modus-wc-menu-item-expanded');
liElement.classList.remove('modus-wc-menu-dropdown-show');
}
}
}
else if (this.resolveSelectionMode() === 'multiple' || this.checkbox) {
this.selected = !this.selected;
}
else {
if (this.resolveSelectionMode() === 'single') {
this.deselectSiblings();
}
this.selected = true;
}
this.itemSelect.emit({ value: this.value, selected: this.selected });
};
}
componentWillLoad() {
handleShadowDOMStyles(this.el);
this.inheritedAttributes = inheritAriaAttributes(this.el);
this._selectionMode = this.resolveSelectionMode();
}
componentDidLoad() {
if (typeof MutationObserver === 'undefined')
return;
const parentTreeMenu = this.el.closest('modus-wc-tree-menu');
if (parentTreeMenu) {
this.parentTreeMenuObserver = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.attributeName === 'selection-mode') {
this.handleSelectionModeChange();
break;
}
}
});
this.parentTreeMenuObserver.observe(parentTreeMenu, { attributes: true });
}
}
disconnectedCallback() {
var _a;
(_a = this.parentTreeMenuObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
}
handleSelectionModeChange() {
this._selectionMode = this.resolveSelectionMode();
this.selected = false;
}
handleKeyDown(e) {
if (this.disabled)
return;
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
this.handleItemSelect();
}
}
/**
* Public method to collapse the submenu if it's expanded
*/
async collapseSubmenu() {
if (this.hasSubmenu && this.isExpanded) {
const submenu = this.el.querySelector('.modus-wc-menu-dropdown');
const liElement = this.el.querySelector('li');
if (submenu && liElement) {
submenu.classList.remove('modus-wc-menu-dropdown-show');
liElement.classList.remove('modus-wc-menu-item-expanded');
liElement.classList.remove('modus-wc-menu-dropdown-show');
this.isExpanded = false;
}
}
return Promise.resolve();
}
getRootTreeMenu() {
var _a, _b;
let treeMenu = this.el.closest('modus-wc-tree-menu');
while (treeMenu) {
const parent = (_b = (_a = treeMenu.parentElement) === null || _a === void 0 ? void 0 : _a.closest('modus-wc-tree-menu')) !== null && _b !== void 0 ? _b : null;
if (!parent)
break;
treeMenu = parent;
}
return treeMenu;
}
deselectSiblings() {
const rootTreeMenu = this.getRootTreeMenu();
if (!rootTreeMenu)
return;
const allItems = rootTreeMenu.querySelectorAll('modus-wc-tree-item');
allItems.forEach((item) => {
if (item !== this.el) {
item.selected = false;
}
});
}
resolveSelectionMode() {
var _a;
return (_a = this.el.closest('modus-wc-tree-menu')) === null || _a === void 0 ? void 0 : _a.selectionMode;
}
getClasses() {
const classList = ['modus-wc-menu-item'];
const isActive = !this.hasSubmenu && !!this.selected;
const propClasses = convertPropsToClasses({
active: isActive,
bordered: this.bordered,
disabled: this.disabled,
focused: this.focused,
size: this.size,
});
if (propClasses)
classList.push(propClasses);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
getInteractiveClasses() {
const classList = ['modus-wc-menu-item-interactive'];
if (this.hasSubmenu)
classList.push('modus-wc-menu-dropdown-toggle');
return classList.join(' ');
}
getRole(mode) {
if (mode === 'multiple')
return 'menuitemcheckbox';
if (mode === 'single')
return 'menuitemradio';
return 'menuitem';
}
hasCheckbox(mode) {
return this.checkbox || mode === 'multiple';
}
getAriaChecked(mode) {
if (!this.hasCheckbox(mode))
return undefined;
return this.selected ? 'true' : 'false';
}
getAriaSelected(mode) {
if (this.hasCheckbox(mode))
return undefined;
if (mode === 'single')
return this.selected ? 'true' : 'false';
return undefined;
}
isSlotClick(event, slotName) {
const slotted = Array.from(this.el.querySelectorAll(`[slot="${slotName}"]`));
if (slotted.length === 0)
return false;
// Use the innermost event target so this works regardless of how
// Stencil's slot relocation affects composedPath ancestry order.
const innerTarget = event.composedPath()[0];
if (!innerTarget)
return false;
return slotted.some((el) => el === innerTarget || el.contains(innerTarget));
}
isInteractiveSlotClick(event, slotName) {
if (!this.isSlotClick(event, slotName))
return false;
if (slotName === 'end')
return true;
const interactiveSelector = 'button, a, input, select, textarea, modus-wc-button, modus-wc-checkbox';
return event.composedPath().some((node) => {
if (!(node instanceof H))
return false;
return (node.matches(interactiveSelector) || !!node.closest(interactiveSelector));
});
}
render() {
const mode = this._selectionMode;
return (h(Host, { key: 'e449da3b3e622c0563053ea430d154504af7bc94' }, h("li", Object.assign({ key: '69a6c98f67cc075172f75edda01a6a38a3073f0e', "aria-checked": this.getAriaChecked(mode), "aria-disabled": this.disabled, "aria-expanded": this.hasSubmenu ? String(this.isExpanded) : undefined, "aria-selected": this.getAriaSelected(mode), class: this.getClasses(), role: this.getRole(mode), tabIndex: this.disabled ? -1 : 0 }, this.inheritedAttributes), h("div", { key: 'bb1ad08a4c96902d11d4a87f5929b811e72e0781', class: this.getInteractiveClasses(), onClick: this.handleItemClick, role: "presentation", tabIndex: -1 }, h("div", { key: '64a245f9c429c17f0074705b7dab106ca864bf4e', class: "modus-wc-menu-item-content" }, (this.checkbox || mode === 'multiple') && (h("modus-wc-checkbox", { key: '2fd4bce5ada577a49e429c4916b1a8304fec475f', "aria-label": "Checkbox", disabled: this.disabled, size: this.size, value: !!this.selected })), h("slot", { key: '3cd2f808b5c605f5da8b49332b550f654d03ef24', name: "start" }), h("div", { key: '43a01c089eaa192d263d31ed4878f5be7340a323', class: "modus-wc-menu-item-labels" }, this.tooltipContent ? (h("modus-wc-tooltip", { content: this.tooltipContent, position: this.tooltipPosition, customClass: "modus-wc-menu-item-tooltip" }, h("div", null, this.label))) : (h("div", null, this.label)), this.subLabel && (h("div", { key: 'a8e29414ded68dd80314bcfa3714325bc570e2b4', class: "modus-wc-menu-item-sublabel" }, this.subLabel))), h("slot", { key: '6e3d2f5ff446499d2835af24bf8e5f457eec5dc3', name: "end" }))), h("slot", { key: '9f94e45e38a165aab731b18374c720d176a0a1de' }))));
}
get el() { return this; }
static get style() { return modusWcTreeItemCss; }
}, [4, "modus-wc-tree-item", {
"bordered": [4],
"checkbox": [4],
"customClass": [1, "custom-class"],
"disabled": [4],
"label": [1],
"selected": [1028],
"focused": [4],
"size": [1],
"subLabel": [1, "sub-label"],
"tooltipContent": [1, "tooltip-content"],
"tooltipPosition": [1, "tooltip-position"],
"value": [1],
"hasSubmenu": [4, "has-submenu"],
"blockExpand": [4, "block-expand"],
"isExpanded": [32],
"_selectionMode": [32],
"collapseSubmenu": [64]
}, [[0, "keydown", "handleKeyDown"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-tree-item", "modus-wc-checkbox", "modus-wc-input-label", "modus-wc-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-tree-item":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcTreeItem$1);
}
break;
case "modus-wc-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "modus-wc-input-label":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "modus-wc-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const ModusWcTreeItem = ModusWcTreeItem$1;
const defineCustomElement = defineCustomElement$1;
export { ModusWcTreeItem, defineCustomElement };