import { h, Host } from "@stencil/core";
import { inheritTrackingAttributes } from "../../../utils/attributes";
export class TabItem {
    constructor() {
        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' })));
    }
    static get is() { return "bal-tab-item"; }
    static get properties() {
        return {
            "active": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Tells if this route is active and overrides the bal-tabs value property."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "active",
                "defaultValue": "false"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "This is the key of the tab."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "value",
                "defaultValue": "''"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label for the tab."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "label",
                "defaultValue": "''"
            },
            "rel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | undefined",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "rel"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Link to path."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "href",
                "defaultValue": "undefined"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalButtonTarget",
                    "resolved": "\" _parent\" | \"_blank\" | \"_self\" | \"_top\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "target",
                "defaultValue": "'_self'"
            },
            "bubble": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "boolean | string",
                    "resolved": "boolean | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` a small red bubble is added to the tab."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "bubble",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the tab is disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "invisible": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the step is hidden."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "invisible",
                "defaultValue": "false"
            },
            "prevent": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Tell's if the linking is done by a router."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "prevent",
                "defaultValue": "false"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Tab icon not available for the steps."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "icon",
                "defaultValue": "undefined"
            },
            "noPanel": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the tab does not have a panel"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "no-panel",
                "defaultValue": "false"
            },
            "a11yControls": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "A11y attributes for the native button element."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "a-1-1y-controls",
                "defaultValue": "undefined"
            },
            "subLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sub label for the tab."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "sub-label",
                "defaultValue": "''"
            },
            "svg": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "source for the svg icon"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "svg",
                "defaultValue": "''"
            }
        };
    }
    static get states() {
        return {
            "isActive": {},
            "tabsId": {}
        };
    }
    static get events() {
        return [{
                "method": "balNavigate",
                "name": "balNavigate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the link element has clicked"
                },
                "complexType": {
                    "original": "BalEvents.BalTabItemNavigateDetail",
                    "resolved": "MouseEvent",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }, {
                "method": "balKeyDown",
                "name": "balKeyDown",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the link element has clicked"
                },
                "complexType": {
                    "original": "BalEvents.BalTabItemKeyDownDetail",
                    "resolved": "KeyboardEvent",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "setTabId": {
                "complexType": {
                    "signature": "(tabsId: string) => Promise<void>",
                    "parameters": [{
                            "name": "tabsId",
                            "type": "string",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }]
                }
            },
            "getOptions": {
                "complexType": {
                    "signature": "() => Promise<BalTabOption>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "BalTabOption": {
                            "location": "import",
                            "path": "../bal-tab.type",
                            "id": "src/components/bal-tabs/bal-tab.type.ts::BalTabOption"
                        }
                    },
                    "return": "Promise<BalTabOption>"
                },
                "docs": {
                    "text": "Options of the tab like label, value etc.",
                    "tags": []
                }
            },
            "setActive": {
                "complexType": {
                    "signature": "(active: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "active",
                            "type": "boolean",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets the tab active.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
}
let panelID = 0;
