import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { a as inheritTrackingAttributes } from './attributes.js';

const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.balNavigate = createEvent(this, "balNavigate", 7);
        this.balKeyDown = createEvent(this, "balKeyDown", 7);
        this.inheritAttributes = {};
        this.tabPanelID = `bal-tab-panel-id-${panelID++}`;
        this.isActive = false;
        this.tabsId = undefined;
        /**
         * Tells if this route is active and overrides the bal-tabs value property.
         */
        this.active = false;
        /**
         * This is the key of the tab.
         */
        this.value = '';
        /**
         * Label for the tab.
         */
        this.label = '';
        /**
         * Link to path.
         */
        this.href = undefined;
        /**
         * Specifies where to display the linked URL.
         * Only applies when an `href` is provided.
         */
        this.target = '_self';
        /**
         * If `true` a small red bubble is added to the tab.
         */
        this.bubble = false;
        /**
         * If `true` the tab is disabled.
         */
        this.disabled = false;
        /**
         * If `true` the step is hidden.
         */
        this.invisible = false;
        /**
         * Tell's if the linking is done by a router.
         */
        this.prevent = false;
        /**
         * Tab icon not available for the steps.
         */
        this.icon = undefined;
        /**
         * If `true` the tab does not have a panel
         */
        this.noPanel = false;
        /**
         * A11y attributes for the native button element.
         */
        this.a11yControls = undefined;
        /**
         * Sub label for the tab.
         */
        this.subLabel = '';
        /**
         * source for the svg icon
         */
        this.svg = '';
    }
    componentWillLoad() {
        this.inheritAttributes = inheritTrackingAttributes(this.el);
    }
    /**
     * @internal
     */
    async setTabId(tabsId) {
        this.tabsId = tabsId;
    }
    /**
     * Options of the tab like label, value etc.
     */
    async getOptions() {
        return this.options;
    }
    /**
     * Sets the tab active.
     */
    async setActive(active) {
        this.isActive = active;
    }
    get options() {
        return {
            tabPanelID: this.tabPanelID,
            value: this.value,
            icon: this.icon,
            label: this.label,
            href: this.href,
            rel: this.rel,
            target: this.target,
            active: this.active,
            disabled: this.disabled,
            invisible: this.invisible,
            bubble: this.bubble,
            passed: false,
            prevent: this.prevent,
            navigate: this.balNavigate,
            keyDown: this.balKeyDown,
            trackingData: this.inheritAttributes,
            noPanel: this.noPanel,
            a11yControls: this.a11yControls,
            subLabel: this.subLabel,
            svg: this.svg,
        };
    }
    render() {
        const hasPanel = !this.noPanel;
        const noPanelOrInactive = !this.isActive || this.noPanel;
        return (h(Host, { key: 'a7ebf68e3c2fed0d2068d33afe86cb642e1f111d', id: this.tabPanelID, class: {
                'bal-tab-item': true,
                'bal-tab-item--active': this.isActive,
            }, role: hasPanel ? 'tabpanel' : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', "aria-labelledby": this.tabsId ? `${this.tabsId}-button-${this.value}` : undefined, tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: 'cfa012ad2c5f2a14a762e8a65872d99100602c3a' })));
    }
    get el() { return this; }
}, [260, "bal-tab-item", {
        "active": [516],
        "value": [513],
        "label": [513],
        "rel": [513],
        "href": [513],
        "target": [1],
        "bubble": [520],
        "disabled": [516],
        "invisible": [516],
        "prevent": [4],
        "icon": [513],
        "noPanel": [4, "no-panel"],
        "a11yControls": [1, "a-1-1y-controls"],
        "subLabel": [513, "sub-label"],
        "svg": [1],
        "isActive": [32],
        "tabsId": [32],
        "setTabId": [64],
        "getOptions": [64],
        "setActive": [64]
    }]);
let panelID = 0;
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-tab-item"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-tab-item":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TabItem);
            }
            break;
    } });
}

const BalTabItem = TabItem;
const defineCustomElement = defineCustomElement$1;

export { BalTabItem, defineCustomElement };
