@nanoporetech-digital/components 2.9.0 → 2.10.0

package/dist/collection/components/field-validator/field-validator.js

@@ -0,0 +1,577 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { Component, Prop, h, Host, Element, State, Watch, Event, } from '@stencil/core';
+import { createStore } from '@stencil/store';
+/**
+ * A toolbox for `nano-...` form fields and form validation.
+ *
+ * - Easy to add validation accross field dependencies - e.g. "When Field1 contains '123' Field2 must contain '456'"
+ * - Easy access to whole form and individual field validity states
+ * - Easy access to form data payload
+ * - Scroll to invalid field on submit
+ */
+export class FieldValidator {
+  constructor() {
+    this.submitted = false;
+    this.fields = [];
+    // annoyingly, whenever we attempt to checkValidty it fires `invalid` events.
+    // this is used to prevent infinite loops / multiple calls
+    this.internalValidate = false;
+    // Public API
+    /** When should the fields perform validation. Will override / sync all nested `nano-...` controls */
+    this.validateOn = 'submitThenDirty';
+    /** Tries to scroll to the first invalid field on submit */
+    this.scrollToInvalid = true;
+    this._dirty = false;
+    // Event handlers
+    /** Fired whenever store values change and potentially checks validity */
+    this.handleStoreChange = async (_key, _newVal) => {
+      if (this.validateOn === 'dirty' && this.dirty) {
+        this.internalValidate = true;
+        await this.validateAllFields();
+        this._valid = this.activeForm.checkValidity();
+        this.internalValidate = false;
+      }
+      this.nanoPayloadChange.emit(this.store.state);
+    };
+    /** Handles field value changes and passes to store */
+    this.handleFieldChange = (ev) => {
+      this._dirty = true;
+      this.setFieldValue([ev.target]);
+    };
+    /** Handles default field validation events */
+    this.handleFormInvalid = async (ev) => {
+      ev.preventDefault();
+      this._valid = false;
+      if (this.internalValidate)
+        return;
+      if (this.validateOn === 'submitThenDirty')
+        this.validateOn = 'dirty';
+      this.submitted = true;
+      await this.validateAllFields();
+      // kinda insane...but if we're only validating on submit, then if the form is currently
+      // in an invalid state, when submitting, it will fire an invalid event and not
+      // submit the form. So let's test to make sure it is really invalid, and submit if not
+      if (this.validateOn === 'submit') {
+        this.internalValidate = true;
+        this._valid = this.activeForm.checkValidity();
+        this.internalValidate = false;
+        if (this._valid) {
+          this.submitForm();
+          return;
+        }
+      }
+      this.scrollToFirstInvalid();
+      this.nanoInvalid.emit();
+    };
+    /** stops default form submission, checks if valid, then submits manually  */
+    this.handleSubmit = async (e) => {
+      e.preventDefault();
+      if (this.validateOn === 'submitThenDirty')
+        this.validateOn = 'dirty';
+      this.submitted = true;
+      await this.validateAllFields();
+      this.internalValidate = true;
+      this._valid = this.activeForm.checkValidity();
+      this.internalValidate = false;
+      if (!this._valid) {
+        this.scrollToFirstInvalid();
+        return;
+      }
+      this.submitForm();
+    };
+  }
+  userFormChange() {
+    if (!!this.userForm)
+      this.activeForm = this.userForm;
+  }
+  get activeForm() {
+    return this._activeForm;
+  }
+  set activeForm(form) {
+    if (this._activeForm)
+      this._activeForm.removeEventListener('invalid', this.handleFormInvalid, true);
+    if (form)
+      form.addEventListener('invalid', this.handleFormInvalid, true);
+    this._activeForm = form;
+  }
+  /** Sync up validateOn with all fields */
+  validateOnChange() {
+    this.fields.forEach((field) => {
+      if (field.tagName === 'NANO-CHECKBOX') {
+        const cbg = field.closest('nano-checkbox-group');
+        if (cbg)
+          cbg.validateOn = this.validateOn;
+      }
+      else {
+        field.validateOn =
+          this.validateOn;
+      }
+    });
+  }
+  /** Returns true if any nested fields have been changed @readonly */
+  get dirty() {
+    return this._dirty;
+  }
+  /** Returns true if all the nested fields are currently valid @readonly */
+  get valid() {
+    return this._valid;
+  }
+  /** The current form payload as a reactive store. @readonly */
+  get payload() {
+    return this.store.state;
+  }
+  /** Returns true if validation errors will be displayed to the user */
+  get showValidation() {
+    return (this.validateOn === 'dirty' && this.dirty) || this.submitted;
+  }
+  /** Get the current validation state of all form fields. @readonly
+   * ```
+   {
+      fields: NanoFormEles[];
+      valid: boolean;
+      validityMessage: string;
+      dirty: boolean;
+      name: string | number;
+      value: any;
+    }[]
+  ```
+   */
+  get validationState() {
+    const validationState = [];
+    this.fields.forEach(async (field) => {
+      const found = validationState.find((v) => v.name === field.name);
+      if (found) {
+        found.validityMessage = field.validityMessage.length
+          ? field.validityMessage
+          : found.validityMessage;
+        if (!found.fields.find((f) => f === field))
+          found.fields.push(field);
+        if (found.valid && field.invalid)
+          found.valid = false;
+        return;
+      }
+      validationState.push({
+        fields: [field],
+        name: field.name,
+        valid: !field.invalid,
+        value: this.store.state[field.name],
+        dirty: false,
+        validityMessage: field.validityMessage,
+      });
+    });
+    return validationState;
+  }
+  // private methods
+  attachSlotObserver() {
+    if (!!this.mo)
+      return;
+    const mo = (this.mo = new MutationObserver((_entries) => {
+      const form = this.host.querySelector('form');
+      if (form !== this.activeForm)
+        this.activeForm = form;
+      this.setupFields();
+    }));
+    mo.observe(this.host, {
+      childList: true,
+      attributes: true,
+      attributeFilter: ['name'],
+      subtree: true,
+    });
+  }
+  /** Checks for new `nano-...` fields and adds them to our watch array and value store */
+  setupFields() {
+    let fields = Array.from(this.host.querySelectorAll(`
+        nano-input,
+        nano-select,
+        nano-file-upload,
+        nano-date-input,
+        nano-checkbox
+      `));
+    fields = fields.filter((f) => !!f.name && !!f.name.length);
+    // do we have any currently un-watched fields?
+    if (!fields.filter((f) => !this.fields.includes(f)).length)
+      return;
+    // setup the initial store state / refresh on new fields
+    this.fields = fields;
+    this.validateOnChange();
+    this.setFieldValue(this.fields);
+    this.nanoPayloadChange.emit(this.store.state);
+  }
+  /** Loops through all `nano-...` fields and extracts their values into our store */
+  setFieldValue(fields) {
+    fields.forEach((field) => {
+      const fieldName = field.name;
+      if (!fieldName.length)
+        return;
+      switch (field.tagName) {
+        case 'NANO-CHECKBOX':
+          let cb = field;
+          if (cb.type === 'radio' ||
+            cb.type === 'segment' ||
+            cb.type === 'segment-pill') {
+            if (cb.checked)
+              this.store.state[fieldName] = cb.value;
+            else if (!cb.checked && cb.value === this.store.state[fieldName])
+              this.store.state[fieldName] = '';
+          }
+          else if (this.fields.filter((f) => f.name === fieldName && f.tagName === 'NANO-CHECKBOX').length > 1) {
+            const currentArr = Array.isArray(this.store.state[fieldName])
+              ? this.store.state[fieldName]
+              : [];
+            if (cb.checked) {
+              if (!this.store.state[fieldName].includes(cb.value)) {
+                this.store.state[fieldName] = [...currentArr, cb.value];
+              }
+            }
+            else {
+              this.store.state[fieldName] = currentArr.filter((v) => v !== cb.value);
+            }
+          }
+          else
+            this.store.state[fieldName] = cb.value;
+          break;
+        case 'NANO-FILE-UPLOAD':
+          this.store.state[fieldName] = field.files;
+          break;
+        default:
+          this.store.state[fieldName] = field.value;
+          break;
+      }
+    });
+  }
+  /** Checks for user defined validations */
+  async validate(key, newVal) {
+    if (!this.validation)
+      return;
+    const res = this.validation(key, newVal, this.store.state);
+    // no nothing - return
+    if (!res)
+      return;
+    // stencil public methods are async
+    // so we must to coerce our validation
+    // collection loop into a promise
+    await Promise.all(Object.entries(res).map(async ([key, o]) => {
+      // switch on/off validation messages
+      const field = this.fields.find((f) => f.name === key);
+      let validityTarget = field;
+      if (field.tagName === 'NANO-CHECKBOX') {
+        const cbg = field.closest('nano-checkbox-group');
+        validityTarget = cbg || field;
+      }
+      // status is now valid - clear the error
+      if (validityTarget.validityMessage === o.msg && o.valid)
+        await this.setFieldError(validityTarget, '');
+      // status is invalid. Set the error
+      else if (!o.valid) {
+        await this.setFieldError(validityTarget, o.msg);
+      }
+    }));
+  }
+  /**
+   * Utility to smooth out setting error messages
+   * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)
+   * @param field
+   * @param msg
+   */
+  async setFieldError(field, msg) {
+    if (field['showError'])
+      await field.showError(msg);
+    else
+      await field.setError(msg);
+  }
+  /** Loops through all store entries and checks field validity */
+  async validateAllFields() {
+    // This forces our loop to `await` and finish sequentially ... silly async stencil methods
+    await Object.entries(this.store.state).reduce(async (memo, [key, value]) => {
+      await memo;
+      await this.validate(key, value);
+    }, undefined);
+  }
+  scrollToFirstInvalid() {
+    if (!this.scrollToInvalid)
+      return;
+    setTimeout(() => {
+      const invalidField = this.validationState.find((f) => !f.valid);
+      if (!invalidField)
+        return;
+      invalidField.fields[0].scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
+    }, 200);
+  }
+  submitForm() {
+    const nanoSubmit = this.nanoSubmit.emit();
+    if (nanoSubmit.defaultPrevented)
+      return;
+    this.activeForm.submit();
+  }
+  connectedCallback() {
+    this.userForm = this.host.querySelector('form');
+  }
+  componentDidLoad() {
+    requestAnimationFrame(() => {
+      this.store = createStore({});
+      this.setupFields();
+      this.attachSlotObserver();
+      this.store.on('set', (key, value) => this.handleStoreChange(key, value));
+      this.host.addEventListener('nanoChange', this.handleFieldChange);
+      this.host.addEventListener('submit', this.handleSubmit);
+    });
+  }
+  disconnectedCallback() {
+    if (this.mo)
+      this.mo.disconnect();
+    this.store.dispose();
+    this.host.removeEventListener('nanoChange', this.handleFieldChange);
+    this.host.removeEventListener('submit', this.handleSubmit);
+    if (this.activeForm)
+      this.activeForm.removeEventListener('invalid', this.handleFormInvalid, true);
+  }
+  render() {
+    return (h(Host, null,
+      this.userForm && h("slot", null),
+      !this.userForm && (h("form", { ref: (f) => (this.activeForm = f) },
+        h("slot", null)))));
+  }
+  static get is() { return "nano-field-validator"; }
+  static get properties() { return {
+    "validateOn": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "'dirty' | 'submit' | 'submitThenDirty'",
+        "resolved": "\"dirty\" | \"submit\" | \"submitThenDirty\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When should the fields perform validation. Will override / sync all nested `nano-...` controls"
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "validate-on",
+      "reflect": false,
+      "defaultValue": "'submitThenDirty'"
+    },
+    "scrollToInvalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tries to scroll to the first invalid field on submit"
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "scroll-to-invalid",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "dirty": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Returns true if any nested fields have been changed @readonly"
+      },
+      "getter": true,
+      "setter": false,
+      "attribute": "dirty",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "valid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Returns true if all the nested fields are currently valid @readonly"
+      },
+      "getter": true,
+      "setter": false,
+      "attribute": "valid",
+      "reflect": true
+    },
+    "payload": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ValueStore",
+        "resolved": "ValueStore",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current form payload as a reactive store. @readonly"
+      },
+      "getter": true,
+      "setter": false
+    },
+    "showValidation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Returns true if validation errors will be displayed to the user"
+      },
+      "getter": true,
+      "setter": false,
+      "attribute": "show-validation",
+      "reflect": false
+    },
+    "validationState": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ValidationState[]",
+        "resolved": "ValidationState[]",
+        "references": {
+          "ValidationState": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "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```"
+      },
+      "getter": true,
+      "setter": false
+    },
+    "validation": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(\n    field: string,\n    value: string,\n    fields: ValueStore\n  ) => { [key: string]: { msg: string; valid?: boolean } }",
+        "resolved": "(field: string, value: string, fields: ValueStore) => { [key: string]: { msg: string; valid?: boolean; }; }",
+        "references": {
+          "ValueStore": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "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```"
+          }],
+        "text": "A validation callback method."
+      },
+      "getter": false,
+      "setter": false
+    }
+  }; }
+  static get states() { return {
+    "store": {},
+    "userForm": {},
+    "submitted": {},
+    "_dirty": {},
+    "_valid": {}
+  }; }
+  static get events() { return [{
+      "method": "nanoPayloadChange",
+      "name": "nanoPayloadChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired whenever the payload changes"
+      },
+      "complexType": {
+        "original": "ValueStore",
+        "resolved": "ValueStore",
+        "references": {
+          "ValueStore": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "nanoSubmit",
+      "name": "nanoSubmit",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "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```"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "nanoInvalid",
+      "name": "nanoInvalid",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fire on invalid form submission attempt"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "userForm",
+      "methodName": "userFormChange"
+    }, {
+      "propName": "validateOn",
+      "methodName": "validateOnChange"
+    }]; }
+}
+//# sourceMappingURL=field-validator.js.map

package/dist/collection/components/field-validator/field-validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-validator.js","sourceRoot":"","sources":["../../../src/components/field-validator/field-validator.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Element,\n  ComponentInterface,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { createStore, ObservableMap } from '@stencil/store';\n\ntype NanoFormEles =\n  | HTMLNanoInputElement\n  | HTMLNanoCheckboxElement\n  | HTMLNanoSelectElement\n  | HTMLNanoDateInputElement\n  | HTMLNanoFileUploadElement;\ntype NanoEvent = CustomEvent & { target: NanoFormEles };\ninterface ValueStore {\n  [key: string]: any;\n}\n\ninterface ValidationState {\n  fields: NanoFormEles[];\n  valid: boolean;\n  validityMessage: string;\n  dirty: boolean;\n  name: string | number;\n  value: any;\n}\n\n/**\n * 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\n */\n@Component({\n  tag: 'nano-field-validator',\n})\nexport class FieldValidator implements ComponentInterface {\n  // Internal State\n\n  @Element() host: HTMLNanoFieldValidatorElement;\n  @State() store: ObservableMap<ValueStore>;\n  @State() userForm: HTMLFormElement;\n  @State() submitted = false;\n  @Watch('userForm')\n  userFormChange() {\n    if (!!this.userForm) this.activeForm = this.userForm;\n  }\n\n  private get activeForm() {\n    return this._activeForm;\n  }\n  private set activeForm(form: HTMLFormElement) {\n    if (this._activeForm)\n      this._activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n    if (form) form.addEventListener('invalid', this.handleFormInvalid, true);\n    this._activeForm = form;\n  }\n  private _activeForm: HTMLFormElement;\n  private mo: MutationObserver;\n  private fields: NanoFormEles[] = [];\n  // annoyingly, whenever we attempt to checkValidty it fires `invalid` events.\n  // this is used to prevent infinite loops / multiple calls\n  private internalValidate = false;\n\n  // Public API\n\n  /** When should the fields perform validation. Will override / sync all nested `nano-...` controls */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /** Sync up validateOn with all fields */\n  @Watch('validateOn')\n  validateOnChange() {\n    this.fields.forEach((field) => {\n      if (field.tagName === 'NANO-CHECKBOX') {\n        const cbg = field.closest('nano-checkbox-group');\n        if (cbg) cbg.validateOn = this.validateOn;\n      } else {\n        (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).validateOn =\n          this.validateOn;\n      }\n    });\n  }\n\n  /** Tries to scroll to the first invalid field on submit */\n  @Prop() scrollToInvalid = true;\n\n  /** Returns true if any nested fields have been changed @readonly */\n  @Prop({ reflect: true })\n  get dirty() {\n    return this._dirty;\n  }\n  @State() _dirty = false;\n\n  /** Returns true if all the nested fields are currently valid @readonly */\n  @Prop({ reflect: true })\n  get valid() {\n    return this._valid;\n  }\n  @State() _valid: boolean;\n\n  /** The current form payload as a reactive store. @readonly */\n  @Prop()\n  get payload() {\n    return this.store.state;\n  }\n\n  /** Returns true if validation errors will be displayed to the user */\n  @Prop()\n  get showValidation() {\n    return (this.validateOn === 'dirty' && this.dirty) || this.submitted;\n  }\n\n  /** Get the current validation state of all form fields. @readonly\n   * ```\n   {\n      fields: NanoFormEles[];\n      valid: boolean;\n      validityMessage: string;\n      dirty: boolean;\n      name: string | number;\n      value: any;\n    }[]\n  ```\n   */\n  @Prop() get validationState(): ValidationState[] {\n    const validationState: ValidationState[] = [];\n\n    this.fields.forEach(async (field) => {\n      const found = validationState.find((v) => v.name === field.name);\n\n      if (found) {\n        found.validityMessage = field.validityMessage.length\n          ? field.validityMessage\n          : found.validityMessage;\n        if (!found.fields.find((f) => f === field)) found.fields.push(field);\n        if (found.valid && field.invalid) found.valid = false;\n        return;\n      }\n\n      validationState.push({\n        fields: [field],\n        name: field.name,\n        valid: !field.invalid,\n        value: this.store.state[field.name],\n        dirty: false,\n        validityMessage: field.validityMessage,\n      });\n    });\n    return validationState;\n  }\n\n  /** A validation callback method.\n   * @param field - The field name currently being evaluated\n   * @param value - The value of the field currently being evaluated\n   * @param fields - an array of all currently observered form fields and values\n   * @returns 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   * ```\n   */\n  @Prop() validation: (\n    field: string,\n    value: string,\n    fields: ValueStore\n  ) => { [key: string]: { msg: string; valid?: boolean } };\n\n  /** Fired whenever the payload changes */\n  @Event() nanoPayloadChange: EventEmitter<ValueStore>;\n\n  /**\n   * Fired on valid form submission.\n   * Note: if you wish to prevent a form from submitting, instead\n   * of using / preventing the native `submit` event, use this event\n   * ```js\n   * ele.addEventListener('nanoSubmit', (e) => {\n   *   e.preventDefault()\n   * })\n   * ```\n   */\n  @Event() nanoSubmit: EventEmitter;\n\n  /** Fire on invalid form submission attempt */\n  @Event() nanoInvalid: EventEmitter;\n\n  // private methods\n\n  private attachSlotObserver() {\n    if (!!this.mo) return;\n    const mo = (this.mo = new MutationObserver((_entries) => {\n      const form = this.host.querySelector('form');\n      if (form !== this.activeForm) this.activeForm = form;\n      this.setupFields();\n    }));\n    mo.observe(this.host, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['name'],\n      subtree: true,\n    });\n  }\n\n  /** Checks for new `nano-...` fields and adds them to our watch array and value store */\n  private setupFields() {\n    let fields = Array.from(\n      this.host.querySelectorAll<NanoFormEles>(`\n        nano-input,\n        nano-select,\n        nano-file-upload,\n        nano-date-input,\n        nano-checkbox\n      `)\n    );\n    fields = fields.filter((f) => !!f.name && !!f.name.length);\n\n    // do we have any currently un-watched fields?\n    if (!fields.filter((f) => !this.fields.includes(f)).length) return;\n\n    // setup the initial store state / refresh on new fields\n    this.fields = fields;\n    this.validateOnChange();\n    this.setFieldValue(this.fields);\n    this.nanoPayloadChange.emit(this.store.state);\n  }\n\n  /** Loops through all `nano-...` fields and extracts their values into our store */\n  private setFieldValue(fields: NanoFormEles[]) {\n    fields.forEach((field) => {\n      const fieldName = field.name;\n      if (!fieldName.length) return;\n\n      switch (field.tagName) {\n        case 'NANO-CHECKBOX':\n          let cb = field as HTMLNanoCheckboxElement;\n          if (\n            cb.type === 'radio' ||\n            cb.type === 'segment' ||\n            cb.type === 'segment-pill'\n          ) {\n            if (cb.checked) this.store.state[fieldName] = cb.value;\n            else if (!cb.checked && cb.value === this.store.state[fieldName])\n              this.store.state[fieldName] = '';\n          } else if (\n            this.fields.filter(\n              (f) => f.name === fieldName && f.tagName === 'NANO-CHECKBOX'\n            ).length > 1\n          ) {\n            const currentArr = Array.isArray(this.store.state[fieldName])\n              ? this.store.state[fieldName]\n              : [];\n            if (cb.checked) {\n              if (!this.store.state[fieldName].includes(cb.value)) {\n                this.store.state[fieldName] = [...currentArr, cb.value];\n              }\n            } else {\n              this.store.state[fieldName] = currentArr.filter(\n                (v) => v !== cb.value\n              );\n            }\n          } else this.store.state[fieldName] = cb.value;\n          break;\n        case 'NANO-FILE-UPLOAD':\n          this.store.state[fieldName] = (\n            field as HTMLNanoFileUploadElement\n          ).files;\n          break;\n        default:\n          this.store.state[fieldName] = field.value;\n          break;\n      }\n    });\n  }\n\n  /** Checks for user defined validations */\n  private async validate(key: string | number, newVal: any) {\n    if (!this.validation) return;\n\n    const res = this.validation(key as string, newVal, this.store.state);\n\n    // no nothing - return\n    if (!res) return;\n\n    // stencil public methods are async\n    // so we must to coerce our validation\n    // collection loop into a promise\n    await Promise.all(\n      Object.entries(res).map(async ([key, o]) => {\n        // switch on/off validation messages\n        const field = this.fields.find((f) => f.name === key);\n        let validityTarget: NanoFormEles | HTMLNanoCheckboxGroupElement = field;\n\n        if (field.tagName === 'NANO-CHECKBOX') {\n          const cbg = field.closest('nano-checkbox-group');\n          validityTarget = cbg || field;\n        }\n\n        // status is now valid - clear the error\n        if (validityTarget.validityMessage === o.msg && o.valid)\n          await this.setFieldError(validityTarget, '');\n        // status is invalid. Set the error\n        else if (!o.valid) {\n          await this.setFieldError(validityTarget, o.msg);\n        }\n      })\n    );\n  }\n\n  /**\n   * Utility to smooth out setting error messages\n   * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)\n   * @param field\n   * @param msg\n   */\n  private async setFieldError(\n    field: NanoFormEles | HTMLNanoCheckboxGroupElement,\n    msg: string\n  ) {\n    if (field['showError'])\n      await (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).showError(\n        msg\n      );\n    else await (field as HTMLNanoCheckboxElement).setError(msg);\n  }\n\n  /** Loops through all store entries and checks field validity */\n  private async validateAllFields() {\n    // This forces our loop to `await` and finish sequentially ... silly async stencil methods\n    await Object.entries(this.store.state).reduce(\n      async (memo, [key, value]) => {\n        await memo;\n        await this.validate(key, value);\n      },\n      undefined as any\n    );\n  }\n\n  private scrollToFirstInvalid() {\n    if (!this.scrollToInvalid) return;\n\n    setTimeout(() => {\n      const invalidField = this.validationState.find((f) => !f.valid);\n      if (!invalidField) return;\n      invalidField.fields[0].scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n    }, 200);\n  }\n\n  private submitForm() {\n    const nanoSubmit = this.nanoSubmit.emit();\n    if (nanoSubmit.defaultPrevented) return;\n    this.activeForm.submit();\n  }\n\n  // Event handlers\n\n  /** Fired whenever store values change and potentially checks validity */\n  private handleStoreChange = async (_key: string | number, _newVal: any) => {\n    if (this.validateOn === 'dirty' && this.dirty) {\n      this.internalValidate = true;\n      await this.validateAllFields();\n      this._valid = this.activeForm.checkValidity();\n      this.internalValidate = false;\n    }\n    this.nanoPayloadChange.emit(this.store.state);\n  };\n\n  /** Handles field value changes and passes to store */\n  private handleFieldChange = (ev: NanoEvent) => {\n    this._dirty = true;\n    this.setFieldValue([ev.target]);\n  };\n\n  /** Handles default field validation events */\n  private handleFormInvalid = async (ev: Event) => {\n    ev.preventDefault();\n    this._valid = false;\n\n    if (this.internalValidate) return;\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n\n    await this.validateAllFields();\n\n    // kinda insane...but if we're only validating on submit, then if the form is currently\n    // in an invalid state, when submitting, it will fire an invalid event and not\n    // submit the form. So let's test to make sure it is really invalid, and submit if not\n    if (this.validateOn === 'submit') {\n      this.internalValidate = true;\n      this._valid = this.activeForm.checkValidity();\n      this.internalValidate = false;\n\n      if (this._valid) {\n        this.submitForm();\n        return;\n      }\n    }\n\n    this.scrollToFirstInvalid();\n    this.nanoInvalid.emit();\n  };\n\n  /** stops default form submission, checks if valid, then submits manually  */\n  private handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n    await this.validateAllFields();\n\n    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    if (!this._valid) {\n      this.scrollToFirstInvalid();\n      return;\n    }\n    this.submitForm();\n  };\n\n  connectedCallback(): void {\n    this.userForm = this.host.querySelector('form');\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.store = createStore<ValueStore>({});\n\n      this.setupFields();\n      this.attachSlotObserver();\n\n      this.store.on('set', (key, value) => this.handleStoreChange(key, value));\n      this.host.addEventListener('nanoChange', this.handleFieldChange);\n      this.host.addEventListener('submit', this.handleSubmit);\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    this.store.dispose();\n    this.host.removeEventListener('nanoChange', this.handleFieldChange);\n    this.host.removeEventListener('submit', this.handleSubmit);\n    if (this.activeForm)\n      this.activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.userForm && <slot />}\n        {!this.userForm && (\n          <form ref={(f) => (this.activeForm = f)}>\n            <slot />\n          </form>\n        )}\n      </Host>\n    );\n  }\n}\n"]}