import { r as registerInstance, c as createEvent, h } from './index-77a9c9e7.js';
import { z as zh } from './index.esm.min-cd800f97.js';

const bpSdkTabGroupCss = ".bp-sdk-tab__container{padding:1rem}.bp-sdk-tab__list{list-style-type:none;padding-inline-start:0;margin-block-end:0}.bp-sdk-tab__list-item{align-items:flex-end;appearance:button;border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);border-top:1px solid var(--border-color);color:var(--light--font-color);cursor:pointer;display:inline-flex;min-height:1rem;min-width:3rem;padding:0.5rem;user-select:none}.bp-sdk-tab__list-item[aria-selected]{border-color:var(--selected-border-color);color:var(--font-color)}.bp-sdk-tab__group-panel[role='tabpanel']{border:1px solid var(--border-color);padding:1rem}";
const BpSdkTabGroupStyle0 = bpSdkTabGroupCss;

const BpSdkTabGroup = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.tabChanged = createEvent(this, "tabChanged", 7);
        this.updateIndex = (index) => {
            if (index >= this.tabs.length) {
                index = this.tabs.length - 1;
            }
            if (index < 0) {
                index = 0;
            }
            this.groupIndex = index;
        };
        this.onKeyboard = (event) => {
            switch (event.key) {
                case 'ArrowLeft':
                    this.updateIndex(this.groupIndex - 1);
                    break;
                case 'ArrowRight':
                    this.updateIndex(this.groupIndex + 1);
                    break;
            }
        };
        this.onTabSelect = (index) => () => this.updateIndex(index);
        this.code = '';
        this.tabs = [];
        this.groupIndex = 0;
        this.useExternal = false;
    }
    resetState() { }
    connectedCallback() {
        this.resetState();
    }
    componentWillLoad() {
        this.useExternal = !!customElements.get('bp-sdk-external-tab-group');
        customElements.whenDefined('bp-sdk-external-tab-group').then(() => {
            this.useExternal = true;
        });
    }
    render() {
        return [this.useExternal && this.renderExternal(), !this.useExternal && this.renderInternal()];
    }
    renderExternal() {
        return (h("bp-sdk-external-tab-group", { code: this.code, tabs: this.tabs, groupIndex: this.groupIndex }, this.tabs.map((tab) => (h("slot", { name: `${this.code}-${tab}` })))));
    }
    onIndexChanged(index) {
        this.tabChanged.emit(index);
    }
    renderInternal() {
        return (h("div", { id: `${this.code}-tab-container`, class: "bp-sdk-tab__container" }, h("ul", { class: "bp-sdk-tab__list", role: "tablist", tabindex: "1", onKeyUp: this.onKeyboard }, this.tabs.map((tab, index) => (h("li", { role: "tab", id: `bp-sdk-tab__list-item-${this.code}-${tab}`, "aria-selected": index === this.groupIndex, tabindex: "-1", class: zh(`bp-sdk-tab__list-item bp-sdk-tab`, { 'bp-sdk-tab__list-item--selected': index === this.groupIndex }), onClick: this.onTabSelect(index), onKeyUp: this.onTabSelect(index) }, tab)))), this.tabs.map((tab, index) => (h("div", { id: `bp-sdk-tab__group-panel-${this.code}-${tab}`, class: zh(`bp-sdk-tab-group-panel`, {
                'bp-sdk-visually-hidden': index !== this.groupIndex,
            }), "aria-labelledby": `bp-sdk-tab__list-item-${this.code}-${tab}`, role: "tabpanel", "aria-hidden": index !== this.groupIndex }, h("slot", { name: `${this.code}-${tab}` }, "No content"))))));
    }
    static get watchers() { return {
        "groupIndex": ["onIndexChanged"]
    }; }
};
BpSdkTabGroup.style = BpSdkTabGroupStyle0;

export { BpSdkTabGroup as bp_sdk_tab_group };
