import { p as proxyCustomElement, H, h } from './p-1407a5e8.js';
import { i as isActivationKey } from './p-cc0aeb50.js';

const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
    }
    get el() { return this; }
    /** 唯一标识 */
    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' }))));
    }
}, [1, "hb-menu-item", {
        "key": [1],
        "disabled": [4],
        "icon": [1],
        "active": [4]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["hb-menu-item"];
    components.forEach(tagName => { switch (tagName) {
        case "hb-menu-item":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, MenuItem);
            }
            break;
    } });
}
defineCustomElement$1();

const HbMenuItem = MenuItem;
const defineCustomElement = defineCustomElement$1;

export { HbMenuItem, defineCustomElement };

//# sourceMappingURL=hb-menu-item.js.map