@nanoporetech-digital/components 4.3.2 → 4.4.1

package/dist/types/components.d.ts

@@ -1633,22 +1633,25 @@ export namespace Components {
     interface NanoOverflowNav {
         /**
           * A function called when an item becomes 'active' (via click or keyboard)
-          * @param item
+          * @param item - html element currently being assessed
+          * @param _index - the index of the html element currently being assessed
           * @returns void
          */
-        "activeHandler": (item: HTMLElement) => void;
+        "activeHandler": (item: HTMLElement, _index: number) => void;
         /**
           * A function called when an item becomes 'inactive' (because another item was made active)
-          * @param item
+          * @param item - html element currently being assessed
+          * @param _index - the index of the html element currently being assessed
           * @returns void
          */
-        "inActiveHandler": (item: HTMLElement) => void;
+        "inActiveHandler": (item: HTMLElement, _index: number) => void;
         /**
           * A function called to assess an initial, active item
-          * @param item
+          * @param item - html element currently being assessed
+          * @param _index - the index of the html element currently being assessed
           * @returns void
          */
-        "isActiveHandler": (item: HTMLElement) => boolean;
+        "isActiveHandler": (item: HTMLElement, _index: number) => boolean;
         /**
           * The flex direction of the element
          */
@@ -1657,6 +1660,10 @@ export namespace Components {
           * Disables the scroll arrow buttons that appear when content overflows
          */
         "scrollControls": boolean;
+        /**
+          * Sync up the view to the active item. Use this when the active item changes outside of this component.
+         */
+        "syncActiveItem": () => Promise<void>;
     }
     /**
      * Used to show the status of an ongoing operation.
@@ -4848,22 +4855,25 @@ declare namespace LocalJSX {
     interface NanoOverflowNav {
         /**
           * A function called when an item becomes 'active' (via click or keyboard)
-          * @param item
+          * @param item - html element currently being assessed
+          * @param _index - the index of the html element currently being assessed
           * @returns void
          */
-        "activeHandler"?: (item: HTMLElement) => void;
+        "activeHandler"?: (item: HTMLElement, _index: number) => void;
         /**
           * A function called when an item becomes 'inactive' (because another item was made active)
-          * @param item
+          * @param item - html element currently being assessed
+          * @param _index - the index of the html element currently being assessed
           * @returns void
          */
-        "inActiveHandler"?: (item: HTMLElement) => void;
+        "inActiveHandler"?: (item: HTMLElement, _index: number) => void;
         /**
           * A function called to assess an initial, active item
-          * @param item
+          * @param item - html element currently being assessed
+          * @param _index - the index of the html element currently being assessed
           * @returns void
          */
-        "isActiveHandler"?: (item: HTMLElement) => boolean;
+        "isActiveHandler"?: (item: HTMLElement, _index: number) => boolean;
         /**
           * The flex direction of the element
          */

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-03-09T09:44:32",
+  "timestamp": "2023-03-10T22:36:58",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.23.0",
@@ -10906,24 +10906,28 @@
       "props": [
         {
           "name": "activeHandler",
-          "type": "(item: HTMLElement) => void",
+          "type": "(item: HTMLElement, _index: number) => void",
           "mutable": false,
           "reflectToAttr": false,
           "docs": "A function called when an item becomes 'active' (via click or keyboard)",
           "docsTags": [
             {
               "name": "param",
-              "text": "item"
+              "text": "item - html element currently being assessed"
+            },
+            {
+              "name": "param",
+              "text": "_index - the index of the html element currently being assessed"
             },
             {
               "name": "returns",
               "text": "void"
             }
           ],
-          "default": "(item: HTMLElement) => item.classList.add('active')",
+          "default": "(item: HTMLElement, _index: number) =>\n    item.classList.add('active')",
           "values": [
             {
-              "type": "(item: HTMLElement) => void"
+              "type": "(item: HTMLElement, _index: number) => void"
             }
           ],
           "optional": false,
@@ -10933,24 +10937,28 @@
         },
         {
           "name": "inActiveHandler",
-          "type": "(item: HTMLElement) => void",
+          "type": "(item: HTMLElement, _index: number) => void",
           "mutable": false,
           "reflectToAttr": false,
           "docs": "A function called when an item becomes 'inactive'\n(because another item was made active)",
           "docsTags": [
             {
               "name": "param",
-              "text": "item"
+              "text": "item - html element currently being assessed"
+            },
+            {
+              "name": "param",
+              "text": "_index - the index of the html element currently being assessed"
             },
             {
               "name": "returns",
               "text": "void"
             }
           ],
-          "default": "(item: HTMLElement) =>\n    item.classList.remove('active')",
+          "default": "(item: HTMLElement, _index: number) =>\n    item.classList.remove('active')",
           "values": [
             {
-              "type": "(item: HTMLElement) => void"
+              "type": "(item: HTMLElement, _index: number) => void"
             }
           ],
           "optional": false,
@@ -10960,24 +10968,28 @@
         },
         {
           "name": "isActiveHandler",
-          "type": "(item: HTMLElement) => boolean",
+          "type": "(item: HTMLElement, _index: number) => boolean",
           "mutable": false,
           "reflectToAttr": false,
           "docs": "A function called to assess an initial, active item",
           "docsTags": [
             {
               "name": "param",
-              "text": "item"
+              "text": "item - html element currently being assessed"
+            },
+            {
+              "name": "param",
+              "text": "_index - the index of the html element currently being assessed"
             },
             {
               "name": "returns",
               "text": "void"
             }
           ],
-          "default": "(item: HTMLElement) =>\n    item.classList.contains('active')",
+          "default": "(item: HTMLElement, _index: number) =>\n    item.classList.contains('active')",
           "values": [
             {
-              "type": "(item: HTMLElement) => boolean"
+              "type": "(item: HTMLElement, _index: number) => boolean"
             }
           ],
           "optional": false,
@@ -11029,7 +11041,19 @@
           "setter": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "syncActiveItem",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "syncActiveItem() => Promise<void>",
+          "parameters": [],
+          "docs": "Sync up the view to the active item.\nUse this when the active item changes outside of this component.",
+          "docsTags": []
+        }
+      ],
       "events": [],
       "listeners": [],
       "styles": [

package/hydrate/index.js

@@ -21109,7 +21109,7 @@ class Option {
   }; }
 }
 
-const overflowNavCss = "/*!@:host*/.sc-nano-overflow-nav-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-overflow-nav,*.sc-nano-overflow-nav::before,*.sc-nano-overflow-nav::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-overflow-nav{display:none !important}/*!@:host*/.sc-nano-overflow-nav-h{--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])*/[orientation=horizontal].sc-nano-overflow-nav-h{display:block}/*!@:host([orientation=vertical])*/[orientation=vertical].sc-nano-overflow-nav-h{display:flex}/*!@.onav__scroller*/.onav__scroller.sc-nano-overflow-nav{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*/.onav__scroller.sc-nano-overflow-nav::-webkit-scrollbar{inline-size:0;block-size:0}/*!@.onav__scroller::after*/.onav__scroller.sc-nano-overflow-nav::after{content:\" \";line-height:1;flex:0 0 auto;display:block}/*!@.onav--has-scroll-controls-start .onav__scroller*/.onav--has-scroll-controls-start.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav{-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*/.onav--has-scroll-controls-end.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav{-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*/.onav--has-scroll-controls-start.onav--has-scroll-controls-end.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}/*!@.onav__items*/.onav__items.sc-nano-overflow-nav{flex:1 1 auto;position:relative;width:auto;flex-wrap:nowrap;display:flex}/*!@.onav__items::before*/.onav__items.sc-nano-overflow-nav::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}/*!@.onav__active-indicator*/.onav__active-indicator.sc-nano-overflow-nav{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*/.onav.sc-nano-overflow-nav nano-icon-button.onav__scroll-button.sc-nano-overflow-nav{--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*/.onav.sc-nano-overflow-nav nano-icon-button.onav__scroll-button.sc-nano-overflow-nav:focus{outline:none}/*!@.onav nano-icon-button.onav__scroll-button.is-shown*/.onav.sc-nano-overflow-nav nano-icon-button.onav__scroll-button.is-shown.sc-nano-overflow-nav{opacity:1;pointer-events:all}/*!@.onav nano-icon-button.onav__scroll-button:focus-visible*/.onav.sc-nano-overflow-nav nano-icon-button.onav__scroll-button.sc-nano-overflow-nav: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*/.onav--horizontal.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav{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*/.onav--horizontal.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav::after{padding-inline:0 var(--fade-size);padding-block:0 0}/*!@.onav--horizontal.onav--has-scroll-controls .onav__scroller*/.onav--horizontal.onav--has-scroll-controls.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav{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*/.onav--horizontal.sc-nano-overflow-nav .onav__items.sc-nano-overflow-nav{flex-direction:row}/*!@.onav--horizontal .onav__items::before*/.onav--horizontal.sc-nano-overflow-nav .onav__items.sc-nano-overflow-nav::before{content:\"\";width:100%;height:var(--indicator-track-size);inset-block-end:0}/*!@.onav--horizontal .onav__active-indicator*/.onav--horizontal.sc-nano-overflow-nav .onav__active-indicator.sc-nano-overflow-nav{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*/.onav--horizontal.sc-nano-overflow-nav .onav__scroll-button.sc-nano-overflow-nav{inset-block:0}/*!@.onav--horizontal .onav__scroll-button--start*/.onav--horizontal.sc-nano-overflow-nav .onav__scroll-button--start.sc-nano-overflow-nav{inset-inline-start:0}/*!@.onav--horizontal .onav__scroll-button--end*/.onav--horizontal.sc-nano-overflow-nav .onav__scroll-button--end.sc-nano-overflow-nav{inset-inline-end:0}/*!@.onav--vertical*/.onav--vertical.sc-nano-overflow-nav{width:100%}/*!@.onav--vertical .onav__nav*/.onav--vertical.sc-nano-overflow-nav .onav__nav.sc-nano-overflow-nav{max-height:100%;display:flex}/*!@.onav--vertical .onav__scroller*/.onav--vertical.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav{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*/.onav--vertical.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav::after{padding-inline:0 0;padding-block:0 var(--fade-size)}/*!@.onav--vertical .onav__items*/.onav--vertical.sc-nano-overflow-nav .onav__items.sc-nano-overflow-nav{flex-direction:column;width:-moz-fit-content;width:fit-content}/*!@.onav--vertical .onav__items::before*/.onav--vertical.sc-nano-overflow-nav .onav__items.sc-nano-overflow-nav::before{content:\"\";height:100%;width:var(--indicator-track-size);inset-inline-start:0}/*!@.onav--vertical .onav__active-indicator*/.onav--vertical.sc-nano-overflow-nav .onav__active-indicator.sc-nano-overflow-nav{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*/.onav--vertical.sc-nano-overflow-nav .onav__scroll-button.sc-nano-overflow-nav{inset-inline:0}/*!@.onav--vertical .onav__scroll-button--start*/.onav--vertical.sc-nano-overflow-nav .onav__scroll-button--start.sc-nano-overflow-nav{inset-block-start:0}/*!@.onav--vertical .onav__scroll-button--end*/.onav--vertical.sc-nano-overflow-nav .onav__scroll-button--end.sc-nano-overflow-nav{inset-block-end:0}";
+const overflowNavCss = "/*!@:host*/.sc-nano-overflow-nav-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-overflow-nav,*.sc-nano-overflow-nav::before,*.sc-nano-overflow-nav::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-overflow-nav{display:none !important}/*!@:host*/.sc-nano-overflow-nav-h{--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])*/[orientation=horizontal].sc-nano-overflow-nav-h{display:block}/*!@:host([orientation=vertical])*/[orientation=vertical].sc-nano-overflow-nav-h{display:flex}/*!@.onav--no-transitions **/.onav--no-transitions.sc-nano-overflow-nav *.sc-nano-overflow-nav{transition-duration:0s !important}/*!@.onav__scroller*/.onav__scroller.sc-nano-overflow-nav{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*/.onav__scroller.sc-nano-overflow-nav::-webkit-scrollbar{inline-size:0;block-size:0}/*!@.onav__scroller::after*/.onav__scroller.sc-nano-overflow-nav::after{content:\" \";line-height:1;flex:0 0 auto;display:block}/*!@.onav--has-scroll-controls-start .onav__scroller*/.onav--has-scroll-controls-start.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav{-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*/.onav--has-scroll-controls-end.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav{-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*/.onav--has-scroll-controls-start.onav--has-scroll-controls-end.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}/*!@.onav__items*/.onav__items.sc-nano-overflow-nav{flex:1 1 auto;position:relative;width:auto;flex-wrap:nowrap;display:flex}/*!@.onav__items::before*/.onav__items.sc-nano-overflow-nav::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}/*!@.onav__active-indicator*/.onav__active-indicator.sc-nano-overflow-nav{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*/.onav.sc-nano-overflow-nav nano-icon-button.onav__scroll-button.sc-nano-overflow-nav{--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*/.onav.sc-nano-overflow-nav nano-icon-button.onav__scroll-button.sc-nano-overflow-nav:focus{outline:none}/*!@.onav nano-icon-button.onav__scroll-button.is-shown*/.onav.sc-nano-overflow-nav nano-icon-button.onav__scroll-button.is-shown.sc-nano-overflow-nav{opacity:1;pointer-events:all}/*!@.onav nano-icon-button.onav__scroll-button:focus-visible*/.onav.sc-nano-overflow-nav nano-icon-button.onav__scroll-button.sc-nano-overflow-nav: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*/.onav--horizontal.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav{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*/.onav--horizontal.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav::after{padding-inline:0 var(--fade-size);padding-block:0 0}/*!@.onav--horizontal.onav--has-scroll-controls .onav__scroller*/.onav--horizontal.onav--has-scroll-controls.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav{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*/.onav--horizontal.sc-nano-overflow-nav .onav__items.sc-nano-overflow-nav{flex-direction:row}/*!@.onav--horizontal .onav__items::before*/.onav--horizontal.sc-nano-overflow-nav .onav__items.sc-nano-overflow-nav::before{content:\"\";width:100%;height:var(--indicator-track-size);inset-block-end:0}/*!@.onav--horizontal .onav__active-indicator*/.onav--horizontal.sc-nano-overflow-nav .onav__active-indicator.sc-nano-overflow-nav{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*/.onav--horizontal.sc-nano-overflow-nav .onav__scroll-button.sc-nano-overflow-nav{inset-block:0}/*!@.onav--horizontal .onav__scroll-button--start*/.onav--horizontal.sc-nano-overflow-nav .onav__scroll-button--start.sc-nano-overflow-nav{inset-inline-start:0}/*!@.onav--horizontal .onav__scroll-button--end*/.onav--horizontal.sc-nano-overflow-nav .onav__scroll-button--end.sc-nano-overflow-nav{inset-inline-end:0}/*!@.onav--vertical*/.onav--vertical.sc-nano-overflow-nav{width:100%}/*!@.onav--vertical .onav__nav*/.onav--vertical.sc-nano-overflow-nav .onav__nav.sc-nano-overflow-nav{max-height:100%;display:flex}/*!@.onav--vertical .onav__scroller*/.onav--vertical.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav{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*/.onav--vertical.sc-nano-overflow-nav .onav__scroller.sc-nano-overflow-nav::after{padding-inline:0 0;padding-block:0 var(--fade-size)}/*!@.onav--vertical .onav__items*/.onav--vertical.sc-nano-overflow-nav .onav__items.sc-nano-overflow-nav{flex-direction:column;width:-moz-fit-content;width:fit-content}/*!@.onav--vertical .onav__items::before*/.onav--vertical.sc-nano-overflow-nav .onav__items.sc-nano-overflow-nav::before{content:\"\";height:100%;width:var(--indicator-track-size);inset-inline-start:0}/*!@.onav--vertical .onav__active-indicator*/.onav--vertical.sc-nano-overflow-nav .onav__active-indicator.sc-nano-overflow-nav{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*/.onav--vertical.sc-nano-overflow-nav .onav__scroll-button.sc-nano-overflow-nav{inset-inline:0}/*!@.onav--vertical .onav__scroll-button--start*/.onav--vertical.sc-nano-overflow-nav .onav__scroll-button--start.sc-nano-overflow-nav{inset-block-start:0}/*!@.onav--vertical .onav__scroll-button--end*/.onav--vertical.sc-nano-overflow-nav .onav__scroll-button--end.sc-nano-overflow-nav{inset-block-end:0}";
 
 /**
  * Primarily used to display navigational items that may not fit on smaller screens.
@@ -21130,8 +21130,16 @@ const overflowNavCss = "/*!@:host*/.sc-nano-overflow-nav-h{box-sizing:border-box
  */
 class OverflowNav {
   watchIsActiveHandler() {
-    this.activeItem = this.allActiveItems.find((el) => this.isActiveHandler(el));
-    this.recalculatePositions(true);
+    this.instantReCalc = true;
+    this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+    setTimeout(() => (this.instantReCalc = false), 300);
+  }
+  /**
+   * Sync up the view to the active item.
+   * Use this when the active item changes outside of this component.
+   */
+  async syncActiveItem() {
+    this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
   }
   // private state
   constructor(hostRef) {
@@ -21190,38 +21198,24 @@ class OverflowNav {
         this.nav[this.scrollOffset] = scrollAmt;
       }
     };
-    this.slotChangeHandler = (ev) => {
+    this.slotChangeHandler = () => {
       if (this.allActiveItems.length < 2)
         return;
-      const item = this.allActiveItems.find((el) => this.isActiveHandler(el));
+      const item = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
       if (item)
         this.activeItem = item;
       this.recalculatePositions();
       /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */
-      const nodes = ev.target.assignedElements({ flatten: true });
-      nodes.forEach((node) => {
-        if (!this.mutationObservers.get(node)) {
-          const mo = new MutationObserver((records) => {
-            records.forEach((record) => {
-              if (record.type === 'attributes') {
-                const foundItem = this.allActiveItems.find((el) => this.isActiveHandler(el));
-                if (foundItem && foundItem !== this.activeItem) {
-                  this.activeItem = foundItem;
-                }
-              }
-              else {
-                this.syncActiveItemIndicator();
-              }
-            });
-          });
-          this.mutationObservers.set(node, mo);
-          mo.observe(node, {
-            characterData: true,
-            childList: true,
-            subtree: true,
-            attributes: true,
-          });
-        }
+      this.allActiveItems.forEach((item) => {
+        if (this.mutationObservers.get(item))
+          return;
+        const mo = new MutationObserver(() => this.syncActiveItemIndicator());
+        mo.observe(item, {
+          characterData: true,
+          childList: true,
+          subtree: true,
+        });
+        this.mutationObservers.set(item, mo);
       });
     };
     this.handleClick = (event) => {
@@ -21243,20 +21237,21 @@ class OverflowNav {
           this.activeItem = foundItem;
       }
     };
-    this.recalculatePositions = (init) => {
+    this.recalculatePositions = () => {
       this.updateScrollControls();
-      this.syncActiveItemIndicator(init);
-      this.scrollToActiveItem(init);
+      this.syncActiveItemIndicator();
+      this.scrollToActiveItem();
     };
     this.scrollControls = true;
     this.orientation = 'horizontal';
-    this.activeHandler = (item) => item.classList.add('active');
-    this.inActiveHandler = (item) => item.classList.remove('active');
-    this.isActiveHandler = (item) => item.classList.contains('active');
+    this.activeHandler = (item, _index) => item.classList.add('active');
+    this.inActiveHandler = (item, _index) => item.classList.remove('active');
+    this.isActiveHandler = (item, _index) => item.classList.contains('active');
+    this.instantReCalc = false;
     this.hasScrollControls = false;
     this.hideControlEnd = true;
     this.hideControlStart = true;
-    this.recalculatePositions = debounce$2(this.recalculatePositions, 80);
+    this.recalculatePositions = debounce$2(this.recalculatePositions.bind(this), 80);
   }
   get scrollProp() {
     return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';
@@ -21312,14 +21307,13 @@ class OverflowNav {
       return;
     }
     this._activeItem = item;
-    this.allActiveItems.forEach((el) => {
+    this.allActiveItems.forEach((el, i) => {
       if (el === this._activeItem)
-        this.activeHandler(el);
+        this.activeHandler(el, i);
       else
-        this.inActiveHandler(el);
+        this.inActiveHandler(el, i);
     });
-    this.syncActiveItemIndicator();
-    this.scrollToActiveItem();
+    this.recalculatePositions();
   }
   get navDim() {
     if (!this.nav)
@@ -21337,18 +21331,18 @@ class OverflowNav {
           parseFloat(computedStyle.paddingBottom));
     }
   }
-  scrollToActiveItem(instant) {
+  scrollToActiveItem() {
     if (!this.nav || !this.activeItem)
       return;
-    requestAnimationFrame(() => {
+    setTimeout(() => {
       this.activeItem.scrollIntoView({
-        behavior: instant ? 'auto' : 'smooth',
+        behavior: this.instantReCalc ? 'auto' : 'smooth',
         block: 'center',
         inline: 'center',
       });
-    });
+    }, 100);
   }
-  syncActiveItemIndicator(instant) {
+  syncActiveItemIndicator() {
     if (!this.activeItem)
       return;
     const item = this.activeItem;
@@ -21359,7 +21353,7 @@ class OverflowNav {
       return;
     const offsetTop = offset.top;
     const offsetLeft = offset.left;
-    if (instant)
+    if (this.instantReCalc)
       this.activeIndicator.style.transition = 'none';
     switch (this.orientation) {
       case 'horizontal':
@@ -21377,8 +21371,11 @@ class OverflowNav {
   }
   // lifecycle
   connectedCallback() {
+    this.instantReCalc = true;
     this.isRtl =
       this.orientation === 'horizontal' && !!this.host.closest('[dir="rtl"]');
+    if (window['MutationObserver'])
+      this.slotChangeHandler();
     if (!window['ResizeObserver'])
       return;
     if (this.ro) {
@@ -21389,8 +21386,8 @@ class OverflowNav {
     mo.observe(this.host);
   }
   componentDidLoad() {
-    this.activeItem = this.allActiveItems.find((el) => this.isActiveHandler(el));
-    this.recalculatePositions(true);
+    this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+    this.instantReCalc = false;
   }
   disconnectedCallback() {
     if (this.ro) {
@@ -21405,6 +21402,7 @@ class OverflowNav {
         'onav--has-scroll-controls': this.hasScrollControls,
         'onav--has-scroll-controls-start': !this.hideControlStart,
         'onav--has-scroll-controls-end': !this.hideControlEnd,
+        'onav--no-transitions': this.instantReCalc,
       }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, hAsync("div", { class: "onav__nav" }, this.scrollControls && (hAsync("nano-icon-button", { part: "scroll-button scroll-button-prev", class: {
         'onav__scroll-button': true,
         'onav__scroll-button--start': true,
@@ -21434,9 +21432,11 @@ class OverflowNav {
       "activeHandler": [16],
       "inActiveHandler": [16],
       "isActiveHandler": [16],
+      "instantReCalc": [32],
       "hasScrollControls": [32],
       "hideControlEnd": [32],
-      "hideControlStart": [32]
+      "hideControlStart": [32],
+      "syncActiveItem": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",

package/package.json

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

package/dist/cjs/table.worker-c3b11144.js.map

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

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

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

package/dist/nano-components/p-763e0fa0.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 r}from"./p-257432ff.js";import{d as o}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{watchIsActiveHandler(){this.activeItem=this.allActiveItems.find((t=>this.isActiveHandler(t)));this.recalculatePositions(true)}constructor(i){t(this,i);this.mutationObservers=new WeakMap;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=t=>{if(this.allActiveItems.length<2)return;const i=this.allActiveItems.find((t=>this.isActiveHandler(t)));if(i)this.activeItem=i;this.recalculatePositions();const a=t.target.assignedElements({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const i=new MutationObserver((t=>{t.forEach((t=>{if(t.type==="attributes"){const t=this.allActiveItems.find((t=>this.isActiveHandler(t)));if(t&&t!==this.activeItem){this.activeItem=t}}else{this.syncActiveItemIndicator()}}))}));this.mutationObservers.set(t,i);i.observe(t,{characterData:true,childList:true,subtree:true,attributes:true})}}))};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);this.scrollToActiveItem(t)};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=o(this.recalculatePositions,80)}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=r(i,this.itemContainer);if(!this.activeIndicator)return;const o=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(${o}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{isActiveHandler:["watchIsActiveHandler"],hasScrollControls:["watchScrollControls"],hideControlEnd:["hideEndBtn"],hideControlStart:["hideStartBtn"]}}};l.style=n;export{l as nano_overflow_nav};
-//# sourceMappingURL=p-763e0fa0.entry.js.map

package/dist/nano-components/p-763e0fa0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["overflowNavCss","OverflowNav","watchIsActiveHandler","this","activeItem","allActiveItems","find","el","isActiveHandler","recalculatePositions","constructor","hostRef","mutationObservers","WeakMap","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","ev","length","item","nodes","target","assignedElements","flatten","forEach","node","get","mo","MutationObserver","records","record","type","foundItem","syncActiveItemIndicator","set","observe","characterData","childList","subtree","attributes","handleClick","event","composedPath","includes","handleKeyDown","key","init","scrollToActiveItem","classList","add","remove","contains","debounce","watchScrollControls","hideEndBtn","endBtn","activateBtn","hideStartBtn","startBtn","btn","activate","tabIndex","disabled","allItems","filter","getDirectChildren","host","_activeItem","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","setTimeout","connectedCallback","closest","window","ro","disconnect","undefined","ResizeObserver","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  @Watch('isActiveHandler')\n  watchIsActiveHandler() {\n    this.activeItem = this.allActiveItems.find((el) =>\n      this.isActiveHandler(el)\n    );\n    this.recalculatePositions(true);\n  }\n\n  // private state\n\n  constructor() {\n    this.recalculatePositions = debounce(this.recalculatePositions, 80);\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  private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\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 = (ev: Event & { target: HTMLSlotElement }) => {\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    /** maintain a weakmap of mutation observers to maintain item / 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((records) => {\n          records.forEach((record) => {\n            if (record.type === 'attributes') {\n              const foundItem = this.allActiveItems.find((el) =>\n                this.isActiveHandler(el)\n              );\n              if (foundItem && foundItem !== this.activeItem) {\n                this.activeItem = foundItem;\n              }\n            } else {\n              this.syncActiveItemIndicator();\n            }\n          });\n        });\n        this.mutationObservers.set(node, mo);\n\n        mo.observe(node, {\n          characterData: true,\n          childList: true,\n          subtree: true,\n          attributes: true,\n        });\n      }\n    });\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    this.scrollToActiveItem(init);\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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"}