@nanoporetech-digital/components 4.10.0 → 5.0.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-06-26T23:07:54",
+  "timestamp": "2023-07-07T11:52:57",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.23.0",
@@ -7369,22 +7369,34 @@
       "encapsulation": "shadow",
       "tag": "nano-grid",
       "readme": "# nano-grid (extra examples and methods)\n\n## 1. Define the number of grid columns to display at various container sizes (from 1 to 10). \n\n```html\n<nano-grid m-cols=\"2\" l-cols=\"4\" xl-cols=\"6\" xxl-cols=\"10\" show-helper></nano-grid>\n```\n<nano-grid style=\"min-height: 200px\" m-cols=\"2\" l-cols=\"4\" xl-cols=\"6\" xxl-cols=\"10\" show-helper></nano-grid>\n\n## 2. Put items into the grid\n\nBy default items will fill one column.\n\n```html\n<nano-grid m-cols=\"2\" l-cols=\"4\" xl-cols=\"6\" show-helper>\n  <div></div>\n  <div></div>\n  <div></div>\n</nano-grid>\n```\n\n## 3. Set items to span columns and rows and / or start on different columns and rows at different sizes\n\n```html\n<nano-grid l-cols=\"6\" show-helper>\n  <div grid-states=\"\n    xl-col-span-2 \n    xl-col-start-2 \n    xl-row-span-2 \n    l-col-span-4\n  \"></div>\n  <div grid-states=\"xl-col-start-1 xl-row-start-1\"></div>\n  <div grid-states=\"xl-col-start-6\"></div>\n  <div grid-states=\"l-col-span-2\"></div>\n</nano-grid>\n```\n\n### IE11 Notes\n\nIf you need to support IE11 there are some things to consider.\n\nThere is no native way for IE11 to wrap items to new rows automatically. In order to achive this, items have been statically assigned to their row and column.\n\nThis causes 2 side-effects:\n\n1. In-order to strike a balance between flexibility and not creating humongous CSS files; the maximum grid columns currently supported is *10* with a potential *20* items spread accross them. If you need more look at nesting grids.\n\n2. If you wish to use any item grid-state property (col-span, col-start, row-span or row start) you will then need to assign corresponding properies to ALL items within the grid. E.g.\n\n```html\n<nano-grid l-cols=\"6\" show-helper>\n  <div grid-states=\"l-col-span-2 l-col-start-2 l-row-span-2\">1</div>\n  <div grid-states=\"l-col-start-1 l-row-start-1\">2</div>\n  <div grid-states=\"l-col-start-6\">3</div>\n  <div grid-states=\"l-col-span-2\">4</div>\n</nano-grid>\n```\n\n(Something that will work on modern browsers) Will need to become:\n\n```html\n<nano-grid l-cols=\"6\" show-helper>\n  <div grid-states=\"l-col-span-2 l-col-start-2 l-row-span-2 l-row-start-1\">1</div>\n  <div grid-states=\"l-col-start-1 l-row-start-1\">2</div>\n  <div grid-states=\"l-col-start-6 l-row-start-1\">3</div>\n  <div grid-states=\"l-col-start-4 l-col-span-2 l-row-start-2\">4</div>\n</nano-grid>\n```\n",
-      "docs": "A context-aware CSS grid implementation.\nUses it's own width to choose column number - not screen width.",
-      "docsTags": [],
+      "docs": "A lightweight, context-aware CSS grid implementation.\n\n- Define multiple grids templates at different breakpoints\n- Uses `@container` queries to select the correct grid depending on the current dimensions\n- Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n- SSR optimised",
+      "docsTags": [
+        {
+          "name": "part",
+          "text": "grid - the main grid element.\nUse this to set css such as `justify-items|content` / `align-items|content` / `place-content`"
+        },
+        {
+          "name": "part",
+          "text": "helper - a replica grid showed when `show-helper` is true"
+        },
+        {
+          "name": "slot",
+          "text": "- default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement."
+        }
+      ],
       "usage": {},
       "props": [
         {
-          "name": "contentPanel",
-          "type": "boolean",
+          "name": "lCols",
+          "type": "number",
           "mutable": false,
-          "attr": "content-panel",
-          "reflectToAttr": true,
-          "docs": "shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer.",
+          "attr": "l-cols",
+          "reflectToAttr": false,
+          "docs": "the number of columns the grid has at the large breakpoint.",
           "docsTags": [],
-          "default": "false",
           "values": [
             {
-              "type": "boolean"
+              "type": "number"
             }
           ],
           "optional": false,
@@ -7393,17 +7405,20 @@
           "setter": false
         },
         {
-          "name": "fullHeight",
-          "type": "boolean",
+          "name": "lSize",
+          "type": "number | string",
           "mutable": false,
-          "attr": "full-height",
-          "reflectToAttr": true,
-          "docs": "Helper to make grid items expand to full height in IE11",
+          "attr": "l-size",
+          "reflectToAttr": false,
+          "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": "false",
+          "default": "800",
           "values": [
             {
-              "type": "boolean"
+              "type": "number"
+            },
+            {
+              "type": "string"
             }
           ],
           "optional": false,
@@ -7412,32 +7427,31 @@
           "setter": false
         },
         {
-          "name": "lCols",
-          "type": "number",
+          "name": "lTpl",
+          "type": "string",
           "mutable": false,
-          "attr": "l-cols",
+          "attr": "l-tpl",
           "reflectToAttr": false,
-          "docs": "the number of columns the grid has at the large breakpoint.",
+          "docs": "Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect",
           "docsTags": [],
           "values": [
             {
-              "type": "number"
+              "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
         },
         {
-          "name": "lSize",
+          "name": "mCols",
           "type": "number",
           "mutable": false,
-          "attr": "l-size",
+          "attr": "m-cols",
           "reflectToAttr": false,
-          "docs": "the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.",
+          "docs": "the number of columns the grid has at the medium breakpoint.",
           "docsTags": [],
-          "default": "800",
           "values": [
             {
               "type": "number"
@@ -7449,16 +7463,20 @@
           "setter": false
         },
         {
-          "name": "mCols",
-          "type": "number",
+          "name": "mSize",
+          "type": "number | string",
           "mutable": false,
-          "attr": "m-cols",
+          "attr": "m-size",
           "reflectToAttr": false,
-          "docs": "the number of columns the grid has at the medium breakpoint.",
+          "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",
           "values": [
             {
               "type": "number"
+            },
+            {
+              "type": "string"
             }
           ],
           "optional": false,
@@ -7467,20 +7485,19 @@
           "setter": false
         },
         {
-          "name": "mSize",
-          "type": "number",
+          "name": "mTpl",
+          "type": "string",
           "mutable": false,
-          "attr": "m-size",
+          "attr": "m-tpl",
           "reflectToAttr": false,
-          "docs": "the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.",
+          "docs": "Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect",
           "docsTags": [],
-          "default": "550",
           "values": [
             {
-              "type": "number"
+              "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
@@ -7505,16 +7522,19 @@
         },
         {
           "name": "sSize",
-          "type": "number",
+          "type": "number | string",
           "mutable": false,
           "attr": "s-size",
           "reflectToAttr": false,
-          "docs": "the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.",
+          "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",
           "values": [
             {
               "type": "number"
+            },
+            {
+              "type": "string"
             }
           ],
           "optional": false,
@@ -7522,6 +7542,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "sTpl",
+          "type": "string",
+          "mutable": false,
+          "attr": "s-tpl",
+          "reflectToAttr": false,
+          "docs": "Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "showHelper",
           "type": "boolean",
@@ -7561,16 +7599,19 @@
         },
         {
           "name": "xlSize",
-          "type": "number",
+          "type": "number | string",
           "mutable": false,
           "attr": "xl-size",
           "reflectToAttr": false,
-          "docs": "the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.",
+          "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",
           "values": [
             {
               "type": "number"
+            },
+            {
+              "type": "string"
             }
           ],
           "optional": false,
@@ -7578,6 +7619,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "xlTpl",
+          "type": "string",
+          "mutable": false,
+          "attr": "xl-tpl",
+          "reflectToAttr": false,
+          "docs": "Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "xxlCols",
           "type": "number",
@@ -7595,20 +7654,28 @@
           "required": false,
           "getter": false,
           "setter": false
-        }
-      ],
-      "methods": [],
-      "events": [
+        },
         {
-          "event": "nanoBpChange",
-          "detail": "string[]",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "docs": "Emitted when the `nano-grid` changes breakpoint",
-          "docsTags": []
+          "name": "xxlTpl",
+          "type": "string",
+          "mutable": false,
+          "attr": "xxl-tpl",
+          "reflectToAttr": false,
+          "docs": "Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
+      "methods": [],
+      "events": [],
       "listeners": [],
       "styles": [
         {
@@ -7622,8 +7689,22 @@
           "docs": "gap between all rows. Defaults to theme's global padding"
         }
       ],
-      "slots": [],
-      "parts": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement."
+        }
+      ],
+      "parts": [
+        {
+          "name": "grid",
+          "docs": "the main grid element.\nUse this to set css such as `justify-items|content` / `align-items|content` / `place-content`"
+        },
+        {
+          "name": "helper",
+          "docs": "a replica grid showed when `show-helper` is true"
+        }
+      ],
       "dependents": [
         "nano-hero"
       ],
@@ -7639,45 +7720,25 @@
       "encapsulation": "shadow",
       "tag": "nano-grid-item",
       "readme": "# nano-grid (extra examples and methods)\n\n## 1. Define the number of grid columns to display at various container sizes (from 1 to 10). \n\n```html\n<nano-grid m-cols=\"2\" l-cols=\"4\" xl-cols=\"6\" xxl-cols=\"10\" show-helper></nano-grid>\n```\n<nano-grid style=\"min-height: 200px\" m-cols=\"2\" l-cols=\"4\" xl-cols=\"6\" xxl-cols=\"10\" show-helper></nano-grid>\n\n## 2. Put items into the grid\n\nBy default items will fill one column.\n\n```html\n<nano-grid m-cols=\"2\" l-cols=\"4\" xl-cols=\"6\" show-helper>\n  <div></div>\n  <div></div>\n  <div></div>\n</nano-grid>\n```\n\n## 3. Set items to span columns and rows and / or start on different columns and rows at different sizes\n\n```html\n<nano-grid l-cols=\"6\" show-helper>\n  <div grid-states=\"\n    xl-col-span-2 \n    xl-col-start-2 \n    xl-row-span-2 \n    l-col-span-4\n  \"></div>\n  <div grid-states=\"xl-col-start-1 xl-row-start-1\"></div>\n  <div grid-states=\"xl-col-start-6\"></div>\n  <div grid-states=\"l-col-span-2\"></div>\n</nano-grid>\n```\n\n### IE11 Notes\n\nIf you need to support IE11 there are some things to consider.\n\nThere is no native way for IE11 to wrap items to new rows automatically. In order to achive this, items have been statically assigned to their row and column.\n\nThis causes 2 side-effects:\n\n1. In-order to strike a balance between flexibility and not creating humongous CSS files; the maximum grid columns currently supported is *10* with a potential *20* items spread accross them. If you need more look at nesting grids.\n\n2. If you wish to use any item grid-state property (col-span, col-start, row-span or row start) you will then need to assign corresponding properies to ALL items within the grid. E.g.\n\n```html\n<nano-grid l-cols=\"6\" show-helper>\n  <div grid-states=\"l-col-span-2 l-col-start-2 l-row-span-2\">1</div>\n  <div grid-states=\"l-col-start-1 l-row-start-1\">2</div>\n  <div grid-states=\"l-col-start-6\">3</div>\n  <div grid-states=\"l-col-span-2\">4</div>\n</nano-grid>\n```\n\n(Something that will work on modern browsers) Will need to become:\n\n```html\n<nano-grid l-cols=\"6\" show-helper>\n  <div grid-states=\"l-col-span-2 l-col-start-2 l-row-span-2 l-row-start-1\">1</div>\n  <div grid-states=\"l-col-start-1 l-row-start-1\">2</div>\n  <div grid-states=\"l-col-start-6 l-row-start-1\">3</div>\n  <div grid-states=\"l-col-start-4 l-col-span-2 l-row-start-2\">4</div>\n</nano-grid>\n```\n",
-      "docs": "Grid items to be used with [grid](/story/nano-components-grid) elements",
-      "docsTags": [],
-      "usage": {},
-      "props": [
+      "docs": "",
+      "docsTags": [
         {
-          "name": "gridStates",
-          "type": "string",
-          "mutable": false,
-          "attr": "grid-states",
-          "reflectToAttr": false,
-          "docs": "How to position this item within it's parent grid at different break points. Examples:\nxl-col-span-2\nl-col-start-2\nxxl-row-span-2\nm-row-start-2",
-          "docsTags": [],
-          "default": "''",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
+          "name": "deprecated",
+          "text": "- you can now use `grid-states=\"...\"`\non any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.\n\nGrid items to be used with [grid](/story/nano-components-grid) elements"
         }
       ],
+      "usage": {},
+      "props": [],
       "methods": [],
       "events": [],
       "listeners": [],
       "styles": [],
       "slots": [],
       "parts": [],
-      "dependents": [
-        "nano-hero"
-      ],
+      "dependents": [],
       "dependencies": [],
-      "dependencyGraph": {
-        "nano-hero": [
-          "nano-grid-item"
-        ]
-      }
+      "dependencyGraph": {},
+      "deprecation": "- you can now use `grid-states=\"...\"`\non any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.\n\nGrid items to be used with [grid](/story/nano-components-grid) elements"
     },
     {
       "filePath": "./src/components/hero/hero.tsx",
@@ -7739,7 +7800,7 @@
           "mutable": false,
           "attr": "img-src",
           "reflectToAttr": false,
-          "docs": "src for backgronund image. For more control use the `background` slot instead.",
+          "docs": "src for background image. For more control use the `background` slot instead.",
           "docsTags": [],
           "values": [
             {
@@ -7938,13 +7999,11 @@
       "dependents": [],
       "dependencies": [
         "nano-grid",
-        "nano-grid-item",
         "nano-img"
       ],
       "dependencyGraph": {
         "nano-hero": [
           "nano-grid",
-          "nano-grid-item",
           "nano-img"
         ],
         "nano-img": [
@@ -13966,7 +14025,7 @@
               "text": "a function that attaches a keyboard accessible handle control element.\nThe function itself *must* return the handle element."
             }
           ],
-          "default": "(_number: number, _element: Element) => {\n    const handleTpl = /* html */ `\n      <nano-icon-button\n        slot=\"end\"\n        icon-name=\"light/arrows\"\n        class=\"nano-sortable__keyboard-handle visually-hidden\"\n      ></nano-icon-button>`;\n    const div = globalThis.document.createElement('div');\n    div.innerHTML = handleTpl;\n\n    const handle = div.children[0] as HTMLElement;\n    _element.append(handle);\n    return handle;\n  }",
+          "default": "(_number: number, _element: Element) => {\n    const handleTpl = /* html */ `\n      <nano-icon-button\n        slot=\"end\"\n        icon-name=\"light/arrows\"\n        class=\"nano-sortable__keyboard-handle visually-hidden\"\n        label=\"Re-order this item\"\n      ></nano-icon-button>`;\n    const div = globalThis.document.createElement('div');\n    div.innerHTML = handleTpl;\n\n    const handle = div.children[0] as HTMLElement;\n    _element.append(handle);\n    return handle;\n  }",
           "values": [
             {
               "type": "(_number: number, _element: Element) => HTMLElement"

package/docs-vscode.json

@@ -1330,24 +1330,20 @@
       "name": "nano-grid",
       "description": {
         "kind": "markdown",
-        "value": "A context-aware CSS grid implementation.\nUses it's own width to choose column number - not screen width."
+        "value": "A lightweight, context-aware CSS grid implementation.\n\n- Define multiple grids templates at different breakpoints\n- Uses `@container` queries to select the correct grid depending on the current dimensions\n- Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n- SSR optimised"
       },
       "attributes": [
-        {
-          "name": "content-panel",
-          "description": "shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer."
-        },
-        {
-          "name": "full-height",
-          "description": "Helper to make grid items expand to full height in IE11"
-        },
         {
           "name": "l-cols",
           "description": "the number of columns the grid has at the large breakpoint."
         },
         {
           "name": "l-size",
-          "description": "the component's large breakpoint. Note - all breakpoints are based on component width, not screen width."
+          "description": "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`"
+        },
+        {
+          "name": "l-tpl",
+          "description": "Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect"
         },
         {
           "name": "m-cols",
@@ -1355,7 +1351,11 @@
         },
         {
           "name": "m-size",
-          "description": "the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width."
+          "description": "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`"
+        },
+        {
+          "name": "m-tpl",
+          "description": "Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect"
         },
         {
           "name": "s-cols",
@@ -1363,7 +1363,11 @@
         },
         {
           "name": "s-size",
-          "description": "the component's small breakpoint. Note - all breakpoints are based on component width, not screen width."
+          "description": "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`"
+        },
+        {
+          "name": "s-tpl",
+          "description": "Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect"
         },
         {
           "name": "show-helper",
@@ -1375,11 +1379,19 @@
         },
         {
           "name": "xl-size",
-          "description": "the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width."
+          "description": "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`"
+        },
+        {
+          "name": "xl-tpl",
+          "description": "Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect"
         },
         {
           "name": "xxl-cols",
           "description": "the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)"
+        },
+        {
+          "name": "xxl-tpl",
+          "description": "Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect"
         }
       ]
     },
@@ -1387,14 +1399,9 @@
       "name": "nano-grid-item",
       "description": {
         "kind": "markdown",
-        "value": "Grid items to be used with [grid](/story/nano-components-grid) elements"
+        "value": ""
       },
-      "attributes": [
-        {
-          "name": "grid-states",
-          "description": "How to position this item within it's parent grid at different break points. Examples:\nxl-col-span-2\nl-col-start-2\nxxl-row-span-2\nm-row-start-2"
-        }
-      ]
+      "attributes": []
     },
     {
       "name": "nano-hero",
@@ -1405,7 +1412,7 @@
       "attributes": [
         {
           "name": "img-src",
-          "description": "src for backgronund image. For more control use the `background` slot instead."
+          "description": "src for background image. For more control use the `background` slot instead."
         },
         {
           "name": "img-src-set",