@trimble-oss/moduswebcomponents/components/modus-wc-side-navigation.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 { p as proxyCustomElement, H, h, a as Host } from './index.js';
import { i as inheritAriaAttributes } from './p-DhcwHZp_.js';

const convertPropsToClasses = ({ expanded, }) => {
    let classes = '';
    if (expanded) {
        classes = `${classes} modus-wc-side-navigation-expanded`;
    }
    return classes.trim();
};

const modusWcSideNavigationCss = "modus-wc-side-navigation{display:block;height:100vh;position:relative}modus-wc-side-navigation .modus-wc-side-navigation{background:var(--modus-wc-color-white);box-shadow:rgba(36, 35, 45, 0.3) 1px 0 4px;color:var(--modus-wc-color-trimble-gray);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;width:4rem;z-index:999}modus-wc-side-navigation .modus-wc-side-navigation.expanded{width:256px}modus-wc-side-navigation .side-navigation-content{background:var(--modus-wc-color-white);color:var(--modus-wc-color-trimble-gray);flex:1 1 auto}[data-theme=modus-classic-dark] modus-wc-side-navigation .side-navigation-content,[data-theme=modus-modern-dark] modus-wc-side-navigation .side-navigation-content{background:var(--modus-wc-color-gray-10);color:var(--modus-wc-color-white)}";

const ModusWcSideNavigation$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcSideNavigation extends H {
    constructor() {
        super();
        this.__registerHost();
        this.inheritedAttributes = {};
        this.minWidth = '4rem';
        /** Whether the side navigation should collapse when clicking outside of it. */
        this.collapseOnClickOutside = true;
        /** Custom CSS class to apply to the inner div. */
        this.customClass = '';
        /** Whether the side navigation is expanded. */
        this.expanded = false;
        /** Maximum width of the side navigation panel in an expanded state. */
        this.maxWidth = '256px';
        this.handleClickOutside = (event) => {
            if (!this.expanded || !this.collapseOnClickOutside || !this.navRef)
                return;
            const path = event.composedPath ? event.composedPath() : [event.target];
            if (!path.includes(this.navRef)) {
                this.expanded = false;
            }
        };
    }
    componentWillLoad() {
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    connectedCallback() {
        if (this.collapseOnClickOutside) {
            document.addEventListener('click', this.handleClickOutside, true);
        }
    }
    disconnectedCallback() {
        document.removeEventListener('click', this.handleClickOutside, true);
    }
    getClasses() {
        const classList = ['modus-wc-side-navigation'];
        const propClasses = convertPropsToClasses({
            expanded: this.expanded,
        });
        // The order CSS classes are added matters to CSS specificity
        if (propClasses)
            classList.push(propClasses);
        if (this.customClass)
            classList.push(this.customClass);
        return classList.join(' ');
    }
    render() {
        return (h(Host, { key: 'ae2bb252f4337e4724ef6fb131d6e8704a2005fe' }, h("nav", Object.assign({ key: '4a24b5ac6bf92dd1022403655adc821f37a836e0' }, this.inheritedAttributes, { class: this.getClasses(), ref: (el) => (this.navRef = el), style: { width: this.expanded ? this.maxWidth : this.minWidth } }), h("div", { key: '6663c0731510e0797ecc24784a09fe202e687e1b', class: "side-navigation-content" }, h("slot", { key: '0eea5a1c5bb3c34e0499fd3829e2284ff00b807c' })))));
    }
    get el() { return this; }
    static get style() { return modusWcSideNavigationCss; }
}, [4, "modus-wc-side-navigation", {
        "collapseOnClickOutside": [4, "collapse-on-click-outside"],
        "customClass": [1, "custom-class"],
        "expanded": [1540],
        "maxWidth": [1, "max-width"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-side-navigation"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-side-navigation":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWcSideNavigation$1);
            }
            break;
    } });
}

const ModusWcSideNavigation = ModusWcSideNavigation$1;
const defineCustomElement = defineCustomElement$1;

export { ModusWcSideNavigation, defineCustomElement };