import { r as registerInstance, c as createEvent, h, H as Host } from './index-CjTHbolG.js';

const verdocsTabsCss = () => `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) {
        registerInstance(this, hostRef);
        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: 'b78818a23892499517726f89f5cce6af6b7f42e1' }, 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: '2105eefb878bc7237bd9c46d8533085d580b94f8', class: "flex flex-1" }), h("slot", { key: 'c477b2f6880442e15bc3bc95f67dec12f1134074' }, h("div", { key: 'c6481423137eb98ee64cc9afedea6d43eca89b75' }))));
    }
};
VerdocsTabs.style = verdocsTabsCss();

export { VerdocsTabs as verdocs_tabs };
//# sourceMappingURL=verdocs-tabs.entry.js.map

//# sourceMappingURL=verdocs-tabs.entry.js.map