import { h } from "@stencil/core";
import { createClickOutsideHandler } from "../../utils/click-outside";
import { getNextZIndex } from "../../utils/popup-manager";
/**
 * Dropdown 下拉菜单组件
 * 将动作或菜单折叠到下拉菜单中
 */
export class Dropdown {
    el;
    /** 菜单项 */
    items = [];
    /** 触发方式 */
    trigger = 'hover';
    /** 是否禁用 */
    disabled = false;
    isOpen = false;
    /** 命令事件 */
    hbCommand;
    clickOutside = createClickOutsideHandler({
        host: null,
        isOpen: () => this.isOpen,
        onClose: () => { this.isOpen = false; },
    });
    componentDidLoad() {
        this.clickOutside = createClickOutsideHandler({
            host: this.el,
            isOpen: () => this.isOpen,
            onClose: () => { this.isOpen = false; },
        });
        if (this.trigger === 'click') {
            this.clickOutside.connect();
        }
    }
    disconnectedCallback() {
        this.clickOutside.disconnect();
    }
    show = () => {
        if (this.disabled)
            return;
        this.isOpen = true;
    };
    hide = () => {
        this.isOpen = false;
    };
    toggle = () => {
        if (this.disabled)
            return;
        this.isOpen = !this.isOpen;
    };
    handleSelect = (item) => {
        if (item.disabled)
            return;
        this.isOpen = false;
        this.hbCommand.emit(item.key);
    };
    render() {
        const triggerEvents = this.trigger === 'hover'
            ? { onMouseEnter: this.show, onMouseLeave: this.hide }
            : { onClick: this.toggle };
        return (h("div", { key: '65db176398a94c702f6c3fcdc4128ed0e6afc376', class: "hb-dropdown", ...triggerEvents }, h("div", { key: '2c96f9af4f69d1a1c52195546b5b777e5a2d54b8', class: "hb-dropdown__trigger" }, h("slot", { key: 'cd007dcd7d357cc1d041472a72faa0a3a025bda2' })), this.isOpen && (h("div", { key: 'a3bdebbc0a701e01df36b701bc13de130c4e8d24', class: "hb-dropdown__menu", style: { zIndex: String(getNextZIndex()) } }, this.items.map(item => (h("div", { class: {
                'hb-dropdown__item': true,
                'hb-dropdown__item--disabled': item.disabled,
                'hb-dropdown__item--divided': item.divided,
                'hb-dropdown__item--danger': item.danger,
            }, onClick: () => this.handleSelect(item) }, item.label)))))));
    }
    static get is() { return "hb-dropdown"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dropdown.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dropdown.css"]
        };
    }
    static get properties() {
        return {
            "items": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "DropdownItem[]",
                    "resolved": "DropdownItem[]",
                    "references": {
                        "DropdownItem": {
                            "location": "local",
                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Dropdown/Dropdown.tsx",
                            "id": "src/components/Dropdown/Dropdown.tsx::DropdownItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u83DC\u5355\u9879"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "trigger": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'hover' | 'click'",
                    "resolved": "\"click\" | \"hover\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u89E6\u53D1\u65B9\u5F0F"
                },
                "getter": false,
                "setter": false,
                "attribute": "trigger",
                "reflect": false,
                "defaultValue": "'hover'"
            },
            "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"
            }
        };
    }
    static get states() {
        return {
            "isOpen": {}
        };
    }
    static get events() {
        return [{
                "method": "hbCommand",
                "name": "hbCommand",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u547D\u4EE4\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=Dropdown.js.map
