@nanoporetech-digital/components 2.9.0 → 2.10.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-06-09T09:27:21",
+  "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": [],
@@ -7054,7 +7434,7 @@
               "type": "string"
             }
           ],
-          "optional": true,
+          "optional": false,
           "required": false,
           "getter": false,
           "setter": false
@@ -8066,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": [
             {
@@ -8568,7 +8948,7 @@
           "reflectToAttr": false,
           "docs": "When should the field perform validation",
           "docsTags": [],
-          "default": "'submit'",
+          "default": "'submitThenDirty'",
           "values": [
             {
               "value": "dirty",
@@ -8588,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",
@@ -8863,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",
@@ -11136,7 +11534,7 @@
           "reflectToAttr": false,
           "docs": "When should the field perform validation",
           "docsTags": [],
-          "default": "'submit'",
+          "default": "'submitThenDirty'",
           "values": [
             {
               "value": "dirty",
@@ -11156,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[]",
@@ -11287,6 +11703,12 @@
         }
       ],
       "listeners": [
+        {
+          "event": "reset",
+          "target": "body",
+          "capture": false,
+          "passive": false
+        },
         {
           "event": "mousedown",
           "target": "body",
@@ -11428,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",
@@ -12601,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",