@nanoporetech-digital/components 4.3.0 → 4.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "4.3.0",
+  "version": "4.3.2",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -130,7 +130,7 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "2b7a0b5546f6e7f1fd1d0a018e31a755582d9a70",
+  "gitHead": "cd8f88dc881d62ba01804f0b15d4a6d05e5f0a37",
   "volta": {
     "node": "14.18.1",
     "npm": "8.6.0"

package/dist/cjs/table.worker-2d617318.js.map

@@ -1 +0,0 @@
-{"file":"table.worker-2d617318.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/table.worker-ebfd9cd4.js.map

@@ -1 +0,0 @@
-{"file":"table.worker-ebfd9cd4.js","mappings":";;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/nano-components/p-0038620d.js

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

package/dist/nano-components/p-55d71567.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,h as i,a,g as e}from"./p-f6a8467a.js";import{g as s,a as o}from"./p-257432ff.js";import{d as r}from"./p-9746b0a5.js";const n=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:"currentColor";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:" ";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;width:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:"";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav nano-icon-button.onav__scroll-button:focus{outline:none}.onav nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow-x:auto;overflow-y:hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0 0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;-webkit-padding-before:0;padding-block-start:0;-webkit-padding-after:0;padding-block-end:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:"";width:100%;height:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{width:100%}.onav--vertical .onav__nav{max-height:100%;display:flex}.onav--vertical .onav__scroller{width:100%;overflow-y:auto;overflow-x:hidden;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-block:var(--padding);-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0 0;-webkit-padding-before:calc(var(--fade-size) + 12px);padding-block-start:calc(var(--fade-size) + 12px);-webkit-padding-after:var(--fade-size);padding-block-end:var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0 0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;width:-moz-fit-content;width:fit-content}.onav--vertical .onav__items::before{content:"";height:100%;width:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}';const l=class{constructor(i){t(this,i);this.updateScrollControls=()=>{if(!this.nav)return;this.hasScrollControls=this.nav[this.scrollProp]>this.nav[this.clientDimProp]&&this.nav[this.scrollProp]>this.itemContainer[this.clientDimProp];this.handleScroll()};this.handleScroll=()=>{if(!this.hasScrollControls){this.hideControlStart=this.hideControlEnd=true;return}const t=this.isRtl?this.nav[this.scrollOffset]===0:Math.abs(this.nav[this.clientDimProp]-(this.nav[this.scrollProp]-this.nav[this.scrollOffset]))<2;const i=this.isRtl?Math.abs(this.nav[this.scrollProp]+this.nav[this.scrollOffset]-this.nav[this.clientDimProp])<2:this.nav[this.scrollOffset]===0;if(i){this.hideControlStart=true;this.hideControlEnd=false}else if(t){this.hideControlStart=false;this.hideControlEnd=true}else{this.hideControlEnd=false;this.hideControlStart=false}};this.handleBtnClick=(t=false)=>{const i=this.navDim;let a;if(t)a=this.nav[this.scrollOffset]+i-20;else a=this.nav[this.scrollOffset]-i+20;try{this.nav.scroll({left:this.orientation==="horizontal"?a:0,top:this.orientation==="vertical"?a:0,behavior:"smooth"})}catch(t){this.nav[this.scrollOffset]=a}};this.slotChangeHandler=()=>{if(this.allActiveItems.length<2)return;const t=this.allActiveItems.find((t=>this.isActiveHandler(t)));if(t)this.activeItem=t;this.recalculatePositions()};this.handleClick=t=>{if(this.allActiveItems.length<2)return;const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));if(i)this.activeItem=i};this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));if(i)this.activeItem=i}};this.recalculatePositions=t=>{this.updateScrollControls();this.syncActiveItemIndicator(t);setTimeout((()=>this.scrollToActiveItem(t)),300)};this.scrollControls=true;this.orientation="horizontal";this.activeHandler=t=>t.classList.add("active");this.inActiveHandler=t=>t.classList.remove("active");this.isActiveHandler=t=>t.classList.contains("active");this.hasScrollControls=false;this.hideControlEnd=true;this.hideControlStart=true;this.recalculatePositions=r(this.recalculatePositions,50)}get scrollProp(){return this.orientation==="horizontal"?"scrollWidth":"scrollHeight"}get clientDimProp(){return this.orientation==="horizontal"?"clientWidth":"clientHeight"}get scrollOffset(){return this.orientation==="horizontal"?"scrollLeft":"scrollTop"}watchScrollControls(){if(this.hasScrollControls)this.handleScroll();else this.hideControlStart=this.hideControlEnd=true}hideEndBtn(){if(!this.endBtn)return;this.activateBtn(this.endBtn,!this.hideControlEnd)}hideStartBtn(){if(!this.startBtn)return;this.activateBtn(this.startBtn,!this.hideControlStart)}activateBtn(t,i=true){if(!i){t.tabIndex=-1;t.disabled=true;t.classList.remove("is-shown");return}t.tabIndex=0;t.disabled=false;t.classList.add("is-shown")}get allActiveItems(){return this.allItems.filter((t=>!t.disabled||t.classList.contains("disabled")))}get allItems(){return s(this.host,"*",true)}get activeItem(){return this._activeItem}set activeItem(t){if(!t||t===this.activeItem||t.disabled||!this.allActiveItems.includes(t)){return}this._activeItem=t;this.allActiveItems.forEach((t=>{if(t===this._activeItem)this.activeHandler(t);else this.inActiveHandler(t)}));this.syncActiveItemIndicator();this.scrollToActiveItem()}get navDim(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let i=this.nav[this.clientDimProp];if(this.orientation==="horizontal"){return i-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}else{return i-=parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)}}scrollToActiveItem(t){if(!this.nav||!this.activeItem)return;requestAnimationFrame((()=>{this.activeItem.scrollIntoView({behavior:t?"auto":"smooth",block:"center",inline:"center"})}))}syncActiveItemIndicator(t){if(!this.activeItem)return;const i=this.activeItem;const a=i.clientWidth||0;const e=i.clientHeight+2||0;const s=o(i,this.itemContainer);if(!this.activeIndicator)return;const r=s.top;const n=s.left;if(t)this.activeIndicator.style.transition="none";switch(this.orientation){case"horizontal":this.activeIndicator.style.width=`${a}px`;this.activeIndicator.style.height=null;this.activeIndicator.style.transform=`translateX(${n}px)`;break;case"vertical":this.activeIndicator.style.width=null;this.activeIndicator.style.height=`${e}px`;this.activeIndicator.style.transform=`translateY(${r}px)`;break}setTimeout((()=>this.activeIndicator.style.transition=null),400)}connectedCallback(){this.isRtl=this.orientation==="horizontal"&&!!this.host.closest('[dir="rtl"]');if(!window["ResizeObserver"])return;if(this.ro){this.ro.disconnect();this.ro=undefined}const t=this.ro=new ResizeObserver(this.recalculatePositions);t.observe(this.host)}componentDidLoad(){this.activeItem=this.allActiveItems.find((t=>this.isActiveHandler(t)));this.recalculatePositions(true)}disconnectedCallback(){if(this.ro){this.ro.disconnect();this.ro=undefined}}render(){return i(a,{dir:this.isRtl?"rtl":null},i("div",{part:"base",class:{onav:true,[`onav--${this.orientation}`]:true,"onav--has-scroll-controls":this.hasScrollControls,"onav--has-scroll-controls-start":!this.hideControlStart,"onav--has-scroll-controls-end":!this.hideControlEnd},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("div",{class:"onav__nav"},this.scrollControls&&i("nano-icon-button",{part:"scroll-button scroll-button-prev",class:{"onav__scroll-button":true,"onav__scroll-button--start":true},ref:t=>this.startBtn=t,onClick:()=>this.handleBtnClick(false),label:"Click to scroll",iconName:this.orientation==="horizontal"?"light/chevron-left":"light/chevron-up"}),i("div",{part:"scroller",ref:t=>this.nav=t,class:"onav__scroller",onScroll:this.handleScroll},i("div",{part:"items",ref:t=>this.itemContainer=t,class:"onav__items"},i("div",{part:"indicator",ref:t=>this.activeIndicator=t,class:"onav__active-indicator"}),i("slot",{onSlotchange:this.slotChangeHandler}))),this.scrollControls&&i("nano-icon-button",{part:"scroll-button scroll-button-next",class:{"onav__scroll-button":true,"onav__scroll-button--end":true},ref:t=>this.endBtn=t,onClick:()=>this.handleBtnClick(true),label:"Click to scroll",iconName:this.orientation==="horizontal"?"light/chevron-right":"light/chevron-down"}))))}get host(){return e(this)}static get watchers(){return{hasScrollControls:["watchScrollControls"],hideControlEnd:["hideEndBtn"],hideControlStart:["hideStartBtn"]}}};l.style=n;export{l as nano_overflow_nav};
-//# sourceMappingURL=p-55d71567.entry.js.map

package/dist/nano-components/p-55d71567.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["overflowNavCss","OverflowNav","constructor","hostRef","this","updateScrollControls","nav","hasScrollControls","scrollProp","clientDimProp","itemContainer","handleScroll","hideControlStart","hideControlEnd","finishEnd","isRtl","scrollOffset","Math","abs","finishStart","handleBtnClick","goEnd","navDim","scrollAmt","scroll","left","orientation","top","behavior","e","slotChangeHandler","allActiveItems","length","item","find","el","isActiveHandler","activeItem","recalculatePositions","handleClick","event","foundItem","composedPath","includes","handleKeyDown","key","init","syncActiveItemIndicator","setTimeout","scrollToActiveItem","classList","add","remove","contains","debounce","watchScrollControls","hideEndBtn","endBtn","activateBtn","hideStartBtn","startBtn","btn","activate","tabIndex","disabled","allItems","filter","getDirectChildren","host","_activeItem","forEach","activeHandler","inActiveHandler","computedStyle","getComputedStyle","clientDim","parseFloat","paddingLeft","paddingRight","paddingTop","paddingBottom","instant","requestAnimationFrame","scrollIntoView","block","inline","width","clientWidth","height","clientHeight","offset","getOffset","activeIndicator","offsetTop","offsetLeft","style","transition","transform","connectedCallback","closest","window","ro","disconnect","undefined","mo","ResizeObserver","observe","componentDidLoad","disconnectedCallback","render","h","Host","dir","part","class","onav","onClick","onKeyDown","scrollControls","ref","label","iconName","onScroll","onSlotchange"],"sources":["./src/components/overflow-nav/overflow-nav.scss?tag=nano-overflow-nav&encapsulation=shadow","./src/components/overflow-nav/overflow-nav.tsx"],"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:host {\n  /**\n  * @prop --indicator-transition: Defaults to #{$transition-fast}\n  * @prop --indicator-color: Defaults to #{map.get($colors, lightblue)};\n  * @prop --indicator-size: Defaults to 0;\n  * @prop --indicator-track-color: Defaults to #{map.get($colors, lightgrey)};\n  * @prop --indicator-track-size: Defaults to var(--indicator-size);\n\n  * @prop --scroll-btn-color: Defaults to 'currentColor';\n  * @prop --fade-size: The size of the fade areas (when items do not fit). Defaults to 1.75rem;\n  * @prop --fade-transparency: Defaults to 0;\n  *\n  * @prop --padding: Padding that matches the fade size will stop items shifting if fade areas are added (i.e when items do not fit). Defaults to var(--fade-size);\n  */\n\n  --indicator-transition: #{$transition-fast};\n  --indicator-color: #{map.get($colors, lightblue)};\n  --indicator-size: 0;\n  --indicator-track-color: #{map.get($colors, lightgrey)};\n  --indicator-track-size: var(--indicator-size);\n  --scroll-btn-color: 'currentColor';\n  --fade-size: 1.75rem;\n  --fade-transparency: 0;\n  --padding: var(--fade-size);\n\n  position: relative;\n  z-index: #{$layer-index-raised};\n}\n\n:host([orientation=\"horizontal\"]) {\n  display: block;\n}\n\n:host([orientation=\"vertical\"]) {\n  display: flex;\n}\n\n.onav {\n  $root: &;\n\n  &__scroller {\n    @include hide-scrollbar();\n\n    display: flex;\n    transition: #{$transition-medium} ease;\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n    mask-size: calc(100% + calc(var(--fade-size) * 4));\n    mask-position: calc(var(--fade-size) * -2);\n\n    &::after {\n      content: ' ';\n      line-height: 1;\n      flex: 0 0 auto;\n      display: block;\n    }\n\n    #{$root}--has-scroll-controls-start & {\n      mask-position: 0;\n      mask-size: calc(100% + (var(--fade-size) * 2));\n    }\n\n    #{$root}--has-scroll-controls-end & {\n      mask-position: calc(var(--fade-size) * -1);\n      mask-size: calc(100% + var(--fade-size));\n    }\n\n    #{$root}--has-scroll-controls-start#{$root}--has-scroll-controls-end & {\n      mask-size: 100%;\n      mask-position: 0;\n    }\n  }\n\n  &__items {\n    flex: 1 1 auto;\n    position: relative;\n    width: auto;\n    flex-wrap: nowrap;\n    display: flex;\n\n    &::before {\n      content: '';\n      background: var(--indicator-track-color);\n      display: block;\n      position: absolute;\n      z-index: 1;\n    }\n  }\n\n  &__active-indicator {\n    position: absolute;\n    z-index: 10;\n    transition:\n      var(--indicator-transition) transform ease,\n      var(--indicator-transition) width ease,\n      var(--indicator-transition) height ease;\n  }\n\n  nano-icon-button.onav__scroll-button {\n    --nano-color-base: var(--scroll-btn-color);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    border: unset;\n    z-index: 2;\n    transition: #{$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n    pointer-events: none;\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:focus-visible {\n      box-shadow: #{$control-focus-style} inset;\n    }\n  }\n\n  ///////////// HORIZONTAL ///////////////\n\n  &--horizontal {\n\n    #{$root}__scroller {\n      overflow-x: auto;\n      overflow-y: hidden;\n      mask-repeat: no-repeat;\n      padding-inline: var(--padding);\n      mask-image:\n        linear-gradient(\n          to left,\n          rgb(0 0 0 / var(--fade-transparency)) 0,\n          rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n          rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n          rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n          rgb(0 0 0 / var(--fade-transparency))\n          calc(100% - var(--fade-size)),\n          rgb(0 0 0 / var(--fade-transparency))\n        );\n\n      &::after {\n        padding-inline: 0 var(--fade-size);\n        padding-block: 0 0;\n      }\n    }\n\n    &#{$root}--has-scroll-controls #{$root}__scroller {\n      padding-inline: var(--fade-size) 0;\n      padding-block-start: 0;\n      padding-block-end: 0;\n    }\n\n    #{$root}__items {\n      flex-direction: row;\n\n      &::before {\n        content: '';\n        width: 100%;\n        height: var(--indicator-track-size);\n        inset-block-end: 0;\n      }\n    }\n\n    #{$root}__active-indicator {\n      inset-block-end: 0;\n      border-block-end: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    #{$root}__scroll-button {\n      inset-block: 0;\n\n      &--start {\n        inset-inline-start: 0;\n      }\n\n      &--end {\n        inset-inline-end: 0;\n      }\n    }\n  }\n\n  ///////////// VERTICAL ///////////////\n\n  &--vertical {\n    width: 100%;\n\n    #{$root}__nav {\n      max-height: 100%;\n      display: flex;\n    }\n\n    #{$root}__scroller {\n      width: 100%;\n      overflow-y: auto;\n      overflow-x: hidden;\n      flex-direction: column;\n      mask-repeat: no-repeat;\n      padding-block: var(--padding);\n      mask-image:\n        linear-gradient(\n          to top,\n          rgb(0 0 0 / var(--fade-transparency)) 0,\n          rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n          rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n          rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n          rgb(0 0 0 / var(--fade-transparency))\n          calc(100% - var(--fade-size)),\n          rgb(0 0 0 / var(--fade-transparency))\n        );\n      padding-inline: 0 0;\n      padding-block-start: calc(var(--fade-size) + 12px);\n      padding-block-end: var(--fade-size);\n\n      &::after {\n        padding-inline: 0 0;\n        padding-block: 0 var(--fade-size);\n      }\n    }\n\n    #{$root}__items {\n      flex-direction: column;\n      width: fit-content;\n\n      &::before {\n        content: '';\n        height: 100%;\n        width: var(--indicator-track-size);\n        inset-inline-start: 0;\n      }\n    }\n\n    #{$root}__active-indicator {\n      inset-inline-start: 0;\n      border-inline-start: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    #{$root}__scroll-button {\n      inset-inline: 0;\n\n      &--start {\n        inset-block-start: 0;\n      }\n\n      &--end {\n        inset-block-end: 0;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  State,\n} from '@stencil/core';\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\n/**\n * Primarily used to display navigational items that may not fit on smaller screens.\n *\n * - Accepts any collection of elements\n * - Gives visual cues of 'more' with auto display fade effect and scroll buttons\n * - Auto scrolls to the active item onload\n *\n * @slot - Default slot to place items.\n *\n * @part base - root, wrapper element\n * @part scroller - the scrolling element\n * @part items - the item wrapper element\n * @part indicator - the animated, indicator element\n * @part scroll-button - The buttons shown at either side of the scrolling area\n * @part scroll-button-prev - The button shown at the start of the scrolling area\n * @part scroll-button-next - The button shown at the end of the scrolling area\n */\n\n@Component({\n  tag: 'nano-overflow-nav',\n  styleUrl: 'overflow-nav.scss',\n  shadow: true,\n})\nexport class OverflowNav implements ComponentInterface {\n  // public surface\n\n  /** Disables the scroll arrow buttons that appear when content overflows */\n  @Prop() scrollControls = true;\n\n  /** The flex direction of the element */\n  @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' =\n    'horizontal';\n\n  /**\n   * A function called when an item becomes 'active' (via click or keyboard)\n   * @param item\n   * @returns void */\n  @Prop() activeHandler = (item: HTMLElement) => item.classList.add('active');\n\n  /**\n   * A function called when an item becomes 'inactive'\n   * (because another item was made active)\n   * @param item\n   * @returns void */\n  @Prop() inActiveHandler = (item: HTMLElement) =>\n    item.classList.remove('active');\n\n  /**\n   * A function called to assess an initial, active item\n   * @param item\n   * @returns void */\n  @Prop() isActiveHandler = (item: HTMLElement) =>\n    item.classList.contains('active');\n\n  // private state\n\n  constructor() {\n    this.recalculatePositions = debounce(this.recalculatePositions, 50);\n  }\n\n  private ro?: ResizeObserver;\n  private nav?: HTMLElement;\n  private itemContainer?: HTMLElement;\n  private isRtl?: boolean;\n  private endBtn: HTMLNanoIconButtonElement;\n  private startBtn: HTMLNanoIconButtonElement;\n  private activeIndicator: HTMLElement;\n\n  get scrollProp() {\n    return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';\n  }\n\n  get clientDimProp() {\n    return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';\n  }\n\n  get scrollOffset() {\n    return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';\n  }\n\n  @Element() host: HTMLNanoOverflowNavElement;\n\n  @State() hasScrollControls = false;\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) this.handleScroll();\n    else this.hideControlStart = this.hideControlEnd = true;\n  }\n\n  @State() hideControlEnd = true;\n\n  @Watch('hideControlEnd')\n  hideEndBtn() {\n    if (!this.endBtn) return;\n    this.activateBtn(this.endBtn, !this.hideControlEnd);\n  }\n\n  @State() hideControlStart = true;\n\n  @Watch('hideControlStart')\n  hideStartBtn() {\n    if (!this.startBtn) return;\n    this.activateBtn(this.startBtn, !this.hideControlStart);\n  }\n\n  // private logic\n\n  private activateBtn(btn: HTMLNanoIconButtonElement, activate = true) {\n    if (!activate) {\n      btn.tabIndex = -1;\n      btn.disabled = true;\n      btn.classList.remove('is-shown');\n      return;\n    }\n    btn.tabIndex = 0;\n    btn.disabled = false;\n    btn.classList.add('is-shown');\n  }\n\n  get allActiveItems() {\n    return this.allItems.filter(\n      (el: any) => !el.disabled || el.classList.contains('disabled')\n    );\n  }\n\n  get allItems() {\n    return getDirectChildren<HTMLElement>(this.host, '*', true);\n  }\n\n  get activeItem() {\n    return this._activeItem;\n  }\n\n  set activeItem(item: HTMLElement) {\n    if (\n      !item ||\n      item === this.activeItem ||\n      (item as any).disabled ||\n      !this.allActiveItems.includes(item)\n    ) {\n      return;\n    }\n\n    this._activeItem = item;\n    this.allActiveItems.forEach((el) => {\n      if (el === this._activeItem) this.activeHandler(el);\n      else this.inActiveHandler(el);\n    });\n    this.syncActiveItemIndicator();\n    this.scrollToActiveItem();\n  }\n  private _activeItem: HTMLElement;\n\n  get navDim() {\n    if (!this.nav) return 0;\n\n    const computedStyle = getComputedStyle(this.nav);\n    let clientDim = this.nav[this.clientDimProp];\n\n    if (this.orientation === 'horizontal') {\n      return (clientDim -=\n        parseFloat(computedStyle.paddingLeft) +\n        parseFloat(computedStyle.paddingRight));\n    } else {\n      return (clientDim -=\n        parseFloat(computedStyle.paddingTop) +\n        parseFloat(computedStyle.paddingBottom));\n    }\n  }\n\n  private scrollToActiveItem(instant?: boolean) {\n    if (!this.nav || !this.activeItem) return;\n    requestAnimationFrame(() => {\n      this.activeItem.scrollIntoView({\n        behavior: instant ? 'auto' : 'smooth',\n        block: 'center',\n        inline: 'center',\n      });\n    });\n  }\n\n  private syncActiveItemIndicator(instant?: boolean) {\n    if (!this.activeItem) return;\n\n    const item = this.activeItem;\n    const width = item.clientWidth || 0;\n    const height = item.clientHeight + 2 || 0;\n    const offset = getOffset(item, this.itemContainer);\n\n    if (!this.activeIndicator) return;\n\n    const offsetTop = offset.top;\n    const offsetLeft = offset.left;\n\n    if (instant) this.activeIndicator.style.transition = 'none';\n\n    switch (this.orientation) {\n      case 'horizontal':\n        this.activeIndicator.style.width = `${width}px`;\n        this.activeIndicator.style.height = null;\n        this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'vertical':\n        this.activeIndicator.style.width = null;\n        this.activeIndicator.style.height = `${height}px`;\n        this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n    setTimeout(() => (this.activeIndicator.style.transition = null), 400);\n  }\n\n  private updateScrollControls = () => {\n    if (!this.nav) return;\n\n    this.hasScrollControls =\n      this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&\n      this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];\n    this.handleScroll();\n  };\n\n  private handleScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlStart = this.hideControlEnd = true;\n      return;\n    }\n    const finishEnd = this.isRtl\n      ? this.nav[this.scrollOffset] === 0\n      : Math.abs(\n          this.nav[this.clientDimProp] -\n            (this.nav[this.scrollProp] - this.nav[this.scrollOffset])\n        ) < 2;\n\n    const finishStart = this.isRtl\n      ? Math.abs(\n          this.nav[this.scrollProp] +\n            this.nav[this.scrollOffset] -\n            this.nav[this.clientDimProp]\n        ) < 2\n      : this.nav[this.scrollOffset] === 0;\n\n    if (finishStart) {\n      this.hideControlStart = true;\n      this.hideControlEnd = false;\n    } else if (finishEnd) {\n      this.hideControlStart = false;\n      this.hideControlEnd = true;\n    } else {\n      this.hideControlEnd = false;\n      this.hideControlStart = false;\n    }\n  };\n\n  private handleBtnClick = (goEnd: boolean = false) => {\n    const navDim = this.navDim;\n    let scrollAmt;\n    if (goEnd) scrollAmt = this.nav[this.scrollOffset] + navDim - 20;\n    else scrollAmt = this.nav[this.scrollOffset] - navDim + 20;\n\n    try {\n      this.nav.scroll({\n        left: this.orientation === 'horizontal' ? scrollAmt : 0,\n        top: this.orientation === 'vertical' ? scrollAmt : 0,\n        behavior: 'smooth',\n      });\n    } catch (e) {\n      this.nav[this.scrollOffset] = scrollAmt;\n    }\n  };\n\n  private slotChangeHandler = () => {\n    if (this.allActiveItems.length < 2) return;\n    const item = this.allActiveItems.find((el) => this.isActiveHandler(el));\n    if (item) this.activeItem = item;\n    this.recalculatePositions();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.allActiveItems.length < 2) return;\n    const foundItem = event\n      .composedPath()\n      .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n    if (foundItem) this.activeItem = foundItem;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const foundItem = event\n        .composedPath()\n        .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n      if (foundItem) this.activeItem = foundItem;\n    }\n  };\n\n  private recalculatePositions = (init?: any) => {\n    this.updateScrollControls();\n    this.syncActiveItemIndicator(init);\n    setTimeout(() => this.scrollToActiveItem(init), 300);\n  };\n\n  // lifecycle\n\n  connectedCallback(): void {\n    this.isRtl =\n      this.orientation === 'horizontal' && !!this.host.closest('[dir=\"rtl\"]');\n\n    if (!window['ResizeObserver']) return;\n\n    if (this.ro) {\n      this.ro.disconnect();\n      this.ro = undefined;\n    }\n    const mo = (this.ro = new ResizeObserver(this.recalculatePositions));\n    mo.observe(this.host);\n  }\n\n  componentDidLoad(): void {\n    this.activeItem = this.allActiveItems.find((el) =>\n      this.isActiveHandler(el)\n    );\n    this.recalculatePositions(true);\n  }\n\n  disconnectedCallback(): void {\n    if (this.ro) {\n      this.ro.disconnect();\n      this.ro = undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host dir={this.isRtl ? 'rtl' : null}>\n        <div\n          part=\"base\"\n          class={{\n            onav: true,\n            [`onav--${this.orientation}`]: true,\n            'onav--has-scroll-controls': this.hasScrollControls,\n            'onav--has-scroll-controls-start': !this.hideControlStart,\n            'onav--has-scroll-controls-end': !this.hideControlEnd,\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"onav__nav\">\n            {this.scrollControls && (\n              <nano-icon-button\n                part=\"scroll-button scroll-button-prev\"\n                class={{\n                  'onav__scroll-button': true,\n                  'onav__scroll-button--start': true,\n                }}\n                ref={(btn) => (this.startBtn = btn)}\n                onClick={() => this.handleBtnClick(false)}\n                label=\"Click to scroll\"\n                iconName={\n                  this.orientation === 'horizontal'\n                    ? 'light/chevron-left'\n                    : 'light/chevron-up'\n                }\n              />\n            )}\n\n            <div\n              part=\"scroller\"\n              ref={(el) => (this.nav = el)}\n              class=\"onav__scroller\"\n              onScroll={this.handleScroll}\n            >\n              <div\n                part=\"items\"\n                ref={(el) => (this.itemContainer = el)}\n                class=\"onav__items\"\n              >\n                <div\n                  part=\"indicator\"\n                  ref={(el) => (this.activeIndicator = el)}\n                  class=\"onav__active-indicator\"\n                />\n                <slot onSlotchange={this.slotChangeHandler} />\n              </div>\n            </div>\n\n            {this.scrollControls && (\n              <nano-icon-button\n                part=\"scroll-button scroll-button-next\"\n                class={{\n                  'onav__scroll-button': true,\n                  'onav__scroll-button--end': true,\n                }}\n                ref={(btn) => (this.endBtn = btn)}\n                onClick={() => this.handleBtnClick(true)}\n                label=\"Click to scroll\"\n                iconName={\n                  this.orientation === 'horizontal'\n                    ? 'light/chevron-right'\n                    : 'light/chevron-down'\n                }\n              />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}