@nanoporetech-digital/components 1.13.17 → 1.13.21

package/dist/esm-es5/nano-range.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/range/range.scss?tag=nano-range&encapsulation=scoped","src/components/range/range.tsx"],"names":["rangeCss","Range","class_1","hostRef","_this","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","prototype","debounceChanged","nanoChange","debounceEvent","minChanged","updateRatio","maxChanged","disabledChanged","gesture","enable","valueChanged","connectedCallback","disconnectedCallback","destroy","undefined","componentDidLoad","rangeSlider","_a","import","_b","sent","createGesture","el","gestureName","gesturePriority","threshold","onStart","ev","onMove","onEnd","getValue","nanoStyle","interactive","interactive-disabled","detail","rect","getBoundingClientRect","currentX","ratio","left","width","document","dir","pressedKnob","Math","abs","setFocus","update","valueToRatio","ratioToValue","Object","defineProperty","valA","valB","shadowRoot","knobEl","querySelector","focus","render","ratioLower","ratioUpper","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/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/esm-es5/nano-rating.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(n,t,e,i){function o(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,a){function r(n){try{l(i.next(n))}catch(t){a(t)}}function s(n){try{l(i["throw"](n))}catch(t){a(t)}}function l(n){n.done?e(n.value):o(n.value).then(r,s)}l((i=i.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var e={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},i,o,a,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(n){return function(t){return l([n,t])}}function l(r){if(i)throw new TypeError("Generator is already executing.");while(e)try{if(i=1,o&&(a=r[0]&2?o["return"]:r[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,r[1])).done)return a;if(o=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:e.label++;return{value:r[1],done:false};case 5:e.label++;o=r[1];r=[0];continue;case 7:r=e.ops.pop();e.trys.pop();continue;default:if(!(a=e.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){e=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){e.label=r[1];break}if(r[0]===6&&e.label<a[1]){e.label=a[1];a=r;break}if(a&&e.label<a[2]){e.label=a[2];e.ops.push(r);break}if(a[2])e.ops.pop();e.trys.pop();continue}r=t.call(n,e)}catch(s){r=[6,s];o=0}finally{i=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-20becda2.js";import{f as focusVisible}from"./focus-visible-d6d6c6fb.js";import{c as clamp}from"./utils-fd1ada22.js";var ratingCss=".sc-nano-rating-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-rating-h{--symbol-color:#b5aea7;--symbol-color-active:#f5cc49;--symbol-spacing:0.25rem;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin:0 calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;width:100%;-webkit-transition:-webkit-box-shadow 0.15s ease;transition:-webkit-box-shadow 0.15s ease;transition:box-shadow 0.15s ease;transition:box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.focus-visible.sc-nano-rating:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow)}.rating__symbols.sc-nano-rating{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(nano-icon){background-color:currentColor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;top:0;left:0;color:var(--symbol-color-active);pointer-events:none;width:100%}.rating__symbol.sc-nano-rating{-webkit-transition:0.2s -webkit-transform;transition:0.2s -webkit-transform;transition:0.2s transform;transition:0.2s transform, 0.2s -webkit-transform;text-align:center}.rating__symbol--hover.sc-nano-rating{-webkit-transform:scale(1.2);transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{-webkit-transform:none !important;transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";var CANSHADOW=!!document.head.attachShadow;var Rating=function(){function n(n){var t=this;registerInstance(this,n);this.nanoChange=createEvent(this,"nanoChange",7);this.nanoBlur=createEvent(this,"nanoBlur",7);this.nanoFocus=createEvent(this,"nanoFocus",7);this.hoverValue=0;this.isHovering=false;this.value=0;this.max=5;this.precision=1;this.readonly=false;this.disabled=false;this.name="";this.symbolName="solid/star";this.symbol=function(n){return'<nano-icon name="'+t.symbolName+'"></nano-icon>'};this.handleClick=function(n){if(t.disabled||t.readonly){return}var e=t.getValueFromMousePosition(n);t.value=e===t.value?0:e;t.isHovering=false};this.handleKeyDown=function(n){if(t.disabled||t.readonly){return}if(n.key==="ArrowLeft"){var e=n.shiftKey?1:t.precision;t.value=t.roundToPrecision(Math.max(0,t.value-e));n.preventDefault()}if(n.key==="ArrowRight"){var i=n.shiftKey?1:t.precision;t.value=t.roundToPrecision(Math.min(t.max,t.value+i));n.preventDefault()}if(n.key==="Home"){t.value=0;n.preventDefault()}if(n.key==="End"){t.value=t.max;n.preventDefault()}};this.handleMouseEnter=function(){t.isHovering=true};this.handleMouseLeave=function(){t.isHovering=false};this.handleFocus=function(){t.nanoFocus.emit()};this.handleBlur=function(){t.nanoBlur.emit()};this.handleMouseMove=function(n){t.hoverValue=t.getValueFromMousePosition(n)}}n.prototype.handleValueChange=function(){this.nanoChange.emit()};n.prototype.handleSymbolChange=function(){var n=this;this.symbol=function(t){return'<nano-icon name="'+n.symbolName+'"></nano-icon>'}};n.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){this.rating.focus();return[2]}))}))};n.prototype.removeFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){this.rating.blur();return[2]}))}))};n.prototype.getValueFromMousePosition=function(n){var t=this.rating.getBoundingClientRect().left;var e=this.rating.getBoundingClientRect().width;var i;i=this.roundToPrecision((n.clientX-t)/e*this.max,this.precision);if(this.isRtl)i=this.max+this.precision-i;return clamp(i,0,this.max)};n.prototype.roundToPrecision=function(n,t){if(t===void 0){t=.5}var e=1/t;return Math.ceil(n*e)/e};n.prototype.clip=function(n){if(!this.rating)return;var t=this.rating.getBoundingClientRect().width;if(this.isRtl)return"rect(0, "+t+"px, 2em, "+(t-t/100*(n/this.max*100))+"px)";return"rect(0, "+t/100*(n/this.max*100)+"px, 2em, 0)"};n.prototype._getRoot=function(){return this.host.shadowRoot?this.host.shadowRoot:this.host};n.prototype._fixClassNames=function(){var n=this.rating.className.split(" ").filter((function(n){return n.match(/^sc-nano/)}));var t=this._getRoot().querySelectorAll("*");if(!t)return;Array.from(t).map((function(t){n.map((function(n){return t.classList.add(n)}))}))};n.prototype.componentDidLoad=function(){var n=this;focusVisible.observe(this.rating);setTimeout((function(){return n.indicator.style.clip=n.clip(n.value)}),20)};n.prototype.connectedCallback=function(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"};n.prototype.disconnectedCallback=function(){focusVisible.unobserve(this.rating)};n.prototype.componentDidRender=function(){if(!this.host.shadowRoot||!CANSHADOW)this._fixClassNames()};n.prototype.render=function(){var n=this;this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";var t=Array.from(Array(this.max).keys());var e=0;if(this.disabled||this.readonly){e=this.value}else{e=this.isHovering?this.hoverValue:this.value}return h("div",{class:"rating-wrap"},h("div",{dir:this.isRtl?"rtl":null,ref:function(t){return n.rating=t},part:"base",class:{rating:true,"rating--readonly":this.readonly,"rating--disabled":this.disabled},"aria-disabled":this.disabled?"true":"false","aria-readonly":this.readonly?"true":"false","aria-valuenow":this.value,"aria-valuemin":0,"aria-valuemax":this.max,tabIndex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onMouseMove:this.handleMouseMove,onFocus:this.handleFocus,onBlur:this.handleBlur},h("span",{class:"rating__symbols rating__symbols--inactive"},t.map((function(t){return h("span",{class:{rating__symbol:true,"rating__symbol--hover":n.isHovering&&Math.ceil(e)===t+1},role:"presentation",onMouseEnter:n.handleMouseEnter,innerHTML:n.symbol(t+1)})}))),h("span",{ref:function(t){return n.indicator=t},class:"rating__symbols rating__symbols--indicator",style:{clip:this.clip(e)}},t.map((function(t){return h("span",{class:{rating__symbol:true,"rating__symbol--hover":n.isHovering&&Math.ceil(e)===t+1},role:"presentation",innerHTML:n.symbol(t+1)})}))),h("input",{type:"hidden",name:this.name,value:this.value,disabled:this.disabled||this.readonly})))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["handleValueChange"],symbolName:["handleSymbolChange"]}},enumerable:false,configurable:true});return n}();Rating.style=ratingCss;export{Rating as nano_rating};
+//# sourceMappingURL=nano-rating.entry.js.map

package/dist/esm-es5/nano-rating.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"names":["ratingCss","CANSHADOW","document","head","attachShadow","Rating","class_1","hostRef","_this","this","hoverValue","isHovering","value","max","precision","readonly","disabled","name","symbolName","symbol","_","handleClick","event","newValue","getValueFromMousePosition","handleKeyDown","key","decrement","shiftKey","roundToPrecision","Math","preventDefault","increment","min","handleMouseEnter","handleMouseLeave","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","handleMouseMove","prototype","handleValueChange","nanoChange","handleSymbolChange","setFocus","rating","focus","removeFocus","blur","containerLeft","getBoundingClientRect","left","containerWidth","width","num","clientX","isRtl","clamp","numberToRound","multiplier","ceil","clip","displayValue","tw","_getRoot","host","shadowRoot","_fixClassNames","ctxClasses","className","split","filter","classStr","match","eles","querySelectorAll","Array","from","map","ele","classList","add","componentDidLoad","focusVisible","observe","setTimeout","indicator","style","connectedCallback","dir","ownerDocument","disconnectedCallback","unobserve","componentDidRender","render","counter","keys","h","class","ref","el","part","rating--readonly","rating--disabled","aria-disabled","aria-readonly","aria-valuenow","aria-valuemin","aria-valuemax","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","index","rating__symbol","rating__symbol--hover","role","innerHTML","span","type"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n  */\n\n  --symbol-color: #{$color-palegrey};\n  --symbol-color-active: #{$color-yellow};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin: 0 calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  width: 100%;\n  transition: box-shadow 0.15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(nano-icon) {\n        background-color: currentColor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      top: 0;\n      left: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      width: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: 0.2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled,\n  &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true,\n})\nexport class Rating implements ComponentInterface {\n  private rating: HTMLElement;\n  private isRtl: boolean;\n  private indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   */\n  @Prop() symbol = (_: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    this.symbol = (_: number) =>\n      '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  private _getRoot() {\n    return this.host.shadowRoot ? this.host.shadowRoot : this.host;\n  }\n\n  private _fixClassNames() {\n    let ctxClasses = this.rating.className\n      .split(' ')\n      .filter((classStr) => classStr.match(/^sc-nano/));\n    let eles = this._getRoot().querySelectorAll('*');\n    if (!eles) return;\n    Array.from(eles).map((ele: HTMLElement) => {\n      ctxClasses.map((classStr) => ele.classList.add(classStr));\n    });\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  componentDidRender() {\n    if (!this.host.shadowRoot || !CANSHADOW) this._fixClassNames();\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    let counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={(el) => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/esm-es5/nano-resize-observe_2.entry.js

@@ -0,0 +1,2 @@
+var __spreadArray=this&&this.__spreadArray||function(e,t){for(var r=0,i=t.length,n=e.length;r<i;r++,n++)e[n]=t[r];return e};import{r as registerInstance,c as createEvent,i as readTask,h,e as Host,g as getElement}from"./index-20becda2.js";import{i as index}from"./ResizeObserver.es-e35e1ee3.js";import{d as debounce}from"./throttle-e3c852aa.js";var ResizeObserve=function(){function e(e){var t=this;registerInstance(this,e);this.nanoResizeStateChange=createEvent(this,"nanoResizeStateChange",7);this.classNames=[];this.assessChanges=function(){if(!t.currentWidth&&!t.currentHeight)return;var e={h:new Map,w:new Map};var r=false;Object.keys(t.appliedStates).forEach((function(i){var n;if(i==="h")n=t.currentHeight;else n=t.currentWidth;t.appliedStates[i].forEach((function(t,s){if(n>=s&&t.applied===false){t.applied=true;e[i].set(s,t);r=true}else if(n<s&&t.applied===true){t.applied=false;e[i].set(s,t);r=true}}))}));if(r)t.applyChanges(e)}}e.prototype.dimensionChanged=function(){this.assessChanges()};e.prototype.statesChanged=function(){var e=this;if(!this.states)return;if(!this.ro)this.attachRO();var t=function(e){var t=e.split(/(\d+)/).filter((function(e){return e.length}));return{bp:parseInt(t[0]),dir:t[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((function(r){r=r.trim();if(r.includes(" ")){var i=r.split(" "),n=i[0],s=i.slice(1);var a=t(n),o=a.bp,c=a.dir;e.appliedStates[c].set(o,{states:s,applied:false})}else{var l=t(r),o=l.bp,c=l.dir;e.appliedStates[c].set(o,{applied:false})}}))};e.prototype.applyChanges=function(e){var t=__spreadArray([],this.classNames);Object.keys(e).forEach((function(r){e[r].forEach((function(e){if(!e.states)return;e.states.map((function(r){if(e.applied)t.push(r);else t=t.filter((function(e){return e!==r}))}))}))}));this.classNames=t;this.nanoResizeStateChange.emit(this.toSimpleObj(e))};e.prototype.toSimpleObj=function(e){var t={};Object.keys(e).forEach((function(r){e[r].forEach((function(e,i){t[i+r]=e.applied}))}));return t};e.prototype.attachRO=function(){var e=this;this.ro=new index((function(t){for(var r=0,i=t;r<i.length;r++){var n=i[r];e.currentWidth=n.contentRect.width;e.currentHeight=n.contentRect.height}}));this.ro.observe(this.el)};e.prototype.connectedCallback=function(){this.assessChanges=debounce(this.assessChanges,50)};e.prototype.componentDidLoad=function(){var e=this;if(!this.states)return;if(!this.currentWidth||!this.currentHeight){readTask((function(){var t=e.el.getBoundingClientRect(),r=t.width,i=t.height;e.currentWidth=r;e.currentHeight=i}))}this.statesChanged()};e.prototype.disconnectedCallback=function(){if(this.ro)this.ro.disconnect()};e.prototype.render=function(){var e;var t=this;return h(Host,{class:(e={},e[this.classNames.join(" ")]=true,e)},h("div",{ref:function(e){return t.el=e}},h("slot",null)))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"],states:["statesChanged"]}},enumerable:false,configurable:true});return e}();ResizeObserve.style=":host { display: inline-block } div { height: 100%; }";var skeletonCss=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--base-color-rgb:var(--nano-skeleton-base-rgb, 228, 230, 232);--color:var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));display:block;position:relative;border-radius:0.25rem;height:1em}.skeleton{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100%;border-radius:inherit}.skeleton__indicator{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:var(--color);border-radius:inherit}.skeleton.animate .skeleton__indicator{background:-webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;-webkit-animation:loader 6s ease-in-out infinite;animation:loader 6s ease-in-out infinite}@-webkit-keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}";var Skeleton=function(){function e(e){registerInstance(this,e);this.animated=true}e.prototype.render=function(){return h("div",{class:{skeleton:true,animate:this.animated}},h("div",{class:"skeleton__indicator"}))};return e}();Skeleton.style=skeletonCss;export{ResizeObserve as nano_resize_observe,Skeleton as nano_skeleton};
+//# sourceMappingURL=nano-resize-observe_2.entry.js.map

package/dist/esm-es5/nano-resize-observe_2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"names":["ResizeObserve","hostRef","_this","this","classNames","assessChanges","currentWidth","currentHeight","changedStates","h","Map","w","hasChanged","Object","keys","appliedStates","forEach","dimType","dim","state","bp","applied","set","applyChanges","prototype","dimensionChanged","statesChanged","states","ro","attachRO","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","includes","_a","key","classes","slice","_b","_c","changes","__spreadArray","push","cl","nanoResizeStateChange","emit","toSimpleObj","stateMaps","retObj","ResizeObserver","entries","_i","entries_1","entry","contentRect","width","height","observe","el","connectedCallback","debounce","componentDidLoad","readTask","getBoundingClientRect","disconnectedCallback","disconnect","render","Host","class","join","ref","div","skeletonCss","Skeleton","animated","skeleton","animate"],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { debounce } from '../../utils/utils';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-resize-observe',\n  shadow: true,\n  styles: `:host { display: inline-block } div { height: 100%; }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n  private el: HTMLDivElement;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n\n  /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n    if (!this.ro) this.attachRO();\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n  };\n\n  private applyChanges(changes: StateMaps) {\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) classNames.push(st);\n          else classNames = classNames.filter((cl) => cl !== st);\n        });\n      });\n    });\n    this.classNames = classNames;\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.currentWidth = entry.contentRect.width;\n        this.currentHeight = entry.contentRect.height;\n      }\n    });\n    this.ro.observe(this.el);\n  }\n\n  connectedCallback() {\n    this.assessChanges = debounce(this.assessChanges, 50);\n  }\n\n  componentDidLoad() {\n    if (!this.states) return;\n    if (!this.currentWidth || !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.el.getBoundingClientRect();\n        this.currentWidth = width;\n        this.currentHeight = height;\n      });\n    }\n    this.statesChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.classNames.join(' ')]: true,\n        }}\n      >\n        <div ref={(div) => (this.el = div)}>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$skeleton-color-rgb};\n   * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n   * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n   */\n\n  --base-color-rgb: #{$skeleton-color-rgb};\n  --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n  --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));\n\n  display: block;\n  position: relative;\n  border-radius: 0.25rem;\n  height: 1em;\n}\n\n.skeleton {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n  background:\n    linear-gradient(\n      270deg,\n      var(--tint),\n      var(--color),\n      var(--color),\n      var(--tint)\n    );\n  background-size: 400% 100%;\n  animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n  0% {\n    background-position: 200% 0;\n  }\n\n  to {\n    background-position: -200% 0;\n  }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n  tag: 'nano-skeleton',\n  styleUrl: 'skeleton.scss',\n  shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n  /** When `true`, the skeleton will animate. */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          skeleton: true,\n          animate: this.animated,\n        }}\n      >\n        <div class=\"skeleton__indicator\" />\n      </div>\n    );\n  }\n}\n"]}

package/dist/esm-es5/nano-select-option.entry.js

@@ -0,0 +1,2 @@
+import{r as registerInstance,h}from"./index-20becda2.js";var selectOptionCss=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:none !important}:host *{display:none !important}";var SelectOption=function(){function e(e){registerInstance(this,e);this.optId="nano-option-"+optIds++;this.label="";this.value="";this.selected=false;this.disabled=false}e.prototype.render=function(){return h("div",{id:this.optId,role:"option","data-value":this.value,"aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},h("slot",{name:"start"}),this.label?this.label:h("slot",null),h("slot",{name:"end"}))};return e}();var optIds=0;SelectOption.style=selectOptionCss;export{SelectOption as nano_select_option};
+//# sourceMappingURL=nano-select-option.entry.js.map

package/dist/esm-es5/nano-select-option.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/select/select-option.scss?tag=nano-select-option&encapsulation=shadow","src/components/select/select-option.tsx"],"names":["selectOptionCss","SelectOption","hostRef","this","optId","optIds","label","value","selected","disabled","prototype","render","h","id","role","data-value","aria-selected","aria-disabled","name"],"mappings":"yDAAA,IAAMA,gBAAkB,wMCSXC,aAAY,WALzB,SAAAA,EAAAC,4BAMUC,KAAAC,MAAQ,eAAeC,SAOvBF,KAAAG,MAAgB,GAKhBH,KAAAI,MAAgB,GAKhBJ,KAAAK,SAAoB,MAKpBL,KAAAM,SAAoB,MAE5BR,EAAAS,UAAAC,OAAA,WACE,OACEC,EAAA,MAAA,CACEC,GAAIV,KAAKC,MACTU,KAAK,SAAQC,aACDZ,KAAKI,MAAKS,gBACPb,KAAKK,SAAW,OAAS,QAAOS,gBAChCd,KAAKM,SAAW,OAAS,SAExCG,EAAA,OAAA,CAAMM,KAAK,UACVf,KAAKG,MAAQH,KAAKG,MAAQM,EAAA,OAAA,MAC3BA,EAAA,OAAA,CAAMM,KAAK,mBApCM,GA0CzB,IAAIb,OAAS","sourcesContent":["@import '../../global/style/utilities/globals';\n\n:host {\n  // for now.. as it doesn't work.\n  display: none !important;\n\n  * {\n    display: none !important;\n  }\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n\n  // opacity: inherit;\n  // display: block;\n  // color: var(--color) !important;\n  // margin: var(--margin);\n\n  // ::slotted(*),\n  // &::slotted(*),\n  // * {\n  //   box-sizing: border-box;\n  // }\n\n  // ::slotted(button),\n  // &::slotted(button),\n  // button {\n  //   background: none;\n  //   border: none;\n  // }\n\n  // ::slotted(button),\n  // &::slotted(button),\n  // ::slotted(a),\n  // &::slotted(a),\n  // button,\n  // a {\n  //   @include text-inherit();\n  //   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));\n  //   display: var(--display, block);\n  //   white-space: nowrap;\n\n  //   color: var(--color) !important;\n  //   background-color: var(--bg-color);\n  //   display: block;\n  // }\n\n  // ::slotted(nano-icon[slot=\"icon-start\"]) {\n  //   @include padding(null, var(--padding-end), null, null);\n  // }\n\n  // ::slotted(nano-icon[slot=\"icon-end\"]) {\n  //   @include padding(null, null, null, var(--padding-start));\n  // }\n}\n","import { Component, Prop, h } from '@stencil/core';\n/**\n * Select options to be used with [select](/story/nano-components-select) elements\n */\n@Component({\n  tag: 'nano-select-option',\n  styleUrl: 'select-option.scss',\n  shadow: true,\n})\nexport class SelectOption {\n  private optId = `nano-option-${optIds++}`;\n\n  // @Element() private el: HTMLNanoSelectOptionElement;\n\n  /**\n   * Label of the option\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Value of the option\n   */\n  @Prop() value: string = '';\n\n  /**\n   * Whether this option is selected\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Whether this option should be disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <div\n        id={this.optId}\n        role=\"option\"\n        data-value={this.value}\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <slot name=\"start\" />\n        {this.label ? this.label : <slot />}\n        <slot name=\"end\" />\n      </div>\n    );\n  }\n}\n\nlet optIds = 0;\n"]}

package/dist/esm-es5/nano-slide.entry.js

@@ -0,0 +1,2 @@
+import{r as registerInstance,c as createEvent,h,e as Host}from"./index-20becda2.js";var slideCss=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;min-height:100%;font-size:18px;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-webkit-transition:opacity 0.2s;transition:opacity 0.2s;opacity:0}:host([ready]){opacity:1}";var Slide=function(){function e(e){registerInstance(this,e);this.nanoSlideReady=createEvent(this,"nanoSlideReady",7);this.ready=null}e.prototype.readyChange=function(e,t){if(typeof t!=="undefined"&&t===false&&e===true){this.nanoSlideReady.emit()}};e.prototype.componentDidLoad=function(){var e=this;if(typeof this.ready==="boolean")return;setTimeout((function(){e.nanoSlideReady.emit();e.ready=true}))};e.prototype.render=function(){return h(Host,null,h("slot",null))};Object.defineProperty(e,"watchers",{get:function(){return{ready:["readyChange"]}},enumerable:false,configurable:true});return e}();Slide.style=slideCss;export{Slide as nano_slide};
+//# sourceMappingURL=nano-slide.entry.js.map

package/dist/esm-es5/nano-slide.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/slides/slide.scss?tag=nano-slide&encapsulation=shadow","src/components/slides/slide.tsx"],"names":["slideCss","Slide","hostRef","this","ready","prototype","readyChange","newReady","oldReady","nanoSlideReady","emit","componentDidLoad","_this","setTimeout","render","h","Host"],"mappings":"oFAAA,IAAMA,SAAW,0lBCgBJC,MAAK,WALlB,SAAAA,EAAAC,qFAe0CC,KAAAC,MAAwB,KAGhEH,EAAAI,UAAAC,YAAA,SAAYC,EAA0BC,GACpC,UACSA,IAAa,aACpBA,IAAa,OACbD,IAAa,KACb,CACAJ,KAAKM,eAAeC,SAIxBT,EAAAI,UAAAM,iBAAA,WAAA,IAAAC,EAAAT,KAEE,UAAWA,KAAKC,QAAU,UAAW,OACrCS,YAAW,WACTD,EAAKH,eAAeC,OACpBE,EAAKR,MAAQ,SAIjBH,EAAAI,UAAAS,OAAA,WACE,OACEC,EAACC,KAAI,KACHD,EAAA,OAAA,wIAnCU","sourcesContent":["// Slide\n// --------------------------------------------------\n\n:host {\n  // Center slide text vertically\n  display: flex;\n  position: relative;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  min-height: 100%;\n  font-size: 18px;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  transition: opacity 0.2s;\n  opacity: 0;\n}\n\n:host([ready]) {\n  opacity: 1;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  h,\n  Event,\n  EventEmitter,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'nano-slide',\n  styleUrl: 'slide.scss',\n  shadow: true,\n})\nexport class Slide implements ComponentInterface {\n  /**\n   * Fired when the slide has loaded.\n   */\n  @Event() nanoSlideReady!: EventEmitter<void>;\n\n  /**\n   * Used to to inform the parent slides components of readiness.\n   * This will automatically be set to true when the slide has loaded but can be set and updated manually.\n   */\n  @Prop({ mutable: true, reflect: true }) ready: boolean | null = null;\n\n  @Watch('ready')\n  readyChange(newReady: boolean | null, oldReady?: boolean | null) {\n    if (\n      typeof oldReady !== 'undefined' &&\n      oldReady === false &&\n      newReady === true\n    ) {\n      this.nanoSlideReady.emit();\n    }\n  }\n\n  componentDidLoad() {\n    // ready state is being loaded manually\n    if (typeof this.ready === 'boolean') return;\n    setTimeout(() => {\n      this.nanoSlideReady.emit();\n      this.ready = true;\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/esm-es5/nano-slides.entry.js

@@ -0,0 +1,20 @@
+var __awaiter=this&&this.__awaiter||function(t,e,i,n){function s(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,r){function o(t){try{l(n.next(t))}catch(e){r(e)}}function a(t){try{l(n["throw"](t))}catch(e){r(e)}}function l(t){t.done?i(t.value):s(t.value).then(o,a)}l((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,s,r,o;return o={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function a(t){return function(e){return l([t,e])}}function l(o){if(n)throw new TypeError("Generator is already executing.");while(i)try{if(n=1,s&&(r=o[0]&2?s["return"]:o[0]?s["throw"]||((r=s["return"])&&r.call(s),0):s.next)&&!(r=r.call(s,o[1])).done)return r;if(s=0,r)o=[o[0]&2,r.value];switch(o[0]){case 0:case 1:r=o;break;case 4:i.label++;return{value:o[1],done:false};case 5:i.label++;s=o[1];o=[0];continue;case 7:o=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(o[0]===6||o[0]===2)){i=0;continue}if(o[0]===3&&(!r||o[1]>r[0]&&o[1]<r[3])){i.label=o[1];break}if(o[0]===6&&i.label<r[1]){i.label=r[1];r=o;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(o);break}if(r[2])i.ops.pop();i.trys.pop();continue}o=e.call(t,i)}catch(a){o=[6,a];s=0}finally{n=r=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-20becda2.js";import{i as index}from"./ResizeObserver.es-e35e1ee3.js";import{c as createCommonjsModule,a as commonjsGlobal}from"./_commonjsHelpers-11ca3be1.js";var evEmitter=createCommonjsModule((function(t){(function(e,i){if(t.exports){t.exports=i()}else{e.EvEmitter=i()}})(typeof window!="undefined"?window:commonjsGlobal,(function(){function t(){}var e=t.prototype;e.on=function(t,e){if(!t||!e){return}var i=this._events=this._events||{};var n=i[t]=i[t]||[];if(n.indexOf(e)==-1){n.push(e)}return this};e.once=function(t,e){if(!t||!e){return}this.on(t,e);var i=this._onceEvents=this._onceEvents||{};var n=i[t]=i[t]||{};n[e]=true;return this};e.off=function(t,e){var i=this._events&&this._events[t];if(!i||!i.length){return}var n=i.indexOf(e);if(n!=-1){i.splice(n,1)}return this};e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(!i||!i.length){return}i=i.slice(0);e=e||[];var n=this._onceEvents&&this._onceEvents[t];for(var s=0;s<i.length;s++){var r=i[s];var o=n&&n[r];if(o){this.off(t,r);delete n[r]}r.apply(this,e)}return this};e.allOff=function(){delete this._events;delete this._onceEvents};return t}))}));var getSize=createCommonjsModule((function(t){
+/*!
+   * getSize v2.0.3
+   * measure size of elements
+   * MIT license
+   */
+(function(e,i){if(t.exports){t.exports=i()}else{e.getSize=i()}})(window,(function t(){function e(t){var e=parseFloat(t);var i=t.indexOf("%")==-1&&!isNaN(e);return i&&e}function i(){}var n=typeof console=="undefined"?i:function(t){console.error(t)};var s=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"];var r=s.length;function o(){var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0};for(var e=0;e<r;e++){var i=s[e];t[i]=0}return t}function a(t){var e=getComputedStyle(t);if(!e){n("Style returned "+e+". Are you running this code in a hidden iframe on Firefox? "+"See https://bit.ly/getsizebug1")}return e}var l=false;var h;function c(){if(l){return}l=true;var t=document.createElement("div");t.style.width="200px";t.style.padding="1px 2px 3px 4px";t.style.borderStyle="solid";t.style.borderWidth="1px 2px 3px 4px";t.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(t);var n=a(t);h=Math.round(e(n.width))==200;u.isBoxSizeOuter=h;i.removeChild(t)}function u(t){c();if(typeof t=="string"){t=document.querySelector(t)}if(!t||typeof t!="object"||!t.nodeType){return}var i=a(t);if(i.display=="none"){return o()}var n={};n.width=t.offsetWidth;n.height=t.offsetHeight;var l=n.isBorderBox=i.boxSizing=="border-box";for(var u=0;u<r;u++){var d=s[u];var f=i[d];var p=parseFloat(f);n[d]=!isNaN(p)?p:0}var v=n.paddingLeft+n.paddingRight;var g=n.paddingTop+n.paddingBottom;var y=n.marginLeft+n.marginRight;var m=n.marginTop+n.marginBottom;var b=n.borderLeftWidth+n.borderRightWidth;var S=n.borderTopWidth+n.borderBottomWidth;var w=l&&h;var x=e(i.width);if(x!==false){n.width=x+(w?0:v+b)}var k=e(i.height);if(k!==false){n.height=k+(w?0:g+S)}n.innerWidth=n.width-(v+b);n.innerHeight=n.height-(g+S);n.outerWidth=n.width+y;n.outerHeight=n.height+m;return n}return u}))}));var matchesSelector=createCommonjsModule((function(t){(function(e,i){if(t.exports){t.exports=i()}else{e.matchesSelector=i()}})(window,(function t(){var e=function(){var t=window.Element.prototype;if(t.matches){return"matches"}if(t.matchesSelector){return"matchesSelector"}var e=["webkit","moz","ms","o"];for(var i=0;i<e.length;i++){var n=e[i];var s=n+"MatchesSelector";if(t[s]){return s}}}();return function t(i,n){return i[e](n)}}))}));var utils=createCommonjsModule((function(t){(function(e,i){if(t.exports){t.exports=i(e,matchesSelector)}else{e.fizzyUIUtils=i(e,e.matchesSelector)}})(window,(function t(e,i){var n={};n.extend=function(t,e){for(var i in e){t[i]=e[i]}return t};n.modulo=function(t,e){return(t%e+e)%e};var s=Array.prototype.slice;n.makeArray=function(t){if(Array.isArray(t)){return t}if(t===null||t===undefined){return[]}var e=typeof t=="object"&&typeof t.length=="number";if(e){return s.call(t)}return[t]};n.removeFrom=function(t,e){var i=t.indexOf(e);if(i!=-1){t.splice(i,1)}};n.getParent=function(t,e){while(t.parentNode&&t!=document.body){t=t.parentNode;if(i(t,e)){return t}}};n.getQueryElement=function(t){if(typeof t=="string"){return document.querySelector(t)}return t};n.handleEvent=function(t){var e="on"+t.type;if(this[e]){this[e](t)}};n.filterFindElements=function(t,e){t=n.makeArray(t);var s=[];t.forEach((function(t){if(!(t instanceof HTMLElement)){return}if(!e){s.push(t);return}if(i(t,e)){s.push(t)}var n=t.querySelectorAll(e);for(var r=0;r<n.length;r++){s.push(n[r])}}));return s};n.debounceMethod=function(t,e,i){i=i||100;var n=t.prototype[e];var s=e+"Timeout";t.prototype[e]=function(){var t=this[s];clearTimeout(t);var e=arguments;var r=this;this[s]=setTimeout((function(){n.apply(r,e);delete r[s]}),i)}};n.docReady=function(t){var e=document.readyState;if(e=="complete"||e=="interactive"){setTimeout(t)}else{document.addEventListener("DOMContentLoaded",t)}};n.toDashed=function(t){return t.replace(/(.)([A-Z])/g,(function(t,e,i){return e+"-"+i})).toLowerCase()};var r=e.console;n.htmlInit=function(t,i){n.docReady((function(){var s=n.toDashed(i);var o="data-"+s;var a=document.querySelectorAll("["+o+"]");var l=document.querySelectorAll(".js-"+s);var h=n.makeArray(a).concat(n.makeArray(l));var c=o+"-options";var u=e.jQuery;h.forEach((function(e){var n=e.getAttribute(o)||e.getAttribute(c);var s;try{s=n&&JSON.parse(n)}catch(l){if(r){r.error("Error parsing "+o+" on "+e.className+": "+l)}return}var a=new t(e,s);if(u){u.data(e,i,a)}}))}))};return n}))}));function Cell(t,e){this.element=t;this.parent=e;this.create()}var proto$b=Cell.prototype;proto$b.create=function(){this.element.style.position="absolute";this.element.setAttribute("aria-hidden","true");this.x=0;this.shift=0;Array.from(this.element.querySelectorAll("*")).forEach((function(t){t.setAttribute("tabindex","-1")}))};proto$b.destroy=function(){this.unselect();this.element.style.position="";var t=this.parent.originSide;this.element.style[t]=""};proto$b.getSize=function(){this.size=getSize(this.element)};proto$b.setPosition=function(t){this.x=t;this.updateTarget();this.renderPosition(t)};proto$b.updateTarget=proto$b.setDefaultTarget=function(){var t=this.parent.originSide=="left"?"marginLeft":"marginRight";this.target=this.x+this.size[t]+this.size.width*this.parent.cellAlign};proto$b.renderPosition=function(t){var e=this.parent.originSide;this.element.style[e]=this.parent.getPositionValue(t)};proto$b.select=function(){this.element.classList.add("is-selected");this.element.removeAttribute("aria-hidden");Array.from(this.element.querySelectorAll("*")).forEach((function(t){t.removeAttribute("tabindex")}))};proto$b.unselect=function(){this.element.classList.remove("is-selected");this.element.setAttribute("aria-hidden","true");Array.from(this.element.querySelectorAll("*")).forEach((function(t){t.setAttribute("tabindex","-1")}))};proto$b.wrapShift=function(t){this.shift=t;this.renderPosition(this.x+this.parent.slideableWidth*t)};proto$b.remove=function(){this.element.parentNode.removeChild(this.element)};function Slide$1(t){this.parent=t;this.isOriginLeft=t.originSide=="left";this.cells=[];this.outerWidth=0;this.height=0}var proto$a=Slide$1.prototype;proto$a.addCell=function(t){this.cells.push(t);this.outerWidth+=t.size.outerWidth;this.height=Math.max(t.size.outerHeight,this.height);if(this.cells.length==1){this.x=t.x;var e=this.isOriginLeft?"marginLeft":"marginRight";this.firstMargin=t.size[e]}};proto$a.updateTarget=function(){var t=this.isOriginLeft?"marginRight":"marginLeft";var e=this.getLastCell();var i=e?e.size[t]:0;var n=this.outerWidth-(this.firstMargin+i);this.target=this.x+this.firstMargin+n*this.parent.cellAlign};proto$a.getLastCell=function(){return this.cells[this.cells.length-1]};proto$a.select=function(){this.cells.forEach((function(t){t.select()}))};proto$a.unselect=function(){this.cells.forEach((function(t){t.unselect()}))};proto$a.getCellElements=function(){return this.cells.map((function(t){return t.element}))};var proto$9={};proto$9.startAnimation=function(){if(this.isAnimating){return}this.isAnimating=true;this.restingFrames=0;this.animate()};proto$9.animate=function(){this.applyDragForce();this.applySelectedAttraction();var t=this.x;this.integratePhysics();this.positionSlider();this.settle(t);if(this.isAnimating){var e=this;requestAnimationFrame((function t(){e.animate()}))}};proto$9.positionSlider=function(){var t=this.x;if(this.options.wrapAround&&this.cells.length>1){t=utils.modulo(t,this.slideableWidth);t=t-this.slideableWidth;this.shiftWrapCells(t)}this.setTranslateX(t,this.isAnimating);this.dispatchScrollEvent()};proto$9.setTranslateX=function(t,e){t+=this.cursorPosition;t=this.options.rightToLeft?-t:t;var i=this.getPositionValue(t);this.slider.style.transform=e?"translate3d("+i+",0,0)":"translateX("+i+")"};proto$9.dispatchScrollEvent=function(){var t=this.slides[0];if(!t){return}var e=-this.x-t.target;var i=e/this.slidesWidth;this.dispatchEvent("scroll",null,[i,e])};proto$9.positionSliderAtSelected=function(){if(!this.cells.length){return}this.x=-this.selectedSlide.target;this.velocity=0;this.positionSlider()};proto$9.getPositionValue=function(t){if(this.options.percentPosition){return Math.round(t/this.size.innerWidth*1e4)*.01+"%"}else{return Math.round(t)+"px"}};proto$9.settle=function(t){if(!this.isPointerDown&&Math.round(this.x*100)==Math.round(t*100)){this.restingFrames++}if(this.restingFrames>2){this.isAnimating=false;delete this.isFreeScrolling;this.positionSlider();this.dispatchEvent("settle",null,[this.selectedIndex])}};proto$9.shiftWrapCells=function(t){var e=this.cursorPosition+t;this._shiftCells(this.beforeShiftCells,e,-1);var i=this.size.innerWidth-(t+this.slideableWidth+this.cursorPosition);this._shiftCells(this.afterShiftCells,i,1)};proto$9._shiftCells=function(t,e,i){for(var n=0;n<t.length;n++){var s=t[n];var r=e>0?i:0;s.wrapShift(r);e-=s.size.outerWidth}};proto$9._unshiftCells=function(t){if(!t||!t.length){return}for(var e=0;e<t.length;e++){t[e].wrapShift(0)}};proto$9.integratePhysics=function(){this.x+=this.velocity;this.velocity*=this.getFrictionFactor()};proto$9.applyForce=function(t){this.velocity+=t};proto$9.getFrictionFactor=function(){return 1-this.options[this.isFreeScrolling?"freeScrollFriction":"friction"]};proto$9.getRestingPosition=function(){return this.x+this.velocity/(1-this.getFrictionFactor())};proto$9.applyDragForce=function(){if(!this.isDraggable||!this.isPointerDown){return}var t=this.dragX-this.x;var e=t-this.velocity;this.applyForce(e)};proto$9.applySelectedAttraction=function(){var t=this.isDraggable&&this.isPointerDown;if(t||this.isFreeScrolling||!this.slides.length){return}var e=this.selectedSlide.target*-1-this.x;var i=e*this.options.selectedAttraction;this.applyForce(i)};var getComputedStyle$1=window.getComputedStyle;var console$1=window.console;function moveElements(t,e){t=utils.makeArray(t);while(t.length){e.appendChild(t.shift())}}var GUID=0;var instances={};function Flickity(t,e){var i=utils.getQueryElement(t);if(!i){if(console$1){console$1.error("Bad element for Flickity: "+(i||t))}return}this.element=i;if(this.element.flickityGUID){var n=instances[this.element.flickityGUID];if(!instances[this.element.flickityGUID])return;n.option(e);return n}this.options=utils.extend({},this.constructor.defaults);this.option(e);this._create()}Flickity.defaults={accessibility:true,cellAlign:"center",freeScrollFriction:.075,friction:.28,namespaceJQueryEvents:true,percentPosition:true,resize:true,selectedAttraction:.025,setGallerySize:true};Flickity.createMethods=[];var proto$8=Flickity.prototype;utils.extend(proto$8,evEmitter.prototype);proto$8._create=function(){var t=this.guid=++GUID;this.element.flickityGUID=t;instances[t]=this;this.selectedIndex=0;this.restingFrames=0;this.x=0;this.velocity=0;this.originSide=this.options.rightToLeft?"right":"left";this.viewport=document.createElement("div");this.viewport.className="flickity-viewport";this._createSlider();if(this.options.resize||this.options.watchCSS){window.addEventListener("resize",this)}for(var e in this.options.on){var i=this.options.on[e];this.on(e,i)}Flickity.createMethods.forEach((function(t){this[t]()}),this);if(this.options.watchCSS){this.watchCSS()}else{this.activate()}};proto$8.option=function(t){utils.extend(this.options,t)};proto$8.activate=function(){if(this.isActive){return}this.isActive=true;this.element.classList.add("flickity-enabled");if(this.options.rightToLeft){this.element.classList.add("flickity-rtl")}this.getSize();var t=this.element.children;moveElements(t,this.slider);this.viewport.appendChild(this.slider);this.element.appendChild(this.viewport);this.reloadCells();if(this.options.accessibility){this.element.tabIndex=0;this.element.addEventListener("keydown",this)}this.emitEvent("activate");this.selectInitialIndex();this.isInitActivated=true;this.dispatchEvent("ready")};proto$8._createSlider=function(){var t=document.createElement("div");t.className="flickity-slider";t.style[this.originSide]=0;this.slider=t};proto$8._filterFindCellElements=function(t){return utils.filterFindElements(t,this.options.cellSelector)};proto$8.reloadCells=function(){this.cells=this._makeCells(this.slider.getRootNode().host?this.slider.getRootNode().host.children:this.slider.children);this.positionCells();this._getWrapShiftCells();this.setGallerySize()};proto$8._makeCells=function(t){var e=this._filterFindCellElements(t);var i=e.map((function(t){return new Cell(t,this)}),this);return i};proto$8.getLastCell=function(){return this.cells[this.cells.length-1]};proto$8.getLastSlide=function(){return this.slides[this.slides.length-1]};proto$8.positionCells=function(){this._sizeCells(this.cells);this._positionCells(0)};proto$8._positionCells=function(t){t=t||0;this.maxCellHeight=t?this.maxCellHeight||0:0;var e=0;if(t>0){var i=this.cells[t-1];e=i.x+i.size.outerWidth}var n=this.cells.length;for(var s=t;s<n;s++){var r=this.cells[s];r.setPosition(e);e+=r.size.outerWidth;this.maxCellHeight=Math.max(r.size.outerHeight,this.maxCellHeight)}this.slideableWidth=e;this.updateSlides();this._containSlides();this.slidesWidth=n?this.getLastSlide().target-this.slides[0].target:0};proto$8._sizeCells=function(t){t.forEach((function(t){t.getSize()}))};proto$8.updateSlides=function(){this.slides=[];if(!this.cells.length){return}var t=new Slide$1(this);this.slides.push(t);var e=this.originSide=="left";var i=e?"marginRight":"marginLeft";var n=this._getCanCellFit();this.cells.forEach((function(e,s){if(!t.cells.length){t.addCell(e);return}var r=t.outerWidth-t.firstMargin+(e.size.outerWidth-e.size[i]);if(n.call(this,s,r)){t.addCell(e)}else{t.updateTarget();t=new Slide$1(this);this.slides.push(t);t.addCell(e)}}),this);t.updateTarget();this.updateSelectedSlide()};proto$8._getCanCellFit=function(){var t=this.options.groupCells;if(!t){return function(){return false}}else if(typeof t=="number"){var e=parseInt(t,10);return function(t){return t%e!==0}}var i=typeof t=="string"&&t.match(/^(\d+)%$/);var n=i?parseInt(i[1],10)/100:1;return function(t,e){return e<=(this.size.innerWidth+1)*n}};proto$8._init=proto$8.reposition=function(){this.positionCells();this.positionSliderAtSelected()};proto$8.getSize=function(){this.size=getSize(this.element);this.setCellAlign();this.cursorPosition=this.size.innerWidth*this.cellAlign};var cellAlignShorthands={center:{left:.5,right:.5},left:{left:0,right:1},right:{right:0,left:1}};proto$8.setCellAlign=function(){var t=cellAlignShorthands[this.options.cellAlign];this.cellAlign=t?t[this.originSide]:this.options.cellAlign};proto$8.setGallerySize=function(){if(this.options.setGallerySize){var t=this.options.adaptiveHeight&&this.selectedSlide?this.selectedSlide.height:this.maxCellHeight;this.viewport.style.height=t+"px"}};proto$8._getWrapShiftCells=function(){if(!this.options.wrapAround){return}this._unshiftCells(this.beforeShiftCells);this._unshiftCells(this.afterShiftCells);var t=this.cursorPosition;var e=this.cells.length-1;this.beforeShiftCells=this._getGapCells(t,e,-1);t=this.size.innerWidth-this.cursorPosition;this.afterShiftCells=this._getGapCells(t,0,1)};proto$8._getGapCells=function(t,e,i){var n=[];while(t>0){var s=this.cells[e];if(!s){break}n.push(s);e+=i;t-=s.size.outerWidth}return n};proto$8._containSlides=function(){if(!this.options.contain||this.options.wrapAround||!this.cells.length){return}var t=this.options.rightToLeft;var e=t?"marginRight":"marginLeft";var i=t?"marginLeft":"marginRight";var n=this.slideableWidth-this.getLastCell().size[i];var s=n<this.size.innerWidth;var r=this.cursorPosition+this.cells[0].size[e];var o=n-this.size.innerWidth*(1-this.cellAlign);this.slides.forEach((function(t){if(s){t.target=n*this.cellAlign}else{t.target=Math.max(t.target,r);t.target=Math.min(t.target,o)}}),this)};proto$8.dispatchEvent=function(t,e,i){var n=e?[e].concat(i):i;this.emitEvent(t,n)};proto$8.select=function(t,e,i){if(!this.isActive){return}t=parseInt(t,10);this._wrapSelect(t);if(this.options.wrapAround||e){t=utils.modulo(t,this.slides.length)}if(!this.slides[t]){return}var n=this.selectedIndex;this.selectedIndex=t;this.updateSelectedSlide();if(i){this.positionSliderAtSelected()}else{this.startAnimation()}if(this.options.adaptiveHeight){this.setGallerySize()}this.dispatchEvent("select",null,[t]);if(t!=n){this.dispatchEvent("change",null,[t])}this.dispatchEvent("cellSelect")};proto$8._wrapSelect=function(t){var e=this.slides.length;var i=this.options.wrapAround&&e>1;if(!i){return t}var n=utils.modulo(t,e);var s=Math.abs(n-this.selectedIndex);var r=Math.abs(n+e-this.selectedIndex);var o=Math.abs(n-e-this.selectedIndex);if(!this.isDragSelect&&r<s){t+=e}else if(!this.isDragSelect&&o<s){t-=e}if(t<0){this.x-=this.slideableWidth}else if(t>=e){this.x+=this.slideableWidth}};proto$8.previous=function(t,e){this.select(this.selectedIndex-1,t,e)};proto$8.next=function(t,e){this.select(this.selectedIndex+1,t,e)};proto$8.updateSelectedSlide=function(){var t=this.slides[this.selectedIndex];if(!t){return}this.unselectSelectedSlide();this.selectedSlide=t;t.select();this.selectedCells=t.cells;this.selectedElements=t.getCellElements();this.selectedCell=t.cells[0];this.selectedElement=this.selectedElements[0]};proto$8.unselectSelectedSlide=function(){if(this.selectedSlide){this.selectedSlide.unselect()}};proto$8.selectInitialIndex=function(){var t=this.options.initialIndex;if(this.isInitActivated){this.select(this.selectedIndex,false,true);return}if(t&&typeof t=="string"){var e=this.queryCell(t);if(e){this.selectCell(t,false,true);return}}var i=0;if(t&&this.slides[t]){i=t}this.select(i,false,true)};proto$8.selectCell=function(t,e,i){var n=this.queryCell(t);if(!n){return}var s=this.getCellSlideIndex(n);this.select(s,e,i)};proto$8.getCellSlideIndex=function(t){for(var e=0;e<this.slides.length;e++){var i=this.slides[e];var n=i.cells.indexOf(t);if(n!=-1){return e}}};proto$8.getCell=function(t){for(var e=0;e<this.cells.length;e++){var i=this.cells[e];if(i.element==t){return i}}};proto$8.getCells=function(t){t=utils.makeArray(t);var e=[];t.forEach((function(t){var i=this.getCell(t);if(i){e.push(i)}}),this);return e};proto$8.getCellElements=function(){return this.cells.map((function(t){return t.element}))};proto$8.getParentCell=function(t){var e=this.getCell(t);if(e){return e}t=utils.getParent(t,".flickity-slider > *");return this.getCell(t)};proto$8.getAdjacentCellElements=function(t,e){if(!t){return this.selectedSlide.getCellElements()}e=e===undefined?this.selectedIndex:e;var i=this.slides.length;if(1+t*2>=i){return this.getCellElements()}var n=[];for(var s=e-t;s<=e+t;s++){var r=this.options.wrapAround?utils.modulo(s,i):s;var o=this.slides[r];if(o){n=n.concat(o.getCellElements())}}return n};proto$8.queryCell=function(t){if(typeof t=="number"){return this.cells[t]}if(typeof t=="string"){if(t.match(/^[#\.]?[\d\/]/)){return}t=this.element.querySelector(t)}return this.getCell(t)};proto$8.uiChange=function(){this.emitEvent("uiChange")};proto$8.childUIPointerDown=function(t){if(t.type!="touchstart"){t.preventDefault()}this.focus()};proto$8.onresize=function(){this.watchCSS();this.resize()};utils.debounceMethod(Flickity,"onresize",150);proto$8.resize=function(){if(!this.isActive){return}this.getSize();if(this.options.wrapAround){this.x=utils.modulo(this.x,this.slideableWidth)}this.positionCells();this._getWrapShiftCells();this.setGallerySize();this.emitEvent("resize");var t=this.selectedElements&&this.selectedElements[0];this.selectCell(t,false,true)};proto$8.watchCSS=function(){var t=this.options.watchCSS;if(!t){return}var e=getComputedStyle$1(this.element,":after").content;if(e.indexOf("flickity")!=-1){this.activate()}else{this.deactivate()}};proto$8.onkeydown=function(t){var e=document.activeElement&&document.activeElement!=this.element;if(!this.options.accessibility||e){return}var i=Flickity.keyboardHandlers[t.keyCode];if(i){i.call(this)}};Flickity.keyboardHandlers={37:function(){var t=this.options.rightToLeft?"next":"previous";this.uiChange();this[t]()},39:function(){var t=this.options.rightToLeft?"previous":"next";this.uiChange();this[t]()}};proto$8.focus=function(){var t=window.pageYOffset;this.element.focus({preventScroll:true});if(window.pageYOffset!=t){window.scrollTo(window.pageXOffset,t)}};proto$8.deactivate=function(){if(!this.isActive){return}this.element.classList.remove("flickity-enabled");this.element.classList.remove("flickity-rtl");this.unselectSelectedSlide();this.cells.forEach((function(t){t.destroy()}));this.element.removeChild(this.viewport);moveElements(this.slider.children,this.element);if(this.options.accessibility){this.element.removeAttribute("tabIndex");this.element.removeEventListener("keydown",this)}this.isActive=false;this.emitEvent("deactivate")};proto$8.destroy=function(){this.deactivate();window.removeEventListener("resize",this);this.allOff();this.emitEvent("destroy");delete this.element.flickityGUID;delete instances[this.guid]};utils.extend(proto$8,proto$9);Flickity.data=function(t){t=utils.getQueryElement(t);var e=t&&t.flickityGUID;return e&&instances[e]};utils.htmlInit(Flickity,"flickity");Flickity.Cell=Cell;Flickity.Slide=Slide$1;var unipointer=createCommonjsModule((function(t){
+/*!
+   * Unipointer v2.3.0
+   * base class for doing one thing with pointer event
+   * MIT license
+   */
+(function(e,i){if(t.exports){t.exports=i(e,evEmitter)}else{e.Unipointer=i(e,e.EvEmitter)}})(window,(function t(e,i){function n(){}function s(){}var r=s.prototype=Object.create(i.prototype);r.bindStartEvent=function(t){this._bindStartEvent(t,true)};r.unbindStartEvent=function(t){this._bindStartEvent(t,false)};r._bindStartEvent=function(t,i){i=i===undefined?true:i;var n=i?"addEventListener":"removeEventListener";var s="mousedown";if(e.PointerEvent){s="pointerdown"}else if("ontouchstart"in e){s="touchstart"}t[n](s,this)};r.handleEvent=function(t){var e="on"+t.type;if(this[e]){this[e](t)}};r.getTouch=function(t){for(var e=0;e<t.length;e++){var i=t[e];if(i.identifier==this.pointerIdentifier){return i}}};r.onmousedown=function(t){var e=t.button;if(e&&(e!==0&&e!==1)){return}this._pointerDown(t,t)};r.ontouchstart=function(t){this._pointerDown(t,t.changedTouches[0])};r.onpointerdown=function(t){this._pointerDown(t,t)};r._pointerDown=function(t,e){if(t.button||this.isPointerDown){return}this.isPointerDown=true;this.pointerIdentifier=e.pointerId!==undefined?e.pointerId:e.identifier;this.pointerDown(t,e)};r.pointerDown=function(t,e){this._bindPostStartEvents(t);this.emitEvent("pointerDown",[t,e])};var o={mousedown:["mousemove","mouseup"],touchstart:["touchmove","touchend","touchcancel"],pointerdown:["pointermove","pointerup","pointercancel"]};r._bindPostStartEvents=function(t){if(!t){return}var i=o[t.type];i.forEach((function(t){e.addEventListener(t,this)}),this);this._boundPointerEvents=i};r._unbindPostStartEvents=function(){if(!this._boundPointerEvents){return}this._boundPointerEvents.forEach((function(t){e.removeEventListener(t,this)}),this);delete this._boundPointerEvents};r.onmousemove=function(t){this._pointerMove(t,t)};r.onpointermove=function(t){if(t.pointerId==this.pointerIdentifier){this._pointerMove(t,t)}};r.ontouchmove=function(t){var e=this.getTouch(t.changedTouches);if(e){this._pointerMove(t,e)}};r._pointerMove=function(t,e){this.pointerMove(t,e)};r.pointerMove=function(t,e){this.emitEvent("pointerMove",[t,e])};r.onmouseup=function(t){this._pointerUp(t,t)};r.onpointerup=function(t){if(t.pointerId==this.pointerIdentifier){this._pointerUp(t,t)}};r.ontouchend=function(t){var e=this.getTouch(t.changedTouches);if(e){this._pointerUp(t,e)}};r._pointerUp=function(t,e){this._pointerDone();this.pointerUp(t,e)};r.pointerUp=function(t,e){this.emitEvent("pointerUp",[t,e])};r._pointerDone=function(){this._pointerReset();this._unbindPostStartEvents();this.pointerDone()};r._pointerReset=function(){this.isPointerDown=false;delete this.pointerIdentifier};r.pointerDone=n;r.onpointercancel=function(t){if(t.pointerId==this.pointerIdentifier){this._pointerCancel(t,t)}};r.ontouchcancel=function(t){var e=this.getTouch(t.changedTouches);if(e){this._pointerCancel(t,e)}};r._pointerCancel=function(t,e){this._pointerDone();this.pointerCancel(t,e)};r.pointerCancel=function(t,e){this.emitEvent("pointerCancel",[t,e])};s.getPointerPoint=function(t){return{x:t.pageX,y:t.pageY}};return s}))}));var unidragger=createCommonjsModule((function(t){
+/*!
+   * Unidragger v2.3.1
+   * Draggable base class
+   * MIT license
+   */
+(function(e,i){if(t.exports){t.exports=i(e,unipointer)}else{e.Unidragger=i(e,e.Unipointer)}})(window,(function t(e,i){function n(){}var s=n.prototype=Object.create(i.prototype);s.bindHandles=function(){this._bindHandles(true)};s.unbindHandles=function(){this._bindHandles(false)};s._bindHandles=function(t){t=t===undefined?true:t;var i=t?"addEventListener":"removeEventListener";var n=t?this._touchActionValue:"";for(var s=0;s<this.handles.length;s++){var r=this.handles[s];this._bindStartEvent(r,t);r[i]("click",this);if(e.PointerEvent){r.style.touchAction=n}}};s._touchActionValue="none";s.pointerDown=function(t,e){var i=this.okayPointerDown(t);if(!i){return}this.pointerDownPointer={pageX:e.pageX,pageY:e.pageY};t.preventDefault();this.pointerDownBlur();this._bindPostStartEvents(t);this.emitEvent("pointerDown",[t,e])};var r={TEXTAREA:true,INPUT:true,SELECT:true,OPTION:true};var o={radio:true,checkbox:true,button:true,submit:true,image:true,file:true};s.okayPointerDown=function(t){var e=r[t.target.nodeName];var i=o[t.target.type];var n=!e||i;if(!n){this._pointerReset()}return n};s.pointerDownBlur=function(){var t=document.activeElement;var e=t&&t.blur&&t!=document.body;if(e){t.blur()}};s.pointerMove=function(t,e){var i=this._dragPointerMove(t,e);this.emitEvent("pointerMove",[t,e,i]);this._dragMove(t,e,i)};s._dragPointerMove=function(t,e){var i={x:e.pageX-this.pointerDownPointer.pageX,y:e.pageY-this.pointerDownPointer.pageY};if(!this.isDragging&&this.hasDragStarted(i)){this._dragStart(t,e)}return i};s.hasDragStarted=function(t){return Math.abs(t.x)>3||Math.abs(t.y)>3};s.pointerUp=function(t,e){this.emitEvent("pointerUp",[t,e]);this._dragPointerUp(t,e)};s._dragPointerUp=function(t,e){if(this.isDragging){this._dragEnd(t,e)}else{this._staticClick(t,e)}};s._dragStart=function(t,e){this.isDragging=true;this.isPreventingClicks=true;this.dragStart(t,e)};s.dragStart=function(t,e){this.emitEvent("dragStart",[t,e])};s._dragMove=function(t,e,i){if(!this.isDragging){return}this.dragMove(t,e,i)};s.dragMove=function(t,e,i){t.preventDefault();this.emitEvent("dragMove",[t,e,i])};s._dragEnd=function(t,e){this.isDragging=false;setTimeout(function(){delete this.isPreventingClicks}.bind(this));this.dragEnd(t,e)};s.dragEnd=function(t,e){this.emitEvent("dragEnd",[t,e])};s.onclick=function(t){if(this.isPreventingClicks){t.preventDefault()}};s._staticClick=function(t,e){if(this.isIgnoringMouseUp&&t.type=="mouseup"){return}this.staticClick(t,e);if(t.type!="mouseup"){this.isIgnoringMouseUp=true;setTimeout(function(){delete this.isIgnoringMouseUp}.bind(this),400)}};s.staticClick=function(t,e){this.emitEvent("staticClick",[t,e])};n.getPointerPoint=i.getPointerPoint;return n}))}));utils.extend(Flickity.defaults,{draggable:">1",dragThreshold:3});Flickity.createMethods.push("_createDrag");var proto$7=Flickity.prototype;utils.extend(proto$7,unidragger.prototype);proto$7._touchActionValue="pan-y";var isTouch="createTouch"in document;var isTouchmoveScrollCanceled=false;proto$7._createDrag=function(){this.on("activate",this.onActivateDrag);this.on("uiChange",this._uiChangeDrag);this.on("deactivate",this.onDeactivateDrag);this.on("cellChange",this.updateDraggable);if(isTouch&&!isTouchmoveScrollCanceled){window.addEventListener("touchmove",(function(){}));isTouchmoveScrollCanceled=true}};proto$7.onActivateDrag=function(){this.handles=[this.viewport];this.bindHandles();this.updateDraggable()};proto$7.onDeactivateDrag=function(){this.unbindHandles();this.element.classList.remove("is-draggable")};proto$7.updateDraggable=function(){if(this.options.draggable==">1"){this.isDraggable=this.slides.length>1}else{this.isDraggable=this.options.draggable}if(this.isDraggable){this.element.classList.add("is-draggable")}else{this.element.classList.remove("is-draggable")}};proto$7.bindDrag=function(){this.options.draggable=true;this.updateDraggable()};proto$7.unbindDrag=function(){this.options.draggable=false;this.updateDraggable()};proto$7._uiChangeDrag=function(){delete this.isFreeScrolling};proto$7.pointerDown=function(t,e){if(!this.isDraggable){this._pointerDownDefault(t,e);return}var i=this.okayPointerDown(t);if(!i){return}this._pointerDownPreventDefault(t);this.pointerDownFocus(t);if(document.activeElement!=this.element){this.pointerDownBlur()}this.dragX=this.x;this.viewport.classList.add("is-pointer-down");this.pointerDownScroll=getScrollPosition();window.addEventListener("scroll",this);this._pointerDownDefault(t,e)};proto$7._pointerDownDefault=function(t,e){this.pointerDownPointer={pageX:e.pageX,pageY:e.pageY};this._bindPostStartEvents(t);this.dispatchEvent("pointerDown",t,[e])};var focusNodes={INPUT:true,TEXTAREA:true,SELECT:true};proto$7.pointerDownFocus=function(t){var e=focusNodes[t.target.nodeName];if(!e){this.focus()}};proto$7._pointerDownPreventDefault=function(t){var e=t.type=="touchstart";var i=t.pointerType=="touch";var n=focusNodes[t.target.nodeName];if(!e&&!i&&!n){t.preventDefault()}};proto$7.hasDragStarted=function(t){return Math.abs(t.x)>this.options.dragThreshold};proto$7.pointerUp=function(t,e){delete this.isTouchScrolling;this.viewport.classList.remove("is-pointer-down");this.dispatchEvent("pointerUp",t,[e]);this._dragPointerUp(t,e)};proto$7.pointerDone=function(){window.removeEventListener("scroll",this);delete this.pointerDownScroll};proto$7.dragStart=function(t,e){if(!this.isDraggable){return}this.dragStartPosition=this.x;this.startAnimation();window.removeEventListener("scroll",this);this.dispatchEvent("dragStart",t,[e])};proto$7.pointerMove=function(t,e){var i=this._dragPointerMove(t,e);this.dispatchEvent("pointerMove",t,[e,i]);this._dragMove(t,e,i)};proto$7.dragMove=function(t,e,i){if(!this.isDraggable){return}t.preventDefault();this.previousDragX=this.dragX;var n=this.options.rightToLeft?-1:1;if(this.options.wrapAround){i.x=i.x%this.slideableWidth}var s=this.dragStartPosition+i.x*n;if(!this.options.wrapAround&&this.slides.length){var r=Math.max(-this.slides[0].target,this.dragStartPosition);s=s>r?(s+r)*.5:s;var o=Math.min(-this.getLastSlide().target,this.dragStartPosition);s=s<o?(s+o)*.5:s}this.dragX=s;this.dragMoveTime=new Date;this.dispatchEvent("dragMove",t,[e,i])};proto$7.dragEnd=function(t,e){if(!this.isDraggable){return}if(this.options.freeScroll){this.isFreeScrolling=true}var i=this.dragEndRestingSelect();if(this.options.freeScroll&&!this.options.wrapAround){var n=this.getRestingPosition();this.isFreeScrolling=-n>this.slides[0].target&&-n<this.getLastSlide().target}else if(!this.options.freeScroll&&i==this.selectedIndex){i+=this.dragEndBoostSelect()}delete this.previousDragX;this.isDragSelect=this.options.wrapAround;this.select(i);delete this.isDragSelect;this.dispatchEvent("dragEnd",t,[e])};proto$7.dragEndRestingSelect=function(){var t=this.getRestingPosition();var e=Math.abs(this.getSlideDistance(-t,this.selectedIndex));var i=this._getClosestResting(t,e,1);var n=this._getClosestResting(t,e,-1);var s=i.distance<n.distance?i.index:n.index;return s};proto$7._getClosestResting=function(t,e,i){var n=this.selectedIndex;var s=Infinity;var r=this.options.contain&&!this.options.wrapAround?function(t,e){return t<=e}:function(t,e){return t<e};while(r(e,s)){n+=i;s=e;e=this.getSlideDistance(-t,n);if(e===null){break}e=Math.abs(e)}return{distance:s,index:n-i}};proto$7.getSlideDistance=function(t,e){var i=this.slides.length;var n=this.options.wrapAround&&i>1;var s=n?utils.modulo(e,i):e;var r=this.slides[s];if(!r){return null}var o=n?this.slideableWidth*Math.floor(e/i):0;return t-(r.target+o)};proto$7.dragEndBoostSelect=function(){if(this.previousDragX===undefined||!this.dragMoveTime||new Date-this.dragMoveTime>100){return 0}var t=this.getSlideDistance(-this.dragX,this.selectedIndex);var e=this.previousDragX-this.dragX;if(t>0&&e>0){return 1}else if(t<0&&e<0){return-1}return 0};proto$7.staticClick=function(t,e){var i=this.getParentCell(t.target);var n=i&&i.element;var s=i&&this.cells.indexOf(i);this.dispatchEvent("staticClick",t,[e,n,s])};proto$7.onscroll=function(){var t=getScrollPosition();var e=this.pointerDownScroll.x-t.x;var i=this.pointerDownScroll.y-t.y;if(Math.abs(e)>3||Math.abs(i)>3){this._pointerDone()}};function getScrollPosition(){return{x:window.pageXOffset,y:window.pageYOffset}}var svgURI$1="http://www.w3.org/2000/svg";function PrevNextButton(t,e){this.direction=t;this.parent=e;this.parentElement=this.parent.element.shadowRoot||this.parent.element;this._create()}PrevNextButton.prototype=Object.create(unipointer.prototype);PrevNextButton.prototype._create=function(){this.isEnabled=true;this.isPrevious=this.direction==-1;var t=this.parent.options.rightToLeft?1:-1;this.isLeft=this.direction==t;var e=this.element=document.createElement("button");e.className="flickity-button flickity-prev-next-button";e.className+=this.isPrevious?" previous":" next";e.setAttribute("type","button");this.disable();e.setAttribute("aria-label",this.isPrevious?"Previous":"Next");var i=this.createSVG();e.appendChild(i);this.parent.on("select",this.update.bind(this));this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))};PrevNextButton.prototype.activate=function(){this.bindStartEvent(this.element);this.element.addEventListener("click",this);this.parentElement.appendChild(this.element)};PrevNextButton.prototype.deactivate=function(){this.parentElement.removeChild(this.element);this.unbindStartEvent(this.element);this.element.removeEventListener("click",this)};PrevNextButton.prototype.createSVG=function(){var t=document.createElementNS(svgURI$1,"svg");t.setAttribute("class","flickity-button-icon");t.setAttribute("viewBox","0 0 100 100");var e=document.createElementNS(svgURI$1,"path");var i=getArrowMovements(this.parent.options.arrowShape);e.setAttribute("d",i);e.setAttribute("class","arrow");if(!this.isLeft){e.setAttribute("transform","translate(100, 100) rotate(180) ")}t.appendChild(e);return t};function getArrowMovements(t){if(typeof t=="string"){return t}return"M "+t.x0+",50"+" L "+t.x1+","+(t.y1+50)+" L "+t.x2+","+(t.y2+50)+" L "+t.x3+",50 "+" L "+t.x2+","+(50-t.y2)+" L "+t.x1+","+(50-t.y1)+" Z"}PrevNextButton.prototype.handleEvent=utils.handleEvent;PrevNextButton.prototype.onclick=function(){if(!this.isEnabled){return}this.parent.uiChange();var t=this.isPrevious?"previous":"next";this.parent[t]()};PrevNextButton.prototype.enable=function(){if(this.isEnabled){return}this.element.disabled=false;this.isEnabled=true};PrevNextButton.prototype.disable=function(){if(!this.isEnabled){return}this.element.disabled=true;this.isEnabled=false};PrevNextButton.prototype.update=function(){var t=this.parent.slides;if(this.parent.options.wrapAround&&t.length>1){this.enable();return}var e=t.length?t.length-1:0;var i=this.isPrevious?0:e;var n=this.parent.selectedIndex==i?"disable":"enable";this[n]()};PrevNextButton.prototype.destroy=function(){this.deactivate();this.allOff()};utils.extend(Flickity.defaults,{prevNextButtons:true,arrowShape:{x0:10,x1:60,y1:50,x2:70,y2:40,x3:30}});Flickity.createMethods.push("_createPrevNextButtons");var proto$6=Flickity.prototype;proto$6._createPrevNextButtons=function(){if(!this.options.prevNextButtons){return}this.prevButton=new PrevNextButton(-1,this);this.nextButton=new PrevNextButton(1,this);this.on("activate",this.activatePrevNextButtons)};proto$6.activatePrevNextButtons=function(){this.prevButton.activate();this.nextButton.activate();this.on("deactivate",this.deactivatePrevNextButtons)};proto$6.deactivatePrevNextButtons=function(){this.prevButton.deactivate();this.nextButton.deactivate();this.off("deactivate",this.deactivatePrevNextButtons)};Flickity.PrevNextButton=PrevNextButton;function PageDots(t){this.parent=t;this.parentElement=this.parent.element.shadowRoot||this.parent.element;this._create()}PageDots.prototype=Object.create(unipointer.prototype);PageDots.prototype._create=function(){this.holder=document.createElement("ol");this.holder.className="flickity-page-dots";this.dots=[];this.handleClick=this.onClick.bind(this);this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))};PageDots.prototype.activate=function(){this.setDots();this.holder.addEventListener("click",this.handleClick);this.bindStartEvent(this.holder);this.parentElement.appendChild(this.holder)};PageDots.prototype.deactivate=function(){this.holder.removeEventListener("click",this.handleClick);this.unbindStartEvent(this.holder);this.parentElement.removeChild(this.holder)};PageDots.prototype.setDots=function(){var t=this.parent.slides.length-this.dots.length;if(t>0){this.addDots(t)}else if(t<0){this.removeDots(-t)}};PageDots.prototype.addDots=function(t){var e=document.createDocumentFragment();var i=[];var n=this.dots.length;var s=n+t;for(var r=n;r<s;r++){var o=document.createElement("li");o.classList.add("dot");o.setAttribute("aria-label","Page dot "+(r+1));e.appendChild(o);i.push(o)}this.holder.appendChild(e);this.dots=this.dots.concat(i)};PageDots.prototype.removeDots=function(t){var e=this.dots.splice(this.dots.length-t,t);e.forEach((function(t){this.holder.removeChild(t)}),this)};PageDots.prototype.updateSelected=function(){if(this.selectedDot){this.selectedDot.classList.remove("is-selected");this.selectedDot.removeAttribute("aria-current")}if(!this.dots.length){return}this.selectedDot=this.dots[this.parent.selectedIndex];this.selectedDot.classList.add("is-selected");this.selectedDot.setAttribute("aria-current","step")};PageDots.prototype.onTap=PageDots.prototype.onClick=function(t){var e=t.target;if(e.nodeName!="LI"){return}this.parent.uiChange();var i=this.dots.indexOf(e);this.parent.select(i)};PageDots.prototype.destroy=function(){this.deactivate();this.allOff()};Flickity.PageDots=PageDots;utils.extend(Flickity.defaults,{pageDots:true});Flickity.createMethods.push("_createPageDots");var proto$5=Flickity.prototype;proto$5._createPageDots=function(){if(!this.options.pageDots){return}this.pageDots=new PageDots(this);this.on("activate",this.activatePageDots);this.on("select",this.updateSelectedPageDots);this.on("cellChange",this.updatePageDots);this.on("resize",this.updatePageDots);this.on("deactivate",this.deactivatePageDots)};proto$5.activatePageDots=function(){this.pageDots.activate()};proto$5.updateSelectedPageDots=function(){this.pageDots.updateSelected()};proto$5.updatePageDots=function(){this.pageDots.setDots()};proto$5.deactivatePageDots=function(){this.pageDots.deactivate()};Flickity.PageDots=PageDots;function Player(t){this.parent=t;this.state="stopped";this.onVisibilityChange=this.visibilityChange.bind(this);this.onVisibilityPlay=this.visibilityPlay.bind(this)}Player.prototype=Object.create(evEmitter.prototype);Player.prototype.play=function(){if(this.state=="playing"){return}var t=document.hidden;if(t){document.addEventListener("visibilitychange",this.onVisibilityPlay);return}this.state="playing";document.addEventListener("visibilitychange",this.onVisibilityChange);this.tick()};Player.prototype.tick=function(){if(this.state!="playing"){return}var t=this.parent.options.autoPlay;t=typeof t=="number"?t:3e3;var e=this;this.clear();this.timeout=setTimeout((function(){e.parent.next(true);e.tick()}),t)};Player.prototype.stop=function(){this.state="stopped";this.clear();document.removeEventListener("visibilitychange",this.onVisibilityChange)};Player.prototype.clear=function(){clearTimeout(this.timeout)};Player.prototype.pause=function(){if(this.state=="playing"){this.state="paused";this.clear()}};Player.prototype.unpause=function(){if(this.state=="paused"){this.play()}};Player.prototype.visibilityChange=function(){var t=document.hidden;this[t?"pause":"unpause"]()};Player.prototype.visibilityPlay=function(){this.play();document.removeEventListener("visibilitychange",this.onVisibilityPlay)};utils.extend(Flickity.defaults,{pauseAutoPlayOnHover:true});Flickity.createMethods.push("_createPlayer");var proto$4=Flickity.prototype;proto$4._createPlayer=function(){this.player=new Player(this);this.on("activate",this.activatePlayer);this.on("uiChange",this.stopPlayer);this.on("pointerDown",this.stopPlayer);this.on("deactivate",this.deactivatePlayer)};proto$4.activatePlayer=function(){if(!this.options.autoPlay){return}this.player.play();this.element.addEventListener("mouseenter",this)};proto$4.playPlayer=function(){this.player.play()};proto$4.stopPlayer=function(){this.player.stop()};proto$4.pausePlayer=function(){this.player.pause()};proto$4.unpausePlayer=function(){this.player.unpause()};proto$4.deactivatePlayer=function(){this.player.stop();this.element.removeEventListener("mouseenter",this)};proto$4.onmouseenter=function(){if(!this.options.pauseAutoPlayOnHover){return}this.player.pause();this.element.addEventListener("mouseleave",this)};proto$4.onmouseleave=function(){this.player.unpause();this.element.removeEventListener("mouseleave",this)};Flickity.Player=Player;function getCellsFragment(t){var e=document.createDocumentFragment();t.forEach((function(t){e.appendChild(t.element)}));return e}var proto$3=Flickity.prototype;proto$3.insert=function(t,e){var i=this._makeCells(t);if(!i||!i.length){return}var n=this.cells.length;e=e===undefined?n:e;var s=getCellsFragment(i);var r=e==n;if(r){this.slider.appendChild(s)}else{var o=this.cells[e].element;this.slider.insertBefore(s,o)}if(e===0){this.cells=i.concat(this.cells)}else if(r){this.cells=this.cells.concat(i)}else{var a=this.cells.splice(e,n-e);this.cells=this.cells.concat(i).concat(a)}this._sizeCells(i);this.cellChange(e,true)};proto$3.append=function(t){this.insert(t,this.cells.length)};proto$3.prepend=function(t){this.insert(t,0)};proto$3.remove=function(t){var e=this.getCells(t);if(!e||!e.length){return}var i=this.cells.length-1;e.forEach((function(t){t.remove();var e=this.cells.indexOf(t);i=Math.min(e,i);utils.removeFrom(this.cells,t)}),this);this.cellChange(i,true)};proto$3.cellSizeChange=function(t){var e=this.getCell(t);if(!e){return}e.getSize();var i=this.cells.indexOf(e);this.cellChange(i)};proto$3.cellChange=function(t,e){var i=this.selectedElement;this._positionCells(t);this._getWrapShiftCells();this.setGallerySize();var n=this.getCell(i);if(n){this.selectedIndex=this.getCellSlideIndex(n)}this.selectedIndex=Math.min(this.slides.length-1,this.selectedIndex);this.emitEvent("cellChange",[t]);this.select(this.selectedIndex);if(e){this.positionSliderAtSelected()}};Flickity.createMethods.push("_createLazyload");var proto$2=Flickity.prototype;proto$2._createLazyload=function(){this.on("select",this.lazyLoad)};proto$2.lazyLoad=function(){var t=this.options.lazyLoad;if(!t){return}var e=typeof t=="number"?t:0;var i=this.getAdjacentCellElements(e);var n=[];i.forEach((function(t){var e=getCellLazyImages(t);n=n.concat(e)}));n.forEach((function(t){new LazyLoader(t,this)}),this)};function getCellLazyImages(t){if(t.nodeName=="IMG"){var e=t.getAttribute("data-flickity-lazyload");var i=t.getAttribute("data-flickity-lazyload-src");var n=t.getAttribute("data-flickity-lazyload-srcset");if(e||i||n){return[t]}}var s="img[data-flickity-lazyload], "+"img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]";var r=t.querySelectorAll(s);return utils.makeArray(r)}function LazyLoader(t,e){this.img=t;this.flickity=e;this.load()}LazyLoader.prototype.handleEvent=utils.handleEvent;LazyLoader.prototype.load=function(){this.img.addEventListener("load",this);this.img.addEventListener("error",this);var t=this.img.getAttribute("data-flickity-lazyload")||this.img.getAttribute("data-flickity-lazyload-src");var e=this.img.getAttribute("data-flickity-lazyload-srcset");this.img.src=t;if(e){this.img.setAttribute("srcset",e)}this.img.removeAttribute("data-flickity-lazyload");this.img.removeAttribute("data-flickity-lazyload-src");this.img.removeAttribute("data-flickity-lazyload-srcset")};LazyLoader.prototype.onload=function(t){this.complete(t,"flickity-lazyloaded")};LazyLoader.prototype.onerror=function(t){this.complete(t,"flickity-lazyerror")};LazyLoader.prototype.complete=function(t,e){this.img.removeEventListener("load",this);this.img.removeEventListener("error",this);var i=this.flickity.getParentCell(this.img);var n=i&&i.element;this.flickity.cellSizeChange(n);this.img.classList.add(e);this.flickity.dispatchEvent("lazyLoad",t,n)};Flickity.LazyLoader=LazyLoader;Flickity.createMethods.push("_createFullscreen");var proto$1=Flickity.prototype;proto$1._createFullscreen=function(){this.isFullscreen=false;if(!this.options.fullscreen){return}this.viewFullscreenButton=new FullscreenButton("view",this);this.exitFullscreenButton=new FullscreenButton("exit",this);this.on("activate",this._changeFullscreenActive);this.on("deactivate",this._changeFullscreenActive)};proto$1._changeFullscreenActive=function(){var t=this.isActive?"appendChild":"removeChild";this.element[t](this.viewFullscreenButton.element);this.element[t](this.exitFullscreenButton.element);var e=this.isActive?"activate":"deactivate";this.viewFullscreenButton[e]();this.exitFullscreenButton[e]()};proto$1.viewFullscreen=function(){this._changeFullscreen(true);this.focus()};proto$1.exitFullscreen=function(){this._changeFullscreen(false)};proto$1._changeFullscreen=function(t){if(this.isFullscreen==t){return}this.isFullscreen=t;var e=t?"add":"remove";document.documentElement.classList[e]("is-flickity-fullscreen");this.element.classList[e]("is-fullscreen");this.resize();if(this.isFullscreen){this.reposition()}this.dispatchEvent("fullscreenChange",null,[t])};proto$1.toggleFullscreen=function(){this._changeFullscreen(!this.isFullscreen)};var setGallerySize=proto$1.setGallerySize;proto$1.setGallerySize=function(){if(!this.options.setGallerySize){return}if(this.isFullscreen){this.viewport.style.height=""}else{setGallerySize.call(this)}};Flickity.keyboardHandlers[27]=function(){this.exitFullscreen()};function FullscreenButton(t,e){this.name=t;this.createButton();this.createIcon();this.onClick=function(){e[t+"Fullscreen"]()};this.clickHandler=this.onClick.bind(this)}FullscreenButton.prototype.createButton=function(){var t=this.element=document.createElement("button");t.className="flickity-button flickity-fullscreen-button "+"flickity-fullscreen-button-"+this.name;t.setAttribute("type","button");var e=capitalize(this.name+" full-screen");t.setAttribute("aria-label",e);t.title=e};function capitalize(t){return t[0].toUpperCase()+t.slice(1)}var svgURI="http://www.w3.org/2000/svg";var pathDirections={view:"M15,20,7,28h5v4H0V20H4v5l8-8Zm5-5,8-8v5h4V0H20V4h5l-8,8Z",exit:"M32,3l-7,7h5v4H18V2h4V7l7-7ZM3,32l7-7v5h4V18H2v4H7L0,29Z"};FullscreenButton.prototype.createIcon=function(){var t=document.createElementNS(svgURI,"svg");t.setAttribute("class","flickity-button-icon");t.setAttribute("viewBox","0 0 32 32");var e=document.createElementNS(svgURI,"path");var i=pathDirections[this.name];e.setAttribute("d",i);t.appendChild(e);this.element.appendChild(t)};FullscreenButton.prototype.activate=function(){this.element.addEventListener("click",this.clickHandler)};FullscreenButton.prototype.deactivate=function(){this.element.removeEventListener("click",this.clickHandler)};Flickity.FullscreenButton=FullscreenButton;var Slide=Flickity.Slide;var slideUpdateTarget=Slide.prototype.updateTarget;Slide.prototype.updateTarget=function(){slideUpdateTarget.apply(this,arguments);if(!this.parent.options.fade){return}var t=this.target-this.x;var e=this.cells[0].x;this.cells.forEach((function(i){var n=i.x-e-t;i.renderPosition(n)}))};Slide.prototype.setOpacity=function(t){this.cells.forEach((function(e){e.element.style.opacity=t}))};var proto=Flickity.prototype;Flickity.createMethods.push("_createFade");proto._createFade=function(){this.fadeIndex=this.selectedIndex;this.prevSelectedIndex=this.selectedIndex;this.on("select",this.onSelectFade);this.on("dragEnd",this.onDragEndFade);this.on("settle",this.onSettleFade);this.on("activate",this.onActivateFade);this.on("deactivate",this.onDeactivateFade)};var updateSlides=proto.updateSlides;proto.updateSlides=function(){updateSlides.apply(this,arguments);if(!this.options.fade){return}this.slides.forEach((function(t,e){var i=e==this.selectedIndex?1:0;t.setOpacity(i)}),this)};proto.onSelectFade=function(){this.fadeIndex=Math.min(this.prevSelectedIndex,this.slides.length-1);this.prevSelectedIndex=this.selectedIndex};proto.onSettleFade=function(){delete this.didDragEnd;if(!this.options.fade){return}this.selectedSlide.setOpacity(1);var t=this.slides[this.fadeIndex];if(t&&this.fadeIndex!=this.selectedIndex){this.slides[this.fadeIndex].setOpacity(0)}};proto.onDragEndFade=function(){this.didDragEnd=true};proto.onActivateFade=function(){if(this.options.fade){this.element.classList.add("is-fade")}};proto.onDeactivateFade=function(){if(!this.options.fade){return}this.element.classList.remove("is-fade");this.slides.forEach((function(t){t.setOpacity("")}))};var positionSlider=proto.positionSlider;proto.positionSlider=function(){if(!this.options.fade){positionSlider.apply(this,arguments);return}this.fadeSlides();this.dispatchScrollEvent()};var positionSliderAtSelected=proto.positionSliderAtSelected;proto.positionSliderAtSelected=function(){if(this.options.fade){this.setTranslateX(0)}positionSliderAtSelected.apply(this,arguments)};proto.fadeSlides=function(){if(this.slides.length<2){return}var t=this.getFadeIndexes();var e=this.slides[t.a];var i=this.slides[t.b];var n=this.wrapDifference(e.target,i.target);var s=this.wrapDifference(e.target,-this.x);s=s/n;e.setOpacity(1-s);i.setOpacity(s);var r=t.a;if(this.isDragging){r=s>.5?t.a:t.b}var o=this.fadeHideIndex!=undefined&&this.fadeHideIndex!=r&&this.fadeHideIndex!=t.a&&this.fadeHideIndex!=t.b;if(o){this.slides[this.fadeHideIndex].setOpacity(0)}this.fadeHideIndex=r};proto.getFadeIndexes=function(){if(!this.isDragging&&!this.didDragEnd){return{a:this.fadeIndex,b:this.selectedIndex}}if(this.options.wrapAround){return this.getFadeDragWrapIndexes()}else{return this.getFadeDragLimitIndexes()}};proto.getFadeDragWrapIndexes=function(){var t=this.slides.map((function(t,e){return this.getSlideDistance(-this.x,e)}),this);var e=t.map((function(t){return Math.abs(t)}));var i=Math.min.apply(Math,e);var n=e.indexOf(i);var s=t[n];var r=this.slides.length;var o=s>=0?1:-1;return{a:n,b:utils.modulo(n+o,r)}};proto.getFadeDragLimitIndexes=function(){var t=0;for(var e=0;e<this.slides.length-1;e++){var i=this.slides[e];if(-this.x<i.target){break}t=e}return{a:t,b:t+1}};proto.wrapDifference=function(t,e){var i=e-t;if(!this.options.wrapAround){return i}var n=i+this.slideableWidth;var s=i-this.slideableWidth;if(Math.abs(n)<Math.abs(i)){i=n}if(Math.abs(s)<Math.abs(i)){i=s}return i};var _getWrapShiftCells=proto._getWrapShiftCells;proto._getWrapShiftCells=function(){if(!this.options.fade){_getWrapShiftCells.apply(this,arguments)}};var shiftWrapCells=proto.shiftWrapCells;proto.shiftWrapCells=function(){if(!this.options.fade){shiftWrapCells.apply(this,arguments)}};var flickity=Flickity;var slidesCss=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #0084a9);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-transition:opacity 0.2s;transition:opacity 0.2s;opacity:0}:host([ready]){opacity:1}.slideshow{height:100%;position:relative}.flickity-container{height:0;opacity:0;-webkit-transition:opacity 0.2s;transition:opacity 0.2s}.flickity-container.slides-ready{height:100%}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;height:100%;width:100%;top:0;left:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;height:100% !important}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:none;-webkit-box-shadow:0 0 0 5px #19f;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.flickity-button-icon{fill:var(--navbtns-icon-color)}.flickity-button:disabled .flickity-button-icon{fill:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}.flickity-page-dots .dot.is-selected{opacity:1;background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.9);padding-bottom:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{bottom:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;right:10px;top:10px;width:24px;height:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{right:auto;left:10px}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;width:16px;height:16px;left:4px;top:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";var CANSHADOW=!!document.head.attachShadow;var Slides=function(){function t(t){var e=this;registerInstance(this,t);this.nanoSlidesDidLoad=createEvent(this,"nanoSlidesDidLoad",7);this.nanoSlidesReady=createEvent(this,"nanoSlidesReady",7);this.nanoSlidesSelect=createEvent(this,"nanoSlidesSelect",7);this.nanoSlidesChange=createEvent(this,"nanoSlidesChange",7);this.nanoSlidesScroll=createEvent(this,"nanoSlidesScroll",7);this.nanoSlidesTransitionEnd=createEvent(this,"nanoSlidesTransitionEnd",7);this.nanoSlidesDragStart=createEvent(this,"nanoSlidesDragStart",7);this.nanoSlidesDragMove=createEvent(this,"nanoSlidesDragMove",7);this.nanoSlidesDragEnd=createEvent(this,"nanoSlidesDragEnd",7);this.nanoSlidesTap=createEvent(this,"nanoSlidesTap",7);this.nanoSlidesFullscreenChange=createEvent(this,"nanoSlidesFullscreenChange",7);this.flickityReady=false;this.flickity=new Promise((function(t){e.readyflickity=t}));this.didInit=false;this.options={};this.navbtns=false;this.pager=false;this.fullscreenbtn=false;this.fullscreen=false;this.animation="scroll";this.currentSlide=0;this.autoplay=false;this.ready=false;this.parralax=function(){return __awaiter(e,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(i){switch(i.label){case 0:return[4,this.flickity];case 1:t=i.sent();t.slides.forEach((function(i,n){var s=e.childrenEles[n];var r=(i.target+t.x)*-1/3;s.style["transform"]="translateX("+r+"px)"}));return[2]}}))}))};this.handleFullscreen=function(t){e.fullscreen=t;e.nanoSlidesFullscreenChange.emit(t)};this.handleSlideSelect=function(t){e.iCurrentSlide=t;e.nanoSlidesSelect.emit(t)}}t.prototype.optionsChanged=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(!this.flickityReady)return[3,3];return[4,this.getflickity()];case 1:t=e.sent();Object.assign(t.options,this.options);return[4,this.update()];case 2:e.sent();e.label=3;case 3:return[2]}}))}))};t.prototype.navbtnsChanged=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){Array.from(this._getRoot().querySelectorAll(".flickity-prev-next-button")).forEach((function(e){e.hidden=!t.navbtns}));return[2]}))}))};t.prototype.pagerChanged=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){t=this._getRoot().querySelector(".flickity-page-dots");t.hidden=!this.pager;return[2]}))}))};t.prototype.fullscreenBtnChanged=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){t=this._getRoot().querySelector(".flickity-fullscreen-button");t.hidden=!this.fullscreenbtn;return[2]}))}))};t.prototype.fullscreenChanged=function(t,e){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(i){switch(i.label){case 0:return[4,this.getflickity()];case 1:t=i.sent();if(this.fullscreen)t.viewFullscreen();else if(typeof e!=="undefined")t.exitFullscreen();return[2]}}))}))};t.prototype.animationChange=function(t,e){return __awaiter(this,void 0,void 0,(function(){var t,i,n;var s=this;return __generator(this,(function(r){switch(r.label){case 0:return[4,Promise.all([this.getflickity(),waitForSlides(this.host)])];case 1:t=r.sent(),i=t[0],n=t[1];n.forEach((function(t){t.style["left"]=undefined}));if(e==="parallax"){i.off("scroll",this.parralax);n.forEach((function(t,e){if(s.childrenEles&&s.childrenEles[e])s.childrenEles[e].style["transform"]=undefined}));this.update()}switch(this.animation){case"fade":this.options={fade:true,percentPosition:true};break;case"parallax":this.options={fade:false,percentPosition:false};i.on("scroll",this.parralax);break;default:this.options={fade:false,percentPosition:true};break}return[2]}}))}))};t.prototype.currentSlideChange=function(){if(this.currentSlide!==this.iCurrentSlide)this.slideTo(this.currentSlide)};t.prototype.internalSlideChange=function(){this.currentSlide=this.iCurrentSlide};t.prototype.autoPlayChange=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.stopAutoplay()];case 1:t.sent();if(this.autoplay){if(typeof this.autoplay==="string")this.autoplay=parseInt(this.autoplay);if(this.autoplay>0)this.startAutoplay(this.autoplay)}return[2]}}))}))};t.prototype.update=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,Promise.all([this.getflickity(),waitForSlides(this.host)])];case 1:t=e.sent()[0];this.childrenEles=this.host.querySelectorAll("nano-slide > *");t.reloadCells();t.resize();t.reposition();return[2]}}))}))};t.prototype.updateAutoHeight=function(t){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(i){e=document.querySelector(".flickity-viewport");if(e)e.style.transition=t+"ms";return[2]}))}))};t.prototype.slideTo=function(t,e){return __awaiter(this,void 0,void 0,(function(){var i;return __generator(this,(function(n){switch(n.label){case 0:return[4,this.getflickity()];case 1:i=n.sent();i.select(t,e);return[2]}}))}))};t.prototype.slideNext=function(t,e){return __awaiter(this,void 0,void 0,(function(){var i;return __generator(this,(function(n){switch(n.label){case 0:return[4,this.getflickity()];case 1:i=n.sent();i.next(e,t);return[2]}}))}))};t.prototype.slidePrev=function(t,e){return __awaiter(this,void 0,void 0,(function(){var i;return __generator(this,(function(n){switch(n.label){case 0:return[4,this.getflickity()];case 1:i=n.sent();i.previous(t,e);return[2]}}))}))};t.prototype.getActiveIndex=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,this.getflickity()];case 1:t=e.sent();return[2,t.selectedIndex]}}))}))};t.prototype.length=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,this.getflickity()];case 1:t=e.sent();return[2,t.slides.length]}}))}))};t.prototype.isEnd=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,this.getflickity()];case 1:t=e.sent();return[2,t.selectedIndex===t.slides.length-1]}}))}))};t.prototype.isBeginning=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,this.getflickity()];case 1:t=e.sent();return[2,t.selectedIndex===0]}}))}))};t.prototype.startAutoplay=function(t){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(i){switch(i.label){case 0:return[4,this.getflickity()];case 1:e=i.sent();if(t)this.options={autoPlay:t};setTimeout((function(){return e.playPlayer()}));return[2]}}))}))};t.prototype.stopAutoplay=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,this.getflickity()];case 1:t=e.sent();t.stopPlayer();return[2]}}))}))};t.prototype.lockSwipes=function(t){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(i){switch(i.label){case 0:return[4,this.getflickity()];case 1:e=i.sent();e.options.draggable=!t;e.updateDraggable();return[2]}}))}))};t.prototype.getflickity=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.flickity]}))}))};t.prototype.reload=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){this.destroyflickity();setTimeout((function(){return t.initflickity()}),20);return[2]}))}))};t.prototype._getRoot=function(){return this.host.shadowRoot?this.host.shadowRoot:this.host};t.prototype._fixClassNames=function(){var t=this.slideShowEle.className.split(" ").filter((function(t){return t.match(/^sc-nano/)}));var e=this._getRoot().querySelectorAll("*");if(!e)return;Array.from(e).map((function(e){t.map((function(t){return e.classList.add(t)}))}))};t.prototype.destroyflickity=function(){var t=this;var e=this.syncflickity;if(e!==undefined){e.destroy();this.flickity=new Promise((function(e){t.readyflickity=e}));this.flickityReady=false;this.syncflickity=undefined;this.ready=false}this.didInit=false};t.prototype.initflickity=function(){return __awaiter(this,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(i){switch(i.label){case 0:t=this.normalizeOptions();return[4,waitForSlides(this.host)];case 1:i.sent();this.slidesReady=true;this.flickityEl=this.flickityEl||this._getRoot().querySelector(".flickity-container");if(this.flickityEl.classList.contains("flickity-enabled"))this.destroyflickity();setTimeout((function(){var i=new flickity(e.flickityEl,t);e.flickityReady=true;if(!e.host.shadowRoot||!CANSHADOW)e._fixClassNames();e.syncflickity=i;e.animationChange();e.navbtnsChanged();e.pagerChanged();e.fullscreenChanged();e.fullscreenBtnChanged();e.readyflickity(i);e.ready=true;if(!e.host.getBoundingClientRect().height){var n=e.resizeO=new index((function(){i.resize();e.resizeO.disconnect()}));n.observe(e.host)}}),100);return[2]}}))}))};t.prototype.normalizeOptions=function(){var t=this;var e={cellSelector:"nano-slide",contain:true,prevNextButtons:true,fullscreen:true,accessibility:true,imagesLoaded:true,pageDots:true};if(this.animation==="fade"){e.fade=true}if(this.currentSlide>0){e.initialIndex=this.currentSlide}if(this.autoplay){if(typeof this.autoplay==="string")this.autoplay=parseInt(this.autoplay);if(this.autoplay>0)e.autoPlay=this.autoplay}var i={ready:function(){setTimeout((function(){t.nanoSlidesReady.emit()}),20)},select:this.handleSlideSelect,change:this.nanoSlidesChange.emit,scroll:this.nanoSlidesScroll.emit,settle:this.nanoSlidesTransitionEnd.emit,dragStart:this.nanoSlidesDragStart.emit,dragMove:this.nanoSlidesDragMove.emit,dragEnd:this.nanoSlidesDragEnd.emit,staticClick:this.nanoSlidesTap.emit,fullscreenChange:this.handleFullscreen};var n=!!this.options&&!!this.options.on?this.options.on:{};var s={on:Object.assign(Object.assign({},n),i)};return Object.assign(Object.assign(Object.assign({},e),s),this.options)};t.prototype.componentDidLoad=function(){var t=this;if(typeof window!=="undefined"&&window.MutationObserver){var e=this.mutationO=new MutationObserver((function(e){if(e[0].addedNodes[0]&&e[0].addedNodes[0].nodeName.toLowerCase()==="nano-slide"&&t.flickityReady){t.update()}}));e.observe(this.host,{childList:true,subtree:true})}};t.prototype.componentWillLoad=function(){this.nanoSlidesDidLoad.emit();if(!this.didInit){this.didInit=true;this.initflickity()}};t.prototype.disconnectedCallback=function(){if(this.mutationO){this.mutationO.disconnect();this.mutationO=undefined}if(this.resizeO)this.resizeO.disconnect();this.destroyflickity()};t.prototype.render=function(){var t=this;return h(Host,null,h("div",{class:"slideshow",ref:function(e){return t.slideShowEle=e}},h("div",{ref:function(e){return t.flickityEl=e},class:{"flickity-container":true,"slides-ready":this.slidesReady,"slides-not-ready":!this.slidesReady}},h("slot",null)),h("div",{class:"ui-extras"},h("slot",{name:"ui"}))))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{options:["optionsChanged"],navbtns:["navbtnsChanged"],pager:["pagerChanged"],fullscreenbtn:["fullscreenBtnChanged"],fullscreen:["fullscreenChanged"],animation:["animationChange"],currentSlide:["currentSlideChange"],iCurrentSlide:["internalSlideChange"],autoplay:["autoPlayChange"]}},enumerable:false,configurable:true});return t}();var waitForSlides=function(t){var e=Array.from(t.querySelectorAll("nano-slide"));var i=e.filter((function(t){return!t.ready}));if(!i.length)return Promise.resolve(e);return new Promise((function(n){var s=function(r){i=i.filter((function(t){return t!==r.target}));if(!i.length){n(e);t.removeEventListener("nanoSlideReady",s)}};t.addEventListener("nanoSlideReady",s)}))};Slides.style=slidesCss;export{Slides as nano_slides};
+//# sourceMappingURL=nano-slides.entry.js.map