import { h } from "@stencil/core";
import { isActivationKey } from "../../utils/a11y";
/**
 * MenuItem 菜单项
 */
export class MenuItem {
    el;
    /** 唯一标识 */
    key = '';
    /** 是否禁用 */
    disabled = false;
    /** 图标 */
    icon;
    /** 是否激活（由父级 Menu 设置） */
    active = false;
    handleClick = () => {
        if (this.disabled)
            return;
        const menu = this.el.closest('hb-menu');
        if (menu) {
            // 使用内部事件名 hbMenuItemSelect，与 Menu 向外发射的公开事件 hbSelect 区分，
            // 否则 Menu 的 @Listen('hbSelect') 会被自身 emit 的事件再次触发，导致无限递归。
            menu.dispatchEvent(new CustomEvent('hbMenuItemSelect', { detail: this.key, bubbles: true }));
        }
    };
    handleKeydown = (e) => {
        if (this.disabled)
            return;
        if (isActivationKey(e.key)) {
            e.preventDefault();
            this.handleClick();
        }
    };
    render() {
        return (h("li", { key: '34b8ae3ee2a580757cd0c01261772e6de97bf332', class: {
                'hb-menu-item': true,
                'hb-menu-item--active': this.active,
                'hb-menu-item--disabled': this.disabled,
            }, role: "menuitem", tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.active ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && h("span", { key: 'a0b70a81ce4f8ed1cef7bd37c5b194a02554bc22', class: "hb-menu-item__icon" }, this.icon), h("span", { key: '8ef65eda6376d1e16ed614fa30e7cef532abc2ad', class: "hb-menu-item__text" }, h("slot", { key: '716cf4bc2cd4cd6d992010759d55f2924662cd9a' }))));
    }
    static get is() { return "hb-menu-item"; }
    static get encapsulation() { return "shadow"; }
    static get properties() {
        return {
            "key": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u552F\u4E00\u6807\u8BC6"
                },
                "getter": false,
                "setter": false,
                "attribute": "key",
                "reflect": false,
                "defaultValue": "''"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u7981\u7528"
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "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
            },
            "active": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u6FC0\u6D3B\uFF08\u7531\u7236\u7EA7 Menu \u8BBE\u7F6E\uFF09"
                },
                "getter": false,
                "setter": false,
                "attribute": "active",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=MenuItem.js.map
