@nanoporetech-digital/components 9.0.1 → 9.1.1

package/dist/components/nav-item.js

@@ -8,78 +8,6 @@ import { t as transformTag, h } from './renderer.js';
 import { H as HasSlotController } from './slot.js';
 import { f as focusInContainer } from './active-element.js';
 
-/**
- * Quality of life for transition handling.
- * Adds / removes transitionend events. Resolves on complete
-
- * @param el element
- * @returns a promise that resolves when the transition is done
- */
-/**
- * handles hiding and showing elements properly (with display),
- * along with transitions, so they are no longer viewable in the dom.
- * - OnHide remove show class, listen for transition end, then display: none on finish
- * - OnShow, display block on start then add a show class
- *
- * @param el
- * @param options
- * @returns a promise of resolving as either 'show' or 'hidden'
- */
-const displayTransition = (el, options) => {
-    const opts = {
-        className: '',
-        show: true,
-        showDisplay: 'block',
-        showProp: 'classList',
-        timeout: 1000,
-        ...options,
-    };
-    return new Promise((resolve) => {
-        const showCb = (e) => {
-            if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
-                (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))) {
-                el.dataset.displayTransition = 'true';
-                el.removeEventListener('transitionend', showCb);
-                resolve('shown');
-            }
-        };
-        const hideCb = (e) => {
-            if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
-                (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))) {
-                el.style.display = 'none';
-                el.dataset.displayTransition = 'false';
-                el.removeEventListener('transitionend', hideCb);
-                resolve('hidden');
-            }
-        };
-        if (opts.show) {
-            el.addEventListener('transitionend', showCb);
-            el.style.display = opts.showDisplay;
-            setTimeout(() => el[opts.showProp].add(opts.className), 50);
-        }
-        else {
-            el.addEventListener('transitionend', hideCb);
-            el[opts.showProp].remove(opts.className);
-        }
-        // If no transition, resolve after timeout
-        if (opts.timeout) {
-            setTimeout(() => {
-                if (opts.show && el.dataset.displayTransition !== 'true') {
-                    el.dataset.displayTransition = 'true';
-                    el.removeEventListener('transitionend', showCb);
-                    resolve('shown');
-                }
-                else if (!opts.show && el.dataset.displayTransition !== 'false') {
-                    el.style.display = 'none';
-                    el.dataset.displayTransition = 'false';
-                    el.removeEventListener('transitionend', hideCb);
-                    resolve('hidden');
-                }
-            }, opts.timeout);
-        }
-    });
-};
-
 const navItemCss = ":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{display:contents}.navitem{background:inherit;color:inherit}a,button{all:unset;color:inherit;text-decoration:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--padding);gap:var(--nano-spacing-md);inline-size:100%;box-sizing:border-box;background:inherit}a:hover,a:focus,a:active,button:hover,button:focus,button:active{color:inherit}a:focus-visible,button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}a[disabled],button[disabled]{opacity:0.5;cursor:not-allowed}.navitem__label{margin-inline-end:auto}.navitem__modal{all:unset;display:none;position:absolute;color:initial;opacity:0;transition:var(--nano-transition-fast) ease}.navitem--open .navitem__modal{opacity:1}::slotted([slot=close-button]){all:unset}::slotted([slot=close-button]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}";
 
 const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLElement {
@@ -95,6 +23,11 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
     secondaryDiv;
     slotCtrl = new HasSlotController(this, 'secondary', 'close-button');
     controlElement;
+    hoverTimer = -1;
+    openedByTouch = false;
+    openedByClick = false;
+    canHover = false;
+    transitionAbort = null;
     get host() { return this; }
     didOpen = false;
     isInMenuDrawer = false;
@@ -112,6 +45,17 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
     checkbox = false;
     /** Whether secondary menus should close on blur */
     closeOnBlur = true;
+    /** Open the secondary panel on hover (fine pointer / non-touch devices only) */
+    openOnHover = false;
+    openOnHoverChanged() {
+        this.canHover =
+            this.openOnHover &&
+                window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+        if (!this.canHover)
+            this.removeHoverListeners();
+        else
+            this.addHoverListeners();
+    }
     /** Emitted when the nav item closes it's secondary navigation. */
     nanoClose;
     /** Emitted when the nav item opens it's secondary navigation. */
@@ -170,34 +114,109 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
         if (!this.didOpen || !this.slotCtrl.has('secondary') || !this.closeOnBlur)
             return;
         if (e.key && e.key === 'Escape') {
+            this.openedByClick = false;
             this.closeSecondary();
             return;
         }
-        if (!e.composedPath().some((el) => el === this.secondaryDiv)) {
+        const path = e.composedPath();
+        // if click-locked, ignore clicks within the host (trigger or panel)
+        if (this.openedByClick && path.some((el) => el === this.host))
+            return;
+        if (!path.some((el) => el === this.secondaryDiv)) {
             this.closeSecondary();
         }
     }
+    addHoverListeners() {
+        this.host.addEventListener('pointerenter', this.handlePointerEnter);
+        this.host.addEventListener('pointerleave', this.handlePointerLeave);
+        this.host.addEventListener('focusout', this.handleFocusOut);
+    }
+    removeHoverListeners() {
+        this.host.removeEventListener('pointerenter', this.handlePointerEnter);
+        this.host.removeEventListener('pointerleave', this.handlePointerLeave);
+        this.host.removeEventListener('focusout', this.handleFocusOut);
+    }
+    handlePointerEnter = (e) => {
+        if (!this.canHover || !this.slotCtrl.has('secondary'))
+            return;
+        if (e.pointerType !== 'mouse') {
+            this.openedByTouch = true;
+            return;
+        }
+        this.openedByTouch = false;
+        window.clearTimeout(this.hoverTimer);
+        // if click-locked open, don't start a re-open timer
+        if (this.openedByClick && this.didOpen)
+            return;
+        this.hoverTimer = window.setTimeout(() => this.openSecondary(), 0);
+    };
+    handlePointerLeave = (e) => {
+        if (!this.canHover ||
+            this.openedByTouch ||
+            this.openedByClick ||
+            !this.slotCtrl.has('secondary'))
+            return;
+        if (e.pointerType !== 'mouse')
+            return;
+        window.clearTimeout(this.hoverTimer);
+        this.hoverTimer = window.setTimeout(() => this.closeSecondary(), 200);
+    };
+    handleFocusOut = (e) => {
+        if (!this.canHover || !this.didOpen)
+            return;
+        // only close if focus left the nav-item entirely
+        if (e.relatedTarget && this.host.contains(e.relatedTarget))
+            return;
+        if (e.relatedTarget &&
+            this.host.shadowRoot?.contains(e.relatedTarget))
+            return;
+        this.closeSecondary();
+    };
+    awaitTransition(signal) {
+        return new Promise((resolve) => {
+            const fallback = window.setTimeout(() => resolve(true), 1000);
+            const cleanup = () => window.clearTimeout(fallback);
+            signal.addEventListener('abort', () => {
+                cleanup();
+                resolve(false);
+            }, { once: true });
+            this.secondaryDiv.addEventListener('transitionend', () => {
+                cleanup();
+                resolve(true);
+            }, { once: true, signal });
+        });
+    }
     closeSecondary = async () => {
         if (!this.slotCtrl.has('secondary') || !this.open)
             return;
+        this.transitionAbort?.abort();
+        this.transitionAbort = new AbortController();
+        const { signal } = this.transitionAbort;
         this.open = false;
-        await displayTransition(this.secondaryDiv, {
-            className: 'modal--open',
-            showProp: 'part',
-            show: false,
-        });
+        this.secondaryDiv.part.remove('modal--open');
+        const completed = await this.awaitTransition(signal);
+        if (!completed)
+            return;
+        this.secondaryDiv.style.display = 'none';
+        this.openedByClick = false;
         this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });
         this.didOpen = false;
     };
     openSecondary = async () => {
         if (!this.slotCtrl.has('secondary') || this.open)
             return;
+        this.transitionAbort?.abort();
+        this.transitionAbort = new AbortController();
+        const { signal } = this.transitionAbort;
         this.open = true;
-        await displayTransition(this.secondaryDiv, {
-            className: 'modal--open',
-            showProp: 'part',
-            show: true,
-        });
+        this.secondaryDiv.style.display = 'block';
+        window.setTimeout(() => {
+            if (!signal.aborted)
+                this.secondaryDiv.part.add('modal--open');
+        }, 50);
+        const completed = await this.awaitTransition(signal);
+        if (!completed)
+            return;
         this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });
         this.didOpen = true;
     };
@@ -213,6 +232,15 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
         if (this.disabled)
             return;
         if (this.slotCtrl.has('secondary')) {
+            if (this.canHover) {
+                if (this.didOpen) {
+                    // already open via hover — lock it open, suppress hover-close
+                    this.openedByClick = true;
+                    return;
+                }
+                // opening via click in hover mode — lock it
+                this.openedByClick = true;
+            }
             this.toggleSecondary();
             return;
         }
@@ -243,29 +271,37 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
     connectedCallback() {
         this.handleDefaultSlotChange();
         this.isInMenuDrawer = !!this.host.closest(transformTag('nano-menu-drawer'));
+        this.openOnHoverChanged();
+    }
+    disconnectedCallback() {
+        window.clearTimeout(this.hoverTimer);
+        this.removeHoverListeners();
     }
     componentDidLoad() {
         this.openChange();
     }
     render() {
-        return (h(Host, { key: 'b6ce27588c1ca2ac2a42d0aada06d7f554a1174a', class: {
+        return (h(Host, { key: '5b7160c2d8712548475c34340cd654d4e17ccfbb', class: {
                 'nano-menu-drawer': this.isInMenuDrawer,
                 'nano-nav-item': true,
                 disabled: this.disabled,
-            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: 'e8faa3568a13feb95ef131f0bd412577120fbf84', class: {
+            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: '92d8b0b88a51214a5fa177d20be957b61e049916', class: {
                 navitem: true,
                 'navitem--open': this.open,
                 'navitem--active': this.selected,
-            }, part: "trigger-wrapper" }, this.href && !this.disabled && (h("a", { key: '4a4da7478db63015d0dcd81ed053146f8eeac5f3', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
+            }, part: "trigger-wrapper" }, this.href && !this.disabled && (h("a", { key: '4b0b32b1c33506ef94e1321e6b6840fa0ddc64cc', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
                 navitem__trigger: true,
-            } }, h("slot", { key: '1eafb7864368850ad2539c402eb1b00877f3d55e', name: "icon-start" }), h("span", { key: '8953312d4dad64ced970d2f1120c07b6c36070f1', class: "navitem__label", part: "label" }, h("slot", { key: '390f468f8d1f5d4f0669cae53ef140e452b16b07', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '3ecd42c2ca6c1546f48a1a5fcf7742d90ad4e1c4', name: "icon-end" }))), (!this.href || this.disabled) && (h("button", { key: '0694ce0708264ef1305e4b926a2f40f1875025a9', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
+            } }, h("slot", { key: '10b8c3c7a4903d8317f01da20a3bdf9196bc1438', name: "icon-start" }), h("span", { key: '2244f23ee2eb590f471c515243e30d5a15b38df3', class: "navitem__label", part: "label" }, h("slot", { key: '7f330c217ec16b81851e6a1ae4c37098b75cd799', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '831d05cc6a55eba753d3bb877983337e88991bd6', name: "icon-end" }))), (!this.href || this.disabled) && (h("button", { key: '8ff3bbecbf1401830487bf116b27311d4be0d13d', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, "aria-expanded": this.slotCtrl.has('secondary')
+                ? this.didOpen.toString()
+                : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
                 navitem__trigger: true,
-            } }, h("slot", { key: 'c3cc4fcbb527f5f8ea2786243fe610d587e36190', name: "icon-start" }), h("span", { key: '385c92f1f2cc26b9c7e4f1a8601920c1f3bf2171', class: "navitem__label", part: "label" }, h("slot", { key: '4e7a75c8903081856c20206aa309c2a9855991da', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '668b95901ba0b914ccc193d4f3cc4433d908c014', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (h("div", { key: 'f81c9aeb6c903b25a662fd1fc615d6f95f6b8f4d', part: "modal", class: {
+            } }, h("slot", { key: 'eb814e8de2bbec584722ab92956eef03262611d3', name: "icon-start" }), h("span", { key: '76ad3a122201c9d2cd23ba7898662e3d134b02ba', class: "navitem__label", part: "label" }, h("slot", { key: '9a6e9153990ee4ad34ed8db1f7e1aa4ad54ea587', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '6b0d010032497dd1f037e982c245891d8603da25', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (h("div", { key: 'bff80914555716d7515c97535113be7aa4ad6f0a', part: "modal", class: {
                 navitem__modal: true,
                 'navitem__modal--open': this.didOpen,
-            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: '70a4b002e989753c461c7dac4dd975200a92e3de', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (h("div", { key: '7b0daad80ae03a29789c9d2bef74d2473f2f1f39', part: "close-button", onClick: this.closeSecondary }, h("slot", { key: '858798062958ea0f4ee809cbf853bdb83dd4d184', name: "close-button" }))), h("slot", { key: '41583a8cc59babbfb1a9a084a3de31c61a145fbc', name: "secondary" })), h("div", { key: '5c260dca9a8fdf7951349df64a037fc7415c3c4b', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
+            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: '3e7495704a435455446c243a590d82cdde632d5a', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (h("div", { key: '613887997d246e3b49f9c7c876859181c3d8089e', part: "close-button", onClick: this.closeSecondary }, h("slot", { key: '82da2c670fcda49aafb78b00603716ae7667e445', name: "close-button" }))), h("slot", { key: '8c1906a9116fcd80cd34a51d68c012982c9858cf', name: "secondary" })), h("div", { key: '3731b3264e9a15b11078df8679a885e5b5d3e5dc', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
     }
     static get watchers() { return {
+        "openOnHover": ["openOnHoverChanged"],
         "open": ["openChange"],
         "didOpen": ["didOpenChange"]
     }; }
@@ -278,12 +314,14 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
         "selected": [1540],
         "checkbox": [516],
         "closeOnBlur": [4, "close-on-blur"],
+        "openOnHover": [4, "open-on-hover"],
         "didOpen": [32],
         "isInMenuDrawer": [32],
         "setFocus": [64],
         "closeMenu": [64],
         "openMenu": [64]
     }, [[16, "click", "handleClose"], [16, "keyup", "handleClose"]], {
+        "openOnHover": ["openOnHoverChanged"],
         "open": ["openChange"],
         "didOpen": ["didOpenChange"]
     }]);

package/dist/esm/{algolia-data-CrdfzSCx.js → algolia-data-D4SY17hw.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { a as getElement } from './index-vpnVjPKQ.js';
+import { a as getElement } from './index-RXFO3HxS.js';
 
 var createDeferredPromise = function () {
     var resolve;

package/dist/esm/{component-store-Dwo45Eol.js → component-store-DCcnMDT0.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { a as getElement } from './index-vpnVjPKQ.js';
+import { a as getElement } from './index-RXFO3HxS.js';
 import { d as debounce } from './throttle-C93FMm2Z.js';
 
 function parse(searchParams, replacer) {

package/dist/esm/{constructible-style-8ZZJwMaU.js → constructible-style-BKXXXS9X.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { h, d as Host, a as getElement } from './index-vpnVjPKQ.js';
+import { h, d as Host, a as getElement } from './index-RXFO3HxS.js';
 
 // import type { VNode, HTMLStencilElement } from "@stencil/core";
 const supportsConstructibleStylesheets = (() => {

package/dist/esm/{dom-QEz8hlsO.js → dom-DiLhOqyz.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import './index-vpnVjPKQ.js';
+import './index-RXFO3HxS.js';
 
 var NODE_TYPE;
 (function (NODE_TYPE) {

package/dist/esm/{fade-7nCfOc5y.js → fade-CnvBzIGD.js}

@@ -1,9 +1,9 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity, u as utils } from './nano-slides-CMFKg_gU.js';
-import './index-vpnVjPKQ.js';
-import './renderer-CTaemqrs.js';
+import { F as Flickity, u as utils } from './nano-slides-WDFCFgZL.js';
+import './index-RXFO3HxS.js';
+import './renderer-B_wACs4w.js';
 
 const Slide = Flickity.Slide;
 const slideUpdateTarget = Slide.prototype.updateTarget;

package/dist/esm/{form-control-8eh0RGNw.js → form-control-DYfvQbOQ.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { h } from './renderer-CTaemqrs.js';
+import { h } from './renderer-B_wACs4w.js';
 
 const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, placeholder, alwaysShowPlaceholder, hideLabel, hasValue, rtl, showCharCount, maxlength, charCount, }) => {
     if (!label && !hasLabelSlot)

package/dist/esm/{fullscreen-h77Lkspo.js → fullscreen-BqihOK-Y.js}

@@ -1,9 +1,9 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity } from './nano-slides-CMFKg_gU.js';
-import './index-vpnVjPKQ.js';
-import './renderer-CTaemqrs.js';
+import { F as Flickity } from './nano-slides-WDFCFgZL.js';
+import './index-RXFO3HxS.js';
+import './renderer-B_wACs4w.js';
 
 Flickity.createMethods.push('_createFullscreen');
 const proto = Flickity.prototype;

package/dist/esm/{index-CuC61-2g.js → index-BSptZcXI.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { j as getRenderingRef, k as forceUpdate } from './index-vpnVjPKQ.js';
+import { j as getRenderingRef, k as forceUpdate } from './index-RXFO3HxS.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);