@nanoporetech-digital/components 2.8.0 → 2.10.1

package/dist/collection/components/checkbox/checkbox-group.js

@@ -13,7 +13,6 @@ import { debounce, getClassMap } from '../../utils';
 export class CheckboxGroup {
   constructor() {
     this.grpId = `nano-checkbox-group-${grpIds++}`;
-    this._invalid = false;
     this.errorMessage = '';
     this.showErrorMsg = false;
     this.hasHelperSlot = false;
@@ -21,7 +20,7 @@ export class CheckboxGroup {
     /**
      * When should the field perform validation
      */
-    this.validateOn = 'submit';
+    this.validateOn = 'submitThenDirty';
     /**
      * Whether to show validation errors underneath input
      */
@@ -44,6 +43,7 @@ export class CheckboxGroup {
      * A common label for children controls
      */
     this.legend = '';
+    this._invalid = false;
     this.handleInvalid = (ev) => {
       this._invalid = true;
       if (this.validateOn === 'submit') {
@@ -51,7 +51,7 @@ export class CheckboxGroup {
       }
       if (!!this.showInlineError)
         ev.preventDefault();
-      setTimeout((_) => this.showInlineValidation(ev), 20);
+      this.showInlineValidation(ev);
     };
     this.showInlineValidation = (ev) => {
       if (!this.nativeCbs || !this.nativeCbs.length)
@@ -60,14 +60,11 @@ export class CheckboxGroup {
         this.validateOn = 'dirty';
       this.showErrorMsg = false;
       this._invalid = false;
-      this.nativeCbs.forEach((cb, i) => {
+      this.nativeCbs.forEach((cb, _i) => {
         if (!cb.validity.valid) {
           this.errorMessage = cb.validationMessage;
           this.showErrorMsg = true;
           this._invalid = true;
-          if (!!this.showInlineError) {
-            this.checkboxes[i].setFocus();
-          }
         }
       });
       this.nanoValidate.emit({
@@ -84,6 +81,12 @@ export class CheckboxGroup {
   get invalid() {
     return this._invalid;
   }
+  /**
+   * Current validation message - if any. @readonly
+   */
+  get validityMessage() {
+    return this.errorMessage;
+  }
   // Public methods
   /**
    * Get the current state of the control.
@@ -92,16 +95,37 @@ export class CheckboxGroup {
    */
   async reportValidity(validateFirst) {
     return new Promise((resolve) => {
-      if (validateFirst)
+      if (validateFirst) {
+        this.customValidate();
         this.showInlineValidation();
+      }
       setTimeout(() => {
         resolve({
           isValid: !this.invalid,
           errorMessage: this.errorMessage,
         });
-      }, 20);
+      }, 50);
     });
   }
+  /**
+   * Invalidate the field and show a custom error message.
+   * To clear the error you will need to re-call this method with an empty string.
+   * @param message - the error message to show
+   * @param optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)
+   */
+  async showError(message, optVal) {
+    let cb;
+    if (optVal)
+      cb = this.checkboxes.find((c) => c.value === optVal);
+    if (!cb)
+      cb = this.checkboxes[0];
+    if (!cb)
+      return;
+    this.errorMessage = message;
+    await cb.setError(message);
+    if (!!this.showInlineError)
+      this.showInlineValidation();
+  }
   // listeners & watchers
   /**
    * Notes on validation... custom validation messages should be set
@@ -119,23 +143,36 @@ export class CheckboxGroup {
   customValidate() {
     if (!this.nativeCbs || !this.nativeCbs.length || !this.checkboxes)
       return;
+    let onlyRadios = this.nativeCbs.filter((cb) => cb.type === 'radio');
+    if (onlyRadios &&
+      onlyRadios.length &&
+      (this.showErrorMsg || this.validateOn === 'dirty')) {
+      let required = onlyRadios.find((cb) => cb.required);
+      let checked = onlyRadios.filter((cb) => cb.checked);
+      if (required && checked) {
+        this.checkboxes.forEach((rd) => rd.reportValidity(false));
+        return false;
+      }
+      else if (required && !checked)
+        return true;
+    }
     // we only care about checkbox controls.
     let onlyCbs = this.nativeCbs.filter((cb) => cb.type === 'checkbox');
     if (!onlyCbs || !onlyCbs.length)
       return;
-    let checked = onlyCbs.filter((cb) => cb.checked).length;
+    let checked = onlyCbs.filter((cb) => cb.checked);
+    let required = onlyCbs.find((cb) => cb.required);
     let invalid = false;
+    if (required && !checked.find((cb) => cb === required))
+      return true;
     this.checkboxes.forEach((cb) => {
-      if (cb.required && !cb.checked) {
-        invalid = true;
-      }
       cb.setError('');
-      if (this.min && checked < this.min) {
-        cb.setError(`You must select a minimum of ${this.min} values.`);
+      if (this.min && checked.length < this.min) {
+        cb.setError(`You must select a minimum of ${this.min} values.`, this.showErrorMsg);
         invalid = true;
       }
-      if (this.max && checked > this.max) {
-        cb.setError(`Only up to ${this.max} values are allowed.`);
+      if (this.max && checked.length > this.max) {
+        cb.setError(`Only up to ${this.max} values are allowed.`, this.showErrorMsg);
         invalid = true;
       }
     });
@@ -151,6 +188,8 @@ export class CheckboxGroup {
   }
   // private methods
   attachSlotObserver() {
+    if (!!this.mo)
+      return;
     const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));
     mo.observe(this.host, { childList: true });
   }
@@ -166,7 +205,7 @@ export class CheckboxGroup {
   }
   // stencil hooks
   componentWillLoad() {
-    this.showInlineValidation = debounce(this.showInlineValidation, 20);
+    this.showInlineValidation = debounce(this.showInlineValidation, 50);
     this.customValidate = this.customValidate.bind(this);
     this.handleDisabledChange();
   }
@@ -221,7 +260,7 @@ export class CheckboxGroup {
       "setter": false,
       "attribute": "validate-on",
       "reflect": false,
-      "defaultValue": "'submit'"
+      "defaultValue": "'submitThenDirty'"
     },
     "showInlineError": {
       "type": "boolean",
@@ -342,6 +381,26 @@ export class CheckboxGroup {
       "attribute": "invalid",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "validityMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Current validation message - if any. @readonly"
+      },
+      "getter": true,
+      "setter": false,
+      "attribute": "validity-message",
+      "reflect": false,
+      "defaultValue": "''"
     }
   }; }
   static get states() { return {
@@ -349,7 +408,8 @@ export class CheckboxGroup {
     "nativeCbs": {},
     "errorMessage": {},
     "showErrorMsg": {},
-    "hasHelperSlot": {}
+    "hasHelperSlot": {},
+    "_invalid": {}
   }; }
   static get events() { return [{
       "method": "nanoValidate",
@@ -370,7 +430,7 @@ export class CheckboxGroup {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -392,7 +452,7 @@ export class CheckboxGroup {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"
@@ -407,13 +467,47 @@ export class CheckboxGroup {
             "text": "`{ isValid: boolean, errorMessage: string }`"
           }]
       }
+    },
+    "showError": {
+      "complexType": {
+        "signature": "(message: string, optVal?: string) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "message - the error message to show"
+              }],
+            "text": "- the error message to show"
+          }, {
+            "tags": [{
+                "name": "param",
+                "text": "optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)"
+              }],
+            "text": "- optionally supply an option value to target which checkbox to show invalidate against (default is the first)"
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLNanoCheckboxElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "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.",
+        "tags": [{
+            "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)"
+          }]
+      }
     }
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
-      "propName": "validateOn",
-      "methodName": "handleCbChange"
-    }, {
       "propName": "min",
       "methodName": "handleCbChange"
     }, {

package/dist/collection/components/checkbox/checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Element,\n  h,\n  ComponentInterface,\n  State,\n  Listen,\n  Watch,\n  Host,\n  Method,\n  forceUpdate,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport {\n  CssClassMap,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\nimport { debounce, getClassMap } from '../../utils';\n\n/**\n * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n *\n * @slot - Used for grouping checkboxes inside the group wrapper\n * @slot helper - helper text to accompany the form field underneath.\n */\n@Component({\n  tag: 'nano-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n  private mo?: MutationObserver;\n  private checkboxTypes: CssClassMap;\n  private grpId = `nano-checkbox-group-${grpIds++}`;\n  private _invalid = false;\n\n  @Element() host: HTMLNanoCheckboxGroupElement;\n\n  // internal state\n\n  @State() checkboxes: HTMLNanoCheckboxElement[];\n  @State() nativeCbs: HTMLInputElement[];\n  @State() errorMessage: string = '';\n  @State() showErrorMsg = false;\n  @State() hasHelperSlot = false;\n\n  // public properties\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop() showInlineError = true;\n\n  /**\n   * The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n   * A validation error will be thrown if not enough controls are checked.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n   * Other controls will automatically be disabled upon reaching this number.\n   */\n  @Prop() max: number = null;\n\n  /**\n   * Disable all the nested form controls\n   */\n  @Prop({ reflect: true }) disabled: boolean | null = null;\n\n  /**\n   * A common label for children controls\n   */\n  @Prop() legend: string = '';\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n\n  // Public methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return new Promise((resolve) => {\n      if (validateFirst) this.showInlineValidation();\n      setTimeout(() => {\n        resolve({\n          isValid: !this.invalid,\n          errorMessage: this.errorMessage,\n        });\n      }, 20);\n    });\n  }\n\n  // Events\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // listeners & watchers\n\n  /**\n   * Notes on validation... custom validation messages should be set\n   * no matter whether we show inline messages or native html5.\n   * this will mean forms cannot submit when there are pending validation issues.\n   */\n  @Listen('nanoChange')\n  @Watch('validateOn')\n  @Watch('min')\n  @Watch('max')\n  handleCbChange() {\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n    this.customValidate();\n\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  @Watch('nativeCbs')\n  customValidate() {\n    if (!this.nativeCbs || !this.nativeCbs.length || !this.checkboxes) return;\n\n    // we only care about checkbox controls.\n    let onlyCbs = this.nativeCbs.filter((cb) => cb.type === 'checkbox');\n    if (!onlyCbs || !onlyCbs.length) return;\n\n    let checked = onlyCbs.filter((cb) => cb.checked).length;\n    let invalid = false;\n\n    this.checkboxes.forEach((cb) => {\n      if (cb.required && !cb.checked) {\n        invalid = true;\n      }\n\n      cb.setError('');\n\n      if (this.min && checked < this.min) {\n        cb.setError(`You must select a minimum of ${this.min} values.`);\n        invalid = true;\n      }\n      if (this.max && checked > this.max) {\n        cb.setError(`Only up to ${this.max} values are allowed.`);\n        invalid = true;\n      }\n    });\n    return invalid;\n  }\n\n  @Watch('checkboxes')\n  handleComponentChange() {\n    this.checkboxTypes = getClassMap(\n      this.checkboxes.map((cb) => 'types-' + cb.type)\n    );\n  }\n\n  @Watch('disabled')\n  @Watch('checkboxes')\n  handleDisabledChange() {\n    if (this.disabled === null) return;\n    this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n  }\n\n  // private methods\n\n  private attachSlotObserver() {\n    const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n    mo.observe(this.host, { childList: true });\n  }\n\n  private async handleSlotChange() {\n    forceUpdate(this.host);\n    this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n    this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    this.nativeCbs = await Promise.all(\n      this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n        acc.push(cb.getInputElement());\n        return acc;\n      }, [])\n    );\n\n    this.nativeCbs.forEach((cb) =>\n      cb.addEventListener('invalid', this.handleInvalid)\n    );\n  }\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit') {\n      this._invalid = this.showErrorMsg = this.customValidate();\n    }\n    if (!!this.showInlineError) ev.preventDefault();\n\n    setTimeout((_) => this.showInlineValidation(ev), 20);\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (!this.nativeCbs || !this.nativeCbs.length) return;\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.showErrorMsg = false;\n    this._invalid = false;\n\n    this.nativeCbs.forEach((cb, i) => {\n      if (!cb.validity.valid) {\n        this.errorMessage = cb.validationMessage;\n        this.showErrorMsg = true;\n        this._invalid = true;\n        if (!!this.showInlineError) {\n          this.checkboxes[i].setFocus();\n        }\n      }\n    });\n\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  // stencil hooks\n\n  componentWillLoad() {\n    this.showInlineValidation = debounce(this.showInlineValidation, 20);\n    this.customValidate = this.customValidate.bind(this);\n    this.handleDisabledChange();\n  }\n\n  connectedCallback() {\n    this.attachSlotObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.handleComponentChange();\n  }\n\n  render() {\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n    const legendId = this.grpId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';\n\n    return (\n      <Host {...this.checkboxTypes} dir={isRtl ? 'rtl' : null}>\n        <fieldset\n          disabled={this.disabled}\n          class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n        >\n          <legend class=\"nanogroupcb__legend\" id={legendId}>\n            {this.legend}\n          </legend>\n          <div\n            class=\"nanogroupcb__cbs\"\n            role=\"group\"\n            aria-labelledby={legendId + ' ' + moreId}\n          >\n            <slot />\n          </div>\n          {(this.showInlineError || this.hasHelperSlot) && (\n            <div class=\"nanogroupcb__more\" id={moreId}>\n              {!!this.showInlineError ? (\n                <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n              ) : (\n                ''\n              )}\n              <div class=\"nanogroupcb__help\">\n                <slot name=\"helper\" />\n              </div>\n            </div>\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\nlet grpIds = 0;\n"]}
+{"version":3,"file":"checkbox-group.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Element,\n  h,\n  ComponentInterface,\n  State,\n  Listen,\n  Watch,\n  Host,\n  Method,\n  forceUpdate,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport {\n  CssClassMap,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\nimport { debounce, getClassMap } from '../../utils';\n\n/**\n * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n *\n * @slot - Used for grouping checkboxes inside the group wrapper\n * @slot helper - helper text to accompany the form field underneath.\n */\n@Component({\n  tag: 'nano-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n  private mo?: MutationObserver;\n  private checkboxTypes: CssClassMap;\n  private grpId = `nano-checkbox-group-${grpIds++}`;\n\n  @Element() host: HTMLNanoCheckboxGroupElement;\n\n  // internal state\n\n  @State() checkboxes: HTMLNanoCheckboxElement[];\n  @State() nativeCbs: HTMLInputElement[];\n  @State() errorMessage: string = '';\n  @State() showErrorMsg = false;\n  @State() hasHelperSlot = false;\n\n  // public properties\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop() showInlineError = true;\n\n  /**\n   * The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n   * A validation error will be thrown if not enough controls are checked.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n   * Other controls will automatically be disabled upon reaching this number.\n   */\n  @Prop() max: number = null;\n\n  /**\n   * Disable all the nested form controls\n   */\n  @Prop({ reflect: true }) disabled: boolean | null = null;\n\n  /**\n   * A common label for children controls\n   */\n  @Prop() legend: string = '';\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    return this.errorMessage;\n  }\n\n  // Public methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return new Promise((resolve) => {\n      if (validateFirst) {\n        this.customValidate();\n        this.showInlineValidation();\n      }\n      setTimeout(() => {\n        resolve({\n          isValid: !this.invalid,\n          errorMessage: this.errorMessage,\n        });\n      }, 50);\n    });\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   * @param message - the error message to show\n   * @param optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)\n   */\n  @Method()\n  async showError(message: string, optVal?: string) {\n    let cb: HTMLNanoCheckboxElement;\n    if (optVal) cb = this.checkboxes.find((c) => c.value === optVal);\n    if (!cb) cb = this.checkboxes[0];\n    if (!cb) return;\n\n    this.errorMessage = message;\n    await cb.setError(message);\n    if (!!this.showInlineError) this.showInlineValidation();\n  }\n\n  // Events\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // listeners & watchers\n\n  /**\n   * Notes on validation... custom validation messages should be set\n   * no matter whether we show inline messages or native html5.\n   * this will mean forms cannot submit when there are pending validation issues.\n   */\n  @Listen('nanoChange')\n  @Watch('min')\n  @Watch('max')\n  handleCbChange() {\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n    this.customValidate();\n\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  @Watch('nativeCbs')\n  customValidate() {\n    if (!this.nativeCbs || !this.nativeCbs.length || !this.checkboxes) return;\n\n    let onlyRadios = this.nativeCbs.filter((cb) => cb.type === 'radio');\n\n    if (\n      onlyRadios &&\n      onlyRadios.length &&\n      (this.showErrorMsg || this.validateOn === 'dirty')\n    ) {\n      let required = onlyRadios.find((cb) => cb.required);\n      let checked = onlyRadios.filter((cb) => cb.checked);\n\n      if (required && checked) {\n        this.checkboxes.forEach((rd) => rd.reportValidity(false));\n        return false;\n      } else if (required && !checked) return true;\n    }\n\n    // we only care about checkbox controls.\n    let onlyCbs = this.nativeCbs.filter((cb) => cb.type === 'checkbox');\n    if (!onlyCbs || !onlyCbs.length) return;\n\n    let checked = onlyCbs.filter((cb) => cb.checked);\n    let required = onlyCbs.find((cb) => cb.required);\n    let invalid = false;\n\n    if (required && !checked.find((cb) => cb === required)) return true;\n\n    this.checkboxes.forEach((cb) => {\n      cb.setError('');\n\n      if (this.min && checked.length < this.min) {\n        cb.setError(\n          `You must select a minimum of ${this.min} values.`,\n          this.showErrorMsg\n        );\n        invalid = true;\n      }\n      if (this.max && checked.length > this.max) {\n        cb.setError(\n          `Only up to ${this.max} values are allowed.`,\n          this.showErrorMsg\n        );\n        invalid = true;\n      }\n    });\n    return invalid;\n  }\n\n  @Watch('checkboxes')\n  handleComponentChange() {\n    this.checkboxTypes = getClassMap(\n      this.checkboxes.map((cb) => 'types-' + cb.type)\n    );\n  }\n\n  @Watch('disabled')\n  @Watch('checkboxes')\n  handleDisabledChange() {\n    if (this.disabled === null) return;\n    this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n  }\n\n  // private methods\n\n  private attachSlotObserver() {\n    if (!!this.mo) return;\n    const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n    mo.observe(this.host, { childList: true });\n  }\n\n  private async handleSlotChange() {\n    forceUpdate(this.host);\n    this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n    this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    this.nativeCbs = await Promise.all(\n      this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n        acc.push(cb.getInputElement());\n        return acc;\n      }, [])\n    );\n\n    this.nativeCbs.forEach((cb) =>\n      cb.addEventListener('invalid', this.handleInvalid)\n    );\n  }\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit') {\n      this._invalid = this.showErrorMsg = this.customValidate();\n    }\n    if (!!this.showInlineError) ev.preventDefault();\n\n    this.showInlineValidation(ev);\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (!this.nativeCbs || !this.nativeCbs.length) return;\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.showErrorMsg = false;\n    this._invalid = false;\n\n    this.nativeCbs.forEach((cb, _i) => {\n      if (!cb.validity.valid) {\n        this.errorMessage = cb.validationMessage;\n        this.showErrorMsg = true;\n        this._invalid = true;\n      }\n    });\n\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  // stencil hooks\n\n  componentWillLoad() {\n    this.showInlineValidation = debounce(this.showInlineValidation, 50);\n    this.customValidate = this.customValidate.bind(this);\n    this.handleDisabledChange();\n  }\n\n  connectedCallback() {\n    this.attachSlotObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.handleComponentChange();\n  }\n\n  render() {\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n    const legendId = this.grpId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';\n\n    return (\n      <Host {...this.checkboxTypes} dir={isRtl ? 'rtl' : null}>\n        <fieldset\n          disabled={this.disabled}\n          class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n        >\n          <legend class=\"nanogroupcb__legend\" id={legendId}>\n            {this.legend}\n          </legend>\n          <div\n            class=\"nanogroupcb__cbs\"\n            role=\"group\"\n            aria-labelledby={legendId + ' ' + moreId}\n          >\n            <slot />\n          </div>\n          {(this.showInlineError || this.hasHelperSlot) && (\n            <div class=\"nanogroupcb__more\" id={moreId}>\n              {!!this.showInlineError ? (\n                <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n              ) : (\n                ''\n              )}\n              <div class=\"nanogroupcb__help\">\n                <slot name=\"helper\" />\n              </div>\n            </div>\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\nlet grpIds = 0;\n"]}

package/dist/collection/components/checkbox/checkbox.css

@@ -34,7 +34,7 @@
    * @prop --segment-shadow: 0 1px 4px rgba(0,0,0,.2);
   */
   --focus-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
-  --invalid-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  #e4e6e8);
+  --invalid-shadow: 0 0 0 0.1875rem  #ef4135;
   --padding: initial;
   --check-bg-color: #fff;
   --check-border-style: 1px solid #b5aea7;

package/dist/collection/components/checkbox/checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { Component, Prop, Event, h, State, Watch, Method, Element, Host, } from '@stencil/core';
+import { Component, Prop, Event, h, State, Watch, Method, Element, Host, Listen, } from '@stencil/core';
 import { createColorClasses } from '../../utils';
 import { focusVisible } from '../../utils/focus-visible';
 let checkboxIds = 0;
@@ -15,8 +15,6 @@ let checkboxIds = 0;
 export class Checkbox {
   constructor() {
     this.inputId = `nano-cb-${checkboxIds++}`;
-    this.shouldReport = false;
-    this._invalid = false;
     this.inputType = 'checkbox';
     /** @internal */
     this.hasFocus = false;
@@ -45,9 +43,9 @@ export class Checkbox {
      * If `true`, the checkbox will visually appear as indeterminate (only relevant for type="checkbox")
      */
     this.indeterminate = false;
+    this._invalid = false;
     // private handlers
     this.handleInvalid = (ev) => {
-      this.shouldReport = true;
       this._invalid = !ev.target.validity.valid;
     };
     this.handleChange = (ev) => {
@@ -96,9 +94,15 @@ export class Checkbox {
    * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly
    */
   get invalid() {
-    if (!this.shouldReport)
-      return false;
-    return !this.input.validity.valid;
+    return this._invalid;
+  }
+  /**
+   * Current validation message - if any. @readonly
+   */
+  get validityMessage() {
+    if (!this.input)
+      return '';
+    return this.input.validationMessage;
   }
   // public methods
   /**
@@ -114,10 +118,9 @@ export class Checkbox {
    * @returns `Promise<{ isValid: boolean, errorMessage: string }>`
    */
   async reportValidity(validateFirst = false) {
-    if (validateFirst) {
-      this.shouldReport = true;
-      this._invalid = !this.input.reportValidity();
-    }
+    if (validateFirst)
+      this.input.reportValidity();
+    this._invalid = !this.input.validity.valid;
     return {
       isValid: !this.invalid,
       errorMessage: this.input.validationMessage,
@@ -127,10 +130,11 @@ export class Checkbox {
    * Sets a custom validation message.
    * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`
    */
-  async setError(message) {
+  async setError(message, updateStatus = true) {
     if (!this.input)
       return;
-    this._invalid = !!message.length;
+    if (updateStatus)
+      this._invalid = !!message.length;
     this.input.setCustomValidity(message);
   }
   /**
@@ -151,10 +155,18 @@ export class Checkbox {
       focusVisible.force(this.input, false);
     }
   }
+  onReset(e) {
+    const form = this.form
+      ? document.querySelector('#' + this.form)
+      : this.host.closest('form');
+    if (!form || e.target !== this.host.closest('form'))
+      return;
+    this.checked = false;
+  }
   /* Although many radio components can be 'checked',
   the underlying control may not be. Check */
   isRadioChecked() {
-    setTimeout(() => (this.checked = this.input.checked), 20);
+    requestAnimationFrame(() => (this.checked = this.input.checked));
   }
   // Stencil hooks
   componentWillLoad() {
@@ -180,7 +192,7 @@ export class Checkbox {
           'nanocb--focused': this.hasFocus,
           'nanocb--indeterminate': this.indeterminate,
         }, htmlFor: this.inputId },
-        h("input", { type: this.inputType, name: this.name, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }),
+        h("input", { type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }),
         h("span", { class: 'nanocb__input nanocb__input--' + this.type }),
         h("div", { id: labelId, class: 'nanocb__label nanocb__label--' + this.type },
           this.label && !!this.label.length && h("span", null, this.label),
@@ -394,7 +406,27 @@ export class Checkbox {
       "getter": true,
       "setter": false,
       "attribute": "invalid",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "validityMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Current validation message - if any. @readonly"
+      },
+      "getter": true,
+      "setter": false,
+      "attribute": "validity-message",
+      "reflect": false
     },
     "color": {
       "type": "string",
@@ -405,7 +437,7 @@ export class Checkbox {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -419,11 +451,30 @@ export class Checkbox {
       "setter": false,
       "attribute": "color",
       "reflect": false
+    },
+    "form": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The form element to associate the input with (its form owner). Must be the id of a form."
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "form",
+      "reflect": false
     }
   }; }
   static get states() { return {
-    "_invalid": {},
-    "inputType": {}
+    "inputType": {},
+    "_invalid": {}
   }; }
   static get events() { return [{
       "method": "nanoChange",
@@ -441,7 +492,7 @@ export class Checkbox {
         "references": {
           "CheckboxChangeEventDetail": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -512,7 +563,7 @@ export class Checkbox {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"
@@ -530,10 +581,13 @@ export class Checkbox {
     },
     "setError": {
       "complexType": {
-        "signature": "(message: string) => Promise<void>",
+        "signature": "(message: string, updateStatus?: boolean) => Promise<void>",
         "parameters": [{
             "tags": [],
             "text": ""
+          }, {
+            "tags": [],
+            "text": ""
           }],
         "references": {
           "Promise": {
@@ -591,5 +645,12 @@ export class Checkbox {
       "propName": "indeterminate",
       "methodName": "handleIndeterminateChange"
     }]; }
+  static get listeners() { return [{
+      "name": "reset",
+      "method": "onReset",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }]; }
 }
 //# sourceMappingURL=checkbox.js.map

package/dist/collection/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n  ComponentInterface,\n  State,\n  Watch,\n  Method,\n  Element,\n  Host,\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, ControlValidity } from '../../interface';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils';\nimport { focusVisible } from '../../utils/focus-visible';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n  tag: 'nano-checkbox',\n  styleUrl: 'checkbox.scss',\n  scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n  private inputId = `nano-cb-${checkboxIds++}`;\n  private input: HTMLInputElement;\n  private shouldReport = false;\n\n  @Element() private host: HTMLNanoCheckboxElement;\n\n  @State() _invalid = false;\n  @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n  /** @internal */\n  @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n  /**\n   * checked property that can be used to get/set the value. accepts only boolean values\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  @Watch('checked')\n  async handleCheckedChange() {\n    this.input.checked = this.checked;\n\n    if (this.inputType === 'radio' && this.name && this.checked) {\n      let form = this.host.closest('form');\n      let radios: Element[];\n      if (form) {\n        radios = Array.from(\n          form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        );\n      } else {\n        radios = Array.from(\n          document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        ).filter((radio) => !radio.closest('form'));\n      }\n      radios.map((el: HTMLNanoCheckboxElement) => {\n        if (el !== this.host) el.checked = false;\n      });\n    }\n    this.nanoChange.emit({ value: this.value, checked: this.checked });\n  }\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n   * it's only present when `checked` is true.\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Set to true to make the field required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Controls the underlying field type and style.\n   */\n  @Prop({ reflect: true }) type:\n    | 'radio'\n    | 'checkbox'\n    | 'tag'\n    | 'segment'\n    | 'segment-pill' = 'checkbox';\n\n  @Watch('type')\n  typeChange() {\n    if (this.type === 'checkbox' || this.type === 'tag')\n      this.inputType = 'checkbox';\n    else this.inputType = 'radio';\n  }\n\n  /**\n   * label property that can be used to set the label text. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n  @Watch('indeterminate')\n  handleIndeterminateChange() {\n    this.checked = false;\n    this.input.indeterminate = this.indeterminate;\n  }\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    if (!this.shouldReport) return false;\n    return !this.input.validity.valid;\n  }\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Emited when the checkbox is toggled\n   */\n  @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  /**\n   * Emited when the checkbox is focused\n   */\n  @Event() nanoFocus: EventEmitter;\n\n  /**\n   * Emited when the checkbox is blurred\n   */\n  @Event() nanoBlur: EventEmitter;\n\n  // public methods\n\n  /**\n   * Returns the native input control\n   */\n  @Method()\n  async getInputElement() {\n    if (this.input) return this.input;\n  }\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n   */\n  @Method()\n  async reportValidity(\n    validateFirst: boolean = false\n  ): Promise<ControlValidity> {\n    if (validateFirst) {\n      this.shouldReport = true;\n      this._invalid = !this.input.reportValidity();\n    }\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.input.validationMessage,\n    };\n  }\n\n  /**\n   * Sets a custom validation message.\n   * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n   */\n  @Method()\n  async setError(message: string) {\n    if (!this.input) return;\n\n    this._invalid = !!message.length;\n    this.input.setCustomValidity(message);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) {\n      this.input.focus();\n      focusVisible.force(this.input);\n    }\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  @Method()\n  async removeFocus() {\n    if (this.input) {\n      this.input.blur();\n      focusVisible.force(this.input, false);\n    }\n  }\n\n  // private handlers\n\n  private handleInvalid = (ev: Event) => {\n    this.shouldReport = true;\n    this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n  };\n\n  private handleChange = (ev: InputEvent) => {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.indeterminate = false;\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  /* Although many radio components can be 'checked',\n  the underlying control may not be. Check */\n  private isRadioChecked() {\n    setTimeout(() => (this.checked = this.input.checked), 20);\n  }\n\n  // Stencil hooks\n\n  componentWillLoad() {\n    this.typeChange();\n  }\n\n  componentDidLoad() {\n    this.input.indeterminate = this.indeterminate;\n    this.isRadioChecked();\n    focusVisible.observe(this.input);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.input);\n  }\n\n  render() {\n    const labelId = this.inputId + '-lbl';\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        dir={isRtl ? 'rtl' : null}\n      >\n        <label\n          class={{\n            nanocb: true,\n            'nanocb--checked': this.checked,\n            'nanocb--invalid': this.invalid,\n            'nanocb--disabled': this.disabled,\n            'nanocb--focused': this.hasFocus,\n            'nanocb--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n        >\n          <input\n            type={this.inputType}\n            name={this.name}\n            required={this.required}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            aria-labelledby={labelId}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onChange={this.handleChange}\n            ref={(input) => (this.input = input)}\n            id={this.inputId}\n            onInvalid={this.handleInvalid}\n          />\n          <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n          <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n            {this.label && !!this.label.length && <span>{this.label}</span>}\n            <span hidden={this.label && !!this.label.length}>\n              <slot />\n            </span>\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n  ComponentInterface,\n  State,\n  Watch,\n  Method,\n  Element,\n  Host,\n  Listen,\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, ControlValidity } from '../../interface';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils';\nimport { focusVisible } from '../../utils/focus-visible';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n  tag: 'nano-checkbox',\n  styleUrl: 'checkbox.scss',\n  scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n  private inputId = `nano-cb-${checkboxIds++}`;\n  private input: HTMLInputElement;\n\n  @Element() private host: HTMLNanoCheckboxElement;\n  @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n  /** @internal */\n  @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n  /**\n   * checked property that can be used to get/set the value. accepts only boolean values\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  @Watch('checked')\n  async handleCheckedChange() {\n    this.input.checked = this.checked;\n\n    if (this.inputType === 'radio' && this.name && this.checked) {\n      let form = this.host.closest('form');\n      let radios: Element[];\n      if (form) {\n        radios = Array.from(\n          form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        );\n      } else {\n        radios = Array.from(\n          document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        ).filter((radio) => !radio.closest('form'));\n      }\n      radios.map((el: HTMLNanoCheckboxElement) => {\n        if (el !== this.host) el.checked = false;\n      });\n    }\n    this.nanoChange.emit({ value: this.value, checked: this.checked });\n  }\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n   * it's only present when `checked` is true.\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Set to true to make the field required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Controls the underlying field type and style.\n   */\n  @Prop({ reflect: true }) type:\n    | 'radio'\n    | 'checkbox'\n    | 'tag'\n    | 'segment'\n    | 'segment-pill' = 'checkbox';\n\n  @Watch('type')\n  typeChange() {\n    if (this.type === 'checkbox' || this.type === 'tag')\n      this.inputType = 'checkbox';\n    else this.inputType = 'radio';\n  }\n\n  /**\n   * label property that can be used to set the label text. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n  @Watch('indeterminate')\n  handleIndeterminateChange() {\n    this.checked = false;\n    this.input.indeterminate = this.indeterminate;\n  }\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.input) return '';\n    return this.input.validationMessage;\n  }\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * The form element to associate the input with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * Emited when the checkbox is toggled\n   */\n  @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  /**\n   * Emited when the checkbox is focused\n   */\n  @Event() nanoFocus: EventEmitter;\n\n  /**\n   * Emited when the checkbox is blurred\n   */\n  @Event() nanoBlur: EventEmitter;\n\n  // public methods\n\n  /**\n   * Returns the native input control\n   */\n  @Method()\n  async getInputElement() {\n    if (this.input) return this.input;\n  }\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n   */\n  @Method()\n  async reportValidity(\n    validateFirst: boolean = false\n  ): Promise<ControlValidity> {\n    if (validateFirst) this.input.reportValidity();\n    this._invalid = !this.input.validity.valid;\n\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.input.validationMessage,\n    };\n  }\n\n  /**\n   * Sets a custom validation message.\n   * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n   */\n  @Method()\n  async setError(message: string, updateStatus = true) {\n    if (!this.input) return;\n    if (updateStatus) this._invalid = !!message.length;\n    this.input.setCustomValidity(message);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) {\n      this.input.focus();\n      focusVisible.force(this.input);\n    }\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  @Method()\n  async removeFocus() {\n    if (this.input) {\n      this.input.blur();\n      focusVisible.force(this.input, false);\n    }\n  }\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.host.closest('form');\n    if (!form || e.target !== this.host.closest('form')) return;\n\n    this.checked = false;\n  }\n\n  // private handlers\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n  };\n\n  private handleChange = (ev: InputEvent) => {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.indeterminate = false;\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  /* Although many radio components can be 'checked',\n  the underlying control may not be. Check */\n  private isRadioChecked() {\n    requestAnimationFrame(() => (this.checked = this.input.checked));\n  }\n\n  // Stencil hooks\n\n  componentWillLoad() {\n    this.typeChange();\n  }\n\n  componentDidLoad() {\n    this.input.indeterminate = this.indeterminate;\n    this.isRadioChecked();\n    focusVisible.observe(this.input);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.input);\n  }\n\n  render() {\n    const labelId = this.inputId + '-lbl';\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        dir={isRtl ? 'rtl' : null}\n      >\n        <label\n          class={{\n            nanocb: true,\n            'nanocb--checked': this.checked,\n            'nanocb--invalid': this.invalid,\n            'nanocb--disabled': this.disabled,\n            'nanocb--focused': this.hasFocus,\n            'nanocb--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n        >\n          <input\n            type={this.inputType}\n            name={this.name}\n            form={this.form}\n            required={this.required}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            aria-labelledby={labelId}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onChange={this.handleChange}\n            ref={(input) => (this.input = input)}\n            id={this.inputId}\n            onInvalid={this.handleInvalid}\n          />\n          <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n          <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n            {this.label && !!this.label.length && <span>{this.label}</span>}\n            <span hidden={this.label && !!this.label.length}>\n              <slot />\n            </span>\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}