import { h } from "@stencil/core";
import { computePosition, getNextZIndex } from "../../utils/popup-manager";
export class Popover {
    el;
    // 注意：使用默认值使其成为 required string，避免与 HTMLElement.title（string）
    // 的可选类型冲突；同时保留 Ant Design 兼容的 `title` API。
    title = '';
    width = '240px';
    placement = 'bottom';
    trigger = 'hover';
    disabled = false;
    visible = false;
    popupStyle = {};
    triggerRef;
    popupRef;
    show = () => {
        if (!this.disabled) {
            this.visible = true;
            requestAnimationFrame(() => this.updatePosition());
        }
    };
    hide = () => { this.visible = false; };
    toggle = () => {
        if (this.visible) {
            this.hide();
        }
        else {
            this.show();
        }
    };
    updatePosition() {
        if (!this.triggerRef || !this.popupRef)
            return;
        const rect = this.triggerRef.getBoundingClientRect();
        const { width: pw, height: ph } = this.popupRef.getBoundingClientRect();
        const pos = computePosition(rect, pw, ph, this.placement, 8);
        this.popupStyle = { top: `${pos.top}px`, left: `${pos.left}px`, zIndex: String(getNextZIndex()) };
    }
    render() {
        const events = this.trigger === 'hover' ? { onMouseEnter: this.show, onMouseLeave: this.hide } : { onClick: this.toggle };
        return (h("div", { key: 'b094fdab875b54a1334489467d87cab19d5d495c', class: "hb-popover", ...events }, h("div", { key: '0d87497b9f31c97aab530a5298722b594388a036', ref: (el) => { this.triggerRef = el; }, class: "hb-popover__trigger" }, h("slot", { key: '93740d59a42e448997f44fe9a636e2858d15121a' })), this.visible && (h("div", { key: '54f77abc1aa942b45e69bf4c63ec6b8f4fd49bad', ref: (el) => { this.popupRef = el; }, class: "hb-popover__popup", style: { ...this.popupStyle, width: this.width }, onMouseEnter: () => this.trigger === 'hover' && this.show(), onMouseLeave: () => this.trigger === 'hover' && this.hide() }, this.title && h("div", { key: '44f71196d287712f9895546d03d1849ba2092241', class: "hb-popover__title" }, this.title), h("div", { key: '7f558d395de6937bb453f9a3453509654fb14514', class: "hb-popover__body" }, h("slot", { key: '19677384409687a3936393b2aaf6722c071de5eb', name: "content" }))))));
    }
    static get is() { return "hb-popover"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["popover.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["popover.css"]
        };
    }
    static get properties() {
        return {
            "title": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "title",
                "reflect": false,
                "defaultValue": "''"
            },
            "width": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "width",
                "reflect": false,
                "defaultValue": "'240px'"
            },
            "placement": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Placement",
                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
                    "references": {
                        "Placement": {
                            "location": "import",
                            "path": "../../utils/popup-manager",
                            "id": "src/utils/popup-manager.ts::Placement"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "placement",
                "reflect": false,
                "defaultValue": "'bottom'"
            },
            "trigger": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'hover' | 'click'",
                    "resolved": "\"click\" | \"hover\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "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": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "visible": {},
            "popupStyle": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=Popover.js.map
