@nanoporetech-digital/components 3.7.1 → 3.8.1

package/dist/types/index.d.ts

@@ -2,3 +2,8 @@ export * from './components/alert/alert.helpers';
 export * from './components/dialog/dialog.helpers';
 export { debounce as nanoDebounce, throttle as nanoThrottle, } from './utils/throttle';
 export { getTabbableElements as nanoGetTabElements } from './utils/tabbable';
+export declare const initialize: (helpers?: {
+  _ael?: any;
+  _ce?: any;
+  _rel?: any;
+}) => void;

package/dist/types/stencil-public-runtime.d.ts

@@ -133,7 +133,7 @@ export interface ListenOptions {
      */
     passive?: boolean;
 }
-export declare type ListenTargetOptions = 'body' | 'document' | 'window';
+export type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
     (): PropertyDecorator;
 }
@@ -214,8 +214,8 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
-export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
-export declare type ErrorHandler = (err: any, element?: Element) => void;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export type ErrorHandler = (err: any, element?: Element) => void;
 /**
  * `setMode()` is used for libraries which provide multiple "modes" for styles.
  */
@@ -257,6 +257,15 @@ export declare function getAssetPath(path: string): string;
  * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
+/**
+ * Used to specify a nonce value that corresponds with an application's
+ * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a `meta` tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
+ * @param nonce The value to be used for the nonce attribute.
+ */
+export declare function setNonce(nonce: string): void;
 /**
  * Retrieve a Stencil element for a given reference
  * @param ref the ref to get the Stencil element for
@@ -446,8 +455,44 @@ interface HostAttributes {
     ref?: (el: HTMLElement | null) => void;
     [prop: string]: any;
 }
+/**
+ * Utilities for working with functional Stencil components. An object
+ * conforming to this interface is passed by the Stencil runtime as the third
+ * argument to a functional component, allowing component authors to work with
+ * features like children.
+ *
+ * The children of a functional component will be passed as the second
+ * argument, so a functional component which uses these utils to transform its
+ * children might look like the following:
+ *
+ * ```ts
+ * export const AddClass: FunctionalComponent = (_, children, utils) => (
+ *  utils.map(children, child => ({
+ *    ...child,
+ *    vattrs: {
+ *      ...child.vattrs,
+ *      class: `${child.vattrs.class} add-class`
+ *    }
+ *  }))
+ * );
+ * ```
+ *
+ * For more see the Stencil documentation, here:
+ * https://stenciljs.com/docs/functional-components
+ */
 export interface FunctionalUtilities {
+    /**
+     * Utility for reading the children of a functional component at runtime.
+     * Since the Stencil runtime uses a different interface for children it is
+     * not recommendeded to read the children directly, and is preferable to use
+     * this utility to, for instance, perform a side effect for each child.
+     */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+    /**
+     * Utility for transforming the children of a functional component. Given an
+     * array of children and a callback this will return a list of the results of
+     * passing each child to the supplied callback.
+     */
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {

package/dist/types/utils/dom.d.ts

@@ -1,9 +1,18 @@
+export declare enum NODE_TYPE {
+  ElementNode = 1,
+  TextNode = 3,
+  CommentNode = 8,
+  DocumentNode = 9,
+  DocumentTypeNode = 10,
+  DocumentFragment = 11
+}
 export declare function closestElement(selector: string, base?: Element): Element;
 /**
  * Get direct child elements / nodes from from any element (for when querySelectorAll(':scope > .selector') fails)
  * @param el - a root element to query from
  * @param sel - a query selector string
  * @param elesOnly - return only Elements (no Nodes)
+ * @returns an array of direct child DOM nodes
  */
 export declare function getDirectChildren<T = HTMLElement>(el: Element, sel: string, elesOnly?: true): Array<T>;
 export declare function getDirectChildren<T = HTMLElement>(el: Element, sel: string, elesOnly?: 'slot'): Array<T>;

package/dist/types/utils/gesture/index.d.ts

@@ -15,7 +15,7 @@ export interface GestureDetail {
   event: UIEvent;
   data?: any;
 }
-export declare type GestureCallback = (detail: GestureDetail) => boolean | void;
+export type GestureCallback = (detail: GestureDetail) => boolean | void;
 export interface Gesture {
   enable(enable?: boolean): void;
   destroy(): void;

package/dist/types/utils/popover.d.ts

@@ -1,5 +1,5 @@
 import { Instance as PopperInstance } from '@popperjs/core';
-export declare type PopoverPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end' | 'center';
+export type PopoverPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end' | 'center';
 interface PopoverOptions {
   distance?: number;
   placement?: PopoverPlacement;

package/dist/types/utils/store/component-store.d.ts

@@ -1,5 +1,5 @@
-export declare type StorageParams = Record<string, any>;
-export declare type StorageMethods = 'url-hash' | 'url-query' | 'url-hash-push' | 'url-query-push' | 'local' | 'session';
+export type StorageParams = Record<string, any>;
+export type StorageMethods = 'url-hash' | 'url-query' | 'url-hash-push' | 'url-query-push' | 'local' | 'session';
 interface Component {
   connectedCallback?(): void;
   disconnectedCallback?(): void;

package/dist/types/utils/testing/index.d.ts

@@ -10,7 +10,7 @@ declare global {
 export interface NanoE2EPage extends E2EPage, Pick<PuppeteerPage, 'screenshot' | 'viewport'> {
   reportA11y: (contextQuery?: string) => Promise<string>;
 }
-declare type NanoE2EPageOptions = {
+type NanoE2EPageOptions = {
   html: string;
   viewportWidth: number;
   viewportHeight?: number;

package/docs-json.json

@@ -1,9 +1,9 @@
 {
-  "timestamp": "2023-01-25T10:40:43",
+  "timestamp": "2023-02-15T02:09:37",
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.19.4",
-    "typescriptVersion": "4.7.4"
+    "version": "2.22.5",
+    "typescriptVersion": "4.9.4"
   },
   "components": [
     {
@@ -362,7 +362,7 @@
         {
           "name": "--scrim-color",
           "annotation": "prop",
-          "docs": "overlay colour of alert display. Defaults to var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));"
+          "docs": "overlay colour of alert display. Defaults to var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));"
         },
         {
           "name": "--tint-color",
@@ -582,7 +582,7 @@
           "mutable": true,
           "attr": "query",
           "reflectToAttr": false,
-          "docs": "The query string used to search the index. Will automtically be set with any slotted\n`search-input` input elements or from elements linked to from `listen-to`",
+          "docs": "The query string used to search the index. Will automatically be set with any slotted\n`search-input` input elements or from elements linked to from `listen-to`",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -2118,7 +2118,7 @@
         {
           "name": "--tagbox-rgb",
           "annotation": "prop",
-          "docs": "an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to 144, 198, 231;"
+          "docs": "an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to 144 198 231;"
         }
       ],
       "slots": [
@@ -2310,6 +2310,27 @@
           "required": false,
           "getter": true,
           "setter": false
+        },
+        {
+          "name": "value",
+          "type": "string | string[]",
+          "mutable": true,
+          "attr": "value",
+          "reflectToAttr": false,
+          "docs": "The current, collective checkbox value",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "string[]"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [
@@ -2355,6 +2376,15 @@
         }
       ],
       "events": [
+        {
+          "event": "nanoChange",
+          "detail": "string | string[]",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Called when a nested checkbox changes",
+          "docsTags": []
+        },
         {
           "event": "nanoValidate",
           "detail": "ControlValidityEventDetail",
@@ -2371,6 +2401,11 @@
         }
       ],
       "listeners": [
+        {
+          "event": "nanoChange",
+          "capture": false,
+          "passive": false
+        },
         {
           "event": "nanoChange",
           "capture": false,
@@ -2416,12 +2451,12 @@
         {
           "name": "--label-color",
           "annotation": "prop",
-          "docs": "Default var(--nano-input-label-color, \"currentColor\");"
+          "docs": "Default var(--nano-input-label-color, \"currentcolor\");"
         },
         {
           "name": "--label-color--invalid",
           "annotation": "prop",
-          "docs": "Default var(--nano-input-label-color-invalid, \"currentColor\");"
+          "docs": "Default var(--nano-input-label-color-invalid, \"currentcolor\");"
         },
         {
           "name": "--label-font-size",
@@ -3589,10 +3624,6 @@
           "name": "date-picker",
           "docs": ""
         },
-        {
-          "name": "dropdown",
-          "docs": ""
-        },
         {
           "name": "input",
           "docs": ""
@@ -4596,7 +4627,7 @@
         {
           "name": "--scrim-color",
           "annotation": "prop",
-          "docs": "overlay colour of alert display. Defaults to var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));"
+          "docs": "overlay colour of alert display. Defaults to var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));"
         },
         {
           "name": "--tint-color",
@@ -6064,7 +6095,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "A file input's value attribute contains a DOMString that represents the path to the selected file(s).\nIf the user selected multiple files, the value represents the first file in the list of files they selected.\nYou can reset the file-upload control by setting the value to an emptry string e.g. `var input.value = ''`",
+          "docs": "A file input's value attribute contains a DOMString that represents the path to the selected file(s).\nIf the user selected multiple files, the value represents the first file in the list of files they selected.\nYou can reset the file-upload control by setting the value to an empty string e.g. `var input.value = ''`",
           "docsTags": [],
           "values": [
             {
@@ -6254,7 +6285,7 @@
         {
           "name": "--drop-border--invalid",
           "annotation": "prop",
-          "docs": "Default value var(--nano-color-danger-rgb, 239, 65, 53);"
+          "docs": "Default value var(--nano-color-danger-rgb, 239 65 53);"
         },
         {
           "name": "--drop-border-radius",
@@ -6264,7 +6295,7 @@
         {
           "name": "--drop-border-tint",
           "annotation": "prop",
-          "docs": "Default value var(--nano-color-primary-rgb, 0, 116, 149);"
+          "docs": "Default value var(--nano-color-primary-rgb, 0 116 149);"
         },
         {
           "name": "--drop-border-width",
@@ -6299,12 +6330,12 @@
         {
           "name": "--label-color",
           "annotation": "prop",
-          "docs": "Default value var(--nano-input-label-color, \"currentColor\");"
+          "docs": "Default value var(--nano-input-label-color, \"currentcolor\");"
         },
         {
           "name": "--label-color--invalid",
           "annotation": "prop",
-          "docs": "Default value var(--nano-input-label-color-invalid, \"currentColor\");"
+          "docs": "Default value var(--nano-input-label-color-invalid, \"currentcolor\");"
         },
         {
           "name": "--label-font-size",
@@ -6561,6 +6592,23 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "myAccountData",
+          "type": "MyAccountData",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "An alternative to both 'env' and 'ssoDataUrl'.\nYou can directly provide a JSON object of myaccount data.\n(e.g. https://myaccount.nanoporetech.com/nav_bar_data.json)\nThis is useful for SSR",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "MyAccountData"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "myAccountUser",
           "type": "MyAccountUser",
@@ -6639,7 +6687,7 @@
           "mutable": true,
           "attr": "search-index",
           "reflectToAttr": false,
-          "docs": "Algolia search index to programatically set or to set an initial index",
+          "docs": "Algolia search index to programmatically set or to set an initial index",
           "docsTags": [],
           "default": "'all_prod_en'",
           "values": [
@@ -6658,7 +6706,7 @@
           "mutable": true,
           "attr": "search-value",
           "reflectToAttr": false,
-          "docs": "A search value to passed to Algolia to programatically get or to preload search results",
+          "docs": "A search value to passed to Algolia to programmatically get or to preload search results",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -7012,7 +7060,6 @@
           "reflectToAttr": false,
           "docs": "Logged in user details automatically populated from MyAccount",
           "docsTags": [],
-          "default": "null",
           "values": [
             {
               "type": "MyAccountUser"
@@ -7031,7 +7078,6 @@
           "reflectToAttr": false,
           "docs": "Link to the user profile",
           "docsTags": [],
-          "default": "''",
           "values": [
             {
               "type": "string"
@@ -9495,12 +9541,12 @@
         {
           "name": "--color--focus-rgb",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-color-base-rgb, var(--nano-color-primary-rgb, 0, 116, 149));"
+          "docs": "defaults to var(--nano-color-base-rgb, var(--nano-color-primary-rgb, 0 116 149));"
         },
         {
           "name": "--color-invalid",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-color-danger-rgb, 239, 65, 53);"
+          "docs": "defaults to var(--nano-color-danger-rgb, 239 65 53);"
         },
         {
           "name": "--input-bg-color",
@@ -9570,7 +9616,7 @@
         {
           "name": "--label-color",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-label-color, \"currentColor\");"
+          "docs": "defaults to var(--nano-input-label-color, \"currentcolor\");"
         },
         {
           "name": "--label-color--focus",
@@ -9580,7 +9626,7 @@
         {
           "name": "--label-color-invalid",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-label-color-invalid, \"currentColor\");"
+          "docs": "defaults to var(--nano-input-label-color-invalid, \"currentcolor\");"
         },
         {
           "name": "--label-font-size",
@@ -9590,7 +9636,7 @@
         {
           "name": "--multi-input-value-bg",
           "annotation": "prop",
-          "docs": "Tag / multivalue bg. defaults to var(--nano-input-tag-bg, 186, 220, 240);"
+          "docs": "Tag / multivalue bg. defaults to var(--nano-input-tag-bg, 186 220 240);"
         },
         {
           "name": "--multi-input-value-border",
@@ -10014,7 +10060,7 @@
         {
           "name": "open",
           "type": "boolean",
-          "mutable": false,
+          "mutable": true,
           "attr": "open",
           "reflectToAttr": false,
           "docs": "Set the initial menu drawer open or closed",
@@ -10827,7 +10873,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 rgba(var(--nano-indicator-rgb, 84 140 175), 1);"
         },
         {
           "name": "--label-color",
@@ -10837,7 +10883,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 rgba(var(--nano-track-rgb, 228 230 232), 1);"
         }
       ],
       "slots": [
@@ -11252,7 +11298,7 @@
         {
           "name": "--rgb-inactive",
           "annotation": "prop",
-          "docs": "defaults to 165, 165, 165;"
+          "docs": "defaults to 165 165 165;"
         }
       ],
       "slots": [
@@ -12414,12 +12460,12 @@
         {
           "name": "--color--focus-rgb",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-color-base-rgb, var(--nano-color-primary-rgb, 0, 116, 149));"
+          "docs": "defaults to var(--nano-color-base-rgb, var(--nano-color-primary-rgb, 0 116 149));"
         },
         {
           "name": "--color-invalid",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-color-danger-rgb, 239, 65, 53);"
+          "docs": "defaults to var(--nano-color-danger-rgb, 239 65 53);"
         },
         {
           "name": "--input-bg-color",
@@ -12489,7 +12535,7 @@
         {
           "name": "--label-color",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-label-color, \"currentColor\");"
+          "docs": "defaults to var(--nano-input-label-color, \"currentcolor\");"
         },
         {
           "name": "--label-color--focus",
@@ -12499,7 +12545,7 @@
         {
           "name": "--label-color-invalid",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-label-color-invalid, \"currentColor\");"
+          "docs": "defaults to var(--nano-input-label-color-invalid, \"currentcolor\");"
         },
         {
           "name": "--label-font-size",
@@ -12509,7 +12555,7 @@
         {
           "name": "--multi-input-value-bg",
           "annotation": "prop",
-          "docs": "Tag / multivalue bg. defaults to var(--nano-input-tag-bg, 186, 220, 240);"
+          "docs": "Tag / multivalue bg. defaults to var(--nano-input-tag-bg, 186 220 240);"
         },
         {
           "name": "--multi-input-value-border",
@@ -12664,7 +12710,7 @@
         {
           "name": "--base-color-rgb",
           "annotation": "prop",
-          "docs": "default var(--nano-skeleton-rgb, 228, 230, 232);"
+          "docs": "default var(--nano-skeleton-rgb, 228 230 232);"
         },
         {
           "name": "--color",
@@ -13349,7 +13395,7 @@
         {
           "name": "--base-color-rgb",
           "annotation": "prop",
-          "docs": "default var(--nano-indicator-rgb, 84, 140, 175)"
+          "docs": "default var(--nano-indicator-rgb, 84 140 175)"
         },
         {
           "name": "--indicator-color",
@@ -13359,7 +13405,7 @@
         {
           "name": "--overlay-color",
           "annotation": "prop",
-          "docs": "var(--nano-layer-overlay-light, rgba(255, 255, 255, .7));"
+          "docs": "var(--nano-layer-overlay-light, rgb(255 255 255 / 70%));"
         },
         {
           "name": "--spinner-scale",
@@ -14177,7 +14223,7 @@
         {
           "name": "--bg-rgb",
           "annotation": "prop",
-          "docs": "Defaults to var(--nano-layer-bg-rgb, 255, 255, 255);"
+          "docs": "Defaults to var(--nano-layer-bg-rgb, 255 255 255);"
         },
         {
           "name": "--disabled-bg-rgb",
@@ -14608,7 +14654,7 @@
         {
           "name": "--background-rgb",
           "annotation": "prop",
-          "docs": "will be used as the default background colour for tabs and content. defaults to var(--nano-layer-bg-rgb, 255, 255, 255);"
+          "docs": "will be used as the default background colour for tabs and content. defaults to var(--nano-layer-bg-rgb, 255 255 255);"
         },
         {
           "name": "--border-radius",
@@ -14960,7 +15006,7 @@
           "reflectToAttr": false,
           "docs": "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",
           "docsTags": [],
-          "default": "60",
+          "default": "40",
           "values": [
             {
               "type": "number"
@@ -15342,14 +15388,7 @@
           "docsTags": []
         }
       ],
-      "listeners": [
-        {
-          "event": "scroll",
-          "target": "window",
-          "capture": false,
-          "passive": true
-        }
-      ],
+      "listeners": [],
       "styles": [
         {
           "name": "--bookend-col-padding",

package/docs-vscode.json

@@ -138,7 +138,7 @@
         },
         {
           "name": "query",
-          "description": "The query string used to search the index. Will automtically be set with any slotted\n`search-input` input elements or from elements linked to from `listen-to`"
+          "description": "The query string used to search the index. Will automatically be set with any slotted\n`search-input` input elements or from elements linked to from `listen-to`"
         },
         {
           "name": "replica-index",
@@ -511,6 +511,10 @@
         {
           "name": "validity-message",
           "description": "Current validation message - if any. @readonly"
+        },
+        {
+          "name": "value",
+          "description": "The current, collective checkbox value"
         }
       ]
     },
@@ -1207,7 +1211,7 @@
         },
         {
           "name": "value",
-          "description": "A file input's value attribute contains a DOMString that represents the path to the selected file(s).\nIf the user selected multiple files, the value represents the first file in the list of files they selected.\nYou can reset the file-upload control by setting the value to an emptry string e.g. `var input.value = ''`"
+          "description": "A file input's value attribute contains a DOMString that represents the path to the selected file(s).\nIf the user selected multiple files, the value represents the first file in the list of files they selected.\nYou can reset the file-upload control by setting the value to an empty string e.g. `var input.value = ''`"
         }
       ]
     },
@@ -1270,11 +1274,11 @@
         },
         {
           "name": "search-index",
-          "description": "Algolia search index to programatically set or to set an initial index"
+          "description": "Algolia search index to programmatically set or to set an initial index"
         },
         {
           "name": "search-value",
-          "description": "A search value to passed to Algolia to programatically get or to preload search results"
+          "description": "A search value to passed to Algolia to programmatically get or to preload search results"
         },
         {
           "name": "show-logo",