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

const verdocsButtonPanelCss = "@-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)}}verdocs-button-panel{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer;opacity:0.6}verdocs-button-panel .icon svg{fill:#707ae5}verdocs-button-panel .icon:hover{opacity:1}.verdocs-button-panel-content{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:320px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{font-size:16px;font-weight:bold;margin:0 0 16px 0;color:#092c4c;border-bottom:1px solid #cccccc}";

const VerdocsButtonPanel = /*@__PURE__*/ proxyCustomElement(class VerdocsButtonPanel extends H {
    constructor() {
        super();
        this.__registerHost();
        /**
         * SVG icon to display
         */
        this.icon = '';
        // Not marked as @State because it's not the thing that controls our rendering
        this.showing = false;
    }
    componentDidRender() {
        document.body.appendChild(this.panelEl);
        if (this.popperInstance) {
            this.popperInstance.destroy();
        }
        this.popperInstance = createPopper(this.iconEl, this.panelEl, {
        // placement: 'top-end',
        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
        });
    }
    disconnectedCallback() {
        if (this.popperInstance) {
            this.popperInstance.destroy();
            this.popperInstance = null;
        }
        if (this.panelEl) {
            this.panelEl.remove();
        }
    }
    async showPanel() {
        var _a, _b;
        (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
        this.showing = true;
        this.hiderEl = document.createElement('div');
        this.hiderEl.id = 'verdocs-button-panel-hider';
        this.hiderEl.style.zIndex = '100';
        this.hiderEl.style.position = 'absolute';
        this.hiderEl.style.top = '0px';
        this.hiderEl.style.left = '0px';
        this.hiderEl.style.right = '0px';
        this.hiderEl.style.bottom = '0px';
        this.hiderEl.onclick = (e) => {
            e.stopPropagation();
            this.toggle();
        };
        document.body.appendChild(this.hiderEl);
    }
    async hidePanel() {
        var _a;
        Array.from(document.getElementsByClassName('verdocs-button-panel-content')).forEach(el => {
            el.removeAttribute('data-show');
        });
        (_a = document.getElementById('verdocs-button-panel-hider')) === null || _a === void 0 ? void 0 : _a.remove();
        this.showing = false;
    }
    async toggle() {
        if (this.showing) {
            await this.hidePanel();
        }
        else {
            await this.showPanel();
        }
    }
    render() {
        return (h(Host, { key: 'ac59044fd14cb2998684f1b8f1c54aedec37f256' }, h("div", { key: 'e62fb7d53428ba82bae2622aede06e15db19fec9', class: "icon", innerHTML: this.icon, onClick: (e) => {
                e.stopPropagation();
                return this.toggle();
            }, ref: el => (this.iconEl = el) }), h("div", { key: '4cccc4f6d5f3294074f6d1e41ce768a023d6fdb0', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: 'e02fba4c1cee732b08d01b5729f1edd02c9262e5', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: '323f842de2f33348bcbcf67b1c576dce2275dcf9' }))));
    }
    static get style() { return verdocsButtonPanelCss; }
}, [4, "verdocs-button-panel", {
        "icon": [1],
        "showPanel": [64],
        "hidePanel": [64],
        "toggle": [64]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-button-panel"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-button-panel":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsButtonPanel);
            }
            break;
    } });
}

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

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