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

const verdocsMenuPanelCss = "#verdocs-menu-panel-overlay{top:0;left:0;width:100%;height:100%;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.4980392157)}#verdocs-menu-panel{opacity:0;z-index:10001;position:fixed;overflow-y:scroll;background-color:#ffffff;font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif);-webkit-animation:showVerdocsMenuPanel 0.35s;-webkit-animation-fill-mode:forwards}@-webkit-keyframes showVerdocsMenuPanel{0%{opacity:0;right:-300px}100%{right:0;opacity:1}}";

const VerdocsMenuPanel = /*@__PURE__*/ proxyCustomElement(class VerdocsMenuPanel extends H {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.close = createEvent(this, "close");
        this.moved = false;
        this.overlayId = `verdocs-menu-panel-overlay`;
        this.panelId = `verdocs-menu-panel`;
        /**
         * Which side of the screen to place the panel.
         */
        this.side = 'right';
        /**
         * Whether to show an overlay over the rest of the page.
         */
        this.overlay = true;
        /**
         * The width of the panel.
         */
        this.width = 300;
    }
    handleClick(e) {
        var _a;
        if (!this.element.contains(e.target)) {
            this.hide();
            (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
        }
    }
    componentWillLoad() {
        this.hide();
        if (this.overlay) {
            this.portal = document.createElement('div');
            this.portal.setAttribute('id', this.overlayId);
            document.body.append(this.portal);
        }
        this.portal = document.createElement('div');
        this.portal.setAttribute('id', this.panelId);
        this.portal.style.top = `0px`;
        this.portal.style.bottom = `0px`;
        this.portal.style.width = `${this.width}px`;
        if (this.side === 'left') {
            this.portal.style.left = `0px`;
        }
        else {
            this.portal.style.right = `0px`;
        }
        document.body.append(this.portal);
    }
    componentDidLoad() {
        this.portal.appendChild(this.element);
    }
    disconnectedCallback() {
        this.moved ? this.portal.remove() : (this.moved = true);
    }
    hide() {
        var _a, _b;
        (_a = document.getElementById(this.overlayId)) === null || _a === void 0 ? void 0 : _a.remove();
        (_b = document.getElementById(this.panelId)) === null || _b === void 0 ? void 0 : _b.remove();
    }
    render() {
        return (h(Host, { key: '1fa35d0ed0bedab19924d8a0f1ee11c36ea518e3', ref: el => (this.element = el) }, h("slot", { key: '280b09045cb04c9c2e595ab8a71536a18c746418' })));
    }
    static get style() { return verdocsMenuPanelCss; }
}, [260, "verdocs-menu-panel", {
        "side": [1],
        "overlay": [4],
        "width": [2]
    }, [[4, "click", "handleClick"]]]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-menu-panel"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-menu-panel":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsMenuPanel);
            }
            break;
    } });
}

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

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