import { h, Host } from "@stencil/core";
const Z_INDEX = '10001';
/**
 * Display a child component in a "portal", popping it out of the main DOM tree
 * to allow it to escape the bounds set by its parent.
 * @credit https://github.com/tomas-teston/stencil-portal for the basic
 * technique. This has been altered in a few ways to make it more friendly
 * to cases where there may be multiple portals on the page and provide more
 * alignment options for the child to be displayed.
 *
 * ```ts
 * <div style="padding: 40px">
 *     <div id="sample-tooltip" style="border: 1px solid green; padding: 3px 10px;">
 *       Tooltip Anchor
 *       <verdocs-portal anchor="sample-tooltip" .align=${align} .voffset=${voffset}>
 *         <div style="border: 1px solid red; padding: 3px 10px;">Tooltip</div>
 *       </verdocs-portal>
 *     </div>
 *   </div>
 * ```
 */
export class VerdocsPortal {
    constructor() {
        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();
        }
        // Temporary hack to dismiss portals-in-portals, which right now is pretty much just
        // multiselect.
        document.querySelectorAll('.verdocs-multiselect-dropdown').forEach(el => el.remove());
    }
    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';
        this.portal.className = 'verdocs-portal-wrapper';
        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: 'eeb176eb22239e9bd1859d87e50d9dba08a36c5a', ref: el => (this.element = el), class: "verdocs-portal" }, h("slot", { key: '0cc38913adf3b2d41e9d635a7c6bafac3e71fd8f' })));
    }
    static get is() { return "verdocs-portal"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-portal.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-portal.css"]
        };
    }
    static get properties() {
        return {
            "anchor": {
                "type": "string",
                "attribute": "anchor",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Unique ID of the parent element to anchor to."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "voffset": {
                "type": "number",
                "attribute": "voffset",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Vertical offset from the parent."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "0"
            }
        };
    }
    static get events() {
        return [{
                "method": "clickAway",
                "name": "clickAway",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get listeners() {
        return [{
                "name": "scroll",
                "method": "handleScroll",
                "target": "window",
                "capture": true,
                "passive": true
            }, {
                "name": "resize",
                "method": "handleResize",
                "target": "window",
                "capture": false,
                "passive": true
            }, {
                "name": "click",
                "method": "handleClick",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=verdocs-portal.js.map
