@nanoporetech-digital/components 1.13.21 → 1.15.0

package/dist/nano-components/{p-1ce90ea4.entry.js → p-02177814.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as n,h as i,e,g as a}from"./p-f55560d3.js";import{d as s}from"./p-c930d4f5.js";import{b as o,g as r,c as l}from"./p-a0ddf496.js";import{a as d}from"./p-0e826935.js";import{c as h}from"./p-d3af43d2.js";import{P as c}from"./p-4ee095f3.js";let p=class{constructor(i){t(this,i),this.nanoClose=n(this,"nanoClose",7),this.nanoOpen=n(this,"nanoOpen",7),this.nanoOpening=n(this,"nanoOpening",7),this.nanoClosing=n(this,"nanoClosing",7),this.nanoBlur=n(this,"nanoBlur",7),this.nanoFocus=n(this,"nanoFocus",7),this.hasSecondarySlot=!1,this.hasAnchorEle=!1,this.didBlur=!1,this.animating=!1,this.didOpen=!1,this.isInGlobalNav=!1,this.isInMenuDrawer=!1,this.isInMenu=!1,this.isLegacy=!document.head.attachShadow,this.hasFocus=!1,this.href=null,this.target="_self",this.disabled=!1,this.open=!1,this.selected=!1,this.secondaryActiveWidth=0,this.secondaryFallback=()=>{},this.closeOnBlur=!0,this.closeSecondary=async()=>{if(this.open=!1,!this.hasSecondarySlot||!this.didOpen)return;this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});let t=await s(this.secondaryDiv,"open",!1);this.didOpen="hidden"!==t},this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth)return void this.secondaryFallback.call(this);if(this.open=!0,!this.hasSecondarySlot||this.didOpen)return;this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});let t=await s(this.secondaryDiv,"open",!0);this.didOpen="shown"===t},this.toggleSecondary=()=>{this.hasSecondarySlot&&(this.didOpen?this.closeSecondary():this.openSecondary())},this.handleFocus=()=>{this.hasFocus=!0,this.href&&!this.animating&&this.hasSecondarySlot&&this.openSecondary(),this.nanoFocus.emit()},this.handleHostBlur=()=>{this.animating||(this.el.removeAttribute("tabindex"),this.hasFocus=!1,this.nanoBlur.emit())},this.handleHostClick=t=>{this.hasAnchorEle&&(t.target.closest("a, button")||this.btn.click())},this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let t=0;o(this.el,".secondary-open.has-secondary").length&&(t=300),clearTimeout(this.waitHide),this.fromHover=!0,this.animating=!0,this.waitShow=window.setTimeout((async()=>await this.openSecondary()),t),this.animating=!1},this.handleMouseLeave=()=>{this.href&&(clearTimeout(this.waitShow),this.fromHover=!0,this.animating=!0,this.waitHide=window.setTimeout((async()=>await this.closeSecondary()),300),this.animating=!1)},this.handleClick=()=>{this.fromHover=!1,this.hasSecondarySlot?this.toggleSecondary():this.el.querySelector("*").click()},this.blur=t=>{this.didOpen&&!this.animating&&this.closeOnBlur&&(t&&t.relatedTarget&&(t.relatedTarget===this.el||t.relatedTarget===this.btn||this.foundThisNavEle(t.relatedTarget))?this.secondaryDiv.focus({preventScroll:!0}):(this.btn.removeEventListener("focusout",this.blur),this.secondaryDiv.removeEventListener("focusout",this.blur),window.removeEventListener("blur",this.blur),this.didBlur=!0,this.open=!1,t.relatedTarget||setTimeout((()=>{this.el.focus({preventScroll:!0})}),50)))}}async setFocus(){this.btn&&this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(this.hasSecondarySlot)if(this.didOpen){if(this.didBlur=!1,!this.fromHover){const t=new window.IntersectionObserver((n=>{n[0].boundingClientRect.top<0&&this.secondaryDiv.scrollIntoView({behavior:"smooth"}),t.disconnect()}),{threshold:1});t.observe(this.secondaryDiv),this.secondaryDiv.focus({preventScroll:!0}),this.btn.addEventListener("focusout",this.blur),this.secondaryDiv.addEventListener("focusout",this.blur),window.addEventListener("blur",this.blur),this.el.tabIndex=-1,this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}else this.fromHover||(this.btn.removeEventListener("focusout",this.blur),this.secondaryDiv.removeEventListener("focusout",this.blur)),setTimeout((()=>{this.fromHover||this.didBlur||this.btn.focus({preventScroll:!0}),this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}foundThisNavEle(t){let n=t.closest("nano-nav-item");return n=n===t?t.parentElement.closest("nano-nav-item"):n,!!n&&(n===this.el||this.foundThisNavEle(n))}componentWillLoad(){let t=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!t;let n=r(this.el,"a, button")[0];this.hasAnchorEle=!!n,n&&(this.href=n.href?n.href:null,this.btn=n,this.hasSecondarySlot&&this.btn.addEventListener("click",this.toggleSecondary),this.btn.addEventListener("focus",this.handleFocus),this.btn.addEventListener("blur",this.handleHostBlur))}connectedCallback(){this.isInGlobalNav=!1,this.isInMenuDrawer=!1,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 i(e,{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,legacy:this.isLegacy},onBlur:this.handleHostBlur,dir:"rtl"===this.el.ownerDocument.dir?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick},i("div",{class:{"nav-item":!0,"secondary-open":this.open,selected:this.selected}},this.href&&!this.hasAnchorEle&&!this.disabled&&i("a",{target:this.target,ref:t=>this.btn=t,href:this.href,onFocus:this.handleFocus},i("slot",{name:"icon-start"}),i("span",{class:"text"},i("slot",null)),i("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&i("button",{ref:t=>this.btn=t,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled},i("slot",{name:"icon-start"}),i("span",{class:"text"},i("slot",null)),i("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&i("div",{class:"link"},i("slot",{name:"icon-start"}),i("slot",null),i("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&i("div",{class:"secondary-menu",ref:t=>this.secondaryDiv=t,tabindex:"-1"},i("div",{class:"secondary-menu-content"},i("slot",{name:"secondary"})),i("div",{class:"secondary-menu-mask",onClick:this.closeSecondary}))))}get el(){return a(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};p.style=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin)}:host ::slotted(*),:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size: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-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{padding-left:unset;padding-right: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)}}:host ::slotted(nano-icon[slot=icon-start]){padding-right:var(--padding-end)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(nano-icon[slot=icon-start]){padding-right:unset;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host ::slotted(nano-icon[slot=icon-end]){padding-left:var(--padding-start)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(nano-icon[slot=icon-end]){padding-left:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);}}:host .link::slotted(nano-icon[slot=icon-start]),:host .link ::slotted(nano-icon[slot=icon-start]){padding-left:var(--padding-start);padding-right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .link::slotted(nano-icon[slot=icon-start]),:host .link ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-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]),:host .link ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .link::slotted(nano-icon[slot=icon-end]),:host .link ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host .link,:host button,:host a{border-bottom:var(--border-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}: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,:host a:focus{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, none)}:host ::slotted(a:focus),:host ::slotted(button:focus){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:none}.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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;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{padding-left:0;padding-right:var(--padding-end);-webkit-box-flex:1;-ms-flex:1;flex:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){-webkit-box-flex:1;-ms-flex:1;flex:1}:host(.nano-global-nav-menu) ::slotted(a:focus),:host(.nano-global-nav-menu) ::slotted(button:focus),:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){-webkit-box-shadow:none;box-shadow:none}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, "currentColor");min-height:100%;top:0;left:0;width:100%;z-index:1;opacity:0;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease, -webkit-transform 0.3s ease;background-color:var(--secondary-bg-color, white);-webkit-transform:translateX(100%);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;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease, -webkit-transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 10px;flex:0 0 10px;pointer-events:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}: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{left:auto;right:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(0);transform:translateX(0)}:host(.nano-menu) .secondary-menu-content{padding-left:var(--secondary-padding-start);padding-right:var(--secondary-padding-end);padding-top:var(--secondary-padding-top);padding-bottom:var(--secondary-padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu) .secondary-menu-content{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--secondary-padding-start);padding-inline-start:var(--secondary-padding-start);-webkit-padding-end:var(--secondary-padding-end);padding-inline-end:var(--secondary-padding-end)}}:host(.nano-global-nav-bar.legacy){margin:0 11px}:host(.nano-global-nav-bar.legacy) ::slotted(a){padding-left:6px;padding-right:6px;padding-top:7px;padding-bottom:7px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar.legacy) ::slotted(a){padding-left:unset;padding-right:unset;-webkit-padding-start:6px;padding-inline-start:6px;-webkit-padding-end:6px;padding-inline-end:6px}}:host(.nano-global-nav-menu.legacy) ::slotted(a){padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu.legacy) ::slotted(a){padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-left:var(--padding-end);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding-end);margin-inline-start:var(--padding-end);-webkit-margin-end:0;margin-inline-end:0}}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-left:0;margin-right:var(--padding-start);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding-start);margin-inline-end:var(--padding-start)}}:host(.nano-global-nav-bar.has-secondary) button{position:relative}:host(.nano-global-nav-bar.has-secondary) button::before{content:"";background:#86bee2;height:3px;left:5px;bottom:-14px;right:5px;position:absolute;-webkit-transform:translateZ(0) scaleX(0);transform:translateZ(0) scaleX(0);-webkit-transform-origin:0;transform-origin:0;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}:host(.nano-global-nav-bar.has-secondary) .selected button::before,:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{-webkit-transform:translateZ(0) scaleX(1);transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.5}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;-webkit-transform:translateY(-100%) translateZ(0);transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;-webkit-box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);left:0;right:0;z-index:-2}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{-webkit-transform:translateY(12px) translateZ(0);transform:translateY(12px) translateZ(0)}:host(.nano-global-nav-bar.has-secondary) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-left:var(--padding-start);padding-right:0;padding-top:calc(var(--padding-top) / 2);padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:currentColor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}:host(.nano-menu-drawer) .text{padding-left:0;padding-right:var(--padding-end);text-align:left;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;min-width:130px;width:130px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .text{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:var(--icon-size);width:var(--icon-size);-webkit-box-flex:0;-ms-flex:0 0 var(--icon-size);flex:0 0 var(--icon-size)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;min-width:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;top:0;right:0;left:auto;bottom:0;-webkit-transform:translateX(0);transform:translateX(0);z-index:-1;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:transform 0.3s ease, opacity 0.2s ease;transition:transform 0.3s ease, opacity 0.2s ease, -webkit-transform 0.3s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-left:var(--secondary-padding-start, var(--padding-start));padding-right:var(--secondary-padding-end, var(--padding-end));padding-top:var(--secondary-padding-top, var(--padding-top));padding-bottom:var(--secondary-padding-bottom, var(--padding-bottom))}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .secondary-menu{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--secondary-padding-start, var(--padding-start));padding-inline-start:var(--secondary-padding-start, var(--padding-start));-webkit-padding-end:var(--secondary-padding-end, var(--padding-end));padding-inline-end:var(--secondary-padding-end, var(--padding-end))}}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{-webkit-transform:translateX(100%);transform:translateX(100%)}:host(.nano-menu-drawer.legacy) .link,:host(.nano-menu-drawer.legacy) a,:host(.nano-menu-drawer.legacy) button{width:auto}:host(.nano-menu-drawer.legacy) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:calc(var(--padding-end) * 2);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;min-width:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer.legacy) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:calc(var(--padding-end) * 2);padding-inline-end:calc(var(--padding-end) * 2)}}:host(.nano-menu-drawer[dir=rtl]) .text{text-align:right}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{right:auto;left:0;-webkit-transform:translateX(0%);transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:1}';let g=class{constructor(i){t(this,i),this.nanoChange=n(this,"nanoChange",7),this.nanoBlur=n(this,"nanoBlur",7),this.nanoFocus=n(this,"nanoFocus",7),this.nanoDidLoad=n(this,"nanoDidLoad",7),this.nanoDidUnload=n(this,"nanoDidUnload",7),this.nanoSearchChange=n(this,"nanoSearchChange",7),this.nanoValidate=n(this,"nanoValidate",7),this.listItems=[],this.valueItems=[],this.selectId="nano-select-"+b++,this.rtl=!1,this.currLiIndex=-1,this.inputSearchVal="",this.watchValue=!0,this.onInit=!0,this.currInsertIndex=0,this.availOpts=[],this.showErrorMsg=!1,this.errorMessage="",this.hasFocus=!1,this.listOpen=!1,this.isLegacy="registerElement"in document,this.hasLabelSlot=!1,this.hasHelperSlot=!1,this.hasIconSlot=!1,this.invalid=!1,this.autofocus=!1,this.disabled=!1,this.validateOn="submit",this.showInlineError=!0,this.hideLabel=!1,this.floatLabel=!1,this.multiple=!1,this.name=this.selectId+"-name",this.readonly=!1,this.required=!1,this.allowCustomValues=!1,this.value=this.multiple?[]:"",this.options=[],this.clearSelect=!1,this.mask=!1,this.debounce=0,this.native=!0,this.customValidate=()=>(this.nativeSelect.setCustomValidity(""),this.required&&!this.getNativeValue().length?(this.nativeSelect.setCustomValidity("Please fill in this field."),!0):!this.getNativeValue().length||this.allowCustomValues||this.isValidValues()?this.max&&this.getNativeValue().length>this.max?(this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`),!0):!!(this.min&&this.getNativeValue().length<this.min)&&(this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`),!0):(this.nativeSelect.setCustomValidity("Please choose an item from this field."),!0)),this.showInlineValidation=t=>{"submitThenDirty"===this.validateOn&&(this.validateOn="dirty"),this.invalid=!1,this.showErrorMsg=!1,this.errorMessage="",this.nativeSelect.validity.valid||(this.errorMessage=this.nativeSelect.validationMessage,this.invalid=!0,this.showErrorMsg=!0),this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:t})},this.handleInvalid=t=>{this.invalid=!0,"submit"===this.validateOn&&(this.invalid=this.showErrorMsg=this.customValidate()),this.showInlineError&&t.preventDefault(),setTimeout((()=>this.showInlineValidation(t)),20)},this.onChange=t=>{this.readonly||this.disabled||!t||(t.preventDefault(),t.stopPropagation()),this.value=this.getNativeValue()},this.onBlur=()=>{this.multiple&&(this.currLiIndex=-1,document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown)),this.hasFocus=!1,setTimeout((()=>{"dirty"!==this.validateOn||this.listOpen||this.hasFocus||this.showInlineValidation()}),20),this.nanoBlur.emit()},this.onFocus=()=>{this.multiple&&(this.currLiIndex=-1,document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown),this.openList()),this.hasFocus=!0,this.nanoFocus.emit()},this.clearSelectValue=t=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&t&&(t.preventDefault(),t.stopPropagation()),this.multiple){this.value=[];let t=this.nativeSelect.querySelectorAll("option");t.length&&t.forEach((t=>t.remove())),this.currInsertIndex=-1,this.setAvailOpts()}else this.value="";this.onChange()},this.onClick=()=>{this.setFocus(),this.openList()},this.onMultiInputBlur=()=>{this.allowCustomValues||(this.inputSearchVal="",this.setAvailOpts())},this.onDragStart=t=>{this.dragVal=t.target.dataset.value},this.onDragEnd=t=>{this.dragVal=null,t.preventDefault()},this.onDragLeave=t=>{let n=t.target,i=n.dataset&&n.dataset.value?n.dataset.value:null;if(!i||this.dragVal===i||!this.value.includes(this.dragVal))return void t.preventDefault();let e=this.value.indexOf(i),a=this.value.indexOf(this.dragVal),s=this.value,o=s[e];s[e]=s[a],s[a]=o,this.value=[...s]},this.onMultiInput=t=>{this.inputSearchVal=t.target.value,this.setAvailOpts(),this.openList(),this.nanoSearchChange.emit({value:t.target.value})},this.onOptFocus=t=>{let n=this.getActiveOpt();n&&n.classList.remove("has-focus"),t.target.classList.add("has-focus")},this.onHostClick=()=>{setTimeout((()=>{this.multiple&&!this.hasFocus&&this.setFocus()}),20)},this.handleDocumentMouseDown=t=>{const n=t.target;l(this.el.tagName.toLowerCase(),n)!==this.el&&(this.listOpen=!1,this.onBlur())},this.handleDocumentKeyDown=t=>{if(this.multiple){if(!this.inputSearchVal){let n;switch(t.key){case"Backspace":if(!this.multiInput.previousElementSibling)break;n=this.multiInput.previousElementSibling,this.removeValue(n.dataset.value||null);break;case"Delete":if(!this.multiInput.nextElementSibling)break;n=this.multiInput.nextElementSibling,this.removeValue(n.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;"ArrowLeft"===t.key&&this.multiInput.previousSibling&&this.currInsertIndex--,"ArrowRight"===t.key&&this.multiInput.nextSibling&&this.currInsertIndex++,setTimeout((()=>{this.multiInput.focus()}),20),t.preventDefault()}}if(this.hasFocus&&!this.listOpen&&"ArrowDown"===t.key&&(this.openList(),this.currLiIndex=-1),this.hasFocus&&"Tab"===t.key&&setTimeout((()=>{if(document.activeElement&&l(this.el.tagName.toLowerCase(),document.activeElement)!==this.el)return this.listOpen=!1,void this.onBlur()})),this.listOpen){const n=this.getActiveOpt();let i=this.listItems.indexOf(n)||this.currLiIndex;switch(t.key){case"ArrowDown":case"ArrowUp":if(t.preventDefault(),"ArrowDown"===t.key?i++:"ArrowUp"===t.key&&i--,i<0)return this.currLiIndex=0,void this.multiInput.focus();let n=this.listItems[i]?i:this.currLiIndex;return void setTimeout((()=>{this.listItems[n].focus(),this.currLiIndex=n}),20);case"Enter":case" ":return void(this.listItems[this.currLiIndex]&&(this.addValue(this.listItems[this.currLiIndex].dataset.value),t.preventDefault()));case"Escape":return void(this.listOpen=!1)}}this.currLiIndex>-1&&t.preventDefault()}}}debounceChanged(){this.nanoSearchChange=d(this.nanoSearchChange,this.debounce)}shouldValidate(){this.onInit||(this.invalid&&(this.showErrorMsg=this.invalid=!1),this.customValidate(),"dirty"===this.validateOn&&this.showInlineValidation())}valueChanged(){this.watchValue&&(this.multiple?("string"==typeof this.value&&this.value.length&&(this.value=this.value.split(",")),(null===this.value||"string"==typeof this.value&&!this.value.length)&&(this.value=[]),this.currInsertIndex>this.value.length-1&&(this.currInsertIndex=this.value.length-1)):"string"!=typeof this.value&&this.value&&this.value[0]&&(this.value=this.value[0]),this.setNativeValue(),this.setAvailOpts(),setTimeout((()=>this.shouldValidate()),20),this.nanoChange.emit({value:this.value}))}optionsChanged(){this.setAvailOpts(),this.hasFocus&&this.openList()}multiChange(){this.switchValue(),this.multiple?this.setupMulti():this.popover&&this.popover.destroy()}setupMulti(){setTimeout((()=>{this.setAvailOpts(),this.popover=new c(this.selectWrap,this.multiList,{placement:"bottom-start",skidding:0,distance:0,onTransitionEnd:()=>{this.listOpen||(this.multiList.scrollTop=0)}})}),20)}listOpenChange(){this.listOpen?this.popover.show():this.popover.hide()}async reportValidity(t){return t&&this.showInlineValidation(),{isValid:!this.invalid,errorMessage:this.errorMessage}}async setFocus(){this.nativeSelect&&!this.multiple?this.nativeSelect.focus():this.multiInput&&this.multiInput.focus()}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(t){this.nativeSelect&&(this.nativeSelect.setCustomValidity(t),this.nativeSelect.reportValidity())}setAvailOpts(){this.multiple&&(this.availOpts=this.options.filter((t=>{let n="string"==typeof t?t:t.value,i="string"==typeof t?t:t.label||t.value;return!!n&&!this.value.includes(n)&&(!this.multiInput||i.toLowerCase().indexOf(this.inputSearchVal.toLowerCase())>-1)})))}getNativeValue(){const t=this.nativeSelect;return t?this.multiple?Array.from(t.options).map((t=>{if(t.selected&&t.hasAttribute("value"))return t.value})):t.options[t.selectedIndex]&&t.options[t.selectedIndex].hasAttribute("value")?t.options[t.selectedIndex].value:"":""}setNativeValue(){const t=this.nativeSelect;if(!t)return null;this.multiple?Array.from(this.nativeSelect.options).filter((t=>"string"==typeof this.value?t.value===this.value:this.value.find((t=>"string"==typeof t?t===this.value:t.value?t===t.value:void 0)))).map((t=>{t.selected=!0})):t.value=this.value}isValidValues(){if(!this.nativeSelect)return null;const t=this.nativeSelect.querySelectorAll("option:checked"),n=Array.from(t).map((t=>t.value||null));return this.multiple?n.reduce(((t,n)=>!!t&&!!this.options.find((t=>t.value?t.value===n:t===n))),!0):this.options.find((t=>t.value?t.value===n[0]:t===n[0]))}openList(){this.multiple&&(this.listOpen=!(!(this.availOpts.length||this.inputSearchVal.length&&this.allowCustomValues)||this.max&&!(this.max&&this.value.length<this.max)))}addValue(t){this.multiple&&(this.value&&this.value.length&&this.value.includes(t)||this.max&&this.value.length===this.max||(this.currInsertIndex++,this.value=[...this.value.slice(0,this.currInsertIndex),t,...this.value.slice(this.currInsertIndex)],this.inputSearchVal="",this.setAvailOpts(),this.setFocus(),this.openList()))}removeValue(t){this.multiple&&this.value.length&&(t||(t=this.value[this.value.length-1]),this.value=this.value.filter((n=>n!==t)),this.currInsertIndex>this.value.length-1&&(this.currInsertIndex=this.value.length-1),this.setFocus(),this.openList())}switchValue(){this.watchValue=!1,this.multiple?(this.value="string"==typeof this.value&&this.value.length?this.value.split(","):[],this.currInsertIndex=Math.max(this.value.length-1,0)):"string"!=typeof this.value&&this.value&&this.value[0]&&(this.value=this.value[0]),this.watchValue=!0}isSelected(t){if(this.multiple)return this.value.find((n=>n===t))}getLabel(t){let n=this.options.find((n=>n.value?n.value===t:n===t));return n?n.label?n.label:n:null}slotChangeObserver(){(this.mo=new MutationObserver((t=>this.processSlottedContent(t)))).observe(this.el,{childList:!0,subtree:!0})}processSlottedContent(t){if(this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length,this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]'),this.hasIconSlot=!!this.el.querySelector('[slot="icon"]'),!t){let t=this.el.querySelector('select:not([class*="sc-nano-select"])');t&&Array.from(t.attributes).filter((t=>t.specified&&t.nodeName in this)).map((t=>this[t.nodeName]=t.nodeValue));let n=this.el.querySelector('label:not([class*="sc-nano-select"])');n&&(this.label=this.label||n.innerHTML);let i=this.el.querySelectorAll('option:not([class*="sc-nano-select"])');if(this.watchValue=!1,i&&i.length){let t=[];i.forEach((n=>{t.push({label:n.label||n.innerText,value:n.value}),n.selected&&n.value&&(this.multiple?this.value.push(n.value):this.value=n.value)})),this.options=t}if(i.length||n||t){let t=this.el.querySelectorAll('[slot="legacy"]');t&&t.forEach((t=>t.parentNode.removeChild(t)))}this.watchValue=!0}if(t&&!Array.from(t[0].addedNodes).find((t=>"nano-select-option"===t.nodeName.toLowerCase())))return;let n=this.el.querySelectorAll("nano-select-option");if(n&&n.length){let t=[];n.forEach((n=>{t.push({label:n.label||n.innerText,value:n.value}),n.selected&&n.value&&(this.multiple?this.value.push(n.value):this.value=n.value)})),this.options=t}this.setAvailOpts()}getActiveOpt(){return this.multiList.querySelector(".has-focus")}connectedCallback(){this.debounceChanged(),this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el})),this.mo&&this.mo.disconnect(),this.popover&&this.popover.destroy()}componentDidLoad(){this.slotChangeObserver(),this.multiple&&this.setupMulti(),this.customValidate()}componentWillLoad(){this.switchValue(),this.processSlottedContent(),this.onInit=!1}renderLabel(t,n){let e={};if(e="float"===n?{"placeholder-as-label":!0}:{label:!0,"visually-hide":this.hideLabel},this.label||this.hasLabelSlot)return i("label",{class:e,htmlFor:this.selectId,id:t},this.label&&this.label,!this.label&&!!this.hasLabelSlot&&i("slot",{name:"label"}))}render(){const t=this.selectId+"-lbl",n=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"",a=this.selectId+"-list";this.rtl="rtl"===this.el.ownerDocument.dir,this.listItems=[],this.valueItems=[],!this.placeholder||this.options[0]&&this.options[0].label===this.placeholder||this.options.unshift({label:this.placeholder,value:""});let s,o=this.listOpen;if(this.multiple){let e=i("input",{class:"multi-input",id:this.selectId,ref:t=>this.multiInput=t,disabled:this.disabled,autoFocus:this.autofocus,autocomplete:"off",onInput:this.onMultiInput,value:this.inputSearchVal,onTouchStart:this.onClick,onMouseDown:this.onClick,onFocus:this.onFocus,onBlur:this.onMultiInputBlur,placeholder:!this.placeholder||this.floatLabel||this.value.length?"":this.placeholder,role:this.multiple?"combobox":"","aria-labelledby":t+" "+n,"aria-controls":a,"aria-expanded":o?"true":"false","aria-required":this.required?"true":"false","aria-autocomplete":"list"});s=this.value.length?this.value.map(((t,n)=>{let a=this.options.find((n=>n.value?n.value===t:n===t));a=a&&a.label?a.label:t;let s=i("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,draggable:!0,"data-value":t,ref:t=>this.valueItems.push(t),class:"multi-value"},i("span",null,a),i("button",{class:"multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(t)},onMouseUp:()=>{this.removeValue(t)}},i("nano-icon",{name:"light/times"})));return 0===n&&this.currInsertIndex<0?s=[e,s]:n===this.currInsertIndex&&(s=[s,e]),s})):e}return i(e,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},h(this.color)),{"has-value":!!this.value.length||!!this.inputSearchVal.length,"has-focus":this.hasFocus,"is-invalid":this.invalid,"has-label":null!==this.label&&!this.floatLabel,"has-float-label":null!==this.label&&this.floatLabel,rtl:this.rtl,"has-multiple":this.multiple,"multi-list-open":this.listOpen,"has-clr-btn":this.clearSelect,masked:this.mask,legacy:this.isLegacy}),onClick:this.onHostClick},!this.floatLabel&&this.renderLabel(t),i("div",{class:"select",ref:t=>this.selectWrap=t},this.floatLabel&&this.renderLabel(t,"float"),i("div",{class:{"native-select-wrap":!0,"native-select-wrap--multiple":this.multiple}},!this.multiple&&this.mask&&i("div",{class:"select-mask"},this.getLabel(this.value)),this.multiple&&[i("div",{class:"multi-wrap"},s),i("ul",{role:"listbox",ref:t=>this.multiList=t,"aria-multiselectable":"true","aria-required":this.required,"aria-expanded":o?"true":"false","aria-hidden":!o,hidden:!o,id:a,class:{"multi-select-box":!0,"multi-select-box--open":o}},this.allowCustomValues&&this.inputSearchVal.length>0&&i("li",{"data-value":this.inputSearchVal,role:"option",tabindex:"-1",ref:t=>this.listItems.push(t),onMouseDown:()=>{this.addValue(this.inputSearchVal)},onFocus:this.onOptFocus},"Add ",this.inputSearchVal),this.availOpts.map((t=>{let n,e;if(t.value?(n=t.value,e=t.label||t.value):"string"==typeof t&&(n=t,e=n),n)return i("li",{role:"option",key:n,"data-value":n,ref:t=>this.listItems.push(t),tabindex:"-1","aria-selected":this.isSelected(n)?"true":"false",onMouseDown:()=>{this.addValue(n)},onFocus:this.onOptFocus},e)}))),i("select",{id:this.selectId+"-hidden",class:"native-select",ref:t=>this.nativeSelect=t,"aria-labelledby":t+" "+n,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.value.map((t=>i("option",{value:t,selected:!0},t))))],!this.multiple&&i("select",{id:this.selectId,class:"native-select",ref:t=>this.nativeSelect=t,"aria-labelledby":t+" "+n,disabled:this.disabled,form:this.form,autoFocus:this.autofocus,multiple:this.multiple,name:this.name,required:this.required,size:this.size,onBlur:this.onBlur,onFocus:this.onFocus,onInvalid:this.handleInvalid,onChange:this.onChange},this.options.map(((t,n)=>t.value||t.label?i("option",{key:t.label+n,label:t.label,value:t.value,selected:t.value===this.value||!this.value&&!t.value,disabled:!t.value&&this.required},t.label?t.label:t.value):i("option",{key:t+n,value:t,selected:t===this.value},t))),i("slot",{name:"legacy"})),this.clearSelect&&!this.readonly&&!this.disabled&&i("button",{type:"button",class:"select-clear-icon",tabindex:"-1",onTouchEnd:this.clearSelectValue,onMouseUp:this.clearSelectValue},i("nano-icon",{name:"light/times"})),i("div",{onTouchEnd:this.onClick,onMouseUp:this.onClick,class:"select-down-icon"},this.hasIconSlot?i("slot",{name:"icon"}):i("nano-icon",{name:"regular/chevron-down"})))),(this.showInlineError||this.hasHelperSlot)&&i("div",{class:"more",id:n},this.showInlineError?i("div",{class:"error"},this.errorMessage):"",i("div",{class:"helper"},i("slot",{name:"helper"}))))}get el(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],validateOn:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],options:["optionsChanged"],multiple:["multiChange"],listOpen:["listOpenChange"]}}},b=0;g.style='.sc-nano-select-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}.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, 8px));--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, 132, 169)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--input-border-width-sh, var(--nano-input-border-width, 2px));--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, #fac6c3);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);--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, #fee8de);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #687576);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--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, #90c6e7);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:inline-block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2696b6));--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]){opacity:0.7}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}label.sc-nano-select,.more.sc-nano-select,.error.sc-nano-select,.helper.sc-nano-select{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.more.visually-hide.sc-nano-select,.error.visually-hide.sc-nano-select,.helper.visually-hide.sc-nano-select{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.placeholder-as-label.sc-nano-select{padding-left:var(--padding-start);padding-right:0;padding-top:0;padding-bottom:0;color:var(--input-text-color);position:absolute;font-size:1.4em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:0.7;pointer-events:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.placeholder-as-label.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}.is-invalid.sc-nano-select-h .placeholder-as-label.sc-nano-select{color:var(--invalid-msg-color)}.has-value.sc-nano-select-h .placeholder-as-label.sc-nano-select{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.9em}.has-focus.has-multiple.sc-nano-select-h .placeholder-as-label.sc-nano-select,.has-value.has-multiple.sc-nano-select-h .placeholder-as-label.sc-nano-select{-webkit-transform:translateY(-75%);transform:translateY(-75%);font-size:0.9em}.has-multiple.sc-nano-select-h .placeholder-as-label.sc-nano-select{top:1.5em}.placeholder-as-label.sc-nano-select~.native-select-wrap.sc-nano-select{font-size:1.1em}.label.sc-nano-select{padding-left:0;padding-right:0;padding-top:0;padding-bottom:var(--padding-bottom);color:var(--label-color);font-size:var(--label-font-size);line-height:1}.label.sc-nano-select .placeholder.sc-nano-select{opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}.has-value.sc-nano-select-h .label.sc-nano-select .placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .label.sc-nano-select{color:var(--label-color--invalid)}.more.sc-nano-select{margin-left:3px;margin-right:0;margin-top:4px;margin-bottom:var(--padding-bottom);height:1em;position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.more.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.helper.sc-nano-select,.error.sc-nano-select{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.helper.sc-nano-select{color:var(--help-msg-color);font-style:italic}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .helper.sc-nano-select{opacity:0}.error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .error.sc-nano-select{opacity:1}.select.sc-nano-select{font-family:inherit;font-size: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);width:100%;padding:0 !important;position:relative;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size)}.has-focus.sc-nano-select-h .select.sc-nano-select{z-index:10;background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width)}.is-invalid.sc-nano-select-h .select.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width)}.is-invalid.has-focus.sc-nano-select-h .select.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width)}.native-select-wrap.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.select-mask.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size: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;pointer-events:none;line-height:2.5em;min-height:2.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select-mask.sc-nano-select{padding-left:unset;padding-right: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)}}.native-select.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size: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;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;line-height:2.5em;min-height:2.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.native-select.sc-nano-select{padding-left:unset;padding-right: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)}}.legacy.sc-nano-select-h .native-select.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.masked.sc-nano-select-h .native-select.sc-nano-select{opacity:0;position:absolute;left:0;top:0}.has-float-label.sc-nano-select-h .native-select.sc-nano-select{opacity:0;padding-top:1.8em}.has-value.has-float-label.sc-nano-select-h .native-select.sc-nano-select{opacity:1}.native-select.sc-nano-select:-webkit-autofill{background-color:transparent}.native-select.sc-nano-select:invalid{-webkit-box-shadow:none;box-shadow:none}.native-select.sc-nano-select::-ms-clear{display:none}.native-select.sc-nano-select::-ms-expand{display:none}.native-select[disabled].sc-nano-select{opacity:0.4}.has-multiple.sc-nano-select-h .native-select.sc-nano-select{display:none}.native-select.sc-nano-select option.sc-nano-select{color:black}.multi-wrap.sc-nano-select{padding-left:0;padding-right:calc(1.9em + var(--padding-end));padding-top:0;padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-wrap.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:calc(1.9em + var(--padding-end));padding-inline-end:calc(1.9em + var(--padding-end))}}.has-clr-btn.sc-nano-select-h .multi-wrap.sc-nano-select{padding-left:0;padding-right:calc(2.6em + (var(--padding-end) * 2) + (var(--padding-end) * 2));padding-top:0;padding-bottom:calc(var(--padding-bottom) / 2)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.has-clr-btn.sc-nano-select-h .multi-wrap.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:calc(2.6em + (var(--padding-end) * 2) + (var(--padding-end) * 2));padding-inline-end:calc(2.6em + (var(--padding-end) * 2) + (var(--padding-end) * 2))}}.has-float-label.sc-nano-select-h .multi-wrap.sc-nano-select{padding-top:1.3em}.multi-input.sc-nano-select{font-family:inherit;font-size: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-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) / 2);padding-bottom:0;min-width:50px;max-width:100%;max-height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;-webkit-box-flex:0;-ms-flex:0;flex:0;position:relative;min-height:calc(2.8em - var(--padding-top));-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-input.sc-nano-select{padding-left:unset;padding-right: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)}}.legacy.sc-nano-select-h .multi-input.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.multi-input.sc-nano-select:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.multi-select-box.sc-nano-select{position:absolute;background:var(--nano-layer-bg, #fff);min-width:calc(100% + (var(--input-border-width) * 2));z-index:var(--nano-layer-index-dropdown, 300);margin:0;font-size:1.15em;line-height:1.4;max-height:50vh;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:none;-webkit-transition:opacity 0.2s ease;transition:opacity 0.2s ease;opacity:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));-webkit-box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));padding:var(--padding-top) 0 var(--padding-bottom);border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)))}.multi-select-box--open.sc-nano-select{opacity:1}.multi-select-box.sc-nano-select li.sc-nano-select{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-size:var(--input-font-size);cursor:pointer;list-style:none;color:var(--input-text-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-select-box.sc-nano-select li.sc-nano-select{padding-left:unset;padding-right: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)}}.nano-color.sc-nano-select-h .multi-select-box.sc-nano-select li.sc-nano-select{color:black}.multi-select-box.sc-nano-select li.sc-nano-select:hover,.multi-select-box.sc-nano-select li.sc-nano-select:focus{color:var(--color--focus-contrast);outline:none;background:rgba(var(--multi-input-value-bg), 0.2)}.nano-color.sc-nano-select-h .multi-select-box.sc-nano-select li.sc-nano-select:hover,.nano-color.sc-nano-select-h .multi-select-box.sc-nano-select li.sc-nano-select:focus{background:rgba(var(--nano-color-base-rgb), 0.2)}.multi-value.sc-nano-select{margin-left:4px;margin-right:0;margin-top:4px;margin-bottom:0;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:2px solid;border-color:var(--multi-input-value-border);padding:0.3em 0.5em;border-radius:3px;line-height:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--input-font-size);font-weight:600;letter-spacing:1px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-value.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0}}.multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1.4}.multi-value-remove.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:0.5em;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0;font-size:1em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-value-remove.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0.5em;padding-inline-start:0.5em;-webkit-padding-end:0;padding-inline-end:0}}.multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.select-down-icon.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);color:var(--input-text-color);font-size:1.4em;right:0;position:absolute;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select-down-icon.sc-nano-select{padding-left:unset;padding-right: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)}}.is-invalid.sc-nano-select-h .select-down-icon.sc-nano-select{color:var(--clear-btn-color--invalid)}.rtl.sc-nano-select-h .select-down-icon.sc-nano-select{right:unset;left:0}.has-multiple.sc-nano-select-h .select-down-icon.sc-nano-select{pointer-events:all}.masked.sc-nano-select-h .select-down-icon.sc-nano-select{position:relative}.select-clear-icon.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-size:1.4em;color:var(--clear-btn-color);border:0;outline:none;background-color:transparent;background-repeat:no-repeat;visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;top:0;height:100%;right:calc(1.4em + var(--padding-end))}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select-clear-icon.sc-nano-select{padding-left:unset;padding-right: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)}}.select-clear-icon.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.rtl.sc-nano-select-h .select-clear-icon.sc-nano-select{right:unset;left:calc(1.4em + var(--padding-end))}.is-invalid.sc-nano-select-h .select-clear-icon.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .select-clear-icon.sc-nano-select{visibility:visible}.select-clear-icon.sc-nano-select nano-icon.sc-nano-select{--color:inherit}.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}';export{p as nano_nav_item,g as nano_select}
-//# sourceMappingURL=p-1ce90ea4.entry.js.map
+import{r as t,c as n,h as i,e,g as a}from"./p-bb0619e6.js";import{d as s}from"./p-ed2efbeb.js";import{b as o,g as r,c as l}from"./p-a0ddf496.js";import{a as d}from"./p-0e826935.js";import{c as h}from"./p-d3af43d2.js";import{P as c}from"./p-d112948c.js";let p=class{constructor(i){t(this,i),this.nanoClose=n(this,"nanoClose",7),this.nanoOpen=n(this,"nanoOpen",7),this.nanoOpening=n(this,"nanoOpening",7),this.nanoClosing=n(this,"nanoClosing",7),this.nanoBlur=n(this,"nanoBlur",7),this.nanoFocus=n(this,"nanoFocus",7),this.hasSecondarySlot=!1,this.hasAnchorEle=!1,this.didBlur=!1,this.animating=!1,this.didOpen=!1,this.isInGlobalNav=!1,this.isInMenuDrawer=!1,this.isInMenu=!1,this.isLegacy=!document.head.attachShadow,this.hasFocus=!1,this.href=null,this.target="_self",this.disabled=!1,this.open=!1,this.selected=!1,this.secondaryActiveWidth=0,this.secondaryFallback=()=>{},this.closeOnBlur=!0,this.closeSecondary=async()=>{if(this.open=!1,!this.hasSecondarySlot||!this.didOpen)return;this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});let t=await s(this.secondaryDiv,"open",!1);this.didOpen="hidden"!==t},this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth)return void this.secondaryFallback.call(this);if(this.open=!0,!this.hasSecondarySlot||this.didOpen)return;this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});let t=await s(this.secondaryDiv,"open",!0);this.didOpen="shown"===t},this.toggleSecondary=()=>{this.hasSecondarySlot&&(this.didOpen?this.closeSecondary():this.openSecondary())},this.handleFocus=()=>{this.hasFocus=!0,this.href&&!this.animating&&this.hasSecondarySlot&&this.openSecondary(),this.nanoFocus.emit()},this.handleHostBlur=()=>{this.animating||(this.el.removeAttribute("tabindex"),this.hasFocus=!1,this.nanoBlur.emit())},this.handleHostClick=t=>{this.hasAnchorEle&&(t.target.closest("a, button")||this.btn.click())},this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let t=0;o(this.el,".secondary-open.has-secondary").length&&(t=300),clearTimeout(this.waitHide),this.fromHover=!0,this.animating=!0,this.waitShow=window.setTimeout((async()=>await this.openSecondary()),t),this.animating=!1},this.handleMouseLeave=()=>{this.href&&(clearTimeout(this.waitShow),this.fromHover=!0,this.animating=!0,this.waitHide=window.setTimeout((async()=>await this.closeSecondary()),300),this.animating=!1)},this.handleClick=()=>{this.fromHover=!1,this.hasSecondarySlot?this.toggleSecondary():this.el.querySelector("*").click()},this.blur=t=>{this.didOpen&&!this.animating&&this.closeOnBlur&&(t&&t.relatedTarget&&(t.relatedTarget===this.el||t.relatedTarget===this.btn||this.foundThisNavEle(t.relatedTarget))?this.secondaryDiv.focus({preventScroll:!0}):(this.btn.removeEventListener("focusout",this.blur),this.secondaryDiv.removeEventListener("focusout",this.blur),window.removeEventListener("blur",this.blur),this.didBlur=!0,this.open=!1,t.relatedTarget||setTimeout((()=>{this.el.focus({preventScroll:!0})}),50)))}}async setFocus(){this.btn&&this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(this.hasSecondarySlot)if(this.didOpen){if(this.didBlur=!1,!this.fromHover){const t=new window.IntersectionObserver((n=>{n[0].boundingClientRect.top<0&&this.secondaryDiv.scrollIntoView({behavior:"smooth"}),t.disconnect()}),{threshold:1});t.observe(this.secondaryDiv),this.secondaryDiv.focus({preventScroll:!0}),this.btn.addEventListener("focusout",this.blur),this.secondaryDiv.addEventListener("focusout",this.blur),window.addEventListener("blur",this.blur),this.el.tabIndex=-1,this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}else this.fromHover||(this.btn.removeEventListener("focusout",this.blur),this.secondaryDiv.removeEventListener("focusout",this.blur)),setTimeout((()=>{this.fromHover||this.didBlur||this.btn.focus({preventScroll:!0}),this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}foundThisNavEle(t){let n=t.closest("nano-nav-item");return n=n===t?t.parentElement.closest("nano-nav-item"):n,!!n&&(n===this.el||this.foundThisNavEle(n))}componentWillLoad(){let t=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!t;let n=r(this.el,"a, button")[0];this.hasAnchorEle=!!n,n&&(this.href=n.href?n.href:null,this.btn=n,this.hasSecondarySlot&&this.btn.addEventListener("click",this.toggleSecondary),this.btn.addEventListener("focus",this.handleFocus),this.btn.addEventListener("blur",this.handleHostBlur))}connectedCallback(){this.isInGlobalNav=!1,this.isInMenuDrawer=!1,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 i(e,{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,legacy:this.isLegacy},onBlur:this.handleHostBlur,dir:"rtl"===this.el.ownerDocument.dir?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick},i("div",{class:{"nav-item":!0,"secondary-open":this.open,selected:this.selected}},this.href&&!this.hasAnchorEle&&!this.disabled&&i("a",{target:this.target,ref:t=>this.btn=t,href:this.href,onFocus:this.handleFocus},i("slot",{name:"icon-start"}),i("span",{class:"text"},i("slot",null)),i("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&i("button",{ref:t=>this.btn=t,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled},i("slot",{name:"icon-start"}),i("span",{class:"text"},i("slot",null)),i("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&i("div",{class:"link"},i("slot",{name:"icon-start"}),i("slot",null),i("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&i("div",{class:"secondary-menu",ref:t=>this.secondaryDiv=t,tabindex:"-1"},i("div",{class:"secondary-menu-content"},i("slot",{name:"secondary"})),i("div",{class:"secondary-menu-mask",onClick:this.closeSecondary}))))}get el(){return a(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};p.style=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin)}:host ::slotted(*),:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size: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-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{padding-left:unset;padding-right: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)}}:host ::slotted(nano-icon[slot=icon-start]){padding-right:var(--padding-end)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(nano-icon[slot=icon-start]){padding-right:unset;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host ::slotted(nano-icon[slot=icon-end]){padding-left:var(--padding-start)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(nano-icon[slot=icon-end]){padding-left:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);}}:host .link::slotted(nano-icon[slot=icon-start]),:host .link ::slotted(nano-icon[slot=icon-start]){padding-left:var(--padding-start);padding-right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .link::slotted(nano-icon[slot=icon-start]),:host .link ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-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]),:host .link ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .link::slotted(nano-icon[slot=icon-end]),:host .link ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host .link,:host button,:host a{border-bottom:var(--border-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}: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,:host a:focus{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, none)}:host ::slotted(a:focus),:host ::slotted(button:focus){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:none}.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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;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{padding-left:0;padding-right:var(--padding-end);-webkit-box-flex:1;-ms-flex:1;flex:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){-webkit-box-flex:1;-ms-flex:1;flex:1}:host(.nano-global-nav-menu) ::slotted(a:focus),:host(.nano-global-nav-menu) ::slotted(button:focus),:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){-webkit-box-shadow:none;box-shadow:none}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, "currentColor");min-height:100%;top:0;left:0;width:100%;z-index:1;opacity:0;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease, -webkit-transform 0.3s ease;background-color:var(--secondary-bg-color, white);-webkit-transform:translateX(100%);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;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease, -webkit-transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 10px;flex:0 0 10px;pointer-events:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}: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{left:auto;right:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(0);transform:translateX(0)}:host(.nano-menu) .secondary-menu-content{padding-left:var(--secondary-padding-start);padding-right:var(--secondary-padding-end);padding-top:var(--secondary-padding-top);padding-bottom:var(--secondary-padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu) .secondary-menu-content{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--secondary-padding-start);padding-inline-start:var(--secondary-padding-start);-webkit-padding-end:var(--secondary-padding-end);padding-inline-end:var(--secondary-padding-end)}}:host(.nano-global-nav-bar.legacy){margin:0 11px}:host(.nano-global-nav-bar.legacy) ::slotted(a){padding-left:6px;padding-right:6px;padding-top:7px;padding-bottom:7px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar.legacy) ::slotted(a){padding-left:unset;padding-right:unset;-webkit-padding-start:6px;padding-inline-start:6px;-webkit-padding-end:6px;padding-inline-end:6px}}:host(.nano-global-nav-menu.legacy) ::slotted(a){padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu.legacy) ::slotted(a){padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-left:var(--padding-end);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding-end);margin-inline-start:var(--padding-end);-webkit-margin-end:0;margin-inline-end:0}}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-left:0;margin-right:var(--padding-start);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding-start);margin-inline-end:var(--padding-start)}}:host(.nano-global-nav-bar.has-secondary) button{position:relative}:host(.nano-global-nav-bar.has-secondary) button::before{content:"";background:#86bee2;height:3px;left:5px;bottom:-14px;right:5px;position:absolute;-webkit-transform:translateZ(0) scaleX(0);transform:translateZ(0) scaleX(0);-webkit-transform-origin:0;transform-origin:0;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}:host(.nano-global-nav-bar.has-secondary) .selected button::before,:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{-webkit-transform:translateZ(0) scaleX(1);transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.5}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;-webkit-transform:translateY(-100%) translateZ(0);transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;-webkit-box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);left:0;right:0;z-index:-2}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{-webkit-transform:translateY(12px) translateZ(0);transform:translateY(12px) translateZ(0)}:host(.nano-global-nav-bar.has-secondary) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-left:var(--padding-start);padding-right:0;padding-top:calc(var(--padding-top) / 2);padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:currentColor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}:host(.nano-menu-drawer) .text{padding-left:0;padding-right:var(--padding-end);text-align:left;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;min-width:130px;width:130px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .text{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:var(--icon-size);width:var(--icon-size);-webkit-box-flex:0;-ms-flex:0 0 var(--icon-size);flex:0 0 var(--icon-size)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;min-width:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;top:0;right:0;left:auto;bottom:0;-webkit-transform:translateX(0);transform:translateX(0);z-index:-1;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:transform 0.3s ease, opacity 0.2s ease;transition:transform 0.3s ease, opacity 0.2s ease, -webkit-transform 0.3s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-left:var(--secondary-padding-start, var(--padding-start));padding-right:var(--secondary-padding-end, var(--padding-end));padding-top:var(--secondary-padding-top, var(--padding-top));padding-bottom:var(--secondary-padding-bottom, var(--padding-bottom))}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .secondary-menu{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--secondary-padding-start, var(--padding-start));padding-inline-start:var(--secondary-padding-start, var(--padding-start));-webkit-padding-end:var(--secondary-padding-end, var(--padding-end));padding-inline-end:var(--secondary-padding-end, var(--padding-end))}}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{-webkit-transform:translateX(100%);transform:translateX(100%)}:host(.nano-menu-drawer.legacy) .link,:host(.nano-menu-drawer.legacy) a,:host(.nano-menu-drawer.legacy) button{width:auto}:host(.nano-menu-drawer.legacy) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:calc(var(--padding-end) * 2);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;min-width:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer.legacy) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:calc(var(--padding-end) * 2);padding-inline-end:calc(var(--padding-end) * 2)}}:host(.nano-menu-drawer[dir=rtl]) .text{text-align:right}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{right:auto;left:0;-webkit-transform:translateX(0%);transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:1}';let g=class{constructor(i){t(this,i),this.nanoChange=n(this,"nanoChange",7),this.nanoBlur=n(this,"nanoBlur",7),this.nanoFocus=n(this,"nanoFocus",7),this.nanoDidLoad=n(this,"nanoDidLoad",7),this.nanoDidUnload=n(this,"nanoDidUnload",7),this.nanoSearchChange=n(this,"nanoSearchChange",7),this.nanoValidate=n(this,"nanoValidate",7),this.listItems=[],this.valueItems=[],this.selectId="nano-select-"+b++,this.rtl=!1,this.currLiIndex=-1,this.inputSearchVal="",this.watchValue=!0,this.onInit=!0,this.currInsertIndex=0,this.availOpts=[],this.showErrorMsg=!1,this.errorMessage="",this.hasFocus=!1,this.listOpen=!1,this.isLegacy="registerElement"in document,this.hasLabelSlot=!1,this.hasHelperSlot=!1,this.hasIconSlot=!1,this.invalid=!1,this.autofocus=!1,this.disabled=!1,this.validateOn="submit",this.showInlineError=!0,this.hideLabel=!1,this.floatLabel=!1,this.multiple=!1,this.name=this.selectId+"-name",this.readonly=!1,this.required=!1,this.allowCustomValues=!1,this.value=this.multiple?[]:"",this.options=[],this.clearSelect=!1,this.mask=!1,this.debounce=0,this.native=!0,this.customValidate=()=>(this.nativeSelect.setCustomValidity(""),this.required&&!this.getNativeValue().length?(this.nativeSelect.setCustomValidity("Please fill in this field."),!0):!this.getNativeValue().length||this.allowCustomValues||this.isValidValues()?this.max&&this.getNativeValue().length>this.max?(this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`),!0):!!(this.min&&this.getNativeValue().length<this.min)&&(this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`),!0):(this.nativeSelect.setCustomValidity("Please choose an item from this field."),!0)),this.showInlineValidation=t=>{"submitThenDirty"===this.validateOn&&(this.validateOn="dirty"),this.invalid=!1,this.showErrorMsg=!1,this.errorMessage="",this.nativeSelect.validity.valid||(this.errorMessage=this.nativeSelect.validationMessage,this.invalid=!0,this.showErrorMsg=!0),this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:t})},this.handleInvalid=t=>{this.invalid=!0,"submit"===this.validateOn&&(this.invalid=this.showErrorMsg=this.customValidate()),this.showInlineError&&t.preventDefault(),setTimeout((()=>this.showInlineValidation(t)),20)},this.onChange=t=>{this.readonly||this.disabled||!t||(t.preventDefault(),t.stopPropagation()),this.value=this.getNativeValue()},this.onBlur=()=>{this.multiple&&(this.currLiIndex=-1,document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown)),this.hasFocus=!1,setTimeout((()=>{"dirty"!==this.validateOn||this.listOpen||this.hasFocus||this.showInlineValidation()}),20),this.nanoBlur.emit()},this.onFocus=()=>{this.multiple&&(this.currLiIndex=-1,document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown),this.openList()),this.hasFocus=!0,this.nanoFocus.emit()},this.clearSelectValue=t=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&t&&(t.preventDefault(),t.stopPropagation()),this.multiple){this.value=[];let t=this.nativeSelect.querySelectorAll("option");t.length&&t.forEach((t=>t.remove())),this.currInsertIndex=-1,this.setAvailOpts()}else this.value="";this.onChange()},this.onClick=()=>{this.setFocus(),this.openList()},this.onMultiInputBlur=()=>{this.allowCustomValues||(this.inputSearchVal="",this.setAvailOpts())},this.onDragStart=t=>{this.dragVal=t.target.dataset.value},this.onDragEnd=t=>{this.dragVal=null,t.preventDefault()},this.onDragLeave=t=>{let n=t.target,i=n.dataset&&n.dataset.value?n.dataset.value:null;if(!i||this.dragVal===i||!this.value.includes(this.dragVal))return void t.preventDefault();let e=this.value.indexOf(i),a=this.value.indexOf(this.dragVal),s=this.value,o=s[e];s[e]=s[a],s[a]=o,this.value=[...s]},this.onMultiInput=t=>{this.inputSearchVal=t.target.value,this.setAvailOpts(),this.openList(),this.nanoSearchChange.emit({value:t.target.value})},this.onOptFocus=t=>{let n=this.getActiveOpt();n&&n.classList.remove("has-focus"),t.target.classList.add("has-focus")},this.onHostClick=()=>{setTimeout((()=>{this.multiple&&!this.hasFocus&&this.setFocus()}),20)},this.handleDocumentMouseDown=t=>{const n=t.target;l(this.el.tagName.toLowerCase(),n)!==this.el&&(this.listOpen=!1,this.onBlur())},this.handleDocumentKeyDown=t=>{if(this.multiple){if(!this.inputSearchVal){let n;switch(t.key){case"Backspace":if(!this.multiInput.previousElementSibling)break;n=this.multiInput.previousElementSibling,this.removeValue(n.dataset.value||null);break;case"Delete":if(!this.multiInput.nextElementSibling)break;n=this.multiInput.nextElementSibling,this.removeValue(n.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;"ArrowLeft"===t.key&&this.multiInput.previousSibling&&this.currInsertIndex--,"ArrowRight"===t.key&&this.multiInput.nextSibling&&this.currInsertIndex++,setTimeout((()=>{this.multiInput.focus()}),20),t.preventDefault()}}if(this.hasFocus&&!this.listOpen&&"ArrowDown"===t.key&&(this.openList(),this.currLiIndex=-1),this.hasFocus&&"Tab"===t.key&&setTimeout((()=>{if(document.activeElement&&l(this.el.tagName.toLowerCase(),document.activeElement)!==this.el)return this.listOpen=!1,void this.onBlur()})),this.listOpen){const n=this.getActiveOpt();let i=this.listItems.indexOf(n)||this.currLiIndex;switch(t.key){case"ArrowDown":case"ArrowUp":if(t.preventDefault(),"ArrowDown"===t.key?i++:"ArrowUp"===t.key&&i--,i<0)return this.currLiIndex=0,void this.multiInput.focus();let n=this.listItems[i]?i:this.currLiIndex;return void setTimeout((()=>{this.listItems[n].focus(),this.currLiIndex=n}),20);case"Enter":case" ":return void(this.listItems[this.currLiIndex]&&(this.addValue(this.listItems[this.currLiIndex].dataset.value),t.preventDefault()));case"Escape":return void(this.listOpen=!1)}}this.currLiIndex>-1&&t.preventDefault()}}}debounceChanged(){this.nanoSearchChange=d(this.nanoSearchChange,this.debounce)}shouldValidate(){this.onInit||(this.invalid&&(this.showErrorMsg=this.invalid=!1),this.customValidate(),"dirty"===this.validateOn&&this.showInlineValidation())}valueChanged(){this.watchValue&&(this.multiple?("string"==typeof this.value&&this.value.length&&(this.value=this.value.split(",")),(null===this.value||"string"==typeof this.value&&!this.value.length)&&(this.value=[]),this.currInsertIndex>this.value.length-1&&(this.currInsertIndex=this.value.length-1)):"string"!=typeof this.value&&this.value&&this.value[0]&&(this.value=this.value[0]),this.setNativeValue(),this.setAvailOpts(),setTimeout((()=>this.shouldValidate()),20),this.nanoChange.emit({value:this.value}))}optionsChanged(){this.setAvailOpts(),this.hasFocus&&this.openList()}multiChange(){this.switchValue(),this.multiple?this.setupMulti():this.popover&&this.popover.destroy()}setupMulti(){setTimeout((()=>{this.setAvailOpts(),this.popover=new c(this.selectWrap,this.multiList,{placement:"bottom-start",skidding:0,distance:0,onTransitionEnd:()=>{this.listOpen||(this.multiList.scrollTop=0)}})}),20)}listOpenChange(){this.listOpen?this.popover.show():this.popover.hide()}async reportValidity(t){return t&&this.showInlineValidation(),{isValid:!this.invalid,errorMessage:this.errorMessage}}async setFocus(){this.nativeSelect&&!this.multiple?this.nativeSelect.focus():this.multiInput&&this.multiInput.focus()}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(t){this.nativeSelect&&(this.nativeSelect.setCustomValidity(t),this.nativeSelect.reportValidity())}setAvailOpts(){this.multiple&&(this.availOpts=this.options.filter((t=>{let n="string"==typeof t?t:t.value,i="string"==typeof t?t:t.label||t.value;return!!n&&!this.value.includes(n)&&(!this.multiInput||i.toLowerCase().indexOf(this.inputSearchVal.toLowerCase())>-1)})))}getNativeValue(){const t=this.nativeSelect;return t?this.multiple?Array.from(t.options).map((t=>{if(t.selected&&t.hasAttribute("value"))return t.value})):t.options[t.selectedIndex]&&t.options[t.selectedIndex].hasAttribute("value")?t.options[t.selectedIndex].value:"":""}setNativeValue(){const t=this.nativeSelect;if(!t)return null;this.multiple?Array.from(this.nativeSelect.options).filter((t=>"string"==typeof this.value?t.value===this.value:this.value.find((t=>"string"==typeof t?t===this.value:t.value?t===t.value:void 0)))).map((t=>{t.selected=!0})):t.value=this.value}isValidValues(){if(!this.nativeSelect)return null;const t=this.nativeSelect.querySelectorAll("option:checked"),n=Array.from(t).map((t=>t.value||null));return this.multiple?n.reduce(((t,n)=>!!t&&!!this.options.find((t=>t.value?t.value===n:t===n))),!0):this.options.find((t=>t.value?t.value===n[0]:t===n[0]))}openList(){this.multiple&&(this.listOpen=!(!(this.availOpts.length||this.inputSearchVal.length&&this.allowCustomValues)||this.max&&!(this.max&&this.value.length<this.max)))}addValue(t){this.multiple&&(this.value&&this.value.length&&this.value.includes(t)||this.max&&this.value.length===this.max||(this.currInsertIndex++,this.value=[...this.value.slice(0,this.currInsertIndex),t,...this.value.slice(this.currInsertIndex)],this.inputSearchVal="",this.setAvailOpts(),this.setFocus(),this.openList()))}removeValue(t){this.multiple&&this.value.length&&(t||(t=this.value[this.value.length-1]),this.value=this.value.filter((n=>n!==t)),this.currInsertIndex>this.value.length-1&&(this.currInsertIndex=this.value.length-1),this.setFocus(),this.openList())}switchValue(){this.watchValue=!1,this.multiple?(this.value="string"==typeof this.value&&this.value.length?this.value.split(","):[],this.currInsertIndex=Math.max(this.value.length-1,0)):"string"!=typeof this.value&&this.value&&this.value[0]&&(this.value=this.value[0]),this.watchValue=!0}isSelected(t){if(this.multiple)return this.value.find((n=>n===t))}getLabel(t){let n=this.options.find((n=>n.value?n.value===t:n===t));return n?n.label?n.label:n:null}slotChangeObserver(){(this.mo=new MutationObserver((t=>this.processSlottedContent(t)))).observe(this.el,{childList:!0,subtree:!0})}processSlottedContent(t){if(this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length,this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]'),this.hasIconSlot=!!this.el.querySelector('[slot="icon"]'),!t){let t=this.el.querySelector('select:not([class*="sc-nano-select"])');t&&Array.from(t.attributes).filter((t=>t.specified&&t.nodeName in this)).map((t=>this[t.nodeName]=t.nodeValue));let n=this.el.querySelector('label:not([class*="sc-nano-select"])');n&&(this.label=this.label||n.innerHTML);let i=this.el.querySelectorAll('option:not([class*="sc-nano-select"])');if(this.watchValue=!1,i&&i.length){let t=[];i.forEach((n=>{t.push({label:n.label||n.innerText,value:n.value}),n.selected&&n.value&&(this.multiple?this.value.push(n.value):this.value=n.value)})),this.options=t}if(i.length||n||t){let t=this.el.querySelectorAll('[slot="legacy"]');t&&t.forEach((t=>t.parentNode.removeChild(t)))}this.watchValue=!0}if(t&&!Array.from(t[0].addedNodes).find((t=>"nano-select-option"===t.nodeName.toLowerCase())))return;let n=this.el.querySelectorAll("nano-select-option");if(n&&n.length){let t=[];n.forEach((n=>{t.push({label:n.label||n.innerText,value:n.value}),n.selected&&n.value&&(this.multiple?this.value.push(n.value):this.value=n.value)})),this.options=t}this.setAvailOpts()}getActiveOpt(){return this.multiList.querySelector(".has-focus")}connectedCallback(){this.debounceChanged(),this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el})),this.mo&&this.mo.disconnect(),this.popover&&this.popover.destroy()}componentDidLoad(){this.slotChangeObserver(),this.multiple&&this.setupMulti(),this.customValidate()}componentWillLoad(){this.switchValue(),this.processSlottedContent(),this.onInit=!1}renderLabel(t,n){let e={};if(e="float"===n?{"placeholder-as-label":!0}:{label:!0,"visually-hide":this.hideLabel},this.label||this.hasLabelSlot)return i("label",{class:e,htmlFor:this.selectId,id:t},this.label&&this.label,!this.label&&!!this.hasLabelSlot&&i("slot",{name:"label"}))}render(){const t=this.selectId+"-lbl",n=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"",a=this.selectId+"-list";this.rtl="rtl"===this.el.ownerDocument.dir,this.listItems=[],this.valueItems=[],!this.placeholder||this.options[0]&&this.options[0].label===this.placeholder||this.options.unshift({label:this.placeholder,value:""});let s,o=this.listOpen;if(this.multiple){let e=i("input",{class:"multi-input",id:this.selectId,ref:t=>this.multiInput=t,disabled:this.disabled,autoFocus:this.autofocus,autocomplete:"off",onInput:this.onMultiInput,value:this.inputSearchVal,onTouchStart:this.onClick,onMouseDown:this.onClick,onFocus:this.onFocus,onBlur:this.onMultiInputBlur,placeholder:!this.placeholder||this.floatLabel||this.value.length?"":this.placeholder,role:this.multiple?"combobox":"","aria-labelledby":t+" "+n,"aria-controls":a,"aria-expanded":o?"true":"false","aria-required":this.required?"true":"false","aria-autocomplete":"list"});s=this.value.length?this.value.map(((t,n)=>{let a=this.options.find((n=>n.value?n.value===t:n===t));a=a&&a.label?a.label:t;let s=i("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,draggable:!0,"data-value":t,ref:t=>this.valueItems.push(t),class:"multi-value"},i("span",null,a),i("button",{class:"multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(t)},onMouseUp:()=>{this.removeValue(t)}},i("nano-icon",{name:"light/times"})));return 0===n&&this.currInsertIndex<0?s=[e,s]:n===this.currInsertIndex&&(s=[s,e]),s})):e}return i(e,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},h(this.color)),{"has-value":!!this.value.length||!!this.inputSearchVal.length,"has-focus":this.hasFocus,"is-invalid":this.invalid,"has-label":null!==this.label&&!this.floatLabel,"has-float-label":null!==this.label&&this.floatLabel,rtl:this.rtl,"has-multiple":this.multiple,"multi-list-open":this.listOpen,"has-clr-btn":this.clearSelect,masked:this.mask,legacy:this.isLegacy}),onClick:this.onHostClick},!this.floatLabel&&this.renderLabel(t),i("div",{class:"select",ref:t=>this.selectWrap=t},this.floatLabel&&this.renderLabel(t,"float"),i("div",{class:{"native-select-wrap":!0,"native-select-wrap--multiple":this.multiple}},!this.multiple&&this.mask&&i("div",{class:"select-mask"},this.getLabel(this.value)),this.multiple&&[i("div",{class:"multi-wrap"},s),i("ul",{role:"listbox",ref:t=>this.multiList=t,"aria-multiselectable":"true","aria-required":this.required,"aria-expanded":o?"true":"false","aria-hidden":!o,hidden:!o,id:a,class:{"multi-select-box":!0,"multi-select-box--open":o}},this.allowCustomValues&&this.inputSearchVal.length>0&&i("li",{"data-value":this.inputSearchVal,role:"option",tabindex:"-1",ref:t=>this.listItems.push(t),onMouseDown:()=>{this.addValue(this.inputSearchVal)},onFocus:this.onOptFocus},"Add ",this.inputSearchVal),this.availOpts.map((t=>{let n,e;if(t.value?(n=t.value,e=t.label||t.value):"string"==typeof t&&(n=t,e=n),n)return i("li",{role:"option",key:n,"data-value":n,ref:t=>this.listItems.push(t),tabindex:"-1","aria-selected":this.isSelected(n)?"true":"false",onMouseDown:()=>{this.addValue(n)},onFocus:this.onOptFocus},e)}))),i("select",{id:this.selectId+"-hidden",class:"native-select",ref:t=>this.nativeSelect=t,"aria-labelledby":t+" "+n,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.value.map((t=>i("option",{value:t,selected:!0},t))))],!this.multiple&&i("select",{id:this.selectId,class:"native-select",ref:t=>this.nativeSelect=t,"aria-labelledby":t+" "+n,disabled:this.disabled,form:this.form,autoFocus:this.autofocus,multiple:this.multiple,name:this.name,required:this.required,size:this.size,onBlur:this.onBlur,onFocus:this.onFocus,onInvalid:this.handleInvalid,onChange:this.onChange},this.options.map(((t,n)=>t.value||t.label?i("option",{key:t.label+n,label:t.label,value:t.value,selected:t.value===this.value||!this.value&&!t.value,disabled:!t.value&&this.required},t.label?t.label:t.value):i("option",{key:t+n,value:t,selected:t===this.value},t))),i("slot",{name:"legacy"})),this.clearSelect&&!this.readonly&&!this.disabled&&i("button",{type:"button",class:"select-clear-icon",tabindex:"-1",onTouchEnd:this.clearSelectValue,onMouseUp:this.clearSelectValue},i("nano-icon",{name:"light/times"})),i("div",{onTouchEnd:this.onClick,onMouseUp:this.onClick,class:"select-down-icon"},this.hasIconSlot?i("slot",{name:"icon"}):i("nano-icon",{name:"regular/chevron-down"})))),(this.showInlineError||this.hasHelperSlot)&&i("div",{class:"more",id:n},this.showInlineError?i("div",{class:"error"},this.errorMessage):"",i("div",{class:"helper"},i("slot",{name:"helper"}))))}get el(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],validateOn:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],options:["optionsChanged"],multiple:["multiChange"],listOpen:["listOpenChange"]}}},b=0;g.style='.sc-nano-select-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}.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, 8px));--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(--input-border-width-sh, var(--nano-input-border-width, 2px));--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, #fac6c3);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);--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, #fee8de);--invalid-msg-color:rgba(var(--color-invalid), 1);--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:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--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, #90c6e7);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:inline-block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--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]){opacity:0.7}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}label.sc-nano-select,.more.sc-nano-select,.error.sc-nano-select,.helper.sc-nano-select{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.more.visually-hide.sc-nano-select,.error.visually-hide.sc-nano-select,.helper.visually-hide.sc-nano-select{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.placeholder-as-label.sc-nano-select{padding-left:var(--padding-start);padding-right:0;padding-top:0;padding-bottom:0;color:var(--input-text-color);position:absolute;font-size:1.4em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:0.7;pointer-events:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.placeholder-as-label.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}.is-invalid.sc-nano-select-h .placeholder-as-label.sc-nano-select{color:var(--invalid-msg-color)}.has-value.sc-nano-select-h .placeholder-as-label.sc-nano-select{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.9em}.has-focus.has-multiple.sc-nano-select-h .placeholder-as-label.sc-nano-select,.has-value.has-multiple.sc-nano-select-h .placeholder-as-label.sc-nano-select{-webkit-transform:translateY(-75%);transform:translateY(-75%);font-size:0.9em}.has-multiple.sc-nano-select-h .placeholder-as-label.sc-nano-select{top:1.5em}.placeholder-as-label.sc-nano-select~.native-select-wrap.sc-nano-select{font-size:1.1em}.label.sc-nano-select{padding-left:0;padding-right:0;padding-top:0;padding-bottom:var(--padding-bottom);color:var(--label-color);font-size:var(--label-font-size);line-height:1}.label.sc-nano-select .placeholder.sc-nano-select{opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}.has-value.sc-nano-select-h .label.sc-nano-select .placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .label.sc-nano-select{color:var(--label-color--invalid)}.more.sc-nano-select{margin-left:3px;margin-right:0;margin-top:4px;margin-bottom:var(--padding-bottom);height:1em;position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.more.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.helper.sc-nano-select,.error.sc-nano-select{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.helper.sc-nano-select{color:var(--help-msg-color);font-style:italic}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .helper.sc-nano-select{opacity:0}.error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .error.sc-nano-select{opacity:1}.select.sc-nano-select{font-family:inherit;font-size: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);width:100%;padding:0 !important;position:relative;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size)}.has-focus.sc-nano-select-h .select.sc-nano-select{z-index:10;background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width)}.is-invalid.sc-nano-select-h .select.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width)}.is-invalid.has-focus.sc-nano-select-h .select.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width)}.native-select-wrap.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.select-mask.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size: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;pointer-events:none;line-height:2.5em;min-height:2.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select-mask.sc-nano-select{padding-left:unset;padding-right: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)}}.native-select.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size: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;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;line-height:2.5em;min-height:2.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.native-select.sc-nano-select{padding-left:unset;padding-right: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)}}.legacy.sc-nano-select-h .native-select.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.masked.sc-nano-select-h .native-select.sc-nano-select{opacity:0;position:absolute;left:0;top:0}.has-float-label.sc-nano-select-h .native-select.sc-nano-select{opacity:0;padding-top:1.8em}.has-value.has-float-label.sc-nano-select-h .native-select.sc-nano-select{opacity:1}.native-select.sc-nano-select:-webkit-autofill{background-color:transparent}.native-select.sc-nano-select:invalid{-webkit-box-shadow:none;box-shadow:none}.native-select.sc-nano-select::-ms-clear{display:none}.native-select.sc-nano-select::-ms-expand{display:none}.native-select[disabled].sc-nano-select{opacity:0.4}.has-multiple.sc-nano-select-h .native-select.sc-nano-select{display:none}.native-select.sc-nano-select option.sc-nano-select{color:black}.multi-wrap.sc-nano-select{padding-left:0;padding-right:calc(1.9em + var(--padding-end));padding-top:0;padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-wrap.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:calc(1.9em + var(--padding-end));padding-inline-end:calc(1.9em + var(--padding-end))}}.has-clr-btn.sc-nano-select-h .multi-wrap.sc-nano-select{padding-left:0;padding-right:calc(2.6em + (var(--padding-end) * 2) + (var(--padding-end) * 2));padding-top:0;padding-bottom:calc(var(--padding-bottom) / 2)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.has-clr-btn.sc-nano-select-h .multi-wrap.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:calc(2.6em + (var(--padding-end) * 2) + (var(--padding-end) * 2));padding-inline-end:calc(2.6em + (var(--padding-end) * 2) + (var(--padding-end) * 2))}}.has-float-label.sc-nano-select-h .multi-wrap.sc-nano-select{padding-top:1.3em}.multi-input.sc-nano-select{font-family:inherit;font-size: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-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) / 2);padding-bottom:0;min-width:50px;max-width:100%;max-height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;-webkit-box-flex:0;-ms-flex:0;flex:0;position:relative;min-height:calc(2.8em - var(--padding-top));-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-input.sc-nano-select{padding-left:unset;padding-right: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)}}.legacy.sc-nano-select-h .multi-input.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.multi-input.sc-nano-select:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.multi-select-box.sc-nano-select{position:absolute;background:var(--nano-layer-bg, #fff);min-width:calc(100% + (var(--input-border-width) * 2));z-index:var(--nano-layer-index-dropdown, 300);margin:0;font-size:1.15em;line-height:1.4;max-height:50vh;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:none;-webkit-transition:opacity 0.2s ease;transition:opacity 0.2s ease;opacity:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));-webkit-box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));padding:var(--padding-top) 0 var(--padding-bottom);border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)))}.multi-select-box--open.sc-nano-select{opacity:1}.multi-select-box.sc-nano-select li.sc-nano-select{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-size:var(--input-font-size);cursor:pointer;list-style:none;color:var(--input-text-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-select-box.sc-nano-select li.sc-nano-select{padding-left:unset;padding-right: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)}}.nano-color.sc-nano-select-h .multi-select-box.sc-nano-select li.sc-nano-select{color:black}.multi-select-box.sc-nano-select li.sc-nano-select:hover,.multi-select-box.sc-nano-select li.sc-nano-select:focus{color:var(--color--focus-contrast);outline:none;background:rgba(var(--multi-input-value-bg), 0.2)}.nano-color.sc-nano-select-h .multi-select-box.sc-nano-select li.sc-nano-select:hover,.nano-color.sc-nano-select-h .multi-select-box.sc-nano-select li.sc-nano-select:focus{background:rgba(var(--nano-color-base-rgb), 0.2)}.multi-value.sc-nano-select{margin-left:4px;margin-right:0;margin-top:4px;margin-bottom:0;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:2px solid;border-color:var(--multi-input-value-border);padding:0.3em 0.5em;border-radius:3px;line-height:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--input-font-size);font-weight:600;letter-spacing:1px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-value.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0}}.multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1.4}.multi-value-remove.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:0.5em;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0;font-size:1em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-value-remove.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0.5em;padding-inline-start:0.5em;-webkit-padding-end:0;padding-inline-end:0}}.multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.select-down-icon.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);color:var(--input-text-color);font-size:1.4em;right:0;position:absolute;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select-down-icon.sc-nano-select{padding-left:unset;padding-right: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)}}.is-invalid.sc-nano-select-h .select-down-icon.sc-nano-select{color:var(--clear-btn-color--invalid)}.rtl.sc-nano-select-h .select-down-icon.sc-nano-select{right:unset;left:0}.has-multiple.sc-nano-select-h .select-down-icon.sc-nano-select{pointer-events:all}.masked.sc-nano-select-h .select-down-icon.sc-nano-select{position:relative}.select-clear-icon.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-size:1.4em;color:var(--clear-btn-color);border:0;outline:none;background-color:transparent;background-repeat:no-repeat;visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;top:0;height:100%;right:calc(1.4em + var(--padding-end))}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select-clear-icon.sc-nano-select{padding-left:unset;padding-right: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)}}.select-clear-icon.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.rtl.sc-nano-select-h .select-clear-icon.sc-nano-select{right:unset;left:calc(1.4em + var(--padding-end))}.is-invalid.sc-nano-select-h .select-clear-icon.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .select-clear-icon.sc-nano-select{visibility:visible}.select-clear-icon.sc-nano-select nano-icon.sc-nano-select{--color:inherit}.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}';export{p as nano_nav_item,g as nano_select}
+//# sourceMappingURL=p-02177814.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/nav-item/nav-item.tsx","src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/select/select.tsx","src/components/select/select.scss?tag=nano-select&encapsulation=scoped"],"names":["NavItem","[object Object]","hostRef","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","closeSecondary","async","nanoClosing","emit","secondaryMenu","secondaryDiv","status","displayTransition","openSecondary","window","innerWidth","call","nanoOpening","toggleSecondary","handleFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","panelio","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","nanoClose","found","parentElement","secondaryEle","link","getDirectChildren","h","Host","class","has-secondary","secondary-open","has-focus","nano-global-nav","nano-menu-drawer","nano-menu","legacy","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","nav-item","ref","a","onFocus","name","div","tabindex","Select","listItems","valueItems","selectId","selectIds","rtl","currLiIndex","inputSearchVal","watchValue","onInit","currInsertIndex","availOpts","showErrorMsg","errorMessage","listOpen","hasLabelSlot","hasHelperSlot","hasIconSlot","invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","value","options","clearSelect","mask","debounce","native","customValidate","nativeSelect","setCustomValidity","getNativeValue","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","originalEvent","handleInvalid","preventDefault","onChange","stopPropagation","handleDocumentKeyDown","handleDocumentMouseDown","openList","clearSelectValue","querySelectorAll","forEach","n","remove","setAvailOpts","setFocus","onMultiInputBlur","onDragStart","dragVal","dataset","onDragEnd","onDragLeave","ele","spanVal","includes","to","indexOf","from","tmpArr","tmpVal","onMultiInput","nanoSearchChange","onOptFocus","activeEle","getActiveOpt","add","onHostClick","closestElement","tagName","toLowerCase","rm","key","multiInput","previousElementSibling","removeValue","nextElementSibling","previousSibling","nextSibling","activeElement","selectedItem","testIndex","foundIndex","addValue","debounceEvent","split","setNativeValue","shouldValidate","nanoChange","switchValue","setupMulti","popover","destroy","Popover","selectWrap","multiList","placement","skidding","distance","onTransitionEnd","scrollTop","show","hide","validateFirst","Promise","resolve","message","reportValidity","filter","opt","toFind","strFilter","nsl","Array","map","hasAttribute","selectedIndex","find","val","values","reduce","accumulator","currentValue","slice","Math","foundVal","mo","MutationObserver","mrs","processSlottedContent","childList","subtree","mutations","existingselect","attributes","attr","specified","nodeName","nodeValue","existingLabel","label","innerHTML","legacyOpts","option","push","innerText","children","parentNode","removeChild","addedNodes","node","nanoOpts","debounceChanged","dispatchEvent","CustomEvent","detail","slotChangeObserver","labelId","position","classes","placeholder-as-label","visually-hide","htmlFor","id","moreId","listId","placeholder","unshift","valueMarkup","optionMenu","input","autoFocus","autocomplete","onInput","onTouchStart","onMouseDown","role","aria-labelledby","aria-controls","aria-expanded","aria-required","aria-autocomplete","i","toReturn","draggable","data-value","span","type","onTouchEnd","onMouseUp","aria-disabled","Object","assign","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","multi-list-open","has-clr-btn","masked","renderLabel","native-select-wrap","native-select-wrap--multiple","getLabel","ul","aria-multiselectable","aria-hidden","hidden","multi-select-box","multi-select-box--open","li","optval","aria-selected","isSelected","select","form","onInvalid","size"],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n} from '@stencil/core';\nimport { displayTransition, getDirectChildren, getSiblings } from '../../utils';\nimport { 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@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 hasAnchorEle: boolean = false;\n  private secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private didBlur: boolean = false;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() isLegacy: boolean = !document.head.attachShadow;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop() 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   * 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      if (!this.fromHover) {\n        this.btn.removeEventListener('focusout', this.blur);\n        this.secondaryDiv.removeEventListener('focusout', this.blur);\n      }\n      setTimeout(() => {\n        if (!this.fromHover && !this.didBlur)\n          this.btn.focus({ preventScroll: true });\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      this.didBlur = false;\n\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        this.btn.addEventListener('focusout', this.blur);\n        this.secondaryDiv.addEventListener('focusout', this.blur);\n        window.addEventListener('blur', this.blur);\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  private closeSecondary = async () => {\n    this.open = false;\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', false);\n    this.didOpen = status !== 'hidden';\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n    this.open = true;\n    if (!this.hasSecondarySlot || this.didOpen) return;\n\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', true);\n    this.didOpen = status === 'shown';\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    let 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    else this.el.querySelector<HTMLElement>('*').click();\n  };\n\n  // utility to traverse up, to see if element is nested within current nav-item\n  private foundThisNavEle(el: HTMLElement): boolean {\n    let found = el.closest('nano-nav-item');\n    found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n    if (!found) return false;\n    if (found === this.el) return true;\n    return this.foundThisNavEle(found);\n  }\n\n  private blur = (ev: FocusEvent) => {\n    if (!this.didOpen || this.animating) return;\n    if (!this.closeOnBlur) return;\n\n    // if event is associated with this element don't close\n    if (ev && ev.relatedTarget) {\n      if (\n        ev.relatedTarget === this.el ||\n        ev.relatedTarget === this.btn ||\n        this.foundThisNavEle(ev.relatedTarget as HTMLElement)\n      ) {\n        this.secondaryDiv.focus({ preventScroll: true });\n        return;\n      }\n    }\n\n    this.btn.removeEventListener('focusout', this.blur);\n    this.secondaryDiv.removeEventListener('focusout', this.blur);\n    window.removeEventListener('blur', this.blur);\n\n    this.didBlur = true;\n\n    this.open = false;\n    if (!ev.relatedTarget)\n      setTimeout(() => {\n        this.el.focus({ preventScroll: true });\n      }, 50);\n  };\n\n  componentWillLoad() {\n    let secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    let link = getDirectChildren(this.el, 'a, button')[0] as\n      | HTMLAnchorElement\n      | HTMLButtonElement;\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          legacy: this.isLegacy,\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      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\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              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\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\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\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\n:host {\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\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include text-inherit();\n    @include padding(\n      var(--padding-top),\n      var(--padding-end),\n      var(--padding-bottom),\n      var(--padding-start)\n    );\n\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(null, var(--padding-end), null, null);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(null, null, null, var(--padding-start));\n  }\n\n  .link {\n    &::slotted(nano-icon[slot='icon-start']),\n    ::slotted(nano-icon[slot='icon-start']) {\n      @include padding(null, 0, null, var(--padding-start));\n    }\n\n    &::slotted(nano-icon[slot='icon-end']),\n    ::slotted(nano-icon[slot='icon-end']) {\n      @include padding(null, var(--padding-end), null, 0);\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-bottom: var(--border-bottom);\n    display: flex;\n    align-items: center;\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,\n  a:focus {\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, none);\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\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: none;\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    @include padding(null, var(--padding-end), null, 0);\n\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, 'currentColor');\n    min-height: 100%;\n    top: 0;\n    left: 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    @include padding(0, var(--padding-end), 0, 0);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\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    left: auto;\n    right: 0;\n    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  .secondary-menu-content {\n    @include padding(\n      var(--secondary-padding-top),\n      var(--secondary-padding-end),\n      var(--secondary-padding-bottom),\n      var(--secondary-padding-start)\n    );\n  }\n}\n\n// I'm sorry. Horrible IE fixes for collapsing stuff :/\n:host(.nano-global-nav-bar.legacy) {\n  margin: 0 11px;\n\n  ::slotted(a) {\n    @include padding(7px, 6px, 7px, 6px);\n  }\n}\n\n:host(.nano-global-nav-menu.legacy) {\n  ::slotted(a) {\n    @include padding(8px, 12px, 8px, 12px);\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    @include margin(0, 0, 0, var(--padding-end));\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include margin(0, var(--padding-start), 0, 0);\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  button {\n    position: relative;\n\n    &::before {\n      content: '';\n      background: rgb(134, 190, 226);\n      height: 3px;\n      left: 5px;\n      bottom: -14px;\n      right: 5px;\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  .secondary-open button::before {\n    opacity: 0.5;\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 rgba(0, 0, 0, 0.15);\n    left: 0;\n    right: 0;\n    z-index: -2;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n\n    &:focus {\n      outline: none;\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    @include padding(\n      calc(var(--padding-top) / 2),\n      0,\n      calc(var(--padding-bottom) / 2),\n      var(--padding-start)\n    );\n\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    @include padding(null, var(--padding-end), null, 0);\n\n    text-align: left;\n    flex: 0 1 auto;\n    min-width: 130px;\n    width: 130px;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\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    @include padding(0, var(--padding-end), 0, 0);\n\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    top: 0;\n    right: 0;\n    left: auto;\n    bottom: 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\n    @include padding(\n      var(--secondary-padding-top, var(--padding-top)),\n      var(--secondary-padding-end, var(--padding-end)),\n      var(--secondary-padding-bottom, var(--padding-bottom)),\n      var(--secondary-padding-start, var(--padding-start))\n    );\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n      // opacity: 1;\n    }\n  }\n}\n\n:host(.nano-menu-drawer.legacy) {\n  .link,\n  a,\n  button {\n    width: auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, calc(var(--padding-end) * 2), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .text {\n    text-align: right;\n  }\n\n  .secondary-menu {\n    right: auto;\n    left: 0;\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\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} from '@stencil/core';\n\nimport {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  CssClassMap,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\nimport {\n  testLegacyStyle,\n  debounceEvent,\n  closestElement,\n  createColorClasses,\n} from '../../utils';\nimport Popover from '../../utils/popover';\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 label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot legacy - you can use this slot to wrap any old select / labels / options. This will set appropriate defaults for the nano-select\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 multiInput?: HTMLInputElement;\n  private multiList?: HTMLUListElement;\n  private selectWrap?: HTMLDivElement;\n  private listItems: Array<HTMLLIElement> = [];\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private popover: Popover;\n\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private currLiIndex: number = -1;\n  private inputSearchVal: string = '';\n  private watchValue: boolean = true;\n  private onInit: boolean = true;\n\n  @State() currInsertIndex: number = 0;\n  @State() availOpts = [];\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() listOpen = false;\n  @State() isLegacy: boolean = 'registerElement' in document;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() hasIconSlot: boolean = false;\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({ mutable: true, reflect: true }) invalid = false;\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    'submit';\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.\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() 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({ mutable: true }) value?: string | Array<string | null> = this.multiple\n    ? []\n    : '';\n\n  /**\n   * You can set options via js. domElement.options = ['option 1', 'option 2'] or [{label: 'option 1', value: 'opt-1'}]\n   */\n  @Prop({ mutable: true }) options: Array<\n    string | { label: string; value?: string }\n  > = [];\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  /**\n   * Whether to use native <select> elements. Setting to false will use a similar UI as multiple=\"true\"\n   */\n  @Prop() native = true;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  // @Watch('options')\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  @Watch('validateOn')\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  @Watch('value')\n  protected valueChanged() {\n    if (!this.watchValue) return;\n\n    if (this.multiple) {\n      if (typeof this.value === 'string' && !!this.value.length)\n        this.value = this.value.split(',');\n      if (\n        this.value === null ||\n        (typeof this.value === 'string' && !this.value.length)\n      )\n        this.value = [];\n\n      if (this.currInsertIndex > this.value.length - 1)\n        this.currInsertIndex = this.value.length - 1;\n    } else if (typeof this.value !== 'string' && this.value && this.value[0])\n      this.value = this.value[0];\n\n    this.setNativeValue();\n    this.setAvailOpts();\n    setTimeout((_) => this.shouldValidate(), 20);\n    this.nanoChange.emit({ value: this.value });\n\n    if (this.onInit) return;\n  }\n\n  @Watch('options')\n  protected optionsChanged() {\n    this.setAvailOpts();\n    if (this.hasFocus) this.openList();\n  }\n\n  /**\n   * Setup or rip down custom combobox when select is switched from mutliple\n   */\n  @Watch('multiple')\n  protected multiChange() {\n    this.switchValue();\n\n    if (this.multiple) this.setupMulti();\n    else if (this.popover) this.popover.destroy();\n  }\n\n  private setupMulti() {\n    setTimeout(() => {\n      this.setAvailOpts();\n      this.popover = new Popover(this.selectWrap, this.multiList, {\n        placement: 'bottom-start',\n        skidding: 0,\n        distance: 0,\n        onTransitionEnd: () => {\n          if (!this.listOpen) {\n            this.multiList.scrollTop = 0;\n          }\n        },\n      });\n    }, 20);\n  }\n\n  @Watch('listOpen')\n  listOpenChange() {\n    if (this.listOpen) this.popover.show();\n    else this.popover.hide();\n  }\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  /**\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    if (validateFirst) this.showInlineValidation();\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\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.nativeSelect && !this.multiple) this.nativeSelect.focus();\n    else if (this.multiInput) this.multiInput.focus();\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.nativeSelect.setCustomValidity(message);\n      this.nativeSelect.reportValidity();\n    }\n  }\n\n  /* Logic */\n\n  // sets the available options of a multi select.\n  // Removes ones already selected\n  // Filters one if user starts to search\n  private setAvailOpts() {\n    if (!this.multiple) return;\n\n    this.availOpts = this.options.filter((opt) => {\n      let toFind = typeof opt === 'string' ? opt : opt['value'];\n      let strFilter =\n        typeof opt === 'string' ? opt : opt['label'] || opt['value'];\n\n      if (!toFind) return false;\n      return (\n        !(this.value as Array<string>).includes(toFind) &&\n        (!this.multiInput ||\n          strFilter.toLowerCase().indexOf(this.inputSearchVal.toLowerCase()) >\n            -1)\n      );\n    });\n  }\n\n  private getNativeValue(): string | Array<string> {\n    const nsl = this.nativeSelect;\n    if (!nsl) return '';\n\n    if (!this.multiple)\n      return nsl.options[nsl.selectedIndex] &&\n        nsl.options[nsl.selectedIndex].hasAttribute('value')\n        ? nsl.options[nsl.selectedIndex].value\n        : '';\n    else {\n      return Array.from(nsl.options).map((opt) => {\n        if (opt.selected && opt.hasAttribute('value')) return opt.value;\n      });\n    }\n  }\n\n  private setNativeValue() {\n    const nsl = this.nativeSelect;\n    if (!nsl) return null;\n    if (!this.multiple) nsl.value = this.value as string;\n    else {\n      Array.from(this.nativeSelect.options)\n        .filter((opt) => {\n          if (typeof this.value === 'string') return opt.value === this.value;\n          else\n            return this.value.find((val) => {\n              if (typeof val === 'string') return val === this.value;\n              else if (val['value']) return val === val['value'];\n            });\n        })\n        .map((opt) => {\n          opt.selected = true;\n        });\n    }\n  }\n\n  private isValidValues() {\n    const nsl = this.nativeSelect;\n    if (!nsl) return null;\n\n    const selected = this.nativeSelect.querySelectorAll('option:checked');\n    const values = Array.from(selected).map(\n      (el: HTMLOptionElement) => el.value || null\n    );\n\n    if (this.multiple) {\n      return values.reduce((accumulator, currentValue) => {\n        if (!accumulator) return false;\n        return !!this.options.find((opt) =>\n          opt['value'] ? opt['value'] === currentValue : opt === currentValue\n        );\n      }, true);\n    } else {\n      return this.options.find((opt) =>\n        opt['value'] ? opt['value'] === values[0] : opt === values[0]\n      );\n    }\n  }\n\n  private customValidate = () => {\n    this.nativeSelect.setCustomValidity('');\n\n    // add custom validations 'cos html5 validations are a bit rubbish on selects\n    if (this.required && !this.getNativeValue().length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (\n      this.getNativeValue().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.getNativeValue().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.getNativeValue().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    if (this.showInlineError) ev.preventDefault();\n\n    setTimeout((_) => this.showInlineValidation(ev), 20);\n  };\n\n  private openList() {\n    if (!this.multiple) return;\n    if (\n      (this.availOpts.length ||\n        (!!this.inputSearchVal.length && this.allowCustomValues)) &&\n      (!this.max || (this.max && this.value.length < this.max))\n    )\n      this.listOpen = true;\n    else this.listOpen = false;\n  }\n\n  private addValue(value) {\n    if (!this.multiple) return;\n    if (this.value && this.value.length && this.value.includes(value)) 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      value,\n      ...this.value.slice(this.currInsertIndex),\n    ];\n\n    this.inputSearchVal = '';\n\n    this.setAvailOpts();\n\n    this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n    this.openList();\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    if (this.currInsertIndex > this.value.length - 1)\n      this.currInsertIndex = this.value.length - 1;\n\n    this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n    this.openList();\n  }\n\n  private switchValue() {\n    this.watchValue = false;\n    if (this.multiple) {\n      if (typeof this.value === 'string' && !!this.value.length)\n        this.value = this.value.split(',');\n      else this.value = [];\n\n      this.currInsertIndex = Math.max(this.value.length - 1, 0);\n    } else if (typeof this.value !== 'string' && this.value && this.value[0])\n      this.value = this.value[0];\n    this.watchValue = true;\n  }\n\n  private isSelected(value: string) {\n    if (this.multiple)\n      return (this.value as Array<string>).find((val) => val === value);\n    else value === this.value;\n  }\n\n  private getLabel(val: string) {\n    let foundVal = this.options.find((opt) => {\n      return opt['value'] ? opt['value'] === val : opt === val;\n    });\n    if (!foundVal) return null;\n    return foundVal['label'] ? foundVal['label'] : foundVal;\n  }\n\n  private slotChangeObserver() {\n    const mo = (this.mo = new MutationObserver((mrs: MutationRecord[]) =>\n      this.processSlottedContent(mrs)\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent(mutations?: MutationRecord[]) {\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.hasIconSlot = !!this.el.querySelector('[slot=\"icon\"]');\n\n    if (!mutations) {\n      // find legacy select. Take attrs and apply to our element\n      let existingselect = this.el.querySelector(\n        'select:not([class*=\"sc-nano-select\"])'\n      );\n      if (existingselect) {\n        Array.from(existingselect.attributes)\n          .filter((attr) => attr.specified && attr.nodeName in this)\n          .map((attr) => (this[attr.nodeName] = attr.nodeValue));\n      }\n\n      // find legacy label. Apply to our element\n      let existingLabel = this.el.querySelector(\n        'label:not([class*=\"sc-nano-select\"])'\n      );\n      if (existingLabel) this.label = this.label || existingLabel.innerHTML;\n\n      // find legacy slotted options. Apply them and add any relevant values\n      let legacyOpts = this.el.querySelectorAll(\n        'option:not([class*=\"sc-nano-select\"])'\n      );\n\n      this.watchValue = false;\n      if (legacyOpts && legacyOpts.length) {\n        let options = [];\n        legacyOpts.forEach((option: HTMLOptionElement) => {\n          options.push({\n            label: option.label || option.innerText,\n            value: option.value,\n          });\n          if (!option.selected || !option.value) return;\n\n          if (this.multiple) (this.value as Array<string>).push(option.value);\n          else this.value = option.value;\n        });\n        this.options = options;\n      }\n\n      if (legacyOpts.length || existingLabel || existingselect) {\n        // empty all legacy slotted stuff\n        let children = this.el.querySelectorAll('[slot=\"legacy\"]');\n        if (children) children.forEach((n) => n.parentNode.removeChild(n));\n      }\n\n      this.watchValue = true;\n    }\n\n    if (\n      mutations &&\n      !Array.from(mutations[0].addedNodes).find(\n        (node) => node.nodeName.toLowerCase() === 'nano-select-option'\n      )\n    )\n      return;\n\n    // find nano-select-options\n    let nanoOpts = this.el.querySelectorAll('nano-select-option');\n\n    if (nanoOpts && nanoOpts.length) {\n      let options = [];\n      nanoOpts.forEach((option: HTMLNanoSelectOptionElement) => {\n        options.push({\n          label: option.label || option.innerText,\n          value: option.value,\n        });\n        if (!option.selected || !option.value) return;\n\n        if (this.multiple) (this.value as Array<string>).push(option.value);\n        else this.value = option.value;\n      });\n      this.options = options;\n    }\n\n    this.setAvailOpts();\n  }\n\n  /* Event handling */\n\n  private onChange = (ev?: Event) => {\n    if (!this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n    this.value = this.getNativeValue();\n  };\n\n  private onBlur = () => {\n    if (this.multiple) {\n      this.currLiIndex = -1;\n      document.removeEventListener('keydown', this.handleDocumentKeyDown);\n      document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    }\n    this.hasFocus = false;\n\n    setTimeout(() => {\n      if (this.validateOn === 'dirty' && !this.listOpen && !this.hasFocus)\n        this.showInlineValidation();\n    }, 20);\n    this.nanoBlur.emit();\n  };\n\n  private onFocus = () => {\n    if (this.multiple) {\n      this.currLiIndex = -1;\n      document.addEventListener('keydown', this.handleDocumentKeyDown);\n      document.addEventListener('mousedown', this.handleDocumentMouseDown);\n      this.openList();\n    }\n\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      let options = this.nativeSelect.querySelectorAll('option');\n      if (options.length) options.forEach((n) => n.remove());\n      this.currInsertIndex = -1;\n      this.setAvailOpts();\n    } else this.value = '';\n\n    this.onChange();\n  };\n\n  private onClick = () => {\n    this.setFocus();\n    this.openList();\n  };\n\n  /* Multi event handlers */\n\n  private onMultiInputBlur = () => {\n    if (this.allowCustomValues) return;\n    this.inputSearchVal = '';\n    this.setAvailOpts();\n  };\n\n  private onDragStart = (ev: MouseEvent) => {\n    let 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    let ele = ev.target as HTMLSpanElement;\n    let 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    let to = this.value.indexOf(spanVal);\n    let from = this.value.indexOf(this.dragVal);\n    let tmpArr = this.value as Array<string>;\n    let 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;\n    this.setAvailOpts();\n    this.openList();\n    this.nanoSearchChange.emit({ value: ev.target.value });\n  };\n\n  private getActiveOpt() {\n    return this.multiList.querySelector('.has-focus') as HTMLLIElement;\n  }\n\n  private onOptFocus = (ev: FocusEvent) => {\n    let activeEle = this.getActiveOpt();\n    if (activeEle) activeEle.classList.remove('has-focus');\n    (ev.target as HTMLElement).classList.add('has-focus');\n  };\n\n  private onHostClick = () => {\n    setTimeout((_) => {\n      if (!this.multiple || this.hasFocus) return;\n      this.setFocus();\n    }, 20);\n  };\n\n  private handleDocumentMouseDown = (ev: MouseEvent) => {\n    const target = ev.target as HTMLElement;\n    if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n      this.listOpen = false;\n      this.onBlur();\n    }\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.multiInput.previousElementSibling)\n            rm = this.multiInput.previousElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.multiInput.nextElementSibling)\n            rm = this.multiInput.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.multiInput.previousSibling)\n            this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.multiInput.nextSibling)\n            this.currInsertIndex++;\n\n          setTimeout(() => {\n            this.multiInput.focus();\n          }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n\n    // navigated to component via keyboard. Open with down.\n    if (this.hasFocus && !this.listOpen && ev.key === 'ArrowDown') {\n      this.openList();\n      this.currLiIndex = -1;\n    }\n\n    // Close when tabbing outside of element\n    if (this.hasFocus && ev.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          closestElement(\n            this.el.tagName.toLowerCase(),\n            document.activeElement\n          ) !== this.el\n        ) {\n          this.listOpen = false;\n          this.onBlur();\n          return;\n        }\n      });\n    }\n\n    // list open, navigate items with arrows\n    if (this.listOpen) {\n      const selectedItem = this.getActiveOpt();\n      let testIndex = this.listItems.indexOf(selectedItem) || this.currLiIndex;\n\n      switch (ev.key) {\n        case 'ArrowDown':\n        case 'ArrowUp':\n          ev.preventDefault();\n\n          if (ev.key === 'ArrowDown') testIndex++;\n          else if (ev.key === 'ArrowUp') testIndex--;\n\n          if (testIndex < 0) {\n            this.currLiIndex = 0;\n            this.multiInput.focus();\n            return;\n          }\n\n          let foundIndex = this.listItems[testIndex]\n            ? testIndex\n            : this.currLiIndex;\n          setTimeout(() => {\n            this.listItems[foundIndex].focus();\n            this.currLiIndex = foundIndex;\n          }, 20);\n          return;\n        case 'Enter':\n        case ' ':\n          if (this.listItems[this.currLiIndex]) {\n            this.addValue(this.listItems[this.currLiIndex].dataset.value);\n            ev.preventDefault();\n          }\n          return;\n        case 'Escape':\n          this.listOpen = false;\n          return;\n      }\n    }\n\n    if (this.currLiIndex > -1) ev.preventDefault();\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    testLegacyStyle(this.el);\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    if (this.popover) this.popover.destroy();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    if (this.multiple) this.setupMulti();\n    this.customValidate();\n  }\n\n  componentWillLoad() {\n    this.switchValue();\n    this.processSlottedContent();\n    this.onInit = false;\n  }\n\n  private renderLabel(labelId: string, position?: 'float') {\n    let classes: CssClassMap = {};\n    if (position === 'float') {\n      classes = { 'placeholder-as-label': true };\n    } else {\n      classes = { label: true, 'visually-hide': this.hideLabel };\n    }\n    if (!this.label && !this.hasLabelSlot) return;\n\n    return (\n      <label class={classes} htmlFor={this.selectId} id={labelId}>\n        {this.label && this.label}\n        {!this.label && !!this.hasLabelSlot && <slot name=\"label\" />}\n      </label>\n    );\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 listId = this.selectId + '-list';\n\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n    this.listItems = [];\n    this.valueItems = [];\n\n    if (\n      this.placeholder &&\n      (!this.options[0] || this.options[0]['label'] !== this.placeholder)\n    ) {\n      this.options.unshift({ label: this.placeholder, value: '' });\n    }\n\n    let optionMenu = this.listOpen;\n\n    let valueMarkup;\n    if (this.multiple) {\n      let input = (\n        <input\n          class=\"multi-input\"\n          id={this.selectId}\n          ref={(input) => (this.multiInput = input)}\n          disabled={this.disabled}\n          autoFocus={this.autofocus}\n          autocomplete=\"off\"\n          onInput={this.onMultiInput}\n          value={this.inputSearchVal}\n          onTouchStart={this.onClick}\n          onMouseDown={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onMultiInputBlur}\n          placeholder={\n            this.placeholder && !this.floatLabel && !this.value.length\n              ? this.placeholder\n              : ''\n          }\n          role={this.multiple ? 'combobox' : ''}\n          aria-labelledby={labelId + ' ' + moreId}\n          aria-controls={listId}\n          aria-expanded={optionMenu ? 'true' : 'false'}\n          aria-required={this.required ? 'true' : 'false'}\n          aria-autocomplete=\"list\"\n        />\n      );\n\n      if (!!this.value.length) {\n        valueMarkup = (this.value as Array<string>).map((val, i) => {\n          let label = this.options.find((opt) => {\n            return opt['value'] ? opt['value'] === val : opt === val;\n          });\n          label = label && label['label'] ? label['label'] : val;\n\n          let toReturn = (\n            <span\n              onDragStart={this.onDragStart}\n              onDragLeave={this.onDragLeave}\n              onDragEnd={this.onDragEnd}\n              draggable\n              data-value={val}\n              ref={(span) => this.valueItems.push(span)}\n              class=\"multi-value\"\n            >\n              <span>{label}</span>\n              <button\n                class=\"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\n          if (i === 0 && this.currInsertIndex < 0) toReturn = [input, toReturn];\n          else if (i === this.currInsertIndex) toReturn = [toReturn, input];\n          return toReturn;\n        });\n      } else valueMarkup = input;\n    }\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          'multi-list-open': this.listOpen,\n          'has-clr-btn': this.clearSelect,\n          masked: this.mask,\n          legacy: this.isLegacy,\n        }}\n        onClick={this.onHostClick}\n      >\n        {!this.floatLabel && this.renderLabel(labelId)}\n        <div class=\"select\" ref={(div) => (this.selectWrap = div)}>\n          {this.floatLabel && this.renderLabel(labelId, 'float')}\n          <div\n            class={{\n              'native-select-wrap': true,\n              'native-select-wrap--multiple': this.multiple,\n            }}\n          >\n            {!this.multiple && this.mask && (\n              <div class=\"select-mask\">\n                {this.getLabel(this.value as string)}\n              </div>\n            )}\n            {this.multiple && [\n              <div class=\"multi-wrap\">{valueMarkup}</div>,\n              <ul\n                role=\"listbox\"\n                ref={(ul) => (this.multiList = ul)}\n                aria-multiselectable=\"true\"\n                aria-required={this.required}\n                aria-expanded={optionMenu ? 'true' : 'false'}\n                aria-hidden={!optionMenu}\n                hidden={!optionMenu}\n                id={listId}\n                class={{\n                  'multi-select-box': true,\n                  'multi-select-box--open': optionMenu,\n                }}\n              >\n                {this.allowCustomValues && this.inputSearchVal.length > 0 && (\n                  <li\n                    data-value={this.inputSearchVal}\n                    role=\"option\"\n                    tabindex=\"-1\"\n                    ref={(li) => this.listItems.push(li)}\n                    onMouseDown={() => {\n                      this.addValue(this.inputSearchVal);\n                    }}\n                    onFocus={this.onOptFocus}\n                  >\n                    Add {this.inputSearchVal}\n                  </li>\n                )}\n                {this.availOpts.map((option) => {\n                  let optval, label;\n                  if (option['value']) {\n                    optval = option['value'];\n                    label = option['label'] || option['value'];\n                  } else if (typeof option === 'string') {\n                    optval = option;\n                    label = optval;\n                  }\n                  if (!optval) return;\n                  return (\n                    <li\n                      role=\"option\"\n                      key={optval}\n                      data-value={optval}\n                      ref={(li) => this.listItems.push(li)}\n                      tabindex=\"-1\"\n                      aria-selected={this.isSelected(optval) ? 'true' : 'false'}\n                      onMouseDown={() => {\n                        this.addValue(optval);\n                      }}\n                      onFocus={this.onOptFocus}\n                    >\n                      {label}\n                    </li>\n                  );\n                })}\n              </ul>,\n              <select\n                id={this.selectId + '-hidden'}\n                class=\"native-select\"\n                ref={(select) => (this.nativeSelect = select)}\n                aria-labelledby={labelId + ' ' + moreId}\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.value as Array<string>).map((val) => {\n                  return (\n                    <option value={val} selected>\n                      {val}\n                    </option>\n                  );\n                })}\n              </select>,\n            ]}\n            {!this.multiple && (\n              <select\n                id={this.selectId}\n                class=\"native-select\"\n                ref={(select) => (this.nativeSelect = select)}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                form={this.form}\n                autoFocus={this.autofocus}\n                multiple={this.multiple}\n                name={this.name}\n                required={this.required}\n                size={this.size}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                onInvalid={this.handleInvalid}\n                onChange={this.onChange}\n              >\n                {this.options.map((option, i) => {\n                  if (option['value'] || option['label'])\n                    return (\n                      <option\n                        key={option['label'] + i}\n                        label={option['label']}\n                        value={option['value']}\n                        selected={\n                          option['value'] === this.value ||\n                          (!this.value && !option['value'])\n                        }\n                        disabled={!option['value'] && this.required}\n                      >\n                        {option['label'] ? option['label'] : option['value']}\n                      </option>\n                    );\n                  else\n                    return (\n                      <option\n                        key={(option as string) + i}\n                        value={option as string}\n                        selected={option === this.value}\n                      >\n                        {option}\n                      </option>\n                    );\n                })}\n                <slot name=\"legacy\" />\n              </select>\n            )}\n            {this.clearSelect && !this.readonly && !this.disabled && (\n              <button\n                type=\"button\"\n                class=\"select-clear-icon\"\n                tabindex=\"-1\"\n                onTouchEnd={this.clearSelectValue}\n                onMouseUp={this.clearSelectValue}\n              >\n                <nano-icon name=\"light/times\"></nano-icon>\n              </button>\n            )}\n            <div\n              onTouchEnd={this.onClick}\n              onMouseUp={this.onClick}\n              class=\"select-down-icon\"\n            >\n              {this.hasIconSlot ? (\n                <slot name=\"icon\" />\n              ) : (\n                <nano-icon name=\"regular/chevron-down\"></nano-icon>\n              )}\n            </div>\n          </div>\n        </div>\n        {(this.showInlineError || this.hasHelperSlot) && (\n          <div class=\"more\" id={moreId}>\n            {!!this.showInlineError ? (\n              <div class=\"error\">{this.errorMessage}</div>\n            ) : (\n              ''\n            )}\n            <div class=\"helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n\nlet selectIds = 0;\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../input/input.vars';\n\n:host {\n  @include inputVars;\n\n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  font-family: $font-family-base;\n  display: inline-block;\n}\n\n:host(.nano-color) {\n  --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\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  opacity: 0.7;\n\n  * {\n    pointer-events: none !important;\n  }\n}\n\nlabel,\n.more,\n.error,\n.helper {\n  display: block;\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  &.visually-hide {\n    @include visually-hide;\n  }\n}\n\n.placeholder-as-label {\n  @include padding(0, 0, 0, var(--padding-start));\n\n  color: var(--input-text-color);\n  position: absolute;\n  font-size: 1.4em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  top: 50%;\n  transition: 0.125s ease-in;\n  opacity: 0.7;\n  pointer-events: none;\n\n  :host(.is-invalid) & {\n    color: var(--invalid-msg-color);\n  }\n\n  :host(.has-value) & {\n    transform: translateY(-110%);\n    font-size: 0.9em;\n  }\n\n  :host(.has-focus.has-multiple) &,\n  :host(.has-value.has-multiple) & {\n    transform: translateY(-75%);\n    font-size: 0.9em;\n  }\n\n  :host(.has-multiple) & {\n    top: 1.5em;\n  }\n\n  & ~ .native-select-wrap {\n    font-size: 1.1em;\n  }\n}\n\n.label {\n  @include padding(0, 0, var(--padding-bottom));\n\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  line-height: 1;\n\n  .placeholder {\n    opacity: 0;\n    appearance: none;\n    transition: 0.3s ease opacity;\n    font-size: 0.9em;\n  }\n\n  :host(.has-value) & {\n    .placeholder {\n      opacity: 0.5;\n    }\n  }\n\n  :host(.has-focus) & {\n    color: var(--label-color--focus);\n  }\n\n  :host(.is-invalid) & {\n    color: var(--label-color--invalid);\n  }\n}\n\n.more {\n  @include margin(4px, 0, var(--padding-bottom), 3px);\n\n  height: 1em;\n  position: relative;\n}\n\n.helper,\n.error {\n  top: 0;\n  left: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.helper {\n  color: var(--help-msg-color);\n  font-style: italic;\n\n  :host([show-inline-error]:not([show-inline-error='false']).is-invalid) & {\n    opacity: 0;\n  }\n}\n\n.error {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-stretch: condensed;\n\n  :host(.is-invalid) & {\n    opacity: 1;\n  }\n}\n\n.select {\n  @include text-inherit();\n  @include border-radius(var(--input-border-radius));\n\n  width: 100%;\n  padding: 0 !important;\n  position: relative;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n\n  :host(.has-focus) & {\n    z-index: 10;\n    background: var(--input-bg-color--focus);\n    border: var(--input-border-style--focus);\n    border-width: var(--input-border-width);\n  }\n\n  :host(.is-invalid) & {\n    background: var(--input-bg-color--invalid);\n    border: var(--input-border-style--invalid);\n    border-width: var(--input-border-width);\n  }\n\n  :host(.is-invalid.has-focus) & {\n    background: var(--input-bg-color--invalid);\n    border: var(--input-border-style--invalid-focus);\n    border-width: var(--input-border-width);\n  }\n}\n\n// Native Select\n// --------------------------------------------------\n\n.native-select-wrap {\n  display: flex;\n  align-items: center;\n}\n\n.select-mask {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n.native-select {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\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  box-sizing: border-box;\n  transition: 0.3s ease opacity;\n  appearance: none;\n  // line-height: 1.3;\n  margin: 0;\n  line-height: 2.5em;\n  min-height: 2.5em;\n\n  :host(.legacy) & {\n    box-sizing: content-box;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n\n  :host(.has-float-label) & {\n    opacity: 0;\n    padding-top: 1.8em;\n  }\n\n  :host(.has-value.has-float-label) & {\n    opacity: 1;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear {\n    display: none;\n  }\n\n  &::-ms-expand {\n    display: none;\n  }\n\n  &[disabled] {\n    opacity: 0.4;\n  }\n\n  :host(.has-multiple) & {\n    display: none;\n  }\n\n  option {\n    color: black;\n  }\n}\n\n// multi stuff\n\n.multi {\n  &-wrap {\n    @include padding(\n      0,\n      calc(1.9em + var(--padding-end)),\n      calc(var(--padding-bottom) / 2),\n      0\n    );\n\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    max-width: 100%;\n\n    :host(.has-clr-btn) & {\n      @include padding(\n        0,\n        calc(2.6em + (var(--padding-end) * 2) + (var(--padding-end) * 2)),\n        calc(var(--padding-bottom) / 2),\n        0\n      );\n    }\n\n    :host(.has-float-label) & {\n      padding-top: 1.3em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n    @include padding(\n      calc(var(--padding-top) / 2),\n      var(--padding-end),\n      0,\n      var(--padding-start)\n    );\n\n    min-width: 50px;\n    max-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    // line-height: calc(2.8em - var(--padding-top));\n    min-height: calc(2.8em - var(--padding-top));\n    box-sizing: border-box;\n\n    :host(.legacy) & {\n      box-sizing: content-box;\n    }\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-select-box {\n    position: absolute;\n    background: #{$layer-bg-color};\n    min-width: calc(100% + (var(--input-border-width) * 2));\n    z-index: #{$layer-index-dropdown};\n    margin: 0;\n    font-size: 1.15em;\n    line-height: 1.4;\n    max-height: 50vh;\n    overflow-y: auto;\n    overscroll-behavior: none;\n    transition: opacity 0.2s ease;\n    opacity: 0;\n    box-sizing: border-box;\n    border-radius: #{$layer-border-radius};\n    box-shadow: #{$layer-shadow-large};\n    padding: var(--padding-top) 0 var(--padding-bottom);\n    border: #{$layer-border-style};\n\n    &--open {\n      opacity: 1;\n    }\n\n    li {\n      @include padding(\n        var(--padding-top),\n        var(--padding-end),\n        var(--padding-bottom),\n        var(--padding-start)\n      );\n\n      font-size: var(--input-font-size);\n      cursor: pointer;\n      list-style: none;\n      color: var(--input-text-color);\n\n      :host(.nano-color) & {\n        color: black;\n      }\n\n      &:hover,\n      &:focus {\n        color: var(--color--focus-contrast);\n        outline: none;\n        background: rgba(var(--multi-input-value-bg), 0.2);\n\n        :host(.nano-color) & {\n          background: current-color(base, 0.2);\n        }\n      }\n    }\n  }\n\n  &-value {\n    @include margin(4px, 0, 0, 4px);\n\n    background: rgba(var(--multi-input-value-bg), 0.8);\n    color: var(--multi-input-value-text-color);\n    border: 2px solid;\n    border-color: var(--multi-input-value-border);\n    padding: 0.3em 0.5em;\n    border-radius: 3px;\n    line-height: 1;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    font-weight: 600;\n    letter-spacing: 1px;\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      overflow: hidden;\n      line-height: 1.4;\n    }\n  }\n\n  &-value-remove {\n    @include margin(0);\n    @include background-position(center);\n    @include padding(0, 0, 0, 0.5em);\n\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    top: 0;\n    font-size: 1em;\n\n    nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n// Clear Input Icon\n// --------------------------------------------------\n\n.select-down-icon {\n  @include margin(0);\n  @include background-position(center);\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  color: var(--input-text-color);\n  font-size: 1.4em;\n  right: 0;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n\n  :host(.is-invalid) & {\n    color: var(--clear-btn-color--invalid);\n  }\n\n  :host(.rtl) & {\n    right: unset;\n    left: 0;\n  }\n\n  :host(.has-multiple) & {\n    pointer-events: all;\n  }\n\n  :host(.masked) & {\n    position: relative;\n  }\n}\n\n.select-clear-icon {\n  @include margin(0);\n  @include background-position(center);\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  font-size: 1.4em;\n  color: var(--clear-btn-color);\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  visibility: hidden;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  right: calc(1.4em + var(--padding-end));\n\n  &:hover {\n    color: var(--clear-btn-color--hover);\n  }\n\n  :host(.rtl) & {\n    right: unset;\n    left: calc(1.4em + var(--padding-end));\n  }\n\n  :host(.is-invalid) & {\n    color: var(--clear-btn-color--invalid);\n  }\n\n  :host(.has-value) & {\n    visibility: visible;\n  }\n\n  nano-icon {\n    --color: inherit;\n  }\n}\n\n// Input Has focus\n// --------------------------------------------------\n// When the select has focus, then the select cover should be hidden\n\n// :host(.has-focus) {\n//   pointer-events: none;\n// }\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n  pointer-events: auto;\n}\n"]}