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

package/dist/nano-components/nano-global-nav-user-profile_3.entry.js

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

package/dist/nano-components/nano-global-nav-user-profile_3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["GlobalNavUserProfile","myAccountUser","userProfileUrl","render","this","h","key","href","class","src","small_avatar_url","alt","height","width","is_nanopore_user","getAssetPath","name","job_title","company","slot","navItemCss","NanoNavItemStyle0","NavItem","hasSecondarySlot","btn","fromHover","animating","waitHide","waitShow","globalNavEle","secondaryDiv","hasAnchorEle","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","hasFocus","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","notification","nanoClose","nanoOpen","nanoOpening","nanoClosing","nanoBlur","nanoFocus","setFocus","focus","openChange","openSecondary","closeSecondary","didOpenChange","setTimeout","document","activeElement","body","preventScroll","el","tabIndex","emit","secondaryMenu","panelIO","window","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","focusableChild","getTabbableElements","handleClose","e","composedPath","some","toggleSecondary","async","displayTransition","className","show","innerWidth","call","handleFocus","handleHostBlur","removeAttribute","handleHostClick","ev","foundlink","closest","click","handleMouseEnter","classList","contains","timeToWait","getSiblings","length","clearTimeout","handleMouseLeave","handleClick","connectedCallback","secondaryEle","querySelector","link","getDirectChildren","addEventListener","transformTag","parentElement","componentDidLoad","disconnectedCallback","removeEventListener","Host","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","undefined","part","ref","a","onFocus","div","selectCss","NanoSelectStyle0","selectIds","Select","nativeSelect","valueItems","dragVal","mo","selectId","rtl","onInit","customError","inputCtrl","_inputCtrl","input","setDataListOpts","_selectWrap","selectWrap","ele","_datalist","datalist","constructor","hostRef","showInlineValidation","debounce","currInsertIndex","showErrorMsg","errorMessage","hasLabelSlot","hasHelperSlot","hasHelperEndSlot","inputSearchVal","invalid","_invalid","validityMessage","validationMessage","color","autofocus","validateOn","showInlineError","label","hideLabel","floatLabel","multiple","maxValuesVisible","_maxValuesVisible","watchMaxValuesVisible","NaN","Number","isNaN","value","placeholder","readonly","required","size","max","min","form","allowCustomValues","_value","val","JSON","stringify","split","Array","isArray","options","_options","activeOptions","_elementOptions","map","ao","filterMeta","opts","opt","clearSelect","mask","debounceChanged","nanoSearchChange","debounceEvent","shouldValidate","customValidate","valueChanged","requestAnimationFrame","nanoChange","dropDownConfig","currDWConfig","tetherTo","valueTagTemplate","nanoDidLoad","nanoDidUnload","nanoValidate","reportValidity","validateFirst","Promise","resolve","isValid","getSelectElement","showError","message","setCustomValidity","valArray","isValidValues","find","validity","valid","originalEvent","handleInvalid","preventDefault","setValue","detail","includes","slice","removeValue","toFind","filter","slotChangeObserver","MutationObserver","processSlottedContent","childList","subtree","querySelectorAll","getOptionWithValue","index","option","i","getLabel","onReset","clearSelectValue","handleBlur","kev","getActiveElement","closestElement","tagName","toLowerCase","setOptions","handleDocumentKeyDown","rm","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","stopPropagation","onDragStart","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","CustomEvent","componentWillLoad","labelId","moreId","helperEndId","compWrapOptions","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","createColorClasses","masked","FormControlWrap","FormControl","onClearText","control","endValueSlot","multipleValues","id","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","select","onInvalid","autoFocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","toReturn","forEach","valueTag","onDragOver","draggable","span","push","innerHTML","tabindex","onTouchEnd","onMouseUp"],"sources":["src/components/global-nav/global-nav-user-profile.tsx","src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/nav-item/nav-item.tsx","src/components/select/select.scss?tag=nano-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["import {\n  Component,\n  Prop,\n  getAssetPath,\n  ComponentInterface,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { MyAccountUser } from './global-nav-interface';\n\n/**\n * Nanopore digital global navigation user profile.\n */\n@Component({\n  tag: 'nano-global-nav-user-profile',\n})\nexport class GlobalNavUserProfile implements ComponentInterface {\n  /**\n   * Logged in user details automatically populated from MyAccount\n   */\n  @Prop() myAccountUser: MyAccountUser;\n\n  /**\n   * Link to the user profile\n   */\n  @Prop() userProfileUrl: string;\n\n  // Render output\n\n  render() {\n    return (\n      !!this.myAccountUser && (\n        <a href={this.userProfileUrl} class=\"user-profile\">\n          <div class=\"left\">\n            <div class=\"avatar-container\">\n              <img\n                class=\"avatar\"\n                src={this.myAccountUser?.small_avatar_url}\n                alt=\"User Avatar\"\n                height={75}\n                width={75}\n              />\n              {this.myAccountUser.is_nanopore_user && (\n                <img\n                  class=\"logo-small\"\n                  src={getAssetPath(`../nano-assets/ont-wheel-light.svg`)}\n                  alt=\"Nanopore Logo\"\n                />\n              )}\n            </div>\n\n            <div class=\"user-details\">\n              <span class=\"name\">{this.myAccountUser.name}</span>\n\n              <span class=\"bio\">\n                {this.myAccountUser.job_title} at {this.myAccountUser.company}\n              </span>\n            </div>\n          </div>\n\n          <div class=\"right\">\n            <div class=\"chevron-right\">\n              <nano-icon slot=\"icon-end\" name=\"light/chevron-right\"></nano-icon>\n            </div>\n          </div>\n        </a>\n      )\n    );\n  }\n}\n","@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens/form';\n\n:host {\n  // These can be overwritten, but are automatically set from context components\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n  outline: none !important;\n\n  .nav-item,\n  .link {\n    outline: none !important;\n    border-radius: inherit;\n  }\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n    margin: 0;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include mx.text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-top) var(--padding-bottom);\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n    line-height: inherit;\n    outline: none !important;\n  }\n\n  ::slotted(.nano-icon[slot='icon-start']) {\n    padding-inline-end: var(--padding-end);\n  }\n\n  ::slotted(.nano-icon[slot='icon-end']) {\n    padding-inline-start: var(--padding-start);\n  }\n\n  .link {\n    ::slotted(.nano-icon[slot='icon-start']) {\n      padding-inline: var(--padding-start) 0;\n    }\n\n    ::slotted(.nano-icon[slot='icon-end']) {\n      padding-inline: 0 var(--padding-end);\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-block-end: var(--border-bottom);\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\n  }\n\n  .secondary-menu {\n    display: none;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover),\n  .link:hover,\n  button:hover,\n  a:hover {\n    text-decoration: inherit !important;\n  }\n\n  button:focus-visible,\n  a:focus-visible {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    box-shadow: #{form.$control-focus-style};\n  }\n\n  ::slotted(a:focus-visible),\n  ::slotted(button:focus-visible) {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    box-shadow: #{form.$control-focus-style};\n  }\n}\n\n.nav-item {\n  &.selected {\n    .link,\n    button,\n    a {\n      color: var(--color-selected, var(--color-open, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-selected,\n          var(--bg-color-open, var(--bg-color))\n        );\n    }\n  }\n\n  &.secondary-open {\n    button,\n    a {\n      color: var(--color-open, var(--color-selected, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-open,\n          var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n        );\n    }\n  }\n\n  &.disabled {\n    opacity: 0.6;\n\n    button,\n    a {\n      color: var(--color-disabled, var(--color)) !important;\n    }\n  }\n\n  &:not(.nano-menu) {\n    ::slotted(a:hover),\n    ::slotted(button:hover),\n    .link:hover,\n    button:hover,\n    a:hover {\n      color: var(--color-hover, var(--color-hover, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-hover,\n          var(--bg-color-focus, var(--bg-color))\n        );\n    }\n  }\n}\n\n:host(.has-focus) {\n  .link {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n  }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n  a,\n  a:visited,\n  button,\n  .link {\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentcolor;\n    text-decoration: inherit;\n    white-space: normal;\n    cursor: pointer;\n    line-height: 1.2;\n    inline-size: 100%;\n  }\n\n  .text {\n    padding-inline: 0 var(--padding-end);\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, currentcolor);\n    min-block-size: 100%;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    inline-size: 100%;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity 0.3s ease, transform 0.3s ease;\n    background-color: var(--secondary-bg-color, white);\n    transform: translate3d(100%, 0, 0);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      opacity: 1;\n      transform: translate3d(0, 0, 0);\n      transition: opacity 0.3s ease, transform 0.3s ease;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu) {\n  ::slotted(.nano-icon[slot='icon-start']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n  }\n\n  ::slotted(.nano-icon[slot='icon-end']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n    font-size: 10px;\n    flex: 0 0 10px;\n    pointer-events: none;\n  }\n\n  button,\n  a {\n    ::slotted(.nano-icon[slot='icon-end']) {\n      padding: 0;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n  .secondary-menu {\n    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu-content {\n    padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n    padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\n  }\n}\n\n:host(.nano-global-nav-bar) {\n  .link,\n  a,\n  button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .text {\n    flex: 1 0 auto;\n  }\n\n  ::slotted(.nano-icon[slot='icon-end']) {\n    margin-inline: var(--padding-end) 0;\n    margin-block: 0;\n  }\n\n  ::slotted(.nano-icon[slot='icon-start']) {\n    margin-inline: 0 var(--padding-start);\n    margin-block: 0;\n  }\n\n  ::slotted(a),\n  button {\n    position: relative;\n\n    &::before {\n      content: '';\n      background-color: rgb(12 90 113);\n      block-size: 9px;\n      inset-inline: 0 5px;\n      inset-block-end: -22px;\n      position: absolute;\n      transform: translateZ(0) scaleX(0);\n      transform-origin: 0;\n      transition: transform 0.2s ease;\n    }\n  }\n\n  .secondary-open button::before {\n    transform: translateZ(0) scaleX(1);\n  }\n}\n\n:host(.nano-global-nav-bar.selected) {\n  ::slotted(a),\n  button {\n    &::before {\n      transform: translateZ(0) scaleX(1);\n    }\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  .secondary-open button::before {\n    opacity: 0.7;\n  }\n\n  .secondary-menu {\n    display: none;\n    transition: transform 0.3s ease;\n    transform: translateY(-100%) translateZ(0);\n    background-color: var(--secondary-bg-color, #196c82);\n    color: var(--secondary-color);\n    position: absolute;\n    box-shadow: 0 1px 25px 0 rgb(0 0 0 / 15%);\n    inset-inline: 0;\n    z-index: -2;\n    outline: none;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    padding-block: calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);\n    padding-inline: var(--padding-start) 0;\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    inline-size: 100%;\n  }\n\n  .text {\n    padding-inline: 0 var(--padding-end);\n    text-align: start;\n    flex: 0 1 auto;\n    min-inline-size: 130px;\n    inline-size: 130px;\n  }\n\n  ::slotted(.nano-icon[slot='icon-start']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n    font-size: var(--icon-size);\n    inline-size: var(--icon-size);\n    flex: 0 0 var(--icon-size);\n  }\n\n  ::slotted(.nano-icon[slot='icon-end']) {\n    padding: 0 var(--padding-end) 0 0;\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-inline-size: 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    block-size: 100vh;\n    inset-inline: auto 0;\n    inset-block: 0;\n    transform: translateX(0);\n    z-index: -1;\n    transition: transform 0.3s ease, opacity 0.2s ease;\n    overflow-y: auto;\n    inline-size: var(--secondary-width, 400px);\n    max-inline-size: 62vw;\n    opacity: 1;\n    padding-inline:\n      var(--secondary-padding-start, var(--padding-start))\n      var(--secondary-padding-end, var(--padding-end));\n    padding-block:\n      var(--secondary-padding-top, var(--padding-top))\n      var(--secondary-padding-bottom, var(--padding-bottom));\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n    }\n  }\n\n  .notification {\n    position: relative;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      inline-size: 6px;\n      block-size: 6px;\n      background-color: #ef4135;\n      inset-inline-start: 10px;\n      inset-block-start: 7px;\n      border-radius: 50%;\n\n      @media (width >= 52em) {\n        inline-size: 7px;\n        block-size: 7px;\n        inset-inline-start: 8px;\n        inset-block-start: 5px;\n      }\n    }\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .secondary-menu {\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n  Listen,\n} from '@stencil/core';\nimport { getSiblings, getDirectChildren } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport { h, transformTag } from '../../utils/renderer';\nimport { NavItemEventDetail } from './nav-item-interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n *\n * @slot icon-start - an icon at the start of the main control\n * @slot icon-end - an icon at the end of the main control\n * @slot secondary - a content panel in which you can place any html to display on control click\n * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)\n * @part ctrl - the controlling `<a>` or `<button>` element\n * @part ctrl--button - the controlling `<button>` element\n * @part ctrl--anchor - the controlling <a> element\n * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)\n * @part secondary-wrapper - the div surrounding slotted secondary content\n * @part secondary-mask - the div that is added when secondary content is shown\n */\n@Component({\n  tag: 'nano-nav-item',\n  styleUrl: 'nav-item.scss',\n  shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n  private hasSecondarySlot: boolean = false;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n  private secondaryDiv: HTMLDivElement;\n\n  @State() hasAnchorEle: boolean = false;\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Will show an indicator badge - only when placed in a nano-menu-draw\n   */\n  @Prop() notification: boolean = false;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus();\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    if (this.open) this.openSecondary();\n    else this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      setTimeout(() => {\n        if (\n          !this.fromHover &&\n          (!document.activeElement || document.activeElement === document.body)\n        )\n          this.btn.focus({ preventScroll: true });\n        this.el.tabIndex = null;\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      /* the secondary panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelIO = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth',\n              });\n            }\n            panelIO.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelIO.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        const focusableChild = getTabbableElements(this.secondaryDiv, true);\n        if (focusableChild[0]) focusableChild[0].focus();\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  @Listen('click', { target: 'body' })\n  @Listen('keyup', { target: 'body' })\n  handleClose(e: MouseEvent | KeyboardEvent) {\n    if (!this.didOpen || !this.hasSecondarySlot || !this.closeOnBlur) return;\n    if (!e.composedPath().some((el) => el === this.secondaryDiv))\n      this.toggleSecondary();\n  }\n\n  private closeSecondary = async () => {\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n    this.open = false;\n    await displayTransition(this.secondaryDiv, {\n      className: 'open',\n      show: false,\n    });\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = false;\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n\n    if (!this.hasSecondarySlot || this.didOpen) return;\n    this.open = true;\n    await displayTransition(this.secondaryDiv, {\n      className: 'open',\n      show: true,\n    });\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = true;\n  };\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot)\n      this.openSecondary();\n    this.nanoFocus.emit();\n  };\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    const foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  };\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (\n      !this.href ||\n      this.animating ||\n      !this.hasSecondarySlot ||\n      (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n    )\n      return;\n\n    // if there are sibling secondary panels currently open,\n    // we need to wait before opening otherwise we get unwanted overlapping\n    let timeToWait = 0;\n    if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n      timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(\n      async () => await this.openSecondary(),\n      timeToWait\n    );\n    this.animating = false;\n  };\n\n  // handles secondary menu hover-out behaviour.\n  private handleMouseLeave = () => {\n    if (!this.href) return;\n    clearTimeout(this.waitShow);\n    this.fromHover = true;\n    this.animating = true;\n\n    // prevent closing immediately - makes navigating to items within more forgiving\n    this.waitHide = window.setTimeout(\n      async () => await this.closeSecondary(),\n      300\n    );\n    this.animating = false;\n  };\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n  };\n\n  connectedCallback() {\n    const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    const link = getDirectChildren<HTMLAnchorElement | HTMLButtonElement>(\n      this.el,\n      'a, button'\n    )[0];\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href\n        ? (link as HTMLAnchorElement).href\n        : null;\n      this.btn = link;\n      if (this.hasSecondarySlot)\n        this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest(transformTag('nano-global-nav'));\n\n    this.isInMenuDrawer = !!this.el.closest(transformTag('nano-menu-drawer'));\n    this.isInMenu = !!this.el.closest(transformTag('nano-menu'));\n    this.isInGlobalNav =\n      this.el.parentElement === this.globalNavEle ||\n      !!this.el.closest('.global-nav');\n  }\n\n  componentDidLoad() {\n    this.openChange();\n  }\n\n  disconnectedCallback(): void {\n    this.btn.removeEventListener('click', this.toggleSecondary);\n    this.btn.removeEventListener('focus', this.handleFocus);\n    this.btn.removeEventListener('blur', this.handleHostBlur);\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          'nano-nav-item': true,\n        }}\n        onBlur={this.handleHostBlur}\n        dir={this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role={this.el.closest('[role=\"menu\"]') ? 'menuitem' : undefined}\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n          part=\"ctrl-wrapper\"\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              part=\"ctrl ctrl--anchor\"\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </a>\n          )}\n          {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n            <button\n              part=\"ctrl ctrl--button\"\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </button>\n          )}\n          {this.hasAnchorEle && !this.disabled && (\n            <div class=\"link\">\n              <slot name=\"icon-start\" />\n              <slot />\n              <slot name=\"icon-end\" />\n            </div>\n          )}\n          {this.hasSecondarySlot && !this.disabled && (\n            <div\n              class=\"secondary-menu\"\n              ref={(div) => (this.secondaryDiv = div)}\n              tabIndex={-1}\n            >\n              <div class=\"secondary-menu-content\" part=\"secondary-wrapper\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n                part=\"secondary-mask\"\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/utilities/colours' as color;\n@use '../../global/style/utilities/globals' as globals;\n@use '../../global/style/nano-theme/tokens';\n@use '../form-control/form-control-vars' as formControl;\n@use '../form-control/form-control';\n\n\n:host {\n  @include formControl.vars;\n\n  /**\n   * @prop --max-menu-height: the maximum of the dropdown menu. Defaults to 50vw.\n   */\n\n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  font-family: globals.$font-family-base;\n  display: block;\n}\n\n:host(.nano-color) {\n  --input-border-style--focus:\n    #{tokens.$input-border-style} var(\n      --nano-color-tint,\n      #{tokens.nano-color(\n        primary,\n        tint\n      )}\n    );\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n\n  color: color.current-color(base);\n}\n\n:host([disabled]:not([disabled='false'])) {\n  * {\n    pointer-events: none !important;\n  }\n}\n\nselect {\n  display: none;\n}\n\n.select__native-input {\n  @include mx.text-inherit();\n\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n\n  .has-float-label & {\n    line-height: 2.1em;\n    min-block-size: 2.1em;\n    padding-block-start: 1.4em;\n  }\n\n  &::selection {\n    background: transparent;\n  }\n\n  /* stylelint-disable-next-line selector-no-vendor-prefix */\n  &::-moz-selection {\n    background: transparent;\n  }\n\n  &::placeholder {\n    color: var(--placeholder-color);\n    font-family: inherit;\n    font-style: var(--placeholder-font-style);\n    font-weight: var(--placeholder-font-weight);\n    opacity: var(--placeholder-opacity);\n    line-height: inherit;\n    min-block-size: initial;\n  }\n\n  /* stylelint-disable-next-line selector-no-vendor-prefix */\n  &::-moz-placeholder {\n    line-height: 2.8em;\n    text-overflow: ellipsis;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &.resizable {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  .form-ctrl__textarea & {\n    line-height: 1.5em;\n    padding-block: var(--padding-top) var(--padding-bottom);\n    white-space: pre-wrap;\n\n    &::placeholder {\n      line-height: 1.5em;\n    }\n  }\n\n  .has-float-label.textarea & {\n    padding-block-start: 1.8em;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n  }\n}\n\n.select__mask {\n  @include mx.text-inherit();\n\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-block-size: 2.5em;\n}\n\n// multi stuff\n\n.select__multi {\n  &-wrap {\n    padding-block: 0 var(--padding-bottom);\n    padding-inline: 0;\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    overflow: hidden;\n    align-items: flex-start;\n\n    :host(.has-float-label) & {\n      padding-block-start: 1em;\n    }\n  }\n\n  &-input {\n    @include mx.text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-bottom) 0;\n    min-inline-size: 50px;\n    inline-size: 100%;\n    max-block-size: 100%;\n    appearance: none;\n    border: 0;\n    outline: none;\n    display: inline-block;\n    background: transparent;\n    flex: 0;\n    position: relative;\n    box-sizing: border-box;\n    line-height: calc(2.5em - var(--padding-bottom));\n    block-size: calc(2.5em - var(--padding-bottom));\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-value {\n    margin-block: var(--padding-bottom) 0;\n    margin-inline: var(--padding-start) -3px;\n    background: rgb(var(--multi-input-value-bg) / 80%);\n    color: var(--multi-input-value-text-color);\n    border: 1px solid;\n    border-color: var(--multi-input-value-border);\n    padding: 0.35em 0.5em;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    letter-spacing: 1px;\n    max-block-size: calc(2.5em - 8px);\n    max-inline-size: calc(100% - 8px);\n    border-radius: 4px;\n\n    &--closable {\n      padding-inline-end: 0;\n    }\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-inline-size: 100%;\n      overflow: hidden;\n    }\n  }\n\n  &-value-remove {\n    @include mx.background-position(center);\n\n    padding-inline-start: 0.5em;\n    margin: 0;\n    color: inherit;\n    border: 0;\n    outline: none;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    inset-block-start: 0;\n    font-size: 1em;\n\n    .nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n.form-ctrl__float-label {\n  inline-size: calc(100% - (1em + (var(--padding-start) * 2)));\n\n  :host(.has-focus.has-multiple) & {\n    transform: translateY(-110%);\n    font-size: 0.8em;\n  }\n\n  :host(.has-value.has-multiple) & {\n    transform: translateY(21%);\n    inset-block-start: 0;\n  }\n}\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n  pointer-events: auto;\n}\n","import {\n  Build,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  VNode,\n  Listen,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\nimport { getActiveElement } from '../../utils/active-element';\nimport { closestElement } from '../../utils/dom';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounce, debounceEvent } from '../../utils/throttle';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport { OptionInterface } from '../option/option-interface';\nimport { InputChangeEventDetail } from '../input/input-interface';\nimport { SelectChangeEventDetail } from './select-interface';\nimport type {\n  Color,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../types/shared';\nimport type { Dropdown as DropdownInterface } from '../dropdown/dropdown';\n\nlet selectIds = 0;\n\n/**\n * The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n *\n * @slot start - suitable for inline action buttons or icons that may add extra contextual information\n * @slot end - suitable for inline action buttons or icons that may add extra contextual information\n * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secondary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secondary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot helper-end - helper text to accompany the form field on the side.\n * @slot down-arrow - use this to replace the default down arrow\n * @slot - default slot; nest `nano-option` elements\n */\n@Component({\n  tag: 'nano-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select implements ComponentInterface {\n  private nativeSelect?: HTMLSelectElement;\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private onInit: boolean = true;\n  private customError: string = '';\n\n  private get inputCtrl() {\n    return this._inputCtrl;\n  }\n  private set inputCtrl(input) {\n    if (input === this._inputCtrl) return;\n    this._inputCtrl = input;\n    this.setDataListOpts();\n  }\n  private _inputCtrl?: HTMLInputElement;\n\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. Use get/set to set datalist options\n  private _selectWrap: HTMLElement;\n  private get selectWrap() {\n    return this._selectWrap;\n  }\n  private set selectWrap(ele: HTMLElement) {\n    if (this._selectWrap === ele) return;\n    this._selectWrap = ele;\n    this.setDataListOpts();\n  }\n\n  private _datalist: HTMLNanoDatalistElement;\n  private get datalist() {\n    return this._datalist;\n  }\n  private set datalist(ele: HTMLNanoDatalistElement) {\n    if (this._datalist === ele) return;\n    this._datalist = ele;\n    this.setDataListOpts();\n  }\n\n  constructor() {\n    this.showInlineValidation = debounce(this.showInlineValidation, 50);\n  }\n\n  @State() currInsertIndex: number = -1;\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() hasHelperEndSlot = false;\n  @State() inputSearchVal: string = '';\n\n  @Element() el!: HTMLNanoSelectElement;\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set.\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.nativeSelect) return '';\n    return this.nativeSelect.validationMessage;\n  }\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have select focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When should the field perform validation\n   * @default 'submitThenDirty'\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element. Alternatively use the 'label' slot\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean = false;\n\n  /** When `multiple=\"true\"`, control how many values to show within the control at once.\n   * After the maximum, \"+n\" will be shown to indicate the number of additional items that are selected. */\n  @Prop() maxValuesVisible?: boolean | number = 3;\n  private _maxValuesVisible: number;\n\n  @Watch('maxValuesVisible')\n  watchMaxValuesVisible() {\n    if (!this.multiple) return;\n\n    this._maxValuesVisible =\n      this.maxValuesVisible === false ? NaN : Number(this.maxValuesVisible);\n\n    // make sure maxValuesVisible is a number\n    if (!Number.isNaN(this._maxValuesVisible)) {\n      if (this.currInsertIndex > this._maxValuesVisible) {\n        // make the input position is no more than the max\n        this.currInsertIndex = this._maxValuesVisible;\n      }\n    } else {\n      // if maxValuesVisible is undefined, it will be `NaN`\n      this.currInsertIndex = this.value.length - 1;\n    }\n  }\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.\n   * If you don't want this behaviour just set the first option to have no value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop({ reflect: true }) readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * The initial size of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * Maximum number of options that can be selected when multiple is true\n   */\n  @Prop() max?: number;\n\n  /**\n   * Minimum number of options that can be selected when multiple is true\n   */\n  @Prop() min?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * in multiple mode, allow users to enter their own values\n   */\n  @Prop() allowCustomValues: boolean = false;\n\n  /**\n   * The value of the select.\n   */\n  @Prop()\n  get value() {\n    return this._value || (this.multiple ? [] : '');\n  }\n  set value(val: string | string[]) {\n    if (!!val && !!this._value) {\n      if (JSON.stringify(val) === JSON.stringify(this._value)) return;\n    }\n\n    if (typeof val === 'string') {\n      if (this.multiple) this._value = val.split(',');\n      else this._value = val;\n    } else if (Array.isArray(val)) {\n      if (this.multiple) this._value = val;\n      else this._value = val[0];\n    }\n  }\n  private _value: Array<string> | string;\n\n  /**\n   * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or\n   * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.\n   * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`\n   * Regardless - reading `options` will return the current component options - slotted or otherwise\n   */\n  @Prop()\n  get options(): Array<OptionInterface | string> {\n    if (this._options.length) return this._options;\n\n    if (!this.datalist || !this.datalist.activeOptions) return [];\n\n    return this._elementOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n  }\n  set options(opts: Array<OptionInterface | string>) {\n    this._options = opts.map((opt) => {\n      if (typeof opt === 'string') return { value: opt, label: opt };\n      else return opt;\n    });\n  }\n  private _options: OptionInterface[] = [];\n  @State() _elementOptions: OptionInterface[] = [];\n\n  /**\n   * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n   */\n  @Prop() clearSelect = false;\n\n  /**\n   * Hide the native select element and cover with a value 'mask'.\n   * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n   */\n  @Prop() mask = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  @Watch('readonly')\n  protected shouldValidate() {\n    if (this.onInit) return;\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n\n    this.customValidate();\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  /**\n   * Update the native select element when the value changes\n   */\n  @Watch('value')\n  valueChanged() {\n    this.customValidate();\n\n    if (this.onInit) {\n      if (this.multiple) this.currInsertIndex = this.value.length - 1;\n      return;\n    }\n    requestAnimationFrame(() => {\n      this.shouldValidate();\n      this.nanoChange.emit({ value: this.value });\n    });\n  }\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop() dropDownConfig?: Partial<DropdownInterface> = {};\n\n  @Watch('dropDownConfig')\n  setDataListOpts() {\n    if (!this.datalist || !this.selectWrap) return;\n\n    this.datalist.input = this.inputCtrl;\n\n    const currDWConfig = this.datalist.dropDownConfig || {};\n    this.datalist.dropDownConfig = {\n      ...currDWConfig,\n      ...this.dropDownConfig,\n      tetherTo: this.selectWrap,\n    };\n  }\n\n  /**\n   * A function that customizes the tag value to be rendered when `multiple=\"true\"`.\n   * @param option - the incoming option that was selected\n   * @param index - the incoming option index\n   * @returns Should return either a string / templateResult or a string containing trusted HTML or an HTMLElement\n   */\n  @Prop() valueTagTemplate: (option: OptionInterface, index: number) => string;\n\n  // Custom Events\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Emitted when a keyboard input occurred on a multiple=\"true\" input\n   */\n  @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Public Methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return new Promise((resolve) => {\n      if (validateFirst) {\n        this.customValidate();\n        this.showInlineValidation();\n      }\n      setTimeout(() => {\n        resolve({\n          isValid: !this._invalid,\n          errorMessage: this.nativeSelect.validationMessage,\n        });\n      }, 50);\n    });\n  }\n\n  /**\n   * Sets focus on the specified `nano-select`. Use this method instead of the global\n   * `select.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.inputCtrl) return;\n    this.inputCtrl.focus();\n    setTimeout(() => this.inputCtrl.click(), 50);\n  }\n\n  /**\n   * @returns the native `<select>` element used under the hood.\n   */\n  @Method()\n  getSelectElement(): Promise<HTMLSelectElement> {\n    return Promise.resolve(this.nativeSelect);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeSelect) {\n      this.customError = message;\n      this.nativeSelect.setCustomValidity(message);\n      this.showInlineValidation();\n    }\n  }\n\n  /* Logic */\n\n  private get valArray() {\n    return typeof this.value === 'string'\n      ? this.value.length\n        ? [this.value]\n        : []\n      : this.value;\n  }\n\n  private isValidValues() {\n    return this.valArray.find((val) =>\n      (this.options as OptionInterface[]).find((opt) => opt.value === val)\n    );\n  }\n\n  private customValidate = () => {\n    if (\n      !this.nativeSelect ||\n      !!this.customError ||\n      !this.nativeSelect['setCustomValidity']\n    )\n      return;\n\n    this.nativeSelect.setCustomValidity('');\n    // add custom validations 'cos html5 validations are a bit rubbish on selects\n    if (this.required && !this.valArray.length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (\n      this.valArray.length &&\n      !this.allowCustomValues &&\n      !this.isValidValues()\n    ) {\n      this.nativeSelect.setCustomValidity(\n        'Please choose an item from this field.'\n      );\n      return true;\n    }\n    if (this.max && this.valArray.length > this.max) {\n      this.nativeSelect.setCustomValidity(\n        `Only up to ${this.max} values are allowed.`\n      );\n      return true;\n    }\n    if (this.min && this.valArray.length < this.min) {\n      this.nativeSelect.setCustomValidity(\n        `You must select a minimum of ${this.min} values.`\n      );\n      return true;\n    }\n    return false;\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.showErrorMsg = false;\n    this.errorMessage = '';\n\n    if (!this.nativeSelect.validity.valid) {\n      this.errorMessage = this.nativeSelect.validationMessage;\n      this._invalid = true;\n      this.showErrorMsg = true;\n    }\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit') {\n      this._invalid = this.showErrorMsg = this.customValidate();\n    }\n    if (this.showInlineError) ev.preventDefault();\n\n    requestAnimationFrame(() => this.showInlineValidation(ev));\n  };\n\n  private setValue = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.preventDefault();\n\n    if (!this.multiple) {\n      this.value = e.detail.value;\n      return;\n    }\n    if (this.value && this.value.length && this.value.includes(e.detail.value))\n      return;\n    if (this.max && this.value.length === this.max) return;\n\n    if (\n      Number.isNaN(this._maxValuesVisible) ||\n      this.value.length <= this._maxValuesVisible\n    ) {\n      this.currInsertIndex++;\n    }\n\n    this.value = [\n      ...this.value.slice(0, this.currInsertIndex),\n      e.detail.value,\n      ...this.value.slice(this.currInsertIndex),\n    ];\n    this.inputSearchVal = '';\n  };\n\n  private removeValue = (toFind?: string) => {\n    if (this.readonly || this.disabled) return;\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 (\n      Number.isNaN(this._maxValuesVisible) ||\n      this.value.length <= this._maxValuesVisible\n    ) {\n      this.currInsertIndex--;\n    }\n    this.setFocus();\n  };\n\n  private slotChangeObserver() {\n    if (!window['MutationObserver']) return;\n\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have label / helper content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n    this.hasHelperEndSlot = !!this.el.querySelector('[slot=\"helper-end\"]');\n  }\n\n  private getOptionWithValue(value: string) {\n    let index: number;\n    const options = this.datalist?.activeOptions?.length\n      ? this.datalist.activeOptions\n      : (this.options as OptionInterface[]);\n    const option = options.find((opt, i) => {\n      index = i;\n      return !opt.disabled && opt.value?.length && opt.value === value;\n    });\n    return [option, index] as const;\n  }\n\n  private getLabel(toFind: string) {\n    const option = this.getOptionWithValue(toFind)[0];\n    return option && option.label ? option.label : toFind;\n  }\n\n  /* Event handling */\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.el.closest('form');\n    if (!form || e.target !== this.el.closest('form')) return;\n\n    this.clearSelectValue();\n  }\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let target: Element;\n\n    requestAnimationFrame(() => {\n      if (kev.key) {\n        if (kev.key !== 'Tab') return;\n        target = getActiveElement();\n      } else target = e.target as Element;\n\n      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n        this.onBlur();\n      }\n    });\n  }\n\n  private setOptions = () => {\n    if (\n      !this.datalist ||\n      !this.datalist.activeOptions ||\n      !this.datalist.activeOptions.length\n    )\n      return;\n\n    this._elementOptions = this.datalist.activeOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n    this.customValidate();\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple || !this.hasFocus) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.inputCtrl.previousElementSibling)\n            rm = this.inputCtrl.previousElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.inputCtrl.nextElementSibling)\n            rm = this.inputCtrl.nextElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          if (!this.value.length) break;\n\n          if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)\n            this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)\n            this.currInsertIndex++;\n\n          setTimeout(() => {\n            this.inputCtrl.focus();\n          }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n\n    requestAnimationFrame(() => {\n      if (this.validateOn === 'dirty' && !this.hasFocus)\n        this.showInlineValidation();\n    });\n    this.nanoBlur.emit();\n\n    if (!this.allowCustomValues && this.multiple) {\n      this.inputSearchVal = '';\n      const event = new window.Event('change');\n      this.inputCtrl.dispatchEvent(event);\n    }\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private clearSelectValue = (ev?: Event) => {\n    if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    if (this.multiple) {\n      this.value = [];\n      this.currInsertIndex = -1;\n    } else this.value = '';\n\n    this.inputCtrl.value = '';\n    const event = new window.Event('change');\n    this.inputCtrl.dispatchEvent(event);\n  };\n\n  private onClick = () => {\n    this.setFocus();\n  };\n\n  /* Multi event handlers */\n\n  private onDragStart = (ev: MouseEvent) => {\n    const ele = ev.target as HTMLSpanElement;\n    this.dragVal = ele.dataset.value;\n  };\n\n  private onDragEnd = (ev) => {\n    this.dragVal = null;\n    ev.preventDefault();\n  };\n\n  private onDragLeave = (ev: MouseEvent) => {\n    const ele = ev.target as HTMLSpanElement;\n    const spanVal: string =\n      ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n    if (\n      !spanVal ||\n      this.dragVal === spanVal ||\n      !this.value.includes(this.dragVal)\n    ) {\n      ev.preventDefault();\n      return;\n    }\n\n    const to = this.value.indexOf(spanVal);\n    const from = this.value.indexOf(this.dragVal);\n    const tmpArr = this.value as Array<string>;\n    const tmpVal = tmpArr[to];\n\n    tmpArr[to] = tmpArr[from];\n    tmpArr[from] = tmpVal;\n    this.value = [...tmpArr];\n  };\n\n  private onMultiInput = (ev) => {\n    this.inputSearchVal = ev.target.value.trim();\n    this.nanoSearchChange.emit({ value: ev.target.value.trim() });\n  };\n\n  /* Stencil Component lifecycle hooks */\n\n  connectedCallback() {\n    this.debounceChanged();\n    this.watchMaxValuesVisible();\n\n    if (!Build.isBrowser) return;\n\n    this.el.dispatchEvent(\n      new CustomEvent('nanoDidLoad', {\n        detail: this.el,\n      })\n    );\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('nanoDidUnload', {\n        detail: this.el,\n      })\n    );\n\n    if (!Build.isBrowser) return;\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    this.customValidate();\n    this.setDataListOpts();\n    requestAnimationFrame(() => (this.onInit = false));\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  render() {\n    const labelId = this.selectId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.selectId + '-moreId'\n        : '';\n    const helperEndId = this.hasHelperEndSlot ? this.selectId + '-helper' : '';\n\n    this.rtl = this.el.ownerDocument.dir === 'rtl';\n    this.valueItems = [];\n\n    const compWrapOptions = (({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }) => ({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }))(this);\n    const wrapOptions = {\n      ...compWrapOptions,\n      labelId,\n      moreId,\n      helperEndId,\n      hasValue: !!this.value.length || !!this.inputSearchVal.length,\n      controlId: this.selectId,\n    };\n\n    const controlOptions = (({ readonly, disabled }) => ({\n      readonly,\n      disabled,\n      clearControl: this.clearSelect,\n    }))(this);\n\n    return (\n      <Host\n        type={this.multiple ? 'select-multiple' : 'select-one'}\n        aria-disabled={this.disabled ? 'true' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': !!this.value.length || !!this.inputSearchVal.length,\n          'has-focus': this.hasFocus,\n          'is-invalid': this.invalid,\n          'has-label': this.label !== null && !this.floatLabel,\n          'has-float-label': this.label !== null && this.floatLabel,\n          rtl: this.rtl,\n          'has-multiple': this.multiple,\n          'has-clr-btn': this.clearSelect,\n          masked: this.mask,\n          'nano-select': true,\n        }}\n      >\n        <FormControlWrap {...wrapOptions}>\n          <FormControl\n            {...controlOptions}\n            onClearText={this.clearSelectValue}\n            control={this.el}\n            ref={(el) => (this.selectWrap = el)}\n            endValueSlot={\n              <slot name=\"down-arrow\">\n                <nano-icon slot=\"value-end\" name=\"light/chevron-down\" />\n              </slot>\n            }\n          >\n            {this.multiple && (\n              <div class=\"select__multi-wrap select\">\n                {this.multipleValues(labelId, moreId, helperEndId)}\n              </div>\n            )}\n            {!this.multiple && [\n              this.mask && (\n                <div class=\"select__mask\">\n                  {this.getLabel(this.value as string)}\n                </div>\n              ),\n              <input\n                id={this.selectId}\n                class=\"select__native-input\"\n                ref={(input) => (this.inputCtrl = input)}\n                aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n                disabled={this.disabled}\n                form={this.form}\n                placeholder={this.placeholder}\n                readonly\n                required={this.required}\n                value={this.getLabel(this.value as string)}\n                onFocus={this.onFocus}\n              />,\n            ]}\n          </FormControl>\n        </FormControlWrap>\n        <nano-datalist\n          disabled={this.disabled || this.readonly}\n          onNanoOptionsUpdated={this.setOptions}\n          ref={(el) => (this.datalist = el)}\n          selected={this.valArray}\n          type={this.multiple ? 'selctMulti' : 'select'}\n          onNanoSelect={this.setValue}\n          onNanoDeselect={(e) => {\n            e.preventDefault();\n            this.removeValue(e.detail.value);\n          }}\n          options={this._options.length ? this._options : undefined}\n        >\n          {this.allowCustomValues && this.multiple && !!this.inputSearchVal && (\n            <nano-option\n              slot=\"list-top\"\n              value={this.inputSearchVal}\n              selected={false}\n              label={this.inputSearchVal}\n              onNanoSelect={() => this.inputCtrl.focus()}\n            >\n              <span slot=\"check-icon\"></span>\n              Add '{this.inputSearchVal}'\n            </nano-option>\n          )}\n          <slot />\n        </nano-datalist>\n\n        <select\n          id={this.selectId + '-hidden'}\n          class=\"select__native-ctrl\"\n          ref={(select) => (this.nativeSelect = select)}\n          aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n          disabled={this.disabled}\n          form={this.form}\n          multiple={this.multiple}\n          name={this.name}\n          required={this.required}\n          onInvalid={this.handleInvalid}\n        >\n          {this.allowCustomValues &&\n            this.valArray.map((val) => {\n              return (\n                <option value={val} selected>\n                  {val}\n                </option>\n              );\n            })}\n          {!this.allowCustomValues &&\n            this.options.map((opt: OptionInterface) => {\n              return (\n                <option\n                  value={opt.value}\n                  selected={this.valArray.includes(opt.value)}\n                  disabled={opt.disabled}\n                  label={opt.label}\n                >\n                  {this.valArray.includes(opt.value)}\n                </option>\n              );\n            })}\n        </select>\n      </Host>\n    );\n  }\n\n  private multipleValues(\n    labelId: string,\n    moreId: string,\n    helperEndId: string\n  ): VNode | (VNode | VNode[])[] {\n    const input: VNode = (\n      <input\n        class=\"select__multi-input\"\n        id={this.selectId}\n        ref={(input) => (this.inputCtrl = input)}\n        readonly={this.readonly}\n        disabled={this.disabled}\n        autoFocus={this.autofocus}\n        autocomplete=\"off\"\n        onKeyDown={this.handleDocumentKeyDown}\n        onInput={this.onMultiInput}\n        value={this.inputSearchVal}\n        onTouchStart={this.onClick}\n        onMouseDown={this.onClick}\n        onFocus={this.onFocus}\n        placeholder={\n          this.placeholder && !this.value.length ? this.placeholder : ''\n        }\n        aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n      />\n    );\n    if (!this.value.length) return input;\n\n    const toReturn: VNode[] = [];\n\n    (this.value as Array<string>).forEach((val, i) => {\n      if (!Number.isNaN(this._maxValuesVisible) && i > this._maxValuesVisible)\n        return;\n\n      let valueTag: VNode;\n\n      if (i === this._maxValuesVisible) {\n        valueTag = (\n          <span data-value={val} class=\"select__multi-value\">\n            <span>+{this.value.length - this._maxValuesVisible}</span>\n          </span>\n        );\n      } else {\n        valueTag = (\n          <span\n            onDragStart={this.onDragStart}\n            onDragLeave={this.onDragLeave}\n            onDragEnd={this.onDragEnd}\n            onDragOver={(e) => e.preventDefault()}\n            draggable\n            data-value={val}\n            ref={(span) => this.valueItems.push(span)}\n            class=\"select__multi-value select__multi-value--closable\"\n          >\n            {this.valueTagTemplate ? (\n              <span\n                innerHTML={\n                  this.valueTagTemplate\n                    ? this.valueTagTemplate(...this.getOptionWithValue(val))\n                    : undefined\n                }\n              />\n            ) : (\n              <span>{this.getLabel(val)}</span>\n            )}\n            <button\n              class=\"select__multi-value-remove\"\n              type=\"button\"\n              tabindex=\"-1\"\n              onTouchEnd={() => {\n                this.removeValue(val);\n              }}\n              onMouseUp={() => {\n                this.removeValue(val);\n              }}\n            >\n              <nano-icon name=\"light/xmark\"></nano-icon>\n            </button>\n          </span>\n        );\n      }\n\n      if (i === 0 && this.currInsertIndex < 0) {\n        toReturn.push(input, valueTag);\n      } else if (i === this.currInsertIndex) {\n        toReturn.push(valueTag, input);\n      } else {\n        toReturn.push(valueTag);\n      }\n    });\n\n    return toReturn;\n  }\n}\n"],"mappings":";;;gcAeaA,EAAoB,M,yBAIvBC,cAKAC,eAIR,MAAAC,GACE,QACIC,KAAKH,eACLI,EAAA,KAAAC,IAAA,2CAAGC,KAAMH,KAAKF,eAAgBM,MAAM,gBAClCH,EAAA,OAAAC,IAAA,2CAAKE,MAAM,QACTH,EAAA,OAAAC,IAAA,2CAAKE,MAAM,oBACTH,EAAA,OAAAC,IAAA,2CACEE,MAAM,SACNC,IAAKL,KAAKH,eAAeS,iBACzBC,IAAI,cACJC,OAAQ,GACRC,MAAO,KAERT,KAAKH,cAAca,kBAClBT,EAAA,OAAAC,IAAA,2CACEE,MAAM,aACNC,IAAKM,EAAa,sCAClBJ,IAAI,mBAKVN,EAAA,OAAAC,IAAA,2CAAKE,MAAM,gBACTH,EAAA,QAAAC,IAAA,2CAAME,MAAM,QAAQJ,KAAKH,cAAce,MAEvCX,EAAA,QAAAC,IAAA,2CAAME,MAAM,OACTJ,KAAKH,cAAcgB,UAAS,OAAMb,KAAKH,cAAciB,WAK5Db,EAAA,OAAAC,IAAA,2CAAKE,MAAM,SACTH,EAAA,OAAAC,IAAA,2CAAKE,MAAM,iBACTH,EAAA,aAAAC,IAAA,2CAAWa,KAAK,WAAWH,KAAK,0B,GC7D9C,MAAMI,EAAa,sgTACnB,MAAAC,EAAeD,E,MCwCFE,EAAO,M,2PACVC,iBAA4B,MAC5BC,IACAC,UACAC,UAAqB,MACrBC,SACAC,SACAC,aACAC,aAECC,aAAwB,MACxBC,QAAmB,MACnBC,cAAyB,MACzBC,eAA0B,MAC1BC,SAAoB,MACpBC,SAAoB,M,wBAMJ7B,KAAe,KAKhC8B,OAAkD,QAKlDC,SAAoB,MAKYC,KAAgB,MAK/BC,SAAoB,MAKrCC,qBAA+B,EAK/BC,kBAAoB,OAKpBC,YAAuB,KAKvBC,aAAwB,MAKvBC,UAKAC,SAKAC,YAKAC,YAKAC,SAKAC,UAOT,cAAMC,GACJ,IAAK/C,KAAKoB,IAAK,OACfpB,KAAKoB,IAAI4B,O,CAOX,UAAAC,GACE,GAAIjD,KAAKmC,KAAMnC,KAAKkD,qBACflD,KAAKmD,gB,CAOZ,aAAAC,GACE,IAAKpD,KAAKmB,iBAAkB,OAE5B,IAAKnB,KAAK4B,QAAS,CAGjByB,YAAW,KACT,IACGrD,KAAKqB,aACJiC,SAASC,eAAiBD,SAASC,gBAAkBD,SAASE,MAEhExD,KAAKoB,IAAI4B,MAAM,CAAES,cAAe,OAClCzD,KAAK0D,GAAGC,SAAW,KACnB3D,KAAKyC,UAAUmB,KAAK,CAAEC,cAAe7D,KAAK0B,cAAe,GACxD,G,KACE,CAGL,IAAK1B,KAAKqB,UAAW,CACnB,MAAMyC,EAAU,IAAKC,OAAeC,sBACjCC,IACC,GAAIA,EAAK,GAAGC,mBAAmBC,IAAM,EAAG,CACtCnE,KAAK0B,aAAa0C,eAAe,CAC/BC,SAAU,U,CAGdP,EAAQQ,YAAY,GAEtB,CAAEC,UAAW,IAEfT,EAAQU,QAAQxE,KAAK0B,cACrB1B,KAAK0B,aAAasB,MAAM,CAAES,cAAe,OAEzC,MAAMgB,EAAiBC,EAAoB1E,KAAK0B,aAAc,MAC9D,GAAI+C,EAAe,GAAIA,EAAe,GAAGzB,QAEzChD,KAAK0D,GAAGC,UAAY,EACpB3D,KAAK0C,SAASkB,KAAK,CAAEC,cAAe7D,KAAK0B,c,GAO/C,WAAAiD,CAAYC,GACV,IAAK5E,KAAK4B,UAAY5B,KAAKmB,mBAAqBnB,KAAKuC,YAAa,OAClE,IAAKqC,EAAEC,eAAeC,MAAMpB,GAAOA,IAAO1D,KAAK0B,eAC7C1B,KAAK+E,iB,CAGD5B,eAAiB6B,UACvB,IAAKhF,KAAKmB,mBAAqBnB,KAAK4B,QAAS,OAC7C5B,KAAKmC,KAAO,YACN8C,EAAkBjF,KAAK0B,aAAc,CACzCwD,UAAW,OACXC,KAAM,QAERnF,KAAK4C,YAAYgB,KAAK,CAAEC,cAAe7D,KAAK0B,eAC5C1B,KAAK4B,QAAU,KAAK,EAGdsB,cAAgB8B,UACtB,GAAIjB,OAAOqB,WAAapF,KAAKqC,qBAAsB,CACjDrC,KAAKsC,kBAAkB+C,KAAKrF,MAC5B,M,CAGF,IAAKA,KAAKmB,kBAAoBnB,KAAK4B,QAAS,OAC5C5B,KAAKmC,KAAO,WACN8C,EAAkBjF,KAAK0B,aAAc,CACzCwD,UAAW,OACXC,KAAM,OAERnF,KAAK2C,YAAYiB,KAAK,CAAEC,cAAe7D,KAAK0B,eAC5C1B,KAAK4B,QAAU,IAAI,EAGbmD,gBAAkB,KACxB,IAAK/E,KAAKmB,iBAAkB,OAC5B,GAAInB,KAAK4B,QAAS5B,KAAKmD,sBAClBnD,KAAKkD,eAAe,EAGnBoC,YAAc,KACpBtF,KAAKgC,SAAW,KAEhB,GAAIhC,KAAKG,OAASH,KAAKsB,WAAatB,KAAKmB,iBACvCnB,KAAKkD,gBACPlD,KAAK8C,UAAUc,MAAM,EAGf2B,eAAiB,KACvB,GAAIvF,KAAKsB,UAAW,OAIpBtB,KAAK0D,GAAG8B,gBAAgB,YACxBxF,KAAKgC,SAAW,MAChBhC,KAAK6C,SAASe,MAAM,EAId6B,gBAAmBC,IACzB,IAAK1F,KAAK2B,aAAc,OACxB,MAAMgE,EAAaD,EAAGzD,OAAuB2D,QAAQ,aACrD,IAAKD,EAAW3F,KAAKoB,IAAIyE,OAAO,EAI1BC,iBAAmBd,UACzB,IACGhF,KAAKG,MACNH,KAAKsB,YACJtB,KAAKmB,kBACLnB,KAAKyB,eAAiBzB,KAAKyB,aAAasE,UAAUC,SAAS,SAE5D,OAIF,IAAIC,EAAa,EACjB,GAAIC,EAAYlG,KAAK0D,GAAI,iCAAiCyC,OACxDF,EAAa,IAEfG,aAAapG,KAAKuB,UAClBvB,KAAKqB,UAAY,KACjBrB,KAAKsB,UAAY,KACjBtB,KAAKwB,SAAWuC,OAAOV,YACrB2B,eAAkBhF,KAAKkD,iBACvB+C,GAEFjG,KAAKsB,UAAY,KAAK,EAIhB+E,iBAAmB,KACzB,IAAKrG,KAAKG,KAAM,OAChBiG,aAAapG,KAAKwB,UAClBxB,KAAKqB,UAAY,KACjBrB,KAAKsB,UAAY,KAGjBtB,KAAKuB,SAAWwC,OAAOV,YACrB2B,eAAkBhF,KAAKmD,kBACvB,KAEFnD,KAAKsB,UAAY,KAAK,EAGhBgF,YAAc,KACpBtG,KAAKqB,UAAY,MACjB,GAAIrB,KAAKmB,iBAAkBnB,KAAK+E,iBAAiB,EAGnD,iBAAAwB,GACE,MAAMC,EAAexG,KAAK0D,GAAG+C,cAAc,sBAC3CzG,KAAKmB,mBAAqBqF,EAE1B,MAAME,EAAOC,EACX3G,KAAK0D,GACL,aACA,GACF1D,KAAK2B,eAAiB+E,EAEtB,GAAIA,EAAM,CACR1G,KAAKG,KAAQuG,EAA2BvG,KACnCuG,EAA2BvG,KAC5B,KACJH,KAAKoB,IAAMsF,EACX,GAAI1G,KAAKmB,iBACPnB,KAAKoB,IAAIwF,iBAAiB,QAAS5G,KAAK+E,iBAE1C/E,KAAKoB,IAAIwF,iBAAiB,QAAS5G,KAAKsF,aACxCtF,KAAKoB,IAAIwF,iBAAiB,OAAQ5G,KAAKuF,e,CAGzCvF,KAAK6B,cAAgB,MACrB7B,KAAK8B,eAAiB,MACtB9B,KAAKyB,aAAezB,KAAK0D,GAAGkC,QAAQiB,EAAa,oBAEjD7G,KAAK8B,iBAAmB9B,KAAK0D,GAAGkC,QAAQiB,EAAa,qBACrD7G,KAAK+B,WAAa/B,KAAK0D,GAAGkC,QAAQiB,EAAa,cAC/C7G,KAAK6B,cACH7B,KAAK0D,GAAGoD,gBAAkB9G,KAAKyB,gBAC7BzB,KAAK0D,GAAGkC,QAAQ,c,CAGtB,gBAAAmB,GACE/G,KAAKiD,Y,CAGP,oBAAA+D,GACEhH,KAAKoB,IAAI6F,oBAAoB,QAASjH,KAAK+E,iBAC3C/E,KAAKoB,IAAI6F,oBAAoB,QAASjH,KAAKsF,aAC3CtF,KAAKoB,IAAI6F,oBAAoB,OAAQjH,KAAKuF,e,CAG5C,MAAAxF,GACE,OACEE,EAACiH,EAAI,CAAAhH,IAAA,2CACHE,MAAO,CACL,gBAAiBJ,KAAKmB,iBACtB,iBAAkBnB,KAAKmC,KACvBC,SAAUpC,KAAKoC,SACf,YAAapC,KAAKgC,SAClBE,SAAUlC,KAAKkC,SACf,kBAAmBlC,KAAK6B,cACxB,mBAAoB7B,KAAK8B,eACzB,YAAa9B,KAAK+B,SAClB,gBAAiB,MAEnBoF,OAAQnH,KAAKuF,eACb6B,IAAKpH,KAAK0D,GAAG2D,cAAcD,MAAQ,MAAQ,MAAQ,KACnDE,aAActH,KAAK8F,iBACnByB,aAAcvH,KAAKqG,iBACnBmB,QAASxH,KAAKyF,gBACdgC,KAAMzH,KAAK0D,GAAGkC,QAAQ,iBAAmB,WAAa8B,WAEtDzH,EAAA,OAAAC,IAAA,2CACEE,MAAO,CACL,WAAY,KACZ,iBAAkBJ,KAAKmC,KACvBC,SAAUpC,KAAKoC,UAEjBuF,KAAK,gBAEJ3H,KAAKG,OAASH,KAAK2B,eAAiB3B,KAAKkC,UACxCjC,EAAA,KAAAC,IAAA,2CACEyH,KAAK,oBACL1F,OAAQjC,KAAKiC,OACb2F,IAAMC,GAAO7H,KAAKoB,IAAMyG,EACxB1H,KAAMH,KAAKG,KACX2H,QAAS9H,KAAKsF,YACdlF,MAAO,CACLoC,aAAcxC,KAAKwC,eAGrBvC,EAAA,QAAAC,IAAA,2CAAMU,KAAK,eACXX,EAAA,QAAAC,IAAA,2CAAME,MAAM,QACVH,EAAA,QAAAC,IAAA,8CAEFD,EAAA,QAAAC,IAAA,2CAAMU,KAAK,gBAGXZ,KAAK2B,eAAiB3B,KAAKG,MAASH,KAAKkC,WAC3CjC,EAAA,UAAAC,IAAA,2CACEyH,KAAK,oBACLC,IAAMxG,GAASpB,KAAKoB,IAAMA,EAC1BoG,QAASxH,KAAKsG,YACdwB,QAAS9H,KAAKsF,YACdpD,SAAUlC,KAAKkC,SACf9B,MAAO,CACLoC,aAAcxC,KAAKwC,eAGrBvC,EAAA,QAAAC,IAAA,2CAAMU,KAAK,eACXX,EAAA,QAAAC,IAAA,2CAAME,MAAM,QACVH,EAAA,QAAAC,IAAA,8CAEFD,EAAA,QAAAC,IAAA,2CAAMU,KAAK,cAGdZ,KAAK2B,eAAiB3B,KAAKkC,UAC1BjC,EAAA,OAAAC,IAAA,2CAAKE,MAAM,QACTH,EAAA,QAAAC,IAAA,2CAAMU,KAAK,eACXX,EAAA,QAAAC,IAAA,6CACAD,EAAA,QAAAC,IAAA,2CAAMU,KAAK,cAGdZ,KAAKmB,mBAAqBnB,KAAKkC,UAC9BjC,EAAA,OAAAC,IAAA,2CACEE,MAAM,iBACNwH,IAAMG,GAAS/H,KAAK0B,aAAeqG,EACnCpE,UAAW,GAEX1D,EAAA,OAAAC,IAAA,2CAAKE,MAAM,yBAAyBuH,KAAK,qBACvC1H,EAAA,QAAAC,IAAA,2CAAMU,KAAK,eAEbX,EAAA,OAAAC,IAAA,2CACEE,MAAM,sBACNoH,QAASxH,KAAKmD,eACdwE,KAAK,qB,yFCtbrB,MAAMK,EAAY,s5oBAClB,MAAAC,EAAeD,EC+Bf,IAAIE,EAAY,E,MAuBHC,EAAM,MACTC,aACAC,WAAqC,GACrCC,QACAC,GACAC,SAAW,eAAeN,MAC1BO,IAAe,MACfC,OAAkB,KAClBC,YAAsB,GAE9B,aAAYC,GACV,OAAO5I,KAAK6I,U,CAEd,aAAYD,CAAUE,GACpB,GAAIA,IAAU9I,KAAK6I,WAAY,OAC/B7I,KAAK6I,WAAaC,EAClB9I,KAAK+I,iB,CAECF,WAIAG,YACR,cAAYC,GACV,OAAOjJ,KAAKgJ,W,CAEd,cAAYC,CAAWC,GACrB,GAAIlJ,KAAKgJ,cAAgBE,EAAK,OAC9BlJ,KAAKgJ,YAAcE,EACnBlJ,KAAK+I,iB,CAGCI,UACR,YAAYC,GACV,OAAOpJ,KAAKmJ,S,CAEd,YAAYC,CAASF,GACnB,GAAIlJ,KAAKmJ,YAAcD,EAAK,OAC5BlJ,KAAKmJ,UAAYD,EACjBlJ,KAAK+I,iB,CAGP,WAAAM,CAAAC,G,6SACEtJ,KAAKuJ,qBAAuBC,EAASxJ,KAAKuJ,qBAAsB,G,CAGzDE,iBAA2B,EAC3BC,aAAe,MACfC,aAAuB,GACvB3H,SAAW,MACX4H,aAAwB,MACxBC,cAAyB,MACzBC,iBAAmB,MACnBC,eAAyB,G,wBAQlC,WACIC,GACF,OAAOhK,KAAKiK,Q,CAELA,SAAW,MAKpB,mBACIC,GACF,IAAKlK,KAAKoI,aAAc,MAAO,GAC/B,OAAOpI,KAAKoI,aAAa+B,iB,CAOnBC,MAKAC,UAAY,MAKKnI,SAAW,MAMXoI,WACvB,kBAKuBC,gBAAkB,KAKnCC,MAKAC,UAAsB,MAKtBC,WAAsB,MAKtBC,SAAqB,MAIrBC,iBAAsC,EACtCC,kBAGR,qBAAAC,GACE,IAAK9K,KAAK2K,SAAU,OAEpB3K,KAAK6K,kBACH7K,KAAK4K,mBAAqB,MAAQG,IAAMC,OAAOhL,KAAK4K,kBAGtD,IAAKI,OAAOC,MAAMjL,KAAK6K,mBAAoB,CACzC,GAAI7K,KAAKyJ,gBAAkBzJ,KAAK6K,kBAAmB,CAEjD7K,KAAKyJ,gBAAkBzJ,KAAK6K,iB,MAEzB,CAEL7K,KAAKyJ,gBAAkBzJ,KAAKkL,MAAM/E,OAAS,C,EAOvCvF,KAAeZ,KAAKwI,SAAW,QAM/B2C,YAKiBC,SAAW,MAK5BC,SAAW,MAKXC,KAKAC,IAKAC,IAKAC,KAKAC,kBAA6B,MAKrC,SACIR,GACF,OAAOlL,KAAK2L,SAAW3L,KAAK2K,SAAW,GAAK,G,CAE9C,SAAIO,CAAMU,GACR,KAAMA,KAAS5L,KAAK2L,OAAQ,CAC1B,GAAIE,KAAKC,UAAUF,KAASC,KAAKC,UAAU9L,KAAK2L,QAAS,M,CAG3D,UAAWC,IAAQ,SAAU,CAC3B,GAAI5L,KAAK2K,SAAU3K,KAAK2L,OAASC,EAAIG,MAAM,UACtC/L,KAAK2L,OAASC,C,MACd,GAAII,MAAMC,QAAQL,GAAM,CAC7B,GAAI5L,KAAK2K,SAAU3K,KAAK2L,OAASC,OAC5B5L,KAAK2L,OAASC,EAAI,E,EAGnBD,OAQR,WACIO,GACF,GAAIlM,KAAKmM,SAAShG,OAAQ,OAAOnG,KAAKmM,SAEtC,IAAKnM,KAAKoJ,WAAapJ,KAAKoJ,SAASgD,cAAe,MAAO,GAE3D,OAAOpM,KAAKqM,gBAAgBC,KAAKC,IAC/B,MAAMrB,MAAEA,EAAK9I,SAAEA,EAAQoI,MAAEA,EAAKgC,WAAEA,GAAeD,EAC/C,MAAO,CAAErB,QAAO9I,WAAUoI,QAAOgC,aAAY,G,CAGjD,WAAIN,CAAQO,GACVzM,KAAKmM,SAAWM,EAAKH,KAAKI,IACxB,UAAWA,IAAQ,SAAU,MAAO,CAAExB,MAAOwB,EAAKlC,MAAOkC,QACpD,OAAOA,CAAG,G,CAGXP,SAA8B,GAC7BE,gBAAqC,GAKtCM,YAAc,MAMdC,KAAO,MAKPpD,SAAW,EAGT,eAAAqD,GACR7M,KAAK8M,iBAAmBC,EAAc/M,KAAK8M,iBAAkB9M,KAAKwJ,S,CAQ1D,cAAAwD,GACR,GAAIhN,KAAK0I,OAAQ,OACjB,GAAI1I,KAAKgK,QAAShK,KAAK0J,aAAe1J,KAAKiK,SAAW,MAEtDjK,KAAKiN,iBACL,GAAIjN,KAAKsK,aAAe,QAAS,OACjCtK,KAAKuJ,sB,CAOP,YAAA2D,GACElN,KAAKiN,iBAEL,GAAIjN,KAAK0I,OAAQ,CACf,GAAI1I,KAAK2K,SAAU3K,KAAKyJ,gBAAkBzJ,KAAKkL,MAAM/E,OAAS,EAC9D,M,CAEFgH,uBAAsB,KACpBnN,KAAKgN,iBACLhN,KAAKoN,WAAWxJ,KAAK,CAAEsH,MAAOlL,KAAKkL,OAAQ,G,CAKvCmC,eAA8C,GAGtD,eAAAtE,GACE,IAAK/I,KAAKoJ,WAAapJ,KAAKiJ,WAAY,OAExCjJ,KAAKoJ,SAASN,MAAQ9I,KAAK4I,UAE3B,MAAM0E,EAAetN,KAAKoJ,SAASiE,gBAAkB,GACrDrN,KAAKoJ,SAASiE,eAAiB,IAC1BC,KACAtN,KAAKqN,eACRE,SAAUvN,KAAKiJ,W,CAUXuE,iBAOCJ,WAKAvK,SAKAC,UAMA2K,YAMAC,cAKAZ,iBAMAa,aAUT,oBAAMC,CAAeC,GACnB,OAAO,IAAIC,SAASC,IAClB,GAAIF,EAAe,CACjB7N,KAAKiN,iBACLjN,KAAKuJ,sB,CAEPlG,YAAW,KACT0K,EAAQ,CACNC,SAAUhO,KAAKiK,SACfN,aAAc3J,KAAKoI,aAAa+B,mBAChC,GACD,GAAG,G,CASV,cAAMpH,GACJ,IAAK/C,KAAK4I,UAAW,OACrB5I,KAAK4I,UAAU5F,QACfK,YAAW,IAAMrD,KAAK4I,UAAU/C,SAAS,G,CAO3C,gBAAAoI,GACE,OAAOH,QAAQC,QAAQ/N,KAAKoI,a,CAQ9B,eAAM8F,CAAUC,GACd,GAAInO,KAAKoI,aAAc,CACrBpI,KAAK2I,YAAcwF,EACnBnO,KAAKoI,aAAagG,kBAAkBD,GACpCnO,KAAKuJ,sB,EAMT,YAAY8E,GACV,cAAcrO,KAAKkL,QAAU,SACzBlL,KAAKkL,MAAM/E,OACT,CAACnG,KAAKkL,OACN,GACFlL,KAAKkL,K,CAGH,aAAAoD,GACN,OAAOtO,KAAKqO,SAASE,MAAM3C,GACxB5L,KAAKkM,QAA8BqC,MAAM7B,GAAQA,EAAIxB,QAAUU,K,CAI5DqB,eAAiB,KACvB,IACGjN,KAAKoI,gBACJpI,KAAK2I,cACN3I,KAAKoI,aAAa,qBAEnB,OAEFpI,KAAKoI,aAAagG,kBAAkB,IAEpC,GAAIpO,KAAKqL,WAAarL,KAAKqO,SAASlI,OAAQ,CAC1CnG,KAAKoI,aAAagG,kBAAkB,8BACpC,OAAO,I,CAET,GACEpO,KAAKqO,SAASlI,SACbnG,KAAK0L,oBACL1L,KAAKsO,gBACN,CACAtO,KAAKoI,aAAagG,kBAChB,0CAEF,OAAO,I,CAET,GAAIpO,KAAKuL,KAAOvL,KAAKqO,SAASlI,OAASnG,KAAKuL,IAAK,CAC/CvL,KAAKoI,aAAagG,kBAChB,cAAcpO,KAAKuL,2BAErB,OAAO,I,CAET,GAAIvL,KAAKwL,KAAOxL,KAAKqO,SAASlI,OAASnG,KAAKwL,IAAK,CAC/CxL,KAAKoI,aAAagG,kBAChB,gCAAgCpO,KAAKwL,eAEvC,OAAO,I,CAET,OAAO,KAAK,EAGNjC,qBAAwB7D,IAC9B,GAAI1F,KAAKsK,aAAe,kBAAmBtK,KAAKsK,WAAa,QAE7DtK,KAAKiK,SAAW,MAChBjK,KAAK0J,aAAe,MACpB1J,KAAK2J,aAAe,GAEpB,IAAK3J,KAAKoI,aAAaoG,SAASC,MAAO,CACrCzO,KAAK2J,aAAe3J,KAAKoI,aAAa+B,kBACtCnK,KAAKiK,SAAW,KAChBjK,KAAK0J,aAAe,I,CAEtB1J,KAAK2N,aAAa/J,KAAK,CACrBoK,SAAUhO,KAAKgK,QACfL,aAAc3J,KAAK2J,aACnB+E,cAAehJ,GACf,EAGIiJ,cAAiBjJ,IACvB1F,KAAKiK,SAAW,KAEhB,GAAIjK,KAAKsK,aAAe,SAAU,CAChCtK,KAAKiK,SAAWjK,KAAK0J,aAAe1J,KAAKiN,gB,CAE3C,GAAIjN,KAAKuK,gBAAiB7E,EAAGkJ,iBAE7BzB,uBAAsB,IAAMnN,KAAKuJ,qBAAqB7D,IAAI,EAGpDmJ,SAAYjK,IAClBA,EAAEgK,iBAEF,IAAK5O,KAAK2K,SAAU,CAClB3K,KAAKkL,MAAQtG,EAAEkK,OAAO5D,MACtB,M,CAEF,GAAIlL,KAAKkL,OAASlL,KAAKkL,MAAM/E,QAAUnG,KAAKkL,MAAM6D,SAASnK,EAAEkK,OAAO5D,OAClE,OACF,GAAIlL,KAAKuL,KAAOvL,KAAKkL,MAAM/E,SAAWnG,KAAKuL,IAAK,OAEhD,GACEP,OAAOC,MAAMjL,KAAK6K,oBAClB7K,KAAKkL,MAAM/E,QAAUnG,KAAK6K,kBAC1B,CACA7K,KAAKyJ,iB,CAGPzJ,KAAKkL,MAAQ,IACRlL,KAAKkL,MAAM8D,MAAM,EAAGhP,KAAKyJ,iBAC5B7E,EAAEkK,OAAO5D,SACNlL,KAAKkL,MAAM8D,MAAMhP,KAAKyJ,kBAE3BzJ,KAAK+J,eAAiB,EAAE,EAGlBkF,YAAeC,IACrB,GAAIlP,KAAKoL,UAAYpL,KAAKkC,SAAU,OACpC,IAAKlC,KAAK2K,WAAa3K,KAAKkL,MAAM/E,OAAQ,OAE1C,IAAK+I,EAAQA,EAASlP,KAAKkL,MAAMlL,KAAKkL,MAAM/E,OAAS,GACrDnG,KAAKkL,MAASlL,KAAKkL,MAAwBiE,QAAQvD,GAAQA,IAAQsD,IAEnE,GACElE,OAAOC,MAAMjL,KAAK6K,oBAClB7K,KAAKkL,MAAM/E,QAAUnG,KAAK6K,kBAC1B,CACA7K,KAAKyJ,iB,CAEPzJ,KAAK+C,UAAU,EAGT,kBAAAqM,GACN,IAAKrL,OAAO,oBAAqB,OAEjC,MAAMwE,EAAMvI,KAAKuI,GAAK,IAAI8G,kBAAiB,IACzCrP,KAAKsP,0BAEP/G,EAAG/D,QAAQxE,KAAK0D,GAAI,CAAE6L,UAAW,KAAMC,QAAS,M,CAG1C,qBAAAF,GAENtP,KAAK4J,eAAiB5J,KAAK0D,GAAG+L,iBAAiB,kBAAkBtJ,OACjEnG,KAAK6J,gBAAkB7J,KAAK0D,GAAG+C,cAAc,mBAC7CzG,KAAK8J,mBAAqB9J,KAAK0D,GAAG+C,cAAc,sB,CAG1C,kBAAAiJ,CAAmBxE,GACzB,IAAIyE,EACJ,MAAMzD,EAAUlM,KAAKoJ,UAAUgD,eAAejG,OAC1CnG,KAAKoJ,SAASgD,cACbpM,KAAKkM,QACV,MAAM0D,EAAS1D,EAAQqC,MAAK,CAAC7B,EAAKmD,KAChCF,EAAQE,EACR,OAAQnD,EAAIxK,UAAYwK,EAAIxB,OAAO/E,QAAUuG,EAAIxB,QAAUA,CAAK,IAElE,MAAO,CAAC0E,EAAQD,E,CAGV,QAAAG,CAASZ,GACf,MAAMU,EAAS5P,KAAK0P,mBAAmBR,GAAQ,GAC/C,OAAOU,GAAUA,EAAOpF,MAAQoF,EAAOpF,MAAQ0E,C,CAMjD,OAAAa,CAAQnL,GACN,MAAM6G,EAAOzL,KAAKyL,KACdnI,SAASmD,cAAc,IAAMzG,KAAKyL,MAClCzL,KAAK0D,GAAGkC,QAAQ,QACpB,IAAK6F,GAAQ7G,EAAE3C,SAAWjC,KAAK0D,GAAGkC,QAAQ,QAAS,OAEnD5F,KAAKgQ,kB,CAKP,UAAAC,CAAWrL,GACT,IAAK5E,KAAKgC,SAAU,OAEpB,MAAMkO,EAAMtL,EACZ,IAAI3C,EAEJkL,uBAAsB,KACpB,GAAI+C,EAAIhQ,IAAK,CACX,GAAIgQ,EAAIhQ,MAAQ,MAAO,OACvB+B,EAASkO,G,MACJlO,EAAS2C,EAAE3C,OAElB,GAAImO,EAAepQ,KAAK0D,GAAG2M,QAAQC,cAAerO,KAAYjC,KAAK0D,GAAI,CACrE1D,KAAKmH,Q,KAKHoJ,WAAa,KACnB,IACGvQ,KAAKoJ,WACLpJ,KAAKoJ,SAASgD,gBACdpM,KAAKoJ,SAASgD,cAAcjG,OAE7B,OAEFnG,KAAKqM,gBAAkBrM,KAAKoJ,SAASgD,cAAcE,KAAKC,IACtD,MAAMrB,MAAEA,EAAK9I,SAAEA,EAAQoI,MAAEA,EAAKgC,WAAEA,GAAeD,EAC/C,MAAO,CAAErB,QAAO9I,WAAUoI,QAAOgC,aAAY,IAE/CxM,KAAKiN,gBAAgB,EAGfuD,sBAAyB9K,IAC/B,IAAK1F,KAAK2K,WAAa3K,KAAKgC,SAAU,OAEtC,IAAKhC,KAAK+J,eAAgB,CACxB,IAAI0G,EAEJ,OAAQ/K,EAAGxF,KACT,IAAK,YACH,GAAIF,KAAK4I,UAAU8H,uBACjBD,EAAKzQ,KAAK4I,UAAU8H,4BACjB,MAEL1Q,KAAKiP,YAAYwB,EAAGE,QAAQzF,OAAS,MACrC,MAEF,IAAK,SACH,GAAIlL,KAAK4I,UAAUgI,mBACjBH,EAAKzQ,KAAK4I,UAAUgI,wBACjB,MAEL5Q,KAAKiP,YAAYwB,EAAGE,QAAQzF,OAAS,MACrC,MAEF,IAAK,YACL,IAAK,aACH,IAAKlL,KAAKkL,MAAM/E,OAAQ,MAExB,GAAIT,EAAGxF,MAAQ,aAAeF,KAAK4I,UAAUiI,gBAC3C7Q,KAAKyJ,kBACP,GAAI/D,EAAGxF,MAAQ,cAAgBF,KAAK4I,UAAUkI,YAC5C9Q,KAAKyJ,kBAEPpG,YAAW,KACTrD,KAAK4I,UAAU5F,OAAO,GACrB,IACH0C,EAAGkJ,iBACH,M,GAKAzH,OAAS,KACfnH,KAAKgC,SAAW,MAEhBmL,uBAAsB,KACpB,GAAInN,KAAKsK,aAAe,UAAYtK,KAAKgC,SACvChC,KAAKuJ,sBAAsB,IAE/BvJ,KAAK6C,SAASe,OAEd,IAAK5D,KAAK0L,mBAAqB1L,KAAK2K,SAAU,CAC5C3K,KAAK+J,eAAiB,GACtB,MAAMgH,EAAQ,IAAIhN,OAAOiN,MAAM,UAC/BhR,KAAK4I,UAAUqI,cAAcF,E,GAIzBjJ,QAAU,KAChB9H,KAAKgC,SAAW,KAChBhC,KAAK8C,UAAUc,MAAM,EAGfoM,iBAAoBtK,IAC1B,GAAI1F,KAAK2M,cAAgB3M,KAAKoL,WAAapL,KAAKkC,UAAYwD,EAAI,CAC9DA,EAAGkJ,iBACHlJ,EAAGwL,iB,CAGL,GAAIlR,KAAK2K,SAAU,CACjB3K,KAAKkL,MAAQ,GACblL,KAAKyJ,iBAAmB,C,MACnBzJ,KAAKkL,MAAQ,GAEpBlL,KAAK4I,UAAUsC,MAAQ,GACvB,MAAM6F,EAAQ,IAAIhN,OAAOiN,MAAM,UAC/BhR,KAAK4I,UAAUqI,cAAcF,EAAM,EAG7BvJ,QAAU,KAChBxH,KAAK+C,UAAU,EAKToO,YAAezL,IACrB,MAAMwD,EAAMxD,EAAGzD,OACfjC,KAAKsI,QAAUY,EAAIyH,QAAQzF,KAAK,EAG1BkG,UAAa1L,IACnB1F,KAAKsI,QAAU,KACf5C,EAAGkJ,gBAAgB,EAGbyC,YAAe3L,IACrB,MAAMwD,EAAMxD,EAAGzD,OACf,MAAMqP,EACJpI,EAAIyH,SAAWzH,EAAIyH,QAAQzF,MAAQhC,EAAIyH,QAAQzF,MAAQ,KAEzD,IACGoG,GACDtR,KAAKsI,UAAYgJ,IAChBtR,KAAKkL,MAAM6D,SAAS/O,KAAKsI,SAC1B,CACA5C,EAAGkJ,iBACH,M,CAGF,MAAM2C,EAAKvR,KAAKkL,MAAMsG,QAAQF,GAC9B,MAAMG,EAAOzR,KAAKkL,MAAMsG,QAAQxR,KAAKsI,SACrC,MAAMoJ,EAAS1R,KAAKkL,MACpB,MAAMyG,EAASD,EAAOH,GAEtBG,EAAOH,GAAMG,EAAOD,GACpBC,EAAOD,GAAQE,EACf3R,KAAKkL,MAAQ,IAAIwG,EAAO,EAGlBE,aAAgBlM,IACtB1F,KAAK+J,eAAiBrE,EAAGzD,OAAOiJ,MAAM2G,OACtC7R,KAAK8M,iBAAiBlJ,KAAK,CAAEsH,MAAOxF,EAAGzD,OAAOiJ,MAAM2G,QAAS,EAK/D,iBAAAtL,GACEvG,KAAK6M,kBACL7M,KAAK8K,wBAIL9K,KAAK0D,GAAGuN,cACN,IAAIa,YAAY,cAAe,CAC7BhD,OAAQ9O,KAAK0D,K,CAKnB,oBAAAsD,GACE1D,SAAS2N,cACP,IAAIa,YAAY,gBAAiB,CAC/BhD,OAAQ9O,KAAK0D,MAKjB,GAAI1D,KAAKuI,GAAIvI,KAAKuI,GAAGjE,Y,CAGvB,gBAAAyC,GACE/G,KAAKoP,qBACLpP,KAAKiN,iBACLjN,KAAK+I,kBACLoE,uBAAsB,IAAOnN,KAAK0I,OAAS,O,CAG7C,iBAAAqJ,GACE/R,KAAKsP,uB,CAGP,MAAAvP,GACE,MAAMiS,EAAUhS,KAAKwI,SAAW,OAChC,MAAMyJ,EACJjS,KAAKuK,iBAAmBvK,KAAK6J,cACzB7J,KAAKwI,SAAW,UAChB,GACN,MAAM0J,EAAclS,KAAK8J,iBAAmB9J,KAAKwI,SAAW,UAAY,GAExExI,KAAKyI,IAAMzI,KAAK0D,GAAG2D,cAAcD,MAAQ,MACzCpH,KAAKqI,WAAa,GAElB,MAAM8J,EAAkB,GACtBzO,KACAgH,aACAF,QACAb,eACAY,kBACAV,gBACAC,mBACAF,eACAa,YACAU,cACA1C,UACD,CACC/E,KACAgH,aACAF,QACAb,eACAY,kBACAV,gBACAC,mBACAF,eACAa,YACAU,cACA1C,QAvBsB,CAwBpBzI,MACJ,MAAMoS,EAAc,IACfD,EACHH,UACAC,SACAC,cACAG,WAAYrS,KAAKkL,MAAM/E,UAAYnG,KAAK+J,eAAe5D,OACvDmM,UAAWtS,KAAKwI,UAGlB,MAAM+J,EAAiB,GAAInH,WAAUlJ,eAAU,CAC7CkJ,WACAlJ,WACAsQ,aAAcxS,KAAK2M,cAHE,CAInB3M,MAEJ,OACEC,EAACiH,EAAI,CAAAhH,IAAA,2CACHuS,KAAMzS,KAAK2K,SAAW,kBAAoB,aAAY,gBACvC3K,KAAKkC,SAAW,OAAS,KACxC9B,MAAO,IACFsS,EAAmB1S,KAAKoK,OAC3B,cAAepK,KAAKkL,MAAM/E,UAAYnG,KAAK+J,eAAe5D,OAC1D,YAAanG,KAAKgC,SAClB,aAAchC,KAAKgK,QACnB,YAAahK,KAAKwK,QAAU,OAASxK,KAAK0K,WAC1C,kBAAmB1K,KAAKwK,QAAU,MAAQxK,KAAK0K,WAC/CjC,IAAKzI,KAAKyI,IACV,eAAgBzI,KAAK2K,SACrB,cAAe3K,KAAK2M,YACpBgG,OAAQ3S,KAAK4M,KACb,cAAe,OAGjB3M,EAAC2S,EAAe,CAAA1S,IAAA,8CAAKkS,GACnBnS,EAAC4S,EAAW,CAAA3S,IAAA,8CACNqS,EACJO,YAAa9S,KAAKgQ,iBAClB+C,QAAS/S,KAAK0D,GACdkE,IAAMlE,GAAQ1D,KAAKiJ,WAAavF,EAChCsP,aACE/S,EAAA,QAAMW,KAAK,cACTX,EAAA,aAAWc,KAAK,YAAYH,KAAK,yBAIpCZ,KAAK2K,UACJ1K,EAAA,OAAAC,IAAA,2CAAKE,MAAM,6BACRJ,KAAKiT,eAAejB,EAASC,EAAQC,KAGxClS,KAAK2K,UAAY,CACjB3K,KAAK4M,MACH3M,EAAA,OAAAC,IAAA,2CAAKE,MAAM,gBACRJ,KAAK8P,SAAS9P,KAAKkL,QAGxBjL,EAAA,SAAAC,IAAA,2CACEgT,GAAIlT,KAAKwI,SACTpI,MAAM,uBACNwH,IAAMkB,GAAW9I,KAAK4I,UAAYE,EAAM,kBACvBkJ,EAAU,IAAMC,EAAS,IAAMC,EAChDhQ,SAAUlC,KAAKkC,SACfuJ,KAAMzL,KAAKyL,KACXN,YAAanL,KAAKmL,YAClBC,SAAQ,KACRC,SAAUrL,KAAKqL,SACfH,MAAOlL,KAAK8P,SAAS9P,KAAKkL,OAC1BpD,QAAS9H,KAAK8H,aAKtB7H,EAAA,iBAAAC,IAAA,2CACEgC,SAAUlC,KAAKkC,UAAYlC,KAAKoL,SAChC+H,qBAAsBnT,KAAKuQ,WAC3B3I,IAAMlE,GAAQ1D,KAAKoJ,SAAW1F,EAC9BtB,SAAUpC,KAAKqO,SACfoE,KAAMzS,KAAK2K,SAAW,aAAe,SACrCyI,aAAcpT,KAAK6O,SACnBwE,eAAiBzO,IACfA,EAAEgK,iBACF5O,KAAKiP,YAAYrK,EAAEkK,OAAO5D,MAAM,EAElCgB,QAASlM,KAAKmM,SAAShG,OAASnG,KAAKmM,SAAWzE,WAE/C1H,KAAK0L,mBAAqB1L,KAAK2K,YAAc3K,KAAK+J,gBACjD9J,EAAA,eAAAC,IAAA,2CACEa,KAAK,WACLmK,MAAOlL,KAAK+J,eACZ3H,SAAU,MACVoI,MAAOxK,KAAK+J,eACZqJ,aAAc,IAAMpT,KAAK4I,UAAU5F,SAEnC/C,EAAA,QAAAC,IAAA,2CAAMa,KAAK,eAAoB,QACzBf,KAAK+J,eAAc,KAG7B9J,EAAA,QAAAC,IAAA,8CAGFD,EAAA,UAAAC,IAAA,2CACEgT,GAAIlT,KAAKwI,SAAW,UACpBpI,MAAM,sBACNwH,IAAM0L,GAAYtT,KAAKoI,aAAekL,EAAO,kBAC5BtB,EAAU,IAAMC,EAAS,IAAMC,EAChDhQ,SAAUlC,KAAKkC,SACfuJ,KAAMzL,KAAKyL,KACXd,SAAU3K,KAAK2K,SACf/J,KAAMZ,KAAKY,KACXyK,SAAUrL,KAAKqL,SACfkI,UAAWvT,KAAK2O,eAEf3O,KAAK0L,mBACJ1L,KAAKqO,SAAS/B,KAAKV,GAEf3L,EAAA,UAAQiL,MAAOU,EAAKxJ,SAAQ,MACzBwJ,MAIP5L,KAAK0L,mBACL1L,KAAKkM,QAAQI,KAAKI,GAEdzM,EAAA,UACEiL,MAAOwB,EAAIxB,MACX9I,SAAUpC,KAAKqO,SAASU,SAASrC,EAAIxB,OACrChJ,SAAUwK,EAAIxK,SACdsI,MAAOkC,EAAIlC,OAEVxK,KAAKqO,SAASU,SAASrC,EAAIxB,W,CASpC,cAAA+H,CACNjB,EACAC,EACAC,GAEA,MAAMpJ,EACJ7I,EAAA,SACEG,MAAM,sBACN8S,GAAIlT,KAAKwI,SACTZ,IAAMkB,GAAW9I,KAAK4I,UAAYE,EAClCsC,SAAUpL,KAAKoL,SACflJ,SAAUlC,KAAKkC,SACfsR,UAAWxT,KAAKqK,UAChBoJ,aAAa,MACbC,UAAW1T,KAAKwQ,sBAChBmD,QAAS3T,KAAK4R,aACd1G,MAAOlL,KAAK+J,eACZ6J,aAAc5T,KAAKwH,QACnBqM,YAAa7T,KAAKwH,QAClBM,QAAS9H,KAAK8H,QACdqD,YACEnL,KAAKmL,cAAgBnL,KAAKkL,MAAM/E,OAASnG,KAAKmL,YAAc,GAAE,kBAE/C6G,EAAU,IAAMC,EAAS,IAAMC,IAGpD,IAAKlS,KAAKkL,MAAM/E,OAAQ,OAAO2C,EAE/B,MAAMgL,EAAoB,GAEzB9T,KAAKkL,MAAwB6I,SAAQ,CAACnI,EAAKiE,KAC1C,IAAK7E,OAAOC,MAAMjL,KAAK6K,oBAAsBgF,EAAI7P,KAAK6K,kBACpD,OAEF,IAAImJ,EAEJ,GAAInE,IAAM7P,KAAK6K,kBAAmB,CAChCmJ,EACE/T,EAAA,qBAAkB2L,EAAKxL,MAAM,uBAC3BH,EAAA,gBAAQD,KAAKkL,MAAM/E,OAASnG,KAAK6K,mB,KAGhC,CACLmJ,EACE/T,EAAA,QACEkR,YAAanR,KAAKmR,YAClBE,YAAarR,KAAKqR,YAClBD,UAAWpR,KAAKoR,UAChB6C,WAAarP,GAAMA,EAAEgK,iBACrBsF,UAAS,kBACGtI,EACZhE,IAAMuM,GAASnU,KAAKqI,WAAW+L,KAAKD,GACpC/T,MAAM,qDAELJ,KAAKwN,iBACJvN,EAAA,QACEoU,UACErU,KAAKwN,iBACDxN,KAAKwN,oBAAoBxN,KAAK0P,mBAAmB9D,IACjDlE,YAIRzH,EAAA,YAAOD,KAAK8P,SAASlE,IAEvB3L,EAAA,UACEG,MAAM,6BACNqS,KAAK,SACL6B,SAAS,KACTC,WAAY,KACVvU,KAAKiP,YAAYrD,EAAI,EAEvB4I,UAAW,KACTxU,KAAKiP,YAAYrD,EAAI,GAGvB3L,EAAA,aAAWW,KAAK,iB,CAMxB,GAAIiP,IAAM,GAAK7P,KAAKyJ,gBAAkB,EAAG,CACvCqK,EAASM,KAAKtL,EAAOkL,E,MAChB,GAAInE,IAAM7P,KAAKyJ,gBAAiB,CACrCqK,EAASM,KAAKJ,EAAUlL,E,KACnB,CACLgL,EAASM,KAAKJ,E,KAIlB,OAAOF,C","ignoreList":[]}