@trimble-oss/moduswebcomponents/esm/modus-wc-tree-menu.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 registerInstance, d as createEvent, h, e as Host, g as getElement } from './index-C1-Dpkp7.js';
import { h as handleShadowDOMStyles } from './base-component-tWS3Egrk.js';
import { i as inheritAriaAttributes } from './utils-DN2BGzSQ.js';

const convertPropsToClasses = ({ bordered, orientation, size, }) => {
    let classes = '';
    if (bordered) {
        classes = `${classes} modus-wc-menu--bordered`;
    }
    if (orientation === 'horizontal') {
        classes = `${classes} modus-wc-menu-horizontal`;
    }
    if (size) {
        classes = `${classes} modus-wc-menu-${size}`;
    }
    return classes.trim();
};

const modusWcTreeMenuCss = "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)}";

const ModusWcTreeMenu = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.menuFocusout = createEvent(this, "menuFocusout", 7);
        this.menuSelectionChange = createEvent(this, "menuSelectionChange", 7);
        this.inheritedAttributes = {};
        this.selectedItems = [];
        /** Custom CSS class to apply to the ul element. */
        this.customClass = '';
        /** The orientation of the tree menu. */
        this.orientation = 'vertical';
        /** The selection mode of the tree menu. */
        this.selectionMode = 'single';
        /** The size of the tree menu. */
        this.size = 'md';
        this.getMenuRole = () => this.orientation === 'horizontal' ? 'menubar' : 'menu';
    }
    onSelectionModeChange() {
        this.selectedItems = [];
    }
    componentWillLoad() {
        handleShadowDOMStyles(this.el);
        if (!this.el.ariaLabel) {
            this.el.ariaLabel = 'Tree menu';
        }
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        if (this.isSubMenu) {
            const classList = ['modus-wc-menu-dropdown'];
            if (this.customClass)
                classList.push(this.customClass);
            return classList.join(' ');
        }
        const classList = ['modus-wc-menu modus-wc-w-full'];
        const propClasses = convertPropsToClasses({
            bordered: this.bordered,
            orientation: this.orientation,
            size: this.size,
        });
        if (propClasses)
            classList.push(propClasses);
        if (this.customClass)
            classList.push(this.customClass);
        return classList.join(' ');
    }
    getTreeItems() {
        return Array.from(this.el.querySelectorAll('modus-wc-tree-item')).filter((item) => item.closest('modus-wc-tree-menu') === this.el);
    }
    handleItemSelect(e) {
        if (this.selectionMode !== 'multiple')
            return;
        const item = e.target;
        const isCurrentlySelected = this.selectedItems.includes(item);
        if (e.detail.selected && !isCurrentlySelected) {
            this.selectedItems = [...this.selectedItems, item];
        }
        else if (!e.detail.selected && isCurrentlySelected) {
            this.selectedItems = this.selectedItems.filter((i) => i !== item);
        }
        this.menuSelectionChange.emit({ selectedItems: this.selectedItems });
    }
    handleKeyDown(e) {
        if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')
            return;
        e.preventDefault();
        const items = this.getTreeItems();
        const focusableItems = items.filter((item) => !item.disabled);
        if (focusableItems.length === 0)
            return;
        const activeEl = document.activeElement;
        const currentTreeItem = activeEl === null || activeEl === void 0 ? void 0 : activeEl.closest('modus-wc-tree-item');
        const currentIndex = focusableItems.indexOf(currentTreeItem);
        let nextIndex;
        if (e.key === 'ArrowDown') {
            nextIndex =
                currentIndex < focusableItems.length - 1 ? currentIndex + 1 : 0;
        }
        else {
            nextIndex =
                currentIndex > 0 ? currentIndex - 1 : focusableItems.length - 1;
        }
        const nextLi = focusableItems[nextIndex].querySelector('li');
        if (nextLi) {
            nextLi.focus();
        }
    }
    handleFocusout(e) {
        if (!this.el.contains(e.relatedTarget)) {
            this.menuFocusout.emit(e);
            if (this.isSubMenu) {
                e.stopPropagation();
            }
        }
    }
    render() {
        return (h(Host, { key: '4b1a4834b8e63748efd4e77fd5be7b4ff88e7193', class: this.isSubMenu ? 'modus-wc-menu-submenu' : undefined }, h("ul", Object.assign({ key: 'e007e38b0e97c7774d11ab2391b5f46ed5c07a71', "aria-orientation": this.orientation, class: this.getClasses(), role: this.getMenuRole() }, this.inheritedAttributes), h("slot", { key: '292c95ac103697013a0b6a6eea0b5043dee22f32' }))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "selectionMode": ["onSelectionModeChange"]
    }; }
};
ModusWcTreeMenu.style = modusWcTreeMenuCss;

export { ModusWcTreeMenu as modus_wc_tree_menu };