@nanoporetech-digital/components 2.4.0 → 2.7.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-05-23T09:45:24",
+  "timestamp": "2022-06-06T15:41:19",
   "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'",
@@ -2024,7 +2024,7 @@
         {
           "name": "--control-invalid-style",
           "annotation": "prop",
-          "docs": "Control box-shadow when invalid. Defaults to to var(--nano-control-focus-shadow, 0 0 0 0.1875rem #fac6c3);"
+          "docs": "Control box-shadow when invalid. Defaults to to var(--nano-control-focus-shadow, 0 0 0 0.1875rem #e4e6e8);"
         },
         {
           "name": "--control-padding",
@@ -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"
@@ -5651,7 +5692,7 @@
         {
           "name": "--drop-bg--invalid",
           "annotation": "prop",
-          "docs": "Default value var(--nano-input-background-color, #fee8de);"
+          "docs": "Default value var(--nano-input-background-color, white);"
         },
         {
           "name": "--drop-border--invalid",
@@ -8710,7 +8751,7 @@
         {
           "name": "--input-bg-color--invalid",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-background-color, #fee8de);"
+          "docs": "defaults to var(--nano-input-background-color, white);"
         },
         {
           "name": "--input-border-radius",
@@ -8730,17 +8771,17 @@
         {
           "name": "--input-border-style--invalid",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #fac6c3);"
+          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);"
         },
         {
           "name": "--input-border-style--invalid-focus",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);"
+          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);"
         },
         {
           "name": "--input-border-width",
           "annotation": "prop",
-          "docs": "defaults to var(--input-border-width-sh, var(--nano-input-border-width, 2px));"
+          "docs": "defaults to var(--input-border-width-sh, var(--nano-input-border-width, 1px));"
         },
         {
           "name": "--input-font-size",
@@ -8790,7 +8831,7 @@
         {
           "name": "--multi-input-value-border",
           "annotation": "prop",
-          "docs": "Tag / multivalue border. defaults to var(--nano-input-tag-color, #90c6e7);"
+          "docs": "Tag / multivalue border. defaults to var(--nano-input-tag-color, #badcf0);"
         },
         {
           "name": "--multi-input-value-text-color",
@@ -9349,6 +9390,25 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "notification",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "notification",
+          "reflectToAttr": false,
+          "docs": "Will show an indicator badge - only when placed in a nano-menu-draw",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "open",
           "type": "boolean",
@@ -10723,7 +10783,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 +10791,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,
@@ -11291,7 +11308,7 @@
         {
           "name": "--input-bg-color--invalid",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-background-color, #fee8de);"
+          "docs": "defaults to var(--nano-input-background-color, white);"
         },
         {
           "name": "--input-border-radius",
@@ -11311,17 +11328,17 @@
         {
           "name": "--input-border-style--invalid",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #fac6c3);"
+          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);"
         },
         {
           "name": "--input-border-style--invalid-focus",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);"
+          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);"
         },
         {
           "name": "--input-border-width",
           "annotation": "prop",
-          "docs": "defaults to var(--input-border-width-sh, var(--nano-input-border-width, 2px));"
+          "docs": "defaults to var(--input-border-width-sh, var(--nano-input-border-width, 1px));"
         },
         {
           "name": "--input-font-size",
@@ -11371,7 +11388,7 @@
         {
           "name": "--multi-input-value-border",
           "annotation": "prop",
-          "docs": "Tag / multivalue border. defaults to var(--nano-input-tag-color, #90c6e7);"
+          "docs": "Tag / multivalue border. defaults to var(--nano-input-tag-color, #badcf0);"
         },
         {
           "name": "--multi-input-value-text-color",
@@ -12430,7 +12447,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",

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"
             },
@@ -1861,6 +1873,10 @@
           "name": "href",
           "description": "Href to link to"
         },
+        {
+          "name": "notification",
+          "description": "Will show an indicator badge - only when placed in a nano-menu-draw"
+        },
         {
           "name": "open",
           "description": "Whether a secondary menu should be or is currently open"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "2.4.0",
+  "version": "2.7.0",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -43,7 +43,8 @@
     "prettier.base": "prettier \"./{src,jest}/**/*.{ts,tsx,js,jsx}\"",
     "test": "run-p themes.prod test.all.base",
     "test.ci": "run-p themes.prod test.all.base",
-    "test.spec": "stencil test --spec --max-workers=2 --watch --config='./stencil.config.test.ts'",
+    "test.spec": "stencil test --spec --watch --config='./stencil.config.test.ts'",
+    "test.e2e": "stencil test --e2e --max-workers=1 --watch --config='./stencil.config.test.ts'",
     "test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec --config='./stencil.config.test.ts'",
     "test.watch": "run-s themes.prod test.all.watch",
     "test.all.watch": "stencil test --spec --e2e --watch --bail --config='./stencil.config.test.ts'",
@@ -126,5 +127,5 @@
   "peerDependencies": {
     "@stencil/core": "^2.5.0"
   },
-  "gitHead": "dd6e209e48f83932252ea8317b123c714355fb3e"
+  "gitHead": "219299cbd1bd259889c341a94bf42d9998786f94"
 }

package/dist/cjs/form-control-3bc82e3e.js.map

@@ -1 +0,0 @@
-{"file":"form-control-3bc82e3e.js","mappings":"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","names":["h"],"sources":["./src/components/form-control/form-control.tsx"],"sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"placeholder-as-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ label: true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"label-placeholder\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n  } = props;\n  const isLegacy = !document.head.attachShadow;\n\n  return [\n    !floatLabel ? renderLabel({ ...props }) : '',\n    <div\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        rtl,\n        legacy: isLegacy,\n        input: true,\n        textarea: type === 'textarea',\n      }}\n    >\n      {floatLabel && renderLabel({ ...props, rtl })}\n      {children}\n    </div>,\n    showInlineError || hasHelperSlot ? (\n      <div class=\"more\" id={moreId}>\n        {!!showInlineError ? <div class=\"error\">{errorMessage}</div> : ''}\n        <div class=\"helper\">\n          <slot name=\"helper\" />\n        </div>\n      </div>\n    ) : (\n      ''\n    ),\n  ];\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"native-input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon input-clear-icon\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"],"version":3}