/*!
 * Custom elements for Nanopore-Digital Web applications
 */
'use strict';

var index = require('./index-DGttnXif.js');
var renderer = require('./renderer-jVpDRMfV.js');

const tabCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border:2px solid var(--nano-color-neutral-300);--border-hover-color:var(--nano-color-primary-700);--border-active-color:var(--nano-color-primary-1000);--text-hover-color:var(--nano-color-primary-1000);--text-active-color:var(--nano-color-primary-1100);--padding:var(--nano-spacing-md);font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-block;cursor:pointer;color:var(--nano-color-neutral-1400);border:var(--border);border-inline-end-width:0;border-inline-start-width:0;border-block-start-width:0;border-block-end:var(--border)}:host(:not([disabled]):hover){border-color:var(--border-hover-color);color:var(--text-hover-color)}:host(:not([disabled]):active),:host([active]){border-color:var(--border-active-color);color:var(--text-active-color)}:host(.nano-sortable__dragged){background:var(--nano-color-base-0);opacity:0.9 !important;box-shadow:var(--nano-shadow-l0) !important}.tab{all:unset;padding:var(--padding);display:flex;white-space:nowrap;align-items:center;position:relative;gap:var(--nano-spacing-sm);justify-content:center}.tab[href]:focus{outline:var(--nano-focus-ring);outline-offset:-3px}.tab.tab--disabled{opacity:0.5;cursor:not-allowed}.tab.tab--closable{padding-inline-end:calc(var(--padding) - var(--nano-spacing-sm))}.tab ::slotted(*),.tab::slotted(*){display:flex;align-items:center}.tab ::slotted(.nano-sortable__keyboard-handle){position:absolute;inset-inline-end:-1em;z-index:1}.tab:not(.tab--disabled):has(.tab__label:focus-visible){outline:var(--nano-focus-ring);outline-offset:-3px}.tab__label{display:flex;flex-direction:column;gap:var(--nano-spacing-sm);align-items:center}.tab__label:focus{outline:none}.tab__close-button{color:var(--nano-color-primary-1200);--hover-color:var(--nano-color-primary-700)}";

let id = 0;
const NanoTab = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.nanoTabClose = index.createEvent(this, "nanoTabClose", 7);
    }
    tabId = `nano-tab-${++id}`;
    tab;
    get host() { return index.getElement(this); }
    /** 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 (renderer.h(index.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" }, renderer.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 }, renderer.h("slot", { key: '2bab15a4a52e1eb75acecaf28b3b625ae3949716', name: "start" }), renderer.h("div", { key: 'ac5235d4d3b7802d5d7f7f5e896d996f8be68fc0', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, renderer.h("slot", { key: '5ad82f1d6061ab94268f623d1aaa82791a221b7c' })), renderer.h("slot", { key: '6f30a65a661a1a85eb3d363edb03c3e16fcf59f0', name: "end" }), this.closable && !this.disabled && (renderer.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" })))));
    }
};
NanoTab.style = tabCss;

exports.nano_tab = NanoTab;
