import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-AiOs8RvA.js';

const verdocsPortalCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";

const Z_INDEX = '10001';
const VerdocsPortal = /*@__PURE__*/ proxyCustomElement(class VerdocsPortal extends H {
    constructor() {
        super();
        this.__registerHost();
        this.clickAway = createEvent(this, "clickAway");
        this.moved = false;
        /**
         * Vertical offset from the parent.
         */
        this.voffset = 0;
    }
    handleScroll() {
        this.calculatePosition();
    }
    handleResize() {
        this.calculatePosition();
    }
    handleClick(e) {
        var _a;
        const closest = e.target.closest('.verdocs-portal');
        if (!this.element.contains(e.target) && !closest) {
            (_a = this.clickAway) === null || _a === void 0 ? void 0 : _a.emit();
        }
    }
    calculateLeft() {
        var _a;
        const anchorEl = document.getElementById(this.anchor);
        if (!anchorEl)
            return 0;
        const anchorRect = anchorEl.getBoundingClientRect();
        const rightOfViewportWithScroll = document.documentElement.clientWidth + document.documentElement.scrollLeft;
        const leftOfPopup = Math.max(anchorRect.left, 0);
        // Old centering logic, disabled temporarily
        //    Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
        // Old right-align logic, disabled temporarily
        //    Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
        const popupWidth = ((_a = this.element) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 400;
        const offRightEdge = leftOfPopup + popupWidth > rightOfViewportWithScroll;
        return offRightEdge ? rightOfViewportWithScroll - popupWidth - 20 : leftOfPopup;
    }
    calculateTop() {
        var _a;
        const anchorEl = document.getElementById(this.anchor);
        if (!anchorEl)
            return 0;
        const anchorRect = anchorEl.getBoundingClientRect();
        const bottomOfViewportWithScroll = document.documentElement.clientHeight + document.documentElement.scrollTop;
        const topOfPopup = anchorRect.bottom + this.voffset + document.documentElement.scrollTop;
        const popupHeight = ((_a = this.element) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 300;
        const offBottomEdge = topOfPopup + popupHeight > bottomOfViewportWithScroll;
        return offBottomEdge ? topOfPopup - popupHeight - anchorRect.height : topOfPopup;
    }
    calculatePosition() {
        this.portal.style.top = `${this.calculateTop()}px`;
        this.portal.style.left = `${this.calculateLeft()}px`;
    }
    componentWillLoad() {
        var _a;
        const id = `${this.anchor}-portal`;
        (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove();
        this.portal = document.createElement('div');
        this.portal.setAttribute('id', id);
        this.portal.style.zIndex = Z_INDEX;
        this.portal.style.position = 'absolute';
        document.body.append(this.portal);
    }
    componentDidLoad() {
        this.portal.appendChild(this.element);
        this.calculatePosition();
    }
    disconnectedCallback() {
        this.moved ? this.portal.remove() : (this.moved = true);
    }
    render() {
        return (h(Host, { key: '6cd36148f5c2845915d9c799c53181d63ef092f4', ref: el => (this.element = el), class: "verdocs-portal" }, h("slot", { key: '1852433ec3a6203a5d732375dcf7e245c2245b81' })));
    }
    static get style() { return verdocsPortalCss; }
}, [4, "verdocs-portal", {
        "anchor": [1],
        "voffset": [2]
    }, [[11, "scroll", "handleScroll"], [9, "resize", "handleResize"], [4, "click", "handleClick"]]]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-portal"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-portal":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsPortal);
            }
            break;
    } });
}

export { VerdocsPortal as V, defineCustomElement as d };
//# sourceMappingURL=p-BQtWBtuj.js.map

//# sourceMappingURL=p-BQtWBtuj.js.map