/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { Host, } from "@stencil/core";
import { h } from "../../utils/renderer";
let id = 0;
/**
 * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab content](tab-content).
 *
 * @version 1.0
 * @status stable
 *
 * @slot start - start of the tab, content. Outside of the focusable element
 * @slot end - end of the tab, content. Outside of the focusable element
 * @slot - The tab's label.
 *
 * @part base - the wrapper around the whole control
 * @part label - the label of the tab
 * @part close-button - the close button of the tab (if `closable=true`)
 */
export class NanoTab {
    tabId = `nano-tab-${++id}`;
    tab;
    host;
    /** The name of the `nano-tab-content` panel the tab will control. The content panel must be located in the same tab group. */
    panel = '';
    /** The active, selected tab. If none active, the first will automatically be selected. */
    active = false;
    /** Set to true to draw the tab in an active state. */
    disabled = false;
    /** When true, the tab will be rendered with a close icon. */
    closable = false;
    /** If this property is set, an `<a>` tag will be rendered inside the tab instead of a `<div>`. */
    href;
    /** The target attribute for the tab link. Only applies if `href` is set. */
    target;
    /** Emitted when the tab is closable and the close button is activated. */
    nanoTabClose;
    /** Sets focus to the tab. */
    async setFocus() {
        this.tab.focus({ preventScroll: true });
    }
    /** Removes focus from the tab. */
    async removeFocus() {
        this.tab.blur();
    }
    handleCloseClick = () => {
        this.nanoTabClose.emit();
    };
    handleCloseKeydown = (e) => {
        if (e.key === ' ') {
            // stop scrolling
            e.preventDefault();
            this.handleCloseClick();
        }
    };
    render() {
        const Tag = this.href ? 'a' : 'div';
        return (h(Host, { key: 'eeba7d6c136e8ede5c1d60ecf53696a6aac3e2c4', id: this.host.id || this.tabId, role: !this.href ? 'tab' : undefined, "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h(Tag, { key: 'a91c1e97699d0d32329c1f17b63da3ef97040333', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
                tab: true,
                'tab--active': this.active,
                'tab--disabled': this.disabled,
                'tab--closable': this.closable,
            }, href: this.href, target: this.target }, h("slot", { key: '2bab15a4a52e1eb75acecaf28b3b625ae3949716', name: "start" }), h("div", { key: 'ac5235d4d3b7802d5d7f7f5e896d996f8be68fc0', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, h("slot", { key: '5ad82f1d6061ab94268f623d1aaa82791a221b7c' })), h("slot", { key: '6f30a65a661a1a85eb3d363edb03c3e16fcf59f0', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: 'f8ea9979858ab6faf98100cf970271e4262d7ab1', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
    }
    static get is() { return "nano-tab"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["tab.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["tab.css"]
        };
    }
    static get properties() {
        return {
            "panel": {
                "type": "string",
                "attribute": "panel",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The name of the `nano-tab-content` panel the tab will control. The content panel must be located in the same tab group."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "''"
            },
            "active": {
                "type": "boolean",
                "attribute": "active",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The active, selected tab. If none active, the first will automatically be selected."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to true to draw the tab in an active state."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "closable": {
                "type": "boolean",
                "attribute": "closable",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When true, the tab will be rendered with a close icon."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "href": {
                "type": "string",
                "attribute": "href",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If this property is set, an `<a>` tag will be rendered inside the tab instead of a `<div>`."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "target": {
                "type": "string",
                "attribute": "target",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The target attribute for the tab link. Only applies if `href` is set."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get events() {
        return [{
                "method": "nanoTabClose",
                "name": "nanoTabClose",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the tab is closable and the close button is activated."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus to the tab.",
                    "tags": []
                }
            },
            "removeFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Removes focus from the tab.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
}
