@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/cjs/nano-icon_3.cjs.entry.js

@@ -0,0 +1,655 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var index = require('./index-DYD4xvxr.js');
+var renderer = require('./renderer-SkVn69pT.js');
+var popover = require('./popover-CpIMxMWJ.js');
+
+let CACHED_MAP;
+const getIconMap = () => {
+    if (!CACHED_MAP) {
+        const win = window;
+        win.Nanoicons = win.Nanoicons || {};
+        CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();
+    }
+    return CACHED_MAP;
+};
+const getUrl = (i) => {
+    let url = getSrc(i.src);
+    if (url)
+        return url;
+    url = getName(i.name, i.icon);
+    if (url)
+        return getNamedUrl(url);
+    if (i.icon) {
+        url = getSrc(i.icon);
+        if (url)
+            return url;
+    }
+    return null;
+};
+const getNamedUrl = (iconName) => {
+    const url = getIconMap().get(iconName);
+    if (url)
+        return url;
+    if (iconName.startsWith('device/') || iconName.startsWith('pictogram/')) {
+        return index.getAssetPath(`../nano-assets/icon/${iconName}.svg`);
+    }
+    return index.getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);
+};
+const getName = (iconName, icon) => {
+    if (!iconName && icon && !isSrc(icon)) {
+        iconName = icon;
+    }
+    if (isStr(iconName)) {
+        iconName = toLower(iconName);
+    }
+    if (!isStr(iconName) || iconName.trim() === '') {
+        return null;
+    }
+    // only allow alpha characters and dash
+    const invalidChars = iconName.replace(/[a-z]|-|\/|\d/gi, '');
+    if (invalidChars !== '') {
+        console.warn('invalid characters in icon name ' + iconName);
+        return null;
+    }
+    return iconName;
+};
+const getSrc = (src) => {
+    if (isStr(src)) {
+        src = src.trim();
+        if (isSrc(src))
+            return src;
+    }
+    return null;
+};
+const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
+const isStr = (val) => typeof val === 'string';
+const toLower = (val) => val.toLowerCase();
+
+const validateContent = (svgContent) => {
+    if (svgContent) {
+        const div = document.createElement('div');
+        div.innerHTML = svgContent;
+        // setup this way to ensure it works on our buddy IE
+        for (let i = div.childNodes.length - 1; i >= 0; i--) {
+            if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
+                div.removeChild(div.childNodes[i]);
+            }
+        }
+        // must only have 1 root element
+        const svgElm = div.firstElementChild;
+        if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
+            const svgClass = svgElm.getAttribute('class') || '';
+            svgElm.setAttribute('class', (svgClass + ' sc-nano-icon s-nano-icon svg').trim());
+            // root element must be an svg
+            // lets double check we've got valid elements
+            // do not allow scripts
+            if (isValid(svgElm)) {
+                return div.innerHTML;
+            }
+        }
+    }
+    return '';
+};
+const isValid = (elm) => {
+    if (elm.nodeType === 1) {
+        if (elm.nodeName.toLowerCase() === 'script') {
+            return false;
+        }
+        for (let i = 0; i < elm.attributes.length; i++) {
+            const val = elm.attributes[i].value;
+            if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {
+                return false;
+            }
+        }
+        for (let i = 0; i < elm.childNodes.length; i++) {
+            if (!isValid(elm.childNodes[i])) {
+                return false;
+            }
+        }
+    }
+    return true;
+};
+
+const iconContent = new Map();
+const requests = new Map();
+const getSvgContent = (url) => {
+    // see if we already have a request for this url
+    let req = requests.get(url);
+    if (!req) {
+        // we don't already have a request
+        req = fetch(url).then((rsp) => {
+            if (rsp.ok) {
+                return rsp.text().then((svgContent) => {
+                    iconContent.set(url, validateContent(svgContent));
+                });
+            }
+            iconContent.set(url, '');
+        });
+        // cache for the same requests
+        requests.set(url, req);
+    }
+    return req;
+};
+
+const iconCss = ":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{--icon-size:1em;--primary-color:currentcolor\n  --secondary-color: color-mix(in srgb, currentColor 50%, transparent);--primary-opacity:0.8;--secondary-opacity:1;display:inline-block;inline-size:var(--icon-size);block-size:var(--icon-size);min-inline-size:var(--icon-size);min-block-size:var(--icon-size);contain:strict;fill:currentcolor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:currentcolor}:host .nanoicon{stroke:currentcolor}.nanoicon-fill-none{fill:none}.icon-inner,.nanoicon,svg,.svg{display:block;block-size:100%;inline-size:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host([name^=pictogram]),:host([name^=device]){font-size:max(var(--nano-pictogram-size-medium), var(--icon-size))}:host([size=small][name^=pictogram]),:host([size=small][name^=device]){font-size:var(--nano-pictogram-size-small)}:host([size=regular]){font-size:var(--nano-icon-size-small)}:host([size=regular][name^=pictogram]),:host([size=regular][name^=device]){font-size:var(--nano-pictogram-size-medium)}:host([size=large]){font-size:var(--nano-icon-size-large)}:host([size=large][name^=pictogram]),:host([size=large][name^=device]){font-size:var(--nano-pictogram-size-large)}:host([size=xl][name^=pictogram]),:host([size=xl][name^=device]){font-size:var(--nano-pictogram-size-x-large)}:host([name^=pictogram]),:host([name^=device]),:host([color=primary]){color:var(--nano-color-primary-1100)}:host([color=neutral]){color:var(--nano-color-base-1000)}";
+
+const Icon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.nanoLoad = index.createEvent(this, "nanoLoad", 7);
+        this.nanoError = index.createEvent(this, "nanoError", 7);
+    }
+    io;
+    get el() { return index.getElement(this); }
+    svgContent;
+    isVisible = false;
+    isLoading = true;
+    /**
+     * Specifies the color of the icon. If not specified, the icon will inherit the color of the parent element.
+     */
+    color;
+    /**
+     * Specifies the role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)
+     */
+    role;
+    setAriaLabel() {
+        if (!this.ariaLabel && !this.el.ariaLabel) {
+            if (!this.role || this.role !== 'presentation') {
+                // if the role is not 'presentation' and the user did not explicitly set a role,
+                // let's try and derive one from the icon name
+                const label = getName(this.name, this.icon);
+                // user did not provide a label
+                // come up with the label based on the icon name
+                if (label) {
+                    this.ariaLabel = label.split('/').slice(-1)[0].replace(/-/g, ' ');
+                }
+            }
+        }
+        else if (this.role === 'presentation') {
+            this.ariaLabel = undefined;
+        }
+    }
+    /**
+     * Specifies the label to use for accessibility. Defaults to the icon name.
+     */
+    ariaLabel;
+    updateRole() {
+        // force the role to be 'img' if the aria-label is explicitly set
+        if (this.ariaLabel)
+            this.role = 'img';
+        else if (!this.ariaLabel)
+            this.role = 'presentation';
+    }
+    /**
+     * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
+     * By default, when an 'arrow' or 'chevron' icon is used, it will flip automatically when detecting `dir="rtl"` on the document or closest ancestor.
+     */
+    flipRtl;
+    /**
+     * Specifies which icon to use from the built-in set of icons.
+     */
+    name;
+    /**
+     * Specifies the exact `src` of an SVG file to use.
+     */
+    src;
+    /**
+     * A combination of both `name` and `src`. If a `src` url is detected
+     * it will set the `src` property. Otherwise it assumes it's a built-in named
+     * SVG and set the `name` property.
+     */
+    icon;
+    /**
+     * The size of the icon. `auto` automatically sizes according to the font-size of the parent element.
+     * *Note*: size will be different on 'pictogram' and 'device' vs 'font awesome' icons.
+     */
+    size = 'auto';
+    /**
+     * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.
+     * Default, `true`.
+     */
+    lazy = true;
+    loadIcon() {
+        if (this.isVisible) {
+            const url = getUrl(this);
+            if (url) {
+                if (iconContent.has(url)) {
+                    // sync if it's already loaded
+                    this.svgContent = iconContent.get(url);
+                    requestAnimationFrame(() => {
+                        this.isLoading = false;
+                        this.nanoLoad.emit();
+                    });
+                }
+                else {
+                    // async if it hasn't been loaded
+                    getSvgContent(url).then(() => {
+                        this.svgContent = iconContent.get(url);
+                        requestAnimationFrame(() => {
+                            this.isLoading = false;
+                            this.nanoLoad.emit();
+                        });
+                        this.setAriaLabel();
+                    }, () => {
+                        // error loading icon
+                        this.nanoError.emit();
+                    });
+                }
+            }
+        }
+    }
+    /** Emitted when the icon has finished loading. */
+    nanoLoad;
+    /** Emitted when the icon fails to load. */
+    nanoError;
+    waitUntilVisible(el, rootMargin, cb) {
+        if (this.lazy &&
+            typeof window !== 'undefined' &&
+            window.IntersectionObserver) {
+            const io = (this.io = new window.IntersectionObserver((data) => {
+                if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {
+                    io.disconnect();
+                    this.io = undefined;
+                    cb();
+                }
+            }, { rootMargin }));
+            io.observe(el);
+        }
+        else {
+            // not a browser env (e.g. node)
+            // or we're not loading lazily
+            // or env doesn't support IntersectionObserver (testing?)
+            // - immediately fetch icon
+            cb();
+        }
+    }
+    isRtl() {
+        // doc is in rtl
+        if (this.el.ownerDocument?.dir === 'rtl')
+            return true;
+        // html element is in rtl element
+        if (this.el.closest('[dir="rtl"]'))
+            return true;
+        // nested in a shadow dom - see if that host element is contained in an rtl element
+        const rootNode = this.el.getRootNode();
+        const ownerHost = rootNode.host;
+        if (ownerHost && ownerHost.closest('[dir="rtl"]'))
+            return true;
+        return false;
+    }
+    connectedCallback() {
+        // purposely do not return the promise here because loading
+        // the svg file should not hold up loading the app
+        // only load the svg if it's visible
+        this.waitUntilVisible(this.el, '50px', () => {
+            this.isVisible = true;
+            this.loadIcon();
+        });
+    }
+    disconnectedCallback() {
+        if (this.io) {
+            this.io.disconnect();
+            this.io = undefined;
+        }
+    }
+    componentWillLoad() {
+        this.updateRole();
+        this.setAriaLabel();
+    }
+    render() {
+        const flipRtl = this.flipRtl ||
+            (this.name &&
+                this.name.match(/right|left/) &&
+                (this.name.indexOf('arrow') > -1 ||
+                    this.name.indexOf('chevron') > -1) &&
+                this.isRtl());
+        return (renderer.h(index.Host, { key: '754a53ed280fd9bcb1dcbec89eba4180f491d1b8', class: {
+                loading: this.isLoading,
+                'flip-rtl': !!flipRtl,
+                'nano-icon': true,
+            } }, this.svgContent ? (renderer.h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (renderer.h("div", { class: "icon-inner" }))));
+    }
+    static get assetsDirs() { return ["device", "pictogram"]; }
+    static get watchers() { return {
+        "role": ["setAriaLabel"],
+        "ariaLabel": ["updateRole"],
+        "name": ["loadIcon"],
+        "src": ["loadIcon"],
+        "icon": ["loadIcon"]
+    }; }
+};
+Icon.style = iconCss;
+
+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:var(--button-bg);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) {
+        index.registerInstance(this, hostRef);
+    }
+    button;
+    get host() { return index.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 (renderer.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 }, renderer.h("span", { class: "icon-button__label" }, this.label), renderer.h("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false, part: "icon" })));
+    }
+    render() {
+        if (this.showTooltip) {
+            return (renderer.h(index.Host, { class: "nano-icon-button", "aria-disabled": this.disabled ? 'true' : null }, renderer.h("nano-tooltip", { content: this.label }, this.content())));
+        }
+        return (renderer.h(index.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) {
+        index.registerInstance(this, hostRef);
+        this.nanoShow = index.createEvent(this, "nanoShow", 7);
+        this.nanoAfterShow = index.createEvent(this, "nanoAfterShow", 7);
+        this.nanoHide = index.createEvent(this, "nanoHide", 7);
+        this.nanoAfterHide = index.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 index.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.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 (renderer.h(index.Host, { key: '46e02e20dbf3922cfd6accd2a1b458a7acc7f7d7', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, renderer.h("slot", { key: 'ab5a74099fab3ada3560426bea7ec8d2a646b9b3', onSlotchange: this.handleSlotChange }), renderer.h("div", { key: 'b3dbae1010de35f3583d5c74488ffef20d5e23bd', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, renderer.h("div", { key: 'b2280419b506610603bbb3ce6db3e25c3a6fc12a', part: "base", ref: (el) => (this.tooltip = el), class: {
+                tooltip: true,
+                'tooltip--open': this.open,
+            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, renderer.h("slot", { key: '86b3f1f338cbc8b37223253fde3e9588c9e43601', name: "content", onSlotchange: () => this.setLabel() }, this.content), renderer.h("div", { key: '8566c4ea2d7ebbb476de6b127f7d0750ec38c450', class: "tooltip-arrow", "data-popper-arrow": true })))));
+    }
+    static get watchers() { return {
+        "content": ["setLabel"],
+        "open": ["handleOpenChange"]
+    }; }
+};
+Tooltip.style = tooltipCss;
+
+exports.nano_icon = Icon;
+exports.nano_icon_button = IconButton;
+exports.nano_tooltip = Tooltip;