@nanoporetech-digital/components 5.9.5 → 5.10.0

package/dist/nano-components/{p-2a7d0c13.entry.js → p-5fc3035d.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,h as o,a as i,g as n,c as e}from"./p-d6a04b3a.js";import{f as s}from"./p-f8f89998.js";import{P as r}from"./p-51bc8b59.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px);--box-shadow:none;border-radius:var(--border-radius);display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:inherit;background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-webkit-appearance:none;appearance:none;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;box-shadow:var(--box-shadow)}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button:focus{outline:none}.icon-button__label{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.icon-button--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";const p=class{constructor(o){t(this,o);this.handleClick=t=>{if(this.type==="button")return;const o=this.findForm();if(o){t.preventDefault();const i=document.createElement("button");i.type=this.type;i.style.display="none";o.appendChild(i);i.click();i.remove()}};this.iconName=undefined;this.iconSrc=undefined;this.type="button";this.name=undefined;this.value=undefined;this.label=undefined;this.showTooltip=false;this.disabled=false;this.href=undefined;this.rel=undefined;this.target=undefined;this.form=undefined}async setFocus(){this.button.focus()}findForm(){const{form:t,host:o}=this;if(!t)return o.closest("form");if(t instanceof HTMLFormElement){return t}if(typeof t==="string"){const o=document.getElementById(t);if(o instanceof HTMLFormElement){return o}}return null}componentDidLoad(){s.observe(this.button)}connectedCallback(){if(this.button)s.observe(this.button)}disconnectedCallback(){s.unobserve(this.button)}content(){const t=this.href===undefined?"button":"a";return o(i,{"aria-disabled":this.disabled?"true":null},o(t,{onClick:this.handleClick,part:"base",ref:t=>this.button=t,class:{"icon-button":true,"icon-button--disabled":this.disabled},name:this.name,value:this.value,href:this.href||undefined,target:this.href&&this.target?this.target:undefined,rel:this.rel||undefined,type:!this.href&&this.type?this.type:undefined},o("span",{class:"icon-button__label"},this.label),o("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true",lazy:false,part:"icon"})))}render(){if(this.showTooltip){return o("nano-tooltip",{content:this.label},this.content())}return this.content()}get host(){return n(this)}};p.style=a;const l=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-inline-size:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));transform:translateY(10px) translateZ(0);transform-origin:bottom;transition:opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);white-space:normal}.tooltip-arrow{content:"";position:absolute;inline-size:0;block-size:0;color:black;transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000)}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom;transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{inset-block-end:100%;inset-inline-start:calc(50% - 5px);-webkit-border-after:5px solid;border-block-end:5px solid;-webkit-border-start:5px solid transparent;border-inline-start:5px solid transparent;-webkit-border-end:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{inset-block-start:100%;inset-inline-start:calc(50% - 5px);-webkit-border-before:5px solid;border-block-start:5px solid;-webkit-border-start:5px solid transparent;border-inline-start:5px solid transparent;-webkit-border-end:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-start:100%;-webkit-border-start:5px solid;border-inline-start:5px solid;-webkit-border-before:5px solid transparent;border-block-start:5px solid transparent;-webkit-border-after:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{inset-block:auto 5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-end:100%;-webkit-border-end:5px solid;border-inline-end:5px solid;-webkit-border-before:5px solid transparent;border-block-start:5px solid transparent;-webkit-border-after:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{inset-block:auto 5px}';const d=class{constructor(o){t(this,o);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7);this.isVisible=false;this.label="";this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{this.target=this.getTarget()};this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.hoist=false;this.trigger="hover focus"}get target(){return this._target}set target(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-label")}t.setAttribute("aria-label",this.label);this._target=t}setLabel(){const t=Array.from(this.host.querySelectorAll('[slot="content"]'));const o=t.map((t=>t.textContent)).join(" ").trim();if(!this.target){this.target=this.getTarget();if(!this.target)return}this.label=o||this.content;this.target.setAttribute("aria-label",this.label)}handleOpenChange(){this.open?this.show():this.hide()}async show(){if(this.isVisible||this.disabled){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;this.popover.show()}async hide(){if(!this.isVisible){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;this.popover.hide()}getTarget(){const t=[...Array.from(this.host.children)].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}componentDidLoad(){this.target=this.getTarget();this.popover=new r(this.target,this.tooltipPositioner);this.syncOptions();this.setLabel();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){if(this.popover)this.popover.destroy()}render(){return o(i,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},o("slot",{onSlotchange:this.handleSlotChange}),o("div",{ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},o("div",{part:"base",ref:t=>this.tooltip=t,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},o("slot",{name:"content",onSlotchange:()=>this.setLabel()},this.content),o("div",{class:"tooltip-arrow","data-popper-arrow":true}))))}get host(){return n(this)}static get watchers(){return{content:["setLabel"],open:["handleOpenChange"]}}};d.style=l;export{p as nano_icon_button,d as nano_tooltip};
-//# sourceMappingURL=p-2a7d0c13.entry.js.map
+import{r as t,h as o,a as i,g as n,c as e}from"./p-d6a04b3a.js";import{f as s}from"./p-f8f89998.js";import{P as r}from"./p-cd1fd454.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px);--box-shadow:none;border-radius:var(--border-radius);display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:inherit;background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-webkit-appearance:none;appearance:none;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;box-shadow:var(--box-shadow)}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button:focus{outline:none}.icon-button__label{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.icon-button--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";const p=class{constructor(o){t(this,o);this.handleClick=t=>{if(this.type==="button")return;const o=this.findForm();if(o){t.preventDefault();const i=document.createElement("button");i.type=this.type;i.style.display="none";o.appendChild(i);i.click();i.remove()}};this.iconName=undefined;this.iconSrc=undefined;this.type="button";this.name=undefined;this.value=undefined;this.label=undefined;this.showTooltip=false;this.disabled=false;this.href=undefined;this.rel=undefined;this.target=undefined;this.form=undefined}async setFocus(){this.button.focus()}findForm(){const{form:t,host:o}=this;if(!t)return o.closest("form");if(t instanceof HTMLFormElement){return t}if(typeof t==="string"){const o=document.getElementById(t);if(o instanceof HTMLFormElement){return o}}return null}componentDidLoad(){s.observe(this.button)}connectedCallback(){if(this.button)s.observe(this.button)}disconnectedCallback(){s.unobserve(this.button)}content(){const t=this.href===undefined?"button":"a";return o(i,{"aria-disabled":this.disabled?"true":null},o(t,{onClick:this.handleClick,part:"base",ref:t=>this.button=t,class:{"icon-button":true,"icon-button--disabled":this.disabled},name:this.name,value:this.value,href:this.href||undefined,target:this.href&&this.target?this.target:undefined,rel:this.rel||undefined,type:!this.href&&this.type?this.type:undefined},o("span",{class:"icon-button__label"},this.label),o("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true",lazy:false,part:"icon"})))}render(){if(this.showTooltip){return o("nano-tooltip",{content:this.label},this.content())}return this.content()}get host(){return n(this)}};p.style=a;const l=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-inline-size:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));transform:translateY(10px) translateZ(0);transform-origin:bottom;transition:opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);white-space:normal}.tooltip-arrow{content:"";position:absolute;inline-size:0;block-size:0;color:black;transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000)}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom;transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{inset-block-end:100%;inset-inline-start:calc(50% - 5px);-webkit-border-after:5px solid;border-block-end:5px solid;-webkit-border-start:5px solid transparent;border-inline-start:5px solid transparent;-webkit-border-end:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{inset-block-start:100%;inset-inline-start:calc(50% - 5px);-webkit-border-before:5px solid;border-block-start:5px solid;-webkit-border-start:5px solid transparent;border-inline-start:5px solid transparent;-webkit-border-end:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-start:100%;-webkit-border-start:5px solid;border-inline-start:5px solid;-webkit-border-before:5px solid transparent;border-block-start:5px solid transparent;-webkit-border-after:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{inset-block:auto 5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-end:100%;-webkit-border-end:5px solid;border-inline-end:5px solid;-webkit-border-before:5px solid transparent;border-block-start:5px solid transparent;-webkit-border-after:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{inset-block:auto 5px}';const d=class{constructor(o){t(this,o);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7);this.isVisible=false;this.label="";this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{this.target=this.getTarget()};this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.hoist=false;this.trigger="hover focus"}get target(){return this._target}set target(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-label")}t.setAttribute("aria-label",this.label);this._target=t}setLabel(){const t=Array.from(this.host.querySelectorAll('[slot="content"]'));const o=t.map((t=>t.textContent)).join(" ").trim();if(!this.target){this.target=this.getTarget();if(!this.target)return}this.label=o||this.content;this.target.setAttribute("aria-label",this.label)}handleOpenChange(){this.open?this.show():this.hide()}async show(){if(this.isVisible||this.disabled){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;this.popover.show()}async hide(){if(!this.isVisible){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;this.popover.hide()}getTarget(){const t=[...Array.from(this.host.children)].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}componentDidLoad(){this.target=this.getTarget();this.popover=new r(this.target,this.tooltipPositioner);this.syncOptions();this.setLabel();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){if(this.popover)this.popover.destroy()}render(){return o(i,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},o("slot",{onSlotchange:this.handleSlotChange}),o("div",{ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},o("div",{part:"base",ref:t=>this.tooltip=t,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},o("slot",{name:"content",onSlotchange:()=>this.setLabel()},this.content),o("div",{class:"tooltip-arrow","data-popper-arrow":true}))))}get host(){return n(this)}static get watchers(){return{content:["setLabel"],open:["handleOpenChange"]}}};d.style=l;export{p as nano_icon_button,d as nano_tooltip};
+//# sourceMappingURL=p-5fc3035d.entry.js.map

package/dist/nano-components/p-688f1a55.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as i,c as t,h as s,g as e}from"./p-d6a04b3a.js";import{g as o}from"./p-74a7fc4f.js";import{P as n}from"./p-cd1fd454.js";import{a as r}from"./p-f88fa15c.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:auto;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--menu-height:var(--max-menu-height, 50vh);display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";let a=0;const d=class{constructor(s){i(this,s);this.nanoShow=t(this,"nanoShow",7);this.nanoAfterShow=t(this,"nanoAfterShow",7);this.nanoHide=t(this,"nanoHide",7);this.nanoAfterHide=t(this,"nanoAfterHide",7);this.dropdownId=`dropdown-${a++}`;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.didLoad=false;this.togglePanel=()=>{if(!this.autoOpen)return;this.open?this.hide():this.show()};this.handleTriggerKeyDown=i=>{if(["ArrowDown","ArrowUp"," "].includes(i.key)){this.show();i.preventDefault();i.stopPropagation();if(this.menu)this.menu.setFocus()}};this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};this.autoOpen=true;this.open=false;this.closeOnSelect=true;this.containingElement=undefined;this.tetherTo=null;this.placement="bottom-start";this.distance=2;this.skidding=0;this.hoist=false;this.dialogTitle=undefined;this.eventType=undefined}get menu(){return this.host.querySelector("nano-menu")}handleOpenChange(){if(this.ignoreOpenWatcher)return;this.open?this.show():this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()}handleTetherToChange(){this.createPopover();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){if(!this.popover)return;this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}secondaryOpen(i){if(!i.detail.secondaryMenu)return;i.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=i.detail.secondaryMenu.scrollHeight+"px"}secondaryClose(i){if(!i.detail.secondaryMenu)return;i.stopPropagation();if(!i.target.parentElement)return;this.panel.style.minHeight=i.target.parentElement.scrollHeight+"px"}handlePanelSelect(i){const t=i.target;if(this.closeOnSelect&&t.tagName.toLowerCase()==="nano-menu")this.hide()}async show(){var i;this.ignoreOpenWatcher=true;this.open=true;const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return}if(typeof((i=this.positioner)===null||i===void 0?void 0:i.showPopover)==="function"){this.hoist=true;this.popover.show();this.positioner.showPopover()}else{this.popover.show()}this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){this.ignoreOpenWatcher=true;this.open=false;const i=this.nanoHide.emit();if(i.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}setTimeout((()=>{var i;if(!this.open&&typeof((i=this.positioner)===null||i===void 0?void 0:i.hidePopover)==="function"){this.positioner.hidePopover()}}),300)}focusEleInDropDwn(i){var t;const s=o();if(i&&((t=i.composedPath())===null||t===void 0?void 0:t.length)){const t=i.composedPath().includes(this.containingElement);return!i.composedPath().includes(this.accessibleTrigger)&&t}return s&&s.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&s!==this.accessibleTrigger}updateAccessibleTrigger(){if(!this.didLoad)return;let i;this.accessibleTrigger=null;if(!this.tetherTo){const t=Array.from(this.host.querySelectorAll('[slot="trigger"]'));i=t.map(r)[0]}else{i=r(this.tetherTo)}if(i){i.setAttribute("aria-haspopup","true");i.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=i}}handleDocumentKeyDown(i){if(i.key==="Escape"){this.hide();return}if(i.key==="Tab"){setTimeout((()=>{if(document.activeElement&&document.activeElement.closest(this.containingElement.tagName.toLowerCase())!==this.containingElement){this.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(i.key)){if(!this.open||this.focusEleInDropDwn(i))return;i.preventDefault();this.menu.setFocus();return}const t=i.composedPath();if(this.menu&&t.length&&!t.find((i=>i!==this.menu))){this.menu.dispatchEvent(new KeyboardEvent(i.type,i));return}}handleDocumentMouseDown(i){if(!this.focusEleInDropDwn(i)){this.hide();return}}createPopover(){if(!this.tetherTo&&!this.trigger||!this.positioner)return;if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new n(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit(),onTransitionEnd:()=>{if(!this.open){this.panel.scrollTop=0}else if(this.menu){this.menu.showActiveElement()}}});if(this.open){this.show()}}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host}componentDidLoad(){this.didLoad=true;this.createPopover();setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){if(this.host.isConnected)this.hide();if(this.popover)this.popover.destroy()}render(){return s("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{part:"trigger",class:"dropdown__trigger",ref:i=>this.trigger=i,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},s("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),s("div",{ref:i=>this.positioner=i,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},s("div",{ref:i=>this.panel=i,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:this.host.getAttribute("role")==="group"?"group":"dialog","aria-modal":this.host.getAttribute("role")==="group"?undefined:"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&s("span",{id:this.labelId,class:"dropdown__accessible-title","aria-live":this.host.getAttribute("role")==="group"?undefined:"polite"},this.dialogTitle),s("slot",null))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};d.style=h;export{d as nano_dropdown};
+//# sourceMappingURL=p-688f1a55.entry.js.map

package/dist/nano-components/p-688f1a55.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownCss","dropDownIds","Dropdown","this","dropdownId","labelId","ignoreOpenWatcher","didLoad","togglePanel","autoOpen","open","hide","show","handleTriggerKeyDown","event","includes","key","preventDefault","stopPropagation","menu","setFocus","handleTriggerSlotChange","updateAccessibleTrigger","host","querySelector","handleOpenChange","accessibleTrigger","setAttribute","toString","handleTetherToChange","createPopover","handlePopoverOptionsChange","popover","setOptions","strategy","hoist","placement","skidding","distance","secondaryOpen","ev","detail","secondaryMenu","panel","classList","add","addEventListener","remove","once","style","minHeight","scrollHeight","secondaryClose","target","parentElement","handlePanelSelect","closeOnSelect","tagName","toLowerCase","async","nanoShow","emit","defaultPrevented","_a","positioner","showPopover","document","handleDocumentMouseDown","handleDocumentKeyDown","nanoHide","removeEventListener","focusEleInDropDwn","focus","setTimeout","hidePopover","e","activeElement","getActiveElement","composedPath","length","ddInPath","containingElement","closest","tetherTo","assignedElements","Array","from","querySelectorAll","map","getNearestTabbableElement","ePath","find","el","dispatchEvent","KeyboardEvent","type","trigger","destroy","Popover","transitionElement","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","onTransitionEnd","scrollTop","showActiveElement","connectedCallback","bind","componentDidLoad","disconnectedCallback","isConnected","render","h","part","id","class","dropdown","ref","onKeyDown","onClick","name","onSlotchange","split","join","role","getAttribute","undefined","dialogTitle"],"sources":["./src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --width: width of the dropdown. Defaults to 'auto'\n   * @prop --border: Defaults to #{$layer-border-style}\n   * @prop --border-radius: Defaults to #{$layer-bg-color};\n   * @prop --background: Defaults to #{$layer-bg-color};\n   * @prop --padding: padding of the drop down. Default to '10px 0';\n   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;\n   * @prop --dropdown-z-index: Defaults to #{$layer-index-dropdown};\n   * @prop --min-width: Defaults to 0;\n   * @prop --box-shadow: #{$layer-shadow-large};\n   * @prop --max-menu-height: max height of a slotted menu. defaults to 50vh\n   */\n\n  --width: auto;\n  --border: #{$layer-border-style};\n  --border-radius: #{$layer-border-radius};\n  --background: #{$layer-bg-color};\n  --padding: 10px 0;\n  --overflow: auto;\n  --dropdown-z-index: #{$layer-index-dropdown};\n  --min-width: 0;\n  --box-shadow: #{$layer-shadow-large};\n  --menu-height: var(--max-menu-height, 50vh);\n\n  display: flex;\n}\n\n.dropdown {\n  position: relative;\n\n  &__trigger {\n    display: block;\n  }\n\n  &__positioner {\n    position: absolute;\n    z-index: var(--dropdown-z-index);\n    min-inline-size: var(--min-width);\n    border: 0;\n    background: none;\n    padding: 0;\n    overflow: visible;\n    color: unset;\n\n    &::backdrop { display: none; }\n\n    &[popover],\n    &:popover-open {\n      inset: unset;\n    }\n\n    @media (max-width: 35.9375em) {\n      z-index: 100;\n    }\n  }\n\n  &__panel {\n    padding: var(--padding);\n    background: var(--background);\n    min-inline-size: var(--min-width);\n    inline-size: var(--width);\n    border: var(--border);\n    border-radius: var(--border-radius);\n    color: currentcolor;\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;\n    min-block-size: 20px;\n    overflow: var(--overflow);\n    box-sizing: content-box !important;\n\n    &.loading {\n      overflow-y: hidden;\n    }\n\n    &.top {\n      transform: translateY(-20px) translateZ(0);\n    }\n\n    &.bottom {\n      transform: translateY(20px) translateZ(0);\n    }\n\n    .dropdown__positioner.popover-visible & {\n      opacity: 1;\n      transform: translateY(0) translateZ(0);\n    }\n\n    ::slotted(nano-menu) {\n      max-block-size: var(--menu-height);\n    }\n  }\n\n  &__accessible-title {\n    @include visually-hide();\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Listen,\n  ComponentInterface,\n  EventEmitter,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport Popover, { PopoverPlacement } from '../../utils/popover';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\nlet dropDownIds = 0;\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n  tag: 'nano-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  private dropdownId = `dropdown-${dropDownIds++}`;\n  private labelId = this.dropdownId + '-title';\n  private ignoreOpenWatcher = false;\n  private panel: HTMLElement;\n  private popover: Popover;\n  private trigger: HTMLElement;\n  private positioner: HTMLElement;\n  private accessibleTrigger: HTMLElement;\n  private didLoad = false;\n  private get menu() {\n    return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n  }\n\n  @Element() host: HTMLNanoDropdownElement;\n\n  /** Determines if the dropdown should open automatically when the trigger is clicked */\n  @Prop() autoOpen = true;\n\n  /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.ignoreOpenWatcher) return;\n\n    this.open ? this.show() : this.hide();\n\n    if (this.accessibleTrigger) {\n      this.accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open.toString()\n      );\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * Determines whether the dropdown should hide when a menu item is selected.\n   */\n  @Prop() closeOnSelect = true;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n   */\n  @Prop({ mutable: true }) containingElement: HTMLElement;\n\n  /**\n   * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n   * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n   */\n  @Prop() tetherTo: HTMLElement = null;\n\n  @Watch('tetherTo')\n  handleTetherToChange() {\n    this.createPopover();\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement: PopoverPlacement = 'bottom-start';\n\n  /**\n   * The distance in pixels from which to offset the panel away from its trigger.\n   */\n  @Prop() distance = 2;\n\n  /**\n   * The distance in pixels from which to offset the panel along its trigger.\n   */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  @Watch('placement')\n  @Watch('distance')\n  @Watch('skidding')\n  @Watch('hoist')\n  handlePopoverOptionsChange() {\n    if (!this.popover) return;\n\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      skidding: this.skidding,\n      distance: this.distance,\n    });\n  }\n\n  /**\n   * Title used to describe the dropdown content for accessibility\n   */\n  @Prop() dialogTitle!: string;\n\n  // Events\n\n  /**\n   * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the dropdown opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the dropdown closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // this is a massive hack to make stencil expose the `EventEmitter` type in the final build\n  // because the `Dropdown` class is used as a type in `nano-datalist`\n  /** @internal */\n  @Prop() eventType: EventEmitter;\n\n  // Listeners\n\n  @Listen('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n\n    this.panel.classList.add('loading');\n    this.panel.addEventListener(\n      'transitionend',\n      () => {\n        this.panel.classList.remove('loading');\n      },\n      { once: true }\n    );\n\n    this.panel.style.minHeight =\n      (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n  }\n\n  @Listen('nanoClose')\n  secondaryClose(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    if (!(ev.target as HTMLElement).parentElement) return;\n    this.panel.style.minHeight =\n      (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n  }\n\n  @Listen('nanoSelect')\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n      this.hide();\n  }\n\n  // Methods\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    this.ignoreOpenWatcher = true;\n    this.open = true;\n\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    // @ts-ignore\n    if (typeof this.positioner?.showPopover === 'function') {\n      this.hoist = true;\n      this.popover.show();\n      // @ts-ignore\n      this.positioner.showPopover();\n    } else {\n      this.popover.show();\n    }\n\n    this.ignoreOpenWatcher = false;\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    this.ignoreOpenWatcher = true;\n    this.open = false;\n\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (this.popover) this.popover.hide();\n    this.ignoreOpenWatcher = false;\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n    if (this.accessibleTrigger && this.focusEleInDropDwn()) {\n      this.accessibleTrigger.focus();\n    }\n\n    setTimeout(() => {\n      // @ts-ignore\n      if (!this.open && typeof this.positioner?.hidePopover === 'function') {\n        // @ts-ignore\n        this.positioner.hidePopover();\n      }\n    }, 300);\n  }\n\n  // Private methods\n\n  /**\n   * Decides if the current active element or element\n   * connected to the current event is connected to the Dropdown\n   * @param e\n   * @returns whether the current focus is within the dropdown\n   */\n  private focusEleInDropDwn(e?: Event) {\n    const activeElement = getActiveElement();\n\n    if (e && e.composedPath()?.length) {\n      const ddInPath = e.composedPath().includes(this.containingElement);\n      return !e.composedPath().includes(this.accessibleTrigger) && ddInPath;\n    }\n\n    return (\n      activeElement &&\n      activeElement.closest(this.containingElement.tagName.toLowerCase()) ===\n        this.containingElement &&\n      activeElement !== this.accessibleTrigger\n    );\n  }\n\n  private togglePanel = () => {\n    if (!this.autoOpen) return;\n    this.open ? this.hide() : this.show();\n  };\n\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  private updateAccessibleTrigger() {\n    if (!this.didLoad) return;\n\n    let accessibleTrigger: HTMLElement;\n    this.accessibleTrigger = null;\n\n    if (!this.tetherTo) {\n      const assignedElements = Array.from(\n        this.host.querySelectorAll('[slot=\"trigger\"]')\n      );\n      accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n    } else {\n      accessibleTrigger = getNearestTabbableElement(this.tetherTo);\n    }\n\n    if (accessibleTrigger) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open ? 'true' : 'false'\n      );\n      this.accessibleTrigger = accessibleTrigger;\n    }\n  }\n\n  // Handlers\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      this.hide();\n      return;\n    }\n\n    // Close when tabbing results in the focus leaving the close element\n    if (event.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          document.activeElement.closest(\n            this.containingElement.tagName.toLowerCase()\n          ) !== this.containingElement\n        ) {\n          this.hide();\n          return;\n        }\n      });\n    }\n\n    // If a menu is present, focus on it when certain keys are pressed\n    if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      // must have menu item, must have pressed down, must be open and must not have focus within dd\n      if (!this.open || this.focusEleInDropDwn(event)) return;\n      event.preventDefault();\n      this.menu.setFocus();\n      return;\n    }\n\n    // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n    const ePath = event.composedPath();\n    if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {\n      this.menu.dispatchEvent(new KeyboardEvent(event.type, event));\n      return;\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    // Close when clicking outside of the close element\n    if (!this.focusEleInDropDwn(event)) {\n      this.hide();\n      return;\n    }\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    // Open the panel when pressing down or up while focused on the trigger\n    if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n      this.show();\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (this.menu) this.menu.setFocus();\n    }\n  };\n\n  private handleTriggerSlotChange = () => {\n    this.updateAccessibleTrigger();\n  };\n\n  private createPopover() {\n    if ((!this.tetherTo && !this.trigger) || !this.positioner) return;\n\n    if (this.popover) {\n      if (this.open) this.hide();\n      this.popover.destroy();\n      this.popover = null;\n    }\n\n    this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n      onTransitionEnd: () => {\n        if (!this.open) {\n          this.panel.scrollTop = 0;\n        } else if (this.menu) {\n          this.menu.showActiveElement();\n        }\n      },\n    });\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  // Stencil hooks\n\n  connectedCallback() {\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n\n    if (!this.containingElement) this.containingElement = this.host;\n  }\n\n  componentDidLoad() {\n    this.didLoad = true;\n    this.createPopover();\n    setTimeout(() => this.updateAccessibleTrigger(), 100);\n  }\n\n  disconnectedCallback() {\n    if (this.host.isConnected) this.hide();\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.dropdownId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onKeyDown={this.handleTriggerKeyDown}\n          onClick={this.togglePanel}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        <div\n          ref={(el) => (this.positioner = el)}\n          class=\"dropdown__positioner\"\n          // @ts-ignore\n          popover=\"manual\"\n          id={this.dropdownId + '-positioner'}\n        >\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n            aria-hidden={!this.open}\n            role={\n              this.host.getAttribute('role') === 'group' ? 'group' : 'dialog'\n            }\n            aria-modal={\n              this.host.getAttribute('role') === 'group' ? undefined : 'true'\n            }\n            aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n          >\n            {this.dialogTitle && (\n              <span\n                id={this.labelId}\n                class=\"dropdown__accessible-title\"\n                aria-live={\n                  this.host.getAttribute('role') === 'group'\n                    ? undefined\n                    : 'polite'\n                }\n              >\n                {this.dialogTitle}\n              </span>\n            )}\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/p-abd11243.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as e,c as t,h as n,a,g as s}from"./p-d6a04b3a.js";const l=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block;flex:1 1 100%}.main-search{display:flex;background:white;font-size:14px;min-height:calc(100vh - 63px);justify-content:space-between}.main-search__wrap{display:contents;height: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){-webkit-appearance:none;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;-webkit-margin-after:1em;margin-block-end:1em}.main-search__topbar::after{content:"";width:calc(100% - 30px);inset-inline-start:30px;position:relative;-webkit-border-after:1px solid #e5eef1;border-block-end:1px solid #e5eef1;-webkit-padding-before:0.9em;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;-webkit-margin-after:0.5rem;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-width:175px;max-width:200px;-webkit-margin-start:auto;margin-inline-start:auto}:host(.small) .main-search .topbar__order{max-width: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{-webkit-margin-start:0.5em;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{width:12px;height: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;-webkit-margin-after:3px;margin-block-end:3px}.main-search__results{font-size:14px;padding:1em 40px;color:rgba(69, 85, 86, 0.85);width:70%;height:100%}@media (max-width: 576px){.main-search__results{padding:1em 20px}}:host(.small) .main-search__results{width: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{-webkit-padding-end:20px;padding-inline-end:20px}}:host(:not(.small)) .main-search__filters{max-width:350px;min-width:220px}.filters{color:#455556;background:white;font-size:14px}:host(.small) .filters{position:fixed;width:0;height:0;z-index:10;inset-block-start:0;inset-inline-end:0;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{height:100vh;width: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{-webkit-margin-start:1rem;margin-inline-start:1rem}:host(.small) .filters-wrap{position:absolute;inset-block-start:0;inset-inline-end:0;background:#f7f6f6;transform:translateX(100%);width:300px;min-width:200px;max-width:80vw;transition:transform 0.3s ease;padding:1em;color:black;overflow:auto;height: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;-webkit-padding-start:calc(20px - 0.8em);padding-inline-start:calc(20px - 0.8em)}.filters nano-details nano-icon[slot=icon-end]{-webkit-padding-start:calc(20px - 0.8em);padding-inline-start:calc(20px - 0.8em);-webkit-padding-end:calc(20px - 0.8em);padding-inline-end:calc(20px - 0.8em)}.filters li:last-child .filter-label{-webkit-margin-after:0;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;height:1em;width:1em;min-width:1em;min-height: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:"";height:0.7em;width: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:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.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;-webkit-border-after:1px solid #90c6e7;border-block-end:1px solid #90c6e7;-webkit-padding-after:0.5rem;padding-block-end:0.5rem;-webkit-margin-after: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;-webkit-padding-after:14px;padding-block-end:14px;-webkit-border-after:1px solid #90c6e7;border-block-end:1px solid #90c6e7}.result *{word-wrap:break-word;word-break:break-word}.result__title{margin:1em 0 0.5em;width: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-width:20px;min-height:20px;opacity:0.8}@media (max-width: 992px){.result__title{width:100%}}.result__body{color:#455556;font-size:13px;width:70%;text-decoration:none}@media (max-width: 992px){.result__body{width:100%}}.result__pdf{display:inline-block;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;color:#b5aea7}.result__meta{display:flex;flex-flow:row wrap;color:#455556;font-size:11px;line-height:13px;width:100%;align-items:center}.result__meta>*{-webkit-margin-before:0.5rem;margin-block-start:0.5rem}.result__meta>*:not(:last-child){-webkit-padding-end:0;padding-inline-end:0}.result__meta>*:not(:last-child)::after{content:"";height:1rem;width:1px;background:#90c6e7;display:inline-block;-webkit-margin-start:0.7rem;margin-inline-start:0.7rem;-webkit-margin-end:0.7rem;margin-inline-end: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{-webkit-padding-start:0;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;-webkit-padding-end:0.75rem;padding-inline-end:0.75rem}.result__authors{font-size:12px;color:#455556;-webkit-margin-after:0.25rem;margin-block-end:0.25rem;text-decoration:none;width:70%}.result__buttons{width:70%;-webkit-margin-after:0.5rem;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{width:70%;-webkit-margin-after:0.5rem;margin-block-end:0.5rem;text-decoration:none;color:#455556}.result__promo-box{width:300px;background-color:#e3eef1;padding:12px 12px 8px 4px;display:flex;flex-flow:row nowrap;-webkit-margin-before:1rem;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.25;letter-spacing:1.5px}@media (max-width: 992px){.result__promo-bigdate{width:100%}}.result__promo-bigdate span{color:#455556;display:block}.result__promo-bigdate~div{-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-border-start:1px solid #c5dbe1;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;-webkit-padding-end:2px;padding-inline-end:2px}.result__image{display:block;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:4px;position:relative;width:100%;height:150px;-webkit-margin-after:0.5rem;margin-block-end:0.5rem}@media (min-width: 576px){.result__image{width:142px;height: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{width:70%;text-decoration:none;display:flex;flex-flow:row wrap}@media (max-width: 992px){.result__video-body{width:100%}}@media (max-width: 576px){.result__video-body{flex-flow:column}}.result__video-body .result__body{-webkit-padding-start:1rem;padding-inline-start:1rem;display:flex;flex-direction:column;-webkit-margin-after:0;margin-block-end:0;flex:1}@media (max-width: 576px){.result__video-body .result__body{-webkit-padding-start:0;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{-webkit-margin-before:0.5rem;margin-block-start:0.5rem}.result__video-body .result__body .result__description{flex:1 0 auto}.search-empty{padding:3rem 0;text-align:center;-webkit-border-before:1px solid #e5eef1;border-block-start:1px solid #e5eef1}.search-empty h2{color:#455556;font-size:1.125rem;-webkit-margin-after:0.5rem;margin-block-end:0.5rem}.search-empty-icon{font-size:7rem;--icon-color:#e4e6e8;-webkit-margin-after:2rem;margin-block-end:2rem}.search__highlight{background:#fbffbf;font-style:normal}';const i="created > "+Math.floor((Date.now()-631152e5)/1e3);const r=class{constructor(n){e(this,n);this.nanoSearchGoBack=t(this,"nanoSearchGoBack",7);this.tagClick=e=>{e.preventDefault();let t=e.target.dataset.value;t=t==="publication"?"publications":t;t=t.toLowerCase();const n=this.algoliaEle.querySelector('nano-algolia-filter[filter-name="tags"]');if(n.value.indexOf(t)===-1){n.value=n.value?[...n.value,t]:[t]}};this.algoliaEle=undefined;this.currentWidth=undefined;this.apiKey=undefined;this.appId=undefined;this.index=undefined}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}handleGlobalNavReset(e){if(e.target.tagName!=="NANO-GLOBAL-NAV")return;this.algoliaResultsEle=null;this.goback()}handleGlobalNavSearch(e){if(e.target.tagName!=="NANO-GLOBAL-NAV")return;const{detail:{meta:t,client:n}}=e;this.apiKey=n.apiKey;this.appId=n.appId;this.index={name:t.indexTitle,index:t.index,domain:t.domain,filters:t.filters};this.algoliaEle.query=t.query}handleReorder(e){if(e.composedPath().find((e=>e.classList&&e.classList.contains("indexchange")))&&!!this.algoliaResultsEle){this.changeOrder(e)}}attachListeners(e){if(!e.composedPath().find((e=>e.id&&e.id==="main-search")))return;this.algoliaResultsEle=this.algoliaEle.querySelector("#main-search-results");this.attachResultListeners();this.algoliaEle.querySelectorAll(".filters-reset").forEach((e=>{e.addEventListener("click",(()=>{this.removeAllFilters()}))}));this.algoliaEle.querySelectorAll(".close-filters").forEach((e=>{e.addEventListener("click",(()=>{this.closefilters()}))}));const t=this.algoliaEle.querySelector(".filters-wrap");if(t){t.addEventListener("click",(e=>{e.stopPropagation()}))}this.filtersDiv=this.algoliaEle.querySelector("#main-search-filters");const n=this.algoliaEle.querySelector(".old-posts");if(n){n.addEventListener("change",(e=>{this.toggleOldResults(e.target.checked)}))}}attachResultListeners(e){if(e&&e.composedPath().find((e=>e===this.algoliaEle))){this.algoliaResultsEle=this.algoliaEle.querySelector("nano-algolia-results")}if(!this.algoliaResultsEle)return;const t=this.algoliaResultsEle;t.querySelectorAll(".remove-filter").forEach((e=>{e.addEventListener("click",(e=>{const t=e.target;this.removeFilter(t.dataset.filter,t.dataset.filterVal)}))}));t.querySelectorAll(".back-btn").forEach((e=>{e.addEventListener("click",(()=>{this.goback()}))}));t.querySelectorAll(".topbar__show-filters").forEach((e=>{this.openFilterBtn=e;e.addEventListener("click",(()=>{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)}))}));const n=Array.from(t.querySelectorAll(".result__tags-tag"));n.forEach((e=>{e.removeEventListener("click",this.tagClick);e.addEventListener("click",this.tagClick)}))}changeOrder(e){this.algoliaEle.replicaIndex=e.detail.value}goback(){const e=this.nanoSearchGoBack.emit();if(e.defaultPrevented)return;this.removeAllFilters();this.algoliaEle.query="";this.algoliaEle.showResults=false}removeFilter(e,t){this.algoliaEle.removeFilters(e,t)}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(e){if(e)this.algoliaEle.filters=this.algoliaEle.filters.filter((e=>!e.startsWith("created > ")));else this.algoliaEle.filters=[...this.algoliaEle.filters,i]}componentDidLoad(){this.algoliaEle.filters=[i];if(!window["ResizeObserver"])return;this.ro=new ResizeObserver((e=>{for(const t of e){if(!t.contentRect.width)return;this.currentWidth=t.contentRect.width}}));this.ro.observe(this.el)}render(){return n(a,{class:{small:this.currentWidth<677},dir:this.el.ownerDocument.dir==="rtl"?"rtl":undefined},n("nano-algolia",{"store-id":"searchq","store-method":"url-hash-push",class:"main-search__wrap sc-nano-global-search-results",ref:e=>this.algoliaEle=e,id:"main-search"},n("template",{slot:"template"},`<div class="main-search sc-nano-global-search-results">\n              <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>\n                <script type="text/template" slot="start-template">\n                  <div class="sc-nano-global-search-results main-search__topbar topbar">\n                    <button class="sc-nano-global-search-results topbar__bkbtn back-btn icon-button">\n                      <nano-icon class="sc-nano-global-search-results" name="light/chevron-left" size="small"></nano-icon>\n                    </button>\n                    <div>\n                      <em class="sc-nano-global-search-results topbar__query">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n                    </div>\n\n                    <div class="sc-nano-global-search-results topbar__filtering">\n                      {{ @if (it.results.length) }}\n\n                      {{ @if (it.indexName === 'All') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="all_prod_en">Sort by: Most relevant</nano-option>\n                          <nano-option value="all_prod_en_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="all_prod_en_date_asc">Sort by: Oldest</nano-option>\n                          <nano-option value="all_prod_en_activity_date_desc">Sort by: Recent activity</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'www') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="cws_english_en">Sort by: Most relevant</nano-option>\n                          <nano-option value="cws_english_en_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="cws_english_en_date_asc">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Resources') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="cws_english_resources_en">Sort by: Most relevant</nano-option>\n                          <nano-option value="cws_english_resources_en_featured_desc">Sort by: Newest</nano-option>\n                          <nano-option value="cws_english_resources_en_featured_asc">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Store') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="store_prod">Sort by: Most relevant</nano-option>\n                          <nano-option value="store_prod_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="store_prod_date_asc">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Community') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--community indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <nano-option value="community_prod">Sort by: Most relevant</nano-option>\n                          <nano-option value="community_prod_date_desc">Sort by: Newest</nano-option>\n                          <nano-option value="community_prod_date_asc">Sort by: Oldest</nano-option>\n                          <nano-option value="community_prod_activity_date_desc">Sort by: Recent activity</nano-option>\n                        </nano-select>\n                        {{ /if }}\n                      {{ /if }}\n\n                      <button class="sc-nano-global-search-results topbar__show-filters filters-title" aria-controls="main-search-filters">\n                        {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n                          <span class="sc-nano-global-search-results topbar__filter-count">\n                            {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n                          </span>\n                        {{ /if }}\n                        <nano-icon class="sc-nano-global-search-results" name="light/filter"></nano-icon>\n                      </button>\n                    </div>\n                  </div>\n\n                  {{ @if (it.results.length) }}\n                    <div class="sc-nano-global-search-results main-search__applied-filters">\n                      {{ @if (it.appliedFilters) }}\n                        {{ @each(it.appliedFilters) => filterObj }}\n                          {{ @each(filterObj.values) => filterVal }}\n                            <span class="sc-nano-global-search-results main-search__applied-filter">\n                              {{ filterVal | public_name }}\n                              <button class="sc-nano-global-search-results icon-button remove-filter" data-filter="{{ filterObj.name }}" data-filter-val="{{ filterVal }}">\n                                <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n                              </button>\n                            </span>\n                          {{ /each }}\n                        {{ /each }}\n                      {{ #else }}\n                        <span class="sc-nano-global-search-results main-search__applied-nofilter">&nbsp;</span>\n                      {{ /if }}\n                    </div>\n                  {{ /if }}\n                <\/script>\n\n                <script type="text/template" slot="result-template">\n                  \x3c!-- START NO CONTENT --\x3e\n                  {{ @if ((!it.results || !it.results.length)) }}\n                    <div class="search-empty">\n                      <nano-icon name="light/search" class="search-empty-icon"></nano-icon>\n                      <h2>No matches found...</h2>\n                      <p>Please try a different search query.</p>\n                    </div>\n                  {{ /if }}\n                  \x3c!-- END NO CONTENT --\x3e\n                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result }}\n                      {{ contentType = result.content_type ? result.content_type : result.type }}\n                      <li class="sc-nano-global-search-results">\n                        <div class="sc-nano-global-search-results result">\n                          <h4 class="sc-nano-global-search-results result__title" data-icon-set="{{(iconSet = false)}}">\n                            <a href="{{ result.url | abs_url(it, result) }}">\n                            {{ result._snippetResult.title.value | safe }}\n                            {{ @if (contentType === 'technical_document' || contentType === 'literature' || contentType === 'white_paper' || contentType === 'protocol') }}\n                              <span class="sc-nano-global-search-results result__pdf">PDF</span>\n                            {{ /if }}\n                            </a>\n                          </h4>\n                          {{ @if (result.authors) }}\n                            {{ @if (typeof result.authors === 'string') }}\n                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">Authors: {{ result.authors | trim_to(50) }}</a>\n                            {{ #else }}\n                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">\n                                {{ @each(result.authors) => author, index }}\n                                  \x3c!-- {{ @if(index == 0)}} --\x3e\n                                    Authors: {{ author | trim_to(60) }}\n                                  \x3c!-- {{ /if }} --\x3e\n                                {{ /each }}\n                              </a>\n                            {{ /if }}\n                          {{ /if }}\n                          {{ @if (contentType === 'video' || contentType === 'lc_lightning_talk' ) }}\n                            {{ @if (result.name) }}\n                              <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">Speaker: {{ result.name | trim_to(50) }}</a>\n                            {{ /if }}\n                            <a class="sc-nano-global-search-results result__video-body" href="{{ result.url | abs_url(it, result) }}">\n                              {{ @if (result.image) }}\n                                <div class="sc-nano-global-search-results result__image" style="background-image: url('{{ result.image | abs_url(it, result) }}')">\n                                  <nano-icon class="sc-nano-global-search-results" name="duotone/play-circle"></nano-icon>\n                                </div>\n                              {{ /if }}\n                              <div class="sc-nano-global-search-results result__body">\n                                <div class="sc-nano-global-search-results result__description">\n                                  {{ @if (result.description) }}\n                                    {{ result._snippetResult.description.value | safe }}\n                                  {{ /if }}\n                                </div>\n                              </div>\n                              <div class="sc-nano-global-search-results result__meta">\n                                {{ @if (result.type || result.content_type) }}\n                                  <div class="sc-nano-global-search-results result__type">\n                                  {{ @if (contentType === 'lc_lightning_talk') }}\n                                    Presentation\n                                  {{ #else }}\n                                    {{ contentType }}\n                                  {{ /if }}\n                                  </div>\n                                {{ /if }}\n                                {{ @if (result.tags) }}\n                                  <div class="sc-nano-global-search-results result__tags">\n                                    {{ @if (typeof result.tags === 'string') }}\n                                      <button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button>\n                                    {{ #else }}\n                                      {{ @each(result.tags) => tag, index }}\n                                        {{ @if(index < 5)}}\n                                          {{ @if (tag !== "No video" && tag !== "Resources" && tag !== "Video") }}\n                                            <button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag }}</button>\n                                          {{ /if }}\n                                        {{ /if }}\n                                      {{ /each }}\n                                    {{ /if }}\n                                  </div>\n                                {{ /if }}\n                                {{ @if (result.source) }}\n                                  <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>\n                                {{ /if }}\n                              </div>\n                            </a>\n                          {{ /if }}\n                          {{ @if (result.body) }}\n                            <a class="sc-nano-global-search-results result__body" href="{{ result.url | abs_url(it, result) }}">{{ result._snippetResult.body.value | safe }}</a>\n                          {{ /if }}\n                          {{ @if (contentType === 'product' }}\n                            <div class="sc-nano-global-search-results result__buttons">\n                              <a class="sc-nano-global-search-results result__buttons-button" href="{{ result.url | abs_url(it, result) }}">View product</a>\n                            </div>\n                          {{ /if }}\n                          {{ @if (contentType === 'event') }}\n                            <a class="sc-nano-global-search-results result__promo" href="{{ result.url | abs_url(it, result) }}">\n                              <div class="sc-nano-global-search-results result__promo-box">\n                                <div class="sc-nano-global-search-results result__promo-bigdate">\n                                  {{ result.start_date | date_long({year: undefined, month: 'short', day: undefined}) }}\n                                  <span>{{ result.start_date | date_long({year: undefined, month: undefined, day: 'numeric'}) }}</span>\n                                </div>\n                                <div>\n                                  <div class="sc-nano-global-search-results result__promo-date">\n                                    <nano-icon class="sc-nano-global-search-results" name="light/calendar-alt"></nano-icon>\n                                    {{ @if (result.end_date) }}\n                                      {{ @if (result.end_date !== result.start_date) }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', month: 'short'}) }} - {{ result.end_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ #else }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ /if }}\n                                    {{ #else }}\n                                      {{ @if (result.start_date) }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ /if }}\n                                    {{ /if }}\n                                  </div>\n                                  <div class="sc-nano-global-search-results result__promo-venue">\n                                    <nano-icon class="sc-nano-global-search-results" name="light/map-marker-alt"></nano-icon>\n                                    Venue\n                                  </div>\n                                </div>\n                              </div>\n                            </a>\n                          {{ /if }}\n                          {{ @if (contentType !== 'lc_lightning_talk' && contentType !== 'video') }}\n                            <div class="sc-nano-global-search-results result__meta">\n                              {{ @if (result.type || result.content_type) }}\n                                <div class="sc-nano-global-search-results result__type">\n                                {{ @if (contentType === 'news_item') }}\n                                  News\n                                {{ #elif (contentType === 'static_page' || contentType === 'bespoke') }}\n                                  Page\n                                {{ #elif (contentType === 'case_study') }}\n                                  Case study\n                                {{ #elif (contentType === 'lc_poster') }}\n                                  Poster\n                                {{ #elif (contentType === 'nanopore_live') }}\n                                  Live stream\n                                {{ #elif (contentType === 'data_release') }}\n                                  Data release\n                                {{ #elif (contentType === 'research_area') }}\n                                  Research area\n                                {{ #elif (contentType === 'white_paper') }}\n                                  White paper\n                                {{ #elif (contentType === 'technical_document') }}\n                                  Technical document\n                                {{ #elif (contentType === 'info_sheet') }}\n                                  Info sheet\n                                {{ #elif (contentType === 'lc_home' || contentType === 'lc_venue') }}\n                                  London Calling\n                                {{ #else }}\n                                  {{ contentType }}\n                                {{ /if }}\n                                </div>\n                              {{ /if }}\n                              {{ @if (contentType !== 'event') }}\n                                {{ @if (result.updated) }}\n                                  <div class="sc-nano-global-search-results result__date">{{ result.updated | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n                                {{ #else }}\n                                  {{ @if (result.created) }}\n                                    <div class="sc-nano-global-search-results result__date">{{ result.created | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n                                  {{ /if }}\n                                {{ /if }}\n                              {{ /if }}\n                              {{ @if (result.tags) }}\n                                <div class="sc-nano-global-search-results result__tags">\n                                  {{ @if (typeof result.tags === 'string') }}\n                                    {{ @if (result.tags !== "Resources" && result.tags !== "Tools" && result.tags !== "Publications" && result.tags !== "Case studies") }}\n                                      <button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button>\n                                    {{ /if }}\n                                  {{ #else }}\n                                    {{ @each(result.tags) => tag, index }}\n                                      {{ @if(index < 5)}}\n                                        {{ @if (tag !== "Resources" && tag !== "Tools" && tag !== "Publications" && tag !== "Case studies") }}\n                                          <button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag }}</button>\n                                        {{ /if }}\n                                      {{ /if }}\n                                    {{ /each }}\n                                  {{ /if }}\n                                </div>\n                              {{ /if }}\n                              {{ @if (result.source) }}\n                                <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>\n                              {{ /if }}\n                            </div>\n                          {{ /if }}\n                        </div>\n                      </li>\n                    {{ /each }}\n                  {{ /if }}\n                <\/script>\n\n                <div slot="start-output"></div>\n                <ul slot="result-output" class="sc-nano-global-search-results"></ul>\n              </nano-algolia-results>\n\n              {{ @if(Object.keys(it.origFilters).length) }}\n                <div class="sc-nano-global-search-results main-search__filters filters close-filters" id="main-search-filters">\n                  <div class="sc-nano-global-search-results filters-wrap">\n                    {{ @if(it.totalHits) }}\n                      <div class="sc-nano-global-search-results filters-header">\n                        <strong class="sc-nano-global-search-results filters-title">Filters</strong>\n                        <button class="sc-nano-global-search-results filters-reset">Reset</button>\n                        <button class="sc-nano-global-search-results filters__close-filters close-filters icon-button" aria-controls="main-search-filters">\n                          <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n                        </button>\n                      </div>\n                    {{ /if }}\n\n                    <div>\n                      <input class="sc-nano-global-search-results filter-cb old-posts filters__old-posts" type="checkbox" name="old-posts" id="old-posts" value="nice" />\n                      <label class="sc-nano-global-search-results filter-label" for="old-posts">\n                        <span>Include posts older than 2 years</span>\n                      </label>\n                      {{ @if(it.origFilters['type']) }}\n                        <nano-details class="sc-nano-global-search-results" open={true} icon-rotation="180">\n                          <strong slot="label">Type</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf1" store-method="url-hash-push" filter-name="type">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="type-{{ filter }}-{{x}}" />\n                                <label class="sc-nano-global-search-results filter-label" for="type-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['channel']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Channels</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf2" store-method="url-hash-push" filter-name="channel">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="channel-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="channel-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['authors']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Authors</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf3" store-method="url-hash-push" filter-name="authors">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="authors-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="authors-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['categories_without_path']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Category</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf4" store-method="url-hash-push" filter-name="categories_without_path">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                {{ @if(!filter.match(/publication/)) }}\n                                  <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                  <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="cwp-{{ filter }}-{{x}}" />\n                                  <label class="sc-nano-global-search-results filter-label" for="cwp-{{ filter }}-{{x}}">\n                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                  </label></li>\n                                {{ /if }}\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['tags']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Tags</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf5" store-method="url-hash-push" filter-name="tags">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter | lowercase }}" id="tags-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="tags-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n                    </div>\n                  </div>\n                </div>\n              {{ /if }}\n            </div>`),n("div",{slot:"output"}),n("slot",null)))}get el(){return s(this)}static get watchers(){return{algoliaEle:["handleAlgoliaCredsChange","handleAlgoliaIndexChange"],apiKey:["handleAlgoliaCredsChange"],appId:["handleAlgoliaCredsChange"],index:["handleAlgoliaIndexChange"]}}};r.style=l;export{r as nano_global_search_results};
+//# sourceMappingURL=p-abd11243.entry.js.map

package/dist/nano-components/p-abd11243.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["globalSearchResultsCss","filterOldPosts","Math","floor","Date","now","GlobalSearchResults","this","tagClick","e","preventDefault","tagVal","target","dataset","value","toLowerCase","filter","algoliaEle","querySelector","indexOf","handleAlgoliaCredsChange","apiKey","appId","handleAlgoliaIndexChange","index","searchIndex","handleGlobalNavReset","tagName","algoliaResultsEle","goback","handleGlobalNavSearch","detail","meta","client","name","indexTitle","domain","filters","query","handleReorder","composedPath","find","ele","classList","contains","changeOrder","attachListeners","id","attachResultListeners","querySelectorAll","forEach","item","addEventListener","removeAllFilters","closefilters","filterWrap","stopPropagation","filtersDiv","oldResults","toggleOldResults","checked","el","resultEle","clickEv","removeFilter","filterVal","openFilterBtn","tabIndex","add","setAttribute","document","body","style","overflow","setTimeout","focus","tags","Array","from","tag","removeEventListener","ev","replicaIndex","goBackEvent","nanoSearchGoBack","emit","defaultPrevented","showResults","facet","removeFilters","remove","show","f","startsWith","componentDidLoad","window","ro","ResizeObserver","entries","entry","contentRect","width","currentWidth","observe","render","h","Host","class","small","dir","ownerDocument","undefined","ref","slot"],"sources":["./src/components/global-search-results/global-search-results.scss?tag=nano-global-search-results&encapsulation=shadow","./src/components/global-search-results/global-search-results.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n  display: block;\n  flex: 1 1 100%;\n}\n\n.main-search {\n  display: flex;\n  background: white;\n  font-size: 14px;\n  min-height: calc(100vh - 63px);\n  justify-content: space-between;\n\n  &__wrap {\n    /* autoprefixer: ignore next */\n    display: contents;\n    height: 100%;\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li {\n    margin: 0;\n    padding: 0;\n  }\n\n  button:not(.result__tags-tag) {\n    appearance: none;\n    border: none;\n    background: none;\n    position: relative;\n    inset-block-start: -2px;\n  }\n\n  .icon-button {\n    color: inherit;\n    align-self: normal;\n    padding: 9px 7px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n  }\n\n  &__topbar {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    margin-block-end: 1em;\n\n    &::after {\n      content: '';\n      width: calc(100% - 30px);\n      inset-inline-start: 30px;\n      position: relative;\n      border-block-end: 1px solid #e5eef1;\n      padding-block-start: 0.9em;\n    }\n  }\n\n  &__applied-filters {\n    border: solid 1px map.get($colors, lightgrey);\n    text-transform: uppercase;\n    border-radius: 3px;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    line-height: 0.9;\n    padding: 5px 5px 0;\n    letter-spacing: 2px;\n    flex-wrap: wrap;\n    margin-block-end: 0.5rem;\n\n    span {\n      display: flex;\n      align-items: center;\n    }\n\n    :host(.small) & {\n      display: none;\n    }\n  }\n\n  &__applied-nofilter {\n    margin-inline: 0 5px;\n    margin-block: 0 3px;\n    padding-inline: 7px;\n    padding-block: 10px;\n    font-size: 12px;\n    color: rgb(69 85 86 / 85%);\n  }\n\n  &__applied-filter {\n    padding-inline: 8px 2px;\n    padding-block: 5px 3px;\n    margin-inline: 0 5px;\n    margin-block: 0 5px;\n    color: map.get($colors, darkgrey);\n    font-size: 11px;\n    border-radius: 2px;\n    border: solid 1px rgb(0 132 169 / 50%);\n    background-color: rgb(0 132 169 / 20%);\n    line-height: 1;\n\n    .icon-button {\n      padding-inline: 10px 4px;\n      padding-block: 2px 1px;\n\n      nano-icon {\n        pointer-events: none;\n      }\n    }\n  }\n\n  .topbar {\n    &__bkbtn {\n      position: relative;\n      inset-inline-start: -7px;\n    }\n\n    &__query {\n      :host(.small) & {\n        display: none;\n      }\n    }\n\n    &__filtering {\n      display: flex;\n      align-items: center;\n      margin-block: 0;\n      margin-inline: 1em 0;\n      flex: 1;\n    }\n\n    &__order {\n      min-width: 175px;\n      max-width: 200px;\n      margin-inline-start: auto;\n\n      :host(.small) & {\n        max-width: 300px;\n      }\n    }\n\n    nano-select {\n      opacity: 1;\n      transition: 0.1s ease opacity;\n\n      &:not(.hydrated) {\n        opacity: 0;\n      }\n    }\n\n    &__show-filters {\n      margin-inline-start: 0.5em;\n      text-transform: uppercase;\n      display: none;\n      flex-direction: column;\n      align-items: center;\n\n      nano-icon {\n        font-size: 20px;\n      }\n\n      :host(.small) & {\n        display: flex;\n      }\n    }\n\n    &__filter-count {\n      width: 12px;\n      height: 12px;\n      box-shadow: inset 0 3px 4px 0 rgb(0 0 0 / 20%);\n      border: solid 1px #005c76;\n      background-color: #005c76;\n      color: white;\n      font-size: 7px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n      margin-block-end: 3px;\n    }\n  }\n\n  &__results {\n    font-size: 14px;\n    padding: 1em 40px;\n    color: rgb(69 85 86 / 85%);\n    width: 70%;\n    height: 100%;\n\n    @include media-breakpoint-down('sm') {\n      padding: 1em 20px;\n    }\n\n    :host(.small) & {\n      width: 100%;\n    }\n  }\n\n  &__filters {\n    outline: none;\n    padding-inline: 0 40px;\n    padding-block: 1.8em 1em;\n\n    @include media-breakpoint-down('sm') {\n      padding-inline-end: 20px;\n    }\n\n    flex: 1 1 30%;\n    box-sizing: border-box;\n\n    :host(:not(.small)) & {\n      max-width: 350px;\n      min-width: 220px;\n    }\n  }\n}\n\n.filters {\n  color: map.get($colors, darkgrey);\n  background: white;\n  font-size: 14px;\n\n  :host(.small) & {\n    position: fixed;\n    width: 0;\n    height: 0;\n    z-index: 10;\n    inset-block-start: 0;\n    inset-inline-end: 0;\n    transition: all 0s ease 0.5s;\n    background: none;\n\n    &.show {\n      height: 100vh;\n      width: 100vw;\n      transition: all 0s ease 0s;\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &::after {\n      content: '';\n      background: rgb(0 0 0 / 50%);\n      position: absolute;\n      inset: 0;\n      z-index: -1;\n      opacity: 0;\n      transition: 0.1s ease opacity;\n    }\n  }\n\n  &__close-filters {\n    display: none !important;\n    font-size: 1.4em;\n\n    :host(.small) & {\n      display: inline-block !important;\n      margin-inline: auto 0;\n      margin-block: 0;\n    }\n  }\n\n  &__old-posts {\n    margin-inline-start: 1rem;\n  }\n\n  &-wrap {\n    :host(.small) & {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n      background: rgb(247 246 246);\n      transform: translateX(100%);\n      width: 300px;\n      min-width: 200px;\n      max-width: 80vw;\n      transition: transform 0.3s ease;\n      padding: 1em;\n      color: black;\n      overflow: auto;\n      height: 100vh;\n    }\n  }\n\n  &.show {\n    .filters-wrap {\n      :host(.small) & {\n        transform: translateX(0%);\n        box-shadow: -3px -3px 7px rgb(0 0 0 / 10%);\n      }\n    }\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li {\n    margin: 0;\n    padding: 0;\n  }\n\n  nano-details {\n    --padding: 0.8em;\n\n    margin: 0.8em 0;\n\n    strong[slot] {\n      display: block;\n      padding-inline-start: calc(20px - 0.8em);\n    }\n\n    nano-icon[slot='icon-end'] {\n      padding-inline-start: calc(20px - 0.8em);\n      padding-inline-end: calc(20px - 0.8em);\n    }\n  }\n\n  li:last-child .filter-label {\n    margin-block-end: 0;\n  }\n\n  .filter-label {\n    display: flex;\n    align-items: center;\n    position: relative;\n    margin: 0.5em 0;\n    line-height: 1.4;\n    z-index: 0;\n\n    &::before {\n      margin-inline: 0 1em;\n      margin-block: 0;\n      content: '';\n      border: 1px solid map.get($colors, blue);\n      background: map.get($colors, white);\n      border-radius: 3px;\n      height: 1em;\n      width: 1em;\n      min-width: 1em;\n      min-height: 1em;\n      display: inline-block;\n    }\n\n    &::after {\n      @include svg-background-image(\n        \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>\"\n      );\n\n      content: '';\n      height: 0.7em;\n      width: 0.7em;\n      position: absolute;\n      inset-inline-start: 2px;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n      z-index: 1;\n      display: block;\n      background-size: 100%;\n      background-position: center center;\n      background-repeat: no-repeat;\n    }\n  }\n\n  .filter-cb {\n    @include visually-hide;\n\n    &:checked + .filter-label {\n      &::before {\n        background: map.get($colors, blue--darker);\n      }\n    }\n\n    &:focus + .filter-label {\n      &::before {\n        box-shadow: 0 0 0 1px rgb(0 0 0 / 70%);\n      }\n    }\n  }\n\n  &-header {\n    display: flex;\n    align-items: center;\n    border-block-end: 1px solid map.get($colors, lightblue);\n    padding-block-end: 0.5rem;\n    margin-block-end: 0.5rem;\n  }\n\n  &-reset {\n    color: map.get($colors, blue);\n    font-size: 12px;\n    text-decoration: underline;\n    margin-inline: auto 0;\n    margin-block: 0;\n\n    :host(.small) & {\n      margin: 0;\n    }\n  }\n\n  &-title {\n    margin: 0;\n    text-transform: uppercase;\n    color: rgb(69 85 86 / 85%);\n    font-weight: bold;\n    font-size: 14px;\n\n    :host(.small) & {\n      display: none;\n    }\n  }\n}\n\n.result {\n  text-decoration: none;\n  display: flex;\n  flex-flow: row wrap;\n  padding-block-end: 14px;\n  border-block-end: 1px solid map.get($colors, lightblue);\n\n  * {\n    word-wrap: break-word;\n    word-break: break-word;\n  }\n\n  &__title {\n    margin: 1em 0 0.5em;\n    width: 70%;\n    display: flex;\n\n    a {\n      color: lighten(map.get($colors, blue), 4%);\n      font-size: 14px;\n      line-height: 1.43;\n      text-decoration: none;\n      font-weight: 600;\n    }\n\n    nano-icon {\n      margin-inline: 0 0.5em;\n      margin-block: 0;\n      min-width: 20px;\n      min-height: 20px;\n      opacity: 0.8;\n    }\n\n    @include media-breakpoint-down('lg') {\n      width: 100%;\n    }\n  }\n\n  &__body {\n    color: map.get($colors, darkgrey);\n    font-size: 13px;\n    width: 70%;\n    text-decoration: none;\n\n    @include media-breakpoint-down('lg') {\n      width: 100%;\n    }\n  }\n\n  &__pdf {\n    display: inline-block;\n    margin-inline-start: 0.5rem;\n    color: map.get($colors, palegrey);\n  }\n\n  &__meta {\n    display: flex;\n    flex-flow: row wrap;\n    color: map.get($colors, darkgrey);\n    font-size: 11px;\n    line-height: 13px;\n    width: 100%;\n    align-items: center;\n\n    > * {\n      margin-block-start: 0.5rem;\n\n      &:not(:last-child) {\n        padding-inline-end: 0;\n\n        &::after {\n          content: '';\n          height: 1rem;\n          width: 1px;\n          background: #90c6e7;\n          display: inline-block;\n          margin-inline-start: 0.7rem;\n          margin-inline-end: 0.7rem;\n\n          @include media-breakpoint-down('sm') {\n            display: none;\n          }\n        }\n      }\n    }\n\n    @include media-breakpoint-down('sm') {\n      flex-flow: column;\n      align-items: flex-start;\n    }\n  }\n\n  &__tags {\n    display: flex;\n    flex-flow: row wrap;\n\n    @include media-breakpoint-down('sm') {\n      padding-inline-start: 0;\n    }\n\n    &-tag {\n      color: map.get($colors, darkgrey);\n      display: inline-block;\n      font-size: 0.4375rem;\n      letter-spacing: 1.4px;\n      background: #fff;\n      border-radius: 2px;\n      text-transform: uppercase;\n      padding: 0 4px 1px 5px;\n      font-weight: 600;\n      margin: 3px 0.25rem 0.25rem 0;\n      border: 1px solid #b5aea7;\n      white-space: nowrap;\n      line-height: 13px;\n    }\n  }\n\n  &__type {\n    font-weight: 600;\n    text-transform: capitalize;\n    white-space: nowrap;\n    display: flex;\n    align-items: center;\n  }\n\n  &__date {\n    display: flex;\n    align-items: center;\n    color: map.get($colors, darkgrey);\n  }\n\n  &__source {\n    color: map.get($colors, darkgrey);\n    padding-inline-end: 0.75rem;\n  }\n\n  &__authors {\n    font-size: 12px;\n    color: map.get($colors, darkgrey);\n    margin-block-end: 0.25rem;\n    text-decoration: none;\n    width: 70%;\n  }\n\n  &__buttons {\n    width: 70%;\n    margin-block-end: 0.5rem;\n\n    &-button {\n      background-color: map.get($colors, blue);\n      color: #fff;\n      padding: 5px 8px 1px;\n      border-radius: 4px;\n      display: inline-block;\n      font-size: 11px;\n      text-decoration: none;\n      border: none;\n    }\n  }\n\n  &__promo {\n    width: 70%;\n    margin-block-end: 0.5rem;\n    text-decoration: none;\n    color: map.get($colors, darkgrey);\n\n    &-box {\n      width: 300px;\n      background-color: #e3eef1;\n      padding: 12px 12px 8px 4px;\n      display: flex;\n      flex-flow: row nowrap;\n      margin-block-start: 1rem;\n    }\n\n    &-bigdate {\n      flex: 0 1 60px;\n      text-align: center;\n      font-weight: 600;\n      color: map.get($colors, blue);\n      text-transform: uppercase;\n      line-height: 1.25;\n      letter-spacing: 1.5px;\n\n      @include media-breakpoint-down('lg') {\n        width: 100%;\n      }\n\n      span {\n        color: map.get($colors, darkgrey);\n        display: block;\n      }\n\n      & ~ div {\n        padding-inline-start: 1rem;\n        border-inline-start: 1px solid #c5dbe1;\n      }\n    }\n\n    &-date {\n      font-size: 12px;\n    }\n\n    &-venue {\n      font-size: 12px;\n    }\n\n    nano-icon {\n      color: map.get($colors, blue);\n      position: relative;\n      inset-block-start: 1px;\n      padding-inline-end: 2px;\n    }\n  }\n\n  &__image {\n    display: block;\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-position: center;\n    border-radius: 4px;\n    position: relative;\n    width: 100%;\n    height: 150px;\n    margin-block-end: 0.5rem;\n\n    @include media-breakpoint-up('sm') {\n      width: 142px;\n      height: 80px;\n    }\n\n    nano-icon {\n      position: absolute;\n      inset-block-start: calc(50% - 0.75rem);\n      inset-inline-start: calc(50% - 0.75rem);\n      font-size: 1.5rem;\n      color: #0084a9;\n\n      --primary-color: #fff;\n      --secondary-color: #0084a9;\n      --primary-opacity: 1;\n\n      @include media-breakpoint-down('sm') {\n        font-size: 3rem;\n        inset-block-start: calc(50% - 1.5rem);\n        inset-inline-start: calc(50% - 1.5rem);\n      }\n    }\n  }\n\n  &__video {\n    &-body {\n      width: 70%;\n      text-decoration: none;\n      display: flex;\n      flex-flow: row wrap;\n\n      @include media-breakpoint-down('lg') {\n        width: 100%;\n      }\n\n      @include media-breakpoint-down('sm') {\n        flex-flow: column;\n      }\n\n      .result__body {\n        padding-inline-start: 1rem;\n        display: flex;\n        flex-direction: column;\n        margin-block-end: 0;\n        flex: 1;\n\n        @include media-breakpoint-down('sm') {\n          padding-inline-start: 0;\n        }\n\n        p {\n          display: inline;\n          margin: 0;\n        }\n\n        u,\n        li,\n        a {\n          text-decoration: none;\n        }\n\n        .result__meta {\n          margin-block-start: 0.5rem;\n        }\n\n        .result__description {\n          flex: 1 0 auto;\n        }\n      }\n    }\n  }\n}\n\n.search-empty {\n  padding: 3rem 0;\n  text-align: center;\n  border-block-start: 1px solid #e5eef1;\n\n  h2 {\n    color: #455556;\n    font-size: 1.125rem;\n    margin-block-end: 0.5rem;\n  }\n\n  &-icon {\n    font-size: 7rem;\n\n    --icon-color: #e4e6e8;\n\n    margin-block-end: 2rem;\n  }\n}\n\n.search__highlight {\n  background: #fbffbf;\n  font-style: normal;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  State,\n  ComponentInterface,\n  Watch,\n  Listen,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport type { AloliaSearchResultDetail, SearchIndex } from '../../interface';\n\nconst filterOldPosts =\n  'created > ' + Math.floor((Date.now() - 63115200000) / 1000);\n\n/**\n * Nanopore Global Search results component\n * to be used in conjunction with [Globla-Nav](/story/nano-compounds-global-nav).\n * A shortcut / helper which combines algolia components.\n * There should only be one <nano-global-search-results> per page\n * and should be a direct child of <nano-global-nav>\n */\n@Component({\n  tag: 'nano-global-search-results',\n  styleUrl: 'global-search-results.scss',\n  shadow: true,\n})\nexport class GlobalSearchResults implements ComponentInterface {\n  private algoliaResultsEle: HTMLNanoAlgoliaResultsElement;\n  private filtersDiv: HTMLElement;\n  private openFilterBtn: HTMLButtonElement;\n  private ro: ResizeObserver;\n\n  @State() algoliaEle: HTMLNanoAlgoliaElement;\n  @State() currentWidth: number;\n  @State() apiKey: string;\n  @State() appId: string;\n  @State() index: SearchIndex;\n\n  @Element() private el: HTMLNanoGlobalSearchResultsElement;\n\n  /** Fired when the user clicks the 'back' button / closes the search panel\n   * Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoSearchGoBack: EventEmitter;\n\n  @Watch('algoliaEle')\n  @Watch('apiKey')\n  @Watch('appId')\n  handleAlgoliaCredsChange() {\n    if (!this.apiKey || !this.appId || !this.algoliaEle) return;\n    this.algoliaEle.apiKey = this.apiKey;\n    this.algoliaEle.appId = this.appId;\n  }\n\n  @Watch('algoliaEle')\n  @Watch('index')\n  handleAlgoliaIndexChange() {\n    if (!this.index || !this.algoliaEle) return;\n    this.algoliaEle.searchIndex = this.index;\n  }\n\n  @Listen('nanoSearchReset', { target: 'body' })\n  handleGlobalNavReset(e: CustomEvent & { target: HTMLElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n    this.algoliaResultsEle = null;\n    this.goback();\n  }\n\n  @Listen('nanoSearchResult', { target: 'body' })\n  handleGlobalNavSearch(e: CustomEvent & { target: HTMLElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n    const {\n      detail: { meta, client },\n    } = e as { detail: AloliaSearchResultDetail };\n\n    this.apiKey = client.apiKey;\n    this.appId = client.appId;\n    this.index = {\n      name: meta.indexTitle,\n      index: meta.index,\n      domain: meta.domain,\n      filters: meta.filters,\n    };\n    this.algoliaEle.query = meta.query;\n  }\n\n  @Listen('nanoChange')\n  handleReorder(e: CustomEvent & { target: HTMLNanoSelectElement }) {\n    if (\n      e\n        .composedPath()\n        .find(\n          (ele: HTMLElement) =>\n            ele.classList && ele.classList.contains('indexchange')\n        ) &&\n      !!this.algoliaResultsEle\n    ) {\n      this.changeOrder(e);\n    }\n  }\n\n  @Listen('nanoResultsShown')\n  attachListeners(e: CustomEvent & { target: HTMLElement }) {\n    if (\n      !e\n        .composedPath()\n        .find((ele: HTMLElement) => ele.id && ele.id === 'main-search')\n    )\n      return;\n\n    this.algoliaResultsEle = this.algoliaEle.querySelector(\n      '#main-search-results'\n    );\n\n    // add results listeners\n    this.attachResultListeners();\n\n    this.algoliaEle.querySelectorAll('.filters-reset').forEach((item) => {\n      item.addEventListener('click', () => {\n        this.removeAllFilters();\n      });\n    });\n\n    this.algoliaEle.querySelectorAll('.close-filters').forEach((item) => {\n      item.addEventListener('click', () => {\n        this.closefilters();\n      });\n    });\n\n    const filterWrap = this.algoliaEle.querySelector('.filters-wrap');\n    if (filterWrap) {\n      filterWrap.addEventListener('click', (e) => {\n        e.stopPropagation();\n      });\n    }\n\n    this.filtersDiv = this.algoliaEle.querySelector('#main-search-filters');\n\n    const oldResults = this.algoliaEle.querySelector('.old-posts');\n    if (oldResults) {\n      oldResults.addEventListener(\n        'change',\n        (e: Event & { target: HTMLInputElement }) => {\n          this.toggleOldResults(e.target.checked);\n        }\n      );\n    }\n  }\n\n  @Listen('nanoNewResults', { target: 'body' })\n  attachResultListeners(e?: CustomEvent & { target: HTMLElement }) {\n    if (e && e.composedPath().find((el) => el === this.algoliaEle)) {\n      this.algoliaResultsEle = this.algoliaEle.querySelector(\n        'nano-algolia-results'\n      );\n    }\n    if (!this.algoliaResultsEle) return;\n    const resultEle = this.algoliaResultsEle;\n\n    resultEle.querySelectorAll('.remove-filter').forEach((item) => {\n      item.addEventListener('click', (clickEv: MouseEvent) => {\n        const filter = clickEv.target as HTMLElement;\n        this.removeFilter(filter.dataset.filter, filter.dataset.filterVal);\n      });\n    });\n\n    resultEle.querySelectorAll('.back-btn').forEach((item) => {\n      item.addEventListener('click', () => {\n        this.goback();\n      });\n    });\n\n    resultEle.querySelectorAll('.topbar__show-filters').forEach((item) => {\n      this.openFilterBtn = item as HTMLButtonElement;\n      item.addEventListener('click', () => {\n        this.filtersDiv.tabIndex = -1;\n        this.filtersDiv.classList.add('show');\n        this.filtersDiv.setAttribute('aria-expanded', 'true');\n        document.body.style.overflow = 'hidden';\n        setTimeout(() => this.filtersDiv.focus(), 20);\n      });\n    });\n\n    const tags = Array.from(resultEle.querySelectorAll('.result__tags-tag'));\n    tags.forEach((tag) => {\n      tag.removeEventListener('click', this.tagClick);\n      tag.addEventListener('click', this.tagClick);\n    });\n  }\n\n  private tagClick = (e: MouseEvent & { target: HTMLElement }) => {\n    e.preventDefault();\n    let tagVal = e.target.dataset.value;\n    tagVal = tagVal === 'publication' ? 'publications' : tagVal;\n    tagVal = tagVal.toLowerCase();\n\n    const filter: HTMLNanoAlgoliaFilterElement = this.algoliaEle.querySelector(\n      'nano-algolia-filter[filter-name=\"tags\"]'\n    );\n    if (filter.value.indexOf(tagVal) === -1) {\n      filter.value = filter.value ? [...filter.value, tagVal] : [tagVal];\n    }\n  };\n\n  private changeOrder(ev) {\n    this.algoliaEle.replicaIndex = ev.detail.value;\n  }\n\n  private goback() {\n    const goBackEvent = this.nanoSearchGoBack.emit();\n    if (goBackEvent.defaultPrevented) return;\n\n    this.removeAllFilters();\n    this.algoliaEle.query = '';\n    this.algoliaEle.showResults = false;\n  }\n\n  private removeFilter(facet, filter) {\n    this.algoliaEle.removeFilters(facet, filter);\n  }\n\n  private removeAllFilters() {\n    this.algoliaEle.removeFilters();\n  }\n\n  private closefilters() {\n    if (!this.filtersDiv) return;\n    this.filtersDiv.tabIndex = null;\n    this.filtersDiv.classList.remove('show');\n    this.filtersDiv.setAttribute('aria-expanded', 'false');\n    document.body.style.overflow = '';\n    setTimeout(() => this.openFilterBtn.focus(), 20);\n  }\n\n  private toggleOldResults(show: boolean) {\n    if (show)\n      this.algoliaEle.filters = this.algoliaEle.filters.filter(\n        (f) => !f.startsWith('created > ')\n      );\n    else this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];\n  }\n\n  componentDidLoad() {\n    this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years\n\n    if (!window['ResizeObserver']) return;\n\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (!entry.contentRect.width) return;\n        this.currentWidth = entry.contentRect.width;\n      }\n    });\n    this.ro.observe(this.el);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ small: this.currentWidth < 677 }}\n        dir={\n          (this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : undefined\n        }\n      >\n        <nano-algolia\n          store-id=\"searchq\"\n          store-method=\"url-hash-push\"\n          class=\"main-search__wrap sc-nano-global-search-results\"\n          ref={(ele) => (this.algoliaEle = ele)}\n          id=\"main-search\"\n        >\n          <template slot=\"template\">\n            {\n              /* html */ `<div class=\"main-search sc-nano-global-search-results\">\n              <nano-algolia-results id=\"main-search-results\" class=\"main-search__results sc-nano-global-search-results\" infinite-scroll>\n                <script type=\"text/template\" slot=\"start-template\">\n                  <div class=\"sc-nano-global-search-results main-search__topbar topbar\">\n                    <button class=\"sc-nano-global-search-results topbar__bkbtn back-btn icon-button\">\n                      <nano-icon class=\"sc-nano-global-search-results\" name=\"light/chevron-left\" size=\"small\"></nano-icon>\n                    </button>\n                    <div>\n                      <em class=\"sc-nano-global-search-results topbar__query\">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n                    </div>\n\n                    <div class=\"sc-nano-global-search-results topbar__filtering\">\n                      {{ @if (it.results.length) }}\n\n                      {{ @if (it.indexName === 'All') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"all_prod_en\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"all_prod_en_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"all_prod_en_date_asc\">Sort by: Oldest</nano-option>\n                          <nano-option value=\"all_prod_en_activity_date_desc\">Sort by: Recent activity</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'www') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"cws_english_en\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"cws_english_en_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"cws_english_en_date_asc\">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Resources') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"cws_english_resources_en\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"cws_english_resources_en_featured_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"cws_english_resources_en_featured_asc\">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Store') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"store_prod\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"store_prod_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"store_prod_date_asc\">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Community') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--community indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"community_prod\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"community_prod_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"community_prod_date_asc\">Sort by: Oldest</nano-option>\n                          <nano-option value=\"community_prod_activity_date_desc\">Sort by: Recent activity</nano-option>\n                        </nano-select>\n                        {{ /if }}\n                      {{ /if }}\n\n                      <button class=\"sc-nano-global-search-results topbar__show-filters filters-title\" aria-controls=\"main-search-filters\">\n                        {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n                          <span class=\"sc-nano-global-search-results topbar__filter-count\">\n                            {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n                          </span>\n                        {{ /if }}\n                        <nano-icon class=\"sc-nano-global-search-results\" name=\"light/filter\"></nano-icon>\n                      </button>\n                    </div>\n                  </div>\n\n                  {{ @if (it.results.length) }}\n                    <div class=\"sc-nano-global-search-results main-search__applied-filters\">\n                      {{ @if (it.appliedFilters) }}\n                        {{ @each(it.appliedFilters) => filterObj }}\n                          {{ @each(filterObj.values) => filterVal }}\n                            <span class=\"sc-nano-global-search-results main-search__applied-filter\">\n                              {{ filterVal | public_name }}\n                              <button class=\"sc-nano-global-search-results icon-button remove-filter\" data-filter=\"{{ filterObj.name }}\" data-filter-val=\"{{ filterVal }}\">\n                                <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n                              </button>\n                            </span>\n                          {{ /each }}\n                        {{ /each }}\n                      {{ #else }}\n                        <span class=\"sc-nano-global-search-results main-search__applied-nofilter\">&nbsp;</span>\n                      {{ /if }}\n                    </div>\n                  {{ /if }}\n                </script>\n\n                <script type=\"text/template\" slot=\"result-template\">\n                  <!-- START NO CONTENT -->\n                  {{ @if ((!it.results || !it.results.length)) }}\n                    <div class=\"search-empty\">\n                      <nano-icon name=\"light/search\" class=\"search-empty-icon\"></nano-icon>\n                      <h2>No matches found...</h2>\n                      <p>Please try a different search query.</p>\n                    </div>\n                  {{ /if }}\n                  <!-- END NO CONTENT -->\n                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result }}\n                      {{ contentType = result.content_type ? result.content_type : result.type }}\n                      <li class=\"sc-nano-global-search-results\">\n                        <div class=\"sc-nano-global-search-results result\">\n                          <h4 class=\"sc-nano-global-search-results result__title\" data-icon-set=\"{{(iconSet = false)}}\">\n                            <a href=\"{{ result.url | abs_url(it, result) }}\">\n                            {{ result._snippetResult.title.value | safe }}\n                            {{ @if (contentType === 'technical_document' || contentType === 'literature' || contentType === 'white_paper' || contentType === 'protocol') }}\n                              <span class=\"sc-nano-global-search-results result__pdf\">PDF</span>\n                            {{ /if }}\n                            </a>\n                          </h4>\n                          {{ @if (result.authors) }}\n                            {{ @if (typeof result.authors === 'string') }}\n                              <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">Authors: {{ result.authors | trim_to(50) }}</a>\n                            {{ #else }}\n                              <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">\n                                {{ @each(result.authors) => author, index }}\n                                  <!-- {{ @if(index == 0)}} -->\n                                    Authors: {{ author | trim_to(60) }}\n                                  <!-- {{ /if }} -->\n                                {{ /each }}\n                              </a>\n                            {{ /if }}\n                          {{ /if }}\n                          {{ @if (contentType === 'video' || contentType === 'lc_lightning_talk' ) }}\n                            {{ @if (result.name) }}\n                              <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">Speaker: {{ result.name | trim_to(50) }}</a>\n                            {{ /if }}\n                            <a class=\"sc-nano-global-search-results result__video-body\" href=\"{{ result.url | abs_url(it, result) }}\">\n                              {{ @if (result.image) }}\n                                <div class=\"sc-nano-global-search-results result__image\" style=\"background-image: url('{{ result.image | abs_url(it, result) }}')\">\n                                  <nano-icon class=\"sc-nano-global-search-results\" name=\"duotone/play-circle\"></nano-icon>\n                                </div>\n                              {{ /if }}\n                              <div class=\"sc-nano-global-search-results result__body\">\n                                <div class=\"sc-nano-global-search-results result__description\">\n                                  {{ @if (result.description) }}\n                                    {{ result._snippetResult.description.value | safe }}\n                                  {{ /if }}\n                                </div>\n                              </div>\n                              <div class=\"sc-nano-global-search-results result__meta\">\n                                {{ @if (result.type || result.content_type) }}\n                                  <div class=\"sc-nano-global-search-results result__type\">\n                                  {{ @if (contentType === 'lc_lightning_talk') }}\n                                    Presentation\n                                  {{ #else }}\n                                    {{ contentType }}\n                                  {{ /if }}\n                                  </div>\n                                {{ /if }}\n                                {{ @if (result.tags) }}\n                                  <div class=\"sc-nano-global-search-results result__tags\">\n                                    {{ @if (typeof result.tags === 'string') }}\n                                      <button data-value=\"{{ result.tags | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ result.tags }}</button>\n                                    {{ #else }}\n                                      {{ @each(result.tags) => tag, index }}\n                                        {{ @if(index < 5)}}\n                                          {{ @if (tag !== \"No video\" && tag !== \"Resources\" && tag !== \"Video\") }}\n                                            <button data-value=\"{{ tag | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ tag }}</button>\n                                          {{ /if }}\n                                        {{ /if }}\n                                      {{ /each }}\n                                    {{ /if }}\n                                  </div>\n                                {{ /if }}\n                                {{ @if (result.source) }}\n                                  <div class=\"sc-nano-global-search-results result__source\">Source: {{ result.source }}</div>\n                                {{ /if }}\n                              </div>\n                            </a>\n                          {{ /if }}\n                          {{ @if (result.body) }}\n                            <a class=\"sc-nano-global-search-results result__body\" href=\"{{ result.url | abs_url(it, result) }}\">{{ result._snippetResult.body.value | safe }}</a>\n                          {{ /if }}\n                          {{ @if (contentType === 'product' }}\n                            <div class=\"sc-nano-global-search-results result__buttons\">\n                              <a class=\"sc-nano-global-search-results result__buttons-button\" href=\"{{ result.url | abs_url(it, result) }}\">View product</a>\n                            </div>\n                          {{ /if }}\n                          {{ @if (contentType === 'event') }}\n                            <a class=\"sc-nano-global-search-results result__promo\" href=\"{{ result.url | abs_url(it, result) }}\">\n                              <div class=\"sc-nano-global-search-results result__promo-box\">\n                                <div class=\"sc-nano-global-search-results result__promo-bigdate\">\n                                  {{ result.start_date | date_long({year: undefined, month: 'short', day: undefined}) }}\n                                  <span>{{ result.start_date | date_long({year: undefined, month: undefined, day: 'numeric'}) }}</span>\n                                </div>\n                                <div>\n                                  <div class=\"sc-nano-global-search-results result__promo-date\">\n                                    <nano-icon class=\"sc-nano-global-search-results\" name=\"light/calendar-alt\"></nano-icon>\n                                    {{ @if (result.end_date) }}\n                                      {{ @if (result.end_date !== result.start_date) }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', month: 'short'}) }} - {{ result.end_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ #else }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ /if }}\n                                    {{ #else }}\n                                      {{ @if (result.start_date) }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ /if }}\n                                    {{ /if }}\n                                  </div>\n                                  <div class=\"sc-nano-global-search-results result__promo-venue\">\n                                    <nano-icon class=\"sc-nano-global-search-results\" name=\"light/map-marker-alt\"></nano-icon>\n                                    Venue\n                                  </div>\n                                </div>\n                              </div>\n                            </a>\n                          {{ /if }}\n                          {{ @if (contentType !== 'lc_lightning_talk' && contentType !== 'video') }}\n                            <div class=\"sc-nano-global-search-results result__meta\">\n                              {{ @if (result.type || result.content_type) }}\n                                <div class=\"sc-nano-global-search-results result__type\">\n                                {{ @if (contentType === 'news_item') }}\n                                  News\n                                {{ #elif (contentType === 'static_page' || contentType === 'bespoke') }}\n                                  Page\n                                {{ #elif (contentType === 'case_study') }}\n                                  Case study\n                                {{ #elif (contentType === 'lc_poster') }}\n                                  Poster\n                                {{ #elif (contentType === 'nanopore_live') }}\n                                  Live stream\n                                {{ #elif (contentType === 'data_release') }}\n                                  Data release\n                                {{ #elif (contentType === 'research_area') }}\n                                  Research area\n                                {{ #elif (contentType === 'white_paper') }}\n                                  White paper\n                                {{ #elif (contentType === 'technical_document') }}\n                                  Technical document\n                                {{ #elif (contentType === 'info_sheet') }}\n                                  Info sheet\n                                {{ #elif (contentType === 'lc_home' || contentType === 'lc_venue') }}\n                                  London Calling\n                                {{ #else }}\n                                  {{ contentType }}\n                                {{ /if }}\n                                </div>\n                              {{ /if }}\n                              {{ @if (contentType !== 'event') }}\n                                {{ @if (result.updated) }}\n                                  <div class=\"sc-nano-global-search-results result__date\">{{ result.updated | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n                                {{ #else }}\n                                  {{ @if (result.created) }}\n                                    <div class=\"sc-nano-global-search-results result__date\">{{ result.created | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n                                  {{ /if }}\n                                {{ /if }}\n                              {{ /if }}\n                              {{ @if (result.tags) }}\n                                <div class=\"sc-nano-global-search-results result__tags\">\n                                  {{ @if (typeof result.tags === 'string') }}\n                                    {{ @if (result.tags !== \"Resources\" && result.tags !== \"Tools\" && result.tags !== \"Publications\" && result.tags !== \"Case studies\") }}\n                                      <button data-value=\"{{ result.tags | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ result.tags }}</button>\n                                    {{ /if }}\n                                  {{ #else }}\n                                    {{ @each(result.tags) => tag, index }}\n                                      {{ @if(index < 5)}}\n                                        {{ @if (tag !== \"Resources\" && tag !== \"Tools\" && tag !== \"Publications\" && tag !== \"Case studies\") }}\n                                          <button data-value=\"{{ tag | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ tag }}</button>\n                                        {{ /if }}\n                                      {{ /if }}\n                                    {{ /each }}\n                                  {{ /if }}\n                                </div>\n                              {{ /if }}\n                              {{ @if (result.source) }}\n                                <div class=\"sc-nano-global-search-results result__source\">Source: {{ result.source }}</div>\n                              {{ /if }}\n                            </div>\n                          {{ /if }}\n                        </div>\n                      </li>\n                    {{ /each }}\n                  {{ /if }}\n                </script>\n\n                <div slot=\"start-output\"></div>\n                <ul slot=\"result-output\" class=\"sc-nano-global-search-results\"></ul>\n              </nano-algolia-results>\n\n              {{ @if(Object.keys(it.origFilters).length) }}\n                <div class=\"sc-nano-global-search-results main-search__filters filters close-filters\" id=\"main-search-filters\">\n                  <div class=\"sc-nano-global-search-results filters-wrap\">\n                    {{ @if(it.totalHits) }}\n                      <div class=\"sc-nano-global-search-results filters-header\">\n                        <strong class=\"sc-nano-global-search-results filters-title\">Filters</strong>\n                        <button class=\"sc-nano-global-search-results filters-reset\">Reset</button>\n                        <button class=\"sc-nano-global-search-results filters__close-filters close-filters icon-button\" aria-controls=\"main-search-filters\">\n                          <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n                        </button>\n                      </div>\n                    {{ /if }}\n\n                    <div>\n                      <input class=\"sc-nano-global-search-results filter-cb old-posts filters__old-posts\" type=\"checkbox\" name=\"old-posts\" id=\"old-posts\" value=\"nice\" />\n                      <label class=\"sc-nano-global-search-results filter-label\" for=\"old-posts\">\n                        <span>Include posts older than 2 years</span>\n                      </label>\n                      {{ @if(it.origFilters['type']) }}\n                        <nano-details class=\"sc-nano-global-search-results\" open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Type</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf1\" store-method=\"url-hash-push\" filter-name=\"type\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"type-{{ filter }}-{{x}}\" />\n                                <label class=\"sc-nano-global-search-results filter-label\" for=\"type-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['channel']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Channels</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf2\" store-method=\"url-hash-push\" filter-name=\"channel\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"channel-{{ filter }}-{{x}}\" />\n                                <label class=\"filter-label sc-nano-global-search-results\" for=\"channel-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['authors']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Authors</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf3\" store-method=\"url-hash-push\" filter-name=\"authors\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"authors-{{ filter }}-{{x}}\" />\n                                <label class=\"filter-label sc-nano-global-search-results\" for=\"authors-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['categories_without_path']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Category</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf4\" store-method=\"url-hash-push\" filter-name=\"categories_without_path\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                {{ @if(!filter.match(/publication/)) }}\n                                  <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                  <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"cwp-{{ filter }}-{{x}}\" />\n                                  <label class=\"sc-nano-global-search-results filter-label\" for=\"cwp-{{ filter }}-{{x}}\">\n                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                  </label></li>\n                                {{ /if }}\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['tags']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Tags</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf5\" store-method=\"url-hash-push\" filter-name=\"tags\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter | lowercase }}\" id=\"tags-{{ filter }}-{{x}}\" />\n                                <label class=\"filter-label sc-nano-global-search-results\" for=\"tags-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n                    </div>\n                  </div>\n                </div>\n              {{ /if }}\n            </div>`\n            }\n          </template>\n          <div slot=\"output\"></div>\n          <slot />\n        </nano-algolia>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/p-c3e8e3f9.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+const n=(n,e)=>{const s=Object.assign({className:"",show:true,showDisplay:"block"},e);return new Promise((e=>{const t=i=>{if((i.target===n||i.composedPath().some((n=>n===i.target)))&&(!s.transitionProp||s.transitionProp.includes(i.propertyName))){e("shown");n.removeEventListener("transitionend",t)}};const i=t=>{if((t.target===n||t.composedPath().some((n=>n===t.target)))&&(!s.transitionProp||s.transitionProp.includes(t.propertyName))){n.style.display="none";n.dataset.displayTransition="false";e("hidden");n.removeEventListener("transitionend",i)}};if(s.show){n.addEventListener("transitionend",t);n.style.display=s.showDisplay;n.dataset.displayTransition="true";requestAnimationFrame((()=>n.classList.add(s.className)))}else{n.addEventListener("transitionend",i);n.classList.remove(s.className)}}))};export{n as d};
+//# sourceMappingURL=p-c3e8e3f9.js.map

package/dist/nano-components/p-c3e8e3f9.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["displayTransition","el","options","opts","Object","assign","className","show","showDisplay","Promise","resolve","showCb","e","target","composedPath","some","transitionProp","includes","propertyName","removeEventListener","hideCb","style","display","dataset","addEventListener","requestAnimationFrame","classList","add","remove"],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n  el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    const callback = () => {\n      el.removeEventListener('transitionend', callback);\n      resolve;\n    };\n    el.addEventListener('transitionend', callback);\n    // ??\n  });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param options\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  options?: {\n    className?: string;\n    show?: boolean;\n    showDisplay?: string;\n    transitionProp?: string[];\n  }\n): Promise<'shown' | 'hidden'> => {\n  const opts = {\n    className: '',\n    show: true,\n    showDisplay: 'block',\n    ...options,\n  };\n\n  return new Promise((resolve) => {\n    const showCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))\n      ) {\n        resolve('shown');\n        el.removeEventListener('transitionend', showCb);\n      }\n    };\n\n    const hideCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))\n      ) {\n        el.style.display = 'none';\n        el.dataset.displayTransition = 'false';\n        resolve('hidden');\n        el.removeEventListener('transitionend', hideCb);\n      }\n    };\n\n    if (opts.show) {\n      el.addEventListener('transitionend', showCb);\n      el.style.display = opts.showDisplay;\n      el.dataset.displayTransition = 'true';\n      requestAnimationFrame(() => el.classList.add(opts.className));\n    } else {\n      el.addEventListener('transitionend', hideCb);\n      el.classList.remove(opts.className);\n    }\n  });\n};\n"],"mappings":";;;MA0BaA,EAAoB,CAC/BC,EACAC,KAOA,MAAMC,EAAIC,OAAAC,OAAA,CACRC,UAAW,GACXC,KAAM,KACNC,YAAa,SACVN,GAGL,OAAO,IAAIO,SAASC,IAClB,MAAMC,EAAUC,IACd,IACGA,EAAEC,SAAWZ,GAAMW,EAAEE,eAAeC,MAAMd,GAAOA,IAAOW,EAAEC,aACzDV,EAAKa,gBAAkBb,EAAKa,eAAeC,SAASL,EAAEM,eACxD,CACAR,EAAQ,SACRT,EAAGkB,oBAAoB,gBAAiBR,E,GAI5C,MAAMS,EAAUR,IACd,IACGA,EAAEC,SAAWZ,GAAMW,EAAEE,eAAeC,MAAMd,GAAOA,IAAOW,EAAEC,aACzDV,EAAKa,gBAAkBb,EAAKa,eAAeC,SAASL,EAAEM,eACxD,CACAjB,EAAGoB,MAAMC,QAAU,OACnBrB,EAAGsB,QAAQvB,kBAAoB,QAC/BU,EAAQ,UACRT,EAAGkB,oBAAoB,gBAAiBC,E,GAI5C,GAAIjB,EAAKI,KAAM,CACbN,EAAGuB,iBAAiB,gBAAiBb,GACrCV,EAAGoB,MAAMC,QAAUnB,EAAKK,YACxBP,EAAGsB,QAAQvB,kBAAoB,OAC/ByB,uBAAsB,IAAMxB,EAAGyB,UAAUC,IAAIxB,EAAKG,Y,KAC7C,CACLL,EAAGuB,iBAAiB,gBAAiBJ,GACrCnB,EAAGyB,UAAUE,OAAOzB,EAAKG,U,IAE3B,S"}

package/dist/nano-components/p-cd1fd454.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+var r="top";var t="bottom";var e="right";var n="left";var a="auto";var i=[r,t,e,n];var o="start";var f="end";var v="clippingParents";var u="viewport";var s="popper";var c="reference";var l=i.reduce((function(r,t){return r.concat([t+"-"+o,t+"-"+f])}),[]);var d=[].concat(i,[a]).reduce((function(r,t){return r.concat([t,t+"-"+o,t+"-"+f])}),[]);var p="beforeRead";var h="read";var b="afterRead";var m="beforeMain";var y="main";var x="afterMain";var w="beforeWrite";var O="write";var g="afterWrite";var j=[p,h,b,m,y,x,w,O,g];function A(r){return r?(r.nodeName||"").toLowerCase():null}function k(r){if(r==null){return window}if(r.toString()!=="[object Window]"){var t=r.ownerDocument;return t?t.defaultView||window:window}return r}function M(r){var t=k(r).Element;return r instanceof t||r instanceof Element}function q(r){var t=k(r).HTMLElement;return r instanceof t||r instanceof HTMLElement}function E(r){if(typeof ShadowRoot==="undefined"){return false}var t=k(r).ShadowRoot;return r instanceof t||r instanceof ShadowRoot}function P(r){var t=r.state;Object.keys(t.elements).forEach((function(r){var e=t.styles[r]||{};var n=t.attributes[r]||{};var a=t.elements[r];if(!q(a)||!A(a)){return}Object.assign(a.style,e);Object.keys(n).forEach((function(r){var t=n[r];if(t===false){a.removeAttribute(r)}else{a.setAttribute(r,t===true?"":t)}}))}))}function S(r){var t=r.state;var e={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};Object.assign(t.elements.popper.style,e.popper);t.styles=e;if(t.elements.arrow){Object.assign(t.elements.arrow.style,e.arrow)}return function(){Object.keys(t.elements).forEach((function(r){var n=t.elements[r];var a=t.attributes[r]||{};var i=Object.keys(t.styles.hasOwnProperty(r)?t.styles[r]:e[r]);var o=i.reduce((function(r,t){r[t]="";return r}),{});if(!q(n)||!A(n)){return}Object.assign(n.style,o);Object.keys(a).forEach((function(r){n.removeAttribute(r)}))}))}}const W={name:"applyStyles",enabled:true,phase:"write",fn:P,effect:S,requires:["computeStyles"]};function B(r){return r.split("-")[0]}var T=Math.max;var R=Math.min;var H=Math.round;function L(){var r=navigator.userAgentData;if(r!=null&&r.brands&&Array.isArray(r.brands)){return r.brands.map((function(r){return r.brand+"/"+r.version})).join(" ")}return navigator.userAgent}function F(){return!/^((?!chrome|android).)*safari/i.test(L())}function I(r,t,e){if(t===void 0){t=false}if(e===void 0){e=false}var n=r.getBoundingClientRect();var a=1;var i=1;if(t&&q(r)){a=r.offsetWidth>0?H(n.width)/r.offsetWidth||1:1;i=r.offsetHeight>0?H(n.height)/r.offsetHeight||1:1}var o=M(r)?k(r):window,f=o.visualViewport;var v=!F()&&e;var u=(n.left+(v&&f?f.offsetLeft:0))/a;var s=(n.top+(v&&f?f.offsetTop:0))/i;var c=n.width/a;var l=n.height/i;return{width:c,height:l,top:s,right:u+c,bottom:s+l,left:u,x:u,y:s}}function C(r){var t=I(r);var e=r.offsetWidth;var n=r.offsetHeight;if(Math.abs(t.width-e)<=1){e=t.width}if(Math.abs(t.height-n)<=1){n=t.height}return{x:r.offsetLeft,y:r.offsetTop,width:e,height:n}}function z(r,t){var e=t.getRootNode&&t.getRootNode();if(r.contains(t)){return true}else if(e&&E(e)){var n=t;do{if(n&&r.isSameNode(n)){return true}n=n.parentNode||n.host}while(n)}return false}function D(r){return k(r).getComputedStyle(r)}function U(r){return["table","td","th"].indexOf(A(r))>=0}function V(r){return((M(r)?r.ownerDocument:r.document)||window.document).documentElement}function $(r){if(A(r)==="html"){return r}return r.assignedSlot||r.parentNode||(E(r)?r.host:null)||V(r)}function _(r){if(!q(r)||D(r).position==="fixed"){return null}return r.offsetParent}function G(r){var t=/firefox/i.test(L());var e=/Trident/i.test(L());if(e&&q(r)){var n=D(r);if(n.position==="fixed"){return null}}var a=$(r);if(E(a)){a=a.host}while(q(a)&&["html","body"].indexOf(A(a))<0){var i=D(a);if(i.transform!=="none"||i.perspective!=="none"||i.contain==="paint"||["transform","perspective"].indexOf(i.willChange)!==-1||t&&i.willChange==="filter"||t&&i.filter&&i.filter!=="none"){return a}else{a=a.parentNode}}return null}function J(r){var t=k(r);var e=_(r);while(e&&U(e)&&D(e).position==="static"){e=_(e)}if(e&&(A(e)==="html"||A(e)==="body"&&D(e).position==="static")){return t}return e||G(r)||t}function K(r){return["top","bottom"].indexOf(r)>=0?"x":"y"}function N(r,t,e){return T(r,R(t,e))}function Q(r,t,e){var n=N(r,t,e);return n>e?e:n}function X(){return{top:0,right:0,bottom:0,left:0}}function Y(r){return Object.assign({},X(),r)}function Z(r,t){return t.reduce((function(t,e){t[e]=r;return t}),{})}var rr=function r(t,e){t=typeof t==="function"?t(Object.assign({},e.rects,{placement:e.placement})):t;return Y(typeof t!=="number"?t:Z(t,i))};function tr(a){var i;var o=a.state,f=a.name,v=a.options;var u=o.elements.arrow;var s=o.modifiersData.popperOffsets;var c=B(o.placement);var l=K(c);var d=[n,e].indexOf(c)>=0;var p=d?"height":"width";if(!u||!s){return}var h=rr(v.padding,o);var b=C(u);var m=l==="y"?r:n;var y=l==="y"?t:e;var x=o.rects.reference[p]+o.rects.reference[l]-s[l]-o.rects.popper[p];var w=s[l]-o.rects.reference[l];var O=J(u);var g=O?l==="y"?O.clientHeight||0:O.clientWidth||0:0;var j=x/2-w/2;var A=h[m];var k=g-b[p]-h[y];var M=g/2-b[p]/2+j;var q=N(A,M,k);var E=l;o.modifiersData[f]=(i={},i[E]=q,i.centerOffset=q-M,i)}function er(r){var t=r.state,e=r.options;var n=e.element,a=n===void 0?"[data-popper-arrow]":n;if(a==null){return}if(typeof a==="string"){a=t.elements.popper.querySelector(a);if(!a){return}}if(!z(t.elements.popper,a)){return}t.elements.arrow=a}const nr={name:"arrow",enabled:true,phase:"main",fn:tr,effect:er,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function ar(r){return r.split("-")[1]}var ir={top:"auto",right:"auto",bottom:"auto",left:"auto"};function or(r,t){var e=r.x,n=r.y;var a=t.devicePixelRatio||1;return{x:H(e*a)/a||0,y:H(n*a)/a||0}}function fr(a){var i;var o=a.popper,v=a.popperRect,u=a.placement,s=a.variation,c=a.offsets,l=a.position,d=a.gpuAcceleration,p=a.adaptive,h=a.roundOffsets,b=a.isFixed;var m=c.x,y=m===void 0?0:m,x=c.y,w=x===void 0?0:x;var O=typeof h==="function"?h({x:y,y:w}):{x:y,y:w};y=O.x;w=O.y;var g=c.hasOwnProperty("x");var j=c.hasOwnProperty("y");var A=n;var M=r;var q=window;if(p){var E=J(o);var P="clientHeight";var S="clientWidth";if(E===k(o)){E=V(o);if(D(E).position!=="static"&&l==="absolute"){P="scrollHeight";S="scrollWidth"}}E=E;if(u===r||(u===n||u===e)&&s===f){M=t;var W=b&&E===q&&q.visualViewport?q.visualViewport.height:E[P];w-=W-v.height;w*=d?1:-1}if(u===n||(u===r||u===t)&&s===f){A=e;var B=b&&E===q&&q.visualViewport?q.visualViewport.width:E[S];y-=B-v.width;y*=d?1:-1}}var T=Object.assign({position:l},p&&ir);var R=h===true?or({x:y,y:w},k(o)):{x:y,y:w};y=R.x;w=R.y;if(d){var H;return Object.assign({},T,(H={},H[M]=j?"0":"",H[A]=g?"0":"",H.transform=(q.devicePixelRatio||1)<=1?"translate("+y+"px, "+w+"px)":"translate3d("+y+"px, "+w+"px, 0)",H))}return Object.assign({},T,(i={},i[M]=j?w+"px":"",i[A]=g?y+"px":"",i.transform="",i))}function vr(r){var t=r.state,e=r.options;var n=e.gpuAcceleration,a=n===void 0?true:n,i=e.adaptive,o=i===void 0?true:i,f=e.roundOffsets,v=f===void 0?true:f;var u={placement:B(t.placement),variation:ar(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:a,isFixed:t.options.strategy==="fixed"};if(t.modifiersData.popperOffsets!=null){t.styles.popper=Object.assign({},t.styles.popper,fr(Object.assign({},u,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:o,roundOffsets:v})))}if(t.modifiersData.arrow!=null){t.styles.arrow=Object.assign({},t.styles.arrow,fr(Object.assign({},u,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:false,roundOffsets:v})))}t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})}const ur={name:"computeStyles",enabled:true,phase:"beforeWrite",fn:vr,data:{}};var sr={passive:true};function cr(r){var t=r.state,e=r.instance,n=r.options;var a=n.scroll,i=a===void 0?true:a,o=n.resize,f=o===void 0?true:o;var v=k(t.elements.popper);var u=[].concat(t.scrollParents.reference,t.scrollParents.popper);if(i){u.forEach((function(r){r.addEventListener("scroll",e.update,sr)}))}if(f){v.addEventListener("resize",e.update,sr)}return function(){if(i){u.forEach((function(r){r.removeEventListener("scroll",e.update,sr)}))}if(f){v.removeEventListener("resize",e.update,sr)}}}const lr={name:"eventListeners",enabled:true,phase:"write",fn:function r(){},effect:cr,data:{}};var dr={left:"right",right:"left",bottom:"top",top:"bottom"};function pr(r){return r.replace(/left|right|bottom|top/g,(function(r){return dr[r]}))}var hr={start:"end",end:"start"};function br(r){return r.replace(/start|end/g,(function(r){return hr[r]}))}function mr(r){var t=k(r);var e=t.pageXOffset;var n=t.pageYOffset;return{scrollLeft:e,scrollTop:n}}function yr(r){return I(V(r)).left+mr(r).scrollLeft}function xr(r,t){var e=k(r);var n=V(r);var a=e.visualViewport;var i=n.clientWidth;var o=n.clientHeight;var f=0;var v=0;if(a){i=a.width;o=a.height;var u=F();if(u||!u&&t==="fixed"){f=a.offsetLeft;v=a.offsetTop}}return{width:i,height:o,x:f+yr(r),y:v}}function wr(r){var t;var e=V(r);var n=mr(r);var a=(t=r.ownerDocument)==null?void 0:t.body;var i=T(e.scrollWidth,e.clientWidth,a?a.scrollWidth:0,a?a.clientWidth:0);var o=T(e.scrollHeight,e.clientHeight,a?a.scrollHeight:0,a?a.clientHeight:0);var f=-n.scrollLeft+yr(r);var v=-n.scrollTop;if(D(a||e).direction==="rtl"){f+=T(e.clientWidth,a?a.clientWidth:0)-i}return{width:i,height:o,x:f,y:v}}function Or(r){var t=D(r),e=t.overflow,n=t.overflowX,a=t.overflowY;return/auto|scroll|overlay|hidden/.test(e+a+n)}function gr(r){if(["html","body","#document"].indexOf(A(r))>=0){return r.ownerDocument.body}if(q(r)&&Or(r)){return r}return gr($(r))}function jr(r,t){var e;if(t===void 0){t=[]}var n=gr(r);var a=n===((e=r.ownerDocument)==null?void 0:e.body);var i=k(n);var o=a?[i].concat(i.visualViewport||[],Or(n)?n:[]):n;var f=t.concat(o);return a?f:f.concat(jr($(o)))}function Ar(r){return Object.assign({},r,{left:r.x,top:r.y,right:r.x+r.width,bottom:r.y+r.height})}function kr(r,t){var e=I(r,false,t==="fixed");e.top=e.top+r.clientTop;e.left=e.left+r.clientLeft;e.bottom=e.top+r.clientHeight;e.right=e.left+r.clientWidth;e.width=r.clientWidth;e.height=r.clientHeight;e.x=e.left;e.y=e.top;return e}function Mr(r,t,e){return t===u?Ar(xr(r,e)):M(t)?kr(t,e):Ar(wr(V(r)))}function qr(r){var t=jr($(r));var e=["absolute","fixed"].indexOf(D(r).position)>=0;var n=e&&q(r)?J(r):r;if(!M(n)){return[]}return t.filter((function(r){return M(r)&&z(r,n)&&A(r)!=="body"}))}function Er(r,t,e,n){var a=t==="clippingParents"?qr(r):[].concat(t);var i=[].concat(a,[e]);var o=i[0];var f=i.reduce((function(t,e){var a=Mr(r,e,n);t.top=T(a.top,t.top);t.right=R(a.right,t.right);t.bottom=R(a.bottom,t.bottom);t.left=T(a.left,t.left);return t}),Mr(r,o,n));f.width=f.right-f.left;f.height=f.bottom-f.top;f.x=f.left;f.y=f.top;return f}function Pr(a){var i=a.reference,v=a.element,u=a.placement;var s=u?B(u):null;var c=u?ar(u):null;var l=i.x+i.width/2-v.width/2;var d=i.y+i.height/2-v.height/2;var p;switch(s){case r:p={x:l,y:i.y-v.height};break;case t:p={x:l,y:i.y+i.height};break;case e:p={x:i.x+i.width,y:d};break;case n:p={x:i.x-v.width,y:d};break;default:p={x:i.x,y:i.y}}var h=s?K(s):null;if(h!=null){var b=h==="y"?"height":"width";switch(c){case o:p[h]=p[h]-(i[b]/2-v[b]/2);break;case f:p[h]=p[h]+(i[b]/2-v[b]/2);break}}return p}function Sr(n,a){if(a===void 0){a={}}var o=a,f=o.placement,l=f===void 0?n.placement:f,d=o.strategy,p=d===void 0?n.strategy:d,h=o.boundary,b=h===void 0?v:h,m=o.rootBoundary,y=m===void 0?u:m,x=o.elementContext,w=x===void 0?s:x,O=o.altBoundary,g=O===void 0?false:O,j=o.padding,A=j===void 0?0:j;var k=Y(typeof A!=="number"?A:Z(A,i));var q=w===s?c:s;var E=n.rects.popper;var P=n.elements[g?q:w];var S=Er(M(P)?P:P.contextElement||V(n.elements.popper),b,y,p);var W=I(n.elements.reference);var B=Pr({reference:W,element:E,strategy:"absolute",placement:l});var T=Ar(Object.assign({},E,B));var R=w===s?T:W;var H={top:S.top-R.top+k.top,bottom:R.bottom-S.bottom+k.bottom,left:S.left-R.left+k.left,right:R.right-S.right+k.right};var L=n.modifiersData.offset;if(w===s&&L){var F=L[l];Object.keys(H).forEach((function(n){var a=[e,t].indexOf(n)>=0?1:-1;var i=[r,t].indexOf(n)>=0?"y":"x";H[n]+=F[i]*a}))}return H}function Wr(r,t){if(t===void 0){t={}}var e=t,n=e.placement,a=e.boundary,o=e.rootBoundary,f=e.padding,v=e.flipVariations,u=e.allowedAutoPlacements,s=u===void 0?d:u;var c=ar(n);var p=c?v?l:l.filter((function(r){return ar(r)===c})):i;var h=p.filter((function(r){return s.indexOf(r)>=0}));if(h.length===0){h=p}var b=h.reduce((function(t,e){t[e]=Sr(r,{placement:e,boundary:a,rootBoundary:o,padding:f})[B(e)];return t}),{});return Object.keys(b).sort((function(r,t){return b[r]-b[t]}))}function Br(r){if(B(r)===a){return[]}var t=pr(r);return[br(r),t,br(t)]}function Tr(i){var f=i.state,v=i.options,u=i.name;if(f.modifiersData[u]._skip){return}var s=v.mainAxis,c=s===void 0?true:s,l=v.altAxis,d=l===void 0?true:l,p=v.fallbackPlacements,h=v.padding,b=v.boundary,m=v.rootBoundary,y=v.altBoundary,x=v.flipVariations,w=x===void 0?true:x,O=v.allowedAutoPlacements;var g=f.options.placement;var j=B(g);var A=j===g;var k=p||(A||!w?[pr(g)]:Br(g));var M=[g].concat(k).reduce((function(r,t){return r.concat(B(t)===a?Wr(f,{placement:t,boundary:b,rootBoundary:m,padding:h,flipVariations:w,allowedAutoPlacements:O}):t)}),[]);var q=f.rects.reference;var E=f.rects.popper;var P=new Map;var S=true;var W=M[0];for(var T=0;T<M.length;T++){var R=M[T];var H=B(R);var L=ar(R)===o;var F=[r,t].indexOf(H)>=0;var I=F?"width":"height";var C=Sr(f,{placement:R,boundary:b,rootBoundary:m,altBoundary:y,padding:h});var z=F?L?e:n:L?t:r;if(q[I]>E[I]){z=pr(z)}var D=pr(z);var U=[];if(c){U.push(C[H]<=0)}if(d){U.push(C[z]<=0,C[D]<=0)}if(U.every((function(r){return r}))){W=R;S=false;break}P.set(R,U)}if(S){var V=w?3:1;var $=function r(t){var e=M.find((function(r){var e=P.get(r);if(e){return e.slice(0,t).every((function(r){return r}))}}));if(e){W=e;return"break"}};for(var _=V;_>0;_--){var G=$(_);if(G==="break")break}}if(f.placement!==W){f.modifiersData[u]._skip=true;f.placement=W;f.reset=true}}const Rr={name:"flip",enabled:true,phase:"main",fn:Tr,requiresIfExists:["offset"],data:{_skip:false}};function Hr(r,t,e){if(e===void 0){e={x:0,y:0}}return{top:r.top-t.height-e.y,right:r.right-t.width+e.x,bottom:r.bottom-t.height+e.y,left:r.left-t.width-e.x}}function Lr(a){return[r,e,t,n].some((function(r){return a[r]>=0}))}function Fr(r){var t=r.state,e=r.name;var n=t.rects.reference;var a=t.rects.popper;var i=t.modifiersData.preventOverflow;var o=Sr(t,{elementContext:"reference"});var f=Sr(t,{altBoundary:true});var v=Hr(o,n);var u=Hr(f,a,i);var s=Lr(v);var c=Lr(u);t.modifiersData[e]={referenceClippingOffsets:v,popperEscapeOffsets:u,isReferenceHidden:s,hasPopperEscaped:c};t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":s,"data-popper-escaped":c})}const Ir={name:"hide",enabled:true,phase:"main",requiresIfExists:["preventOverflow"],fn:Fr};function Cr(t,a,i){var o=B(t);var f=[n,r].indexOf(o)>=0?-1:1;var v=typeof i==="function"?i(Object.assign({},a,{placement:t})):i,u=v[0],s=v[1];u=u||0;s=(s||0)*f;return[n,e].indexOf(o)>=0?{x:s,y:u}:{x:u,y:s}}function zr(r){var t=r.state,e=r.options,n=r.name;var a=e.offset,i=a===void 0?[0,0]:a;var o=d.reduce((function(r,e){r[e]=Cr(e,t.rects,i);return r}),{});var f=o[t.placement],v=f.x,u=f.y;if(t.modifiersData.popperOffsets!=null){t.modifiersData.popperOffsets.x+=v;t.modifiersData.popperOffsets.y+=u}t.modifiersData[n]=o}const Dr={name:"offset",enabled:true,phase:"main",requires:["popperOffsets"],fn:zr};function Ur(r){var t=r.state,e=r.name;t.modifiersData[e]=Pr({reference:t.rects.reference,element:t.rects.popper,strategy:"absolute",placement:t.placement})}const Vr={name:"popperOffsets",enabled:true,phase:"read",fn:Ur,data:{}};function $r(r){return r==="x"?"y":"x"}function _r(a){var i=a.state,f=a.options,v=a.name;var u=f.mainAxis,s=u===void 0?true:u,c=f.altAxis,l=c===void 0?false:c,d=f.boundary,p=f.rootBoundary,h=f.altBoundary,b=f.padding,m=f.tether,y=m===void 0?true:m,x=f.tetherOffset,w=x===void 0?0:x;var O=Sr(i,{boundary:d,rootBoundary:p,padding:b,altBoundary:h});var g=B(i.placement);var j=ar(i.placement);var A=!j;var k=K(g);var M=$r(k);var q=i.modifiersData.popperOffsets;var E=i.rects.reference;var P=i.rects.popper;var S=typeof w==="function"?w(Object.assign({},i.rects,{placement:i.placement})):w;var W=typeof S==="number"?{mainAxis:S,altAxis:S}:Object.assign({mainAxis:0,altAxis:0},S);var H=i.modifiersData.offset?i.modifiersData.offset[i.placement]:null;var L={x:0,y:0};if(!q){return}if(s){var F;var I=k==="y"?r:n;var z=k==="y"?t:e;var D=k==="y"?"height":"width";var U=q[k];var V=U+O[I];var $=U-O[z];var _=y?-P[D]/2:0;var G=j===o?E[D]:P[D];var Y=j===o?-P[D]:-E[D];var Z=i.elements.arrow;var rr=y&&Z?C(Z):{width:0,height:0};var tr=i.modifiersData["arrow#persistent"]?i.modifiersData["arrow#persistent"].padding:X();var er=tr[I];var nr=tr[z];var ir=N(0,E[D],rr[D]);var or=A?E[D]/2-_-ir-er-W.mainAxis:G-ir-er-W.mainAxis;var fr=A?-E[D]/2+_+ir+nr+W.mainAxis:Y+ir+nr+W.mainAxis;var vr=i.elements.arrow&&J(i.elements.arrow);var ur=vr?k==="y"?vr.clientTop||0:vr.clientLeft||0:0;var sr=(F=H==null?void 0:H[k])!=null?F:0;var cr=U+or-sr-ur;var lr=U+fr-sr;var dr=N(y?R(V,cr):V,U,y?T($,lr):$);q[k]=dr;L[k]=dr-U}if(l){var pr;var hr=k==="x"?r:n;var br=k==="x"?t:e;var mr=q[M];var yr=M==="y"?"height":"width";var xr=mr+O[hr];var wr=mr-O[br];var Or=[r,n].indexOf(g)!==-1;var gr=(pr=H==null?void 0:H[M])!=null?pr:0;var jr=Or?xr:mr-E[yr]-P[yr]-gr+W.altAxis;var Ar=Or?mr+E[yr]+P[yr]-gr-W.altAxis:wr;var kr=y&&Or?Q(jr,mr,Ar):N(y?jr:xr,mr,y?Ar:wr);q[M]=kr;L[M]=kr-mr}i.modifiersData[v]=L}const Gr={name:"preventOverflow",enabled:true,phase:"main",fn:_r,requiresIfExists:["offset"]};function Jr(r){return{scrollLeft:r.scrollLeft,scrollTop:r.scrollTop}}function Kr(r){if(r===k(r)||!q(r)){return mr(r)}else{return Jr(r)}}function Nr(r){var t=r.getBoundingClientRect();var e=H(t.width)/r.offsetWidth||1;var n=H(t.height)/r.offsetHeight||1;return e!==1||n!==1}function Qr(r,t,e){if(e===void 0){e=false}var n=q(t);var a=q(t)&&Nr(t);var i=V(t);var o=I(r,a,e);var f={scrollLeft:0,scrollTop:0};var v={x:0,y:0};if(n||!n&&!e){if(A(t)!=="body"||Or(i)){f=Kr(t)}if(q(t)){v=I(t,true);v.x+=t.clientLeft;v.y+=t.clientTop}else if(i){v.x=yr(i)}}return{x:o.left+f.scrollLeft-v.x,y:o.top+f.scrollTop-v.y,width:o.width,height:o.height}}function Xr(r){var t=new Map;var e=new Set;var n=[];r.forEach((function(r){t.set(r.name,r)}));function a(r){e.add(r.name);var i=[].concat(r.requires||[],r.requiresIfExists||[]);i.forEach((function(r){if(!e.has(r)){var n=t.get(r);if(n){a(n)}}}));n.push(r)}r.forEach((function(r){if(!e.has(r.name)){a(r)}}));return n}function Yr(r){var t=Xr(r);return j.reduce((function(r,e){return r.concat(t.filter((function(r){return r.phase===e})))}),[])}function Zr(r){var t;return function(){if(!t){t=new Promise((function(e){Promise.resolve().then((function(){t=undefined;e(r())}))}))}return t}}function rt(r){var t=r.reduce((function(r,t){var e=r[t.name];r[t.name]=e?Object.assign({},e,t,{options:Object.assign({},e.options,t.options),data:Object.assign({},e.data,t.data)}):t;return r}),{});return Object.keys(t).map((function(r){return t[r]}))}var tt={placement:"bottom",modifiers:[],strategy:"absolute"};function et(){for(var r=arguments.length,t=new Array(r),e=0;e<r;e++){t[e]=arguments[e]}return!t.some((function(r){return!(r&&typeof r.getBoundingClientRect==="function")}))}function nt(r){if(r===void 0){r={}}var t=r,e=t.defaultModifiers,n=e===void 0?[]:e,a=t.defaultOptions,i=a===void 0?tt:a;return function r(t,e,a){if(a===void 0){a=i}var o={placement:"bottom",orderedModifiers:[],options:Object.assign({},tt,i),modifiersData:{},elements:{reference:t,popper:e},attributes:{},styles:{}};var f=[];var v=false;var u={state:o,setOptions:function r(a){var f=typeof a==="function"?a(o.options):a;c();o.options=Object.assign({},i,o.options,f);o.scrollParents={reference:M(t)?jr(t):t.contextElement?jr(t.contextElement):[],popper:jr(e)};var v=Yr(rt([].concat(n,o.options.modifiers)));o.orderedModifiers=v.filter((function(r){return r.enabled}));s();return u.update()},forceUpdate:function r(){if(v){return}var t=o.elements,e=t.reference,n=t.popper;if(!et(e,n)){return}o.rects={reference:Qr(e,J(n),o.options.strategy==="fixed"),popper:C(n)};o.reset=false;o.placement=o.options.placement;o.orderedModifiers.forEach((function(r){return o.modifiersData[r.name]=Object.assign({},r.data)}));for(var a=0;a<o.orderedModifiers.length;a++){if(o.reset===true){o.reset=false;a=-1;continue}var i=o.orderedModifiers[a],f=i.fn,s=i.options,c=s===void 0?{}:s,l=i.name;if(typeof f==="function"){o=f({state:o,options:c,name:l,instance:u})||o}}},update:Zr((function(){return new Promise((function(r){u.forceUpdate();r(o)}))})),destroy:function r(){c();v=true}};if(!et(t,e)){return u}u.setOptions(a).then((function(r){if(!v&&a.onFirstUpdate){a.onFirstUpdate(r)}}));function s(){o.orderedModifiers.forEach((function(r){var t=r.name,e=r.options,n=e===void 0?{}:e,a=r.effect;if(typeof a==="function"){var i=a({state:o,name:t,instance:u,options:n});var v=function r(){};f.push(i||v)}}))}function c(){f.forEach((function(r){return r()}));f=[]}return u}}var at=[lr,Vr,ur,W,Dr,Rr,Gr,nr,Ir];var it=nt({defaultModifiers:at});class ot{constructor(r,t,e){this.handleTransitionEnd=this.handleTransitionEnd.bind(this);this.anchor=r;this.popover=t;this.options=Object.assign({skidding:0,distance:0,placement:"bottom-start",strategy:"absolute",transitionElement:this.popover,visibleClass:"popover-visible",onAfterShow:()=>{},onAfterHide:()=>{},onTransitionEnd:()=>{}},e);this.popover.hidden=true;this.popover.classList.remove(this.options.visibleClass);this.popover.addEventListener("transitionend",this.handleTransitionEnd)}handleTransitionEnd(r){const t=r.target;if(t===this.options.transitionElement){this.options.onTransitionEnd.call(this,r);if(this.isVisible===false&&!this.popover.hidden){this.popover.hidden=true;this.popover.classList.remove(this.options.visibleClass);this.options.onAfterHide.call(this)}}}destroy(){this.popover.removeEventListener("transitionend",this.handleTransitionEnd);if(this.popper){this.popper.destroy();this.popper=null}}show(){this.isVisible=true;this.popover.hidden=false;requestAnimationFrame((()=>this.popover.classList.add(this.options.visibleClass)));if(this.popper){this.popper.destroy()}const r=this.options.placement.includes("center")?"top":this.options.placement;this.popper=it(this.anchor,this.popover,{placement:r,strategy:this.options.strategy,modifiers:[{name:"sameWidth",enabled:true,fn:({state:r})=>{r.styles.popper.minWidth=`${r.rects.reference.width}px`},phase:"beforeWrite",requires:["computeStyles"]},{name:"flip",options:{boundary:"viewport"}},{name:"offset",options:{padding:5,offset:({reference:r})=>{if(this.options.placement!=="center")return[this.options.skidding,this.options.distance];return[this.options.skidding,(r.height+1)*-1]}}}]});this.popover.addEventListener("transitionend",(()=>this.options.onAfterShow.call(this)),{once:true});requestAnimationFrame((()=>this.popper.update()))}hide(){this.isVisible=false;this.popover.classList.remove(this.options.visibleClass)}setOptions(r){this.options=Object.assign(this.options,r);this.isVisible?this.popover.classList.add(this.options.visibleClass):this.popover.classList.remove(this.options.visibleClass);const t=this.options.placement.includes("center")?"top":this.options.placement;if(this.popper){this.popper.setOptions({placement:t,strategy:this.options.strategy});requestAnimationFrame((()=>this.popper.update()))}}}export{ot as P};
+//# sourceMappingURL=p-cd1fd454.js.map