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

package/dist/esm/nano-avatar_5.entry.js

@@ -0,0 +1,1772 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { r as registerInstance, c as createEvent, a as getElement, d as Host } from './index-CFYZ-ZOT.js';
+import { h, t as transformTag } from './renderer-LJzCFyMt.js';
+import { M as Modal } from './modal-B50PWCuY.js';
+import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-BRRzrkAi.js';
+import { H as HasSlotController } from './slot-DBzVpliZ.js';
+import { w as waitForEvent } from './events-ClRFmcmJ.js';
+import { C as ComponentStore } from './component-store-DqCSKpAK.js';
+import { g as getActiveElement } from './active-element-C1pBwzyj.js';
+import { d as drag } from './drag-BLOEuv-q.js';
+import { g as getTabbableElements } from './tabbable-BpHwrUYt.js';
+import { s as searchInsight } from './search-insights-8OL2oeQN.js';
+import { c as closestElement } from './dom-CF0Ycs9M.js';
+import { a as debounceEvent } from './throttle-C93FMm2Z.js';
+import { F as FormControlWrap, a as FormControl } from './form-control-DXPQniNX.js';
+
+const avatarCss = ":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}}";
+
+const NanoAvatar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Initials to use as when no image is available (1–2 characters max recommended). */
+    initials;
+};
+NanoAvatar.style = avatarCss;
+
+const NanoBadge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The semantic theme of the button. Defaults to primary / brand blue  */
+    theme;
+    /** The strength / vibrancy of the theme. Defaults to `3` */
+    strength;
+    /** Use pulse to draw attention to the badge with an animation */
+    pulse;
+};
+
+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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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 getElement(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"]
+    }; }
+};
+Drawer.style = drawerCss;
+
+const globalSearchResultsCss = ":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:block;flex:1 1 100%}.main-search{display:flex;background:white;font-size:14px;min-block-size:calc(100vh - 63px);justify-content:space-between}.main-search__wrap{display:contents;block-size:100%}.main-search ul{margin:0;padding:0;list-style:none}.main-search li{margin:0;padding:0}.main-search button:not(.result__tags-tag){appearance:none;border:none;background:none;position:relative;inset-block-start:-2px}.main-search .icon-button{color:inherit;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.main-search__topbar{display:flex;align-items:center;flex-wrap:wrap;margin-block-end:1em}.main-search__topbar::after{content:\"\";inline-size:calc(100% - 30px);inset-inline-start:30px;position:relative;border-block-end:1px solid #e5eef1;padding-block-start:0.9em}.main-search__applied-filters{border:solid 1px #e4e6e8;text-transform:uppercase;border-radius:3px;font-weight:bold;display:flex;align-items:center;line-height:0.9;padding:5px 5px 0;letter-spacing:2px;flex-wrap:wrap;margin-block-end:0.5rem}.main-search__applied-filters span{display:flex;align-items:center}:host(.small) .main-search__applied-filters{display:none}.main-search__applied-nofilter{margin-inline:0 5px;margin-block:0 3px;padding-inline:7px;padding-block:10px;font-size:12px;color:rgba(69, 85, 86, 0.85)}.main-search__applied-filter{padding-inline:8px 2px;padding-block:5px 3px;margin-inline:0 5px;margin-block:0 5px;color:#455556;font-size:11px;border-radius:2px;border:solid 1px rgba(0, 132, 169, 0.5);background-color:rgba(0, 132, 169, 0.2);line-height:1}.main-search__applied-filter .icon-button{padding-inline:10px 4px;padding-block:2px 1px}.main-search__applied-filter .icon-button .nano-icon{pointer-events:none}.main-search .topbar__bkbtn{position:relative;inset-inline-start:-7px}:host(.small) .main-search .topbar__query{display:none}.main-search .topbar__filtering{display:flex;align-items:center;margin-block:0;margin-inline:1em 0;flex:1}.main-search .topbar__order{min-inline-size:175px;max-inline-size:200px;margin-inline-start:auto}:host(.small) .main-search .topbar__order{max-inline-size:300px}.main-search .topbar .nano-select{opacity:1;transition:0.1s ease opacity}.main-search .topbar .nano-select:not(.hydrated){opacity:0}.main-search .topbar__show-filters{margin-inline-start:0.5em;text-transform:uppercase;display:none;flex-direction:column;align-items:center}.main-search .topbar__show-filters .nano-icon{font-size:20px}:host(.small) .main-search .topbar__show-filters{display:flex}.main-search .topbar__filter-count{inline-size:12px;block-size:12px;box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);border:solid 1px #005c76;background-color:#005c76;color:white;font-size:7px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;margin-block-end:3px}.main-search__results{font-size:14px;padding:1em 40px;color:rgba(69, 85, 86, 0.85);inline-size:70%;block-size:100%}@media (max-width: 576px){.main-search__results{padding:1em 20px}}:host(.small) .main-search__results{inline-size:100%}.main-search__filters{outline:none;padding-inline:0 40px;padding-block:1.8em 1em;flex:1 1 30%;box-sizing:border-box}@media (max-width: 576px){.main-search__filters{padding-inline-end:20px}}:host(:not(.small)) .main-search__filters{max-inline-size:350px;min-inline-size:220px}.filters{color:#455556;background:white;font-size:14px}:host(.small) .filters{position:fixed;inline-size:0;block-size:0;z-index:10;inset-block-start:0;inset-inline-end:0;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{block-size:100vh;inline-size:100vw;transition:all 0s ease 0s}:host(.small) .filters.show::after{opacity:1}:host(.small) .filters::after{content:\"\";background:rgba(0, 0, 0, 0.5);position:absolute;inset:0;z-index:-1;opacity:0;transition:0.1s ease opacity}.filters__close-filters{display:none !important;font-size:1.4em}:host(.small) .filters__close-filters{display:inline-block !important;margin-inline:auto 0;margin-block:0}.filters__old-posts{margin-inline-start:1rem}:host(.small) .filters-wrap{position:absolute;inset-block-start:0;inset-inline-end:0;background:rgb(247, 246, 246);transform:translateX(100%);inline-size:300px;min-inline-size:200px;max-inline-size:80vw;transition:transform 0.3s ease;padding:1em;color:black;overflow:auto;block-size:100vh}:host(.small) .filters.show .filters-wrap{transform:translateX(0%);box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1)}.filters ul{margin:0;padding:0;list-style:none}.filters li{margin:0;padding:0}.filters .nano-details{--padding:0.8em;margin:0.8em 0}.filters .nano-details strong[slot]{display:block;padding-inline-start:calc(20px - 0.8em)}.filters .nano-details .nano-icon[slot=icon-end]{padding-inline:calc(20px - 0.8em)}.filters li:last-child .filter-label{margin-block-end:0}.filters .filter-label{display:flex;align-items:center;position:relative;margin:0.5em 0;line-height:1.4;z-index:0}.filters .filter-label::before{margin-inline:0 1em;margin-block:0;content:\"\";border:1px solid #007495;background:#fff;border-radius:3px;block-size:1em;inline-size:1em;min-inline-size:1em;min-block-size:1em;display:inline-block}.filters .filter-label::after{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='%23ffffff'%20d='M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z'/></svg>\");content:\"\";block-size:0.7em;inline-size:0.7em;position:absolute;inset-inline-start:2px;inset-block-start:50%;transform:translateY(-50%);z-index:1;display:block;background-size:100%;background-position:center center;background-repeat:no-repeat}.filters .filter-cb{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.filters .filter-cb:checked+.filter-label::before{background:#245a6f}.filters .filter-cb:focus+.filter-label::before{box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7)}.filters-header{display:flex;align-items:center;border-block-end:1px solid #90c6e7;padding-block-end:0.5rem;margin-block-end:0.5rem}.filters-reset{color:#007495;font-size:12px;text-decoration:underline;margin-inline:auto 0;margin-block:0}:host(.small) .filters-reset{margin:0}.filters-title{margin:0;text-transform:uppercase;color:rgba(69, 85, 86, 0.85);font-weight:bold;font-size:14px}:host(.small) .filters-title{display:none}.result{text-decoration:none;display:flex;flex-flow:row wrap;padding-block-end:14px;border-block-end:1px solid #90c6e7}.result *{word-wrap:break-word;overflow-wrap:break-word}.result__title{margin:1em 0 0.5em;inline-size:70%;display:flex}.result__title a{color:#0084a9;font-size:14px;line-height:1.43;text-decoration:none;font-weight:600}.result__title .nano-icon{margin-inline:0 0.5em;margin-block:0;min-inline-size:20px;min-block-size:20px;opacity:0.8}@media (max-width: 992px){.result__title{inline-size:100%}}.result__body{color:#455556;font-size:13px;inline-size:70%;text-decoration:none}@media (max-width: 992px){.result__body{inline-size:100%}}.result__pdf{display:inline-block;margin-inline-start:0.5rem;color:#b5aea7}.result__meta{display:flex;flex-flow:row wrap;color:#455556;font-size:11px;line-height:13px;inline-size:100%;align-items:center}.result__meta>*{margin-block-start:0.5rem}.result__meta>*:not(:last-child){padding-inline-end:0}.result__meta>*:not(:last-child)::after{content:\"\";block-size:1rem;inline-size:1px;background:#90c6e7;display:inline-block;margin-inline:0.7rem}@media (max-width: 576px){.result__meta>*:not(:last-child)::after{display:none}}@media (max-width: 576px){.result__meta{flex-flow:column;align-items:flex-start}}.result__tags{display:flex;flex-flow:row wrap}@media (max-width: 576px){.result__tags{padding-inline-start:0}}.result__tags-tag{color:#455556;display:inline-block;font-size:0.4375rem;letter-spacing:1.4px;background:#fff;border-radius:2px;text-transform:uppercase;padding:0 4px 1px 5px;font-weight:600;margin:3px 0.25rem 0.25rem 0;border:1px solid #b5aea7;white-space:nowrap;line-height:13px}.result__type{font-weight:600;text-transform:capitalize;white-space:nowrap;display:flex;align-items:center}.result__date{display:flex;align-items:center;color:#455556}.result__source{color:#455556;padding-inline-end:0.75rem}.result__authors{font-size:12px;color:#455556;margin-block-end:0.25rem;text-decoration:none;inline-size:70%}.result__buttons{inline-size:70%;margin-block-end:0.5rem}.result__buttons-button{background-color:#007495;color:#fff;padding:5px 8px 1px;border-radius:4px;display:inline-block;font-size:11px;text-decoration:none;border:none}.result__promo{inline-size:70%;margin-block-end:0.5rem;text-decoration:none;color:#455556}.result__promo-box{inline-size:300px;background-color:#e3eef1;padding:12px 12px 8px 4px;display:flex;flex-flow:row nowrap;margin-block-start:1rem}.result__promo-bigdate{flex:0 1 60px;text-align:center;font-weight:600;color:#007495;text-transform:uppercase;line-height:1;letter-spacing:1.5px}@media (max-width: 992px){.result__promo-bigdate{inline-size:100%}}.result__promo-bigdate span{color:#455556;display:block}.result__promo-bigdate~div{padding-inline-start:1rem;border-inline-start:1px solid #c5dbe1}.result__promo-date{font-size:12px}.result__promo-venue{font-size:12px}.result__promo .nano-icon{color:#007495;position:relative;inset-block-start:1px;padding-inline-end:2px}.result__image{display:block;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:4px;position:relative;inline-size:100%;block-size:150px;margin-block-end:0.5rem}@media (min-width: 576px){.result__image{inline-size:142px;block-size:80px}}.result__image .nano-icon{position:absolute;inset-block-start:calc(50% - 0.75rem);inset-inline-start:calc(50% - 0.75rem);font-size:1.5rem;color:#0084a9;--primary-color:#fff;--secondary-color:#0084a9;--primary-opacity:1}@media (max-width: 576px){.result__image .nano-icon{font-size:3rem;inset-block-start:calc(50% - 1.5rem);inset-inline-start:calc(50% - 1.5rem)}}.result__video-body{inline-size:70%;text-decoration:none;display:flex;flex-flow:row wrap}@media (max-width: 992px){.result__video-body{inline-size:100%}}@media (max-width: 576px){.result__video-body{flex-flow:column}}.result__video-body .result__body{padding-inline-start:1rem;display:flex;flex-direction:column;margin-block-end:0;flex:1}@media (max-width: 576px){.result__video-body .result__body{padding-inline-start:0}}.result__video-body .result__body p{display:inline;margin:0}.result__video-body .result__body u,.result__video-body .result__body li,.result__video-body .result__body a{text-decoration:none}.result__video-body .result__body .result__meta{margin-block-start:0.5rem}.result__video-body .result__body .result__description{flex:1 0 auto}.search-empty{padding:3rem 0;text-align:center;border-block-start:1px solid #e5eef1}.search-empty h2{color:#455556;font-size:1.125rem;margin-block-end:0.5rem}.search-empty-icon{font-size:7rem;--icon-color:#e4e6e8;margin-block-end:2rem}.search__highlight{background:#fbffbf;font-style:normal}";
+
+const filterOldPosts = 'created > ' + Math.floor((Date.now() - 63115200000) / 1000);
+let searchResultIds = 0;
+const GlobalSearchResults = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.nanoSearchGoBack = createEvent(this, "nanoSearchGoBack", 7);
+    }
+    algoliaResultsEle;
+    filtersDiv;
+    openFilterBtn;
+    ro;
+    searchResultId = searchResultIds++;
+    queryId = this.searchResultId > 0 ? `searchq-${this.searchResultId}` : 'searchq';
+    globalNav;
+    algoliaResults;
+    algoliaEle;
+    currentWidth;
+    apiKey;
+    appId;
+    index;
+    get el() { return getElement(this); }
+    /**
+     * Fired when the user clicks the 'back' button / closes the search panel
+     * Calling `event.preventDefault()` will prevent it from being closed.
+     */
+    nanoSearchGoBack;
+    handleAlgoliaCredsChange() {
+        if (!this.apiKey || !this.appId || !this.algoliaEle)
+            return;
+        this.algoliaEle.apiKey = this.apiKey;
+        this.algoliaEle.appId = this.appId;
+    }
+    handleAlgoliaIndexChange() {
+        if (!this.index || !this.algoliaEle)
+            return;
+        this.algoliaEle.searchIndex = this.index;
+    }
+    handleAlgoliaEleChange() {
+        if (!this.algoliaEle || !this.algoliaResults)
+            return;
+        if (this.algoliaResults.indexName === 'Community') {
+            this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years
+        }
+    }
+    handleGlobalNavReset = () => {
+        this.algoliaResultsEle = null;
+        this.goback();
+    };
+    handleGlobalNavSearch = (e) => {
+        const { detail: { meta, client }, } = e;
+        this.apiKey = client.apiKey;
+        this.appId = client.appId;
+        this.index = {
+            name: meta.indexTitle,
+            index: meta.index,
+            domain: meta.domain,
+            filters: meta.filters,
+            replicas: meta.replicas,
+        };
+        this.algoliaEle.query = meta.query;
+    };
+    handleReorder(e) {
+        if (e
+            .composedPath()
+            .find((ele) => ele.classList && ele.classList.contains('indexchange')) &&
+            !!this.algoliaResultsEle) {
+            this.changeOrder(e);
+        }
+    }
+    attachListeners(e) {
+        searchInsight.init(e.detail.client.appId, e.detail.client.apiKey);
+        if (!e
+            .composedPath()
+            .find((ele) => ele.id && ele.id === 'main-search'))
+            return;
+        this.algoliaResultsEle = this.algoliaEle.querySelector('#main-search-results');
+        this.algoliaResults = e.detail.meta;
+        // add results listeners
+        this.attachResultListeners();
+        this.algoliaEle.querySelectorAll('.filters-reset').forEach((item) => {
+            item.addEventListener('click', () => {
+                this.removeAllFilters();
+            });
+        });
+        this.algoliaEle.querySelectorAll('.close-filters').forEach((item) => {
+            item.addEventListener('click', () => {
+                this.closefilters();
+            });
+        });
+        const filterWrap = this.algoliaEle.querySelector('.filters-wrap');
+        if (filterWrap) {
+            filterWrap.addEventListener('click', (e) => {
+                e.stopPropagation();
+            });
+        }
+        this.filtersDiv = this.algoliaEle.querySelector('#main-search-filters');
+        const oldResults = this.algoliaEle.querySelector('.old-posts');
+        if (oldResults) {
+            oldResults.addEventListener('change', (e) => {
+                this.toggleOldResults(e.target.checked);
+            });
+        }
+    }
+    attachResultListeners(e) {
+        if (e && e.composedPath()?.find((el) => el === this.algoliaEle)) {
+            this.algoliaResultsEle = this.algoliaEle.querySelector('nano-algolia-results');
+        }
+        if (!this.algoliaResultsEle)
+            return;
+        const resultEle = this.algoliaResultsEle;
+        // wire up hit event listener for analytics
+        this.algoliaResultsEle.removeEventListener('click', this.resultClick);
+        this.algoliaResultsEle.addEventListener('click', this.resultClick);
+        // wire up remove filter event listener
+        resultEle.querySelectorAll('.remove-filter').forEach((item) => {
+            item.removeEventListener('click', this.removeFilterClick);
+            item.addEventListener('click', this.removeFilterClick);
+        });
+        // wire up the back button event listener
+        resultEle.querySelectorAll('.back-btn').forEach((item) => {
+            item.removeEventListener('click', this.goback);
+            item.addEventListener('click', this.goback);
+        });
+        // wire up mobile filter list panel event listener
+        resultEle.querySelectorAll('.topbar__show-filters').forEach((item) => {
+            this.openFilterBtn = item;
+            item.removeEventListener('click', this.showFiltersClick);
+            item.addEventListener('click', this.showFiltersClick);
+        });
+        // wire up tags event listeners
+        const tags = Array.from(resultEle.querySelectorAll('.result__tags-tag'));
+        tags.forEach((tag) => {
+            tag.removeEventListener('click', this.tagClick);
+            tag.addEventListener('click', this.tagClick);
+        });
+    }
+    /** Manually close the search panel */
+    async closeSearch() {
+        this.goback();
+    }
+    resultClick = (e) => {
+        const hit = e.target.closest('.result');
+        if (e.target.tagName === 'A' && hit) {
+            searchInsight.sendClick({
+                index: this.algoliaResults.index,
+                eventName: 'Global nav full search - search result clicked',
+                queryID: this.algoliaResults.queryID,
+                objectIDs: [hit.dataset.hitId],
+                positions: [Number(hit.dataset.hitCount) + 1],
+            });
+        }
+    };
+    showFiltersClick = () => {
+        this.filtersDiv.tabIndex = -1;
+        this.filtersDiv.classList.add('show');
+        this.filtersDiv.setAttribute('aria-expanded', 'true');
+        document.body.style.overflow = 'hidden';
+        setTimeout(() => this.filtersDiv.focus(), 20);
+    };
+    removeFilterClick = (e) => {
+        this.removeFilter(e.target.dataset.filter, e.target.dataset.filterVal);
+    };
+    tagClick = (e) => {
+        e.preventDefault();
+        let tagVal = e.target.dataset.value;
+        tagVal = tagVal === 'publication' ? 'publications' : tagVal;
+        tagVal = tagVal.toLowerCase();
+        const filter = this.algoliaEle.querySelector('nano-algolia-filter[filter-name="tags"]');
+        if (filter.value.indexOf(tagVal) === -1) {
+            filter.value = filter.value ? [...filter.value, tagVal] : [tagVal];
+        }
+    };
+    changeOrder(ev) {
+        this.algoliaEle.replicaIndex = ev.detail.value;
+    }
+    goback = () => {
+        const goBackEvent = this.nanoSearchGoBack.emit();
+        if (goBackEvent.defaultPrevented)
+            return;
+        this.removeAllFilters();
+        this.algoliaEle.query = undefined;
+        this.algoliaEle.showResults = false;
+    };
+    removeFilter(facet, filter) {
+        this.algoliaEle.removeFilters(facet, filter);
+    }
+    removeAllFilters() {
+        this.algoliaEle.removeFilters();
+    }
+    closefilters() {
+        if (!this.filtersDiv)
+            return;
+        this.filtersDiv.tabIndex = null;
+        this.filtersDiv.classList.remove('show');
+        this.filtersDiv.setAttribute('aria-expanded', 'false');
+        document.body.style.overflow = '';
+        setTimeout(() => this.openFilterBtn.focus(), 20);
+    }
+    toggleOldResults(show) {
+        if (show)
+            this.algoliaEle.filters = this.algoliaEle.filters.filter((f) => !f.startsWith('created > '));
+        else
+            this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];
+    }
+    connectedCallback() {
+        const globalNavTag = transformTag('nano-global-nav');
+        this.globalNav = this.el.closest(globalNavTag);
+        if (!this.globalNav) {
+            const ownerHost = this.el.getRootNode()?.host;
+            if (ownerHost && ownerHost.tagName === globalNavTag.toUpperCase()) {
+                this.globalNav = ownerHost;
+            }
+        }
+        if (!this.globalNav) {
+            console.error('`<nano-global-search-results>` must be a child of `<nano-global-nav>`');
+            return;
+        }
+        this.globalNav.addEventListener('nanoSearchResult', this.handleGlobalNavSearch);
+        this.globalNav.addEventListener('nanoSearchReset', this.handleGlobalNavReset);
+        this.handleAlgoliaEleChange();
+    }
+    disconnectedCallback() {
+        if (this.ro) {
+            this.ro.disconnect();
+        }
+        this.globalNav.removeEventListener('nanoSearchResult', this.handleGlobalNavSearch);
+        this.globalNav.removeEventListener('nanoSearchReset', this.handleGlobalNavReset);
+    }
+    componentDidLoad() {
+        if (!window['ResizeObserver'])
+            return;
+        this.ro = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (!entry.contentRect.width)
+                    return;
+                this.currentWidth = entry.contentRect.width;
+            }
+        });
+        this.ro.observe(this.el);
+    }
+    render() {
+        return (h(Host, { key: 'adc6446ad3c226627dcae79331259d44849e8266', class: {
+                small: this.currentWidth < 677,
+                'nano-global-search-results': true,
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: '28968dd88fdd41225883b953de31cb113a5dc77e', storeId: this.queryId, storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search" }, h("template", { key: '3a12eec09e7ddc91a40b4043bbc6b14879433e11', slot: "template" }, 
+        /* html */ `<div class="main-search sc-nano-global-search-results">
+              <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>
+                <script type="text/template" slot="start-template">
+                  <div class="sc-nano-global-search-results main-search__topbar topbar">
+                    <button class="sc-nano-global-search-results topbar__bkbtn back-btn icon-button">
+                      <nano-icon class="sc-nano-global-search-results" name="light/chevron-left" size="small"></nano-icon>
+                    </button>
+                    <div>
+                      <em class="sc-nano-global-search-results topbar__query">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results
+                    </div>
+
+                    <div class="sc-nano-global-search-results topbar__filtering">
+                      {{ @if (it.results.length) }}
+                        {{ @if (it.searchIndex && it.searchIndex.replicas) }}
+                          <nano-select class="sc-nano-global-search-results topbar__order indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">
+                          {{ @each(it.searchIndex.replicas) => replica }}
+                            <nano-option value="{{ replica.index }}">{{ replica.name }}</nano-option>
+                          {{ /each }}
+                          </nano-select>
+                        {{ /if }}
+                      {{ /if }}
+
+                      <button class="sc-nano-global-search-results topbar__show-filters filters-title" aria-controls="main-search-filters">
+                        {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}
+                          <span class="sc-nano-global-search-results topbar__filter-count">
+                            {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}
+                          </span>
+                        {{ /if }}
+                        <nano-icon class="sc-nano-global-search-results" name="light/filter"></nano-icon>
+                      </button>
+                    </div>
+                  </div>
+
+                  {{ @if (it.results.length) }}
+                    <div class="sc-nano-global-search-results main-search__applied-filters">
+                      {{ @if (it.appliedFilters) }}
+                        {{ @each(it.appliedFilters) => filterObj }}
+                          {{ @each(filterObj.values) => filterVal }}
+                            <span class="sc-nano-global-search-results main-search__applied-filter">
+                              {{ filterVal | public_name }}
+                              <button class="sc-nano-global-search-results icon-button remove-filter" data-filter="{{ filterObj.name }}" data-filter-val="{{ filterVal }}">
+                                <nano-icon class="sc-nano-global-search-results" name="light/xmark"></nano-icon>
+                              </button>
+                            </span>
+                          {{ /each }}
+                        {{ /each }}
+                      {{ #else }}
+                        <span class="sc-nano-global-search-results main-search__applied-nofilter">&nbsp;</span>
+                      {{ /if }}
+                    </div>
+                  {{ /if }}
+                </script>
+
+                <script type="text/template" slot="result-template">
+                  <!-- START NO CONTENT -->
+                  {{ @if ((!it.results || !it.results.length)) }}
+                    <div class="search-empty">
+                      <nano-icon name="light/magnifying-glass" class="search-empty-icon"></nano-icon>
+                      <h2>No matches found...</h2>
+                      <p>Please try a different search query.</p>
+                    </div>
+                  {{ /if }}
+                  <!-- END NO CONTENT -->
+
+                  {{ @if (it.totalHitsWithFilters > 0) }}
+                    {{ @each(it.results) => result, resultIndex }}
+                      {{ contentType = result.content_type ? result.content_type : result.type }}
+                      <li class="sc-nano-global-search-results">
+                        <div class="sc-nano-global-search-results result" data-hit-id="{{ result.objectID }}" data-hit-count="{{ resultIndex }}">
+                          <h4 class="sc-nano-global-search-results result__title" data-icon-set="{{(iconSet = false)}}">
+                            <a href="{{ result.url | abs_url(it, result) }}">
+                            {{ @if (result._snippetResult) }}
+                              {{ result._snippetResult.title.value | safe }}
+                            {{ #else }}
+                              {{ result.title | safe }}
+                            {{ /if }}
+                            {{ @if (contentType === 'technical_document' || contentType === 'literature' || contentType === 'white_paper' || contentType === 'protocol') }}
+                              <span class="sc-nano-global-search-results result__pdf">PDF</span>
+                            {{ /if }}
+                            </a>
+                          </h4>
+                          {{ @if (result.authors) }}
+                            {{ @if (typeof result.authors === 'string') }}
+                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">Authors: {{ result.authors | trim_to(50) }}</a>
+                            {{ #else }}
+                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">
+                                {{ @each(result.authors) => author, index }}
+                                  <!-- {{ @if(index == 0)}} -->
+                                    Authors: {{ author | trim_to(60) }}
+                                  <!-- {{ /if }} -->
+                                {{ /each }}
+                              </a>
+                            {{ /if }}
+                          {{ /if }}
+                          {{ @if (contentType === 'video' || contentType === 'lc_lightning_talk' ) }}
+                            {{ @if (result.name) }}
+                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">Speaker: {{ result.name | trim_to(50) }}</a>
+                            {{ /if }}
+                            <a class="sc-nano-global-search-results result__video-body" href="{{ result.url | abs_url(it, result) }}">
+                              {{ @if (result.image) }}
+                                <div class="sc-nano-global-search-results result__image" style="background-image: url('{{ result.image | abs_url(it, result) }}')">
+                                  <nano-icon class="sc-nano-global-search-results" name="duotone/play-circle"></nano-icon>
+                                </div>
+                              {{ /if }}
+                              <div class="sc-nano-global-search-results result__body">
+                                <div class="sc-nano-global-search-results result__description">
+                                  {{ @if (result.description) }}
+                                    {{ result._snippetResult.description.value | safe }}
+                                  {{ /if }}
+                                </div>
+                              </div>
+                              <div class="sc-nano-global-search-results result__meta">
+                                {{ @if (result.type || result.content_type) }}
+                                  <div class="sc-nano-global-search-results result__type">
+                                  {{ @if (contentType === 'lc_lightning_talk') }}
+                                    Presentation
+                                  {{ #else }}
+                                    {{ contentType }}
+                                  {{ /if }}
+                                  </div>
+                                {{ /if }}
+                                {{ @if (result.tags) }}
+                                  <div class="sc-nano-global-search-results result__tags">
+                                    {{ @if (typeof result.tags === 'string') }}
+                                      <button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button>
+                                    {{ #else }}
+                                      {{ @each(result.tags) => tag, index }}
+                                        {{ @if(index < 5)}}
+                                          {{ @if (tag !== "No video" && tag !== "Resources" && tag !== "Video") }}
+                                            <button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag }}</button>
+                                          {{ /if }}
+                                        {{ /if }}
+                                      {{ /each }}
+                                    {{ /if }}
+                                  </div>
+                                {{ /if }}
+                                {{ @if (result.source) }}
+                                  <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>
+                                {{ /if }}
+                              </div>
+                            </a>
+                          {{ /if }}
+                          {{ @if (result.body) }}
+                            <a class="sc-nano-global-search-results result__body" href="{{ result.url | abs_url(it, result) }}">
+                            {{ @if (result._snippetResult) }}
+                              {{ result._snippetResult.body.value | safe }}
+                            {{ /if }}
+                            </a>
+                          {{ /if }}
+                          {{ @if (contentType === 'product' }}
+                            <div class="sc-nano-global-search-results result__buttons">
+                              <a class="sc-nano-global-search-results result__buttons-button" href="{{ result.url | abs_url(it, result) }}">View product</a>
+                            </div>
+                          {{ /if }}
+                          {{ @if (contentType === 'event') }}
+                            <a class="sc-nano-global-search-results result__promo" href="{{ result.url | abs_url(it, result) }}">
+                              <div class="sc-nano-global-search-results result__promo-box">
+                                <div class="sc-nano-global-search-results result__promo-bigdate">
+                                  {{ result.start_date | date_long({year: undefined, month: 'short', day: undefined}) }}
+                                  <span>{{ result.start_date | date_long({year: undefined, month: undefined, day: 'numeric'}) }}</span>
+                                </div>
+                                <div>
+                                  <div class="sc-nano-global-search-results result__promo-date">
+                                    <nano-icon class="sc-nano-global-search-results" name="light/calendar-days"></nano-icon>
+                                    {{ @if (result.end_date) }}
+                                      {{ @if (result.end_date !== result.start_date) }}
+                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', month: 'short'}) }} - {{ result.end_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}
+                                      {{ #else }}
+                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}
+                                      {{ /if }}
+                                    {{ #else }}
+                                      {{ @if (result.start_date) }}
+                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}
+                                      {{ /if }}
+                                    {{ /if }}
+                                  </div>
+                                  <div class="sc-nano-global-search-results result__promo-venue">
+                                    <nano-icon class="sc-nano-global-search-results" name="light/map-marker-alt"></nano-icon>
+                                    Venue
+                                  </div>
+                                </div>
+                              </div>
+                            </a>
+                          {{ /if }}
+                          {{ @if (contentType !== 'lc_lightning_talk' && contentType !== 'video') }}
+                            <div class="sc-nano-global-search-results result__meta">
+                              {{ @if (result.type || result.content_type) }}
+                                <div class="sc-nano-global-search-results result__type">
+                                {{ @if (contentType === 'news_item') }}
+                                  News
+                                {{ #elif (contentType === 'static_page' || contentType === 'bespoke') }}
+                                  Page
+                                {{ #elif (contentType === 'case_study') }}
+                                  Case study
+                                {{ #elif (contentType === 'lc_poster') }}
+                                  Poster
+                                {{ #elif (contentType === 'nanopore_live') }}
+                                  Live stream
+                                {{ #elif (contentType === 'data_release') }}
+                                  Data release
+                                {{ #elif (contentType === 'research_area') }}
+                                  Research area
+                                {{ #elif (contentType === 'white_paper') }}
+                                  White paper
+                                {{ #elif (contentType === 'technical_document') }}
+                                  Technical document
+                                {{ #elif (contentType === 'info_sheet') }}
+                                  Info sheet
+                                {{ #elif (contentType === 'lc_home' || contentType === 'lc_venue') }}
+                                  London Calling
+                                {{ #else }}
+                                  {{ contentType }}
+                                {{ /if }}
+                                </div>
+                              {{ /if }}
+                              {{ @if (contentType !== 'event') }}
+                                {{ @if (result.updated) }}
+                                  <div class="sc-nano-global-search-results result__date">{{ result.updated | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>
+                                {{ #else }}
+                                  {{ @if (result.created) }}
+                                    <div class="sc-nano-global-search-results result__date">{{ result.created | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>
+                                  {{ /if }}
+                                {{ /if }}
+                              {{ /if }}
+                              {{ @if (result.tags) }}
+                                <div class="sc-nano-global-search-results result__tags">
+                                  {{ @if (typeof result.tags === 'string') }}
+                                    {{ @if (result.tags !== "Resources" && result.tags !== "Tools" && result.tags !== "Publications" && result.tags !== "Case studies") }}
+                                      <button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button>
+                                    {{ /if }}
+                                  {{ #else }}
+                                    {{ @each(result.tags) => tag, index }}
+                                      {{ @if(index < 5)}}
+                                        {{ @if (tag !== "Resources" && tag !== "Tools" && tag !== "Publications" && tag !== "Case studies") }}
+                                          <button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag }}</button>
+                                        {{ /if }}
+                                      {{ /if }}
+                                    {{ /each }}
+                                  {{ /if }}
+                                </div>
+                              {{ /if }}
+                              {{ @if (result.source) }}
+                                <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>
+                              {{ /if }}
+                            </div>
+                          {{ /if }}
+                        </div>
+                      </li>
+                    {{ /each }}
+                  {{ /if }}
+                </script>
+
+                <div slot="start-output"></div>
+                <ul slot="result-output" class="sc-nano-global-search-results"></ul>
+              </nano-algolia-results>
+
+              {{ @if(Object.keys(it.origFilters).length) }}
+                <div class="sc-nano-global-search-results main-search__filters filters close-filters" id="main-search-filters">
+                  <div class="sc-nano-global-search-results filters-wrap">
+                    {{ @if(it.totalHits) }}
+                      <div class="sc-nano-global-search-results filters-header">
+                        <strong class="sc-nano-global-search-results filters-title">Filters</strong>
+                        <button class="sc-nano-global-search-results filters-reset">Reset</button>
+                        <button class="sc-nano-global-search-results filters__close-filters close-filters icon-button" aria-controls="main-search-filters">
+                          <nano-icon class="sc-nano-global-search-results" name="light/xmark"></nano-icon>
+                        </button>
+                      </div>
+                    {{ /if }}
+
+                    <div>
+                      <input class="sc-nano-global-search-results filter-cb old-posts filters__old-posts" type="checkbox" name="old-posts" id="old-posts" value="nice" />
+                      <label class="sc-nano-global-search-results filter-label" for="old-posts">
+                        <span>Include posts older than 2 years</span>
+                      </label>
+                      {{ @if(it.origFilters['type']) }}
+                        <nano-details class="sc-nano-global-search-results" open={true} icon-rotation="180">
+                          <strong slot="label">Type</strong>
+                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>
+                          <nano-algolia-filter store-id="searchf1" store-method="url-hash-push" filter-name="type">
+                            <script type="text/template" slot="filter-template">
+                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">
+                              {{ @foreach(it.dyn) => filter, filterVal }}
+                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
+                                <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="type-{{ filter }}-{{x}}" />
+                                <label class="sc-nano-global-search-results filter-label" for="type-{{ filter }}-{{x}}">
+                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
+                                </label></li>
+                              {{ /foreach }}
+                              </ul>
+                            </script>
+                            <div slot="output"></div>
+                          </nano-algolia-filter>
+                        </nano-details>
+                      {{ /if }}
+
+                      {{ @if(it.origFilters['channel']) }}
+                        <nano-details open={true} icon-rotation="180">
+                          <strong slot="label">Channels</strong>
+                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>
+                          <nano-algolia-filter store-id="searchf2" store-method="url-hash-push" filter-name="channel">
+                            <script type="text/template" slot="filter-template">
+                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">
+                              {{ @foreach(it.dyn) => filter, filterVal }}
+                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
+                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="channel-{{ filter }}-{{x}}" />
+                                <label class="filter-label sc-nano-global-search-results" for="channel-{{ filter }}-{{x}}">
+                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
+                                </label></li>
+                              {{ /foreach }}
+                              </ul>
+                            </script>
+                            <div slot="output"></div>
+                          </nano-algolia-filter>
+                        </nano-details>
+                      {{ /if }}
+
+                      {{ @if(it.origFilters['authors']) }}
+                        <nano-details open={true} icon-rotation="180">
+                          <strong slot="label">Authors</strong>
+                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>
+                          <nano-algolia-filter store-id="searchf3" store-method="url-hash-push" filter-name="authors">
+                            <script type="text/template" slot="filter-template">
+                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">
+                              {{ @foreach(it.dyn) => filter, filterVal }}
+                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
+                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="authors-{{ filter }}-{{x}}" />
+                                <label class="filter-label sc-nano-global-search-results" for="authors-{{ filter }}-{{x}}">
+                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
+                                </label></li>
+                              {{ /foreach }}
+                              </ul>
+                            </script>
+                            <div slot="output"></div>
+                          </nano-algolia-filter>
+                        </nano-details>
+                      {{ /if }}
+
+                      {{ @if(it.origFilters['categories_without_path']) }}
+                        <nano-details open={true} icon-rotation="180">
+                          <strong slot="label">Category</strong>
+                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>
+                          <nano-algolia-filter store-id="searchf4" store-method="url-hash-push" filter-name="categories_without_path">
+                            <script type="text/template" slot="filter-template">
+                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">
+                              {{ @foreach(it.dyn) => filter, filterVal }}
+                                {{ @if(!filter.match(/publication/)) }}
+                                  <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
+                                  <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="cwp-{{ filter }}-{{x}}" />
+                                  <label class="sc-nano-global-search-results filter-label" for="cwp-{{ filter }}-{{x}}">
+                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
+                                  </label></li>
+                                {{ /if }}
+                              {{ /foreach }}
+                              </ul>
+                            </script>
+                            <div slot="output"></div>
+                          </nano-algolia-filter>
+                        </nano-details>
+                      {{ /if }}
+
+                      {{ @if(it.origFilters['tags']) }}
+                        <nano-details open={true} icon-rotation="180">
+                          <strong slot="label">Tags</strong>
+                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>
+                          <nano-algolia-filter store-id="searchf5" store-method="url-hash-push" filter-name="tags">
+                            <script type="text/template" slot="filter-template">
+                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">
+                              {{ @foreach(it.dyn) => filter, filterVal }}
+                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
+                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter | lowercase }}" id="tags-{{ filter }}-{{x}}" />
+                                <label class="filter-label sc-nano-global-search-results" for="tags-{{ filter }}-{{x}}">
+                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
+                                </label></li>
+                              {{ /foreach }}
+                              </ul>
+                            </script>
+                            <div slot="output"></div>
+                          </nano-algolia-filter>
+                        </nano-details>
+                      {{ /if }}
+                    </div>
+                  </div>
+                </div>
+              {{ /if }}
+            </div>`), h("div", { key: '120fb25d6070d45591e81c9c67bef304136d21fc', slot: "output" }), h("slot", { key: '824a05f852bf5259f1809293a76cde06472a09a1' }))));
+    }
+    static get watchers() { return {
+        "algoliaEle": ["handleAlgoliaCredsChange", "handleAlgoliaIndexChange", "handleAlgoliaEleChange"],
+        "apiKey": ["handleAlgoliaCredsChange"],
+        "appId": ["handleAlgoliaCredsChange"],
+        "index": ["handleAlgoliaIndexChange"],
+        "algoliaResults": ["handleAlgoliaEleChange"]
+    }; }
+};
+GlobalSearchResults.style = globalSearchResultsCss;
+
+const selectCss = ".sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    .sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }.sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    .sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }slot-fb.sc-nano-select {\n  display: contents !important;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) {\n  opacity: 0.5;\n  position: relative;\n}\n[disabled].sc-nano-select-h:not([disabled=false])::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  cursor: not-allowed;\n}\n\n.form-ctrl.sc-nano-select {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n  display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n  display: block;\n  inline-size: 100%;\n  overflow: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1em;\n  transform: translateY(-50%);\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: none;\n  font-size: 0.75em;\n  opacity: 0.7;\n  inset-block-start: var(--padding-top);\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__label.sc-nano-select {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n  align-items: center;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n  flex: 1;\n  overflow-x: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.85em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: var(--nano-font-size-2xs);\n  opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  opacity: 0.5;\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n  block-size: 1em;\n  position: relative;\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: 0;\n  opacity: 0;\n  display: none;\n  transition: all var(--nano-transition-fast) ease;\n  transition-behavior: allow-discrete;\n}\n.has-helper.sc-nano-select .form-ctrl__more.sc-nano-select, .has-error.sc-nano-select .form-ctrl__more.sc-nano-select {\n  display: block;\n  opacity: 1;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--more-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false] .form-ctrl__helper.sc-nano-select, [disabled]).is-invalid.sc-nano-select-h .form-ctrl__helper.sc-nano-select {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-style: italic;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style) var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-invalid-border-hint-width) - var(--input-border-width)) !important;\n}\n.form-ctrl__input.sc-nano-select:focus-visible, .form-ctrl__input.sc-nano-select:focus-within, .has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n  outline: var(--nano-focus-ring-color) solid 3px;\n  outline-offset: -2px;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  border-color: var(--color-invalid);\n  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n  display: flex;\n  flex: 1;\n  max-inline-size: 100%;\n  align-items: center;\n}\n[type=textarea].sc-nano-select-h .form-ctrl__input-wrap.sc-nano-select {\n  align-items: start;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: center;\n  inline-size: auto;\n  padding-inline-end: var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n}\n.form-ctrl__clear-btn.sc-nano-select:empty, .form-ctrl__slot-end.sc-nano-select:empty, .form-ctrl__slot-start.sc-nano-select:empty, .form-ctrl__slot-value-end.sc-nano-select:empty {\n  display: none;\n}\n\n.form-ctrl__slot-end.sc-nano-select {\n  padding-block: calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);\n}\n\n.form-ctrl__slot-start.sc-nano-select {\n  padding-inline-end: 0;\n}\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > :not(slot-fb), .form-ctrl__slot-value-end .sc-nano-select-s > :not(slot-fb) {\n  padding-inline: unset;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > :not(slot-fb), .form-ctrl__slot-value-end .sc-nano-select-s > :not(slot-fb) {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > * {\n  margin-inline: var(--padding-start) 0;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  appearance: none;\n  align-items: center;\n  overflow: hidden;\n  padding-block: var(--padding-top) var(--padding-bottom);\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  padding-inline: 0 var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.form-ctrl__validation-icon.sc-nano-select {\n  padding-block: var(--padding-top) var(--padding-bottom);\n  padding-inline-end: var(--padding-end);\n  display: grid;\n  grid-template-areas: \"overlay\";\n}\n.sc-nano-select-h:not(.is-invalid .form-ctrl__validation-icon.sc-nano-select, .is-valid).sc-nano-select-h .form-ctrl__validation-icon.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__error-icon.sc-nano-select, .form-ctrl__success-icon.sc-nano-select {\n  color: var(--color-valid);\n  opacity: 0;\n  transition: 0.3s ease-out opacity;\n  grid-area: overlay;\n}\n\n.is-valid.sc-nano-select-h .form-ctrl__success-icon.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__error-icon.sc-nano-select {\n  color: var(--color-invalid);\n}\n.is-invalid.sc-nano-select-h .form-ctrl__error-icon.sc-nano-select {\n  opacity: 1;\n}\n\n.sc-nano-select-h {\n  \n  --placeholder-color: var(--nano-color-neutral-1000);\n  --padding-top: var(--nano-spacing-sm);\n  --padding-end: var(--nano-spacing-sm);\n  --padding-bottom: var(--nano-spacing-sm);\n  --padding-start: var(--nano-spacing-sm);\n  --color-invalid: var(--nano-color-danger-1100);\n  --color-valid: var(--nano-color-success-1000);\n  --input-font-size: var(--nano-font-size-sm);\n  --input-text-color: var(--nano-color-base-1000);\n  --input-border-width: 1px;\n  --input-border-color: var(--nano-color-neutral-300);\n  --input-border-radius: 0px;\n  --input-invalid-border-hint-width: 2px;\n  --input-border-style: solid var(--input-border-color);\n  --input-border-style--focus: solid var(--input-border-width) var(--nano-color-primary-700);\n  --input-bg-color: var(--nano-color-base-0);\n  --invalid-msg-color: var(--color-invalid);\n  --help-msg-color: var(--nano-color-base-1000);\n  --more-font-size: var(--nano-font-size-2xs);\n  --clear-btn-color: rgb(var(--nano-color-base-rgb-1000) / 60%);\n  --clear-btn-color--hover: rgb(var(--nano-color-base-rgb-1000) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-color-base-1000);\n  --label-font-size: var(--nano-font-size-xs);\n  \n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  display: block;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n  pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n  display: none;\n}\n\n.select__native-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  \n  \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n  background: transparent;\n  color: var(--input-text-color);\n}\n.select__native-input.sc-nano-select::-moz-selection {\n  background: transparent;\n  color: var(--input-text-color);\n}\n.select__native-input.sc-nano-select::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: initial;\n  font-weight: initial;\n  line-height: inherit;\n  min-block-size: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n  background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n  appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n  box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n  display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) var(--padding-bottom);\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n  padding-block-start: 1.8em;\n}\n.masked.sc-nano-select .select__native-input.sc-nano-select {\n  opacity: 0;\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-block-size: 2.5em;\n}\n\n.select__down-arrow.sc-nano-select {\n  color: var(--nano-color-primary-1200);\n  transition: rotate var(--nano-transition-x-fast) linear;\n}\n.is-open.sc-nano-select .select__down-arrow.sc-nano-select {\n  rotate: 180deg;\n}\n\n.select__multi-wrap.sc-nano-select {\n  padding-block: 0 var(--padding-bottom);\n  padding-inline: 0;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  overflow: hidden;\n  align-items: flex-start;\n}\n.has-float-label.sc-nano-select .select__multi-wrap.sc-nano-select {\n  padding-block-start: 1em;\n}\n\n.select__multi-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-bottom) 0;\n  min-inline-size: 50px;\n  inline-size: 100%;\n  max-block-size: 100%;\n  appearance: none;\n  border: 0;\n  outline: none;\n  display: inline-block;\n  background: transparent;\n  flex: 0;\n  position: relative;\n  box-sizing: border-box;\n  line-height: calc(2.5em - var(--padding-bottom));\n  block-size: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:not(:has(~ nano-tag)) {\n  flex: 1;\n}\n\nnano-tag.sc-nano-select {\n  --color-non-interactive: var(--nano-color-primary-1000);\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: var(--padding-start) 0;\n  line-height: 1.4;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  inline-size: calc(100% - (1em + var(--padding-start) * 2));\n}\n\n.has-focus.sc-nano-select-h select.sc-nano-select, .has-focus.sc-nano-select-h a.sc-nano-select, .has-focus.sc-nano-select-h button.sc-nano-select {\n  pointer-events: auto;\n}";
+
+let selectIds = 0;
+const Select = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.nanoChange = createEvent(this, "nanoChange", 7);
+        this.nanoBlur = createEvent(this, "nanoBlur", 7);
+        this.nanoFocus = createEvent(this, "nanoFocus", 7);
+        this.nanoDidLoad = createEvent(this, "nanoDidLoad", 7);
+        this.nanoDidUnload = createEvent(this, "nanoDidUnload", 7);
+        this.nanoSearchChange = createEvent(this, "nanoSearchChange", 7);
+        this.nanoValidate = createEvent(this, "nanoValidate", 7);
+    }
+    nativeSelect;
+    valueItems = [];
+    dragVal;
+    mo;
+    selectId = `nano-select-${selectIds++}`;
+    rtl = false;
+    onInit = true;
+    customError = '';
+    get inputCtrl() {
+        return this._inputCtrl;
+    }
+    set inputCtrl(input) {
+        if (input === this._inputCtrl)
+            return;
+        this._inputCtrl = input;
+        this.setDataListOpts();
+    }
+    _inputCtrl;
+    // we don't want these rendered eles decorated with @State
+    // because that will cause re-renders. Use get/set to set datalist options
+    _selectWrap;
+    get selectWrap() {
+        return this._selectWrap;
+    }
+    set selectWrap(ele) {
+        if (this._selectWrap === ele)
+            return;
+        this._selectWrap = ele;
+        this.setDataListOpts();
+    }
+    _datalist;
+    get datalist() {
+        return this._datalist;
+    }
+    set datalist(ele) {
+        if (this._datalist === ele)
+            return;
+        this._datalist = ele;
+        this.setDataListOpts();
+    }
+    currInsertIndex = -1;
+    showErrorMsg = false;
+    errorMessage = '';
+    hasFocus = false;
+    hasOpened = false;
+    hasLabelSlot = false;
+    hasHelperSlot = false;
+    hasHelperEndSlot = false;
+    inputSearchVal = '';
+    get el() { return getElement(this); }
+    /**
+     * This will be true when the control is in an invalid state.
+     * Validity is determined by the `required` prop. Or if custom validity message is set.
+     */
+    get invalid() {
+        return this._invalid;
+    }
+    _invalid = null;
+    /**
+     * Current validation message - if any. @readonly
+     */
+    get validityMessage() {
+        if (!this.nativeSelect)
+            return '';
+        return this.nativeSelect.validationMessage;
+    }
+    /**
+     * This Boolean attribute lets you specify that a form control should have select focus when the page loads.
+     */
+    autofocus = false;
+    /**
+     * If `true`, the user cannot interact with the select.
+     */
+    disabled = false;
+    /**
+     * When should the field perform validation
+     * @default 'submitThenDirty'
+     */
+    validateOn = 'submitThenDirty';
+    /**
+     * Whether to show validation errors underneath input
+     */
+    showInlineError = true;
+    _label = '';
+    /**
+     * String to place within a label element. Alternatively you may use a label slot.
+     */
+    get label() {
+        return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
+    }
+    set label(value) {
+        this._label = value;
+    }
+    /**
+     * Visually hide the label - but make it accessible.
+     */
+    hideLabel = false;
+    /**
+     * Enable floating label behaviour. Will disable placeholder if set.
+     */
+    floatLabel = false;
+    /**
+     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored.
+     */
+    multiple = false;
+    /** When `multiple="true"`, control how many values to show within the control at once.
+     * After the maximum, "+n" will be shown to indicate the number of additional items that are selected. */
+    maxValuesVisible = 3;
+    _maxValuesVisible;
+    watchMaxValuesVisible() {
+        if (!this.multiple)
+            return;
+        this._maxValuesVisible =
+            this.maxValuesVisible === false ? NaN : Number(this.maxValuesVisible);
+        // make sure maxValuesVisible is a number
+        if (!Number.isNaN(this._maxValuesVisible)) {
+            if (this.currInsertIndex > this._maxValuesVisible) {
+                // make the input position is no more than the max
+                this.currInsertIndex = this._maxValuesVisible;
+            }
+        }
+        else {
+            // if maxValuesVisible is undefined, it will be `NaN`
+            this.currInsertIndex = this.value.length - 1;
+        }
+    }
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name = this.selectId + '-name';
+    /**
+     * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set.
+     * If you don't want this behaviour just set the first option to have no value.
+     */
+    placeholder;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    readonly = false;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     * By default, setting this will also add an asterisk to the label.
+     * You can disable this by using the `label` slot instead.
+     */
+    required = false;
+    /**
+     * The initial size of the control.
+     */
+    size;
+    /**
+     * Maximum number of options that can be selected when multiple is true
+     */
+    max;
+    /**
+     * Minimum number of options that can be selected when multiple is true
+     */
+    min;
+    /**
+     * The form element to associate the select with (its form owner). Must be the id of a form.
+     */
+    form;
+    /**
+     * in multiple mode, allow users to enter their own values
+     */
+    allowCustomValues = false;
+    /**
+     * The value of the select.
+     */
+    get value() {
+        return this._value || (this.multiple ? [] : '');
+    }
+    set value(val) {
+        if (!!val && !!this._value) {
+            if (JSON.stringify(val) === JSON.stringify(this._value))
+                return;
+        }
+        if (typeof val === 'string') {
+            if (this.multiple)
+                this._value = val.split(',').map((v) => v.trim());
+            else
+                this._value = val;
+        }
+        else if (Array.isArray(val)) {
+            if (this.multiple)
+                this._value = val;
+            else
+                this._value = val[0];
+        }
+    }
+    _value;
+    /**
+     * Update the native select element when the value changes
+     */
+    valueChanged() {
+        this.customValidate();
+        if (this.onInit) {
+            if (this.multiple) {
+                this.currInsertIndex = this.value.length - 1;
+            }
+            return;
+        }
+        requestAnimationFrame(() => {
+            this.shouldValidate();
+            this.nanoChange.emit({ value: this.value });
+        });
+    }
+    /**
+     * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or
+     * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.
+     * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`
+     * Regardless - reading `options` will return the current component options - slotted or otherwise
+     */
+    get options() {
+        if (this._options.length)
+            return this._options;
+        if (!this.datalist || !this.datalist.activeOptions)
+            return [];
+        return this._elementOptions.map((ao) => {
+            const { value, selected, label, filterMeta } = ao;
+            return { value, selected, label, filterMeta };
+        });
+    }
+    set options(opts) {
+        this._options = opts.map((opt) => {
+            if (typeof opt === 'string')
+                return { value: opt, label: opt };
+            else
+                return opt;
+        });
+    }
+    _options = [];
+    _elementOptions = [];
+    /**
+     * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.
+     */
+    clearable = false;
+    /**
+     * Hide the native select element and cover with a value 'mask'.
+     * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple="true".
+     */
+    mask = false;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.
+     */
+    debounce = 0;
+    debounceChanged() {
+        this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);
+    }
+    shouldValidate() {
+        if (this.onInit)
+            return;
+        if (this.invalid)
+            this.showErrorMsg = this._invalid = false;
+        this.customValidate();
+        if (this.validateOn !== 'dirty')
+            return;
+        this.showInlineValidation();
+    }
+    /** nano-dropdown config options you can pass to the nested dropdown component */
+    dropDownConfig = {};
+    setDataListOpts() {
+        if (!this.datalist || !this.selectWrap)
+            return;
+        this.datalist.input = this.inputCtrl;
+        const currDWConfig = this.datalist.dropDownConfig || {};
+        this.datalist.dropDownConfig = {
+            distance: 10,
+            ...currDWConfig,
+            ...this.dropDownConfig,
+            tetherTo: this.selectWrap,
+        };
+    }
+    /**
+     * A function that customizes the tag value to be rendered when `multiple="true"`.
+     * @param option - the incoming option that was selected
+     * @param index - the incoming option index
+     * @returns Should return either a string / templateResult or a string containing trusted HTML or an HTMLElement
+     */
+    valueTagTemplate;
+    // Custom Events
+    /**
+     * Emitted when the value has changed.
+     */
+    nanoChange;
+    /**
+     * Emitted when the select loses focus.
+     */
+    nanoBlur;
+    /**
+     * Emitted when the select has focus.
+     */
+    nanoFocus;
+    /**
+     * Emitted when the select has been created.
+     * @internal
+     */
+    nanoDidLoad;
+    /**
+     * Emitted when the select has been removed.
+     * @internal
+     */
+    nanoDidUnload;
+    /**
+     * Emitted when a keyboard input occurred on a multiple="true" input
+     */
+    nanoSearchChange;
+    /**
+     * Called when validation is performed (which depends on `validateOn`).
+     * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.
+     */
+    nanoValidate;
+    // Public Methods
+    /**
+     * Get the current state of the control.
+     * @param validateFirst - perform validation first before reporting
+     * @returns `{ isValid: boolean, errorMessage: string }`
+     */
+    async reportValidity(validateFirst) {
+        return new Promise((resolve) => {
+            if (validateFirst) {
+                this.customValidate();
+                this.showInlineValidation();
+            }
+            setTimeout(() => {
+                resolve({
+                    isValid: !this._invalid,
+                    errorMessage: this.nativeSelect.validationMessage,
+                });
+            }, 50);
+        });
+    }
+    /**
+     * Sets focus on the specified `nano-select`. Use this method instead of the global
+     * `select.focus()`.
+     */
+    async setFocus() {
+        if (!this.inputCtrl)
+            return;
+        this.inputCtrl.focus();
+        setTimeout(() => this.inputCtrl.click(), 50);
+    }
+    /**
+     * @returns the native `<select>` element used under the hood.
+     */
+    getSelectElement() {
+        return Promise.resolve(this.nativeSelect);
+    }
+    /**
+     * Invalidate the field and show a custom error message.
+     * To clear the error you will need to re-call this method with an empty string.
+     */
+    async showError(message) {
+        if (this.nativeSelect) {
+            this.customError = message;
+            this.nativeSelect.setCustomValidity(message);
+            this.showInlineValidation();
+        }
+    }
+    /* Logic */
+    get valArray() {
+        return typeof this.value === 'string'
+            ? this.value.length
+                ? [this.value]
+                : []
+            : this.value;
+    }
+    isValidValues() {
+        return this.valArray.find((val) => this.options.find((opt) => opt.value === val));
+    }
+    customValidate = () => {
+        if (!this.nativeSelect ||
+            !!this.customError ||
+            !this.nativeSelect['setCustomValidity'])
+            return;
+        this.nativeSelect.setCustomValidity('');
+        // add custom validations 'cos html5 validations are a bit rubbish on selects
+        if (this.required && !this.valArray.length) {
+            this.nativeSelect.setCustomValidity('Please fill in this field.');
+            return true;
+        }
+        if (this.valArray.length &&
+            !this.allowCustomValues &&
+            !this.isValidValues()) {
+            this.nativeSelect.setCustomValidity('Please choose an item from this field.');
+            return true;
+        }
+        if (this.max && this.valArray.length > this.max) {
+            this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);
+            return true;
+        }
+        if (this.min && this.valArray.length < this.min) {
+            this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);
+            return true;
+        }
+        return false;
+    };
+    showInlineValidation = (ev) => {
+        if (this.validateOn === 'submitThenDirty')
+            this.validateOn = 'dirty';
+        this._invalid = false;
+        this.showErrorMsg = false;
+        this.errorMessage = '';
+        if (!this.nativeSelect.validity.valid) {
+            this.errorMessage = this.nativeSelect.validationMessage;
+            this._invalid = true;
+            this.showErrorMsg = true;
+        }
+        this.nanoValidate.emit({
+            isValid: !this.invalid,
+            errorMessage: this.errorMessage,
+            originalEvent: ev,
+        });
+    };
+    handleInvalid = (ev) => {
+        this._invalid = true;
+        if (this.validateOn === 'submit') {
+            this._invalid = this.showErrorMsg = this.customValidate();
+        }
+        if (this.showInlineError)
+            ev.preventDefault();
+        requestAnimationFrame(() => this.showInlineValidation(ev));
+    };
+    setValue = (e) => {
+        e.preventDefault();
+        if (!this.multiple) {
+            this.value = e.detail.value;
+            return;
+        }
+        if (this.value && this.value.length && this.value.includes(e.detail.value))
+            return;
+        if (this.max && this.value.length === this.max)
+            return;
+        if (Number.isNaN(this._maxValuesVisible) ||
+            this.value.length <= this._maxValuesVisible) {
+            this.currInsertIndex++;
+        }
+        this.value = [
+            ...this.value.slice(0, this.currInsertIndex),
+            e.detail.value,
+            ...this.value.slice(this.currInsertIndex),
+        ];
+        this.inputSearchVal = '';
+    };
+    removeValue = (toFind) => {
+        if (!this.multiple || !this.value.length)
+            return;
+        if (!toFind)
+            toFind = this.value[this.value.length - 1];
+        this.value = this.value.filter((val) => val !== toFind);
+        if (Number.isNaN(this._maxValuesVisible) ||
+            this.value.length <= this._maxValuesVisible) {
+            this.currInsertIndex--;
+        }
+        this.setFocus();
+    };
+    slotChangeObserver() {
+        const mo = (this.mo = new MutationObserver(() => this.processSlottedContent()));
+        mo.observe(this.el, { childList: true, subtree: true });
+    }
+    processSlottedContent() {
+        // see if we have label / helper content
+        this.hasLabelSlot = !!this.el.querySelectorAll('[slot="label"]').length;
+        this.hasHelperSlot = !!this.el.querySelector('[slot="helper"]');
+        this.hasHelperEndSlot = !!this.el.querySelector('[slot="helper-end"]');
+    }
+    getOptionWithValue(value) {
+        let index;
+        const options = this.datalist?.activeOptions?.length
+            ? this.datalist.activeOptions
+            : this.options;
+        const option = options.find((opt, i) => {
+            index = i;
+            return !opt.disabled && opt.value?.length && opt.value === value;
+        });
+        return [option, index];
+    }
+    getLabel(toFind) {
+        const option = this.getOptionWithValue(toFind)[0];
+        return option && option.label ? option.label : toFind;
+    }
+    /* Event handling */
+    onReset(e) {
+        const form = this.form
+            ? document.querySelector('#' + this.form)
+            : this.el.closest('form');
+        if (!form || e.target !== this.el.closest('form'))
+            return;
+        this.clearSelectValue();
+    }
+    handleBlur() {
+        if (!this.hasFocus)
+            return;
+        requestAnimationFrame(() => {
+            const target = getActiveElement();
+            if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {
+                this.onBlur();
+            }
+        });
+    }
+    setOptions = () => {
+        if (!this.datalist ||
+            !this.datalist.activeOptions ||
+            !this.datalist.activeOptions.length)
+            return;
+        this._elementOptions = this.datalist.activeOptions.map((ao) => {
+            const { value, selected, label, filterMeta } = ao;
+            return { value, selected, label, filterMeta };
+        });
+        this.customValidate();
+    };
+    handleDocumentKeyDown = (ev) => {
+        if (!this.multiple || !this.hasFocus)
+            return;
+        if (!this.inputSearchVal) {
+            let rm;
+            switch (ev.key) {
+                case 'Backspace':
+                    if (this.inputCtrl.previousElementSibling)
+                        rm = this.inputCtrl.previousElementSibling;
+                    else
+                        break;
+                    this.removeValue(rm.dataset.value || null);
+                    break;
+                case 'Delete':
+                    if (this.inputCtrl.nextElementSibling)
+                        rm = this.inputCtrl.nextElementSibling;
+                    else
+                        break;
+                    this.removeValue(rm.dataset.value || null);
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                    if (!this.value.length)
+                        break;
+                    if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)
+                        this.currInsertIndex--;
+                    if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)
+                        this.currInsertIndex++;
+                    setTimeout(() => {
+                        this.inputCtrl.focus();
+                    }, 20);
+                    ev.preventDefault();
+                    break;
+            }
+        }
+    };
+    onBlur = () => {
+        this.hasFocus = false;
+        requestAnimationFrame(() => {
+            if (this.validateOn === 'dirty' && !this.hasFocus)
+                this.showInlineValidation();
+        });
+        this.nanoBlur.emit();
+        if (!this.allowCustomValues && this.multiple) {
+            this.inputSearchVal = '';
+            const event = new window.Event('change');
+            this.inputCtrl.dispatchEvent(event);
+        }
+    };
+    onFocus = () => {
+        this.hasFocus = true;
+        this.nanoFocus.emit();
+    };
+    clearSelectValue = (ev) => {
+        if (this.clearable && !this.readonly && !this.disabled && ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+        if (this.multiple) {
+            this.value = [];
+            this.currInsertIndex = -1;
+        }
+        else
+            this.value = '';
+        this.inputCtrl.value = '';
+        const event = new window.Event('change');
+        this.inputCtrl.dispatchEvent(event);
+    };
+    onClick = () => {
+        this.setFocus();
+    };
+    /* Multi event handlers */
+    onDragStart = (ev) => {
+        const ele = ev.target;
+        this.dragVal = ele.dataset.value;
+    };
+    onDragEnd = (ev) => {
+        this.dragVal = null;
+        ev.preventDefault();
+    };
+    onDragLeave = (ev) => {
+        const ele = ev.target;
+        const spanVal = ele.dataset?.value || null;
+        if (!spanVal ||
+            this.dragVal === spanVal ||
+            !this.value.includes(this.dragVal)) {
+            ev.preventDefault();
+            return;
+        }
+        const to = this.value.indexOf(spanVal);
+        const from = this.value.indexOf(this.dragVal);
+        const tmpArr = [...this.value];
+        const tmpVal = tmpArr[to];
+        tmpArr[to] = tmpArr[from];
+        tmpArr[from] = tmpVal;
+        this.value = [...tmpArr];
+    };
+    onMultiInput = (ev) => {
+        this.inputSearchVal = ev.target.value.trim();
+        this.nanoSearchChange.emit({ value: ev.target.value.trim() });
+    };
+    /* Stencil Component lifecycle hooks */
+    connectedCallback() {
+        this.debounceChanged();
+        this.watchMaxValuesVisible();
+        this.el.dispatchEvent(new CustomEvent('nanoDidLoad', {
+            detail: this.el,
+        }));
+    }
+    disconnectedCallback() {
+        document.dispatchEvent(new CustomEvent('nanoDidUnload', {
+            detail: this.el,
+        }));
+        if (this.mo)
+            this.mo.disconnect();
+    }
+    componentDidLoad() {
+        this.slotChangeObserver();
+        this.customValidate();
+        this.setDataListOpts();
+        requestAnimationFrame(() => (this.onInit = false));
+    }
+    componentWillLoad() {
+        this.processSlottedContent();
+    }
+    render() {
+        const labelId = this.selectId + '-lbl';
+        const moreId = this.showInlineError || this.hasHelperSlot
+            ? this.selectId + '-moreId'
+            : '';
+        const helperEndId = this.hasHelperEndSlot ? this.selectId + '-helper' : '';
+        this.rtl = this.el.ownerDocument.dir === 'rtl';
+        this.valueItems = [];
+        const compWrapOptions = (({ el, floatLabel, label, errorMessage, showInlineError, hasHelperSlot, hasHelperEndSlot, hasLabelSlot, hideLabel, placeholder, rtl, }) => ({
+            el,
+            floatLabel,
+            label,
+            errorMessage,
+            showInlineError,
+            hasHelperSlot,
+            hasHelperEndSlot,
+            hasLabelSlot,
+            hideLabel,
+            placeholder,
+            rtl,
+        }))(this);
+        const wrapOptions = {
+            ...compWrapOptions,
+            labelId,
+            moreId,
+            helperEndId,
+            hasValue: !!this.value.length || !!this.inputSearchVal.length,
+            controlId: this.selectId,
+            alwaysShowPlaceholder: false,
+        };
+        const controlOptions = (({ readonly, disabled }) => ({
+            readonly,
+            disabled,
+            clearControl: this.clearable,
+        }))(this);
+        return (h(Host, { key: 'dd8d62d6064ca5bbca75c9b5b308ab2c8140c778', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
+                'has-value': !!this.value.length || !!this.inputSearchVal.length,
+                'has-focus': this.hasFocus,
+                'is-invalid': this._invalid === true,
+                'is-valid': this._invalid === false,
+                'nano-select': true,
+            } }, h(FormControlWrap, { key: '811e296732a794fe171b99ab8831fb8a9f014c43', ...wrapOptions, class: {
+                'has-error': !!this.errorMessage &&
+                    this.showInlineError &&
+                    this._invalid === true,
+                'has-helper': this.hasHelperSlot,
+                'is-open': this.hasOpened,
+                masked: this.mask,
+            } }, h(FormControl, { key: '667499839b71ae46a1e8b8ee410e20334518a212', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: '3d4d2f085444d08bad5ea6893779d62eec37e4c1', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (h("div", { key: 'e7354f6e04484f1f56f0a8adc1a83a1fd9217230', class: "select__mask" }, this.getLabel(this.value))),
+            h("input", { key: 'c751e574ade62cf7ec18b61b54f79e7066652236', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
+        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '800b2ba2ba4b397bf23e1e1f872dacf82fbac2c6', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
+                e.preventDefault();
+                this.removeValue(e.detail.value);
+            }, onNanoOptionsUpdated: this.setOptions, onNanoSelect: this.setValue,
+            // @ts-expect-error - this bubbles from the nano-dropdown
+            onNanoShow: () => (this.hasOpened = true), onNanoHide: () => (this.hasOpened = false) }, this.allowCustomValues &&
+            this.multiple &&
+            !!this.inputSearchVal && (h("nano-option", { key: '93149856e07a8b0be5b2ba6d7145c1ed37b7c876', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '9214159801d2b7f2a8bc2251a964d60980766dd6', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '742e550ebb274935ea61f0ae01d34e696058b146' }))), h("select", { key: 'e56355bad1e009cb1a46ef727e8e16894c38d325', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
+            this.valArray.map((val) => {
+                return (h("option", { value: val, selected: true }, val));
+            }), !this.allowCustomValues &&
+            this.options.map((opt) => {
+                return (h("option", { value: opt.value, selected: this.valArray.includes(opt.value), disabled: opt.disabled, label: opt.label }, this.valArray.includes(opt.value)));
+            }))));
+    }
+    multipleValues(labelId, moreId, helperEndId) {
+        const input = (h("input", { class: "select__multi-input", id: this.selectId, ref: (input) => (this.inputCtrl = input), readOnly: this.readonly, disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onKeyDown: this.handleDocumentKeyDown, onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder && !this.value.length ? this.placeholder : '', "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId }));
+        if (!this.value.length)
+            return input;
+        const toReturn = [];
+        this.value.forEach((val, i) => {
+            if (!Number.isNaN(this._maxValuesVisible) && i > this._maxValuesVisible)
+                return;
+            let valueTag;
+            if (i === this._maxValuesVisible) {
+                valueTag = (h("nano-tag", { "data-value": val, key: val }, "+", this.value.length - this._maxValuesVisible));
+            }
+            else {
+                valueTag = (h("nano-tag", { key: val, ref: (span) => this.valueItems.push(span), onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, onDragOver: (e) => e.preventDefault(), onNanoClose: () => this.removeValue(val), draggable: true, tabIndex: -1, "data-value": val, closable: true }, this.valueTagTemplate ? (h("span", { innerHTML: this.valueTagTemplate
+                        ? this.valueTagTemplate(...this.getOptionWithValue(val))
+                        : undefined })) : (h("span", null, this.getLabel(val)))));
+            }
+            if (i === 0 && this.currInsertIndex < 0) {
+                toReturn.push(input, valueTag);
+            }
+            else if (i === this.currInsertIndex) {
+                toReturn.push(valueTag, input);
+            }
+            else {
+                toReturn.push(valueTag);
+            }
+        });
+        return toReturn;
+    }
+    static get watchers() { return {
+        "maxValuesVisible": ["watchMaxValuesVisible"],
+        "value": ["valueChanged"],
+        "debounce": ["debounceChanged"],
+        "required": ["shouldValidate"],
+        "disabled": ["shouldValidate"],
+        "min": ["shouldValidate"],
+        "max": ["shouldValidate"],
+        "readonly": ["shouldValidate"],
+        "dropDownConfig": ["setDataListOpts"]
+    }; }
+};
+Select.style = selectCss;
+
+export { NanoAvatar as nano_avatar, NanoBadge as nano_badge, Drawer as nano_drawer, GlobalSearchResults as nano_global_search_results, Select as nano_select };