@nanoporetech-digital/components 2.10.1 → 2.13.0

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

@@ -1,21 +1,28 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { Component, Prop, h, Host, Element, State, Watch, Event, } from '@stencil/core';
+import { Component, Prop, h, Host, Element, State, Watch, Event, Method, } 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
+ * = Access to 2-way, data bound reactive store
  * - 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.allFields = [];
+    this.nanoFieldSelector = `
+    nano-input,
+    nano-select,
+    nano-file-upload,
+    nano-date-input,
+    nano-checkbox
+  `;
+    // annoyingly, whenever we attempt to `checkValidty()` it fires `invalid` events.
     // this is used to prevent infinite loops / multiple calls
     this.internalValidate = false;
     // Public API
@@ -24,39 +31,80 @@ export class FieldValidator {
     /** Tries to scroll to the first invalid field on submit */
     this.scrollToInvalid = true;
     this._dirty = false;
+    /** By default, `nano-field-validator` will also track all native form field elements.
+     * You can add extra web-component form fields to listen to
+     * (as long as they match the standard form field spec) by using the `fieldSelector` prop.
+     */
+    this.extraFieldSelector = 'input, select, textarea';
     // Event handlers
-    /** Fired whenever store values change and potentially checks validity */
-    this.handleStoreChange = async (_key, _newVal) => {
+    /**
+     * Fired whenever store values change and potentially checks validity
+     * @param key - the key of the store that's just changed
+     * @param newVal - the incoming, new value
+     */
+    this.handleStoreChange = async (key, newVal) => {
+      const found = this.allFields.find((field) => field.name === key);
+      // field update has come programmatically (not from ui),
+      // so let's update the underlying ui field
+      if ((found &&
+        found.tagName === 'NANO-FILE-UPLOAD' &&
+        !this.fileStateEqual(key, found)) ||
+        (found.tagName !== 'NANO-FILE-UPLOAD' && found.value !== newVal)) {
+        this.storeToFields([found]);
+      }
       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);
+      this.nanoPayloadChange.emit(this._store.state);
     };
-    /** Handles field value changes and passes to store */
+    /**
+     * Handles nano field value changes and passes to store
+     * @param ev - the incoming change event
+     */
     this.handleFieldChange = (ev) => {
+      if (!this.nanoFields.includes(ev.target))
+        return;
       this._dirty = true;
-      this.setFieldValue([ev.target]);
+      this.fieldsToStore([ev.target]);
     };
-    /** Handles default field validation events */
+    /**
+     * Handles non-nano field value changes and passes to store
+     * @param ev - the incoming change event
+     */
+    this.handlePlainFieldChange = (ev) => {
+      if (!this.plainFields.includes(ev.target))
+        return;
+      this.fieldsToStore([ev.target]);
+    };
+    /**
+     * Handles default field validation events
+     * @param ev - the invalid event
+     */
     this.handleFormInvalid = async (ev) => {
-      ev.preventDefault();
+      // if it's a non-nano field, we'll let default html5 validation do it's thing
+      if (!this.plainFields.includes(ev.target)) {
+        ev.preventDefault();
+      }
       this._valid = false;
+      // whenever `checkValidity` is called, this handler is in-turn called.
+      // this flag is used to stop infinite loops
       if (this.internalValidate)
         return;
+      // a submit must have happened to if 'submitThenDirty' turn on 'dirty' checking now
       if (this.validateOn === 'submitThenDirty')
         this.validateOn = 'dirty';
       this.submitted = true;
       await this.validateAllFields();
+      this.internalValidate = true;
+      this._valid = this.activeForm.checkValidity();
+      this.internalValidate = false;
       // 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;
@@ -65,7 +113,10 @@ export class FieldValidator {
       this.scrollToFirstInvalid();
       this.nanoInvalid.emit();
     };
-    /** stops default form submission, checks if valid, then submits manually  */
+    /**
+     * stops default form submission, checks if valid, then submits manually
+     * @param e - a submit event from the nested form element
+     */
     this.handleSubmit = async (e) => {
       e.preventDefault();
       if (this.validateOn === 'submitThenDirty')
@@ -90,15 +141,18 @@ export class FieldValidator {
     return this._activeForm;
   }
   set activeForm(form) {
-    if (this._activeForm)
+    // manages event listners on whatever form is used (slotted on created here)
+    if (!form)
+      return;
+    if (this._activeForm) {
       this._activeForm.removeEventListener('invalid', this.handleFormInvalid, true);
-    if (form)
-      form.addEventListener('invalid', this.handleFormInvalid, true);
+    }
+    form.addEventListener('invalid', this.handleFormInvalid, true);
     this._activeForm = form;
   }
   /** Sync up validateOn with all fields */
   validateOnChange() {
-    this.fields.forEach((field) => {
+    this.nanoFields.forEach((field) => {
       if (field.tagName === 'NANO-CHECKBOX') {
         const cbg = field.closest('nano-checkbox-group');
         if (cbg)
@@ -118,11 +172,15 @@ export class FieldValidator {
   get valid() {
     return this._valid;
   }
-  /** The current form payload as a reactive store. @readonly */
+  /** The current form state as a stencil store. */
+  get store() {
+    return this._store;
+  }
+  /** The current form payload as a reactive proxy. @readonly */
   get payload() {
-    return this.store.state;
+    return this._store.state;
   }
-  /** Returns true if validation errors will be displayed to the user */
+  /** Returns true if validation errors will be displayed to the user. @readonly */
   get showValidation() {
     return (this.validateOn === 'dirty' && this.dirty) || this.submitted;
   }
@@ -139,37 +197,94 @@ export class FieldValidator {
   ```
    */
   get validationState() {
+    // TODO - migrate nano-fields away from using proprietary methods in a bid to be closer to the spec
+    // this is big and ugly.
+    // why? Cos' it must unify checking validity state for both
+    // `nano-...` and plain form fields.
     const validationState = [];
-    this.fields.forEach(async (field) => {
+    this.allFields.forEach(async (field) => {
       const found = validationState.find((v) => v.name === field.name);
+      let pf;
+      let nf;
       if (found) {
-        found.validityMessage = field.validityMessage.length
-          ? field.validityMessage
-          : found.validityMessage;
+        if (field.validationMessage) {
+          pf = field;
+          found.validityMessage = pf.validationMessage.length
+            ? pf.validationMessage
+            : found.validityMessage;
+          this.internalValidate = true;
+          if (found.valid && !pf.checkValidity())
+            found.valid = false;
+          this.internalValidate = false;
+        }
+        else if (field.validityMessage) {
+          nf = field;
+          found.validityMessage = nf.validityMessage.length
+            ? nf.validityMessage
+            : nf.validityMessage;
+          if (found.valid && nf.invalid)
+            found.valid = false;
+        }
         if (!found.fields.find((f) => f === field))
           found.fields.push(field);
-        if (found.valid && field.invalid)
-          found.valid = false;
-        return;
+      }
+      let valid;
+      let validityMessage;
+      if (field.checkValidity) {
+        pf = field;
+        this.internalValidate = true;
+        valid = pf.checkValidity();
+        this.internalValidate = false;
+        validityMessage = pf.validationMessage;
+      }
+      else {
+        nf = field;
+        valid = !nf.invalid;
+        validityMessage = nf.validityMessage;
       }
       validationState.push({
         fields: [field],
         name: field.name,
-        valid: !field.invalid,
-        value: this.store.state[field.name],
+        value: this._store.state[field.name],
         dirty: false,
-        validityMessage: field.validityMessage,
+        valid,
+        validityMessage,
       });
     });
     return validationState;
   }
+  /**
+   * Sets the state of the form using an object of key / value pairs.
+   * @param state - the state to load in the store
+   */
+  async setStore(state) {
+    Object.entries(state).forEach(([key, val]) => (this.store.state[key] = val));
+  }
+  /**
+   * Sets custom validity for all / some form fields.
+   * @param validity - a validity object of `{fieldName: errorString}` pairs. Set as an empty string to clear the error.
+   */
+  async setCustomValidity(validity) {
+    return await Promise.all(Object.entries(validity).map(async ([key, err]) => {
+      const field = this.allFields.find((f) => f.name === key);
+      if (!!field)
+        await this.setFieldError(field, err);
+    }));
+  }
+  /**
+   * Clear all custom validation.
+   * @param validity
+   */
+  async resetValidity() {
+    return await Promise.all(this.allFields.map(async (field) => await this.setFieldError(field, '')));
+  }
   // private methods
   attachSlotObserver() {
     if (!!this.mo)
       return;
     const mo = (this.mo = new MutationObserver((_entries) => {
       const form = this.host.querySelector('form');
-      if (form !== this.activeForm)
+      if (form && form !== this.activeForm)
         this.activeForm = form;
       this.setupFields();
     }));
@@ -182,95 +297,177 @@ export class FieldValidator {
   }
   /** 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);
+    let nanoFields = Array.from(this.host.querySelectorAll(this.nanoFieldSelector));
+    let plainFields = Array.from(this.host.querySelectorAll(this.extraFieldSelector)).filter((e) => !e.closest(this.nanoFieldSelector));
+    nanoFields = nanoFields.filter((f) => !!f.name && !!f.name.length);
+    plainFields = plainFields.filter((f) => !!f.name && !!f.name.length);
     // do we have any currently un-watched fields?
-    if (!fields.filter((f) => !this.fields.includes(f)).length)
+    if (![...nanoFields, ...plainFields].filter((f) => !this.allFields.includes(f)).length)
       return;
     // setup the initial store state / refresh on new fields
-    this.fields = fields;
+    this.nanoFields = nanoFields;
+    this.plainFields = plainFields;
+    this.allFields = [...nanoFields, ...plainFields];
+    this.storeToFields(this.allFields);
     this.validateOnChange();
-    this.setFieldValue(this.fields);
-    this.nanoPayloadChange.emit(this.store.state);
+    this.fieldsToStore(this.allFields);
+    this.nanoPayloadChange.emit(this._store.state);
+  }
+  storeToFields(fields) {
+    fields.forEach((field) => {
+      var _a;
+      const fieldName = field.name;
+      if (!fieldName.length ||
+        typeof this._store.state[fieldName] === 'undefined')
+        return;
+      if (field.tagName === 'NANO-CHECKBOX' ||
+        ['radio', 'checkbox'].includes(field.type)) {
+        let cb = field;
+        if (cb.type === 'radio' ||
+          cb.type === 'segment' ||
+          cb.type === 'segment-pill') {
+          // single radio type control
+          if (this._store.state[fieldName] === cb.value)
+            cb.checked = true;
+          else
+            cb.checked = false;
+        }
+        else if (Array.isArray(this._store.state[fieldName])) {
+          // multiple checkbox like controls
+          if (this._store.state[fieldName].includes(cb.value))
+            cb.checked = true;
+          else
+            cb.checked = false;
+        }
+        else {
+          // single checkbox like control
+          if (this._store.state[fieldName] === cb.value)
+            cb.checked = true;
+          else
+            cb.checked = false;
+        }
+        return;
+      }
+      if (field.tagName === 'NANO-FILE-UPLOAD') {
+        const ff = field;
+        // this can only work if the field is empty rn... a one-time deal
+        if (!((_a = ff.files) === null || _a === void 0 ? void 0 : _a.length))
+          ff.files = this._store.state[fieldName];
+        return;
+      }
+      // default
+      field.value = this._store.state[fieldName];
+    });
   }
   /** Loops through all `nano-...` fields and extracts their values into our store */
-  setFieldValue(fields) {
+  fieldsToStore(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]))
-              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);
+      if (field.tagName === 'NANO-CHECKBOX' ||
+        ['radio', 'checkbox'].includes(field.type)) {
+        let cb = field;
+        if (cb.type === 'radio' ||
+          cb.type === 'segment' ||
+          cb.type === 'segment-pill') {
+          // radio type control - only one can be checked
+          if (cb.checked)
+            this._store.state[fieldName] = cb.value;
+        }
+        else if (this.allFields.filter((f) => f.name === fieldName &&
+          (f.tagName === 'NANO-CHECKBOX' ||
+            f.type === 'checkbox')).length > 1) {
+          // multiple checkbox type control
+          const currentArr = Array.isArray(this._store.state[fieldName])
+            ? this._store.state[fieldName]
+            : [];
+          if (cb.checked) {
+            // checked
+            if (!this._store.state[fieldName].includes(cb.value)) {
+              this._store.state[fieldName] = [...currentArr, cb.value];
             }
           }
+          else {
+            // unchecked
+            this._store.state[fieldName] = currentArr.filter((v) => v !== cb.value);
+          }
+        }
+        else {
+          // single checkbox - on or off
+          if (cb.checked)
+            this._store.state[fieldName] = 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;
+            this._store.state[fieldName] = '';
+        }
+        return;
       }
+      if (field.tagName === 'NANO-FILE-UPLOAD') {
+        const ff = field;
+        if (!this.fileStateEqual(fieldName, ff))
+          this._store.state[fieldName] = ff.files;
+        return;
+      }
+      // default
+      this._store.state[fieldName] = field.value;
     });
   }
-  /** Checks for user defined validations */
+  /**
+   * Tries to ascertain whether the current model
+   * value is the same as the `nano-file-upload` value
+   * @param fieldName - the key to access from the data store
+   * @param field - the nano-file-upload field to assess against
+   * @returns true for equal, false for not equal
+   */
+  fileStateEqual(fieldName, field) {
+    return (JSON.stringify(this._store.state[fieldName]) ===
+      JSON.stringify(field.files) ||
+      this._store.state[fieldName] == field.files);
+  }
+  /**
+   * Checks for user defined validations
+   * @param key - current key of the data model to validate
+   * @param newVal - the newly set, incoming value to validate
+   */
   async validate(key, newVal) {
     if (!this.validation)
       return;
-    const res = this.validation(key, newVal, this.store.state);
+    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
+    // so we must 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);
+      const field = this.allFields.find((f) => f.name === key);
       let validityTarget = field;
       if (field.tagName === 'NANO-CHECKBOX') {
+        // if we have a checkbox-group, set the validation message there
         const cbg = field.closest('nano-checkbox-group');
         validityTarget = cbg || field;
       }
-      // status is now valid - clear the error
-      if (validityTarget.validityMessage === o.msg && o.valid)
+      if ((validityTarget.validityMessage ||
+        validityTarget.validationMessage) === o.msg &&
+        o.valid) {
+        // status is now valid - clear the error
         await this.setFieldError(validityTarget, '');
-      // status is invalid. Set the error
+      }
       else if (!o.valid) {
+        // status is invalid. Set the error
         await this.setFieldError(validityTarget, o.msg);
       }
     }));
   }
+  /** Loops through all store entries and checks custom validation */
+  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);
+  }
   /**
    * Utility to smooth out setting error messages
    * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)
@@ -280,16 +477,10 @@ export class FieldValidator {
   async setFieldError(field, msg) {
     if (field['showError'])
       await field.showError(msg);
-    else
+    else if (field['setError'])
       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);
+    else
+      field.setCustomValidity(msg);
   }
   scrollToFirstInvalid() {
     if (!this.scrollToInvalid)
@@ -312,23 +503,27 @@ export class FieldValidator {
   }
   connectedCallback() {
     this.userForm = this.host.querySelector('form');
+    this._store = createStore({});
   }
   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('input', this.handlePlainFieldChange);
+      this.host.addEventListener('change', this.handlePlainFieldChange);
       this.host.addEventListener('submit', this.handleSubmit);
+      this._store.on('set', this.handleStoreChange);
     });
   }
   disconnectedCallback() {
     if (this.mo)
       this.mo.disconnect();
-    this.store.dispose();
     this.host.removeEventListener('nanoChange', this.handleFieldChange);
+    this.host.removeEventListener('input', this.handlePlainFieldChange);
+    this.host.removeEventListener('change', this.handlePlainFieldChange);
     this.host.removeEventListener('submit', this.handleSubmit);
+    this._store.reset();
     if (this.activeForm)
       this.activeForm.removeEventListener('invalid', this.handleFormInvalid, true);
   }
@@ -419,19 +614,36 @@ export class FieldValidator {
       "attribute": "valid",
       "reflect": true
     },
+    "store": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ObservableMap<ValidatorValueStore>",
+        "resolved": "ObservableMap<ValidatorValueStore>",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current form state as a stencil store."
+      },
+      "getter": true,
+      "setter": false
+    },
     "payload": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "ValueStore",
-        "resolved": "ValueStore",
+        "original": "ValidatorValueStore",
+        "resolved": "ValidatorValueStore",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The current form payload as a reactive store. @readonly"
+        "text": "The current form payload as a reactive proxy. @readonly"
       },
       "getter": true,
       "setter": false
@@ -448,7 +660,7 @@ export class FieldValidator {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Returns true if validation errors will be displayed to the user"
+        "text": "Returns true if validation errors will be displayed to the user. @readonly"
       },
       "getter": true,
       "setter": false,
@@ -463,7 +675,16 @@ export class FieldValidator {
         "resolved": "ValidationState[]",
         "references": {
           "ValidationState": {
-            "location": "global"
+            "location": "import",
+            "path": "/builds/f85YXDf1/0/Digital/nano-components/packages/components/src/interface.d.ts"
+          },
+          "PlainFormEles": {
+            "location": "import",
+            "path": "/builds/f85YXDf1/0/Digital/nano-components/packages/components/src/interface.d.ts"
+          },
+          "NanoFormEles": {
+            "location": "import",
+            "path": "/builds/f85YXDf1/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -476,15 +697,36 @@ export class FieldValidator {
       "getter": true,
       "setter": false
     },
+    "extraFieldSelector": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "By default, `nano-field-validator` will also track all native form field elements.\nYou can add extra web-component form fields to listen to\n(as long as they match the standard form field spec) by using the `fieldSelector` prop."
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "extra-field-selector",
+      "reflect": false,
+      "defaultValue": "'input, select, textarea'"
+    },
     "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; }; }",
+        "original": "(\n    field: string,\n    value: string,\n    fields: ValidatorValueStore\n  ) => { [key: string]: { msg: string; valid?: boolean } }",
+        "resolved": "(field: string, value: string, fields: ValidatorValueStore) => { [key: string]: { msg: string; valid?: boolean; }; }",
         "references": {
-          "ValueStore": {
-            "location": "global"
+          "ValidatorValueStore": {
+            "location": "import",
+            "path": "/builds/f85YXDf1/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -511,11 +753,11 @@ export class FieldValidator {
     }
   }; }
   static get states() { return {
-    "store": {},
-    "userForm": {},
     "submitted": {},
+    "userForm": {},
     "_dirty": {},
-    "_valid": {}
+    "_valid": {},
+    "_store": {}
   }; }
   static get events() { return [{
       "method": "nanoPayloadChange",
@@ -528,11 +770,12 @@ export class FieldValidator {
         "text": "Fired whenever the payload changes"
       },
       "complexType": {
-        "original": "ValueStore",
-        "resolved": "ValueStore",
+        "original": "ValidatorValueStore",
+        "resolved": "ValidatorValueStore",
         "references": {
-          "ValueStore": {
-            "location": "global"
+          "ValidatorValueStore": {
+            "location": "import",
+            "path": "/builds/f85YXDf1/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -567,6 +810,81 @@ export class FieldValidator {
         "references": {}
       }
     }]; }
+  static get methods() { return {
+    "setStore": {
+      "complexType": {
+        "signature": "(state: ValidatorValueStore) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "state - the state to load in the store"
+              }],
+            "text": "- the state to load in the store"
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "ValidatorValueStore": {
+            "location": "import",
+            "path": "/builds/f85YXDf1/0/Digital/nano-components/packages/components/src/interface.d.ts"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets the state of the form using an object of key / value pairs.",
+        "tags": [{
+            "name": "param",
+            "text": "state - the state to load in the store"
+          }]
+      }
+    },
+    "setCustomValidity": {
+      "complexType": {
+        "signature": "(validity: { [key: string]: string; }) => Promise<void[]>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "validity - a validity object of `{fieldName: errorString}` pairs. Set as an empty string to clear the error."
+              }],
+            "text": "- a validity object of `{fieldName: errorString}` pairs. Set as an empty string to clear the error."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void[]>"
+      },
+      "docs": {
+        "text": "Sets custom validity for all / some form fields.",
+        "tags": [{
+            "name": "param",
+            "text": "validity - a validity object of `{fieldName: errorString}` pairs. Set as an empty string to clear the error."
+          }]
+      }
+    },
+    "resetValidity": {
+      "complexType": {
+        "signature": "() => Promise<void[]>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void[]>"
+      },
+      "docs": {
+        "text": "Clear all custom validation.",
+        "tags": [{
+            "name": "param",
+            "text": "validity"
+          }]
+      }
+    }
+  }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "userForm",
@@ -574,6 +892,9 @@ export class FieldValidator {
     }, {
       "propName": "validateOn",
       "methodName": "validateOnChange"
+    }, {
+      "propName": "extraFieldSelector",
+      "methodName": "attachSlotObserver"
     }]; }
 }
 //# sourceMappingURL=field-validator.js.map