import { Host, h } from "@stencil/core";
export class PdsTab {
    constructor() {
        /**
         * Determines the tab's disabled state.
         * @defaultValue false
         */
        this.disabled = false;
        /**
         * Keeps track of the tabpanel selected state, this property is passed by parent component
         */
        /** @internal */
        this.selected = false;
    }
    onTabClick(index, parentComponentId) {
        if (this.disabled)
            return;
        this.pdsTabClick.emit([index, parentComponentId]);
    }
    classNames() {
        const classes = [
            'pds-tab',
            this.selected && 'is-active',
            this.disabled && 'is-disabled',
        ];
        return classes.filter(Boolean).join(' ');
    }
    render() {
        const availabilityTabEdgeInlineStart = (h("span", { key: '934d84846bd84471047f9ab7503e5bb151426cbc', class: "pds-tab-edge", role: "presentation" }));
        const availabilityTabEdgeInlineEnd = (h("span", { key: 'e35b9da7b312ed95dab7bf803c40a22b3485ee05', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
        return (h(Host, { key: '310188521230d3e16cff23b857769c4b5d04fd8d', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '9df38c2aa1fa29487fdce62ce7dc5f67df6bcde1', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.disabled ? "-1" : (this.selected ? "0" : "-1"), "aria-selected": this.selected ? "true" : "false", "aria-disabled": this.disabled ? "true" : null, disabled: this.disabled, class: this.classNames(), onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: '4936599dd547f236880ea9a0ccabc4b50836d1d5', class: "pds-tab__content" }, h("slot", { key: '567388faf912bb307676cea9a4626ce9669087dd' })))));
    }
    static get is() { return "pds-tab"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-tab.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pds-tab.css"]
        };
    }
    static get properties() {
        return {
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines the tab's disabled state."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "parentComponentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "parent-component-id"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant"
            },
            "index": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "index"
            },
            "selected": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "selected",
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "pdsTabClick",
                "name": "pdsTabClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "object",
                    "resolved": "object",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=pds-tab.js.map
