npm - @nanoporetech-digital/components - Versions diffs - 3.5.1 → 3.6.0 - Mend

@nanoporetech-digital/components 3.5.1 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

package/dist/nano-components/p-dc50b93c.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"names":["tabGroupCss","TabGroup","this","initialTouchX","initialTouchY","mutationObservers","WeakMap","updateScrollControls","noScrollControls","hasScrollControls","includes","placement","nav","scrollWidth","clientWidth","tabs","handleClick","event","target","tab","closest","setActiveTab","handleKeyDown","key","preventDefault","activeEl","document","activeElement","tagName","toLowerCase","getAllActiveTabs","index","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","stopPropagation","handleTabScroll","hideControlLeft","hideControlRight","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","disableSwipe","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","handleContentSlotChange","setTimeout","setAriaLabels","getActiveTab","handleTabSlotChange","ev","nodes","assignedElements","flatten","forEach","node","get","mo","MutationObserver","syncActiveTabIndicator","set","observe","characterData","childList","subtree","[object Object]","activeTab","panel","find","rightBtn","displayTransition","leftBtn","_","getAllTabs","filter","disabled","getDirectChildren","host","getAllPanels","emitEvents","previousTab","map","name","removeAttribute","nanoTabHide","emit","nanoTabShow","panels","getAttribute","width","shadowRoot","querySelector","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","activeTabIndicator","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","tabIndex","stopImmediatePropagation","closeEv","nanoTabWillClose","defaultPrevented","prevTab","show","remove","nanoTabClose","observer","IntersectionObserver","entries","intersectionRatio","storeId","ComponentStore","init","storeMethod","unobserve","focusVisible","tabGroup","resizeObserver","ResizeObserver","requestAnimationFrame","dir","ownerDocument","h","Host","class","createColorClasses","color","part","ref","nano-tab-group","nano-tab-group--top","nano-tab-group--start","nano-tab-group--has-scroll-controls","nano-tab-group--has-scroll-controls-left","nano-tab-group--has-scroll-controls-right","onClick","onKeyDown","nano-tab-group__scroll-button","nano-tab-group__scroll-button--left","btn","onScroll","role","onSlotchange","nano-tab-group__scroll-button--right","onTouchStart","onTouchEnd"],"mappings":";;;qUAAA,MAAMA,EAAc,6yNCiDPC,EAAQ,+MAWXC,KAAAC,cAAwB,KACxBD,KAAAE,cAAwB,KAGxBF,KAAAG,kBAAqD,IAAIC,QA0HzDJ,KAAAK,qBAAuB,KAC7B,GAAIL,KAAKM,iBAAkB,CACzBN,KAAKO,kBAAoB,UACpB,CACLP,KAAKO,kBACH,CAAC,OAAOC,SAASR,KAAKS,YACtBT,KAAKU,IAAIC,YAAcX,KAAKU,IAAIE,aAChCZ,KAAKU,IAAIC,YAAcX,KAAKa,KAAKD,cA0H/BZ,KAAAc,YAAeC,IACrB,MAAMC,EAASD,EAAMC,OACrB,MAAMC,EAAMD,EAAOE,QAAQ,YAE3B,GAAID,EAAKjB,KAAKmB,aAAaF,IAGrBjB,KAAAoB,cAAiBL,IAEvB,GAAI,CAAC,QAAS,KAAKP,SAASO,EAAMM,KAAM,CACtC,MAAML,EAASD,EAAMC,OACrB,MAAMC,EAAMD,EAAOE,QAAQ,YAE3B,GAAID,EAAK,CACPjB,KAAKmB,aAAaF,GAClBF,EAAMO,kBAKV,GACE,CACE,YACA,aACA,UACA,YACA,OACA,OACAd,SAASO,EAAMM,KACjB,CACA,MAAME,EAAWC,SAASC,cAE1B,GAAIF,GAAYA,EAASG,QAAQC,gBAAkB,WAAY,CAC7D,MAAMd,EAAOb,KAAK4B,iBAClB,IAAIC,EAAQhB,EAAKiB,QAAQP,GAEzB,GAAIR,EAAMM,MAAQ,OAAQ,CACxBQ,EAAQ,OACH,GAAId,EAAMM,MAAQ,MAAO,CAC9BQ,EAAQhB,EAAKkB,OAAS,OACjB,GACJ/B,KAAKgC,OAASjB,EAAMM,MAAQ,eAC3BrB,KAAKgC,OAASjB,EAAMM,MAAQ,YAC9B,CACAQ,EAAQI,KAAKC,IAAI,EAAGL,EAAQ,QACvB,GACJ7B,KAAKgC,OAASjB,EAAMM,MAAQ,cAC3BrB,KAAKgC,OAASjB,EAAMM,MAAQ,aAC9B,CACAQ,EAAQI,KAAKE,IAAItB,EAAKkB,OAAS,EAAGF,EAAQ,GAE5ChB,EAAKgB,GAAOO,WAEZ,GAAI,CAAC,OAAO5B,SAASR,KAAKS,WAAY,CACpC4B,EAAexB,EAAKgB,GAAQ7B,KAAKU,IAAK,aAAc,UAGtDK,EAAMuB,kBAENvB,EAAMO,oBAKJtB,KAAAuC,gBAAkB,KACxB,IAAKvC,KAAKO,kBAAmB,CAC3BP,KAAKwC,gBAAkBxC,KAAKyC,iBAAmB,KAC/C,OAEF,MAAMC,EAAW1C,KAAKgC,MAClBhC,KAAKU,IAAIiC,aAAe,EACxB3C,KAAKU,IAAIC,YAAcX,KAAKU,IAAIiC,aAAe3C,KAAKU,IAAIE,YAC5D,MAAMgC,EAAU5C,KAAKgC,MACjBhC,KAAKU,IAAIC,YAAcX,KAAKU,IAAIiC,aAAe3C,KAAKU,IAAIE,YACxDZ,KAAKU,IAAIiC,aAAe,EAE5B,GAAIC,EAAS,CACX5C,KAAKwC,gBAAkB,KACvBxC,KAAKyC,iBAAmB,WACnB,GAAIC,EAAU,CACnB1C,KAAKwC,gBAAkB,MACvBxC,KAAKyC,iBAAmB,SACnB,CACLzC,KAAKyC,iBAAmB,MACxBzC,KAAKwC,gBAAkB,QAInBxC,KAAA6C,eAAiB,CAACC,EAAmB,SAC3C,MAAMC,EAAW/C,KAAKgD,cACtB,IAAIC,EACJ,GAAIH,EAASG,EAAUjD,KAAKU,IAAIiC,WAAaI,EAAW,QACnDE,EAAUjD,KAAKU,IAAIiC,WAAaI,EAAW,GAEhD,IACE/C,KAAKU,IAAIwC,OAAO,CACdC,KAAMF,EACNG,SAAU,WAEZ,MAAOC,GACPrD,KAAKU,IAAIiC,WAAaM,IAIlBjD,KAAAsD,iBAAoBvC,IAC1B,GAAIf,KAAKuD,aAAc,OACvB,MAAMC,EAAQzC,EAAM0C,eAAe,GACnCzD,KAAKC,cAAgBuD,EAAME,MAC3B1D,KAAKE,cAAgBsD,EAAMG,OAGrB3D,KAAA4D,eAAkB7C,IACxB,GAAIf,KAAKuD,aAAc,OACvB,MAAMC,EAAQzC,EAAM0C,eAAe,GACnC,MAAMI,EAAQL,EAAME,MAAQ1D,KAAKC,cACjC,MAAM6D,EAAQN,EAAMG,MAAQ3D,KAAKE,cACjC,MAAM6D,EAAY,GAElB,MAAMC,EAAQhE,KAAKC,cAAgBuD,EAAMS,QACzC,MAAMC,EAAQlE,KAAKE,cAAgBsD,EAAMW,QAEzC,MAAMC,EACJnC,KAAKoC,IAAIR,IAAUE,GAAa9B,KAAKoC,IAAIP,IAAUC,EAErD,MAAMlD,EAAOb,KAAK4B,iBAClB,MAAM0C,EAAYzD,EAAK0D,WAAWC,GAAOA,EAAGC,SAE5C,GAAIL,EAAmB,CACrB,MAAMM,EACHb,EAAQ,GAAK7D,KAAKS,YAAc,OAChCoD,EAAQ,GAAK7D,KAAKS,YAAc,MAC7B,GACC,EAEP,GAAII,EAAKyD,EAAYI,GAAO,CAC1B1E,KAAKmB,aAAaN,EAAKyD,EAAYI,IAEnC,GAAIzC,KAAKoC,IAAIL,GAAS/B,KAAKoC,IAAIH,GAAQ,CACrC,GAAIF,EAAQ,EAAGhE,KAAK2E,YAAYC,aAAa,gBAAiB,aACzD5E,KAAK2E,YAAYC,aAAa,gBAAiB,WAI1D5E,KAAKC,cAAgB,KACrBD,KAAKE,cAAgB,MAGfF,KAAA6E,wBAA0B,KAChCC,YAAW,KACT9E,KAAK+E,gBACL/E,KAAKmB,aAAanB,KAAKgF,cAAgBhF,KAAK4B,iBAAiB,GAAI,WAI7D5B,KAAAiF,oBAAuBC,IAC7BJ,YAAW,KACT9E,KAAK+E,gBACL/E,KAAKuC,kBACLvC,KAAKmB,aAAanB,KAAKgF,cAAgBhF,KAAK4B,iBAAiB,GAAI,OACjE5B,KAAKK,yBACJ,KAGH,MAAM8E,EAAQD,EAAGlE,OAAOoE,iBAAiB,CAAEC,QAAS,OACpDF,EAAMG,SAASC,IACb,IAAKvF,KAAKG,kBAAkBqF,IAAID,GAAO,CACrC,MAAME,EAAK,IAAIC,kBAAiB,KAC9BZ,YAAW,KACT9E,KAAK2F,yBACL3F,KAAKuC,kBACLvC,KAAKK,yBACJ,QAELL,KAAKG,kBAAkByF,IAAIL,EAAME,GAEjCA,EAAGI,QAAQN,EAAM,CACfO,cAAe,KACfC,UAAW,KACXC,QAAS,mCAzaY,4BACD,0BACD,uCAMU,4BAKV,mEAiBW,sCAQtCC,sBACE,GAAIjG,KAAKkG,WAAalG,KAAKkG,UAAUC,QAAUnG,KAAKiB,IAAK,OACzD,MAAMA,EAAMjB,KAAK4B,iBAAiBwE,MAAM5B,GAAOA,EAAG2B,QAAUnG,KAAKiB,MACjEjB,KAAKmB,aAAaF,GAIpBgF,wBACEjG,KAAK2F,yBAIPM,+BACEjG,KAAKK,uBAIP4F,eACE,IAAKjG,KAAKqG,SAAU,OACpBC,EAAkBtG,KAAKqG,SAAU,YAAarG,KAAKyC,kBAIrDwD,cACE,IAAKjG,KAAKuG,QAAS,OACnBD,EAAkBtG,KAAKuG,QAAS,YAAavG,KAAKwC,iBAIpDyD,sBACE,GAAIjG,KAAKO,kBAAmBuE,YAAY0B,GAAMxG,KAAKuC,mBAAmB,SAEpEuC,YAAY0B,IACVxG,KAAKwC,gBAAkBxC,KAAKyC,iBAAmB,OAC9C,IAiBPwD,WAAWE,GACT,GAAInG,KAAKkG,WAAalG,KAAKkG,UAAUC,QAAUA,EAAO,OAEtD,MAAMlF,EAAMjB,KAAK4B,iBAAiBwE,MAAM5B,GAAOA,EAAG2B,QAAUA,IAE5D,GAAIlF,EAAKjB,KAAKmB,aAAaF,GAK7BW,uBACE,OAAO5B,KAAKyG,WAAWC,QAAQlC,IAAaA,EAAGmC,WAGjDF,iBACE,OAAOG,EAAsC5G,KAAK6G,KAAM,YAG1DC,mBACE,OAAOF,EACL5G,KAAK6G,KACL,oBAIJ7B,mBACE,OAAOhF,KAAK4B,iBAAiBwE,MAAM5B,GAAOA,EAAGC,SAcvCwB,aAAahF,EAAyB8F,EAAa,MACzD,GACE9F,GACAA,IAAQjB,KAAKkG,YACZjF,EAAI0F,UACL3G,KAAK4B,iBAAiBpB,SAASS,GAC/B,CACA,MAAM+F,EAAchH,KAAKkG,UACzBlG,KAAKkG,UAAYjF,EACjBjB,KAAKiB,IAAMA,EAAIkF,MAGfnG,KAAK4B,iBAAiBqF,KAAKzC,GAAQA,EAAGC,OAASD,IAAOxE,KAAKkG,YAC3DlG,KAAK8G,aAAaG,KAAKzC,IACrB,GAAIA,EAAG0C,OAASlH,KAAKkG,UAAUC,MAAO,CACpC3B,EAAGC,OAAS,KACZzE,KAAK2E,YAAcH,OACdA,EAAGC,OAAS,MACnBD,EAAG2C,gBAAgB,oBAGrBnH,KAAK2F,yBACL,GAAI,CAAC,OAAOnF,SAASR,KAAKS,WAAY,CACpC4B,EAAerC,KAAKkG,UAAWlG,KAAKU,IAAK,aAAc,UAIzD,GAAIqG,EAAY,CACd,GAAIC,EAAa,CACfhH,KAAKoH,YAAYC,KAAK,CAAEH,KAAMF,EAAYb,QAG5CnG,KAAKsH,YAAYD,KAAK,CAAEH,KAAMlH,KAAKkG,UAAUC,UAK3CF,gBACN,MAAMpF,EAAOb,KAAK4B,iBAClB,MAAM2F,EAASvH,KAAK8G,aAGpBjG,EAAKoG,KAAKhG,IACR,MAAMkF,EAAQoB,EAAOnB,MAAM5B,GAAOA,EAAG0C,OAASjG,EAAIkF,QAClD,GAAIA,EAAO,CACTlF,EAAI2D,aAAa,gBAAiBuB,EAAMqB,aAAa,OACrDrB,EAAMvB,aAAa,kBAAmB3D,EAAIuG,aAAa,WAKrDvB,yBACNjG,KAAKyG,WAAWnB,SAASrE,GACvBA,EAAI2D,aACF,YACA5E,KAAKS,YAAc,MAAQ,aAAe,cAI9C,MAAMQ,EAAMjB,KAAKgF,aACjB,MAAMyC,EAAQxG,EAAIyG,WAAWC,cAAc,aAAa/G,aAAe,EACvE,MAAMgH,EAAS3G,EAAI4G,aACnB,MAAMC,EAASC,EAAU9G,EAAKjB,KAAKa,MACnC,MAAMmH,EAAYF,EAAOG,IAAMjI,KAAKU,IAAIwH,UACxC,MAAMC,EAAaL,EAAO3E,KAE1B,OAAQnD,KAAKS,WACX,IAAK,MACHT,KAAKoI,mBAAmBC,MAAMZ,MAAQ,GAAGA,MACzCzH,KAAKoI,mBAAmBC,MAAMT,OAAS,KACvC5H,KAAKoI,mBAAmBC,MAAMC,UAAY,cAAcH,OACxD,MAEF,IAAK,QACHnI,KAAKoI,mBAAmBC,MAAMZ,MAAQ,KACtCzH,KAAKoI,mBAAmBC,MAAMT,OAAS,GAAGA,MAC1C5H,KAAKoI,mBAAmBC,MAAMC,UAAY,cAAcN,OACxD,OAIE/B,cACN,IAAKjG,KAAKU,IAAK,OAAO,EACtB,MAAM6H,EAAgBC,iBAAiBxI,KAAKU,KAC5C,IAAIE,EAAcZ,KAAKU,IAAIE,YAC3B,OAAQA,GACN6H,WAAWF,EAAcG,aACzBD,WAAWF,EAAcI,cAM7B1C,eAAef,GACb,IAAI0D,EAAW5I,KAAK4B,iBAAiBE,QAAQoD,EAAGlE,QAChD,MAAMC,EAAMiE,EAAGlE,OACf,GAAI4H,EAAW,EAAG,OAElB,MAAMzC,EAAQnG,KAAK8G,aAAaV,MAAM5B,GAAOA,EAAG0C,OAASjG,EAAIkF,QAC7D,IAAKA,EAAO,OAEZjB,EAAG2D,2BAEH,MAAMC,EAAU9I,KAAK+I,iBAAiB1B,KAAK,CAAEH,KAAMjG,EAAIkF,QACvD,GAAI2C,EAAQE,iBAAkB,OAG9B,GAAI/H,EAAIwD,OAAQ,CACdmE,EAAWA,IAAa,EAAI,EAAIA,EAAW,EAC3C,MAAMK,EAAUjJ,KAAK4B,iBAAiBgH,IAAWzC,MACjD,GAAI8C,EAASjJ,KAAK6G,KAAKqC,KAAKD,GAG9BhI,EAAIkI,SACJhD,EAAMgD,SACNnJ,KAAKoJ,aAAa/B,KAAK,CAAEH,KAAMjG,EAAIkF,QA6LrCF,mBAEE,MAAMoD,EAAW,IAAIC,sBAAqB,CAACC,EAASF,KAClD,GAAIE,EAAQ,GAAGC,kBAAoB,EAAG,CACpCxJ,KAAK+E,gBACL/E,KAAKmB,aAAanB,KAAKgF,cAAgBhF,KAAK4B,iBAAiB,GAAI,OAEjE,GAAI5B,KAAKyJ,QACPC,EAAeC,KAAK3J,KAAM,CAAC,OAAQA,KAAK4J,YAAa5J,KAAKyJ,SAC5DJ,EAASQ,UAAUN,EAAQ,GAAGvI,YAGlCqI,EAASxD,QAAQ7F,KAAK6G,MACtBiD,EAAajE,QAAQ7F,KAAK+J,UAE1B,GAAI/J,KAAKuG,QAAS,CAChBuD,EAAajE,QAAQ7F,KAAKuG,SAC1BuD,EAAajE,QAAQ7F,KAAKqG,UAG5BrG,KAAKgK,eAAiB,IAAIC,gBAAe,KACvCnF,YAAW,KACT9E,KAAKK,uBACLL,KAAK2F,yBACLtD,EAAerC,KAAKkG,UAAWlG,KAAKU,IAAK,aAAc,YACtD,QAELV,KAAKgK,eAAenE,QAAQ7F,KAAKU,KAEjCwJ,uBAAsB,IAAMlK,KAAKK,yBAGnC4F,oBACEjG,KAAKgC,MACHhC,KAAK6G,KAAKsD,MAAQ,OACjBnK,KAAK6G,KAAKuD,cAA2BD,MAAQ,MAGlDlE,uBACE6D,EAAaD,UAAU7J,KAAK+J,UAC5B,GAAI/J,KAAKuG,QAAS,CAChBuD,EAAaD,UAAU7J,KAAKuG,SAC5BuD,EAAaD,UAAU7J,KAAKqG,UAE9B,GAAIrG,KAAKgK,eAAgBhK,KAAKgK,eAAeH,UAAU7J,KAAKU,KAG9DuF,SACEjG,KAAKgC,MAAShC,KAAK6G,KAAKuD,cAA2BD,MAAQ,MAE3D,OACEE,EAACC,EAAI,CACHC,MAAO,IAAKC,EAAmBxK,KAAKyK,QACpCN,IAAKnK,KAAKgC,MAAQ,MAAQ,MAE1BqI,EAAA,MAAA,CACEK,KAAK,OACLC,IAAMnG,GAAQxE,KAAK+J,SAAWvF,EAC9B+F,MAAO,CACLK,iBAAkB,KAClBC,sBAAuB7K,KAAKS,YAAc,MAC1CqK,wBAAyB9K,KAAKS,YAAc,QAC5CsK,sCAAuC/K,KAAKO,kBAC5CyK,4CAA6ChL,KAAKwC,gBAClDyI,6CAA8CjL,KAAKyC,kBAErDyI,QAASlL,KAAKc,YACdqK,UAAWnL,KAAKoB,eAEhBiJ,EAAA,MAAA,CAAKE,MAAM,gCAAgCG,KAAK,OAC7C1K,KAAKS,YAAc,OAClB4J,EAAA,SAAA,CACEE,MAAO,CACLa,gCAAiC,KACjCC,sCAAuC,MAEzCV,IAAMW,GAAStL,KAAKuG,QAAU+E,EAC9BJ,QAAS,IAAMlL,KAAK6C,eAAe,QAEnCwH,EAAA,YAAA,CAAWnD,KAAK,wBAGpBmD,EAAA,MAAA,CACEM,IAAMnG,GAAQxE,KAAKU,IAAM8D,EACzB+F,MAAM,sBACNgB,SAAUvL,KAAKuC,iBAEf8H,EAAA,MAAA,CACEM,IAAMnG,GAAQxE,KAAKa,KAAO2D,EAC1BkG,KAAK,OACLH,MAAM,uBACNiB,KAAK,WAELnB,EAAA,MAAA,CACEM,IAAMnG,GAAQxE,KAAKoI,mBAAqB5D,EACxCkG,KAAK,uBACLH,MAAM,yCAERF,EAAA,OAAA,CAAMnD,KAAK,OAAOuE,aAAczL,KAAKiF,wBAGxCjF,KAAKS,YAAc,OAClB4J,EAAA,SAAA,CACEE,MAAO,CACLa,gCAAiC,KACjCM,uCAAwC,MAE1Cf,IAAMW,GAAStL,KAAKqG,SAAWiF,EAC/BJ,QAAS,IAAMlL,KAAK6C,eAAe,OAEnCwH,EAAA,YAAA,CAAWnD,KAAK,0BAItBmD,EAAA,OAAA,CAAMnD,KAAK,uBACXmD,EAAA,MAAA,CACEK,KAAK,OACLH,MAAM,uBACNoB,aAAc3L,KAAKsD,iBACnBsI,WAAY5L,KAAK4D,gBAEjByG,EAAA,OAAA,CAAMoB,aAAczL,KAAK6E","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n * @prop --indicator-color: defaults to #{map.get($colors, lightblue)} on placement 'top' and #{map.get($colors, blue)} on placement 'start';\n * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get($colors, lightgrey)};\n * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n * @prop --scroll-btn-color: defaults to 'currentColor';\n\n * @prop --content-padding: defaults to 2rem 2.5rem;\n * @prop --content-bg: defaults to rgb(var(--background-rgb));\n * @prop --content-border-radius: defaults to var(--border-radius);\n\n * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-top: defaults to 0;\n * @prop --tabs-padding-bottom: defaults to 0;\n * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n * @prop --tab-border-radius: defaults to var(--border-radius);\n * @prop --tab-text-color: defaults to #{map.get($colors, blue)} on placement 'top' and #{map.get($colors, darkgrey)} on placement 'start';\n * @prop --fade-transparency: controls the strength of the fade on overflowing tabs, defaults to 0;\n */\n\n:host {\n --indicator-transition: #{$transition-fast};\n --indicator-color: #{map.get($colors, lightblue)};\n --indicator-track-color: #{map.get($colors, lightgrey)};\n --indicator-size: 0;\n --border-radius: #{$layer-border-radius};\n --background-rgb: #{$layer-bg-color-rgb};\n --scroll-btn-color: 'currentColor';\n --content-padding: 2rem 2.5rem;\n --content-bg: rgb(var(--background-rgb));\n --content-border-radius: var(--border-radius);\n --tabs-padding-start: 2.5rem;\n --tabs-padding-end: 2.5rem;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tabs-container-bg: 'transparent';\n --tabs-bg-rgb: var(--background-rgb);\n --tab-border-radius: var(--border-radius);\n --tab-text-color: #{map.get($colors, blue)};\n --shadow-opacity: 0.1;\n --fade-transparency: 0;\n\n display: block;\n position: relative;\n z-index: #{$layer-index-raised};\n\n @media only screen and (max-width: 768px) {\n --tabs-padding-start: 1.5rem;\n --tabs-padding-end: 1.5rem;\n }\n\n ::slotted(nano-tab) {\n --tab-indicator-color: var(--indicator-color);\n --bg-rgb: var(--tabs-bg-rgb);\n --border-radius: var(--tab-border-radius);\n }\n}\n\n:host([placement='start']),\n:host([placement='end']) {\n --content-padding: 1rem;\n --tabs-padding-start: 0;\n --tabs-padding-end: 0;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tab-text-color: #{map.get($colors, darkgrey)};\n --indicator-color: #{map.get($colors, blue)};\n --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n --tab-text-color: rgba(var(--nano-color-base-rgb), 0.7);\n\n ::slotted(nano-tab) {\n --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n }\n}\n\n.nano-tab-group {\n display: flex;\n border-radius: 0;\n width: 100%;\n flex: inherit;\n\n &__tabs {\n display: flex;\n position: relative;\n width: 100%;\n }\n\n &__active-tab-indicator {\n position: absolute;\n transition: var(--indicator-transition) transform ease, var(--indicator-transition) width ease;\n }\n\n &__body {\n background: var(--content-bg);\n }\n\n &:not(.focus-visible) ::slotted(nano-tab) {\n --focus-shadow: none;\n }\n\n .nano-tab-group__nav-container {\n position: relative;\n display: flex;\n background: var(--tabs-container-bg);\n }\n\n button {\n appearance: none;\n background-color: transparent;\n }\n\n &__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n inset-block: 0;\n border: unset;\n z-index: 2;\n transition: #{$transition-fast} ease opacity;\n opacity: 0;\n color: var(--scroll-btn-color);\n\n &:focus {\n outline: none;\n }\n\n &.is-shown {\n opacity: 1;\n }\n\n &.focus-visible:focus {\n box-shadow: #{$control-focus-style} inset;\n }\n\n &--left {\n inset-inline-start: 0;\n }\n\n &--right {\n inset-inline-end: 0;\n }\n\n nano-icon {\n font-size: 16px;\n }\n }\n\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n // Top\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n &--top {\n flex-direction: column;\n\n .nano-tab-group__nav-container {\n &::after {\n content: '';\n width: 86%;\n box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));\n height: 10px;\n position: absolute;\n inset-inline-start: 7%;\n inset-block-end: -10px;\n border-radius: 10px;\n z-index: -1;\n }\n }\n\n .nano-tab-group__nav {\n @include hide-scrollbar();\n\n padding-inline: var(--tabs-padding-start) var(--tabs-padding-end);\n padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n transition: #{$transition-medium} ease;\n background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);\n mask-repeat: no-repeat;\n mask-image:\n linear-gradient(\n to left,\n rgba(0, 0, 0, var(--fade-transparency)) 0,\n rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start),\n rgba(0, 0, 0, 1) calc(var(--tabs-padding-start) * 2),\n rgba(0, 0, 0, 1) calc(100% - (var(--tabs-padding-end) * 2)),\n rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)),\n rgba(0, 0, 0, var(--fade-transparency))\n );\n mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n mask-position: calc(var(--tabs-padding-end) * -2);\n\n &::after {\n content: ' ';\n padding-inline: 0 var(--tabs-padding-end);\n padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n line-height: 1;\n flex: 0 0 auto;\n }\n }\n\n &.nano-tab-group--has-scroll-controls-left {\n .nano-tab-group__nav {\n mask-position: 0;\n mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n }\n }\n\n &.nano-tab-group--has-scroll-controls-right {\n .nano-tab-group__nav {\n mask-position: calc(var(--tabs-padding-end) * -1);\n mask-size: calc(100% + var(--tabs-padding-end));\n }\n }\n\n &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n .nano-tab-group__nav {\n mask-size: 100%;\n mask-position: 0;\n }\n }\n\n .nano-tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n text-align: center;\n color: var(--tab-text-color);\n width: auto;\n }\n\n .nano-tab-group__active-tab-indicator {\n inset-block-end: -2px;\n border-block-end: solid var(--indicator-size) var(--indicator-color);\n }\n\n .nano-tab-group__body {\n order: 2;\n background: var(--content-bg);\n position: relative;\n overflow: hidden;\n width: auto;\n display: flex;\n justify-content: center;\n padding: var(--content-padding);\n border-radius: var(--content-border-radius);\n flex: 1 1 auto;\n }\n }\n\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n // Start\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n &--start {\n flex-direction: row;\n\n .nano-tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n color: var(--tab-text-color);\n background: rgb(var(--tabs-bg-rgb));\n border-inline-start: solid var(--indicator-size) var(--indicator-track-color);\n text-align: start;\n }\n\n .nano-tab-group__active-tab-indicator {\n inset-inline-start: calc(-1 * 2px);\n border-inline-start: solid var(--indicator-size) var(--indicator-color);\n }\n\n .nano-tab-group__body {\n flex: 1 1 auto;\n order: 2;\n padding: var(--content-padding);\n overflow: hidden;\n border-start-start-radius: 0;\n border-start-end-radius: var(--content-border-radius);\n border-end-end-radius: var(--content-border-radius);\n border-end-start-radius: 0;\n }\n }\n}\n","import {\n Component,\n Element,\n ComponentInterface,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n Listen,\n} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { scrollIntoView } from '../../utils/scroll';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../interface';\n\n/**\n * A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n *\n * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizonal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n *\n * @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n *\n * @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n */\n\n@Component({\n tag: 'nano-tab-group',\n styleUrl: 'tab-group.scss',\n shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n private activeTab: HTMLNanoTabElement;\n private activePanel: HTMLNanoTabContentElement;\n private activeTabIndicator: HTMLElement;\n private nav: HTMLElement;\n private tabGroup: HTMLElement;\n private tabs: HTMLElement;\n private rightBtn: HTMLButtonElement;\n private leftBtn: HTMLButtonElement;\n\n private isRtl: boolean;\n private initialTouchX: number = null;\n private initialTouchY: number = null;\n\n private resizeObserver: ResizeObserver;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n @Element() host: HTMLNanoTabGroupElement;\n\n @State() hasScrollControls = false;\n @State() hideControlRight = true;\n @State() hideControlLeft = true;\n @State() tab: string;\n\n /**\n * The placement of the tabs.\n */\n @Prop() placement: 'top' | 'start' = 'top';\n\n /**\n * Disables the scroll arrows that appear when tabs overflow.\n */\n @Prop() noScrollControls = false;\n\n /**\n * The color to use from the application's color palette.\n */\n @Prop() color?: Color;\n\n /**\n * Store the currently open tab (against this ID) in the component store.\n * Use in conjunction with storeMethod\n */\n @Prop() storeId?: string;\n\n /**\n * The method of storage.\n * Either session storage, url hash (after the '#') or url query (after the '?').\n */\n @Prop() storeMethod: StorageMethods = 'session';\n\n /**\n * Disable 'swipe to change tab' on devices with touch\n */\n @Prop() disableSwipe: boolean;\n\n @Watch('tab')\n handleTabNameChange() {\n if (this.activeTab && this.activeTab.panel === this.tab) return;\n const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n this.setActiveTab(tab);\n }\n\n @Watch('placement')\n handlePlacementChange() {\n this.syncActiveTabIndicator();\n }\n\n @Watch('noScrollControls')\n handleNoScrollControlsChange() {\n this.updateScrollControls();\n }\n\n @Watch('hideControlRight')\n hideRightBtn() {\n if (!this.rightBtn) return;\n displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n }\n\n @Watch('hideControlLeft')\n hideLeftBtn() {\n if (!this.leftBtn) return;\n displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n }\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n else\n setTimeout((_) => {\n this.hideControlLeft = this.hideControlRight = true;\n }, 20);\n }\n\n /** Emitted when a tab is shown. */\n @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n /** Emitted when a tab is hidden. */\n @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n /** Emitted when a closable tab is removed. */\n @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n /** Shows the specified tab panel. */\n @Method()\n async show(panel: string) {\n if (this.activeTab && this.activeTab.panel === panel) return;\n\n const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n if (tab) this.setActiveTab(tab);\n }\n\n // Internal Methods\n\n get getAllActiveTabs() {\n return this.getAllTabs.filter((el: any) => !el.disabled);\n }\n\n get getAllTabs() {\n return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n }\n\n get getAllPanels() {\n return getDirectChildren<HTMLNanoTabContentElement>(\n this.host,\n 'nano-tab-content'\n );\n }\n\n get getActiveTab() {\n return this.getAllActiveTabs.find((el) => el.active);\n }\n\n private updateScrollControls = () => {\n if (this.noScrollControls) {\n this.hasScrollControls = false;\n } else {\n this.hasScrollControls =\n ['top'].includes(this.placement) &&\n this.nav.scrollWidth > this.nav.clientWidth &&\n this.nav.scrollWidth > this.tabs.clientWidth;\n }\n };\n\n private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n if (\n tab &&\n tab !== this.activeTab &&\n !tab.disabled &&\n this.getAllActiveTabs.includes(tab)\n ) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n this.tab = tab.panel;\n\n // Sync tabs and panels\n this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n this.getAllPanels.map((el) => {\n if (el.name === this.activeTab.panel) {\n el.active = true;\n this.activePanel = el;\n } else el.active = false;\n el.removeAttribute('animation-dir');\n });\n // active tab can be changed on init - this won't be ready. No big thing\n this.syncActiveTabIndicator();\n if (['top'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }\n\n // Emit events\n if (emitEvents) {\n if (previousTab) {\n this.nanoTabHide.emit({ name: previousTab.panel });\n }\n\n this.nanoTabShow.emit({ name: this.activeTab.panel });\n }\n }\n }\n\n private setAriaLabels() {\n const tabs = this.getAllActiveTabs;\n const panels = this.getAllPanels;\n\n // Link each tab with its corresponding panel\n tabs.map((tab) => {\n const panel = panels.find((el) => el.name === tab.panel);\n if (panel) {\n tab.setAttribute('aria-controls', panel.getAttribute('id'));\n panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n }\n });\n }\n\n private syncActiveTabIndicator() {\n this.getAllTabs.forEach((tab) =>\n tab.setAttribute(\n 'direction',\n this.placement === 'top' ? 'horizontal' : 'vertical'\n )\n );\n\n const tab = this.getActiveTab;\n const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;\n const height = tab.clientHeight;\n const offset = getOffset(tab, this.tabs);\n const offsetTop = offset.top + this.nav.scrollTop;\n const offsetLeft = offset.left;\n\n switch (this.placement) {\n case 'top':\n this.activeTabIndicator.style.width = `${width}px`;\n this.activeTabIndicator.style.height = null;\n this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'start':\n this.activeTabIndicator.style.width = null;\n this.activeTabIndicator.style.height = `${height}px`;\n this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n }\n\n private getNavWidth() {\n if (!this.nav) return 0;\n const computedStyle = getComputedStyle(this.nav);\n let clientWidth = this.nav.clientWidth;\n return (clientWidth -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n }\n\n // Event handlers\n\n @Listen('nanoTabClose')\n handleTabClose(ev: CustomEvent & { target: HTMLNanoTabElement }) {\n let tabIndex = this.getAllActiveTabs.indexOf(ev.target);\n const tab = ev.target;\n if (tabIndex < 0) return;\n\n const panel = this.getAllPanels.find((el) => el.name === tab.panel);\n if (!panel) return;\n\n ev.stopImmediatePropagation();\n\n const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });\n if (closeEv.defaultPrevented) return;\n\n // Show the previous tab if the tab is currently active\n if (tab.active) {\n tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;\n const prevTab = this.getAllActiveTabs[tabIndex]?.panel;\n if (prevTab) this.host.show(prevTab);\n }\n\n tab.remove();\n panel.remove();\n this.nanoTabClose.emit({ name: tab.panel });\n }\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) this.setActiveTab(tab);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) {\n this.setActiveTab(tab);\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n const activeEl = document.activeElement as any;\n\n if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n const tabs = this.getAllActiveTabs;\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = tabs.length - 1;\n } else if (\n (this.isRtl && event.key === 'ArrowRight') ||\n (!this.isRtl && event.key === 'ArrowLeft')\n ) {\n index = Math.max(0, index - 1);\n } else if (\n (this.isRtl && event.key === 'ArrowLeft') ||\n (!this.isRtl && event.key === 'ArrowRight')\n ) {\n index = Math.min(tabs.length - 1, index + 1);\n }\n tabs[index].setFocus();\n\n if (['top'].includes(this.placement)) {\n scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n }\n // need to stop bubbling otherwise it will focus on parent tabs if nested\n event.stopPropagation();\n // stop the browser moving about\n event.preventDefault();\n }\n }\n };\n\n private handleTabScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlLeft = this.hideControlRight = true;\n return;\n }\n const endRight = this.isRtl\n ? this.nav.scrollLeft === 0\n : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n const endLeft = this.isRtl\n ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n : this.nav.scrollLeft === 0;\n\n if (endLeft) {\n this.hideControlLeft = true;\n this.hideControlRight = false;\n } else if (endRight) {\n this.hideControlLeft = false;\n this.hideControlRight = true;\n } else {\n this.hideControlRight = false;\n this.hideControlLeft = false;\n }\n };\n\n private handleBtnClick = (goRight: boolean = false) => {\n const navWidth = this.getNavWidth();\n let leftAmt;\n if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n try {\n this.nav.scroll({\n left: leftAmt,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav.scrollLeft = leftAmt;\n }\n };\n\n private handleTouchStart = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n this.initialTouchX = touch.pageX;\n this.initialTouchY = touch.pageY;\n };\n\n private handleTouchEnd = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n const threshold = 70;\n\n const xDiff = this.initialTouchX - touch.clientX;\n const yDiff = this.initialTouchY - touch.clientY;\n\n const isHorizontalSwipe =\n Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n const tabs = this.getAllActiveTabs;\n const currIndex = tabs.findIndex((el) => el.active);\n\n if (isHorizontalSwipe) {\n const toGo =\n (distX < 0 && this.placement === 'top') ||\n (distX > 0 && this.placement !== 'top')\n ? 1\n : -1;\n\n if (tabs[currIndex + toGo]) {\n this.setActiveTab(tabs[currIndex + toGo]);\n\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n else this.activePanel.setAttribute('animation-dir', 'right');\n }\n }\n }\n this.initialTouchX = null;\n this.initialTouchY = null;\n };\n\n private handleContentSlotChange = () => {\n setTimeout(() => {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n });\n };\n\n private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n setTimeout(() => {\n this.setAriaLabels();\n this.handleTabScroll();\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n this.updateScrollControls();\n }, 500);\n\n /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n const nodes = ev.target.assignedElements({ flatten: true });\n nodes.forEach((node) => {\n if (!this.mutationObservers.get(node)) {\n const mo = new MutationObserver(() => {\n setTimeout(() => {\n this.syncActiveTabIndicator();\n this.handleTabScroll();\n this.updateScrollControls();\n }, 500);\n });\n this.mutationObservers.set(node, mo);\n\n mo.observe(node, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n }\n });\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n // Initial IO - watching for all content to be loaded\n const observer = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n\n if (this.storeId)\n ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n observer.unobserve(entries[0].target);\n }\n });\n observer.observe(this.host);\n focusVisible.observe(this.tabGroup);\n\n if (this.leftBtn) {\n focusVisible.observe(this.leftBtn);\n focusVisible.observe(this.rightBtn);\n }\n\n this.resizeObserver = new ResizeObserver(() => {\n setTimeout(() => {\n this.updateScrollControls();\n this.syncActiveTabIndicator();\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }, 500);\n });\n this.resizeObserver.observe(this.nav);\n\n requestAnimationFrame(() => this.updateScrollControls());\n }\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' ||\n (this.host.ownerDocument as Document).dir === 'rtl';\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.tabGroup);\n if (this.leftBtn) {\n focusVisible.unobserve(this.leftBtn);\n focusVisible.unobserve(this.rightBtn);\n }\n if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n }\n\n render() {\n this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color) }}\n dir={this.isRtl ? 'rtl' : null}\n >\n <div\n part=\"base\"\n ref={(el) => (this.tabGroup = el)}\n class={{\n 'nano-tab-group': true,\n 'nano-tab-group--top': this.placement === 'top',\n 'nano-tab-group--start': this.placement === 'start',\n 'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n 'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n 'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n {this.placement === 'top' && (\n <button\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--left': true,\n }}\n ref={(btn) => (this.leftBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n >\n <nano-icon name=\"light/chevron-left\"></nano-icon>\n </button>\n )}\n <div\n ref={(el) => (this.nav = el)}\n class=\"nano-tab-group__nav\"\n onScroll={this.handleTabScroll}\n >\n <div\n ref={(el) => (this.tabs = el)}\n part=\"tabs\"\n class=\"nano-tab-group__tabs\"\n role=\"tablist\"\n >\n <div\n ref={(el) => (this.activeTabIndicator = el)}\n part=\"active-tab-indicator\"\n class=\"nano-tab-group__active-tab-indicator\"\n />\n <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n </div>\n </div>\n {this.placement === 'top' && (\n <button\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--right': true,\n }}\n ref={(btn) => (this.rightBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n >\n <nano-icon name=\"light/chevron-right\"></nano-icon>\n </button>\n )}\n </div>\n <slot name=\"tab-content-header\" />\n <div\n part=\"body\"\n class=\"nano-tab-group__body\"\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <slot onSlotchange={this.handleContentSlotChange} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/{cjs/table.worker-e9fb087e.js → nano-components/p-e2f9ccfa.js} RENAMED Viewed

@@ -1,4 +1,4 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-(()=>{"use strict";const t=(t,n)=>{const e=globalThis[n];return e!=null&&t instanceof e};const n=e=>{if(e!=null){if(t(e,"ArrayBuffer")||t(e,"MessagePort")||t(e,"ImageBitmap")||t(e,"OffscreenCanvas")){return[e]}if(typeof e==="object"){if(e.constructor===Object){e=Object.values(e)}if(Array.isArray(e)){return e.flatMap(n)}return n(e.buffer)}}return[]};const e={};const r="stencil.table.worker";const o=r+".cb";addEventListener("message",(async({data:t})=>{if(t&&t[0]===r){let f=t[1];let i=t[2];let s=t[3];let u=0;let c=s.length;let a;let l;try{for(;u<c;u++){if(Array.isArray(s[u])&&s[u][0]===o){const t=s[u][1];s[u]=(...n)=>{postMessage([o,t,n])}}}a=await e[i](...s)}catch(t){a=null;if(t instanceof Error){l={isError:true,value:{message:t.message,name:t.name,stack:t.stack}}}else{l={isError:false,value:t}}a=undefined}const p=n(a);postMessage([r,f,a,l],p)}}));var f=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};var i=1/0;var s="[object Symbol]";var u=/[\\^$.*+?()[\]{}|]/g,c=RegExp(u.source);var a=typeof f=="object"&&f&&f.Object===Object&&f;var l=typeof self=="object"&&self&&self.Object===Object&&self;var p=a||l||Function("return this")();var d=Object.prototype;var w=d.toString;var h=p.Symbol;var y=h?h.prototype:undefined,b=y?y.toString:undefined;function g(t){if(typeof t=="string"){return t}if($(t)){return b?b.call(t):""}var n=t+"";return n=="0"&&1/t==-i?"-0":n}function v(t){return!!t&&typeof t=="object"}function $(t){return typeof t=="symbol"||v(t)&&w.call(t)==s}function E(t){return t==null?"":g(t)}function m(t){t=E(t);return t&&c.test(t)?t.replace(u,"\\$&"):t}var x=m;function j(t,n){if(typeof t==="string"){return n.checkString(t)}else if(typeof t==="number"){return n.checkNumber(t)}else{return false}}function k(t,n,e,r){if(typeof t==="object"){if(Array.isArray(t)){for(const o of t){if(k(o,n,e,r)){return true}}}else{for(const o in t){e.push(o);const f=k(t[o],n,e,r);e.pop();if(f)return true}}}else if(n.is){if(n.is.test(e.join("."))){return!!t}else{return false}}else{const o=e.join(".");for(const t of r.ignorePaths){if(t.test(o))return false}if(r.includePaths){let t=false;for(const n of r.includePaths){if(n.test(o)){t=true;break}}if(!t)return false}if(n.key){if(!n.key.test(o))return false}return j(t,n)}return false}function A(t,n,e,r){if(n.length){let o=false;for(const f of n){if(k(t,f,[],r)?!f.negate:f.negate){if(e==="OR"){return true}o=true}else if(e==="AND"){return false}}return o}return true}function O(t,n){const e=[];let r=false;let o=0;let f="";for(let i=0;i<t.length;i++){const s=t[i];if(r){if(s===f){r=false;f=""}}else if(s==='"'||s==="'"){r=true;f=s}else if(s.match(n)&&!r){e.push(t.slice(o,i).trim());o=i+1}if(i===t.length-1){e.push(t.slice(o).trim())}}return e.map((t=>{if(t.startsWith('"')&&t.endsWith('"')){return t.slice(1,-1)}if(t.startsWith("'")&&t.endsWith("'")){return t.slice(1,-1)}return t})).filter((t=>t))}const P={"<":function t(n){const e=Number(n[0]);return t=>t<e},"<=":function t(n){const e=Number(n[0]);return t=>t<=e},"=":function t(n){const e=n[0].split(",").filter((t=>t)).map(Number);return t=>{for(let n=0;n<e.length;n++){if(t===e[n]){return true}}return false}},">=":function t(n){const e=Number(n[0]);return t=>t>=e},">":function t(n){const e=Number(n[0]);return t=>t>e},"..":function t(n){const e=Number(n[0]);const r=Number(n[1]);return t=>t>=e&&t<=r}};function R(t){const{values:n,operator:e}=D(t);const r=P[e];if(!r){throw new Error(`unknown operator ${e}`)}return r(n)}function D(t){const n=/^\s*\(?\s*(?<startOperator><=|>=|<|=|>|\.\.)?(?<firstValue>-?\d*\.?\d+)(?:(?<afterDots>\.\.)(?<secondValue>-?\d*\.?\d*))?\s*\)?\s*$/.exec(t);if(!n){return{operator:"=",values:[t]}}if(!n.groups){throw new Error("unreachable")}const{startOperator:e,firstValue:r,afterDots:o,secondValue:f}=n.groups;let i=e;let s=r?[r]:[];if(e===".."){i="<="}else if(!e&&o&&!f){i=">="}else if(o){i=".."}if(f){s.push(f)}return{values:s,operator:i||"="}}const N={"<":function t(n){return t=>t<n[0]},"<=":function t(n){return t=>t<=n[0]},"=":function t(n,e){const r=O(n[0],",").filter((t=>t)).map((t=>new RegExp(`^${x(t)}$`,e)));return t=>{for(const n of r){if(n.test(t)){return true}}return false}},"~":function t(n,e){const r=O(n[0],",").filter((t=>t)).map((t=>new RegExp(x(t),e)));return t=>{for(const n of r){if(n.test(t)){return true}}return false}},">=":function t(n){return t=>t>=n[0]},">":function t(n){return t=>t>n[0]},"..":function t(n){return t=>t>=n[0]&&t<=n[1]}};function _(t,n){const{values:e,operator:r}=I(t);const o=N[r];if(!o){throw new Error(`unreachable unknown operator ${r}`)}return o(e,n)}function I(t){const n=t.split("..");const e=/^\s*\(?(?<operator><=|<|=|>=|>)?\s*(?<value>\S*)\s*\)?$/.exec(n[0]);if(!e){return{operator:"~",values:[t]}}if(!e.groups){throw new Error("unreachable")}let{operator:r,value:o}=e.groups;let f=n[1];let i=[o];if(n.length>1){r="..";if(!f){r=">="}else if(!o){i=[f];r="<="}else{i.push(f)}}return{operator:r||"~",values:i}}function M(t,n){const{insensitive:e,pathAlias:r}=n;return t.map((t=>{const n={};if(t.startsWith("-")){n.negate=true;t=t.substring(1)}const o=t.indexOf(":");if(o>-1){const f=t.substring(o+1);if(o>0){const i=t.substring(0,o);if(i==="is"){n.is=new RegExp(`(^|\\.)${x(f)}(\\.|$)`,e)}if(r[i]){n.key=r[i]}else{n.key=new RegExp(`(^|\\.)${x(i)}(\\.|$)`,e)}}V(n,f,e)}else{V(n,t,e)}return n}))}function V(t,n,e){t.checkString=_(n,e);t.checkNumber=R(n)}function T(t,n){const{insensitive:e}=n;const r={};for(const[n,o]of Object.entries(t)){if(o instanceof RegExp){r[n]=o}else{r[n]=new RegExp(`(^|\\.)${x(o)}(\\.|$)`,e)}}return r}function B(t,n={}){let{index:e=false,predicate:r="AND",ignorePaths:o=[],includePaths:f,pathAlias:i={}}=n;const s=n.limit?n.limit:Infinity;const u=n.caseSensitive?"":"i";let c=n.keywords||[];const a=T(i,{insensitive:u});const l=o.map((t=>typeof t==="string"?new RegExp(`(^|\\.)${x(t)}(\\.|$)`,u):t));const p=f?f.map((t=>typeof t==="string"?new RegExp(`(^|\\.)${x(t)}(\\.|$)`,u):t)):undefined;if(typeof c==="string"){c=O(c,/[ \t\r\n]/)}const d=M(c,{insensitive:u,pathAlias:a});let w=0;if(e){const n=[];for(let e=0;e<t.length&&w<s;e++){if(A(t[e],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){w=n.push(e)}}return n}else{const n=[];for(let e=0;e<t.length&&w<s;e++){if(A(t[e],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){w=n.push(t[e])}}return n}}function F(t){return t.map((t=>{if(!!t.sortCompareFn){t.sortCompareFn=new Function("return "+t.sortCompareFn)()}return t}))}const S=new Map;function C(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}async function L(t,n){const e=C();S.set(e,{rows:t,columns:F(n)});return e}async function q(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;e.rows=n;if(!e.rows&&!e.columns)X(t);return true}async function z(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;e.columns=F(n);if(!e.rows&&!e.columns)X(t);return true}function G(t){const n=t.columns.find((t=>!!t.order));if(n){const{prop:t,order:e}=n;return{prop:t,order:e}}return null}function H(t,n,e,r){if(!e&&!r){const n=G(t);if(n){({prop:e,order:r}=n)}}if(!e||!r||!n.length)return n;const o=t.columns.find((t=>t.prop===e));if(!!o.sortCompareFn&&typeof o.sortCompareFn==="function"){const t=n.slice().sort(o.sortCompareFn(e,r));return t}if(o.type==="text"&&typeof n[0][e]==="string"){const t=n.slice().sort(((t,n)=>r==="asc"?t[e].localeCompare(n[e]):n[e].localeCompare(t[e])));return t}const f=n.slice().sort(((t,n)=>{if(t[e]<n[e])return r==="asc"?-1:1;if(t[e]>n[e])return r==="asc"?1:-1;return 0}));return f}async function J(t,n,e){const r=S.get(t);if(!r)throw"cannot find worker with ID "+t;const o=r.filterRows||r.rows;return H(r,o,n,e)}function K(t,n=[]){if(!n)return t;n.forEach((n=>{t=B(t,{keywords:n.filter,includePaths:[n.prop],ignorePaths:["__uuid","__index"]})}));return t}function Q(t,n){n=K(n);return H(t,n)}async function U(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;const r=!n||!n.length?await W(t,e.searchTerm):e.filterRows||e.rows;e.filterRows=K(r,n);return H(e,e.filterRows)}async function W(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;e.searchTerm=n;if(!n||!n.length){e.filterRows=e.rows;return Q(e,e.rows)}const r=e.columns.filter((t=>t.searchable!==false));e.filterRows=B(e.rows,{keywords:n,predicate:"OR",includePaths:[...r.map((t=>t.prop))],ignorePaths:["__uuid","__index"]});return Q(e,e.filterRows)}async function X(t){S.delete(t)}e.createWorkerStore=L;e.destroyWorkerStore=X;e.syncConfigToWorker=z;e.syncDataToWorker=q;e.workerFilter=U;e.workerSearch=W;e.workerSort=J})();
+(()=>{"use strict";const t=(t,n)=>{const e=globalThis[n];return e!=null&&t instanceof e};const n=e=>{if(e!=null){if(t(e,"ArrayBuffer")||t(e,"MessagePort")||t(e,"ImageBitmap")||t(e,"OffscreenCanvas")){return[e]}if(typeof e==="object"){if(e.constructor===Object){e=Object.values(e)}if(Array.isArray(e)){return e.flatMap(n)}return n(e.buffer)}}return[]};const e={};const r="stencil.table.worker";const o=r+".cb";addEventListener("message",(async({data:t})=>{if(t&&t[0]===r){let f=t[1];let i=t[2];let s=t[3];let u=0;let c=s.length;let a;let l;try{for(;u<c;u++){if(Array.isArray(s[u])&&s[u][0]===o){const t=s[u][1];s[u]=(...n)=>{postMessage([o,t,n])}}}a=await e[i](...s)}catch(t){a=null;if(t instanceof Error){l={isError:true,value:{message:t.message,name:t.name,stack:t.stack}}}else{l={isError:false,value:t}}a=undefined}const p=n(a);postMessage([r,f,a,l],p)}}));var f=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};var i=1/0;var s="[object Symbol]";var u=/[\\^$.*+?()[\]{}|]/g,c=RegExp(u.source);var a=typeof f=="object"&&f&&f.Object===Object&&f;var l=typeof self=="object"&&self&&self.Object===Object&&self;var p=a||l||Function("return this")();var d=Object.prototype;var w=d.toString;var h=p.Symbol;var y=h?h.prototype:undefined,b=y?y.toString:undefined;function g(t){if(typeof t=="string"){return t}if($(t)){return b?b.call(t):""}var n=t+"";return n=="0"&&1/t==-i?"-0":n}function v(t){return!!t&&typeof t=="object"}function $(t){return typeof t=="symbol"||v(t)&&w.call(t)==s}function E(t){return t==null?"":g(t)}function m(t){t=E(t);return t&&c.test(t)?t.replace(u,"\\$&"):t}var x=m;function j(t,n){if(typeof t==="string"){return n.checkString(t)}else if(typeof t==="number"){return n.checkNumber(t)}else{return false}}function k(t,n,e,r){if(typeof t==="object"){if(Array.isArray(t)){for(const o of t){if(k(o,n,e,r)){return true}}}else{for(const o in t){e.push(o);const f=k(t[o],n,e,r);e.pop();if(f)return true}}}else if(n.is){if(n.is.test(e.join("."))){return!!t}else{return false}}else{const o=e.join(".");for(const t of r.ignorePaths){if(t.test(o))return false}if(r.includePaths){let t=false;for(const n of r.includePaths){if(n.test(o)){t=true;break}}if(!t)return false}if(n.key){if(!n.key.test(o))return false}return j(t,n)}return false}function A(t,n,e,r){if(n.length){let o=false;for(const f of n){if(k(t,f,[],r)?!f.negate:f.negate){if(e==="OR"){return true}o=true}else if(e==="AND"){return false}}return o}return true}function O(t,n){const e=[];let r=false;let o=0;let f="";for(let i=0;i<t.length;i++){const s=t[i];if(r){if(s===f){r=false;f=""}}else if(s==='"'||s==="'"){r=true;f=s}else if(s.match(n)&&!r){e.push(t.slice(o,i).trim());o=i+1}if(i===t.length-1){e.push(t.slice(o).trim())}}return e.map((t=>{if(t.startsWith('"')&&t.endsWith('"')){return t.slice(1,-1)}if(t.startsWith("'")&&t.endsWith("'")){return t.slice(1,-1)}return t})).filter((t=>t))}const P={"<":function t(n){const e=Number(n[0]);return t=>t<e},"<=":function t(n){const e=Number(n[0]);return t=>t<=e},"=":function t(n){const e=n[0].split(",").filter((t=>t)).map(Number);return t=>{for(let n=0;n<e.length;n++){if(t===e[n]){return true}}return false}},">=":function t(n){const e=Number(n[0]);return t=>t>=e},">":function t(n){const e=Number(n[0]);return t=>t>e},"..":function t(n){const e=Number(n[0]);const r=Number(n[1]);return t=>t>=e&&t<=r}};function R(t){const{values:n,operator:e}=D(t);const r=P[e];if(!r){throw new Error(`unknown operator ${e}`)}return r(n)}function D(t){const n=/^\s*\(?\s*(?<startOperator><=|>=|<|=|>|\.\.)?(?<firstValue>-?\d*\.?\d+)(?:(?<afterDots>\.\.)(?<secondValue>-?\d*\.?\d*))?\s*\)?\s*$/.exec(t);if(!n){return{operator:"=",values:[t]}}if(!n.groups){throw new Error("unreachable")}const{startOperator:e,firstValue:r,afterDots:o,secondValue:f}=n.groups;let i=e;let s=r?[r]:[];if(e===".."){i="<="}else if(!e&&o&&!f){i=">="}else if(o){i=".."}if(f){s.push(f)}return{values:s,operator:i||"="}}const N={"<":function t(n){return t=>t<n[0]},"<=":function t(n){return t=>t<=n[0]},"=":function t(n,e){const r=O(n[0],",").filter((t=>t)).map((t=>new RegExp(`^${x(t)}$`,e)));return t=>{for(const n of r){if(n.test(t)){return true}}return false}},"~":function t(n,e){const r=O(n[0],",").filter((t=>t)).map((t=>new RegExp(x(t),e)));return t=>{for(const n of r){if(n.test(t)){return true}}return false}},">=":function t(n){return t=>t>=n[0]},">":function t(n){return t=>t>n[0]},"..":function t(n){return t=>t>=n[0]&&t<=n[1]}};function _(t,n){const{values:e,operator:r}=I(t);const o=N[r];if(!o){throw new Error(`unreachable unknown operator ${r}`)}return o(e,n)}function I(t){const n=t.split("..");const e=/^\s*\(?(?<operator><=|<|=|>=|>)?\s*(?<value>\S*)\s*\)?$/.exec(n[0]);if(!e){return{operator:"~",values:[t]}}if(!e.groups){throw new Error("unreachable")}let{operator:r,value:o}=e.groups;let f=n[1];let i=[o];if(n.length>1){r="..";if(!f){r=">="}else if(!o){i=[f];r="<="}else{i.push(f)}}return{operator:r||"~",values:i}}function M(t,n){const{insensitive:e,pathAlias:r}=n;return t.map((t=>{const n={};if(t.startsWith("-")){n.negate=true;t=t.substring(1)}const o=t.indexOf(":");if(o>-1){const f=t.substring(o+1);if(o>0){const i=t.substring(0,o);if(i==="is"){n.is=new RegExp(`(^|\\.)${x(f)}(\\.|$)`,e)}if(r[i]){n.key=r[i]}else{n.key=new RegExp(`(^|\\.)${x(i)}(\\.|$)`,e)}}V(n,f,e)}else{V(n,t,e)}return n}))}function V(t,n,e){t.checkString=_(n,e);t.checkNumber=R(n)}function T(t,n){const{insensitive:e}=n;const r={};for(const[n,o]of Object.entries(t)){if(o instanceof RegExp){r[n]=o}else{r[n]=new RegExp(`(^|\\.)${x(o)}(\\.|$)`,e)}}return r}function B(t,n={}){let{index:e=false,predicate:r="AND",ignorePaths:o=[],includePaths:f,pathAlias:i={}}=n;const s=n.limit?n.limit:Infinity;const u=n.caseSensitive?"":"i";let c=n.keywords||[];const a=T(i,{insensitive:u});const l=o.map((t=>typeof t==="string"?new RegExp(`(^|\\.)${x(t)}(\\.|$)`,u):t));const p=f?f.map((t=>typeof t==="string"?new RegExp(`(^|\\.)${x(t)}(\\.|$)`,u):t)):undefined;if(typeof c==="string"){c=O(c,/[ \t\r\n]/)}const d=M(c,{insensitive:u,pathAlias:a});let w=0;if(e){const n=[];for(let e=0;e<t.length&&w<s;e++){if(A(t[e],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){w=n.push(e)}}return n}else{const n=[];for(let e=0;e<t.length&&w<s;e++){if(A(t[e],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){w=n.push(t[e])}}return n}}function F(t){return t.map((t=>{if(!!t.sortCompareFn){t.sortCompareFn=new Function("return "+t.sortCompareFn)()}return t}))}const S=new Map;function C(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}async function L(t,n){const e=C();S.set(e,{rows:t,columns:F(n)});return e}async function q(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;e.rows=n;if(!e.rows&&!e.columns)X(t);return true}async function z(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;e.columns=F(n);if(!e.rows&&!e.columns)X(t);return true}function G(t){const n=t.columns.find((t=>!!t.order));if(n){const{prop:t,order:e}=n;return{prop:t,order:e}}return null}function H(t,n,e,r){if(!e&&!r){const n=G(t);if(n){({prop:e,order:r}=n)}}if(!e||!r||!n.length)return n;const o=t.columns.find((t=>t.prop===e));if(!!o.sortCompareFn&&typeof o.sortCompareFn==="function"){const t=n.slice().sort(o.sortCompareFn(e,r));return t}if(o.type==="text"&&typeof n[0][e]==="string"){const t=n.slice().sort(((t,n)=>{if(!t[e])return 1;if(!n[e])return-1;return r==="asc"?t[e].localeCompare(n[e]):n[e].localeCompare(t[e])}));return t}const f=n.slice().sort(((t,n)=>{if(!t[e])return 1;if(!n[e])return-1;if(t[e]<n[e])return r==="asc"?-1:1;if(t[e]>n[e])return r==="asc"?1:-1;return 0}));return f}async function J(t,n,e){const r=S.get(t);if(!r)throw"cannot find worker with ID "+t;const o=r.filterRows||r.rows;return H(r,o,n,e)}function K(t,n=[]){if(!n)return t;n.forEach((n=>{t=B(t,{keywords:n.filter,includePaths:[n.prop],ignorePaths:["__uuid","__index"]})}));return t}function Q(t,n){n=K(n);return H(t,n)}async function U(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;const r=!n||!n.length?await W(t,e.searchTerm):e.filterRows||e.rows;e.filterRows=K(r,n);return H(e,e.filterRows)}async function W(t,n){const e=S.get(t);if(!e)throw"cannot find worker with ID "+t;e.searchTerm=n;if(!n||!n.length){e.filterRows=e.rows;return Q(e,e.rows)}const r=e.columns.filter((t=>t.searchable!==false));e.filterRows=B(e.rows,{keywords:n,predicate:"OR",includePaths:[...r.map((t=>t.prop))],ignorePaths:["__uuid","__index"]});return Q(e,e.filterRows)}async function X(t){S.delete(t)}e.createWorkerStore=L;e.destroyWorkerStore=X;e.syncConfigToWorker=z;e.syncDataToWorker=q;e.workerFilter=U;e.workerSearch=W;e.workerSort=J})();

package/dist/nano-components/{p-fb12a45d.entry.js → p-f5ee07b3.entry.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-export{T as nano_table}from"./p-8fc2a38d.js";import"./p-1fe12320.js";import"./p-ee045579.js";import"./p-9746b0a5.js";import"./p-651b3264.js";
-//# sourceMappingURL=p-fb12a45d.entry.js.map
+export{T as nano_table}from"./p-d7ed2d6e.js";import"./p-1fe12320.js";import"./p-ee045579.js";import"./p-9746b0a5.js";import"./p-651b3264.js";
+//# sourceMappingURL=p-f5ee07b3.entry.js.map

package/dist/nano-components/{p-fb12a45d.entry.js.map → p-f5ee07b3.entry.js.map} RENAMED Viewed

File without changes

package/dist/types/components/icon/icon.d.ts CHANGED Viewed

@@ -42,7 +42,7 @@ export declare class Icon {
   size?: 'small' | 'large';
   /**
    * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.
-   * Default, `false`.
+   * Default, `true`.
    */
   lazy: boolean;
   private setAriaLabel;

package/dist/types/components/menu/menu.d.ts CHANGED Viewed

@@ -42,6 +42,7 @@ export declare class Menu {
   private handleClick;
   private handleKeyDown;
   private handleMouseOver;
+  componentDidLoad(): void;
   render(): any;
 }
 export {};

package/dist/types/components/resize-observe/resize-observe.d.ts CHANGED Viewed

@@ -2,8 +2,14 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { ResizeStateChangeEventDetail } from '../../interface';
 /**
  * A Resize-Observer utility component.
- * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.
+ * Takes a string list of sizes and optional class-names.
+ * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.
+ * Additionally, can fire events when content no-longer fits within the element.
  * @slot - Main slot for any content.
+ * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off
+ * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off
+ * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off
+ * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off
  */
 export declare class ResizeObserve implements ComponentInterface {
   private ro;
@@ -13,7 +19,13 @@ export declare class ResizeObserve implements ComponentInterface {
   currentWidth: number;
   currentHeight: number;
   classNames: string[];
+  contentFitX: any;
+  contentFitY: any;
   classNameChange(): void;
+  /** Fire `nanoResizeContentFitChange` events notifying
+   * whether content currently fits or does not on the x, y or both axis'.
+   * Also makes the `content-fit-...` slots available */
+  notifyContentFit: 'x' | 'y' | 'xy';
   /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.
    * Format: `states="800w, 300h class1 class2"` */
   states: string;
@@ -21,13 +33,20 @@ export declare class ResizeObserve implements ComponentInterface {
   nanoResizeStateChange: EventEmitter<ResizeStateChangeEventDetail>;
   /** Fires after the initial loading and assessment */
   nanoResizeObserverReady: EventEmitter<void>;
+  /** Fires when the content either begins or stops to fit. Will only work when `notifyContentFit` is set. */
+  nanoResizeContentFitChange: EventEmitter<{
+    x: boolean;
+    y: boolean;
+  }>;
   dimensionChanged(): void;
   statesChanged(): void;
+  private assesContentFit;
   private assessChanges;
   private applyChanges;
   private toSimpleObj;
   private attachRO;
   componentWillLoad(): void;
+  connectedCallback(): void;
   disconnectedCallback(): void;
   render(): any;
 }

package/dist/types/components/table/table-interface.d.ts CHANGED Viewed

@@ -28,22 +28,22 @@ export declare namespace TableTypes {
   /** Potential html properties which can be passed to a row */
   type RowProps = JSXBase.HTMLAttributes<HTMLTableRowElement>;
   /** data model passed to cell rendering functions */
-  interface ColumnDataSchemaModel {
+  interface RenderModel<T = RowGeneric> {
     /** The column property being iterated over */
-    prop: ColumnProp;
+    prop: keyof T;
     /** The data for this cell */
     cellModel: any;
     /** The column config object */
-    column: ColumnConfig;
+    column: ColumnConfig<T>;
     /** The row index currently being iterated over */
     rowIndex: number;
     /** The row model currently being iterated over  */
-    rowModel: any;
+    rowModel: RowData<T>;
   }
   /** data model passed to row rendering functions */
-  interface RowDataSchemaModel {
+  interface RowDataSchemaModel<T = RowGeneric> {
     /** the current data row model being iterated over */
-    row?: RowData;
+    rowModel?: RowData<T>;
     /** the current data row index  */
     rowIndex?: number;
     /** The row being rendered. You *must* nest this in your render function otherwise it will not be shown */
@@ -77,12 +77,12 @@ export declare namespace TableTypes {
    * A row render function, called during a any row's render to the dom.
    * It can be used to add extra markup around any given table row
    **/
-  type RowTemplateFunc<T> = (
+  type RowTemplateFunc<T, P> = (
   /** use this to create markup outside of JSX environments
    * e.g. https://reactjs.org/docs/react-without-jsx.html */
   createElement: HFunc<T>,
   /** data passed to each template */
-  props: RowDataSchemaModel,
+  props: RowDataSchemaModel<P>,
   /** a helper template to minimise boilerplate.
    * A shortcut for `<td><div class="nano-tbl__cell-content"></div></td>` */
   TableCell: FunctionalComponent<{
@@ -92,30 +92,32 @@ export declare namespace TableTypes {
    * A cell render function, called during any cell's render to the dom.
    * It can be used to add any markup within a table cell.
    */
-  type CellTemplateFunc<T> = (createElement: HFunc<T>, props: ColumnDataSchemaModel) => T | string | undefined;
+  type CellTemplateFunc<T, P> = (createElement: HFunc<T>, props: RenderModel<P>) => T | string | undefined;
   /**
    * A table header render function, called during any column's render to the dom.
    * It can be used to add any markup within a table header `th`.
    */
-  type ColumnTemplateFunc<T> = (createElement: HFunc<T>, col: ColumnConfig) => T | string | undefined;
+  type ColumnTemplateFunc<T, P> = (createElement: HFunc<T>, col: ColumnConfig<P>) => T | string | undefined;
   /** A function used to assess the order of any given column.
    * e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
    */
   type ColSortComparator = (prop: keyof RowData, order: Order) => (a: RowData, b: RowData) => number;
   /** A function which can be used to apply any html attribute/s onto a table cell `td` */
-  type PropertiesFunc = (props: ColumnDataSchemaModel) => CellProps | void | undefined;
+  type PropertiesFunc = (props: RenderModel) => CellProps | void | undefined;
   /** A function which can be used to apply any html attribute/s onto a table head `th` */
-  type ColPropertiesFunc = (props: ColumnConfig) => CellProps | void | undefined;
+  type ColPropertiesFunc<T> = (props: ColumnConfig<T>) => CellProps | void | undefined;
   /** A function which can be used to apply any html attribute/s onto a table row `tr` */
-  type RowPropertiesFunc = (props: RowDataSchemaModel) => RowProps | void | undefined;
-  /** An individual table cell's data */
-  type RowData = {
+  type RowPropertiesFunc<T> = (props: RowDataSchemaModel<T>) => RowProps | void | undefined;
+  type RowGeneric = {
     [key: string | number]: any;
+  };
+  /** An individual table cell's data */
+  type RowData<T = RowGeneric> = T & {
     __uuid?: string | number;
     __index?: number;
   };
   /** A data property */
-  type Prop = keyof TableTypes.RowData;
+  type Prop = keyof RowData;
   /** Valid column data types */
   type ColumnType = 'text' | 'string' | 'number' | 'date' | 'unknown';
   /**
@@ -132,6 +134,14 @@ export declare namespace TableTypes {
     type?: ColumnType;
     /** Whether this column is horizontally pinned to viewport */
     pinned?: Position;
+    /** By default cell content too wide for the cell will not wrap,
+     * but rather be trimmed with '...'.
+     * *Note* 'wrap' is mutually-exclusive from `autoTooltip` */
+    wrap?: boolean;
+    /** Setting this to true, will automatically watch content that
+     * doesn't fit and duplicate it to show in a tooltip.
+     * *Note* 'autoTooltip' is mutually-exclusive from `wrap` */
+    autoTooltip?: boolean;
     /** Whether this column is a row header; the cell will render a `th` not a `td` */
     rowHeader?: boolean;
     /** Whether this column can be sorted. Defaults to true */
@@ -148,16 +158,16 @@ export declare namespace TableTypes {
      * A cell render function, called during any cell's render to the dom.
      * It can be used to add any markup within a table cell.
      */
-    cellTemplate?: CellTemplateFunc<VNode | VNode[]>;
+    cellTemplate?: CellTemplateFunc<VNode | VNode[], T>;
     /** A function which can be used to apply any html attribute/s onto a table cell `td` */
     cellProperties?: PropertiesFunc;
     /**
      * A table header render function, called during any column's render to the dom.
      * It can be used to add any markup within a table header `th`.
      */
-    colTemplate?: ColumnTemplateFunc<VNode | VNode[]>;
+    columnTemplate?: ColumnTemplateFunc<VNode | VNode[], T>;
     /** A function which can be used to apply any html attribute/s onto a table head `th` */
-    columnProperties?: ColPropertiesFunc;
+    columnProperties?: ColPropertiesFunc<T>;
     /** A custom sorting comparator function - assess the order of any given column.
      *  e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort */
     sortCompareFn?: ColSortComparator | string;
@@ -166,16 +176,16 @@ export declare namespace TableTypes {
    * Row renderer property. Called during the rendering of any table row
    * controlling it's visual state.
    */
-  interface RowRenderer {
+  interface RowRenderer<T = RowData> {
     /** Function to decide whether the row is vertically pinned. */
     pinned?: PinFunc;
     /**
      * A row render function, called during a any row's render to the dom.
      * It can be used to add extra markup around any given table row
      **/
-    template?: RowTemplateFunc<VNode | VNode[]>;
+    template?: RowTemplateFunc<VNode | VNode[], T>;
     /** A function which can be used to apply any html attribute/s onto a table row `tr` */
-    rowProperties?: RowPropertiesFunc;
+    rowProperties?: RowPropertiesFunc<T>;
   }
   /**
    * Row renderer property. Called during the rendering of a tables head and foot
@@ -190,7 +200,7 @@ export declare namespace TableTypes {
      * If used, and you want to see the rendered row, you *must* nest it within your
      * jsx function e.g. `(h, props) => { return [props.renderedRow, <tr><td>Custom thing</td></tr>]}`
      **/
-    template?: RowTemplateFunc<VNode | VNode[]>;
+    template?: RowTemplateFunc<VNode | VNode[], null>;
     /** A function which can be used to apply any html attribute/s onto a table row `tr` */
     rowProperties?: () => RowProps | void | undefined;
   }
@@ -198,8 +208,9 @@ export declare namespace TableTypes {
     rows: TableTypes.NanoTable['rows'];
     __uuid: string | number;
   };
-  class NanoTable<T = RowData> {
+  class NanoTable<T = RowGeneric> {
     rows: T[];
     columns: ColumnConfig<T>[];
   }
+  type Falsy = false | 0 | '' | null | undefined;
 }

package/dist/types/components/table/table.cell.d.ts CHANGED Viewed

@@ -12,7 +12,7 @@ export declare const baseCellClasses: (colIndex: number, toString?: boolean) =>
 declare type TableCellProps = {
   rowIndex: number;
   colIndex: number;
-  nestedContent?: VNode;
+  nestedContent?: () => VNode;
 };
 export declare const TableCell: FunctionalComponent<TableCellProps>;
 export {};

package/dist/types/components/table/table.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { TableTypes } from '../../interface';
+import { TableTypes } from '../../interface';
 /**
  * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.
  *
@@ -24,19 +24,22 @@ export declare class Table implements ComponentInterface {
   caption: string;
   /** Show the caption on-screen */
   showCaption: boolean;
-  /** Will show a loading state when true.
-   * Will be shown automatically if `rows` is a promise waiting to resolve
-   * or when performing custom filtering or sorting  */
-  get loading(): boolean;
-  set loading(l: boolean);
-  _loading: boolean;
+  /** Will show a loading state when set to true.
+   * By default, will be shown automatically if `rows` is a promise waiting to resolve
+   * or when performing custom filtering or sorting.
+   * *Note* when set manually, will overwrite any internal loading state.
+   * Set to 'undefined' to revert to default behaviour. */
+  loading: boolean;
+  get _loading(): boolean;
+  set _loading(l: boolean);
   private debounceSetLoading;
+  internalLoading: boolean;
   /** When loading rows asynchronously, this will render this number of placeholder rows */
   placeholderSize: number;
   /** The data to place in the table */
   rows: TableTypes.NanoTable['rows'] | Promise<TableTypes.NanoTable['rows']>;
   handleRowsChange(): void;
-  /** The column config used to generate present the rows of data */
+  /** The column config used to present the rows of data */
   columns: TableTypes.NanoTable['columns'];
   handleColsChange(): Promise<void>;
   /** Used for custom thead row rendering */
@@ -58,15 +61,17 @@ export declare class Table implements ComponentInterface {
   /** Term to search for in the data */
   searchTerm: string;
   /** A custom filtering function. Should return a promise.
-   * On successful completion the column UI will be updated.
+   * If the promise resolves as `true` the column UI will be updated.
+   * If the promise resolves as falsey, the sort will be performed by the component.
    * A good use-case would be performing the filter on a server / via fetch.
    * Then on success, updating the table's data via the `rows` property */
-  customFilterFn?: (filters: TableTypes.Filter[]) => Promise<void>;
+  customFilterFn?: (filters: TableTypes.Filter[]) => Promise<true | TableTypes.Falsy>;
   /** A custom sorting function. Should return a promise.
-   * On successful completion the column UI will be updated.
+   * If the promise resolves as `true` the column UI will be updated.
+   * If the promise resolves as falsey, the sort will be performed by the component.
    * A good use-case would be performing the sort on a server / via fetch.
    * Then on success, updating the table's data via the `rows` property */
-  customSortFn?: (property: TableTypes.Prop, order: TableTypes.Order) => Promise<void>;
+  customSortFn?: (property: TableTypes.Prop, order: TableTypes.Order) => Promise<true | TableTypes.Falsy>;
   /**
    * The default sortable option for all columns.
    * `true` will enable column sorting unless you set `sortable: false` on a column
@@ -80,6 +85,15 @@ export declare class Table implements ComponentInterface {
    */
   defaultColDraggable: boolean;
   handleSearchTermChange(): void;
+  /** Use this to render the table with roughly the correct dimensions.
+   * a use-case might be; fetch a small initial dataset to minimise load-time,
+   * render the table with the correct dimensions, the table becomes interactive,
+   * load the rest of the data
+   */
+  virtualTotalItems: number;
+  virtualTotalItemsChangeHandler(): void;
+  /** Fired when the table has done it's first complete render */
+  nanoTblReady: EventEmitter;
   /** Fired whenever a block is activated by scrolling into view / becoming visible
    * This could be leveraged for infinite scrolling / to fetch more data.
    */
@@ -87,8 +101,6 @@ export declare class Table implements ComponentInterface {
     block: number;
     totalBlocks: number;
   }>;
-  /** Fired when the table has done it's first complete render */
-  nanoTblReady: EventEmitter;
   /** Fired before a column is sorted.
    * `event.preventDefault()` to stop sorting.  */
   nanoTblBeforeSort: EventEmitter<{
@@ -130,6 +142,11 @@ export declare class Table implements ComponentInterface {
   nanoTblAfterSearch: EventEmitter<{
     term: string;
   }>;
+  /** Fired before a general search.
+   * `event.preventDefault()` to stop searching.  */
+  nanoTblBeforeEdit: EventEmitter<{
+    term: string;
+  }>;
   /** Remove any column sorts currently applied
    * @returns a promise which resolves when complete */
   resetSorting(): Promise<void>;
@@ -150,6 +167,13 @@ export declare class Table implements ComponentInterface {
    * @returns a promise which resolves when complete
    */
   removeFilters(columnNames: TableTypes.Prop[]): Promise<void>;
+  /** Updates a row model at a given index
+   * @param row - the row to update.
+   * *Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property
+   * - rows are augmented with certain properties to aid with efficient rendering
+   * @param rowIndex - the row index to insert this row
+   */
+  updateRow(row: TableTypes.RowData, rowIndex: number): Promise<void>;
   host: HTMLNanoTableElement;
   private renderId;
   private store;
@@ -163,7 +187,7 @@ export declare class Table implements ComponentInterface {
     These are show / hidden for perf */
   blocks: TableTypes.TBody[];
   activeBlocks: number[];
-  measureHeight: number;
+  private measureHeight;
   private blockElements;
   private blockIos;
   private blockHeights;
@@ -177,7 +201,16 @@ export declare class Table implements ComponentInterface {
   private _isReady;
   scrollListener(): void;
   private handleReady;
+  /**
+   * Fired when a column is dragged
+   * @param column
+   */
   private colDrag;
+  /**
+   * Fired when a column is dropped after being dragged
+   * @param fromCol
+   * @param toCol
+   */
   private colDrop;
   /**
    * Start a sort - can be cancelled by `preventDefault`

package/dist/types/components/table/table.row.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import type { TableTypes } from '../../interface';
 declare type TableRowProps = {
   rowRenderer: TableTypes.RowRenderer;
   rowIndex: number;
-  row: TableTypes.RowData;
+  rowModel: TableTypes.RowData;
   onColumnPinned?: TableTypes.PinnedCb;
 };
 export declare const TableRow: FunctionalComponent<TableRowProps>;

package/dist/types/components/table/table.store.d.ts CHANGED Viewed

@@ -19,4 +19,4 @@ export declare function storeSetData(host: HTMLElement, rows: TableTypes.RowData
 export declare function storeSetConfig(host: HTMLElement, columns: TableTypes.ColumnConfig[]): Promise<boolean>;
 export declare function storeSearch(host: HTMLElement, term: string): Promise<void>;
 export declare function storeFilter(host: HTMLElement, filters: TableTypes.Filter[]): Promise<void>;
-export declare function storeSort(host: HTMLElement, prop: TableTypes.Prop, order: TableTypes.Order): Promise<void>;
+export declare function storeSort(host: HTMLNanoTableElement, prop: TableTypes.Prop, order: TableTypes.Order): Promise<void>;

package/dist/types/components/table/table.utils.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ declare type ValidRenderTypes = 'tr' | 'th' | 'td';
  * @param colIndex - the current column index being rendered
  * @returns a model object which will be passed to custom renderers
  */
-export declare function colDataModel(rowIndex: number, colIndex: number): TableTypes.ColumnDataSchemaModel;
+export declare function colDataModel(rowIndex: number, colIndex: number): TableTypes.RenderModel;
 /**
  * Get a model object for custom row renderers.
  * @param rowIndex

package/dist/types/components/table/table.worker.d.ts CHANGED Viewed

@@ -3,8 +3,8 @@ export declare function createWorkerStore(rows: TableTypes.NanoTable['rows'], co
 export declare function syncDataToWorker(workerId: string, rows: TableTypes.NanoTable['rows']): Promise<boolean>;
 export declare function syncConfigToWorker(workerId: string, columns: Partial<TableTypes.ColumnConfig>[]): Promise<boolean>;
 /** Sorting is the last thing we do - don't cache this, there's no point */
-export declare function workerSort(workerId: string, prop: TableTypes.Prop, order: TableTypes.Order): Promise<TableTypes.RowData[]>;
-export declare function workerFilter(workerId: string, filters: TableTypes.Filter[]): Promise<TableTypes.RowData[]>;
+export declare function workerSort(workerId: string, prop: TableTypes.Prop, order: TableTypes.Order): Promise<TableTypes.RowGeneric[]>;
+export declare function workerFilter(workerId: string, filters: TableTypes.Filter[]): Promise<TableTypes.RowGeneric[]>;
 /** SEARCH */
 /**
  * A general text search across all table columns.
@@ -13,7 +13,7 @@ export declare function workerFilter(workerId: string, filters: TableTypes.Filte
  * @param term
  * @returns the searched for data rows - with col filters / sorts also applied
  */
-export declare function workerSearch(workerId: string, term: string): Promise<TableTypes.RowData[]>;
+export declare function workerSearch(workerId: string, term: string): Promise<TableTypes.RowGeneric[]>;
 /**
  * Clean up
  * @param workerId

package/dist/types/components/tooltip/tooltip.d.ts CHANGED Viewed

@@ -29,6 +29,11 @@ export declare class Tooltip {
   open: boolean;
   /** The distance in pixels from which to offset the tooltip along its target. */
   skidding: number;
+  /**
+   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+   * `overflow: auto|scroll`.
+   */
+  hoist: boolean;
   /**
    * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
    * options can be passed by separating them with a space. When manual is used, the tooltip must be activated