import { h } from "@stencil/core";
import { isActivationKey } from "../../utils/a11y";
/**
 * SubMenu 子菜单
 *
 * 设计要点：
 * - 不拦截 hbMenuItemSelect：MenuItem 点击派发的内部事件会冒泡穿过 SubMenu 到达 Menu，
 *   由 Menu 的 @Listen('hbMenuItemSelect') 统一处理（避免无限递归的设计见 MenuItem.handleClick）。
 * - 折叠模式（collapsed=true，由父 Menu 通过 prop 传入）：不再就地展开，
 *   改为标题悬停时弹出二级浮层（popover）；标题节点带 title 属性提供原生文字提示。
 */
export class SubMenu {
    el;
    /** 标题 */
    label = '';
    /** 图标 */
    icon;
    /**
     * 是否处于折叠态（由父 hb-menu 在 collapsed=true 时透传）。
     * 折叠态下不再就地展开，而是悬停弹出浮层。
     */
    collapsed = false;
    isOpen = false;
    isHover = false;
    toggle = () => {
        // 折叠态不就地切换展开（改由 hover 浮层承载子菜单）
        if (this.collapsed)
            return;
        this.isOpen = !this.isOpen;
    };
    handleTitleKeydown = (e) => {
        if (isActivationKey(e.key)) {
            e.preventDefault();
            this.toggle();
        }
    };
    handleMouseEnter = () => {
        if (!this.collapsed)
            return;
        this.isHover = true;
    };
    handleMouseLeave = () => {
        if (!this.collapsed)
            return;
        this.isHover = false;
    };
    /** 折叠态浮层内点击子项后，收起浮层 */
    handleChildrenClick = () => {
        if (!this.collapsed)
            return;
        this.isHover = false;
    };
    render() {
        // 折叠态：浮层是否显示由 hover 决定；非折叠态：就地展开由 isOpen 决定
        const showChildren = this.collapsed ? this.isHover : this.isOpen;
        return (h("li", { key: '2158b7ce59919c89c5f86a1218e1f2c16fb7cc11', class: {
                'hb-sub-menu': true,
                'hb-sub-menu--open': this.isOpen,
                'hb-sub-menu--collapsed': this.collapsed,
            }, role: "menuitem", "aria-haspopup": "menu", "aria-expanded": showChildren ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'ed1b49c0417a21673d8eac14dfb15e31db722917', class: "hb-sub-menu__title", role: "button", tabindex: 0, "aria-expanded": showChildren ? 'true' : 'false',
            // 折叠态用原生 title 提供文字提示（图标条场景）
            title: this.collapsed ? this.label : undefined, onClick: this.toggle, onKeyDown: this.handleTitleKeydown }, this.icon && h("span", { key: '488430d18a0a4c2fd81f38d621988b3a06ef874a', class: "hb-sub-menu__icon" }, this.icon), h("span", { key: 'ba16d8aaddeba6ec00a9b19ac4069802a1cc503b', class: "hb-sub-menu__label" }, this.label), h("span", { key: 'cf3b32672f9f36d4ffbe570f7dbad1e2755afe3c', class: { 'hb-sub-menu__arrow': true, 'hb-sub-menu__arrow--open': showChildren } }, "\u25B6")), showChildren && (h("ul", { key: '6f0404f6e5b89ae0c59b47630f8d17620800b46f', class: {
                'hb-sub-menu__children': true,
                'hb-sub-menu__children--popover': this.collapsed,
            }, role: "menu", onClick: this.handleChildrenClick }, h("slot", { key: '795f95cc807e590339faff8745eb6c36c326f9f2' })))));
    }
    static get is() { return "hb-sub-menu"; }
    static get encapsulation() { return "shadow"; }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6807\u9898"
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false,
                "defaultValue": "''"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u56FE\u6807"
                },
                "getter": false,
                "setter": false,
                "attribute": "icon",
                "reflect": false
            },
            "collapsed": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u5904\u4E8E\u6298\u53E0\u6001\uFF08\u7531\u7236 hb-menu \u5728 collapsed=true \u65F6\u900F\u4F20\uFF09\u3002\n\u6298\u53E0\u6001\u4E0B\u4E0D\u518D\u5C31\u5730\u5C55\u5F00\uFF0C\u800C\u662F\u60AC\u505C\u5F39\u51FA\u6D6E\u5C42\u3002"
                },
                "getter": false,
                "setter": false,
                "attribute": "collapsed",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "isOpen": {},
            "isHover": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=SubMenu.js.map
