@nanoporetech-digital/components 4.0.0 → 4.2.0

package/dist/nano-components/p-0c077605.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,h as e,i as n,c as i,a as s,g as a}from"./p-f6a8467a.js";import{b as o,g as r,c as l}from"./p-257432ff.js";import{d as c}from"./p-f6de2d5d.js";import{g as h}from"./p-45abbbdd.js";import{g as d}from"./p-74a7fc4f.js";import{c as p}from"./p-411bb8f1.js";import{d as u,a as b}from"./p-9746b0a5.js";import{F as f,a as v}from"./p-5ac74848.js";const m=class{constructor(e){t(this,e);this.myAccountUser=undefined;this.userProfileUrl=undefined}render(){var t;return!!this.myAccountUser&&e("a",{href:this.userProfileUrl,class:"user-profile"},e("div",{class:"left"},e("div",{class:"avatar-container"},e("img",{class:"avatar",src:(t=this.myAccountUser)===null||t===void 0?void 0:t.small_avatar_url,alt:"User Avatar",height:75,width:75}),this.myAccountUser.is_nanopore_user&&e("img",{class:"logo-small",src:n(`../nano-assets/ont-wheel-light.svg`),alt:"Nanopore Logo"})),e("div",{class:"user-details"},e("span",{class:"name"},this.myAccountUser.name),e("span",{class:"bio"},this.myAccountUser.job_title," at ",this.myAccountUser.company))),e("div",{class:"right"},e("div",{class:"chevron-right"},e("nano-icon",{slot:"icon-end",name:"light/chevron-right","aria-label":"navigate to ..."}))))}};const g=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important;border-radius:inherit}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(nano-icon[slot=icon-start]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}:host .link ::slotted(nano-icon[slot=icon-end]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0}:host .link,:host button,:host a{-webkit-border-after:var(--border-bottom);border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-height:100%;inset-block-start:0;inset-inline-start:0;width:100%;z-index:1;opacity:0;transition:opacity 0.2s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translateX(100%)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translateX(0);transition:opacity 0.3s ease, transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:"";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}:host(.nano-global-nav-bar) .selected button::before,:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{-webkit-padding-before:calc(var(--padding-top) / 2);padding-block-start:calc(var(--padding-top) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:calc(var(--padding-bottom) / 2);padding-block-end:calc(var(--padding-bottom) / 2);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}:host(.nano-menu-drawer) .text{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0;text-align:start;flex:0 1 auto;min-width:130px;width:130px}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);width:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-width:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:"";display:block;position:absolute;width:6px;height:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){:host(.nano-menu-drawer) .notification::after{width:7px;height:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}';const _=class{constructor(e){t(this,e);this.nanoClose=i(this,"nanoClose",7);this.nanoOpen=i(this,"nanoOpen",7);this.nanoOpening=i(this,"nanoOpening",7);this.nanoClosing=i(this,"nanoClosing",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.hasSecondarySlot=false;this.animating=false;this.closeSecondary=async()=>{if(!this.hasSecondarySlot||!this.didOpen)return;this.open=false;await c(this.secondaryDiv,"open",false);this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});this.didOpen=false};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}if(!this.hasSecondarySlot||this.didOpen)return;this.open=true;await c(this.secondaryDiv,"open",true);this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});this.didOpen=true};this.toggleSecondary=()=>{if(!this.hasSecondarySlot)return;if(this.didOpen)this.closeSecondary();else this.openSecondary()};this.handleFocus=()=>{this.hasFocus=true;if(this.href&&!this.animating&&this.hasSecondarySlot)this.openSecondary();this.nanoFocus.emit()};this.handleHostBlur=()=>{if(this.animating)return;this.el.removeAttribute("tabindex");this.hasFocus=false;this.nanoBlur.emit()};this.handleHostClick=t=>{if(!this.hasAnchorEle)return;const e=t.target.closest("a, button");if(!e)this.btn.click()};this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let t=0;if(o(this.el,".secondary-open.has-secondary").length)t=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((async()=>await this.openSecondary()),t);this.animating=false};this.handleMouseLeave=()=>{if(!this.href)return;clearTimeout(this.waitShow);this.fromHover=true;this.animating=true;this.waitHide=window.setTimeout((async()=>await this.closeSecondary()),300);this.animating=false};this.handleClick=()=>{this.fromHover=false;if(this.hasSecondarySlot)this.toggleSecondary()};this.hasAnchorEle=false;this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;this.hasFocus=false;this.href=null;this.target="_self";this.disabled=false;this.open=false;this.selected=false;this.secondaryActiveWidth=0;this.secondaryFallback=()=>{};this.closeOnBlur=true;this.notification=false}async setFocus(){if(!this.btn)return;this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(!this.hasSecondarySlot)return;if(!this.didOpen){setTimeout((()=>{if(!this.fromHover&&(!document.activeElement||document.activeElement===document.body))this.btn.focus({preventScroll:true});this.el.tabIndex=null;this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{if(!this.fromHover){const t=new window.IntersectionObserver((e=>{if(e[0].boundingClientRect.top<0){this.secondaryDiv.scrollIntoView({behavior:"smooth"})}t.disconnect()}),{threshold:1});t.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});const e=h(this.secondaryDiv,true);if(e[0])e[0].focus();this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}handleClose(t){if(!this.didOpen||!this.hasSecondarySlot)return;if(!t.composedPath().some((t=>t===this.secondaryDiv)))this.toggleSecondary()}componentWillLoad(){const t=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!t;const e=r(this.el,"a, button")[0];this.hasAnchorEle=!!e;if(e){this.href=e.href?e.href:null;this.btn=e;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}}connectedCallback(){this.isInGlobalNav=false;this.isInMenuDrawer=false;this.globalNavEle=this.el.closest("nano-global-nav");this.isInMenuDrawer=!!this.el.closest("nano-menu-drawer");this.isInMenu=!!this.el.closest("nano-menu");this.isInGlobalNav=this.el.parentElement===this.globalNavEle||!!this.el.closest(".global-nav")}render(){return e(s,{class:{"has-secondary":this.hasSecondarySlot,"secondary-open":this.open,selected:this.selected,"has-focus":this.hasFocus,disabled:this.disabled,"nano-global-nav":this.isInGlobalNav,"nano-menu-drawer":this.isInMenuDrawer,"nano-menu":this.isInMenu},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:"menuitem"},e("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected},part:"ctrl-wrapper"},this.href&&!this.hasAnchorEle&&!this.disabled&&e("a",{part:"ctrl ctrl--anchor",target:this.target,ref:t=>this.btn=t,href:this.href,onFocus:this.handleFocus,class:{notification:this.notification}},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&e("button",{part:"ctrl ctrl--button",ref:t=>this.btn=t,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled,class:{notification:this.notification}},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&e("div",{class:"link"},e("slot",{name:"icon-start"}),e("slot",null),e("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&e("div",{class:"secondary-menu",ref:t=>this.secondaryDiv=t,tabIndex:-1},e("div",{class:"secondary-menu-content",part:"secondary-wrapper"},e("slot",{name:"secondary"})),e("div",{class:"secondary-menu-mask",onClick:this.closeSecondary,part:"secondary-mask"}))))}get el(){return a(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};_.style=g;const w='.sc-nano-select-h{box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{box-sizing:border-box}[hidden].sc-nano-select{display:none !important}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-select{min-inline-size:100%;display:block}.form-ctrl.has-helper-end.sc-nano-select{display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-select{opacity:1}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select{flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper.sc-nano-select{display:none}.form-ctrl__wrapper.sc-nano-select{display:block}label.sc-nano-select,.form-ctrl__more.sc-nano-select,.form-ctrl__error.sc-nano-select,.form-ctrl__helper.sc-nano-select{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.form-ctrl__more.visually-hide.sc-nano-select,.form-ctrl__error.visually-hide.sc-nano-select,.form-ctrl__helper.visually-hide.sc-nano-select{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}.form-ctrl__float-label.sc-nano-select{padding-block:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;transform:translateY(-50%);transform-origin:top left;inset-block-start:50%;transition:all 0.125s ease-in;opacity:1}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:1}.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:50%}.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.form-ctrl__label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);-webkit-padding-after:var(--padding-bottom);padding-block-end:var(--padding-bottom);line-height:1;display:flex}.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{margin-block:unset;-webkit-margin-end:5px;margin-inline-end:5px;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;appearance:none;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{margin-block:unset;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--invalid)}.has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:1}.form-ctrl__more.sc-nano-select{block-size:1em;position:relative;margin-block:4px var(--padding-bottom);margin-inline:3px 0}.form-ctrl__helper.sc-nano-select,.form-ctrl__error.sc-nano-select{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-select{opacity:0}.form-ctrl__helper-end.sc-nano-select{flex:1 1 30%;min-inline-size:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .form-ctrl__error.sc-nano-select{opacity:1}.form-ctrl__input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);inline-size:100%;padding:0 !important;position:relative;flex:1 0 auto;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-select{display:flex;align-items:stretch;flex:1;max-inline-size:100%}.form-ctrl__clear-btn.sc-nano-select,.form-ctrl__slot-end.sc-nano-select,.form-ctrl__slot-start.sc-nano-select,.form-ctrl__slot-value-end.sc-nano-select{--nano-icon-size:1.4em;margin-block:0;margin-inline:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:flex;align-items:stretch;inline-size:auto}.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select{display:none}.form-ctrl__slot-start.sc-nano-select-s>*,.form-ctrl__slot-start .sc-nano-select-s>*,.form-ctrl__slot-end.sc-nano-select-s>*,.form-ctrl__slot-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;padding-inline:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;align-items:center;display:flex;block-size:100%;z-index:1}.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;inline-size:0;-webkit-appearance:none;appearance:none;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{padding-block:0;padding-inline:var(--padding-start) var(--padding-end);opacity:1;inline-size:auto}.form-ctrl__clear-btn.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239 65 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0 116 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgb(var(--color-invalid) / 100%);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgb(var(--color--focus-rgb) / 100%);--clear-btn-color--invalid:rgb(var(--color-invalid) / 100%);--label-color:var(--nano-input-label-color, "currentcolor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentcolor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186 220 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.select__native-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding:unset;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;appearance:none;margin:0;box-sizing:border-box;resize:none;overflow:hidden;cursor:default;line-height:2.5em}.has-float-label.sc-nano-select .select__native-input.sc-nano-select{line-height:2.1em;min-height:2.1em;-webkit-padding-before:1.4em;padding-block-start:1.4em}.select__native-input.sc-nano-select::selection{background:transparent}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.select__native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.select__native-input.sc-nano-select::-webkit-search-decoration,.select__native-input.sc-nano-select::-webkit-search-cancel-button,.select__native-input.sc-nano-select::-webkit-search-results-button,.select__native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.select__native-input.sc-nano-select:invalid{box-shadow:none}.select__native-input.sc-nano-select::-ms-clear,.select__native-input.sc-nano-select::-ms-reveal{display:none}.select__native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select{line-height:1.5em;padding-block:var(--padding-top) var(--padding-bottom);white-space:pre-wrap}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select{-webkit-padding-before:1.8em;padding-block-start:1.8em}.masked.sc-nano-select-h .select__native-input.sc-nano-select{opacity:0;position:absolute;inset-inline-start:0;inset-block-start:0}.select__mask.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);pointer-events:none;line-height:2.5em;min-height:2.5em}.select__multi-wrap.sc-nano-select{padding-block:0 var(--padding-bottom);padding-inline:0 0;display:flex;flex:1;flex-wrap:wrap;overflow:hidden;align-items:flex-start}.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select{-webkit-padding-before:1em;padding-block-start:1em}.select__multi-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-bottom) 0;min-width:50px;width:100%;max-height:100%;-webkit-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;flex:0;position:relative;box-sizing:border-box;line-height:calc(2.5em - var(--padding-bottom));height:calc(2.5em - var(--padding-bottom))}.select__multi-input.sc-nano-select:last-child{flex:1}.select__multi-value.sc-nano-select{margin-block:var(--padding-bottom) 0;margin-inline:var(--padding-start) -3px;background:rgb(var(--multi-input-value-bg)/80%);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.35em 0.5em;max-width:100%;display:flex;align-items:center;font-size:var(--input-font-size);letter-spacing:1px;max-height:calc(2.5em - 8px)}.select__multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1}.select__multi-value-remove.sc-nano-select{background-position:center;-webkit-padding-start:0.5em;padding-inline-start:0.5em;margin:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;appearance:none;display:flex;align-items:center;inset-block-start:0;font-size:1em}.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.form-ctrl__float-label.sc-nano-select{width:calc(100% - (1em + var(--padding-start) * 2))}.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em}.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(21%);inset-block-start:0}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}';let y=0;const x=class{get inputCtrl(){return this._inputCtrl}set inputCtrl(t){if(t===this._inputCtrl)return;this._inputCtrl=t;this.setDataListOpts()}get selectWrap(){return this._selectWrap}set selectWrap(t){if(this._selectWrap===t)return;this._selectWrap=t;this.setDataListOpts()}get datalist(){return this._datalist}set datalist(t){if(this._datalist===t)return;this._datalist=t;this.setDataListOpts()}constructor(e){t(this,e);this.nanoChange=i(this,"nanoChange",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.nanoDidLoad=i(this,"nanoDidLoad",7);this.nanoDidUnload=i(this,"nanoDidUnload",7);this.nanoSearchChange=i(this,"nanoSearchChange",7);this.nanoValidate=i(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${y++}`;this.rtl=false;this.onInit=true;this.customError="";this._value=this.multiple?[]:"";this._options=[];this.customValidate=()=>{if(!this.nativeSelect||!!this.customError||!this.nativeSelect["setCustomValidity"])return;this.nativeSelect.setCustomValidity("");if(this.required&&!this.valArray.length){this.nativeSelect.setCustomValidity("Please fill in this field.");return true}if(this.valArray.length&&!this.allowCustomValues&&!this.isValidValues()){this.nativeSelect.setCustomValidity("Please choose an item from this field.");return true}if(this.max&&this.valArray.length>this.max){this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);return true}if(this.min&&this.valArray.length<this.min){this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);return true}return false};this.showInlineValidation=t=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this._invalid=false;this.showErrorMsg=false;this.errorMessage="";if(!this.nativeSelect.validity.valid){this.errorMessage=this.nativeSelect.validationMessage;this._invalid=true;this.showErrorMsg=true}this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:t})};this.handleInvalid=t=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(this.showInlineError)t.preventDefault();requestAnimationFrame((()=>this.showInlineValidation(t)))};this.setValue=t=>{t.preventDefault();if(!this.multiple){this.value=t.detail.value;return}if(this.value&&this.value.length&&this.value.includes(t.detail.value))return;if(this.max&&this.value.length===this.max)return;this.currInsertIndex++;this.value=[...this.value.slice(0,this.currInsertIndex),t.detail.value,...this.value.slice(this.currInsertIndex)];this.inputSearchVal=""};this.removeValue=t=>{if(!this.multiple||!this.value.length)return;if(!t)t=this.value[this.value.length-1];this.value=this.value.filter((e=>e!==t));this.currInsertIndex--;this.setFocus()};this.setOptions=()=>{if(!this.datalist||!this.datalist.activeOptions||!this.datalist.activeOptions.length)return;this._eOptions=this.datalist.activeOptions.map((t=>{const{value:e,selected:n,label:i,filterMeta:s}=t;return{value:e,selected:n,label:i,filterMeta:s}}));this.customValidate()};this.handleDocumentKeyDown=t=>{if(!this.multiple||!this.hasFocus)return;if(!this.inputSearchVal){let e;switch(t.key){case"Backspace":if(this.inputCtrl.previousElementSibling)e=this.inputCtrl.previousElementSibling;else break;this.removeValue(e.dataset.value||null);break;case"Delete":if(this.inputCtrl.nextElementSibling)e=this.inputCtrl.nextElementSibling;else break;this.removeValue(e.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;if(t.key==="ArrowLeft"&&this.inputCtrl.previousSibling)this.currInsertIndex--;if(t.key==="ArrowRight"&&this.inputCtrl.nextSibling)this.currInsertIndex++;setTimeout((()=>{this.inputCtrl.focus()}),20);t.preventDefault();break}}};this.onBlur=()=>{this.hasFocus=false;requestAnimationFrame((()=>{if(this.validateOn==="dirty"&&!this.hasFocus)this.showInlineValidation()}));this.nanoBlur.emit();if(!this.allowCustomValues&&this.multiple){this.inputSearchVal="";const t=new window.Event("change");this.inputCtrl.dispatchEvent(t)}};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.clearSelectValue=t=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation()}if(this.multiple){this.value=[];this.currInsertIndex=-1}else this.value="";this.inputCtrl.value="";const e=new window.Event("change");this.inputCtrl.dispatchEvent(e)};this.onClick=()=>{this.setFocus()};this.onDragStart=t=>{const e=t.target;this.dragVal=e.dataset.value};this.onDragEnd=t=>{this.dragVal=null;t.preventDefault()};this.onDragLeave=t=>{const e=t.target;const n=e.dataset&&e.dataset.value?e.dataset.value:null;if(!n||this.dragVal===n||!this.value.includes(this.dragVal)){t.preventDefault();return}const i=this.value.indexOf(n);const s=this.value.indexOf(this.dragVal);const a=this.value;const o=a[i];a[i]=a[s];a[s]=o;this.value=[...a]};this.onMultiInput=t=>{this.inputSearchVal=t.target.value.trim();this.nanoSearchChange.emit({value:t.target.value.trim()})};this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.inputSearchVal="";this._invalid=false;this.color=undefined;this.autofocus=false;this.disabled=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.label=undefined;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.name=this.selectId+"-name";this.placeholder=undefined;this.readonly=false;this.required=false;this.size=undefined;this.max=undefined;this.min=undefined;this.form=undefined;this.allowCustomValues=false;this._eOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.showInlineValidation=u(this.showInlineValidation,50)}get invalid(){return this._invalid}get validityMessage(){if(!this.nativeSelect)return"";return this.nativeSelect.validationMessage}get value(){return this._value}set value(t){if(typeof t==="string"){if(this.multiple)this._value=t.split(",");else this._value=t}else if(Array.isArray(t)){if(this.multiple)this._value=t;else this._value=t[0]}}get options(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._eOptions.map((t=>{const{value:e,selected:n,label:i,filterMeta:s}=t;return{value:e,selected:n,label:i,filterMeta:s}}))}set options(t){this._options=t.map((t=>{if(typeof t==="string")return{value:t,label:t};else return t}))}debounceChanged(){this.nanoSearchChange=b(this.nanoSearchChange,this.debounce)}shouldValidate(){if(this.onInit)return;if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}valueChanged(){this.customValidate();if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}requestAnimationFrame((()=>{this.shouldValidate();this.nanoChange.emit({value:this.value})}))}setDataListOpts(){if(!this.datalist||!this.selectWrap)return;this.datalist.input=this.inputCtrl;const t=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign(Object.assign({},t),this.dropDownConfig),{tetherTo:this.selectWrap})}async reportValidity(t){return new Promise((e=>{if(t){this.customValidate();this.showInlineValidation()}setTimeout((()=>{e({isValid:!this._invalid,errorMessage:this.nativeSelect.validationMessage})}),50)}))}async setFocus(){if(!this.inputCtrl)return;this.inputCtrl.focus();setTimeout((()=>this.inputCtrl.click()),50)}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(t){if(this.nativeSelect){this.customError=t;this.nativeSelect.setCustomValidity(t);this.showInlineValidation()}}get valArray(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value}isValidValues(){return this.valArray.find((t=>this.options.find((e=>e.value===t))))}slotChangeObserver(){if(!window["MutationObserver"])return;const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]')}getLabel(t){const e=this.options.find((e=>{var n;return!e.disabled&&((n=e.value)===null||n===void 0?void 0:n.length)&&e.value===t}));return e&&e.label?e.label:t}onReset(t){const e=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!e||t.target!==this.el.closest("form"))return;this.clearSelectValue()}handleBlur(t){if(!this.hasFocus)return;const e=t;let n;requestAnimationFrame((()=>{if(e.key){if(e.key!=="Tab")return;n=d()}else n=t.target;if(l(this.el.tagName.toLowerCase(),n)!==this.el){this.onBlur()}}))}connectedCallback(){this.debounceChanged();this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}));if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.customValidate();this.setDataListOpts();requestAnimationFrame((()=>this.onInit=false))}componentWillLoad(){this.processSlottedContent()}render(){const t=this.selectId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";const i=this.hasHelperEndSlot?this.selectId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const a=(({el:t,floatLabel:e,label:n,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h})=>({el:t,floatLabel:e,label:n,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h}))(this);const o=Object.assign(Object.assign({},a),{labelId:t,moreId:n,helperEndId:i,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId});const r=(({readonly:t,disabled:e})=>({readonly:t,disabled:e,clearControl:this.clearSelect}))(this);return e(s,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},p(this.color)),{"has-value":!!this.value.length||!!this.inputSearchVal.length,"has-focus":this.hasFocus,"is-invalid":this.invalid,"has-label":this.label!==null&&!this.floatLabel,"has-float-label":this.label!==null&&this.floatLabel,rtl:this.rtl,"has-multiple":this.multiple,"has-clr-btn":this.clearSelect,masked:this.mask})},e(f,Object.assign({},o),e(v,Object.assign({},r,{onClearText:this.clearSelectValue,control:this.el,ref:t=>this.selectWrap=t,endValueSlot:e("slot",{name:"down-arrow"},e("nano-icon",{slot:"value-end",name:"light/chevron-down"}))}),this.multiple&&e("div",{class:"select__multi-wrap select"},this.multipleValues(t,n,i)),!this.multiple&&[this.mask&&e("div",{class:"select__mask"},this.getLabel(this.value)),e("input",{id:this.selectId,class:"select__native-input",ref:t=>this.inputCtrl=t,"aria-labelledby":t+" "+n+" "+i,disabled:this.disabled,form:this.form,placeholder:this.placeholder,readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&e("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:t=>this.datalist=t,selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:t=>{t.preventDefault();this.removeValue(t.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&e("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:()=>this.inputCtrl.focus()},e("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),e("slot",null)),e("select",{id:this.selectId+"-hidden",class:"select__native-ctrl",ref:t=>this.nativeSelect=t,"aria-labelledby":t+" "+n+" "+i,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((t=>e("option",{value:t,selected:true},t))),!this.allowCustomValues&&this.options.map((t=>e("option",{value:t.value,selected:this.valArray.includes(t.value),disabled:t.disabled,label:t.label},this.valArray.includes(t.value))))))}multipleValues(t,n,i){const s=e("input",{class:"select__multi-input",id:this.selectId,ref:t=>this.inputCtrl=t,readOnly:this.readonly,disabled:this.disabled,autoFocus:this.autofocus,autocomplete:"off",onKeyDown:this.handleDocumentKeyDown,onInput:this.onMultiInput,value:this.inputSearchVal,onTouchStart:this.onClick,onMouseDown:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder&&!this.value.length?this.placeholder:"","aria-labelledby":t+" "+n+" "+i});if(!this.value.length)return s;return this.value.map(((t,n)=>{let i=e("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,onDragOver:t=>t.preventDefault(),draggable:true,"data-value":t,ref:t=>this.valueItems.push(t),class:"select__multi-value"},e("span",null,this.getLabel(t)),e("button",{class:"select__multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(t)},onMouseUp:()=>{this.removeValue(t)}},e("nano-icon",{name:"light/times"})));if(n===0&&this.currInsertIndex<0)i=[s,i];else if(n===this.currInsertIndex)i=[i,s];return i}))}get el(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};x.style=w;export{m as nano_global_nav_user_profile,_ as nano_nav_item,x as nano_select};
+//# sourceMappingURL=p-0c077605.entry.js.map

package/dist/nano-components/p-0c077605.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["GlobalNavUserProfile","render","this","myAccountUser","h","href","userProfileUrl","class","src","_a","small_avatar_url","alt","height","width","is_nanopore_user","getAssetPath","name","job_title","company","slot","navItemCss","NavItem","hasSecondarySlot","animating","closeSecondary","async","didOpen","open","displayTransition","secondaryDiv","nanoClosing","emit","secondaryMenu","openSecondary","window","innerWidth","secondaryActiveWidth","secondaryFallback","call","nanoOpening","toggleSecondary","handleFocus","hasFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","hasAnchorEle","foundlink","target","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","focus","openChange","didOpenChange","document","activeElement","body","preventScroll","tabIndex","nanoClose","panelio","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","focusableChild","getTabbableElements","nanoOpen","handleClose","e","composedPath","some","componentWillLoad","secondaryEle","querySelector","link","getDirectChildren","addEventListener","connectedCallback","isInGlobalNav","isInMenuDrawer","isInMenu","parentElement","Host","selected","disabled","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","part","ref","a","onFocus","notification","div","selectCss","selectIds","Select","inputCtrl","_inputCtrl","input","setDataListOpts","selectWrap","_selectWrap","ele","datalist","_datalist","constructor","hostRef","valueItems","selectId","rtl","onInit","customError","_value","multiple","_options","customValidate","nativeSelect","setCustomValidity","required","valArray","allowCustomValues","isValidValues","max","min","showInlineValidation","validateOn","_invalid","showErrorMsg","errorMessage","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","showInlineError","preventDefault","requestAnimationFrame","setValue","value","detail","includes","currInsertIndex","slice","inputSearchVal","removeValue","toFind","filter","val","setFocus","setOptions","activeOptions","_eOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","clearSelect","readonly","stopPropagation","onDragStart","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","debounce","validityMessage","split","Array","isArray","options","opts","opt","debounceChanged","debounceEvent","shouldValidate","valueChanged","nanoChange","currDWConfig","dropDownConfig","Object","assign","tetherTo","validateFirst","Promise","resolve","getSelectElement","message","find","slotChangeObserver","mo","MutationObserver","processSlottedContent","childList","subtree","hasLabelSlot","querySelectorAll","hasHelperSlot","hasHelperEndSlot","getLabel","onReset","form","handleBlur","kev","getActiveElement","closestElement","tagName","toLowerCase","CustomEvent","disconnectedCallback","componentDidLoad","labelId","moreId","helperEndId","compWrapOptions","floatLabel","hideLabel","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","createColorClasses","color","masked","mask","FormControlWrap","FormControl","onClearText","control","endValueSlot","multipleValues","id","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autofocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","span","push","tabindex","onTouchEnd","onMouseUp"],"sources":["./src/components/global-nav/global-nav-user-profile.tsx","./src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","./src/components/nav-item/nav-item.tsx","./src/components/select/select.scss?tag=nano-select&encapsulation=scoped","./src/components/select/select.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  getAssetPath,\n  ComponentInterface,\n} from '@stencil/core';\nimport { MyAccountUser } from './global-nav-interface';\n\n/**\n * Nanopore digital global navigation user profile.\n */\n@Component({\n  tag: 'nano-global-nav-user-profile',\n})\nexport class GlobalNavUserProfile implements ComponentInterface {\n  /**\n   * Logged in user details automatically populated from MyAccount\n   */\n  @Prop() myAccountUser: MyAccountUser;\n\n  /**\n   * Link to the user profile\n   */\n  @Prop() userProfileUrl: string;\n\n  // Render output\n\n  render() {\n    return (\n      !!this.myAccountUser && (\n        <a href={this.userProfileUrl} class=\"user-profile\">\n          <div class=\"left\">\n            <div class=\"avatar-container\">\n              <img\n                class=\"avatar\"\n                src={this.myAccountUser?.small_avatar_url}\n                alt=\"User Avatar\"\n                height={75}\n                width={75}\n              />\n              {this.myAccountUser.is_nanopore_user && (\n                <img\n                  class=\"logo-small\"\n                  src={getAssetPath(`../nano-assets/ont-wheel-light.svg`)}\n                  alt=\"Nanopore Logo\"\n                />\n              )}\n            </div>\n\n            <div class=\"user-details\">\n              <span class=\"name\">{this.myAccountUser.name}</span>\n\n              <span class=\"bio\">\n                {this.myAccountUser.job_title} at {this.myAccountUser.company}\n              </span>\n            </div>\n          </div>\n\n          <div class=\"right\">\n            <div class=\"chevron-right\">\n              <nano-icon\n                slot=\"icon-end\"\n                name=\"light/chevron-right\"\n                aria-label=\"navigate to ...\"\n              ></nano-icon>\n            </div>\n          </div>\n        </a>\n      )\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // These can be overwritten, but are automatically set from context components\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n  outline: none !important;\n\n  .nav-item,\n  .link {\n    outline: none !important;\n    border-radius: inherit;\n  }\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n    margin: 0;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-top) var(--padding-bottom);\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n    line-height: inherit;\n    outline: none !important;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline-end: var(--padding-end);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding-inline-start: var(--padding-start);\n  }\n\n  .link {\n    ::slotted(nano-icon[slot='icon-start']) {\n      padding-inline-start: var(--padding-start);\n      padding-inline-end: 0;\n    }\n\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding-inline-end: var(--padding-end);\n      padding-inline-start: 0;\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-block-end: var(--border-bottom);\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\n  }\n\n  .secondary-menu {\n    display: none;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover),\n  .link:hover,\n  button:hover,\n  a:hover {\n    text-decoration: inherit !important;\n  }\n\n  button:focus-visible,\n  a:focus-visible {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    box-shadow: #{$control-focus-style};\n  }\n\n  ::slotted(a:focus-visible),\n  ::slotted(button:focus-visible) {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    box-shadow: #{$control-focus-style};\n  }\n}\n\n.nav-item {\n  &.selected {\n    .link,\n    button,\n    a {\n      color: var(--color-selected, var(--color-open, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-selected,\n          var(--bg-color-open, var(--bg-color))\n        );\n    }\n  }\n\n  &.secondary-open {\n    button,\n    a {\n      color: var(--color-open, var(--color-selected, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-open,\n          var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n        );\n    }\n  }\n\n  &.disabled {\n    opacity: 0.6;\n\n    button,\n    a {\n      color: var(--color-disabled, var(--color)) !important;\n    }\n  }\n\n  &:not(.nano-menu) {\n    ::slotted(a:hover),\n    ::slotted(button:hover),\n    .link:hover,\n    button:hover,\n    a:hover {\n      color: var(--color-hover, var(--color-hover, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-hover,\n          var(--bg-color-focus, var(--bg-color))\n        );\n    }\n  }\n}\n\n:host(.has-focus) {\n  .link {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n  }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n  a,\n  a:visited,\n  button,\n  .link {\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentcolor;\n    text-decoration: inherit;\n    white-space: normal;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    padding-inline-start: 0;\n    padding-inline-end: var(--padding-end);\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, currentcolor);\n    min-height: 100%;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity 0.2s ease, transform 0.3s ease;\n    background-color: var(--secondary-bg-color, white);\n    transform: translateX(100%);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      opacity: 1;\n      transform: translateX(0);\n      transition: opacity 0.3s ease, transform 0.2s ease;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu) {\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n    font-size: 10px;\n    flex: 0 0 10px;\n    pointer-events: none;\n  }\n\n  button,\n  a {\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding: 0;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n  .secondary-menu {\n    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu-content {\n    padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n    padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\n  }\n}\n\n:host(.nano-global-nav-bar) {\n  .link,\n  a,\n  button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .text {\n    flex: 1 0 auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    margin-inline: var(--padding-end) 0;\n    margin-block: 0;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    margin-inline: 0 var(--padding-start);\n    margin-block: 0;\n  }\n\n  ::slotted(a),\n  button {\n    position: relative;\n\n    &::before {\n      content: '';\n      background-color: rgb(12 90 113);\n      height: 9px;\n      inset-inline: 0 5px;\n      inset-block-end: -22px;\n      position: absolute;\n      transform: translateZ(0) scaleX(0);\n      transform-origin: 0;\n      transition: 0.2s ease transform;\n    }\n  }\n\n  .selected button::before,\n  .secondary-open button::before {\n    transform: translateZ(0) scaleX(1);\n  }\n}\n\n:host(.nano-global-nav-bar.selected) {\n  ::slotted(a) {\n    &::before {\n      transform: translateZ(0) scaleX(1);\n    }\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  .secondary-open button::before {\n    opacity: 0.7;\n  }\n\n  .secondary-menu {\n    display: none;\n    transition: transform 0.3s ease;\n    transform: translateY(-100%) translateZ(0);\n    background-color: var(--secondary-bg-color, #196c82);\n    color: var(--secondary-color);\n    position: absolute;\n    box-shadow: 0 1px 25px 0 rgb(0 0 0 / 15%);\n    inset-inline: 0;\n    z-index: -2;\n    outline: none;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    padding-block-start: calc(var(--padding-top) / 2);\n    padding-inline-end: 0;\n    padding-block-end: calc(var(--padding-bottom) / 2);\n    padding-inline-start: var(--padding-start);\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentcolor;\n    text-decoration: inherit;\n    white-space: normal;\n    border: none;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    padding-inline-end: var(--padding-end);\n    padding-inline-start: 0;\n    text-align: start;\n    flex: 0 1 auto;\n    min-width: 130px;\n    width: 130px;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n    font-size: var(--icon-size);\n    width: var(--icon-size);\n    flex: 0 0 var(--icon-size);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding: 0 var(--padding-end) 0 0;\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    background-color: var(--secondary-bg-color);\n    color: var(--secondary-color);\n    height: 100vh;\n    inset-inline: auto 0;\n    inset-block: 0;\n    transform: translateX(0);\n    z-index: -1;\n    transition: transform 0.3s ease, opacity 0.2s ease;\n    overflow-y: auto;\n    width: var(--secondary-width, 400px);\n    max-width: 62vw;\n    opacity: 1;\n    padding-inline:\n      var(--secondary-padding-start, var(--padding-start))\n      var(--secondary-padding-end, var(--padding-end));\n    padding-block:\n      var(--secondary-padding-top, var(--padding-top))\n      var(--secondary-padding-bottom, var(--padding-bottom));\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n    }\n  }\n\n  .notification {\n    position: relative;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      width: 6px;\n      height: 6px;\n      background-color: #ef4135;\n      inset-inline-start: 10px;\n      inset-block-start: 7px;\n      border-radius: 50%;\n\n      @media (min-width: 52em) {\n        width: 7px;\n        height: 7px;\n        inset-inline-start: 8px;\n        inset-block-start: 5px;\n      }\n    }\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .secondary-menu {\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n  Listen,\n} from '@stencil/core';\nimport { getSiblings, getDirectChildren } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n *\n * @slot icon-start - an icon at the start of the main control\n * @slot icon-end - an icon at the end of the main control\n * @slot secondary - a content panel in which you can place any html to display on control click\n * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)\n * @part ctrl - the controlling `<a>` or `<button>` element\n * @part ctrl--button - the controlling `<button>` element\n * @part ctrl--anchor - the controlling <a> element\n * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)\n * @part secondary-wrapper - the div surrounding slotted secondary content\n * @part secondary-mask - the div that is added when secondary content is shown\n */\n@Component({\n  tag: 'nano-nav-item',\n  styleUrl: 'nav-item.scss',\n  shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n  private hasSecondarySlot: boolean = false;\n  private secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() hasAnchorEle: boolean = false;\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Will show an indicator badge - only when placed in a nano-menu-draw\n   */\n  @Prop() notification: boolean = false;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus();\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    this.open ? this.openSecondary() : this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      setTimeout(() => {\n        if (\n          !this.fromHover &&\n          (!document.activeElement || document.activeElement === document.body)\n        )\n          this.btn.focus({ preventScroll: true });\n        this.el.tabIndex = null;\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      /* the secondadry panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelio = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth',\n              });\n            }\n            panelio.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelio.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        const focusableChild = getTabbableElements(this.secondaryDiv, true);\n        if (focusableChild[0]) focusableChild[0].focus();\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  @Listen('click', { target: 'body' })\n  @Listen('keyup', { target: 'body' })\n  handleClose(e: MouseEvent | KeyboardEvent) {\n    if (!this.didOpen || !this.hasSecondarySlot) return;\n    if (!e.composedPath().some((el) => el === this.secondaryDiv))\n      this.toggleSecondary();\n  }\n\n  private closeSecondary = async () => {\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n    this.open = false;\n    await displayTransition(this.secondaryDiv, 'open', false);\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = false;\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n\n    if (!this.hasSecondarySlot || this.didOpen) return;\n    this.open = true;\n    await displayTransition(this.secondaryDiv, 'open', true);\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = true;\n  };\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot)\n      this.openSecondary();\n    this.nanoFocus.emit();\n  };\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    const foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  };\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (\n      !this.href ||\n      this.animating ||\n      !this.hasSecondarySlot ||\n      (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n    )\n      return;\n\n    // if there are sibling secondary panels currently open,\n    // we need to wait before opening otherwise we get unwanted overlapping\n    let timeToWait = 0;\n    if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n      timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(\n      async () => await this.openSecondary(),\n      timeToWait\n    );\n    this.animating = false;\n  };\n\n  // handles secondary menu hover-out behaviour.\n  private handleMouseLeave = () => {\n    if (!this.href) return;\n    clearTimeout(this.waitShow);\n    this.fromHover = true;\n    this.animating = true;\n\n    // prevent closing immediately - makes navigating to items within more forgiving\n    this.waitHide = window.setTimeout(\n      async () => await this.closeSecondary(),\n      300\n    );\n    this.animating = false;\n  };\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n  };\n\n  componentWillLoad() {\n    const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    const link = getDirectChildren<HTMLAnchorElement | HTMLButtonElement>(\n      this.el,\n      'a, button'\n    )[0];\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href\n        ? (link as HTMLAnchorElement).href\n        : null;\n      this.btn = link;\n      if (this.hasSecondarySlot)\n        this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n  }\n\n  connectedCallback() {\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest('nano-global-nav');\n\n    this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n    this.isInMenu = !!this.el.closest('nano-menu');\n    this.isInGlobalNav =\n      this.el.parentElement === this.globalNavEle ||\n      !!this.el.closest('.global-nav');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'has-secondary': this.hasSecondarySlot,\n          'secondary-open': this.open,\n          selected: this.selected,\n          'has-focus': this.hasFocus,\n          disabled: this.disabled,\n          'nano-global-nav': this.isInGlobalNav,\n          'nano-menu-drawer': this.isInMenuDrawer,\n          'nano-menu': this.isInMenu,\n        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role=\"menuitem\"\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n          part=\"ctrl-wrapper\"\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              part=\"ctrl ctrl--anchor\"\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </a>\n          )}\n          {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n            <button\n              part=\"ctrl ctrl--button\"\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </button>\n          )}\n          {this.hasAnchorEle && !this.disabled && (\n            <div class=\"link\">\n              <slot name=\"icon-start\" />\n              <slot />\n              <slot name=\"icon-end\" />\n            </div>\n          )}\n          {this.hasSecondarySlot && !this.disabled && (\n            <div\n              class=\"secondary-menu\"\n              ref={(div) => (this.secondaryDiv = div)}\n              tabIndex={-1}\n            >\n              <div class=\"secondary-menu-content\" part=\"secondary-wrapper\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n                part=\"secondary-mask\"\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n  @include formControlVars;\n\n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  font-family: $font-family-base;\n  display: block;\n}\n\n:host(.nano-color) {\n  --input-border-style--focus:\n    #{$input-border-style} var(\n      --nano-color-tint,\n      #{nano-color(\n        primary,\n        tint\n      )}\n    );\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n\n  color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n  --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  * {\n    pointer-events: none !important;\n  }\n}\n\nselect {\n  display: none;\n}\n\n.select__native-input {\n  @include text-inherit();\n\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n\n  .has-float-label & {\n    line-height: 2.1em;\n    min-height: 2.1em;\n    padding-block-start: 1.4em;\n  }\n\n  &::selection {\n    background: transparent;\n  }\n\n  /* stylelint-disable-next-line selector-no-vendor-prefix */\n  &::-moz-selection {\n    background: transparent;\n  }\n\n  &::placeholder {\n    color: var(--placeholder-color);\n    font-family: inherit;\n    font-style: var(--placeholder-font-style);\n    font-weight: var(--placeholder-font-weight);\n    opacity: var(--placeholder-opacity);\n    line-height: inherit;\n    min-height: initial;\n  }\n\n  /* stylelint-disable-next-line selector-no-vendor-prefix */\n  &::-moz-placeholder {\n    line-height: 2.8em;\n    text-overflow: ellipsis;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &.resizable {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  .form-ctrl__textarea & {\n    line-height: 1.5em;\n    padding-block: var(--padding-top) var(--padding-bottom);\n    white-space: pre-wrap;\n\n    &::placeholder {\n      line-height: 1.5em;\n    }\n  }\n\n  .has-float-label.textarea & {\n    padding-block-start: 1.8em;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n  }\n}\n\n.select__mask {\n  @include text-inherit();\n\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n// multi stuff\n\n.select__multi {\n  &-wrap {\n    padding-block: 0 var(--padding-bottom);\n    padding-inline: 0 0;\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    overflow: hidden;\n    align-items: flex-start;\n\n    :host(.has-float-label) & {\n      padding-block-start: 1em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-bottom) 0;\n    min-width: 50px;\n    width: 100%;\n    max-height: 100%;\n    appearance: none;\n    border: 0;\n    outline: none;\n    display: inline-block;\n    background: transparent;\n    flex: 0;\n    position: relative;\n    box-sizing: border-box;\n    line-height: calc(2.5em - var(--padding-bottom));\n    height: calc(2.5em - var(--padding-bottom));\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-value {\n    margin-block: var(--padding-bottom) 0;\n    margin-inline: var(--padding-start) -3px;\n    background: rgb(var(--multi-input-value-bg) / 80%);\n    color: var(--multi-input-value-text-color);\n    border: 1px solid;\n    border-color: var(--multi-input-value-border);\n    padding: 0.35em 0.5em;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    letter-spacing: 1px;\n    max-height: calc(2.5em - 8px);\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      overflow: hidden;\n      line-height: 1;\n    }\n  }\n\n  &-value-remove {\n    @include background-position(center);\n\n    padding-inline-start: 0.5em;\n    margin: 0;\n    color: inherit;\n    border: 0;\n    outline: none;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    inset-block-start: 0;\n    font-size: 1em;\n\n    nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n.form-ctrl__float-label {\n  width: calc(100% - (1em + (var(--padding-start) * 2)));\n\n  :host(.has-focus.has-multiple) & {\n    transform: translateY(-110%);\n    font-size: 0.8em;\n  }\n\n  :host(.has-value.has-multiple) & {\n    transform: translateY(21%);\n    inset-block-start: 0;\n  }\n}\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n  pointer-events: auto;\n}\n","import {\n  Build,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  VNode,\n  Listen,\n} from '@stencil/core';\n\nimport { getActiveElement } from '../../utils/active-element';\nimport { closestElement } from '../../utils/dom';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounce, debounceEvent } from '../../utils/throttle';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport { OptionInterface } from '../option/option-interface';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\n\nlet selectIds = 0;\n\n/**\n * The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n *\n * @slot start - suitable for inline action buttons or icons that may add extra contextual information\n * @slot end - suitable for inline action buttons or icons that may add extra contextual information\n * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot helper-end - helper text to accompany the form field on the side.\n * @slot down-arrow - use this to replace the default down arrow\n * @slot - default slot; nest `nano-option` elements\n */\n@Component({\n  tag: 'nano-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select implements ComponentInterface {\n  private nativeSelect?: HTMLSelectElement;\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private onInit: boolean = true;\n  private customError: string = '';\n\n  private get inputCtrl() {\n    return this._inputCtrl;\n  }\n  private set inputCtrl(input) {\n    if (input === this._inputCtrl) return;\n    this._inputCtrl = input;\n    this.setDataListOpts();\n  }\n  private _inputCtrl?: HTMLInputElement;\n\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. Use get/set to set datalist options\n  private _selectWrap: HTMLElement;\n  private get selectWrap() {\n    return this._selectWrap;\n  }\n  private set selectWrap(ele: HTMLElement) {\n    if (this._selectWrap === ele) return;\n    this._selectWrap = ele;\n    this.setDataListOpts();\n  }\n\n  private _datalist: HTMLNanoDatalistElement;\n  private get datalist() {\n    return this._datalist;\n  }\n  private set datalist(ele: HTMLNanoDatalistElement) {\n    if (this._datalist === ele) return;\n    this._datalist = ele;\n    this.setDataListOpts();\n  }\n\n  constructor() {\n    this.showInlineValidation = debounce(this.showInlineValidation, 50);\n  }\n\n  @State() currInsertIndex: number = -1;\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() hasHelperEndSlot = false;\n  @State() inputSearchVal: string = '';\n\n  @Element() el!: HTMLNanoSelectElement;\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set.\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.nativeSelect) return '';\n    return this.nativeSelect.validationMessage;\n  }\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have select focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element. Alternatively use the 'label' slot\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId + '-name';\n\n  /**\n   * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop({ reflect: true }) readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * The initial size of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * Maximum number of options that can be selected when multiple is true\n   */\n  @Prop() max?: number;\n\n  /**\n   * Minimum number of options that can be selected when multiple is true\n   */\n  @Prop() min?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * in multiple mode, allow users to enter their own values\n   */\n  @Prop() allowCustomValues: boolean = false;\n\n  /**\n   * The value of the select.\n   */\n  @Prop()\n  get value() {\n    return this._value;\n  }\n  set value(val: string | string[]) {\n    if (typeof val === 'string') {\n      if (this.multiple) this._value = val.split(',');\n      else this._value = val;\n    } else if (Array.isArray(val)) {\n      if (this.multiple) this._value = val;\n      else this._value = val[0];\n    }\n  }\n  private _value: Array<string> | string = this.multiple ? [] : '';\n\n  /**\n   * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or\n   * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.\n   * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`\n   * Regardless - reading `options` will return the current component options - slotted or otherwise\n   */\n  @Prop()\n  get options(): Array<OptionInterface | string> {\n    if (this._options.length) return this._options;\n\n    if (!this.datalist || !this.datalist.activeOptions) return [];\n\n    return this._eOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n  }\n  set options(opts: Array<OptionInterface | string>) {\n    this._options = opts.map((opt) => {\n      if (typeof opt === 'string') return { value: opt, label: opt };\n      else return opt;\n    });\n  }\n  private _options: OptionInterface[] = [];\n  @State() _eOptions: OptionInterface[] = [];\n\n  /**\n   * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n   */\n  @Prop() clearSelect = false;\n\n  /**\n   * Hide the native select element and cover with a value 'mask'.\n   * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n   */\n  @Prop() mask = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  @Watch('readonly')\n  protected shouldValidate() {\n    if (this.onInit) return;\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n\n    this.customValidate();\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  /**\n   * Update the native select element when the value changes\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('value')\n  valueChanged() {\n    this.customValidate();\n\n    if (this.onInit) {\n      if (this.multiple) this.currInsertIndex = this.value.length - 1;\n      return;\n    }\n    requestAnimationFrame(() => {\n      this.shouldValidate();\n      this.nanoChange.emit({ value: this.value });\n    });\n  }\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop({ mutable: true }) dropDownConfig?: Partial<Dropdown> = {};\n\n  @Watch('dropDownConfig')\n  setDataListOpts() {\n    if (!this.datalist || !this.selectWrap) return;\n\n    this.datalist.input = this.inputCtrl;\n\n    const currDWConfig = this.datalist.dropDownConfig || {};\n    this.datalist.dropDownConfig = {\n      ...currDWConfig,\n      ...this.dropDownConfig,\n      tetherTo: this.selectWrap,\n    };\n  }\n\n  // Custom Events\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Emitted when a keyboard input occurred on a multiple=\"true\" input\n   */\n  @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Public Methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return new Promise((resolve) => {\n      if (validateFirst) {\n        this.customValidate();\n        this.showInlineValidation();\n      }\n      setTimeout(() => {\n        resolve({\n          isValid: !this._invalid,\n          errorMessage: this.nativeSelect.validationMessage,\n        });\n      }, 50);\n    });\n  }\n\n  /**\n   * Sets focus on the specified `nano-select`. Use this method instead of the global\n   * `select.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.inputCtrl) return;\n    this.inputCtrl.focus();\n    setTimeout(() => this.inputCtrl.click(), 50);\n  }\n\n  /**\n   * @returns the native `<select>` element used under the hood.\n   */\n  @Method()\n  getSelectElement(): Promise<HTMLSelectElement> {\n    return Promise.resolve(this.nativeSelect!);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeSelect) {\n      this.customError = message;\n      this.nativeSelect.setCustomValidity(message);\n      this.showInlineValidation();\n    }\n  }\n\n  /* Logic */\n\n  private get valArray() {\n    return typeof this.value === 'string'\n      ? this.value.length\n        ? [this.value]\n        : []\n      : this.value;\n  }\n\n  private isValidValues() {\n    return this.valArray.find((val) =>\n      (this.options as OptionInterface[]).find((opt) => opt.value === val)\n    );\n  }\n\n  private customValidate = () => {\n    if (\n      !this.nativeSelect ||\n      !!this.customError ||\n      !this.nativeSelect['setCustomValidity']\n    )\n      return;\n\n    this.nativeSelect.setCustomValidity('');\n    // add custom validations 'cos html5 validations are a bit rubbish on selects\n    if (this.required && !this.valArray.length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (\n      this.valArray.length &&\n      !this.allowCustomValues &&\n      !this.isValidValues()\n    ) {\n      this.nativeSelect.setCustomValidity(\n        'Please choose an item from this field.'\n      );\n      return true;\n    }\n    if (this.max && this.valArray.length > this.max) {\n      this.nativeSelect.setCustomValidity(\n        `Only up to ${this.max} values are allowed.`\n      );\n      return true;\n    }\n    if (this.min && this.valArray.length < this.min) {\n      this.nativeSelect.setCustomValidity(\n        `You must select a minimum of ${this.min} values.`\n      );\n      return true;\n    }\n    return false;\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.showErrorMsg = false;\n    this.errorMessage = '';\n\n    if (!this.nativeSelect.validity.valid) {\n      this.errorMessage = this.nativeSelect.validationMessage;\n      this._invalid = true;\n      this.showErrorMsg = true;\n    }\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit') {\n      this._invalid = this.showErrorMsg = this.customValidate();\n    }\n    if (this.showInlineError) ev.preventDefault();\n\n    requestAnimationFrame(() => this.showInlineValidation(ev));\n  };\n\n  private setValue = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.preventDefault();\n\n    if (!this.multiple) {\n      this.value = e.detail.value;\n      return;\n    }\n    if (this.value && this.value.length && this.value.includes(e.detail.value))\n      return;\n    if (this.max && this.value.length === this.max) return;\n\n    this.currInsertIndex++;\n    this.value = [\n      ...this.value.slice(0, this.currInsertIndex),\n      e.detail.value,\n      ...this.value.slice(this.currInsertIndex),\n    ];\n    this.inputSearchVal = '';\n    // this.selectWrap.clientWidth; // force reflow\n  };\n\n  private removeValue = (toFind?: string) => {\n    if (!this.multiple || !this.value.length) return;\n\n    if (!toFind) toFind = this.value[this.value.length - 1];\n    this.value = (this.value as Array<string>).filter((val) => val !== toFind);\n\n    this.currInsertIndex--;\n    // this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n  };\n\n  private slotChangeObserver() {\n    if (!window['MutationObserver']) return;\n\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have label / helper content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n    this.hasHelperEndSlot = !!this.el.querySelector('[slot=\"helper-end\"]');\n  }\n\n  private getLabel(toFind: string) {\n    const label = (this.options as OptionInterface[]).find((opt) => {\n      return !opt.disabled && opt.value?.length && opt.value === toFind;\n    });\n    return label && label.label ? label.label : toFind;\n  }\n\n  /* Event handling */\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.el.closest('form');\n    if (!form || e.target !== this.el.closest('form')) return;\n\n    this.clearSelectValue();\n  }\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let target: Element;\n\n    requestAnimationFrame(() => {\n      if (kev.key) {\n        if (kev.key !== 'Tab') return;\n        target = getActiveElement();\n      } else target = e.target as Element;\n\n      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n        this.onBlur();\n      }\n    });\n  }\n\n  private setOptions = () => {\n    if (\n      !this.datalist ||\n      !this.datalist.activeOptions ||\n      !this.datalist.activeOptions.length\n    )\n      return;\n\n    this._eOptions = this.datalist.activeOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n    this.customValidate();\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple || !this.hasFocus) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.inputCtrl.previousElementSibling)\n            rm = this.inputCtrl.previousElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.inputCtrl.nextElementSibling)\n            rm = this.inputCtrl.nextElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          if (!this.value.length) break;\n\n          if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)\n            this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)\n            this.currInsertIndex++;\n\n          setTimeout(() => {\n            this.inputCtrl.focus();\n          }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n\n    requestAnimationFrame(() => {\n      if (this.validateOn === 'dirty' && !this.hasFocus)\n        this.showInlineValidation();\n    });\n    this.nanoBlur.emit();\n\n    if (!this.allowCustomValues && this.multiple) {\n      this.inputSearchVal = '';\n      const event = new window.Event('change');\n      this.inputCtrl.dispatchEvent(event);\n    }\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private clearSelectValue = (ev?: Event) => {\n    if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    if (this.multiple) {\n      this.value = [];\n      this.currInsertIndex = -1;\n    } else this.value = '';\n\n    this.inputCtrl.value = '';\n    const event = new window.Event('change');\n    this.inputCtrl.dispatchEvent(event);\n  };\n\n  private onClick = () => {\n    this.setFocus();\n  };\n\n  /* Multi event handlers */\n\n  private onDragStart = (ev: MouseEvent) => {\n    const ele = ev.target as HTMLSpanElement;\n    this.dragVal = ele.dataset.value;\n  };\n\n  private onDragEnd = (ev) => {\n    this.dragVal = null;\n    ev.preventDefault();\n  };\n\n  private onDragLeave = (ev: MouseEvent) => {\n    const ele = ev.target as HTMLSpanElement;\n    const spanVal: string =\n      ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n    if (\n      !spanVal ||\n      this.dragVal === spanVal ||\n      !this.value.includes(this.dragVal)\n    ) {\n      ev.preventDefault();\n      return;\n    }\n\n    const to = this.value.indexOf(spanVal);\n    const from = this.value.indexOf(this.dragVal);\n    const tmpArr = this.value as Array<string>;\n    const tmpVal = tmpArr[to];\n\n    tmpArr[to] = tmpArr[from];\n    tmpArr[from] = tmpVal;\n    this.value = [...tmpArr];\n  };\n\n  private onMultiInput = (ev) => {\n    this.inputSearchVal = ev.target.value.trim();\n    this.nanoSearchChange.emit({ value: ev.target.value.trim() });\n  };\n\n  /* Stencil Component lifecycle hooks */\n\n  connectedCallback() {\n    this.debounceChanged();\n\n    if (!Build.isBrowser) return;\n\n    this.el.dispatchEvent(\n      new CustomEvent('nanoDidLoad', {\n        detail: this.el,\n      })\n    );\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('nanoDidUnload', {\n        detail: this.el,\n      })\n    );\n\n    if (!Build.isBrowser) return;\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    this.customValidate();\n    this.setDataListOpts();\n    requestAnimationFrame(() => (this.onInit = false));\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  render() {\n    const labelId = this.selectId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.selectId + '-moreId'\n        : '';\n    const helperEndId = this.hasHelperEndSlot ? this.selectId + '-helper' : '';\n\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n    this.valueItems = [];\n\n    const compWrapOptions = (({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }) => ({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }))(this);\n    const wrapOptions = {\n      ...compWrapOptions,\n      labelId,\n      moreId,\n      helperEndId,\n      hasValue: !!this.value.length || !!this.inputSearchVal.length,\n      controlId: this.selectId,\n    };\n\n    const controlOptions = (({ readonly, disabled }) => ({\n      readonly,\n      disabled,\n      clearControl: this.clearSelect,\n    }))(this);\n\n    return (\n      <Host\n        type={this.multiple ? 'select-multiple' : 'select-one'}\n        aria-disabled={this.disabled ? 'true' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': !!this.value.length || !!this.inputSearchVal.length,\n          'has-focus': this.hasFocus,\n          'is-invalid': this.invalid,\n          'has-label': this.label !== null && !this.floatLabel,\n          'has-float-label': this.label !== null && this.floatLabel,\n          rtl: this.rtl,\n          'has-multiple': this.multiple,\n          'has-clr-btn': this.clearSelect,\n          masked: this.mask,\n        }}\n      >\n        <FormControlWrap {...wrapOptions}>\n          <FormControl\n            {...controlOptions}\n            onClearText={this.clearSelectValue}\n            control={this.el}\n            ref={(el) => (this.selectWrap = el)}\n            endValueSlot={\n              <slot name=\"down-arrow\">\n                <nano-icon slot=\"value-end\" name=\"light/chevron-down\" />\n              </slot>\n            }\n          >\n            {this.multiple && (\n              <div class=\"select__multi-wrap select\">\n                {this.multipleValues(labelId, moreId, helperEndId)}\n              </div>\n            )}\n            {!this.multiple && [\n              this.mask && (\n                <div class=\"select__mask\">\n                  {this.getLabel(this.value as string)}\n                </div>\n              ),\n              <input\n                id={this.selectId}\n                class=\"select__native-input\"\n                ref={(input) => (this.inputCtrl = input)}\n                aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n                disabled={this.disabled}\n                form={this.form}\n                placeholder={this.placeholder}\n                readOnly={true}\n                required={this.required}\n                value={this.getLabel(this.value as string)}\n                onFocus={this.onFocus}\n              />,\n            ]}\n          </FormControl>\n        </FormControlWrap>\n        {!this.readonly && !this.disabled && (\n          <nano-datalist\n            onNanoOptionsUpdated={this.setOptions}\n            ref={(el) => (this.datalist = el)}\n            selected={this.valArray}\n            type={this.multiple ? 'selctMulti' : 'select'}\n            onNanoSelect={this.setValue}\n            onNanoDeselect={(e) => {\n              e.preventDefault();\n              this.removeValue(e.detail.value);\n            }}\n            options={this._options.length ? this._options : undefined}\n          >\n            {this.allowCustomValues &&\n              this.multiple &&\n              !!this.inputSearchVal && (\n                <nano-option\n                  slot=\"list-top\"\n                  value={this.inputSearchVal}\n                  selected={false}\n                  label={this.inputSearchVal}\n                  onNanoSelect={() => this.inputCtrl.focus()}\n                >\n                  <span slot=\"check-icon\"></span>\n                  Add '{this.inputSearchVal}'\n                </nano-option>\n              )}\n            <slot />\n          </nano-datalist>\n        )}\n\n        <select\n          id={this.selectId + '-hidden'}\n          class=\"select__native-ctrl\"\n          ref={(select) => (this.nativeSelect = select)}\n          aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n          disabled={this.disabled}\n          form={this.form}\n          multiple={this.multiple}\n          name={this.name}\n          required={this.required}\n          onInvalid={this.handleInvalid}\n        >\n          {this.allowCustomValues &&\n            this.valArray.map((val) => {\n              return (\n                <option value={val} selected={true}>\n                  {val}\n                </option>\n              );\n            })}\n          {!this.allowCustomValues &&\n            this.options.map((opt: OptionInterface) => {\n              return (\n                <option\n                  value={opt.value}\n                  selected={this.valArray.includes(opt.value)}\n                  disabled={opt.disabled}\n                  label={opt.label}\n                >\n                  {this.valArray.includes(opt.value)}\n                </option>\n              );\n            })}\n        </select>\n      </Host>\n    );\n  }\n\n  private multipleValues(\n    labelId: string,\n    moreId: string,\n    helperEndId: string\n  ): VNode | (VNode | VNode[])[] {\n    const input: VNode = (\n      <input\n        class=\"select__multi-input\"\n        id={this.selectId}\n        ref={(input) => (this.inputCtrl = input)}\n        readOnly={this.readonly}\n        disabled={this.disabled}\n        autoFocus={this.autofocus}\n        autocomplete=\"off\"\n        onKeyDown={this.handleDocumentKeyDown}\n        onInput={this.onMultiInput}\n        value={this.inputSearchVal}\n        onTouchStart={this.onClick}\n        onMouseDown={this.onClick}\n        onFocus={this.onFocus}\n        placeholder={\n          this.placeholder && !this.value.length ? this.placeholder : ''\n        }\n        aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n      />\n    );\n    if (!this.value.length) return input;\n\n    return (this.value as Array<string>).map((val, i) => {\n      let toReturn: VNode | VNode[] = (\n        <span\n          onDragStart={this.onDragStart}\n          onDragLeave={this.onDragLeave}\n          onDragEnd={this.onDragEnd}\n          onDragOver={(e) => e.preventDefault()}\n          draggable\n          data-value={val}\n          ref={(span) => this.valueItems.push(span)}\n          class=\"select__multi-value\"\n        >\n          <span>{this.getLabel(val)}</span>\n          <button\n            class=\"select__multi-value-remove\"\n            type=\"button\"\n            tabindex=\"-1\"\n            onTouchEnd={() => {\n              this.removeValue(val);\n            }}\n            onMouseUp={() => {\n              this.removeValue(val);\n            }}\n          >\n            <nano-icon name=\"light/times\"></nano-icon>\n          </button>\n        </span>\n      );\n      if (i === 0 && this.currInsertIndex < 0)\n        toReturn = [input, toReturn as VNode];\n      else if (i === this.currInsertIndex)\n        toReturn = [toReturn as VNode, input];\n      return toReturn;\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/{p-1b7bad31.entry.js → p-1525c97b.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-export{T as nano_table}from"./p-42e7f253.js";import"./p-f6a8467a.js";import"./p-ee045579.js";import"./p-9746b0a5.js";import"./p-9ebbb814.js";
-//# sourceMappingURL=p-1b7bad31.entry.js.map
+export{T as nano_table}from"./p-099a573a.js";import"./p-f6a8467a.js";import"./p-ee045579.js";import"./p-9746b0a5.js";import"./p-9ebbb814.js";
+//# sourceMappingURL=p-1525c97b.entry.js.map

package/dist/nano-components/p-173cc842.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{i as n,r as i,h as o,a as t,g as r}from"./p-f6a8467a.js";import{c as s}from"./p-411bb8f1.js";let e;const a=()=>{if(!e){const n=window;n.Nanoicons=n.Nanoicons||{};e=n.Nanoicons.map=n.Nanoicons.map||new Map}return e};const c=n=>{let i=f(n.src);if(i){return i}i=h(n.name,n.icon);if(i){return l(i)}if(n.icon){i=f(n.icon);if(i){return i}}return null};const l=i=>{const o=a().get(i);if(o){return o}return n(`../nano-assets/fontawesome-pro/svgs/${i}.svg`)};const h=(n,i)=>{if(!n&&i&&!d(i)){n=i}if(u(n)){n=m(n)}if(!u(n)||n.trim()===""){return null}const o=n.replace(/[a-z]|-|\/|\d/gi,"");if(o!==""){console.warn("invalid characters in icon name "+n);return null}return n};const f=n=>{if(u(n)){n=n.trim();if(d(n)){return n}}return null};const d=n=>n.length>0&&/(\/|\.)/.test(n);const u=n=>typeof n==="string";const m=n=>n.toLowerCase();const p=n=>{if(n){const i=document.createElement("div");i.innerHTML=n;for(let n=i.childNodes.length-1;n>=0;n--){if(i.childNodes[n].nodeName.toLowerCase()!=="svg"){i.removeChild(i.childNodes[n])}}const o=i.firstElementChild;if(o&&o.nodeName.toLowerCase()==="svg"){const n=o.getAttribute("class")||"";o.setAttribute("class",(n+" sc-nano-icon s-nano-icon svg").trim());if(g(o)){return i.innerHTML}}}return""};const g=n=>{if(n.nodeType===1){if(n.nodeName.toLowerCase()==="script"){return false}for(let i=0;i<n.attributes.length;i++){const o=n.attributes[i].value;if(u(o)&&o.toLowerCase().indexOf("on")===0){return false}}for(let i=0;i<n.childNodes.length;i++){if(!g(n.childNodes[i])){return false}}}return true};const v=new Map;const b=new Map;const w=n=>{let i=b.get(n);if(!i){i=fetch(n).then((i=>{if(i.ok){return i.text().then((i=>{v.set(n,p(i))}))}v.set(n,"")}));b.set(n,i)}return i};const y=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--color:var(--nano-color-base, currentcolor);--primary-color:var(--nano-color-tint, currentcolor);--secondary-color:var(--nano-color-shade, currentcolor);--stroke-width:32px;--primary-opacity:0.8;--secondary-opacity:1;--icon-size:var(--nano-icon-size, 1em);--icon-margin-top:var(--nano-icon-margin-top, 0);--icon-margin-end:var(--nano-icon-margin-end, 0);--icon-margin-bottom:var(--nano-icon-margin-bottom, 0);--icon-margin-start:var(--nano-icon-margin-start, 0);display:inline-block;width:var(--icon-size);height:var(--icon-size);min-width:var(--icon-size);min-height:var(--icon-size);contain:strict;fill:currentcolor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:var(--color);margin-inline:var(--icon-margin-start) var(--icon-margin-end);margin-block:var(--icon-margin-top) var(--icon-margin-bottom)}:host .nanoicon{stroke:currentcolor}.nanoicon-fill-none{fill:none}.nanoicon-stroke-width{stroke-width:32px;stroke-width:var(--stroke-width)}.icon-inner,.nanoicon,svg,.svg{display:block;height:100%;width:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}";const x=class{constructor(n){i(this,n);this.svgContent=undefined;this.isVisible=false;this.isLoading=true;this.color=undefined;this.ariaLabel=undefined;this.flipRtl=undefined;this.name=undefined;this.src=undefined;this.icon=undefined;this.size=undefined;this.lazy=true}setAriaLabel(){if(!this.ariaLabel){const n=h(this.name,this.icon);if(n){this.ariaLabel=n.split("/").slice(-1)[0].replace(/\-/g," ")}}}connectedCallback(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=true;this.loadIcon()}))}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}componentWillLoad(){this.setAriaLabel()}waitUntilVisible(n,i,o){if(this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){const t=this.io=new window.IntersectionObserver((n=>{if(n[0].isIntersecting||n[1]&&n[1].isIntersecting){t.disconnect();this.io=undefined;o()}}),{rootMargin:i});t.observe(n)}else{o()}}loadIcon(){if(this.isVisible){const n=c(this);if(n){if(v.has(n)){this.svgContent=v.get(n);requestAnimationFrame((()=>this.isLoading=false))}else{w(n).then((()=>{this.svgContent=v.get(n);requestAnimationFrame((()=>this.isLoading=false))}))}}}this.setAriaLabel()}render(){const n=this.flipRtl||this.name&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&this.el.ownerDocument.dir==="rtl"&&this.flipRtl!==false;return o(t,{role:"img",class:Object.assign(Object.assign({},s(this.color)),{loading:this.isLoading,[`icon-${this.size}`]:!!this.size,"flip-rtl":!!n})},this.svgContent?o("div",{class:"icon-inner",innerHTML:this.svgContent}):o("div",{class:"icon-inner"}))}get el(){return r(this)}static get watchers(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}}};x.style=y;export{x as nano_icon};
+//# sourceMappingURL=p-173cc842.entry.js.map

package/dist/nano-components/p-173cc842.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CACHED_MAP","getIconMap","win","window","Nanoicons","map","Map","getUrl","i","url","getSrc","src","getName","name","icon","getNamedUrl","iconName","get","getAssetPath","isSrc","isStr","toLower","trim","invalidChars","replace","console","warn","str","length","test","val","toLowerCase","validateContent","svgContent","div","document","createElement","innerHTML","childNodes","nodeName","removeChild","svgElm","firstElementChild","svgClass","getAttribute","setAttribute","isValid","elm","nodeType","attributes","value","indexOf","iconContent","requests","getSvgContent","req","fetch","then","rsp","ok","text","set","iconCss","Icon","setAriaLabel","this","ariaLabel","label","split","slice","connectedCallback","waitUntilVisible","el","isVisible","loadIcon","disconnectedCallback","io","disconnect","undefined","componentWillLoad","rootMargin","cb","lazy","IntersectionObserver","data","isIntersecting","observe","has","requestAnimationFrame","isLoading","render","flipRtl","ownerDocument","dir","h","Host","role","class","Object","assign","createColorClasses","color","loading","size"],"sources":["./src/components/icon/utils.ts","./src/components/icon/validate.ts","./src/components/icon/request.ts","./src/components/icon/icon.scss?tag=nano-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n  if (!CACHED_MAP) {\n    const win = window as any;\n    win.Nanoicons = win.Nanoicons || {};\n    CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();\n  }\n  return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n  const map = getIconMap();\n  Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n  let url = getSrc(i.src);\n  if (url) {\n    return url;\n  }\n\n  url = getName(i.name, i.icon);\n  if (url) {\n    return getNamedUrl(url);\n  }\n\n  if (i.icon) {\n    url = getSrc(i.icon);\n    if (url) {\n      return url;\n    }\n  }\n  return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n  const url = getIconMap().get(iconName);\n  if (url) {\n    return url;\n  }\n  return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n  iconName: string | undefined,\n  icon: string | undefined\n) => {\n  if (!iconName && icon && !isSrc(icon)) {\n    iconName = icon;\n  }\n  if (isStr(iconName)) {\n    iconName = toLower(iconName);\n  }\n\n  if (!isStr(iconName) || iconName.trim() === '') {\n    return null;\n  }\n\n  // only allow alpha characters and dash\n  const invalidChars = iconName.replace(/[a-z]|-|\\/|\\d/gi, '');\n  if (invalidChars !== '') {\n    console.warn('invalid characters in icon name ' + iconName);\n    return null;\n  }\n  return iconName;\n};\n\nexport const getSrc = (src: string | undefined) => {\n  if (isStr(src)) {\n    src = src.trim();\n    if (isSrc(src)) {\n      return src;\n    }\n  }\n  return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string | null) => {\n  if (svgContent) {\n    const div = document.createElement('div');\n    div.innerHTML = svgContent;\n\n    // setup this way to ensure it works on our buddy IE\n    for (let i = div.childNodes.length - 1; i >= 0; i--) {\n      if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n        div.removeChild(div.childNodes[i]);\n      }\n    }\n\n    // must only have 1 root element\n    const svgElm = div.firstElementChild;\n    if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n      const svgClass = svgElm.getAttribute('class') || '';\n      svgElm.setAttribute(\n        'class',\n        (svgClass + ' sc-nano-icon s-nano-icon svg').trim()\n      );\n\n      // root element must be an svg\n      // lets double check we've got valid elements\n      // do not allow scripts\n      if (isValid(svgElm as any)) {\n        return div.innerHTML;\n      }\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const val = elm.attributes[i].value;\n      if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as any)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n","import { validateContent } from './validate';\nexport const iconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string) => {\n  // see if we already have a request for this url\n  let req = requests.get(url);\n  if (!req) {\n    // we don't already have a request\n    req = fetch(url).then((rsp) => {\n      if (rsp.ok) {\n        return rsp.text().then((svgContent) => {\n          iconContent.set(url, validateContent(svgContent));\n        });\n      }\n      iconContent.set(url, '');\n    });\n\n    // cache for the same requests\n    requests.set(url, req);\n  }\n  return req;\n};\n","@import '../../global/style/utilities/globals';\n\n:host {\n  /**\n  * @prop --color: defaults to current context color\n  * @prop --primary-color: used for duotone icons to set the primary color\n  * @prop --secondary-color: used for duotone icons to set the secondary color\n  * @prop --primary-opacity: used for duotone icons to set the primary opacity\n  * @prop --secondary-opacity: used for duotone icons to set the secondary opacity\n  * @prop --stroke-width: 32px default stroke width\n  */\n\n  --color: var(--nano-color-base, currentcolor);\n  --primary-color: var(--nano-color-tint, currentcolor);\n  --secondary-color: var(--nano-color-shade, currentcolor);\n  --stroke-width: 32px;\n  --primary-opacity: 0.8;\n  --secondary-opacity: 1;\n  --icon-size: var(--nano-icon-size, 1em);\n  --icon-margin-top: var(--nano-icon-margin-top, 0);\n  --icon-margin-end: var(--nano-icon-margin-end, 0);\n  --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);\n  --icon-margin-start: var(--nano-icon-margin-start, 0);\n\n  display: inline-block;\n  width: var(--icon-size);\n  height: var(--icon-size);\n  min-width: var(--icon-size);\n  min-height: var(--icon-size);\n  contain: strict;\n  fill: currentcolor;\n  box-sizing: content-box !important;\n  transition: opacity 0.3s ease;\n  color: var(--color);\n  margin-inline: var(--icon-margin-start) var(--icon-margin-end);\n  margin-block: var(--icon-margin-top) var(--icon-margin-bottom);\n}\n\n:host .nanoicon {\n  stroke: currentcolor;\n}\n\n.nanoicon-fill-none {\n  fill: none;\n}\n\n.nanoicon-stroke-width {\n  stroke-width: 32px;\n  stroke-width: var(--stroke-width);\n}\n\n.icon-inner,\n.nanoicon,\nsvg,\n.svg {\n  display: block;\n  height: 100%;\n  width: 100%;\n  overflow: visible;\n}\n\n:host(.loading) {\n  opacity: 0;\n}\n\n.fa-primary {\n  color: var(--primary-color);\n  opacity: var(--primary-opacity, 1);\n}\n\n.fa-secondary {\n  color: var(--secondary-color);\n  opacity: var(--secondary-opacity) !important;\n}\n\n/* Icon RTL\n * -----------------------------------------------------------\n */\n:host(.flip-rtl) .icon-inner {\n  transform: scaleX(-1);\n}\n\n/* Icon Sizes\n * -----------------------------------------------------------\n */\n:host(.icon-small) {\n  font-size: 18px !important;\n}\n\n:host(.icon-large) {\n  font-size: 32px !important;\n}\n","import {\n  Build,\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../interface';\n\n/**\n * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n */\n@Component({\n  tag: 'nano-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLNanoIconElement;\n\n  @State() svgContent?: string;\n  @State() isVisible = false;\n  @State() isLoading = true;\n\n  /**\n   * Color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Specifies the label to use for accessibility. Defaults to the icon name.\n   */\n  @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n  /**\n   * Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n   */\n  @Prop() flipRtl?: boolean;\n\n  /**\n   * Specifies which icon to use from the built-in set of icons.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  /**\n   * A combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() icon?: any;\n\n  /**\n   * The size of the icon.\n   * Available options are: `\"small\"` and `\"large\"`.\n   */\n  @Prop() size?: 'small' | 'large';\n\n  /**\n   * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n   * Default, `true`.\n   */\n  @Prop() lazy = true;\n\n  private setAriaLabel() {\n    if (!this.ariaLabel) {\n      const label = getName(this.name, this.icon);\n      // user did not provide a label\n      // come up with the label based on the icon name\n      if (label) {\n        this.ariaLabel = label.split('/').slice(-1)[0].replace(/\\-/g, ' ');\n      }\n    }\n  }\n\n  connectedCallback() {\n    // purposely do not return the promise here because loading\n    // the svg file should not hold up loading the app\n    // only load the svg if it's visible\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIcon();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  componentWillLoad() {\n    this.setAriaLabel();\n  }\n\n  private waitUntilVisible(\n    el: HTMLElement,\n    rootMargin: string,\n    cb: () => void\n  ) {\n    if (\n      Build.isBrowser &&\n      this.lazy &&\n      typeof window !== 'undefined' &&\n      (window as any).IntersectionObserver\n    ) {\n      const io = (this.io = new (window as any).IntersectionObserver(\n        (data: IntersectionObserverEntry[]) => {\n          if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {\n            io.disconnect();\n            this.io = undefined;\n            cb();\n          }\n        },\n        { rootMargin }\n      ));\n\n      io.observe(el);\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('icon')\n  loadIcon() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (iconContent.has(url)) {\n          // sync if it's already loaded\n          this.svgContent = iconContent.get(url);\n          requestAnimationFrame(() => (this.isLoading = false));\n        } else {\n          // async if it hasn't been loaded\n          getSvgContent(url).then(() => {\n            this.svgContent = iconContent.get(url);\n            requestAnimationFrame(() => (this.isLoading = false));\n          });\n        }\n      }\n    }\n    this.setAriaLabel();\n  }\n\n  render() {\n    const flipRtl =\n      this.flipRtl ||\n      (this.name &&\n        (this.name.indexOf('arrow') > -1 ||\n          this.name.indexOf('chevron') > -1) &&\n        (this.el.ownerDocument as Document).dir === 'rtl' &&\n        this.flipRtl !== false);\n\n    return (\n      <Host\n        role=\"img\"\n        class={{\n          ...createColorClasses(this.color),\n          loading: this.isLoading,\n          [`icon-${this.size}`]: !!this.size,\n          'flip-rtl': !!flipRtl,\n        }}\n      >\n        {Build.isBrowser && this.svgContent ? (\n          <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n        ) : (\n          <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/{p-c53b232e.js → p-2155fc2c.js}

@@ -2,4 +2,4 @@
  * Web Components for Nanopore digital Web Apps
  */
 const e={id:"mr.test",uuid:"2589690E-A907-50BB-9551-55E18ABB1273",name:"Logged in user",first_name:"mr",last_name:"test",email:"mr.test@nanoporetech.com",job_title:"CEO",company:"ONT",small_avatar_url:"https://picsum.photos/75",is_nanopore_user:false,lifecycle_stage:"Lead",indirect_customer:false,registration:{next_url:null}};const t=[{origin:"cws",domain:"nanoporetech.com"},{origin:"store",domain:"store.nanoporetech.com"},{origin:"community",domain:"community.nanoporetech.com"}];const o={count:0,url:"https://shop-test.nanoporetech.com/checkout/cart"};const r={count:0};const a=[{id:1,area:"main",address:"#",title:"Trousers",order:1,target:null},{id:2,area:"logged-out",address:"#",title:"Mouse",order:1,target:null},{id:20,area:"profile-panel-block",address:"https://nanoporetech.com/about-us/news",title:"News",order:3,target:""},{id:21,area:"profile-panel-block",address:"https://nanoporetech.com/about-us",title:"About",order:3,target:""},{id:22,area:"profile-panel-block",address:"https://nanoporetech.com/contact",title:"Contact",order:3,target:""},{id:28,area:"right-side-logged-out",address:"https://nanoporetech.com/contact",title:"Contact",order:3,target:""},{id:29,area:"right-side-logged-out",address:"https://nanoporetech.com/about-us/news",title:"News",order:3,target:""},{id:30,area:"right-side-logged-out",address:"https://nanoporetech.com/about-us",title:"About",order:3,target:""},{id:9,area:"right-side-logged-in",address:"https://nanoporetech.com/contact",title:"Contact",order:4,target:""},{id:10,area:"right-side-logged-in",address:"https://nanoporetech.com/about-us/news",title:"News",order:4,target:""},{id:11,area:"right-side-logged-in",address:"https://nanoporetech.com/about-us",title:"About",order:4,target:""},{id:12,area:"right-side-logged-in",address:"https://nanoporetech.com/events",title:"Events",order:4,target:""},{id:23,area:"left-side-logged-out",address:"https://nanoporetech.com/",title:"Nanoporetech",order:5,target:""},{id:24,area:"left-side-logged-out",address:"https://metrichor.com/",title:"Metrichor",order:5,target:""},{id:25,area:"left-side-logged-out",address:"https://community.nanoporetech.com/",title:"Community",order:5,target:""},{id:26,area:"left-side-logged-out",address:"https://nanoporetech.com/events",title:"Events",order:5,target:""},{id:27,area:"left-side-logged-out",address:"https://store.nanoporetech.com",title:"Store",order:5,target:""},{id:3,area:"left-side-logged-in",address:"https://nanoporetech.com/",title:"Nanoporetech",order:6,target:""},{id:4,area:"left-side-logged-in",address:"https://metrichor.com/",title:"Metrichor",order:6,target:""},{id:5,area:"left-side-logged-in",address:"https://community.nanoporetech.com/",title:"Community",order:6,target:""},{id:6,area:"left-side-logged-in",address:"https://nanoporetech.com/events",title:"Events",order:6,target:""},{id:7,area:"left-side-logged-in",address:"https://store.nanoporetech.com",title:"Store",order:6,target:""},{id:8,area:"left-side-logged-in",address:"https://epi2me.nanoporetech.com",title:"EPI2ME",order:6,target:"_blank"},{id:13,area:"profile-panel-list",address:"https://community.nanoporetech.com/",title:"Community Dashboard",order:7,target:""},{id:14,area:"profile-panel-list",address:"https://myaccount.nanoporetech.com/message_centre",title:"Messages",order:7,target:""},{id:15,area:"profile-panel-list",address:"https://community.nanoporetech.com/my-activity",title:"My Activity",order:7,target:""},{id:16,area:"profile-panel-list",address:"https://myaccount.nanoporetech.com/home",title:"My Account",order:7,target:""},{id:17,area:"profile-panel-list",address:"https://myaccount.nanoporetech.com/account/teams",title:"Team Management ",order:7,target:""},{id:18,area:"profile-panel-list",address:"https://nanoporetech.com/resource-centre/publications",title:"Publications",order:7,target:""},{id:19,area:"profile-panel-list",address:"https://myaccount.nanoporetech.com/profile/status",title:"Preferences",order:7,target:""}];const s={forgot_password:"https://myaccount-dev.nanoporetech.com/profile/details#password-form?RelayState=",logout:"https://myaccount-dev.nanoporetech.com/sso/logout?RelayState=",login:null,messages:"https://myaccount-dev.nanoporetech.com/message_centre",cart:"https://shop-test.nanoporetech.com/checkout/cart"};const n={app_id:"N8NZI5A47F",api_key:"b38860b015b02c9cb6993cf0367ed203",indeces:[{index:"all_prod_en",name:"All",domain:"nanoporetech.com",all_group:true,filters:["tags","type"]},{index:"cws_english_en",name:"www",domain:"nanoporetech.com",filters:["tags","type"]},{index:"store_prod",name:"Store",domain:"store.nanoporetech.com",filters:["type"]},{index:"cws_english_resources_en",name:"Resources",domain:"nanoporetech.com",filters:["tags"]},{index:"community_prod",name:"Community",domain:"community.nanoporetech.com",filters:["type","channel","authors","tags"]}]};const d={user:e,domains:t,cart:o,notifications:r,links:a,urls:s,search:n};export default d;export{o as cart,t as domains,a as links,r as notifications,n as search,s as urls,e as user};
-//# sourceMappingURL=p-c53b232e.js.map
+//# sourceMappingURL=p-2155fc2c.js.map

package/dist/nano-components/p-6c47fdc2.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{c as t}from"./p-099a573a.js";import"./p-f6a8467a.js";import"./p-ee045579.js";import"./p-9746b0a5.js";import"./p-9ebbb814.js";const o="table.worker";const p="stencil.table.worker";const s=new URL("p-e2f9ccfa.js",import.meta.url).href;const r=new Blob(['importScripts("'+s+'")'],{type:"text/javascript"});const e=URL.createObjectURL(r);const c=t(e,o,p);URL.revokeObjectURL(e);export{c as worker,p as workerMsgId,o as workerName,s as workerPath};
+//# sourceMappingURL=p-6c47fdc2.js.map

package/dist/nano-components/p-7730ce8e.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,h as i,a,g as e}from"./p-f6a8467a.js";import{g as s,a as o}from"./p-257432ff.js";import{d as r}from"./p-9746b0a5.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__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{constructor(i){t(this,i);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=>this.isActiveHandler(t)));if(t)this.activeItem=t;this.recalculatePositions()};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=t=>{this.updateScrollControls();this.syncActiveItemIndicator(t);setTimeout((()=>this.scrollToActiveItem(t)),300)};this.scrollControls=true;this.orientation="horizontal";this.activeHandler=t=>t.classList.add("active");this.inActiveHandler=t=>t.classList.remove("active");this.isActiveHandler=t=>t.classList.contains("active");this.hasScrollControls=false;this.hideControlEnd=true;this.hideControlStart=true;this.recalculatePositions=r(this.recalculatePositions,50)}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 s(this.host,"*",true)}get activeItem(){if(this._activeItem)return this._activeItem;return this.allActiveItems.find((t=>this.isActiveHandler(t)))}set activeItem(t){if(!t||t===this.activeItem||t.disabled||!this.allActiveItems.includes(t)){return}this._activeItem=t;this.allActiveItems.forEach((t=>{if(t===this._activeItem)this.activeHandler(t);else this.inActiveHandler(t)}));this.syncActiveItemIndicator();this.scrollToActiveItem()}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(t){if(!this.nav||!this.activeItem)return;requestAnimationFrame((()=>{this.activeItem.scrollIntoView({behavior:t?"auto":"smooth",block:"center",inline:"center"})}))}syncActiveItemIndicator(t){if(!this.activeItem)return;const i=this.activeItem;const a=i.clientWidth||0;const e=i.clientHeight+2||0;const s=o(i,this.itemContainer);if(!this.activeIndicator)return;const r=s.top;const n=s.left;if(t)this.activeIndicator.style.transition="none";switch(this.orientation){case"horizontal":this.activeIndicator.style.width=`${a}px`;this.activeIndicator.style.height=null;this.activeIndicator.style.transform=`translateX(${n}px)`;break;case"vertical":this.activeIndicator.style.width=null;this.activeIndicator.style.height=`${e}px`;this.activeIndicator.style.transform=`translateY(${r}px)`;break}setTimeout((()=>this.activeIndicator.style.transition=null),400)}connectedCallback(){this.isRtl=this.orientation==="horizontal"&&!!this.host.closest('[dir="rtl"]');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.recalculatePositions(true)}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},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 e(this)}static get watchers(){return{hasScrollControls:["watchScrollControls"],hideControlEnd:["hideEndBtn"],hideControlStart:["hideStartBtn"]}}};l.style=n;export{l as nano_overflow_nav};
+//# sourceMappingURL=p-7730ce8e.entry.js.map