@nanoporetech-digital/components 5.10.0 → 5.11.0

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

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,h as i,a,g as s}from"./p-d6a04b3a.js";import{g as e,a as o}from"./p-cdfc507e.js";import{d as r}from"./p-7bff5224.js";const n=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:"currentColor";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:" ";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;width:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:"";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav nano-icon-button.onav__scroll-button:focus{outline:none}.onav nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow-x:auto;overflow-y:hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0 0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;-webkit-padding-before:0;padding-block-start:0;-webkit-padding-after:0;padding-block-end:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:"";width:100%;height:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{width:100%}.onav--vertical .onav__nav{max-height:100%;display:flex}.onav--vertical .onav__scroller{width:100%;overflow-y:auto;overflow-x:hidden;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-block:var(--padding);-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0 0;-webkit-padding-before:calc(var(--fade-size) + 12px);padding-block-start:calc(var(--fade-size) + 12px);-webkit-padding-after:var(--fade-size);padding-block-end:var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0 0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;width:-moz-fit-content;width:fit-content}.onav--vertical .onav__items::before{content:"";height:100%;width:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}';const l=class{watchIsActiveHandler(){this.instantReCalc=true;this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));setTimeout((()=>this.instantReCalc=false),300)}async syncActiveItem(){this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)))}constructor(i){t(this,i);this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(!this.nav)return;this.hasScrollControls=this.nav[this.scrollProp]>this.nav[this.clientDimProp]&&this.nav[this.scrollProp]>this.itemContainer[this.clientDimProp];this.handleScroll()};this.handleScroll=()=>{if(!this.hasScrollControls){this.hideControlStart=this.hideControlEnd=true;return}const t=this.isRtl?this.nav[this.scrollOffset]===0:Math.abs(this.nav[this.clientDimProp]-(this.nav[this.scrollProp]-this.nav[this.scrollOffset]))<2;const i=this.isRtl?Math.abs(this.nav[this.scrollProp]+this.nav[this.scrollOffset]-this.nav[this.clientDimProp])<2:this.nav[this.scrollOffset]===0;if(i){this.hideControlStart=true;this.hideControlEnd=false}else if(t){this.hideControlStart=false;this.hideControlEnd=true}else{this.hideControlEnd=false;this.hideControlStart=false}};this.handleBtnClick=(t=false)=>{const i=this.navDim;let a;if(t)a=this.nav[this.scrollOffset]+i-20;else a=this.nav[this.scrollOffset]-i+20;try{this.nav.scroll({left:this.orientation==="horizontal"?a:0,top:this.orientation==="vertical"?a:0,behavior:"smooth"})}catch(t){this.nav[this.scrollOffset]=a}};this.slotChangeHandler=()=>{if(this.allActiveItems.length<2)return;const t=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));if(t)this.activeItem=t;this.recalculatePositions();this.allActiveItems.forEach((t=>{if(this.mutationObservers.get(t))return;const i=new MutationObserver((()=>this.syncActiveItemIndicator()));i.observe(t,{characterData:true,childList:true,subtree:true});this.mutationObservers.set(t,i)}))};this.handleClick=t=>{if(this.allActiveItems.length<2)return;const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));if(i)this.activeItem=i};this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));if(i)this.activeItem=i}};this.recalculatePositions=()=>{this.updateScrollControls();this.syncActiveItemIndicator();this.scrollToActiveItem()};this.scrollControls=true;this.orientation="horizontal";this.activeHandler=(t,i)=>t.classList.add("active");this.inActiveHandler=(t,i)=>t.classList.remove("active");this.isActiveHandler=(t,i)=>t.classList.contains("active");this.instantReCalc=false;this.hasScrollControls=false;this.hideControlEnd=true;this.hideControlStart=true;this.recalculatePositions=r(this.recalculatePositions.bind(this),80)}get scrollProp(){return this.orientation==="horizontal"?"scrollWidth":"scrollHeight"}get clientDimProp(){return this.orientation==="horizontal"?"clientWidth":"clientHeight"}get scrollOffset(){return this.orientation==="horizontal"?"scrollLeft":"scrollTop"}watchScrollControls(){if(this.hasScrollControls)this.handleScroll();else this.hideControlStart=this.hideControlEnd=true}hideEndBtn(){if(!this.endBtn)return;this.activateBtn(this.endBtn,!this.hideControlEnd)}hideStartBtn(){if(!this.startBtn)return;this.activateBtn(this.startBtn,!this.hideControlStart)}activateBtn(t,i=true){if(!i){t.tabIndex=-1;t.disabled=true;t.classList.remove("is-shown");return}t.tabIndex=0;t.disabled=false;t.classList.add("is-shown")}get allActiveItems(){return this.allItems.filter((t=>!t.disabled||t.classList.contains("disabled")))}get allItems(){return e(this.host,"*",true)}get activeItem(){return this._activeItem}set activeItem(t){if(!t||t===this.activeItem||t.disabled||!this.allActiveItems.includes(t)){return}this._activeItem=t;this.allActiveItems.forEach(((t,i)=>{if(t===this._activeItem)this.activeHandler(t,i);else this.inActiveHandler(t,i)}));this.recalculatePositions()}get navDim(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let i=this.nav[this.clientDimProp];if(this.orientation==="horizontal"){return i-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}else{return i-=parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)}}scrollToActiveItem(){if(!this.nav||!this.activeItem)return;setTimeout((()=>{this.activeItem.scrollIntoView({behavior:this.instantReCalc?"auto":"smooth",block:"center",inline:"center"})}),100)}syncActiveItemIndicator(){if(!this.activeItem)return;const t=this.activeItem;const i=t.clientWidth||0;const a=t.clientHeight+2||0;const s=o(t,this.itemContainer);if(!this.activeIndicator)return;const e=s.top;const r=s.left;if(this.instantReCalc)this.activeIndicator.style.transition="none";switch(this.orientation){case"horizontal":this.activeIndicator.style.width=`${i}px`;this.activeIndicator.style.height=null;this.activeIndicator.style.transform=`translateX(${r}px)`;break;case"vertical":this.activeIndicator.style.width=null;this.activeIndicator.style.height=`${a}px`;this.activeIndicator.style.transform=`translateY(${e}px)`;break}setTimeout((()=>this.activeIndicator.style.transition=null),400)}connectedCallback(){this.instantReCalc=true;this.isRtl=this.orientation==="horizontal"&&!!this.host.closest('[dir="rtl"]');if(window["MutationObserver"])this.slotChangeHandler();if(!window["ResizeObserver"])return;if(this.ro){this.ro.disconnect();this.ro=undefined}const t=this.ro=new ResizeObserver(this.recalculatePositions);t.observe(this.host)}componentDidLoad(){this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));this.instantReCalc=false}disconnectedCallback(){if(this.ro){this.ro.disconnect();this.ro=undefined}}render(){return i(a,{dir:this.isRtl?"rtl":null},i("div",{part:"base",class:{onav:true,[`onav--${this.orientation}`]:true,"onav--has-scroll-controls":this.hasScrollControls,"onav--has-scroll-controls-start":!this.hideControlStart,"onav--has-scroll-controls-end":!this.hideControlEnd,"onav--no-transitions":this.instantReCalc},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("div",{class:"onav__nav"},this.scrollControls&&i("nano-icon-button",{part:"scroll-button scroll-button-prev",class:{"onav__scroll-button":true,"onav__scroll-button--start":true},ref:t=>this.startBtn=t,onClick:()=>this.handleBtnClick(false),label:"Click to scroll",iconName:this.orientation==="horizontal"?"light/chevron-left":"light/chevron-up"}),i("div",{part:"scroller",ref:t=>this.nav=t,class:"onav__scroller",onScroll:this.handleScroll},i("div",{part:"items",ref:t=>this.itemContainer=t,class:"onav__items"},i("div",{part:"indicator",ref:t=>this.activeIndicator=t,class:"onav__active-indicator"}),i("slot",{onSlotchange:this.slotChangeHandler}))),this.scrollControls&&i("nano-icon-button",{part:"scroll-button scroll-button-next",class:{"onav__scroll-button":true,"onav__scroll-button--end":true},ref:t=>this.endBtn=t,onClick:()=>this.handleBtnClick(true),label:"Click to scroll",iconName:this.orientation==="horizontal"?"light/chevron-right":"light/chevron-down"}))))}get host(){return s(this)}static get watchers(){return{isActiveHandler:["watchIsActiveHandler"],hasScrollControls:["watchScrollControls"],hideControlEnd:["hideEndBtn"],hideControlStart:["hideStartBtn"]}}};l.style=n;export{l as nano_overflow_nav};
-//# sourceMappingURL=p-a225e976.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["overflowNavCss","OverflowNav","watchIsActiveHandler","this","instantReCalc","activeItem","allActiveItems","find","el","i","isActiveHandler","setTimeout","async","constructor","hostRef","mutationObservers","WeakMap","updateScrollControls","nav","hasScrollControls","scrollProp","clientDimProp","itemContainer","handleScroll","hideControlStart","hideControlEnd","finishEnd","isRtl","scrollOffset","Math","abs","finishStart","handleBtnClick","goEnd","navDim","scrollAmt","scroll","left","orientation","top","behavior","e","slotChangeHandler","length","item","recalculatePositions","forEach","get","mo","MutationObserver","syncActiveItemIndicator","observe","characterData","childList","subtree","set","handleClick","event","foundItem","composedPath","includes","handleKeyDown","key","scrollToActiveItem","_index","classList","add","remove","contains","debounce","bind","watchScrollControls","hideEndBtn","endBtn","activateBtn","hideStartBtn","startBtn","btn","activate","tabIndex","disabled","allItems","filter","getDirectChildren","host","_activeItem","activeHandler","inActiveHandler","computedStyle","getComputedStyle","clientDim","parseFloat","paddingLeft","paddingRight","paddingTop","paddingBottom","scrollIntoView","block","inline","width","clientWidth","height","clientHeight","offset","getOffset","activeIndicator","offsetTop","offsetLeft","style","transition","transform","connectedCallback","closest","window","ro","disconnect","undefined","ResizeObserver","componentDidLoad","disconnectedCallback","render","h","Host","dir","part","class","onav","onClick","onKeyDown","scrollControls","ref","label","iconName","onScroll","onSlotchange"],"sources":["./src/components/overflow-nav/overflow-nav.scss?tag=nano-overflow-nav&encapsulation=shadow","./src/components/overflow-nav/overflow-nav.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n  * @prop --indicator-transition: Defaults to #{$transition-fast}\n  * @prop --indicator-color: Defaults to #{map.get($colors, lightblue)};\n  * @prop --indicator-size: Defaults to 0;\n  * @prop --indicator-track-color: Defaults to #{map.get($colors, lightgrey)};\n  * @prop --indicator-track-size: Defaults to var(--indicator-size);\n\n  * @prop --scroll-btn-color: Defaults to 'currentColor';\n  * @prop --fade-size: The size of the fade areas (when items do not fit). Defaults to 1.75rem;\n  * @prop --fade-transparency: Defaults to 0;\n  *\n  * @prop --padding: Padding that matches the fade size will stop items shifting if fade areas are added (i.e when items do not fit). Defaults to var(--fade-size);\n  */\n\n  --indicator-transition: #{$transition-fast};\n  --indicator-color: #{map.get($colors, lightblue)};\n  --indicator-size: 0;\n  --indicator-track-color: #{map.get($colors, lightgrey)};\n  --indicator-track-size: var(--indicator-size);\n  --scroll-btn-color: 'currentColor';\n  --fade-size: 1.75rem;\n  --fade-transparency: 0;\n  --padding: var(--fade-size);\n\n  position: relative;\n  z-index: #{$layer-index-raised};\n}\n\n:host([orientation=\"horizontal\"]) {\n  display: block;\n}\n\n:host([orientation=\"vertical\"]) {\n  display: flex;\n}\n\n.onav {\n  $root: &;\n\n  &--no-transitions * {\n    transition-duration: 0s !important;\n  }\n\n  &__scroller {\n    @include hide-scrollbar();\n\n    display: flex;\n    transition: #{$transition-medium} ease;\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n    mask-size: calc(100% + calc(var(--fade-size) * 4));\n    mask-position: calc(var(--fade-size) * -2);\n\n    &::after {\n      content: ' ';\n      line-height: 1;\n      flex: 0 0 auto;\n      display: block;\n    }\n\n    #{$root}--has-scroll-controls-start & {\n      mask-position: 0;\n      mask-size: calc(100% + (var(--fade-size) * 2));\n    }\n\n    #{$root}--has-scroll-controls-end & {\n      mask-position: calc(var(--fade-size) * -1);\n      mask-size: calc(100% + var(--fade-size));\n    }\n\n    #{$root}--has-scroll-controls-start#{$root}--has-scroll-controls-end & {\n      mask-size: 100%;\n      mask-position: 0;\n    }\n  }\n\n  &__items {\n    flex: 1 1 auto;\n    position: relative;\n    width: auto;\n    flex-wrap: nowrap;\n    display: flex;\n\n    &::before {\n      content: '';\n      background: var(--indicator-track-color);\n      display: block;\n      position: absolute;\n      z-index: 1;\n    }\n  }\n\n  &__active-indicator {\n    position: absolute;\n    z-index: 10;\n    transition:\n      var(--indicator-transition) transform ease,\n      var(--indicator-transition) width ease,\n      var(--indicator-transition) height ease;\n  }\n\n  nano-icon-button.onav__scroll-button {\n    --nano-color-base: var(--scroll-btn-color);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    border: unset;\n    z-index: 2;\n    transition: #{$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n    pointer-events: none;\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:focus-visible {\n      box-shadow: #{$control-focus-style} inset;\n    }\n  }\n\n  ///////////// HORIZONTAL ///////////////\n\n  &--horizontal {\n\n    #{$root}__scroller {\n      overflow-x: auto;\n      overflow-y: hidden;\n      mask-repeat: no-repeat;\n      padding-inline: var(--padding);\n      mask-image:\n        linear-gradient(\n          to left,\n          rgb(0 0 0 / var(--fade-transparency)) 0,\n          rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n          rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n          rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n          rgb(0 0 0 / var(--fade-transparency))\n          calc(100% - var(--fade-size)),\n          rgb(0 0 0 / var(--fade-transparency))\n        );\n\n      &::after {\n        padding-inline: 0 var(--fade-size);\n        padding-block: 0 0;\n      }\n    }\n\n    &#{$root}--has-scroll-controls #{$root}__scroller {\n      padding-inline: var(--fade-size) 0;\n      padding-block-start: 0;\n      padding-block-end: 0;\n    }\n\n    #{$root}__items {\n      flex-direction: row;\n\n      &::before {\n        content: '';\n        width: 100%;\n        height: var(--indicator-track-size);\n        inset-block-end: 0;\n      }\n    }\n\n    #{$root}__active-indicator {\n      inset-block-end: 0;\n      border-block-end: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    #{$root}__scroll-button {\n      inset-block: 0;\n\n      &--start {\n        inset-inline-start: 0;\n      }\n\n      &--end {\n        inset-inline-end: 0;\n      }\n    }\n  }\n\n  ///////////// VERTICAL ///////////////\n\n  &--vertical {\n    width: 100%;\n\n    #{$root}__nav {\n      max-height: 100%;\n      display: flex;\n    }\n\n    #{$root}__scroller {\n      width: 100%;\n      overflow-y: auto;\n      overflow-x: hidden;\n      flex-direction: column;\n      mask-repeat: no-repeat;\n      padding-block: var(--padding);\n      mask-image:\n        linear-gradient(\n          to top,\n          rgb(0 0 0 / var(--fade-transparency)) 0,\n          rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n          rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n          rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n          rgb(0 0 0 / var(--fade-transparency))\n          calc(100% - var(--fade-size)),\n          rgb(0 0 0 / var(--fade-transparency))\n        );\n      padding-inline: 0 0;\n      padding-block-start: calc(var(--fade-size) + 12px);\n      padding-block-end: var(--fade-size);\n\n      &::after {\n        padding-inline: 0 0;\n        padding-block: 0 var(--fade-size);\n      }\n    }\n\n    #{$root}__items {\n      flex-direction: column;\n      width: fit-content;\n\n      &::before {\n        content: '';\n        height: 100%;\n        width: var(--indicator-track-size);\n        inset-inline-start: 0;\n      }\n    }\n\n    #{$root}__active-indicator {\n      inset-inline-start: 0;\n      border-inline-start: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    #{$root}__scroll-button {\n      inset-inline: 0;\n\n      &--start {\n        inset-block-start: 0;\n      }\n\n      &--end {\n        inset-block-end: 0;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  State,\n  Method,\n} from '@stencil/core';\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\n/**\n * Primarily used to display navigational items that may not fit on smaller screens.\n *\n * - Accepts any collection of elements\n * - Gives visual cues of 'more' with auto display fade effect and scroll buttons\n * - Auto scrolls to the active item onload\n *\n * @slot - Default slot to place items.\n *\n * @part base - root, wrapper element\n * @part scroller - the scrolling element\n * @part items - the item wrapper element\n * @part indicator - the animated, indicator element\n * @part scroll-button - The buttons shown at either side of the scrolling area\n * @part scroll-button-prev - The button shown at the start of the scrolling area\n * @part scroll-button-next - The button shown at the end of the scrolling area\n */\n\n@Component({\n  tag: 'nano-overflow-nav',\n  styleUrl: 'overflow-nav.scss',\n  shadow: true,\n})\nexport class OverflowNav implements ComponentInterface {\n  // public surface\n\n  /** Disables the scroll arrow buttons that appear when content overflows */\n  @Prop() scrollControls = true;\n\n  /** The flex direction of the element */\n  @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' =\n    'horizontal';\n\n  /**\n   * A function called when an item becomes 'active' (via click or keyboard)\n   * @param item - html element currently being assessed\n   * @param _index - the index of the html element currently being assessed\n   * @returns void */\n  @Prop() activeHandler = (item: HTMLElement, _index: number) =>\n    item.classList.add('active');\n\n  /**\n   * A function called when an item becomes 'inactive'\n   * (because another item was made active)\n   * @param item - html element currently being assessed\n   * @param _index - the index of the html element currently being assessed\n   * @returns void */\n  @Prop() inActiveHandler = (item: HTMLElement, _index: number) =>\n    item.classList.remove('active');\n\n  /**\n   * A function called to assess an initial, active item\n   * @param item - html element currently being assessed\n   * @param _index - the index of the html element currently being assessed\n   * @returns void */\n  @Prop() isActiveHandler = (item: HTMLElement, _index: number) =>\n    item.classList.contains('active');\n\n  @Watch('isActiveHandler')\n  watchIsActiveHandler() {\n    this.instantReCalc = true;\n    this.activeItem = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n    setTimeout(() => (this.instantReCalc = false), 300);\n  }\n\n  /**\n   * Sync up the view to the active item.\n   * Use this when the active item changes outside of this component.\n   */\n  @Method()\n  async syncActiveItem() {\n    this.activeItem = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n  }\n\n  // private state\n\n  constructor() {\n    this.recalculatePositions = debounce(\n      this.recalculatePositions.bind(this),\n      80\n    );\n  }\n\n  private ro?: ResizeObserver;\n  private nav?: HTMLElement;\n  private itemContainer?: HTMLElement;\n  private isRtl?: boolean;\n  private endBtn: HTMLNanoIconButtonElement;\n  private startBtn: HTMLNanoIconButtonElement;\n  private activeIndicator: HTMLElement;\n  private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n  get scrollProp() {\n    return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';\n  }\n\n  get clientDimProp() {\n    return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';\n  }\n\n  get scrollOffset() {\n    return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';\n  }\n\n  @Element() host: HTMLNanoOverflowNavElement;\n\n  @State() instantReCalc = false;\n  @State() hasScrollControls = false;\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) this.handleScroll();\n    else this.hideControlStart = this.hideControlEnd = true;\n  }\n\n  @State() hideControlEnd = true;\n\n  @Watch('hideControlEnd')\n  hideEndBtn() {\n    if (!this.endBtn) return;\n    this.activateBtn(this.endBtn, !this.hideControlEnd);\n  }\n\n  @State() hideControlStart = true;\n\n  @Watch('hideControlStart')\n  hideStartBtn() {\n    if (!this.startBtn) return;\n    this.activateBtn(this.startBtn, !this.hideControlStart);\n  }\n\n  // private logic\n\n  private activateBtn(btn: HTMLNanoIconButtonElement, activate = true) {\n    if (!activate) {\n      btn.tabIndex = -1;\n      btn.disabled = true;\n      btn.classList.remove('is-shown');\n      return;\n    }\n    btn.tabIndex = 0;\n    btn.disabled = false;\n    btn.classList.add('is-shown');\n  }\n\n  get allActiveItems() {\n    return this.allItems.filter(\n      (el: any) => !el.disabled || el.classList.contains('disabled')\n    );\n  }\n\n  get allItems() {\n    return getDirectChildren<HTMLElement>(this.host, '*', true);\n  }\n\n  get activeItem() {\n    return this._activeItem;\n  }\n\n  set activeItem(item: HTMLElement) {\n    if (\n      !item ||\n      item === this.activeItem ||\n      (item as any).disabled ||\n      !this.allActiveItems.includes(item)\n    ) {\n      return;\n    }\n\n    this._activeItem = item;\n    this.allActiveItems.forEach((el, i) => {\n      if (el === this._activeItem) this.activeHandler(el, i);\n      else this.inActiveHandler(el, i);\n    });\n\n    this.recalculatePositions();\n  }\n  private _activeItem: HTMLElement;\n\n  get navDim() {\n    if (!this.nav) return 0;\n\n    const computedStyle = getComputedStyle(this.nav);\n    let clientDim = this.nav[this.clientDimProp];\n\n    if (this.orientation === 'horizontal') {\n      return (clientDim -=\n        parseFloat(computedStyle.paddingLeft) +\n        parseFloat(computedStyle.paddingRight));\n    } else {\n      return (clientDim -=\n        parseFloat(computedStyle.paddingTop) +\n        parseFloat(computedStyle.paddingBottom));\n    }\n  }\n\n  private scrollToActiveItem() {\n    if (!this.nav || !this.activeItem) return;\n    setTimeout(() => {\n      this.activeItem.scrollIntoView({\n        behavior: this.instantReCalc ? 'auto' : 'smooth',\n        block: 'center',\n        inline: 'center',\n      });\n    }, 100);\n  }\n\n  private syncActiveItemIndicator() {\n    if (!this.activeItem) return;\n\n    const item = this.activeItem;\n    const width = item.clientWidth || 0;\n    const height = item.clientHeight + 2 || 0;\n    const offset = getOffset(item, this.itemContainer);\n\n    if (!this.activeIndicator) return;\n\n    const offsetTop = offset.top;\n    const offsetLeft = offset.left;\n\n    if (this.instantReCalc) this.activeIndicator.style.transition = 'none';\n\n    switch (this.orientation) {\n      case 'horizontal':\n        this.activeIndicator.style.width = `${width}px`;\n        this.activeIndicator.style.height = null;\n        this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'vertical':\n        this.activeIndicator.style.width = null;\n        this.activeIndicator.style.height = `${height}px`;\n        this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n    setTimeout(() => (this.activeIndicator.style.transition = null), 400);\n  }\n\n  private updateScrollControls = () => {\n    if (!this.nav) return;\n\n    this.hasScrollControls =\n      this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&\n      this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];\n    this.handleScroll();\n  };\n\n  private handleScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlStart = this.hideControlEnd = true;\n      return;\n    }\n    const finishEnd = this.isRtl\n      ? this.nav[this.scrollOffset] === 0\n      : Math.abs(\n          this.nav[this.clientDimProp] -\n            (this.nav[this.scrollProp] - this.nav[this.scrollOffset])\n        ) < 2;\n\n    const finishStart = this.isRtl\n      ? Math.abs(\n          this.nav[this.scrollProp] +\n            this.nav[this.scrollOffset] -\n            this.nav[this.clientDimProp]\n        ) < 2\n      : this.nav[this.scrollOffset] === 0;\n\n    if (finishStart) {\n      this.hideControlStart = true;\n      this.hideControlEnd = false;\n    } else if (finishEnd) {\n      this.hideControlStart = false;\n      this.hideControlEnd = true;\n    } else {\n      this.hideControlEnd = false;\n      this.hideControlStart = false;\n    }\n  };\n\n  private handleBtnClick = (goEnd: boolean = false) => {\n    const navDim = this.navDim;\n    let scrollAmt;\n    if (goEnd) scrollAmt = this.nav[this.scrollOffset] + navDim - 20;\n    else scrollAmt = this.nav[this.scrollOffset] - navDim + 20;\n\n    try {\n      this.nav.scroll({\n        left: this.orientation === 'horizontal' ? scrollAmt : 0,\n        top: this.orientation === 'vertical' ? scrollAmt : 0,\n        behavior: 'smooth',\n      });\n    } catch (e) {\n      this.nav[this.scrollOffset] = scrollAmt;\n    }\n  };\n\n  private slotChangeHandler = () => {\n    if (this.allActiveItems.length < 2) return;\n    const item = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n    if (item) this.activeItem = item;\n    this.recalculatePositions();\n\n    /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */\n    this.allActiveItems.forEach((item) => {\n      if (this.mutationObservers.get(item)) return;\n\n      const mo = new MutationObserver(() => this.syncActiveItemIndicator());\n      mo.observe(item, {\n        characterData: true,\n        childList: true,\n        subtree: true,\n      });\n\n      this.mutationObservers.set(item, mo);\n    });\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.allActiveItems.length < 2) return;\n    const foundItem = event\n      .composedPath()\n      .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n    if (foundItem) this.activeItem = foundItem;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const foundItem = event\n        .composedPath()\n        .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n      if (foundItem) this.activeItem = foundItem;\n    }\n  };\n\n  private recalculatePositions = () => {\n    this.updateScrollControls();\n    this.syncActiveItemIndicator();\n    this.scrollToActiveItem();\n  };\n\n  // lifecycle\n\n  connectedCallback(): void {\n    this.instantReCalc = true;\n    this.isRtl =\n      this.orientation === 'horizontal' && !!this.host.closest('[dir=\"rtl\"]');\n\n    if (window['MutationObserver']) this.slotChangeHandler();\n\n    if (!window['ResizeObserver']) return;\n\n    if (this.ro) {\n      this.ro.disconnect();\n      this.ro = undefined;\n    }\n    const mo = (this.ro = new ResizeObserver(this.recalculatePositions));\n    mo.observe(this.host);\n  }\n\n  componentDidLoad(): void {\n    this.activeItem = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n    this.instantReCalc = false;\n  }\n\n  disconnectedCallback(): void {\n    if (this.ro) {\n      this.ro.disconnect();\n      this.ro = undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host dir={this.isRtl ? 'rtl' : null}>\n        <div\n          part=\"base\"\n          class={{\n            onav: true,\n            [`onav--${this.orientation}`]: true,\n            'onav--has-scroll-controls': this.hasScrollControls,\n            'onav--has-scroll-controls-start': !this.hideControlStart,\n            'onav--has-scroll-controls-end': !this.hideControlEnd,\n            'onav--no-transitions': this.instantReCalc,\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"onav__nav\">\n            {this.scrollControls && (\n              <nano-icon-button\n                part=\"scroll-button scroll-button-prev\"\n                class={{\n                  'onav__scroll-button': true,\n                  'onav__scroll-button--start': true,\n                }}\n                ref={(btn) => (this.startBtn = btn)}\n                onClick={() => this.handleBtnClick(false)}\n                label=\"Click to scroll\"\n                iconName={\n                  this.orientation === 'horizontal'\n                    ? 'light/chevron-left'\n                    : 'light/chevron-up'\n                }\n              />\n            )}\n\n            <div\n              part=\"scroller\"\n              ref={(el) => (this.nav = el)}\n              class=\"onav__scroller\"\n              onScroll={this.handleScroll}\n            >\n              <div\n                part=\"items\"\n                ref={(el) => (this.itemContainer = el)}\n                class=\"onav__items\"\n              >\n                <div\n                  part=\"indicator\"\n                  ref={(el) => (this.activeIndicator = el)}\n                  class=\"onav__active-indicator\"\n                />\n                <slot onSlotchange={this.slotChangeHandler} />\n              </div>\n            </div>\n\n            {this.scrollControls && (\n              <nano-icon-button\n                part=\"scroll-button scroll-button-next\"\n                class={{\n                  'onav__scroll-button': true,\n                  'onav__scroll-button--end': true,\n                }}\n                ref={(btn) => (this.endBtn = btn)}\n                onClick={() => this.handleBtnClick(true)}\n                label=\"Click to scroll\"\n                iconName={\n                  this.orientation === 'horizontal'\n                    ? 'light/chevron-right'\n                    : 'light/chevron-down'\n                }\n              />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{g as r}from"./p-d6a04b3a.js";var n=function(){var r;var n=new Promise((function(n){r=n}));return{promise:n,resolve:r}};var e=function(e,t){var o=e.prototype;var a=o.componentWillLoad;o.componentWillLoad=function(){var e=this;var o=r(this);var i=n();var s=new CustomEvent("openWormhole",{bubbles:true,composed:true,detail:{consumer:this,fields:t,updater:function(r,n){e[r]=n},onOpen:i}});o.dispatchEvent(s);return i.promise.then((function(){if(a){return a.call(e)}}))}};var t;(function(r){r["Filter"]="filter";r["Page"]="page";r["Replica"]="replica";r["Init"]="init"})(t||(t={}));const o=(r,n)=>e(r,n);export{t as S,o as W};
-//# sourceMappingURL=p-a26bdb65.js.map

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

@@ -1,5 +0,0 @@
-/*!
- * 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

@@ -1 +0,0 @@
-{"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-b27b56d3.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{a as t}from"./p-cdfc507e.js";const o=new Set;function c(t){o.add(t);document.body.classList.add("nano-scroll-lock")}function s(t){o.delete(t);if(o.size===0){document.body.classList.remove("nano-scroll-lock")}}function n(t,o,c=false){if(!c){try{t.scrollTo({left:o,behavior:"smooth"})}catch(c){t.scrollLeft=o}return}try{t.scrollTo({top:o,behavior:"smooth"})}catch(c){t.scrollTop=o}}function e(o,c,s="vertical",e="start"){const i=t(o,c);const r=i.top+c.scrollTop;const a=i.left+c.scrollLeft;const f=c.scrollLeft;const l=c.scrollLeft+c.offsetWidth;const u=c.scrollTop;const h=c.scrollTop+c.offsetHeight;if(s==="horizontal"||s==="both"){if(e==="start"){if(a<f)n(c,a);else if(a+o.clientWidth>l)n(c,a-c.offsetWidth+o.clientWidth)}else{n(c,c.scrollLeft+i.left-(c.offsetWidth/2+o.offsetWidth/2))}}if(s==="vertical"||s==="both"){if(e==="start"){if(r<u)n(c,r,true);else if(r+o.clientHeight>h){n(c,r-c.offsetHeight+o.clientHeight,true)}}else{n(c,c.scrollTop+i.top-(c.offsetHeight/2+o.offsetHeight/2),true)}}}export{c as l,e as s,s as u};
-//# sourceMappingURL=p-b27b56d3.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["locks","Set","lockBodyScrolling","lockingEl","add","document","body","classList","unlockBodyScrolling","delete","size","remove","scrollTo","element","scrollAmt","vertical","left","behavior","e","scrollLeft","top","scrollTop","scrollIntoView","container","direction","position","offset","getOffset","offsetTop","offsetLeft","minX","maxX","offsetWidth","minY","maxY","offsetHeight","clientWidth","clientHeight"],"sources":["./src/utils/scroll.ts"],"sourcesContent":["import { getOffset } from './dom';\n\nconst locks = new Set();\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.classList.add('nano-scroll-lock');\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove('nano-scroll-lock');\n  }\n}\n\nfunction scrollTo(\n  element: HTMLElement,\n  scrollAmt: number,\n  vertical: boolean = false\n) {\n  if (!vertical) {\n    try {\n      element.scrollTo({ left: scrollAmt, behavior: 'smooth' });\n    } catch (e) {\n      element.scrollLeft = scrollAmt;\n    }\n    return;\n  }\n  try {\n    element.scrollTo({ top: scrollAmt, behavior: 'smooth' });\n  } catch (e) {\n    element.scrollTop = scrollAmt;\n  }\n}\n\n/**\n * Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  position: 'center' | 'start' = 'start'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (position === 'start') {\n      if (offsetLeft < minX) scrollTo(container, offsetLeft);\n      else if (offsetLeft + element.clientWidth > maxX)\n        scrollTo(\n          container,\n          offsetLeft - container.offsetWidth + element.clientWidth\n        );\n    } else {\n      scrollTo(\n        container,\n        container.scrollLeft +\n          offset.left -\n          (container.offsetWidth / 2 + element.offsetWidth / 2)\n      );\n    }\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (position === 'start') {\n      if (offsetTop < minY) scrollTo(container, offsetTop, true);\n      else if (offsetTop + element.clientHeight > maxY) {\n        scrollTo(\n          container,\n          offsetTop - container.offsetHeight + element.clientHeight,\n          true\n        );\n      }\n    } else {\n      scrollTo(\n        container,\n        container.scrollTop +\n          offset.top -\n          (container.offsetHeight / 2 + element.offsetHeight / 2),\n        true\n      );\n    }\n  }\n}\n"],"mappings":";;;oCAEA,MAAMA,EAAQ,IAAIC,I,SAMFC,EAAkBC,GAChCH,EAAMI,IAAID,GACVE,SAASC,KAAKC,UAAUH,IAAI,mBAC9B,C,SAKgBI,EAAoBL,GAClCH,EAAMS,OAAON,GAEb,GAAIH,EAAMU,OAAS,EAAG,CACpBL,SAASC,KAAKC,UAAUI,OAAO,mB,CAEnC,CAEA,SAASC,EACPC,EACAC,EACAC,EAAoB,OAEpB,IAAKA,EAAU,CACb,IACEF,EAAQD,SAAS,CAAEI,KAAMF,EAAWG,SAAU,U,CAC9C,MAAOC,GACPL,EAAQM,WAAaL,C,CAEvB,M,CAEF,IACED,EAAQD,SAAS,CAAEQ,IAAKN,EAAWG,SAAU,U,CAC7C,MAAOC,GACPL,EAAQQ,UAAYP,C,CAExB,C,SAKgBQ,EACdT,EACAU,EACAC,EAAgD,WAChDC,EAA+B,SAE/B,MAAMC,EAASC,EAAUd,EAASU,GAClC,MAAMK,EAAYF,EAAON,IAAMG,EAAUF,UACzC,MAAMQ,EAAaH,EAAOV,KAAOO,EAAUJ,WAC3C,MAAMW,EAAOP,EAAUJ,WACvB,MAAMY,EAAOR,EAAUJ,WAAaI,EAAUS,YAC9C,MAAMC,EAAOV,EAAUF,UACvB,MAAMa,EAAOX,EAAUF,UAAYE,EAAUY,aAE7C,GAAIX,IAAc,cAAgBA,IAAc,OAAQ,CACtD,GAAIC,IAAa,QAAS,CACxB,GAAII,EAAaC,EAAMlB,EAASW,EAAWM,QACtC,GAAIA,EAAahB,EAAQuB,YAAcL,EAC1CnB,EACEW,EACAM,EAAaN,EAAUS,YAAcnB,EAAQuB,Y,KAE5C,CACLxB,EACEW,EACAA,EAAUJ,WACRO,EAAOV,MACNO,EAAUS,YAAc,EAAInB,EAAQmB,YAAc,G,EAK3D,GAAIR,IAAc,YAAcA,IAAc,OAAQ,CACpD,GAAIC,IAAa,QAAS,CACxB,GAAIG,EAAYK,EAAMrB,EAASW,EAAWK,EAAW,WAChD,GAAIA,EAAYf,EAAQwB,aAAeH,EAAM,CAChDtB,EACEW,EACAK,EAAYL,EAAUY,aAAetB,EAAQwB,aAC7C,K,MAGC,CACLzB,EACEW,EACAA,EAAUF,UACRK,EAAON,KACNG,EAAUY,aAAe,EAAItB,EAAQsB,aAAe,GACvD,K,EAIR,Q"}

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

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,c as i,w as s,h as e,a as n,g as o}from"./p-d6a04b3a.js";import{g as a}from"./p-74a7fc4f.js";import{d as h}from"./p-7bff5224.js";import{g as r}from"./p-cdfc507e.js";import{g as l}from"./p-dc565459.js";const c=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{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}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";function d(t){let i;if(t.id){i=document.querySelector(`label[for='${t.id}']`)}if(!i){i=t.closest("label")}return i}let p=0;const u=class{get allOptEles(){return this._allOptEles}set allOptEles(t){var i;this._allOptEles=t;if((i=this.connectedInput)===null||i===void 0?void 0:i.value)return;t.forEach((t=>{if(t.selected&&!this.selected.includes(t.value)){this.changeInputValue(t)}}))}constructor(s){t(this,s);this.nanoSelect=i(this,"nanoSelect",7);this.nanoDeselect=i(this,"nanoDeselect",7);this.nanoOptionsUpdated=i(this,"nanoOptionsUpdated",7);this.isNanoInput=false;this.typeToSelect="";this.listId=`nano-datalist-${p++}`;this.isFiltered=false;this.shouldFocus=false;this._allOptEles=[];this._dropDownConfig={skidding:-1};this.optSelected=t=>{t.stopPropagation();this.changeInputValue(t.detail);requestAnimationFrame((()=>this.inputChange()));if(this.type!=="selctMulti")this.shouldOpen=false};this.handleShow=async()=>{if(this.shouldFocus){this.shouldFocus=false;this.listBox.setFocus()}else if(this.type==="select")this.listBox.showActiveElement()};this.handleHide=()=>{this.open=false;const t=a();if(t.closest(this.host.tagName.toLowerCase())){this.connectedInput.select()}};this.inputClick=()=>{this.shouldOpen=true;this.manageDropdownDisplay()};this.inputKeydown=t=>{const i=["Shift","ArrowRight","ArrowLeft","Escape","Enter","Tab"];if(i.includes(t.key)){if(t.key==="Tab")this.shouldOpen=false;return}if(this.type==="select"&&!["ArrowDown","ArrowUp"].includes(t.key)&&(t.key!==" "||this.typeToSelectTimeout)){if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=window.setTimeout((()=>{this.typeToSelect="";this.typeToSelectTimeout=0}),750);this.typeToSelect+=t.key;this.setOptStartsWith()}return}this.shouldOpen=true;this.manageDropdownDisplay();if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();this.shouldFocus=true}};this.optionKeyDown=t=>{const i=["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "];if(i.includes(t.key)){if(t.key==="Escape")this.connectedInput.focus();return}const s=["Delete","Backspace"];if(this.type!=="select"&&(!this.exactMatch||s.includes(t.key))){this.connectedInput.focus()}};this.actvOptEles=[];this.connectedInput=undefined;this.inputLabel=undefined;this.hasNoResult=undefined;this.shouldOpen=undefined;this.canOpen=true;this.optionIds=[];this.selected=[];this.options=[];this.input=undefined;this.type="input";this.open=false;this.disableFilter=false;this.disabled=false;this.inputChange=h(this.inputChange.bind(this),50)}get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig=Object.assign(Object.assign({},this._dropDownConfig),t)}get activeOptions(){return this.allOptEles}openWatcher(){s((()=>{this.nanoDropdown.open=this.open;if(this.connectedInput)this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}async watchInputChange(){let t;if(t=this.host.closest("nano-input")){this.isNanoInput=true;this.connectedInput=await t.getInputElement()}else if(this.input&&typeof this.input==="string"&&(t=document.querySelector(this.input))){this.isNanoInput=false;this.connectedInput=t}else if(typeof this.input==="object"){this.connectedInput=this.input}}manageSlotChangeListener(){var t;if(!this.host)return;if((!this.options||!this.options.length)&&!this.mo){{const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.host,{childList:true,subtree:true})}this.processSlottedContent();return}if((t=this.options)===null||t===void 0?void 0:t.length){if(!!this.mo){this.mo.disconnect();this.mo=undefined}const t=this.host.querySelectorAll('[slot="internal-opts"]');s((()=>{var i;if(t===null||t===void 0?void 0:t.length)t.forEach((t=>t.remove()));this.allOptEles=this.options.flatMap(((t,i)=>{if(t.value||t.label){const s=Object.assign(document.createElement("nano-option"),{label:t.label,value:t.value,ariaPosinset:i,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+i,textContent:t.label?t.label:t.value,slot:"internal-opts"});this.host.append(s);return s}}));if(((i=this.connectedInput)===null||i===void 0?void 0:i.value.length)&&this.type!=="select"){this.inputChange()}else{this.actvOptEles=[...this.allOptEles]}}))}}watchTypeChange(){if(!this.connectedInput)return;let t={closeOnSelect:false};let i="both";let s=false;switch(this.type){case"input":t={closeOnSelect:true};break;case"select":i="list";s=true;t={closeOnSelect:true,placement:"center"};break}if(!this.isNanoInput){t.tetherTo=this.connectedInput}this.dropDownConfig=Object.assign(Object.assign({},this.dropDownConfig),t);this.connectedInput.setAttribute("aria-autocomplete",i);this.connectedInput.readOnly=s}manageInputEvents(t,i){var e;if(!!i){const t=i.closest("nano-input");if(t){t.removeEventListener("nanoChange",this.inputChange)}this.removeEventListeners(i);this.inputLabel=null;s((()=>{i.removeAttribute("role");i.removeAttribute("aria-expanded");i.removeAttribute("aria-controls");i.removeAttribute("aria-owns");i.removeAttribute("aria-haspopup");i.removeAttribute("aria-autocomplete");i.removeAttribute("autocomplete")}))}if(!!t){const i=t.closest("nano-input");if(i){i.addEventListener("nanoChange",this.inputChange)}t.addEventListener("change",this.inputChange);t.addEventListener("click",this.inputClick);t.addEventListener("keydown",this.inputKeydown);t.addEventListener("input",this.inputChange);this.listId=this.host.id||this.listId;this.inputLabel=((e=t===null||t===void 0?void 0:t.labels)===null||e===void 0?void 0:e.item(0))||d(t);s((()=>{this.host.id=this.listId;t.setAttribute("role","combobox");t.setAttribute("aria-expanded","false");t.setAttribute("aria-controls",this.listId);t.setAttribute("aria-owns",this.listId);t.setAttribute("aria-haspopup","listbox");t.setAttribute("autocomplete","off")}))}}watchActvOptChange(){var t;let i=0;const e=((t=this.connectedInput)===null||t===void 0?void 0:t.value)||"";const n=[];s((()=>{this.allOptEles.forEach(((t,s)=>{if(this.actvOptEles.includes(t)){i++;t.setAttribute("aria-posinset",i+"");t.setAttribute("aria-setsize",this.actvOptEles.length+"");t.hidden=false;this.isSelected(t,e)}else{t.removeAttribute("aria-posinset");t.removeAttribute("aria-setsize");t.hidden=true;t.selected=false}t.id=this.listId+"-option-"+s;n.push(t.id)}));this.optionIds=n}))}manageCanOpen(){if(this.actvOptEles.length||this.hasNoResult)this.canOpen=true;else this.canOpen=false}manageDropdownDisplay(){if(this.shouldOpen&&this.canOpen&&!this.disabled)this.open=true;if(!this.shouldOpen||!this.canOpen)this.open=false;this.openWatcher()}fireActiveOptsEvent(){this.nanoOptionsUpdated.emit(this.actvOptEles)}isSelected(t,i){if(i===t.value||this.selected.includes(t.value)){t.selected=true}else t.selected=false}get dropwdownOpen(){if(!this.nanoDropdown||!this.open)return false;return true}get exactMatch(){return this.allOptEles.find((t=>this.connectedInput.value===t.value))}changeInputValue(t){var i;let s;if(this.selected.includes(t.value)){this.selected=this.selected.filter((i=>i!==t.value));s=this.nanoDeselect.emit(t)}else{this.selected=[...this.selected];s=this.nanoSelect.emit(t)}if(!s.defaultPrevented){if(this.connectedInput)this.connectedInput.value=t.value;const s=new window.Event("change");(i=this.connectedInput)===null||i===void 0?void 0:i.dispatchEvent(s)}}setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect;const i=this.allOptEles.find((i=>i.value.trim().length>0&&!i.disabled&&(t(i.textContent)||t(i.value)||t(i.label)||t(i.filterMeta))));if(i)this.changeInputValue(i)}removeEventListeners(t){const i=t.closest("nano-input");if(i){i.removeEventListener("nanoChange",this.inputChange)}t.removeEventListener("change",this.inputChange);t.removeEventListener("click",this.inputClick);t.removeEventListener("keydown",this.inputKeydown);t.removeEventListener("input",this.inputChange)}processSlottedContent(){requestAnimationFrame((()=>{var t;this.allOptEles=Array.from(this.host.querySelectorAll("nano-option"));this.hasNoResult=!!this.host.querySelector('[slot="no-result"]');if(((t=this.connectedInput)===null||t===void 0?void 0:t.value.length)&&this.type!=="select"){this.inputChange()}else this.actvOptEles=this.allOptEles}))}inputChange(){if(this.disableFilter){this.actvOptEles=this.allOptEles;return}const t=this.connectedInput.value;const i=t.trim().toLowerCase();let s=false;const e=[];const n=t=>t.toLowerCase().indexOf(i)>-1;this.allOptEles.forEach((i=>{if((t===i.value||t===i.label)&&this.type!=="selctMulti"){i.selected=true;s=true}else this.isSelected(i,t)}));this.allOptEles.forEach((t=>{if(!i.length||s){e.push(t)}else if(t.value.trim().length>0&&!t.disabled&&(n(t.textContent)||n(t.value)||n(t.label)||n(t.filterMeta))){e.push(t)}}));this.isFiltered=i.length&&!s;this.actvOptEles=e}connectedCallback(){this.watchInputChange()}componentDidLoad(){this.manageSlotChangeListener();this.openWatcher()}componentDidRender(){setTimeout((()=>{if(!this.connectedInput)console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",this.host)}),500)}disconnectedCallback(){if(!!this.mo){this.mo.disconnect();this.mo=undefined}if(this.connectedInput)this.removeEventListeners(this.connectedInput)}render(){return e(n,{role:this.actvOptEles.length?"listbox":undefined,"aria-owns":this.optionIds.length?this.optionIds.join(" "):undefined,"aria-label":this.optionIds.length?"Select options from the list below":undefined},e("nano-dropdown",Object.assign({},this.dropDownConfig,{ref:t=>this.nanoDropdown=t,dialogTitle:"Select options from the list below",class:{dlist__dropdown:true,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:this.handleHide,role:"group"}),e("nano-menu",{hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:undefined,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown,ref:t=>this.listBox=t,role:"list"},e("slot",{name:"list-top"}),!this.options.length&&e("slot",null),!!this.options.length&&e("slot",{name:"internal-opts"}),e("slot",{name:"list-bottom"})),e("nano-menu",{type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen}},e("slot",{name:"no-result"})),!!this.actvOptEles&&e("div",{class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}get host(){return o(this)}static get watchers(){return{open:["openWatcher"],input:["watchInputChange"],options:["manageSlotChangeListener"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}}};u.style=c;const f=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);overscroll-behavior:none;min-width:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:block}";const g=class{constructor(s){t(this,s);this.nanoFocus=i(this,"nanoFocus",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoSelect=i(this,"nanoSelect",7);this.ignoreMouseEvents=false;this.typeToSelect="";this._hasFocus=false;this.handleFocus=()=>{this.setActiveFocusItem(this.selectedItem||this.getItems[0]);this._hasFocus=true;this.nanoFocus.emit()};this.handleClick=t=>{const i=t.target;const s=i.closest("nano-nav-item");if(s&&!s.disabled){this.nanoSelect.emit(s)}};this.handleKeyDown=t=>{clearTimeout(this.ignoreMouseTimeout);this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=false),500);this.ignoreMouseEvents=true;switch(t.key){case" ":if(this.activeItem)this.activeItem.click();break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":const i=this.getItems;const s=this.activeItem;let e=i.indexOf(s);if(i.length){t.preventDefault();if(t.key==="ArrowDown"){e++}else if(t.key==="ArrowUp"){e--}else if(t.key==="Home"||t.key==="PageUp"){e=0}else if(t.key==="End"||t.key==="PageDown"){e=i.length-1}if(e<0)e=i.length-1;if(e>i.length-1)e=0;this.setActiveFocusItem(i[e]);if(i[e])i[e].scrollIntoView({block:"nearest"});return}break}if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750);this.typeToSelect+=t.key;const i=this.getItems;for(const t of i){const i=t.shadowRoot.querySelector("slot:not([name])");const s=l(i).toLowerCase().trim();if(s.substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}}};this.handleMouseOver=t=>{const i=t.target;const s=i.closest("nano-nav-item")||i.closest("nano-option");if(s&&!this.ignoreMouseEvents){this.setActiveFocusItem(s)}};this.type="menu";this.label=undefined}get hasFocus(){return this._hasFocus}async setFocus(){var t;if((t=this.menu)===null||t===void 0?void 0:t.focus)this.menu.focus({preventScroll:true})}async removeFocus(){var t;if((t=this.menu)===null||t===void 0?void 0:t.blur)this.menu.blur()}async showActiveElement(){if(this.selectedItem)this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;const i=this.el.querySelectorAll("nano-nav-item.secondary-open");if(i.length){const s=i[i.length-1];t=Array.from(s.querySelectorAll("nano-nav-item, nano-option"))}else{t=r(this.el,"nano-nav-item, nano-option","slot")}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=a();return this.getItems.find((i=>i.getAttribute("tabindex")==="0"||i===t||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=true){const s=this.getItems;const e=!t||t.disabled?s.find((t=>t.selected))||s[0]:t;s.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex",t===e?"0":"-1")));if(!i)return;if(e){e.setFocus?e.setFocus():e.focus()}else this.menu.focus()}handleBlur(t){if(!this.hasFocus)return;const i=t;let s;if(i.key){if(i.key!=="Tab")return;s=a()&&a().closest(this.el.tagName.toLowerCase())===this.el}else s=!!t.composedPath().find((t=>t===this.el));if(!s){this.resetActiveItem();this._hasFocus=false;this.nanoBlur.emit()}}componentDidLoad(){{r(this.el,":not(nano-nav-item):not(nano-option):not([role])",true).forEach((t=>t.setAttribute("role","none")))}}render(){return e(n,{role:this.type==="menu"?"menu":"group"},e("div",{onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:undefined,ref:t=>this.menu=t,part:"base",class:{menu:true,["menu--"+this.type]:true,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},e("slot",null)))}get el(){return o(this)}};g.style=f;const m=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;width:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){-webkit-margin-end:0.5em;margin-inline-end:0.5em}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){-webkit-margin-start:0.5em;margin-inline-start:0.5em}.option__check{visibility:hidden;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";let b=0;const v=class{constructor(s){t(this,s);this.nanoSelect=i(this,"nanoSelect",7);this.optId=`nano-option-${b++}`;this.hasFocus=false;this.value="";this.label="";this.selected=false;this.disabled=false;this.filterMeta="";this.handleClick=h(this.handleClick.bind(this),5)}valueChanged(){if(!this.value||!this.value.length)this.value=this.labelContent}labelChanged(){if(!this.label||!this.label.length)this.label=this.labelContent.length?this.labelContent:this.value}handleKeyDown(t){if(t.key!==" "&&t.key!=="Enter")return;t.preventDefault();this.nanoSelect.emit(this.host)}handleClick(){if(this.disabled)return;this.nanoSelect.emit(this.host)}get labelContent(){return r(this.host,"*:not([slot])",false).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged();this.labelChanged()}render(){return e(n,{role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},e("div",{onMouseDown:this.handleClick,id:this.optId,class:{option:true,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},e("div",{part:"check-icon",class:"option__check"},e("slot",{name:"check-icon"},e("nano-icon",{name:"light/check","aria-hidden":"true"}))),e("div",{part:"start",class:"option__start"},e("slot",{name:"start"})),e("div",{part:"label",class:"option__label"},e("slot",null,this.label||this.value)),e("div",{part:"end",class:"option__end"},e("slot",{name:"end"}))))}get host(){return o(this)}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};v.style=m;export{u as nano_datalist,g as nano_menu,v as nano_option};
-//# sourceMappingURL=p-c80336b2.entry.js.map