@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/cjs/nano-checkbox-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nano-checkbox-group.entry.cjs.js","mappings":"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","names":["getClassMap","forceUpdate","debounce","h","Host"],"sources":["./src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","./src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n  /**\n   * @prop --control-margin-top: Margin between controls. Default depends on control type;\n   * @prop --control-margin-end: Margin between controls. Default depends on control type;\n   * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n   * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n   * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default #{$input-help-font-size};\n\n   * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{$input-help-color};\n\n   * @prop --label-color: Default #{$label-color};\n   * @prop --label-color--invalid: Default #{$label-color-invalid};\n   * @prop --label-font-size: Default #{$label-font-size};\n   * @prop --label-padding: space between legend and control. Default #{$input-padding-bottom};\n  */\n\n  --control-margin-top: 0;\n  --control-margin-end: 0;\n  --control-margin-bottom: 0;\n  --control-margin-start: 0;\n  --invalid-msg-color: #{nano-color(danger, base)};\n  --invalid-msg-font-size: #{$input-help-font-size};\n  --help-msg-color: #{$input-help-color};\n  --label-color: #{$label-color};\n  --label-color--invalid: #{$label-color-invalid};\n  --label-font-size: #{$label-font-size};\n  --label-padding: #{$input-padding-bottom};\n\n  display: block;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host([types-tag]),\n:host([types-segment]) {\n  --control-margin-top: 0;\n  --control-margin-end: 8px;\n  --control-margin-bottom: 8px;\n  --control-margin-start: 0;\n}\n\n:host([types-checkbox]),\n:host([types-radio]) {\n  --control-margin-top: 0;\n  --control-margin-end: 10px;\n  --control-margin-bottom: 8px;\n  --control-margin-start: 0;\n}\n\n.nanogroupcb {\n  border: none;\n  margin: 0;\n  padding: 0;\n\n  &__legend,\n  &__error,\n  &__help,\n  &__more {\n    display: block;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__legend {\n    font-size: var(--label-font-size);\n    padding: 0 0 var(--label-padding);\n    margin: 0;\n    line-height: 1;\n\n    :host([invalid]:not([invalid='false'])) & {\n      color: var(--label-color--invalid);\n    }\n  }\n\n  &__more {\n    height: 1em;\n\n    @include margin(\n      calc(var(--label-padding) - var(--control-margin-bottom)),\n      0,\n      var(--label-padding),\n      3px\n    );\n\n    position: relative;\n  }\n\n  &__error,\n  &__help {\n    top: 0;\n    left: 0;\n    position: absolute;\n    font-size: var(--invalid-msg-font-size);\n    line-height: 1.2;\n    transition: 0.3s ease-out opacity;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__error {\n    color: var(--invalid-msg-color);\n    font-stretch: condensed;\n    opacity: 0;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__help {\n    font-style: italic;\n    opacity: 1;\n    color: var(--help-msg-color);\n\n    .show-error & {\n      opacity: 0;\n    }\n  }\n\n  &__cbs {\n    margin: 0;\n    padding: 0;\n    line-height: 1;\n    display: flex;\n    flex-wrap: wrap;\n\n    ::slotted(*:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n      --check-base-size: 1.2em;\n\n      font-size: 0.85em;\n    }\n\n    ::slotted(*) {\n      margin-left: var(--control-margin-start);\n      margin-top: var(--control-margin-top);\n      margin-right: var(--control-margin-end);\n      margin-bottom: var(--control-margin-bottom);\n    }\n  }\n}\n\n/* autoprefixer: ignore next */\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n  .nanogroupcb__cbs {\n    &::slotted(*),\n    ::slotted(*) {\n      margin-left: unset;\n      margin-right: unset;\n      margin-inline-start: var(--control-margin-start);\n      margin-inline-end: var(--control-margin-end);\n    }\n  }\n}\n","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  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":"nano-checkbox-group.entry.cjs.js","mappings":"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","names":["getClassMap","forceUpdate","debounce","h","Host"],"sources":["./src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","./src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n  /**\n   * @prop --control-margin-top: Margin between controls. Default depends on control type;\n   * @prop --control-margin-end: Margin between controls. Default depends on control type;\n   * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n   * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n   * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default #{$input-help-font-size};\n\n   * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{$input-help-color};\n\n   * @prop --label-color: Default #{$label-color};\n   * @prop --label-color--invalid: Default #{$label-color-invalid};\n   * @prop --label-font-size: Default #{$label-font-size};\n   * @prop --label-padding: space between legend and control. Default #{$input-padding-bottom};\n  */\n\n  --control-margin-top: 0;\n  --control-margin-end: 0;\n  --control-margin-bottom: 0;\n  --control-margin-start: 0;\n  --invalid-msg-color: #{nano-color(danger, base)};\n  --invalid-msg-font-size: #{$input-help-font-size};\n  --help-msg-color: #{$input-help-color};\n  --label-color: #{$label-color};\n  --label-color--invalid: #{$label-color-invalid};\n  --label-font-size: #{$label-font-size};\n  --label-padding: #{$input-padding-bottom};\n\n  display: block;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host([types-tag]),\n:host([types-segment]) {\n  --control-margin-top: 0;\n  --control-margin-end: 8px;\n  --control-margin-bottom: 8px;\n  --control-margin-start: 0;\n}\n\n:host([types-checkbox]),\n:host([types-radio]) {\n  --control-margin-top: 0;\n  --control-margin-end: 10px;\n  --control-margin-bottom: 8px;\n  --control-margin-start: 0;\n}\n\n.nanogroupcb {\n  border: none;\n  margin: 0;\n  padding: 0;\n\n  &__legend,\n  &__error,\n  &__help,\n  &__more {\n    display: block;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__legend {\n    font-size: var(--label-font-size);\n    padding: 0 0 var(--label-padding);\n    margin: 0;\n    line-height: 1;\n\n    :host([invalid]:not([invalid='false'])) & {\n      color: var(--label-color--invalid);\n    }\n  }\n\n  &__more {\n    height: 1em;\n\n    @include margin(\n      calc(var(--label-padding) - var(--control-margin-bottom)),\n      0,\n      var(--label-padding),\n      3px\n    );\n\n    position: relative;\n  }\n\n  &__error,\n  &__help {\n    top: 0;\n    left: 0;\n    position: absolute;\n    font-size: var(--invalid-msg-font-size);\n    line-height: 1.2;\n    transition: 0.3s ease-out opacity;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__error {\n    color: var(--invalid-msg-color);\n    font-stretch: condensed;\n    opacity: 0;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__help {\n    font-style: italic;\n    opacity: 1;\n    color: var(--help-msg-color);\n\n    .show-error & {\n      opacity: 0;\n    }\n  }\n\n  &__cbs {\n    margin: 0;\n    padding: 0;\n    line-height: 1;\n    display: flex;\n    flex-wrap: wrap;\n\n    ::slotted(*:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n      --check-base-size: 1.2em;\n\n      font-size: 0.85em;\n    }\n\n    ::slotted(*) {\n      margin-left: var(--control-margin-start);\n      margin-top: var(--control-margin-top);\n      margin-right: var(--control-margin-end);\n      margin-bottom: var(--control-margin-bottom);\n    }\n  }\n}\n\n/* autoprefixer: ignore next */\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n  .nanogroupcb__cbs {\n    &::slotted(*),\n    ::slotted(*) {\n      margin-left: unset;\n      margin-right: unset;\n      margin-inline-start: var(--control-margin-start);\n      margin-inline-end: var(--control-margin-end);\n    }\n  }\n}\n","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}

package/dist/cjs/nano-checkbox.cjs.entry.js

@@ -9,7 +9,7 @@ const index = require('./index-cb62df44.js');
 const theme = require('./theme-7fa08a2b.js');
 const focusVisible = require('./focus-visible-569511f0.js');
 
-const checkboxCss = ".sc-nano-checkbox-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-checkbox-h{--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  #fac6c3);--padding:initial;--check-bg-color:#fff;--check-border-style:1px solid #b5aea7;--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--tagbox-rgb:144, 198, 231;--tagbox-border-color:rgba(var(--tagbox-rgb), 0.5);--tagbox-bg-color:rgba(var(--tagbox-rgb), 0.2);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgba(0, 0, 0, 0.2);--cb-border-radius:2px;--radio-border-radius:50%;display:inline-block;max-width:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{-webkit-box-sizing:inherit;box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-style:1px solid rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgba(var(--tagbox-rgb), 0.8);--tagbox-bg-color:rgba(var(--tagbox-rgb), 0.5)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104, 117, 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{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;border:var(--check-border-style);-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:\"\";left:0.625em;top:0.625em;width:0;height:0;border:2px solid var(--check-checked-higlight-color);-webkit-transform:scale(0);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:\"\";left:0.75em;top:0.75em;height:0;width:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;-webkit-transform:rotate(0deg) scale(0);transform:rotate(0deg) scale(0);opacity:1;-webkit-transition:all 0.15s ease-out;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em 0}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow);box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{-webkit-box-shadow:var(--invalid-shadow);box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);-webkit-box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);border-width:0.3125em;background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);opacity:1;left:0.475em;top:0.1875em;width:0.375em;height:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{-webkit-transform:scale(1);transform:scale(1);opacity:1;left:0.3125em;top:0;width:0.7em;height:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-left:10px;padding-right:0;padding-top:0;padding-bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-stretch:condensed;line-height:1;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanocb__label.sc-nano-checkbox{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:0;padding-inline-end:0}}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);-webkit-box-shadow:var(--segment-shadow);box-shadow:var(--segment-shadow);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.sc-nano-checkbox-h:first-of-type:not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius) 0 0 var(--segment-border-radius);border-right:none}.sc-nano-checkbox-h:first-of-type[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 var(--segment-border-radius) var(--segment-border-radius) 0;border-left:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type):not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 0 0 0;border-right:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type)[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-left:none}.sc-nano-checkbox-h:last-of-type:not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 var(--segment-border-radius) var(--segment-border-radius) 0}.sc-nano-checkbox-h:last-of-type[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius) 0 0 var(--segment-border-radius)}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:500;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);-webkit-transition:all 0.2s;transition:all 0.2s;border-radius:var(--cb-border-radius);width:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:\"+\";margin-left:0.3125em;margin-right:0;margin-top:0;margin-bottom:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:center;transform-origin:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanocb__label--tag.sc-nano-checkbox::after{margin-left:unset;margin-right:unset;-webkit-margin-start:0.3125em;margin-inline-start:0.3125em;-webkit-margin-end:0;margin-inline-end:0}}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}";
+const checkboxCss = ".sc-nano-checkbox-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{--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  #fac6c3);--padding:initial;--check-bg-color:#fff;--check-border-style:1px solid #b5aea7;--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--tagbox-rgb:144, 198, 231;--tagbox-border-color:rgba(var(--tagbox-rgb), 0.5);--tagbox-bg-color:rgba(var(--tagbox-rgb), 0.2);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgba(0, 0, 0, 0.2);--cb-border-radius:2px;--radio-border-radius:50%;display:inline-block;max-width:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{-webkit-box-sizing:inherit;box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-style:1px solid rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgba(var(--tagbox-rgb), 0.8);--tagbox-bg-color:rgba(var(--tagbox-rgb), 0.5)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104, 117, 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{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;border:var(--check-border-style);-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:\"\";left:0.625em;top:0.625em;width:0;height:0;border:2px solid var(--check-checked-higlight-color);-webkit-transform:scale(0);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:\"\";left:0.75em;top:0.75em;height:0;width:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;-webkit-transform:rotate(0deg) scale(0);transform:rotate(0deg) scale(0);opacity:1;-webkit-transition:all 0.15s ease-out;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em 0}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow);box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{-webkit-box-shadow:var(--invalid-shadow);box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);-webkit-box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);border-width:0.3125em;background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);opacity:1;left:0.475em;top:0.1875em;width:0.375em;height:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{-webkit-transform:scale(1);transform:scale(1);opacity:1;left:0.3125em;top:0;width:0.7em;height:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-left:10px;padding-right:0;padding-top:0;padding-bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-stretch:condensed;line-height:1;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanocb__label.sc-nano-checkbox{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:0;padding-inline-end:0}}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);-webkit-box-shadow:var(--segment-shadow);box-shadow:var(--segment-shadow);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.sc-nano-checkbox-h:first-of-type:not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius) 0 0 var(--segment-border-radius);border-right:none}.sc-nano-checkbox-h:first-of-type[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 var(--segment-border-radius) var(--segment-border-radius) 0;border-left:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type):not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 0 0 0;border-right:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type)[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-left:none}.sc-nano-checkbox-h:last-of-type:not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 var(--segment-border-radius) var(--segment-border-radius) 0}.sc-nano-checkbox-h:last-of-type[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius) 0 0 var(--segment-border-radius)}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:500;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);-webkit-transition:all 0.2s;transition:all 0.2s;border-radius:var(--cb-border-radius);width:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:\"+\";margin-left:0.3125em;margin-right:0;margin-top:0;margin-bottom:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:center;transform-origin:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanocb__label--tag.sc-nano-checkbox::after{margin-left:unset;margin-right:unset;-webkit-margin-start:0.3125em;margin-inline-start:0.3125em;-webkit-margin-end:0;margin-inline-end:0}}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}";
 
 let checkboxIds = 0;
 let Checkbox = class {

package/dist/cjs/nano-checkbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nano-checkbox.entry.cjs.js","mappings":"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","names":["focusVisible","h","Host","createColorClasses"],"sources":["./src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n  /**\n   * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{$control-invalid-style};\n   * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{$control-focus-style};\n   * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n   * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n\n   * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{$color-white};\n   * @prop --check-border-style: Initial border style. Defaults to 1px solid #{$color-palegrey};\n   * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{$color-darkgrey};\n   * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{$color-darkgrey};\n   * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{$color-white};\n   * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n   * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n   * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n   * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{color-to-rgb-list($color-lightblue)};\n   * @prop --tagbox-border-color: Defaults to rgba(var(--tagbox-rgb), .5);\n   * @prop --tagbox-bg-color: Defaults to rgba(var(--tagbox-rgb), .1);\n   * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{$color-blue};\n   * @prop --segment-border-radius: Defaults to 3px;\n   * @prop --segment-shadow: 0 1px 4px rgba(0,0,0,.2);\n  */\n\n  --focus-shadow: #{$control-focus-style};\n  --invalid-shadow: #{$control-invalid-style};\n  --padding: initial;\n  --check-bg-color: #{$color-white};\n  --check-border-style: 1px solid #{$color-palegrey};\n  --check-checked-bg-color: #{$color-darkgrey};\n  --check-checked-border-color: #{$color-darkgrey};\n  --check-checked-higlight-color: #{$color-white};\n  --check-base-size: inherit;\n\n  // type specific\n\n  --tagbox-rgb: #{color-to-rgb-list($color-lightblue)};\n  --tagbox-border-color: rgba(var(--tagbox-rgb), 0.5);\n  --tagbox-bg-color: rgba(var(--tagbox-rgb), 0.2);\n  --tagbox-border-radius: 0;\n  --segment-color: #{$color-blue};\n  --segment-border-radius: 3px;\n  --segment-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n  --cb-border-radius: 2px;\n  --radio-border-radius: 50%;\n\n  display: inline-block;\n  max-width: 100%;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host([type='tag']) {\n  text-transform: uppercase;\n\n  --control-padding: 0.2rem 1rem;\n}\n\n:host([type='segment']) {\n  --check-border-style: none;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host([type='segment-pill']) {\n  --check-border-style: 1px solid #{rgba($color-palegrey, 0.5)};\n  --segment-border-radius: 5px;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n  --tagbox-rgb: var(--nano-color-base-rgb);\n  --focus-shadow: #{$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n  --tagbox-border-color: rgba(var(--tagbox-rgb), 0.8);\n  --tagbox-bg-color: rgba(var(--tagbox-rgb), 0.5);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n  --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  --tagbox-rgb: #{color-to-rgb-list($color-mediumgrey)};\n  --check-bg-color: #{rgba($color-mediumgrey, 0.5)};\n  --check-checked-bg-color: #{rgba($color-mediumgrey, 0.5)};\n  --segment-color: #{$color-darkgrey};\n}\n\n.nanocb {\n  padding: var(--padding);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  &__input {\n    @include border-radius(var(--cb-border-radius, 3px));\n\n    font-size: var(--check-base-size);\n    position: relative;\n    height: 1.5em;\n    width: 1.5em;\n    min-width: 1.5em;\n    border: var(--check-border-style);\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n\n    &::before {\n      @include border-radius(var(--cb-border-radius));\n\n      position: absolute;\n      content: '';\n      left: 0.625em;\n      top: 0.625em;\n      width: 0;\n      height: 0;\n      border: 2px solid var(--check-checked-higlight-color);\n      transform: scale(0);\n    }\n\n    &--radio {\n      @include border-radius(var(--radio-border-radius));\n\n      background-color: var(--check-bg-color);\n    }\n\n    &--checkbox {\n      background-color: var(--check-bg-color);\n\n      &::after {\n        @include border-radius(var(--cb-border-radius));\n\n        position: absolute;\n        content: '';\n        left: 0.75em;\n        top: 0.75em;\n        height: 0;\n        width: 0;\n        border: solid var(--check-checked-higlight-color);\n        border-width: 0 0.1875em 0.1875em 0;\n        transform: rotate(0deg) scale(0);\n        opacity: 1;\n        transition: all 0.15s ease-out;\n\n        .nanocb--indeterminate & {\n          border-width: 0 0 0.1875em 0;\n        }\n      }\n    }\n\n    &--segment,\n    &--segment-pill {\n      @include visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n\n    &--tag {\n      @include visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n  }\n\n  &--invalid:not(.nanocb--focused) {\n    .nanocb__input {\n      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow);\n\n      &--tag + .nanocb__label,\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        box-shadow: var(--invalid-shadow);\n        z-index: 1;\n      }\n    }\n  }\n\n  input {\n    @include visually-hide();\n\n    &:focus ~ .nanocb__input {\n      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);\n    }\n\n    &.focus-visible:focus ~ .nanocb__input {\n      &--tag + .nanocb__label,\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        box-shadow: var(--focus-shadow);\n        z-index: 1;\n      }\n    }\n\n    &:checked ~ .nanocb__input {\n      @include border-radius(var(--cb-border-radius));\n\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border: 0.125em solid var(--check-checked-border-color);\n\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        color: var(--check-checked-higlight-color);\n        background-color: var(--check-checked-bg-color);\n        box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.2);\n      }\n\n      &--radio {\n        border-radius: var(--radio-border-radius);\n        border-width: 0.3125em;\n        background-color: var(--check-checked-higlight-color);\n\n        &::after {\n          border: solid var(--check-checked-border-color);\n          border-width: 0 0.125em 0.125em 0;\n          opacity: 0;\n        }\n\n        &::before {\n          border-radius: var(--radio-border-radius);\n        }\n      }\n\n      &--checkbox {\n        &::after {\n          transform: rotate(45deg) scale(1);\n          opacity: 1;\n          left: 0.475em;\n          top: 0.1875em;\n          width: 0.375em;\n          height: 0.75em;\n          border-radius: 0;\n        }\n      }\n\n      &--tag + .nanocb__label::after {\n        transform: rotate(45deg);\n      }\n    }\n\n    &:indeterminate ~ .nanocb__input--checkbox {\n      @include border-radius(var(--input-border-radius, 5px));\n\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border: 0.125em solid var(--check-checked-bg-color);\n\n      &::after {\n        transform: scale(1);\n        opacity: 1;\n        left: 0.3125em;\n        top: 0;\n        width: 0.7em;\n        height: 0.7em;\n        border-radius: 0;\n      }\n    }\n  }\n\n  &__label {\n    @include padding(0, 0, 0, 10px);\n\n    display: flex;\n    align-items: center;\n    font-stretch: condensed;\n    line-height: 1;\n    flex: 1;\n    justify-content: space-between;\n\n    &--segment,\n    &--segment-pill {\n      border: var(--check-border-style);\n      border-radius: var(--segment-border-radius);\n      box-shadow: var(--segment-shadow);\n      display: inline-flex;\n      padding: var(--control-padding);\n      background: var(--check-bg-color);\n      color: var(--segment-color);\n      align-items: center;\n      width: 100%;\n    }\n\n    &--segment-pill {\n      // first\n      @include ltr-host(':first-of-type') {\n        border-radius:\n          var(--segment-border-radius) 0 0\n          var(--segment-border-radius);\n        border-right: none;\n      }\n\n      @include rtl-host(':first-of-type') {\n        border-radius:\n          0 var(--segment-border-radius)\n          var(--segment-border-radius) 0;\n        border-left: none;\n      }\n      // middle\n      @include ltr-host(':not(:last-of-type):not(:first-of-type)') {\n        border-radius: 0 0 0 0;\n        border-right: none;\n      }\n\n      @include rtl-host(':not(:last-of-type):not(:first-of-type)') {\n        border-left: none;\n      }\n      // last\n      @include ltr-host(':last-of-type') {\n        border-radius:\n          0 var(--segment-border-radius)\n          var(--segment-border-radius) 0;\n      }\n\n      @include rtl-host(':last-of-type') {\n        border-radius:\n          var(--segment-border-radius) 0 0\n          var(--segment-border-radius);\n      }\n      // single\n      @include host(':first-of-type:last-of-type') {\n        border-radius: var(--segment-border-radius);\n        border: var(--check-border-style);\n      }\n    }\n\n    &--tag {\n      letter-spacing: 2px;\n      font-weight: 500;\n      font-size: 0.65em;\n      line-height: 1.4;\n      padding: var(--control-padding);\n      border: 2px solid #b5aea7;\n      border-color: var(--tagbox-border-color);\n      background-color: var(--tagbox-bg-color);\n      transition: all 0.2s;\n      border-radius: var(--cb-border-radius);\n      width: 100%;\n\n      &::after {\n        content: '+';\n\n        @include margin(0, 0, 0, 0.3125em);\n\n        font-weight: 200;\n        position: relative;\n        font-family: inherit;\n        font-size: 1.8em;\n        display: inline-block;\n        transform: rotate(0deg);\n        transform-origin: center;\n      }\n\n      span {\n        display: block;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n  ComponentInterface,\n  State,\n  Watch,\n  Method,\n  Element,\n  Host,\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, ControlValidity } from '../../interface';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils';\nimport { focusVisible } from '../../utils/focus-visible';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n  tag: 'nano-checkbox',\n  styleUrl: 'checkbox.scss',\n  scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n  private inputId = `nano-cb-${checkboxIds++}`;\n  private input: HTMLInputElement;\n  private shouldReport = false;\n\n  @Element() private host: HTMLNanoCheckboxElement;\n\n  @State() _invalid = false;\n  @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n  /** @internal */\n  @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n  /**\n   * checked property that can be used to get/set the value. accepts only boolean values\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  @Watch('checked')\n  async handleCheckedChange() {\n    this.input.checked = this.checked;\n\n    if (this.inputType === 'radio' && this.name && this.checked) {\n      let form = this.host.closest('form');\n      let radios: Element[];\n      if (form) {\n        radios = Array.from(\n          form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        );\n      } else {\n        radios = Array.from(\n          document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        ).filter((radio) => !radio.closest('form'));\n      }\n      radios.map((el: HTMLNanoCheckboxElement) => {\n        if (el !== this.host) el.checked = false;\n      });\n    }\n    this.nanoChange.emit({ value: this.value, checked: this.checked });\n  }\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n   * it's only present when `checked` is true.\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string;\n\n  /**\n   * Set to true to make the field required.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Controls the underlying field type and style.\n   */\n  @Prop({ reflect: true }) type:\n    | 'radio'\n    | 'checkbox'\n    | 'tag'\n    | 'segment'\n    | 'segment-pill' = 'checkbox';\n\n  @Watch('type')\n  typeChange() {\n    if (this.type === 'checkbox' || this.type === 'tag')\n      this.inputType = 'checkbox';\n    else this.inputType = 'radio';\n  }\n\n  /**\n   * label property that can be used to set the label text. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n  @Watch('indeterminate')\n  handleIndeterminateChange() {\n    this.checked = false;\n    this.input.indeterminate = this.indeterminate;\n  }\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    if (!this.shouldReport) return false;\n    return !this.input.validity.valid;\n  }\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Emited when the checkbox is toggled\n   */\n  @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  /**\n   * Emited when the checkbox is focused\n   */\n  @Event() nanoFocus: EventEmitter;\n\n  /**\n   * Emited when the checkbox is blurred\n   */\n  @Event() nanoBlur: EventEmitter;\n\n  // public methods\n\n  /**\n   * Returns the native input control\n   */\n  @Method()\n  async getInputElement() {\n    if (this.input) return this.input;\n  }\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n   */\n  @Method()\n  async reportValidity(\n    validateFirst: boolean = false\n  ): Promise<ControlValidity> {\n    if (validateFirst) {\n      this.shouldReport = true;\n      this._invalid = !this.input.reportValidity();\n    }\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.input.validationMessage,\n    };\n  }\n\n  /**\n   * Sets a custom validation message.\n   * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n   */\n  @Method()\n  async setError(message: string) {\n    if (!this.input) return;\n\n    this._invalid = !!message.length;\n    this.input.setCustomValidity(message);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) {\n      this.input.focus();\n      focusVisible.force(this.input);\n    }\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  @Method()\n  async removeFocus() {\n    if (this.input) {\n      this.input.blur();\n      focusVisible.force(this.input, false);\n    }\n  }\n\n  // private handlers\n\n  private handleInvalid = (ev: Event) => {\n    this.shouldReport = true;\n    this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n  };\n\n  private handleChange = (ev: InputEvent) => {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.indeterminate = false;\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  /* Although many radio components can be 'checked',\n  the underlying control may not be. Check */\n  private isRadioChecked() {\n    setTimeout(() => (this.checked = this.input.checked), 20);\n  }\n\n  // Stencil hooks\n\n  componentWillLoad() {\n    this.typeChange();\n  }\n\n  componentDidLoad() {\n    this.input.indeterminate = this.indeterminate;\n    this.isRadioChecked();\n    focusVisible.observe(this.input);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.input);\n  }\n\n  render() {\n    const labelId = this.inputId + '-lbl';\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        dir={isRtl ? 'rtl' : null}\n      >\n        <label\n          class={{\n            nanocb: true,\n            'nanocb--checked': this.checked,\n            'nanocb--invalid': this.invalid,\n            'nanocb--disabled': this.disabled,\n            'nanocb--focused': this.hasFocus,\n            'nanocb--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n        >\n          <input\n            type={this.inputType}\n            name={this.name}\n            required={this.required}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            aria-labelledby={labelId}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onChange={this.handleChange}\n            ref={(input) => (this.input = input)}\n            id={this.inputId}\n            onInvalid={this.handleInvalid}\n          />\n          <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n          <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n            {this.label && !!this.label.length && <span>{this.label}</span>}\n            <span hidden={this.label && !!this.label.length}>\n              <slot />\n            </span>\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-checkbox.entry.cjs.js","mappings":"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","names":["focusVisible","h","Host","createColorClasses"],"sources":["./src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n  /**\n   * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{$control-invalid-style};\n   * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{$control-focus-style};\n   * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n   * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n\n   * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{$color-white};\n   * @prop --check-border-style: Initial border style. Defaults to 1px solid #{$color-palegrey};\n   * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{$color-darkgrey};\n   * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{$color-darkgrey};\n   * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{$color-white};\n   * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n   * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n   * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n   * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{color-to-rgb-list($color-lightblue)};\n   * @prop --tagbox-border-color: Defaults to rgba(var(--tagbox-rgb), .5);\n   * @prop --tagbox-bg-color: Defaults to rgba(var(--tagbox-rgb), .1);\n   * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{$color-blue};\n   * @prop --segment-border-radius: Defaults to 3px;\n   * @prop --segment-shadow: 0 1px 4px rgba(0,0,0,.2);\n  */\n\n  --focus-shadow: #{$control-focus-style};\n  --invalid-shadow: #{$control-invalid-style};\n  --padding: initial;\n  --check-bg-color: #{$color-white};\n  --check-border-style: 1px solid #{$color-palegrey};\n  --check-checked-bg-color: #{$color-darkgrey};\n  --check-checked-border-color: #{$color-darkgrey};\n  --check-checked-higlight-color: #{$color-white};\n  --check-base-size: inherit;\n\n  // type specific\n\n  --tagbox-rgb: #{color-to-rgb-list($color-lightblue)};\n  --tagbox-border-color: rgba(var(--tagbox-rgb), 0.5);\n  --tagbox-bg-color: rgba(var(--tagbox-rgb), 0.2);\n  --tagbox-border-radius: 0;\n  --segment-color: #{$color-blue};\n  --segment-border-radius: 3px;\n  --segment-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n  --cb-border-radius: 2px;\n  --radio-border-radius: 50%;\n\n  display: inline-block;\n  max-width: 100%;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host([type='tag']) {\n  text-transform: uppercase;\n\n  --control-padding: 0.2rem 1rem;\n}\n\n:host([type='segment']) {\n  --check-border-style: none;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host([type='segment-pill']) {\n  --check-border-style: 1px solid #{rgba($color-palegrey, 0.5)};\n  --segment-border-radius: 5px;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n  --tagbox-rgb: var(--nano-color-base-rgb);\n  --focus-shadow: #{$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n  --tagbox-border-color: rgba(var(--tagbox-rgb), 0.8);\n  --tagbox-bg-color: rgba(var(--tagbox-rgb), 0.5);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n  --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  --tagbox-rgb: #{color-to-rgb-list($color-mediumgrey)};\n  --check-bg-color: #{rgba($color-mediumgrey, 0.5)};\n  --check-checked-bg-color: #{rgba($color-mediumgrey, 0.5)};\n  --segment-color: #{$color-darkgrey};\n}\n\n.nanocb {\n  padding: var(--padding);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  &__input {\n    @include border-radius(var(--cb-border-radius, 3px));\n\n    font-size: var(--check-base-size);\n    position: relative;\n    height: 1.5em;\n    width: 1.5em;\n    min-width: 1.5em;\n    border: var(--check-border-style);\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n\n    &::before {\n      @include border-radius(var(--cb-border-radius));\n\n      position: absolute;\n      content: '';\n      left: 0.625em;\n      top: 0.625em;\n      width: 0;\n      height: 0;\n      border: 2px solid var(--check-checked-higlight-color);\n      transform: scale(0);\n    }\n\n    &--radio {\n      @include border-radius(var(--radio-border-radius));\n\n      background-color: var(--check-bg-color);\n    }\n\n    &--checkbox {\n      background-color: var(--check-bg-color);\n\n      &::after {\n        @include border-radius(var(--cb-border-radius));\n\n        position: absolute;\n        content: '';\n        left: 0.75em;\n        top: 0.75em;\n        height: 0;\n        width: 0;\n        border: solid var(--check-checked-higlight-color);\n        border-width: 0 0.1875em 0.1875em 0;\n        transform: rotate(0deg) scale(0);\n        opacity: 1;\n        transition: all 0.15s ease-out;\n\n        .nanocb--indeterminate & {\n          border-width: 0 0 0.1875em 0;\n        }\n      }\n    }\n\n    &--segment,\n    &--segment-pill {\n      @include visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n\n    &--tag {\n      @include visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n  }\n\n  &--invalid:not(.nanocb--focused) {\n    .nanocb__input {\n      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow);\n\n      &--tag + .nanocb__label,\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        box-shadow: var(--invalid-shadow);\n        z-index: 1;\n      }\n    }\n  }\n\n  input {\n    @include visually-hide();\n\n    &:focus ~ .nanocb__input {\n      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);\n    }\n\n    &.focus-visible:focus ~ .nanocb__input {\n      &--tag + .nanocb__label,\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        box-shadow: var(--focus-shadow);\n        z-index: 1;\n      }\n    }\n\n    &:checked ~ .nanocb__input {\n      @include border-radius(var(--cb-border-radius));\n\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border: 0.125em solid var(--check-checked-border-color);\n\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        color: var(--check-checked-higlight-color);\n        background-color: var(--check-checked-bg-color);\n        box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.2);\n      }\n\n      &--radio {\n        border-radius: var(--radio-border-radius);\n        border-width: 0.3125em;\n        background-color: var(--check-checked-higlight-color);\n\n        &::after {\n          border: solid var(--check-checked-border-color);\n          border-width: 0 0.125em 0.125em 0;\n          opacity: 0;\n        }\n\n        &::before {\n          border-radius: var(--radio-border-radius);\n        }\n      }\n\n      &--checkbox {\n        &::after {\n          transform: rotate(45deg) scale(1);\n          opacity: 1;\n          left: 0.475em;\n          top: 0.1875em;\n          width: 0.375em;\n          height: 0.75em;\n          border-radius: 0;\n        }\n      }\n\n      &--tag + .nanocb__label::after {\n        transform: rotate(45deg);\n      }\n    }\n\n    &:indeterminate ~ .nanocb__input--checkbox {\n      @include border-radius(var(--input-border-radius, 5px));\n\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border: 0.125em solid var(--check-checked-bg-color);\n\n      &::after {\n        transform: scale(1);\n        opacity: 1;\n        left: 0.3125em;\n        top: 0;\n        width: 0.7em;\n        height: 0.7em;\n        border-radius: 0;\n      }\n    }\n  }\n\n  &__label {\n    @include padding(0, 0, 0, 10px);\n\n    display: flex;\n    align-items: center;\n    font-stretch: condensed;\n    line-height: 1;\n    flex: 1;\n    justify-content: space-between;\n\n    &--segment,\n    &--segment-pill {\n      border: var(--check-border-style);\n      border-radius: var(--segment-border-radius);\n      box-shadow: var(--segment-shadow);\n      display: inline-flex;\n      padding: var(--control-padding);\n      background: var(--check-bg-color);\n      color: var(--segment-color);\n      align-items: center;\n      width: 100%;\n    }\n\n    &--segment-pill {\n      // first\n      @include ltr-host(':first-of-type') {\n        border-radius:\n          var(--segment-border-radius) 0 0\n          var(--segment-border-radius);\n        border-right: none;\n      }\n\n      @include rtl-host(':first-of-type') {\n        border-radius:\n          0 var(--segment-border-radius)\n          var(--segment-border-radius) 0;\n        border-left: none;\n      }\n      // middle\n      @include ltr-host(':not(:last-of-type):not(:first-of-type)') {\n        border-radius: 0 0 0 0;\n        border-right: none;\n      }\n\n      @include rtl-host(':not(:last-of-type):not(:first-of-type)') {\n        border-left: none;\n      }\n      // last\n      @include ltr-host(':last-of-type') {\n        border-radius:\n          0 var(--segment-border-radius)\n          var(--segment-border-radius) 0;\n      }\n\n      @include rtl-host(':last-of-type') {\n        border-radius:\n          var(--segment-border-radius) 0 0\n          var(--segment-border-radius);\n      }\n      // single\n      @include host(':first-of-type:last-of-type') {\n        border-radius: var(--segment-border-radius);\n        border: var(--check-border-style);\n      }\n    }\n\n    &--tag {\n      letter-spacing: 2px;\n      font-weight: 500;\n      font-size: 0.65em;\n      line-height: 1.4;\n      padding: var(--control-padding);\n      border: 2px solid #b5aea7;\n      border-color: var(--tagbox-border-color);\n      background-color: var(--tagbox-bg-color);\n      transition: all 0.2s;\n      border-radius: var(--cb-border-radius);\n      width: 100%;\n\n      &::after {\n        content: '+';\n\n        @include margin(0, 0, 0, 0.3125em);\n\n        font-weight: 200;\n        position: relative;\n        font-family: inherit;\n        font-size: 1.8em;\n        display: inline-block;\n        transform: rotate(0deg);\n        transform-origin: center;\n      }\n\n      span {\n        display: block;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n  ComponentInterface,\n  State,\n  Watch,\n  Method,\n  Element,\n  Host,\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, ControlValidity } from '../../interface';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils';\nimport { focusVisible } from '../../utils/focus-visible';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n  tag: 'nano-checkbox',\n  styleUrl: 'checkbox.scss',\n  scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n  private inputId = `nano-cb-${checkboxIds++}`;\n  private input: HTMLInputElement;\n  private shouldReport = false;\n\n  @Element() private host: HTMLNanoCheckboxElement;\n\n  @State() _invalid = false;\n  @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n  /** @internal */\n  @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n  /**\n   * checked property that can be used to get/set the value. accepts only boolean values\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  @Watch('checked')\n  async handleCheckedChange() {\n    this.input.checked = this.checked;\n\n    if (this.inputType === 'radio' && this.name && this.checked) {\n      let form = this.host.closest('form');\n      let radios: Element[];\n      if (form) {\n        radios = Array.from(\n          form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        );\n      } else {\n        radios = Array.from(\n          document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        ).filter((radio) => !radio.closest('form'));\n      }\n      radios.map((el: HTMLNanoCheckboxElement) => {\n        if (el !== this.host) el.checked = false;\n      });\n    }\n    this.nanoChange.emit({ value: this.value, checked: this.checked });\n  }\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n   * it's only present when `checked` is true.\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string;\n\n  /**\n   * Set to true to make the field required.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Controls the underlying field type and style.\n   */\n  @Prop({ reflect: true }) type:\n    | 'radio'\n    | 'checkbox'\n    | 'tag'\n    | 'segment'\n    | 'segment-pill' = 'checkbox';\n\n  @Watch('type')\n  typeChange() {\n    if (this.type === 'checkbox' || this.type === 'tag')\n      this.inputType = 'checkbox';\n    else this.inputType = 'radio';\n  }\n\n  /**\n   * label property that can be used to set the label text. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n  @Watch('indeterminate')\n  handleIndeterminateChange() {\n    this.checked = false;\n    this.input.indeterminate = this.indeterminate;\n  }\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    if (!this.shouldReport) return false;\n    return !this.input.validity.valid;\n  }\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Emited when the checkbox is toggled\n   */\n  @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  /**\n   * Emited when the checkbox is focused\n   */\n  @Event() nanoFocus: EventEmitter;\n\n  /**\n   * Emited when the checkbox is blurred\n   */\n  @Event() nanoBlur: EventEmitter;\n\n  // public methods\n\n  /**\n   * Returns the native input control\n   */\n  @Method()\n  async getInputElement() {\n    if (this.input) return this.input;\n  }\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n   */\n  @Method()\n  async reportValidity(\n    validateFirst: boolean = false\n  ): Promise<ControlValidity> {\n    if (validateFirst) {\n      this.shouldReport = true;\n      this._invalid = !this.input.reportValidity();\n    }\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.input.validationMessage,\n    };\n  }\n\n  /**\n   * Sets a custom validation message.\n   * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n   */\n  @Method()\n  async setError(message: string) {\n    if (!this.input) return;\n\n    this._invalid = !!message.length;\n    this.input.setCustomValidity(message);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) {\n      this.input.focus();\n      focusVisible.force(this.input);\n    }\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  @Method()\n  async removeFocus() {\n    if (this.input) {\n      this.input.blur();\n      focusVisible.force(this.input, false);\n    }\n  }\n\n  // private handlers\n\n  private handleInvalid = (ev: Event) => {\n    this.shouldReport = true;\n    this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n  };\n\n  private handleChange = (ev: InputEvent) => {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.indeterminate = false;\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  /* Although many radio components can be 'checked',\n  the underlying control may not be. Check */\n  private isRadioChecked() {\n    setTimeout(() => (this.checked = this.input.checked), 20);\n  }\n\n  // Stencil hooks\n\n  componentWillLoad() {\n    this.typeChange();\n  }\n\n  componentDidLoad() {\n    this.input.indeterminate = this.indeterminate;\n    this.isRadioChecked();\n    focusVisible.observe(this.input);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.input);\n  }\n\n  render() {\n    const labelId = this.inputId + '-lbl';\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        dir={isRtl ? 'rtl' : null}\n      >\n        <label\n          class={{\n            nanocb: true,\n            'nanocb--checked': this.checked,\n            'nanocb--invalid': this.invalid,\n            'nanocb--disabled': this.disabled,\n            'nanocb--focused': this.hasFocus,\n            'nanocb--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n        >\n          <input\n            type={this.inputType}\n            name={this.name}\n            required={this.required}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            aria-labelledby={labelId}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onChange={this.handleChange}\n            ref={(input) => (this.input = input)}\n            id={this.inputId}\n            onInvalid={this.handleInvalid}\n          />\n          <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n          <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n            {this.label && !!this.label.length && <span>{this.label}</span>}\n            <span hidden={this.label && !!this.label.length}>\n              <slot />\n            </span>\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/nano-components.cjs.js

@@ -109,7 +109,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy(JSON.parse("[[\"nano-global-nav.cjs\",[[1,\"nano-global-nav\",{\"env\":[1],\"ssoRedirect\":[1,\"sso-redirect\"],\"getMyAccountData\":[4,\"get-my-account-data\"],\"activeMyAccountSections\":[16],\"showSearch\":[4,\"show-search\"],\"showLogo\":[4,\"show-logo\"],\"logoUrl\":[1,\"logo-url\"],\"searchIndeces\":[16],\"myAccountUser\":[1040],\"searchAppId\":[1025,\"search-app-id\"],\"searchApiKey\":[1025,\"search-api-key\"],\"searchValue\":[1025,\"search-value\"],\"searchIndex\":[1025,\"search-index\"],\"cartCount\":[1026,\"cart-count\"],\"msgCount\":[1026,\"msg-count\"],\"cartUrl\":[1025,\"cart-url\"],\"msgUrl\":[1025,\"msg-url\"],\"hasLoggedinSlot\":[32],\"hasSiteSlot\":[32],\"hasPromotionSlot\":[32],\"aboutSlotLen\":[32],\"iconSlotLen\":[32],\"mainSlotLen\":[32],\"overflowSlotLen\":[32],\"searchSlotLen\":[32],\"internalSearchIndeces\":[32],\"thresholdReady\":[32],\"remoteDataReady\":[32],\"ready\":[32],\"isResizing\":[32],\"intersectRatio\":[32],\"threshold\":[32],\"modalOpen\":[32],\"modalIsOpen\":[32],\"searchBarShown\":[32],\"scrollingUp\":[32],\"searchLoading\":[32],\"showAutocomplete\":[32],\"secondaryMenuOpen\":[32],\"userMenuOpen\":[32],\"menuFullScreen\":[32],\"searchValInternal\":[32],\"submitSearch\":[64]},[[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"]]]]],[\"nano-hero.cjs\",[[1,\"nano-hero\",{\"imgSrc\":[1,\"img-src\"],\"imgSrcSet\":[1,\"img-src-set\"],\"largeScreenBP\":[2,\"large-screen-b-p\"],\"theme\":[1],\"level\":[1],\"hasIconBox\":[32],\"hasScrim\":[32],\"hasSecondaryContent\":[32],\"hasQuote\":[32],\"hasBg\":[32],\"hasBackBtn\":[32],\"hasCtas\":[32],\"breadCrumbs\":[32],\"iconBoxItems\":[32]}]]],[\"nano-date-input.cjs\",[[6,\"nano-date-input\",{\"invalid\":[2564],\"helperText\":[4,\"helper-text\"],\"helperTextFormat\":[16],\"floatLabel\":[4,\"float-label\"],\"name\":[1],\"readonly\":[4],\"size\":[2],\"form\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"disabled\":[4],\"color\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"label\":[1],\"placeholder\":[1025],\"value\":[1537],\"validateOn\":[1,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"dateOrder\":[1,\"date-order\"],\"required\":[4],\"min\":[1],\"max\":[1],\"hideLabel\":[4,\"hide-label\"],\"picker\":[4],\"initialPickerDate\":[1,\"initial-picker-date\"],\"pickerOpen\":[1540,\"picker-open\"],\"closeAfterPicked\":[4,\"close-after-picked\"],\"pattern\":[32],\"inputValue\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]}]]],[\"nano-dialog.cjs\",[[1,\"nano-dialog\",{\"showRibbon\":[4,\"show-ribbon\"],\"open\":[1540],\"label\":[1],\"noHeader\":[4,\"no-header\"],\"noFooter\":[4,\"no-footer\"],\"noUserDismiss\":[4,\"no-user-dismiss\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"isVisible\":[32],\"noDismiss\":[32],\"hasFooter\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-file-upload.cjs\",[[6,\"nano-file-upload\",{\"name\":[1],\"accept\":[1],\"capture\":[1],\"maxFileSize\":[2,\"max-file-size\"],\"maxFiles\":[2,\"max-files\"],\"label\":[1],\"placeholder\":[1],\"hideLabel\":[4,\"hide-label\"],\"required\":[4],\"disabled\":[516],\"clearInput\":[4,\"clear-input\"],\"showInlineError\":[516,\"show-inline-error\"],\"validateOn\":[1025,\"validate-on\"],\"invalid\":[2564],\"files\":[2064],\"value\":[6145],\"hasHelperSlot\":[32],\"hasLabelSlot\":[32],\"errorMessage\":[32],\"isDragging\":[32],\"fileList\":[32],\"hasFocus\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]},[[8,\"click\",\"globalClickHandler\"],[8,\"keydown\",\"globalKeydownHandler\"]]]]],[\"nano-alert.cjs\",[[1,\"nano-alert\",{\"open\":[1540],\"closable\":[516],\"color\":[513],\"duration\":[2],\"isModal\":[32],\"isToast\":[32],\"isShowing\":[32],\"label\":[32],\"show\":[64],\"hide\":[64],\"toast\":[64],\"alert\":[64]}]]],[\"nano-global-search-results.cjs\",[[1,\"nano-global-search-results\",{\"algoliaEle\":[32],\"currentWidth\":[32],\"apiKey\":[32],\"appId\":[32],\"index\":[32]},[[16,\"nanoSearchReset\",\"handleGlobalNavReset\"],[16,\"nanoSearchResult\",\"handleGlobalNavSearch\"],[0,\"nanoChange\",\"handleReorder\"],[0,\"nanoResultsShown\",\"attachListeners\"],[16,\"nanoNewResults\",\"attachResultListeners\"]]]]],[\"nano-menu-drawer.cjs\",[[1,\"nano-menu-drawer\",{\"open\":[4],\"saveState\":[4,\"save-state\"],\"hideWidth\":[2,\"hide-width\"],\"hideHeight\":[4,\"hide-height\"],\"reset\":[32],\"widthOk\":[32],\"heightOk\":[32],\"isLoading\":[32],\"hide\":[32]},[[0,\"nanoOpen\",\"cancelNavItemEvents\"],[0,\"nanoClose\",\"cancelNavItemEvents\"],[16,\"nanoIsReady\",\"handleGlobalNavReady\"]]]]],[\"nano-tab-group.cjs\",[[1,\"nano-tab-group\",{\"placement\":[1],\"noScrollControls\":[4,\"no-scroll-controls\"],\"color\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"hasScrollControls\":[32],\"hideControlRight\":[32],\"hideControlLeft\":[32],\"isLegacy\":[32],\"tab\":[32],\"show\":[64]}]]],[\"nano-accordion.cjs\",[[1,\"nano-accordion\",{\"color\":[1],\"itemOpened\":[32]},[[0,\"nanoOpened\",\"onToggleHandler\"],[0,\"nanoClosed\",\"onClosedHandler\"]]]]],[\"nano-algolia-filter.cjs\",[[1,\"nano-algolia-filter\",{\"filterName\":[1,\"filter-name\"],\"value\":[1025],\"operator\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"changeEvent\":[32],\"internalValue\":[32],\"showFilter\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"facets\":[32],\"tplRenderFn\":[32],\"globalStoreMethod\":[32]},[[0,\"nanoChange\",\"handleChangeEvent\"],[0,\"change\",\"handleChangeEvent\"]]]]],[\"nano-algolia-input.cjs\",[[1,\"nano-algolia-input\",{\"appId\":[1,\"app-id\"],\"apiKey\":[1,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1,\"search-index-name\"],\"minChars\":[2,\"min-chars\"],\"autoEmit\":[4,\"auto-emit\"],\"browseIndex\":[1028,\"browse-index\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"searchStr\":[32],\"algoliaIndex\":[32],\"currentResults\":[32],\"search\":[64]},[[0,\"nanoChange\",\"searchSubmit\"]]]]],[\"nano-algolia-pagination.cjs\",[[1,\"nano-algolia-pagination\",{\"maxToShow\":[2,\"max-to-show\"],\"currentPage\":[32],\"canGoPrev\":[32],\"canGoNext\":[32],\"show\":[32],\"tplRenderFn\":[32],\"indexResults\":[32],\"infiniteScroll\":[32],\"nextPage\":[64],\"prevPage\":[64],\"goToPage\":[64]}]]],[\"nano-algolia-results.cjs\",[[1,\"nano-algolia-results\",{\"infiniteScroll\":[4,\"infinite-scroll\"],\"appendPages\":[4,\"append-pages\"],\"showResults\":[32],\"tplRenderFn\":[32],\"results\":[32],\"indexResults\":[32],\"resultsPage\":[32],\"changeEvent\":[32],\"facets\":[32],\"isLoading\":[32]}]]],[\"nano-aspect-ratio.cjs\",[[1,\"nano-aspect-ratio\",{\"aspectRatio\":[1,\"aspect-ratio\"],\"fit\":[1]}]]],[\"nano-checkbox.cjs\",[[6,\"nano-checkbox\",{\"hasFocus\":[1540,\"has-focus\"],\"checked\":[1540],\"disabled\":[516],\"value\":[1],\"name\":[1],\"required\":[4],\"type\":[513],\"label\":[1],\"indeterminate\":[1540],\"invalid\":[2564],\"color\":[1],\"_invalid\":[32],\"inputType\":[32],\"getInputElement\":[64],\"reportValidity\":[64],\"setError\":[64],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-checkbox-group.cjs\",[[6,\"nano-checkbox-group\",{\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[4,\"show-inline-error\"],\"min\":[2],\"max\":[2],\"disabled\":[516],\"legend\":[1],\"invalid\":[2564],\"checkboxes\":[32],\"nativeCbs\":[32],\"errorMessage\":[32],\"showErrorMsg\":[32],\"hasHelperSlot\":[32],\"reportValidity\":[64]},[[0,\"nanoChange\",\"handleCbChange\"]]]]],[\"nano-details.cjs\",[[1,\"nano-details\",{\"label\":[1],\"open\":[1540],\"noHandle\":[4,\"no-handle\"],\"iconRotation\":[2,\"icon-rotation\"],\"color\":[1],\"isLoading\":[32]}]]],[\"nano-drawer.cjs\",[[1,\"nano-drawer\",{\"open\":[1540],\"label\":[1],\"placement\":[1],\"contained\":[4],\"noHeader\":[4,\"no-header\"],\"type\":[1],\"contentSelector\":[1,\"content-selector\"],\"hasFooter\":[32],\"isVisible\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-menu.cjs\",[[6,\"nano-menu\",{\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-range.cjs\",[[6,\"nano-range\",{\"color\":[1],\"debounce\":[2],\"name\":[1],\"dualKnobs\":[4,\"dual-knobs\"],\"min\":[2],\"max\":[2],\"pin\":[4],\"snaps\":[4],\"step\":[2],\"ticks\":[4],\"disabled\":[4],\"value\":[1026],\"ratioA\":[32],\"ratioB\":[32],\"pressedKnob\":[32]}]]],[\"nano-rating.cjs\",[[2,\"nano-rating\",{\"value\":[1538],\"max\":[2],\"precision\":[2],\"readonly\":[4],\"disabled\":[4],\"name\":[1],\"symbolName\":[1,\"symbol-name\"],\"symbol\":[16],\"hoverValue\":[32],\"isHovering\":[32],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-select-option.cjs\",[[1,\"nano-select-option\",{\"label\":[1],\"value\":[1],\"selected\":[4],\"disabled\":[4]}]]],[\"nano-slide.cjs\",[[1,\"nano-slide\",{\"ready\":[1540]}]]],[\"nano-slides.cjs\",[[1,\"nano-slides\",{\"options\":[1040],\"navbtns\":[4],\"pager\":[4],\"fullscreenbtn\":[4],\"fullscreen\":[1540],\"animation\":[513],\"currentSlide\":[1538,\"current-slide\"],\"autoplay\":[8],\"ready\":[1540],\"iCurrentSlide\":[32],\"slidesReady\":[32],\"didInit\":[32],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipes\":[64],\"getflickity\":[64],\"reload\":[64]}]]],[\"nano-tab.cjs\",[[1,\"nano-tab\",{\"panel\":[513],\"active\":[516],\"disabled\":[516],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-tab-content.cjs\",[[1,\"nano-tab-content\",{\"name\":[1],\"active\":[4]}]]],[\"nano-algolia.cjs\",[[1,\"nano-algolia\",{\"showResults\":[1028,\"show-results\"],\"resultsPage\":[1026,\"results-page\"],\"appId\":[1025,\"app-id\"],\"apiKey\":[1025,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1025,\"search-index-name\"],\"listenTo\":[1,\"listen-to\"],\"query\":[1025],\"operator\":[1],\"filters\":[16],\"tplEngine\":[16],\"tplRenderFn\":[16],\"replicaIndex\":[1025,\"replica-index\"],\"browseIndex\":[1028,\"browse-index\"],\"minChars\":[2,\"min-chars\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"_dynFacetFilters\":[32],\"inputField\":[32],\"algoliaIndex\":[32],\"indeces\":[32],\"resultsEmitterEle\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"currentHits\":[32],\"changeEvent\":[32],\"isLoading\":[32],\"wormholeState\":[32],\"removeFilters\":[64]},[[0,\"nanoTplUpdated\",\"onAllTplUpdate\"],[0,\"nanoPageChanged\",\"onPageChange\"],[0,\"nanoFilterChanged\",\"onFilterChange\"],[16,\"nanoChange\",\"handleInputChange\"],[16,\"change\",\"handleInputChange\"]]]]],[\"nano-tooltip.cjs\",[[1,\"nano-tooltip\",{\"content\":[1],\"placement\":[1],\"disabled\":[4],\"distance\":[2],\"open\":[1540],\"skidding\":[2],\"trigger\":[1],\"show\":[64],\"hide\":[64]}]]],[\"nano-date-picker_2.cjs\",[[1,\"nano-date-picker\",{\"selectedDate\":[1025,\"selected-date\"],\"min\":[1],\"max\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"color\":[1],\"isDateDisabled\":[16],\"isModal\":[4,\"is-modal\"],\"firstFocusEle\":[16],\"activeFocus\":[32],\"focusedDay\":[32],\"setFocus\":[64]}],[1,\"nano-dropdown\",{\"autoOpen\":[4,\"auto-open\"],\"open\":[1540],\"closeOnSelect\":[4,\"close-on-select\"],\"containingElement\":[1040],\"tetherTo\":[16],\"placement\":[1],\"distance\":[2],\"skidding\":[2],\"hoist\":[4],\"dialogTitle\":[1,\"dialog-title\"],\"show\":[64],\"hide\":[64]},[[0,\"nanoFocus\",\"menuFocus\"],[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"],[0,\"nanoSelect\",\"handlePanelSelect\"]]]]],[\"nano-nav-item_2.cjs\",[[6,\"nano-select\",{\"invalid\":[1540],\"color\":[1],\"autofocus\":[4],\"disabled\":[516],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"multiple\":[4],\"name\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"size\":[2],\"max\":[2],\"min\":[2],\"form\":[1],\"allowCustomValues\":[4,\"allow-custom-values\"],\"value\":[1025],\"options\":[1040],\"clearSelect\":[4,\"clear-select\"],\"mask\":[4],\"debounce\":[2],\"native\":[4],\"currInsertIndex\":[32],\"availOpts\":[32],\"showErrorMsg\":[32],\"errorMessage\":[32],\"hasFocus\":[32],\"listOpen\":[32],\"isLegacy\":[32],\"hasLabelSlot\":[32],\"hasHelperSlot\":[32],\"hasIconSlot\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getSelectElement\":[64],\"showError\":[64]}],[1,\"nano-nav-item\",{\"href\":[1025],\"target\":[1],\"disabled\":[4],\"open\":[1540],\"selected\":[516],\"secondaryActiveWidth\":[2,\"secondary-active-width\"],\"secondaryFallback\":[16],\"closeOnBlur\":[4,\"close-on-blur\"],\"didOpen\":[32],\"isInGlobalNav\":[32],\"isInMenuDrawer\":[32],\"isInMenu\":[32],\"isLegacy\":[32],\"hasFocus\":[32],\"setFocus\":[64]}]]],[\"nano-input.cjs\",[[6,\"nano-input\",{\"invalid\":[2564],\"color\":[1],\"accept\":[1],\"autocapitalise\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"clearOnEdit\":[4,\"clear-on-edit\"],\"debounce\":[2],\"disabled\":[516],\"inputmode\":[1],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[4],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"type\":[1],\"form\":[1],\"value\":[1025],\"resize\":[1],\"rows\":[2],\"showCharCount\":[4,\"show-char-count\"],\"hasFocus\":[32],\"isLegacy\":[32],\"hasLabelSlot\":[32],\"hasButtonSlot\":[32],\"hasHelperSlot\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]},[[16,\"reset\",\"onReset\"]]]]],[\"nano-spinner.cjs\",[[1,\"nano-spinner\",{\"type\":[1],\"overlay\":[516],\"hasText\":[32]}]]],[\"nano-sticker.cjs\",[[1,\"nano-sticker\",{\"autoResize\":[4,\"auto-resize\"],\"isSticky\":[1028,\"is-sticky\"],\"offset\":[1026],\"position\":[1],\"quietMode\":[1,\"quiet-mode\"],\"hideOnNewStickers\":[4,\"hide-on-new-stickers\"],\"breakPointMax\":[2,\"break-point-max\"],\"breakPointMin\":[2,\"break-point-min\"],\"scrollParent\":[1040],\"stickTo\":[1,\"stick-to\"],\"isStuck\":[32],\"isRootSticker\":[32],\"hide\":[32],\"scrollHide\":[32],\"multiStickerHide\":[32],\"scrollingTo\":[32],\"quietModeIsOn\":[32],\"stuckCounter\":[32],\"stickerIndex\":[32],\"stickToEle\":[32],\"triggerPos\":[32],\"trigger\":[32],\"_offset\":[32],\"isHiding\":[64],\"isSticking\":[64],\"setTriggerPos\":[64],\"getTriggerPos\":[64],\"pauseHiding\":[64]}]]],[\"nano-icon-button.cjs\",[[2,\"nano-icon-button\",{\"iconName\":[1,\"icon-name\"],\"iconSrc\":[1,\"icon-src\"],\"type\":[513],\"name\":[513],\"value\":[513],\"label\":[1],\"disabled\":[516],\"href\":[1],\"target\":[1]}]]],[\"nano-resize-observe_2.cjs\",[[1,\"nano-resize-observe\",{\"states\":[1],\"currentWidth\":[32],\"currentHeight\":[32],\"classNames\":[32]}],[1,\"nano-skeleton\",{\"animated\":[4]}]]],[\"nano-grid_3.cjs\",[[1,\"nano-img\",{\"alt\":[1],\"src\":[1],\"srcSet\":[1,\"src-set\"],\"lazy\":[4],\"background\":[4],\"autoHeight\":[1,\"auto-height\"],\"loadSrc\":[32],\"loadError\":[32],\"hasLoaded\":[32],\"imgStates\":[32],\"_src\":[32]}],[1,\"nano-grid\",{\"sSize\":[2,\"s-size\"],\"mSize\":[2,\"m-size\"],\"lSize\":[2,\"l-size\"],\"xlSize\":[2,\"xl-size\"],\"sCols\":[2,\"s-cols\"],\"mCols\":[2,\"m-cols\"],\"lCols\":[2,\"l-cols\"],\"xlCols\":[2,\"xl-cols\"],\"xxlCols\":[2,\"xxl-cols\"],\"showHelper\":[516,\"show-helper\"],\"contentPanel\":[516,\"content-panel\"],\"fullHeight\":[516,\"full-height\"],\"ready\":[32],\"isSmall\":[32],\"isMedium\":[32],\"isLarge\":[32],\"isXL\":[32],\"isXXL\":[32]}],[1,\"nano-grid-item\",{\"gridStates\":[1,\"grid-states\"],\"changeBP\":[64]}]]],[\"nano-icon.cjs\",[[1,\"nano-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"flipRtl\":[4,\"flip-rtl\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"lazy\":[4],\"svgContent\":[32],\"isVisible\":[32],\"isLoading\":[32]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"nano-global-nav.cjs\",[[1,\"nano-global-nav\",{\"env\":[1],\"ssoRedirect\":[1,\"sso-redirect\"],\"getMyAccountData\":[4,\"get-my-account-data\"],\"activeMyAccountSections\":[16],\"showSearch\":[4,\"show-search\"],\"showLogo\":[4,\"show-logo\"],\"logoUrl\":[1,\"logo-url\"],\"searchIndeces\":[16],\"myAccountUser\":[1040],\"searchAppId\":[1025,\"search-app-id\"],\"searchApiKey\":[1025,\"search-api-key\"],\"searchValue\":[1025,\"search-value\"],\"searchIndex\":[1025,\"search-index\"],\"cartCount\":[1026,\"cart-count\"],\"msgCount\":[1026,\"msg-count\"],\"cartUrl\":[1025,\"cart-url\"],\"msgUrl\":[1025,\"msg-url\"],\"hasLoggedinSlot\":[32],\"hasSiteSlot\":[32],\"hasPromotionSlot\":[32],\"aboutSlotLen\":[32],\"iconSlotLen\":[32],\"mainSlotLen\":[32],\"overflowSlotLen\":[32],\"searchSlotLen\":[32],\"internalSearchIndeces\":[32],\"thresholdReady\":[32],\"remoteDataReady\":[32],\"ready\":[32],\"isResizing\":[32],\"intersectRatio\":[32],\"threshold\":[32],\"modalOpen\":[32],\"modalIsOpen\":[32],\"searchBarShown\":[32],\"scrollingUp\":[32],\"searchLoading\":[32],\"showAutocomplete\":[32],\"secondaryMenuOpen\":[32],\"userMenuOpen\":[32],\"menuFullScreen\":[32],\"searchValInternal\":[32],\"submitSearch\":[64]},[[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"]]]]],[\"nano-hero.cjs\",[[1,\"nano-hero\",{\"imgSrc\":[1,\"img-src\"],\"imgSrcSet\":[1,\"img-src-set\"],\"largeScreenBP\":[2,\"large-screen-b-p\"],\"theme\":[1],\"level\":[1],\"gridSizes\":[32],\"hasIconBox\":[32],\"hasScrim\":[32],\"hasSecondaryContent\":[32],\"hasQuote\":[32],\"hasBg\":[32],\"hasBackBtn\":[32],\"hasCtas\":[32],\"breadCrumbs\":[32],\"iconBoxItems\":[32]}]]],[\"nano-date-input.cjs\",[[6,\"nano-date-input\",{\"invalid\":[2564],\"helperText\":[4,\"helper-text\"],\"helperTextFormat\":[16],\"floatLabel\":[4,\"float-label\"],\"name\":[1],\"readonly\":[4],\"size\":[2],\"form\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"disabled\":[4],\"color\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"label\":[1],\"placeholder\":[1025],\"value\":[1537],\"validateOn\":[1,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"dateOrder\":[1,\"date-order\"],\"required\":[4],\"min\":[1],\"max\":[1],\"hideLabel\":[4,\"hide-label\"],\"picker\":[4],\"initialPickerDate\":[1,\"initial-picker-date\"],\"pickerOpen\":[1540,\"picker-open\"],\"closeAfterPicked\":[4,\"close-after-picked\"],\"pattern\":[32],\"inputValue\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]}]]],[\"nano-dialog.cjs\",[[1,\"nano-dialog\",{\"showRibbon\":[4,\"show-ribbon\"],\"open\":[1540],\"label\":[1],\"noHeader\":[4,\"no-header\"],\"noFooter\":[4,\"no-footer\"],\"noUserDismiss\":[4,\"no-user-dismiss\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"isVisible\":[32],\"noDismiss\":[32],\"hasFooter\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-file-upload.cjs\",[[6,\"nano-file-upload\",{\"name\":[1],\"accept\":[1],\"capture\":[1],\"maxFileSize\":[2,\"max-file-size\"],\"maxFiles\":[2,\"max-files\"],\"label\":[1],\"placeholder\":[1],\"hideLabel\":[4,\"hide-label\"],\"required\":[4],\"disabled\":[516],\"clearInput\":[4,\"clear-input\"],\"showInlineError\":[516,\"show-inline-error\"],\"validateOn\":[1025,\"validate-on\"],\"invalid\":[2564],\"files\":[2064],\"value\":[6145],\"hasHelperSlot\":[32],\"hasLabelSlot\":[32],\"errorMessage\":[32],\"isDragging\":[32],\"fileList\":[32],\"hasFocus\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]},[[8,\"click\",\"globalClickHandler\"],[8,\"keydown\",\"globalKeydownHandler\"]]]]],[\"nano-alert.cjs\",[[1,\"nano-alert\",{\"open\":[1540],\"closable\":[516],\"color\":[513],\"duration\":[2],\"isModal\":[32],\"isToast\":[32],\"isShowing\":[32],\"label\":[32],\"show\":[64],\"hide\":[64],\"toast\":[64],\"alert\":[64]}]]],[\"nano-global-search-results.cjs\",[[1,\"nano-global-search-results\",{\"algoliaEle\":[32],\"currentWidth\":[32],\"apiKey\":[32],\"appId\":[32],\"index\":[32]},[[16,\"nanoSearchReset\",\"handleGlobalNavReset\"],[16,\"nanoSearchResult\",\"handleGlobalNavSearch\"],[0,\"nanoChange\",\"handleReorder\"],[0,\"nanoResultsShown\",\"attachListeners\"],[16,\"nanoNewResults\",\"attachResultListeners\"]]]]],[\"nano-tab.cjs\",[[1,\"nano-tab\",{\"panel\":[513],\"active\":[516],\"disabled\":[516],\"closable\":[4],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-menu-drawer.cjs\",[[1,\"nano-menu-drawer\",{\"open\":[4],\"saveState\":[4,\"save-state\"],\"hideWidth\":[2,\"hide-width\"],\"hideHeight\":[4,\"hide-height\"],\"reset\":[32],\"widthOk\":[32],\"heightOk\":[32],\"isLoading\":[32],\"hide\":[32]},[[0,\"nanoOpen\",\"cancelNavItemEvents\"],[0,\"nanoClose\",\"cancelNavItemEvents\"],[16,\"nanoIsReady\",\"handleGlobalNavReady\"]]]]],[\"nano-tab-group.cjs\",[[1,\"nano-tab-group\",{\"placement\":[1],\"noScrollControls\":[4,\"no-scroll-controls\"],\"color\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"disableSwipe\":[4,\"disable-swipe\"],\"hasScrollControls\":[32],\"hideControlRight\":[32],\"hideControlLeft\":[32],\"isLegacy\":[32],\"tab\":[32],\"show\":[64]},[[0,\"nanoTabClose\",\"handleTabClose\"]]]]],[\"nano-accordion.cjs\",[[1,\"nano-accordion\",{\"color\":[1],\"itemOpened\":[32]},[[0,\"nanoOpened\",\"onToggleHandler\"],[0,\"nanoClosed\",\"onClosedHandler\"]]]]],[\"nano-algolia-filter.cjs\",[[1,\"nano-algolia-filter\",{\"filterName\":[1,\"filter-name\"],\"value\":[1025],\"operator\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"changeEvent\":[32],\"internalValue\":[32],\"showFilter\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"facets\":[32],\"tplRenderFn\":[32],\"globalStoreMethod\":[32]},[[0,\"nanoChange\",\"handleChangeEvent\"],[0,\"change\",\"handleChangeEvent\"]]]]],[\"nano-algolia-input.cjs\",[[1,\"nano-algolia-input\",{\"appId\":[1,\"app-id\"],\"apiKey\":[1,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1,\"search-index-name\"],\"minChars\":[2,\"min-chars\"],\"autoEmit\":[4,\"auto-emit\"],\"browseIndex\":[1028,\"browse-index\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"searchStr\":[32],\"algoliaIndex\":[32],\"currentResults\":[32],\"search\":[64]},[[0,\"nanoChange\",\"searchSubmit\"]]]]],[\"nano-algolia-pagination.cjs\",[[1,\"nano-algolia-pagination\",{\"maxToShow\":[2,\"max-to-show\"],\"currentPage\":[32],\"canGoPrev\":[32],\"canGoNext\":[32],\"show\":[32],\"tplRenderFn\":[32],\"indexResults\":[32],\"infiniteScroll\":[32],\"nextPage\":[64],\"prevPage\":[64],\"goToPage\":[64]}]]],[\"nano-algolia-results.cjs\",[[1,\"nano-algolia-results\",{\"infiniteScroll\":[4,\"infinite-scroll\"],\"appendPages\":[4,\"append-pages\"],\"showResults\":[32],\"tplRenderFn\":[32],\"results\":[32],\"indexResults\":[32],\"resultsPage\":[32],\"changeEvent\":[32],\"facets\":[32],\"isLoading\":[32]}]]],[\"nano-aspect-ratio.cjs\",[[1,\"nano-aspect-ratio\",{\"aspectRatio\":[1,\"aspect-ratio\"],\"fit\":[1]}]]],[\"nano-checkbox.cjs\",[[6,\"nano-checkbox\",{\"hasFocus\":[1540,\"has-focus\"],\"checked\":[1540],\"disabled\":[516],\"value\":[1],\"name\":[1],\"required\":[4],\"type\":[513],\"label\":[1],\"indeterminate\":[1540],\"invalid\":[2564],\"color\":[1],\"_invalid\":[32],\"inputType\":[32],\"getInputElement\":[64],\"reportValidity\":[64],\"setError\":[64],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-checkbox-group.cjs\",[[6,\"nano-checkbox-group\",{\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[4,\"show-inline-error\"],\"min\":[2],\"max\":[2],\"disabled\":[516],\"legend\":[1],\"invalid\":[2564],\"checkboxes\":[32],\"nativeCbs\":[32],\"errorMessage\":[32],\"showErrorMsg\":[32],\"hasHelperSlot\":[32],\"reportValidity\":[64]},[[0,\"nanoChange\",\"handleCbChange\"]]]]],[\"nano-details.cjs\",[[1,\"nano-details\",{\"label\":[1],\"open\":[1540],\"noHandle\":[4,\"no-handle\"],\"iconRotation\":[2,\"icon-rotation\"],\"color\":[1],\"isLoading\":[32]}]]],[\"nano-drawer.cjs\",[[1,\"nano-drawer\",{\"open\":[1540],\"label\":[1],\"placement\":[1],\"contained\":[4],\"noHeader\":[4,\"no-header\"],\"type\":[1],\"contentSelector\":[1,\"content-selector\"],\"hasFooter\":[32],\"isVisible\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-range.cjs\",[[6,\"nano-range\",{\"color\":[1],\"debounce\":[2],\"name\":[1],\"dualKnobs\":[4,\"dual-knobs\"],\"min\":[2],\"max\":[2],\"pin\":[4],\"snaps\":[4],\"step\":[2],\"ticks\":[4],\"disabled\":[4],\"value\":[1026],\"ratioA\":[32],\"ratioB\":[32],\"pressedKnob\":[32]}]]],[\"nano-rating.cjs\",[[2,\"nano-rating\",{\"value\":[1538],\"max\":[2],\"precision\":[2],\"readonly\":[4],\"disabled\":[4],\"name\":[1],\"symbolName\":[1,\"symbol-name\"],\"symbol\":[16],\"hoverValue\":[32],\"isHovering\":[32],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-slide.cjs\",[[1,\"nano-slide\",{\"ready\":[1540]}]]],[\"nano-slides.cjs\",[[1,\"nano-slides\",{\"options\":[1040],\"navbtns\":[4],\"pager\":[4],\"fullscreenbtn\":[4],\"fullscreen\":[1540],\"animation\":[513],\"currentSlide\":[1538,\"current-slide\"],\"autoplay\":[8],\"ready\":[1540],\"iCurrentSlide\":[32],\"slidesReady\":[32],\"didInit\":[32],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipes\":[64],\"getflickity\":[64],\"reload\":[64]}]]],[\"nano-tab-content.cjs\",[[1,\"nano-tab-content\",{\"name\":[513],\"active\":[516]}]]],[\"nano-spinner.cjs\",[[1,\"nano-spinner\",{\"type\":[1],\"overlay\":[516],\"hasText\":[32]}]]],[\"nano-algolia.cjs\",[[1,\"nano-algolia\",{\"showResults\":[1028,\"show-results\"],\"resultsPage\":[1026,\"results-page\"],\"appId\":[1025,\"app-id\"],\"apiKey\":[1025,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1025,\"search-index-name\"],\"listenTo\":[1,\"listen-to\"],\"query\":[1025],\"operator\":[1],\"filters\":[16],\"tplEngine\":[16],\"tplRenderFn\":[16],\"replicaIndex\":[1025,\"replica-index\"],\"browseIndex\":[1028,\"browse-index\"],\"minChars\":[2,\"min-chars\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"_dynFacetFilters\":[32],\"inputField\":[32],\"algoliaIndex\":[32],\"indeces\":[32],\"resultsEmitterEle\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"currentHits\":[32],\"changeEvent\":[32],\"isLoading\":[32],\"wormholeState\":[32],\"removeFilters\":[64]},[[0,\"nanoTplUpdated\",\"onAllTplUpdate\"],[0,\"nanoPageChanged\",\"onPageChange\"],[0,\"nanoFilterChanged\",\"onFilterChange\"],[16,\"nanoChange\",\"handleInputChange\"],[16,\"change\",\"handleInputChange\"]]]]],[\"nano-date-picker.cjs\",[[1,\"nano-date-picker\",{\"selectedDate\":[1025,\"selected-date\"],\"min\":[1],\"max\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"color\":[1],\"isDateDisabled\":[16],\"isModal\":[4,\"is-modal\"],\"firstFocusEle\":[16],\"activeFocus\":[32],\"focusedDay\":[32],\"setFocus\":[64]}]]],[\"nano-tooltip.cjs\",[[1,\"nano-tooltip\",{\"content\":[1],\"placement\":[1],\"disabled\":[4],\"distance\":[2],\"open\":[1540],\"skidding\":[2],\"trigger\":[1],\"show\":[64],\"hide\":[64]}]]],[\"nano-nav-item_2.cjs\",[[6,\"nano-select\",{\"invalid\":[2564],\"color\":[1],\"autofocus\":[4],\"disabled\":[516],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"multiple\":[4],\"name\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"size\":[2],\"max\":[2],\"min\":[2],\"form\":[1],\"allowCustomValues\":[4,\"allow-custom-values\"],\"value\":[6145],\"options\":[6160],\"clearSelect\":[4,\"clear-select\"],\"mask\":[4],\"debounce\":[2],\"dropDownConfig\":[1040],\"currInsertIndex\":[32],\"showErrorMsg\":[32],\"errorMessage\":[32],\"hasFocus\":[32],\"hasLabelSlot\":[32],\"hasHelperSlot\":[32],\"inputSearchVal\":[32],\"_eOptions\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getSelectElement\":[64],\"showError\":[64]},[[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]],[1,\"nano-nav-item\",{\"href\":[1025],\"target\":[1],\"disabled\":[4],\"open\":[1540],\"selected\":[516],\"secondaryActiveWidth\":[2,\"secondary-active-width\"],\"secondaryFallback\":[16],\"closeOnBlur\":[4,\"close-on-blur\"],\"didOpen\":[32],\"isInGlobalNav\":[32],\"isInMenuDrawer\":[32],\"isInMenu\":[32],\"isLegacy\":[32],\"hasFocus\":[32],\"setFocus\":[64]}]]],[\"nano-input.cjs\",[[6,\"nano-input\",{\"invalid\":[2564],\"color\":[1],\"accept\":[1],\"autocapitalise\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"clearOnEdit\":[4,\"clear-on-edit\"],\"debounce\":[2],\"disabled\":[516],\"inputmode\":[1],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[4],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"type\":[1],\"form\":[1],\"value\":[1025],\"resize\":[1],\"rows\":[2],\"showCharCount\":[4,\"show-char-count\"],\"hasFocus\":[32],\"hasLabelSlot\":[32],\"hasHelperSlot\":[32],\"errorMessage\":[32],\"datalist\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]},[[16,\"reset\",\"onReset\"],[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]]]],[\"nano-sticker.cjs\",[[1,\"nano-sticker\",{\"autoResize\":[4,\"auto-resize\"],\"isSticky\":[1028,\"is-sticky\"],\"offset\":[1026],\"position\":[1],\"quietMode\":[1,\"quiet-mode\"],\"hideOnNewStickers\":[4,\"hide-on-new-stickers\"],\"breakPointMax\":[2,\"break-point-max\"],\"breakPointMin\":[2,\"break-point-min\"],\"scrollParent\":[1040],\"stickTo\":[1,\"stick-to\"],\"isStuck\":[32],\"isRootSticker\":[32],\"hide\":[32],\"scrollHide\":[32],\"multiStickerHide\":[32],\"scrollingTo\":[32],\"quietModeIsOn\":[32],\"stuckCounter\":[32],\"stickerIndex\":[32],\"stickToEle\":[32],\"triggerPos\":[32],\"trigger\":[32],\"_offset\":[32],\"isHiding\":[64],\"isSticking\":[64],\"setTriggerPos\":[64],\"getTriggerPos\":[64],\"pauseHiding\":[64]}]]],[\"nano-icon-button.cjs\",[[2,\"nano-icon-button\",{\"iconName\":[1,\"icon-name\"],\"iconSrc\":[1,\"icon-src\"],\"type\":[513],\"name\":[513],\"value\":[513],\"label\":[1],\"disabled\":[516],\"href\":[1],\"target\":[1]}]]],[\"nano-resize-observe_2.cjs\",[[1,\"nano-resize-observe\",{\"states\":[1],\"currentWidth\":[32],\"currentHeight\":[32],\"classNames\":[32]}],[1,\"nano-skeleton\",{\"animated\":[4]}]]],[\"nano-grid_3.cjs\",[[1,\"nano-img\",{\"alt\":[1],\"src\":[1],\"srcSet\":[1,\"src-set\"],\"lazy\":[4],\"background\":[4],\"autoHeight\":[1,\"auto-height\"],\"loadSrc\":[32],\"loadError\":[32],\"hasLoaded\":[32],\"imgStates\":[32],\"_src\":[32]}],[1,\"nano-grid\",{\"sSize\":[2,\"s-size\"],\"mSize\":[2,\"m-size\"],\"lSize\":[2,\"l-size\"],\"xlSize\":[2,\"xl-size\"],\"sCols\":[2,\"s-cols\"],\"mCols\":[2,\"m-cols\"],\"lCols\":[2,\"l-cols\"],\"xlCols\":[2,\"xl-cols\"],\"xxlCols\":[2,\"xxl-cols\"],\"showHelper\":[516,\"show-helper\"],\"contentPanel\":[516,\"content-panel\"],\"fullHeight\":[516,\"full-height\"],\"ready\":[32],\"isSmall\":[32],\"isMedium\":[32],\"isLarge\":[32],\"isXL\":[32],\"isXXL\":[32]}],[1,\"nano-grid-item\",{\"gridStates\":[1,\"grid-states\"],\"changeBP\":[64]}]]],[\"nano-dropdown.cjs\",[[1,\"nano-dropdown\",{\"autoOpen\":[4,\"auto-open\"],\"open\":[1540],\"closeOnSelect\":[4,\"close-on-select\"],\"containingElement\":[1040],\"tetherTo\":[16],\"placement\":[1],\"distance\":[2],\"skidding\":[2],\"hoist\":[4],\"dialogTitle\":[1,\"dialog-title\"],\"show\":[64],\"hide\":[64]},[[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"],[0,\"nanoSelect\",\"handlePanelSelect\"]]]]],[\"nano-icon.cjs\",[[1,\"nano-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"flipRtl\":[4,\"flip-rtl\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"lazy\":[4],\"svgContent\":[32],\"isVisible\":[32],\"isLoading\":[32]}]]],[\"nano-datalist_3.cjs\",[[1,\"nano-datalist\",{\"selected\":[1040],\"dropDownConfig\":[6160],\"options\":[16],\"input\":[1],\"type\":[1],\"activeOptions\":[2064],\"open\":[1028],\"disableFilter\":[4,\"disable-filter\"],\"disabled\":[4],\"actvOptEles\":[32],\"connectedInput\":[32],\"inputLabel\":[32],\"hasNoResult\":[32],\"shouldOpen\":[32],\"canOpen\":[32],\"optionIds\":[32]}],[1,\"nano-option\",{\"value\":[1537],\"label\":[1537],\"selected\":[516],\"disabled\":[516],\"filterMeta\":[1,\"filter-meta\"],\"hasFocus\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[1,\"nano-menu\",{\"hasFocus\":[2052,\"has-focus\"],\"type\":[1],\"label\":[1],\"setFocus\":[64],\"removeFocus\":[64],\"showActiveElement\":[64],\"resetActiveItem\":[64]},[[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]]]]]"), options);
 });
 
 //# sourceMappingURL=nano-components.cjs.js.map