@nanoporetech-digital/components 2.7.0 → 2.10.0

package/dist/collection/collection-manifest.json

@@ -17,6 +17,7 @@
     "./components/details/details.js",
     "./components/dialog/dialog.js",
     "./components/drawer/drawer.js",
+    "./components/field-validator/field-validator.js",
     "./components/file-upload/file-upload.js",
     "./components/global-nav/global-nav.js",
     "./components/global-search-results/global-search-results.js",
@@ -40,7 +41,7 @@
     "./components/slides/slides.js",
     "./components/spinner/spinner.js",
     "./components/split-pane/split-pane.js",
-    "./components/sticky/sticker.js",
+    "./components/sticker/sticker.js",
     "./components/tabs/tab-content.js",
     "./components/tabs/tab-group.js",
     "./components/tabs/tab.js",

package/dist/collection/components/accordion/accordion.js

@@ -47,7 +47,7 @@ export class Accordion {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },

package/dist/collection/components/alert/alert.js

@@ -305,7 +305,7 @@ export class Alert {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },

package/dist/collection/components/algolia/algolia-filter.js

@@ -362,7 +362,7 @@ export class AlgoliaFilter {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },
@@ -405,7 +405,7 @@ export class AlgoliaFilter {
         "references": {
           "FilterChangeEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/algolia/algolia-input.js

@@ -228,7 +228,7 @@ export class AlgoliaInput {
         "references": {
           "SearchIndex": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -349,7 +349,7 @@ export class AlgoliaInput {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },
@@ -390,7 +390,7 @@ export class AlgoliaInput {
         "references": {
           "AloliaSearchResultDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -410,7 +410,7 @@ export class AlgoliaInput {
         "references": {
           "AloliaSearchResultDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -430,7 +430,7 @@ export class AlgoliaInput {
         "references": {
           "AloliaSearchResultDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/algolia/algolia-results.js

@@ -251,7 +251,7 @@ export class AlgoliaResults {
         "references": {
           "PageChangeEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/algolia/algolia.js

@@ -738,7 +738,7 @@ export class Algolia {
         "references": {
           "SearchIndex": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -982,7 +982,7 @@ export class Algolia {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },
@@ -1047,7 +1047,7 @@ export class Algolia {
         "references": {
           "IndexResult": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1067,7 +1067,7 @@ export class Algolia {
         "references": {
           "IndexResult": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1087,7 +1087,7 @@ export class Algolia {
         "references": {
           "IndexResult": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1107,7 +1107,7 @@ export class Algolia {
         "references": {
           "IndexResult": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

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

@@ -25,7 +25,7 @@
    * @prop --label-color: Default var(--nano-input-label-color, "currentColor");
    * @prop --label-color--invalid: Default var(--nano-input-label-color-invalid, "currentColor");
    * @prop --label-font-size: Default var(--nano-input-label-color, 1em);
-   * @prop --label-padding: space between legend and control. Default var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));
+   * @prop --label-padding: space between legend and control. Default var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));
   */
   --control-margin-top: 0;
   --control-margin-end: 0;
@@ -37,7 +37,7 @@
   --label-color: var(--nano-input-label-color, "currentColor");
   --label-color--invalid: var(--nano-input-label-color-invalid, "currentColor");
   --label-font-size: var(--nano-input-label-color, 1em);
-  --label-padding: var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));
+  --label-padding: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));
   display: block;
 }
 :host * {
@@ -49,7 +49,7 @@
 :host([types-segment]) {
   --control-margin-top: 0;
   --control-margin-end: 8px;
-  --control-margin-bottom: 8px;
+  --control-margin-bottom: 6px;
   --control-margin-start: 0;
 }
 
@@ -57,7 +57,7 @@
 :host([types-radio]) {
   --control-margin-top: 0;
   --control-margin-end: 10px;
-  --control-margin-bottom: 8px;
+  --control-margin-bottom: 6px;
   --control-margin-start: 0;
 }
 
@@ -66,7 +66,7 @@
   margin: 0;
   padding: 0;
 }
-.nanogroupcb__legend, .nanogroupcb__error, .nanogroupcb__help, .nanogroupcb__more {
+.nanogroupcb__error, .nanogroupcb__help, .nanogroupcb__more {
   display: block;
   width: 100%;
   overflow: hidden;
@@ -77,7 +77,10 @@
   font-size: var(--label-font-size);
   padding: 0 0 var(--label-padding);
   margin: 0;
-  line-height: 1;
+  line-height: 1.5;
+  white-space: normal;
+  display: block;
+  width: 100%;
 }
 :host([invalid]:not([invalid=false])) .nanogroupcb__legend {
   color: var(--label-color--invalid);

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/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/LL4gZL7K/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -392,7 +452,7 @@ export class CheckboxGroup {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/LL4gZL7K/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;