@aqua-ds/web-components/components-build/aq-tree-menu.js

AquaDS Web Components

import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { U as UniqueIdGenerator } from './uidGenerator.js';
import { d as defineCustomElement$2 } from './aq-tree-menu-item2.js';

const aqTreeMenuCss = "aq-tree-menu{width:100%}";

const AqTreeMenu$1 = /*@__PURE__*/ proxyCustomElement(class AqTreeMenu extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.toggleItem = createEvent(this, "toggleItem", 7);
        this.options = [];
        this.localOptions = [];
    }
    onOptionsUpdate() {
        this.refreshLocalOptions();
    }
    // Component API
    async setOptions(options) {
        this.localOptions = [...options];
    }
    async getOptions() {
        return this.localOptions;
    }
    async collapseAll() {
        this.localOptions = this.localOptions.map(item => {
            if (!item?.isDisabled)
                return { ...item, isOpen: false };
        });
    }
    handleToggleSubItem(e) {
        const clickedItem = e.detail;
        this.toggleItem.emit({ clickedItem, localOptions: this.localOptions });
    }
    refreshLocalOptions() {
        this.localOptions = this.options.map((child) => ({ ...child, isOpen: child.isOpen || false }));
    }
    generateUID() {
        return new UniqueIdGenerator().generateId();
    }
    componentWillLoad() {
        // Create a local copy of the options prop
        this.refreshLocalOptions();
    }
    render() {
        return (h("div", { key: '6b9795a1697c98b644c657871f43324967f9c4ef', class: "aq-tree-menu" }, this.localOptions.map((item, idx) => {
            return h("aq-tree-menu-item", { key: idx, item: item, idItem: item.idItem || `${this.generateUID()}`, level: 0, onToggleSubItem: (e) => this.handleToggleSubItem(e) });
        })));
    }
    static get watchers() { return {
        "options": ["onOptionsUpdate"]
    }; }
    static get style() { return aqTreeMenuCss; }
}, [256, "aq-tree-menu", {
        "options": [16],
        "localOptions": [32],
        "setOptions": [64],
        "getOptions": [64],
        "collapseAll": [64]
    }, undefined, {
        "options": ["onOptionsUpdate"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["aq-tree-menu", "aq-tree-menu-item"];
    components.forEach(tagName => { switch (tagName) {
        case "aq-tree-menu":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, AqTreeMenu$1);
            }
            break;
        case "aq-tree-menu-item":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const AqTreeMenu = AqTreeMenu$1;
const defineCustomElement = defineCustomElement$1;

export { AqTreeMenu, defineCustomElement };