import { h } from "@stencil/core";
/**
 * Menu 导航菜单组件
 * 为页面和功能提供导航的菜单
 */
export class Menu {
    el;
    /** 模式 */
    mode = 'vertical';
    /** 当前激活菜单项 */
    defaultActive = '';
    /** 是否折叠（仅垂直模式） */
    collapsed = false;
    /** 背景色 */
    backgroundColor;
    /** 文字颜色 */
    textColor;
    /** 激活项文字颜色 */
    activeTextColor;
    activeItem = '';
    /** 选中事件 */
    hbSelect;
    componentDidLoad() {
        this.activeItem = this.defaultActive;
        // 折叠态透传给子 hb-sub-menu（子组件无法继承 prop，需在 host 属性层面同步）
        this.syncCollapsedToChildren();
    }
    handleDefaultActiveChange() {
        this.activeItem = this.defaultActive;
    }
    handleCollapsedChange() {
        this.syncCollapsedToChildren();
    }
    /**
     * 把 collapsed 状态同步到所有直连与嵌套的 hb-sub-menu 子节点。
     * querySelectorAll 递归匹配，因此 hb-sub-menu > hb-sub-menu（多级）也会被覆盖。
     */
    syncCollapsedToChildren() {
        if (!this.el)
            return;
        this.el.querySelectorAll('hb-sub-menu').forEach((sub) => {
            sub.setAttribute('collapsed', this.collapsed ? 'true' : 'false');
        });
    }
    /** 监听子 hb-menu-item 派发的内部选中事件，更新激活态并向外发射公开的 hbSelect */
    handleSelect(event) {
        const key = event.detail;
        this.activeItem = key;
        this.defaultActive = key;
        this.hbSelect.emit(key);
        // 通知子组件（含嵌套在 hb-sub-menu 内的 hb-menu-item）
        this.el.querySelectorAll('hb-menu-item').forEach((item) => {
            item.setAttribute('active', item.getAttribute('key') === key ? 'true' : 'false');
        });
    }
    render() {
        const style = {};
        if (this.backgroundColor)
            style['--hb-menu-bg'] = this.backgroundColor;
        if (this.textColor)
            style['--hb-menu-color'] = this.textColor;
        if (this.activeTextColor)
            style['--hb-menu-active-color'] = this.activeTextColor;
        return (h("ul", { key: '0352bda3d62d4a280681612a7bf301f16459bcc0', class: {
                'hb-menu': true,
                [`hb-menu--${this.mode}`]: true,
                'hb-menu--collapsed': this.collapsed,
            }, style: style, role: "menu" }, h("slot", { key: '142fea193616a6e311b854f6bd893e0646950b29' })));
    }
    static get is() { return "hb-menu"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["menu.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["menu.css"]
        };
    }
    static get properties() {
        return {
            "mode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'horizontal' | 'vertical'",
                    "resolved": "\"horizontal\" | \"vertical\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6A21\u5F0F"
                },
                "getter": false,
                "setter": false,
                "attribute": "mode",
                "reflect": false,
                "defaultValue": "'vertical'"
            },
            "defaultActive": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5F53\u524D\u6FC0\u6D3B\u83DC\u5355\u9879"
                },
                "getter": false,
                "setter": false,
                "attribute": "default-active",
                "reflect": false,
                "defaultValue": "''"
            },
            "collapsed": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u6298\u53E0\uFF08\u4EC5\u5782\u76F4\u6A21\u5F0F\uFF09"
                },
                "getter": false,
                "setter": false,
                "attribute": "collapsed",
                "reflect": false,
                "defaultValue": "false"
            },
            "backgroundColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u80CC\u666F\u8272"
                },
                "getter": false,
                "setter": false,
                "attribute": "background-color",
                "reflect": false
            },
            "textColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6587\u5B57\u989C\u8272"
                },
                "getter": false,
                "setter": false,
                "attribute": "text-color",
                "reflect": false
            },
            "activeTextColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6FC0\u6D3B\u9879\u6587\u5B57\u989C\u8272"
                },
                "getter": false,
                "setter": false,
                "attribute": "active-text-color",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "activeItem": {}
        };
    }
    static get events() {
        return [{
                "method": "hbSelect",
                "name": "hbSelect",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u9009\u4E2D\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "defaultActive",
                "methodName": "handleDefaultActiveChange"
            }, {
                "propName": "collapsed",
                "methodName": "handleCollapsedChange"
            }];
    }
    static get listeners() {
        return [{
                "name": "hbMenuItemSelect",
                "method": "handleSelect",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=Menu.js.map
