/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { r as registerInstance, g as getElement, a as Host, c as createEvent } from './index-BM3Om9WE.js';
import { h } from './renderer-DpNDfhNy.js';
import { P as Popover } from './popover-DNdFZ1hX.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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    button;
    get host() { return getElement(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()));
    }
};
IconButton.style = iconButtonCss;

const tooltipCss = ":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:0px;--max-width:20rem;--hide-delay:var(--nano-transition-x-fast);--hide-duration:var(--nano-transition-x-fast);--hide-timing-function:ease;--show-delay:var(--nano-transition-x-fast);--show-duration:var(--nano-transition-x-fast);--show-timing-function:ease;--background:var(--nano-color-neutral-1200);--color:var(--nano-color-base-0);--padding:var(--nano-spacing-sm);--arrow-size:5px;--arrow-offset:5px;display:contents}.tooltip-arrow{content:\"\";position:absolute;color:var(--background);transform:none !important;inset-inline-start:unset !important}.tooltip{max-inline-size:var(--max-width);border-radius:var(--border-radius);background-color:var(--background);font-size:var(--nano-font-size-2xs);line-height:1.5;color:var(--color);opacity:0;padding:var(--padding);transform:translateY(10px) translateZ(0);transform-origin:bottom;transition:opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);white-space:normal;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip ::slotted(*){color:inherit;font-size:inherit;line-height:inherit}.tooltip-positioner{position:absolute;z-index:var(--nano-z-index-tooltip);border:0;background:none;padding:0;overflow:visible;color:unset}.tooltip-positioner::backdrop{display:none}.tooltip-positioner[popover],.tooltip-positioner:popover-open{inset:unset}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom;transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{inset-block-end:100%;inset-inline-start:calc(50% - var(--arrow-size)) !important;border-block-end:var(--arrow-size) solid;border-inline-start:var(--arrow-size) solid transparent;border-inline-end:var(--arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{inset-inline-start:var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{inset-inline:auto var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{inset-block-start:100%;inset-inline-start:calc(50% - var(--arrow-size)) !important;border-block-start:var(--arrow-size) solid;border-inline-start:var(--arrow-size) solid transparent;border-inline-end:var(--arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{inset-inline-start:var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{inset-inline:auto var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{inset-block-start:calc(50% - var(--arrow-size)) !important;inset-inline-start:100% !important;border-inline-start:var(--arrow-size) solid;border-block-start:var(--arrow-size) solid transparent;border-block-end:var(--arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{inset-block-start:var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{inset-block:auto var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{inset-block-start:calc(50% - var(--arrow-size)) !important;inset-inline-end:100% !important;border-inline-end:var(--arrow-size) solid;border-block-start:var(--arrow-size) solid transparent;border-block-end:var(--arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{inset-block-start:var(--arrow-offset) !important}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{inset-block:auto var(--arrow-offset) !important}";

const Tooltip = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.nanoShow = createEvent(this, "nanoShow", 7);
        this.nanoAfterShow = createEvent(this, "nanoAfterShow", 7);
        this.nanoHide = createEvent(this, "nanoHide", 7);
        this.nanoAfterHide = createEvent(this, "nanoAfterHide", 7);
    }
    isVisible = false;
    popover;
    tooltipPositioner;
    tooltip;
    _target;
    get target() {
        return this._target;
    }
    set target(newTarget) {
        if (newTarget !== this._target && this._target) {
            this._target.removeAttribute('aria-label');
        }
        newTarget.setAttribute('aria-label', this.label);
        this._target = newTarget;
    }
    label = '';
    get host() { return getElement(this); }
    /** The tooltip's content. Alternatively, you can use the content slot. */
    content = '';
    setLabel() {
        const contentSlotNodes = Array.from(this.host.querySelectorAll('[slot="content"]'));
        const textContent = contentSlotNodes
            .map((node) => node.textContent)
            .join(' ')
            .trim();
        if (!this.target) {
            this.target = this.getTarget();
            if (!this.target)
                return;
        }
        this.label = textContent || this.content;
        this.target.setAttribute('aria-label', this.label);
    }
    /**
     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
     * inside of the viewport.
     */
    placement = 'top';
    /** Set to true to disable the tooltip so it won't show when triggered. */
    disabled = false;
    /** The distance in pixels from which to offset the tooltip away from its target. */
    distance = 10;
    /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
    open = false;
    /** The distance in pixels from which to offset the tooltip along its target. */
    skidding = 0;
    /**
     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`.
     */
    hoist = false;
    /**
     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
     * programmatically.
     */
    trigger = 'hover focus';
    handleOpenChange() {
        if (this.open)
            this.show();
        else
            this.hide();
    }
    // Events
    /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */
    nanoShow;
    /** Emitted after the tooltip has shown and all transitions are complete. */
    nanoAfterShow;
    /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */
    nanoHide;
    /** Emitted after the tooltip has hidden and all transitions are complete. */
    nanoAfterHide;
    // Public methods
    /** Shows the tooltip. */
    async show() {
        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
        if (this.isVisible || this.disabled) {
            return;
        }
        const slShow = this.nanoShow.emit();
        if (slShow.defaultPrevented) {
            this.open = false;
            return;
        }
        this.isVisible = true;
        this.open = true;
        if (typeof this.tooltipPositioner?.showPopover === 'function') {
            this.hoist = true;
            this.popover.show();
            this.tooltipPositioner.showPopover();
        }
        else {
            this.popover.show();
        }
    }
    /** Hides the tooltip. */
    async hide() {
        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
        if (!this.isVisible) {
            return;
        }
        const slHide = this.nanoHide.emit();
        if (slHide.defaultPrevented) {
            this.open = true;
            return;
        }
        this.isVisible = false;
        this.open = false;
        this.popover.hide();
        setTimeout(() => {
            if (!this.open &&
                typeof this.tooltipPositioner?.hidePopover === 'function') {
                this.tooltipPositioner.hidePopover();
            }
        }, 300);
    }
    // Private methods
    getTarget() {
        let children = Array.from(this.host.children);
        // add display contents children
        children = children.flatMap((el) => {
            const display = getComputedStyle(el).display;
            if (display === 'none')
                return [];
            if (display === 'contents' && el.children?.length) {
                return Array.from(el.children);
            }
            return el;
        });
        // Get the first child that isn't a <style> or content slot
        const target = children.find((el) => el.tagName.toLowerCase() !== 'style' &&
            el.getAttribute('slot') !== 'content');
        if (!target) {
            throw new Error('Invalid tooltip target: no child element was found.');
        }
        return target;
    }
    hasTrigger(triggerType) {
        const triggers = this.trigger.split(' ');
        return triggers.includes(triggerType);
    }
    syncOptions() {
        this.popover.setOptions({
            strategy: this.hoist ? 'fixed' : 'absolute',
            placement: this.placement,
            distance: this.distance,
            skidding: this.skidding,
            transitionElement: this.tooltip,
            onAfterHide: () => this.nanoAfterHide.emit(),
            onAfterShow: () => this.nanoAfterShow.emit(),
        });
    }
    // Event Handlers
    handleBlur = () => {
        if (this.hasTrigger('focus')) {
            this.hide();
        }
    };
    handleClick = () => {
        if (this.hasTrigger('click')) {
            if (this.open)
                this.hide();
            else
                this.show();
        }
    };
    handleFocus = () => {
        if (this.hasTrigger('focus')) {
            this.show();
        }
    };
    handleKeyDown = (event) => {
        // Pressing escape when the target element has focus should dismiss the tooltip
        if (this.open && event.key === 'Escape') {
            event.stopPropagation();
            this.hide();
        }
    };
    handleMouseOver = () => {
        if (this.hasTrigger('hover')) {
            this.show();
        }
    };
    handleMouseOut = () => {
        if (this.hasTrigger('hover')) {
            this.hide();
        }
    };
    handleSlotChange = () => {
        this.target = this.getTarget();
    };
    // Stencil hooks
    componentDidLoad() {
        this.target = this.getTarget();
        this.popover = new Popover(this.target, this.tooltipPositioner, {
            sameWidth: false,
        });
        this.syncOptions();
        this.setLabel();
        // Show on init if open
        this.tooltipPositioner.hidden = !this.open;
        if (this.open) {
            this.show();
        }
    }
    componentDidUpdate() {
        this.syncOptions();
    }
    disconnectedCallback() {
        if (this.popover)
            this.popover.destroy();
    }
    render() {
        return (h(Host, { key: '79951f5782653b519fabd8345c2ec0af5cf86f2d', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '6698cb226357c92807393c1fe2f73991c13ead07', onSlotchange: this.handleSlotChange }), h("div", { key: 'dbb8bda886e15850c17c06dca8d9f8924cb62486', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: '9b1f5692d592331470c0159229aab8fbcb091b21', part: "base", ref: (el) => (this.tooltip = el), class: {
                tooltip: true,
                'tooltip--open': this.open,
            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '1e6f35227072b696e2cea3cbf93eea26285b20cf', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: 'dab2de407dae223b4ac229283d9dedb8a69e4919', class: "tooltip-arrow", "data-popper-arrow": true })))));
    }
    static get watchers() { return {
        "content": ["setLabel"],
        "open": ["handleOpenChange"]
    }; }
};
Tooltip.style = tooltipCss;

export { IconButton as nano_icon_button, Tooltip as nano_tooltip };
