@nanoporetech-digital/components 3.0.0 → 3.1.0

package/dist/types/components.d.ts

@@ -933,7 +933,7 @@ export namespace Components {
          */
         "logoUrl": string;
         /**
-          * MyAccount undread message count.
+          * MyAccount un-read message count.
          */
         "msgCount": number;
         /**
@@ -1472,6 +1472,20 @@ export namespace Components {
          */
         "value": string;
     }
+    interface NanoProgressBar {
+        /**
+          * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
+         */
+        "indeterminate": boolean;
+        /**
+          * Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.
+         */
+        "showPercent": boolean;
+        /**
+          * The progress bar's percentage, 0 to 100.
+         */
+        "value": number;
+    }
     interface NanoRange {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`
@@ -2025,10 +2039,18 @@ export namespace Components {
           * Used for custom thead row rendering
          */
         "headRender": TableTypes.HeadFootRenderer;
+        /**
+          * Will show a loading state when true. Will be shown automatically if `rows` is a promise waiting to resolve or when performing custom filtering or sorting
+         */
+        "loading": boolean;
         /**
           * To improve performance, data is split into blocks which are shown / hidden and rendered as they become visible. Use this to control the number of hits within a block - A block should fill a scrolling viewport. The less perBlock the better for performance
          */
         "perBlock": number;
+        /**
+          * When loading rows asynchronously, this will render this number of placeholder rows
+         */
+        "placeholderSize": number;
         /**
           * Remove any column filters currently applied
           * @returns a promise which resolves when complete
@@ -2046,7 +2068,8 @@ export namespace Components {
         /**
           * The data to place in the table
          */
-        "rows": TableTypes.NanoTable['rows'];
+        "rows": | TableTypes.NanoTable['rows']
+    | Promise<TableTypes.NanoTable['rows']>;
         /**
           * Term to search for in the data
          */
@@ -2461,6 +2484,12 @@ declare global {
         prototype: HTMLNanoOptionElement;
         new (): HTMLNanoOptionElement;
     };
+    interface HTMLNanoProgressBarElement extends Components.NanoProgressBar, HTMLStencilElement {
+    }
+    var HTMLNanoProgressBarElement: {
+        prototype: HTMLNanoProgressBarElement;
+        new (): HTMLNanoProgressBarElement;
+    };
     interface HTMLNanoRangeElement extends Components.NanoRange, HTMLStencilElement {
     }
     var HTMLNanoRangeElement: {
@@ -2585,6 +2614,7 @@ declare global {
         "nano-menu-drawer": HTMLNanoMenuDrawerElement;
         "nano-nav-item": HTMLNanoNavItemElement;
         "nano-option": HTMLNanoOptionElement;
+        "nano-progress-bar": HTMLNanoProgressBarElement;
         "nano-range": HTMLNanoRangeElement;
         "nano-rating": HTMLNanoRatingElement;
         "nano-resize-observe": HTMLNanoResizeObserveElement;
@@ -3569,7 +3599,7 @@ declare namespace LocalJSX {
          */
         "logoUrl"?: string;
         /**
-          * MyAccount undread message count.
+          * MyAccount un-read message count.
          */
         "msgCount"?: number;
         /**
@@ -4147,6 +4177,20 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface NanoProgressBar {
+        /**
+          * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
+         */
+        "indeterminate"?: boolean;
+        /**
+          * Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.
+         */
+        "showPercent"?: boolean;
+        /**
+          * The progress bar's percentage, 0 to 100.
+         */
+        "value"?: number;
+    }
     interface NanoRange {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`
@@ -4704,12 +4748,16 @@ declare namespace LocalJSX {
           * Used for custom thead row rendering
          */
         "headRender"?: TableTypes.HeadFootRenderer;
+        /**
+          * Will show a loading state when true. Will be shown automatically if `rows` is a promise waiting to resolve or when performing custom filtering or sorting
+         */
+        "loading"?: boolean;
         /**
           * Fired after a column is sorted
          */
         "onNanoTblAfterFilter"?: (event: NanoTableCustomEvent<{ filters: TableTypes.Filter[] }>) => void;
         /**
-          * Fired after a general search
+          * Fired after a general / cross column search
          */
         "onNanoTblAfterSearch"?: (event: NanoTableCustomEvent<{ term: string }>) => void;
         /**
@@ -4749,6 +4797,10 @@ declare namespace LocalJSX {
           * To improve performance, data is split into blocks which are shown / hidden and rendered as they become visible. Use this to control the number of hits within a block - A block should fill a scrolling viewport. The less perBlock the better for performance
          */
         "perBlock"?: number;
+        /**
+          * When loading rows asynchronously, this will render this number of placeholder rows
+         */
+        "placeholderSize"?: number;
         /**
           * Used for custom row rendering
          */
@@ -4756,7 +4808,8 @@ declare namespace LocalJSX {
         /**
           * The data to place in the table
          */
-        "rows"?: TableTypes.NanoTable['rows'];
+        "rows"?: | TableTypes.NanoTable['rows']
+    | Promise<TableTypes.NanoTable['rows']>;
         /**
           * Term to search for in the data
          */
@@ -4865,6 +4918,7 @@ declare namespace LocalJSX {
         "nano-menu-drawer": NanoMenuDrawer;
         "nano-nav-item": NanoNavItem;
         "nano-option": NanoOption;
+        "nano-progress-bar": NanoProgressBar;
         "nano-range": NanoRange;
         "nano-rating": NanoRating;
         "nano-resize-observe": NanoResizeObserve;
@@ -4919,6 +4973,7 @@ declare module "@stencil/core" {
             "nano-menu-drawer": LocalJSX.NanoMenuDrawer & JSXBase.HTMLAttributes<HTMLNanoMenuDrawerElement>;
             "nano-nav-item": LocalJSX.NanoNavItem & JSXBase.HTMLAttributes<HTMLNanoNavItemElement>;
             "nano-option": LocalJSX.NanoOption & JSXBase.HTMLAttributes<HTMLNanoOptionElement>;
+            "nano-progress-bar": LocalJSX.NanoProgressBar & JSXBase.HTMLAttributes<HTMLNanoProgressBarElement>;
             "nano-range": LocalJSX.NanoRange & JSXBase.HTMLAttributes<HTMLNanoRangeElement>;
             "nano-rating": LocalJSX.NanoRating & JSXBase.HTMLAttributes<HTMLNanoRatingElement>;
             "nano-resize-observe": LocalJSX.NanoResizeObserve & JSXBase.HTMLAttributes<HTMLNanoResizeObserveElement>;

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-11-16T20:56:12",
+  "timestamp": "2022-11-25T12:04:14",
   "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,144 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/progress-bar/progress-bar.tsx",
+      "encapsulation": "shadow",
+      "tag": "nano-progress-bar",
+      "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 +12435,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 +12451,16 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "nano-img"
+        "nano-img",
+        "nano-table"
       ],
       "dependencies": [],
       "dependencyGraph": {
         "nano-img": [
           "nano-skeleton"
+        ],
+        "nano-table": [
+          "nano-skeleton"
         ]
       }
     },
@@ -12938,12 +13120,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 +13140,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 +13151,16 @@
       ],
       "parts": [],
       "dependents": [
-        "nano-algolia"
+        "nano-algolia",
+        "nano-table"
       ],
       "dependencies": [],
       "dependencyGraph": {
         "nano-algolia": [
           "nano-spinner"
+        ],
+        "nano-table": [
+          "nano-spinner"
         ]
       }
     },
@@ -14337,15 +14523,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 +14656,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 +14694,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 +14732,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 +14921,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Fired after a general search",
+          "docs": "Fired after a general / cross column search",
           "docsTags": []
         },
         {
@@ -14768,21 +14990,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"
         ]
       }