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

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 = /*@__PURE__*/ proxyCustomElement(class VerdocsTabs extends H {
    constructor() {
        super();
        this.__registerHost();
        this.selectTab = 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 (h(Host, { key: '3177fae34ac1cdba3cc82d501d7462603931ccf2' }, this.tabs.map((tab, index) => (h("div", { class: `tab ${index === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`, onClick: tab.disabled ? () => { } : () => this.handleSelectTab(index) }, tab.label))), h("div", { key: 'de155b81678b5d6645bcbebbe6bd1f5803a5a545', class: "flex flex-1" }), h("slot", { key: '6d8fa41dfcde569b22986e10d152858d96857d0f' }, h("div", { key: '5e5c97e8a45c8022596f90caa478a4532788a6f6' }))));
    }
    static get style() { return verdocsTabsCss; }
}, [4, "verdocs-tabs", {
        "tabs": [16],
        "selectedTab": [2, "selected-tab"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-tabs"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-tabs":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsTabs);
            }
            break;
    } });
}

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

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