@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

package/dist/components/drawer.js

@@ -0,0 +1,402 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { h } from './renderer.js';
+import { M as Modal } from './modal.js';
+import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll.js';
+import { H as HasSlotController } from './slot.js';
+import { w as waitForEvent } from './events.js';
+import { C as ComponentStore } from './component-store.js';
+import { g as getActiveElement } from './active-element.js';
+import { d as drag } from './drag.js';
+import { g as getTabbableElements } from './tabbable.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './sticker.js';
+import { d as defineCustomElement$1 } from './tooltip.js';
+
+const drawerCss = ":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{--size:25rem;--min-size:25rem;--max-size:50%;--panel-background:var(--nano-color-neutral-75);--panel-shadow:var(--nano-shadow-l3);--scrim-color:var(--nano-overlay-background-color);--header-button-color:var(--nano-color-primary-1200);--header-button-size:1.375rem;--footer-background:var(--panel-background);--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--body-spacing:var(--nano-spacing-l1-default);--footer-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--dir:1}:host([placement=top]),:host([placement=bottom]){--max-size:80%}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;pointer-events:none;overflow:hidden;border:none;inline-size:100%;block-size:100%;color:unset;background-color:unset}.drawer::backdrop{display:none}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-z-index-modal)}.drawer__panel{position:absolute;z-index:2;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform;display:flex}.drawer--top .drawer__panel,.drawer--bottom .drawer__panel{flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px var(--nano-color-base-1000)}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{scale:1}50%{scale:1.08}100%{scale:1}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel,.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer__resize-handle{display:flex;align-items:center;justify-content:center;position:absolute;z-index:var(--nano-z-index-dropdown);color:var(--nano-color-primary-1200);background-color:var(--nano-color-neutral-75)}.drawer__resize-handle:focus{outline:none}.drawer__resize-handle:focus-visible{background-color:var(--nano-focus-ring-color)}.drawer__resize-handle:active{color:var(--nano-color-primary-800)}.drawer--top .drawer__resize-handle,.drawer--bottom .drawer__resize-handle{cursor:row-resize;inset-inline:0}.drawer--end .drawer__resize-handle,.drawer--start .drawer__resize-handle{cursor:col-resize;inset-block:0}.drawer--end .drawer__resize-handle{inset-inline-start:0}.drawer--start .drawer__resize-handle{inset-inline-end:0}.drawer--top .drawer__resize-handle{inset-block-end:0}.drawer--bottom .drawer__resize-handle{inset-block-start:0}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background);align-items:center;padding:var(--header-spacing)}[stuck] .drawer__header{box-shadow:var(--nano-shadow-l0)}.drawer__title{flex:1 1 auto;margin:0;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser)}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-sm);color:var(--header-button-color);inset-inline-end:calc(var(--nano-spacing-l1-default) / 2 * -1);position:relative}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(.nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--header-button-size)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative;border-block-start:1px solid var(--nano-color-neutral-300);gap:var(--nano-spacing-md);display:inline-flex}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;opacity:0;transition:var(--nano-transition-fast) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";
+
+const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.nanoShow = createEvent(this, "nanoShow", 7);
+        this.nanoHide = createEvent(this, "nanoHide", 7);
+        this.nanoAfterHide = createEvent(this, "nanoAfterHide", 7);
+        this.nanoAfterShow = createEvent(this, "nanoAfterShow", 7);
+        this.nanoInitialFocus = createEvent(this, "nanoInitialFocus", 7);
+        this.nanoRequestClose = createEvent(this, "nanoRequestClose", 7);
+    }
+    get host() { return this; }
+    originalTrigger;
+    drawer;
+    overlay;
+    modal;
+    slotCtrl = new HasSlotController(this, 'footer');
+    get panel() {
+        return this._panel;
+    }
+    set panel(ele) {
+        if (this._panel) {
+            this.panel.removeEventListener('animationend', this.handleTransitionEnd);
+        }
+        if (!ele)
+            return;
+        ele.addEventListener('transitionend', this.handleTransitionEnd);
+        this._panel = ele;
+    }
+    _panel;
+    noDismiss = false;
+    isOpen = false;
+    // Public API
+    /**
+     * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
+     * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
+     */
+    open = false;
+    /**
+     * The drawer's label as displayed in the header. You should always include a relevant label even when using
+     * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
+     */
+    label;
+    /** The direction from which the drawer will open. */
+    placement = 'end';
+    /**
+     * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
+     * its parent element, set this attribute and add `position: relative` to the parent.
+     */
+    contained = false;
+    /**
+     * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
+     * accessible way for users to dismiss the drawer.
+     */
+    noHeader = false;
+    /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */
+    storeId;
+    /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */
+    storeMethod = 'url-hash';
+    /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */
+    noUserDismiss = false;
+    /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */
+    hoist = false;
+    /** Makes the drawer resizable */
+    resizable = false;
+    handleHoistChange() {
+        // if native popover is supported then bail as this is not required
+        if ('popover' in globalThis.HTMLElement.prototype ||
+            !this.hoist ||
+            Array.from(document.body.children).includes(this.host))
+            return;
+        document.body.prepend(this.host);
+    }
+    /** Emitted when the drawer opens. */
+    nanoShow;
+    /** Emitted when the drawer closes. */
+    nanoHide;
+    /** Emitted after the drawer closes and all animations are complete. */
+    nanoAfterHide;
+    /** Emitted after the drawer opens and all animations are complete. */
+    nanoAfterShow;
+    /**
+     * Emitted when the drawer opens and is ready to receive focus. Calling
+     * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+     */
+    nanoInitialFocus;
+    /**
+     * Emitted when the user attempts to
+     * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling
+     * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
+     * destructive behavior such as data loss.
+     */
+    nanoRequestClose;
+    /**
+     * Shows the drawer.
+     * @returns a promise that resolves when the drawer has finished opening
+     */
+    async show() {
+        if (this.open)
+            return undefined;
+        this.open = true;
+        return waitForEvent(this.host, 'nanoAfterShow');
+    }
+    /**
+     * Hides the drawer
+     * @returns a promise that resolves when the drawer has finished closing
+     */
+    async hide() {
+        if (!this.open)
+            return undefined;
+        this.open = false;
+        return waitForEvent(this.host, 'nanoAfterHide');
+    }
+    requestClose(source) {
+        const nanoRequestClose = this.nanoRequestClose.emit({ source });
+        if (nanoRequestClose.defaultPrevented || this.noUserDismiss) {
+            this.noDismiss = true;
+            setTimeout(() => (this.noDismiss = false), 250);
+            return;
+        }
+        this.hide();
+    }
+    // Prop Change Handlers
+    handleNoModalChange() {
+        if (this.open && !this.contained) {
+            this.modal.activate();
+            if (typeof this.drawer?.showPopover === 'function') {
+                this.drawer.showPopover();
+            }
+            lockBodyScrolling(this.host);
+        }
+        if (this.open && this.contained) {
+            this.modal.deactivate();
+            unlockBodyScrolling(this.host);
+        }
+    }
+    async handleOpenChange() {
+        if (this.open) {
+            // Show
+            this.nanoShow.emit();
+            this.addOpenListeners();
+            this.originalTrigger = getActiveElement();
+            // Lock body scrolling only if the drawer isn't contained
+            if (!this.contained) {
+                this.modal.activate();
+                if (typeof this.drawer?.showPopover === 'function') {
+                    this.drawer.showPopover();
+                }
+                lockBodyScrolling(this.host);
+            }
+            // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the
+            // drawer's animation to jitter.
+            const autoFocusTarget = this.host.querySelector('[autofocus]');
+            if (autoFocusTarget) {
+                autoFocusTarget.removeAttribute('autofocus');
+            }
+            this.drawer.hidden = false;
+            this.isOpen = true;
+            // Set initial focus
+            requestAnimationFrame(() => {
+                const nanoInitialFocus = this.nanoInitialFocus.emit();
+                if (!nanoInitialFocus.defaultPrevented) {
+                    const firstTabbable = autoFocusTarget ||
+                        getTabbableElements(this.host, true, true, true)[0] ||
+                        this.panel;
+                    firstTabbable.focus({ preventScroll: true });
+                }
+                // Restore the autofocus attribute
+                if (autoFocusTarget) {
+                    autoFocusTarget.setAttribute('autofocus', '');
+                }
+            });
+            return;
+        }
+        // Hide
+        this.nanoHide.emit();
+        this.removeOpenListeners();
+        if (!this.contained) {
+            this.modal.deactivate();
+            unlockBodyScrolling(this.host);
+        }
+        // Restore focus to the original trigger
+        const returnFocus = this.originalTrigger && typeof this.originalTrigger.focus === 'function'
+            ? this.originalTrigger
+            : document.body;
+        returnFocus.focus();
+        requestAnimationFrame(() => {
+            this.isOpen = false;
+        });
+    }
+    // Event Handling
+    addOpenListeners() {
+        document.addEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    removeOpenListeners() {
+        document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    handleDocumentKeyDown = (event) => {
+        // Contained drawers aren't modal and don't respond to the escape key
+        if (this.contained) {
+            return;
+        }
+        if (event.key === 'Escape' && this.modal.isActive() && this.open) {
+            event.stopImmediatePropagation();
+            this.requestClose('keyboard');
+        }
+    };
+    handleTransitionEnd = (event) => {
+        if (event.propertyName === 'opacity' &&
+            event
+                .composedPath()
+                .find((node) => node === this.panel || node === this.overlay)) {
+            if (!this.open) {
+                this.drawer.hidden = true;
+                // Now that the dialog is hidden, restore the overlay and panel for next time
+                this.overlay.hidden = false;
+                this.panel.hidden = false;
+                if (!this.contained && typeof this.drawer?.hidePopover === 'function') {
+                    this.drawer.hidePopover();
+                }
+                this.nanoAfterHide.emit();
+                return;
+            }
+            this.nanoAfterShow.emit();
+        }
+    };
+    get panelSize() {
+        const vertical = ['top', 'bottom'].includes(this.placement);
+        return vertical ? this.panel.offsetHeight : this.panel.offsetWidth;
+    }
+    set panelSize(size) {
+        const prop = ['top', 'bottom'].includes(this.placement)
+            ? 'blockSize'
+            : 'inlineSize';
+        this.panel.style[prop] = `clamp(var(--min-size), ${size + 'px'}, var(--max-size))`;
+    }
+    handleKeyDown = (event) => {
+        if ([
+            'ArrowLeft',
+            'ArrowRight',
+            'ArrowUp',
+            'ArrowDown',
+            'Home',
+            'End',
+        ].includes(event.key)) {
+            let newPosition = this.panelSize;
+            const flip = this.placement === 'end' || this.placement === 'bottom';
+            const incr = (event.shiftKey ? 30 : 5) * (flip ? -1 : 1);
+            const vertical = ['top', 'bottom'].includes(this.placement);
+            event.preventDefault();
+            if ((event.key === 'ArrowLeft' && !vertical) ||
+                (event.key === 'ArrowUp' && vertical)) {
+                newPosition -= incr;
+            }
+            if ((event.key === 'ArrowRight' && !vertical) ||
+                (event.key === 'ArrowDown' && vertical)) {
+                newPosition += incr;
+            }
+            if (event.key === 'Home') {
+                newPosition = 0;
+            }
+            if (event.key === 'End') {
+                newPosition = 10000;
+            }
+            this.panelSize = newPosition;
+        }
+    };
+    handleDrag = (e) => {
+        // Prevent text selection when dragging
+        e.preventDefault();
+        const vertical = ['top', 'bottom'].includes(this.placement);
+        const flip = this.placement === 'end' || this.placement === 'bottom';
+        const initDimension = vertical
+            ? this.panel.offsetHeight
+            : this.panel.offsetWidth;
+        drag(this.host, {
+            relative: true,
+            initialEvent: e,
+            onMove: (x, y) => {
+                let movedPixels = vertical ? y : x;
+                if (flip)
+                    movedPixels *= -1;
+                this.panelSize = initDimension + movedPixels;
+            },
+        });
+    };
+    // Component Lifecycle
+    connectedCallback() {
+        this.handleHoistChange();
+        this.modal = new Modal(this.host);
+    }
+    disconnectedCallback() {
+        unlockBodyScrolling(this.host);
+    }
+    componentWillLoad() {
+        // Show on init if open
+        if (this.storeId)
+            ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);
+    }
+    componentDidLoad() {
+        this.drawer.hidden = !this.open;
+        if (this.open) {
+            this.handleNoModalChange();
+            this.show();
+        }
+    }
+    render() {
+        return (h(Host, { key: '487ea65e478b81f58f3302110777a756e5dcf7d4', class: "nano-drawer" }, h("div", { key: '12feebdc459f4643d41d5d2dc19643c13c0d9809', ref: (ele) => (this.drawer = ele), part: "base", class: {
+                drawer: true,
+                'drawer--open': this.open,
+                [`drawer--${this.placement}`]: true,
+                'drawer--contained': this.contained,
+                'drawer--fixed': !this.contained,
+                'drawer--has-footer': this.slotCtrl.has('footer'),
+                'drawer--has-header': !this.noHeader,
+                'drawer--nodismiss': this.noDismiss,
+            }, popover: !this.contained ? 'manual' : undefined }, h("div", { key: 'e38b14383dadea34b11db92d6871518b82192859', ref: (ele) => (this.overlay = ele), part: "overlay", class: "drawer__overlay", onClick: () => this.requestClose('overlay'), tabindex: "-1" }), h("div", { key: '4a934cc84b9d4ff06bff84feaf75ac8d463d2d5f', ref: (ele) => (this.panel = ele), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.isOpen ? 'false' : 'true', "aria-label": this.noHeader ? this.label : undefined, "aria-labelledby": !this.noHeader ? 'title' : undefined, tabindex: "0" }, this.resizable && (h("div", { key: '7c8d1c12356974522a698d69ff2e9015dd60ae92', part: "resize-handle", class: "drawer__resize-handle", tabindex: "0", role: "separator", "aria-label": "Resize", onKeyDown: this.handleKeyDown, onMouseDown: this.handleDrag, onTouchStart: this.handleDrag }, h("slot", { key: '48e2497abc58310beb96648b4cc44d80ae28431f', name: "handle" }, ['start', 'end'].includes(this.placement) ? (h("nano-icon", { slot: "handle", name: "solid/grip-dots-vertical" })) : (h("nano-icon", { slot: "handle", name: "solid/grip-dots" }))))), h("div", { key: '425d5eb60035fb44b7c3ea4ddf4f338d429893ab', class: "drawer__main" }, !this.noHeader && (h("nano-sticker", { key: '1f8eac374619dd3b607862254c2573e19963374c' }, h("div", { key: '070d62dd270a2040f32e509ec0a2a5eb8c739367', part: "header", class: "drawer__header" }, h("div", { key: 'f3d0155227515ad548ee70e65a2213711dc13a3a', part: "title", class: "drawer__title", id: "title" }, h("slot", { key: '61410c8918849984dd31854a042ec3209c1ca175', name: "label" }, this.label.length > 0
+            ? this.label
+            : String.fromCharCode(65279))), h("div", { key: '262e4616c018e346596b089968f6af8b4a39436a', part: "header-actions", class: "drawer__header-actions" }, h("slot", { key: '81245d6449637ca85f631d2065b173dfa3b6c663', name: "header-actions" }), !this.noUserDismiss && (h("nano-icon-button", { key: '0b88624e93df33a23f3f132d05d5f8fbc418f520', part: "close-button", exportparts: "base:close-button__base", class: "drawer__close", iconName: "light/xmark", label: "Close", onClick: () => this.requestClose('close-button') })))))), h("div", { key: '50a441f9c9417ba4fa29f30b63cc54eaf5618a98', part: "body", class: "drawer__body" }, h("slot", { key: '478310362285c4ea2fcde71838da527640bf09da' })), h("nano-sticker", { key: 'bb6c4a2c6ce89a03270daaf194b0a78914437c2b', position: "bottom" }, h("footer", { key: 'efbb6ac1f46e3bce948a236f01e26adc63b628cc', part: "footer", class: "drawer__footer" }, h("slot", { key: '5a3d95c01ce45c51715d89e4cc3064f337d59b23', name: "footer" }))))))));
+    }
+    static get watchers() { return {
+        "hoist": ["handleHoistChange"],
+        "contained": ["handleNoModalChange"],
+        "open": ["handleOpenChange"]
+    }; }
+    static get style() { return drawerCss; }
+}, [1, "nano-drawer", {
+        "open": [1540],
+        "label": [513],
+        "placement": [513],
+        "contained": [516],
+        "noHeader": [516, "no-header"],
+        "storeId": [1, "store-id"],
+        "storeMethod": [1, "store-method"],
+        "noUserDismiss": [4, "no-user-dismiss"],
+        "hoist": [4],
+        "resizable": [4],
+        "noDismiss": [32],
+        "isOpen": [32],
+        "show": [64],
+        "hide": [64]
+    }, undefined, {
+        "hoist": ["handleHoistChange"],
+        "contained": ["handleNoModalChange"],
+        "open": ["handleOpenChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nano-drawer", "nano-icon", "nano-icon-button", "nano-sticker", "nano-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nano-drawer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Drawer);
+            }
+            break;
+        case "nano-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "nano-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "nano-sticker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "nano-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Drawer as D, defineCustomElement as d };

package/dist/components/dropdown.js

@@ -1,14 +1,13 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { g as getActiveElement } from './active-element.js';
+import { f as focusInContainer } from './active-element.js';
 import { P as Popover } from './popover.js';
 import { a as getNearestTabbableElement } from './tabbable.js';
 import { t as transformTag, h } from './renderer.js';
 
-const dropdownCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:auto;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--menu-height:var(--max-menu-height, 50vh);display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
-const NanoDropdownStyle0 = dropdownCss;
+const dropdownCss = ":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{--width:auto;--border:none;--border-radius:0px;--background:var(--nano-color-neutral-75);--padding:var(--nano-spacing-sm) 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l1);--menu-height:calc(100vh - 200px);display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;min-block-size:20px;overflow:var(--overflow);max-block-size:var(--max-height);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";
 
 let dropDownIds = 0;
 const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLElement {
@@ -30,6 +29,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     positioner;
     accessibleTrigger;
     didLoad = false;
+    focusFirstEle = true;
     get menu() {
         return this.host.querySelector(transformTag('nano-menu'));
     }
@@ -76,7 +76,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     /**
      * The distance in pixels from which to offset the panel away from its trigger.
      */
-    distance = 2;
+    distance = 5;
     /**
      * The distance in pixels from which to offset the panel along its trigger.
      */
@@ -187,34 +187,17 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         this.ignoreOpenWatcher = false;
         document.removeEventListener('mousedown', this.handleDocumentMouseDown);
         document.removeEventListener('keydown', this.handleDocumentKeyDown);
-        if (this.accessibleTrigger && this.focusEleInDropDwn()) {
-            this.accessibleTrigger.focus();
-        }
-        setTimeout(() => {
-            if (!this.open && typeof this.positioner?.hidePopover === 'function') {
-                this.positioner.hidePopover();
-            }
-        }, 300);
     }
     // Private methods
-    /**
-     * Decides if the current active element or element
-     * connected to the current event is connected to the Dropdown
-     * @param e
-     * @returns whether the current focus is within the dropdown
-     */
-    focusEleInDropDwn(e) {
-        const activeElement = getActiveElement();
-        if (e && e.composedPath()?.length) {
-            const ddInPath = e.composedPath().includes(this.containingElement);
-            if (ddInPath)
-                return ddInPath;
-            return e.composedPath().includes(this.accessibleTrigger);
+    afterHide() {
+        if (typeof this.positioner?.hidePopover === 'function') {
+            this.positioner.hidePopover();
+        }
+        this.panel.scrollTop = 0;
+        if (this.accessibleTrigger &&
+            focusInContainer(this.containingElement, this.trigger)) {
+            this.accessibleTrigger.focus();
         }
-        return (activeElement &&
-            activeElement.closest(this.containingElement.tagName.toLowerCase()) ===
-                this.containingElement &&
-            activeElement !== this.accessibleTrigger);
     }
     togglePanel = () => {
         if (!this.autoOpen)
@@ -252,47 +235,68 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
             this.hide();
             return;
         }
-        // Close when tabbing results in the focus leaving the close element
+        // Close when tabbing results in the focus leaving the dropdown element
         if (event.key === 'Tab') {
             setTimeout(() => {
-                if (document.activeElement &&
-                    document.activeElement.closest(this.containingElement.tagName.toLowerCase()) !== this.containingElement) {
+                if (!focusInContainer(this.containingElement, this.trigger)) {
                     this.hide();
                     return;
                 }
             });
         }
-        // If a menu is present, focus on it when certain keys are pressed
-        if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
-            // must have menu item, must have pressed down, must be open and must not have focus within dd
-            if (!this.open || this.focusEleInDropDwn(event))
+        else {
+            // If a menu is present, focus on it when certain keys are pressed
+            if (this.menu &&
+                ((this.placement.match(/bottom|top/) &&
+                    ['ArrowDown', 'ArrowUp', ' '].includes(event.key)) ||
+                    (this.placement.match(/right|left/) &&
+                        ['ArrowRight', 'ArrowLeft', ' '].includes(event.key)))) {
+                // must have menu item, must have pressed down, must be open and must not have focus within dd
+                if (!this.open ||
+                    focusInContainer(this.containingElement, this.trigger, event)) {
+                    if (this.containingElement.tagName === 'NANO-DROPDOWN' &&
+                        this.containingElement.placement.match(/right|left/) &&
+                        this.trigger.getRootNode()?.host?.tagName ===
+                            'NANO-DROPDOWN') {
+                        // if the dropdown is inside another dropdown, we need to close the inner one
+                        this.hide();
+                        return;
+                    }
+                    return;
+                }
+                event.preventDefault();
+                this.menu.setFocus();
+                this.focusFirstEle = true;
                 return;
-            event.preventDefault();
-            this.menu.setFocus();
-            return;
-        }
-        // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)
-        const ePath = event.composedPath();
-        if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {
-            this.menu.dispatchEvent(new KeyboardEvent(event.type, event));
-            return;
+            }
+            // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)
+            const ePath = event.composedPath();
+            if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {
+                this.menu.dispatchEvent(new KeyboardEvent(event.type, event));
+                return;
+            }
         }
     }
     handleDocumentMouseDown(event) {
         // Close when clicking outside of the close element
-        if (!this.focusEleInDropDwn(event)) {
+        if (!focusInContainer(this.containingElement, this.trigger, event)) {
             this.hide();
             return;
         }
     }
     handleTriggerKeyDown = (event) => {
         // Open the panel when pressing down or up while focused on the trigger
-        if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {
+        if ((this.placement.match(/bottom|top/) &&
+            ['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key)) ||
+            (this.placement.match(/right|left/) &&
+                ['ArrowRight', 'ArrowLeft', ' ', 'Enter'].includes(event.key))) {
             this.show();
             event.preventDefault();
             event.stopPropagation();
-            if (this.menu)
+            if (this.menu) {
                 this.menu.setFocus();
+                this.focusFirstEle = true;
+            }
         }
     };
     handleTriggerSlotChange = () => {
@@ -317,10 +321,14 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
             onAfterShow: () => this.nanoAfterShow.emit(),
             onTransitionEnd: () => {
                 if (!this.open) {
-                    this.panel.scrollTop = 0;
+                    this.afterHide();
                 }
                 else if (this.menu) {
                     this.menu.showActiveElement();
+                    if (this.focusFirstEle) {
+                        this.menu.setFocus();
+                        this.focusFirstEle = false;
+                    }
                 }
             },
         });
@@ -348,12 +356,12 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
             this.popover.destroy();
     }
     render() {
-        return (h(Host, { key: '85c1bf918fa0800659aaab7d64c6832134d9b003', class: "nano-dropdown" }, h("div", { key: '9cc1b9eba8d8fea321f85c71cdd5fef1d823d03e', part: "base", id: this.dropdownId, class: {
+        return (h(Host, { key: 'dd4615946390485d5ad05ff0fbf3714474c38b9b', class: "nano-dropdown" }, h("div", { key: '9a60642705315c41efaad525f087397b458caf2a', part: "base", id: this.dropdownId, class: {
                 dropdown: true,
                 'dropdown--open': this.open,
-            } }, h("span", { key: '06975a344a9d5760057a1531dd43e4dea9a6eed9', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: '6a5adccd87e2fa3c763cb2bdadff0aa4323c3da3', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '1a887678dd9cc47a8192060478a5d7acdb06600e', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: 'c81fc552c814c87e2df44bf8022c38729069240b', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined }, this.dialogTitle && (h("span", { key: '6d38bbf3d0d4411190dac237f2daa0815fafa420', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
+            } }, h("span", { key: '861f59e5d50c956d53ce75d16ca5430bfb339d26', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: '55e3a353ffd07ca586468bbc213d415484e4427f', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '3ac2f6fde7117cf7421ac53e1786c4da59fd4e6c', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: 'ff5d8d1248c1434aad2c8f042f208ff3d418f1a4', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined }, this.dialogTitle && (h("span", { key: 'e71c3b8e09d6b8cf359470872a70da8794a221db', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
                 ? undefined
-                : 'polite' }, this.dialogTitle)), h("slot", { key: '8ad35ae3a28c6a057d1cf408e9256605759916ba' }))))));
+                : 'polite' }, this.dialogTitle)), h("slot", { key: 'a9349e44064f7bbd4b32b3658c203575fe39c804' }))))));
     }
     static get watchers() { return {
         "open": ["handleOpenChange"],
@@ -363,19 +371,19 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         "skidding": ["handlePopoverOptionsChange"],
         "hoist": ["handlePopoverOptionsChange"]
     }; }
-    static get style() { return NanoDropdownStyle0; }
+    static get style() { return dropdownCss; }
 }, [1, "nano-dropdown", {
         "autoOpen": [4, "auto-open"],
         "open": [1540],
         "closeOnSelect": [4, "close-on-select"],
-        "containingElement": [1040],
-        "tetherTo": [16],
+        "containingElement": [1040, "containing-element"],
+        "tetherTo": [16, "tether-to"],
         "placement": [1],
         "distance": [2],
         "skidding": [2],
         "hoist": [1028],
         "dialogTitle": [1, "dialog-title"],
-        "eventType": [16],
+        "eventType": [16, "event-type"],
         "show": [64],
         "hide": [64]
     }, [[0, "nanoOpen", "secondaryOpen"], [0, "nanoClose", "secondaryClose"], [0, "nanoSelect", "handlePanelSelect"]], {
@@ -401,5 +409,3 @@ function defineCustomElement() {
 }
 
 export { Dropdown as D, defineCustomElement as d };
-
-//# sourceMappingURL=dropdown.js.map

package/dist/components/events.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 /**
  * Add multiple event listeners with the same callback function
@@ -32,5 +32,3 @@ function waitForEvent(el, eventName) {
 }
 
 export { addListeners as a, waitForEvent as w };
-
-//# sourceMappingURL=events.js.map