import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CUAGH_8P.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(registerHost) {
        super();
        if (registerHost !== false) {
            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: '6de4c126c0d4efe31e925569090af9dd032fae0c' }, 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: 'a3aba39b6b1a758ea4ed7a87860108bbe9367565', class: "flex flex-1" }), h("slot", { key: '0bda7a4123dcab3d4aef3e65cadad14bcdba6312' }, h("div", { key: '7033a1cb8eefd67ae7c621bcd6a5c3b348d1b3fe' }))));
    }
    static get style() { return verdocsTabsCss; }
}, [260, "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-l5nPaeTL.js.map

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