@nanoporetech-digital/components 1.13.10 → 1.13.14

package/dist/nano-components/p-6b91b77b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["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"],"names":["NavItem","[object Object]","hostRef","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","closeSecondary","async","nanoClosing","emit","secondaryMenu","secondaryDiv","status","displayTransition","openSecondary","window","innerWidth","call","nanoOpening","toggleSecondary","handleFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","panelio","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","nanoClose","found","parentElement","secondaryEle","link","getDirectChildren","h","Host","class","has-secondary","secondary-open","has-focus","nano-global-nav","nano-menu-drawer","nano-menu","legacy","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","nav-item","ref","a","onFocus","name","div","tabindex","Select","listItems","valueItems","selectId","selectIds","rtl","currLiIndex","inputSearchVal","watchValue","onInit","currInsertIndex","availOpts","showErrorMsg","errorMessage","listOpen","hasLabelSlot","hasHelperSlot","hasIconSlot","invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","value","options","clearSelect","mask","debounce","native","customValidate","nativeSelect","setCustomValidity","getNativeValue","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","originalEvent","handleInvalid","preventDefault","_","onChange","stopPropagation","handleDocumentKeyDown","handleDocumentMouseDown","openList","clearSelectValue","querySelectorAll","forEach","n","remove","setAvailOpts","setFocus","onMultiInputBlur","onDragStart","dragVal","dataset","onDragEnd","onDragLeave","ele","spanVal","includes","to","indexOf","from","tmpArr","tmpVal","onMultiInput","nanoSearchChange","onOptFocus","activeEle","getActiveOpt","add","onHostClick","closestElement","tagName","toLowerCase","rm","key","multiInput","previousElementSibling","removeValue","nextElementSibling","previousSibling","nextSibling","activeElement","selectedItem","testIndex","foundIndex","addValue","debounceEvent","split","setNativeValue","shouldValidate","nanoChange","switchValue","setupMulti","popover","destroy","Popover","selectWrap","multiList","placement","skidding","distance","onTransitionEnd","scrollTop","show","hide","validateFirst","Promise","resolve","message","reportValidity","filter","opt","toFind","strFilter","nsl","Array","map","hasAttribute","selectedIndex","find","val","values","reduce","accumulator","currentValue","slice","Math","foundVal","mo","MutationObserver","mrs","processSlottedContent","childList","subtree","mutations","existingselect","attributes","attr","specified","nodeName","nodeValue","existingLabel","label","innerHTML","legacyOpts","option","push","innerText","children","parentNode","removeChild","addedNodes","node","nanoOpts","debounceChanged","dispatchEvent","CustomEvent","detail","slotChangeObserver","labelId","position","classes","placeholder-as-label","visually-hide","htmlFor","id","moreId","listId","placeholder","unshift","valueMarkup","optionMenu","input","autoFocus","autocomplete","onInput","onTouchStart","onMouseDown","role","aria-labelledby","aria-controls","aria-expanded","aria-required","aria-autocomplete","i","toReturn","draggable","data-value","span","type","onTouchEnd","onMouseUp","aria-disabled","Object","assign","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","multi-list-open","has-clr-btn","masked","renderLabel","native-select-wrap","native-select-wrap--multiple","getLabel","ul","aria-multiselectable","aria-hidden","hidden","multi-select-box","multi-select-box--open","li","optval","aria-selected","isSelected","select","form","onInvalid","size"],"mappings":"6PAAA,MCeaA,EAAO,MALpBC,YAAAC,+OAMUC,KAAAC,kBAA4B,EAC5BD,KAAAE,cAAwB,EAGxBF,KAAAG,SAAmB,EAEnBH,KAAAI,WAAqB,EAKpBJ,KAAAK,SAAmB,EACnBL,KAAAM,eAAyB,EACzBN,KAAAO,gBAA0B,EAC1BP,KAAAQ,UAAoB,EACpBR,KAAAS,UAAqBC,SAASC,KAAKC,aACnCZ,KAAAa,UAAoB,EAMrBb,KAAAc,KAAe,KAKfd,KAAAe,OAAkD,QAKlDf,KAAAgB,UAAoB,EAKYhB,KAAAiB,MAAgB,EAK/BjB,KAAAkB,UAAoB,EAKrClB,KAAAmB,qBAA+B,EAK/BnB,KAAAoB,kBAAoB,OAKpBpB,KAAAqB,aAAuB,EAkGvBrB,KAAAsB,eAAiBC,UAEvB,GADAvB,KAAKiB,MAAO,GACPjB,KAAKC,mBAAqBD,KAAKK,QAAS,OAE7CL,KAAKwB,YAAYC,KAAK,CAAEC,cAAe1B,KAAK2B,eAC5C,IAAIC,QAAeC,EAAkB7B,KAAK2B,aAAc,QAAQ,GAChE3B,KAAKK,QAAqB,WAAXuB,GAGT5B,KAAA8B,cAAgBP,UACtB,GAAIQ,OAAOC,WAAahC,KAAKmB,qBAE3B,YADAnB,KAAKoB,kBAAkBa,KAAKjC,MAI9B,GADAA,KAAKiB,MAAO,GACPjB,KAAKC,kBAAoBD,KAAKK,QAAS,OAE5CL,KAAKkC,YAAYT,KAAK,CAAEC,cAAe1B,KAAK2B,eAC5C,IAAIC,QAAeC,EAAkB7B,KAAK2B,aAAc,QAAQ,GAChE3B,KAAKK,QAAqB,UAAXuB,GAGT5B,KAAAmC,gBAAkB,KACnBnC,KAAKC,mBACND,KAAKK,QAASL,KAAKsB,iBAClBtB,KAAK8B,kBAGJ9B,KAAAoC,YAAc,KACpBpC,KAAKa,UAAW,EAEZb,KAAKc,OAASd,KAAKI,WAAaJ,KAAKC,kBAAkBD,KAAK8B,gBAChE9B,KAAKqC,UAAUZ,QAGTzB,KAAAsC,eAAiB,KACnBtC,KAAKI,YAITJ,KAAKuC,GAAGC,gBAAgB,YACxBxC,KAAKa,UAAW,EAChBb,KAAKyC,SAAShB,SAIRzB,KAAA0C,gBAAmBC,IACpB3C,KAAKE,eACOyC,EAAG5B,OAAuB6B,QAAQ,cACnC5C,KAAK6C,IAAIC,UAInB9C,KAAA+C,iBAAmBxB,UACzB,IAAKvB,KAAKc,MAAQd,KAAKI,YAAcJ,KAAKC,kBACpCD,KAAKgD,eAAiBhD,KAAKgD,aAAaC,UAAUC,SAAS,SAAW,OAI5E,IAAIC,EAAa,EACbC,EAAYpD,KAAKuC,GAAI,iCAAiCc,SAAQF,EAAa,KAE/EG,aAAatD,KAAKuD,UAClBvD,KAAKwD,WAAY,EACjBxD,KAAKI,WAAY,EACjBJ,KAAKyD,SAAW1B,OAAO2B,YAAWnC,eAAkBvB,KAAK8B,iBAAiBqB,GAC1EnD,KAAKI,WAAY,GAIXJ,KAAA2D,iBAAmB,KACpB3D,KAAKc,OACVwC,aAAatD,KAAKyD,UAClBzD,KAAKwD,WAAY,EACjBxD,KAAKI,WAAY,EAGjBJ,KAAKuD,SAAWxB,OAAO2B,YAAWnC,eAAkBvB,KAAKsB,kBAAkB,KAC3EtB,KAAKI,WAAY,IAGXJ,KAAA4D,YAAc,KACpB5D,KAAKwD,WAAY,EACbxD,KAAKC,iBAAkBD,KAAKmC,kBAC3BnC,KAAKuC,GAAGsB,cAA2B,KAAKf,SAavC9C,KAAA8D,KAAQnB,IACT3C,KAAKK,UAAWL,KAAKI,WACrBJ,KAAKqB,cAGNsB,GAAMA,EAAGoB,gBACPpB,EAAGoB,gBAAkB/D,KAAKuC,IAAMI,EAAGoB,gBAAkB/D,KAAK6C,KACzD7C,KAAKgE,gBAAiBrB,EAAGoB,gBAC1B/D,KAAK2B,aAAasC,MAAM,CAAEC,eAAe,KAK/ClE,KAAK6C,IAAIsB,oBAAoB,WAAYnE,KAAK8D,MAC9C9D,KAAK2B,aAAawC,oBAAoB,WAAYnE,KAAK8D,MACvD/B,OAAOoC,oBAAoB,OAAQnE,KAAK8D,MAExC9D,KAAKG,SAAU,EAEfH,KAAKiB,MAAO,EACP0B,EAAGoB,eAAeL,YAAW,KAAQ1D,KAAKuC,GAAG0B,MAAM,CAAEC,eAAe,MAAW,OAlLtFpE,iBACOE,KAAK6C,KACV7C,KAAK6C,IAAIoB,QAOXnE,aACEE,KAAKiB,KAAOjB,KAAK8B,gBAAkB9B,KAAKsB,iBAO1CxB,gBACE,GAAKE,KAAKC,iBAEV,GAAKD,KAAKK,SAgBR,GAJAL,KAAKG,SAAU,GAIVH,KAAKwD,UAAW,CACnB,MAAMY,EAAU,IAAKrC,OAAesC,sBACjCC,IACKA,EAAK,GAAGC,mBAAmBC,IAAM,GACnCxE,KAAK2B,aAAa8C,eAAe,CAC/BC,SAAU,WAGdN,EAAQO,eAEV,CAAEC,UAAW,IAEfR,EAAQS,QAAQ7E,KAAK2B,cACrB3B,KAAK2B,aAAasC,MAAM,CAAEC,eAAe,IAEzClE,KAAK6C,IAAIiC,iBAAiB,WAAY9E,KAAK8D,MAC3C9D,KAAK2B,aAAamD,iBAAiB,WAAY9E,KAAK8D,MACpD/B,OAAO+C,iBAAiB,OAAQ9E,KAAK8D,MAErC9D,KAAKuC,GAAGwC,UAAY,EACpB/E,KAAKgF,SAASvD,KAAK,CAAEC,cAAe1B,KAAK2B,qBAjCtC3B,KAAKwD,YACRxD,KAAK6C,IAAIsB,oBAAoB,WAAYnE,KAAK8D,MAC9C9D,KAAK2B,aAAawC,oBAAoB,WAAYnE,KAAK8D,OAEzDJ,YAAW,KACJ1D,KAAKwD,WAAcxD,KAAKG,SAASH,KAAK6C,IAAIoB,MAAM,CAAEC,eAAe,IACtElE,KAAKiF,UAAUxD,KAAK,CAAEC,cAAe1B,KAAK2B,iBACzC,IAuHC7B,gBAAgByC,GACtB,IAAI2C,EAAQ3C,EAAGK,QAAQ,iBAGvB,OAFAsC,EAAQA,IAAU3C,EAAKA,EAAG4C,cAAcvC,QAAQ,iBAAmBsC,IAE9DA,IACDA,IAAUlF,KAAKuC,IACZvC,KAAKgE,gBAAgBkB,IA0B9BpF,oBACE,IAAIsF,EAAepF,KAAKuC,GAAGsB,cAAc,sBACzC7D,KAAKC,mBAAqBmF,EAE1B,IAAIC,EAAOC,EAAkBtF,KAAKuC,GAAI,aAAa,GACnDvC,KAAKE,eAAiBmF,EAElBA,IACFrF,KAAKc,KAAQuE,EAA2BvE,KAAQuE,EAA2BvE,KAAO,KAClFd,KAAK6C,IAAMwC,EACPrF,KAAKC,kBAAkBD,KAAK6C,IAAIiC,iBAAiB,QAAS9E,KAAKmC,iBAEnEnC,KAAK6C,IAAIiC,iBAAiB,QAAS9E,KAAKoC,aACxCpC,KAAK6C,IAAIiC,iBAAiB,OAAQ9E,KAAKsC,iBAI3CxC,oBACEE,KAAKM,eAAgB,EACrBN,KAAKO,gBAAiB,EACtBP,KAAKgD,aAAehD,KAAKuC,GAAGK,QAAQ,mBAEpC5C,KAAKO,iBAAmBP,KAAKuC,GAAGK,QAAQ,oBACxC5C,KAAKQ,WAAaR,KAAKuC,GAAGK,QAAQ,aAClC5C,KAAKM,cAAgBN,KAAKuC,GAAG4C,gBAAkBnF,KAAKgD,gBAAkBhD,KAAKuC,GAAGK,QAAQ,eAGxF9C,SACE,OACEyF,EAACC,EAAI,CACHC,MAAO,CACLC,gBAAiB1F,KAAKC,iBACtB0F,iBAAkB3F,KAAKiB,KACvBC,SAAYlB,KAAKkB,SACjB0E,YAAa5F,KAAKa,SAClBG,SAAYhB,KAAKgB,SACjB6E,kBAAmB7F,KAAKM,cACxBwF,mBAAoB9F,KAAKO,eACzBwF,YAAa/F,KAAKQ,SAClBwF,OAAUhG,KAAKS,UAEjBwF,OAAQjG,KAAKsC,eACb4D,IAAiD,QAA3ClG,KAAKuC,GAAG4D,cAA2BD,IAAgB,MAAQ,KACjEE,aAAcpG,KAAK+C,iBACnBsD,aAAcrG,KAAK2D,iBACnB2C,QAAStG,KAAK0C,iBAEd6C,EAAA,MAAA,CAAKE,MAAO,CACVc,YAAY,EACZZ,iBAAkB3F,KAAKiB,KACvBC,SAAYlB,KAAKkB,WAEflB,KAAKc,OAASd,KAAKE,eAAiBF,KAAKgB,UACzCuE,EAAA,IAAA,CACExE,OAAQf,KAAKe,OACbyF,IAAKC,GAAKzG,KAAK6C,IAAM4D,EACrB3F,KAAMd,KAAKc,KACX4F,QAAS1G,KAAKoC,aAEdmD,EAAA,OAAA,CAAMoB,KAAK,eACXpB,EAAA,OAAA,CAAME,MAAM,QAAOF,EAAA,OAAA,OACnBA,EAAA,OAAA,CAAMoB,KAAK,gBAGX3G,KAAKE,eAAiBF,KAAKc,MAASd,KAAKgB,WAC3CuE,EAAA,SAAA,CACEiB,IAAK3D,GAAO7C,KAAK6C,IAAMA,EACvByD,QAAStG,KAAK4D,YACd8C,QAAS1G,KAAKoC,YACdpB,SAAUhB,KAAKgB,UAEfuE,EAAA,OAAA,CAAMoB,KAAK,eACXpB,EAAA,OAAA,CAAME,MAAM,QAAOF,EAAA,OAAA,OACnBA,EAAA,OAAA,CAAMoB,KAAK,cAGb3G,KAAKE,eAAiBF,KAAKgB,UAC3BuE,EAAA,MAAA,CAAKE,MAAM,QACTF,EAAA,OAAA,CAAMoB,KAAK,eACXpB,EAAA,OAAA,MACAA,EAAA,OAAA,CAAMoB,KAAK,cAGb3G,KAAKC,mBAAqBD,KAAKgB,UAC/BuE,EAAA,MAAA,CAAKE,MAAM,iBAAiBe,IAAKI,GAAO5G,KAAK2B,aAAeiF,EAAKC,SAAS,MACxEtB,EAAA,MAAA,CAAKE,MAAM,0BACTF,EAAA,OAAA,CAAMoB,KAAK,eAEbpB,EAAA,MAAA,CAAKE,MAAM,sBAAsBa,QAAStG,KAAKsB,kID3X1C,m8jBEAnB,MCoBawF,EAAM,MALnBhH,YAAAC,gTAUUC,KAAA+G,UAAkC,GAClC/G,KAAAgH,WAAqC,GAKrChH,KAAAiH,SAAW,eAAeC,IAC1BlH,KAAAmH,KAAe,EACfnH,KAAAoH,aAAuB,EACvBpH,KAAAqH,eAAyB,GACzBrH,KAAAsH,YAAsB,EACtBtH,KAAAuH,QAAkB,EAEjBvH,KAAAwH,gBAA0B,EAC1BxH,KAAAyH,UAAY,GACZzH,KAAA0H,cAAe,EACf1H,KAAA2H,aAAuB,GACvB3H,KAAAa,UAAW,EACXb,KAAA4H,UAAW,EACX5H,KAAAS,SAAoB,oBAAqBC,SACzCV,KAAA6H,cAAwB,EACxB7H,KAAA8H,eAAyB,EACzB9H,KAAA+H,aAAuB,EAQQ/H,KAAAgI,SAAU,EAW1ChI,KAAAiI,WAAY,EAKKjI,KAAAgB,UAAW,EAKXhB,KAAAkI,WAAsD,SAKtDlI,KAAAmI,iBAAkB,EAUnCnI,KAAAoI,WAAsB,EAKtBpI,KAAAqI,YAAsB,EAKtBrI,KAAAsI,UAAqB,EAKrBtI,KAAA2G,KAAe3G,KAAKiH,SAAW,QAU/BjH,KAAAuI,UAAW,EAKXvI,KAAAwI,UAAW,EAyBXxI,KAAAyI,mBAA6B,EAKZzI,KAAA0I,MAAwC1I,KAAKsI,SAAW,GAAK,GAK7DtI,KAAA2I,QAA6D,GAK9E3I,KAAA4I,aAAc,EAMd5I,KAAA6I,MAAO,EAKP7I,KAAA8I,SAAW,EAKX9I,KAAA+I,QAAS,EA2OT/I,KAAAgJ,eAAiB,KACvBhJ,KAAKiJ,aAAaC,kBAAkB,IAGhClJ,KAAKwI,WAAaxI,KAAKmJ,iBAAiB9F,QAC1CrD,KAAKiJ,aAAaC,kBAAkB,+BAC7B,IAELlJ,KAAKmJ,iBAAiB9F,QAAWrD,KAAKyI,mBAAsBzI,KAAKoJ,gBAIjEpJ,KAAKqJ,KAAOrJ,KAAKmJ,iBAAiB9F,OAASrD,KAAKqJ,KAClDrJ,KAAKiJ,aAAaC,kBAAkB,cAAclJ,KAAKqJ,4BAChD,MAELrJ,KAAKsJ,KAAOtJ,KAAKmJ,iBAAiB9F,OAASrD,KAAKsJ,OAClDtJ,KAAKiJ,aAAaC,kBAAkB,gCAAgClJ,KAAKsJ,gBAClE,IATPtJ,KAAKiJ,aAAaC,kBAAkB,2CAC7B,IAaHlJ,KAAAuJ,qBAAwB5G,IACN,oBAApB3C,KAAKkI,aAAkClI,KAAKkI,WAAa,SAE7DlI,KAAKgI,SAAU,EACfhI,KAAK0H,cAAe,EACpB1H,KAAK2H,aAAe,GAEf3H,KAAKiJ,aAAaO,SAASC,QAC9BzJ,KAAK2H,aAAe3H,KAAKiJ,aAAaS,kBACtC1J,KAAKgI,SAAU,EACfhI,KAAK0H,cAAe,GAEtB1H,KAAK2J,aAAalI,KAAK,CAACmI,SAAU5J,KAAKgI,QAASL,aAAc3H,KAAK2H,aAAckC,cAAelH,KAG1F3C,KAAA8J,cAAiBnH,IACvB3C,KAAKgI,SAAU,EAES,WAApBhI,KAAKkI,aAAyBlI,KAAKgI,QAAUhI,KAAK0H,aAAe1H,KAAKgJ,kBACtEhJ,KAAKmI,iBAAiBxF,EAAGoH,iBAE7BrG,YAAWsG,IAAKhK,KAAKuJ,qBAAqB5G,IAAK,KAgJzC3C,KAAAiK,SAAYtH,IACb3C,KAAKuI,UAAavI,KAAKgB,WAAY2B,IACtCA,EAAGoH,iBACHpH,EAAGuH,mBAELlK,KAAK0I,MAAQ1I,KAAKmJ,kBAGZnJ,KAAAiG,OAAS,KACXjG,KAAKsI,WACPtI,KAAKoH,aAAe,EACpB1G,SAASyD,oBAAoB,UAAWnE,KAAKmK,uBAC7CzJ,SAASyD,oBAAoB,YAAanE,KAAKoK,0BAEjDpK,KAAKa,UAAW,EAEhB6C,YAAW,KACe,UAApB1D,KAAKkI,YAA2BlI,KAAK4H,UAAa5H,KAAKa,UAAUb,KAAKuJ,yBACzE,IACHvJ,KAAKyC,SAAShB,QAGRzB,KAAA0G,QAAU,KACZ1G,KAAKsI,WACPtI,KAAKoH,aAAe,EACpB1G,SAASoE,iBAAiB,UAAW9E,KAAKmK,uBAC1CzJ,SAASoE,iBAAiB,YAAa9E,KAAKoK,yBAC5CpK,KAAKqK,YAGPrK,KAAKa,UAAW,EAChBb,KAAKqC,UAAUZ,QAGTzB,KAAAsK,iBAAoB3H,IAM1B,GALI3C,KAAK4I,cAAgB5I,KAAKuI,WAAavI,KAAKgB,UAAY2B,IAC1DA,EAAGoH,iBACHpH,EAAGuH,mBAGDlK,KAAKsI,SAAU,CACjBtI,KAAK0I,MAAQ,GACb,IAAIC,EAAU3I,KAAKiJ,aAAasB,iBAAiB,UAC7C5B,EAAQtF,QAAQsF,EAAQ6B,SAAQC,GAAKA,EAAEC,WAC3C1K,KAAKwH,iBAAmB,EACxBxH,KAAK2K,oBACA3K,KAAK0I,MAAQ,GAEpB1I,KAAKiK,YAGCjK,KAAAsG,QAAU,KAChBtG,KAAK4K,WACL5K,KAAKqK,YAKCrK,KAAA6K,iBAAmB,KACrB7K,KAAKyI,oBACTzI,KAAKqH,eAAiB,GACtBrH,KAAK2K,iBAGC3K,KAAA8K,YAAenI,IAErB3C,KAAK+K,QADKpI,EAAG5B,OACMiK,QAAQtC,OAGrB1I,KAAAiL,UAAatI,IACnB3C,KAAK+K,QAAU,KACfpI,EAAGoH,kBAGG/J,KAAAkL,YAAevI,IACrB,IAAIwI,EAAMxI,EAAG5B,OACTqK,EAAkBD,EAAIH,SAAWG,EAAIH,QAAQtC,MAAQyC,EAAIH,QAAQtC,MAAQ,KAE7E,IAAK0C,GAAWpL,KAAK+K,UAAYK,IAAYpL,KAAK0I,MAAM2C,SAASrL,KAAK+K,SAEpE,YADApI,EAAGoH,iBAIL,IAAIuB,EAAKtL,KAAK0I,MAAM6C,QAAQH,GACxBI,EAAOxL,KAAK0I,MAAM6C,QAAQvL,KAAK+K,SAC/BU,EAAUzL,KAAK0I,MACfgD,EAASD,EAAOH,GAEpBG,EAAOH,GAAMG,EAAOD,GACpBC,EAAOD,GAAQE,EACf1L,KAAK0I,MAAQ,IAAI+C,IAGXzL,KAAA2L,aAAgBhJ,IACtB3C,KAAKqH,eAAiB1E,EAAG5B,OAAO2H,MAChC1I,KAAK2K,eACL3K,KAAKqK,WACLrK,KAAK4L,iBAAiBnK,KAAK,CAAEiH,MAAO/F,EAAG5B,OAAO2H,SAOxC1I,KAAA6L,WAAclJ,IACpB,IAAImJ,EAAY9L,KAAK+L,eACjBD,GAAWA,EAAU7I,UAAUyH,OAAO,aACzC/H,EAAG5B,OAAuBkC,UAAU+I,IAAI,cAGnChM,KAAAiM,YAAc,KACpBvI,YAAWsG,KACJhK,KAAKsI,WAAYtI,KAAKa,UAC3Bb,KAAK4K,aACJ,KAGG5K,KAAAoK,wBAA2BzH,IACjC,MAAM5B,EAAS4B,EAAG5B,OACdmL,EAAelM,KAAKuC,GAAG4J,QAAQC,cAAerL,KAAYf,KAAKuC,KACjEvC,KAAK4H,UAAW,EAChB5H,KAAKiG,WAIDjG,KAAAmK,sBAAyBxH,IAC/B,GAAK3C,KAAKsI,SAAV,CAEA,IAAKtI,KAAKqH,eAAgB,CACxB,IAAIgF,EAEJ,OAAQ1J,EAAG2J,KACT,IAAK,YACH,IAAItM,KAAKuM,WAAWC,uBAEf,MADHH,EAAMrM,KAAKuM,WAAWC,uBAGxBxM,KAAKyM,YAAYJ,EAAGrB,QAAQtC,OAAS,MACrC,MAEF,IAAK,SACH,IAAI1I,KAAKuM,WAAWG,mBAEf,MADHL,EAAMrM,KAAKuM,WAAWG,mBAGxB1M,KAAKyM,YAAYJ,EAAGrB,QAAQtC,OAAS,MACrC,MAEF,IAAK,YACL,IAAK,aACH,IAAK1I,KAAK0I,MAAMrF,OAAQ,MAET,cAAXV,EAAG2J,KAAuBtM,KAAKuM,WAAWI,iBAAiB3M,KAAKwH,kBACrD,eAAX7E,EAAG2J,KAAwBtM,KAAKuM,WAAWK,aAAa5M,KAAKwH,kBAEjE9D,YAAW,KAAQ1D,KAAKuM,WAAWtI,UAAW,IAC9CtB,EAAGoH,kBAwBT,GAlBI/J,KAAKa,WAAab,KAAK4H,UAAuB,cAAXjF,EAAG2J,MACxCtM,KAAKqK,WACLrK,KAAKoH,aAAe,GAIlBpH,KAAKa,UAAuB,QAAX8B,EAAG2J,KACtB5I,YAAW,KACT,GAAKhD,SAASmM,eACZX,EAAelM,KAAKuC,GAAG4J,QAAQC,cAAe1L,SAASmM,iBAAmB7M,KAAKuC,GAG/E,OAFAvC,KAAK4H,UAAW,OAChB5H,KAAKiG,YAOPjG,KAAK4H,SAAU,CACjB,MAAMkF,EAAe9M,KAAK+L,eAC1B,IAAIgB,EAAY/M,KAAK+G,UAAUwE,QAAQuB,IAAiB9M,KAAKoH,YAE7D,OAAQzE,EAAG2J,KACT,IAAK,YACL,IAAK,UAMH,GALA3J,EAAGoH,iBAEY,cAAXpH,EAAG2J,IAAqBS,IACR,YAAXpK,EAAG2J,KAAmBS,IAE3BA,EAAY,EAGd,OAFA/M,KAAKoH,YAAc,OACnBpH,KAAKuM,WAAWtI,QAIlB,IAAI+I,EAAahN,KAAK+G,UAAUgG,GAAaA,EAAY/M,KAAKoH,YAK9D,YAJA1D,YAAW,KACT1D,KAAK+G,UAAUiG,GAAY/I,QAC3BjE,KAAKoH,YAAc4F,IAClB,IAEL,IAAK,QACL,IAAK,IAKH,YAJIhN,KAAK+G,UAAU/G,KAAKoH,eACtBpH,KAAKiN,SAASjN,KAAK+G,UAAU/G,KAAKoH,aAAa4D,QAAQtC,OACvD/F,EAAGoH,mBAGP,IAAK,SAEH,YADA/J,KAAK4H,UAAW,IAKlB5H,KAAKoH,aAAe,GAAGzE,EAAGoH,mBA7nBtBjK,kBACRE,KAAK4L,iBAAmBsB,EAAclN,KAAK4L,iBAAkB5L,KAAK8I,UAU1DhJ,iBACJE,KAAKuH,SACLvH,KAAKgI,UAAShI,KAAK0H,aAAe1H,KAAKgI,SAAU,GAErDhI,KAAKgJ,iBACmB,UAApBhJ,KAAKkI,YACTlI,KAAKuJ,wBAOGzJ,eACHE,KAAKsH,aAENtH,KAAKsI,UACmB,iBAAftI,KAAK0I,OAAwB1I,KAAK0I,MAAMrF,SAAQrD,KAAK0I,MAAQ1I,KAAK0I,MAAMyE,MAAM,OACtE,OAAfnN,KAAK0I,OAAyC,iBAAf1I,KAAK0I,QAAuB1I,KAAK0I,MAAMrF,UAASrD,KAAK0I,MAAQ,IAE5F1I,KAAKwH,gBAAkBxH,KAAK0I,MAAMrF,OAAS,IAAGrD,KAAKwH,gBAAkBxH,KAAK0I,MAAMrF,OAAS,IAC9D,iBAAfrD,KAAK0I,OAAsB1I,KAAK0I,OAAS1I,KAAK0I,MAAM,KAAI1I,KAAK0I,MAAQ1I,KAAK0I,MAAM,IAElG1I,KAAKoN,iBACLpN,KAAK2K,eACLjH,YAAWsG,IAAKhK,KAAKqN,kBAAkB,IACvCrN,KAAKsN,WAAW7L,KAAK,CAAEiH,MAAO1I,KAAK0I,SAM3B5I,iBACRE,KAAK2K,eACD3K,KAAKa,UAAUb,KAAKqK,WAOhBvK,cACRE,KAAKuN,cAEDvN,KAAKsI,SAAUtI,KAAKwN,aACfxN,KAAKyN,SAASzN,KAAKyN,QAAQC,UAG9B5N,aACN4D,YAAW,KACT1D,KAAK2K,eACL3K,KAAKyN,QAAU,IAAIE,EAAQ3N,KAAK4N,WAAY5N,KAAK6N,UAAW,CAC1DC,UAAW,eACXC,SAAU,EACVC,SAAU,EACVC,gBAAiB,KACVjO,KAAK4H,WACR5H,KAAK6N,UAAUK,UAAY,QAIhC,IAILpO,iBACME,KAAK4H,SAAU5H,KAAKyN,QAAQU,OAC3BnO,KAAKyN,QAAQW,OA+CnBtO,qBAAqBuO,GAEnB,OADIA,GAAerO,KAAKuJ,uBACjB,CACLK,SAAU5J,KAAKgI,QACfL,aAAc3H,KAAK2H,cASxB7H,iBACME,KAAKiJ,eAAiBjJ,KAAKsI,SAAUtI,KAAKiJ,aAAahF,QAClDjE,KAAKuM,YAAYvM,KAAKuM,WAAWtI,QAO5CnE,mBACE,OAAOwO,QAAQC,QAAQvO,KAAKiJ,cAQ9BnJ,gBAAgB0O,GACVxO,KAAKiJ,eACPjJ,KAAKiJ,aAAaC,kBAAkBsF,GACpCxO,KAAKiJ,aAAawF,kBASd3O,eACDE,KAAKsI,WAEVtI,KAAKyH,UAAYzH,KAAK2I,QAAQ+F,QAAOC,IACnC,IAAIC,EAAwB,iBAARD,EAAmBA,EAAMA,EAAW,MACpDE,EAA2B,iBAARF,EAAmBA,EAAOA,EAAW,OAAKA,EAAW,MAE5E,QAAKC,IACI5O,KAAK0I,MAAwB2C,SAASuD,MAAa5O,KAAKuM,YAAcsC,EAAUzC,cAAcb,QAAQvL,KAAKqH,eAAe+E,gBAAkB,OAIjJtM,iBACN,MAAMgP,EAAM9O,KAAKiJ,aACjB,OAAK6F,EAEA9O,KAAKsI,SAEDyG,MAAMvD,KAAKsD,EAAInG,SACnBqG,KAAIL,IACH,GAAIA,EAAIzN,UAAYyN,EAAIM,aAAa,SAAU,OAAON,EAAIjG,SAJrCoG,EAAInG,QAAQmG,EAAII,gBAAkBJ,EAAInG,QAAQmG,EAAII,eAAeD,aAAa,SAAWH,EAAInG,QAAQmG,EAAII,eAAexG,MAAQ,GAF1I,GAWX5I,iBACN,MAAMgP,EAAM9O,KAAKiJ,aACjB,IAAK6F,EAAK,OAAO,KACZ9O,KAAKsI,SAERyG,MAAMvD,KAAKxL,KAAKiJ,aAAaN,SAC1B+F,QAAOC,GACoB,iBAAf3O,KAAK0I,MAA2BiG,EAAIjG,QAAU1I,KAAK0I,MAClD1I,KAAK0I,MAAMyG,MAAKC,GACP,iBAARA,EAAyBA,IAAQpP,KAAK0I,MACxC0G,EAAW,MAAUA,IAAQA,EAAW,WAA5C,MAENJ,KAAIL,IACLA,EAAIzN,UAAW,KAVD4N,EAAIpG,MAAQ1I,KAAK0I,MAe/B5I,gBAEN,IADYE,KAAKiJ,aACP,OAAO,KAEjB,MAAM/H,EAAWlB,KAAKiJ,aAAasB,iBAAiB,kBAC9C8E,EAASN,MAAMvD,KAAKtK,GAAU8N,KAAKzM,GAA0BA,EAAGmG,OAAS,OAE/E,OAAI1I,KAAKsI,SACA+G,EAAOC,QAAO,CAACC,EAAaC,MAC5BD,KACIvP,KAAK2I,QAAQwG,MAAKR,GACzBA,EAAW,MAAKA,EAAW,QAAMa,EAAiBb,IAAQa,MAE3D,GAEIxP,KAAK2I,QAAQwG,MAAKR,GACvBA,EAAW,MAAKA,EAAW,QAAMU,EAAO,GAAOV,IAAQU,EAAO,KAoD5DvP,WACDE,KAAKsI,WAGRtI,KAAK4H,aAFF5H,KAAKyH,UAAUpE,QAAarD,KAAKqH,eAAehE,QAAUrD,KAAKyI,oBAC3DzI,KAAKqJ,OAAQrJ,KAAKqJ,KAAOrJ,KAAK0I,MAAMrF,OAASrD,KAAKqJ,OAKrDvJ,SAAS4I,GACV1I,KAAKsI,WACNtI,KAAK0I,OAAS1I,KAAK0I,MAAMrF,QAAUrD,KAAK0I,MAAM2C,SAAS3C,IACvD1I,KAAKqJ,KAAOrJ,KAAK0I,MAAMrF,SAAWrD,KAAKqJ,MAE3CrJ,KAAKwH,kBACLxH,KAAK0I,MAAQ,IAAI1I,KAAK0I,MAAM+G,MAAM,EAAGzP,KAAKwH,iBAAkBkB,KAAU1I,KAAK0I,MAAM+G,MAAMzP,KAAKwH,kBAE5FxH,KAAKqH,eAAiB,GAEtBrH,KAAK2K,eAGL3K,KAAK4K,WACL5K,KAAKqK,aAGCvK,YAAY8O,GACb5O,KAAKsI,UAAatI,KAAK0I,MAAMrF,SAE7BuL,IAAQA,EAAS5O,KAAK0I,MAAM1I,KAAK0I,MAAMrF,OAAS,IACrDrD,KAAK0I,MAAS1I,KAAK0I,MAAwBgG,QAAOU,GAAOA,IAAQR,IAE7D5O,KAAKwH,gBAAkBxH,KAAK0I,MAAMrF,OAAS,IAAGrD,KAAKwH,gBAAkBxH,KAAK0I,MAAMrF,OAAS,GAG7FrD,KAAK4K,WACL5K,KAAKqK,YAGCvK,cACNE,KAAKsH,YAAa,EACdtH,KAAKsI,UACoDtI,KAAK0I,MAAtC,iBAAf1I,KAAK0I,OAAwB1I,KAAK0I,MAAMrF,OAAqBrD,KAAK0I,MAAMyE,MAAM,KACvE,GAElBnN,KAAKwH,gBAAkBkI,KAAKrG,IAAIrJ,KAAK0I,MAAMrF,OAAS,EAAG,IACxB,iBAAfrD,KAAK0I,OAAsB1I,KAAK0I,OAAS1I,KAAK0I,MAAM,KAAI1I,KAAK0I,MAAQ1I,KAAK0I,MAAM,IAClG1I,KAAKsH,YAAa,EAGZxH,WAAW4I,GACjB,GAAI1I,KAAKsI,SAAU,OAAQtI,KAAK0I,MAAwByG,MAAKC,GAAOA,IAAQ1G,IAItE5I,SAASsP,GACf,IAAIO,EAAW3P,KAAK2I,QAAQwG,MAAKR,GACxBA,EAAW,MAAKA,EAAW,QAAMS,EAAQT,IAAQS,IAE1D,OAAKO,EACEA,EAAgB,MAAIA,EAAgB,MAAIA,EADzB,KAIhB7P,sBACKE,KAAK4P,GAAK,IAAIC,kBAAkBC,GAA0B9P,KAAK+P,sBAAsBD,MAC7FjL,QAAQ7E,KAAKuC,GAAI,CAAEyN,WAAW,EAAMC,SAAS,IAG1CnQ,sBAAsBoQ,GAM5B,GAJAlQ,KAAK6H,eAAiB7H,KAAKuC,GAAGgI,iBAAiB,kBAAkBlH,OACjErD,KAAK8H,gBAAkB9H,KAAKuC,GAAGsB,cAAc,mBAC7C7D,KAAK+H,cAAgB/H,KAAKuC,GAAGsB,cAAc,kBAEtCqM,EAAW,CAEd,IAAIC,EAAiBnQ,KAAKuC,GAAGsB,cAAc,yCACvCsM,GACFpB,MAAMvD,KAAK2E,EAAeC,YACvB1B,QAAO2B,GAAQA,EAAKC,WAAaD,EAAKE,YAAYvQ,OAClDgP,KAAIqB,GAAQrQ,KAAKqQ,EAAKE,UAAYF,EAAKG,YAI5C,IAAIC,EAAgBzQ,KAAKuC,GAAGsB,cAAc,wCACtC4M,IAAezQ,KAAK0Q,MAAQ1Q,KAAK0Q,OAASD,EAAcE,WAG5D,IAAIC,EAAa5Q,KAAKuC,GAAGgI,iBAAiB,yCAG1C,GADAvK,KAAKsH,YAAa,EACdsJ,GAAcA,EAAWvN,OAAQ,CACnC,IAAIsF,EAAU,GACdiI,EAAWpG,SAASqG,IAClBlI,EAAQmI,KAAK,CACXJ,MAAOG,EAAOH,OAASG,EAAOE,UAC9BrI,MAAOmI,EAAOnI,QAEXmI,EAAO3P,UAAa2P,EAAOnI,QAE5B1I,KAAKsI,SAAWtI,KAAK0I,MAAwBoI,KAAKD,EAAOnI,OACxD1I,KAAK0I,MAAQmI,EAAOnI,UAE3B1I,KAAK2I,QAAUA,EAGjB,GAAIiI,EAAWvN,QAAUoN,GAAiBN,EAAgB,CAExD,IAAIa,EAAWhR,KAAKuC,GAAGgI,iBAAiB,mBACpCyG,GAAUA,EAASxG,SAAQC,GAAKA,EAAEwG,WAAWC,YAAYzG,KAG/DzK,KAAKsH,YAAa,EAGpB,GAAI4I,IACDnB,MAAMvD,KAAK0E,EAAU,GAAGiB,YAAYhC,MAAKiC,GAAwC,uBAAhCA,EAAKb,SAASnE,gBAChE,OAGF,IAAIiF,EAAWrR,KAAKuC,GAAGgI,iBAAiB,sBAExC,GAAI8G,GAAYA,EAAShO,OAAQ,CAC/B,IAAIsF,EAAU,GACd0I,EAAS7G,SAASqG,IAChBlI,EAAQmI,KAAK,CACXJ,MAAOG,EAAOH,OAASG,EAAOE,UAC9BrI,MAAOmI,EAAOnI,QAEXmI,EAAO3P,UAAa2P,EAAOnI,QAE5B1I,KAAKsI,SAAWtI,KAAK0I,MAAwBoI,KAAKD,EAAOnI,OACxD1I,KAAK0I,MAAQmI,EAAOnI,UAE3B1I,KAAK2I,QAAUA,EAGjB3I,KAAK2K,eAyGC7K,eACN,OAAOE,KAAK6N,UAAUhK,cAAc,cAyHtC/D,oBACEE,KAAKsR,kBAILtR,KAAKuC,GAAGgP,cAAc,IAAIC,YAAY,cAAe,CACnDC,OAAQzR,KAAKuC,MAKjBzC,uBACEY,SAAS6Q,cAAc,IAAIC,YAAY,gBAAiB,CACtDC,OAAQzR,KAAKuC,MAIXvC,KAAK4P,IAAI5P,KAAK4P,GAAGjL,aACjB3E,KAAKyN,SAASzN,KAAKyN,QAAQC,UAGjC5N,mBACEE,KAAK0R,qBACD1R,KAAKsI,UAAUtI,KAAKwN,aACxBxN,KAAKgJ,iBAGPlJ,oBACEE,KAAKuN,cACLvN,KAAK+P,wBACL/P,KAAKuH,QAAS,EAGRzH,YAAY6R,EAAiBC,GACnC,IAAIC,EAAuB,GAM3B,GAJEA,EADe,UAAbD,EACQ,CAAEE,wBAAwB,GAE1B,CAAEpB,OAAS,EAAMqB,gBAAiB/R,KAAKoI,WAE9CpI,KAAK0Q,OAAU1Q,KAAK6H,aAEzB,OAAOtC,EAAA,QAAA,CAAOE,MAAOoM,EAASG,QAAShS,KAAKiH,SAAUgL,GAAIN,GACpD3R,KAAU,OAAKA,KAAK0Q,OACnB1Q,KAAK0Q,SAAW1Q,KAAK6H,cAAiBtC,EAAA,OAAA,CAAMoB,KAAK,WAI1D7G,SACE,MAAM6R,EAAU3R,KAAKiH,SAAW,OAC1BiL,EAASlS,KAAKmI,iBAAmBnI,KAAK8H,cAAgB9H,KAAKiH,SAAW,UAAY,GAClFkL,EAASnS,KAAKiH,SAAW,QAE/BjH,KAAKmH,IAAkD,QAA3CnH,KAAKuC,GAAG4D,cAA2BD,IAC/ClG,KAAK+G,UAAY,GACjB/G,KAAKgH,WAAa,IAEdhH,KAAKoS,aAAiBpS,KAAK2I,QAAQ,IAAM3I,KAAK2I,QAAQ,GAAU,QAAM3I,KAAKoS,aAC7EpS,KAAK2I,QAAQ0J,QAAQ,CAAE3B,MAAO1Q,KAAKoS,YAAa1J,MAAO,KAGzD,IAEI4J,EAFAC,EAAavS,KAAK4H,SAGtB,GAAI5H,KAAKsI,SAAU,CACjB,IAAIkK,EAAQjN,EAAA,QAAA,CAAOE,MAAM,cACvBwM,GAAIjS,KAAKiH,SACTT,IAAKgM,GAASxS,KAAKuM,WAAaiG,EAChCxR,SAAUhB,KAAKgB,SACfyR,UAAWzS,KAAKiI,UAChByK,aAAa,MACbC,QAAS3S,KAAK2L,aACdjD,MAAO1I,KAAKqH,eACZuL,aAAc5S,KAAKsG,QACnBuM,YAAa7S,KAAKsG,QAClBI,QAAS1G,KAAK0G,QACdT,OAAQjG,KAAK6K,iBACbuH,aAAapS,KAAKoS,aAAgBpS,KAAKqI,YAAerI,KAAK0I,MAAMrF,OAA4B,GAAnBrD,KAAKoS,YAC/EU,KAAM9S,KAAKsI,SAAW,WAAa,GAAEyK,kBACpBpB,EAAU,IAAMO,EAAMc,gBACxBb,EAAMc,gBACNV,EAAa,OAAS,QAAOW,gBAC7BlT,KAAKwI,SAAW,OAAS,QAAO2K,oBAC7B,SAIlBb,EADItS,KAAK0I,MAAMrF,OACArD,KAAK0I,MAAwBsG,KAAI,CAACI,EAAKgE,KACpD,IAAI1C,EAAQ1Q,KAAK2I,QAAQwG,MAAKR,GACrBA,EAAW,MAAKA,EAAW,QAAMS,EAAQT,IAAQS,IAE1DsB,EAAQA,GAASA,EAAa,MAAIA,EAAa,MAAItB,EAEnD,IAAIiE,EAAW9N,EAAA,OAAA,CACbuF,YAAa9K,KAAK8K,YAClBI,YAAalL,KAAKkL,YAClBD,UAAWjL,KAAKiL,UAChBqI,WAAS,EAAAC,aACGnE,EACZ5I,IAAKgN,GAAQxT,KAAKgH,WAAW8J,KAAK0C,GAClC/N,MAAM,eAENF,EAAA,OAAA,KAAOmL,GACPnL,EAAA,SAAA,CACEE,MAAM,qBACNgO,KAAK,SACL5M,SAAS,KACT6M,WAAY,KAAQ1T,KAAKyM,YAAY2C,IACrCuE,UAAW,KAAQ3T,KAAKyM,YAAY2C,KACrC7J,EAAA,YAAA,CAAWoB,KAAK,kBAKnB,OAFU,IAANyM,GAAWpT,KAAKwH,gBAAkB,EAAG6L,EAAW,CAACb,EAAOa,GACnDD,IAAMpT,KAAKwH,kBAAiB6L,EAAW,CAACA,EAAUb,IAC3D,KAEiBA,EAGvB,OACEjN,EAACC,EAAI,CACHiO,KAAMzT,KAAKsI,SAAW,kBAAoB,aAAYsL,gBACvC5T,KAAKgB,SAAW,OAAS,KACxCyE,MAAKoO,OAAAC,OAAAD,OAAAC,OAAA,GACAC,EAAmB/T,KAAKgU,QAAM,CACjCC,cAAgBjU,KAAK0I,MAAMrF,UAAYrD,KAAKqH,eAAehE,OAC3DuC,YAAa5F,KAAKa,SAClBqT,aAAclU,KAAKgI,QACnBmM,YAA6B,OAAfnU,KAAK0Q,QAAmB1Q,KAAKqI,WAC3C+L,kBAAmC,OAAfpU,KAAK0Q,OAAkB1Q,KAAKqI,WAChDlB,IAAOnH,KAAKmH,IACZkN,eAAgBrU,KAAKsI,SACrBgM,kBAAmBtU,KAAK4H,SACxB2M,cAAevU,KAAK4I,YACpB4L,OAAUxU,KAAK6I,KACf7C,OAAUhG,KAAKS,WAEjB6F,QAAStG,KAAKiM,cAEXjM,KAAKqI,YACNrI,KAAKyU,YAAY9C,GAEnBpM,EAAA,MAAA,CAAKE,MAAM,SAASe,IAAKI,GAAO5G,KAAK4N,WAAahH,GAE9C5G,KAAe,YACfA,KAAKyU,YAAY9C,EAAS,SAE5BpM,EAAA,MAAA,CAAKE,MAAO,CACViP,sBAAsB,EACtBC,+BAAgC3U,KAAKsI,YAElCtI,KAAKsI,UAAYtI,KAAK6I,MACvBtD,EAAA,MAAA,CAAKE,MAAM,eACRzF,KAAK4U,SAAS5U,KAAK0I,QAGtB1I,KAAa,UAAK,CAClBuF,EAAA,MAAA,CAAKE,MAAM,cAAc6M,GACzB/M,EAAA,KAAA,CAAIuN,KAAK,UACPtM,IAAKqO,GAAM7U,KAAK6N,UAAYgH,EAAEC,uBACT,OAAM5B,gBACZlT,KAAKwI,SAAQyK,gBACbV,EAAa,OAAS,QAAOwC,eAC9BxC,EACdyC,QAASzC,EACTN,GAAIE,EACJ1M,MAAO,CACLwP,oBAAoB,EACpBC,yBAA0B3C,IAG1BvS,KAAKyI,mBAAqBzI,KAAKqH,eAAehE,OAAS,GACvDkC,EAAA,KAAA,CAAAgO,aACcvT,KAAKqH,eACjByL,KAAK,SACLjM,SAAS,KACTL,IAAK2O,GAAMnV,KAAK+G,UAAU+J,KAAKqE,GAC/BtC,YAAa,KAAQ7S,KAAKiN,SAASjN,KAAKqH,iBACxCX,QAAS1G,KAAK6L,YAAU,OACpB7L,KAAKqH,gBAEZrH,KAAKyH,UAAUuH,KAAI6B,IAClB,IAAIuE,EAAQ1E,EAQZ,GAPIG,EAAc,OAChBuE,EAASvE,EAAc,MACvBH,EAAQG,EAAc,OAAKA,EAAc,OACd,iBAAXA,IAChBuE,EAASvE,EACTH,EAAQ0E,GAELA,EACL,OACE7P,EAAA,KAAA,CACEuN,KAAK,SACLxG,IAAK8I,EAAM7B,aACC6B,EACZ5O,IAAK2O,GAAMnV,KAAK+G,UAAU+J,KAAKqE,GAC/BtO,SAAS,KAAIwO,gBACErV,KAAKsV,WAAWF,GAAU,OAAS,QAClDvC,YAAa,KAAQ7S,KAAKiN,SAASmI,IACnC1O,QAAS1G,KAAK6L,YACd6E,OAIRnL,EAAA,SAAA,CACE0M,GAAIjS,KAAKiH,SAAW,UACpBxB,MAAM,gBACNe,IAAK+O,GAAUvV,KAAKiJ,aAAesM,EAAMxC,kBACxBpB,EAAU,IAAMO,EACjClR,SAAUhB,KAAKgB,SACfwU,KAAMxV,KAAKwV,KACXlN,SAAUtI,KAAKsI,SACf3B,KAAM3G,KAAK2G,KACX6B,SAAUxI,KAAKwI,SACfiN,UAAWzV,KAAK8J,eACf9J,KAAK0I,MAAwBsG,KAAII,GAC1B7J,EAAA,SAAA,CAAQmD,MAAO0G,EAAKlO,UAAQ,GAAEkO,QAIvCpP,KAAKsI,UACN/C,EAAA,SAAA,CACE0M,GAAIjS,KAAKiH,SACTxB,MAAM,gBACNe,IAAK+O,GAAUvV,KAAKiJ,aAAesM,EAAMxC,kBACxBpB,EAAU,IAAMO,EACjClR,SAAUhB,KAAKgB,SACfwU,KAAMxV,KAAKwV,KACX/C,UAAWzS,KAAKiI,UAChBK,SAAUtI,KAAKsI,SACf3B,KAAM3G,KAAK2G,KACX6B,SAAUxI,KAAKwI,SACfkN,KAAM1V,KAAK0V,KACXzP,OAAQjG,KAAKiG,OACbS,QAAS1G,KAAK0G,QACd+O,UAAWzV,KAAK8J,cAChBG,SAAUjK,KAAKiK,UAEdjK,KAAK2I,QAAQqG,KAAI,CAAC6B,EAAQuC,IACrBvC,EAAc,OAAKA,EAAc,MAC3BtL,EAAA,SAAA,CACN+G,IAAMuE,EAAe,MAAIuC,EACzB1C,MAAOG,EAAc,MACrBnI,MAAOmI,EAAc,MACrB3P,SAAU2P,EAAc,QAAM7Q,KAAK0I,QAAW1I,KAAK0I,QAAUmI,EAAc,MAC3E7P,UAAW6P,EAAc,OAAK7Q,KAAKwI,UAAWqI,EAAc,MAAIA,EAAc,MAAIA,EAAc,OAG1FtL,EAAA,SAAA,CACN+G,IAAMuE,EAAoBuC,EAC1B1K,MAAOmI,EACP3P,SAAU2P,IAAW7Q,KAAK0I,OACzBmI,KAGPtL,EAAA,OAAA,CAAMoB,KAAK,YAGb3G,KAAK4I,cAAgB5I,KAAKuI,WAAavI,KAAKgB,UAC5CuE,EAAA,SAAA,CACEkO,KAAK,SACLhO,MAAM,oBACNoB,SAAS,KACT6M,WAAY1T,KAAKsK,iBACjBqJ,UAAW3T,KAAKsK,kBACjB/E,EAAA,YAAA,CAAWoB,KAAK,iBAEnBpB,EAAA,MAAA,CACEmO,WAAY1T,KAAKsG,QACjBqN,UAAW3T,KAAKsG,QAChBb,MAAM,oBACFzF,KAAgB,YAAIuF,EAAA,OAAA,CAAMoB,KAAK,SAAYpB,EAAA,YAAA,CAAWoB,KAAK,6BAInE3G,KAAKmI,iBAAmBnI,KAAK8H,gBAC7BvC,EAAA,MAAA,CAAKE,MAAM,OAAOwM,GAAIC,GAChBlS,KAAKmI,gBAAkB5C,EAAA,MAAA,CAAKE,MAAM,SAASzF,KAAK2H,cAAsB,GAC1EpC,EAAA,MAAA,CAAKE,MAAM,UACTF,EAAA,OAAA,CAAMoB,KAAK,0WASzB,IAAIO,EAAY,UDvlCE","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include text-inherit();\n    @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));\n    display: var(--display, block);\n    white-space: nowrap;\n\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n  }\n\n  ::slotted(nano-icon[slot=\"icon-start\"]) {\n    @include padding(null, var(--padding-end), null, null);\n  }\n\n  ::slotted(nano-icon[slot=\"icon-end\"]) {\n    @include padding(null, null, null, var(--padding-start));\n  }\n\n  .link {\n\n    &::slotted(nano-icon[slot=\"icon-start\"]),\n    ::slotted(nano-icon[slot=\"icon-start\"]) {\n      @include padding(null, 0, null, var(--padding-start));\n    }\n\n    &::slotted(nano-icon[slot=\"icon-end\"]),\n    ::slotted(nano-icon[slot=\"icon-end\"]) {\n      @include padding(null, var(--padding-end), null, 0);\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-bottom: var(--border-bottom);\n    display: flex;\n    align-items: center;\n  }\n\n  .secondary-menu {\n    display: none;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover),\n  .link:hover,\n  button:hover,\n  a:hover {\n    text-decoration: inherit !important;\n  }\n\n  button:focus,\n  a:focus {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color: var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));\n    outline: var(--focus-outline, none);\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color: var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));\n    outline: none;\n  }\n}\n\n.nav-item {\n\n  &.selected {\n    .link,\n    button,\n    a {\n      color: var(--color-selected, var(--color-open, var(--color))) !important;\n      background-color: var(--bg-color-selected, var(--bg-color-open, var(--bg-color)));\n    }\n  }\n\n  &.secondary-open {\n    button,\n    a {\n      color: var(--color-open, var(--color-selected, var(--color))) !important;\n      background-color: var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))));\n    }\n  }\n\n  &.disabled {\n    opacity: .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: var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)));\n    }\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: var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));\n    outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n  }\n}\n\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n\n  a,\n  a:visited,\n  button,\n  .link {\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: 'currentColor';\n    text-decoration: inherit;\n    white-space: normal;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, 'currentColor');\n    min-height: 100%;\n    top: 0;\n    left: 0;\n    width: 100%;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity .2s ease, transform .3s ease;\n    background-color: var(--secondary-bg-color, white);\n    transform: translateX(100%);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      opacity: 1;\n      transform: translateX(0);\n      transition: opacity .3s ease, transform .2s ease;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu) {\n\n  ::slotted(nano-icon[slot=\"icon-start\"]) {\n    @include padding(0, var(--padding-end), 0, 0);\n  }\n\n  ::slotted(nano-icon[slot=\"icon-end\"]) {\n    @include padding(0, var(--padding-end), 0, 0);\n    font-size: 10px;\n    flex: 0 0 10px;\n    pointer-events: none;\n  }\n\n  button, a {\n    ::slotted(nano-icon[slot=\"icon-end\"]) {\n      padding: 0;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu[dir=rtl]),\n:host(.nano-menu[dir=rtl]) {\n  .secondary-menu {\n    left: auto;\n    right: 0;\n    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  .secondary-menu-content {\n    @include padding(var(--secondary-padding-top), var(--secondary-padding-end), var(--secondary-padding-bottom), var(--secondary-padding-start));\n  }\n}\n\n// I'm sorry. Horrible IE fixes for collapsing stuff :/\n:host(.nano-global-nav-bar.legacy) {\n  margin: 0 11px;\n\n  ::slotted(a) {\n    @include padding(7px, 6px, 7px, 6px);\n  }\n}\n\n:host(.nano-global-nav-menu.legacy) {\n\n  ::slotted(a) {\n    @include padding(8px, 12px, 8px, 12px);\n  }\n}\n\n:host(.nano-global-nav-bar) {\n\n  .link,\n  a,\n  button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .text {\n    flex: 1 0 auto;\n  }\n\n  ::slotted(nano-icon[slot=\"icon-end\"]) {\n    @include margin(0, 0, 0, var(--padding-end));\n  }\n\n  ::slotted(nano-icon[slot=\"icon-start\"]) {\n    @include margin(0, var(--padding-start), 0, 0);\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n\n  button {\n    position: relative;\n\n    &::before {\n      content: '';\n      background: rgb(134, 190, 226);\n      height: 3px;\n      left: 5px;\n      bottom: -14px;\n      right: 5px;\n      position: absolute;\n      transform: translateZ(0) scaleX(0);\n      transform-origin: 0;\n      transition: .2s ease transform;\n    }\n  }\n\n  .selected button::before, .secondary-open button::before {\n    transform: translateZ(0) scaleX(1);\n  }\n\n  .secondary-open button::before {\n    opacity: .5;\n  }\n\n  .secondary-menu {\n    display: none;\n    transition: transform .3s ease;\n    transform: translateY(-100%) translateZ(0);\n    background-color: var(--secondary-bg-color, #196c82);\n    color: var(--secondary-color);\n    position: absolute;\n    box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n    left: 0;\n    right: 0;\n    z-index: -2;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n\n    &:focus {\n      outline: none;\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n\n  .link,\n  a,\n  button {\n    @include padding(calc(var(--padding-top)/2), 0, calc(var(--padding-bottom)/2), var(--padding-start));\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentColor;\n    text-decoration: inherit;\n    white-space: normal;\n    border: none;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n    text-align: left;\n    flex: 0 1 auto;\n    min-width: 130px;\n    width: 130px;\n  }\n\n  ::slotted(nano-icon[slot=\"icon-start\"]) {\n    @include padding(0, var(--padding-end), 0, 0);\n    font-size: var(--icon-size);\n    width: var(--icon-size);\n    flex: 0 0 var(--icon-size);\n  }\n\n  ::slotted(nano-icon[slot=\"icon-end\"]) {\n    @include padding(0, var(--padding-end), 0, 0);\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    background-color: var(--secondary-bg-color);\n    color: var(--secondary-color);\n    height: 100vh;\n    top: 0;\n    right: 0;\n    left: auto;\n    bottom: 0;\n    transform: translateX(0);\n    z-index: -1;\n    transition: transform .3s ease, opacity .2s ease;\n    overflow-y: auto;\n    width: var(--secondary-width, 400px);\n    max-width: 62vw;\n    opacity: 1;\n    @include padding(var(--secondary-padding-top, var(--padding-top)), var(--secondary-padding-end, var(--padding-end)), var(--secondary-padding-bottom, var(--padding-bottom)), var(--secondary-padding-start, var(--padding-start)));\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n      // opacity: 1;\n    }\n  }\n}\n\n:host(.nano-menu-drawer.legacy) {\n\n  .link,\n  a,\n  button {\n    width: auto;\n  }\n\n  ::slotted(nano-icon[slot=\"icon-end\"]) {\n    @include padding(0, calc(var(--padding-end) * 2), 0, 0);\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n}\n\n:host(.nano-menu-drawer[dir=rtl]) {\n\n  .text {\n    text-align: right;\n  }\n\n  .secondary-menu {\n    right: auto;\n    left: 0;\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import { Component, h, Host, Element, Prop, Watch, EventEmitter, Event, State, Method, ComponentInterface } from '@stencil/core';\nimport { displayTransition, getDirectChildren, getSiblings } from '../../utils/utils';\nimport { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n */\n@Component({\n  tag: 'nano-nav-item',\n  styleUrl: 'nav-item.scss',\n  shadow: true\n})\nexport class NavItem implements ComponentInterface {\n  private hasSecondarySlot: boolean = false;\n  private hasAnchorEle: boolean = false;\n  private secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private didBlur: boolean = false;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() isLegacy: boolean = !document.head.attachShadow;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop() href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n  */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n  */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n  */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus()\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    this.open ? this.openSecondary() : this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      if (!this.fromHover) {\n        this.btn.removeEventListener('focusout', this.blur);\n        this.secondaryDiv.removeEventListener('focusout', this.blur);\n      }\n      setTimeout(() => {\n        if (!this.fromHover && !this.didBlur) this.btn.focus({ preventScroll: true })\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50)\n    } else {\n      this.didBlur = false;\n\n      /* the secondadry panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelio = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth'\n              });\n            }\n            panelio.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelio.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        this.btn.addEventListener('focusout', this.blur);\n        this.secondaryDiv.addEventListener('focusout', this.blur);\n        window.addEventListener('blur', this.blur);\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  private closeSecondary = async () => {\n    this.open = false;\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', false);\n    this.didOpen = status !== 'hidden';\n  }\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n    this.open = true;\n    if (!this.hasSecondarySlot || this.didOpen) return;\n\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', true);\n    this.didOpen = status === 'shown';\n  }\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  }\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot) this.openSecondary();\n    this.nanoFocus.emit();\n  }\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  }\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    let foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  }\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (!this.href || this.animating || !this.hasSecondarySlot\n      || (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))) 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) timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(async () => await this.openSecondary(), timeToWait);\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(async () => await this.closeSecondary(), 300);\n    this.animating = false;\n  }\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n    else this.el.querySelector<HTMLElement>('*').click();\n  }\n\n  // utility to traverse up, to see if element is nested within current nav-item\n  private foundThisNavEle(el: HTMLElement): boolean {\n    let found = el.closest('nano-nav-item');\n    found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n    if (!found) return false;\n    if (found === this.el) return true;\n    return this.foundThisNavEle(found);\n  }\n\n  private blur = (ev: FocusEvent) => {\n    if (!this.didOpen || this.animating) return;\n    if (!this.closeOnBlur) return;\n\n    // if event is associated with this element don't close\n    if (ev && ev.relatedTarget) {\n      if (ev.relatedTarget === this.el || ev.relatedTarget === this.btn\n        || this.foundThisNavEle((ev.relatedTarget as HTMLElement))) {\n          this.secondaryDiv.focus({ preventScroll: true });\n          return\n      };\n    }\n\n    this.btn.removeEventListener('focusout', this.blur);\n    this.secondaryDiv.removeEventListener('focusout', this.blur);\n    window.removeEventListener('blur', this.blur);\n\n    this.didBlur = true;\n\n    this.open = false;\n    if (!ev.relatedTarget) setTimeout(() => { this.el.focus({ preventScroll: true }) }, 50)\n  }\n\n  componentWillLoad() {\n    let secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    let link = getDirectChildren(this.el, 'a, button')[0] as HTMLAnchorElement | HTMLButtonElement;\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href ? (link as HTMLAnchorElement).href : null;\n      this.btn = link;\n      if (this.hasSecondarySlot) this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n  }\n\n  connectedCallback() {\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest('nano-global-nav');\n\n    this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n    this.isInMenu = !!this.el.closest('nano-menu');\n    this.isInGlobalNav = this.el.parentElement === this.globalNavEle || !!this.el.closest('.global-nav');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'has-secondary': this.hasSecondarySlot,\n          'secondary-open': this.open,\n          'selected': this.selected,\n          'has-focus': this.hasFocus,\n          'disabled': this.disabled,\n          'nano-global-nav': this.isInGlobalNav,\n          'nano-menu-drawer': this.isInMenuDrawer,\n          'nano-menu': this.isInMenu,\n          'legacy': this.isLegacy\n        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n      >\n        <div class={{\n          'nav-item': true,\n          'secondary-open': this.open,\n          'selected': this.selected\n        }}>\n          {(this.href && !this.hasAnchorEle && !this.disabled) &&\n            <a\n              target={this.target}\n              ref={a => this.btn = a}\n              href={this.href}\n              onFocus={this.handleFocus}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\"><slot /></span>\n              <slot name=\"icon-end\" />\n            </a>\n          }\n          {((!this.hasAnchorEle && !this.href) || this.disabled) &&\n            <button\n              ref={btn => this.btn = btn}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\"><slot /></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 class=\"secondary-menu\" ref={div => this.secondaryDiv = div} tabindex=\"-1\">\n              <div class=\"secondary-menu-content\">\n                <slot name=\"secondary\" />\n              </div>\n              <div class=\"secondary-menu-mask\" onClick={this.closeSecondary}></div>\n            </div>\n          }\n        </div>\n      </Host>\n    )\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../input/input.vars';\n\n:host {\n  @include inputVars;\n\n  position: relative;\n  width: 100%;\n  /* stylelint-disable-next-line all */\n  padding: 0 !important;\n  font-family: $font-family-base;\n  display: inline-block;\n}\n\n:host(.nano-color) {\n  --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n  color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n  --padding-start: 0;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n  opacity: .7;\n\n  * {\n    pointer-events: none !important;\n  }\n}\n\n:host(.has-focus) {\n  .select {\n    z-index: 10;\n  }\n}\n\nlabel,\n.more, .error, .helper {\n  display: block;\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  &.visually-hide {\n    @include visually-hide;\n  }\n}\n\n\n.placeholder-as-label {\n  @include padding(0, 0, 0, var(--padding-start));\n  color: var(--input-text-color);\n  position: absolute;\n  font-size: 1.4em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  top: 50%;\n  transition: .125s ease-in;\n  opacity: .7;\n  pointer-events: none;\n\n  :host(.is-invalid) & {\n    color: var(--invalid-msg-color);\n  }\n\n  :host(.has-value) & {\n    transform: translateY(-110%);\n    font-size: .9em;\n  }\n\n  :host(.has-focus.has-multiple) &,\n  :host(.has-value.has-multiple) & {\n    transform: translateY(-75%);\n    font-size: .9em;\n  }\n\n  :host(.has-multiple) & {\n    top: 1.5em;\n  }\n\n  &~.native-select-wrap {\n    font-size: 1.1em;\n  }\n}\n\n.label {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  @include padding(0, 0, var(--padding-bottom));\n  line-height: 1;\n\n  .placeholder {\n    opacity: 0;\n    appearance: none;\n    transition: .3s ease opacity;\n    font-size: .9em;\n  }\n\n  :host(.has-value) & {\n    .placeholder {\n      opacity: .5;\n    }\n  }\n\n  :host(.has-focus) & {\n    color: var(--label-color--focus);\n  }\n\n  :host(.is-invalid) & {\n    color: var(--label-color--invalid);\n  }\n}\n\n.more {\n  height: 1em;\n  position: relative;\n  @include margin(4px, 0, var(--padding-bottom), 3px);\n}\n\n.helper, .error {\n  top: 0;\n  left: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: .3s ease-out opacity;\n}\n\n.helper {\n  color: var(--help-msg-color);\n  font-style: italic;\n\n  :host([show-inline-error]:not([show-inline-error=\"false\"]).is-invalid) & {\n    opacity: 0;\n  }\n}\n\n.error {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-stretch: condensed;\n\n  :host(.is-invalid) & {\n    opacity: 1;\n  }\n}\n\n.select {\n  @include text-inherit();\n  @include border-radius(var(--input-border-radius));\n  width: 100%;\n  padding: 0 !important;\n  position: relative;\n\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n\n  :host(.has-focus) & {\n    background: var(--input-bg-color--focus);\n    border: var(--input-border-style--focus);\n    border-width: var(--input-border-width);\n  }\n\n  :host(.is-invalid) & {\n    background: var(--input-bg-color--invalid);\n    border: var(--input-border-style--invalid);\n    border-width: var(--input-border-width);\n  }\n\n  :host(.is-invalid.has-focus) & {\n    background: var(--input-bg-color--invalid);\n    border: var(--input-border-style--invalid-focus);\n    border-width: var(--input-border-width);\n  }\n}\n\n// Native Select\n// --------------------------------------------------\n\n.native-select-wrap {\n  display: flex;\n  align-items: center;\n}\n\n.select-mask {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n.native-select {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  box-sizing: border-box;\n  transition: .3s ease opacity;\n  appearance: none;\n  // line-height: 1.3;\n  margin: 0;\n  line-height: 2.5em;\n  min-height: 2.5em;\n  box-sizing: border-box;\n\n  :host(.legacy) & {\n    box-sizing: content-box;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n\n  :host(.has-float-label) & {\n    opacity: 0;\n    padding-top: 1.8em;\n  }\n\n  :host(.has-value.has-float-label) & {\n    opacity: 1;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear {\n    display: none;\n  }\n\n  &::-ms-expand {\n    display: none;\n  }\n\n  &[disabled] {\n    opacity: .4;\n  }\n\n  :host(.has-multiple) & {\n    display: none;\n  }\n\n  option {\n    color: black;\n  }\n}\n\n// multi stuff\n\n.multi {\n\n  &-wrap {\n    @include padding(0, calc(1.9em + var(--padding-end)), calc(var(--padding-bottom)/2), 0);\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    max-width: 100%;\n\n    :host(.has-clr-btn) & {\n      @include padding(0, calc(2.6em + (var(--padding-end)*2) + (var(--padding-end)*2)), calc(var(--padding-bottom)/2), 0);\n    }\n\n    :host(.has-float-label) & {\n      padding-top: 1.3em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n    @include padding(calc(var(--padding-top)/2), var(--padding-end), 0, var(--padding-start));\n    min-width: 50px;\n    max-width: 100%;\n    max-height: 100%;\n    appearance: none;\n    border: 0;\n    outline: none;\n    display: inline-block;\n    background: transparent;\n    flex: 0;\n    position: relative;\n    // line-height: calc(2.8em - var(--padding-top));\n    min-height: calc(2.8em - var(--padding-top));\n    box-sizing: border-box;\n\n    :host(.legacy) & {\n      box-sizing: content-box;\n    }\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-select-box {\n    position: absolute;\n    background: #{$layer-bg-color};\n    min-width: calc(100% + (var(--input-border-width) * 2));\n    z-index: #{$layer-index-dropdown};\n    margin: 0;\n    font-size: 1.15em;\n    line-height: 1.4;\n    max-height: 50vh;\n    overflow-y: auto;\n    overscroll-behavior: none;\n    transition: opacity .2s ease;\n    opacity: 0;\n    box-sizing: border-box;\n    border-radius: #{$layer-border-radius};\n    box-shadow: #{$layer-shadow-large};\n    padding: var(--padding-top) 0 var(--padding-bottom);\n    border: #{$layer-border-style};\n\n    &--open {\n      opacity: 1;\n    }\n\n    li {\n      @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));\n      font-size: var(--input-font-size);\n      cursor: pointer;\n      list-style: none;\n      color: var(--input-text-color);\n\n      :host(.nano-color) & {\n        color: black;\n      }\n\n      &:hover,\n      &:focus {\n        color: var(--color--focus-contrast);\n        outline: none;\n        background: rgba(var(--multi-input-value-bg), .2);\n\n        :host(.nano-color) & {\n          background: current-color(base, 0.2);\n        }\n      }\n    }\n  }\n\n  &-value {\n    @include margin(4px, 0, 0, 4px);\n    background: rgba(var(--multi-input-value-bg), .8);\n    color: var(--multi-input-value-text-color);\n    border: 2px solid;\n    border-color: var(--multi-input-value-border);\n    padding: .3em .5em;\n    border-radius: 3px;\n    line-height: 1;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    font-weight: 600;\n    letter-spacing: 1px;\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      overflow: hidden;\n      line-height: 1.4;\n    }\n  }\n\n  &-value-remove {\n    @include margin(0);\n    @include background-position(center);\n    @include padding(0, 0, 0, .5em);\n    color: inherit;\n    border: 0;\n    outline: none;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    top: 0;\n    font-size: 1em;\n\n    nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n// Clear Input Icon\n// --------------------------------------------------\n\n.select-down-icon {\n  @include margin(0);\n  @include background-position(center);\n  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));\n  color: var(--input-text-color);\n  font-size: 1.4em;\n  right: 0;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n\n  :host(.is-invalid) & {\n    color: var(--clear-btn-color--invalid);\n  }\n\n  :host(.rtl) & {\n    right: unset;\n    left: 0;\n  }\n\n  :host(.has-multiple) & {\n    pointer-events: all;\n  }\n\n  :host(.masked) & {\n    position: relative;\n  }\n}\n\n.select-clear-icon {\n  @include margin(0);\n  @include background-position(center);\n  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));\n  font-size: 1.4em;\n  color: var(--clear-btn-color);\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  visibility: hidden;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  right: calc(1.4em + var(--padding-end));\n\n  &:hover {\n    color: var(--clear-btn-color--hover);\n  }\n\n  :host(.rtl) & {\n    right: unset;\n    left: calc(1.4em + var(--padding-end));\n  }\n\n  :host(.is-invalid) & {\n    color: var(--clear-btn-color--invalid);\n  }\n\n  :host(.has-value) & {\n    visibility: visible;\n  }\n\n  nano-icon {\n    --color: inherit;\n  }\n}\n\n\n// Input Has focus\n// --------------------------------------------------\n// When the select has focus, then the select cover should be hidden\n\n// :host(.has-focus) {\n//   pointer-events: none;\n// }\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n  pointer-events: auto;\n}\n","import { Build, Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';\n\nimport { Color, SelectChangeEventDetail, InputChangeEventDetail, CssClassMap, ControlValidityEventDetail, ControlValidity } from '../../interface';\nimport { testLegacyStyle, debounceEvent, closestElement, createColorClasses } from '../../utils/utils';\nimport Popover from '../../utils/popover';\n\n/**\n * The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n *\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot legacy - you can use this slot to wrap any old select / labels / options. This will set appropriate defaults for the nano-select\n*/\n@Component({\n  tag: 'nano-select',\n  styleUrl: 'select.scss',\n  scoped: true\n})\nexport class Select implements ComponentInterface {\n  private nativeSelect?: HTMLSelectElement;\n  private multiInput?: HTMLInputElement;\n  private multiList?: HTMLUListElement;\n  private selectWrap?: HTMLDivElement;\n  private listItems: Array<HTMLLIElement> = [];\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private popover: Popover;\n\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private currLiIndex: number = -1;\n  private inputSearchVal: string = '';\n  private watchValue: boolean = true;\n  private onInit: boolean = true;\n\n  @State() currInsertIndex: number = 0;\n  @State() availOpts = [];\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() listOpen = false;\n  @State() isLegacy: boolean = 'registerElement' in document;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() hasIconSlot: boolean = false;\n\n  @Element() el!: HTMLNanoSelectElement;\n\n   /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have select focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' = 'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId + '-name';\n\n  /**\n   * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * The initial size of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * Maximum number of options that can be selected when multiple is true\n   */\n  @Prop() max?: number;\n\n  /**\n   * Minimum number of options that can be selected when multiple is true\n   */\n  @Prop() min?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * in multiple mode, allow users to enter their own values\n   */\n  @Prop() allowCustomValues: boolean = false;\n\n  /**\n   * The value of the select.\n   */\n  @Prop({ mutable: true }) value?: string | Array<string | null> = this.multiple ? [] : '';\n\n  /**\n   * You can set options via js. domElement.options = ['option 1', 'option 2'] or [{label: 'option 1', value: 'opt-1'}]\n   */\n  @Prop({ mutable: true }) options: Array<string | { label: string; value?: string }> = [];\n\n  /**\n   * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n   */\n  @Prop() clearSelect = false;\n\n  /**\n   * Hide the native select element and cover with a value 'mask'.\n   * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n   */\n  @Prop() mask = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  /**\n   * Whether to use native <select> elements. Setting to false will use a similar UI as multiple=\"true\"\n   */\n  @Prop() native = true;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  // @Watch('options')\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  @Watch('validateOn')\n  @Watch('readonly')\n  protected shouldValidate() {\n    if (this.onInit) return;\n    if (this.invalid) this.showErrorMsg = this.invalid = false;\n\n    this.customValidate();\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  /**\n   * Update the native select element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    if (!this.watchValue) return;\n\n    if (this.multiple) {\n      if (typeof this.value === 'string' && !!this.value.length) this.value = this.value.split(',');\n      if (this.value === null || (typeof this.value === 'string' && !this.value.length)) this.value = [];\n\n      if (this.currInsertIndex > this.value.length - 1) this.currInsertIndex = this.value.length - 1;\n    } else if (typeof this.value !== 'string' && this.value && this.value[0]) this.value = this.value[0];\n\n    this.setNativeValue();\n    this.setAvailOpts();\n    setTimeout(_ => this.shouldValidate(), 20);\n    this.nanoChange.emit({ value: this.value });\n\n    if (this.onInit) return;\n  }\n\n  @Watch('options')\n  protected optionsChanged() {\n    this.setAvailOpts();\n    if (this.hasFocus) this.openList();\n  }\n\n  /**\n   * Setup or rip down custom combobox when select is switched from mutliple\n   */\n  @Watch('multiple')\n  protected multiChange() {\n    this.switchValue();\n\n    if (this.multiple) this.setupMulti();\n    else if (this.popover) this.popover.destroy();\n  }\n\n  private setupMulti() {\n    setTimeout(() => {\n      this.setAvailOpts();\n      this.popover = new Popover(this.selectWrap, this.multiList, {\n        placement: 'bottom-start',\n        skidding: 0,\n        distance: 0,\n        onTransitionEnd: () => {\n          if (!this.listOpen) {\n            this.multiList.scrollTop = 0;\n          }\n        }\n      });\n    }, 20);\n  }\n\n  @Watch('listOpen')\n  listOpenChange() {\n    if (this.listOpen) this.popover.show();\n    else this.popover.hide();\n  }\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Emitted when a keyboard input occurred on a multiple=\"true\" input\n   */\n  @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n   @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n   /**\n    * Get the current state of the control.\n    * @param validateFirst - perform validation first before reporting\n    * @returns `{ isValid: boolean, errorMessage: string }`\n    */\n   @Method()\n   async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n     if (validateFirst) this.showInlineValidation();\n     return {\n       isValid: !this.invalid,\n       errorMessage: this.errorMessage\n     }\n   }\n\n  /**\n   * Sets focus on the specified `nano-select`. Use this method instead of the global\n   * `select.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeSelect && !this.multiple) this.nativeSelect.focus();\n    else if (this.multiInput) this.multiInput.focus();\n  }\n\n  /**\n   * Returns the native `<select>` element used under the hood.\n   */\n  @Method()\n  getSelectElement(): Promise<HTMLSelectElement> {\n    return Promise.resolve(this.nativeSelect!);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeSelect) {\n      this.nativeSelect.setCustomValidity(message);\n      this.nativeSelect.reportValidity();\n    }\n  }\n\n  /* Logic */\n\n  // sets the available options of a multi select.\n  // Removes ones already selected\n  // Filters one if user starts to search\n  private setAvailOpts() {\n    if (!this.multiple) return;\n\n    this.availOpts = this.options.filter(opt => {\n      let toFind = typeof opt === 'string' ? opt : opt['value'];\n      let strFilter = typeof opt === 'string' ? opt : (opt['label'] || opt['value']);\n\n      if (!toFind) return false;\n      return !(this.value as Array<string>).includes(toFind) && (!this.multiInput || strFilter.toLowerCase().indexOf(this.inputSearchVal.toLowerCase()) > -1)\n    })\n  }\n\n  private getNativeValue(): string | Array<string> {\n    const nsl = this.nativeSelect;\n    if (!nsl) return '';\n\n    if (!this.multiple) return nsl.options[nsl.selectedIndex] && nsl.options[nsl.selectedIndex].hasAttribute('value') ? nsl.options[nsl.selectedIndex].value : '';\n    else {\n      return Array.from(nsl.options)\n        .map(opt => {\n          if (opt.selected && opt.hasAttribute('value')) return opt.value\n        });\n    }\n  }\n\n  private setNativeValue() {\n    const nsl = this.nativeSelect;\n    if (!nsl) return null;\n    if (!this.multiple) nsl.value = this.value as string;\n    else {\n      Array.from(this.nativeSelect.options)\n        .filter(opt => {\n          if (typeof this.value === 'string') return opt.value === this.value;\n          else return this.value.find(val => {\n            if (typeof val === 'string') return val === this.value;\n            else if (val['value']) return val === val['value'];\n          })\n        }).map(opt => {\n          opt.selected = true;\n        })\n    }\n  }\n\n  private isValidValues() {\n    const nsl = this.nativeSelect;\n    if (!nsl) return null;\n\n    const selected = this.nativeSelect.querySelectorAll('option:checked');\n    const values = Array.from(selected).map((el: HTMLOptionElement) => el.value || null);\n\n    if (this.multiple) {\n      return values.reduce((accumulator, currentValue) => {\n        if (!accumulator) return false;\n        return !!this.options.find(opt =>\n          opt['value'] ? (opt['value'] === currentValue) : (opt === currentValue)\n        )\n      }, true)\n    } else {\n      return this.options.find(opt =>\n        opt['value'] ? (opt['value'] === values[0]) : (opt === values[0])\n      )\n    }\n  }\n\n  private customValidate = () => {\n    this.nativeSelect.setCustomValidity('');\n\n    // add custom validations 'cos html5 validations are a bit rubbish on selects\n    if (this.required && !this.getNativeValue().length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (this.getNativeValue().length && !this.allowCustomValues && !this.isValidValues()) {\n      this.nativeSelect.setCustomValidity('Please choose an item from this field.');\n      return true;\n    }\n    if (this.max && this.getNativeValue().length > this.max) {\n      this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);\n      return true;\n    }\n    if (this.min && this.getNativeValue().length < this.min) {\n      this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);\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({isValid: !this.invalid, errorMessage: this.errorMessage, originalEvent: ev});\n  }\n\n  private handleInvalid = (ev: Event) => {\n    this.invalid = true;\n\n    if (this.validateOn === 'submit') this.invalid = this.showErrorMsg = this.customValidate();\n    if (this.showInlineError) ev.preventDefault();\n\n    setTimeout(_ => this.showInlineValidation(ev), 20);\n  }\n\n  private openList() {\n    if (!this.multiple) return;\n    if ((this.availOpts.length || (!!this.inputSearchVal.length && this.allowCustomValues))\n        && (!this.max || (this.max && this.value.length < this.max))\n    ) this.listOpen = true;\n    else this.listOpen = false;\n  }\n\n  private addValue(value) {\n    if (!this.multiple) return;\n    if (this.value && this.value.length && this.value.includes(value)) return;\n    if (this.max && this.value.length === this.max) return;\n\n    this.currInsertIndex++;\n    this.value = [...this.value.slice(0, this.currInsertIndex), value, ...this.value.slice(this.currInsertIndex)];\n\n    this.inputSearchVal = '';\n\n    this.setAvailOpts();\n\n    this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n    this.openList();\n  }\n\n  private removeValue(toFind?: string) {\n    if (!this.multiple || !this.value.length) return;\n\n    if (!toFind) toFind = this.value[this.value.length - 1];\n    this.value = (this.value as Array<string>).filter(val => val !== toFind);\n\n    if (this.currInsertIndex > this.value.length - 1) this.currInsertIndex = this.value.length - 1;\n\n    this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n    this.openList();\n  }\n\n  private switchValue() {\n    this.watchValue = false;\n    if (this.multiple) {\n      if (typeof this.value === 'string' && !!this.value.length) this.value = this.value.split(',');\n      else this.value = [];\n\n      this.currInsertIndex = Math.max(this.value.length - 1, 0);\n    } else if (typeof this.value !== 'string' && this.value && this.value[0]) this.value = this.value[0];\n    this.watchValue = true;\n  }\n\n  private isSelected(value: string) {\n    if (this.multiple) return (this.value as Array<string>).find(val => val === value);\n    else value === this.value;\n  }\n\n  private getLabel(val: string) {\n    let foundVal = this.options.find(opt => {\n      return opt['value'] ? (opt['value'] === val) : (opt === val)\n    })\n    if (!foundVal) return null;\n    return foundVal['label'] ? foundVal['label'] : foundVal;\n  }\n\n  private slotChangeObserver() {\n    const mo = this.mo = new MutationObserver((mrs: MutationRecord[]) => this.processSlottedContent(mrs))\n    mo.observe(this.el, { childList: true, subtree: true })\n  }\n\n  private processSlottedContent(mutations?: MutationRecord[]) {\n    // see if we have label / helper content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n    this.hasIconSlot = !!this.el.querySelector('[slot=\"icon\"]');\n\n    if (!mutations) {\n      // find legacy select. Take attrs and apply to our element\n      let existingselect = this.el.querySelector('select:not([class*=\"sc-nano-select\"])');\n      if (existingselect) {\n        Array.from(existingselect.attributes)\n          .filter(attr => attr.specified && attr.nodeName in this)\n          .map(attr => this[attr.nodeName] = attr.nodeValue);\n      }\n\n      // find legacy label. Apply to our element\n      let existingLabel = this.el.querySelector('label:not([class*=\"sc-nano-select\"])');\n      if (existingLabel) this.label = this.label || existingLabel.innerHTML;\n\n      // find legacy slotted options. Apply them and add any relevant values\n      let legacyOpts = this.el.querySelectorAll('option:not([class*=\"sc-nano-select\"])');\n\n      this.watchValue = false;\n      if (legacyOpts && legacyOpts.length) {\n        let options = [];\n        legacyOpts.forEach((option: HTMLOptionElement) => {\n          options.push({\n            label: option.label || option.innerText,\n            value: option.value\n          })\n          if (!option.selected || !option.value) return;\n\n          if (this.multiple) (this.value as Array<string>).push(option.value)\n          else this.value = option.value;\n        })\n        this.options = options;\n      }\n\n      if (legacyOpts.length || existingLabel || existingselect) {\n        // empty all legacy slotted stuff\n        let children = this.el.querySelectorAll('[slot=\"legacy\"]');\n        if (children) children.forEach(n => n.parentNode.removeChild(n))\n      }\n\n      this.watchValue = true;\n    }\n\n    if (mutations &&\n      !Array.from(mutations[0].addedNodes).find(node => node.nodeName.toLowerCase() === 'nano-select-option')\n    ) return;\n\n    // find nano-select-options\n    let nanoOpts = this.el.querySelectorAll('nano-select-option');\n\n    if (nanoOpts && nanoOpts.length) {\n      let options = [];\n      nanoOpts.forEach((option: HTMLNanoSelectOptionElement) => {\n        options.push({\n          label: option.label || option.innerText,\n          value: option.value\n        })\n        if (!option.selected || !option.value) return;\n\n        if (this.multiple) (this.value as Array<string>).push(option.value)\n        else this.value = option.value;\n      })\n      this.options = options;\n    }\n\n    this.setAvailOpts();\n  }\n\n  /* Event handling */\n\n  private onChange = (ev?: Event) => {\n    if (!this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n    this.value = this.getNativeValue();\n  }\n\n  private onBlur = () => {\n    if (this.multiple) {\n      this.currLiIndex = -1;\n      document.removeEventListener('keydown', this.handleDocumentKeyDown);\n      document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    }\n    this.hasFocus = false;\n\n    setTimeout(() => {\n      if (this.validateOn === 'dirty' && !this.listOpen && !this.hasFocus) this.showInlineValidation();\n    }, 20);\n    this.nanoBlur.emit();\n  }\n\n  private onFocus = () => {\n    if (this.multiple) {\n      this.currLiIndex = -1;\n      document.addEventListener('keydown', this.handleDocumentKeyDown);\n      document.addEventListener('mousedown', this.handleDocumentMouseDown);\n      this.openList();\n    }\n\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  }\n\n  private clearSelectValue = (ev?: Event) => {\n    if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    if (this.multiple) {\n      this.value = [];\n      let options = this.nativeSelect.querySelectorAll('option');\n      if (options.length) options.forEach(n => n.remove());\n      this.currInsertIndex = -1;\n      this.setAvailOpts();\n    } else this.value = '';\n\n    this.onChange();\n  }\n\n  private onClick = () => {\n    this.setFocus();\n    this.openList();\n  }\n\n  /* Multi event handlers */\n\n  private onMultiInputBlur = () => {\n    if (this.allowCustomValues) return;\n    this.inputSearchVal = '';\n    this.setAvailOpts();\n  }\n\n  private onDragStart = (ev: MouseEvent) => {\n    let ele = ev.target as HTMLSpanElement;\n    this.dragVal = ele.dataset.value;\n  }\n\n  private onDragEnd = (ev) => {\n    this.dragVal = null;\n    ev.preventDefault();\n  }\n\n  private onDragLeave = (ev: MouseEvent) => {\n    let ele = ev.target as HTMLSpanElement;\n    let spanVal: string = ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n    if (!spanVal || this.dragVal === spanVal || !this.value.includes(this.dragVal)) {\n      ev.preventDefault();\n      return;\n    }\n\n    let to = this.value.indexOf(spanVal);\n    let from = this.value.indexOf(this.dragVal);\n    let tmpArr = (this.value as Array<string>);\n    let tmpVal = tmpArr[to];\n\n    tmpArr[to] = tmpArr[from];\n    tmpArr[from] = tmpVal;\n    this.value = [...tmpArr];\n  }\n\n  private onMultiInput = (ev) => {\n    this.inputSearchVal = ev.target.value;\n    this.setAvailOpts();\n    this.openList();\n    this.nanoSearchChange.emit({ value: ev.target.value })\n  }\n\n  private getActiveOpt() {\n    return this.multiList.querySelector('.has-focus') as HTMLLIElement;\n  }\n\n  private onOptFocus = (ev: FocusEvent) => {\n    let activeEle = this.getActiveOpt();\n    if (activeEle) activeEle.classList.remove('has-focus');\n    (ev.target as HTMLElement).classList.add('has-focus');\n  }\n\n  private onHostClick = () => {\n    setTimeout(_ => {\n      if (!this.multiple || this.hasFocus) return;\n      this.setFocus();\n    }, 20);\n  }\n\n  private handleDocumentMouseDown = (ev: MouseEvent) => {\n    const target = ev.target as HTMLElement;\n    if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n      this.listOpen = false;\n      this.onBlur();\n    }\n  }\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.multiInput.previousElementSibling)\n            rm = (this.multiInput.previousElementSibling as HTMLSpanElement);\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.multiInput.nextElementSibling)\n            rm = (this.multiInput.nextElementSibling as HTMLSpanElement);\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          if (!this.value.length) break;\n\n          if (ev.key === 'ArrowLeft' && this.multiInput.previousSibling) this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.multiInput.nextSibling) this.currInsertIndex++;\n\n          setTimeout(() => { this.multiInput.focus() }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n\n    // navigated to component via keyboard. Open with down.\n    if (this.hasFocus && !this.listOpen && ev.key === 'ArrowDown') {\n      this.openList();\n      this.currLiIndex = -1;\n    }\n\n    // Close when tabbing outside of element\n    if (this.hasFocus && ev.key === 'Tab') {\n      setTimeout(() => {\n        if ( document.activeElement &&\n          closestElement(this.el.tagName.toLowerCase(), document.activeElement) !== this.el) {\n          this.listOpen = false;\n          this.onBlur();\n          return;\n        }\n      });\n    }\n\n    // list open, navigate items with arrows\n    if (this.listOpen) {\n      const selectedItem = this.getActiveOpt();\n      let testIndex = this.listItems.indexOf(selectedItem) || this.currLiIndex;\n\n      switch (ev.key) {\n        case 'ArrowDown':\n        case 'ArrowUp':\n          ev.preventDefault();\n\n          if (ev.key === 'ArrowDown') testIndex++;\n          else if (ev.key === 'ArrowUp') testIndex--;\n\n          if (testIndex < 0) {\n            this.currLiIndex = 0;\n            this.multiInput.focus();\n            return;\n          }\n\n          let foundIndex = this.listItems[testIndex] ? testIndex : this.currLiIndex;\n          setTimeout(() => {\n            this.listItems[foundIndex].focus();\n            this.currLiIndex = foundIndex;\n          }, 20);\n          return;\n        case 'Enter':\n        case ' ':\n          if (this.listItems[this.currLiIndex]) {\n            this.addValue(this.listItems[this.currLiIndex].dataset.value);\n            ev.preventDefault();\n          }\n          return;\n        case 'Escape':\n          this.listOpen = false;\n          return;\n      }\n    }\n\n    if (this.currLiIndex > -1) ev.preventDefault();\n  }\n\n  /* Stencil Component lifecycle hooks */\n\n  connectedCallback() {\n    this.debounceChanged();\n\n    if (!Build.isBrowser) return;\n\n    this.el.dispatchEvent(new CustomEvent('nanoDidLoad', {\n      detail: this.el\n    }));\n    testLegacyStyle(this.el);\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(new CustomEvent('nanoDidUnload', {\n      detail: this.el\n    }));\n\n    if (!Build.isBrowser) return;\n    if (this.mo) this.mo.disconnect();\n    if (this.popover) this.popover.destroy();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    if (this.multiple) this.setupMulti()\n    this.customValidate();\n  }\n\n  componentWillLoad() {\n    this.switchValue();\n    this.processSlottedContent();\n    this.onInit = false;\n  }\n\n  private renderLabel(labelId: string, position?: 'float') {\n    let classes: CssClassMap = {};\n    if (position === 'float') {\n      classes = { \"placeholder-as-label\": true }\n    } else {\n      classes = { \"label\": true, \"visually-hide\": this.hideLabel }\n    }\n    if (!this.label && !this.hasLabelSlot) return;\n\n    return <label class={classes} htmlFor={this.selectId} id={labelId}>\n        {(this.label) && this.label}\n        {(!this.label && !!this.hasLabelSlot) && <slot name=\"label\" />}\n    </label>\n  }\n\n  render() {\n    const labelId = this.selectId + '-lbl';\n    const moreId = this.showInlineError || this.hasHelperSlot ? this.selectId + '-moreId' : '';\n    const listId = this.selectId + '-list';\n\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n    this.listItems = [];\n    this.valueItems = [];\n\n    if (this.placeholder && (!this.options[0] || this.options[0]['label'] !== this.placeholder)) {\n      this.options.unshift({ label: this.placeholder, value: '' })\n    }\n\n    let optionMenu = this.listOpen;\n\n    let valueMarkup;\n    if (this.multiple) {\n      let input = <input class=\"multi-input\"\n        id={this.selectId}\n        ref={input => this.multiInput = input}\n        disabled={this.disabled}\n        autoFocus={this.autofocus}\n        autocomplete=\"off\"\n        onInput={this.onMultiInput}\n        value={this.inputSearchVal}\n        onTouchStart={this.onClick}\n        onMouseDown={this.onClick}\n        onFocus={this.onFocus}\n        onBlur={this.onMultiInputBlur}\n        placeholder={this.placeholder && !this.floatLabel && !this.value.length ? this.placeholder : ''}\n        role={this.multiple ? 'combobox' : ''}\n        aria-labelledby={labelId + ' ' + moreId}\n        aria-controls={listId}\n        aria-expanded={optionMenu ? 'true' : 'false'}\n        aria-required={this.required ? 'true' : 'false'}\n        aria-autocomplete=\"list\"\n      />;\n\n      if (!!this.value.length) {\n        valueMarkup = (this.value as Array<string>).map((val, i) => {\n          let label = this.options.find(opt => {\n            return opt['value'] ? (opt['value'] === val) : (opt === val)\n          })\n          label = label && label['label'] ? label['label'] : val;\n\n          let toReturn = <span\n            onDragStart={this.onDragStart}\n            onDragLeave={this.onDragLeave}\n            onDragEnd={this.onDragEnd}\n            draggable\n            data-value={val}\n            ref={span => this.valueItems.push(span)}\n            class=\"multi-value\"\n          >\n            <span>{label}</span>\n            <button\n              class=\"multi-value-remove\"\n              type=\"button\"\n              tabindex=\"-1\"\n              onTouchEnd={() => { this.removeValue(val) }}\n              onMouseUp={() => { this.removeValue(val) }}\n            ><nano-icon name=\"light/times\"></nano-icon></button>\n          </span>;\n\n          if (i === 0 && this.currInsertIndex < 0) toReturn = [input, toReturn]\n          else if (i === this.currInsertIndex) toReturn = [toReturn, input]\n          return (toReturn)\n        })\n      } else valueMarkup = input;\n    }\n\n    return (\n      <Host\n        type={this.multiple ? 'select-multiple' : 'select-one'}\n        aria-disabled={this.disabled ? 'true' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': (!!this.value.length || !!this.inputSearchVal.length),\n          'has-focus': this.hasFocus,\n          'is-invalid': this.invalid,\n          'has-label': (this.label !== null && !this.floatLabel),\n          'has-float-label': (this.label !== null && this.floatLabel),\n          'rtl': this.rtl,\n          'has-multiple': this.multiple,\n          'multi-list-open': this.listOpen,\n          'has-clr-btn': this.clearSelect,\n          'masked': this.mask,\n          'legacy': this.isLegacy\n        }}\n        onClick={this.onHostClick}\n      >\n        {(!this.floatLabel) &&\n          this.renderLabel(labelId)\n        }\n        <div class=\"select\" ref={div => this.selectWrap = div}>\n\n          {(this.floatLabel) &&\n            this.renderLabel(labelId, 'float')\n          }\n          <div class={{\n            'native-select-wrap': true,\n            'native-select-wrap--multiple': this.multiple\n          }}>\n            {(!this.multiple && this.mask) &&\n              <div class=\"select-mask\">\n                {this.getLabel(this.value as string)}\n              </div>\n            }\n            {(this.multiple) && [\n              <div class=\"multi-wrap\">{valueMarkup}</div>,\n              <ul role=\"listbox\"\n                ref={ul => this.multiList = ul}\n                aria-multiselectable=\"true\"\n                aria-required={this.required}\n                aria-expanded={optionMenu ? 'true' : 'false'}\n                aria-hidden={!optionMenu}\n                hidden={!optionMenu}\n                id={listId}\n                class={{\n                  'multi-select-box': true,\n                  'multi-select-box--open': optionMenu\n                }}\n              >\n                {(this.allowCustomValues && this.inputSearchVal.length > 0) &&\n                  <li\n                    data-value={this.inputSearchVal}\n                    role=\"option\"\n                    tabindex=\"-1\"\n                    ref={li => this.listItems.push(li)}\n                    onMouseDown={() => { this.addValue(this.inputSearchVal)} }\n                    onFocus={this.onOptFocus}\n                  >Add {this.inputSearchVal}</li>\n                }\n                {this.availOpts.map(option => {\n                  let optval, label;\n                  if (option['value']) {\n                    optval = option['value'];\n                    label = option['label'] || option['value'];\n                  } else if (typeof option === 'string') {\n                    optval = option;\n                    label = optval;\n                  }\n                  if (!optval) return;\n                  return (\n                    <li\n                      role=\"option\"\n                      key={optval}\n                      data-value={optval}\n                      ref={li => this.listItems.push(li)}\n                      tabindex=\"-1\"\n                      aria-selected={this.isSelected(optval) ? 'true' : 'false'}\n                      onMouseDown={() => { this.addValue(optval) }}\n                      onFocus={this.onOptFocus}\n                    >{label}</li>\n                  )\n                })}\n              </ul>,\n              <select\n                id={this.selectId + '-hidden'}\n                class=\"native-select\"\n                ref={select => this.nativeSelect = select}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                form={this.form}\n                multiple={this.multiple}\n                name={this.name}\n                required={this.required}\n                onInvalid={this.handleInvalid}\n              >{(this.value as Array<string>).map(val => {\n                return (<option value={val} selected>{val}</option>)\n              })}\n              </select>\n            ]}\n            {(!this.multiple) &&\n              <select\n                id={this.selectId}\n                class=\"native-select\"\n                ref={select => this.nativeSelect = select}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                form={this.form}\n                autoFocus={this.autofocus}\n                multiple={this.multiple}\n                name={this.name}\n                required={this.required}\n                size={this.size}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                onInvalid={this.handleInvalid}\n                onChange={this.onChange}\n              >\n                {this.options.map((option, i) => {\n                  if (option['value'] || option['label'])\n                    return (<option\n                      key={(option['label']) + i}\n                      label={option['label']}\n                      value={option['value']}\n                      selected={option['value'] === this.value || (!this.value && !option['value'])}\n                      disabled={!option['value'] && this.required}>{option['label'] ? option['label'] : option['value']}</option>\n                    )\n                  else\n                    return (<option\n                      key={(option as string) + i}\n                      value={option as string}\n                      selected={option === this.value}>\n                      {option}</option>\n                    )\n                })}\n                <slot name=\"legacy\" />\n              </select>\n            }\n            {(this.clearSelect && !this.readonly && !this.disabled) &&\n              <button\n                type=\"button\"\n                class=\"select-clear-icon\"\n                tabindex=\"-1\"\n                onTouchEnd={this.clearSelectValue}\n                onMouseUp={this.clearSelectValue}\n              ><nano-icon name=\"light/times\"></nano-icon></button>\n            }\n            <div\n              onTouchEnd={this.onClick}\n              onMouseUp={this.onClick}\n              class=\"select-down-icon\">\n                {(this.hasIconSlot) ? <slot name=\"icon\" /> : <nano-icon name=\"regular/chevron-down\"></nano-icon> }\n            </div>\n          </div>\n        </div>\n        {(this.showInlineError || this.hasHelperSlot) &&\n          <div class=\"more\" id={moreId}>\n            {(!!this.showInlineError ? <div class=\"error\">{this.errorMessage}</div> : '' )}\n            <div class=\"helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n\nlet selectIds = 0;\n"]}

package/dist/nano-components/p-6deee19c.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,i as s,h as e,e as o,g as r}from"./p-7a6bc3c5.js";import{i as n}from"./p-6a284815.js";import{d as a}from"./p-3796f493.js";const h=class{constructor(s){t(this,s),this.nanoResizeStateChange=i(this,"nanoResizeStateChange",7),this.classNames=[],this.assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;const t={h:new Map,w:new Map};let i=!1;Object.keys(this.appliedStates).forEach((s=>{let e;e="h"===s?this.currentHeight:this.currentWidth,this.appliedStates[s].forEach(((o,r)=>{e>=r&&!1===o.applied?(o.applied=!0,t[s].set(r,o),i=!0):e<r&&!0===o.applied&&(o.applied=!1,t[s].set(r,o),i=!0)}))})),i&&this.applyChanges(t)}}dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;this.ro||this.attachRO();const t=t=>{const i=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(i[0]),dir:i[1]}};this.appliedStates={h:new Map,w:new Map},this.states.split(",").map((i=>{if((i=i.trim()).includes(" ")){const[s,...e]=i.split(" "),{bp:o,dir:r}=t(s);this.appliedStates[r].set(o,{states:e,applied:!1})}else{const{bp:s,dir:e}=t(i);this.appliedStates[e].set(s,{applied:!1})}}))}applyChanges(t){let i=[...this.classNames];Object.keys(t).forEach((s=>{t[s].forEach((t=>{t.states&&t.states.map((s=>{t.applied?i.push(s):i=i.filter((t=>t!==s))}))}))})),this.classNames=i,this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const i={};return Object.keys(t).forEach((s=>{t[s].forEach(((t,e)=>{i[e+s]=t.applied}))})),i}attachRO(){this.ro=new n((t=>{for(const i of t)this.currentWidth=i.contentRect.width,this.currentHeight=i.contentRect.height})),this.ro.observe(this.el)}connectedCallback(){this.assessChanges=a(this.assessChanges,50)}componentDidLoad(){this.states&&(this.currentWidth&&this.currentHeight||s((()=>{const{width:t,height:i}=this.el.getBoundingClientRect();this.currentWidth=t,this.currentHeight=i})),this.statesChanged())}disconnectedCallback(){this.ro&&this.ro.disconnect()}render(){return e(o,{class:{[this.classNames.join(" ")]:!0}},e("div",{ref:t=>this.el=t},e("slot",null)))}get host(){return r(this)}static get watchers(){return{currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"],states:["statesChanged"]}}};h.style=":host { display: inline-block } div { height: 100%; }";const c=class{constructor(i){t(this,i),this.animated=!0}render(){return e("div",{class:{skeleton:!0,animate:this.animated}},e("div",{class:"skeleton__indicator"}))}};c.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--base-color-rgb:var(--nano-skeleton-base-rgb, 228, 230, 232);--color:var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .5));display:block;position:relative;border-radius:0.25rem;height:1em}.skeleton{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100%;border-radius:inherit}.skeleton__indicator{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:var(--color);border-radius:inherit}.skeleton.animate .skeleton__indicator{background:-webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;background-size:400% 100%;-webkit-animation:loader 6s ease-in-out infinite;animation:loader 6s ease-in-out infinite}@-webkit-keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}";export{h as nano_resize_observe,c as nano_skeleton}
-//# sourceMappingURL=p-6deee19c.entry.js.map

package/dist/nano-components/p-6deee19c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"names":["ResizeObserve","[object Object]","hostRef","this","classNames","assessChanges","currentWidth","currentHeight","changedStates","h","Map","w","hasChanged","Object","keys","appliedStates","forEach","dimType","dim","state","bp","applied","set","applyChanges","states","ro","attachRO","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","includes","key","classes","changes","push","cl","nanoResizeStateChange","emit","toSimpleObj","stateMaps","retObj","ResizeObserver","entries","entry","contentRect","width","height","observe","el","debounce","readTask","getBoundingClientRect","statesChanged","disconnect","Host","class","join","ref","div","Skeleton","animated","skeleton","animate"],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Host, State, Watch, ComponentInterface, Event, EventEmitter, readTask } from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { debounce } from '../../utils/utils';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = {states?: string[], applied?: boolean};\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>,\n  w: Map<number, ResizeObserverState>\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n */\n @Component({\n  tag: 'nano-resize-observe',\n  shadow: true,\n  styles: `:host { display: inline-block } div { height: 100%; }`\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n  private el: HTMLDivElement;\n\n  @Element() host: HTMLElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n\n  /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n    if (!this.ro) this.attachRO();\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter(bs => bs.length);\n      return {bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1]}\n    }\n    this.appliedStates = {h: new Map(), w: new Map()};\n\n    // parse state string\n   this.states.split(',').map(st => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const {bp, dir} = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {states: classes, applied: false});\n      } else {\n        const {bp, dir} = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {applied: false});\n      }\n    });\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    const changedStates: StateMaps = {h: new Map(), w: new Map()};\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach(dimType => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        if (dim >= bp && state.applied === false) {\n          state.applied = true;\n          changedStates[dimType].set(bp, state);\n          hasChanged = true;\n        } else if (dim < bp && state.applied === true) {\n          state.applied = false;\n          changedStates[dimType].set(bp, state);\n          hasChanged = true;\n        }\n      })\n    })\n    if (hasChanged) this.applyChanges(changedStates);\n  }\n\n  private applyChanges(changes: StateMaps) {\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach(state => {\n        if (!state.states) return;\n        state.states.map(st => {\n          if (state.applied) classNames.push(st);\n          else classNames = classNames.filter(cl => cl !== st);\n        })\n      })\n    });\n    this.classNames = classNames;\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp+dimType] = state.applied;\n      })\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    this.ro = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        this.currentWidth = entry.contentRect.width;\n        this.currentHeight = entry.contentRect.height;\n      }\n    });\n    this.ro.observe(this.el);\n  }\n\n  connectedCallback() {\n    this.assessChanges = debounce(this.assessChanges, 50);\n  }\n\n  componentDidLoad() {\n    if (!this.states) return;\n    if (!this.currentWidth || !this.currentHeight) {\n      readTask(() => {\n        const {width, height} = this.el.getBoundingClientRect();\n        this.currentWidth = width;\n        this.currentHeight = height;\n      })\n    }\n    this.statesChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host class={{\n        [this.classNames.join(' ')]: true\n      }}>\n        <div ref={div => this.el = div}>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$skeleton-color-rgb};\n   * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n   * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n   */\n\n  --base-color-rgb: #{$skeleton-color-rgb};\n  --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n  --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .5));\n\n  display: block;\n  position: relative;\n  border-radius: 0.25rem;\n  height: 1em;\n}\n\n.skeleton {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n  background: linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));\n  background-size: 400% 100%;\n  background-size: 400% 100%;\n  animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n  0% {\n    background-position: 200% 0;\n  }\n  to {\n    background-position: -200% 0;\n  }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n  tag: 'nano-skeleton',\n  styleUrl: 'skeleton.scss',\n  shadow: true\n})\nexport class Skeleton implements ComponentInterface {\n  /** When `true`, the skeleton will animate. */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          skeleton: true,\n          animate: this.animated\n        }}\n      >\n        <div  class=\"skeleton__indicator\" />\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-6f57bcc8.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o}from"./p-7a6bc3c5.js";const e=class{constructor(o){t(this,o),this.aspectRatio="16:9",this.fit="cover",this.handleSlotChange=()=>{this.setAspectRatio()}}handleAspectRatioChange(){this.setAspectRatio()}setAspectRatio(){const t=this.aspectRatio.split(":"),o=parseInt(t[0]),e=parseInt(t[1]);this.base.style.paddingBottom=o&&e?e/o*100+"%":null}render(){return o("div",{ref:t=>this.base=t,part:"base",class:{"aspect-ratio":!0,"aspect-ratio--cover":"cover"===this.fit,"aspect-ratio--contain":"contain"===this.fit}},o("slot",{onSlotchange:this.handleSlotChange}))}static get watchers(){return{aspectRatio:["handleAspectRatioChange"]}}};e.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block}.aspect-ratio{position:relative}.aspect-ratio ::slotted(*){position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important}.aspect-ratio--cover ::slotted(embed),.aspect-ratio--cover ::slotted(iframe),.aspect-ratio--cover ::slotted(img),.aspect-ratio--cover ::slotted(video){-o-object-fit:cover !important;object-fit:cover !important}.aspect-ratio--contain ::slotted(embed),.aspect-ratio--contain ::slotted(iframe),.aspect-ratio--contain ::slotted(img),.aspect-ratio--contain ::slotted(video){-o-object-fit:contain !important;object-fit:contain !important}";export{e as nano_aspect_ratio}
-//# sourceMappingURL=p-6f57bcc8.entry.js.map

package/dist/nano-components/p-6f57bcc8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/aspect-ratio/aspect-ratio.scss?tag=nano-aspect-ratio&encapsulation=shadow","src/components/aspect-ratio/aspect-ratio.tsx"],"names":["AspectRadio","[object Object]","hostRef","this","aspectRatio","fit","handleSlotChange","setAspectRatio","split","x","parseInt","y","base","style","paddingBottom","h","ref","el","part","class","aspect-ratio","aspect-ratio--cover","aspect-ratio--contain","onSlotchange"],"mappings":"2CAAA,MCaaA,EAAW,MALxBC,YAAAC,aAUUC,KAAAC,YAAc,OAGdD,KAAAE,IAA2B,QAO3BF,KAAAG,iBAAmB,KACzBH,KAAKI,kBALPN,0BACEE,KAAKI,iBAOCN,iBACN,MAAMO,EAAQL,KAAKC,YAAYI,MAAM,KAC/BC,EAAIC,SAASF,EAAM,IACnBG,EAAID,SAASF,EAAM,IACzBL,KAAKS,KAAKC,MAAMC,cAAgBL,GAAKE,EAAQA,EAAIF,EAAK,IAAb,IAAsB,KAGjER,SACE,OACEc,EAAA,MAAA,CAAKC,IAAKC,GAAMd,KAAKS,KAAOK,EAAIC,KAAK,OAAOC,MAAO,CACjDC,gBAAgB,EAChBC,sBAAoC,UAAblB,KAAKE,IAC5BiB,wBAAsC,YAAbnB,KAAKE,MAE9BU,EAAA,OAAA,CAAMQ,aAAcpB,KAAKG,oGD9CV","sourcesContent":[":host {\n  display: block;\n}\n\n.aspect-ratio {\n  position: relative;\n\n  ::slotted(*) {\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100% !important;\n    height: 100% !important;\n  }\n\n  &--cover {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: cover !important;\n    }\n  }\n\n  &--contain {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: contain !important;\n    }\n  }\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Displays media in the desired aspect ratio.\n * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.\n * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.\n * The default aspect ratio is 16:9.\n */\n@Component({\n  tag: 'nano-aspect-ratio',\n  styleUrl: 'aspect-ratio.scss',\n  shadow: true\n})\nexport class AspectRadio implements ComponentInterface {\n  base: HTMLElement;\n\n  /** The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`.\n   * Ratios not in this format will be ignored. */\n  @Prop() aspectRatio = '16:9';\n\n  /** Determines how content will be resized to fit its container. */\n  @Prop() fit: 'cover' | 'contain' = 'cover';\n\n  @Watch('aspectRatio')\n  handleAspectRatioChange() {\n    this.setAspectRatio();\n  }\n\n  private handleSlotChange = () => {\n    this.setAspectRatio();\n  }\n\n  private setAspectRatio() {\n    const split = this.aspectRatio.split(':');\n    const x = parseInt(split[0]);\n    const y = parseInt(split[1]);\n    this.base.style.paddingBottom = x && y ? `${(y / x) * 100}%` : null;\n  }\n\n  render() {\n    return (\n      <div ref={el => this.base = el} part=\"base\" class={{\n        'aspect-ratio': true,\n        'aspect-ratio--cover': this.fit === 'cover',\n        'aspect-ratio--contain': this.fit === 'contain'\n      }}>\n        <slot onSlotchange={this.handleSlotChange} />\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-6fcb6dcb.system.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(n,t,e,i){function o(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,a){function r(n){try{l(i.next(n))}catch(t){a(t)}}function s(n){try{l(i["throw"](n))}catch(t){a(t)}}function l(n){n.done?e(n.value):o(n.value).then(r,s)}l((i=i.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var e={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},i,o,a,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(n){return function(t){return l([n,t])}}function l(r){if(i)throw new TypeError("Generator is already executing.");while(e)try{if(i=1,o&&(a=r[0]&2?o["return"]:r[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,r[1])).done)return a;if(o=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:e.label++;return{value:r[1],done:false};case 5:e.label++;o=r[1];r=[0];continue;case 7:r=e.ops.pop();e.trys.pop();continue;default:if(!(a=e.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){e=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){e.label=r[1];break}if(r[0]===6&&e.label<a[1]){e.label=a[1];a=r;break}if(a&&e.label<a[2]){e.label=a[2];e.ops.push(r);break}if(a[2])e.ops.pop();e.trys.pop();continue}r=t.call(n,e)}catch(s){r=[6,s];o=0}finally{i=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-3b21dfce.system.js","./p-551c160b.system.js","./p-1e7fd1f2.system.js"],(function(n){"use strict";var t,e,i,o,a,r;return{setters:[function(n){t=n.r;e=n.c;i=n.h;o=n.g},function(n){a=n.f},function(n){r=n.c}],execute:function(){var s=".sc-nano-rating-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-rating:export{screen:1000}.sc-nano-rating-h{--symbol-color:#b5aea7;--symbol-color-active:#f5cc49;--symbol-spacing:.25rem;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin:0 calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;width:100%;-webkit-transition:-webkit-box-shadow 0.15s ease;transition:-webkit-box-shadow 0.15s ease;transition:box-shadow 0.15s ease;transition:box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.focus-visible.sc-nano-rating:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow)}.rating__symbols.sc-nano-rating{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(nano-icon){background-color:currentColor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;top:0;left:0;color:var(--symbol-color-active);pointer-events:none;width:100%}.rating__symbol.sc-nano-rating{-webkit-transition:0.2s -webkit-transform;transition:0.2s -webkit-transform;transition:0.2s transform;transition:0.2s transform, 0.2s -webkit-transform;text-align:center}.rating__symbol--hover.sc-nano-rating{-webkit-transform:scale(1.2);transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{-webkit-transform:none !important;transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";var l=!!document.head.attachShadow;var c=n("nano_rating",function(){function n(n){var i=this;t(this,n);this.nanoChange=e(this,"nanoChange",7);this.nanoBlur=e(this,"nanoBlur",7);this.nanoFocus=e(this,"nanoFocus",7);this.hoverValue=0;this.isHovering=false;this.value=0;this.max=5;this.precision=1;this.readonly=false;this.disabled=false;this.name="";this.symbolName="solid/star";this.symbol=function(n){return'<nano-icon name="'+i.symbolName+'"></nano-icon>'};this.handleClick=function(n){if(i.disabled||i.readonly){return}var t=i.getValueFromMousePosition(n);i.value=t===i.value?0:t;i.isHovering=false};this.handleKeyDown=function(n){if(i.disabled||i.readonly){return}if(n.key==="ArrowLeft"){var t=n.shiftKey?1:i.precision;i.value=i.roundToPrecision(Math.max(0,i.value-t));n.preventDefault()}if(n.key==="ArrowRight"){var e=n.shiftKey?1:i.precision;i.value=i.roundToPrecision(Math.min(i.max,i.value+e));n.preventDefault()}if(n.key==="Home"){i.value=0;n.preventDefault()}if(n.key==="End"){i.value=i.max;n.preventDefault()}};this.handleMouseEnter=function(){i.isHovering=true};this.handleMouseLeave=function(){i.isHovering=false};this.handleFocus=function(){i.nanoFocus.emit()};this.handleBlur=function(){i.nanoBlur.emit()};this.handleMouseMove=function(n){i.hoverValue=i.getValueFromMousePosition(n)}}n.prototype.handleValueChange=function(){this.nanoChange.emit()};n.prototype.handleSymbolChange=function(){var n=this;this.symbol=function(t){return'<nano-icon name="'+n.symbolName+'"></nano-icon>'}};n.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){this.rating.focus();return[2]}))}))};n.prototype.removeFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){this.rating.blur();return[2]}))}))};n.prototype.getValueFromMousePosition=function(n){var t=this.rating.getBoundingClientRect().left;var e=this.rating.getBoundingClientRect().width;var i;i=this.roundToPrecision((n.clientX-t)/e*this.max,this.precision);if(this.isRtl)i=this.max+this.precision-i;return r(i,0,this.max)};n.prototype.roundToPrecision=function(n,t){if(t===void 0){t=.5}var e=1/t;return Math.ceil(n*e)/e};n.prototype.clip=function(n){if(!this.rating)return;var t=this.rating.getBoundingClientRect().width;if(this.isRtl)return"rect(0, "+t+"px, 2em, "+(t-t/100*(n/this.max*100))+"px)";return"rect(0, "+t/100*(n/this.max*100)+"px, 2em, 0)"};n.prototype._getRoot=function(){return this.host.shadowRoot?this.host.shadowRoot:this.host};n.prototype._fixClassNames=function(){var n=this.rating.className.split(" ").filter((function(n){return n.match(/^sc-nano/)}));var t=this._getRoot().querySelectorAll("*");if(!t)return;Array.from(t).map((function(t){n.map((function(n){return t.classList.add(n)}))}))};n.prototype.componentDidLoad=function(){var n=this;a.observe(this.rating);setTimeout((function(){return n.indicator.style.clip=n.clip(n.value)}),20)};n.prototype.connectedCallback=function(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"};n.prototype.disconnectedCallback=function(){a.unobserve(this.rating)};n.prototype.componentDidRender=function(){if(!this.host.shadowRoot||!l)this._fixClassNames()};n.prototype.render=function(){var n=this;this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";var t=Array.from(Array(this.max).keys());var e=0;if(this.disabled||this.readonly){e=this.value}else{e=this.isHovering?this.hoverValue:this.value}return i("div",{class:"rating-wrap"},i("div",{dir:this.isRtl?"rtl":null,ref:function(t){return n.rating=t},part:"base",class:{rating:true,"rating--readonly":this.readonly,"rating--disabled":this.disabled},"aria-disabled":this.disabled?"true":"false","aria-readonly":this.readonly?"true":"false","aria-valuenow":this.value,"aria-valuemin":0,"aria-valuemax":this.max,tabIndex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onMouseMove:this.handleMouseMove,onFocus:this.handleFocus,onBlur:this.handleBlur},i("span",{class:"rating__symbols rating__symbols--inactive"},t.map((function(t){return i("span",{class:{rating__symbol:true,"rating__symbol--hover":n.isHovering&&Math.ceil(e)===t+1},role:"presentation",onMouseEnter:n.handleMouseEnter,innerHTML:n.symbol(t+1)})}))),i("span",{ref:function(t){return n.indicator=t},class:"rating__symbols rating__symbols--indicator",style:{clip:this.clip(e)}},t.map((function(t){return i("span",{class:{rating__symbol:true,"rating__symbol--hover":n.isHovering&&Math.ceil(e)===t+1},role:"presentation",innerHTML:n.symbol(t+1)})}))),i("input",{type:"hidden",name:this.name,value:this.value,readonly:this.readonly,disabled:this.disabled})))};Object.defineProperty(n.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["handleValueChange"],symbolName:["handleSymbolChange"]}},enumerable:false,configurable:true});return n}());c.style=s}}}));
-//# sourceMappingURL=p-6fcb6dcb.system.entry.js.map

package/dist/nano-components/p-6fcb6dcb.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"names":["ratingCss","CANSHADOW","document","head","attachShadow","Rating","exports","class_1","hostRef","_this","this","hoverValue","isHovering","value","max","precision","readonly","disabled","name","symbolName","symbol","_","handleClick","event","newValue","getValueFromMousePosition","handleKeyDown","key","decrement","shiftKey","roundToPrecision","Math","preventDefault","increment","min","handleMouseEnter","handleMouseLeave","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","handleMouseMove","prototype","handleValueChange","nanoChange","handleSymbolChange","setFocus","rating","focus","removeFocus","blur","containerLeft","getBoundingClientRect","left","containerWidth","width","num","clientX","isRtl","clamp","numberToRound","multiplier","ceil","clip","displayValue","tw","_getRoot","host","shadowRoot","_fixClassNames","ctxClasses","className","split","filter","classStr","match","eles","querySelectorAll","Array","from","map","ele","classList","add","componentDidLoad","focusVisible","observe","setTimeout","indicator","style","connectedCallback","dir","ownerDocument","disconnectedCallback","unobserve","componentDidRender","render","counter","keys","h","class","ref","el","part","rating--readonly","rating--disabled","aria-disabled","aria-readonly","aria-valuenow","aria-valuemin","aria-valuemax","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","index","rating__symbol","rating__symbol--hover","role","innerHTML","span","type"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n  */\n\n  --symbol-color: #{$color-palegrey};\n  --symbol-color-active: #{$color-yellow};\n  --symbol-spacing: .25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin: 0 calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  width: 100%;\n  transition: box-shadow .15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(nano-icon) {\n        background-color: currentColor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      top: 0;\n      left: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      width: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: .2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled, &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h, ComponentInterface } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true\n})\nexport class Rating implements ComponentInterface {\n  rating: HTMLElement;\n  isRtl: boolean;\n  indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = ''\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   */\n  @Prop() symbol = (_: number) => '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    this.symbol = (_: number) => '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(((event.clientX - containerLeft) / containerWidth) * this.max, this.precision);\n    if (this.isRtl) num = (this.max + this.precision) - num;\n\n    return clamp(\n      num,\n      0,\n      this.max\n    );\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.min(this.max, this.value + increment));\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  }\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  }\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  }\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  }\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  }\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  }\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl) return `rect(0, ${tw}px, 2em, ${tw - ((tw / 100) * ((displayValue / this.max) * 100))}px)`;\n    return `rect(0, ${(tw / 100) * ((displayValue / this.max) * 100)}px, 2em, 0)`;\n  }\n\n  private _getRoot() {\n    return this.host.shadowRoot ? this.host.shadowRoot : this.host;\n  }\n\n  private _fixClassNames() {\n    let ctxClasses = this.rating.className.split(' ').filter(classStr => classStr.match(/^sc-nano/))\n    let eles = this._getRoot().querySelectorAll('*');\n    if (!eles) return\n    Array.from(eles).map((ele: HTMLElement) => {\n      ctxClasses.map(classStr => ele.classList.add(classStr))\n    })\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => this.indicator.style.clip = this.clip(this.value), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl = this.host.dir === 'rtl' || (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  componentDidRender() {\n    if (!this.host.shadowRoot || !CANSHADOW) this._fixClassNames();\n  }\n\n  render() {\n    this.isRtl = this.host.dir === 'rtl' || (this.host.ownerDocument as Document).dir === 'rtl';\n\n    let counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={el => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map(index => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1\n                }}\n                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span ref={span => this.indicator = span} class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue)\n            }}>\n            {counter.map(index => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input type=\"hidden\" name={this.name} value={this.value} readonly={this.readonly} disabled={this.disabled} />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-743d6ae8.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as o,h as i,e as r,g as e}from"./p-7a6bc3c5.js";import{P as s}from"./p-00c6bee1.js";let n=0;const a=class{constructor(i){t(this,i),this.nanoShow=o(this,"nanoShow",7),this.nanoAfterShow=o(this,"nanoAfterShow",7),this.nanoHide=o(this,"nanoHide",7),this.nanoAfterHide=o(this,"nanoAfterHide",7),this.componentId="tooltip-"+ ++n,this.isVisible=!1,this.content="",this.placement="top",this.disabled=!1,this.distance=10,this.open=!1,this.skidding=0,this.trigger="hover focus",this.handleBlur=()=>{this.hasTrigger("focus")&&this.hide()},this.handleClick=()=>{this.hasTrigger("click")&&(this.open?this.hide():this.show())},this.handleFocus=()=>{this.hasTrigger("focus")&&this.show()},this.handleKeyDown=t=>{this.open&&"Escape"===t.key&&(t.stopPropagation(),this.hide())},this.handleMouseOver=()=>{this.hasTrigger("hover")&&this.show()},this.handleMouseOut=()=>{this.hasTrigger("hover")&&this.hide()},this.handleSlotChange=()=>{const t=this.target,o=this.getTarget();o!==t&&(t&&t.removeAttribute("aria-describedby"),o.setAttribute("aria-describedby",this.componentId))}}handleOpenChange(){this.open?this.show():this.hide()}componentDidLoad(){this.target=this.getTarget(),this.popover=new s(this.target,this.tooltipPositioner),this.syncOptions(),this.host.addEventListener("blur",this.handleBlur,!0),this.host.addEventListener("click",this.handleClick,!0),this.host.addEventListener("focus",this.handleFocus,!0),this.tooltipPositioner.hidden=!this.open,this.open&&this.show()}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){this.popover.destroy(),this.host.removeEventListener("blur",this.handleBlur,!0),this.host.removeEventListener("click",this.handleClick,!0),this.host.removeEventListener("focus",this.handleFocus,!0)}async show(){this.isVisible||(this.nanoShow.emit().defaultPrevented?this.open=!1:(this.isVisible=!0,this.open=!0,this.popover.show()))}async hide(){this.isVisible&&(this.nanoHide.emit().defaultPrevented?this.open=!0:(this.isVisible=!1,this.open=!1,this.popover.hide()))}getTarget(){const t=[...Array.from(this.host.children)].find((t=>"style"!==t.tagName.toLowerCase()&&"content"!==t.getAttribute("slot")));if(!t)throw new Error("Invalid tooltip target: no child element was found.");return t}hasTrigger(t){return this.trigger.split(" ").includes(t)}syncOptions(){this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}render(){return i(r,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut},i("slot",{onSlotchange:this.handleSlotChange}),!this.disabled&&i("div",{ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},i("div",{part:"base",ref:t=>this.tooltip=t,id:this.componentId,class:{tooltip:!0,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{name:"content"},this.content))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"]}}};a.style=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-width:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));-webkit-transform:translateY(10px) translateZ(0);transform:translateY(10px) translateZ(0);-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;-webkit-transition-delay:var(--hide-delay);transition-delay:var(--hide-delay);-webkit-transition-duration:var(--hide-duration);transition-duration:var(--hide-duration);-webkit-transition-timing-function:var(--hide-timing-function);transition-timing-function:var(--hide-timing-function)}.tooltip::after{content:"";position:absolute;width:0;height:0;color:black}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);pointer-events:none}.tooltip-positioner[data-popper-placement^=top] .tooltip{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transform:translateY(-10px) translateZ(0);transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{-webkit-transform-origin:top;transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{-webkit-transform-origin:right;transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{-webkit-transform-origin:left;transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:var(--show-delay);transition-delay:var(--show-delay);-webkit-transition-duration:var(--show-duration);transition-duration:var(--show-duration);-webkit-transition-timing-function:var(--show-timing-function);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip::after{bottom:100%;left:calc(50% - 5px);border-bottom:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip::after{left:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip::after{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip::after{top:100%;left:calc(50% - 5px);border-top:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip::after{left:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip::after{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip::after{top:calc(50% - 5px);left:100%;border-left:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip::after{top:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip::after{top:auto;bottom:5px}.tooltip-positioner[data-popper-placement^=right] .tooltip::after{top:calc(50% - 5px);right:100%;border-right:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip::after{top:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip::after{top:auto;bottom:5px}';export{a as nano_tooltip}
-//# sourceMappingURL=p-743d6ae8.entry.js.map

package/dist/nano-components/p-743d6ae8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/tooltip/tooltip.tsx","src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow"],"names":["id","Tooltip","[object Object]","hostRef","this","componentId","isVisible","content","placement","disabled","distance","open","skidding","trigger","handleBlur","hasTrigger","hide","handleClick","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","oldTarget","target","newTarget","getTarget","removeAttribute","setAttribute","popover","Popover","tooltipPositioner","syncOptions","host","addEventListener","hidden","destroy","removeEventListener","nanoShow","emit","defaultPrevented","nanoHide","Array","from","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","split","includes","setOptions","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","h","Host","onKeyDown","onMouseOver","onMouseOut","onSlotchange","ref","class","part","tooltip--open","role","aria-hidden","name"],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true\n})\nexport class Tooltip {\n  componentId = `tooltip-${++id}`;\n  isVisible = false;\n  popover: Popover;\n  tooltipPositioner: HTMLElement;\n  target: HTMLElement;\n  tooltip: any;\n\n  @Element() host: HTMLElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n\n    this.host.addEventListener('blur', this.handleBlur, true);\n    this.host.addEventListener('click', this.handleClick, true);\n    this.host.addEventListener('focus', this.handleFocus, true);\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    this.popover.destroy();\n\n    this.host.removeEventListener('blur', this.handleBlur, true);\n    this.host.removeEventListener('click', this.handleClick, true);\n    this.host.removeEventListener('focus', this.handleFocus, true);\n  }\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Shows the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      el => el.tagName.toLowerCase() !== 'style' && el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  }\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  }\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  }\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  }\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  }\n\n  private handleSlotChange = () => {\n    const oldTarget = this.target;\n    const newTarget = this.getTarget();\n\n    if (newTarget !== oldTarget) {\n      if (oldTarget) {\n        oldTarget.removeAttribute('aria-describedby');\n      }\n      newTarget.setAttribute('aria-describedby', this.componentId);\n    }\n  }\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit()\n    });\n  }\n\n  render() {\n    return (\n      <Host onKeyDown={this.handleKeyDown} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>\n        <slot onSlotchange={this.handleSlotChange} />\n\n        {!this.disabled && (\n          <div ref={el => (this.tooltipPositioner = el)} class=\"tooltip-positioner\">\n            <div\n              part=\"base\"\n              ref={el => (this.tooltip = el)}\n              id={this.componentId}\n              class={{\n                tooltip: true,\n                'tooltip--open': this.open\n              }}\n              role=\"tooltip\"\n              aria-hidden={this.open ? 'false' : 'true'}\n            >\n              <slot name=\"content\">{this.content}</slot>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n  max-width: var(--max-width);\n  border-radius: #{$tooltip-border-radius};\n  background-color: black;\n  font-size: #{$tooltip-fontsize};\n  line-height: 1.5;\n  color: white;\n  opacity: 0;\n  padding: #{$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition-property: opacity, transform;\n  transition-delay: var(--hide-delay);\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    color: black;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{$layer-index-tooltip};\n    pointer-events: none;\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}::after {\n      bottom: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-bottom: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}::after {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}::after {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}::after {\n      top: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-top: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}::after {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}::after {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}::after {\n      top: calc(50% - #{$tooltip-arrow-size});\n      left: 100%;\n      border-left: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}::after {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}::after {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}::after {\n      top: calc(50% - #{$tooltip-arrow-size});\n      right: 100%;\n      border-right: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}::after {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}::after {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n  }\n}\n\n"]}

package/dist/nano-components/p-768fb4c8.js

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

package/dist/nano-components/p-768fb4c8.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/utils/scroll.ts"],"names":["locks","Set","lockBodyScrolling","lockingEl","add","document","body","classList","unlockBodyScrolling","delete","size","remove","scrollTo","element","scrollAmt","vertical","top","behavior","e","scrollTop","left","scrollLeft","scrollIntoView","container","direction","position","offset","getOffset","offsetTop","offsetLeft","maxX","offsetWidth","minY","maxY","offsetHeight","clientWidth","clientHeight"],"mappings":"oCAEA,MAAMA,EAAQ,IAAIC,aAMFC,EAAkBC,GAChCH,EAAMI,IAAID,GACVE,SAASC,KAAKC,UAAUH,IAAI,6BAMdI,EAAoBL,GAClCH,EAAMS,OAAON,GAEM,IAAfH,EAAMU,MACRL,SAASC,KAAKC,UAAUI,OAAO,oBAInC,SAASC,EAASC,EAAsBC,EAAmBC,GAAoB,GAC7E,GAAKA,EAKL,IAAMF,EAAQD,SAAS,CAAEI,IAAKF,EAAWG,SAAU,WACnD,MAAMC,GAAKL,EAAQM,UAAYL,OAL7B,IAAMD,EAAQD,SAAS,CAAEQ,KAAMN,EAAWG,SAAU,WACpD,MAAMC,GAAKL,EAAQQ,WAAaP,YAUpBQ,EACdT,EACAU,EACAC,EAAgD,WAChDC,EAA+B,SAE/B,MAAMC,EAASC,EAAUd,EAASU,GAC5BK,EAAYF,EAAOV,IAAMO,EAAUJ,UACnCU,EAAaH,EAAON,KAAOG,EAAUF,WAErCS,EAAOP,EAAUF,WAAaE,EAAUQ,YACxCC,EAAOT,EAAUJ,UACjBc,EAAOV,EAAUJ,UAAYI,EAAUW,aAE3B,eAAdV,GAA4C,SAAdA,IACf,UAAbC,EACEI,EAPKN,EAAUF,WAOIT,EAASW,EAAWM,GAClCA,EAAahB,EAAQsB,YAAcL,GAC1ClB,EAASW,EAAWM,EAAaN,EAAUQ,YAAclB,EAAQsB,aAC9DvB,EAASW,EAAWA,EAAUF,WAAaK,EAAON,KAAOG,EAAUQ,YAAY,EAAIlB,EAAQkB,YAAY,IAG9F,aAAdP,GAA0C,SAAdA,IAC1BI,EAAYI,EAAMpB,EAASW,EAAWK,GAAW,GAC5CA,EAAYf,EAAQuB,aAAeH,GAC1CrB,EAASW,EAAWK,EAAYL,EAAUW,aAAerB,EAAQuB,cAAc","sourcesContent":["import { getOffset } from './dom';\n\nconst locks = new Set();\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.classList.add('nano-scroll-lock');\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove('nano-scroll-lock');\n  }\n}\n\nfunction scrollTo(element: HTMLElement, scrollAmt: number, vertical: boolean = false) {\n  if (!vertical) {\n    try { element.scrollTo({ left: scrollAmt, behavior: 'smooth' }); }\n    catch(e) { element.scrollLeft = scrollAmt }\n    return;\n  }\n  try { element.scrollTo({ top: scrollAmt, behavior: 'smooth' }); }\n  catch(e) { element.scrollTop = scrollAmt }\n}\n\n/**\n * Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  position: 'center' | 'start' = 'start'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (position === 'start') {\n      if (offsetLeft < minX) scrollTo(container, offsetLeft);\n      else if (offsetLeft + element.clientWidth > maxX)\n        scrollTo(container, offsetLeft - container.offsetWidth + element.clientWidth);\n    } else scrollTo(container, container.scrollLeft + offset.left - container.offsetWidth/2 + element.offsetWidth/2);\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (offsetTop < minY) scrollTo(container, offsetTop, true);\n    else if (offsetTop + element.clientHeight > maxY) {\n      scrollTo(container, offsetTop - container.offsetHeight + element.clientHeight, true);\n    }\n  }\n}\n"]}

package/dist/nano-components/p-7a5c980c.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,e as h,g as e}from"./p-7a6bc3c5.js";import{i as n}from"./p-6a284815.js";import{r as o,h as r,b as a}from"./p-190e2d91.js";import{a as c}from"./p-4087e0d9.js";import{d as l}from"./p-3796f493.js";function d(t,i){let s=i instanceof Document?document.documentElement:i;return c(t,s)}const k=class{constructor(s){t(this,s),this.nanoStuck=i(this,"nanoStuck",7),this.nanoUnstuck=i(this,"nanoUnstuck",7),this.nanoHide=i(this,"nanoHide",7),this.nanoShow=i(this,"nanoShow",7),this.isRtl=!1,this.scrollPosCache=0,this.scrollPosThresholdCache=0,this.cacheOffset=0,this.pauseResizeWatcher=!1,this.listenForScrollParent=!1,this.positions=[],this.pauseHide=!1,this.hasBootstrapped=!1,this.isStuck=!1,this.isRootSticker=!0,this.hide=!1,this.scrollHide=!1,this.multiStickerHide=!1,this.scrollingTo=!1,this.quietModeIsOn=!1,this.stuckCounter=0,this.stickerIndex=0,this._offset=0,this.autoResize=!0,this.isSticky=!0,this.offset=0,this.position="top",this.quietMode={h:600,w:600},this.hideOnNewStickers=!0,this.breakPointMax=null,this.breakPointMin=null,this.setupParentResizeListener=()=>{this.parentSizeObserver&&(this.parentSizeObserver.disconnect(),this.parentSizeObserver=void 0),this.parentSizeObserver=new n((t=>{for(const i of t){let t,s;i.contentRect.height&&(t=i.contentRect.height),i.contentRect.width&&(s=i.contentRect.width),"object"==typeof this.quietMode&&(this.quietModeIsOn=s<this.quietMode.w||t<this.quietMode.h),this.breakPointMin&&(this.isSticky=s>this.breakPointMin),this.breakPointMax&&(this.isSticky=s<this.breakPointMax),this.isRootSticker&&this.sticker&&this.autoResize&&(this.sticker.style.width=this.host.scrollWidth+"px")}}));let t=this.scrollParent instanceof Document?this.scrollParent.documentElement:this.scrollParent;t&&this.parentSizeObserver.observe(t)},this.onStickToDisplayEvent=t=>{if(t.detail.sticker===this.stickToEle)switch(t.type){case"nanoHide":this._offset=0,this.cacheOffset=this.offset,this.offset=0,this.isStuck||this.moveTrigger(!1),!this.isRootSticker&&this.quietModeIsOn&&o((()=>{this.stickToEle.style.minHeight=this.stickToEleInitSize.height+(this.host.scrollHeight+("object"==typeof this.cacheOffset?this.cacheOffset.v:this.cacheOffset))+"px",this.stickToEle.setTriggerPos(-1*this.stickToEleInitSize.height)}));break;case"nanoShow":this._offset=this.stickToEleInitSize.height,this.offset=this.cacheOffset,this.moveTrigger(!0),!this.isRootSticker&&this.quietModeIsOn&&o((()=>{this.stickToEle.style.minHeight="",this.stickToEle.setTriggerPos(0)}));break;case"nanoStuck":this.stickToEleInitSize=this.stickToEle.getBoundingClientRect(),this._offset=this.stickToEleInitSize.height}},this.onStickEvent=async t=>{let i=t.detail?t.detail.sticker:null;if(!i||i.position!==this.position)return;const s=await i.getTriggerPos();if("nanoStuck"===t.type&&i!==this.host&&i.scrollParent===this.host.scrollParent){if(this.stickerIndex++,!this.hideOnNewStickers)return;(this.positions.includes("top")&&this.triggerPos.top<s.top||this.positions.includes("bottom")&&this.triggerPos.top>s.top)&&(this.multiStickerHide=!0,this.stuckCounter++)}if("nanoUnstuck"===t.type&&i!==this.host&&i.scrollParent===this.host.scrollParent){if(this.stickerIndex--,!this.hideOnNewStickers)return;(this.positions.includes("top")&&this.triggerPos.top<s.top||this.positions.includes("bottom")&&this.triggerPos.top>s.top)&&(this.stuckCounter--,this.stuckCounter<1&&(this.multiStickerHide=!1))}},this.onScroll=()=>{let t=(i=this.scrollParent)instanceof Document?window.pageYOffset:i.scrollTop;var i;t<this.scrollPosCache&&(this.positions.includes("bottom")?this.handleScrollAway(t):this.handleScrollTo()),t>this.scrollPosCache&&(this.positions.includes("bottom")?this.handleScrollTo():this.handleScrollAway(t)),this.scrollPosCache=t}}async isHiding(){return this.hide}async isSticking(){return this.shouldStick(),this.isStuck}async setTriggerPos(t){return this._offset=t}async getTriggerPos(){return this.triggerPos}async pauseHiding(t){return this.pauseHide=t}updateTriggerOffset(){this.trigger&&this.scrollParent&&this.listenForScrollParent&&(this.triggerPos=d(this.trigger,this.scrollParent))}stickerResizeListener(){this.contentSizeObserver&&(this.contentSizeObserver.disconnect(),this.contentSizeObserver=void 0),this.contentSizeObserver=new n((t=>{for(const i of t){if(this.pauseResizeWatcher)return;i.contentRect.height&&("top"===this.position&&(this.host.style.height=i.contentRect.height+"px"),"bottom"===this.position&&(this.host.style.minHeight=i.contentRect.height+"px"))}})),this.contentSizeObserver.observe(this.content)}quietModeChange(){"on"===this.quietMode?o((()=>this.quietModeIsOn=!0)):"off"===this.quietMode&&o((()=>this.quietModeIsOn=!1))}setOffset(){let t,i,s,h;this.trigger.setAttribute("style","");let e=this.isRootSticker||this.stickToEle?this.sticker:this.host;if(!e)return;"object"==typeof this.offset?({v:t,h:i}=this.offset):t=i=this.offset,"object"==typeof this._offset?({v:t=s,h:i=h}=this._offset):s=h=this._offset;const n=s=>{let h=s.match(/(top|bottom)/)?t:i;o(s),e.style[s]=h+"px",a()&&this.host.style.setProperty("--hide-transform-amount",h?`(110% + ${h}px)`:null)},o=e=>{let n=e.match(/(top|bottom)/)?t+s:i+h;this.trigger.style[e]=-1*n+"px",this.trigger.style.position="relative",this.trigger.style.height="1px"};(this.positions.includes("start")&&this.isRtl||this.positions.includes("end")&&!this.isRtl)&&n("right"),(this.positions.includes("end")&&this.isRtl||this.positions.includes("start")&&!this.isRtl)&&n("left"),this.positions.includes("top")&&n("top"),this.positions.includes("bottom")&&n("bottom")}positionChange(){this.positions=this.position.split("-"),this.setOffset()}async stuckChange(){if(this.isStuck)if(this.stickToEle){let t=r(this.host)?this.host.children:this.content.children;this.slottedContent=Array.from(t),this.slottedContent.forEach((t=>{r(this.host)?this.stickToEle.appendChild(t):this.stickToEle.querySelector(".sticker-content").appendChild(t),t.style.order=this.stickerIndex+""})),this.nanoStuck.emit({sticker:this.stickToEle})}else this.nanoStuck.emit({sticker:this.host});else this.scrollHide=!1,this.stickToEle?(this.slottedContent.forEach((t=>{this.host.appendChild(t),t.style.order=""})),this.nanoUnstuck.emit({sticker:this.stickToEle})):this.nanoUnstuck.emit({sticker:this.host})}attachScrollListeners(){this.quietModeIsOn?this.scrollParent.addEventListener("scroll",this.onScroll,{passive:!0,capture:!1}):(this.scrollParent.removeEventListener("scroll",this.onScroll),this.moveTrigger(!0))}handleParentEvents(t,i=null){this.listenForScrollParent&&(i&&this.manageListenersOnParent(!1,i),this.scrollParent&&this.manageListenersOnParent(!this.stickToEle))}stickToEleChange(t,i){this.stickToEle&&(this.stickToEle.addEventListener("nanoHide",this.onStickToDisplayEvent),this.stickToEle.addEventListener("nanoShow",this.onStickToDisplayEvent),this.stickToEle.addEventListener("nanoStuck",this.onStickToDisplayEvent),this.stickToEle.addEventListener("nanoUnstuck",this.onStickToDisplayEvent)),i&&(i.removeEventListener("nanoHide",this.onStickToDisplayEvent),i.removeEventListener("nanoShow",this.onStickToDisplayEvent),i.removeEventListener("nanoStuck",this.onStickToDisplayEvent),i.removeEventListener("nanoUnstuck",this.onStickToDisplayEvent))}stickToChange(){this.stickToEle=this.stickTo?this.scrollParent.querySelector(this.stickTo):void 0}visibilityDecisionHandler(){this.hide=!(!this.multiStickerHide&&!this.scrollHide)}handleHideChange(){this.hide?this.nanoHide.emit({sticker:this.host}):this.nanoShow.emit({sticker:this.host})}setupIO(){if(this.io&&(this.io.disconnect(),this.io=void 0),!this.scrollParent||!this.hasBootstrapped||!this.trigger)return;this.isRootSticker=this.scrollParent instanceof Document;let t=this.scrollParent;this.scrollParent instanceof Document&&(t=null),this.io=new window.IntersectionObserver((t=>{!this.pauseResizeWatcher&&this.isSticky&&this.shouldStick(t.slice(-1)[0])}),{root:t}),this.io.observe(this.trigger)}manageListenersOnParent(t,i){let s=i||this.scrollParent;if(s){if(t)s.addEventListener("nanoStuck",this.onStickEvent),s.addEventListener("nanoUnstuck",this.onStickEvent),this.quietModeIsOn&&this.attachScrollListeners();else try{this.quietModeIsOn&&s.removeEventListener("scroll",this.onScroll),s.removeEventListener("nanoStuck",this.onStickEvent),s.removeEventListener("nanoUnstuck",this.onStickEvent)}catch(h){console.error("Events haven`t been added")}this.setupParentResizeListener()}}handleScrollTo(){this.scrollPosThresholdCache=null,this.scrollHide&&(!0!==this.scrollingTo&&(this._offset=this.cacheOffset||this._offset),this.scrollingTo=!0,this.scrollHide=!1)}handleScrollAway(t){this.scrollHide||this.isStuck&&(!1!==this.scrollingTo&&(this.cacheOffset=this._offset,this._offset=0),this.scrollingTo=!1,this.scrollPosThresholdCache?!this.pauseHide&&Math.abs(t-this.scrollPosThresholdCache)>100&&(this.scrollHide=!0):this.scrollPosThresholdCache=t)}moveTrigger(t){this.positions.includes("bottom")&&!t||!this.positions.includes("bottom")&&t?this.host.parentNode.insertBefore(this.trigger,this.host):this.host.parentNode.insertBefore(this.trigger,this.host.nextSibling)}getScrollParent(){const t=/(auto|scroll)/,i=(t,s)=>null===t.parentNode?s:i(t.parentNode,s.concat([t])),s=(t,i)=>getComputedStyle(t,null).getPropertyValue(i),h=document.documentElement.getBoundingClientRect().height;return(e=>{if(e instanceof HTMLElement)return i(e,[]).find((i=>(i=>t.test((t=>s(t,"overflow")+s(t,"overflow-y")+s(t,"overflow-x"))(i)))(i)&&i.getBoundingClientRect().height!==h))||document})(this.host)}shouldStick(t){let i;if(this.positions.includes("top"))i=this.isRootSticker?this.trigger.getBoundingClientRect().top:d(this.trigger,this.scrollParent).top,this.isStuck=i<-1;else if(this.positions.includes("bottom")){i=this.trigger.getBoundingClientRect().top;const s=t&&t.rootBounds?t.rootBounds:(this.scrollParent instanceof Document?document.documentElement:this.scrollParent).getBoundingClientRect();this.isStuck=i>s.height+s.top}}bootstrapGurantor(){this.hasBootstrapped=!0,this.scrollParent=this.scrollParent||this.getScrollParent(),this.isRootSticker=this.scrollParent instanceof Document,this.trigger=this.trigger||document.createElement("div"),this.trigger.classList.add("sticker-trigger"),this.positionChange(),this.moveTrigger(!0),this.quietModeChange(),this.listenForScrollParent=!0,this.handleParentEvents(!0),this.stickerIndex=Array.from(this.scrollParent.querySelectorAll("nano-sticker")).filter((t=>t.position===this.position)).findIndex((t=>t===this.host)),this.setOffset(),this.stickerResizeListener(),this.setupParentResizeListener(),this.slottedContent=Array.from(this.host.children),this.slottedContent.forEach((t=>{t.style.order=this.stickerIndex+""})),this.updateTriggerOffset(),this.stickToChange(),this.setupIO(),this.onStickToDisplayEvent=l(this.onStickToDisplayEvent,50)}connectedCallback(){this.isRtl="rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir,document.documentElement.addEventListener("nanoComponentsReady",(()=>{setTimeout((()=>this.bootstrapGurantor()),200)})),setTimeout((()=>{this.hasBootstrapped||this.bootstrapGurantor()}),1e3)}disconnectedCallback(){this.io&&(this.io.disconnect(),this.io=void 0),this.parentSizeObserver&&(this.parentSizeObserver.disconnect(),this.parentSizeObserver=void 0),this.quietMode="off",this.scrollParent=null}render(){return s(h,{sticky:!this.isRootSticker&&!this.stickToEle&&this.isSticky,hide:this.hide&&this.isStuck,siblings:this.stuckCounter,index:this.stickerIndex,stuck:this.isStuck&&this.isSticky,"placed-bottom":this.positions.includes("bottom"),"placed-top":this.positions.includes("top"),"placed-end":this.positions.includes("end"),"placed-start":this.positions.includes("start")},s("div",{class:{sticker:!0,sticky:this.isRootSticker&&this.isSticky,stuck:this.isStuck&&this.isRootSticker&&this.isSticky,hide:this.isRootSticker&&this.hide&&this.isStuck},ref:t=>this.sticker=t},s("div",{class:"sticker-content",ref:t=>this.content=t},s("slot",null))))}get host(){return e(this)}static get watchers(){return{trigger:["updateTriggerOffset"],scrollParent:["updateTriggerOffset","handleParentEvents","setupIO"],position:["stickerResizeListener","positionChange"],quietMode:["quietModeChange"],offset:["setOffset"],_offset:["setOffset"],isStuck:["stuckChange"],quietModeIsOn:["attachScrollListeners"],stickToEle:["handleParentEvents","stickToEleChange"],stickTo:["stickToChange"],multiStickerHide:["visibilityDecisionHandler"],scrollHide:["visibilityDecisionHandler"],hide:["handleHideChange"]}}};k.style=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--stuck-left:initial;--stuck-right:initial;--stuck-z-index:var(--nano-layer-index-menubar, 10);--top-hide:translateY(-110%);--bottom-hide:translateY(110%);display:block;max-width:100%}:host([sticky]){position:-webkit-sticky;position:sticky;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;will-change:min-height}:host([sticky][stuck]){left:var(--stuck-left);right:var(--stuck-right);z-index:var(--stuck-z-index) !important}:host([sticky][hide][placed-top]){-webkit-transform:var(--top-hide);transform:var(--top-hide)}:host([sticky][hide][placed-bottom]){-webkit-transform:var(--bottom-hide);transform:var(--bottom-hide)}:host([sticky][index="1"]){z-index:calc( var(--stuck-z-index) + 1)}:host([sticky][index="2"]){z-index:calc( var(--stuck-z-index) + 2)}:host([sticky][index="3"]){z-index:calc( var(--stuck-z-index) + 3)}:host([sticky][index="4"]){z-index:calc( var(--stuck-z-index) + 4)}:host([sticky][index="5"]){z-index:calc( var(--stuck-z-index) + 5)}.sticker{display:inherit;max-width:inherit;width:100%}.sticker:not(.stuck){width:auto !important}.sticker.sticky{-webkit-transition:0.3s ease all;transition:0.3s ease all;position:relative}:host([index="1"]) .sticker.sticky{z-index:calc( var(--stuck-z-index) + 1)}:host([index="2"]) .sticker.sticky{z-index:calc( var(--stuck-z-index) + 2)}:host([index="3"]) .sticker.sticky{z-index:calc( var(--stuck-z-index) + 3)}:host([index="4"]) .sticker.sticky{z-index:calc( var(--stuck-z-index) + 4)}:host([index="5"]) .sticker.sticky{z-index:calc( var(--stuck-z-index) + 5)}.sticker.stuck{position:fixed;left:var(--stuck-left);right:var(--stuck-right);z-index:var(--stuck-z-index);-webkit-transform:translateY(0);transform:translateY(0)}:host([placed-top]) .sticker.stuck{top:0}:host([placed-bottom]) .sticker.stuck{bottom:0}:host([placed-top]) .sticker.stuck.hide{-webkit-transform:var(--top-hide);transform:var(--top-hide)}:host([placed-bottom]) .sticker.stuck.hide{-webkit-transform:var(--bottom-hide);transform:var(--bottom-hide)}.sticker-content{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}';export{k as nano_sticker}
-//# sourceMappingURL=p-7a5c980c.entry.js.map