@nanoporetech-digital/components 2.3.0 → 2.5.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-05-13T15:07:43",
+  "timestamp": "2022-05-26T00:24:07",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.12.2",
@@ -1801,7 +1801,7 @@
           "type": "string",
           "mutable": false,
           "attr": "name",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "The name of the control, which is submitted with the form data.",
           "docsTags": [],
           "values": [
@@ -1819,7 +1819,7 @@
           "type": "boolean",
           "mutable": false,
           "attr": "required",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "Set to true to make the field required.",
           "docsTags": [],
           "default": "false",
@@ -1874,7 +1874,7 @@
           "type": "string",
           "mutable": false,
           "attr": "value",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\nit's only present when `checked` is true.",
           "docsTags": [],
           "default": "'on'",
@@ -2449,7 +2449,7 @@
         },
         {
           "name": "dropDownConfig",
-          "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: \"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
+          "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
           "mutable": false,
           "reflectToAttr": false,
           "docs": "nano-dropdown config options you can pass to the nested dropdown component",
@@ -2457,50 +2457,7 @@
           "default": "{\n    skidding: -1,\n  }",
           "values": [
             {
-              "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: \"top\""
-            },
-            {
-              "value": "top-start",
-              "type": "string"
-            },
-            {
-              "value": "top-end",
-              "type": "string"
-            },
-            {
-              "value": "bottom",
-              "type": "string"
-            },
-            {
-              "value": "bottom-start",
-              "type": "string"
-            },
-            {
-              "value": "bottom-end",
-              "type": "string"
-            },
-            {
-              "value": "right",
-              "type": "string"
-            },
-            {
-              "value": "right-start",
-              "type": "string"
-            },
-            {
-              "value": "right-end",
-              "type": "string"
-            },
-            {
-              "value": "left",
-              "type": "string"
-            },
-            {
-              "value": "left-start",
-              "type": "string"
-            },
-            {
-              "type": "\"left-end\"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }"
+              "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }"
             }
           ],
           "optional": false,
@@ -2590,7 +2547,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "Tweaks the datalist behaviour and linked control semantics and behaviour.\ne.g. 'select' will make the linked input control readonly.",
+          "docs": "Tweaks the datalist behaviour and linked control semantics and behaviour.\ne.g. 'select' will make the linked input control `readonly`.",
           "docsTags": [],
           "default": "'input'",
           "values": [
@@ -2902,6 +2859,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "dropDownConfig",
+          "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "nano-dropdown config options you can pass to the nested dropdown component",
+          "docsTags": [],
+          "default": "{}",
+          "values": [
+            {
+              "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": true
+        },
         {
           "name": "firstDayOfWeek",
           "type": "DaysOfWeek.Friday | DaysOfWeek.Monday | DaysOfWeek.Saturday | DaysOfWeek.Sunday | DaysOfWeek.Thursday | DaysOfWeek.Tuesday | DaysOfWeek.Wednesday",
@@ -3463,7 +3438,16 @@
           "docs": "input start slot"
         }
       ],
-      "parts": [],
+      "parts": [
+        {
+          "name": "date-picker",
+          "docs": ""
+        },
+        {
+          "name": "input",
+          "docs": ""
+        }
+      ],
       "dependents": [],
       "dependencies": [
         "nano-input",
@@ -3796,6 +3780,26 @@
         {
           "name": "slot",
           "text": "icon-end - used for icons at the end of the handle"
+        },
+        {
+          "name": "part",
+          "text": "button - the main details ui control"
+        },
+        {
+          "name": "part",
+          "text": "label - the text wrapper of the ui control"
+        },
+        {
+          "name": "part",
+          "text": "icon--start - the icon wrapper at the start of the ui control"
+        },
+        {
+          "name": "part",
+          "text": "icon--end - the icon wrapper at the end of the ui control"
+        },
+        {
+          "name": "part",
+          "text": "content - the main content wrapper"
         }
       ],
       "usage": {},
@@ -4055,7 +4059,28 @@
           "docs": "can be used when you wish to insert complex label markup"
         }
       ],
-      "parts": [],
+      "parts": [
+        {
+          "name": "button",
+          "docs": "the main details ui control"
+        },
+        {
+          "name": "content",
+          "docs": "the main content wrapper"
+        },
+        {
+          "name": "icon--end",
+          "docs": "the icon wrapper at the end of the ui control"
+        },
+        {
+          "name": "icon--start",
+          "docs": "the icon wrapper at the start of the ui control"
+        },
+        {
+          "name": "label",
+          "docs": "the text wrapper of the ui control"
+        }
+      ],
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {}
@@ -4905,7 +4930,7 @@
         },
         {
           "name": "placement",
-          "type": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "type": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"center\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
           "mutable": false,
           "attr": "placement",
           "reflectToAttr": false,
@@ -4913,6 +4938,18 @@
           "docsTags": [],
           "default": "'bottom-start'",
           "values": [
+            {
+              "value": "auto",
+              "type": "string"
+            },
+            {
+              "value": "auto-end",
+              "type": "string"
+            },
+            {
+              "value": "auto-start",
+              "type": "string"
+            },
             {
               "value": "bottom",
               "type": "string"
@@ -4925,6 +4962,10 @@
               "value": "bottom-start",
               "type": "string"
             },
+            {
+              "value": "center",
+              "type": "string"
+            },
             {
               "value": "left",
               "type": "string"
@@ -10723,7 +10764,7 @@
         },
         {
           "name": "dropDownConfig",
-          "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: \"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
+          "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
           "mutable": true,
           "reflectToAttr": false,
           "docs": "nano-dropdown config options you can pass to the nested dropdown component",
@@ -10731,50 +10772,7 @@
           "default": "{}",
           "values": [
             {
-              "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: \"top\""
-            },
-            {
-              "value": "top-start",
-              "type": "string"
-            },
-            {
-              "value": "top-end",
-              "type": "string"
-            },
-            {
-              "value": "bottom",
-              "type": "string"
-            },
-            {
-              "value": "bottom-start",
-              "type": "string"
-            },
-            {
-              "value": "bottom-end",
-              "type": "string"
-            },
-            {
-              "value": "right",
-              "type": "string"
-            },
-            {
-              "value": "right-start",
-              "type": "string"
-            },
-            {
-              "value": "right-end",
-              "type": "string"
-            },
-            {
-              "value": "left",
-              "type": "string"
-            },
-            {
-              "value": "left-start",
-              "type": "string"
-            },
-            {
-              "type": "\"left-end\"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }"
+              "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }"
             }
           ],
           "optional": true,
@@ -12430,7 +12428,30 @@
           "setter": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "getPercentageToPixels",
+          "returns": {
+            "type": "Promise<number>",
+            "docs": ""
+          },
+          "signature": "getPercentageToPixels(value: number) => Promise<number>",
+          "parameters": [],
+          "docs": "Utility to convert % to pixels",
+          "docsTags": []
+        },
+        {
+          "name": "getPixelsToPercentage",
+          "returns": {
+            "type": "Promise<number>",
+            "docs": ""
+          },
+          "signature": "getPixelsToPercentage(value: number) => Promise<number>",
+          "parameters": [],
+          "docs": "Utility to convert pixels to % (`position`)",
+          "docsTags": []
+        }
+      ],
       "events": [
         {
           "event": "nanoDragging",
@@ -13452,6 +13473,11 @@
           "annotation": "prop",
           "docs": "defaults to 2rem 2.5rem;"
         },
+        {
+          "name": "--fade-transparency",
+          "annotation": "prop",
+          "docs": "controls the strength of the fade on overflowing tabs, defaults to 0;"
+        },
         {
           "name": "--indicator-color",
           "annotation": "prop",

package/docs-vscode.json

@@ -527,7 +527,7 @@
         },
         {
           "name": "type",
-          "description": "Tweaks the datalist behaviour and linked control semantics and behaviour.\ne.g. 'select' will make the linked input control readonly.",
+          "description": "Tweaks the datalist behaviour and linked control semantics and behaviour.\ne.g. 'select' will make the linked input control `readonly`.",
           "values": [
             {
               "name": "input"
@@ -987,6 +987,15 @@
           "name": "placement",
           "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
           "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "auto-end"
+            },
+            {
+              "name": "auto-start"
+            },
             {
               "name": "bottom"
             },
@@ -996,6 +1005,9 @@
             {
               "name": "bottom-start"
             },
+            {
+              "name": "center"
+            },
             {
               "name": "left"
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -126,5 +126,5 @@
   "peerDependencies": {
     "@stencil/core": "^2.5.0"
   },
-  "gitHead": "e0731e8c65608afaa827aeea6b217a2cb74d7dca"
+  "gitHead": "3bc259ad0d07a38138061b0268ec10baf39d5b1e"
 }