/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
import { h } from './renderer.js';
import { d as defineCustomElement$3 } from './icon.js';
import { d as defineCustomElement$2 } from './icon-button.js';
import { d as defineCustomElement$1 } from './tooltip.js';

const tagCss = ":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}}";

const NanoTag = /*@__PURE__*/ proxyCustomElement(class NanoTag extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.nanoClose = createEvent(this, "nanoClose", 7);
    }
    /**
     * Whether the tag is closable or not.
     * If true, a close button will be displayed.
     */
    closable = false;
    /**
     * The size of the tag.
     */
    size = 'regular';
    /**
     * If true, the tag will have a different background color.
     */
    selected = false;
    get el() { return this; }
    /**
     * Fires when close button is clicked
     */
    nanoClose;
    onKeyDown = (e) => {
        switch (e.key) {
            case 'Enter':
            case ' ':
                e.preventDefault();
                this.close();
                break;
        }
    };
    handleClick = (_e) => {
        this.close();
    };
    close() {
        this.nanoClose.emit();
    }
    containsAnchor = () => !!this.el.querySelector('a');
    render() {
        return this.closable && !this.containsAnchor() ? ([
            h("slot", null),
            h("nano-icon-button", { label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
        ]) : (h("slot", null));
    }
    static get style() { return tagCss; }
}, [260, "nano-tag", {
        "closable": [516],
        "size": [513],
        "selected": [516]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["nano-tag", "nano-icon", "nano-icon-button", "nano-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "nano-tag":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, NanoTag);
            }
            break;
        case "nano-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "nano-icon-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "nano-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { NanoTag as N, defineCustomElement as d };
