@nanoporetech-digital/components 5.6.0 → 5.8.0

package/dist/nano-components/{p-db9325e8.entry.js → p-c2ccac87.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-export{T as nano_table}from"./p-47e84d30.js";import"./p-d6a04b3a.js";import"./p-ee045579.js";import"./p-7bff5224.js";import"./p-70747f20.js";
-//# sourceMappingURL=p-db9325e8.entry.js.map
+export{T as nano_table}from"./p-7c0c892a.js";import"./p-d6a04b3a.js";import"./p-ee045579.js";import"./p-7bff5224.js";import"./p-70747f20.js";
+//# sourceMappingURL=p-c2ccac87.entry.js.map

package/dist/types/components/details/details.d.ts

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { Color } from '../../interface';
 /**
  * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.
  */
@@ -9,44 +8,34 @@ import type { Color } from '../../interface';
  * @slot label - can be used when you wish to insert complex label markup
  * @slot icon-end - used for icons at the end of the handle
  *
- * @part button - the main details ui control
+ * @part base - the root `details` element
+ * @part header - the main `summary` ui control
  * @part label - the text wrapper of the ui control
  * @part icon--start - the icon wrapper at the start of the ui control
  * @part icon--end - the icon wrapper at the end of the ui control
+ * @part body - the wrapper around content
  * @part content - the main content wrapper
  */
 export declare class Details {
   private hasStartSlot;
   private hasEndSlot;
-  private slideId;
   private mo?;
-  private ro?;
-  private contentArea;
   private stateChanging;
-  isLoading: boolean;
-  private el;
+  private bodyEl;
+  private detailsEl;
+  private headerEl;
   private contentEl;
-  /**
-   * Button / handle text to be used if no complex markup required.
-   * Otherwise use label slot.
-   */
+  private host;
+  /** Summary / handle text. Use the `label` slot for HTML markup */
   label: string;
-  /**
-   * Should item be open on load
-   */
+  /** Should item be open on load */
   open: boolean;
-  /**
-   * Have no handle - you will need to control the hiding / showing of content with script
-   */
+  /** Disables the details so it can't be toggled. */
+  disabled: boolean;
+  /** Hide the handle. (You will need to control the hiding / showing of content with script) */
   noHandle: boolean;
-  /**
-   * Icon slot rotation amount (degrees) on open
-   */
+  /** Icon slot rotation amount (degrees) on open */
   iconRotation: number;
-  /**
-   * Color to use from your application's color palette.
-   */
-  color?: Color;
   /**
    * Emitted when the component opens.
    * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.
@@ -62,8 +51,7 @@ export declare class Details {
   private onMouseDown;
   private hide;
   private show;
-  private resize;
-  private attachRO;
+  private attachMo;
   componentWillLoad(): void;
   componentDidLoad(): void;
   connectedCallback(): void;

package/dist/types/components/grid/grid.d.ts

@@ -14,6 +14,7 @@
  */
 export declare class Grid {
   private grids;
+  private gridId;
   cacheKey: string;
   /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.
    * Will default to `px` if no unit supplied e.g. `20rem` */

package/dist/types/components/table/table-interface.d.ts

@@ -131,7 +131,8 @@ export declare namespace TableTypes {
     [key: string]: any;
   };
   type JSXRender = VNode | VNode[] | LibJSX | LibJSX[];
-  type TplResult = JSXRender | string | Element | undefined;
+  type TplReturn = JSXRender | string | Element | undefined;
+  type TplResult = TplReturn | Promise<string>;
   /**
    * A table column's configuration
    */

package/dist/types/components/table/table.d.ts

@@ -19,7 +19,7 @@ export declare class Table implements ComponentInterface {
   /** Function called whenever `col.cellTemplate` renders an unknown object.
    * The function should render a valid HTMLElement to the cell arg.
    * Example usage - render JSX from a 3rd party lib and append the result to the cell element. */
-  customRenderer: (node: any, cell: HTMLElement) => void;
+  customRenderer: (node: any, cell: HTMLElement) => void | Promise<string>;
   /** The type of table. Grid type will make cells navigable by keyboard */
   type: 'grid' | 'table';
   /** A descriptive title of the table.

package/dist/types/components.d.ts

@@ -655,19 +655,19 @@ export namespace Components {
     }
     interface NanoDetails {
         /**
-          * Color to use from your application's color palette.
+          * Disables the details so it can't be toggled.
          */
-        "color"?: Color;
+        "disabled": boolean;
         /**
           * Icon slot rotation amount (degrees) on open
          */
         "iconRotation": number;
         /**
-          * Button / handle text to be used if no complex markup required. Otherwise use label slot.
+          * Summary / handle text. Use the `label` slot for HTML markup
          */
         "label": string;
         /**
-          * Have no handle - you will need to control the hiding / showing of content with script
+          * Hide the handle. (You will need to control the hiding / showing of content with script)
          */
         "noHandle": boolean;
         /**
@@ -2426,7 +2426,10 @@ export namespace Components {
         /**
           * Function called whenever `col.cellTemplate` renders an unknown object. The function should render a valid HTMLElement to the cell arg. Example usage - render JSX from a 3rd party lib and append the result to the cell element.
          */
-        "customRenderer": (node: any, cell: HTMLElement) => void;
+        "customRenderer": (
+    node: any,
+    cell: HTMLElement
+  ) => void | Promise<string>;
         /**
           * A custom sorting function. Should return a promise. If the promise resolves as `true` the column UI will be updated. If the promise resolves as falsey, the sort will be performed by the component. A good use-case would be performing the sort on a server / via fetch. Then on success, updating the table's data via the `rows` property
          */
@@ -3958,19 +3961,19 @@ declare namespace LocalJSX {
     }
     interface NanoDetails {
         /**
-          * Color to use from your application's color palette.
+          * Disables the details so it can't be toggled.
          */
-        "color"?: Color;
+        "disabled"?: boolean;
         /**
           * Icon slot rotation amount (degrees) on open
          */
         "iconRotation"?: number;
         /**
-          * Button / handle text to be used if no complex markup required. Otherwise use label slot.
+          * Summary / handle text. Use the `label` slot for HTML markup
          */
         "label"?: string;
         /**
-          * Have no handle - you will need to control the hiding / showing of content with script
+          * Hide the handle. (You will need to control the hiding / showing of content with script)
          */
         "noHandle"?: boolean;
         /**
@@ -5832,7 +5835,10 @@ declare namespace LocalJSX {
         /**
           * Function called whenever `col.cellTemplate` renders an unknown object. The function should render a valid HTMLElement to the cell arg. Example usage - render JSX from a 3rd party lib and append the result to the cell element.
          */
-        "customRenderer"?: (node: any, cell: HTMLElement) => void;
+        "customRenderer"?: (
+    node: any,
+    cell: HTMLElement
+  ) => void | Promise<string>;
         /**
           * A custom sorting function. Should return a promise. If the promise resolves as `true` the column UI will be updated. If the promise resolves as falsey, the sort will be performed by the component. A good use-case would be performing the sort on a server / via fetch. Then on success, updating the table's data via the `rows` property
          */

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-10-06T21:34:10",
+  "timestamp": "2023-10-11T14:08:27",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.23.1",
@@ -4046,7 +4046,11 @@
         },
         {
           "name": "part",
-          "text": "button - the main details ui control"
+          "text": "base - the root `details` element"
+        },
+        {
+          "name": "part",
+          "text": "header - the main `summary` ui control"
         },
         {
           "name": "part",
@@ -4060,6 +4064,10 @@
           "name": "part",
           "text": "icon--end - the icon wrapper at the end of the ui control"
         },
+        {
+          "name": "part",
+          "text": "body - the wrapper around content"
+        },
         {
           "name": "part",
           "text": "content - the main content wrapper"
@@ -4068,52 +4076,20 @@
       "usage": {},
       "props": [
         {
-          "name": "color",
-          "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
-          "mutable": false,
-          "attr": "color",
-          "reflectToAttr": false,
-          "docs": "Color to use from your application's color palette.",
+          "name": "disabled",
+          "type": "boolean",
+          "mutable": true,
+          "attr": "disabled",
+          "reflectToAttr": true,
+          "docs": "Disables the details so it can't be toggled.",
           "docsTags": [],
+          "default": "false",
           "values": [
             {
-              "value": "danger",
-              "type": "string"
-            },
-            {
-              "value": "dark",
-              "type": "string"
-            },
-            {
-              "value": "light",
-              "type": "string"
-            },
-            {
-              "value": "medium",
-              "type": "string"
-            },
-            {
-              "value": "primary",
-              "type": "string"
-            },
-            {
-              "value": "secondary",
-              "type": "string"
-            },
-            {
-              "value": "success",
-              "type": "string"
-            },
-            {
-              "value": "tertiary",
-              "type": "string"
-            },
-            {
-              "value": "warning",
-              "type": "string"
+              "type": "boolean"
             }
           ],
-          "optional": true,
+          "optional": false,
           "required": false,
           "getter": false,
           "setter": false
@@ -4143,7 +4119,7 @@
           "mutable": false,
           "attr": "label",
           "reflectToAttr": false,
-          "docs": "Button / handle text to be used if no complex markup required.\nOtherwise use label slot.",
+          "docs": "Summary / handle text. Use the `label` slot for HTML markup",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -4162,7 +4138,7 @@
           "mutable": false,
           "attr": "no-handle",
           "reflectToAttr": false,
-          "docs": "Have no handle - you will need to control the hiding / showing of content with script",
+          "docs": "Hide the handle. (You will need to control the hiding / showing of content with script)",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4278,16 +4254,6 @@
           "annotation": "prop",
           "docs": "Defaults to var(--nano-color-contrast, var(--btn-text-color));"
         },
-        {
-          "name": "--content-bg-color",
-          "annotation": "prop",
-          "docs": "Defaults to transparent;"
-        },
-        {
-          "name": "--content-text-color",
-          "annotation": "prop",
-          "docs": "Defaults to #455556;"
-        },
         {
           "name": "--content-transition",
           "annotation": "prop",
@@ -4324,13 +4290,21 @@
       ],
       "parts": [
         {
-          "name": "button",
-          "docs": "the main details ui control"
+          "name": "base",
+          "docs": "the root `details` element"
+        },
+        {
+          "name": "body",
+          "docs": "the wrapper around content"
         },
         {
           "name": "content",
           "docs": "the main content wrapper"
         },
+        {
+          "name": "header",
+          "docs": "the main `summary` ui control"
+        },
         {
           "name": "icon--end",
           "docs": "the icon wrapper at the end of the ui control"
@@ -7595,7 +7569,7 @@
           "type": "number",
           "mutable": false,
           "attr": "l-cols",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "the number of columns the grid has at the large breakpoint.",
           "docsTags": [],
           "values": [
@@ -7613,7 +7587,7 @@
           "type": "number | string",
           "mutable": false,
           "attr": "l-size",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`",
           "docsTags": [],
           "default": "800",
@@ -7653,7 +7627,7 @@
           "type": "number",
           "mutable": false,
           "attr": "m-cols",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "the number of columns the grid has at the medium breakpoint.",
           "docsTags": [],
           "values": [
@@ -7671,7 +7645,7 @@
           "type": "number | string",
           "mutable": false,
           "attr": "m-size",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`",
           "docsTags": [],
           "default": "550",
@@ -7711,7 +7685,7 @@
           "type": "number",
           "mutable": false,
           "attr": "s-cols",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "the number of columns the grid has at the small breakpoint.",
           "docsTags": [],
           "values": [
@@ -7729,7 +7703,7 @@
           "type": "number | string",
           "mutable": false,
           "attr": "s-size",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`",
           "docsTags": [],
           "default": "300",
@@ -7788,7 +7762,7 @@
           "type": "number",
           "mutable": false,
           "attr": "xl-cols",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "the number of columns the grid has at the xl breakpoint.",
           "docsTags": [],
           "values": [
@@ -7806,7 +7780,7 @@
           "type": "number | string",
           "mutable": false,
           "attr": "xl-size",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`",
           "docsTags": [],
           "default": "1000",
@@ -7846,7 +7820,7 @@
           "type": "number",
           "mutable": false,
           "attr": "xxl-cols",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)",
           "docsTags": [],
           "values": [
@@ -16368,7 +16342,7 @@
         },
         {
           "name": "customRenderer",
-          "type": "(node: any, cell: HTMLElement) => void",
+          "type": "(node: any, cell: HTMLElement) => void | Promise<string>",
           "mutable": false,
           "reflectToAttr": false,
           "docs": "Function called whenever `col.cellTemplate` renders an unknown object.\nThe function should render a valid HTMLElement to the cell arg.\nExample usage - render JSX from a 3rd party lib and append the result to the cell element.",
@@ -16376,6 +16350,9 @@
           "values": [
             {
               "type": "(node: any, cell: HTMLElement) => void"
+            },
+            {
+              "type": "Promise<string>"
             }
           ],
           "optional": false,

package/docs-vscode.json

@@ -814,37 +814,8 @@
       },
       "attributes": [
         {
-          "name": "color",
-          "description": "Color to use from your application's color palette.",
-          "values": [
-            {
-              "name": "danger"
-            },
-            {
-              "name": "dark"
-            },
-            {
-              "name": "light"
-            },
-            {
-              "name": "medium"
-            },
-            {
-              "name": "primary"
-            },
-            {
-              "name": "secondary"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "tertiary"
-            },
-            {
-              "name": "warning"
-            }
-          ]
+          "name": "disabled",
+          "description": "Disables the details so it can't be toggled."
         },
         {
           "name": "icon-rotation",
@@ -852,11 +823,11 @@
         },
         {
           "name": "label",
-          "description": "Button / handle text to be used if no complex markup required.\nOtherwise use label slot."
+          "description": "Summary / handle text. Use the `label` slot for HTML markup"
         },
         {
           "name": "no-handle",
-          "description": "Have no handle - you will need to control the hiding / showing of content with script"
+          "description": "Hide the handle. (You will need to control the hiding / showing of content with script)"
         },
         {
           "name": "open",