@nanoporetech-digital/components 5.7.0 → 5.8.1

package/dist/types/components.d.ts

@@ -655,25 +655,29 @@ 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;
         /**
           * Should item be open on load
          */
         "open": boolean;
+        /**
+          * Sometimes, nested content will resize within the details component which results in choppy show/hide animations. Set `useCacheHeight` to `true` try to keep animations smooth.
+         */
+        "useCacheHeight": boolean;
     }
     /**
      * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
@@ -2426,7 +2430,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 +3965,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;
         /**
@@ -3985,6 +3992,10 @@ declare namespace LocalJSX {
           * Should item be open on load
          */
         "open"?: boolean;
+        /**
+          * Sometimes, nested content will resize within the details component which results in choppy show/hide animations. Set `useCacheHeight` to `true` try to keep animations smooth.
+         */
+        "useCacheHeight"?: boolean;
     }
     /**
      * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
@@ -5832,7 +5843,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-09T22:13:52",
+  "timestamp": "2023-10-11T16:13:10",
   "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": [
@@ -4193,6 +4169,25 @@
           "required": false,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "useCacheHeight",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "use-cache-height",
+          "reflectToAttr": false,
+          "docs": "Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\nSet `useCacheHeight` to `true` try to keep animations smooth.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],
@@ -4278,16 +4273,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 +4309,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 +7588,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 +7606,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 +7646,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 +7664,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 +7704,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 +7722,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 +7781,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 +7799,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 +7839,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 +16361,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 +16369,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,15 +823,19 @@
         },
         {
           "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",
           "description": "Should item be open on load"
+        },
+        {
+          "name": "use-cache-height",
+          "description": "Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\nSet `useCacheHeight` to `true` try to keep animations smooth."
         }
       ]
     },