@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

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

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxCss","NanoCheckboxStyle0","checkboxIds","Checkbox","inputId","input","inputType","hasFocus","checked","handleCheckedChange","this","name","host","isConnected","form","closest","root","getRootNode","ctrls","Array","from","querySelectorAll","transformTag","filter","radio","map","el","nanoChange","emit","value","disabled","required","type","typeChange","includes","label","indeterminate","handleIndeterminateChange","invalid","_invalid","validityMessage","validationMessage","color","nanoFocus","nanoBlur","getInputElement","reportValidity","validateFirst","validity","valid","isValid","errorMessage","setError","message","updateStatus","length","setCustomValidity","setFocus","focus","focusVisible","force","removeFocus","blur","onReset","e","document","querySelector","target","handleInvalid","ev","handleChange","handleFocus","handleBlur","isRadioChecked","requestAnimationFrame","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","render","labelId","h","Host","key","class","createColorClasses","nanocb","htmlFor","onBlur","onFocus","onChange","ref","id","onInvalid","hidden"],"sources":["src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{tokens.$control-invalid-style};\n   * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{tokens.$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   * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{map.get(tokens.$colors, white)};\n   * @prop --check-border-color: initial border color. Defaults  to #{map.get(tokens.$colors, palegrey)};\n   * @prop --check-border-size: initial border size. Default to 1px;\n   * @prop --check-border-style: Initial border style. Defaults to var(--check-border-size) solid var(--check-border-color);\n   * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{map.get(tokens.$colors, darkgrey)};\n   * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get(tokens.$colors, darkgrey)};\n   * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get(tokens.$colors, 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 #{mx.color-to-rgb-list(map.get(tokens.$colors, lightblue))};\n   * @prop --tagbox-border-color: Defaults to rgb(var(--tagbox-rgb) / 50%);\n   * @prop --tagbox-bg-color: Defaults to rgb(var(--tagbox-rgb) / 10%);\n   * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{map.get(tokens.$colors, blue)};\n   * @prop --segment-border-radius: Defaults to 3px;\n   * @prop --segment-shadow: Defaults to 0 1px 4px rgb(0 0 0 / 20%);\n   * @prop --switch-inactive-color: Defaults to rgb(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n   * @prop --switch-active-color: Defaults to #{map.get(tokens.$colors, blue)};\n  */\n\n  --focus-shadow: #{tokens.$control-focus-style};\n  --invalid-shadow: #{tokens.$control-focus-size + ' ' map.get(tokens.$colors, red)};\n  --padding: initial;\n  --check-bg-color: #{map.get(tokens.$colors, white)};\n  --check-border-color: #{map.get(tokens.$colors, palegrey)};\n  --check-border-size: 1px;\n  --check-border-style: var(--check-border-size) solid var(--check-border-color);\n  --check-checked-bg-color: #{map.get(tokens.$colors, darkgrey)};\n  --check-checked-border-color: #{map.get(tokens.$colors, darkgrey)};\n  --check-checked-higlight-color: #{map.get(tokens.$colors, white)};\n  --check-base-size: inherit;\n  --label-spacing: 10px 0;\n\n  // type specific\n\n  // tag\n  --tagbox-rgb: #{mx.color-to-rgb-list(map.get(tokens.$colors, lightblue))};\n  --tagbox-border-color: rgb(var(--tagbox-rgb) / 50%);\n  --tagbox-bg-color: rgb(var(--tagbox-rgb) / 20%);\n  --tagbox-border-radius: 0;\n\n  // segment\n  --segment-color: #{map.get(tokens.$colors, blue)};\n  --segment-border-radius: 3px;\n  --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n  // cb / radio\n  --cb-border-radius: 2px;\n  --radio-border-radius: 50%;\n\n  // switch\n  --switch-inactive-color: rgb(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n  --switch-active-color: #{map.get(tokens.$colors, blue)};\n\n  display: inline-block;\n  max-inline-size: 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='radio'][checked]):not([checked='false']) {\n  --check-border-size: 0.3125em;\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-color: #{rgba(map.get(tokens.$colors, 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: #{tokens.$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n  --tagbox-border-color: rgb(var(--tagbox-rgb) / 80%);\n  --tagbox-bg-color: rgb(var(--tagbox-rgb) / 50%);\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: #{mx.color-to-rgb-list(map.get(tokens.$colors, mediumgrey))};\n  --check-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n  --check-checked-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n  --segment-color: #{map.get(tokens.$colors, 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  // The mock, viewable 'input' control. Only relevant for controls where the label\n  // is outside / separate from the UI control (e.g. checkbox, radio, switch).\n\n  &__input {\n    border-radius: var(--cb-border-radius, 3px);\n    font-size: var(--check-base-size);\n    position: relative;\n    block-size: 1.5em;\n    inline-size: 1.5em;\n    min-inline-size: 1.5em;\n    border: var(--check-border-style);\n    box-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n    &::before {\n      border-radius: var(--cb-border-radius);\n      position: absolute;\n      content: '';\n      inset-inline-start: calc(0.725em - var(--check-border-size));\n      inset-block-start: calc(0.725em - var(--check-border-size));\n      inline-size: 0;\n      block-size: 0;\n      border: 2px solid var(--check-checked-higlight-color);\n      transform: scale(0);\n    }\n\n    &--radio {\n      border-radius: var(--radio-border-radius);\n      background-color: var(--check-bg-color);\n    }\n\n    &--checkbox {\n      background-color: var(--check-bg-color);\n\n      &::after {\n        border-radius: var(--cb-border-radius);\n        position: absolute;\n        content: '';\n        inset-inline-start: calc(0.825em - var(--check-border-size));\n        inset-block-start: calc(0.825em - var(--check-border-size));\n        block-size: 0;\n        inline-size: 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;\n        }\n      }\n    }\n\n    &--switch {\n      border-radius: 1em !important;\n      inline-size: 2.4em;\n      block-size: 1.3em;\n      background: var(--switch-inactive-color);\n\n      :host([type=\"switch\"]:not([disabled])) & {\n        &:hover::after {\n          scale: 1.1 1;\n        }\n      }\n\n      &::after {\n        position: relative;\n        content: '';\n        display: block;\n        border-radius: inherit;\n        block-size: 80%;\n        inline-size: 40%;\n        background: var(--check-checked-higlight-color);\n        transform-origin: left;\n        inset-inline-start: 6%;\n        inset-block-start: 10%;\n        transition: .1s ease scale, .15s ease left;\n      }\n    }\n\n    &--segment,\n    &--segment-pill {\n      @include mx.visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n\n    &--tag {\n      @include mx.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 rgb(0 0 0 / 20%), 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  // The 'real' input control which we hide but use it's state for display\n  input {\n    @include mx.visually-hide();\n\n    &:focus ~ .nanocb__input {\n      box-shadow: 0 0 15px rgb(0 0 0 / 20%), 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      border-radius: var(--cb-border-radius);\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border-color: var(--check-checked-border-color);\n\n      // segment / segment-pill active\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 rgb(0 0 0 / 20%);\n      }\n\n      // radio active\n\n      &--radio {\n        border-radius: var(--radio-border-radius);\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 active\n\n      &--checkbox {\n        &::after {\n          transform: rotate(45deg) scale(1);\n          opacity: 1;\n          inset-inline-start: calc(0.575em - var(--check-border-size));\n          inset-block-start: calc(0.2875em - var(--check-border-size));\n          inline-size: 0.375em;\n          block-size: 0.75em;\n          border-radius: 0;\n        }\n      }\n\n      // tag active\n\n      &--tag + .nanocb__label::after {\n        transform: rotate(45deg);\n      }\n\n      // switch active\n\n      &--switch {\n        background: var(--switch-active-color);\n\n        &::after {\n          inset-inline-start: 56%;\n          transform-origin: right;\n        }\n      }\n    }\n\n    // indeterminate (only checkbox?)\n\n    &:indeterminate ~ .nanocb__input--checkbox {\n      border-radius: var(--input-border-radius, 5px);\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        inset-inline-start: 0.3125em;\n        inset-block-start: 0;\n        inline-size: 0.7em;\n        block-size: 0.7em;\n        border-radius: 0;\n      }\n    }\n  }\n\n  // The label\n  &__label {\n    padding-inline: var(--label-spacing);\n    padding-block: 0;\n    display: flex;\n    align-items: center;\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      inline-size: 100%;\n    }\n\n    &--segment-pill {\n      // first\n      :host(:first-of-type) & {\n        border-start-start-radius: var(--segment-border-radius);\n        border-start-end-radius: 0;\n        border-end-end-radius: 0;\n        border-end-start-radius: var(--segment-border-radius);\n        border-inline-end: none;\n      }\n\n      // middle\n      :host(:not(:last-of-type):not(:first-of-type)) & {\n        border-radius: 0;\n        border-inline-end: none;\n      }\n\n      // last\n      :host(:last-of-type) & {\n        border-start-start-radius: 0;\n        border-start-end-radius: var(--segment-border-radius);\n        border-end-end-radius: var(--segment-border-radius);\n        border-end-start-radius: 0;\n      }\n\n      // single\n      :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: 400;\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      inline-size: 100%;\n\n      &::after {\n        content: '+';\n        margin-inline: 0.3125em 0;\n        margin-block: 0;\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  ComponentInterface,\n  State,\n  Watch,\n  Method,\n  Element,\n  Host,\n  Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport { transformTag, h } from '../../utils/renderer';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport type { ControlValidity, Color } from '../../types/shared';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n  tag: 'nano-checkbox',\n  styleUrl: 'checkbox.scss',\n  scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n  private inputId = `nano-cb-${checkboxIds++}`;\n  private input: HTMLInputElement;\n\n  @Element() private host: HTMLNanoCheckboxElement;\n  @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n  /** @internal */\n  @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n  /**\n   * checked property that can be used to get/set the value. accepts only boolean values\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  @Watch('checked')\n  async handleCheckedChange() {\n    if (!this.input) return;\n\n    this.input.checked = this.checked;\n\n    if (\n      this.inputType === 'radio' &&\n      this.name &&\n      this.checked &&\n      this.host.isConnected\n    ) {\n      const form = this.host.closest('form');\n      const root = this.host.getRootNode() as ShadowRoot | Document;\n      let ctrls: Element[];\n\n      if (form) {\n        ctrls = Array.from(\n          form.querySelectorAll(\n            `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n          )\n        );\n      } else {\n        ctrls = Array.from(\n          root.querySelectorAll(\n            `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n          )\n        )?.filter((radio) => !radio.closest('form'));\n      }\n      ctrls.map((el: HTMLNanoCheckboxElement) => {\n        if (el !== this.host) el.checked = false;\n      });\n    }\n    this.nanoChange.emit({ value: this.value, checked: this.checked });\n  }\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n   * it's only present when `checked` is true.\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Set to true to make the field required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Controls the underlying field type and style.\n   */\n  @Prop({ reflect: true }) type:\n    | 'radio'\n    | 'checkbox'\n    | 'tag'\n    | 'segment'\n    | 'switch'\n    | 'segment-pill' = 'checkbox';\n\n  @Watch('type')\n  typeChange() {\n    if (['checkbox', 'switch', 'tag'].includes(this.type))\n      this.inputType = 'checkbox';\n    else this.inputType = 'radio';\n  }\n\n  /**\n   * label property that can be used to set the label text. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n  @Watch('indeterminate')\n  handleIndeterminateChange() {\n    this.checked = false;\n    this.input.indeterminate = this.indeterminate;\n  }\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.input) return '';\n    return this.input.validationMessage;\n  }\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * The form element to associate the input with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * Emited when the checkbox is toggled\n   */\n  @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  /**\n   * Emited when the checkbox is focused\n   */\n  @Event() nanoFocus: EventEmitter;\n\n  /**\n   * Emited when the checkbox is blurred\n   */\n  @Event() nanoBlur: EventEmitter;\n\n  // public methods\n\n  /**\n   * Returns the native input control\n   * @returns the native input control\n   */\n  @Method()\n  async getInputElement() {\n    if (this.input) return this.input;\n  }\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n   */\n  @Method()\n  async reportValidity(\n    validateFirst: boolean = false\n  ): Promise<ControlValidity> {\n    if (validateFirst) this.input.reportValidity();\n    this._invalid = !this.input.validity.valid;\n\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.input.validationMessage,\n    };\n  }\n\n  /**\n   * Sets a custom validation message.\n   * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n   */\n  @Method()\n  async setError(message: string, updateStatus = true) {\n    if (!this.input) return;\n    if (updateStatus) this._invalid = !!message.length;\n    this.input.setCustomValidity(message);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) {\n      this.input.focus();\n      focusVisible.force(this.input);\n    }\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  @Method()\n  async removeFocus() {\n    if (this.input) {\n      this.input.blur();\n      focusVisible.force(this.input, false);\n    }\n  }\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.host.closest('form');\n    if (!form || e.target !== this.host.closest('form')) return;\n\n    this.checked = false;\n  }\n\n  // private handlers\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n  };\n\n  private handleChange = (ev: InputEvent) => {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.indeterminate = false;\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  /* Although many radio components can be 'checked',\n  the underlying control may not be. Check */\n  private isRadioChecked() {\n    requestAnimationFrame(() => (this.checked = this.input.checked));\n  }\n\n  // Stencil hooks\n\n  componentWillLoad() {\n    this.typeChange();\n  }\n\n  componentDidLoad() {\n    this.input.indeterminate = this.indeterminate;\n    this.isRadioChecked();\n    focusVisible.observe(this.input);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.input);\n  }\n\n  render() {\n    const labelId = this.inputId + '-lbl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color), 'nano-checkbox': true }}\n      >\n        <label\n          class={{\n            nanocb: true,\n            'nanocb--checked': this.checked,\n            'nanocb--invalid': this.invalid,\n            'nanocb--disabled': this.disabled,\n            'nanocb--focused': this.hasFocus,\n            'nanocb--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n        >\n          <input\n            type={this.inputType}\n            name={this.name}\n            form={this.form}\n            required={this.required}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            aria-labelledby={labelId}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onChange={this.handleChange}\n            ref={(input) => (this.input = input)}\n            id={this.inputId}\n            onInvalid={this.handleInvalid}\n          />\n          <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n          <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n            {this.label && !!this.label.length && <span>{this.label}</span>}\n            <span hidden={this.label && !!this.label.length}>\n              <slot />\n            </span>\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-components.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["patchBrowser","patchCloneNodeFix","H","prototype","scriptElm","win","document","Array","from","querySelectorAll","find","s","RegExp","NAMESPACE","test","src","getAttribute","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","appendChild","then","async","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/.pnpm/@stencil+core@4.27.2/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.27.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":";;;iKAOA,IAAIA,EAAe,KAIO,CACtBC,EAAkBC,EAAEC,UACxB,CACE,MAAMC,EAAmCC,EAAIC,UAAYC,MAAMC,KAAKH,EAAIC,SAASG,iBAAiB,WAAWC,MAC1GC,GAAM,IAAIC,OAAO,IAAIC,4BAAoCC,KAAKH,EAAEI,MAAQJ,EAAEK,aAAa,4BAA8BH,IAExH,MAAMI,cAAyBC,IAC/B,MAAMC,GAA+Bf,GAAa,IAAI,cAAgB,GACtE,GAAIa,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EAE7B,IAAIlB,EAAqBuB,IACvB,MAAMC,EAAoBD,EAAqBE,UAC/CF,EAAqBE,UAAY,SAASC,GACxC,GAAIC,KAAKC,WAAa,WAAY,CAChC,OAAOJ,EAAkBK,KAAKF,KAAMD,EAC1C,CACI,MAAMI,EAAaN,EAAkBK,KAAKF,KAAM,OAChD,MAAMI,EAAgBJ,KAAKK,WAC3B,GAAIN,EAAM,CACR,IAAK,IAAIO,EAAI,EAAGA,EAAIF,EAAcG,OAAQD,IAAK,CAC7C,GAAIF,EAAcE,GAAGE,WAAa,EAAG,CACnCL,EAAWM,YAAYL,EAAcE,GAAGR,UAAU,MAC5D,CACA,CACA,CACI,OAAOK,CACX,CAAG,ECpCH/B,IAAesC,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAcC,KAAAC,MAAA,6x1BAAuCJ,EAAA","ignoreList":[]}

package/dist/nano-components/nano-datalist_3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["datalistCss","NanoDatalistStyle0","findLabel","formCtrl","foundLabel","id","document","querySelector","closest","listIds","DataList","isNanoInput","typeToSelect","typeToSelectTimeout","nanoDropdown","listBox","mo","listId","isFiltered","shouldFocus","allOptEles","this","_allOptEles","opts","connectedInput","value","forEach","opt","selected","includes","changeInputValue","actvOptEles","inputLabel","hasNoResult","shouldOpen","canOpen","optionIds","constructor","hostRef","inputChange","debounce","bind","dropDownConfig","_dropDownConfig","ddc","skidding","options","input","type","activeOptions","open","openWatcher","writeTask","setAttribute","toString","disableFilter","disabled","watchInputChange","nanoInput","host","transformTag","getInputElement","handleOptionsChange","getDirectChildren","el","length","MutationObserver","processSlottedContent","observe","childList","subtree","disconnect","undefined","previousOptions","querySelectorAll","internalOpt","remove","flatMap","option","i","label","Object","assign","createElement","ariaPosinset","ariaSetsize","textContent","slot","append","watchTypeChange","dwConfig","closeOnSelect","autocompleteType","readonly","placement","tetherTo","readOnly","manageInputEvents","newInput","oldInput","removeEventListener","removeEventListeners","removeAttribute","addEventListener","inputClick","inputKeydown","labels","item","watchActvOptChange","c","val","optIds","hidden","isSelected","push","manageCanOpen","manageDropdownDisplay","fireActiveOptsEvent","nanoOptionsUpdated","emit","nanoSelect","nanoDeselect","dropwdownOpen","exactMatch","find","nanoSelected","filter","defaultPrevented","event","window","Event","dispatchEvent","optSelected","e","stopPropagation","detail","requestAnimationFrame","setOptStartsWith","attrFind","toFind","toLowerCase","substring","foundEle","trim","filterMeta","Array","from","handleShow","async","setFocus","showActiveElement","handleHide","activeElement","getActiveElement","tagName","select","valStr","activeEles","indexOf","ignoreKeys","key","test","clearTimeout","setTimeout","preventDefault","optionKeyDown","focus","deleteKeys","connectedCallback","componentDidLoad","componentDidRender","console","warn","disconnectedCallback","render","h","Host","class","role","join","ref","dialogTitle","dlist__dropdown","onNanoAfterShow","onNanoAfterHide","dlist__menu","tabIndex","onNanoSelect","onKeyDown","name","menuCss","NanoMenuStyle0","Menu","ignoreMouseEvents","ignoreMouseTimeout","menu","hasFocus","_hasFocus","nanoFocus","nanoBlur","preventScroll","removeFocus","blur","selectedItem","scrollIntoView","block","resetActiveItem","getItems","map","items","opened","ctx","activeItem","getAttribute","classList","contains","setActiveFocusItem","handleBlur","kev","found","composedPath","handleFocus","handleClick","target","handleKeyDown","click","index","shadowRoot","getTextContent","handleMouseOver","onClick","onMouseOver","onFocus","part","optionCss","NanoOptionStyle0","Option","optId","valueChanged","labelContent","labelChanged","componentWillLoad","onMouseDown"],"sources":["src/components/datalist/datalist.scss?tag=nano-datalist&encapsulation=shadow","src/components/datalist/datalist.tsx","src/components/menu/menu.scss?tag=nano-menu&encapsulation=shadow","src/components/menu/menu.tsx","src/components/option/option.scss?tag=nano-option&encapsulation=shadow","src/components/option/option.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n  * @prop --padding-top: for all nested `nano-option` elements. Defaults to #{tokens.$spacing-small};\n  * @prop --padding-bottom: for all nested `nano-option` elements. Defaults to #{tokens.$spacing-small};\n  * @prop --padding-start: for all nested `nano-option` elements. Defaults to #{tokens.$spacing-xlarge};\n  * @prop --padding-end: for all nested `nano-option` elements. Defaults to #{tokens.$spacing-xlarge};\n  * @prop --font-size: for all nested `nano-option` elements. Defaults to .8em;\n  * @prop --color: default text color of content other than `nano-option`. Defaults to #{map.get(tokens.$colors, palegrey)};\n  */\n\n  --padding-top: #{tokens.$spacing-small};\n  --padding-bottom: #{tokens.$spacing-small};\n  --padding-start: #{tokens.$spacing-xlarge};\n  --padding-end: #{tokens.$spacing-xlarge};\n  --font-size: 0.8em;\n  --color: #{map.get(tokens.$colors, palegrey)};\n\n  color: var(--color);\n}\n\n.dlist {\n  &--isfiltered {\n    ::slotted(*:not(.nano-option):not([slot='no-result']):not([slot='list-top']):not([slot='list-bottom'])) {\n      display: none !important;\n    }\n  }\n\n  &__dropdown {\n    --min-width: 100%;\n    --overflow: auto;\n  }\n\n  &__status {\n    @include mx.visually-hide();\n  }\n\n  &__menu {\n    --padding-top: inherit;\n    --padding-bottom: inherit;\n    --padding-start: inherit;\n    --padding-end: inherit;\n    --font-size: inherit;\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  Element,\n  State,\n  Watch,\n  Prop,\n  Event,\n  writeTask,\n  Build,\n  EventEmitter,\n} from '@stencil/core';\nimport { h, transformTag } from '../../utils/renderer';\nimport { getActiveElement } from '../../utils/active-element';\nimport { debounce } from '../../utils/throttle';\nimport { getDirectChildren } from '../../utils/dom';\nimport type { NanoMenuCustomEvent } from '../../components';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type { OptionInterface } from '../option/option-interface';\n\nfunction findLabel(formCtrl: Element) {\n  let foundLabel: HTMLLabelElement;\n\n  if (formCtrl.id) {\n    foundLabel = document.querySelector(`label[for='${formCtrl.id}']`);\n  }\n  if (!foundLabel) {\n    foundLabel = formCtrl.closest('label');\n  }\n  return foundLabel;\n}\n\nlet listIds = 0;\n\n/**\n * `nano-datalist` a visually consistent and more flexible replacement for a native\n * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`\n * or linked to any input control via the `input` prop. Is used internally within `nano-select`.\n * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop\n *\n * @slot - use `<nano-option>` elements for more complex html. Alternatively use the `options` prop\n * @slot list-top - shows at the top of the list when there are options present\n * @slot list-bottom - shows at the bottom of the list when there are options present\n * @slot no-result - shown when there are no results otherwise nothing will be shown\n */\n@Component({\n  tag: 'nano-datalist',\n  styleUrl: 'datalist.scss',\n  shadow: true,\n})\nexport class DataList implements ComponentInterface {\n  // Private State\n\n  private isNanoInput = false;\n  private typeToSelect = '';\n  private typeToSelectTimeout: number;\n  private nanoDropdown: HTMLNanoDropdownElement;\n  private listBox: HTMLNanoMenuElement;\n  private mo?: MutationObserver;\n  private listId = `nano-datalist-${listIds++}`;\n  private isFiltered = false;\n  private shouldFocus = false;\n  // all potential option eles. Set via slot or `options` prop.\n  // Some may get hidden due to filtering\n  private get allOptEles() {\n    return this._allOptEles;\n  }\n  private set allOptEles(opts) {\n    // when allOptEles are initially set (on slot change / options) -\n    // add options to 'selected' and fire selected event *if*\n    // value isn't set on the input\n    this._allOptEles = opts;\n    if (this.connectedInput?.value) return;\n\n    opts.forEach((opt) => {\n      if (opt.selected && !this.selected.includes(opt.value)) {\n        this.changeInputValue(opt);\n      }\n    });\n  }\n  private _allOptEles: HTMLNanoOptionElement[] = [];\n\n  @Element() host: HTMLNanoDatalistElement;\n\n  // active option eles that are not hidden.\n  @State() actvOptEles: HTMLNanoOptionElement[] = [];\n  @State() connectedInput: HTMLInputElement | HTMLTextAreaElement;\n  @State() inputLabel: HTMLLabelElement;\n  @State() hasNoResult: boolean;\n  @State() shouldOpen: boolean;\n  @State() canOpen: boolean = true;\n  @State() optionIds: string[] = [];\n\n  constructor() {\n    this.inputChange = debounce(this.inputChange.bind(this), 50);\n  }\n\n  // Public API\n\n  /** By default, items in the list will appear 'selected' when the value in the linked input control matches.\n   * However you can add other selected options via the the selected prop. */\n  @Prop({ mutable: true }) selected: string[] = [];\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop()\n  get dropDownConfig() {\n    return this._dropDownConfig;\n  }\n  set dropDownConfig(ddc: Partial<Dropdown>) {\n    this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n  }\n  private _dropDownConfig: Partial<Dropdown> = {\n    skidding: -1,\n  };\n\n  /** Provide an option list.\n   * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop */\n  @Prop() options?: OptionInterface[] = [];\n\n  /** A selector to a HTMLInputElement */\n  @Prop() input?: string | HTMLInputElement;\n\n  /** Tweaks the datalist behaviour and linked control semantics and behaviour.\n   * e.g. 'select' will make the linked input control `readonly`.\n   */\n  @Prop() type: 'select' | 'selctMulti' | 'input' = 'input';\n\n  /** return all the active options currently within the datalist. Can be useful for validation */\n  @Prop()\n  get activeOptions() {\n    return this.allOptEles;\n  }\n\n  /** Force datalist open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  @Watch('open')\n  openWatcher() {\n    writeTask(() => {\n      this.nanoDropdown.open = this.open;\n      if (this.connectedInput)\n        this.connectedInput.setAttribute('aria-expanded', this.open.toString());\n    });\n  }\n\n  /** Use this option to disable to default filtering. This is useful if filtering happens\n   * externally via another method (e.g. via ajax)\n   */\n  @Prop() disableFilter = false;\n\n  /** Activate / deactivate the datalist control */\n  @Prop() disabled = false;\n\n  // State change watchers\n\n  @Watch('input')\n  async watchInputChange() {\n    let nanoInput;\n    if ((nanoInput = this.host.closest(transformTag('nano-input')))) {\n      this.isNanoInput = true;\n      this.connectedInput = await nanoInput.getInputElement();\n    } else if (\n      this.input &&\n      typeof this.input === 'string' &&\n      (nanoInput = document.querySelector(this.input))\n    ) {\n      this.isNanoInput = false;\n      this.connectedInput = nanoInput;\n    } else if (typeof this.input === 'object') {\n      this.connectedInput = this.input;\n    }\n  }\n\n  @Watch('options')\n  handleOptionsChange() {\n    if (!this.host) return;\n\n    getDirectChildren(\n      this.host,\n      ':not(nano-nav-item):not(nano-option):not([role])',\n      true\n    ).forEach((el) => el.setAttribute('role', 'none'));\n\n    // we're not using `options` - setup new MO\n    if ((!this.options || !this.options.length) && !this.mo) {\n      if (Build.isBrowser) {\n        const mo = (this.mo = new MutationObserver(() =>\n          this.processSlottedContent()\n        ));\n        mo.observe(this.host, { childList: true, subtree: true });\n      }\n      this.processSlottedContent();\n      return;\n    }\n\n    // we're using `options` - trash current MO\n    if (this.options?.length) {\n      if (this.mo) {\n        this.mo.disconnect();\n        this.mo = undefined;\n      }\n\n      const previousOptions = this.host.querySelectorAll(\n        transformTag('nano-option')\n      );\n\n      // add imperative `options`\n      writeTask(() => {\n        // clear all previous\n        if (previousOptions?.length)\n          previousOptions.forEach((internalOpt) => internalOpt.remove());\n\n        this.allOptEles = this.options.flatMap((option, i) => {\n          if (option.value || option.label) {\n            const opt = Object.assign(\n              document.createElement(\n                transformTag('nano-option')\n              ) as HTMLNanoOptionElement,\n              {\n                label: option.label,\n                value: option.value,\n                ariaPosinset: i,\n                ariaSetsize: this.options.length,\n                selected: option.selected,\n                id: this.listId + '-option-' + i,\n                textContent: option.label ? option.label : option.value,\n                slot: 'internal-opts',\n              }\n            );\n            this.host.append(opt);\n            return opt;\n          }\n        });\n\n        if (this.connectedInput?.value.length && this.type !== 'select') {\n          this.inputChange();\n        } else {\n          this.actvOptEles = [...this.allOptEles];\n        }\n      });\n    }\n    // forceUpdate(this.host);\n  }\n\n  @Watch('type')\n  @Watch('connectedInput')\n  @Watch('disabled')\n  watchTypeChange() {\n    if (!this.connectedInput || this.disabled) return;\n\n    let dwConfig: Partial<Dropdown> = { closeOnSelect: false };\n    let autocompleteType: 'list' | 'both' = 'both';\n    let readonly = false;\n\n    switch (this.type) {\n      case 'input':\n        dwConfig = { closeOnSelect: true };\n        break;\n      case 'select':\n        autocompleteType = 'list';\n        readonly = true;\n        dwConfig = { closeOnSelect: true, placement: 'center' };\n        break;\n    }\n\n    if (!this.isNanoInput) {\n      dwConfig.tetherTo = this.connectedInput;\n    }\n\n    this.dropDownConfig = { ...this.dropDownConfig, ...dwConfig };\n    this.connectedInput.setAttribute('aria-autocomplete', autocompleteType);\n    this.connectedInput.readOnly = readonly;\n  }\n\n  @Watch('connectedInput')\n  manageInputEvents(newInput?: HTMLInputElement, oldInput?: HTMLInputElement) {\n    if (oldInput) {\n      const nanoInput = oldInput.closest(transformTag('nano-input'));\n      if (nanoInput) {\n        nanoInput.removeEventListener('nanoChange', this.inputChange);\n      }\n      this.removeEventListeners(oldInput);\n\n      this.inputLabel = null;\n\n      writeTask(() => {\n        oldInput.removeAttribute('role');\n        oldInput.removeAttribute('aria-expanded');\n        oldInput.removeAttribute('aria-controls');\n        oldInput.removeAttribute('aria-owns');\n        oldInput.removeAttribute('aria-haspopup');\n        oldInput.removeAttribute('aria-autocomplete');\n        oldInput.removeAttribute('autocomplete');\n      });\n    }\n    if (newInput) {\n      const nanoInput = newInput.closest(transformTag('nano-input'));\n      if (nanoInput) {\n        nanoInput.addEventListener('nanoChange', this.inputChange);\n      }\n      newInput.addEventListener('change', this.inputChange);\n      newInput.addEventListener('click', this.inputClick);\n      newInput.addEventListener('keydown', this.inputKeydown);\n      newInput.addEventListener('input', this.inputChange);\n      this.listId = this.host.id || this.listId;\n\n      this.inputLabel = newInput?.labels?.item(0) || findLabel(newInput);\n\n      writeTask(() => {\n        this.host.id = this.listId;\n        newInput.setAttribute('role', 'combobox');\n        newInput.setAttribute('aria-expanded', 'false');\n        newInput.setAttribute('aria-controls', this.listId);\n        newInput.setAttribute('aria-owns', this.listId);\n        newInput.setAttribute('aria-haspopup', 'listbox');\n        newInput.setAttribute('autocomplete', 'off');\n      });\n    }\n  }\n\n  @Watch('selected')\n  @Watch('actvOptEles')\n  watchActvOptChange() {\n    let c = 0;\n    const val = this.connectedInput?.value || '';\n    const optIds = [];\n\n    writeTask(() => {\n      this.allOptEles.forEach((opt, i) => {\n        if (this.actvOptEles.includes(opt)) {\n          c++;\n          opt.setAttribute('aria-posinset', c + '');\n          opt.setAttribute('aria-setsize', this.actvOptEles.length + '');\n          opt.hidden = false;\n          this.isSelected(opt, val);\n        } else {\n          opt.removeAttribute('aria-posinset');\n          opt.removeAttribute('aria-setsize');\n          opt.hidden = true;\n          opt.selected = false;\n        }\n        opt.id = this.listId + '-option-' + i;\n        optIds.push(opt.id);\n      });\n      this.optionIds = optIds;\n    });\n  }\n\n  @Watch('actvOptEles')\n  @Watch('hasNoResult')\n  manageCanOpen() {\n    if (this.actvOptEles.length || this.hasNoResult) this.canOpen = true;\n    else this.canOpen = false;\n  }\n\n  /**\n   * Opens the dropdown if it can, it should and there are items to display.\n   */\n  @Watch('shouldOpen')\n  @Watch('canOpen')\n  manageDropdownDisplay() {\n    if (this.shouldOpen && this.canOpen && !this.disabled) this.open = true;\n    if (!this.shouldOpen || !this.canOpen) this.open = false;\n    this.openWatcher();\n  }\n\n  @Watch('actvOptEles')\n  fireActiveOptsEvent() {\n    this.nanoOptionsUpdated.emit(this.actvOptEles);\n  }\n\n  // Events\n\n  /** Fired when an item is selected. */\n  @Event() nanoSelect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when a currently selected item is reselected. */\n  @Event() nanoDeselect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when active options change */\n  @Event() nanoOptionsUpdated: EventEmitter<HTMLNanoOptionElement[]>;\n\n  // Private logic\n\n  private isSelected(opt: HTMLNanoOptionElement, val: string) {\n    if (val === opt.value || this.selected.includes(opt.value)) {\n      opt.selected = true;\n    } else opt.selected = false;\n  }\n\n  private get dropwdownOpen() {\n    if (!this.nanoDropdown || !this.open) return false;\n    return true;\n  }\n\n  private get exactMatch() {\n    return this.allOptEles.find(\n      (opt) => this.connectedInput.value === opt.value\n    );\n  }\n\n  /** reflect value back to the connected input unless the event is cancelled */\n  private changeInputValue(opt: HTMLNanoOptionElement) {\n    let nanoSelected;\n\n    if (this.selected.includes(opt.value)) {\n      // deselect option\n      this.selected = this.selected.filter((val) => val !== opt.value);\n      nanoSelected = this.nanoDeselect.emit(opt);\n    } else {\n      // select new option\n      this.selected = [...this.selected];\n      nanoSelected = this.nanoSelect.emit(opt);\n    }\n\n    if (!nanoSelected.defaultPrevented) {\n      if (this.connectedInput) this.connectedInput.value = opt.value;\n\n      const event = new window.Event('change');\n      this.connectedInput?.dispatchEvent(event);\n    }\n  }\n\n  // a new option has been picked\n  private optSelected = (e: NanoMenuCustomEvent<HTMLNanoOptionElement>) => {\n    e.stopPropagation();\n    this.changeInputValue(e.detail);\n    requestAnimationFrame(() => this.inputChange());\n\n    if (this.type !== 'selctMulti') this.shouldOpen = false;\n  };\n\n  // this is for type=\"select\" only.\n  // Filter options that start with text - aggregates letters (as opposed to getting the value from input)\n  private setOptStartsWith() {\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().substring(0, this.typeToSelect.length) ===\n      this.typeToSelect;\n\n    const foundEle = this.allOptEles.find(\n      (opt) =>\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n    );\n    if (foundEle) this.changeInputValue(foundEle);\n  }\n\n  // Event handlers\n\n  private removeEventListeners(\n    oldInput: HTMLInputElement | HTMLTextAreaElement\n  ) {\n    const nanoInput = oldInput.closest(transformTag('nano-input'));\n    if (nanoInput) {\n      nanoInput.removeEventListener('nanoChange', this.inputChange);\n    }\n    oldInput.removeEventListener('change', this.inputChange);\n    oldInput.removeEventListener('click', this.inputClick);\n    oldInput.removeEventListener('keydown', this.inputKeydown);\n    oldInput.removeEventListener('input', this.inputChange);\n  }\n\n  private processSlottedContent() {\n    requestAnimationFrame(() => {\n      this.allOptEles = Array.from(\n        this.host.querySelectorAll(transformTag('nano-option'))\n      );\n      this.hasNoResult = !!this.host.querySelector('[slot=\"no-result\"]');\n\n      if (this.connectedInput?.value.length && this.type !== 'select') {\n        this.inputChange();\n      } else this.actvOptEles = this.allOptEles;\n    });\n  }\n\n  // sets focus immediately on open when 'select' - mirroring native behaviour\n  private handleShow = async () => {\n    if (this.shouldFocus) {\n      this.shouldFocus = false;\n      this.listBox.setFocus();\n    } else if (this.type === 'select') this.listBox.showActiveElement();\n  };\n\n  private handleHide = () => {\n    this.open = false;\n    const activeElement = getActiveElement();\n    if (activeElement.closest(this.host.tagName.toLowerCase())) {\n      this.connectedInput.select();\n    }\n  };\n\n  // any changes to the connected input value will filter the list of active options\n  private inputChange() {\n    if (this.disableFilter) {\n      this.actvOptEles = this.allOptEles;\n      return;\n    }\n\n    const val = this.connectedInput.value;\n    const valStr = val.trim().toLowerCase();\n\n    let exactMatch = false;\n    const activeEles = [];\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().indexOf(valStr) > -1;\n\n    this.allOptEles.forEach((opt) => {\n      if (\n        (val === opt.value || val === opt.label) &&\n        this.type !== 'selctMulti'\n      ) {\n        opt.selected = true;\n        exactMatch = true;\n      } else this.isSelected(opt, val);\n    });\n\n    this.allOptEles.forEach((opt) => {\n      if (!valStr.length || exactMatch) {\n        activeEles.push(opt);\n      } else if (\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n      ) {\n        activeEles.push(opt);\n      }\n    });\n\n    this.isFiltered = valStr.length && !exactMatch;\n    this.actvOptEles = activeEles;\n  }\n\n  private inputClick = () => {\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n  };\n\n  private inputKeydown = (e: KeyboardEvent) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowRight',\n      'ArrowLeft',\n      'Escape',\n      'Enter',\n      'Tab',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Tab') this.shouldOpen = false;\n      return;\n    }\n\n    // When select, mirror native select behaviour. Search on closed list\n    if (\n      this.type === 'select' &&\n      !['ArrowDown', 'ArrowUp'].includes(e.key) &&\n      (e.key !== ' ' || this.typeToSelectTimeout)\n    ) {\n      if (e.key === ' ' || /^[a-zA0-9]+$/i.test(e.key)) {\n        clearTimeout(this.typeToSelectTimeout);\n        this.typeToSelectTimeout = window.setTimeout(() => {\n          this.typeToSelect = '';\n          this.typeToSelectTimeout = 0;\n        }, 750);\n        this.typeToSelect += e.key;\n        this.setOptStartsWith();\n      }\n      return;\n    }\n\n    if (this.open && ['ArrowDown', 'ArrowUp'].includes(e.key)) {\n      this.listBox.setFocus();\n      return;\n    }\n\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n    if (['ArrowDown', 'ArrowUp'].includes(e.key)) {\n      e.preventDefault();\n      this.shouldFocus = true;\n    }\n  };\n\n  // handles key down on options. Either 'picks'\n  // an option or passes event back to input for search / filter\n  private optionKeyDown = (\n    e: KeyboardEvent & { target: HTMLNanoOptionElement }\n  ) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowUp',\n      'ArrowDown',\n      'Escape',\n      'Enter',\n      'Tab',\n      'Space',\n      'PageUp',\n      'PageDown',\n      'Home',\n      'End',\n      ' ',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Escape') this.connectedInput.focus();\n      return;\n    }\n\n    const deleteKeys = ['Delete', 'Backspace'];\n    // this passes whatever's typed back to our input control\n    if (\n      this.type !== 'select' &&\n      (!this.exactMatch || deleteKeys.includes(e.key))\n    ) {\n      this.connectedInput.focus();\n    }\n  };\n\n  // Component lifecycle\n\n  connectedCallback() {\n    this.watchInputChange();\n  }\n\n  componentDidLoad() {\n    this.handleOptionsChange();\n    this.openWatcher();\n  }\n\n  componentDidRender(): void {\n    setTimeout(() => {\n      if (!this.connectedInput)\n        console.warn(\n          'no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop',\n          this.host\n        );\n    }, 500);\n  }\n\n  disconnectedCallback(): void {\n    if (this.mo) {\n      this.mo.disconnect();\n      this.mo = undefined;\n    }\n    if (this.connectedInput) this.removeEventListeners(this.connectedInput);\n  }\n\n  render() {\n    return (\n      <Host\n        class=\"nano-datalist\"\n        role={this.actvOptEles.length ? 'listbox' : undefined}\n        aria-owns={this.optionIds.length ? this.optionIds.join(' ') : undefined}\n        aria-label={\n          this.optionIds.length\n            ? 'Select options from the list below'\n            : undefined\n        }\n      >\n        <nano-dropdown\n          {...this.dropDownConfig}\n          ref={(el) => (this.nanoDropdown = el)}\n          dialogTitle=\"Select options from the list below\"\n          class={{\n            dlist__dropdown: true,\n            'dlist--isfiltered': this.isFiltered,\n          }}\n          onNanoAfterShow={this.handleShow}\n          onNanoAfterHide={this.handleHide}\n          role=\"group\"\n        >\n          <nano-menu\n            hidden={!this.actvOptEles.length}\n            type=\"listbox\"\n            label={this.inputLabel ? this.inputLabel.textContent : undefined}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n            tabIndex={-1}\n            onNanoSelect={this.optSelected}\n            onKeyDown={this.optionKeyDown}\n            ref={(el) => (this.listBox = el)}\n          >\n            <slot name=\"list-top\" />\n            <slot />\n            <slot name=\"internal-opts\" />\n            <slot name=\"list-bottom\" />\n          </nano-menu>\n          <nano-menu\n            type=\"listbox\"\n            label=\"No results found\"\n            hidden={!!this.actvOptEles.length}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n          >\n            <slot name=\"no-result\" />\n          </nano-menu>\n          {!!this.actvOptEles && (\n            <div class=\"dlist__status\">\n              {this.actvOptEles.length} result\n              {this.actvOptEles.length > 1 ? 's' : ''} available.\n            </div>\n          )}\n        </nano-dropdown>\n      </Host>\n    );\n  }\n}\n","@use 'sass:map';\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n   * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #{map.get(tokens.$colors, blue--faded)};\n   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{map.get(tokens.$colors, blue--faded)};\n   * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{map.get(tokens.$colors, blue--faded)};\n\n   * @prop --color-hover: text hover color of nav-items. Defaults to #{map.get(tokens.$colors, blue)}\n   * @prop --color-selected: text selected color of nav-items. Defaults to #{map.get(tokens.$colors, blue)}\n   * @prop --color-focus: text focus color of nav-items. Defaults to #{map.get(tokens.$colors, blue)}\n\n   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n   * @prop --font-size: default font-size for all items. Defaults .9em;\n  */\n\n  --padding-start: #{tokens.$spacing-medium};\n  --padding-end: #{tokens.$spacing-medium};\n  --padding-top: #{tokens.$spacing-small};\n  --padding-bottom: #{tokens.$spacing-small};\n  --secondary-padding-top: 0;\n  --secondary-padding-bottom: 0;\n  --bg-color-hover: #{map.get(tokens.$colors, blue--faded)};\n  --bg-color-focus: #{map.get(tokens.$colors, blue--faded)};\n  --bg-color-selected: #{map.get(tokens.$colors, blue--faded)};\n  --color-hover: #{map.get(tokens.$colors, blue)};\n  --color-selected: #{map.get(tokens.$colors, blue)};\n  --color-focus: #{map.get(tokens.$colors, blue)};\n  --focus-outline: none;\n  --font-size: 0.9em;\n\n  display: block;\n}\n\n.menu {\n  font-size: var(--font-size, 0.9em);\n  overscroll-behavior: none;\n  min-inline-size: var(--width);\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n::slotted(*:not(.nano-nav-item):not(.nano-option):not(hr):not(slot)) {\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n  display: block;\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  Host,\n  Element,\n  Prop,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { h, transformTag } from '../../utils/renderer';\nimport { getActiveElement } from '../../utils/active-element';\nimport { getDirectChildren } from '../../utils/dom';\nimport { getTextContent } from '../../utils/slot';\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  // Public API\n\n  /** get the focus state of the menu @readonly */\n  @Prop()\n  get hasFocus() {\n    return this._hasFocus;\n  }\n  private _hasFocus = false;\n\n  /** changes the role of the underlying control - sometimes required for semantics */\n  @Prop() type: 'menu' | 'listbox' = 'menu';\n\n  /** an accessible label */\n  @Prop() label: string;\n\n  // Events\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter<\n    HTMLNanoOptionElement | HTMLNanoNavItemElement\n  >;\n\n  // Public Methods\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    if (this.menu?.blur) this.menu.blur();\n  }\n\n  /** Sets the current active item */\n  @Method()\n  async showActiveElement() {\n    if (this.selectedItem)\n      this.selectedItem.scrollIntoView({ block: 'nearest' });\n  }\n\n  /** Removes any active item's state */\n  @Method()\n  async resetActiveItem() {\n    this.getItems\n      .filter((i) => i.tagName.toLowerCase() === transformTag('nano-option'))\n      .map((i) => i.setAttribute('tabindex', '-1'));\n  }\n\n  // Private methods\n\n  get getItems() {\n    let items: ValidElement[];\n    const opened = this.el.querySelectorAll(\n      `${transformTag('nano-nav-item')}.secondary-open`\n    );\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(\n        ctx.querySelectorAll(\n          `${transformTag('nano-nav-item')}, ${transformTag('nano-option')}`\n        )\n      );\n    } else {\n      items = getDirectChildren(\n        this.el,\n        `${transformTag('nano-nav-item')}, ${transformTag('nano-option')}`,\n        'slot'\n      );\n    }\n    return items.filter((el) => !el.disabled && !el.hidden);\n  }\n\n  get activeItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find(\n      (i) =>\n        i.getAttribute('tabindex') === '0' ||\n        i === activeElement ||\n        i.classList.contains('has-focus')\n    );\n  }\n\n  get selectedItem() {\n    return this.getItems.find((i) => i.selected);\n  }\n\n  private async setActiveFocusItem(item?: ValidElement, focus = true) {\n    const items = this.getItems;\n    const activeItem = !item ? items.find((i) => i.selected) || items[0] : item;\n\n    items\n      .filter((i) => i.tagName.toLowerCase() === transformTag('nano-option'))\n      .map((i: HTMLNanoOptionElement) =>\n        i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n      );\n\n    if (!focus) return;\n\n    if (activeItem) {\n      if ((activeItem as NNI).setFocus) (activeItem as NNI).setFocus();\n      else activeItem.focus();\n    } else this.menu.focus();\n  }\n\n  // Event Handlers\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let found: boolean;\n\n    if (kev.key) {\n      if (kev.key !== 'Tab') return;\n      found =\n        getActiveElement() &&\n        getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n    } else found = !!e.composedPath().find((el) => el === this.el);\n\n    if (!found) {\n      this.resetActiveItem();\n      this._hasFocus = false;\n      this.nanoBlur.emit();\n    }\n  }\n\n  private handleFocus = () => {\n    this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n    this._hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest<HTMLNanoNavItemElement>(\n      transformTag('nano-nav-item')\n    );\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit(item);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        if (this.activeItem) this.activeItem.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Home':\n      case 'End': {\n        const items = this.getItems;\n        const selectedItem = this.activeItem;\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home' || event.key === 'PageUp') {\n            index = 0;\n          } else if (event.key === 'End' || event.key === 'PageDown') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = items.length - 1;\n          if (index > items.length - 1) index = 0;\n\n          this.setActiveFocusItem(items[index]);\n          if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n          return;\n        }\n        break;\n      }\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems;\n      for (const item of items) {\n        const slot: HTMLSlotElement =\n          item.shadowRoot.querySelector('slot:not([name])');\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          this.setActiveFocusItem(item);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item =\n      target.closest<HTMLNanoNavItemElement>(transformTag('nano-nav-item')) ||\n      target.closest<HTMLNanoOptionElement>(transformTag('nano-option'));\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveFocusItem(item);\n    }\n  };\n\n  // Component Lifecycle\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      getDirectChildren(\n        this.el,\n        ':not(nano-nav-item):not(nano-option):not([role])',\n        true\n      ).forEach((el) => el.setAttribute('role', 'none'));\n    }\n  }\n\n  render() {\n    return (\n      <Host role={this.type === 'menu' ? 'menu' : 'group'} class=\"nano-menu\">\n        <div\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n          onFocus={this.handleFocus}\n          aria-label={this.label ? this.label : undefined}\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class={{\n            menu: true,\n            ['menu--' + this.type]: true,\n            'menu--has-focus': this.hasFocus,\n          }}\n          tabIndex={-1}\n          role=\"group\"\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@use 'sass:map';\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --padding-top: Defaults to #{tokens.$spacing-small};\n   * @prop --padding-bottom: Defaults to #{tokens.$spacing-small};\n   * @prop --padding-start: Defaults to #{tokens.$spacing-small};\n   * @prop --padding-end: Defaults to #{tokens.$spacing-small};\n\n   * @prop --bg: default background. Defaults to none;\n   * @prop --bg-selected: background when selected. Defaults to #{tokens.$select-opt-selected};\n   * @prop --bg-focus: background when focused. Defaults to var(--nano-color-base, #{nano-color(primary, tint)});\n   * @prop --bg-disabled: background when disabled. Defaults to none;\n\n   * @prop --color: default text color. Defaults to var(--input-text-color, #{tokens.$input-text-color});\n   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base, #{nano-color(primary, contrast)});\n   * @prop --color-disabled: text color when disabled. Defaults to #{map.get(tokens.$colors, palegrey)};\n\n    * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1.4em;\n  */\n\n  --bg: none;\n  --bg-selected: #{tokens.$select-opt-selected};\n  --bg-focus: var(--nano-color-base, #{tokens.nano-color(primary, tint)});\n  --bg-disabled: none;\n  --color: var(--input-text-color, #{tokens.$input-text-color});\n  --color-selected: var(--nano-color-base, #{tokens.nano-color(primary, base)});\n  --color-focus: var(--nano-color-contrast, #{tokens.nano-color(primary, contrast)});\n  --color-disabled: #{map.get(tokens.$colors, palegrey)};\n  --opt-icon-size: 1.6em;\n\n  display: block;\n  color: var(--color);\n  overflow: hidden;\n  font-size: 14px;\n  font-size: #{'clamp(12px, .9em, 16px)'};\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n.option {\n  $self: &;\n\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n  display: flex;\n  align-items: stretch;\n  inline-size: 100%;\n  background: var(--bg);\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n\n  // focus\n  :host(:focus) &:not(.option--disabled),\n  :host &.option--selected {\n    outline: none;\n    background: var(--bg-selected);\n    color: var(--color-selected);\n  }\n\n  :host(:focus) &:not(.option--disabled) {\n    background: var(--bg-focus);\n    color: var(--color-focus);\n  }\n\n  // disabled\n  &.option--disabled {\n    outline: none;\n    color: var(--color-disabled);\n    cursor: not-allowed;\n    background: var(--bg-disabled);\n  }\n\n  // no value\n  &.option--novalue {\n    font-style: italic;\n    opacity: 0.7;\n  }\n\n  &__label {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  &__start {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(.nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:last-child) {\n      margin-inline-end: 0.5em;\n    }\n  }\n\n  &__end {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(.nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:first-child) {\n      margin-inline-start: 0.5em;\n    }\n  }\n\n  &__check {\n    visibility: hidden;\n    display: flex;\n    position: absolute;\n    inset-inline-start: 0.6em;\n    inset-block-start: calc(50% - 0.6em);\n    align-items: center;\n    font-size: 0.9em;\n\n    #{$self}--selected:not(#{$self}--novalue) & {\n      visibility: visible;\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  State,\n  Watch,\n  Element,\n  Listen,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { getDirectChildren } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\nimport type { OptionInterface } from './option-interface';\n\nlet optIds = 0;\n\n/**\n * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n *\n * @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n */\n@Component({\n  tag: 'nano-option',\n  styleUrl: 'option.scss',\n  shadow: true,\n})\nexport class Option implements OptionInterface {\n  private optId = `nano-option-${optIds++}`;\n  @Element() host: HTMLNanoOptionElement;\n  @State() hasFocus = false;\n\n  constructor() {\n    this.handleClick = debounce(this.handleClick.bind(this), 5);\n  }\n\n  // Public API\n\n  /**\n   * Value of the option\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  @Watch('value')\n  valueChanged() {\n    if ((!this.value || !this.value.length) && !this.label)\n      this.value = this.labelContent;\n  }\n\n  /**\n   * Label of the option\n   */\n  @Prop({ mutable: true, reflect: true }) label: string = '';\n\n  @Watch('label')\n  labelChanged() {\n    if (!this.label || !this.label.length)\n      this.label = this.labelContent.length ? this.labelContent : this.value;\n  }\n\n  /**\n   * Whether this option is selected\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Whether this option should be disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** You can add extra meta for this option. When displayed in a list, users\n   * search / filter via extra related terms. Another usecase is 'endonyms'\n   */\n  @Prop() filterMeta: string = '';\n\n  /** Fired when an option is selected */\n  @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n  // Event handlers\n\n  // stop scrolling on select\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n    e.preventDefault();\n    this.nanoSelect.emit(this.host);\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n    this.nanoSelect.emit(this.host);\n  }\n\n  // Private logic\n\n  private get labelContent() {\n    return getDirectChildren(this.host, '*:not([slot])', false)\n      .map((el) => el.textContent)\n      .join(' ')\n      .trim();\n  }\n\n  // Component lifecycle\n\n  componentWillLoad() {\n    this.valueChanged();\n    this.labelChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"option\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        class=\"nano-option\"\n      >\n        <div\n          onMouseDown={this.handleClick}\n          id={this.optId}\n          class={{\n            option: true,\n            'option--selected': this.selected,\n            'option--disabled': this.disabled,\n            'option--novalue': !this.value,\n          }}\n        >\n          <div part=\"check-icon\" class=\"option__check\">\n            <slot name=\"check-icon\">\n              <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n            </slot>\n          </div>\n          <div part=\"start\" class=\"option__start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <div part=\"label\" class=\"option__label\">\n            <slot>{this.label || this.value}</slot>\n          </div>\n          <div part=\"end\" class=\"option__end\">\n            <slot name=\"end\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-date-input.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dateInputCss","NanoDateInputStyle0","DateRegxps","d","m","y","inputIds","DateInput","pickerEle","trigger","pickerCloseBtn","dropdown","input","pickerOpenSource","directInput","dateOrderIndeces","inputId","locale","window","navigator","languages","language","undefined","pattern","inputValue","invalid","this","_invalid","validityMessage","helperText","helperTextFormat","year","month","day","floatLabel","name","readonly","size","form","firstDayOfWeek","localization","disabled","color","autofocus","clearInput","label","placeholder","value","handleValueChange","formatIsoDate","setTimeout","nanoChange","emit","date","parseISODate","validateOn","showInlineError","dateOrder","handleDateOrderChange","setDatePattern","required","min","max","hideLabel","testDateValidity","valueDate","error","toLocaleDateString","isDateDisabled","requestAnimationFrame","async","_","getInputElement","length","setCustomValidity","showError","picker","initialPickerDate","pickerOpen","handlePickerOpenChange","open","closeAfterPicked","dropDownConfig","_dropDownConfig","ddc","dateValue","nanoValidate","reportValidity","validateFirst","initValidity","isValid","setFocus","message","onInputChange","e","stopPropagation","setValue","target","onInputValidate","detail","errorMessage","originalEvent","onInputKey","onDatePicked","onDropdownHide","focus","onDropdownShow","onTriggerClick","onTriggerKey","includes","key","onCloseClick","onCloseKeyDown","shiftKey","preventDefault","dateRegexOrdered","dateStrOrd","Array","from","map","datepart","i","push","join","isoDate","matches","match","RegExp","formatted","createDate","Date","dateStr","printISODate","connectedCallback","componentDidLoad","firstFocusEle","tetherTo","render","placement","host","ownerDocument","dir","replace","hasHelperSlot","querySelector","h","Host","class","createColorClasses","slot","onNanoChange","onNanoInput","onNanoValidate","ref","inputmode","part","type","onKeyDown","onClick","onNanoHide","onNanoShow","dialogTitle","onMouseDown","pickerClose","onNanoDatePicked","selectedDate","vhidden"],"sources":["src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","src/components/date-input/date-input.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/utilities/colours' as color;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --focus-shadow: defaults to #{tokens.$control-focus-style};\n   * @prop --open-btn-color: defaults to #{tokens.$button-bg-color};\n   * @prop --open-btn-border: defaults to none;\n   * @prop --close-btn-color: defaults to #{map.get(tokens.$colors, celsius)};\n   * @prop --picker-base-size: Base font size of the date picker component. Defaults to 16px;\n   */\n\n  display: inline-block;\n  inline-size: 100%;\n\n  --focus-shadow: #{tokens.$control-focus-style};\n  --open-btn-color: #{tokens.$button-bg-color};\n  --open-btn-border: none;\n  --close-btn-color: #{tokens.$button-bg-color};\n  --picker-base-size: 16px;\n}\n\n:host(.nano-color) {\n  --focus-shadow: #{tokens.$control-focus-size color.current-color(tint, 0.56)};\n}\n\n.nano-icon {\n  pointer-events: none;\n}\n\n.date-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  &__dropdown {\n    --padding: 0;\n    --overflow: visible;\n\n    padding: 0 !important;\n    inline-size: 0 !important;\n    inline-size: 100%;\n    z-index: tokens.$layer-index-dropdown !important;\n  }\n\n  &__close-bar {\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    border: 0;\n    margin: 0;\n    overflow: visible;\n    padding: 0;\n    position: absolute;\n    inset-inline-end: -8px;\n    inset-block-start: -8px;\n    inline-size: auto;\n    z-index: 1;\n  }\n\n  &__open {\n    background: var(--open-btn-color);\n    border: var(--open-btn-border);\n    margin: 0;\n    appearance: none;\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n    }\n  }\n\n  &__close {\n    align-items: center;\n    appearance: none;\n    background: var(--close-btn-color);\n    border: 0;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    block-size: 24px;\n    justify-content: center;\n    padding: 0;\n    inline-size: 24px;\n\n    @media (width >= 36em) {\n      opacity: 0;\n    }\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n\n      @media (width >= 36em) {\n        opacity: 1;\n      }\n    }\n\n    .nano-icon {\n      margin-block: 0;\n      margin-inline: auto;\n    }\n  }\n\n  .nano-date-picker {\n    font-size: var(--picker-base-size);\n  }\n}\n\n.vhidden {\n  @include mx.visually-hide();\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Prop,\n  Watch,\n  State,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport {\n  createDate,\n  DaysOfWeek,\n  printISODate,\n  parseISODate,\n} from '../../utils/date-utils';\n\nimport { createColorClasses } from '../../utils/theme';\nimport { InputChangeEventDetail } from '../input/input-interface';\nimport type {\n  Color,\n  ControlValidity,\n  ControlValidityEventDetail,\n} from '../../types/shared';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type {\n  DateInputChangeEventDetail,\n  DuetLocalizedText,\n  LocalDateOpts,\n} from './date-input-interface';\nimport type {\n  DateDisabledPredicate,\n  PickerChangeEvent,\n} from '../date-picker/date-picker-interface';\nimport type { NanoInputCustomEvent } from '../../components';\n\nconst DateRegxps = {\n  d: '(\\\\d{1,2})',\n  m: '(\\\\d{1,2})',\n  y: '(\\\\d{4})',\n};\n\nlet inputIds = 0;\n\n/**\n * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.\n *\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot start - input start slot\n * @slot end - input end slot\n */\n@Component({\n  tag: 'nano-date-input',\n  styleUrl: 'date-input.scss',\n  scoped: true,\n})\nexport class DateInput implements ComponentInterface {\n  private pickerEle!: HTMLNanoDatePickerElement;\n  private trigger!: HTMLButtonElement;\n  private pickerCloseBtn!: HTMLButtonElement;\n  private dropdown!: HTMLNanoDropdownElement;\n  private input: HTMLNanoInputElement;\n  private pickerOpenSource: 'key' | 'mouse';\n\n  private directInput = false;\n  private dateOrderIndeces = { d: 0, m: 1, y: 3 };\n  private inputId = `nano-input-${inputIds++}`;\n  private locale =\n    (window.navigator.languages as string[]) ||\n    window.navigator.language ||\n    undefined;\n\n  @Element() host: HTMLNanoDateInputElement;\n\n  // Private state\n\n  @State() pattern!: string;\n  @State() inputValue: string;\n\n  // Public Api / Prop\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.input) return '';\n    return this.input.validityMessage;\n  }\n\n  /**\n   * Whether to show a long form, confirmation date string of the one currently entered\n   */\n  @Prop() helperText: boolean = true;\n\n  /**\n   * Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.\n   */\n  @Prop() helperTextFormat: LocalDateOpts = {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n  };\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The initial size (number of characters) of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @Prop() firstDayOfWeek?: DaysOfWeek;\n\n  /**\n   * Button labels, day names, month names, etc, used for localization.\n   * Default is English.\n   */\n  @Prop() localization?: DuetLocalizedText;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n   */\n  @Prop() clearInput = false;\n\n  /**\n   * String to place within a label element. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Instructional text that shows before the input has a value.\n   * The pattern prop will be used to create a placeholder automatically if unused.\n   */\n  @Prop({ mutable: true }) placeholder: string;\n\n  /**\n   * Current value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.directInput) this.inputValue = this.formatIsoDate(this.value);\n    setTimeout(() => {\n      this.nanoChange.emit({\n        value: this.value,\n        date: parseISODate(this.value),\n      });\n    }, 20);\n    this.directInput = false;\n  }\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop() validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * The order of the date parts for entry and display.\n   * e.g. dmy = dd mm yyyy\n   */\n  @Prop() dateOrder: 'dmy' | 'mdy' | 'ymd' | 'dym' = 'dmy';\n\n  @Watch('dateOrder')\n  handleDateOrderChange() {\n    this.setDatePattern();\n  }\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() min?: string;\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() max?: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  @Watch('min')\n  @Watch('max')\n  @Watch('value')\n  testDateValidity() {\n    const valueDate = parseISODate(this.value);\n\n    let min: Date,\n      max: Date,\n      error: string = '';\n\n    if (this.value && valueDate) {\n      if (this.min && (min = parseISODate(this.min)) && valueDate < min) {\n        error =\n          'Date below the minimum: ' +\n          min.toLocaleDateString(this.locale, this.helperTextFormat);\n      }\n      if (this.max && (max = parseISODate(this.max)) && valueDate > max) {\n        error =\n          'Date above the maximum: ' +\n          max.toLocaleDateString(this.locale, this.helperTextFormat);\n      }\n      if (this.isDateDisabled(valueDate)) {\n        error = 'Date selected is disabled.';\n      }\n    }\n\n    requestAnimationFrame(async (_) => {\n      if (!this.input) return;\n      const input = await this.input.getInputElement();\n      if (this.value.length && !valueDate) error = 'Please enter a valid date';\n\n      input.setCustomValidity(error);\n      if (this.input.validateOn === 'dirty') {\n        this.input.showError(error);\n      }\n    });\n  }\n\n  /**\n   * Show a date picker. Date pickers are not very useful\n   * if the potential input is too far in the distance or past\n   * e.g. Birthdays\n   */\n  @Prop() picker: boolean = true;\n\n  /**\n   * Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\n   * Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop() initialPickerDate?: string;\n\n  /**\n   * Set / read whether the picker is currently open.\n   */\n  @Prop({ reflect: true, mutable: true }) pickerOpen: boolean = false;\n\n  @Watch('pickerOpen')\n  handlePickerOpenChange() {\n    this.dropdown.open = this.pickerOpen;\n  }\n\n  /**\n   * Close the picker after a date is selected\n   */\n  @Prop() closeAfterPicked: boolean = true;\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop()\n  get dropDownConfig() {\n    return this._dropDownConfig;\n  }\n  set dropDownConfig(ddc: Partial<Dropdown>) {\n    this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n  }\n  private _dropDownConfig: Partial<Dropdown> = {};\n\n  /** @readonly get the value as a `Date` */\n  @Prop()\n  get dateValue() {\n    return parseISODate(this.value);\n  }\n\n  /** Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   * @returns `false` for not disabled and `true` for disabled */\n  @Prop() isDateDisabled: DateDisabledPredicate = () => false;\n\n  // Event emitters\n\n  /**\n   * Event emitted when a date is selected.\n   */\n  @Event() nanoChange: EventEmitter<DateInputChangeEventDetail>;\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  // 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    const initValidity = await this.input.reportValidity(validateFirst);\n    if (initValidity.isValid && validateFirst) this.testDateValidity();\n    return await this.input.reportValidity(validateFirst);\n  }\n\n  /**\n   * Sets focus on the child `nano-input`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) this.input.setFocus();\n  }\n\n  /**\n   * Returns the native `<input>` element used under the hood.\n   * @returns `HTMLInputElement`\n   */\n  @Method()\n  async getInputElement() {\n    return await this.input.getInputElement();\n  }\n\n  /**\n   * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (!this.input) return;\n    this.input.showError(message);\n  }\n\n  // Event handlers\n\n  private onInputChange = (e: NanoInputCustomEvent<InputChangeEventDetail>) => {\n    e.stopPropagation();\n    this.setValue(e.target.value);\n  };\n\n  private onInputValidate = (e: CustomEvent<ControlValidityEventDetail>) => {\n    e.stopPropagation();\n    this._invalid = !e.detail.isValid;\n\n    this.nanoValidate.emit({\n      isValid: e.detail.isValid,\n      errorMessage: e.detail.errorMessage,\n      originalEvent: e.detail.originalEvent,\n    });\n  };\n\n  private onInputKey = () => {\n    this.directInput = true;\n  };\n\n  private onDatePicked = (e: { detail: PickerChangeEvent }) => {\n    this.directInput = false;\n    this.value = e.detail.value;\n    if (this.closeAfterPicked) this.pickerOpen = false;\n  };\n\n  private onDropdownHide = () => {\n    setTimeout((_) => (this.pickerOpen = false), 200);\n    setTimeout((_) => this.trigger.focus(), 50);\n  };\n\n  private onDropdownShow = () => {\n    setTimeout((_) => {\n      this.pickerEle.setFocus(false, this.pickerOpenSource === 'key');\n      this.pickerOpenSource = null;\n    }, 200);\n  };\n\n  private onTriggerClick = () => {\n    if (!this.pickerOpen) {\n      this.pickerOpen = true;\n      this.pickerOpenSource = 'mouse';\n    }\n  };\n\n  private onTriggerKey = (e: KeyboardEvent) => {\n    if ([' ', 'Enter'].includes(e.key)) {\n      if (!this.pickerOpen) {\n        this.pickerOpen = true;\n        this.pickerOpenSource = 'key';\n      }\n    }\n  };\n\n  private onCloseClick = () => {\n    if (this.pickerOpen) this.pickerOpen = false;\n  };\n\n  private onCloseKeyDown = (e: KeyboardEvent) => {\n    // this ensures focus is trapped inside the picker\n    if (e.key === 'Tab' && e.shiftKey) {\n      this.pickerEle.setFocus(true);\n      e.preventDefault();\n    }\n    if (e.key === ' ' || e.key === 'Enter') {\n      if (this.pickerOpen) this.pickerOpen = false;\n    }\n  };\n\n  // Private logic\n\n  // set the regexp input pattern and placeholder (if necessary)\n  private setDatePattern() {\n    const dateRegexOrdered = [];\n    const dateStrOrd = [];\n    Array.from(this.dateOrder).map((datepart, i) => {\n      dateRegexOrdered.push(DateRegxps[datepart]);\n      this.dateOrderIndeces[datepart] = i;\n      dateStrOrd.push(datepart === 'y' ? 'yyyy' : datepart + datepart);\n    });\n    this.pattern = dateRegexOrdered.join('\\\\W+');\n\n    if (!this.placeholder && this.placeholder !== 'false')\n      this.placeholder = dateStrOrd.join(' ');\n  }\n\n  // set the public facing date string\n  private formatIsoDate(isoDate: string) {\n    const dateRegexOrdered = [];\n    Array.from('ymd').map((datepart) =>\n      dateRegexOrdered.push(DateRegxps[datepart])\n    );\n    const matches = isoDate.match(new RegExp(dateRegexOrdered.join('\\\\W+')));\n    if (!matches) return '';\n\n    const formatted = [];\n    formatted[this.dateOrderIndeces.d] = matches[3];\n    formatted[this.dateOrderIndeces.m] = matches[2];\n    formatted[this.dateOrderIndeces.y] = matches[1];\n\n    return formatted.join(' ');\n  }\n\n  // on manual user entry, set the value that will be sent with the form field\n  private setValue(inputValue: string) {\n    const matches = inputValue.match(new RegExp(this.pattern));\n\n    // it's an invalid date, but we still need to set it\n    if (!matches) {\n      this.value = inputValue;\n      return;\n    }\n\n    let date = createDate(\n      matches[this.dateOrderIndeces.y + 1],\n      matches[this.dateOrderIndeces.m + 1],\n      matches[this.dateOrderIndeces.d + 1]\n    );\n\n    if (!date) {\n      // last ditch attempt - see if the browser can get something\n      date = new Date(inputValue);\n\n      // it's definitely an invalid date, but set it anyway for validation messages\n      if (!date) {\n        this.value = inputValue;\n        return;\n      }\n    }\n\n    const dateStr = printISODate(date);\n    this.value = dateStr;\n    return dateStr;\n  }\n\n  connectedCallback() {\n    this.setDatePattern();\n    this.handleValueChange();\n  }\n\n  componentDidLoad() {\n    if (!this.pickerCloseBtn || !this.picker) return;\n    this.pickerEle.firstFocusEle = this.pickerCloseBtn;\n    this.dropdown.tetherTo = this.trigger;\n    setTimeout((_) => this.handlePickerOpenChange(), 300);\n  }\n\n  render() {\n    this.locale =\n      (navigator.languages as string[]) || navigator.language || undefined;\n\n    this.dropDownConfig.placement =\n      this.dropDownConfig.placement || 'bottom-end';\n\n    if (this.host.ownerDocument.dir === 'rtl') {\n      this.dropDownConfig.placement.replace('start', 'end');\n    }\n    if (this.trigger) this.dropDownConfig.tetherTo = this.trigger;\n\n    const valueDate = parseISODate(this.value);\n    const hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    return (\n      <Host class={{ ...createColorClasses(this.color), 'date-input': true }}>\n        <div class=\"date-field\">\n          <nano-input\n            class=\"date-field__input\"\n            slot=\"trigger\"\n            required={this.required || undefined}\n            showInlineError={this.showInlineError}\n            validateOn={this.validateOn}\n            placeholder={\n              this.placeholder !== 'false' ? this.placeholder : undefined\n            }\n            pattern={this.pattern}\n            label={this.label}\n            disabled={this.disabled || undefined}\n            color={this.color || undefined}\n            autofocus={this.autofocus || undefined}\n            clearInput={this.clearInput || undefined}\n            onNanoChange={this.onInputChange}\n            onNanoInput={this.onInputKey}\n            onNanoValidate={this.onInputValidate}\n            name=\"\"\n            form={this.form || undefined}\n            size={this.size || undefined}\n            readonly={this.readonly}\n            value={this.inputValue}\n            ref={(input) => (this.input = input)}\n            floatLabel={this.floatLabel}\n            hideLabel={this.hideLabel}\n            inputmode={'numeric'}\n            part=\"input\"\n          >\n            <slot name=\"start\" slot=\"start\" />\n            <slot name=\"label\" slot=\"label\" />\n            <slot name=\"end\" slot=\"end\" />\n            {this.picker && [\n              <button\n                slot=\"end\"\n                class=\"date-field__open\"\n                type=\"button\"\n                onKeyDown={this.onTriggerKey}\n                onClick={this.onTriggerClick}\n                ref={(trigger) => (this.trigger = trigger)}\n                disabled={this.disabled || this.readonly}\n              >\n                <nano-icon name=\"light/calendar-days\"></nano-icon>\n              </button>,\n\n              <nano-dropdown\n                slot=\"end\"\n                onNanoHide={this.onDropdownHide}\n                onNanoShow={this.onDropdownShow}\n                dialogTitle=\"Choose a date\"\n                class=\"date-field__dropdown\"\n                ref={(dropdown) => (this.dropdown = dropdown)}\n                {...this.dropDownConfig}\n                part=\"dropdown\"\n              >\n                <div>\n                  <div class=\"date-field__close-bar\">\n                    <button\n                      class=\"date-field__close\"\n                      type=\"button\"\n                      onMouseDown={this.onCloseClick}\n                      onKeyDown={this.onCloseKeyDown}\n                      ref={(pickerClose) => (this.pickerCloseBtn = pickerClose)}\n                    >\n                      <nano-icon name=\"light/xmark\"></nano-icon>\n                      <span class=\"vhidden\">Close window</span>\n                    </button>\n                  </div>\n                  <nano-date-picker\n                    isDateDisabled={this.isDateDisabled}\n                    onNanoDatePicked={this.onDatePicked}\n                    min={this.min || undefined}\n                    max={this.max || undefined}\n                    is-modal\n                    ref={(picker) => (this.pickerEle = picker)}\n                    localization={this.localization}\n                    selectedDate={this.value || this.initialPickerDate}\n                    firstDayOfWeek={this.firstDayOfWeek}\n                    color={this.color || undefined}\n                    part=\"date-picker\"\n                  ></nano-date-picker>\n                </div>\n              </nano-dropdown>,\n            ]}\n            {(hasHelperSlot || this.helperText || this.showInlineError) && (\n              <span slot=\"helper\">\n                <span class={{ vhidden: !!this.value.length }}>\n                  <slot name=\"helper\" />\n                </span>\n                {this.helperText && !!valueDate && (\n                  <span>\n                    {valueDate.toLocaleDateString(\n                      this.locale,\n                      this.helperTextFormat\n                    )}\n                  </span>\n                )}\n              </span>\n            )}\n          </nano-input>\n          <input type=\"hidden\" value={this.value} name={this.name} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-date-picker.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as e,c as t,g as a,a as s}from"./index-6cc72cd9.js";import{h as i}from"./renderer-4bc3e2dc.js";import{i as o,g as n,b as d,D as c,p as l,d as r,s as h,e as u,f as b,h as f,j as p,k as _,l as y,a as v}from"./date-utils-1e39c114.js";import{f as g}from"./focus-visible-e5f02c46.js";import{c as m}from"./theme-d553c17a.js";const k={buttonLabel:"Choose date",placeholder:"YYYY-MM-DD",selectedDateMessage:"Selected date is",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",calendarHeading:"Choose a date",dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]};const x=k;const D=({focusedDay:e,today:t,day:a,onDaySelect:s,onKeyboardNavigation:n,focusedDayRef:d,inRange:c,disabled:l,isSelected:r})=>{const h=o(a,t);const u=o(a,e);const b=a.getMonth()!==e.getMonth()||l;const f=!c;function p(e){s(e,a)}return i("button",{class:{"duet-date__day":true,"is-outside":f,"is-disabled":b,"is-today":h},tabIndex:u?0:-1,onClick:p,onKeyDown:n,disabled:f,type:"button","aria-pressed":r?"true":"false",ref:e=>{if(u&&e&&d){d(e)}}},i("span",{"aria-hidden":"true"},a.getDate()),i("span",{class:"duet-date__vhidden"},a.toLocaleDateString(undefined,{day:"numeric",month:"long"})))};function w(e,t){const a=[];for(let s=0;s<e.length;s+=t){a.push(e.slice(s,s+t))}return a}function z(e,t,a){return e.map(((s,i)=>{const o=(i+t)%e.length;return a(e[o])}))}const S=({selectedDate:e,focusedDate:t,labelledById:a,localization:s,firstDayOfWeek:c,min:l,max:r,onDateSelect:h,onKeyboardNavigation:u,focusedDayRef:b,onMouseDown:f,onFocusIn:p,isDateDisabled:_})=>{const y=new Date;const v=n(t,c);return i("table",{class:"duet-date__table",role:"grid","aria-labelledby":a,onFocusin:p,onMouseDown:f},i("thead",null,i("tr",null,z(s.dayNames,c,(e=>i("th",{class:"duet-date__table-header",scope:"col"},i("span",{"aria-hidden":"true"},e.substr(0,2)),i("span",{class:"duet-date__vhidden"},e)))))),i("tbody",null,w(v,7).map((a=>i("tr",{class:"duet-date__row"},a.map((a=>i("td",{class:"duet-date__cell",role:"gridcell","aria-selected":o(a,e)?"true":undefined},i(D,{day:a,today:y,focusedDay:t,inRange:d(a,l,r),onDaySelect:h,onKeyboardNavigation:u,focusedDayRef:b,disabled:_(a),isSelected:o(a,e)})))))))))};const M=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{background:var(--background);min-inline-size:290px;padding-block:16px 20px;padding-inline:16px;position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;transition:0.15s ease all;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:"";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;transition:background-color 300ms ease;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus,.duet-date__next:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev .nano-icon,.duet-date__next .nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{box-shadow:var(--focus-shadow)}.duet-date__select-label{align-items:center;border-radius:4px;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label .nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}';const F=M;function N(e,t){const a=[];for(let s=e;s<=t;s++){a.push(s)}return a}let T=0;const C=class{constructor(a){e(this,a);this.nanoDatePicked=t(this,"nanoDatePicked",7)}dateId=`nano-datepicker-${T++}`;monthSelectId=this.dateId+"-"+"month";yearSelectId=this.dateId+"-"+"year";dialogLabelId=this.dateId+"-"+"dialog";firstFocusableElement;monthSelectNode;yearSelectNode;focusedDayNode;focusTimeoutId;initialTouchX=null;initialTouchY=null;get host(){return a(this)}activeFocus=false;focusedDay=new Date;selectedDate="";min="";max="";firstDayOfWeek=c.Monday;localization=x;color;isDateDisabled=()=>false;isModal=false;firstFocusEle;nanoDatePicked;async setFocus(e=false,t=false){this.setFocusedDay(l(this.selectedDate)||new Date);if(e){setTimeout((e=>this.focusedDayNode.focus()),20);return}clearTimeout(this.focusTimeoutId);this.focusTimeoutId=setTimeout((()=>{if(t)g.force(this.monthSelectNode);this.monthSelectNode.focus()}),20)}handleSelectedDateChange(){this.setFocus(true)}enableActiveFocus=()=>{this.activeFocus=true};disableActiveFocus=()=>{this.activeFocus=false};addDays(e){this.setFocusedDay(r(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(h(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(u(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=b(f(this.focusedDay),e);const a=p(t);const s=b(this.focusedDay,e);this.setFocusedDay(_(s,t,a))}setYear(e){const t=y(f(this.focusedDay),e);const a=p(t);const s=y(this.focusedDay,e);this.setFocusedDay(_(s,t,a))}setFocusedDay(e){this.focusedDay=_(e,l(this.min),l(this.max))}handleTouchStart=e=>{const t=e.changedTouches[0];this.initialTouchX=t.pageX;this.initialTouchY=t.pageY};handleTouchMove=e=>{e.preventDefault()};handleTouchEnd=e=>{const t=e.changedTouches[0];const a=t.pageX-this.initialTouchX;const s=t.pageY-this.initialTouchY;const i=70;const o=Math.abs(a)>=i&&Math.abs(s)<=i;if(o){this.addMonths(a<0?1:-1)}this.initialTouchY=null;this.initialTouchX=null};handleNextMonthClick=e=>{e.preventDefault();this.addMonths(1)};handlePreviousMonthClick=e=>{e.preventDefault();this.addMonths(-1)};handleKeyboardNavigation=e=>{if(e.key==="Tab"&&!e.shiftKey&&this.isModal){e.preventDefault();const t=this.firstFocusEle||this.firstFocusableElement;t.focus();return}let t=true;switch(e.key){case"ArrowRight":this.addDays(1);break;case"ArrowLeft":this.addDays(-1);break;case"ArrowDown":this.addDays(7);break;case"ArrowUp":this.addDays(-7);break;case"PageUp":if(e.shiftKey){this.addYears(-1)}else{this.addMonths(-1)}break;case"PageDown":if(e.shiftKey){this.addYears(1)}else{this.addMonths(1)}break;case"Home":this.startOfWeek();break;case"End":this.endOfWeek();break;default:t=false}if(t){e.preventDefault();this.enableActiveFocus()}};handleDaySelect=(e,t)=>{const a=!this.isDateDisabled(t);const s=d(t,l(this.min),l(this.max));if(!s||!a){return}if(t.getMonth()===this.focusedDay.getMonth()){this.setValue(t)}else{this.setFocusedDay(t)}};handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))};handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))};setValue(e){this.selectedDate=v(e);this.nanoDatePicked.emit({value:this.selectedDate,valueAsDate:e})}processFocusedDayNode=e=>{this.focusedDayNode=e;if(this.activeFocus){setTimeout((()=>e.focus()),0)}};connectedCallback(){if(this.yearSelectNode)g.observe(this.yearSelectNode);if(this.monthSelectNode)g.observe(this.monthSelectNode)}componentWillLoad(){this.handleSelectedDateChange()}componentDidLoad(){this.connectedCallback()}disconnectedCallback(){g.unobserve(this.yearSelectNode);g.unobserve(this.monthSelectNode)}render(){const e=l(this.selectedDate);const t=(e||this.focusedDay).getFullYear();const a=this.focusedDay.getMonth();const o=this.focusedDay.getFullYear();const n=l(this.min);const c=l(this.max);const r=n!=null&&n.getMonth()===a&&n.getFullYear()===o;const h=c!=null&&c.getMonth()===a&&c.getFullYear()===o;let u=t-10;let b=t+10;if(n)u=n.getFullYear();if(c)b=c.getFullYear();return i(s,{key:"126b01f14158329419fb42f1e54a02ce4cfb965c",class:{...m(this.color),"nano-date-picker":true}},i("div",{key:"b1122b2aff25ff4f0f584fb8ba180d7b606e3826",class:"duet-date"},i("div",{key:"6c7de4fe31e66fb3a87e313292a14f2f95d7ef3f",class:{"duet-date__dialog":true,"is-active":true},onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},i("div",{key:"d0187c54b6c9ef0de0939f3fc722ffe721b862d8",class:"duet-date__dialog-content"},i("div",{key:"ee76a378ad52d1ac71258efc15c8723153c6c58e",class:"duet-date__vhidden duet-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),i("div",{key:"a2a2a170ccf1a6ad341086fcd7443aa2626c8591",class:"duet-date__header",onFocusin:this.disableActiveFocus},i("div",{key:"ddd3a3a3623cf5b61dbb2d49ea4454e3ec7bd38b"},i("h2",{key:"70c4c43daf51201a0e2a568005a79f328230d324",id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},this.localization.monthNames[a]," ",this.focusedDay.getFullYear()),i("label",{key:"8250e3839dfb6c35f9787aff667b2d141de5fdcd",htmlFor:this.monthSelectId,class:"duet-date__vhidden"},this.localization.monthSelectLabel),i("div",{key:"d4a05e88e2df283665c016554c4adce5d26b44ef",class:"duet-date__select"},i("select",{key:"69363c3bd0f0ccb700acc5e07d58b21626c8c567",id:this.monthSelectId,class:"duet-date__select--month",ref:e=>this.firstFocusableElement=this.monthSelectNode=e,onChange:this.handleMonthSelect},this.localization.monthNames.map(((e,t)=>i("option",{key:e,value:t,selected:t===a,disabled:!d(new Date(o,t,1),n?f(n):null,c?p(c):null)},e)))),i("div",{key:"bda454d4475eec3fe5ae9acc5c8469ecb3d18c05",class:"duet-date__select-label","aria-hidden":"true"},i("span",{key:"d19ab3a704087c802120ccc3302936c731b7562e"},this.localization.monthNamesShort[a]),i("nano-icon",{key:"43a416a07564d92b336f24949e996883bf58d5ee",name:"light/chevron-down"}))),i("label",{key:"70377923f51c50f90e60f67176ff78a33d374ee0",htmlFor:this.yearSelectId,class:"duet-date__vhidden"},this.localization.yearSelectLabel),i("div",{key:"7bf07568e4a9cf4d8be23d4fc3524387a084c2fd",class:"duet-date__select"},i("select",{key:"d93e973816afe3104eb3e758d528710dcb75eaf5",id:this.yearSelectId,class:"duet-date__select--year",onChange:this.handleYearSelect,ref:e=>this.yearSelectNode=e},N(u,b).map((e=>i("option",{key:e,selected:e===o},e)))),i("div",{key:"a702ec49fb3fae14fc45675cfeadf53ebb640d23",class:"duet-date__select-label","aria-hidden":"true"},i("span",{key:"245198b80ab131426457daa425f3bb29178bd5cd"},this.focusedDay.getFullYear()),i("nano-icon",{key:"61346903f0755ced93ae4298fbf69c5045411c3d",name:"light/chevron-down"})))),i("div",{key:"58fa6c63619b08701a33b8690c6581d5109aeb48",class:"duet-date__nav"},i("button",{key:"c1428835b394a76fc15e7f627b0f1cf223a860d8",class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:r,type:"button"},i("nano-icon",{key:"59a1bfa486467fd186afe8484cb6d36f6361ca31",name:"light/chevron-left"}),i("span",{key:"79b059d58381e91fe5fb3eab5f6c0e4e1f76a481",class:"duet-date__vhidden"},this.localization.prevMonthLabel)),i("button",{key:"9e3bf89c8ba8660985810339f2a26972b8669c9c",class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:h,type:"button"},i("nano-icon",{key:"93ebf9ceb09fd374f99a4b1081d3a604a366c951",name:"light/chevron-right"}),i("span",{key:"f9bab89b3c09bc9e53ea4d455881a4e9db64b222",class:"duet-date__vhidden"},this.localization.nextMonthLabel)))),i("div",{key:"b0a97a8d3aca05ef9db1a69602779e34ccee7bbe"},i(S,{key:"e2dd247425720b2032e9e7a0a951a936d87dd560",selectedDate:e,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:n,max:c,isDateDisabled:this.isDateDisabled}))))))}static get watchers(){return{selectedDate:["handleSelectedDateChange"]}}};C.style=F;export{C as nano_date_picker};
-//# sourceMappingURL=nano-date-picker.entry.js.map

package/dist/nano-components/nano-date-picker.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["localization","buttonLabel","placeholder","selectedDateMessage","prevMonthLabel","nextMonthLabel","monthSelectLabel","yearSelectLabel","closeLabel","keyboardInstruction","calendarHeading","dayNames","monthNames","monthNamesShort","defaultLocalization","DatePickerDay","focusedDay","today","day","onDaySelect","onKeyboardNavigation","focusedDayRef","inRange","disabled","isSelected","isToday","isEqual","isFocused","isDisabled","getMonth","isOutsideRange","handleClick","e","h","class","tabIndex","onClick","onKeyDown","type","ref","el","getDate","toLocaleDateString","undefined","month","chunk","array","chunkSize","result","i","length","push","slice","mapWithOffset","startingOffset","mapFn","map","_","adjustedIndex","DatePickerMonth","selectedDate","focusedDate","labelledById","firstDayOfWeek","min","max","onDateSelect","onMouseDown","onFocusIn","isDateDisabled","Date","days","getViewOfMonth","role","onFocusin","dayName","scope","substr","week","datePickerCss","NanoDatePickerStyle0","range","from","to","dateIds","DatePicker","dateId","monthSelectId","this","yearSelectId","dialogLabelId","firstFocusableElement","monthSelectNode","yearSelectNode","focusedDayNode","focusTimeoutId","initialTouchX","initialTouchY","activeFocus","DaysOfWeek","Monday","color","isModal","firstFocusEle","nanoDatePicked","setFocus","forceFocusVisible","setFocusedDay","parseISODate","setTimeout","focus","clearTimeout","focusVisible","force","handleSelectedDateChange","enableActiveFocus","disableActiveFocus","addDays","addMonths","months","setMonth","addYears","years","setYear","getFullYear","startOfWeek","endOfWeek","startOfMonth","endOfMonth","date","dateClamp","year","handleTouchStart","event","touch","changedTouches","pageX","pageY","handleTouchMove","preventDefault","handleTouchEnd","distX","distY","threshold","isHorizontalSwipe","Math","abs","handleNextMonthClick","handlePreviousMonthClick","handleKeyboardNavigation","key","shiftKey","ele","handled","handleDaySelect","_event","isAllowed","isInRange","setValue","handleMonthSelect","parseInt","target","value","handleYearSelect","printISODate","emit","valueAsDate","processFocusedDayNode","element","connectedCallback","observe","componentWillLoad","componentDidLoad","disconnectedCallback","unobserve","render","selectedYear","focusedMonth","focusedYear","minDate","maxDate","prevMonthDisabled","nextMonthDisabled","minYear","maxYear","Host","createColorClasses","onTouchMove","onTouchStart","onTouchEnd","id","htmlFor","onChange","selected","name"],"sources":["src/components/date-picker/duet-date-picker/date-localization.ts","src/components/date-picker/duet-date-picker/date-picker-day.tsx","src/components/date-picker/duet-date-picker/date-picker-month.tsx","src/components/date-picker/date-picker.scss?tag=nano-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["type MonthsNames = [\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string\n];\ntype DayNames = [string, string, string, string, string, string, string];\n\nexport type DuetLocalizedText = {\n  buttonLabel: string;\n  placeholder: string;\n  selectedDateMessage: string;\n  prevMonthLabel: string;\n  nextMonthLabel: string;\n  monthSelectLabel: string;\n  yearSelectLabel: string;\n  closeLabel: string;\n  keyboardInstruction: string;\n  calendarHeading: string;\n  dayNames: DayNames;\n  monthNames: MonthsNames;\n  monthNamesShort: MonthsNames;\n};\n\nconst localization: DuetLocalizedText = {\n  buttonLabel: 'Choose date',\n  placeholder: 'YYYY-MM-DD',\n  selectedDateMessage: 'Selected date is',\n  prevMonthLabel: 'Previous month',\n  nextMonthLabel: 'Next month',\n  monthSelectLabel: 'Month',\n  yearSelectLabel: 'Year',\n  closeLabel: 'Close window',\n  keyboardInstruction: 'You can use arrow keys to navigate dates',\n  calendarHeading: 'Choose a date',\n  dayNames: [\n    'Sunday',\n    'Monday',\n    'Tuesday',\n    'Wednesday',\n    'Thursday',\n    'Friday',\n    'Saturday',\n  ],\n  monthNames: [\n    'January',\n    'February',\n    'March',\n    'April',\n    'May',\n    'June',\n    'July',\n    'August',\n    'September',\n    'October',\n    'November',\n    'December',\n  ],\n  monthNamesShort: [\n    'Jan',\n    'Feb',\n    'Mar',\n    'Apr',\n    'May',\n    'Jun',\n    'Jul',\n    'Aug',\n    'Sep',\n    'Oct',\n    'Nov',\n    'Dec',\n  ],\n};\n\nexport default localization;\n","import { FunctionalComponent } from '@stencil/core';\nimport { h } from '../../../utils/renderer';\nimport { isEqual } from '../../../utils/date-utils';\n\nexport type DatePickerDayProps = {\n  focusedDay: Date;\n  today: Date;\n  day: Date;\n  inRange: boolean;\n  disabled: boolean;\n  onDaySelect: (event: MouseEvent, day: Date) => void;\n  onKeyboardNavigation: (event: KeyboardEvent) => void;\n  focusedDayRef?: (element: HTMLButtonElement) => void;\n  isSelected;\n};\n\nexport const DatePickerDay: FunctionalComponent<DatePickerDayProps> = ({\n  focusedDay,\n  today,\n  day,\n  onDaySelect,\n  onKeyboardNavigation,\n  focusedDayRef,\n  inRange,\n  disabled,\n  isSelected,\n}) => {\n  const isToday = isEqual(day, today);\n  const isFocused = isEqual(day, focusedDay);\n  const isDisabled = day.getMonth() !== focusedDay.getMonth() || disabled;\n  const isOutsideRange = !inRange;\n\n  function handleClick(e) {\n    onDaySelect(e, day);\n  }\n\n  return (\n    <button\n      class={{\n        'duet-date__day': true,\n        'is-outside': isOutsideRange,\n        'is-disabled': isDisabled,\n        'is-today': isToday,\n      }}\n      tabIndex={isFocused ? 0 : -1}\n      onClick={handleClick}\n      onKeyDown={onKeyboardNavigation}\n      disabled={isOutsideRange}\n      type=\"button\"\n      aria-pressed={isSelected ? 'true' : 'false'}\n      ref={(el) => {\n        if (isFocused && el && focusedDayRef) {\n          focusedDayRef(el);\n        }\n      }}\n    >\n      <span aria-hidden=\"true\">{day.getDate()}</span>\n      <span class=\"duet-date__vhidden\">\n        {day.toLocaleDateString(undefined, { day: 'numeric', month: 'long' })}\n      </span>\n    </button>\n  );\n};\n","import { FunctionalComponent } from '@stencil/core';\nimport { h } from '../../../utils/renderer';\nimport {\n  getViewOfMonth,\n  inRange,\n  DaysOfWeek,\n  isEqual,\n} from '../../../utils/date-utils';\nimport { DateDisabledPredicate } from '../date-picker-interface';\nimport { DatePickerDay, DatePickerDayProps } from './date-picker-day';\nimport type { DuetLocalizedText } from './date-localization';\n\nfunction chunk<T>(array: T[], chunkSize: number): T[][] {\n  const result = [];\n\n  for (let i = 0; i < array.length; i += chunkSize) {\n    result.push(array.slice(i, i + chunkSize));\n  }\n\n  return result;\n}\n\nfunction mapWithOffset<T, U>(\n  array: T[],\n  startingOffset: number,\n  mapFn: (item: T) => U\n): U[] {\n  return array.map((_, i) => {\n    const adjustedIndex = (i + startingOffset) % array.length;\n    return mapFn(array[adjustedIndex]);\n  });\n}\n\ntype DatePickerMonthProps = {\n  selectedDate: Date;\n  focusedDate: Date;\n  labelledById: string;\n  localization: DuetLocalizedText;\n  firstDayOfWeek: DaysOfWeek;\n  min?: Date;\n  max?: Date;\n  onDateSelect: DatePickerDayProps['onDaySelect'];\n  onKeyboardNavigation: DatePickerDayProps['onKeyboardNavigation'];\n  focusedDayRef: (element: HTMLButtonElement) => void;\n  onFocusIn?: (e: FocusEvent) => void;\n  onMouseDown?: (e: MouseEvent) => void;\n  isDateDisabled: DateDisabledPredicate;\n};\n\nexport const DatePickerMonth: FunctionalComponent<DatePickerMonthProps> = ({\n  selectedDate,\n  focusedDate,\n  labelledById,\n  localization,\n  firstDayOfWeek,\n  min,\n  max,\n  onDateSelect,\n  onKeyboardNavigation,\n  focusedDayRef,\n  onMouseDown,\n  onFocusIn,\n  isDateDisabled,\n}) => {\n  const today = new Date();\n  const days = getViewOfMonth(focusedDate, firstDayOfWeek);\n\n  return (\n    <table\n      class=\"duet-date__table\"\n      role=\"grid\"\n      aria-labelledby={labelledById}\n      onFocusin={onFocusIn}\n      onMouseDown={onMouseDown}\n    >\n      <thead>\n        <tr>\n          {mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (\n            <th class=\"duet-date__table-header\" scope=\"col\">\n              <span aria-hidden=\"true\">{dayName.substr(0, 2)}</span>\n              <span class=\"duet-date__vhidden\">{dayName}</span>\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {chunk(days, 7).map((week) => (\n          <tr class=\"duet-date__row\">\n            {week.map((day) => (\n              <td\n                class=\"duet-date__cell\"\n                role=\"gridcell\"\n                aria-selected={isEqual(day, selectedDate) ? 'true' : undefined}\n              >\n                <DatePickerDay\n                  day={day}\n                  today={today}\n                  focusedDay={focusedDate}\n                  inRange={inRange(day, min, max)}\n                  onDaySelect={onDateSelect}\n                  onKeyboardNavigation={onKeyboardNavigation}\n                  focusedDayRef={focusedDayRef}\n                  disabled={isDateDisabled(day)}\n                  isSelected={isEqual(day, selectedDate)}\n                />\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n","@use '../../global/style/utilities/colours' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --background: defaults to #{tokens.$layer-bg-color}\n   * @prop --active-color: defaults to var(--nano-color-base, #{nano-color(primary,base)})\n   * @prop --active-text-color: defaults to  var(--nano-color-contrast, #{nano-color(primary, contrast)})\n   * @prop --focus-shadow: defaults to  #{tokens.$control-focus-style}\n   * @prop --inactive-color: defaults to #{tokens.$button-bg-color}\n   */\n\n  --background: #{tokens.$layer-bg-color};\n  --active-color: var(--nano-color-base, #{tokens.nano-color(primary, base)});\n  --active-text-color:\n    var(\n      --nano-color-contrast,\n      #{tokens.nano-color(primary, contrast)}\n    );\n  --focus-shadow: #{tokens.$control-focus-style};\n  --inactive-color: #{tokens.$button-bg-color};\n\n  display: block;\n  font-size: 16px;\n}\n\n:host(.nano-color) {\n  --active-color: var(--nano-color-base, #{tokens.nano-color(primary, base)});\n  --active-text-color: #{mx.current-color(contrast)};\n  --focus-shadow: #{tokens.$control-focus-size mx.current-color(tint, 0.56)};\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER\n// ---------------------------------------------\n\n.duet-date *,\n.duet-date *::before,\n.duet-date *::after {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.duet-date {\n  box-sizing: border-box;\n  color: currentcolor;\n  display: block;\n  margin: 0;\n  position: relative;\n  text-align: start;\n  inline-size: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ DIALOG\n// ---------------------------------------------\n\n.duet-date__dialog {\n  display: flex;\n  inset-block-start: 100%;\n  max-inline-size: 100%;\n  inline-size: 100%;\n\n  &.is-left {\n    inset-inline: auto 0;\n    inline-size: auto;\n  }\n}\n\n.duet-date__dialog-content {\n  background: var(--background);\n  min-inline-size: 290px;\n  padding-block: 16px 20px;\n  padding-inline: 16px;\n  position: relative;\n  transform: none;\n  max-inline-size: 100%;\n  inline-size: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ TABLE\n// ---------------------------------------------\n\n.duet-date__table {\n  border-collapse: collapse;\n  border-spacing: 0;\n  font-size: 1em;\n  line-height: 1;\n  text-align: center;\n  inline-size: 100%;\n}\n\n.duet-date__table-header {\n  font-size: 0.75em;\n  font-weight: 600;\n  letter-spacing: 1px;\n  line-height: 1;\n  padding-block-end: 8px;\n  text-decoration: none;\n  text-transform: uppercase;\n}\n\n.duet-date__cell {\n  text-align: center;\n}\n\n.duet-date__day {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  display: inline-block;\n  font-size: 0.875em;\n  font-variant-numeric: tabular-nums;\n  line-height: 1;\n  position: relative;\n  text-align: center;\n  vertical-align: middle;\n  z-index: 1;\n  transition: 0.15s ease all;\n  block-size: 2.5em;\n  inline-size: 2.5em;\n\n  &.is-today {\n    box-shadow: 0 0 0 1px var(--active-color);\n    position: relative;\n  }\n\n  &:hover::before,\n  &.is-today::before {\n    content: '';\n    background: var(--active-color);\n    border-radius: 50%;\n    opacity: 0.16;\n    position: absolute;\n    inset: 0;\n  }\n\n  [aria-selected='true'] & {\n    background: var(--active-color) !important;\n    color: var(--active-text-color);\n    box-shadow: none;\n    outline: 0;\n  }\n\n  &:active {\n    background: var(--active-color);\n    box-shadow: var(--focus-shadow);\n    color: var(--active-text-color);\n  }\n\n  &:focus {\n    box-shadow: var(--focus-shadow);\n    outline: 0;\n  }\n\n  &.is-disabled {\n    background: transparent;\n    box-shadow: none;\n    cursor: default;\n    opacity: 0.5;\n\n    &::before {\n      display: none;\n    }\n  }\n\n  &.is-outside {\n    background: var(--inactive-color);\n    box-shadow: none;\n    cursor: default;\n    opacity: 0.6;\n    pointer-events: none;\n\n    &::before {\n      display: none;\n    }\n  }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ HEADER\n// ---------------------------------------------\n\n.duet-date__header {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-block-end: 16px;\n  inline-size: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ NAVIGATION\n// ---------------------------------------------\n\n.duet-date__nav {\n  white-space: nowrap;\n}\n\n.duet-date__prev,\n.duet-date__next {\n  background: var(--inactive-color);\n  align-items: center;\n  appearance: none;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  display: inline-flex;\n  justify-content: space-around;\n  margin-inline-start: 8px;\n  padding: 0;\n  transition: background-color 300ms ease;\n  font-size: 0.9em;\n  block-size: 2.2em;\n  inline-size: 2.2em;\n\n  &:focus {\n    box-shadow: var(--focus-shadow);\n    outline: 0;\n  }\n\n  &:active:focus {\n    box-shadow: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 0.5;\n  }\n\n  .nano-icon {\n    margin-block: 0;\n    margin-inline: auto;\n  }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ SELECT\n// ---------------------------------------------\n\n.duet-date__select {\n  display: inline-flex;\n  margin-block-start: 4px;\n  position: relative;\n\n  span {\n    margin-inline-end: 4px;\n  }\n\n  select {\n    cursor: pointer;\n    font-size: 1em;\n    block-size: 100%;\n    inset-inline-start: 0;\n    opacity: 0;\n    position: absolute;\n    inset-block-start: 0;\n    inline-size: 100%;\n    z-index: 2;\n\n    &.focus-visible:focus + .duet-date__select-label {\n      box-shadow: var(--focus-shadow);\n    }\n  }\n}\n\n.duet-date__select-label {\n  align-items: center;\n  border-radius: 4px;\n  display: flex;\n  font-size: 1.25em;\n  font-weight: 600;\n  line-height: 1;\n  padding-block: 0;\n  padding-inline: 8px 4px;\n  pointer-events: none;\n  position: relative;\n  inline-size: 100%;\n  z-index: 1;\n\n  .nano-icon {\n    font-size: 0.55em;\n  }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ VISUALLY HIDDEN\n// ---------------------------------------------\n\n.duet-date__vhidden {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  block-size: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  inset-block-start: 0;\n  inline-size: 1px;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport {\n  addDays,\n  startOfWeek,\n  endOfWeek,\n  setMonth,\n  setYear,\n  dateClamp,\n  inRange,\n  endOfMonth,\n  startOfMonth,\n  printISODate,\n  parseISODate,\n  DaysOfWeek,\n} from '../../utils/date-utils';\n\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport defaultLocalization, {\n  type DuetLocalizedText,\n} from './duet-date-picker/date-localization';\nimport { DatePickerMonth } from './duet-date-picker/date-picker-month';\nimport type { Color } from '../../types/shared';\nimport type {\n  DateDisabledPredicate,\n  PickerChangeEvent,\n} from './date-picker-interface';\n\nfunction range(from: number, to: number) {\n  const result: number[] = [];\n  for (let i = from; i <= to; i++) {\n    result.push(i);\n  }\n  return result;\n}\n\nlet dateIds = 0;\n\n/**\n * A highly performant, small and accessible date-picker.\n * Customised from [Duet date-picker](https://duetds.github.io/date-picker/).\n */\n@Component({\n  tag: 'nano-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n})\nexport class DatePicker implements ComponentInterface {\n  private dateId = `nano-datepicker-${dateIds++}`;\n  private monthSelectId = this.dateId + '-' + 'month';\n  private yearSelectId = this.dateId + '-' + 'year';\n  private dialogLabelId = this.dateId + '-' + 'dialog';\n\n  private firstFocusableElement: HTMLElement;\n  private monthSelectNode: HTMLElement;\n  private yearSelectNode: HTMLElement;\n  private focusedDayNode: HTMLButtonElement;\n\n  private focusTimeoutId: ReturnType<typeof setTimeout>;\n\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  @Element() host: HTMLNanoDatePickerElement;\n\n  @State() activeFocus = false;\n  @State() focusedDay = new Date();\n\n  // Public Property API\n\n  /** Selected Date. Must be in IS0-8601 format: YYYY-MM-DD. */\n  @Prop({ mutable: true }) selectedDate: string = '';\n\n  /** Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property. */\n  @Prop() min: string = '';\n\n  /** Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property. */\n  @Prop() max: string = '';\n\n  /** Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday. */\n  @Prop() firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday;\n\n  /** Button labels, day names, month names, etc, used for localization.\n   * Default is English. */\n  @Prop() localization: DuetLocalizedText = defaultLocalization;\n\n  /** The color to use from the application's color palette. */\n  @Prop() color?: Color;\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   * @returns `false` for not disabled and `true` for disabled\n   */\n  @Prop() isDateDisabled: DateDisabledPredicate = () => false;\n\n  /** Controls whether the picker is a modal or dialog,\n   * popup control and will therefore keep focus within the control */\n  @Prop() isModal: boolean = false;\n\n  /** @internal First focusable element. Relevant for keeping focus within the control */\n  @Prop() firstFocusEle: HTMLElement;\n\n  // Events\n\n  /** Event emitted when a date is selected. */\n  @Event() nanoDatePicked: EventEmitter<PickerChangeEvent>;\n\n  // Public methods API\n\n  /** Focus to the calendar\n   * @param day - focus to the current selected day\n   * @param forceFocusVisible - force visible focus - required if opened via keyboad\n   */\n  @Method()\n  async setFocus(day = false, forceFocusVisible = false) {\n    this.setFocusedDay(parseISODate(this.selectedDate) || new Date());\n\n    if (day) {\n      setTimeout((_) => this.focusedDayNode.focus(), 20);\n      return;\n    }\n    clearTimeout(this.focusTimeoutId);\n    this.focusTimeoutId = setTimeout(() => {\n      if (forceFocusVisible) focusVisible.force(this.monthSelectNode);\n      this.monthSelectNode.focus();\n    }, 20);\n  }\n\n  @Watch('selectedDate')\n  handleSelectedDateChange() {\n    this.setFocus(true);\n  }\n\n  // Local methods.\n\n  private enableActiveFocus = () => {\n    this.activeFocus = true;\n  };\n\n  private disableActiveFocus = () => {\n    this.activeFocus = false;\n  };\n\n  private addDays(days: number) {\n    this.setFocusedDay(addDays(this.focusedDay, days));\n  }\n\n  private addMonths(months: number) {\n    this.setMonth(this.focusedDay.getMonth() + months);\n  }\n\n  private addYears(years: number) {\n    this.setYear(this.focusedDay.getFullYear() + years);\n  }\n\n  private startOfWeek() {\n    this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));\n  }\n\n  private endOfWeek() {\n    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));\n  }\n\n  private setMonth(month: number) {\n    const min = setMonth(startOfMonth(this.focusedDay), month);\n    const max = endOfMonth(min);\n    const date = setMonth(this.focusedDay, month);\n\n    this.setFocusedDay(dateClamp(date, min, max));\n  }\n\n  private setYear(year: number) {\n    const min = setYear(startOfMonth(this.focusedDay), year);\n    const max = endOfMonth(min);\n    const date = setYear(this.focusedDay, year);\n\n    this.setFocusedDay(dateClamp(date, min, max));\n  }\n\n  private setFocusedDay(day: Date) {\n    this.focusedDay = dateClamp(\n      day,\n      parseISODate(this.min),\n      parseISODate(this.max)\n    );\n  }\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  private handleTouchMove = (event: TouchEvent) => {\n    event.preventDefault();\n  };\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    const isHorizontalSwipe =\n      Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n    if (isHorizontalSwipe) {\n      this.addMonths(distX < 0 ? 1 : -1);\n    }\n\n    this.initialTouchY = null;\n    this.initialTouchX = null;\n  };\n\n  private handleNextMonthClick = (event: MouseEvent) => {\n    event.preventDefault();\n    this.addMonths(1);\n  };\n\n  private handlePreviousMonthClick = (event: MouseEvent) => {\n    event.preventDefault();\n    this.addMonths(-1);\n  };\n\n  private handleKeyboardNavigation = (event: KeyboardEvent) => {\n    // handle tab separately, since it needs to be treated\n    // differently to other keyboard interactions\n    if (event.key === 'Tab' && !event.shiftKey && this.isModal) {\n      event.preventDefault();\n      const ele = this.firstFocusEle || this.firstFocusableElement;\n      ele.focus();\n      return;\n    }\n\n    let handled = true;\n\n    switch (event.key) {\n      case 'ArrowRight':\n        this.addDays(1);\n        break;\n      case 'ArrowLeft':\n        this.addDays(-1);\n        break;\n      case 'ArrowDown':\n        this.addDays(7);\n        break;\n      case 'ArrowUp':\n        this.addDays(-7);\n        break;\n      case 'PageUp':\n        if (event.shiftKey) {\n          this.addYears(-1);\n        } else {\n          this.addMonths(-1);\n        }\n        break;\n      case 'PageDown':\n        if (event.shiftKey) {\n          this.addYears(1);\n        } else {\n          this.addMonths(1);\n        }\n        break;\n      case 'Home':\n        this.startOfWeek();\n        break;\n      case 'End':\n        this.endOfWeek();\n        break;\n      default:\n        handled = false;\n    }\n\n    if (handled) {\n      event.preventDefault();\n      this.enableActiveFocus();\n    }\n  };\n\n  private handleDaySelect = (_event: MouseEvent, day: Date) => {\n    const isAllowed = !this.isDateDisabled(day);\n    const isInRange = inRange(\n      day,\n      parseISODate(this.min),\n      parseISODate(this.max)\n    );\n\n    if (!isInRange || !isAllowed) {\n      return;\n    }\n\n    if (day.getMonth() === this.focusedDay.getMonth()) {\n      this.setValue(day);\n    } else {\n      this.setFocusedDay(day);\n    }\n  };\n\n  private handleMonthSelect = (e) => {\n    this.setMonth(parseInt(e.target.value, 10));\n  };\n\n  private handleYearSelect = (e) => {\n    this.setYear(parseInt(e.target.value, 10));\n  };\n\n  private setValue(date: Date) {\n    this.selectedDate = printISODate(date);\n    this.nanoDatePicked.emit({\n      value: this.selectedDate,\n      valueAsDate: date,\n    });\n  }\n\n  private processFocusedDayNode = (element: HTMLButtonElement) => {\n    this.focusedDayNode = element;\n\n    if (this.activeFocus) {\n      setTimeout(() => element.focus(), 0);\n    }\n  };\n\n  connectedCallback() {\n    if (this.yearSelectNode) focusVisible.observe(this.yearSelectNode);\n    if (this.monthSelectNode) focusVisible.observe(this.monthSelectNode);\n  }\n\n  componentWillLoad() {\n    this.handleSelectedDateChange();\n  }\n\n  componentDidLoad() {\n    this.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.yearSelectNode);\n    focusVisible.unobserve(this.monthSelectNode);\n  }\n\n  render() {\n    const valueAsDate = parseISODate(this.selectedDate);\n    const selectedYear = (valueAsDate || this.focusedDay).getFullYear();\n    const focusedMonth = this.focusedDay.getMonth();\n    const focusedYear = this.focusedDay.getFullYear();\n\n    const minDate = parseISODate(this.min);\n    const maxDate = parseISODate(this.max);\n    const prevMonthDisabled =\n      minDate != null &&\n      minDate.getMonth() === focusedMonth &&\n      minDate.getFullYear() === focusedYear;\n    const nextMonthDisabled =\n      maxDate != null &&\n      maxDate.getMonth() === focusedMonth &&\n      maxDate.getFullYear() === focusedYear;\n\n    let minYear = selectedYear - 10;\n    let maxYear = selectedYear + 10;\n    if (minDate) minYear = minDate.getFullYear();\n    if (maxDate) maxYear = maxDate.getFullYear();\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color), 'nano-date-picker': true }}\n      >\n        <div class=\"duet-date\">\n          <div\n            class={{\n              'duet-date__dialog': true,\n              'is-active': true,\n            }}\n            onTouchMove={this.handleTouchMove}\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <div class=\"duet-date__dialog-content\">\n              <div\n                class=\"duet-date__vhidden duet-date__instructions\"\n                aria-live=\"polite\"\n              >\n                {this.localization.keyboardInstruction}\n              </div>\n              {/**\n               * With onFocusIn, which is what TS types expect, Stencil ends up listening to a\n               * focusIn event, which is wrong as it needs to be focusin. So we had to use onFocusin\n               * here which is wrong for the TS types, but ends up with the correct event listener\n               * in Stencil. See issue: https://github.com/ionic-team/stencil/issues/2628\n               */}\n              <div\n                class=\"duet-date__header\"\n                onFocusin={this.disableActiveFocus}\n              >\n                <div>\n                  <h2\n                    id={this.dialogLabelId}\n                    class=\"duet-date__vhidden\"\n                    aria-live=\"polite\"\n                  >\n                    {this.localization.monthNames[focusedMonth]}{' '}\n                    {this.focusedDay.getFullYear()}\n                  </h2>\n                  <label\n                    htmlFor={this.monthSelectId}\n                    class=\"duet-date__vhidden\"\n                  >\n                    {this.localization.monthSelectLabel}\n                  </label>\n                  <div class=\"duet-date__select\">\n                    <select\n                      id={this.monthSelectId}\n                      class=\"duet-date__select--month\"\n                      ref={(element) =>\n                        (this.firstFocusableElement = this.monthSelectNode =\n                          element)\n                      }\n                      onChange={this.handleMonthSelect}\n                    >\n                      {this.localization.monthNames.map((month, i) => (\n                        <option\n                          key={month}\n                          value={i}\n                          selected={i === focusedMonth}\n                          disabled={\n                            !inRange(\n                              new Date(focusedYear, i, 1),\n                              minDate ? startOfMonth(minDate) : null,\n                              maxDate ? endOfMonth(maxDate) : null\n                            )\n                          }\n                        >\n                          {month}\n                        </option>\n                      ))}\n                    </select>\n                    <div class=\"duet-date__select-label\" aria-hidden=\"true\">\n                      <span>\n                        {this.localization.monthNamesShort[focusedMonth]}\n                      </span>\n                      <nano-icon name=\"light/chevron-down\"></nano-icon>\n                    </div>\n                  </div>\n\n                  <label htmlFor={this.yearSelectId} class=\"duet-date__vhidden\">\n                    {this.localization.yearSelectLabel}\n                  </label>\n                  <div class=\"duet-date__select\">\n                    <select\n                      id={this.yearSelectId}\n                      class=\"duet-date__select--year\"\n                      onChange={this.handleYearSelect}\n                      ref={(element) => (this.yearSelectNode = element)}\n                    >\n                      {range(minYear, maxYear).map((year) => (\n                        <option key={year} selected={year === focusedYear}>\n                          {year}\n                        </option>\n                      ))}\n                    </select>\n                    <div class=\"duet-date__select-label\" aria-hidden=\"true\">\n                      <span>{this.focusedDay.getFullYear()}</span>\n                      <nano-icon name=\"light/chevron-down\" />\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"duet-date__nav\">\n                  <button\n                    class=\"duet-date__prev\"\n                    onClick={this.handlePreviousMonthClick}\n                    disabled={prevMonthDisabled}\n                    type=\"button\"\n                  >\n                    <nano-icon name=\"light/chevron-left\" />\n                    <span class=\"duet-date__vhidden\">\n                      {this.localization.prevMonthLabel}\n                    </span>\n                  </button>\n                  <button\n                    class=\"duet-date__next\"\n                    onClick={this.handleNextMonthClick}\n                    disabled={nextMonthDisabled}\n                    type=\"button\"\n                  >\n                    <nano-icon name=\"light/chevron-right\" />\n                    <span class=\"duet-date__vhidden\">\n                      {this.localization.nextMonthLabel}\n                    </span>\n                  </button>\n                </div>\n              </div>\n              <div>\n                <DatePickerMonth\n                  selectedDate={valueAsDate}\n                  focusedDate={this.focusedDay}\n                  onDateSelect={this.handleDaySelect}\n                  onKeyboardNavigation={this.handleKeyboardNavigation}\n                  labelledById={this.dialogLabelId}\n                  localization={this.localization}\n                  firstDayOfWeek={this.firstDayOfWeek}\n                  focusedDayRef={this.processFocusedDayNode}\n                  min={minDate}\n                  max={maxDate}\n                  isDateDisabled={this.isDateDisabled}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-details.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["detailsCss","NanoDetailsStyle0","Details","hasStartSlot","hasEndSlot","mo","stateChanging","bodyEl","detailsEl","headerEl","contentEl","cacheHeight","label","open","disabled","noHandle","iconRotation","useCacheHeight","nanoOpened","nanoClosed","nanoAfterOpened","nanoAfterClosed","toggleClick","this","show","hide","onKeyDown","e","key","preventDefault","onMouseDown","focus","nanoClose","emit","defaultPrevented","scrollHeight","style","height","displayTransition","className","transitionProp","then","classList","add","setTimeout","nanoOpen","attachMo","Build","isBrowser","MutationObserver","changes","change","type","attributeName","observe","attributes","componentWillLoad","host","querySelector","componentDidLoad","setAttribute","connectedCallback","disconnectedCallback","disconnect","undefined","render","h","Host","class","part","ref","d","details","tabindex","display","id","role","s","onClick","transform","name","div"],"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n    * @prop --padding: Default to 1em;\n\n    * @prop --btn-padding: Defaults to var(--padding);\n    * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n    * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n    * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get(tokens.$colors, offwhite)});\n\n    * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n    * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n    * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n    * @prop --transition-duration: Time it takes to slide down and show content. Defaults to .2s;\n\n    * @prop --border-width: Defaults to none;\n    * @prop --border-color: Defaults to none;\n    * @prop --border-style: Defaults to none;\n    * @prop --border-radius: Defaults to none;\n    * @prop --box-shadow: Defaults to none;\n    * @prop --focus-style: Defaults to #{tokens.$control-focus-style}\n  */\n\n  @include mx.text-inherit();\n\n  --padding: 1em;\n  --btn-padding: var(--padding);\n  --content-padding: var(--padding);\n  --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n  --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n  --btn-bg-color--hover: var(--nano-color-tint, #{map.get(tokens.$colors, offwhite)});\n  --btn-text-color: var(--nano-color-base, #455556);\n  --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n  --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n  --transition-duration: 0.2s;\n  --border-width: none;\n  --border-color: none;\n  --border-style: none;\n  --border-radius: none;\n  --box-shadow: none;\n  --focus-style: #{tokens.$control-focus-style};\n\n  display: block;\n  border-style: var(--border-style);\n  border-width: var(--border-width-dims);\n  border-color: var(--border-color);\n  border-radius: var(--border-radius-dims);\n  box-shadow: var(--box-shadow);\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\n:host(:last-of-type) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n  --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n  .open .content {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n  }\n}\n\n:host(:first-of-type) {\n  --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n  --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n  --border-radius-dims: var(--border-radius);\n  --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n.header {\n  block-size: auto;\n  padding: var(--btn-padding);\n  text-align: inherit;\n  position: relative;\n  font-size: 1em;\n  line-height: 1;\n  margin: 0;\n  transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n  display: flex;\n  align-items: center;\n  background: var(--btn-bg-color);\n  color: var(--btn-text-color);\n  border-radius: var(--border-radius-dims);\n  cursor: pointer;\n\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    box-shadow: var(--focus-style);\n    outline: none;\n    position: relative;\n    z-index: 1;\n  }\n\n  &:hover {\n    background: var(--btn-bg-color--hover);\n    color: var(--btn-text-color--hover);\n  }\n\n  .open & {\n    background: var(--btn-bg-color--open);\n    color: var(--btn-text-color--open);\n    border-end-end-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  .disabled & {\n    cursor: not-allowed;\n  }\n\n  .label {\n    inline-size: 100%;\n    max-inline-size: 100%;\n    max-block-size: 100%;\n    flex: 1;\n    display: inline-block;\n  }\n\n  .icon {\n    line-height: 0;\n    flex-direction: column;\n    justify-content: center;\n    display: inline-block;\n    color: currentcolor;\n    transition: 0.3s ease transform;\n    transform-origin: center;\n\n    &--start {\n      margin-inline: 0 var(--btn-padding);\n      margin-block: 0;\n    }\n\n    &--end {\n      margin-inline: var(--btn-padding) 0;\n      margin-block: 0;\n    }\n\n    ::slotted(.nano-icon) {\n      --color: currentcolor;\n    }\n  }\n}\n\n.body {\n  overflow: hidden;\n  transition: height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;\n  outline: none;\n\n  > * {\n    .is-hidden & {\n      animation: fade .1s ease reverse;\n    }\n\n    .open & {\n      animation: fade var(--transition-duration, 0.3s) ease forwards;\n    }\n  }\n}\n\n.content {\n  padding: var(--content-padding);\n}\n\n@keyframes fade {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  Element,\n  Watch,\n  Build,\n  Host,\n} from '@stencil/core';\nimport { displayTransition } from '../../utils/transitions';\nimport { h } from '../../utils/renderer';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n *\n * @part base - the root `details` element\n * @part header - the main `summary` ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part body - the wrapper around content\n * @part content - the main content wrapper\n */\n@Component({\n  tag: 'nano-details',\n  styleUrl: 'details.scss',\n  shadow: true,\n})\nexport class Details {\n  private hasStartSlot: boolean;\n  private hasEndSlot: boolean;\n  private mo?: MutationObserver;\n  private stateChanging: boolean = false;\n  private bodyEl: HTMLElement;\n  private detailsEl: HTMLDetailsElement;\n  private headerEl: HTMLElement;\n  private contentEl: HTMLDivElement;\n  private cacheHeight: number;\n\n  @Element() private host: HTMLNanoDetailsElement;\n\n  /** Summary / handle text. Use the `label` slot for HTML markup */\n  @Prop() label: string = '';\n\n  /** Should item be open on load */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Disables the details so it can't be toggled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide the handle. (You will need to control the hiding / showing of content with script) */\n  @Prop() noHandle: boolean = false;\n\n  /** Icon slot rotation amount (degrees) on open */\n  @Prop() iconRotation: number = 90;\n\n  /**\n   * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\n   * Set `useCacheHeight` to `true` try to keep animations smooth. */\n  @Prop() useCacheHeight = false;\n\n  /**\n   * Emitted when the component opens.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoOpened: EventEmitter;\n\n  /**\n   * Emitted when the component closes.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoClosed: EventEmitter;\n\n  /** Emitted after the details opens and all transitions are complete. */\n  @Event() nanoAfterOpened: EventEmitter;\n\n  /** Emitted after the details closes and all transitions are complete. */\n  @Event() nanoAfterClosed: EventEmitter;\n\n  @Watch('open')\n  toggleClick() {\n    this.stateChanging = true;\n    if (this.open) this.show();\n    else this.hide();\n  }\n\n  private onKeyDown = (e: KeyboardEvent) => {\n    if (this.stateChanging || this.disabled) return;\n\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this.open = !this.open;\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        this.open = false;\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        this.open = true;\n        break;\n    }\n  };\n\n  private onMouseDown = (e: MouseEvent) => {\n    e.preventDefault();\n    this.headerEl.focus();\n\n    if (this.stateChanging || this.disabled) return;\n    this.open = !this.open;\n  };\n\n  private hide() {\n    const nanoClose = this.nanoClosed.emit(this.open);\n\n    if (nanoClose.defaultPrevented) {\n      this.open = true;\n      this.detailsEl.open = true;\n      return;\n    }\n\n    this.cacheHeight = this.contentEl.scrollHeight;\n    this.bodyEl.style.height = this.cacheHeight + 'px';\n\n    displayTransition(this.bodyEl, {\n      className: 'is-shown',\n      show: false,\n      transitionProp: ['height'],\n    }).then(() => {\n      this.stateChanging = false;\n      this.detailsEl.open = false;\n      this.bodyEl.classList.add('is-hidden');\n      this.nanoAfterClosed.emit();\n    });\n\n    // requestAnimationFrame doesn't trigger transitionend event for firefox :/\n    setTimeout(() => {\n      this.bodyEl.style.height = '0px';\n    });\n  }\n\n  private show() {\n    const nanoOpen = this.nanoOpened.emit();\n    this.detailsEl.open = true;\n\n    if (nanoOpen.defaultPrevented) {\n      this.open = false;\n      this.detailsEl.open = false;\n      return;\n    }\n\n    displayTransition(this.bodyEl, {\n      className: 'is-shown',\n      show: true,\n      transitionProp: ['height'],\n    }).then(() => {\n      this.stateChanging = false;\n      this.bodyEl.style.height = 'auto';\n      this.nanoAfterOpened.emit();\n    });\n\n    this.bodyEl.style.height =\n      (this.useCacheHeight && this.cacheHeight\n        ? this.cacheHeight\n        : this.contentEl.scrollHeight) + 'px';\n  }\n\n  private attachMo() {\n    if (this.mo || !this.detailsEl || !Build.isBrowser) return;\n\n    this.mo = new MutationObserver((changes) => {\n      if (this.stateChanging) return;\n\n      for (const change of changes) {\n        if (change.type === 'attributes' && change.attributeName === 'open') {\n          this.open = this.detailsEl.open;\n        }\n      }\n    });\n    this.mo.observe(this.detailsEl, { attributes: true });\n  }\n\n  componentWillLoad() {\n    this.hasStartSlot = !!this.host.querySelector('[slot=\"icon-start\"]');\n    this.hasEndSlot = !!this.host.querySelector('[slot=\"icon-end\"]');\n  }\n\n  componentDidLoad() {\n    this.bodyEl.style.height = this.open ? 'auto' : '0';\n    if (this.open) this.detailsEl.setAttribute('open', 'true');\n    this.attachMo();\n  }\n\n  connectedCallback() {\n    this.attachMo();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) {\n      this.mo.disconnect();\n      this.mo = undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-details\">\n        <details\n          part=\"base\"\n          ref={(d: HTMLDetailsElement) => (this.detailsEl = d)}\n          class={{\n            details: true,\n            open: this.open,\n            disabled: this.disabled,\n          }}\n        >\n          <summary\n            part=\"header\"\n            aria-controls=\"content\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            tabindex={this.disabled ? '-1' : '0'}\n            style={{ display: this.noHandle ? 'none' : '' }}\n            id=\"header\"\n            role=\"button\"\n            class=\"header\"\n            ref={(s) => (this.headerEl = s)}\n            onKeyDown={this.onKeyDown}\n            onClick={this.onMouseDown}\n          >\n            {this.hasStartSlot ? (\n              <span\n                part=\"icon--start\"\n                class=\"icon icon--start\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-start\" />\n              </span>\n            ) : (\n              ''\n            )}\n            <div part=\"label\" class=\"label\">\n              {this.label ? this.label : <slot name=\"label\" />}\n            </div>\n            {this.hasEndSlot ? (\n              <span\n                part=\"icon--end\"\n                class=\"icon icon--end\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-end\" />\n              </span>\n            ) : (\n              ''\n            )}\n          </summary>\n          <div\n            part=\"body\"\n            class=\"body\"\n            ref={(div) => (this.bodyEl = div)}\n            tabindex=\"-1\"\n            role=\"region\"\n            aria-labelledby=\"header\"\n          >\n            <div\n              part=\"content\"\n              ref={(div) => (this.contentEl = div)}\n              class=\"content\"\n              id=\"content\"\n            >\n              <slot />\n            </div>\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}