@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/nano-components/{p-6f3d20fe.entry.js.map → p-2e6c55e2.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/range/range.scss?tag=nano-range&encapsulation=scoped","src/components/range/range.tsx"],"names":["rangeCss","Range","[object Object]","hostRef","this","noUpdate","hasFocus","ratioA","ratioB","debounce","name","dualKnobs","min","max","pin","snaps","step","ticks","disabled","value","clampBounds","clamp","ensureValueInBounds","lower","upper","handleKeyboard","knob","isIncrease","updateValue","onBlur","nanoBlur","emit","emitStyle","onFocus","nanoFocus","nanoChange","debounceEvent","updateRatio","gesture","enable","debounceChanged","disabledChanged","destroy","undefined","rangeSlider","__sc_import_nano_components","createGesture","el","gestureName","gesturePriority","threshold","onStart","ev","onMove","onEnd","nanoStyle","interactive","interactive-disabled","detail","rect","getBoundingClientRect","currentX","ratio","left","width","document","dir","pressedKnob","Math","abs","setFocus","update","valueToRatio","ratioToValue","valA","valB","ratioLower","ratioUpper","getValue","shadowRoot","knobEl","querySelector","focus","barStart","barEnd","doc","isRTL","start","end","tickStyle","tick","barStyle","active","push","renderHiddenInput","JSON","stringify","h","Host","onFocusin","onFocusout","class","createColorClasses","color","range-disabled","range-pressed","range-has-pin","range-snaps","ref","rangeEl","map","style","role","range-tick","range-tick-active","part","renderKnob","pressed","knobStyle","onKeyDown","key","preventDefault","stopPropagation","range-knob-handle","range-knob-a","range-knob-b","range-knob-pressed","range-knob-min","range-knob-max","tabindex","aria-valuemin","aria-valuemax","aria-disabled","aria-valuenow","round"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n// Range\n// --------------------------------------------------\n\n:host {\n  /**\n   * @prop --knob-handle-size: defaults to calc(var(--knob-size) * 2);\n   * @prop --rgb-inactive: defaults to #{color-to-rgb-list(#a5a5a5)};\n   * @prop --bar-background: Background of the range bar; Defaults to #e2e1e0;\n   * @prop --bar-background-active: Background of the active range bar; Defaults to #a5a5a5;\n   * @prop --bar-height: Height of the range bar; Defaults to 8px;\n   * @prop --bar-border-radius: Border radius of the range bar; Defaults to 4px;\n   * @prop --height: Height of the range. Defaults to 42px;\n   * @prop --knob-background: Background of the range knob. Defaults to #{nano-color(primary, base)};\n   * @prop --knob-border-radius: Border radius of the range knob. Defaults to 50%;\n   * @prop --knob-box-shadow: Box shadow of the range knob; Defaults to 0 2px 4px 0 rgba(0, 0, 0, 0.3);\n   * @prop --knob-size: Size of the range knob; Defaults to 30px;\n   * @prop --pin-background: Background of the range pin; Defaults to #{nano-color(primary, base)};\n   * @prop --pin-color: Color of the range pin; Defaults to #{nano-color(primary, contrast)};\n   * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{$control-focus-color};\n   */\n  --knob-handle-size: (var(--knob-size) * 2);\n  --rgb-inactive: #{color-to-rgb-list(#a5a5a5)};\n  --knob-border-radius: 50%;\n  --knob-background: #{nano-color(primary, base)};\n  --knob-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);\n  --knob-size: 30px;\n  --bar-height: 8px;\n  --bar-background: #e2e1e0;\n  --bar-background-active: #a5a5a5;\n  --bar-border-radius: 4px;\n  --height: 42px;\n  --pin-background: #{nano-color(primary, base)};\n  --pin-color: #{nano-color(primary, contrast)};\n  --focus-style: 0 0 0 5px #{$control-focus-color};\n}\n\n.range-wrap {\n  display: flex;\n  position: relative;\n  flex: 3;\n  align-items: center;\n  user-select: none;\n\n  &::slotted(ion-icon[slot]),\n  ::slotted(ion-icon[slot]) {\n    font-size: 1.5em;\n  }\n\n  &::slotted([slot='start']),\n  ::slotted([slot='start']) {\n    @include margin(0, 14px, 0, 0);\n\n    font-size: 0.9em;\n  }\n\n  &::slotted([slot='end']),\n  ::slotted([slot='end']) {\n    @include margin(0, 0, 0, 14px);\n\n    font-size: 0.9em;\n  }\n}\n\n.range-slider {\n  position: relative;\n  flex: 1;\n  width: 100%;\n  height: var(--height);\n  contain: size layout style;\n  cursor: grab;\n  touch-action: pan-y;\n}\n\n:host(.range-pressed) .range-slider {\n  cursor: grabbing;\n}\n\n// bar\n\n.range-bar {\n  @include border-radius(var(--bar-border-radius));\n  @include position(\n    calc((var(--height) - var(--bar-height)) / 2),\n    null,\n    null,\n    0\n  );\n\n  :host(.range-snaps) & {\n    @include border-radius(\n      var(--bar-border-radius),\n      0,\n      0,\n      var(--bar-border-radius)\n    );\n  }\n\n  @include rtl() {\n    /* stylelint-disable-next-line property-blacklist */\n    left: unset;\n  }\n\n  position: absolute;\n  width: 100%;\n  height: var(--bar-height);\n  background: var(--bar-background);\n  pointer-events: none;\n}\n\n.range-bar-active {\n  bottom: 0;\n  width: auto;\n  background: var(--bar-background-active);\n\n  :host(.range-pressed) {\n    will-change: left, right;\n  }\n}\n\n// knob\n\n.range-knob {\n  @include border-radius(var(--knob-border-radius));\n  @include position(\n    calc(50% - var(--knob-size) / 2),\n    null,\n    null,\n    calc(50% - var(--knob-size) / 2)\n  );\n\n  @include rtl() {\n    /* stylelint-disable-next-line property-blacklist */\n    left: unset;\n  }\n\n  position: absolute;\n  width: var(--knob-size);\n  height: var(--knob-size);\n  background: var(--knob-background);\n  box-shadow: var(--knob-box-shadow);\n  z-index: 2;\n  pointer-events: none;\n  transform: scale(0.67);\n  transition-duration: 120ms;\n  transition-property: transform, background-color, border;\n  transition-timing-function: ease;\n\n  :host(:not(.range-has-pin)) .range-knob-pressed & {\n    transform: scale(1);\n  }\n}\n\n.range-knob-handle {\n  @include position(\n    calc((var(--height) - var(--knob-handle-size)) / 2),\n    null,\n    null,\n    0\n  );\n  @include margin-horizontal(calc(0px - var(--knob-handle-size) / 2), null);\n\n  @include rtl() {\n    /* stylelint-disable-next-line property-blacklist */\n    left: unset;\n  }\n\n  position: absolute;\n  width: calc(var(--knob-handle-size));\n  height: calc(var(--knob-handle-size));\n  text-align: center;\n\n  &:active,\n  &:focus {\n    outline: none;\n\n    .range-knob {\n      box-shadow: var(--knob-box-shadow), var(--focus-style);\n    }\n  }\n}\n\n// ticks\n\n.range-tick {\n  position: absolute;\n  top: calc((var(--height) - var(--bar-height)) / 2);\n  width: var(--bar-height);\n  height: var(--bar-height);\n  background: var(--bar-background-active);\n  z-index: 1;\n  pointer-events: none;\n\n  &:first-of-type {\n    @include border-radius(\n      var(--bar-border-radius),\n      0,\n      0,\n      var(--bar-border-radius)\n    );\n  }\n\n  &:last-of-type {\n    @include border-radius(\n      0,\n      var(--bar-border-radius),\n      var(--bar-border-radius),\n      0\n    );\n  }\n\n  &-active {\n    background: transparent;\n  }\n}\n\n// pin\n\n.range-pin {\n  transform: translate3d(0, 0, 0) scale(0.01);\n  transform-origin: center top;\n  padding: 0.66em 0;\n  border-radius: 50%;\n  text-align: center;\n  box-sizing: border-box;\n  display: inline-block;\n  position: relative;\n  min-width: 2.33em;\n  height: 2.33em;\n  transition: transform 120ms ease, background 120ms ease;\n  background: var(--pin-background);\n  color: var(--pin-color);\n  font-size: 0.75em;\n\n  &::before {\n    @include position(0.25em, null, null, 50%);\n\n    margin-left: -1.08em;\n\n    @include multi-dir() {\n      /* stylelint-disable-next-line property-blacklist */\n      border-radius: 50% 50% 50% 0;\n    }\n\n    @include rtl() {\n      /* stylelint-disable-next-line property-blacklist */\n      left: unset;\n    }\n\n    position: absolute;\n    width: 2.16em;\n    height: 2.16em;\n    transform: rotate(-45deg);\n    transition: background 120ms ease;\n    background: var(--pin-background);\n    content: '';\n    z-index: -1;\n  }\n\n  .range-knob-pressed & {\n    transform: translate3d(0, -50%, 0) scale(1);\n    transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);\n  }\n}\n\n// disabled\n\n:host(.range-disabled) {\n  pointer-events: none;\n\n  .range-bar-active,\n  .range-bar,\n  .range-tick {\n    background-color: rgba(var(--rgb-inactive), 0.5);\n  }\n\n  .range-knob {\n    transform: scale(0.55);\n    outline: 5px solid #fff;\n    background-color: rgba(var(--rgb-inactive), 0.5);\n  }\n}\n\n// theme\n\n:host(.nano-color) {\n  .range-bar-active,\n  .range-knob,\n  .range-pin,\n  .range-pin::before,\n  .range-tick {\n    background: current-color(base);\n    color: current-color(contrast);\n  }\n\n  .range-bar {\n    background: current-color(base, 0.26);\n  }\n\n  .range-knob-handle {\n    &:active,\n    &:focus {\n      .range-knob {\n        box-shadow: var(--knob-box-shadow), 0 0 0 5px current-color(tint, 0.56);\n      }\n    }\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport {\n  Color,\n  Gesture,\n  GestureDetail,\n  KnobName,\n  RangeChangeEventDetail,\n  RangeValue,\n  StyleEventDetail,\n} from '../../interface';\nimport { clamp, debounceEvent, renderHiddenInput } from '../../utils';\nimport { createColorClasses } from '../../utils/theme';\n\n/**\n * The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n *\n * Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n *\n * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n */\n@Component({\n  tag: 'nano-range',\n  styleUrl: 'range.scss',\n  scoped: true,\n})\nexport class Range implements ComponentInterface {\n  private noUpdate = false;\n  private rect!: ClientRect;\n  private hasFocus = false;\n  private rangeSlider?: HTMLElement;\n  private gesture?: Gesture;\n\n  @Element() el!: HTMLNanoRangeElement;\n\n  @State() private ratioA = 0;\n  @State() private ratioB = 0;\n  @State() private pressedKnob: KnobName;\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n   */\n  @Prop() color?: Color;\n\n  /**\n   * How long, in milliseconds, to wait to trigger the\n   * `nanoChange` event after each change in the range value.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n  }\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * Show two knobs.\n   */\n  @Prop() dualKnobs = false;\n\n  /**\n   * Minimum integer value of the range.\n   */\n  @Prop() min = 0;\n  @Watch('min')\n  protected minChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * Maximum integer value of the range.\n   */\n  @Prop() max = 100;\n  @Watch('max')\n  protected maxChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * If `true`, a pin with integer value is shown when the knob\n   * is pressed.\n   */\n  @Prop() pin = false;\n\n  /**\n   * If `true`, the knob snaps to tick marks evenly spaced based\n   * on the step property value.\n   */\n  @Prop() snaps = false;\n\n  /**\n   * Specifies the value granularity.\n   */\n  @Prop() step = 1;\n\n  /**\n   * If `true`, tick marks are displayed based on the step value.\n   * Only applies when `snaps` is `true`.\n   */\n  @Prop() ticks = false;\n\n  /**\n   * If `true`, the user cannot interact with the range.\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  protected disabledChanged() {\n    if (this.gesture) {\n      this.gesture.enable(!this.disabled);\n    }\n    this.emitStyle();\n  }\n\n  /**\n   * the value of the range.\n   */\n  @Prop({ mutable: true }) value: RangeValue = 0;\n  @Watch('value')\n  protected valueChanged(value: RangeValue) {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n\n    value = this.ensureValueInBounds(value);\n\n    this.nanoChange.emit({ value });\n  }\n\n  private clampBounds = (value: any): number => {\n    return clamp(this.min, value, this.max);\n  };\n\n  private ensureValueInBounds = (value: any) => {\n    if (this.dualKnobs) {\n      return {\n        lower: this.clampBounds(value.lower),\n        upper: this.clampBounds(value.upper),\n      };\n    } else {\n      return this.clampBounds(value);\n    }\n  };\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n  /**\n   * Emitted when the styles change.\n   * @internal\n   */\n  @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n  /**\n   * Emitted when the range has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the range loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    this.updateRatio();\n    this.debounceChanged();\n    this.disabledChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.gesture) {\n      this.gesture.destroy();\n      this.gesture = undefined;\n    }\n  }\n\n  async componentDidLoad() {\n    const rangeSlider = this.rangeSlider;\n    if (rangeSlider) {\n      this.gesture = (await import('../../utils/gesture/index')).createGesture({\n        el: rangeSlider,\n        gestureName: 'range',\n        gesturePriority: 100,\n        threshold: 0,\n        onStart: (ev) => this.onStart(ev),\n        onMove: (ev) => this.onMove(ev),\n        onEnd: (ev) => this.onEnd(ev),\n      });\n      this.gesture.enable(!this.disabled);\n    }\n  }\n\n  private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n    let step = this.step;\n    step = step > 0 ? step : 1;\n    step = step / (this.max - this.min);\n    if (!isIncrease) {\n      step *= -1;\n    }\n    if (knob === 'A') {\n      this.ratioA = clamp(0, this.ratioA + step, 1);\n    } else {\n      this.ratioB = clamp(0, this.ratioB + step, 1);\n    }\n    this.updateValue();\n  };\n\n  private getValue(): RangeValue {\n    const value = this.value || 0;\n    if (this.dualKnobs) {\n      if (typeof value === 'object') {\n        return value;\n      }\n      return {\n        lower: 0,\n        upper: value,\n      };\n    } else {\n      if (typeof value === 'object') {\n        return value.upper;\n      }\n      return value;\n    }\n  }\n\n  private emitStyle() {\n    this.nanoStyle.emit({\n      interactive: true,\n      'interactive-disabled': this.disabled,\n    });\n  }\n\n  private onStart(detail: GestureDetail) {\n    const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any);\n    const currentX = detail.currentX;\n\n    // figure out which knob they started closer to\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    this.pressedKnob =\n      !this.dualKnobs ||\n      Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n        ? 'A'\n        : 'B';\n\n    this.setFocus(this.pressedKnob);\n\n    // update the active knob's position\n    this.update(currentX);\n  }\n\n  private onMove(detail: GestureDetail) {\n    this.update(detail.currentX);\n  }\n\n  private onEnd(detail: GestureDetail) {\n    this.update(detail.currentX);\n    this.pressedKnob = undefined;\n  }\n\n  private update(currentX: number) {\n    // figure out where the pointer is currently at\n    // update the knob being interacted with\n    const rect = this.rect;\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    if (this.snaps) {\n      // snaps the ratio to the current value\n      ratio = valueToRatio(\n        ratioToValue(ratio, this.min, this.max, this.step),\n        this.min,\n        this.max\n      );\n    }\n\n    // update which knob is pressed\n    if (this.pressedKnob === 'A') {\n      this.ratioA = ratio;\n    } else {\n      this.ratioB = ratio;\n    }\n\n    // Update input value\n    this.updateValue();\n  }\n\n  private get valA() {\n    return ratioToValue(this.ratioA, this.min, this.max, this.step);\n  }\n\n  private get valB() {\n    return ratioToValue(this.ratioB, this.min, this.max, this.step);\n  }\n\n  private get ratioLower() {\n    if (this.dualKnobs) {\n      return Math.min(this.ratioA, this.ratioB);\n    }\n    return 0;\n  }\n\n  private get ratioUpper() {\n    if (this.dualKnobs) {\n      return Math.max(this.ratioA, this.ratioB);\n    }\n    return this.ratioA;\n  }\n\n  private updateRatio() {\n    const value = this.getValue() as any;\n    const { min, max } = this;\n    if (this.dualKnobs) {\n      this.ratioA = valueToRatio(value.lower, min, max);\n      this.ratioB = valueToRatio(value.upper, min, max);\n    } else {\n      this.ratioA = valueToRatio(value, min, max);\n    }\n  }\n\n  private updateValue() {\n    this.noUpdate = true;\n\n    const { valA, valB } = this;\n    this.value = !this.dualKnobs\n      ? valA\n      : {\n          lower: Math.min(valA, valB),\n          upper: Math.max(valA, valB),\n        };\n\n    this.noUpdate = false;\n  }\n\n  private setFocus(knob: KnobName) {\n    if (this.el.shadowRoot) {\n      const knobEl = this.el.shadowRoot.querySelector(\n        knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n      ) as HTMLElement | undefined;\n      if (knobEl) {\n        knobEl.focus();\n      }\n    }\n  }\n\n  private onBlur = () => {\n    if (this.hasFocus) {\n      this.hasFocus = false;\n      this.nanoBlur.emit();\n      this.emitStyle();\n    }\n  };\n\n  private onFocus = () => {\n    if (!this.hasFocus) {\n      this.hasFocus = true;\n      this.nanoFocus.emit();\n      this.emitStyle();\n    }\n  };\n\n  render() {\n    const {\n      min,\n      max,\n      step,\n      el,\n      handleKeyboard,\n      pressedKnob,\n      disabled,\n      pin,\n      ratioLower,\n      ratioUpper,\n    } = this;\n\n    const barStart = `${ratioLower * 100}%`;\n    const barEnd = `${100 - ratioUpper * 100}%`;\n\n    const doc = document;\n    const isRTL = doc.dir === 'rtl';\n    const start = isRTL ? 'right' : 'left';\n    const end = isRTL ? 'left' : 'right';\n\n    const tickStyle = (tick: any) => {\n      return {\n        [start]: tick[start],\n      };\n    };\n\n    const barStyle = {\n      [start]: barStart,\n      [end]: barEnd,\n    };\n\n    const ticks = [];\n    if (this.snaps && this.ticks) {\n      for (let value = min; value <= max; value += step) {\n        const ratio = valueToRatio(value, min, max);\n\n        const tick: any = {\n          ratio,\n          active: ratio >= ratioLower && ratio <= ratioUpper,\n        };\n\n        tick[start] = `${ratio * 100}%`;\n\n        ticks.push(tick);\n      }\n    }\n\n    renderHiddenInput(\n      true,\n      el,\n      this.name,\n      JSON.stringify(this.getValue()),\n      disabled\n    );\n\n    return (\n      <Host\n        onFocusin={this.onFocus}\n        onFocusout={this.onBlur}\n        class={createColorClasses(this.color, {\n          'range-disabled': disabled,\n          'range-pressed': pressedKnob !== undefined,\n          'range-has-pin': pin,\n          'range-snaps': this.snaps,\n        })}\n      >\n        <div class=\"range-wrap\">\n          <slot name=\"start\"></slot>\n          <div\n            class=\"range-slider\"\n            ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n          >\n            {ticks.map((tick) => (\n              <span\n                style={tickStyle(tick)}\n                role=\"presentation\"\n                class={{\n                  'range-tick': true,\n                  'range-tick-active': tick.active,\n                }}\n                part={tick.active ? 'tick-active' : 'tick'}\n              />\n            ))}\n\n            <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n            <div\n              class=\"range-bar range-bar-active\"\n              role=\"presentation\"\n              style={barStyle}\n              part=\"bar-active\"\n            />\n\n            {renderKnob(isRTL, {\n              knob: 'A',\n              pressed: pressedKnob === 'A',\n              value: this.valA,\n              ratio: this.ratioA,\n              pin,\n              disabled,\n              handleKeyboard,\n              min,\n              max,\n            })}\n\n            {this.dualKnobs &&\n              renderKnob(isRTL, {\n                knob: 'B',\n                pressed: pressedKnob === 'B',\n                value: this.valB,\n                ratio: this.ratioB,\n                pin,\n                disabled,\n                handleKeyboard,\n                min,\n                max,\n              })}\n          </div>\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\ninterface RangeKnob {\n  knob: KnobName;\n  value: number;\n  ratio: number;\n  min: number;\n  max: number;\n  disabled: boolean;\n  pressed: boolean;\n  pin: boolean;\n\n  handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n  isRTL: boolean,\n  {\n    knob,\n    value,\n    ratio,\n    min,\n    max,\n    disabled,\n    pressed,\n    pin,\n    handleKeyboard,\n  }: RangeKnob\n) => {\n  const start = isRTL ? 'right' : 'left';\n\n  const knobStyle = () => {\n    const style: any = {};\n    style[start] = `${ratio * 100}%`;\n    return style;\n  };\n\n  return (\n    <div\n      onKeyDown={(ev: KeyboardEvent) => {\n        const key = ev.key;\n        if (key === 'ArrowLeft' || key === 'ArrowDown') {\n          handleKeyboard(knob, false);\n          ev.preventDefault();\n          ev.stopPropagation();\n        } else if (key === 'ArrowRight' || key === 'ArrowUp') {\n          handleKeyboard(knob, true);\n          ev.preventDefault();\n          ev.stopPropagation();\n        }\n      }}\n      class={{\n        'range-knob-handle': true,\n        'range-knob-a': knob === 'A',\n        'range-knob-b': knob === 'B',\n        'range-knob-pressed': pressed,\n        'range-knob-min': value === min,\n        'range-knob-max': value === max,\n      }}\n      style={knobStyle()}\n      role=\"slider\"\n      tabindex={disabled ? -1 : 0}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-disabled={disabled ? 'true' : null}\n      aria-valuenow={value}\n    >\n      {pin && (\n        <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n          {Math.round(value)}\n        </div>\n      )}\n      <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n    </div>\n  );\n};\n\nconst ratioToValue = (\n  ratio: number,\n  min: number,\n  max: number,\n  step: number\n): number => {\n  let value = (max - min) * ratio;\n  if (step > 0) {\n    value = Math.round(value / step) * step + min;\n  }\n  return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n  return clamp(0, (value - min) / (max - min), 1);\n};\n"]}
+{"version":3,"sources":["src/components/range/range.scss?tag=nano-range&encapsulation=scoped","src/components/range/range.tsx"],"names":["rangeCss","Range","[object Object]","hostRef","this","noUpdate","hasFocus","ratioA","ratioB","debounce","name","dualKnobs","min","max","pin","snaps","step","ticks","disabled","value","clampBounds","clamp","ensureValueInBounds","lower","upper","handleKeyboard","knob","isIncrease","updateValue","onBlur","nanoBlur","emit","emitStyle","onFocus","nanoFocus","nanoChange","debounceEvent","updateRatio","gesture","enable","debounceChanged","disabledChanged","destroy","undefined","rangeSlider","__sc_import_nano_components","createGesture","el","gestureName","gesturePriority","threshold","onStart","ev","onMove","onEnd","nanoStyle","interactive","interactive-disabled","detail","rect","getBoundingClientRect","currentX","ratio","left","width","document","dir","pressedKnob","Math","abs","setFocus","update","valueToRatio","ratioToValue","valA","valB","ratioLower","ratioUpper","getValue","shadowRoot","knobEl","querySelector","focus","barStart","barEnd","doc","isRTL","start","end","tickStyle","tick","barStyle","active","push","renderHiddenInput","JSON","stringify","h","Host","onFocusin","onFocusout","class","createColorClasses","color","range-disabled","range-pressed","range-has-pin","range-snaps","ref","rangeEl","map","style","role","range-tick","range-tick-active","part","renderKnob","pressed","knobStyle","onKeyDown","key","preventDefault","stopPropagation","range-knob-handle","range-knob-a","range-knob-b","range-knob-pressed","range-knob-min","range-knob-max","tabindex","aria-valuemin","aria-valuemax","aria-disabled","aria-valuenow","round"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n// Range\n// --------------------------------------------------\n\n:host {\n  /**\n   * @prop --knob-handle-size: defaults to calc(var(--knob-size) * 2);\n   * @prop --rgb-inactive: defaults to #{color-to-rgb-list(#a5a5a5)};\n   * @prop --bar-background: Background of the range bar; Defaults to #e2e1e0;\n   * @prop --bar-background-active: Background of the active range bar; Defaults to #a5a5a5;\n   * @prop --bar-height: Height of the range bar; Defaults to 8px;\n   * @prop --bar-border-radius: Border radius of the range bar; Defaults to 4px;\n   * @prop --height: Height of the range. Defaults to 42px;\n   * @prop --knob-background: Background of the range knob. Defaults to #{nano-color(primary, base)};\n   * @prop --knob-border-radius: Border radius of the range knob. Defaults to 50%;\n   * @prop --knob-box-shadow: Box shadow of the range knob; Defaults to 0 2px 4px 0 rgba(0, 0, 0, 0.3);\n   * @prop --knob-size: Size of the range knob; Defaults to 30px;\n   * @prop --pin-background: Background of the range pin; Defaults to #{nano-color(primary, base)};\n   * @prop --pin-color: Color of the range pin; Defaults to #{nano-color(primary, contrast)};\n   * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{$control-focus-color};\n   */\n  --knob-handle-size: (var(--knob-size) * 2);\n  --rgb-inactive: #{color-to-rgb-list(#a5a5a5)};\n  --knob-border-radius: 50%;\n  --knob-background: #{nano-color(primary, base)};\n  --knob-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);\n  --knob-size: 30px;\n  --bar-height: 8px;\n  --bar-background: #e2e1e0;\n  --bar-background-active: #a5a5a5;\n  --bar-border-radius: 4px;\n  --height: 42px;\n  --pin-background: #{nano-color(primary, base)};\n  --pin-color: #{nano-color(primary, contrast)};\n  --focus-style: 0 0 0 5px #{$control-focus-color};\n}\n\n.range-wrap {\n  display: flex;\n  position: relative;\n  flex: 3;\n  align-items: center;\n  user-select: none;\n\n  &::slotted(ion-icon[slot]),\n  ::slotted(ion-icon[slot]) {\n    font-size: 1.5em;\n  }\n\n  &::slotted([slot='start']),\n  ::slotted([slot='start']) {\n    @include margin(0, 14px, 0, 0);\n\n    font-size: 0.9em;\n  }\n\n  &::slotted([slot='end']),\n  ::slotted([slot='end']) {\n    @include margin(0, 0, 0, 14px);\n\n    font-size: 0.9em;\n  }\n}\n\n.range-slider {\n  position: relative;\n  flex: 1;\n  width: 100%;\n  height: var(--height);\n  contain: size layout style;\n  cursor: grab;\n  touch-action: pan-y;\n}\n\n:host(.range-pressed) .range-slider {\n  cursor: grabbing;\n}\n\n// bar\n\n.range-bar {\n  @include border-radius(var(--bar-border-radius));\n  @include position(\n    calc((var(--height) - var(--bar-height)) / 2),\n    null,\n    null,\n    0\n  );\n\n  :host(.range-snaps) & {\n    @include border-radius(\n      var(--bar-border-radius),\n      0,\n      0,\n      var(--bar-border-radius)\n    );\n  }\n\n  @include rtl() {\n    /* stylelint-disable-next-line property-blacklist */\n    left: unset;\n  }\n\n  position: absolute;\n  width: 100%;\n  height: var(--bar-height);\n  background: var(--bar-background);\n  pointer-events: none;\n}\n\n.range-bar-active {\n  bottom: 0;\n  width: auto;\n  background: var(--bar-background-active);\n\n  :host(.range-pressed) {\n    will-change: left, right;\n  }\n}\n\n// knob\n\n.range-knob {\n  @include border-radius(var(--knob-border-radius));\n  @include position(\n    calc(50% - var(--knob-size) / 2),\n    null,\n    null,\n    calc(50% - var(--knob-size) / 2)\n  );\n\n  @include rtl() {\n    /* stylelint-disable-next-line property-blacklist */\n    left: unset;\n  }\n\n  position: absolute;\n  width: var(--knob-size);\n  height: var(--knob-size);\n  background: var(--knob-background);\n  box-shadow: var(--knob-box-shadow);\n  z-index: 2;\n  pointer-events: none;\n  transform: scale(0.67);\n  transition-duration: 120ms;\n  transition-property: transform, background-color, border;\n  transition-timing-function: ease;\n\n  :host(:not(.range-has-pin)) .range-knob-pressed & {\n    transform: scale(1);\n  }\n}\n\n.range-knob-handle {\n  @include position(\n    calc((var(--height) - var(--knob-handle-size)) / 2),\n    null,\n    null,\n    0\n  );\n  @include margin-horizontal(calc(0px - var(--knob-handle-size) / 2), null);\n\n  @include rtl() {\n    /* stylelint-disable-next-line property-blacklist */\n    left: unset;\n  }\n\n  position: absolute;\n  width: calc(var(--knob-handle-size));\n  height: calc(var(--knob-handle-size));\n  text-align: center;\n\n  &:active,\n  &:focus {\n    outline: none;\n\n    .range-knob {\n      box-shadow: var(--knob-box-shadow), var(--focus-style);\n    }\n  }\n}\n\n// ticks\n\n.range-tick {\n  position: absolute;\n  top: calc((var(--height) - var(--bar-height)) / 2);\n  width: var(--bar-height);\n  height: var(--bar-height);\n  background: var(--bar-background-active);\n  z-index: 1;\n  pointer-events: none;\n\n  &:first-of-type {\n    @include border-radius(\n      var(--bar-border-radius),\n      0,\n      0,\n      var(--bar-border-radius)\n    );\n  }\n\n  &:last-of-type {\n    @include border-radius(\n      0,\n      var(--bar-border-radius),\n      var(--bar-border-radius),\n      0\n    );\n  }\n\n  &-active {\n    background: transparent;\n  }\n}\n\n// pin\n\n.range-pin {\n  transform: translate3d(0, 0, 0) scale(0.01);\n  transform-origin: center top;\n  padding: 0.66em 0;\n  border-radius: 50%;\n  text-align: center;\n  box-sizing: border-box;\n  display: inline-block;\n  position: relative;\n  min-width: 2.33em;\n  height: 2.33em;\n  transition: transform 120ms ease, background 120ms ease;\n  background: var(--pin-background);\n  color: var(--pin-color);\n  font-size: 0.75em;\n\n  &::before {\n    @include position(0.25em, null, null, 50%);\n\n    margin-left: -1.08em;\n\n    @include multi-dir() {\n      /* stylelint-disable-next-line property-blacklist */\n      border-radius: 50% 50% 50% 0;\n    }\n\n    @include rtl() {\n      /* stylelint-disable-next-line property-blacklist */\n      left: unset;\n    }\n\n    position: absolute;\n    width: 2.16em;\n    height: 2.16em;\n    transform: rotate(-45deg);\n    transition: background 120ms ease;\n    background: var(--pin-background);\n    content: '';\n    z-index: -1;\n  }\n\n  .range-knob-pressed & {\n    transform: translate3d(0, -50%, 0) scale(1);\n    transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);\n  }\n}\n\n// disabled\n\n:host(.range-disabled) {\n  pointer-events: none;\n\n  .range-bar-active,\n  .range-bar,\n  .range-tick {\n    background-color: rgba(var(--rgb-inactive), 0.5);\n  }\n\n  .range-knob {\n    transform: scale(0.55);\n    outline: 5px solid #fff;\n    background-color: rgba(var(--rgb-inactive), 0.5);\n  }\n}\n\n// theme\n\n:host(.nano-color) {\n  .range-bar-active,\n  .range-knob,\n  .range-pin,\n  .range-pin::before,\n  .range-tick {\n    background: current-color(base);\n    color: current-color(contrast);\n  }\n\n  .range-bar {\n    background: current-color(base, 0.26);\n  }\n\n  .range-knob-handle {\n    &:active,\n    &:focus {\n      .range-knob {\n        box-shadow: var(--knob-box-shadow), 0 0 0 5px current-color(tint, 0.56);\n      }\n    }\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport {\n  Color,\n  Gesture,\n  GestureDetail,\n  KnobName,\n  RangeChangeEventDetail,\n  RangeValue,\n  StyleEventDetail,\n} from '../../interface';\nimport { clamp, debounceEvent, renderHiddenInput } from '../../utils';\nimport { createColorClasses } from '../../utils/theme';\n\n/**\n * The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n *\n * Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n *\n * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n */\n@Component({\n  tag: 'nano-range',\n  styleUrl: 'range.scss',\n  scoped: true,\n})\nexport class Range implements ComponentInterface {\n  private noUpdate = false;\n  private rect!: ClientRect;\n  private hasFocus = false;\n  private rangeSlider?: HTMLElement;\n  private gesture?: Gesture;\n\n  @Element() el!: HTMLNanoRangeElement;\n\n  @State() private ratioA = 0;\n  @State() private ratioB = 0;\n  @State() private pressedKnob: KnobName;\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n   */\n  @Prop() color?: Color;\n\n  /**\n   * How long, in milliseconds, to wait to trigger the\n   * `nanoChange` event after each change in the range value.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n  }\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * Show two knobs.\n   */\n  @Prop() dualKnobs = false;\n\n  /**\n   * Minimum integer value of the range.\n   */\n  @Prop() min = 0;\n  @Watch('min')\n  protected minChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * Maximum integer value of the range.\n   */\n  @Prop() max = 100;\n  @Watch('max')\n  protected maxChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * If `true`, a pin with integer value is shown when the knob\n   * is pressed.\n   */\n  @Prop() pin = false;\n\n  /**\n   * If `true`, the knob snaps to tick marks evenly spaced based\n   * on the step property value.\n   */\n  @Prop() snaps = false;\n\n  /**\n   * Specifies the value granularity.\n   */\n  @Prop() step = 1;\n\n  /**\n   * If `true`, tick marks are displayed based on the step value.\n   * Only applies when `snaps` is `true`.\n   */\n  @Prop() ticks = false;\n\n  /**\n   * If `true`, the user cannot interact with the range.\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  protected disabledChanged() {\n    if (this.gesture) {\n      this.gesture.enable(!this.disabled);\n    }\n    this.emitStyle();\n  }\n\n  /**\n   * the value of the range.\n   */\n  @Prop({ mutable: true }) value: RangeValue = 0;\n  @Watch('value')\n  protected valueChanged(value: RangeValue) {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n\n    value = this.ensureValueInBounds(value);\n\n    this.nanoChange.emit({ value });\n  }\n\n  private clampBounds = (value: any): number => {\n    return clamp(this.min, value, this.max);\n  };\n\n  private ensureValueInBounds = (value: any) => {\n    if (this.dualKnobs) {\n      return {\n        lower: this.clampBounds(value.lower),\n        upper: this.clampBounds(value.upper),\n      };\n    } else {\n      return this.clampBounds(value);\n    }\n  };\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n  /**\n   * Emitted when the styles change.\n   * @internal\n   */\n  @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n  /**\n   * Emitted when the range has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the range loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    this.updateRatio();\n    this.debounceChanged();\n    this.disabledChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.gesture) {\n      this.gesture.destroy();\n      this.gesture = undefined;\n    }\n  }\n\n  async componentDidLoad() {\n    const rangeSlider = this.rangeSlider;\n    if (rangeSlider) {\n      this.gesture = (await import('../../utils/gesture/index')).createGesture({\n        el: rangeSlider,\n        gestureName: 'range',\n        gesturePriority: 100,\n        threshold: 0,\n        onStart: (ev) => this.onStart(ev),\n        onMove: (ev) => this.onMove(ev),\n        onEnd: (ev) => this.onEnd(ev),\n      });\n      this.gesture.enable(!this.disabled);\n    }\n  }\n\n  private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n    let step = this.step;\n    step = step > 0 ? step : 1;\n    step = step / (this.max - this.min);\n    if (!isIncrease) {\n      step *= -1;\n    }\n    if (knob === 'A') {\n      this.ratioA = clamp(0, this.ratioA + step, 1);\n    } else {\n      this.ratioB = clamp(0, this.ratioB + step, 1);\n    }\n    this.updateValue();\n  };\n\n  private getValue(): RangeValue {\n    const value = this.value || 0;\n    if (this.dualKnobs) {\n      if (typeof value === 'object') {\n        return value;\n      }\n      return {\n        lower: 0,\n        upper: value,\n      };\n    } else {\n      if (typeof value === 'object') {\n        return value.upper;\n      }\n      return value;\n    }\n  }\n\n  private emitStyle() {\n    this.nanoStyle.emit({\n      interactive: true,\n      'interactive-disabled': this.disabled,\n    });\n  }\n\n  private onStart(detail: GestureDetail) {\n    const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any);\n    const currentX = detail.currentX;\n\n    // figure out which knob they started closer to\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    this.pressedKnob =\n      !this.dualKnobs ||\n      Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n        ? 'A'\n        : 'B';\n\n    this.setFocus(this.pressedKnob);\n\n    // update the active knob's position\n    this.update(currentX);\n  }\n\n  private onMove(detail: GestureDetail) {\n    this.update(detail.currentX);\n  }\n\n  private onEnd(detail: GestureDetail) {\n    this.update(detail.currentX);\n    this.pressedKnob = undefined;\n  }\n\n  private update(currentX: number) {\n    // figure out where the pointer is currently at\n    // update the knob being interacted with\n    const rect = this.rect;\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    if (this.snaps) {\n      // snaps the ratio to the current value\n      ratio = valueToRatio(\n        ratioToValue(ratio, this.min, this.max, this.step),\n        this.min,\n        this.max\n      );\n    }\n\n    // update which knob is pressed\n    if (this.pressedKnob === 'A') {\n      this.ratioA = ratio;\n    } else {\n      this.ratioB = ratio;\n    }\n\n    // Update input value\n    this.updateValue();\n  }\n\n  private get valA() {\n    return ratioToValue(this.ratioA, this.min, this.max, this.step);\n  }\n\n  private get valB() {\n    return ratioToValue(this.ratioB, this.min, this.max, this.step);\n  }\n\n  private get ratioLower() {\n    if (this.dualKnobs) {\n      return Math.min(this.ratioA, this.ratioB);\n    }\n    return 0;\n  }\n\n  private get ratioUpper() {\n    if (this.dualKnobs) {\n      return Math.max(this.ratioA, this.ratioB);\n    }\n    return this.ratioA;\n  }\n\n  private updateRatio() {\n    const value = this.getValue() as any;\n    const { min, max } = this;\n    if (this.dualKnobs) {\n      this.ratioA = valueToRatio(value.lower, min, max);\n      this.ratioB = valueToRatio(value.upper, min, max);\n    } else {\n      this.ratioA = valueToRatio(value, min, max);\n    }\n  }\n\n  private updateValue() {\n    this.noUpdate = true;\n\n    const { valA, valB } = this;\n    this.value = !this.dualKnobs\n      ? valA\n      : {\n          lower: Math.min(valA, valB),\n          upper: Math.max(valA, valB),\n        };\n\n    this.noUpdate = false;\n  }\n\n  private setFocus(knob: KnobName) {\n    if (this.el.shadowRoot) {\n      const knobEl = this.el.shadowRoot.querySelector(\n        knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n      ) as HTMLElement | undefined;\n      if (knobEl) {\n        knobEl.focus();\n      }\n    }\n  }\n\n  private onBlur = () => {\n    if (this.hasFocus) {\n      this.hasFocus = false;\n      this.nanoBlur.emit();\n      this.emitStyle();\n    }\n  };\n\n  private onFocus = () => {\n    if (!this.hasFocus) {\n      this.hasFocus = true;\n      this.nanoFocus.emit();\n      this.emitStyle();\n    }\n  };\n\n  render() {\n    const {\n      min,\n      max,\n      step,\n      el,\n      handleKeyboard,\n      pressedKnob,\n      disabled,\n      pin,\n      ratioLower,\n      ratioUpper,\n    } = this;\n\n    const barStart = `${ratioLower * 100}%`;\n    const barEnd = `${100 - ratioUpper * 100}%`;\n\n    const doc = document;\n    const isRTL = doc.dir === 'rtl';\n    const start = isRTL ? 'right' : 'left';\n    const end = isRTL ? 'left' : 'right';\n\n    const tickStyle = (tick: any) => {\n      return {\n        [start]: tick[start],\n      };\n    };\n\n    const barStyle = {\n      [start]: barStart,\n      [end]: barEnd,\n    };\n\n    const ticks = [];\n    if (this.snaps && this.ticks) {\n      for (let value = min; value <= max; value += step) {\n        const ratio = valueToRatio(value, min, max);\n\n        const tick: any = {\n          ratio,\n          active: ratio >= ratioLower && ratio <= ratioUpper,\n        };\n\n        tick[start] = `${ratio * 100}%`;\n\n        ticks.push(tick);\n      }\n    }\n\n    renderHiddenInput(\n      true,\n      el,\n      this.name,\n      JSON.stringify(this.getValue()),\n      disabled\n    );\n\n    return (\n      <Host\n        onFocusin={this.onFocus}\n        onFocusout={this.onBlur}\n        class={createColorClasses(this.color, {\n          'range-disabled': disabled,\n          'range-pressed': pressedKnob !== undefined,\n          'range-has-pin': pin,\n          'range-snaps': this.snaps,\n        })}\n      >\n        <div class=\"range-wrap\">\n          <slot name=\"start\"></slot>\n          <div\n            class=\"range-slider\"\n            ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n          >\n            {ticks.map((tick) => (\n              <span\n                style={tickStyle(tick)}\n                role=\"presentation\"\n                class={{\n                  'range-tick': true,\n                  'range-tick-active': tick.active,\n                }}\n                part={tick.active ? 'tick-active' : 'tick'}\n              />\n            ))}\n\n            <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n            <div\n              class=\"range-bar range-bar-active\"\n              role=\"presentation\"\n              style={barStyle}\n              part=\"bar-active\"\n            />\n\n            {renderKnob(isRTL, {\n              knob: 'A',\n              pressed: pressedKnob === 'A',\n              value: this.valA,\n              ratio: this.ratioA,\n              pin,\n              disabled,\n              handleKeyboard,\n              min,\n              max,\n            })}\n\n            {this.dualKnobs &&\n              renderKnob(isRTL, {\n                knob: 'B',\n                pressed: pressedKnob === 'B',\n                value: this.valB,\n                ratio: this.ratioB,\n                pin,\n                disabled,\n                handleKeyboard,\n                min,\n                max,\n              })}\n          </div>\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\ninterface RangeKnob {\n  knob: KnobName;\n  value: number;\n  ratio: number;\n  min: number;\n  max: number;\n  disabled: boolean;\n  pressed: boolean;\n  pin: boolean;\n\n  handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n  isRTL: boolean,\n  {\n    knob,\n    value,\n    ratio,\n    min,\n    max,\n    disabled,\n    pressed,\n    pin,\n    handleKeyboard,\n  }: RangeKnob\n) => {\n  const start = isRTL ? 'right' : 'left';\n\n  const knobStyle = () => {\n    const style: any = {};\n    style[start] = `${ratio * 100}%`;\n    return style;\n  };\n\n  return (\n    <div\n      onKeyDown={(ev: KeyboardEvent) => {\n        const key = ev.key;\n        if (key === 'ArrowLeft' || key === 'ArrowDown') {\n          handleKeyboard(knob, false);\n          ev.preventDefault();\n          ev.stopPropagation();\n        } else if (key === 'ArrowRight' || key === 'ArrowUp') {\n          handleKeyboard(knob, true);\n          ev.preventDefault();\n          ev.stopPropagation();\n        }\n      }}\n      class={{\n        'range-knob-handle': true,\n        'range-knob-a': knob === 'A',\n        'range-knob-b': knob === 'B',\n        'range-knob-pressed': pressed,\n        'range-knob-min': value === min,\n        'range-knob-max': value === max,\n      }}\n      style={knobStyle()}\n      role=\"slider\"\n      tabindex={disabled ? -1 : 0}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-disabled={disabled ? 'true' : null}\n      aria-valuenow={value}\n    >\n      {pin && (\n        <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n          {Math.round(value)}\n        </div>\n      )}\n      <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n    </div>\n  );\n};\n\nconst ratioToValue = (\n  ratio: number,\n  min: number,\n  max: number,\n  step: number\n): number => {\n  let value = (max - min) * ratio;\n  if (step > 0) {\n    value = Math.round(value / step) * step + min;\n  }\n  return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n  return clamp(0, (value - min) / (max - min), 1);\n};\n"]}

package/dist/nano-components/{p-60c9b580.system.js → p-3258c568.system.js}

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(n,t,e,r){function o(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,i){function a(n){try{s(r.next(n))}catch(t){i(t)}}function c(n){try{s(r["throw"](n))}catch(t){i(t)}}function s(n){n.done?e(n.value):o(n.value).then(a,c)}s((r=r.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var e={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,o,i,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(n){return function(t){return s([n,t])}}function s(a){if(r)throw new TypeError("Generator is already executing.");while(e)try{if(r=1,o&&(i=a[0]&2?o["return"]:a[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,a[1])).done)return i;if(o=0,i)a=[a[0]&2,i.value];switch(a[0]){case 0:case 1:i=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;o=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(i=e.trys,i=i.length>0&&i[i.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!i||a[1]>i[0]&&a[1]<i[3])){e.label=a[1];break}if(a[0]===6&&e.label<i[1]){e.label=i[1];i=a;break}if(i&&e.label<i[2]){e.label=i[2];e.ops.push(a);break}if(i[2])e.ops.pop();e.trys.pop();continue}a=t.call(n,e)}catch(c){a=[6,c];o=0}finally{r=i=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};
 /*!
  * Web Components for Nanopore digital Web Apps
- */System.register(["./p-b86fc6b7.system.js","./p-ef053a2f.system.js"],(function(n){"use strict";var t;return{setters:[function(e){t=e.r;n("nanoRaf",e.r)},function(t){var e={};e.nanoDebounce=t.d;e.nanoThrottle=t.t;n(e)}],execute:function(){n({nanoCreateDialog:a,nanoShowAlert:i,nanoShowToast:o});var e=function(n,t){if(t===void 0){t=[]}return n+"\n    "+(t.length?t.map((function(n,t){return'<button data-btn="'+t+'" class="button '+n.classes+'" slot="footer">'+n.content+"</button>"})).join(""):"")};var r=function(n,t){if(t===void 0){t=[]}if(t.length){Array.from(n.querySelectorAll('button[slot="footer"]')).map((function(n){var e=t.find((function(t,e){return n.dataset.btn===e.toString()}));if(e&&e.handler){n.addEventListener("click",e.handler)}}))}};function o(n,o,i,a,c){if(o===void 0){o="tr"}if(c===void 0){c=[]}return __awaiter(this,void 0,void 0,(function(){var s,u;var l=this;return __generator(this,(function(f){s=Object.assign({color:"primary",duration:3e3,closable:true},a);i=i||"light/info-circle";u=Object.assign(document.createElement("nano-alert"),Object.assign(Object.assign({},s),{open:false,innerHTML:'\n        <nano-icon name="'+i+'" slot="icon"></nano-icon>\n        '+e(n,c)+"\n      "}));r(u,c);document.body.appendChild(u);return[2,new Promise((function(n){t((function(t){return __awaiter(l,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,u.toast(o)];case 1:t.sent();n(u);return[2]}}))}))}))}))]}))}))}function i(n,o,i,a,c){var s=this;if(o===void 0){o=[]}if(a===void 0){a="light/info-circle"}if(c===void 0){c={}}var u=Object.assign({color:"primary",duration:Infinity,closable:false},c);a=a||"light/info-circle";var l=Object.assign(document.createElement("nano-alert"),Object.assign(Object.assign({},u),{open:false,innerHTML:"\n        "+(a?'<nano-icon name="'+a+'" slot="icon"></nano-icon>':"")+"\n        "+e(n,o)+"\n      "}));r(l,o);document.body.appendChild(l);return new Promise((function(n){t((function(t){return __awaiter(s,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,l.alert(i)];case 1:t.sent();n(l);return[2]}}))}))}))}))}function a(n,t,e){if(t===void 0){t=[]}var r=Object.assign({noUserDismiss:false,label:"Dialog"},e);var o=Object.assign(document.createElement("nano-dialog"),Object.assign(Object.assign({},r),{open:false,innerHTML:"\n      "+n+"\n      "+(t.length?t.map((function(n,t){return'<button data-btn="'+t+'" class="button '+n.classes+'" slot="footer">'+n.content+"</button>"})).join(""):"")}));if(t.length){Array.from(o.querySelectorAll('button[slot="footer"]')).map((function(n){var e=t.find((function(t,e){return n.dataset.btn===e.toString()}));if(e&&e.handler){n.addEventListener("click",e.handler)}}))}document.body.appendChild(o);return o}}}}));
-//# sourceMappingURL=p-60c9b580.system.js.map
+ */System.register(["./p-1c216ca4.system.js","./p-ef053a2f.system.js"],(function(n){"use strict";var t;return{setters:[function(e){t=e.r;n("nanoRaf",e.r)},function(t){var e={};e.nanoDebounce=t.d;e.nanoThrottle=t.t;n(e)}],execute:function(){n({nanoCreateDialog:a,nanoShowAlert:i,nanoShowToast:o});var e=function(n,t){if(t===void 0){t=[]}return n+"\n    "+(t.length?t.map((function(n,t){return'<button data-btn="'+t+'" class="button '+n.classes+'" slot="footer">'+n.content+"</button>"})).join(""):"")};var r=function(n,t){if(t===void 0){t=[]}if(t.length){Array.from(n.querySelectorAll('button[slot="footer"]')).map((function(n){var e=t.find((function(t,e){return n.dataset.btn===e.toString()}));if(e&&e.handler){n.addEventListener("click",e.handler)}}))}};function o(n,o,i,a,c){if(o===void 0){o="tr"}if(c===void 0){c=[]}return __awaiter(this,void 0,void 0,(function(){var s,u;var l=this;return __generator(this,(function(f){s=Object.assign({color:"primary",duration:3e3,closable:true},a);i=i||"light/info-circle";u=Object.assign(document.createElement("nano-alert"),Object.assign(Object.assign({},s),{open:false,innerHTML:'\n        <nano-icon name="'+i+'" slot="icon"></nano-icon>\n        '+e(n,c)+"\n      "}));r(u,c);document.body.appendChild(u);return[2,new Promise((function(n){t((function(t){return __awaiter(l,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,u.toast(o)];case 1:t.sent();n(u);return[2]}}))}))}))}))]}))}))}function i(n,t,o,i,a){var c=this;if(t===void 0){t=[]}if(i===void 0){i="light/info-circle"}if(a===void 0){a={}}var s=Object.assign({color:"primary",duration:Infinity,closable:false},a);i=i||"light/info-circle";var u=Object.assign(document.createElement("nano-alert"),Object.assign(Object.assign({},s),{open:false,innerHTML:"\n        "+(i?'<nano-icon name="'+i+'" slot="icon"></nano-icon>':"")+"\n        "+e(n,t)+"\n      "}));r(u,t);document.body.appendChild(u);return new Promise((function(n){setTimeout((function(t){return __awaiter(c,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,u.alert(o)];case 1:t.sent();n(u);return[2]}}))}))}),100)}))}function a(n,t,e){if(t===void 0){t=[]}var r=Object.assign({noUserDismiss:false,label:"Dialog"},e);var o=Object.assign(document.createElement("nano-dialog"),Object.assign(Object.assign({},r),{open:false,innerHTML:"\n      "+n+"\n      "+(t.length?t.map((function(n,t){return'<button data-btn="'+t+'" class="button '+n.classes+'" slot="footer">'+n.content+"</button>"})).join(""):"")}));if(t.length){Array.from(o.querySelectorAll('button[slot="footer"]')).map((function(n){var e=t.find((function(t,e){return n.dataset.btn===e.toString()}));if(e&&e.handler){n.addEventListener("click",e.handler)}}))}document.body.appendChild(o);return o}}}}));
+//# sourceMappingURL=p-3258c568.system.js.map

package/dist/nano-components/p-3258c568.system.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/alert/alert.helpers.ts","src/components/dialog/dialog.helpers.ts"],"names":["alertContent","message","buttons","length","map","btn","i","classes","content","join","addBtnHandlers","alert","Array","from","querySelectorAll","foundBtn","find","_fb","dataset","toString","handler","addEventListener","nanoShowToast","position","icon","alertOptions","opts","Object","assign","color","duration","closable","document","createElement","open","innerHTML","body","appendChild","Promise","resolve","raf","_","__awaiter","_this","toast","_a","sent","nanoShowAlert","label","Infinity","setTimeout","nanoCreateDialog","dialogOptions","noUserDismiss","dialog"],"mappings":"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","sourcesContent":["import { Color, AlertToastPosition } from '../../interface';\nimport { raf } from '../../utils';\n\ninterface ImperativeAlertOptions {\n  color?: Color;\n  duration?: number;\n  closable?: boolean;\n}\n\ninterface ImperativeAlertButton {\n  classes: string;\n  content: string;\n  handler?: (e: MouseEvent) => void;\n}\n\nconst alertContent = (\n  message: string,\n  buttons: ImperativeAlertButton[] = []\n) => {\n  return `${message}\n    ${\n      buttons.length\n        ? buttons\n            .map(\n              (btn, i) =>\n                `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n            )\n            .join('')\n        : ''\n    }`;\n};\n\nconst addBtnHandlers = (\n  alert: HTMLNanoAlertElement,\n  buttons: ImperativeAlertButton[] = []\n) => {\n  if (buttons.length) {\n    Array.from(alert.querySelectorAll('button[slot=\"footer\"]')).map(\n      (btn: HTMLElement) => {\n        const foundBtn = buttons.find(\n          (_fb, i) => btn.dataset.btn === i.toString()\n        );\n        if (foundBtn && foundBtn.handler) {\n          btn.addEventListener('click', foundBtn.handler);\n        }\n      }\n    );\n  }\n};\n\n/**\n * `nano-alert` helper to create toast notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param position - the position of the toast. Options are 'tr', 'tl', 'bl' & 'br'\n * @param icon - name for the `nano-icon`\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n */\nexport async function nanoShowToast(\n  message: string,\n  position: AlertToastPosition = 'tr',\n  icon?: string | undefined,\n  alertOptions?: ImperativeAlertOptions,\n  buttons: ImperativeAlertButton[] = []\n) {\n  const opts: ImperativeAlertOptions = {\n    color: 'primary',\n    duration: 3000,\n    closable: true,\n    ...alertOptions,\n  };\n  icon = icon || 'light/info-circle';\n  const alert: HTMLNanoAlertElement = Object.assign(\n    document.createElement('nano-alert'),\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n        <nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>\n        ${alertContent(message, buttons)}\n      `,\n    }\n  );\n  addBtnHandlers(alert, buttons);\n\n  document.body.appendChild(alert);\n  return new Promise<HTMLNanoAlertElement>((resolve) => {\n    raf(async (_) => {\n      await alert.toast(position);\n      resolve(alert);\n    });\n  });\n}\n\n/**\n * `nano-alert` helper to create alert notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param icon - name for the `nano-icon`\n * @param label - descriptive label for assitive technology\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n */\nexport function nanoShowAlert(\n  message: string,\n  buttons: ImperativeAlertButton[] = [],\n  label: string,\n  icon: string | undefined = 'light/info-circle',\n  alertOptions: ImperativeAlertOptions = {}\n) {\n  const opts: ImperativeAlertOptions = {\n    color: 'primary',\n    duration: Infinity,\n    closable: false,\n    ...alertOptions,\n  };\n  icon = icon || 'light/info-circle';\n  const alert: HTMLNanoAlertElement = Object.assign(\n    document.createElement('nano-alert'),\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n        ${icon ? `<nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>` : ''}\n        ${alertContent(message, buttons)}\n      `,\n    }\n  );\n  addBtnHandlers(alert, buttons);\n\n  document.body.appendChild(alert);\n  return new Promise<HTMLNanoAlertElement>((resolve) => {\n    setTimeout(async (_) => {\n      await alert.alert(label);\n      resolve(alert);\n    }, 100);\n  });\n}\n","interface ImperativeDialogOptions {\n  noUserDismiss: boolean;\n  noHeader?: boolean;\n  noFooter?: boolean;\n  label: string;\n}\n/**\n * `nano-dialog` helper to create dialog modals imperatively.\n * @param body - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param dialogOptions - { noUserDismiss: boolean, noHeader?: boolean, noFooter?: boolean, label: string }\n * @returns `Promise<void>`\n */\nexport function nanoCreateDialog(\n  body: string,\n  buttons: { classes: string; content: string; handler: () => {} }[] = [],\n  dialogOptions?: ImperativeDialogOptions\n) {\n  const opts: ImperativeDialogOptions = {\n    noUserDismiss: false,\n    label: 'Dialog',\n    ...dialogOptions,\n  };\n  const dialog: HTMLNanoDialogElement = Object.assign(\n    document.createElement('nano-dialog'),\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n      ${body}\n      ${\n        buttons.length\n          ? buttons\n              .map(\n                (btn, i) =>\n                  `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n              )\n              .join('')\n          : ''\n      }`,\n    }\n  );\n\n  if (buttons.length) {\n    Array.from(dialog.querySelectorAll('button[slot=\"footer\"]')).map(\n      (btn: HTMLElement) => {\n        const foundBtn = buttons.find(\n          (_fb, i) => btn.dataset.btn === i.toString()\n        );\n        if (foundBtn && foundBtn.handler) {\n          btn.addEventListener('click', foundBtn.handler);\n        }\n      }\n    );\n  }\n\n  document.body.appendChild(dialog);\n  return dialog;\n}\n"]}

package/dist/nano-components/p-3456db01.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as i,h as e,e as a,g as s}from"./p-ab5813a7.js";import{M as n}from"./p-cb79d1ec.js";import{r as o}from"./p-289aa03f.js";import{l as r,u as l}from"./p-1805d59a.js";import{c}from"./p-d99437a6.js";import"./p-9a385481.js";import"./p-b619500f.js";const h=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-top-width:4px;border-top-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease;transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;-webkit-transform:none;transform:none}.alert--toasty,.alert--modal{-webkit-box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));margin:var(--nano-spacing-medium, 16px)}.alert__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.alert__modal-wrap{position:fixed;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;top:0;right:0;bottom:0;left:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__close{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.1em;padding-left:0;padding-right:var(--nano-spacing-medium, 16px);padding-top:0;padding-bottom:0;--color:var(--close-button-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__close{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--nano-spacing-medium, 16px);padding-inline-end:var(--nano-spacing-medium, 16px)}}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.alert__footer ::slotted(*),.alert__footer::slotted(*){-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--scrim-color);opacity:0;-webkit-transition:var(--nano-transition-fast, 0.3s) opacity;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.alert__overlay--open{opacity:1}.alert__icon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--icon-size)}.alert__icon::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px)}.alert__icon ::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__icon ::slotted(*){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--nano-spacing-medium, 16px);margin-inline-start:var(--nano-spacing-medium, 16px);-webkit-margin-end:0;margin-inline-end:0}}";const d=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tr"});const b=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tl"});const m=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--bl"});const p=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--br"});let f=class{constructor(a){t(this,a);this.nanoShow=i(this,"nanoShow",7);this.nanoAfterShow=i(this,"nanoAfterShow",7);this.nanoHide=i(this,"nanoHide",7);this.nanoAfterHide=i(this,"nanoAfterHide",7);this.addedTransEnd=false;this.goingToHide=false;this.goingToShow=false;this.isModal=false;this.isToast=false;this.isShowing=false;this.open=false;this.closable=false;this.duration=Infinity;this.handleMouseMove=()=>{this.restartAutoHide()};this.handleCloseClick=()=>{this.hide()};this.handleTransitionEnd=t=>{if(t.propertyName==="opacity"&&(t.target===this.panel||t.target===this.overlay)){this.host.hidden=!this.open;this.isShowing=this.open;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit()}};this.handleButtonClick=t=>{if(t.defaultPrevented)return;if(t.target.tagName&&t.target.tagName.toLowerCase()==="button")this.hide()};this.restartAutoHide=()=>{clearTimeout(this.autoHideTimeout);if(this.open&&this.duration<Infinity){this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}};this.Panel=()=>e("div",{ref:t=>this.panel=t,part:"panel",class:{alert:true,"alert--open":this.open,"alert--toasty":this.isToast,"alert--modal":!!this.isModal,"alert--showing":this.isShowing},role:!!this.isModal?"alertdialog":"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true","aria-modal":!!this.isModal?"true":undefined,"aria-label":this.label?this.label:undefined,onMouseMove:this.handleMouseMove,tabIndex:!!this.isModal?0:undefined},e("div",{class:"alert__content"},e("div",{part:"icon",class:"alert__icon"},e("slot",{name:"icon"})),e("div",{part:"message",class:"alert__message"},e("slot",null)),this.closable&&e("div",{class:"alert__close"},e("nano-icon-button",{class:"alert__close",iconName:"light/times",label:"close menu",onClick:this.handleCloseClick}))),e("div",{class:"alert__footer"},e("slot",{name:"footer"})))}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}async show(){if(this.goingToShow){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return false}this.host.hidden=false;this.goingToShow=true;this.open=true;o((()=>{this.isShowing=true;this.goingToShow=false}));if(this.duration<Infinity){clearTimeout(this.autoHideTimeout);this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}}async hide(){if(this.goingToHide){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return false}this.goingToHide=true;this.open=false;o((()=>this.goingToHide=false));clearTimeout(this.autoHideTimeout)}async toast(t="tr"){this.isToast=true;return new Promise((i=>{let e;switch(t){case"tl":e=b;break;case"bl":e=m;break;case"br":e=p;break;default:e=d;break}if(!e.parentElement){document.body.appendChild(e)}e.appendChild(this.host);this.connectedCallback();this.show();const a=()=>{this.host.remove();this.isToast=false;i();if(!e.querySelector("nano-alert")){e.remove()}};this.host.addEventListener("nanoAfterHide",a,{once:true});this.host.addEventListener("nanoafterhide",a,{once:true})}))}async alert(t){this.isModal=true;this.label=t;return new Promise((t=>{if(!document.body.contains(this.host)){document.body.appendChild(this.host)}this.modal.activate();r(this.host);this.originalTrigger=document.activeElement;o((()=>{this.show()}));const i=()=>o((()=>this.panel.focus({preventScroll:true})));const e=()=>{this.modal.deactivate();this.host.remove();this.label=undefined;this.isModal=false;t();if(this.originalTrigger&&typeof this.originalTrigger.focus==="function"){setTimeout((()=>this.originalTrigger.focus()))}};this.host.addEventListener("nanoAfterShow",i,{once:true});this.host.addEventListener("nanoaftershow",i,{once:true});this.host.addEventListener("nanoAfterHide",e,{once:true});this.host.addEventListener("nanoafterhide",e,{once:true})}))}connectedCallback(){this.modal=new n(this.host);this.host.addEventListener("click",this.handleButtonClick);if(this.panel){this.addedTransEnd=true;this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}disconnectedCallback(){l(this.host);this.host.removeEventListener("click",this.handleButtonClick);this.addedTransEnd=false;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}componentDidLoad(){if(this.open){this.show()}if(!this.addedTransEnd){this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}render(){return e(a,{class:Object.assign({},c(this.color)),showing:this.isShowing},this.isModal&&[e("div",{part:"overlay",class:{alert__overlay:true,"alert__overlay--open":this.open},ref:t=>this.overlay=t}),e("div",{class:"alert__modal-wrap"},e(this.Panel,null))],!this.isModal&&e(this.Panel,null))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"]}}};f.style=h;export{f as nano_alert};
+//# sourceMappingURL=p-3456db01.entry.js.map

package/dist/nano-components/p-3456db01.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"names":["alertCss","toastStackTr","Object","assign","document","createElement","className","toastStackTl","toastStackBl","toastStackBr","Alert","[object Object]","hostRef","this","addedTransEnd","goingToHide","goingToShow","isModal","isToast","isShowing","open","closable","duration","Infinity","handleMouseMove","restartAutoHide","handleCloseClick","hide","handleTransitionEnd","event","propertyName","target","panel","overlay","host","hidden","nanoAfterShow","emit","nanoAfterHide","handleButtonClick","e","defaultPrevented","tagName","toLowerCase","clearTimeout","autoHideTimeout","setTimeout","Panel","h","ref","el","part","class","alert","alert--open","alert--toasty","alert--modal","alert--showing","role","aria-live","aria-atomic","aria-hidden","aria-modal","undefined","aria-label","label","onMouseMove","tabIndex","name","iconName","onClick","show","nanoShow","raf","nanoHide","position","Promise","resolve","toastStack","parentElement","body","appendChild","connectedCallback","onClose","remove","querySelector","addEventListener","once","contains","modal","activate","lockBodyScrolling","originalTrigger","activeElement","onOpen","focus","preventScroll","deactivate","Modal","unlockBodyScrolling","removeEventListener","Host","createColorClasses","color","showing","alert__overlay","alert__overlay--open","div"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --border-radius: defaults to #{$layer-border-radius};\n   * @prop --border-color: defaults to #{$layer-border-color};\n   * @prop --border-width: defaults to #{$layer-border-width};\n   * @prop --background: defaults to #{$layer-bg-color};\n   * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --icon-size: defaults to 1.5rem;\n   * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n   * @prop --close-button-color: defaults to #{$color-mediumgrey} ;\n   */\n\n  --border-radius: #{$layer-border-radius};\n  --border-color: #{$layer-border-color};\n  --border-width: #{$layer-border-width};\n  --background: #{$layer-bg-color};\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --icon-size: 2rem;\n  --scrim-color: #{$layer-overlay-dark};\n  --close-button-color: #{$color-palegrey};\n\n  display: block;\n}\n\n:host(.nano-color) {\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-top-width: 4px;\n  border-top-color: var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition:\n    #{$transition-medium} opacity ease,\n    #{$transition-fast} transform ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:not(.alert--showing) {\n    @include hidden;\n  }\n\n  &--open {\n    opacity: 1;\n    transform: none;\n  }\n\n  &--toasty,\n  &--modal {\n    box-shadow: #{$layer-shadow-large};\n    margin: #{$spacing-medium};\n  }\n}\n\n.alert__content {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: #{$layer-index-alert};\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: #{$spacing-medium};\n  overflow: hidden;\n  line-height: 1.6;\n}\n\n.alert__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n\n  @include padding(0, #{$spacing-medium}, 0, 0);\n\n  --color: var(--close-button-color);\n}\n\n.alert__footer {\n  padding: 0 #{$spacing-small} 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n\n  ::slotted(*),\n  &::slotted(*) {\n    flex: 1;\n    margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n  }\n}\n\n.alert__overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: #{$transition-fast} opacity;\n  z-index: #{$layer-index-alert};\n  backdrop-filter: blur(#{$layer-overlay-blur});\n\n  &--open {\n    opacity: 1;\n  }\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--icon-size);\n\n  &::slotted(*) {\n    color: var(--tint-color);\n    margin-left: #{$spacing-medium};\n  }\n}\n\n.alert__icon ::slotted(*) {\n  color: var(--tint-color);\n\n  @include margin(0, 0, 0, #{$spacing-medium});\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  VNode,\n} from '@stencil/core';\nimport { Color } from '../../interface';\nimport Modal from '../../utils/modal';\nimport {\n  createColorClasses,\n  lockBodyScrolling,\n  raf,\n  unlockBodyScrolling,\n} from '../../utils';\n\nconst toastStackTr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tr',\n});\nconst toastStackTl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tl',\n});\nconst toastStackBl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--bl',\n});\nconst toastStackBr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--br',\n});\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n  tag: 'nano-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert implements ComponentInterface {\n  private autoHideTimeout: ReturnType<typeof setTimeout>;\n  private panel: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n  private addedTransEnd = false;\n  private goingToHide = false;\n  private goingToShow = false;\n\n  @State() isModal = false;\n  @State() isToast = false;\n  @State() isShowing = false;\n  @State() label: string;\n\n  @Element() host: HTMLNanoAlertElement;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The color to use from the application's color palette. */\n  @Prop({ reflect: true }) color?: Color;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    if (this.goingToShow) {\n      return;\n    }\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return false;\n    }\n\n    this.host.hidden = false;\n    this.goingToShow = true;\n    this.open = true;\n    raf(() => {\n      this.isShowing = true;\n      this.goingToShow = false;\n    });\n\n    if (this.duration < Infinity) {\n      clearTimeout(this.autoHideTimeout);\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    if (this.goingToHide) {\n      return;\n    }\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return false;\n    }\n    this.goingToHide = true;\n    this.open = false;\n\n    raf(() => (this.goingToHide = false));\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   *\n   * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n   * @returns a promise which will resolve after the alert has hidden\n   */\n  @Method()\n  async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n    this.isToast = true;\n    return new Promise<void>((resolve) => {\n      let toastStack: HTMLElement;\n      switch (position) {\n        case 'tl':\n          toastStack = toastStackTl;\n          break;\n        case 'bl':\n          toastStack = toastStackBl;\n          break;\n        case 'br':\n          toastStack = toastStackBr;\n          break;\n        default:\n          toastStack = toastStackTr;\n          break;\n      }\n\n      if (!toastStack.parentElement) {\n        document.body.appendChild(toastStack);\n      }\n\n      toastStack.appendChild(this.host);\n      this.connectedCallback();\n      this.show();\n\n      const onClose = () => {\n        this.host.remove();\n        this.isToast = false;\n        resolve();\n\n        // Remove the toast stack from the DOM when there are no more alerts\n        if (!toastStack.querySelector('nano-alert')) {\n          toastStack.remove();\n        }\n      };\n\n      this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n      this.host.addEventListener('nanoafterhide', onClose, { once: true });\n    });\n  }\n\n  /**\n   * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n   * @param label a label for assistive technology\n   */\n  @Method()\n  async alert(label: string) {\n    this.isModal = true;\n    this.label = label;\n\n    return new Promise<void>((resolve) => {\n      if (!document.body.contains(this.host)) {\n        document.body.appendChild(this.host);\n      }\n\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      raf(() => {\n        this.show();\n      });\n\n      const onOpen = () => raf(() => this.panel.focus({ preventScroll: true }));\n\n      const onClose = () => {\n        this.modal.deactivate();\n        this.host.remove();\n        this.label = undefined;\n        this.isModal = false;\n        resolve();\n\n        // Restore focus to the original trigger\n        if (\n          this.originalTrigger &&\n          typeof this.originalTrigger.focus === 'function'\n        ) {\n          setTimeout(() => this.originalTrigger.focus());\n        }\n      };\n\n      this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n      this.host.addEventListener('nanoaftershow', onOpen, { once: true });\n\n      this.host.addEventListener('nanoAfterHide', onClose, {\n        once: true,\n      });\n      this.host.addEventListener('nanoafterhide', onClose, {\n        once: true,\n      });\n    });\n  }\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\n  };\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      (event.target === this.panel || event.target === this.overlay)\n    ) {\n      this.host.hidden = !this.open;\n      this.isShowing = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleButtonClick = (e: PointerEvent & { target: HTMLElement }) => {\n    if (e.defaultPrevented) return;\n    if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')\n      this.hide();\n  };\n\n  private restartAutoHide = () => {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  };\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    this.host.addEventListener('click', this.handleButtonClick);\n\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.host.removeEventListener('click', this.handleButtonClick);\n\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  private Panel = (): VNode => {\n    return (\n      <div\n        ref={(el) => (this.panel = el)}\n        part=\"panel\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--toasty': this.isToast,\n          'alert--modal': !!this.isModal,\n          'alert--showing': this.isShowing,\n        }}\n        role={!!this.isModal ? 'alertdialog' : 'alert'}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        aria-modal={!!this.isModal ? 'true' : undefined}\n        aria-label={this.label ? this.label : undefined}\n        onMouseMove={this.handleMouseMove}\n        tabIndex={!!this.isModal ? 0 : undefined}\n      >\n        <div class=\"alert__content\">\n          <div part=\"icon\" class=\"alert__icon\">\n            <slot name=\"icon\" />\n          </div>\n          <div part=\"message\" class=\"alert__message\">\n            <slot />\n          </div>\n          {this.closable && (\n            <div class=\"alert__close\">\n              <nano-icon-button\n                class=\"alert__close\"\n                iconName=\"light/times\"\n                label=\"close menu\"\n                onClick={this.handleCloseClick}\n              ></nano-icon-button>\n            </div>\n          )}\n        </div>\n        <div class=\"alert__footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        showing={this.isShowing}\n      >\n        {this.isModal && [\n          <div\n            part=\"overlay\"\n            class={{\n              alert__overlay: true,\n              'alert__overlay--open': this.open,\n            }}\n            ref={(div) => (this.overlay = div)}\n          />,\n          <div class=\"alert__modal-wrap\">\n            <this.Panel />\n          </div>,\n        ]}\n        {!this.isModal && <this.Panel />}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-346588cc.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{h as e,r as t,c as a,e as i,g as s}from"./p-ab5813a7.js";import{b as o,D as n,i as d,p as r,d as l,s as c,e as h,f as u,g as b,h as f,j as p,k as _,a as v}from"./p-f66958c1.js";import{c as x}from"./p-d99437a6.js";import{f as g}from"./p-f8f89998.js";var w;(function(e){e[e["Sunday"]=0]="Sunday";e[e["Monday"]=1]="Monday";e[e["Tuesday"]=2]="Tuesday";e[e["Wednesday"]=3]="Wednesday";e[e["Thursday"]=4]="Thursday";e[e["Friday"]=5]="Friday";e[e["Saturday"]=6]="Saturday"})(w||(w={}));function y(e,t){if(e==null||t==null){return false}return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function m(e,t){var a=new Date(e);a.setDate(a.getDate()+t);return a}function k(e,t=w.Monday){var a=new Date(e);var i=a.getDay();var s=(i<t?7:0)+i-t;a.setDate(a.getDate()-s);return a}function D(e,t=w.Monday){var a=new Date(e);var i=a.getDay();var s=(i<t?-7:0)+6-(i-t);a.setDate(a.getDate()+s);return a}function z(e){return new Date(e.getFullYear(),e.getMonth(),1)}function M(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}function S(e,t,a){return C(e,t,a)===e}function C(e,t,a){const i=e.getTime();if(t&&t instanceof Date&&i<t.getTime()){return t}if(a&&a instanceof Date&&i>a.getTime()){return a}return e}function N(e,t){const a=[];let i=e;while(!y(i,t)){a.push(i);i=m(i,1)}a.push(i);return a}function T(e,t=w.Monday){const a=k(z(e),t);const i=D(M(e),t);return N(a,i)}const F=({focusedDay:t,today:a,day:i,onDaySelect:s,onKeyboardNavigation:o,focusedDayRef:n,inRange:d,disabled:r,isSelected:l})=>{const c=y(i,a);const h=y(i,t);const u=i.getMonth()!==t.getMonth()||r;const b=!d;function f(e){s(e,i)}return e("button",{class:{"duet-date__day":true,"is-outside":b,"is-disabled":u,"is-today":c},tabIndex:h?0:-1,onClick:f,onKeyDown:o,disabled:b,type:"button","aria-pressed":l?"true":"false",ref:e=>{if(h&&e&&n){n(e)}}},e("span",{"aria-hidden":"true"},i.getDate()),e("span",{class:"duet-date__vhidden"},i.toLocaleDateString(undefined,{day:"numeric",month:"long"})))};function j(e,t){const a=[];for(let i=0;i<e.length;i+=t){a.push(e.slice(i,i+t))}return a}function L(e,t,a){return e.map(((i,s)=>{const o=(s+t)%e.length;return a(e[o])}))}const A=({selectedDate:t,focusedDate:a,labelledById:i,localization:s,firstDayOfWeek:o,min:n,max:d,onDateSelect:r,onKeyboardNavigation:l,focusedDayRef:c,onMouseDown:h,onFocusIn:u,isDateDisabled:b})=>{const f=new Date;const p=T(a,o);return e("table",{class:"duet-date__table",role:"grid","aria-labelledby":i,onFocusin:u,onMouseDown:h},e("thead",null,e("tr",null,L(s.dayNames,o,(t=>e("th",{class:"duet-date__table-header",scope:"col"},e("span",{"aria-hidden":"true"},t.substr(0,2)),e("span",{class:"duet-date__vhidden"},t)))))),e("tbody",null,j(p,7).map((i=>e("tr",{class:"duet-date__row"},i.map((i=>e("td",{class:"duet-date__cell",role:"gridcell","aria-selected":y(i,t)?"true":undefined},e(F,{day:i,today:f,focusedDay:a,inRange:S(i,n,d),onDaySelect:r,onKeyboardNavigation:l,focusedDayRef:c,disabled:b(i),isSelected:y(i,t)})))))))))};const Y={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 I=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;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 rgba(var(--nano-color-tint-rgb), 0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0}.duet-date{-webkit-box-sizing:border-box;box-sizing:border-box;color:currentColor;display:block;margin:0;position:relative;text-align:left;width:100%}.duet-date__dialog{display:-webkit-box;display:-ms-flexbox;display:flex;top:100%;max-width:100%;width:100%}.duet-date__dialog.is-left{left:auto;right:0;width:auto}.duet-date__dialog-content{background:var(--background);min-width:290px;padding:16px 16px 20px;position:relative;-webkit-transform:none;transform:none;max-width:100%;width:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1.25;text-align:center;width:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1.25;padding-bottom:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-moz-appearance:none;-webkit-appearance:none;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.25;position:relative;text-align:center;vertical-align:middle;z-index:1;-webkit-transition:0.15s ease all;transition:0.15s ease all;height:2.5em;width:2.5em}.duet-date__day.is-today{-webkit-box-shadow:0 0 0 1px var(--active-color);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%;bottom:0;left:0;opacity:0.16;position:absolute;right:0;top:0}[aria-selected=true] .duet-date__day{background:var(--active-color);color:var(--active-text-color);-webkit-box-shadow:none;box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;-webkit-box-shadow:none;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);-webkit-box-shadow:none;box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:16px;width:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);-moz-appearance:none;-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:distribute;justify-content:space-around;margin-left:8px;padding:0;-webkit-transition:background-color 300ms ease;transition:background-color 300ms ease;font-size:0.9em;height:2.2em;width:2.2em}.duet-date__prev:focus,.duet-date__next:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{-webkit-box-shadow:none;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:0 auto}.duet-date__select{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-top:4px;position:relative}.duet-date__select span{margin-right:4px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.duet-date__select span{margin-right:unset;-webkit-margin-end:4px;margin-inline-end:4px}}.duet-date__select select{cursor:pointer;font-size:1em;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow)}.duet-date__select-label{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.25em;font-weight:600;line-height:1.25;padding:0 4px 0 8px;pointer-events:none;position:relative;width: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);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}';function O(e,t){var a=[];for(var i=e;i<=t;i++){a.push(i)}return a}let R=class{constructor(e){t(this,e);this.nanoDatePicked=a(this,"nanoDatePicked",7);this.monthSelectId=o("NanoDateMonth");this.yearSelectId=o("NanoDateYear");this.dialogLabelId=o("NanoDateLabel");this.initialTouchX=null;this.initialTouchY=null;this.activeFocus=false;this.focusedDay=new Date;this.selectedDate="";this.min="";this.max="";this.firstDayOfWeek=n.Monday;this.localization=Y;this.isDateDisabled=()=>false;this.isModal=false;this.enableActiveFocus=()=>{this.activeFocus=true};this.disableActiveFocus=()=>{this.activeFocus=false};this.handleTouchStart=e=>{const t=e.changedTouches[0];this.initialTouchX=t.pageX;this.initialTouchY=t.pageY};this.handleTouchMove=e=>{e.preventDefault()};this.handleTouchEnd=e=>{const t=e.changedTouches[0];const a=t.pageX-this.initialTouchX;const i=t.pageY-this.initialTouchY;const s=70;const o=Math.abs(a)>=s&&Math.abs(i)<=s;if(o){this.addMonths(a<0?1:-1)}this.initialTouchY=null;this.initialTouchX=null};this.handleNextMonthClick=e=>{e.preventDefault();this.addMonths(1)};this.handlePreviousMonthClick=e=>{e.preventDefault();this.addMonths(-1)};this.handleKeyboardNavigation=e=>{if(e.key==="Tab"&&!e.shiftKey&&this.isModal){e.preventDefault();let t=this.firstFocusEle||this.firstFocusableElement;t.focus();return}var 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()}};this.handleDaySelect=(e,t)=>{const a=!this.isDateDisabled(t);const i=d(t,r(this.min),r(this.max));if(!i||!a){return}if(t.getMonth()===this.focusedDay.getMonth()){this.setValue(t)}else{this.setFocusedDay(t)}};this.handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))};this.handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))};this.processFocusedDayNode=e=>{this.focusedDayNode=e;if(this.activeFocus){setTimeout((()=>e.focus()),0)}}}async setFocus(e=false,t=false){this.setFocusedDay(r(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)}addDays(e){this.setFocusedDay(l(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(c(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(h(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=u(b(this.focusedDay),e);const a=f(t);const i=u(this.focusedDay,e);this.setFocusedDay(p(i,t,a))}setYear(e){const t=_(b(this.focusedDay),e);const a=f(t);const i=_(this.focusedDay,e);this.setFocusedDay(p(i,t,a))}setFocusedDay(e){this.focusedDay=p(e,r(this.min),r(this.max))}setValue(e){this.selectedDate=v(e);this.nanoDatePicked.emit({value:this.selectedDate,valueAsDate:e})}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 t=r(this.selectedDate);const a=(t||this.focusedDay).getFullYear();const s=this.focusedDay.getMonth();const o=this.focusedDay.getFullYear();const n=r(this.min);const l=r(this.max);const c=n!=null&&n.getMonth()===s&&n.getFullYear()===o;const h=l!=null&&l.getMonth()===s&&l.getFullYear()===o;let u=a-10;let p=a+10;if(n)u=n.getFullYear();if(l)p=l.getFullYear();return e(i,{class:Object.assign({},x(this.color))},e("div",{class:"duet-date"},e("div",{class:{"duet-date__dialog":true,"is-active":true},onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},e("div",{class:"duet-date__dialog-content"},e("div",{class:"duet-date__vhidden duet-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),e("div",{class:"duet-date__header",onFocusin:this.disableActiveFocus},e("div",null,e("h2",{id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},this.localization.monthNames[s]," ",this.focusedDay.getFullYear()),e("label",{htmlFor:this.monthSelectId,class:"duet-date__vhidden"},this.localization.monthSelectLabel),e("div",{class:"duet-date__select"},e("select",{id:this.monthSelectId,class:"duet-date__select--month",ref:e=>this.firstFocusableElement=this.monthSelectNode=e,onChange:this.handleMonthSelect},this.localization.monthNames.map(((t,a)=>e("option",{key:t,value:a,selected:a===s,disabled:!d(new Date(o,a,1),n?b(n):null,l?f(l):null)},t)))),e("div",{class:"duet-date__select-label","aria-hidden":"true"},e("span",null,this.localization.monthNamesShort[s]),e("nano-icon",{name:"light/chevron-down"}))),e("label",{htmlFor:this.yearSelectId,class:"duet-date__vhidden"},this.localization.yearSelectLabel),e("div",{class:"duet-date__select"},e("select",{id:this.yearSelectId,class:"duet-date__select--year",onChange:this.handleYearSelect,ref:e=>this.yearSelectNode=e},O(u,p).map((t=>e("option",{key:t,selected:t===o},t)))),e("div",{class:"duet-date__select-label","aria-hidden":"true"},e("span",null,this.focusedDay.getFullYear()),e("nano-icon",{name:"light/chevron-down"})))),e("div",{class:"duet-date__nav"},e("button",{class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:c,type:"button"},e("nano-icon",{name:"light/chevron-left"}),e("span",{class:"duet-date__vhidden"},this.localization.prevMonthLabel)),e("button",{class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:h,type:"button"},e("nano-icon",{name:"light/chevron-right"}),e("span",{class:"duet-date__vhidden"},this.localization.nextMonthLabel)))),e("div",null,e(A,{selectedDate:t,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:n,max:l,isDateDisabled:this.isDateDisabled}))))))}get host(){return s(this)}static get watchers(){return{selectedDate:["handleSelectedDateChange"]}}};R.style=I;export{R as nano_date_picker};
+//# sourceMappingURL=p-346588cc.entry.js.map

package/dist/nano-components/p-346588cc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/date-picker/duet-date-picker/date-utils.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/duet-date-picker/date-localization.ts","src/components/date-picker/date-picker.scss?tag=nano-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"names":["DaysOfWeek","isEqual","a","b","getFullYear","getMonth","getDate","addDays","date","days","d","Date","setDate","startOfWeek","firstDayOfWeek","Monday","day","getDay","diff","endOfWeek","startOfMonth","endOfMonth","inRange","min","max","clamp","time","getTime","getDaysInRange","start","end","current","push","getViewOfMonth","DatePickerDay","focusedDay","today","onDaySelect","onKeyboardNavigation","focusedDayRef","disabled","isSelected","isToday","isFocused","isDisabled","isOutsideRange","handleClick","e","h","class","duet-date__day","is-outside","is-disabled","is-today","tabIndex","onClick","onKeyDown","type","aria-pressed","ref","el","aria-hidden","toLocaleDateString","undefined","month","chunk","array","chunkSize","result","i","length","slice","mapWithOffset","startingOffset","mapFn","map","_","adjustedIndex","DatePickerMonth","selectedDate","focusedDate","labelledById","localization","onDateSelect","onMouseDown","onFocusIn","isDateDisabled","role","aria-labelledby","onFocusin","dayNames","dayName","scope","substr","week","aria-selected","buttonLabel","placeholder","selectedDateMessage","prevMonthLabel","nextMonthLabel","monthSelectLabel","yearSelectLabel","closeLabel","keyboardInstruction","calendarHeading","monthNames","monthNamesShort","datePickerCss","range","from","to","DatePicker","[object Object]","hostRef","this","monthSelectId","createIdentifier","yearSelectId","dialogLabelId","initialTouchX","initialTouchY","activeFocus","defaultLocalization","isModal","enableActiveFocus","disableActiveFocus","handleTouchStart","event","touch","changedTouches","pageX","pageY","handleTouchMove","preventDefault","handleTouchEnd","distX","distY","threshold","isHorizontalSwipe","Math","abs","addMonths","handleNextMonthClick","handlePreviousMonthClick","handleKeyboardNavigation","key","shiftKey","ele","firstFocusEle","firstFocusableElement","focus","handled","addYears","handleDaySelect","_event","isAllowed","isInRange","parseISODate","setValue","setFocusedDay","handleMonthSelect","setMonth","parseInt","target","value","handleYearSelect","setYear","processFocusedDayNode","element","focusedDayNode","setTimeout","forceFocusVisible","clearTimeout","focusTimeoutId","focusVisible","force","monthSelectNode","setFocus","months","years","year","printISODate","nanoDatePicked","emit","valueAsDate","yearSelectNode","observe","handleSelectedDateChange","connectedCallback","unobserve","selectedYear","focusedMonth","focusedYear","minDate","maxDate","prevMonthDisabled","nextMonthDisabled","minYear","maxYear","Host","Object","assign","createColorClasses","color","duet-date__dialog","is-active","onTouchMove","onTouchStart","onTouchEnd","aria-live","id","htmlFor","onChange","selected","name"],"mappings":"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","sourcesContent":["const ISO_DATE_FORMAT = /^(\\d{4})-(\\d{2})-(\\d{2})$/;\n\nexport enum DaysOfWeek {\n  Sunday = 0,\n  Monday = 1,\n  Tuesday = 2,\n  Wednesday = 3,\n  Thursday = 4,\n  Friday = 5,\n  Saturday = 6,\n}\n\nexport function createDate(year: string, month: string, day: string): Date {\n  var dayInt = parseInt(day, 10);\n  var monthInt = parseInt(month, 10);\n  var yearInt = parseInt(year, 10);\n\n  const isValid =\n    Number.isInteger(yearInt) && // all parts should be integers\n    Number.isInteger(monthInt) &&\n    Number.isInteger(dayInt) &&\n    monthInt > 0 && // month must be 1-12\n    monthInt <= 12 &&\n    dayInt > 0 && // day must be 1-31\n    dayInt <= 31 &&\n    yearInt > 0;\n\n  if (isValid) {\n    return new Date(yearInt, monthInt - 1, dayInt);\n  }\n}\n\n/**\n * @param value date string in ISO format YYYY-MM-DD\n */\nexport function parseISODate(value: string): Date {\n  if (!value) {\n    return;\n  }\n\n  const matches = value.match(ISO_DATE_FORMAT);\n\n  if (matches) {\n    return createDate(matches[1], matches[2], matches[3]);\n  }\n}\n\n/**\n * print date in format YYYY-MM-DD\n * @param date\n */\nexport function printISODate(date: Date): string {\n  if (!date) {\n    return '';\n  }\n\n  var d = date.getDate().toString(10);\n  var m = (date.getMonth() + 1).toString(10);\n  var y = date.getFullYear().toString(10);\n\n  // days are not zero-indexed, so pad if less than 10\n  if (date.getDate() < 10) {\n    d = `0${d}`;\n  }\n\n  // months *are* zero-indexed, pad if less than 9!\n  if (date.getMonth() < 9) {\n    m = `0${m}`;\n  }\n\n  return `${y}-${m}-${d}`;\n}\n\n/**\n * Compare if two dates are equal in terms of day, month, and year\n */\nexport function isEqual(a: Date, b: Date): boolean {\n  if (a == null || b == null) {\n    return false;\n  }\n\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nexport function addDays(date: Date, days: number): Date {\n  var d = new Date(date);\n  d.setDate(d.getDate() + days);\n  return d;\n}\n\nexport function addMonths(date: Date, months: number): Date {\n  const d = new Date(date);\n  d.setMonth(date.getMonth() + months);\n  return d;\n}\n\nexport function addYears(date: Date, years: number): Date {\n  const d = new Date(date);\n  d.setFullYear(date.getFullYear() + years);\n  return d;\n}\n\nexport function startOfWeek(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date {\n  var d = new Date(date);\n  var day = d.getDay();\n  var diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;\n\n  d.setDate(d.getDate() - diff);\n  return d;\n}\n\nexport function endOfWeek(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date {\n  var d = new Date(date);\n  var day = d.getDay();\n  var diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);\n\n  d.setDate(d.getDate() + diff);\n  return d;\n}\n\nexport function startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nexport function endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nexport function setMonth(date: Date, month: number): Date {\n  const d = new Date(date);\n  d.setMonth(month);\n  return d;\n}\n\nexport function setYear(date: Date, year: number): Date {\n  const d = new Date(date);\n  d.setFullYear(year);\n  return d;\n}\n\n/**\n * Check if date is within a min and max\n */\nexport function inRange(date: Date, min?: Date, max?: Date): boolean {\n  return clamp(date, min, max) === date;\n}\n\n/**\n * Ensures date is within range, returns min or max if out of bounds\n */\nexport function clamp(date: Date, min?: Date, max?: Date): Date {\n  const time = date.getTime();\n\n  if (min && min instanceof Date && time < min.getTime()) {\n    return min;\n  }\n\n  if (max && max instanceof Date && time > max.getTime()) {\n    return max;\n  }\n\n  return date;\n}\n\n/**\n * given start and end date, return an (inclusive) array of all dates in between\n * @param start\n * @param end\n */\nfunction getDaysInRange(start: Date, end: Date): Date[] {\n  const days: Date[] = [];\n  let current = start;\n\n  while (!isEqual(current, end)) {\n    days.push(current);\n    current = addDays(current, 1);\n  }\n\n  days.push(current);\n\n  return days;\n}\n\n/**\n * given a date, return an array of dates from a calendar perspective\n * @param date\n * @param firstDayOfWeek\n */\nexport function getViewOfMonth(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date[] {\n  const start = startOfWeek(startOfMonth(date), firstDayOfWeek);\n  const end = endOfWeek(endOfMonth(date), firstDayOfWeek);\n\n  return getDaysInRange(start, end);\n}\n\n/**\n * Form random hash\n */\nexport function chr4() {\n  return Math.random().toString(16).slice(-4);\n}\n\n/**\n * Create random identifier with a prefix\n * @param prefix\n */\nexport function createIdentifier(prefix) {\n  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\n}\n","import { h, FunctionalComponent } from '@stencil/core';\nimport { isEqual } from './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 { h, FunctionalComponent } from '@stencil/core';\nimport { DuetLocalizedText } from './date-localization';\nimport { DatePickerDay, DatePickerDayProps } from './date-picker-day';\nimport { getViewOfMonth, inRange, DaysOfWeek, isEqual } from './date-utils';\nimport { DateDisabledPredicate } from '../../../interface';\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      // @ts-ignore\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","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 '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --background: defaults to #{$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  #{$control-focus-style}\n   * @prop --inactive-color: defaults to #{$button-bg-color}\n   */\n\n  --background: #{$layer-bg-color};\n  --active-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --active-text-color:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n  --focus-shadow: #{$control-focus-style};\n  --inactive-color: #{$button-bg-color};\n\n  display: block;\n  font-size: 16px;\n}\n\n:host(.nano-color) {\n  --active-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --active-text-color: #{current-color(contrast)};\n  --focus-shadow: #{$control-focus-size 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: left;\n  width: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ DIALOG\n// ---------------------------------------------\n\n.duet-date__dialog {\n  display: flex;\n  top: 100%;\n  max-width: 100%;\n  width: 100%;\n\n  &.is-left {\n    left: auto;\n    right: 0;\n    width: auto;\n  }\n}\n\n.duet-date__dialog-content {\n  background: var(--background);\n  min-width: 290px;\n  padding: 16px 16px 20px;\n  position: relative;\n  transform: none;\n  max-width: 100%;\n  width: 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.25;\n  text-align: center;\n  width: 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.25;\n  padding-bottom: 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  -moz-appearance: none;\n  -webkit-appearance: none;\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.25;\n  position: relative;\n  text-align: center;\n  vertical-align: middle;\n  z-index: 1;\n  transition: 0.15s ease all;\n  height: 2.5em;\n  width: 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    bottom: 0;\n    left: 0;\n    opacity: 0.16;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n\n  [aria-selected='true'] & {\n    background: var(--active-color);\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-bottom: 16px;\n  width: 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  -moz-appearance: none;\n  -webkit-appearance: none;\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-left: 8px;\n  padding: 0;\n  transition: background-color 300ms ease;\n  font-size: 0.9em;\n  height: 2.2em;\n  width: 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: 0 auto;\n  }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ SELECT\n// ---------------------------------------------\n\n.duet-date__select {\n  display: inline-flex;\n  margin-top: 4px;\n  position: relative;\n\n  span {\n    @include margin(null, 4px, null, null);\n  }\n\n  select {\n    cursor: pointer;\n    font-size: 1em;\n    height: 100%;\n    left: 0;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    width: 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.25;\n  padding: 0 4px 0 8px;\n  pointer-events: none;\n  position: relative;\n  width: 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  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 1px;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  Prop,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Watch,\n} from '@stencil/core';\nimport {\n  addDays,\n  startOfWeek,\n  endOfWeek,\n  setMonth,\n  setYear,\n  clamp,\n  inRange,\n  endOfMonth,\n  startOfMonth,\n  printISODate,\n  parseISODate,\n  createIdentifier,\n  DaysOfWeek,\n} from '../../utils/date-utils';\nimport { DatePickerMonth } from './duet-date-picker/date-picker-month';\nimport defaultLocalization from './duet-date-picker/date-localization';\n\nimport {\n  PickerChangeEvent,\n  DuetLocalizedText,\n  DateDisabledPredicate,\n  Color,\n} from '../../interface';\nimport { createColorClasses } from '../../utils';\nimport { focusVisible } from '../../utils/focus-visible';\n\nfunction range(from: number, to: number) {\n  var result: number[] = [];\n  for (var i = from; i <= to; i++) {\n    result.push(i);\n  }\n  return result;\n}\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 monthSelectId = createIdentifier('NanoDateMonth');\n  private yearSelectId = createIdentifier('NanoDateYear');\n  private dialogLabelId = createIdentifier('NanoDateLabel');\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  /** Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends. */\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(clamp(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(clamp(date, min, max));\n  }\n\n  private setFocusedDay(day: Date) {\n    this.focusedDay = clamp(\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      let ele = this.firstFocusEle || this.firstFocusableElement;\n      ele.focus();\n      return;\n    }\n\n    var 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 class={{ ...createColorClasses(this.color) }}>\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              {/* @ts-ignore */}\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\"></nano-icon>\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\"></nano-icon>\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\"></nano-icon>\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"]}

package/dist/nano-components/p-394c3c19.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as e,h as r,e as i,g as a}from"./p-ab5813a7.js";import{u as s,l as o}from"./p-1805d59a.js";import{M as n}from"./p-cb79d1ec.js";import"./p-b619500f.js";import"./p-9a385481.js";const l=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{position:relative;display:block;--size:25rem;--panel-background-color:white;--panel-shadow:0 4px 16px rgba(0, 0, 0, 0.1);--overlay-color:hsla(203, 10%, 20%, 0.5)}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:2000}.drawer__panel{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--panel-background-color);-webkit-box-shadow:var(--panel-shadow);box-shadow:var(--panel-shadow);-webkit-transition:250ms -webkit-transform;transition:250ms -webkit-transform;transition:250ms transform;transition:250ms transform, 250ms -webkit-transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--start .drawer__panel{left:0;right:auto;-webkit-transform:translate3d(-100%,  0,  0);transform:translate3d(-100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--start .drawer__panel[dir=rtl]{left:unset;right:unset;left:auto;right:0}.drawer--start .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * -100%),  0,  0);transform:translate3d(calc(-1 * -100%),  0,  0)}.drawer--end .drawer__panel{left:auto;right:0;-webkit-transform:translate3d(100%,  0,  0);transform:translate3d(100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--end .drawer__panel[dir=rtl]{left:unset;right:unset;left:0;right:auto}.drawer--end .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * 100%),  0,  0);transform:translate3d(calc(-1 * 100%),  0,  0)}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, -100%);transform:translate(0, -100%)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}.drawer--open .drawer__panel{-webkit-transform:translate(0, 0);transform:translate(0, 0)}.drawer__header{display:-webkit-box;display:-ms-flexbox;display:flex}.drawer__title{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:20px}.drawer__close{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.drawer__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--overlay-color);opacity:0;-webkit-transition:250ms opacity;transition:250ms opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:1}";let h=0;let d=class{constructor(r){t(this,r);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7);this.nanoOverlayDismiss=e(this,"nanoOverlayDismiss",7);this.componentId=`drawer-${++h}`;this.hasFooter=false;this.isVisible=false;this.open=false;this.label="";this.placement="end";this.contained=false;this.noHeader=false;this.type="overlay"}handleOpenChange(){this.open?this.show():this.hide()}handleTypeChange(){if(this.type!=="push"&&this.type!=="reveal")return;if(!this.contentEle){this.type="overlay";console.warn("a valid contentSelector must be set");return}}handleContentSelector(){if(!this.contentSelector)this.contentEle=null;else this.contentEle=this.host.ownerDocument.querySelector(this.contentSelector)}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this);this.handleTransitionEnd=this.handleTransitionEnd.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this);this.handleOverlayClick=this.handleOverlayClick.bind(this);this.handleSlotChange=this.handleSlotChange.bind(this);this.modal=new n(this.host)}componentWillLoad(){if(this.open){this.show()}this.handleContentSelector()}disconnectedCallback(){s(this.host)}async show(){if(this.isVisible){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;if(!this.contained){this.modal.activate();o(this.host)}if(!this.contentEle||this.type!=="push"&&this.type!=="reveal")return;this.contentEle.style.right="0";this.contentEle.style.transition="all ease 250ms";this.contentEle.style.position="relative";this.contentEle.style.overflow="hidden";setTimeout((t=>this.contentEle.style.right="25rem"),0)}async hide(){if(!this.isVisible){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return}this.open=false;this.modal.deactivate();s(this.host);if(!this.contentEle)return;this.contentEle.style.transition="";this.contentEle.style.position="";this.contentEle.style.overflow="";this.contentEle.style.right=""}handleCloseClick(){this.hide()}handleKeyDown(t){if(t.key==="Escape"){this.hide()}}handleOverlayClick(){const t=this.nanoOverlayDismiss.emit();if(!t.defaultPrevented){this.hide()}}handleSlotChange(){this.hasFooter=!!this.host.querySelector('[slot="footer"]')}handleTransitionEnd(t){const e=t.target;if(t.propertyName==="transform"&&e.classList.contains("drawer__panel")){this.isVisible=this.open;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit();if(this.open){this.panel.focus()}}}render(){const t="drawer--"+this.placement;const e="drawer--"+this.type;let a=this.host.ownerDocument.dir==="rtl";return r(i,{dir:a?"rtl":null},r("div",{part:"base",class:{drawer:true,"drawer--open":this.open,"drawer--visible":this.isVisible,[e]:true,[t]:true,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":this.hasFooter},onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},r("div",{part:"overlay",class:"drawer__overlay",onClick:this.handleOverlayClick}),r("div",{ref:t=>this.panel=t,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},!this.noHeader&&r("header",{part:"header",class:"drawer__header"},r("span",{part:"title",class:"drawer__title",id:`${this.componentId}-title`},r("slot",{name:"label"},this.label||String.fromCharCode(65279)))),r("div",{part:"body",class:"drawer__body"},r("slot",null)),r("footer",{part:"footer",class:"drawer__footer"},r("slot",{name:"footer",onSlotchange:this.handleSlotChange})))))}get host(){return a(this)}static get watchers(){return{open:["handleOpenChange"],type:["handleTypeChange"],contentSelector:["handleContentSelector"]}}};d.style=l;export{d as nano_drawer};
+//# sourceMappingURL=p-394c3c19.entry.js.map

package/dist/nano-components/{p-217f71aa.entry.js.map → p-394c3c19.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"names":["drawerCss","id","Drawer","[object Object]","hostRef","this","componentId","hasFooter","isVisible","open","label","placement","contained","noHeader","type","show","hide","contentEle","console","warn","contentSelector","host","ownerDocument","querySelector","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","handleContentSelector","unlockBodyScrolling","nanoShow","emit","defaultPrevented","activate","lockBodyScrolling","style","right","transition","position","overflow","setTimeout","_","nanoHide","deactivate","event","key","slOverlayDismiss","nanoOverlayDismiss","target","propertyName","classList","contains","nanoAfterShow","nanoAfterHide","panel","focus","placementClass","typeClass","isRtl","dir","h","Host","part","class","drawer","drawer--open","drawer--visible","drawer--contained","drawer--fixed","drawer--has-footer","onKeyDown","onTransitionEnd","onClick","ref","el","role","aria-modal","aria-hidden","aria-label","aria-labelledby","tabIndex","name","String","fromCharCode","onSlotchange"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/utilities/css-patterns/visually_hidden';\n\n:host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background-color: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';\n  * @prop --overlay-color: Defaults to 'hsla(203, 10%, 20%, 0.5)';\n  */\n\n  position: relative;\n  display: block;\n\n  --size: 25rem;\n  --panel-background-color: white;\n  --panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  --overlay-color: hsla(203, 10%, 20%, 0.5);\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: 2000;\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--panel-background-color);\n  box-shadow: var(--panel-shadow);\n  transition: 250ms transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--start .drawer__panel {\n  @include position-horizontal(0, auto);\n  @include transform(translate3d(-100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--end .drawer__panel {\n  @include position-horizontal(auto, 0);\n  @include transform(translate3d(100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--open .drawer__panel {\n  transform: translate(0, 0);\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  // font-size: var(--sl-font-size-large);\n  // line-height: var(--sl-line-height-dense);\n  padding: 20px;\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  // font-size: var(--sl-font-size-x-large);\n  // padding: 0 var(--sl-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  // padding: var(--sl-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  // padding: var(--sl-spacing-large);\n\n  // ::slotted(sl-button:not(:last-of-type)) {\n  //   margin-right: var(--sl-spacing-x-small);\n  // }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--overlay-color);\n  opacity: 0;\n  transition: 250ms opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 1;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\n\nlet id = 0;\n\n/**\n * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24\n * @slot - The drawer's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  private componentId = `drawer-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private contentEle: HTMLElement;\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /**\n   * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.\n   */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  /**\n   * The display type of the drawer\n   */\n  @Prop() type: 'overlay' | 'reveal' | 'push' = 'overlay';\n\n  /**\n   * Required for 'reveal' and 'push' types\n   * A valid DOM selector of the content element that this drawer will push or reveal underneath\n   * Please remember - elements wrapping the content element must be 'overflow: hidden'\n   * otherwise menus will be shown when closed\n   */\n  @Prop() contentSelector: string;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('type')\n  handleTypeChange() {\n    if (this.type !== 'push' && this.type !== 'reveal') return;\n    if (!this.contentEle) {\n      this.type = 'overlay';\n      console.warn('a valid contentSelector must be set');\n      return;\n    }\n  }\n\n  @Watch('contentSelector')\n  handleContentSelector() {\n    if (!this.contentSelector) this.contentEle = null;\n    else\n      this.contentEle = (this.host.ownerDocument as Document).querySelector(\n        this.contentSelector\n      );\n  }\n\n  /**\n   * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the drawer opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the drawer closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /**\n   * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.\n   */\n  @Event() nanoOverlayDismiss: EventEmitter;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host);\n  }\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    this.handleContentSelector();\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (!this.contentEle || (this.type !== 'push' && this.type !== 'reveal'))\n      return;\n    this.contentEle.style.right = '0';\n    this.contentEle.style.transition = 'all ease 250ms';\n    this.contentEle.style.position = 'relative';\n    this.contentEle.style.overflow = 'hidden';\n    setTimeout((_) => (this.contentEle.style.right = '25rem'), 0);\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n\n    if (!this.contentEle) return;\n    this.contentEle.style.transition = '';\n    this.contentEle.style.position = '';\n    this.contentEle.style.overflow = '';\n    this.contentEle.style.right = '';\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  private handleOverlayClick() {\n    const slOverlayDismiss = this.nanoOverlayDismiss.emit();\n\n    if (!slOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  private handleSlotChange() {\n    this.hasFooter = !!this.host.querySelector('[slot=\"footer\"]');\n  }\n\n  private handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (\n      event.propertyName === 'transform' &&\n      target.classList.contains('drawer__panel')\n    ) {\n      this.isVisible = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n\n      if (this.open) {\n        this.panel.focus();\n      }\n    }\n  }\n\n  render() {\n    const placementClass = 'drawer--' + this.placement;\n    const typeClass = 'drawer--' + this.type;\n\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host dir={isRtl ? 'rtl' : null}>\n        <div\n          part=\"base\"\n          class={{\n            drawer: true,\n            'drawer--open': this.open,\n            'drawer--visible': this.isVisible,\n            [typeClass]: true,\n            [placementClass]: true,\n            'drawer--contained': this.contained,\n            'drawer--fixed': !this.contained,\n            'drawer--has-footer': this.hasFooter,\n          }}\n          onKeyDown={this.handleKeyDown}\n          onTransitionEnd={this.handleTransitionEnd}\n        >\n          <div\n            part=\"overlay\"\n            class=\"drawer__overlay\"\n            onClick={this.handleOverlayClick}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"drawer__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            {!this.noHeader && (\n              <header part=\"header\" class=\"drawer__header\">\n                <span\n                  part=\"title\"\n                  class=\"drawer__title\"\n                  id={`${this.componentId}-title`}\n                >\n                  <slot name=\"label\">\n                    {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                    {this.label || String.fromCharCode(65279)}\n                  </slot>\n                </span>\n                {/* <sl-icon-button part=\"close-button\" class=\"drawer__close\" name=\"x\" onClick={this.handleCloseClick} /> */}\n              </header>\n            )}\n\n            <div part=\"body\" class=\"drawer__body\">\n              <slot />\n            </div>\n\n            <footer part=\"footer\" class=\"drawer__footer\">\n              <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"names":["drawerCss","id","Drawer","[object Object]","hostRef","this","componentId","hasFooter","isVisible","open","label","placement","contained","noHeader","type","show","hide","contentEle","console","warn","contentSelector","host","ownerDocument","querySelector","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","handleContentSelector","unlockBodyScrolling","nanoShow","emit","defaultPrevented","activate","lockBodyScrolling","style","right","transition","position","overflow","setTimeout","_","nanoHide","deactivate","event","key","slOverlayDismiss","nanoOverlayDismiss","target","propertyName","classList","contains","nanoAfterShow","nanoAfterHide","panel","focus","placementClass","typeClass","isRtl","dir","h","Host","part","class","drawer","drawer--open","drawer--visible","drawer--contained","drawer--fixed","drawer--has-footer","onKeyDown","onTransitionEnd","onClick","ref","el","role","aria-modal","aria-hidden","aria-label","aria-labelledby","tabIndex","name","String","fromCharCode","onSlotchange"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/utilities/css-patterns/visually_hidden';\n\n:host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background-color: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';\n  * @prop --overlay-color: Defaults to 'hsla(203, 10%, 20%, 0.5)';\n  */\n\n  position: relative;\n  display: block;\n\n  --size: 25rem;\n  --panel-background-color: white;\n  --panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  --overlay-color: hsla(203, 10%, 20%, 0.5);\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: 2000;\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--panel-background-color);\n  box-shadow: var(--panel-shadow);\n  transition: 250ms transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--start .drawer__panel {\n  @include position-horizontal(0, auto);\n  @include transform(translate3d(-100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--end .drawer__panel {\n  @include position-horizontal(auto, 0);\n  @include transform(translate3d(100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--open .drawer__panel {\n  transform: translate(0, 0);\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  // font-size: var(--sl-font-size-large);\n  // line-height: var(--sl-line-height-dense);\n  padding: 20px;\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  // font-size: var(--sl-font-size-x-large);\n  // padding: 0 var(--sl-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  // padding: var(--sl-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  // padding: var(--sl-spacing-large);\n\n  // ::slotted(sl-button:not(:last-of-type)) {\n  //   margin-right: var(--sl-spacing-x-small);\n  // }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--overlay-color);\n  opacity: 0;\n  transition: 250ms opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 1;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\n\nlet id = 0;\n\n/**\n * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24\n * @slot - The drawer's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  private componentId = `drawer-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private contentEle: HTMLElement;\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /**\n   * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.\n   */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  /**\n   * The display type of the drawer\n   */\n  @Prop() type: 'overlay' | 'reveal' | 'push' = 'overlay';\n\n  /**\n   * Required for 'reveal' and 'push' types\n   * A valid DOM selector of the content element that this drawer will push or reveal underneath\n   * Please remember - elements wrapping the content element must be 'overflow: hidden'\n   * otherwise menus will be shown when closed\n   */\n  @Prop() contentSelector: string;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('type')\n  handleTypeChange() {\n    if (this.type !== 'push' && this.type !== 'reveal') return;\n    if (!this.contentEle) {\n      this.type = 'overlay';\n      console.warn('a valid contentSelector must be set');\n      return;\n    }\n  }\n\n  @Watch('contentSelector')\n  handleContentSelector() {\n    if (!this.contentSelector) this.contentEle = null;\n    else\n      this.contentEle = (this.host.ownerDocument as Document).querySelector(\n        this.contentSelector\n      );\n  }\n\n  /**\n   * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the drawer opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the drawer closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /**\n   * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.\n   */\n  @Event() nanoOverlayDismiss: EventEmitter;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host);\n  }\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    this.handleContentSelector();\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (!this.contentEle || (this.type !== 'push' && this.type !== 'reveal'))\n      return;\n    this.contentEle.style.right = '0';\n    this.contentEle.style.transition = 'all ease 250ms';\n    this.contentEle.style.position = 'relative';\n    this.contentEle.style.overflow = 'hidden';\n    setTimeout((_) => (this.contentEle.style.right = '25rem'), 0);\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n\n    if (!this.contentEle) return;\n    this.contentEle.style.transition = '';\n    this.contentEle.style.position = '';\n    this.contentEle.style.overflow = '';\n    this.contentEle.style.right = '';\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  private handleOverlayClick() {\n    const slOverlayDismiss = this.nanoOverlayDismiss.emit();\n\n    if (!slOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  private handleSlotChange() {\n    this.hasFooter = !!this.host.querySelector('[slot=\"footer\"]');\n  }\n\n  private handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (\n      event.propertyName === 'transform' &&\n      target.classList.contains('drawer__panel')\n    ) {\n      this.isVisible = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n\n      if (this.open) {\n        this.panel.focus();\n      }\n    }\n  }\n\n  render() {\n    const placementClass = 'drawer--' + this.placement;\n    const typeClass = 'drawer--' + this.type;\n\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host dir={isRtl ? 'rtl' : null}>\n        <div\n          part=\"base\"\n          class={{\n            drawer: true,\n            'drawer--open': this.open,\n            'drawer--visible': this.isVisible,\n            [typeClass]: true,\n            [placementClass]: true,\n            'drawer--contained': this.contained,\n            'drawer--fixed': !this.contained,\n            'drawer--has-footer': this.hasFooter,\n          }}\n          onKeyDown={this.handleKeyDown}\n          onTransitionEnd={this.handleTransitionEnd}\n        >\n          <div\n            part=\"overlay\"\n            class=\"drawer__overlay\"\n            onClick={this.handleOverlayClick}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"drawer__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            {!this.noHeader && (\n              <header part=\"header\" class=\"drawer__header\">\n                <span\n                  part=\"title\"\n                  class=\"drawer__title\"\n                  id={`${this.componentId}-title`}\n                >\n                  <slot name=\"label\">\n                    {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                    {this.label || String.fromCharCode(65279)}\n                  </slot>\n                </span>\n                {/* <sl-icon-button part=\"close-button\" class=\"drawer__close\" name=\"x\" onClick={this.handleCloseClick} /> */}\n              </header>\n            )}\n\n            <div part=\"body\" class=\"drawer__body\">\n              <slot />\n            </div>\n\n            <footer part=\"footer\" class=\"drawer__footer\">\n              <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}