'use strict';

var index = require('./index-B2lA-USD.js');
var popper = require('./popper-Dmp8OTYh.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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * 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 = popper.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 (index.h(index.Host, { key: 'c4a19a142c4e228213a78988847a66b9d952ee27' }, index.h("div", { key: 'd01b744c644e6ae143aa8654c25a15780189cd98', class: "icon", innerHTML: this.icon, onClick: (e) => {
                e.stopPropagation();
                return this.toggle();
            }, ref: el => (this.iconEl = el) }), index.h("div", { key: '5bc6a60df0c2e15b7fa4da356130618c540e2ec7', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, index.h("div", { key: '024f7c9713c9c57dc04d9cceaa93c7a40cb8eaba', "data-popper-arrow": "true", class: "arrow" }), index.h("slot", { key: '544361c54c163063f4013cc52ea4a12c6baff24b' }))));
    }
};
VerdocsButtonPanel.style = verdocsButtonPanelCss;

const verdocsTabsCss = "@-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-tabs{gap:10px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-tabs .tab{display:-ms-flexbox;display:flex;color:#111111;cursor:pointer;font-size:14px;font-weight:400;padding:5px 10px;-ms-flex-align:center;align-items:center;text-transform:none;-ms-flex-pack:center;justify-content:center;border-bottom:4px solid transparent}verdocs-tabs .tab:focus{border:none;outline:none}verdocs-tabs .tab.active{color:#000000;font-weight:500;border-bottom:4px solid #654dcb}verdocs-tabs .tab.disabled{color:#aaaaaa;cursor:default}";

const VerdocsTabs = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.selectTab = index.createEvent(this, "selectTab");
        /**
         * The tabs to display
         */
        this.tabs = [];
        /**
         * The index of the tab to show selected.
         */
        this.selectedTab = 0;
    }
    handleSelectTab(index) {
        var _a;
        (_a = this.selectTab) === null || _a === void 0 ? void 0 : _a.emit({ tab: this.tabs[index], index });
    }
    render() {
        return (index.h(index.Host, { key: '6de4c126c0d4efe31e925569090af9dd032fae0c' }, this.tabs.map((tab, index$1) => (index.h("div", { class: `tab ${index$1 === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`, onClick: tab.disabled ? () => { } : () => this.handleSelectTab(index$1) }, tab.label))), index.h("div", { key: 'a3aba39b6b1a758ea4ed7a87860108bbe9367565', class: "flex flex-1" }), index.h("slot", { key: '0bda7a4123dcab3d4aef3e65cadad14bcdba6312' }, index.h("div", { key: '7033a1cb8eefd67ae7c621bcd6a5c3b348d1b3fe' }))));
    }
};
VerdocsTabs.style = verdocsTabsCss;

exports.verdocs_button_panel = VerdocsButtonPanel;
exports.verdocs_tabs = VerdocsTabs;
//# sourceMappingURL=verdocs-button-panel.verdocs-tabs.entry.cjs.js.map

//# sourceMappingURL=verdocs-button-panel_2.cjs.entry.js.map