@nanoporetech-digital/components 3.13.0 → 4.0.0

package/docs-json.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2023-02-21T14:21:18",
+  "timestamp": "2023-03-04T00:35:53",
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.6",
+    "version": "2.23.0",
     "typescriptVersion": "4.9.4"
   },
   "components": [
@@ -2103,17 +2103,17 @@
         {
           "name": "--segment-shadow",
           "annotation": "prop",
-          "docs": "0 1px 4px rgba(0,0,0,.2);"
+          "docs": "0 1px 4px rgb(0 0 0 / 20%);"
         },
         {
           "name": "--tagbox-bg-color",
           "annotation": "prop",
-          "docs": "Defaults to rgba(var(--tagbox-rgb), .1);"
+          "docs": "Defaults to rgb(var(--tagbox-rgb) / 10%);"
         },
         {
           "name": "--tagbox-border-color",
           "annotation": "prop",
-          "docs": "Defaults to rgba(var(--tagbox-rgb), .5);"
+          "docs": "Defaults to rgb(var(--tagbox-rgb) / 50%);"
         },
         {
           "name": "--tagbox-rgb",
@@ -4962,7 +4962,7 @@
         {
           "name": "--panel-shadow",
           "annotation": "prop",
-          "docs": "Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';"
+          "docs": "Defaults to '0 4px 16px rgb(0 0 0 / 10%)';"
         },
         {
           "name": "--size",
@@ -6856,6 +6856,12 @@
           "event": "nanoClose",
           "capture": false,
           "passive": false
+        },
+        {
+          "event": "click",
+          "target": "body",
+          "capture": false,
+          "passive": false
         }
       ],
       "styles": [
@@ -6872,12 +6878,12 @@
         {
           "name": "--bar-color-shade",
           "annotation": "prop",
-          "docs": "Defaults to rgb(19, 89, 111);"
+          "docs": "Defaults to rgb(19 89 111);"
         },
         {
           "name": "--bar-color-tint",
           "annotation": "prop",
-          "docs": "Defaults to rgb(19, 89, 111);"
+          "docs": "Defaults to rgb(19 89 111);"
         },
         {
           "name": "--bar-dropdown-bg",
@@ -8295,6 +8301,7 @@
         "nano-alert",
         "nano-dialog",
         "nano-file-upload",
+        "nano-overflow-nav",
         "nano-tab"
       ],
       "dependencies": [
@@ -8313,6 +8320,9 @@
         "nano-file-upload": [
           "nano-icon-button"
         ],
+        "nano-overflow-nav": [
+          "nano-icon-button"
+        ],
         "nano-tab": [
           "nano-icon-button"
         ]
@@ -9531,12 +9541,12 @@
         {
           "name": "--clear-btn-color--hover",
           "annotation": "prop",
-          "docs": "defaults to rgba(var(--color--focus-rgb), 1);"
+          "docs": "defaults to rgb(var(--color--focus-rgb) / 100%);"
         },
         {
           "name": "--clear-btn-color--invalid",
           "annotation": "prop",
-          "docs": "defaults to rgba(var(--color-invalid), 1);"
+          "docs": "defaults to rgb(var(--color-invalid) / 100%);"
         },
         {
           "name": "--color--focus-rgb",
@@ -9606,7 +9616,7 @@
         {
           "name": "--invalid-msg-color",
           "annotation": "prop",
-          "docs": "defaults to rgba(var(--color-invalid), 1);"
+          "docs": "defaults to rgb(var(--color-invalid) / 100%);"
         },
         {
           "name": "--invalid-msg-font-size",
@@ -10777,6 +10787,272 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/overflow-nav/overflow-nav.tsx",
+      "encapsulation": "shadow",
+      "tag": "nano-overflow-nav",
+      "readme": "# nano-overflow-nav\n\n\n",
+      "docs": "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",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- Default slot to place items."
+        },
+        {
+          "name": "part",
+          "text": "base - root, wrapper element"
+        },
+        {
+          "name": "part",
+          "text": "scroller - the scrolling element"
+        },
+        {
+          "name": "part",
+          "text": "items - the item wrapper element"
+        },
+        {
+          "name": "part",
+          "text": "indicator - the animated, indicator element"
+        },
+        {
+          "name": "part",
+          "text": "scroll-button - The buttons shown at either side of the scrolling area"
+        },
+        {
+          "name": "part",
+          "text": "scroll-button-prev - The button shown at the start of the scrolling area"
+        },
+        {
+          "name": "part",
+          "text": "scroll-button-next - The button shown at the end of the scrolling area"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "activeHandler",
+          "type": "(item: HTMLElement) => void",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "A function called when an item becomes 'active' (via click or keyboard)",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "item"
+            },
+            {
+              "name": "returns",
+              "text": "void"
+            }
+          ],
+          "default": "(item: HTMLElement) => item.classList.add('active')",
+          "values": [
+            {
+              "type": "(item: HTMLElement) => void"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "inActiveHandler",
+          "type": "(item: HTMLElement) => 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"
+            },
+            {
+              "name": "returns",
+              "text": "void"
+            }
+          ],
+          "default": "(item: HTMLElement) =>\n    item.classList.remove('active')",
+          "values": [
+            {
+              "type": "(item: HTMLElement) => void"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "isActiveHandler",
+          "type": "(item: HTMLElement) => boolean",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "A function called to assess an initial, active item",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "item"
+            },
+            {
+              "name": "returns",
+              "text": "void"
+            }
+          ],
+          "default": "(item: HTMLElement) =>\n    item.classList.contains('active')",
+          "values": [
+            {
+              "type": "(item: HTMLElement) => boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "orientation",
+          "type": "\"horizontal\" | \"vertical\"",
+          "mutable": false,
+          "attr": "orientation",
+          "reflectToAttr": true,
+          "docs": "The flex direction of the element",
+          "docsTags": [],
+          "default": "'horizontal'",
+          "values": [
+            {
+              "value": "horizontal",
+              "type": "string"
+            },
+            {
+              "value": "vertical",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "scrollControls",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "scroll-controls",
+          "reflectToAttr": false,
+          "docs": "Disables the scroll arrow buttons that appear when content overflows",
+          "docsTags": [],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [
+        {
+          "name": "--fade-size. The size of the fade areas (when items do not fit). Defaults to 1.75rem;",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--fade-transparency. Defaults to 0;",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--indicator-color. Defaults to #90c6e7;",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--indicator-size. Defaults to 0;",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--indicator-track-color. Defaults to #e4e6e8;",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--indicator-track-size. Defaults to var(--indicator-size);",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--indicator-transition. Defaults to var(--nano-transition-fast, 0.3s)",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--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);",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--scroll-btn-color. Defaults to 'currentColor';",
+          "annotation": "prop",
+          "docs": ""
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "docs": "Default slot to place items."
+        }
+      ],
+      "parts": [
+        {
+          "name": "base",
+          "docs": "root, wrapper element"
+        },
+        {
+          "name": "indicator",
+          "docs": "the animated, indicator element"
+        },
+        {
+          "name": "items",
+          "docs": "the item wrapper element"
+        },
+        {
+          "name": "scroll-button",
+          "docs": "The buttons shown at either side of the scrolling area"
+        },
+        {
+          "name": "scroll-button-next",
+          "docs": "The button shown at the end of the scrolling area"
+        },
+        {
+          "name": "scroll-button-prev",
+          "docs": "The button shown at the start of the scrolling area"
+        },
+        {
+          "name": "scroller",
+          "docs": "the scrolling element"
+        }
+      ],
+      "dependents": [],
+      "dependencies": [
+        "nano-icon-button"
+      ],
+      "dependencyGraph": {
+        "nano-overflow-nav": [
+          "nano-icon-button"
+        ],
+        "nano-icon-button": [
+          "nano-icon"
+        ]
+      }
+    },
     {
       "filePath": "./src/components/progress-bar/progress-bar.tsx",
       "encapsulation": "shadow",
@@ -10873,7 +11149,7 @@
         {
           "name": "--indicator-color",
           "annotation": "prop",
-          "docs": "The indicator color. Default rgba(var(--nano-indicator-rgb, 84 140 175), 1);"
+          "docs": "The indicator color. Default rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);"
         },
         {
           "name": "--label-color",
@@ -10883,7 +11159,7 @@
         {
           "name": "--track-color",
           "annotation": "prop",
-          "docs": "The track color. Default rgba(var(--nano-track-rgb, 228 230 232), 1);"
+          "docs": "The track color. Default rgb(var(--nano-track-rgb, 228 230 232) / 100%);"
         }
       ],
       "slots": [
@@ -11273,7 +11549,7 @@
         {
           "name": "--knob-box-shadow",
           "annotation": "prop",
-          "docs": "Box shadow of the range knob; Defaults to 0 2px 4px 0 rgba(0, 0, 0, 0.3);"
+          "docs": "Box shadow of the range knob; Defaults to 0 2px 4px 0 rgb(0 0 0 / 30%);"
         },
         {
           "name": "--knob-handle-size",
@@ -11650,7 +11926,7 @@
           "mutable": false,
           "attr": "states",
           "reflectToAttr": false,
-          "docs": "string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\nFormat: `states=\"800w, 300h class1 class2\"`",
+          "docs": "string list of sizes and optional class-names.\nAdds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\nFormat: `states=\"800w, 300h class1 class2\"`",
           "docsTags": [],
           "values": [
             {
@@ -11671,7 +11947,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Fires when the content either begins or stops to fit. Will only work when `notifyContentFit` is set.",
+          "docs": "Fires when the content either begins or stops fitting.\nWill only work when `notifyContentFit` is set.",
           "docsTags": []
         },
         {
@@ -12450,12 +12726,12 @@
         {
           "name": "--clear-btn-color--hover",
           "annotation": "prop",
-          "docs": "defaults to rgba(var(--color--focus-rgb), 1);"
+          "docs": "defaults to rgb(var(--color--focus-rgb) / 100%);"
         },
         {
           "name": "--clear-btn-color--invalid",
           "annotation": "prop",
-          "docs": "defaults to rgba(var(--color-invalid), 1);"
+          "docs": "defaults to rgb(var(--color-invalid) / 100%);"
         },
         {
           "name": "--color--focus-rgb",
@@ -12525,7 +12801,7 @@
         {
           "name": "--invalid-msg-color",
           "annotation": "prop",
-          "docs": "defaults to rgba(var(--color-invalid), 1);"
+          "docs": "defaults to rgb(var(--color-invalid) / 100%);"
         },
         {
           "name": "--invalid-msg-font-size",
@@ -13400,7 +13676,7 @@
         {
           "name": "--indicator-color",
           "annotation": "prop",
-          "docs": "default var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));"
+          "docs": "default var(--nano-indicator-color, rgb(var(--base-color-rgb) / 10%));"
         },
         {
           "name": "--overlay-color",
@@ -13415,7 +13691,7 @@
         {
           "name": "--track-color",
           "annotation": "prop",
-          "docs": "default var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));"
+          "docs": "default var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));"
         }
       ],
       "slots": [
@@ -14213,7 +14489,7 @@
         {
           "name": "--active-bg",
           "annotation": "prop",
-          "docs": "Defaults to rgba(var(--bg-rgb), 1);"
+          "docs": "Defaults to rgb(var(--bg-rgb) / 10%);"
         },
         {
           "name": "--active-text-color",
@@ -14248,7 +14524,7 @@
         {
           "name": "--inactive-bg",
           "annotation": "prop",
-          "docs": "Defaults to rgba(var(--bg-rgb), 0.7);"
+          "docs": "Defaults to rgb(var(--bg-rgb) / 70%);"
         },
         {
           "name": "--padding",

package/docs-vscode.json

@@ -2043,6 +2043,31 @@
         }
       ]
     },
+    {
+      "name": "nano-overflow-nav",
+      "description": {
+        "kind": "markdown",
+        "value": "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"
+      },
+      "attributes": [
+        {
+          "name": "orientation",
+          "description": "The flex direction of the element",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "scroll-controls",
+          "description": "Disables the scroll arrow buttons that appear when content overflows"
+        }
+      ]
+    },
     {
       "name": "nano-progress-bar",
       "description": {
@@ -2211,7 +2236,7 @@
         },
         {
           "name": "states",
-          "description": "string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\nFormat: `states=\"800w, 300h class1 class2\"`"
+          "description": "string list of sizes and optional class-names.\nAdds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\nFormat: `states=\"800w, 300h class1 class2\"`"
         }
       ]
     },