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

const iconButtonCss = ":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-radius:none;--active-color:var(--nano-color-neutral-800);--hover-color:var(--nano-color-primary-1100);--padding:var(--nano-spacing-xs);--box-shadow:none;--button-bg:transparent;color:currentcolor;border-radius:var(--border-radius);display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:inherit;background:inherit;font-size:inherit;color:inherit;padding:var(--padding);cursor:pointer;appearance:none;box-shadow:var(--box-shadow)}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--hover-color)}.icon-button:active:not(.icon-button--disabled){color:var(--active-color)}.icon-button:focus-visible:not(.icon-button--disabled){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.icon-button__label{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}:host([disabled]:not([disabled=false])){opacity:0.5;cursor:not-allowed}.icon-button--disabled{pointer-events:none}";

const IconButton = /*@__PURE__*/ proxyCustomElement(class IconButton extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
    }
    button;
    get host() { return this; }
    /** The name of the icon to draw. */
    iconName;
    /** An external URL of an SVG file. */
    iconSrc;
    /** The default behavior of the button. */
    type = 'button';
    /** The name of the button, submitted as a pair with the button’s value as part of the form data. */
    name;
    /** Defines the value associated with the button’s name when it’s submitted with the form data. */
    value;
    /** A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should
     * always include a label that describes what the icon button does. */
    label;
    /** display the label as a `<nano-tooltip />` */
    showTooltip = false;
    /** Set to true to disable the button. */
    disabled = false;
    /** Contains a URL or a URL fragment that the hyperlink points to.
     * If this property is set, an anchor tag will be rendered. */
    href;
    /** Specifies the relationship of the target object to the link object.
     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) */
    rel;
    /** Specifies where to display the linked URL. Only applies when an `href` is provided.
     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. */
    target;
    /** The HTML form element or form element id.
     * Used to submit a form when the button is not a child of the form. */
    form;
    /** Sets focus on the internal button */
    async setFocus() {
        this.button.focus();
    }
    /**
     * Finds the form element based on the provided `form` selector
     * or element reference provided.
     * @returns the found form element (if found)
     */
    findForm() {
        const { form, host } = this;
        if (!form)
            return host.closest('form');
        if (form instanceof HTMLFormElement) {
            return form;
        }
        if (typeof form === 'string') {
            const el = document.getElementById(form);
            if (el instanceof HTMLFormElement) {
                return el;
            }
        }
        return null;
    }
    handleClick = (ev) => {
        if (this.type === 'button')
            return;
        const formEl = this.findForm();
        if (formEl) {
            ev.preventDefault();
            const fakeButton = document.createElement('button');
            fakeButton.type = this.type;
            fakeButton.style.display = 'none';
            formEl.appendChild(fakeButton);
            fakeButton.click();
            fakeButton.remove();
        }
    };
    content() {
        const TagType = this.href === undefined ? 'button' : 'a';
        return (h(TagType, { onClick: this.handleClick, part: "base", ref: (el) => (this.button = el), class: {
                'icon-button': true,
                'icon-button--disabled': this.disabled,
            }, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, rel: this.rel || undefined, type: !this.href && this.type ? this.type : undefined }, h("span", { class: "icon-button__label" }, this.label), h("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false, part: "icon" })));
    }
    render() {
        if (this.showTooltip) {
            return (h(Host, { class: "nano-icon-button", "aria-disabled": this.disabled ? 'true' : null }, h("nano-tooltip", { content: this.label }, this.content())));
        }
        return (h(Host, { class: "nano-icon-button", "aria-disabled": this.disabled ? 'true' : null }, this.content()));
    }
    static get style() { return iconButtonCss; }
}, [257, "nano-icon-button", {
        "iconName": [1, "icon-name"],
        "iconSrc": [1, "icon-src"],
        "type": [513],
        "name": [513],
        "value": [513],
        "label": [1],
        "showTooltip": [4, "show-tooltip"],
        "disabled": [516],
        "href": [1],
        "rel": [1],
        "target": [1],
        "form": [1],
        "setFocus": [64]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["nano-icon-button", "nano-icon", "nano-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "nano-icon-button":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, IconButton);
            }
            break;
        case "nano-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "nano-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { IconButton as I, defineCustomElement as d };
