@nanoporetech-digital/components 2.7.0 → 2.10.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-06-06T15:41:19",
+  "timestamp": "2022-06-17T23:51:05",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.12.2",
@@ -1741,6 +1741,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "form",
+          "type": "string",
+          "mutable": false,
+          "attr": "form",
+          "reflectToAttr": false,
+          "docs": "The form element to associate the input with (its form owner). Must be the id of a form.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "indeterminate",
           "type": "boolean",
@@ -1768,6 +1786,7 @@
           "reflectToAttr": true,
           "docs": "This will be true when the control is in an invalid state.\nValidity is determined by the `required` prop. Or if custom validity message is set. @readonly",
           "docsTags": [],
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -1869,6 +1888,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "validityMessage",
+          "type": "string",
+          "mutable": false,
+          "attr": "validity-message",
+          "reflectToAttr": false,
+          "docs": "Current validation message - if any. @readonly",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
         {
           "name": "value",
           "type": "string",
@@ -1938,7 +1975,7 @@
             "type": "Promise<void>",
             "docs": ""
           },
-          "signature": "setError(message: string) => Promise<void>",
+          "signature": "setError(message: string, updateStatus?: boolean) => Promise<void>",
           "parameters": [],
           "docs": "Sets a custom validation message.\nIf `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`",
           "docsTags": []
@@ -1984,7 +2021,14 @@
           "docsTags": []
         }
       ],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "reset",
+          "target": "body",
+          "capture": false,
+          "passive": false
+        }
+      ],
       "styles": [
         {
           "name": "--cb-border-radius",
@@ -2228,7 +2272,7 @@
           "reflectToAttr": false,
           "docs": "When should the field perform validation",
           "docsTags": [],
-          "default": "'submit'",
+          "default": "'submitThenDirty'",
           "values": [
             {
               "value": "dirty",
@@ -2247,6 +2291,25 @@
           "required": false,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "validityMessage",
+          "type": "string",
+          "mutable": false,
+          "attr": "validity-message",
+          "reflectToAttr": false,
+          "docs": "Current validation message - if any. @readonly",
+          "docsTags": [],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
         }
       ],
       "methods": [
@@ -2269,6 +2332,26 @@
               "text": "`{ isValid: boolean, errorMessage: string }`"
             }
           ]
+        },
+        {
+          "name": "showError",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "showError(message: string, optVal?: string) => Promise<void>",
+          "parameters": [],
+          "docs": "Invalidate the field and show a custom error message.\nTo clear the error you will need to re-call this method with an empty string.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "message - the error message to show"
+            },
+            {
+              "name": "param",
+              "text": "optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)"
+            }
+          ]
         }
       ],
       "events": [
@@ -2348,7 +2431,7 @@
         {
           "name": "--label-padding",
           "annotation": "prop",
-          "docs": "space between legend and control. Default var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));"
+          "docs": "space between legend and control. Default var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));"
         }
       ],
       "slots": [
@@ -3272,7 +3355,7 @@
           "reflectToAttr": false,
           "docs": "When should the field perform validation",
           "docsTags": [],
-          "default": "'submit'",
+          "default": "'submitThenDirty'",
           "values": [
             {
               "value": "dirty",
@@ -3292,6 +3375,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "validityMessage",
+          "type": "string",
+          "mutable": false,
+          "attr": "validity-message",
+          "reflectToAttr": false,
+          "docs": "Current validation message - if any. @readonly",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
         {
           "name": "value",
           "type": "string",
@@ -4107,6 +4208,25 @@
       ],
       "usage": {},
       "props": [
+        {
+          "name": "hoist",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "hoist",
+          "reflectToAttr": false,
+          "docs": "Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...`",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "label",
           "type": "string",
@@ -5210,6 +5330,224 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/field-validator/field-validator.tsx",
+      "encapsulation": "none",
+      "tag": "nano-field-validator",
+      "readme": "# nano-field-validator\n\n\n",
+      "docs": "A toolbox for `nano-...` form fields and form validation.\n\n- Easy to add validation accross field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n- Easy access to whole form and individual field validity states\n- Easy access to form data payload\n- Scroll to invalid field on submit",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "dirty",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "dirty",
+          "reflectToAttr": true,
+          "docs": "Returns true if any nested fields have been changed @readonly",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
+        {
+          "name": "payload",
+          "type": "ValueStore",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "The current form payload as a reactive store. @readonly",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "ValueStore"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
+        {
+          "name": "scrollToInvalid",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "scroll-to-invalid",
+          "reflectToAttr": false,
+          "docs": "Tries to scroll to the first invalid field on submit",
+          "docsTags": [],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "showValidation",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "show-validation",
+          "reflectToAttr": false,
+          "docs": "Returns true if validation errors will be displayed to the user",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
+        {
+          "name": "valid",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "valid",
+          "reflectToAttr": true,
+          "docs": "Returns true if all the nested fields are currently valid @readonly",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
+        {
+          "name": "validateOn",
+          "type": "\"dirty\" | \"submit\" | \"submitThenDirty\"",
+          "mutable": true,
+          "attr": "validate-on",
+          "reflectToAttr": false,
+          "docs": "When should the fields perform validation. Will override / sync all nested `nano-...` controls",
+          "docsTags": [],
+          "default": "'submitThenDirty'",
+          "values": [
+            {
+              "value": "dirty",
+              "type": "string"
+            },
+            {
+              "value": "submit",
+              "type": "string"
+            },
+            {
+              "value": "submitThenDirty",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "validation",
+          "type": "(field: string, value: string, fields: ValueStore) => { [key: string]: { msg: string; valid?: boolean; }; }",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "A validation callback method.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "field - The field name currently being evaluated"
+            },
+            {
+              "name": "param",
+              "text": "value - The value of the field currently being evaluated"
+            },
+            {
+              "name": "param",
+              "text": "fields - an array of all currently observered form fields and values"
+            },
+            {
+              "name": "returns",
+              "text": "field names mapped to an object of status message and validity e.g.\n```js\n{field1: {msg: `This is invalid!`}, field2: {msg: `This is valid!`, valid: true}}\n```"
+            }
+          ],
+          "values": [
+            {
+              "type": "(field: string, value: string, fields: ValueStore) => { [key: string]: { msg: string; valid?: boolean; }; }"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "validationState",
+          "type": "ValidationState[]",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Get the current validation state of all form fields. @readonly\n```\n{\nfields: NanoFormEles[];\nvalid: boolean;\nvalidityMessage: string;\ndirty: boolean;\nname: string | number;\nvalue: any;\n}[]\n```",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "ValidationState[]"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "nanoInvalid",
+          "detail": "any",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fire on invalid form submission attempt",
+          "docsTags": []
+        },
+        {
+          "event": "nanoPayloadChange",
+          "detail": "ValueStore",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired whenever the payload changes",
+          "docsTags": []
+        },
+        {
+          "event": "nanoSubmit",
+          "detail": "any",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired on valid form submission.\nNote: if you wish to prevent a form from submitting, instead\nof using / preventing the native `submit` event, use this event\n```js\nele.addEventListener('nanoSubmit', (e) => {\n  e.preventDefault()\n})\n```",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "./src/components/file-upload/file-upload.tsx",
       "encapsulation": "scoped",
@@ -5315,6 +5653,24 @@
           "getter": true,
           "setter": false
         },
+        {
+          "name": "form",
+          "type": "string",
+          "mutable": false,
+          "attr": "form",
+          "reflectToAttr": false,
+          "docs": "The form element to associate with this input (its form owner). Must be the id of a form.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "hideLabel",
           "type": "boolean",
@@ -5512,6 +5868,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "validityMessage",
+          "type": "string",
+          "mutable": false,
+          "attr": "validity-message",
+          "reflectToAttr": false,
+          "docs": "Current validation message - if any. @readonly",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
         {
           "name": "value",
           "type": "string",
@@ -5646,6 +6020,12 @@
           "target": "window",
           "capture": false,
           "passive": false
+        },
+        {
+          "event": "reset",
+          "target": "body",
+          "capture": false,
+          "passive": false
         }
       ],
       "styles": [
@@ -5757,7 +6137,7 @@
         {
           "name": "--label-padding",
           "annotation": "prop",
-          "docs": "Default value var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));"
+          "docs": "Default value var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));"
         }
       ],
       "slots": [],
@@ -5898,7 +6278,7 @@
           "mutable": false,
           "attr": "env",
           "reflectToAttr": false,
-          "docs": "Connect to local, dev, test or prod MyAccount\nenvironments to retrieve global nav / sso data",
+          "docs": "Connect to local, dev, test or prod MyAccount\nenvironments to retrieve global nav / sso data.\nAlternatively, you can use the `ssoDataUrl` prop.",
           "docsTags": [],
           "default": "'prod'",
           "values": [
@@ -5919,7 +6299,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
@@ -6148,6 +6528,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "ssoDataUrl",
+          "type": "string",
+          "mutable": false,
+          "attr": "sso-data-url",
+          "reflectToAttr": false,
+          "docs": "A base url to retrieve global nav / sso data.\n`nav_bar_data.json` will be appended to this url.\nAn alternative to the pre-defined `env` urls",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "ssoRedirect",
           "type": "string",
@@ -7036,7 +7434,7 @@
               "type": "string"
             }
           ],
-          "optional": true,
+          "optional": false,
           "required": false,
           "getter": false,
           "setter": false
@@ -7743,7 +8141,7 @@
       "encapsulation": "scoped",
       "tag": "nano-input",
       "readme": "# nano-input (extra examples and methods)\n\n### Validation\n\nShow custom html5 validation errors (use with [grid](/site/components/grid/readme.html) for inline inputs)\n\n```html\n<nano-grid l-cols=\"3\">\n  <nano-input validate-on=\"dirty\" required label=\"Error on dirty\" type=\"email\"></nano-input>\n  <nano-input validate-on=\"submit\" required label=\"Error on submit\" type=\"email\"></nano-input>\n  <nano-input validate-on=\"submitThenDirty\" required label=\"Error on submit then dirty\" type=\"email\"></nano-input>\n</nano-grid>\n```\n\nYou can save time on existing projects and just wrap inputs\n\n```html\n<nano-input float-label clear-input validate-on=\"dirty\">\n  <div class=\"whatever_wrappers_you_may_have\">\n    <label for=\"mouse\">Favourite food:</label>\n  </div>\n  <div class=\"whatever_wrappers_you_may_have\">\n    <input type=\"text\" id=\"mouse\" value=\"chips\" required>\n  </div><button type=\"submit\">Save</button>\n</nano-input>\n```\n\n### Invalidate and show custom error\n\n```js\nfunction showError() {\n  let input = document.querySelector('#userName');\n  input.showError('User name already taken. Please choose another')\n  // clear error\n  input.showError('')\n}\n```\n\n<br>",
-      "docs": "The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), but works great on desktop devices and integrates with the keyboard on mobile devices.\n\nIt is meant for text type inputs only, such as \"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", and \"url\". It supports all standard text input events including keyup, keydown, keypress, and more.",
+      "docs": "The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), but works great on desktop devices and integrates with the keyboard on mobile devices.\n\nIt is meant for text type inputs only, such as \"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", and \"url\". It supports all standard text input events including keyup, keydown, keypress, and more.\nThe default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)",
       "docsTags": [
         {
           "name": "slot",
@@ -7769,6 +8167,10 @@
           "name": "slot",
           "text": "helper - helper text to accompany the form field underneath."
         },
+        {
+          "name": "slot",
+          "text": "helper-end - helper text to accompany the form field on the side."
+        },
         {
           "name": "slot",
           "text": "- can be used with a `nano-datalist`. See the `nano-datalist` docs for more information"
@@ -8044,7 +8446,7 @@
           "mutable": false,
           "attr": "form",
           "reflectToAttr": false,
-          "docs": "The form element to associate the select with (its form owner). Must be the id of a form.",
+          "docs": "The form element to associate the input with (its form owner). Must be the id of a form.",
           "docsTags": [],
           "values": [
             {
@@ -8487,7 +8889,7 @@
           "type": "\"date\" | \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"time\" | \"url\"",
           "mutable": false,
           "attr": "type",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "The type of control to display. The default type is text.",
           "docsTags": [],
           "default": "'text'",
@@ -8546,7 +8948,7 @@
           "reflectToAttr": false,
           "docs": "When should the field perform validation",
           "docsTags": [],
-          "default": "'submit'",
+          "default": "'submitThenDirty'",
           "values": [
             {
               "value": "dirty",
@@ -8566,6 +8968,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "validityMessage",
+          "type": "string",
+          "mutable": false,
+          "attr": "validity-message",
+          "reflectToAttr": false,
+          "docs": "Current validation message - if any. @readonly",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
         {
           "name": "value",
           "type": "string",
@@ -8841,7 +9261,7 @@
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));"
+          "docs": "defaults to var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));"
         },
         {
           "name": "--padding-end",
@@ -8892,6 +9312,10 @@
           "name": "helper",
           "docs": "helper text to accompany the form field underneath."
         },
+        {
+          "name": "helper-end",
+          "docs": "helper text to accompany the form field on the side."
+        },
         {
           "name": "label",
           "docs": "if you do not set a label attribute, you can use this slot for more complex markup"
@@ -10624,6 +11048,10 @@
           "name": "slot",
           "text": "helper - helper text to accompany the form field underneath."
         },
+        {
+          "name": "slot",
+          "text": "helper-end - helper text to accompany the form field on the side."
+        },
         {
           "name": "slot",
           "text": "down-arrow - use this to replace the default down arrow"
@@ -11106,7 +11534,7 @@
           "reflectToAttr": false,
           "docs": "When should the field perform validation",
           "docsTags": [],
-          "default": "'submit'",
+          "default": "'submitThenDirty'",
           "values": [
             {
               "value": "dirty",
@@ -11126,6 +11554,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "validityMessage",
+          "type": "string",
+          "mutable": false,
+          "attr": "validity-message",
+          "reflectToAttr": false,
+          "docs": "Current validation message - if any. @readonly",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
         {
           "name": "value",
           "type": "string | string[]",
@@ -11257,6 +11703,12 @@
         }
       ],
       "listeners": [
+        {
+          "event": "reset",
+          "target": "body",
+          "capture": false,
+          "passive": false
+        },
         {
           "event": "mousedown",
           "target": "body",
@@ -11398,7 +11850,7 @@
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));"
+          "docs": "defaults to var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));"
         },
         {
           "name": "--padding-end",
@@ -11453,6 +11905,10 @@
           "name": "helper",
           "docs": "helper text to accompany the form field underneath."
         },
+        {
+          "name": "helper-end",
+          "docs": "helper text to accompany the form field on the side."
+        },
         {
           "name": "label",
           "docs": "if you do not set a label attribute, you can use this slot for more complex markup"
@@ -12567,7 +13023,7 @@
       }
     },
     {
-      "filePath": "./src/components/sticky/sticker.tsx",
+      "filePath": "./src/components/sticker/sticker.tsx",
       "encapsulation": "shadow",
       "tag": "nano-sticker",
       "readme": "# nano-sticker-surface\n\n\n",