import { Fragment, h } from "@stencil/core";
export class DgaMenuV2 {
    constructor() {
        this.anchorEl = null;
        this.open = false;
        this.onClose = () => { };
        this.anchorOrigin = {
            vertical: 'bottom',
            horizontal: 'left',
        };
        this.transformOrigin = { vertical: 0, horizontal: 0 };
        this.menuStyle = {};
        this.handleClickOutside = (event) => {
            if (this.anchorEl &&
                !this.anchorEl.contains(event.target) &&
                !event.composedPath().includes(this.anchorEl)) {
                this.onClose();
            }
        };
    }
    handleOpenChange(newValue) {
        if (newValue) {
            this.calculateMenuStyle();
            document.addEventListener('click', this.handleClickOutside);
        }
        else {
            document.removeEventListener('click', this.handleClickOutside);
        }
    }
    calculateMenuStyle() {
        if (!this.anchorEl)
            return;
        const rect = this.anchorEl.getBoundingClientRect();
        // Calculate position using anchorOrigin and transformOrigin
        const top = this.anchorOrigin.vertical === 'bottom' ? rect.bottom : rect.top;
        const left = this.anchorOrigin.horizontal === 'right' ? rect.right : rect.left;
        this.menuStyle = {
            position: 'absolute',
            top: `${top + this.transformOrigin.vertical + window.scrollY}px`,
            left: `${left + this.transformOrigin.horizontal + window.scrollX}px`,
            zIndex: '1000',
        };
    }
    render() {
        return (h(Fragment, { key: '66ae5bc13049d4ed23283a1c647dbacae20ea32b' }, this.open && (h("ul", { key: '9126a2a16cb76a51b2490541d4e8990d8201b688', class: "menu", style: this.menuStyle, role: "menu", "aria-hidden": !this.open }, h("slot", { key: '927bf1bd386f7abd5b3d85f068646101e5c17130' })))));
    }
    static get is() { return "dga-menu-v2"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-menu.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-menu.css"]
        };
    }
    static get properties() {
        return {
            "anchorEl": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "HTMLElement | null",
                    "resolved": "HTMLElement",
                    "references": {
                        "HTMLElement": {
                            "location": "global",
                            "id": "global::HTMLElement"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "null"
            },
            "open": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "open",
                "reflect": false,
                "defaultValue": "false"
            },
            "onClose": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => {}"
            },
            "anchorOrigin": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "{ vertical: 'top' | 'bottom'; horizontal: 'left' | 'right' }",
                    "resolved": "{ vertical: \"top\" | \"bottom\"; horizontal: \"left\" | \"right\"; }",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{\n    vertical: 'bottom',\n    horizontal: 'left',\n  }"
            },
            "transformOrigin": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "{ vertical: number; horizontal: number }",
                    "resolved": "{ vertical: number; horizontal: number; }",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{ vertical: 0, horizontal: 0 }"
            }
        };
    }
    static get states() {
        return {
            "menuStyle": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "open",
                "methodName": "handleOpenChange"
            }];
    }
}
//# sourceMappingURL=dga-menu-v2.js.map
