@nanoporetech-digital/components 5.2.1 → 5.3.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-08-03T13:31:21",
+  "timestamp": "2023-08-08T21:17:15",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.23.0",
@@ -4356,8 +4356,40 @@
       "docs": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.",
       "docsTags": [
         {
-          "name": "slot",
-          "text": "- The dialog's content."
+          "name": "part",
+          "text": "base - The component’s base wrapper"
+        },
+        {
+          "name": "part",
+          "text": "overlay - The overlay that covers the screen behind the dialog"
+        },
+        {
+          "name": "part",
+          "text": "panel - The dialog’s panel (where the dialog and its content are rendered)"
+        },
+        {
+          "name": "part",
+          "text": "header - The dialog’s header. This element wraps the title and header actions"
+        },
+        {
+          "name": "part",
+          "text": "title - The dialog’s title"
+        },
+        {
+          "name": "part",
+          "text": "close-button - The `<nano-icon-button>` close button"
+        },
+        {
+          "name": "part",
+          "text": "close-button__base - The close button's exported `base` part"
+        },
+        {
+          "name": "part",
+          "text": "body - dilog body / content"
+        },
+        {
+          "name": "part",
+          "text": "footer - dialog footer bar"
         },
         {
           "name": "slot",
@@ -4366,6 +4398,10 @@
         {
           "name": "slot",
           "text": "footer - The dialog's footer, usually one or more buttons representing various options."
+        },
+        {
+          "name": "slot",
+          "text": "- The dialog's content."
         }
       ],
       "usage": {},
@@ -4656,7 +4692,7 @@
         {
           "name": "--close-button-color",
           "annotation": "prop",
-          "docs": "defaults to #687576;"
+          "docs": "defaults to #b5aea7;"
         },
         {
           "name": "--content-background",
@@ -4706,31 +4742,39 @@
       "parts": [
         {
           "name": "base",
-          "docs": ""
+          "docs": "The component’s base wrapper"
         },
         {
           "name": "body",
-          "docs": ""
+          "docs": "dilog body / content"
+        },
+        {
+          "name": "close-button",
+          "docs": "The `<nano-icon-button>` close button"
+        },
+        {
+          "name": "close-button__base",
+          "docs": "The close button's exported `base` part"
         },
         {
           "name": "footer",
-          "docs": ""
+          "docs": "dialog footer bar"
         },
         {
           "name": "header",
-          "docs": ""
+          "docs": "The dialog’s header. This element wraps the title and header actions"
         },
         {
           "name": "overlay",
-          "docs": ""
+          "docs": "The overlay that covers the screen behind the dialog"
         },
         {
           "name": "panel",
-          "docs": ""
+          "docs": "The dialog’s panel (where the dialog and its content are rendered)"
         },
         {
           "name": "title",
-          "docs": ""
+          "docs": "The dialog’s title"
         }
       ],
       "dependents": [],
@@ -4754,19 +4798,63 @@
       "encapsulation": "shadow",
       "tag": "nano-drawer",
       "readme": "# nano-drawer\n\n\n",
-      "docs": "WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24",
+      "docs": "Drawers slide in from a container to expose additional options and information.",
       "docsTags": [
         {
           "name": "slot",
-          "text": "- The drawer's content."
+          "text": "- The drawer's main content"
         },
         {
           "name": "slot",
-          "text": "label - The dialog's label. Alternatively, you can use the label prop."
+          "text": "label - The drawer's label. Alternatively, you can use the `label` attribute"
         },
         {
           "name": "slot",
-          "text": "footer - The drawer's footer, usually one or more buttons representing various options."
+          "text": "header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`"
+        },
+        {
+          "name": "slot",
+          "text": "footer - The drawer's footer, usually one or more buttons representing various options"
+        },
+        {
+          "name": "part",
+          "text": "base - The component's base wrapper"
+        },
+        {
+          "name": "part",
+          "text": "overlay - The overlay that covers the screen behind the drawer"
+        },
+        {
+          "name": "part",
+          "text": "panel - The drawer's panel (where the drawer and its content are rendered)"
+        },
+        {
+          "name": "part",
+          "text": "header - The drawer's header. This element wraps the title and header actions"
+        },
+        {
+          "name": "part",
+          "text": "header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`"
+        },
+        {
+          "name": "part",
+          "text": "title - The drawer's title"
+        },
+        {
+          "name": "part",
+          "text": "close-button - The close button, an `<nano-icon-button>`"
+        },
+        {
+          "name": "part",
+          "text": "close-button__base - The close button's exported `base` part"
+        },
+        {
+          "name": "part",
+          "text": "body - The drawer's body"
+        },
+        {
+          "name": "part",
+          "text": "footer - The drawer's footer"
         }
       ],
       "usage": {},
@@ -4776,8 +4864,8 @@
           "type": "boolean",
           "mutable": false,
           "attr": "contained",
-          "reflectToAttr": false,
-          "docs": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this prop and add `position: relative` to the parent.",
+          "reflectToAttr": true,
+          "docs": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4791,16 +4879,17 @@
           "setter": false
         },
         {
-          "name": "contentSelector",
-          "type": "string",
+          "name": "hoist",
+          "type": "boolean",
           "mutable": false,
-          "attr": "content-selector",
+          "attr": "hoist",
           "reflectToAttr": false,
-          "docs": "Required for 'reveal' and 'push' types\nA valid DOM selector of the content element that this drawer will push or reveal underneath\nPlease remember - elements wrapping the content element must be 'overflow: hidden'\notherwise menus will be shown when closed",
+          "docs": "Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...`",
           "docsTags": [],
+          "default": "false",
           "values": [
             {
-              "type": "string"
+              "type": "boolean"
             }
           ],
           "optional": false,
@@ -4813,17 +4902,16 @@
           "type": "string",
           "mutable": false,
           "attr": "label",
-          "reflectToAttr": false,
-          "docs": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility.",
+          "reflectToAttr": true,
+          "docs": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
           "docsTags": [],
-          "default": "''",
           "values": [
             {
               "type": "string"
             }
           ],
           "optional": false,
-          "required": false,
+          "required": true,
           "getter": false,
           "setter": false
         },
@@ -4832,7 +4920,7 @@
           "type": "boolean",
           "mutable": false,
           "attr": "no-header",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
           "docsTags": [],
           "default": "false",
@@ -4846,13 +4934,32 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "noUserDismiss",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "no-user-dismiss",
+          "reflectToAttr": false,
+          "docs": "An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "open",
           "type": "boolean",
-          "mutable": true,
+          "mutable": false,
           "attr": "open",
           "reflectToAttr": true,
-          "docs": "Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.",
+          "docs": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4870,7 +4977,7 @@
           "type": "\"bottom\" | \"end\" | \"start\" | \"top\"",
           "mutable": false,
           "attr": "placement",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "The direction from which the drawer will open.",
           "docsTags": [],
           "default": "'end'",
@@ -4898,25 +5005,55 @@
           "setter": false
         },
         {
-          "name": "type",
-          "type": "\"overlay\" | \"push\" | \"reveal\"",
+          "name": "storeId",
+          "type": "string",
           "mutable": false,
-          "attr": "type",
+          "attr": "store-id",
           "reflectToAttr": false,
-          "docs": "The display type of the drawer",
+          "docs": "Store search queries (against this ID) to the component store. Use in conjunction with storeMethod",
           "docsTags": [],
-          "default": "'overlay'",
           "values": [
             {
-              "value": "overlay",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "storeMethod",
+          "type": "\"local\" | \"session\" | \"url-hash\" | \"url-hash-push\" | \"url-query\" | \"url-query-push\"",
+          "mutable": false,
+          "attr": "store-method",
+          "reflectToAttr": false,
+          "docs": "The method of storage. Either session storage, url hash (after the '#') or url query (after the '?').",
+          "docsTags": [],
+          "default": "'url-hash'",
+          "values": [
+            {
+              "value": "local",
+              "type": "string"
+            },
+            {
+              "value": "session",
               "type": "string"
             },
             {
-              "value": "push",
+              "value": "url-hash",
               "type": "string"
             },
             {
-              "value": "reveal",
+              "value": "url-hash-push",
+              "type": "string"
+            },
+            {
+              "value": "url-query",
+              "type": "string"
+            },
+            {
+              "value": "url-query-push",
               "type": "string"
             }
           ],
@@ -4946,7 +5083,7 @@
           },
           "signature": "show() => Promise<void>",
           "parameters": [],
-          "docs": "Shows the drawer",
+          "docs": "Shows the drawer.",
           "docsTags": []
         }
       ],
@@ -4957,7 +5094,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the drawer closes and all transitions are complete.",
+          "docs": "Emitted after the drawer closes and all animations are complete.",
           "docsTags": []
         },
         {
@@ -4966,7 +5103,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted after the drawer opens and all transitions are complete.",
+          "docs": "Emitted after the drawer opens and all animations are complete.",
           "docsTags": []
         },
         {
@@ -4975,16 +5112,25 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.",
+          "docs": "Emitted when the drawer closes.",
           "docsTags": []
         },
         {
-          "event": "nanoOverlayDismiss",
+          "event": "nanoInitialFocus",
           "detail": "any",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.",
+          "docs": "Emitted when the drawer opens and is ready to receive focus. Calling\n`event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoRquestClose",
+          "detail": "{ source: \"overlay\" | \"keyboard\" | \"close-button\"; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the user attempts to\nclose the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n`event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\ndestructive behavior such as data loss.",
           "docsTags": []
         },
         {
@@ -4993,26 +5139,51 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.",
+          "docs": "Emitted when the drawer opens.",
           "docsTags": []
         }
       ],
       "listeners": [],
       "styles": [
         {
-          "name": "--overlay-color",
+          "name": "--body-spacing",
           "annotation": "prop",
-          "docs": "Defaults to 'hsla(203, 10%, 20%, 0.5)';"
+          "docs": "The amount of padding to use for the body."
         },
         {
-          "name": "--panel-background-color",
+          "name": "--footer-background",
+          "annotation": "prop",
+          "docs": "Defaults to #e4e6e8;"
+        },
+        {
+          "name": "--footer-spacing",
+          "annotation": "prop",
+          "docs": "The amount of padding to use for the footer. Defaults to var(--nano-spacing-medium, 16px) var(--nano-spacing-large, 20px)"
+        },
+        {
+          "name": "--header-button-color",
+          "annotation": "prop",
+          "docs": "defaults to #b5aea7;"
+        },
+        {
+          "name": "--header-spacing",
+          "annotation": "prop",
+          "docs": "The amount of padding to use for the header."
+        },
+        {
+          "name": "--panel-background",
           "annotation": "prop",
           "docs": "background color of panel. Default to 'white'"
         },
         {
           "name": "--panel-shadow",
           "annotation": "prop",
-          "docs": "Defaults to '0 4px 16px rgb(0 0 0 / 10%)';"
+          "docs": "Defaults to var(--nano-layer-shadow-xlarge, 0 4px 16px rgba(0, 0, 0, 0.4));"
+        },
+        {
+          "name": "--scrim-color",
+          "annotation": "prop",
+          "docs": "overlay colour of alert display. Defaults to var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));"
         },
         {
           "name": "--size",
@@ -5023,50 +5194,78 @@
       "slots": [
         {
           "name": "",
-          "docs": "The drawer's content."
+          "docs": "The drawer's main content"
         },
         {
           "name": "footer",
-          "docs": "The drawer's footer, usually one or more buttons representing various options."
+          "docs": "The drawer's footer, usually one or more buttons representing various options"
+        },
+        {
+          "name": "header-actions",
+          "docs": "Optional actions to add to the header. Works best with `<nano-icon-button>`"
         },
         {
           "name": "label",
-          "docs": "The dialog's label. Alternatively, you can use the label prop."
+          "docs": "The drawer's label. Alternatively, you can use the `label` attribute"
         }
       ],
       "parts": [
         {
           "name": "base",
-          "docs": ""
+          "docs": "The component's base wrapper"
         },
         {
           "name": "body",
-          "docs": ""
+          "docs": "The drawer's body"
+        },
+        {
+          "name": "close-button",
+          "docs": "The close button, an `<nano-icon-button>`"
+        },
+        {
+          "name": "close-button__base",
+          "docs": "The close button's exported `base` part"
         },
         {
           "name": "footer",
-          "docs": ""
+          "docs": "The drawer's footer"
         },
         {
           "name": "header",
-          "docs": ""
+          "docs": "The drawer's header. This element wraps the title and header actions"
+        },
+        {
+          "name": "header-actions",
+          "docs": "Optional actions to add to the header. Works best with `<nano-icon-button>`"
         },
         {
           "name": "overlay",
-          "docs": ""
+          "docs": "The overlay that covers the screen behind the drawer"
         },
         {
           "name": "panel",
-          "docs": ""
+          "docs": "The drawer's panel (where the drawer and its content are rendered)"
         },
         {
           "name": "title",
-          "docs": ""
+          "docs": "The drawer's title"
         }
       ],
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
+      "dependencies": [
+        "nano-sticker",
+        "nano-icon-button"
+      ],
+      "dependencyGraph": {
+        "nano-drawer": [
+          "nano-sticker",
+          "nano-icon-button"
+        ],
+        "nano-icon-button": [
+          "nano-icon",
+          "nano-tooltip"
+        ]
+      }
     },
     {
       "filePath": "./src/components/dropdown/dropdown.tsx",
@@ -8616,6 +8815,7 @@
       "dependents": [
         "nano-alert",
         "nano-dialog",
+        "nano-drawer",
         "nano-file-upload",
         "nano-overflow-nav",
         "nano-tab"
@@ -8635,6 +8835,9 @@
         "nano-dialog": [
           "nano-icon-button"
         ],
+        "nano-drawer": [
+          "nano-icon-button"
+        ],
         "nano-file-upload": [
           "nano-icon-button"
         ],
@@ -15179,6 +15382,7 @@
       "parts": [],
       "dependents": [
         "nano-dialog",
+        "nano-drawer",
         "nano-global-nav"
       ],
       "dependencies": [],
@@ -15186,6 +15390,9 @@
         "nano-dialog": [
           "nano-sticker"
         ],
+        "nano-drawer": [
+          "nano-sticker"
+        ],
         "nano-global-nav": [
           "nano-sticker"
         ]

package/docs-vscode.json

@@ -933,28 +933,32 @@
       "name": "nano-drawer",
       "description": {
         "kind": "markdown",
-        "value": "WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24"
+        "value": "Drawers slide in from a container to expose additional options and information."
       },
       "attributes": [
         {
           "name": "contained",
-          "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this prop and add `position: relative` to the parent."
+          "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent."
         },
         {
-          "name": "content-selector",
-          "description": "Required for 'reveal' and 'push' types\nA valid DOM selector of the content element that this drawer will push or reveal underneath\nPlease remember - elements wrapping the content element must be 'overflow: hidden'\notherwise menus will be shown when closed"
+          "name": "hoist",
+          "description": "Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...`"
         },
         {
           "name": "label",
-          "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility."
+          "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead."
         },
         {
           "name": "no-header",
           "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer."
         },
+        {
+          "name": "no-user-dismiss",
+          "description": "An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key"
+        },
         {
           "name": "open",
-          "description": "Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods."
+          "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state."
         },
         {
           "name": "placement",
@@ -975,17 +979,30 @@
           ]
         },
         {
-          "name": "type",
-          "description": "The display type of the drawer",
+          "name": "store-id",
+          "description": "Store search queries (against this ID) to the component store. Use in conjunction with storeMethod"
+        },
+        {
+          "name": "store-method",
+          "description": "The method of storage. Either session storage, url hash (after the '#') or url query (after the '?').",
           "values": [
             {
-              "name": "overlay"
+              "name": "local"
+            },
+            {
+              "name": "session"
+            },
+            {
+              "name": "url-hash"
+            },
+            {
+              "name": "url-hash-push"
             },
             {
-              "name": "push"
+              "name": "url-query"
             },
             {
-              "name": "reveal"
+              "name": "url-query-push"
             }
           ]
         }