@nanoporetech-digital/components 3.0.0 → 3.1.1

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-11-16T20:56:12",
+  "timestamp": "2022-11-25T14:28:03",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.19.4",
@@ -6492,7 +6492,7 @@
           "mutable": true,
           "attr": "msg-count",
           "reflectToAttr": false,
-          "docs": "MyAccount undread message count.",
+          "docs": "MyAccount un-read message count.",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -6775,64 +6775,104 @@
       ],
       "styles": [
         {
-          "name": "--bar-background",
+          "name": "--bar-background. Defaults to white;",
           "annotation": "prop",
-          "docs": "Background of the bar element. Defaults to rgb(17, 85, 113)."
+          "docs": ""
         },
         {
-          "name": "--bar-color-focus",
+          "name": "--bar-color-focus. Defaults to #001a21;",
           "annotation": "prop",
-          "docs": "Focus color of the form element within search. Defaults to #90c6e7;"
+          "docs": ""
         },
         {
-          "name": "--bar-color-shade",
+          "name": "--bar-color-shade. Defaults to rgb(19, 89, 111);",
           "annotation": "prop",
-          "docs": "Color variant used within the bar element. Defaults to rgb(40, 110, 133)."
+          "docs": ""
         },
         {
-          "name": "--bar-color-tint",
+          "name": "--bar-color-tint. Defaults to rgb(19, 89, 111);",
           "annotation": "prop",
-          "docs": "Color variant used within the bar element. Defaults to rgb(88, 140, 161)."
+          "docs": ""
         },
         {
-          "name": "--bar-text-color",
+          "name": "--bar-dropdown-bg. Defaults to #196c82;",
           "annotation": "prop",
-          "docs": "Text color within the bar element. Defaults to white."
+          "docs": ""
         },
         {
-          "name": "--menu-background",
+          "name": "--bar-dropdown-text. Defaults to white;",
           "annotation": "prop",
-          "docs": "Background 'burger', menu element. Defaults to #001a21;"
+          "docs": ""
         },
         {
-          "name": "--menu-text-color",
+          "name": "--bar-item-spacing. Defaults to 16px;",
           "annotation": "prop",
-          "docs": "Text color 'burger', menu element. Defaults to white;"
+          "docs": ""
         },
         {
-          "name": "--padding",
+          "name": "--bar-text-color. Defaults to #196c82;",
           "annotation": "prop",
-          "docs": "padding used for many elements. Defaults to '12px 0'."
+          "docs": ""
         },
         {
-          "name": "--padding-bottom",
+          "name": "--bar-user-panel-bg. Defaults to #016d86;",
           "annotation": "prop",
-          "docs": "bottom padding used for many elements. Defaults to --padding."
+          "docs": ""
         },
         {
-          "name": "--padding-end",
+          "name": "--bar-vertical-padding. Defaults to 21px;",
           "annotation": "prop",
-          "docs": "end (left on l2r / right on r2l) padding used for many elements. Defaulst to --padding."
+          "docs": ""
         },
         {
-          "name": "--padding-start",
+          "name": "--login-button-bg. Defaults to #17bb75;",
           "annotation": "prop",
-          "docs": "start (right on l2r / left on r2l) padding used for many elements. Defaults to --padding."
+          "docs": ""
         },
         {
-          "name": "--padding-top",
+          "name": "--login-button-text. Defaults to white;",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--menu-background. Defaults to #001a21;",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--menu-hint-color. Defaults to #33484d;",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--menu-icon-color. Defaults to white;",
           "annotation": "prop",
-          "docs": "top padding used for many elements. Defaults to --padding."
+          "docs": ""
+        },
+        {
+          "name": "--menu-padding. Defaults to 12px;",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--menu-text-color. Defaults to white;",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--menu-title-text. Defaults to #90c6e7;",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--menu-user-panel-bg. Defaults to #193037;",
+          "annotation": "prop",
+          "docs": ""
+        },
+        {
+          "name": "--menu-user-profile-bg. Defaults to #001a21;",
+          "annotation": "prop",
+          "docs": ""
         }
       ],
       "slots": [
@@ -6878,8 +6918,8 @@
       "dependencies": [
         "nano-select",
         "nano-option",
-        "nano-icon",
         "nano-input",
+        "nano-icon",
         "nano-nav-item",
         "nano-global-nav-user-profile",
         "nano-sticker"
@@ -6888,8 +6928,8 @@
         "nano-global-nav": [
           "nano-select",
           "nano-option",
-          "nano-icon",
           "nano-input",
+          "nano-icon",
           "nano-nav-item",
           "nano-global-nav-user-profile",
           "nano-sticker"
@@ -10544,6 +10584,145 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/progress-bar/progress-bar.tsx",
+      "encapsulation": "shadow",
+      "tag": "nano-progress-bar",
+      "readme": "# nano-progress-bar\n\n\n",
+      "docs": "Used to show the status of an ongoing operation.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- A label to show inside the indicator."
+        },
+        {
+          "name": "part",
+          "text": "base - The component's base wrapper."
+        },
+        {
+          "name": "part",
+          "text": "indicator - The progress bar indicator."
+        },
+        {
+          "name": "part",
+          "text": "label - The progress bar label."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "indeterminate",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "indeterminate",
+          "reflectToAttr": false,
+          "docs": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "showPercent",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "show-percent",
+          "reflectToAttr": false,
+          "docs": "Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "value",
+          "type": "number",
+          "mutable": false,
+          "attr": "value",
+          "reflectToAttr": false,
+          "docs": "The progress bar's percentage, 0 to 100.",
+          "docsTags": [],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [
+        {
+          "name": "--height",
+          "annotation": "prop",
+          "docs": "The progress bar's height. Default 1em"
+        },
+        {
+          "name": "--indicator-color",
+          "annotation": "prop",
+          "docs": "The indicator color. Default rgba(var(--nano-indicator-rgb, 84, 140, 175), 1);"
+        },
+        {
+          "name": "--label-color",
+          "annotation": "prop",
+          "docs": "The label color. Default var(--nano-color-white, white);"
+        },
+        {
+          "name": "--track-color",
+          "annotation": "prop",
+          "docs": "The track color. Default rgba(var(--nano-track-rgb, 228, 230, 232), 1);"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "docs": "A label to show inside the indicator."
+        }
+      ],
+      "parts": [
+        {
+          "name": "base",
+          "docs": "The component's base wrapper."
+        },
+        {
+          "name": "indicator",
+          "docs": "The progress bar indicator."
+        },
+        {
+          "name": "label",
+          "docs": "The progress bar label."
+        }
+      ],
+      "dependents": [
+        "nano-table"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "nano-table": [
+          "nano-progress-bar"
+        ]
+      }
+    },
     {
       "filePath": "./src/components/range/range.tsx",
       "encapsulation": "scoped",
@@ -12257,7 +12436,7 @@
         {
           "name": "--base-color-rgb",
           "annotation": "prop",
-          "docs": "default var(--nano-skeleton-base-rgb, 228, 230, 232);"
+          "docs": "default var(--nano-skeleton-rgb, 228, 230, 232);"
         },
         {
           "name": "--color",
@@ -12273,12 +12452,16 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "nano-img"
+        "nano-img",
+        "nano-table"
       ],
       "dependencies": [],
       "dependencyGraph": {
         "nano-img": [
           "nano-skeleton"
+        ],
+        "nano-table": [
+          "nano-skeleton"
         ]
       }
     },
@@ -12938,12 +13121,12 @@
         {
           "name": "--base-color-rgb",
           "annotation": "prop",
-          "docs": "default var(--nano-spinner-base-rgb, 0, 116, 149)"
+          "docs": "default var(--nano-indicator-rgb, 84, 140, 175)"
         },
         {
           "name": "--indicator-color",
           "annotation": "prop",
-          "docs": "default var(--nano-spinner-indicator-color, rgba(var(--base-color-rgb), 1))"
+          "docs": "default var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));"
         },
         {
           "name": "--overlay-color",
@@ -12958,7 +13141,7 @@
         {
           "name": "--track-color",
           "annotation": "prop",
-          "docs": "default var(--nano-track-color, rgba(var(--base-color-rgb), .2))"
+          "docs": "default var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));"
         }
       ],
       "slots": [
@@ -12969,12 +13152,16 @@
       ],
       "parts": [],
       "dependents": [
-        "nano-algolia"
+        "nano-algolia",
+        "nano-table"
       ],
       "dependencies": [],
       "dependencyGraph": {
         "nano-algolia": [
           "nano-spinner"
+        ],
+        "nano-table": [
+          "nano-spinner"
         ]
       }
     },
@@ -14337,15 +14524,11 @@
       "encapsulation": "none",
       "tag": "nano-table",
       "readme": "# nano-table\n\n\n",
-      "docs": "Table",
+      "docs": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Add custom rendering at every level\n- Add custom properties at every level",
       "docsTags": [
         {
           "name": "slot",
-          "text": "- The tooltip's target element. Only the first element will be used as the target."
-        },
-        {
-          "name": "slot",
-          "text": "content - The tooltip's content. Alternatively, you can use the content prop."
+          "text": "caption - The table's caption. You must either use this or the `caption` attribute."
         }
       ],
       "usage": {},
@@ -14474,6 +14657,25 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "loading",
+          "reflectToAttr": false,
+          "docs": "Will show a loading state when true.\nWill be shown automatically if `rows` is a promise waiting to resolve\nor when performing custom filtering or sorting",
+          "docsTags": [],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": true
+        },
         {
           "name": "perBlock",
           "type": "number",
@@ -14493,6 +14695,25 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "placeholderSize",
+          "type": "number",
+          "mutable": false,
+          "attr": "placeholder-size",
+          "reflectToAttr": false,
+          "docs": "When loading rows asynchronously, this will render this number of placeholder rows",
+          "docsTags": [],
+          "default": "5",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "rowRender",
           "type": "RowRenderer",
@@ -14512,13 +14733,15 @@
         },
         {
           "name": "rows",
-          "type": "RowData[]",
+          "type": "Promise<RowData[]> | RowData[]",
           "mutable": false,
           "reflectToAttr": false,
           "docs": "The data to place in the table",
           "docsTags": [],
-          "default": "[]",
           "values": [
+            {
+              "type": "Promise<RowData[]>"
+            },
             {
               "type": "RowData[]"
             }
@@ -14699,7 +14922,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Fired after a general search",
+          "docs": "Fired after a general / cross column search",
           "docsTags": []
         },
         {
@@ -14768,21 +14991,23 @@
       "styles": [],
       "slots": [
         {
-          "name": "",
-          "docs": "The tooltip's target element. Only the first element will be used as the target."
-        },
-        {
-          "name": "content",
-          "docs": "The tooltip's content. Alternatively, you can use the content prop."
+          "name": "caption",
+          "docs": "The table's caption. You must either use this or the `caption` attribute."
         }
       ],
       "parts": [],
       "dependents": [],
       "dependencies": [
+        "nano-progress-bar",
+        "nano-skeleton",
+        "nano-spinner",
         "nano-icon"
       ],
       "dependencyGraph": {
         "nano-table": [
+          "nano-progress-bar",
+          "nano-skeleton",
+          "nano-spinner",
           "nano-icon"
         ]
       }

package/docs-vscode.json

@@ -1246,7 +1246,7 @@
         },
         {
           "name": "msg-count",
-          "description": "MyAccount undread message count."
+          "description": "MyAccount un-read message count."
         },
         {
           "name": "msg-url",
@@ -2031,6 +2031,27 @@
         }
       ]
     },
+    {
+      "name": "nano-progress-bar",
+      "description": {
+        "kind": "markdown",
+        "value": "Used to show the status of an ongoing operation."
+      },
+      "attributes": [
+        {
+          "name": "indeterminate",
+          "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state."
+        },
+        {
+          "name": "show-percent",
+          "description": "Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot."
+        },
+        {
+          "name": "value",
+          "description": "The progress bar's percentage, 0 to 100."
+        }
+      ]
+    },
     {
       "name": "nano-range",
       "description": {
@@ -2657,7 +2678,7 @@
       "name": "nano-table",
       "description": {
         "kind": "markdown",
-        "value": "Table"
+        "value": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Add custom rendering at every level\n- Add custom properties at every level"
       },
       "attributes": [
         {
@@ -2668,10 +2689,18 @@
           "name": "caption",
           "description": "A descriptive title of the table.\nYou must use this or the `slot=\"caption\"` for accessibility"
         },
+        {
+          "name": "loading",
+          "description": "Will show a loading state when true.\nWill be shown automatically if `rows` is a promise waiting to resolve\nor when performing custom filtering or sorting"
+        },
         {
           "name": "per-block",
           "description": "To improve performance, data is split into blocks\nwhich are shown / hidden and rendered as they become visible.\nUse this to control the number of hits within a block -\nA block should fill a scrolling viewport.\nThe less perBlock the better for performance"
         },
+        {
+          "name": "placeholder-size",
+          "description": "When loading rows asynchronously, this will render this number of placeholder rows"
+        },
         {
           "name": "search-term",
           "description": "Term to search for in the data"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -63,7 +63,7 @@
     "focus-options-polyfill": "^1.4.0",
     "qs": "^6.9.4",
     "scroll-behavior-polyfill": "^2.0.13",
-    "squirrelly": "8",
+    "squirrelly": "^8",
     "stencil-wormhole": "3.2.1"
   },
   "devDependencies": {
@@ -124,5 +124,5 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "5cc0fd2e5378cc81a4f315ceefc9eea86cfb6bfe"
+  "gitHead": "df99559e29d5a62c582f31721747239f5f5cdab0"
 }