@nanoporetech-digital/components 5.10.0 → 5.11.1

package/dist/collection/components/algolia/lib/squirrelly/storage.js

@@ -0,0 +1,32 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { copyProps } from './utils';
+/* END TYPES */
+class Cacher {
+  constructor(cache) {
+    this.cache = cache;
+  }
+  define(key, val) {
+    this.cache[key] = val;
+  }
+  get(key) {
+    // string | array.
+    // TODO: allow array of keys to look down
+    // TODO: create plugin to allow referencing helpers, filters with dot notation
+    return this.cache[key];
+  }
+  remove(key) {
+    delete this.cache[key];
+  }
+  reset() {
+    this.cache = {};
+  }
+  load(cacheObj) {
+    // TODO: this will err with deep objects and `storage` or `plugins` keys.
+    // Update Feb 26: EDITED so it shouldn't err
+    copyProps(this.cache, cacheObj, true);
+  }
+}
+export { Cacher };
+//# sourceMappingURL=storage.js.map

package/dist/collection/components/algolia/lib/squirrelly/storage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage.js","sourceRoot":"","sources":["../../../../../src/components/algolia/lib/squirrelly/storage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AASpC,eAAe;AAEf,MAAM,MAAM;EACV,YAAoB,KAAc;IAAd,UAAK,GAAL,KAAK,CAAS;EAAG,CAAC;EACtC,MAAM,CAAC,GAAW,EAAE,GAAM;IACxB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;EACxB,CAAC;EACD,GAAG,CAAC,GAAW;IACb,kBAAkB;IAClB,yCAAyC;IACzC,8EAA8E;IAC9E,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;EACzB,CAAC;EACD,MAAM,CAAC,GAAW;IAChB,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;EACzB,CAAC;EACD,KAAK;IACH,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;EAClB,CAAC;EACD,IAAI,CAAC,QAAiB;IACpB,yEAAyE;IACzE,4CAA4C;IAC5C,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;EACxC,CAAC;CACF;AAED,OAAO,EAAE,MAAM,EAAE,CAAC","sourcesContent":["import { copyProps } from './utils';\n\n/* TYPES */\n\ninterface Dict<T> {\n  // Basically, an object where all keys point to a value of the same type\n  [key: string]: T;\n}\n\n/* END TYPES */\n\nclass Cacher<T> {\n  constructor(private cache: Dict<T>) {}\n  define(key: string, val: T) {\n    this.cache[key] = val;\n  }\n  get(key: string) {\n    // string | array.\n    // TODO: allow array of keys to look down\n    // TODO: create plugin to allow referencing helpers, filters with dot notation\n    return this.cache[key];\n  }\n  remove(key: string) {\n    delete this.cache[key];\n  }\n  reset() {\n    this.cache = {};\n  }\n  load(cacheObj: Dict<T>) {\n    // TODO: this will err with deep objects and `storage` or `plugins` keys.\n    // Update Feb 26: EDITED so it shouldn't err\n    copyProps(this.cache, cacheObj, true);\n  }\n}\n\nexport { Cacher };\n"]}

package/dist/collection/components/algolia/lib/squirrelly/utils.js

@@ -0,0 +1,102 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+// TODO: allow '-' to trim up until newline. Use [^\S\n\r] instead of \s
+// TODO: only include trimLeft polyfill if not in ES6
+/* END TYPES */
+export const promiseImpl = new Function('return this')().Promise;
+let asyncFunc = false;
+try {
+  asyncFunc = new Function('return (async function(){}).constructor')();
+}
+catch (e) {
+  // We shouldn't actually ever have any other errors, but...
+  if (!(e instanceof SyntaxError)) {
+    throw e;
+  }
+}
+export { asyncFunc };
+export function hasOwnProp(obj, prop) {
+  return Object.prototype.hasOwnProperty.call(obj, prop);
+}
+export function copyProps(toObj, fromObj, notConfig) {
+  for (const key in fromObj) {
+    if (hasOwnProp(fromObj, key)) {
+      if (fromObj[key] != null &&
+        typeof fromObj[key] == 'object' &&
+        (key === 'storage' || key === 'prefixes') &&
+        !notConfig // not called from Cache.load
+      ) {
+        // plugins or storage
+        // Note: this doesn't merge from initial config!
+        // Deep clone instead of assigning
+        // TODO: run checks on this
+        toObj[key] = copyProps(
+        /*toObj[key] ||*/ {}, fromObj[key]);
+      }
+      else {
+        toObj[key] = fromObj[key];
+      }
+    }
+  }
+  return toObj;
+}
+function trimWS(str, env, wsLeft, wsRight) {
+  let leftTrim;
+  let rightTrim;
+  if (typeof env.autoTrim === 'string') {
+    leftTrim = rightTrim = env.autoTrim;
+    // Don't need to check if env.autoTrim is false
+    // Because leftTrim, rightTrim are initialized as falsy
+  }
+  else if (Array.isArray(env.autoTrim)) {
+    // kinda confusing
+    // but _}} will trim the left side of the following string
+    leftTrim = env.autoTrim[1];
+    rightTrim = env.autoTrim[0];
+  }
+  if (wsLeft || wsLeft === false) {
+    leftTrim = wsLeft;
+  }
+  if (wsRight || wsRight === false) {
+    rightTrim = wsRight;
+  }
+  if (leftTrim === 'slurp' && rightTrim === 'slurp') {
+    return str.trim();
+  }
+  if (leftTrim === '_' || leftTrim === 'slurp') {
+    // console.log('trimming left' + leftTrim)
+    // full slurp
+    // eslint-disable-next-line no-extra-boolean-cast
+    if (!!String.prototype.trimLeft) {
+      str = str.trimLeft();
+    }
+    else {
+      str = str.replace(/^[\s\uFEFF\xA0]+/, '');
+    }
+  }
+  else if (leftTrim === '-' || leftTrim === 'nl') {
+    // console.log('trimming left nl' + leftTrim)
+    // nl trim
+    str = str.replace(/^(?:\n|\r|\r\n)/, '');
+  }
+  if (rightTrim === '_' || rightTrim === 'slurp') {
+    // console.log('trimming right' + rightTrim)
+    // full slurp
+    // eslint-disable-next-line no-extra-boolean-cast
+    if (!!String.prototype.trimRight) {
+      str = str.trimRight();
+    }
+    else {
+      str = str.replace(/[\s\uFEFF\xA0]+$/, '');
+    }
+  }
+  else if (rightTrim === '-' || rightTrim === 'nl') {
+    // console.log('trimming right nl' + rightTrim)
+    // nl trim
+    str = str.replace(/(?:\n|\r|\r\n)$/, ''); // TODO: make sure this gets \r\n
+  }
+  return str;
+}
+export { trimWS };
+//# sourceMappingURL=utils.js.map

package/dist/collection/components/algolia/lib/squirrelly/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/components/algolia/lib/squirrelly/utils.ts"],"names":[],"mappings":"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","sourcesContent":["// TODO: allow '-' to trim up until newline. Use [^\\S\\n\\r] instead of \\s\n// TODO: only include trimLeft polyfill if not in ES6\n\n/* TYPES */\n\nimport { SqrlConfig } from './config';\n\n/* END TYPES */\n\nexport const promiseImpl = new Function('return this')().Promise;\n\nlet asyncFunc: FunctionConstructor | false = false;\n\ntry {\n  asyncFunc = new Function('return (async function(){}).constructor')();\n} catch (e) {\n  // We shouldn't actually ever have any other errors, but...\n  if (!(e instanceof SyntaxError)) {\n    throw e;\n  }\n}\n\nexport { asyncFunc };\n\nexport function hasOwnProp(obj: object, prop: string) {\n  return Object.prototype.hasOwnProperty.call(obj, prop);\n}\n\nexport function copyProps<T>(toObj: T, fromObj: T, notConfig?: boolean) {\n  for (const key in fromObj) {\n    if (hasOwnProp(fromObj as unknown as object, key)) {\n      if (\n        fromObj[key] != null &&\n        typeof fromObj[key] == 'object' &&\n        (key === 'storage' || key === 'prefixes') &&\n        !notConfig // not called from Cache.load\n      ) {\n        // plugins or storage\n        // Note: this doesn't merge from initial config!\n        // Deep clone instead of assigning\n        // TODO: run checks on this\n        toObj[key] = copyProps(\n          /*toObj[key] ||*/ {} as T[Extract<keyof T, string>],\n          fromObj[key]\n        );\n      } else {\n        toObj[key] = fromObj[key];\n      }\n    }\n  }\n  return toObj;\n}\n\nfunction trimWS(\n  str: string,\n  env: SqrlConfig,\n  wsLeft: string | false,\n  wsRight?: string | false\n): string {\n  let leftTrim;\n  let rightTrim;\n\n  if (typeof env.autoTrim === 'string') {\n    leftTrim = rightTrim = env.autoTrim;\n    // Don't need to check if env.autoTrim is false\n    // Because leftTrim, rightTrim are initialized as falsy\n  } else if (Array.isArray(env.autoTrim)) {\n    // kinda confusing\n    // but _}} will trim the left side of the following string\n    leftTrim = env.autoTrim[1];\n    rightTrim = env.autoTrim[0];\n  }\n\n  if (wsLeft || wsLeft === false) {\n    leftTrim = wsLeft;\n  }\n\n  if (wsRight || wsRight === false) {\n    rightTrim = wsRight;\n  }\n\n  if (leftTrim === 'slurp' && rightTrim === 'slurp') {\n    return str.trim();\n  }\n\n  if (leftTrim === '_' || leftTrim === 'slurp') {\n    // console.log('trimming left' + leftTrim)\n    // full slurp\n    // eslint-disable-next-line no-extra-boolean-cast\n    if (!!String.prototype.trimLeft) {\n      str = str.trimLeft();\n    } else {\n      str = str.replace(/^[\\s\\uFEFF\\xA0]+/, '');\n    }\n  } else if (leftTrim === '-' || leftTrim === 'nl') {\n    // console.log('trimming left nl' + leftTrim)\n    // nl trim\n    str = str.replace(/^(?:\\n|\\r|\\r\\n)/, '');\n  }\n\n  if (rightTrim === '_' || rightTrim === 'slurp') {\n    // console.log('trimming right' + rightTrim)\n    // full slurp\n    // eslint-disable-next-line no-extra-boolean-cast\n    if (!!String.prototype.trimRight) {\n      str = str.trimRight();\n    } else {\n      str = str.replace(/[\\s\\uFEFF\\xA0]+$/, '');\n    }\n  } else if (rightTrim === '-' || rightTrim === 'nl') {\n    // console.log('trimming right nl' + rightTrim)\n    // nl trim\n    str = str.replace(/(?:\\n|\\r|\\r\\n)$/, ''); // TODO: make sure this gets \\r\\n\n  }\n\n  return str;\n}\n\nexport { trimWS };\n"]}

package/dist/collection/{utils → components/algolia/lib}/template.js

@@ -1,8 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import * as Sqrl from 'squirrelly';
-const squirrel = Sqrl;
+import * as squirrel from './squirrelly/browser';
 squirrel.filters.define('date_long', (str, options = {
   year: 'numeric',
   month: 'long',

package/dist/collection/components/algolia/lib/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/components/algolia/lib/template.ts"],"names":[],"mappings":"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","sourcesContent":["import * as squirrel from './squirrelly/browser';\nimport type { IndexResult, AlgoliaResultHit } from '../../../interface';\n\nsquirrel.filters.define(\n  'date_long',\n  (\n    str: string,\n    options: Intl.DateTimeFormatOptions = {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n    }\n  ) => {\n    if (!str) return;\n    const date = new Date(parseInt(str) * 1000);\n    str = date.toLocaleDateString('en-GB', options);\n    return str;\n  }\n);\n\nsquirrel.filters.define(\n  'date_short',\n  (str: string, format: string = 'd/m/y') => {\n    if (!str) return;\n    const date = new Date(parseInt(str) * 1000);\n    str = format.replace(/(d)/, date.getDate().toString());\n    str = str.replace(/(m)/, (date.getMonth() + 1).toString());\n    str = str.replace(/(y)/, date.getFullYear().toString());\n    return str;\n  }\n);\n\nsquirrel.filters.define('public_name', (str: string) => {\n  if (!str) return;\n  str = str\n    .split('_')\n    .map((val) => {\n      return val.length < 3 ? val.toUpperCase() : val;\n    })\n    .join(' ');\n  return str.charAt(0).toUpperCase() + str.slice(1);\n});\n\nsquirrel.filters.define('trim_to', (str: string, length: number = 100) => {\n  if (!str) return;\n  if (str.length <= length) return str;\n  return str.substr(0, length) + '...';\n});\n\nsquirrel.filters.define('classname', (str: string) => {\n  if (!str) return;\n  return str.replace(/[\\W]+/g, '');\n});\n\nsquirrel.filters.define(\n  'abs_url',\n  (str: string, index: IndexResult = null, result?: AlgoliaResultHit) => {\n    if (!index) return str;\n    if (!str) return;\n\n    let domain = undefined;\n    if (index.domains && result && result.origin) {\n      const found = index.domains.find((dm) => dm.origin === result.origin);\n      domain = found ? found.domain : '';\n    } else if (index.domain) domain = index.domain;\n\n    if (!domain) return str;\n    return str.match(/^http/) ? str : location.protocol + '//' + domain + str;\n  }\n);\n\nsquirrel.filters.define(\n  'replace',\n  (str: string, search?: string, replace?: string) =>\n    str.replace(search, replace)\n);\nsquirrel.filters.define('remove_spaces', (str: string) =>\n  str.replace(/ /g, '_')\n);\nsquirrel.filters.define(\n  'add_spaces',\n  (str: string) => (str = str.replace(/[_\\-]/g, ' '))\n);\nsquirrel.filters.define(\n  'capitalise',\n  (str: string) => (str = str.charAt(0).toUpperCase() + str.slice(1))\n);\nsquirrel.filters.define(\n  'lowercase',\n  (str: string) => (str = str.toLowerCase())\n);\n\nexport const Squirrel = squirrel;\n"]}

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

@@ -67,7 +67,7 @@
 }
 .nanogroupcb__error, .nanogroupcb__help, .nanogroupcb__more {
   display: block;
-  width: 100%;
+  inline-size: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -79,21 +79,26 @@
   line-height: 1.5;
   white-space: normal;
   display: block;
-  width: 100%;
+  inline-size: 100%;
 }
 :host([invalid]:not([invalid=false])) .nanogroupcb__legend {
   color: var(--label-color--invalid);
 }
+.nanogroupcb__legend.visually-hide {
+  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
+  block-size: 1px;
+  inline-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
 .nanogroupcb__more {
-  height: 1em;
-  -webkit-margin-before: calc(var(--label-padding) - var(--control-margin-bottom));
-          margin-block-start: calc(var(--label-padding) - var(--control-margin-bottom));
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-  -webkit-margin-after: var(--label-padding);
-          margin-block-end: var(--label-padding);
-  -webkit-margin-start: 3px;
-          margin-inline-start: 3px;
+  block-size: 1em;
+  margin-block: calc(var(--label-padding) - var(--control-margin-bottom)) var(--label-padding);
+  margin-inline: 3px 0;
   position: relative;
 }
 .nanogroupcb__error, .nanogroupcb__help {
@@ -143,9 +148,6 @@
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   .nanogroupcb__cbs::slotted(*),
 .nanogroupcb__cbs ::slotted(*) {
-    -webkit-margin-start: var(--control-margin-start);
-            margin-inline-start: var(--control-margin-start);
-    -webkit-margin-end: var(--control-margin-end);
-            margin-inline-end: var(--control-margin-end);
+    margin-inline: var(--control-margin-start) var(--control-margin-end);
   }
 }

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

@@ -9,6 +9,7 @@ import { debounce } from '../../utils/throttle';
  * It provides a convenient place to anchor a collective label and any validation issues.
  *
  * @slot - Used for grouping checkboxes inside the group wrapper
+ * @slot legend - if you do not set a legend attribute, you can use this slot for more complex markup
  * @slot helper - helper text to accompany the form field underneath.
  */
 export class CheckboxGroup {
@@ -55,6 +56,7 @@ export class CheckboxGroup {
     this.max = null;
     this.disabled = null;
     this.legend = '';
+    this.hideLegend = false;
     this._invalid = false;
     this.value = undefined;
   }
@@ -213,7 +215,8 @@ export class CheckboxGroup {
     requestAnimationFrame(() => (this.ignoreValueSet = false));
   }
   setCbValue() {
-    this.checkboxes.forEach((cb) => {
+    var _a;
+    (_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.forEach((cb) => {
       if (cb.value === this.value ||
         (Array.isArray(this.value) && this.value.includes(cb.value))) {
         cb.checked = true;
@@ -244,6 +247,7 @@ export class CheckboxGroup {
     this.customValidate = this.customValidate.bind(this);
     this.handleDisabledChange();
     this.handleSlotChange();
+    this.setCbValue();
   }
   connectedCallback() {
     this.attachSlotObserver();
@@ -262,7 +266,10 @@ export class CheckboxGroup {
   render() {
     const legendId = this.grpId + '-lbl';
     const moreId = this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';
-    return (h(Host, Object.assign({}, this.checkboxTypes), h("fieldset", { disabled: this.disabled, class: { nanogroupcb: true, 'show-error': this.showErrorMsg } }, h("legend", { class: "nanogroupcb__legend", id: legendId }, this.legend), h("div", { class: "nanogroupcb__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, h("slot", null)), (this.showInlineError || this.hasHelperSlot) && (h("div", { class: "nanogroupcb__more", id: moreId }, !!this.showInlineError ? (h("div", { class: "nanogroupcb__error" }, this.errorMessage)) : (''), h("div", { class: "nanogroupcb__help" }, h("slot", { name: "helper" })))))));
+    return (h(Host, Object.assign({}, this.checkboxTypes), h("fieldset", { disabled: this.disabled, class: { nanogroupcb: true, 'show-error': this.showErrorMsg } }, h("legend", { id: legendId, class: {
+        nanogroupcb__legend: true,
+        'visually-hide': this.hideLegend,
+      } }, h("slot", { name: "legend" }, this.legend)), h("div", { class: "nanogroupcb__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, h("slot", null)), (this.showInlineError || this.hasHelperSlot) && (h("div", { class: "nanogroupcb__more", id: moreId }, !!this.showInlineError ? (h("div", { class: "nanogroupcb__error" }, this.errorMessage)) : (''), h("div", { class: "nanogroupcb__help" }, h("slot", { name: "helper" })))))));
   }
   static get is() { return "nano-checkbox-group"; }
   static get encapsulation() { return "scoped"; }
@@ -398,6 +405,26 @@ export class CheckboxGroup {
         "reflect": false,
         "defaultValue": "''"
       },
+      "hideLegend": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Visually hide the legend but still available to screen readers."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "hide-legend",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "invalid": {
         "type": "boolean",
         "mutable": false,

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  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { getClassMap } from '../../utils/theme';\nimport { debounce } from '../../utils/throttle';\nimport type {\n  CssClassMap,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\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 ignoreValueSet = 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    '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  /** The current, collective checkbox value */\n  @Prop({ mutable: true }) value: string[] | string;\n\n  @Watch('value')\n  handleValuePropChange() {\n    this.nanoChange.emit(this.value);\n\n    // this change is coming from a checkbox being checked\n    // so don't then change the checkbox state\n    // (would cause an infinite loop)\n    if (this.ignoreValueSet) return;\n\n    // value has changed via prop directly, so update the checkbox's state\n    this.setCbValue();\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 (!this.checkboxes) return;\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 a nested checkbox changes\n   */\n  @Event() nanoChange: EventEmitter<string | string[]>;\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  @Listen('nanoChange')\n  handleValueChange(ev: CustomEvent) {\n    if (ev.target === this.host) return;\n    this.setInteralValue();\n  }\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    const onlyRadios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n\n    if (\n      onlyRadios &&\n      onlyRadios.length &&\n      (this.showErrorMsg || this.validateOn === 'dirty')\n    ) {\n      const required = onlyRadios.find((cb) => cb.required);\n      const 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    const onlyCbs = this.nativeCbs.filter((cb) => cb?.type === 'checkbox');\n    if (!onlyCbs || !onlyCbs.length) return;\n\n    const checked = onlyCbs.filter((cb) => cb.checked);\n    const 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, i) => {\n      const nativeCb = this.nativeCbs[i];\n      cb.setError('');\n      nativeCb.setCustomValidity('');\n\n      if (this.min && checked.length < this.min) {\n        this.errorMessage = `You must select a minimum of ${this.min} values.`;\n        invalid = true;\n      }\n      if (this.max && checked.length > this.max) {\n        this.errorMessage = `Only up to ${this.max} values are allowed.`;\n        invalid = true;\n      }\n\n      if (invalid) {\n        cb.setError(this.errorMessage, this.showErrorMsg);\n        // bit fugly. We're just doing this 'cos stencil\n        // methods are async and we want the validity message\n        // asap to keep things in sync\n        nativeCb.setCustomValidity(this.errorMessage);\n      }\n    });\n    return invalid;\n  }\n\n  @Watch('checkboxes')\n  handleComponentChange() {\n    if (!this.checkboxes?.length) return;\n\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 || !this.checkboxes?.length) return;\n    this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n  }\n\n  // private methods\n\n  private setInteralValue() {\n    this.ignoreValueSet = true;\n    const radios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n    if (radios?.length) {\n      this.value = radios.find((cb) => cb.checked)?.value || null;\n      return;\n    }\n    this.value = this.checkboxes.flatMap((cb) =>\n      cb.checked ? [cb.value] : []\n    );\n    requestAnimationFrame(() => (this.ignoreValueSet = false));\n  }\n\n  private setCbValue() {\n    this.checkboxes.forEach((cb) => {\n      if (\n        cb.value === this.value ||\n        (Array.isArray(this.value) && this.value.includes(cb.value))\n      ) {\n        cb.checked = true;\n      }\n    });\n  }\n\n  private attachSlotObserver() {\n    if (!!this.mo || !window['MutationObserver']) return;\n    const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n    mo.observe(this.host, { childList: true });\n  }\n\n  private async handleSlotChange() {\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      if (cb) 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    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.attachSlotObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n\n    this.nativeCbs.forEach((cb) => {\n      if (cb) cb.removeEventListener('invalid', this.handleInvalid);\n    });\n  }\n\n  componentDidLoad() {\n    this.handleComponentChange();\n  }\n\n  render() {\n    const legendId = this.grpId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';\n\n    return (\n      <Host {...this.checkboxTypes}>\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  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { getClassMap } from '../../utils/theme';\nimport { debounce } from '../../utils/throttle';\nimport type {\n  CssClassMap,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\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 legend - if you do not set a legend attribute, you can use this slot for more complex markup\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 ignoreValueSet = 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    '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   * Visually hide the legend but still available to screen readers.\n   */\n  @Prop() hideLegend?: boolean = false;\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  /** The current, collective checkbox value */\n  @Prop({ mutable: true }) value: string[] | string;\n\n  @Watch('value')\n  handleValuePropChange() {\n    this.nanoChange.emit(this.value);\n\n    // this change is coming from a checkbox being checked\n    // so don't then change the checkbox state\n    // (would cause an infinite loop)\n    if (this.ignoreValueSet) return;\n\n    // value has changed via prop directly, so update the checkbox's state\n    this.setCbValue();\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 (!this.checkboxes) return;\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 a nested checkbox changes\n   */\n  @Event() nanoChange: EventEmitter<string | string[]>;\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  @Listen('nanoChange')\n  handleValueChange(ev: CustomEvent) {\n    if (ev.target === this.host) return;\n    this.setInteralValue();\n  }\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    const onlyRadios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n\n    if (\n      onlyRadios &&\n      onlyRadios.length &&\n      (this.showErrorMsg || this.validateOn === 'dirty')\n    ) {\n      const required = onlyRadios.find((cb) => cb.required);\n      const 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    const onlyCbs = this.nativeCbs.filter((cb) => cb?.type === 'checkbox');\n    if (!onlyCbs || !onlyCbs.length) return;\n\n    const checked = onlyCbs.filter((cb) => cb.checked);\n    const 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, i) => {\n      const nativeCb = this.nativeCbs[i];\n      cb.setError('');\n      nativeCb.setCustomValidity('');\n\n      if (this.min && checked.length < this.min) {\n        this.errorMessage = `You must select a minimum of ${this.min} values.`;\n        invalid = true;\n      }\n      if (this.max && checked.length > this.max) {\n        this.errorMessage = `Only up to ${this.max} values are allowed.`;\n        invalid = true;\n      }\n\n      if (invalid) {\n        cb.setError(this.errorMessage, this.showErrorMsg);\n        // bit fugly. We're just doing this 'cos stencil\n        // methods are async and we want the validity message\n        // asap to keep things in sync\n        nativeCb.setCustomValidity(this.errorMessage);\n      }\n    });\n    return invalid;\n  }\n\n  @Watch('checkboxes')\n  handleComponentChange() {\n    if (!this.checkboxes?.length) return;\n\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 || !this.checkboxes?.length) return;\n    this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n  }\n\n  // private methods\n\n  private setInteralValue() {\n    this.ignoreValueSet = true;\n    const radios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n    if (radios?.length) {\n      this.value = radios.find((cb) => cb.checked)?.value || null;\n      return;\n    }\n    this.value = this.checkboxes.flatMap((cb) =>\n      cb.checked ? [cb.value] : []\n    );\n    requestAnimationFrame(() => (this.ignoreValueSet = false));\n  }\n\n  private setCbValue() {\n    this.checkboxes?.forEach((cb) => {\n      if (\n        cb.value === this.value ||\n        (Array.isArray(this.value) && this.value.includes(cb.value))\n      ) {\n        cb.checked = true;\n      }\n    });\n  }\n\n  private attachSlotObserver() {\n    if (!!this.mo || !window['MutationObserver']) return;\n    const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n    mo.observe(this.host, { childList: true });\n  }\n\n  private async handleSlotChange() {\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      if (cb) 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    this.handleSlotChange();\n    this.setCbValue();\n  }\n\n  connectedCallback() {\n    this.attachSlotObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n\n    this.nativeCbs.forEach((cb) => {\n      if (cb) cb.removeEventListener('invalid', this.handleInvalid);\n    });\n  }\n\n  componentDidLoad() {\n    this.handleComponentChange();\n  }\n\n  render() {\n    const legendId = this.grpId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';\n\n    return (\n      <Host {...this.checkboxTypes}>\n        <fieldset\n          disabled={this.disabled}\n          class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n        >\n          <legend\n            id={legendId}\n            class={{\n              nanogroupcb__legend: true,\n              'visually-hide': this.hideLegend,\n            }}\n          >\n            <slot name=\"legend\">{this.legend}</slot>\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

@@ -60,7 +60,7 @@
   --switch-inactive-color: rgb(181 174 167 / 70%);
   --switch-active-color: #007495;
   display: inline-block;
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 :host * {
   box-sizing: inherit;
@@ -120,9 +120,9 @@
   border-radius: var(--cb-border-radius, 3px);
   font-size: var(--check-base-size);
   position: relative;
-  height: 1.5em;
-  width: 1.5em;
-  min-width: 1.5em;
+  block-size: 1.5em;
+  inline-size: 1.5em;
+  min-inline-size: 1.5em;
   border: var(--check-border-style);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 }
@@ -132,8 +132,8 @@
   content: "";
   inset-inline-start: calc(0.725em - var(--check-border-size));
   inset-block-start: calc(0.725em - var(--check-border-size));
-  width: 0;
-  height: 0;
+  inline-size: 0;
+  block-size: 0;
   border: 2px solid var(--check-checked-higlight-color);
   transform: scale(0);
 }
@@ -150,8 +150,8 @@
   content: "";
   inset-inline-start: calc(0.825em - var(--check-border-size));
   inset-block-start: calc(0.825em - var(--check-border-size));
-  height: 0;
-  width: 0;
+  block-size: 0;
+  inline-size: 0;
   border: solid var(--check-checked-higlight-color);
   border-width: 0 0.1875em 0.1875em 0;
   transform: rotate(0deg) scale(0);
@@ -163,8 +163,8 @@
 }
 .nanocb__input--switch {
   border-radius: 1em !important;
-  width: 2.4em;
-  height: 1.3em;
+  inline-size: 2.4em;
+  block-size: 1.3em;
   background: var(--switch-inactive-color);
 }
 :host([type=switch]:not([disabled])) .nanocb__input--switch:hover::after {
@@ -175,8 +175,8 @@
   content: "";
   display: block;
   border-radius: inherit;
-  height: 80%;
-  width: 40%;
+  block-size: 80%;
+  inline-size: 40%;
   background: var(--check-checked-higlight-color);
   transform-origin: left;
   inset-inline-start: 6%;
@@ -265,8 +265,8 @@
   opacity: 1;
   inset-inline-start: calc(0.575em - var(--check-border-size));
   inset-block-start: calc(0.2875em - var(--check-border-size));
-  width: 0.375em;
-  height: 0.75em;
+  inline-size: 0.375em;
+  block-size: 0.75em;
   border-radius: 0;
 }
 .nanocb input:checked ~ .nanocb__input--tag + .nanocb__label::after {
@@ -291,8 +291,8 @@
   opacity: 1;
   inset-inline-start: 0.3125em;
   inset-block-start: 0;
-  width: 0.7em;
-  height: 0.7em;
+  inline-size: 0.7em;
+  block-size: 0.7em;
   border-radius: 0;
 }
 .nanocb__label {
@@ -314,20 +314,18 @@
   background: var(--check-bg-color);
   color: var(--segment-color);
   align-items: center;
-  width: 100%;
+  inline-size: 100%;
 }
 :host(:first-of-type) .nanocb__label--segment-pill {
   border-start-start-radius: var(--segment-border-radius);
   border-start-end-radius: 0;
   border-end-end-radius: 0;
   border-end-start-radius: var(--segment-border-radius);
-  -webkit-border-end: none;
-          border-inline-end: none;
+  border-inline-end: none;
 }
 :host(:not(:last-of-type):not(:first-of-type)) .nanocb__label--segment-pill {
   border-radius: 0;
-  -webkit-border-end: none;
-          border-inline-end: none;
+  border-inline-end: none;
 }
 :host(:last-of-type) .nanocb__label--segment-pill {
   border-start-start-radius: 0;
@@ -350,7 +348,7 @@
   background-color: var(--tagbox-bg-color);
   transition: all 0.2s;
   border-radius: var(--cb-border-radius);
-  width: 100%;
+  inline-size: 100%;
 }
 .nanocb__label--tag::after {
   content: "+";

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

@@ -46,6 +46,8 @@ export class Checkbox {
     this.form = undefined;
   }
   async handleCheckedChange() {
+    if (!this.input)
+      return;
     this.input.checked = this.checked;
     if (this.inputType === 'radio' && this.name && this.checked) {
       const form = this.host.closest('form');

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,KAAK,EAEL,CAAC,EAED,KAAK,EACL,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAOvD,IAAI,WAAW,GAAG,CAAC,CAAC;AAEpB;;;;;;GAMG;AAMH,MAAM,OAAO,QAAQ;;IACX,YAAO,GAAG,WAAW,WAAW,EAAE,EAAE,CAAC;IA+M7C,mBAAmB;IAEX,kBAAa,GAAG,CAAC,EAAS,EAAE,EAAE;MACpC,IAAI,CAAC,QAAQ,GAAG,CAAE,EAAE,CAAC,MAA2B,CAAC,QAAQ,CAAC,KAAK,CAAC;IAClE,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,EAAc,EAAE,EAAE;MACxC,IAAI,CAAC,OAAO,GAAI,EAAE,CAAC,MAA2B,CAAC,OAAO,CAAC;MACvD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;qBA9NyC,UAAU;oBAGF,KAAK;mBAKG,KAAK;oBA4BnB,KAAK;iBAMT,IAAI;;oBAUA,KAAK;gBAW7B,UAAU;;yBAiBkC,KAAK;oBAgBlD,KAAK;;;;EArFzB,KAAK,CAAC,mBAAmB;IACvB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAElC,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE;MAC3D,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;MACvC,IAAI,KAAgB,CAAC;MACrB,IAAI,IAAI,EAAE;QACR,KAAK,GAAG,KAAK,CAAC,IAAI,CAChB,IAAI,CAAC,gBAAgB,CAAC,uBAAuB,IAAI,CAAC,IAAI,IAAI,CAAC,CAC5D,CAAC;OACH;WAAM;QACL,KAAK,GAAG,KAAK,CAAC,IAAI,CAChB,QAAQ,CAAC,gBAAgB,CAAC,uBAAuB,IAAI,CAAC,IAAI,IAAI,CAAC,CAChE,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;OAC7C;MACD,KAAK,CAAC,GAAG,CAAC,CAAC,EAA2B,EAAE,EAAE;QACxC,IAAI,EAAE,KAAK,IAAI,CAAC,IAAI;UAAE,EAAE,CAAC,OAAO,GAAG,KAAK,CAAC;MAC3C,CAAC,CAAC,CAAC;KACJ;IACD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;EACrE,CAAC;EAmCD,UAAU;IACR,IAAI,CAAC,UAAU,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;MACnD,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC;;MACzB,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;EAChC,CAAC;EAaD,yBAAyB;IACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;EAChD,CAAC;EAED;;;KAGG;EACH,IACI,OAAO;IACT,OAAO,IAAI,CAAC,QAAQ,CAAC;EACvB,CAAC;EAGD;;KAEG;EACH,IACI,eAAe;IACjB,IAAI,CAAC,IAAI,CAAC,KAAK;MAAE,OAAO,EAAE,CAAC;IAC3B,OAAO,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC;EACtC,CAAC;EA2BD,iBAAiB;EAEjB;;KAEG;EAEH,KAAK,CAAC,eAAe;IACnB,IAAI,IAAI,CAAC,KAAK;MAAE,OAAO,IAAI,CAAC,KAAK,CAAC;EACpC,CAAC;EAED;;;;KAIG;EAEH,KAAK,CAAC,cAAc,CAClB,gBAAyB,KAAK;IAE9B,IAAI,aAAa;MAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;IAC/C,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;IAE3C,OAAO;MACL,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;MACtB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB;KAC3C,CAAC;EACJ,CAAC;EAED;;;KAGG;EAEH,KAAK,CAAC,QAAQ,CAAC,OAAe,EAAE,YAAY,GAAG,IAAI;IACjD,IAAI,CAAC,IAAI,CAAC,KAAK;MAAE,OAAO;IACxB,IAAI,YAAY;MAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC;IACnD,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;EACxC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;MACnB,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAChC;EACH,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,WAAW;IACf,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;MAClB,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;KACvC;EACH,CAAC;EAGD,OAAO,CAAC,CAAC;IACP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI;MACpB,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC;MACzC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC9B,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;MAAE,OAAO;IAE5D,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EACvB,CAAC;EAuBD;6CAC2C;EACnC,cAAc;IACpB,qBAAqB,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;EACnE,CAAC;EAED,gBAAgB;EAEhB,iBAAiB;IACf,IAAI,CAAC,UAAU,EAAE,CAAC;EACpB,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;IAC9C,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACnC,CAAC;EAED,oBAAoB;IAClB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACrC,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;IAEtC,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,oBAAO,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC;MAC9C,aACE,KAAK,EAAE;UACL,MAAM,EAAE,IAAI;UACZ,iBAAiB,EAAE,IAAI,CAAC,OAAO;UAC/B,iBAAiB,EAAE,IAAI,CAAC,OAAO;UAC/B,kBAAkB,EAAE,IAAI,CAAC,QAAQ;UACjC,iBAAiB,EAAE,IAAI,CAAC,QAAQ;UAChC,uBAAuB,EAAE,IAAI,CAAC,aAAa;SAC5C,EACD,OAAO,EAAE,IAAI,CAAC,OAAO;QAErB,aACE,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,qBACA,OAAO,EACxB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,GAAG,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,EACpC,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,SAAS,EAAE,IAAI,CAAC,aAAa,GAC7B;QACF,YAAM,KAAK,EAAE,+BAA+B,GAAG,IAAI,CAAC,IAAI,GAAS;QAEjE,WAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,+BAA+B,GAAG,IAAI,CAAC,IAAI;UACjE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,gBAAO,IAAI,CAAC,KAAK,CAAQ;UAC/D,YAAM,MAAM,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;YAC7C,eAAQ,CACH,CACH,CACA,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport type {\n  CheckboxChangeEventDetail,\n  ControlValidity,\n  Color,\n} from '../../interface';\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      const form = this.host.closest('form');\n      let ctrls: Element[];\n      if (form) {\n        ctrls = Array.from(\n          form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        );\n      } else {\n        ctrls = Array.from(\n          document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        ).filter((radio) => !radio.closest('form'));\n      }\n      ctrls.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    | 'switch'\n    | 'segment-pill' = 'checkbox';\n\n  @Watch('type')\n  typeChange() {\n    if (['checkbox', 'switch', 'tag'].includes(this.type))\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\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\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"]}
+{"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 { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport type {\n  CheckboxChangeEventDetail,\n  ControlValidity,\n  Color,\n} from '../../interface';\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    if (!this.input) return;\n\n    this.input.checked = this.checked;\n\n    if (this.inputType === 'radio' && this.name && this.checked) {\n      const form = this.host.closest('form');\n      let ctrls: Element[];\n      if (form) {\n        ctrls = Array.from(\n          form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        );\n      } else {\n        ctrls = Array.from(\n          document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        ).filter((radio) => !radio.closest('form'));\n      }\n      ctrls.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    | 'switch'\n    | 'segment-pill' = 'checkbox';\n\n  @Watch('type')\n  typeChange() {\n    if (['checkbox', 'switch', 'tag'].includes(this.type))\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\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\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"]}