@nanoporetech-digital/components 3.14.0 → 4.1.0

package/docs-json.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2023-02-23T16:14:30",
+  "timestamp": "2023-03-06T12:14:11",
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.6",
+    "version": "2.23.0",
     "typescriptVersion": "4.9.4"
   },
   "components": [
@@ -6856,6 +6856,12 @@
           "event": "nanoClose",
           "capture": false,
           "passive": false
+        },
+        {
+          "event": "click",
+          "target": "body",
+          "capture": false,
+          "passive": false
         }
       ],
       "styles": [
@@ -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"
         ]
@@ -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",
@@ -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": []
         },
         {
@@ -12715,12 +12991,12 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "default var(--nano-skeleton-color, rgb(var(--base-color-rgb), 1));"
+          "docs": "default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));"
         },
         {
           "name": "--tint",
           "annotation": "prop",
-          "docs": "default var(--nano-skeleton-tint, rgb(var(--base-color-rgb), .3));"
+          "docs": "default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));"
         }
       ],
       "slots": [],

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\"`"
         }
       ]
     },