npm - @nanoporetech-digital/components - Versions diffs - 3.2.0 → 3.3.1 - Mend

@nanoporetech-digital/components 3.2.0 → 3.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (463) hide show

package/docs-json.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-11-28T13:51:12",
+  "timestamp": "2022-12-05T14:37:20",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.19.4",
@@ -6308,7 +6308,7 @@
       "encapsulation": "shadow",
       "tag": "nano-global-nav",
       "readme": "# Global Nav\n\n\n\n",
-      "docs": "Nanopore digital global navigation and search bar.\nIncorporates MyAccount / SSO states (messages / cart / user name etc).\nIncorporates Algolia search.\nGlobalNav is designed to be at the root of the `<body>`.\nThere should only be one <nano-global-nav> in the DOM.\nThe following demo uses static data.",
+      "docs": "Nanopore digital global navigation and search bar.\nIncorporates MyAccount / SSO states (messages / cart / user name etc).\nIncorporates Algolia search.",
       "docsTags": [
         {
           "name": "slot",
@@ -6345,6 +6345,10 @@
         {
           "name": "slot",
           "text": "logo - when show-logo=\"false\" you can utilise the logo slot"
+        },
+        {
+          "name": "slot",
+          "text": "- if using search functionality, place a `<nano-search-results />` element in the default slot"
         }
       ],
       "usage": {},
@@ -6775,107 +6779,111 @@
       ],
       "styles": [
         {
-          "name": "--bar-background. Defaults to white;",
+          "name": "--bar-background",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to white;"
         },
         {
-          "name": "--bar-color-focus. Defaults to #001a21;",
+          "name": "--bar-color-focus",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to #001a21;"
         },
         {
-          "name": "--bar-color-shade. Defaults to rgb(19, 89, 111);",
+          "name": "--bar-color-shade",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to rgb(19, 89, 111);"
         },
         {
-          "name": "--bar-color-tint. Defaults to rgb(19, 89, 111);",
+          "name": "--bar-color-tint",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to rgb(19, 89, 111);"
         },
         {
-          "name": "--bar-dropdown-bg. Defaults to #196c82;",
+          "name": "--bar-dropdown-bg",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to #196c82;"
         },
         {
-          "name": "--bar-dropdown-text. Defaults to white;",
+          "name": "--bar-dropdown-text",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to white;"
         },
         {
-          "name": "--bar-item-spacing. Defaults to 16px;",
+          "name": "--bar-item-spacing",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to 16px;"
         },
         {
-          "name": "--bar-text-color. Defaults to #196c82;",
+          "name": "--bar-text-color",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to #196c82;"
         },
         {
-          "name": "--bar-user-panel-bg. Defaults to #016d86;",
+          "name": "--bar-user-panel-bg",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to #016d86;"
         },
         {
-          "name": "--bar-vertical-padding. Defaults to 21px;",
+          "name": "--bar-vertical-padding",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to 21px;"
         },
         {
-          "name": "--login-button-bg. Defaults to #17bb75;",
+          "name": "--login-button-bg",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to #17bb75;"
         },
         {
-          "name": "--login-button-text. Defaults to white;",
+          "name": "--login-button-text",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to white;"
         },
         {
-          "name": "--menu-background. Defaults to #001a21;",
+          "name": "--menu-background",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to #001a21;"
         },
         {
-          "name": "--menu-hint-color. Defaults to #33484d;",
+          "name": "--menu-hint-color",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to #33484d;"
         },
         {
-          "name": "--menu-icon-color. Defaults to white;",
+          "name": "--menu-icon-color",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to white;"
         },
         {
-          "name": "--menu-padding. Defaults to 12px;",
+          "name": "--menu-padding",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to 12px;"
         },
         {
-          "name": "--menu-text-color. Defaults to white;",
+          "name": "--menu-text-color",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to white;"
         },
         {
-          "name": "--menu-title-text. Defaults to #90c6e7;",
+          "name": "--menu-title-text",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to #90c6e7;"
         },
         {
-          "name": "--menu-user-panel-bg. Defaults to #193037;",
+          "name": "--menu-user-panel-bg",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to #193037;"
         },
         {
-          "name": "--menu-user-profile-bg. Defaults to #001a21;",
+          "name": "--menu-user-profile-bg",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Defaults to #001a21;"
         }
       ],
       "slots": [
+        {
+          "name": "",
+          "docs": "if using search functionality, place a `<nano-search-results />` element in the default slot"
+        },
         {
           "name": "about",
           "docs": "nano-nav-item's to display with about links that come from MyAccount"
@@ -6918,8 +6926,8 @@
       "dependencies": [
         "nano-select",
         "nano-option",
-        "nano-input",
         "nano-icon",
+        "nano-input",
         "nano-nav-item",
         "nano-global-nav-user-profile",
         "nano-sticker"
@@ -6928,8 +6936,8 @@
         "nano-global-nav": [
           "nano-select",
           "nano-option",
-          "nano-input",
           "nano-icon",
+          "nano-input",
           "nano-nav-item",
           "nano-global-nav-user-profile",
           "nano-sticker"
@@ -7033,7 +7041,17 @@
       "usage": {},
       "props": [],
       "methods": [],
-      "events": [],
+      "events": [
+        {
+          "event": "nanoSearchGoBack",
+          "detail": "any",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired when the user clicks the 'back' button / closes the search panel\nCalling `event.preventDefault()` will prevent it from being closed.",
+          "docsTags": []
+        }
+      ],
       "listeners": [
         {
           "event": "nanoSearchReset",
@@ -10047,7 +10065,48 @@
       "tag": "nano-nav-item",
       "readme": "# nano-global-nav-item\n\n\n",
       "docs": "Nav items to be used with the various nav items.\n[Globla-Nav](/story/compounds-global-nav)\n[Menu-Drawer](/story/components-menu-drawer)\n[Dropdown](/story/components-dropdown)",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "icon-start - an icon at the start of the main control"
+        },
+        {
+          "name": "slot",
+          "text": "icon-end - an icon at the end of the main control"
+        },
+        {
+          "name": "slot",
+          "text": "secondary - a content panel in which you can place any html to display on control click"
+        },
+        {
+          "name": "slot",
+          "text": "- use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)"
+        },
+        {
+          "name": "part",
+          "text": "ctrl - the controlling `<a>` or `<button>` element"
+        },
+        {
+          "name": "part",
+          "text": "ctrl--button - the controlling `<button>` element"
+        },
+        {
+          "name": "part",
+          "text": "ctrl--anchor - the controlling <a> element"
+        },
+        {
+          "name": "part",
+          "text": "ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)"
+        },
+        {
+          "name": "part",
+          "text": "secondary-wrapper - the div surrounding slotted secondary content"
+        },
+        {
+          "name": "part",
+          "text": "secondary-mask - the div that is added when secondary content is shown"
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -10305,8 +10364,50 @@
       ],
       "listeners": [],
       "styles": [],
-      "slots": [],
-      "parts": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)"
+        },
+        {
+          "name": "icon-end",
+          "docs": "an icon at the end of the main control"
+        },
+        {
+          "name": "icon-start",
+          "docs": "an icon at the start of the main control"
+        },
+        {
+          "name": "secondary",
+          "docs": "a content panel in which you can place any html to display on control click"
+        }
+      ],
+      "parts": [
+        {
+          "name": "ctrl",
+          "docs": "the controlling `<a>` or `<button>` element"
+        },
+        {
+          "name": "ctrl--anchor",
+          "docs": "the controlling <a> element"
+        },
+        {
+          "name": "ctrl--button",
+          "docs": "the controlling `<button>` element"
+        },
+        {
+          "name": "ctrl-wrapper",
+          "docs": "the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)"
+        },
+        {
+          "name": "secondary-mask",
+          "docs": "the div that is added when secondary content is shown"
+        },
+        {
+          "name": "secondary-wrapper",
+          "docs": "the div surrounding slotted secondary content"
+        }
+      ],
       "dependents": [
         "nano-global-nav"
       ],
@@ -11396,7 +11497,7 @@
     },
     {
       "filePath": "./src/components/resize-observe/resize-observe.tsx",
-      "encapsulation": "shadow",
+      "encapsulation": "none",
       "tag": "nano-resize-observe",
       "readme": "# nano-resize-observe\n\n\n",
       "docs": "A Resize-Observer utility component.\nTakes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.",
@@ -11429,6 +11530,15 @@
       ],
       "methods": [],
       "events": [
+        {
+          "event": "nanoResizeObserverReady",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires after the initial loading and assessment",
+          "docsTags": []
+        },
         {
           "event": "nanoResizeStateChange",
           "detail": "ResizeStateChangeEventDetail",
@@ -14528,7 +14638,7 @@
       "encapsulation": "none",
       "tag": "nano-table",
       "readme": "# nano-table\n\n\n",
-      "docs": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Add custom rendering at every level\n- Add custom properties at every level",
+      "docs": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Add custom rendering at every level\n- Add custom properties at every level",
       "docsTags": [
         {
           "name": "slot",
@@ -14669,7 +14779,7 @@
           "reflectToAttr": false,
           "docs": "Will show a loading state when true.\nWill be shown automatically if `rows` is a promise waiting to resolve\nor when performing custom filtering or sorting",
           "docsTags": [],
-          "default": "true",
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -14992,7 +15102,158 @@
           "passive": true
         }
       ],
-      "styles": [],
+      "styles": [
+        {
+          "name": "--bookend-col-padding",
+          "annotation": "prop",
+          "docs": "Deafults to 2rem;"
+        },
+        {
+          "name": "--border-color",
+          "annotation": "prop",
+          "docs": "Deafults to var(--nano-color-palegrey, #b5aea7);"
+        },
+        {
+          "name": "--border-style",
+          "annotation": "prop",
+          "docs": "Deafults to thin solid var(--border-color);"
+        },
+        {
+          "name": "--border-tint-color",
+          "annotation": "prop",
+          "docs": "Deafults to var(--nano-color-blue, #90c6e7);"
+        },
+        {
+          "name": "--border-tint-style",
+          "annotation": "prop",
+          "docs": "Deafults to 2px solid var(--border-tint-color);"
+        },
+        {
+          "name": "--cell-bg-rgb",
+          "annotation": "prop",
+          "docs": "Deafults to var(--nano-color-white-rgb, 255 255 255);"
+        },
+        {
+          "name": "--cell-line-height",
+          "annotation": "prop",
+          "docs": "Deafults to 1.5;"
+        },
+        {
+          "name": "--color",
+          "annotation": "prop",
+          "docs": "Deafults to var(--nano-color-mediumgrey, #68767e);"
+        },
+        {
+          "name": "--font-size",
+          "annotation": "prop",
+          "docs": "Deafults to 0.87rem;"
+        },
+        {
+          "name": "--foot-bg-rgb",
+          "annotation": "prop",
+          "docs": "Deafults to var(--cell-bg-rgb);"
+        },
+        {
+          "name": "--foot-th-padding-h",
+          "annotation": "prop",
+          "docs": "Deafults to var(--td-padding-start) var(--td-padding-end);"
+        },
+        {
+          "name": "--foot-th-padding-v",
+          "annotation": "prop",
+          "docs": "Deafults to var(--td-padding-top) var(--td-padding-bottom);"
+        },
+        {
+          "name": "--head-bg-rgb",
+          "annotation": "prop",
+          "docs": "Deafults to var(--cell-bg-rgb);"
+        },
+        {
+          "name": "--head-th-padding-h",
+          "annotation": "prop",
+          "docs": "Deafults to var(--th-padding-start) var(--th-padding-end);"
+        },
+        {
+          "name": "--head-th-padding-v",
+          "annotation": "prop",
+          "docs": "Deafults to var(--th-padding-top) var(--th-padding-bottom);"
+        },
+        {
+          "name": "--max-col-width",
+          "annotation": "prop",
+          "docs": "Default 200px;"
+        },
+        {
+          "name": "--ordered-bg-rgb",
+          "annotation": "prop",
+          "docs": "Deafults to var(--nano-color-offwhite-rgb, 249 249 251);"
+        },
+        {
+          "name": "--td-padding-bottom",
+          "annotation": "prop",
+          "docs": "Deafults to 0.4125rem;"
+        },
+        {
+          "name": "--td-padding-end",
+          "annotation": "prop",
+          "docs": "Deafults to 0.625rem;"
+        },
+        {
+          "name": "--td-padding-h",
+          "annotation": "prop",
+          "docs": "Deafults to var(--td-padding-start) var(--td-padding-end);"
+        },
+        {
+          "name": "--td-padding-start",
+          "annotation": "prop",
+          "docs": "Deafults to 0.625rem;"
+        },
+        {
+          "name": "--td-padding-top",
+          "annotation": "prop",
+          "docs": "Deafults to 0.5rem;"
+        },
+        {
+          "name": "--td-padding-v",
+          "annotation": "prop",
+          "docs": "Deafults to var(--td-padding-top) var(--td-padding-bottom);"
+        },
+        {
+          "name": "--th-padding-bottom",
+          "annotation": "prop",
+          "docs": "Deafults to 0.6875rem;"
+        },
+        {
+          "name": "--th-padding-end",
+          "annotation": "prop",
+          "docs": "Deafults to 0.625rem;"
+        },
+        {
+          "name": "--th-padding-h",
+          "annotation": "prop",
+          "docs": "Deafults to var(--th-padding-start) var(--th-padding-end);"
+        },
+        {
+          "name": "--th-padding-start",
+          "annotation": "prop",
+          "docs": "Deafults to 0.625rem;"
+        },
+        {
+          "name": "--th-padding-top",
+          "annotation": "prop",
+          "docs": "Deafults to 0.875rem;"
+        },
+        {
+          "name": "--th-padding-v",
+          "annotation": "prop",
+          "docs": "Deafults to var(--th-padding-top) var(--th-padding-bottom);"
+        },
+        {
+          "name": "--th-row-bg-rgb",
+          "annotation": "prop",
+          "docs": "Deafults to var(--cell-bg-rgb);"
+        }
+      ],
       "slots": [
         {
           "name": "caption",

package/docs-vscode.json CHANGED Viewed

@@ -1207,7 +1207,7 @@
       "name": "nano-global-nav",
       "description": {
         "kind": "markdown",
-        "value": "Nanopore digital global navigation and search bar.\nIncorporates MyAccount / SSO states (messages / cart / user name etc).\nIncorporates Algolia search.\nGlobalNav is designed to be at the root of the `<body>`.\nThere should only be one <nano-global-nav> in the DOM.\nThe following demo uses static data."
+        "value": "Nanopore digital global navigation and search bar.\nIncorporates MyAccount / SSO states (messages / cart / user name etc).\nIncorporates Algolia search."
       },
       "attributes": [
         {
@@ -2678,7 +2678,7 @@
       "name": "nano-table",
       "description": {
         "kind": "markdown",
-        "value": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Add custom rendering at every level\n- Add custom properties at every level"
+        "value": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Add custom rendering at every level\n- Add custom properties at every level"
       },
       "attributes": [
         {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "3.2.0",
+  "version": "3.3.1",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -124,5 +124,5 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "b5c85f8ec44dd15106300026040daa4468e901cc"
+  "gitHead": "bb4f86bd6dd1ae734bfc8042a95df24ec541dcd8"
 }