@nanoporetech-digital/components 5.10.0 → 5.11.0

package/dist/cjs/nano-slides-2f3dcc02.js

@@ -0,0 +1,2975 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+'use strict';
+
+const index = require('./index-14451c95.js');
+
+function EvEmitter() { }
+const proto$7 = EvEmitter.prototype;
+proto$7.on = function (eventName, listener) {
+  if (!eventName || !listener) {
+    return;
+  }
+  // set events hash
+  const events = (this._events = this._events || {});
+  // set listeners array
+  const listeners = (events[eventName] = events[eventName] || []);
+  // only add once
+  if (listeners.indexOf(listener) == -1) {
+    listeners.push(listener);
+  }
+  return this;
+};
+proto$7.once = function (eventName, listener) {
+  if (!eventName || !listener) {
+    return;
+  }
+  // add event
+  this.on(eventName, listener);
+  // set once flag
+  // set onceEvents hash
+  const onceEvents = (this._onceEvents = this._onceEvents || {});
+  // set onceListeners object
+  const onceListeners = (onceEvents[eventName] = onceEvents[eventName] || {});
+  // set flag
+  onceListeners[listener] = true;
+  return this;
+};
+proto$7.off = function (eventName, listener) {
+  const listeners = this._events && this._events[eventName];
+  if (!listeners || !listeners.length) {
+    return;
+  }
+  const index = listeners.indexOf(listener);
+  if (index != -1) {
+    listeners.splice(index, 1);
+  }
+  return this;
+};
+proto$7.emitEvent = function (eventName, args) {
+  let listeners = this._events && this._events[eventName];
+  if (!listeners || !listeners.length) {
+    return;
+  }
+  // copy over to avoid interference if .off() in listener
+  listeners = listeners.slice(0);
+  args = args || [];
+  // once stuff
+  const onceListeners = this._onceEvents && this._onceEvents[eventName];
+  for (let i = 0; i < listeners.length; i++) {
+    const listener = listeners[i];
+    const isOnce = onceListeners && onceListeners[listener];
+    if (isOnce) {
+      // remove listener
+      // remove before trigger to prevent recursion
+      this.off(eventName, listener);
+      // unset once flag
+      delete onceListeners[listener];
+    }
+    // trigger listener
+    listener.apply(this, args);
+  }
+  return this;
+};
+proto$7.allOff = function () {
+  delete this._events;
+  delete this._onceEvents;
+};
+
+/*!
+ * getSize v2.0.3
+ * measure size of elements
+ * MIT license
+ */
+// get a number from a string, not a percentage
+function getStyleSize(value) {
+  const num = parseFloat(value);
+  // not a percent like '100%', and a number
+  const isValid = value.indexOf('%') == -1 && !isNaN(num);
+  return isValid && num;
+}
+function noop$1() { }
+const logError = typeof console == 'undefined'
+  ? noop$1
+  : function (message) {
+    console.error(message);
+  };
+// -------------------------- measurements -------------------------- //
+const measurements = [
+  'paddingLeft',
+  'paddingRight',
+  'paddingTop',
+  'paddingBottom',
+  'marginLeft',
+  'marginRight',
+  'marginTop',
+  'marginBottom',
+  'borderLeftWidth',
+  'borderRightWidth',
+  'borderTopWidth',
+  'borderBottomWidth',
+];
+const measurementsLength = measurements.length;
+function getZeroSize() {
+  const size = {
+    width: 0,
+    height: 0,
+    innerWidth: 0,
+    innerHeight: 0,
+    outerWidth: 0,
+    outerHeight: 0,
+  };
+  for (let i = 0; i < measurementsLength; i++) {
+    const measurement = measurements[i];
+    size[measurement] = 0;
+  }
+  return size;
+}
+// -------------------------- getStyle -------------------------- //
+/**
+ * getStyle, get style of element, check for Firefox bug
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+ * @param elem element to get styles for
+ * @returns {CSSStyleDeclaration} styles of element
+ */
+function getStyle(elem) {
+  const style = getComputedStyle(elem);
+  if (!style) {
+    logError('Style returned ' +
+      style +
+      '. Are you running this code in a hidden iframe on Firefox? ' +
+      'See https://bit.ly/getsizebug1');
+  }
+  return style;
+}
+// -------------------------- setup -------------------------- //
+let isSetup = false;
+let isBoxSizeOuter;
+/**
+ * setup
+ * check isBoxSizerOuter
+ * do on first getSize() rather than on page load for Firefox bug
+ */
+function setup() {
+  // setup once
+  if (isSetup) {
+    return;
+  }
+  isSetup = true;
+  // -------------------------- box sizing -------------------------- //
+  /**
+   * Chrome & Safari measure the outer-width on style.width on border-box elems
+   * IE11 & Firefox<29 measures the inner-width
+   */
+  const div = document.createElement('div');
+  div.style.width = '200px';
+  div.style.padding = '1px 2px 3px 4px';
+  div.style.borderStyle = 'solid';
+  div.style.borderWidth = '1px 2px 3px 4px';
+  div.style.boxSizing = 'border-box';
+  const body = document.body || document.documentElement;
+  body.appendChild(div);
+  const style = getStyle(div);
+  // round value for browser zoom. desandro/masonry#928
+  isBoxSizeOuter = Math.round(getStyleSize(style.width)) == 200;
+  // @ts-ignore
+  getSize.isBoxSizeOuter = isBoxSizeOuter;
+  body.removeChild(div);
+}
+// -------------------------- getSize -------------------------- //
+function getSize(elem) {
+  setup();
+  // use querySeletor if elem is string
+  if (typeof elem == 'string') {
+    elem = document.querySelector(elem);
+  }
+  // do not proceed on non-objects
+  if (!elem || typeof elem != 'object' || !elem.nodeType) {
+    return;
+  }
+  const style = getStyle(elem);
+  // if hidden, everything is 0
+  if (style.display == 'none') {
+    return getZeroSize();
+  }
+  const size = {};
+  size.width = elem.offsetWidth;
+  size.height = elem.offsetHeight;
+  const isBorderBox = (size.isBorderBox = style.boxSizing == 'border-box');
+  // get all measurements
+  for (let i = 0; i < measurementsLength; i++) {
+    const measurement = measurements[i];
+    const value = style[measurement];
+    const num = parseFloat(value);
+    // any 'auto', 'medium' value will be 0
+    size[measurement] = !isNaN(num) ? num : 0;
+  }
+  const paddingWidth = size.paddingLeft + size.paddingRight;
+  const paddingHeight = size.paddingTop + size.paddingBottom;
+  const marginWidth = size.marginLeft + size.marginRight;
+  const marginHeight = size.marginTop + size.marginBottom;
+  const borderWidth = size.borderLeftWidth + size.borderRightWidth;
+  const borderHeight = size.borderTopWidth + size.borderBottomWidth;
+  const isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
+  // overwrite width and height if we can get it from style
+  const styleWidth = getStyleSize(style.width);
+  if (styleWidth !== false) {
+    size.width =
+      styleWidth +
+        // add padding and border unless it's already including it
+        (isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth);
+  }
+  const styleHeight = getStyleSize(style.height);
+  if (styleHeight !== false) {
+    size.height =
+      styleHeight +
+        // add padding and border unless it's already including it
+        (isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight);
+  }
+  size.innerWidth = size.width - (paddingWidth + borderWidth);
+  size.innerHeight = size.height - (paddingHeight + borderHeight);
+  size.outerWidth = size.width + marginWidth;
+  size.outerHeight = size.height + marginHeight;
+  return size;
+}
+
+/**
+ * Fizzy UI utils v2.0.7
+ * MIT license
+ */
+/*jshint browser: true, undef: true, unused: true, strict: true */
+const utils = {};
+// ----- extend ----- //
+// extends objects
+utils.extend = function (a, b) {
+  for (const prop in b) {
+    a[prop] = b[prop];
+  }
+  return a;
+};
+// ----- docReady ----- //
+utils.docReady = function (callback) {
+  const readyState = document.readyState;
+  if (readyState == 'complete' || readyState == 'interactive') {
+    // do async to allow for other scripts to run. metafizzy/flickity#441
+    setTimeout(callback);
+  }
+  else {
+    document.addEventListener('DOMContentLoaded', callback);
+  }
+};
+// ----- toDashed ----- //
+utils.toDashed = function (str) {
+  return str
+    .replace(/(.)([A-Z])/g, function (_match, $1, $2) {
+    return $1 + '-' + $2;
+  })
+    .toLowerCase();
+};
+// ----- modulo ----- //
+utils.modulo = function (num, div) {
+  return ((num % div) + div) % div;
+};
+// ----- makeArray ----- //
+const arraySlice = Array.prototype.slice;
+// turn element or nodeList into an array
+utils.makeArray = function (obj) {
+  if (Array.isArray(obj)) {
+    // use object if already an array
+    return obj;
+  }
+  // return empty array if undefined or null. #6
+  if (obj === null || obj === undefined) {
+    return [];
+  }
+  const isArrayLike = typeof obj == 'object' && typeof obj.length == 'number';
+  if (isArrayLike) {
+    // convert nodeList to array
+    return arraySlice.call(obj);
+  }
+  // array of single index
+  return [obj];
+};
+// ----- getParent ----- //
+utils.getParent = function (elem, selector) {
+  while (elem.parentNode && elem != document.body) {
+    elem = elem.parentElement;
+    if (elem.matches(selector)) {
+      return elem;
+    }
+  }
+};
+// ----- getQueryElement ----- //
+// use element as selector string
+utils.getQueryElement = function (elem) {
+  if (typeof elem == 'string') {
+    return document.querySelector(elem);
+  }
+  return elem;
+};
+// ----- handleEvent ----- //
+// enable .ontype to trigger from .addEventListener( elem, 'type' )
+utils.handleEvent = function (event) {
+  const method = 'on' + event.type;
+  if (this[method]) {
+    this[method](event);
+  }
+};
+// ----- filterFindElements ----- //
+utils.filterFindElements = function (elems, selector) {
+  // make array of elems
+  elems = utils.makeArray(elems);
+  const ffElems = [];
+  elems.forEach(function (elem) {
+    // check that elem is an actual element
+    if (!(elem instanceof HTMLElement)) {
+      return;
+    }
+    // add elem if no selector
+    if (!selector) {
+      ffElems.push(elem);
+      return;
+    }
+    // filter & find items if we have a selector
+    // filter
+    if (elem.matches(selector)) {
+      ffElems.push(elem);
+    }
+    // find children
+    const childElems = elem.querySelectorAll(selector);
+    // concat childElems to filterFound array
+    for (let i = 0; i < childElems.length; i++) {
+      ffElems.push(childElems[i]);
+    }
+  });
+  return ffElems;
+};
+// ----- debounceMethod ----- //
+utils.debounceMethod = function (_class, methodName, threshold) {
+  threshold = threshold || 100;
+  // original method
+  const method = _class.prototype[methodName];
+  const timeoutName = methodName + 'Timeout';
+  _class.prototype[methodName] = function (...args) {
+    const timeout = this[timeoutName];
+    clearTimeout(timeout);
+    const _this = this;
+    this[timeoutName] = setTimeout(function () {
+      method.apply(_this, args);
+      delete _this[timeoutName];
+    }, threshold);
+  };
+};
+const console$2 = window.console;
+/**
+ * allow user to initialize classes via [data-namespace] or .js-namespace class
+ * htmlInit( Widget, 'widgetName' )
+ * options are parsed from data-namespace-options
+ */
+utils.htmlInit = function (WidgetClass, namespace) {
+  utils.docReady(function () {
+    const dashedNamespace = utils.toDashed(namespace);
+    const dataAttr = 'data-' + dashedNamespace;
+    const dataAttrElems = document.querySelectorAll('[' + dataAttr + ']');
+    const jsDashElems = document.querySelectorAll('.js-' + dashedNamespace);
+    const elems = utils
+      .makeArray(dataAttrElems)
+      .concat(utils.makeArray(jsDashElems));
+    const dataOptionsAttr = dataAttr + '-options';
+    elems.forEach(function (elem) {
+      const attr = elem.getAttribute(dataAttr) || elem.getAttribute(dataOptionsAttr);
+      let options;
+      try {
+        options = attr && JSON.parse(attr);
+      }
+      catch (error) {
+        // log error, do not initialize
+        if (console$2) {
+          console$2.error('Error parsing ' + dataAttr + ' on ' + elem.className + ': ' + error);
+        }
+        return;
+      }
+      // initialize
+      // @ts-ignore
+      new WidgetClass(elem, options);
+    });
+  });
+};
+
+function Cell(elem, parent) {
+  this.element = elem;
+  this.parent = parent;
+  this.create();
+}
+const proto$6 = Cell.prototype;
+proto$6.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((element) => {
+    element.setAttribute('tabindex', '-1');
+  });
+};
+proto$6.destroy = function () {
+  // reset style
+  this.unselect();
+  this.element.style.position = '';
+  const side = this.parent.originSide;
+  this.element.style[side] = '';
+};
+proto$6.getSize = function () {
+  this.size = getSize(this.element);
+};
+proto$6.setPosition = function (x) {
+  this.x = x;
+  this.updateTarget();
+  this.renderPosition(x);
+};
+// setDefaultTarget v1 method, backwards compatibility, remove in v3
+proto$6.updateTarget = proto$6.setDefaultTarget = function () {
+  const marginProperty = this.parent.originSide == 'left' ? 'marginLeft' : 'marginRight';
+  this.target =
+    this.x +
+      this.size[marginProperty] +
+      this.size.width * this.parent.cellAlign;
+};
+proto$6.renderPosition = function (x) {
+  // render position of cell with in slider
+  const side = this.parent.originSide;
+  this.element.style[side] = this.parent.getPositionValue(x);
+};
+proto$6.select = function () {
+  this.element.classList.add('is-selected');
+  this.element.removeAttribute('aria-hidden');
+  Array.from(this.element.querySelectorAll('*')).forEach((element) => {
+    element.removeAttribute('tabindex');
+  });
+};
+proto$6.unselect = function () {
+  this.element.classList.remove('is-selected');
+  this.element.setAttribute('aria-hidden', 'true');
+  Array.from(this.element.querySelectorAll('*')).forEach((element) => {
+    element.setAttribute('tabindex', '-1');
+  });
+};
+/**
+ * @param {Integer} shift - 0, 1, or -1
+ **/
+proto$6.wrapShift = function (shift) {
+  this.shift = shift;
+  this.renderPosition(this.x + this.parent.slideableWidth * shift);
+};
+proto$6.remove = function () {
+  this.element.parentNode.removeChild(this.element);
+};
+
+function Slide(parent) {
+  this.parent = parent;
+  this.isOriginLeft = parent.originSide == 'left';
+  this.cells = [];
+  this.outerWidth = 0;
+  this.height = 0;
+}
+const proto$5 = Slide.prototype;
+proto$5.addCell = function (cell) {
+  this.cells.push(cell);
+  this.outerWidth += cell.size.outerWidth;
+  this.height = Math.max(cell.size.outerHeight, this.height);
+  // first cell stuff
+  if (this.cells.length == 1) {
+    this.x = cell.x; // x comes from first cell
+    const beginMargin = this.isOriginLeft ? 'marginLeft' : 'marginRight';
+    this.firstMargin = cell.size[beginMargin];
+  }
+};
+proto$5.updateTarget = function () {
+  const endMargin = this.isOriginLeft ? 'marginRight' : 'marginLeft';
+  const lastCell = this.getLastCell();
+  const lastMargin = lastCell ? lastCell.size[endMargin] : 0;
+  const slideWidth = this.outerWidth - (this.firstMargin + lastMargin);
+  this.target = this.x + this.firstMargin + slideWidth * this.parent.cellAlign;
+};
+proto$5.getLastCell = function () {
+  return this.cells[this.cells.length - 1];
+};
+proto$5.select = function () {
+  this.cells.forEach(function (cell) {
+    cell.select();
+  });
+};
+proto$5.unselect = function () {
+  this.cells.forEach(function (cell) {
+    cell.unselect();
+  });
+};
+proto$5.getCellElements = function () {
+  return this.cells.map(function (cell) {
+    return cell.element;
+  });
+};
+
+const proto$4 = {};
+proto$4.startAnimation = function () {
+  if (this.isAnimating) {
+    return;
+  }
+  this.isAnimating = true;
+  this.restingFrames = 0;
+  this.animate();
+};
+proto$4.animate = function () {
+  this.applyDragForce();
+  this.applySelectedAttraction();
+  const previousX = this.x;
+  this.integratePhysics();
+  this.positionSlider();
+  this.settle(previousX);
+  // animate next frame
+  if (this.isAnimating) {
+    const _this = this;
+    requestAnimationFrame(function animateFrame() {
+      _this.animate();
+    });
+  }
+};
+proto$4.positionSlider = function () {
+  let x = this.x;
+  // wrap position around
+  if (this.options.wrapAround && this.cells.length > 1) {
+    x = utils.modulo(x, this.slideableWidth);
+    x = x - this.slideableWidth;
+    this.shiftWrapCells(x);
+  }
+  this.setTranslateX(x, this.isAnimating);
+  this.dispatchScrollEvent();
+};
+proto$4.setTranslateX = function (x, _is3d) {
+  x += this.cursorPosition;
+  // reverse if right-to-left and using transform
+  x = this.options.rightToLeft ? -x : x;
+  const translateX = this.getPositionValue(x);
+  // use 3D tranforms for hardware acceleration on iOS
+  // but use 2D when settled, for better font-rendering
+  // this.slider.style.transform = is3d
+  //   ? 'translate3d(' + translateX + ',0,0)'
+  //   : 'translateX(' + translateX + ')';
+  this.slider.style.transform = 'translate3d(' + translateX + ',0,0)';
+};
+proto$4.dispatchScrollEvent = function () {
+  const firstSlide = this.slides[0];
+  if (!firstSlide) {
+    return;
+  }
+  const positionX = -this.x - firstSlide.target;
+  const progress = positionX / this.slidesWidth;
+  this.dispatchEvent('scroll', null, [progress, positionX]);
+};
+proto$4.positionSliderAtSelected = function () {
+  if (!this.cells.length) {
+    return;
+  }
+  this.x = -this.selectedSlide.target;
+  this.velocity = 0; // stop wobble
+  this.positionSlider();
+};
+proto$4.getPositionValue = function (position) {
+  if (this.options.percentPosition) {
+    // percent position, round to 2 digits, like 12.34%
+    return Math.round((position / this.size.innerWidth) * 10000) * 0.01 + '%';
+  }
+  else {
+    // pixel positioning
+    return Math.round(position) + 'px';
+  }
+};
+proto$4.settle = function (previousX) {
+  // keep track of frames where x hasn't moved
+  if (!this.isPointerDown &&
+    Math.round(this.x * 100) == Math.round(previousX * 100)) {
+    this.restingFrames++;
+  }
+  // stop animating if resting for 3 or more frames
+  if (this.restingFrames > 2) {
+    this.isAnimating = false;
+    delete this.isFreeScrolling;
+    // render position with translateX when settled
+    this.positionSlider();
+    this.dispatchEvent('settle', null, [this.selectedIndex]);
+  }
+};
+proto$4.shiftWrapCells = function (x) {
+  // shift before cells
+  const beforeGap = this.cursorPosition + x;
+  this._shiftCells(this.beforeShiftCells, beforeGap, -1);
+  // shift after cells
+  const afterGap = this.size.innerWidth - (x + this.slideableWidth + this.cursorPosition);
+  this._shiftCells(this.afterShiftCells, afterGap, 1);
+};
+proto$4._shiftCells = function (cells, gap, shift) {
+  for (let i = 0; i < cells.length; i++) {
+    const cell = cells[i];
+    const cellShift = gap > 0 ? shift : 0;
+    cell.wrapShift(cellShift);
+    gap -= cell.size.outerWidth;
+  }
+};
+proto$4._unshiftCells = function (cells) {
+  if (!cells || !cells.length) {
+    return;
+  }
+  for (let i = 0; i < cells.length; i++) {
+    cells[i].wrapShift(0);
+  }
+};
+// -------------------------- physics -------------------------- //
+proto$4.integratePhysics = function () {
+  this.x += this.velocity;
+  this.velocity *= this.getFrictionFactor();
+};
+proto$4.applyForce = function (force) {
+  this.velocity += force;
+};
+proto$4.getFrictionFactor = function () {
+  return (1 - this.options[this.isFreeScrolling ? 'freeScrollFriction' : 'friction']);
+};
+proto$4.getRestingPosition = function () {
+  // my thanks to Steven Wittens, who simplified this math greatly
+  return this.x + this.velocity / (1 - this.getFrictionFactor());
+};
+proto$4.applyDragForce = function () {
+  if (!this.isDraggable || !this.isPointerDown) {
+    return;
+  }
+  // change the position to drag position by applying force
+  const dragVelocity = this.dragX - this.x;
+  const dragForce = dragVelocity - this.velocity;
+  this.applyForce(dragForce);
+};
+proto$4.applySelectedAttraction = function () {
+  // do not attract if pointer down or no slides
+  const dragDown = this.isDraggable && this.isPointerDown;
+  if (dragDown || this.isFreeScrolling || !this.slides.length) {
+    return;
+  }
+  const distance = this.selectedSlide.target * -1 - this.x;
+  const force = distance * this.options.selectedAttraction;
+  this.applyForce(force);
+};
+
+// vars
+const getComputedStyle$1 = window.getComputedStyle;
+const console$1 = window.console;
+function moveElements(elems, toElem) {
+  elems = utils.makeArray(elems);
+  while (elems.length) {
+    toElem.appendChild(elems.shift());
+  }
+}
+// -------------------------- Flickity -------------------------- //
+// globally unique identifiers
+let GUID = 0;
+// internal store of all Flickity intances
+const instances = {};
+function Flickity(element, options) {
+  const queryElement = utils.getQueryElement(element);
+  if (!queryElement) {
+    if (console$1) {
+      console$1.error('Bad element for Flickity: ' + (queryElement || element));
+    }
+    return;
+  }
+  this.element = queryElement;
+  // do not initialize twice on same element
+  if (this.element.flickityGUID) {
+    const instance = instances[this.element.flickityGUID];
+    if (!instances[this.element.flickityGUID])
+      return;
+    instance.option(options);
+    return instance;
+  }
+  // options
+  this.options = utils.extend({}, this.constructor.defaults);
+  this.option(options);
+  // kick things off
+  this._create();
+}
+Flickity.defaults = {
+  accessibility: true,
+  // adaptiveHeight: false,
+  cellAlign: 'center',
+  // cellSelector: undefined,
+  // contain: false,
+  freeScrollFriction: 0.075,
+  friction: 0.28,
+  namespaceJQueryEvents: true,
+  // initialIndex: 0,
+  percentPosition: true,
+  resize: true,
+  selectedAttraction: 0.025,
+  setGallerySize: true,
+  // watchCSS: false,
+  // wrapAround: false
+};
+// hash of methods triggered on _create()
+Flickity.createMethods = [];
+const proto$3 = Flickity.prototype;
+// inherit EventEmitter
+utils.extend(proto$3, EvEmitter.prototype);
+proto$3._create = function () {
+  // add id for Flickity.data
+  const id = (this.guid = ++GUID);
+  this.element.flickityGUID = id; // expando
+  instances[id] = this; // associate via id
+  // initial properties
+  this.selectedIndex = 0;
+  // how many frames slider has been in same position
+  this.restingFrames = 0;
+  // initial physics properties
+  this.x = 0;
+  this.velocity = 0;
+  this.originSide = this.options.rightToLeft ? 'right' : 'left';
+  // create viewport & slider
+  this.viewport = document.createElement('div');
+  this.viewport.className = 'flickity-viewport';
+  this.viewport.part.add('slide-viewport');
+  this._createSlider();
+  if (this.options.resize || this.options.watchCSS) {
+    window.addEventListener('resize', this);
+  }
+  // add listeners from on option
+  for (const eventName in this.options.on) {
+    const listener = this.options.on[eventName];
+    this.on(eventName, listener);
+  }
+  Flickity.createMethods.forEach(function (method) {
+    this[method]();
+  }, this);
+  if (this.options.watchCSS) {
+    this.watchCSS();
+  }
+  else {
+    this.activate();
+  }
+};
+/**
+ * set options
+ * @param {Object} opts
+ */
+proto$3.option = function (opts) {
+  utils.extend(this.options, opts);
+};
+proto$3.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();
+  // move initial cell elements so they can be loaded as cells
+  const cellElems = this.element.children; //this._filterFindCellElements( this.element.children );
+  moveElements(cellElems, this.slider);
+  this.viewport.appendChild(this.slider);
+  this.element.appendChild(this.viewport);
+  // get cells from children
+  this.reloadCells();
+  if (this.options.accessibility) {
+    // allow element to focusable
+    this.element.tabIndex = 0;
+    // listen for key presses
+    this.element.addEventListener('keydown', this);
+  }
+  this.emitEvent('activate');
+  this.selectInitialIndex();
+  // flag for initial activation, for using initialIndex
+  this.isInitActivated = true;
+  // ready event. #493
+  this.dispatchEvent('ready');
+};
+// slider positions the cells
+proto$3._createSlider = function () {
+  // slider element does all the positioning
+  const slider = document.createElement('div');
+  slider.className = 'flickity-slider';
+  slider.style[this.originSide] = 0;
+  this.slider = slider;
+};
+proto$3._filterFindCellElements = function (elems) {
+  return utils.filterFindElements(elems, this.options.cellSelector);
+};
+// goes through all children
+proto$3.reloadCells = function () {
+  // collection of item elements
+  this.cells = this._makeCells(this.slider.getRootNode().host
+    ? this.slider.getRootNode().host.children
+    : this.slider.children);
+  this.positionCells();
+  this._getWrapShiftCells();
+  this.setGallerySize();
+};
+/**
+ * turn elements into Flickity.Cells
+ * @param {Array or NodeList or HTMLElement} elems
+ * @returns {Array} items - collection of new Flickity Cells
+ */
+proto$3._makeCells = function (elems) {
+  const cellElems = this._filterFindCellElements(elems);
+  // create new Flickity for collection
+  const cells = cellElems.map(function (cellElem) {
+    return new Cell(cellElem, this);
+  }, this);
+  return cells;
+};
+proto$3.getLastCell = function () {
+  return this.cells[this.cells.length - 1];
+};
+proto$3.getLastSlide = function () {
+  return this.slides[this.slides.length - 1];
+};
+// positions all cells
+proto$3.positionCells = function () {
+  // size all cells
+  this._sizeCells(this.cells);
+  // position all cells
+  this._positionCells(0);
+};
+/**
+ * position certain cells
+ * @param {Integer} index - which cell to start with
+ */
+proto$3._positionCells = function (index) {
+  index = index || 0;
+  // also measure maxCellHeight
+  // start 0 if positioning all cells
+  this.maxCellHeight = index ? this.maxCellHeight || 0 : 0;
+  let cellX = 0;
+  // get cellX
+  if (index > 0) {
+    const startCell = this.cells[index - 1];
+    cellX = startCell.x + startCell.size.outerWidth;
+  }
+  const len = this.cells.length;
+  for (let i = index; i < len; i++) {
+    const cell = this.cells[i];
+    cell.setPosition(cellX);
+    cellX += cell.size.outerWidth;
+    this.maxCellHeight = Math.max(cell.size.outerHeight, this.maxCellHeight);
+  }
+  // keep track of cellX for wrap-around
+  this.slideableWidth = cellX;
+  // slides
+  this.updateSlides();
+  // contain slides target
+  this._containSlides();
+  // update slidesWidth
+  this.slidesWidth = len
+    ? this.getLastSlide().target - this.slides[0].target
+    : 0;
+};
+/**
+ * cell.getSize() on multiple cells
+ * @param {Array} cells
+ */
+proto$3._sizeCells = function (cells) {
+  cells.forEach(function (cell) {
+    cell.getSize();
+  });
+};
+// --------------------------  -------------------------- //
+proto$3.updateSlides = function () {
+  this.slides = [];
+  if (!this.cells.length) {
+    return;
+  }
+  let slide = new Slide(this);
+  this.slides.push(slide);
+  const isOriginLeft = this.originSide == 'left';
+  const nextMargin = isOriginLeft ? 'marginRight' : 'marginLeft';
+  const canCellFit = this._getCanCellFit();
+  this.cells.forEach(function (cell, i) {
+    // just add cell if first cell in slide
+    if (!slide.cells.length) {
+      slide.addCell(cell);
+      return;
+    }
+    const slideWidth = slide.outerWidth -
+      slide.firstMargin +
+      (cell.size.outerWidth - cell.size[nextMargin]);
+    if (canCellFit.call(this, i, slideWidth)) {
+      slide.addCell(cell);
+    }
+    else {
+      // doesn't fit, new slide
+      slide.updateTarget();
+      slide = new Slide(this);
+      this.slides.push(slide);
+      slide.addCell(cell);
+    }
+  }, this);
+  // last slide
+  slide.updateTarget();
+  // update .selectedSlide
+  this.updateSelectedSlide();
+};
+proto$3._getCanCellFit = function () {
+  const groupCells = this.options.groupCells;
+  if (!groupCells) {
+    return function () {
+      return false;
+    };
+  }
+  else if (typeof groupCells == 'number') {
+    // group by number. 3 -> [0,1,2], [3,4,5], ...
+    // @ts-ignore
+    const number = parseInt(groupCells, 10);
+    return function (i) {
+      return i % number !== 0;
+    };
+  }
+  // default, group by width of slide
+  // parse '75%
+  const percentMatch = typeof groupCells == 'string' && groupCells.match(/^(\d+)%$/);
+  const percent = percentMatch ? parseInt(percentMatch[1], 10) / 100 : 1;
+  return function (_i, slideWidth) {
+    return slideWidth <= (this.size.innerWidth + 1) * percent;
+  };
+};
+// alias _init for jQuery plugin .flickity()
+proto$3._init = proto$3.reposition = function () {
+  this.positionCells();
+  this.positionSliderAtSelected();
+};
+proto$3.getSize = function () {
+  this.size = getSize(this.element);
+  this.setCellAlign();
+  this.cursorPosition = this.size.innerWidth * this.cellAlign;
+};
+const cellAlignShorthands = {
+  // cell align, then based on origin side
+  center: {
+    left: 0.5,
+    right: 0.5,
+  },
+  left: {
+    left: 0,
+    right: 1,
+  },
+  right: {
+    right: 0,
+    left: 1,
+  },
+};
+proto$3.setCellAlign = function () {
+  const shorthand = cellAlignShorthands[this.options.cellAlign];
+  this.cellAlign = shorthand
+    ? shorthand[this.originSide]
+    : this.options.cellAlign;
+};
+proto$3.setGallerySize = function () {
+  if (this.options.setGallerySize) {
+    const height = this.options.adaptiveHeight && this.selectedSlide
+      ? this.selectedSlide.height
+      : this.maxCellHeight;
+    this.viewport.style.height = height + 'px';
+  }
+};
+proto$3._getWrapShiftCells = function () {
+  // only for wrap-around
+  if (!this.options.wrapAround) {
+    return;
+  }
+  // unshift previous cells
+  this._unshiftCells(this.beforeShiftCells);
+  this._unshiftCells(this.afterShiftCells);
+  // get before cells
+  // initial gap
+  let gapX = this.cursorPosition;
+  const cellIndex = this.cells.length - 1;
+  this.beforeShiftCells = this._getGapCells(gapX, cellIndex, -1);
+  // get after cells
+  // ending gap between last cell and end of gallery viewport
+  gapX = this.size.innerWidth - this.cursorPosition;
+  // start cloning at first cell, working forwards
+  this.afterShiftCells = this._getGapCells(gapX, 0, 1);
+};
+proto$3._getGapCells = function (gapX, cellIndex, increment) {
+  // keep adding cells until the cover the initial gap
+  const cells = [];
+  while (gapX > 0) {
+    const cell = this.cells[cellIndex];
+    if (!cell) {
+      break;
+    }
+    cells.push(cell);
+    cellIndex += increment;
+    gapX -= cell.size.outerWidth;
+  }
+  return cells;
+};
+// ----- contain ----- //
+// contain cell targets so no excess sliding
+proto$3._containSlides = function () {
+  if (!this.options.contain || this.options.wrapAround || !this.cells.length) {
+    return;
+  }
+  const isRightToLeft = this.options.rightToLeft;
+  const beginMargin = isRightToLeft ? 'marginRight' : 'marginLeft';
+  const endMargin = isRightToLeft ? 'marginLeft' : 'marginRight';
+  const contentWidth = this.slideableWidth - this.getLastCell().size[endMargin];
+  // content is less than gallery size
+  const isContentSmaller = contentWidth < this.size.innerWidth;
+  // bounds
+  const beginBound = this.cursorPosition + this.cells[0].size[beginMargin];
+  const endBound = contentWidth - this.size.innerWidth * (1 - this.cellAlign);
+  // contain each cell target
+  this.slides.forEach(function (slide) {
+    if (isContentSmaller) {
+      // all cells fit inside gallery
+      slide.target = contentWidth * this.cellAlign;
+    }
+    else {
+      // contain to bounds
+      slide.target = Math.max(slide.target, beginBound);
+      slide.target = Math.min(slide.target, endBound);
+    }
+  }, this);
+};
+// -----  ----- //
+/**
+ * emits events via eventEmitter and jQuery events
+ * @param {String} type - name of event
+ * @param {Event} event - original event
+ * @param {Array} args - extra arguments
+ */
+proto$3.dispatchEvent = function (type, event, args) {
+  const emitArgs = event ? [event].concat(args) : args;
+  this.emitEvent(type, emitArgs);
+};
+// -------------------------- select -------------------------- //
+/**
+ * @param {Integer} index - index of the slide
+ * @param {Boolean} isWrap - will wrap-around to last/first if at the end
+ * @param {Boolean} isInstant - will immediately set position at selected cell
+ */
+proto$3.select = function (index, isWrap, isInstant) {
+  if (!this.isActive) {
+    return;
+  }
+  index = parseInt(index, 10);
+  this._wrapSelect(index);
+  if (this.options.wrapAround || isWrap) {
+    index = utils.modulo(index, this.slides.length);
+  }
+  // bail if invalid index
+  if (!this.slides[index]) {
+    return;
+  }
+  const prevIndex = this.selectedIndex;
+  this.selectedIndex = index;
+  this.updateSelectedSlide();
+  if (isInstant) {
+    this.positionSliderAtSelected();
+  }
+  else {
+    this.startAnimation();
+  }
+  if (this.options.adaptiveHeight) {
+    this.setGallerySize();
+  }
+  // events
+  this.dispatchEvent('select', null, [index]);
+  // change event if new index
+  if (index != prevIndex) {
+    this.dispatchEvent('change', null, [index]);
+  }
+  // old v1 event name, remove in v3
+  this.dispatchEvent('cellSelect');
+};
+// wraps position for wrapAround, to move to closest slide. #113
+proto$3._wrapSelect = function (index) {
+  const len = this.slides.length;
+  const isWrapping = this.options.wrapAround && len > 1;
+  if (!isWrapping) {
+    return index;
+  }
+  const wrapIndex = utils.modulo(index, len);
+  // go to shortest
+  const delta = Math.abs(wrapIndex - this.selectedIndex);
+  const backWrapDelta = Math.abs(wrapIndex + len - this.selectedIndex);
+  const forewardWrapDelta = Math.abs(wrapIndex - len - this.selectedIndex);
+  if (!this.isDragSelect && backWrapDelta < delta) {
+    index += len;
+  }
+  else if (!this.isDragSelect && forewardWrapDelta < delta) {
+    index -= len;
+  }
+  // wrap position so slider is within normal area
+  if (index < 0) {
+    this.x -= this.slideableWidth;
+  }
+  else if (index >= len) {
+    this.x += this.slideableWidth;
+  }
+};
+proto$3.previous = function (isWrap, isInstant) {
+  this.select(this.selectedIndex - 1, isWrap, isInstant);
+};
+proto$3.next = function (isWrap, isInstant) {
+  this.select(this.selectedIndex + 1, isWrap, isInstant);
+};
+proto$3.updateSelectedSlide = function () {
+  const slide = this.slides[this.selectedIndex];
+  // selectedIndex could be outside of slides, if triggered before resize()
+  if (!slide) {
+    return;
+  }
+  // unselect previous selected slide
+  this.unselectSelectedSlide();
+  // update new selected slide
+  this.selectedSlide = slide;
+  slide.select();
+  this.selectedCells = slide.cells;
+  this.selectedElements = slide.getCellElements();
+  // HACK: selectedCell & selectedElement is first cell in slide, backwards compatibility
+  // Remove in v3?
+  this.selectedCell = slide.cells[0];
+  this.selectedElement = this.selectedElements[0];
+};
+proto$3.unselectSelectedSlide = function () {
+  if (this.selectedSlide) {
+    this.selectedSlide.unselect();
+  }
+};
+proto$3.selectInitialIndex = function () {
+  const initialIndex = this.options.initialIndex;
+  // already activated, select previous selectedIndex
+  if (this.isInitActivated) {
+    this.select(this.selectedIndex, false, true);
+    return;
+  }
+  // select with selector string
+  if (initialIndex && typeof initialIndex == 'string') {
+    const cell = this.queryCell(initialIndex);
+    if (cell) {
+      this.selectCell(initialIndex, false, true);
+      return;
+    }
+  }
+  let index = 0;
+  // select with number
+  if (initialIndex && this.slides[initialIndex]) {
+    index = initialIndex;
+  }
+  // select instantly
+  this.select(index, false, true);
+};
+/**
+ * select slide from number or cell element
+ * @param {Element or Number} elem
+ * @param { Boolean } isWrap
+ * @param { Boolean } isInstant
+ */
+proto$3.selectCell = function (elem, isWrap, isInstant) {
+  // get cell
+  const cell = this.queryCell(elem);
+  if (!cell) {
+    return;
+  }
+  const index = this.getCellSlideIndex(cell);
+  this.select(index, isWrap, isInstant);
+};
+proto$3.getCellSlideIndex = function (cell) {
+  // get index of slides that has cell
+  for (let i = 0; i < this.slides.length; i++) {
+    const slide = this.slides[i];
+    const index = slide.cells.indexOf(cell);
+    if (index != -1) {
+      return i;
+    }
+  }
+};
+// -------------------------- get cells -------------------------- //
+/**
+ * get Flickity.Cell, given an Element
+ * @param {Element} elem
+ * @returns found flickity cell
+ */
+proto$3.getCell = function (elem) {
+  // loop through cells to get the one that matches
+  for (let i = 0; i < this.cells.length; i++) {
+    const cell = this.cells[i];
+    if (cell.element == elem) {
+      return cell;
+    }
+  }
+};
+/**
+ * get collection of Flickity.Cells, given Elements
+ * @param {Element, Array, NodeList} elems
+ * @returns {Array} cells - Flickity.Cells
+ */
+proto$3.getCells = function (elems) {
+  elems = utils.makeArray(elems);
+  const cells = [];
+  elems.forEach(function (elem) {
+    const cell = this.getCell(elem);
+    if (cell) {
+      cells.push(cell);
+    }
+  }, this);
+  return cells;
+};
+/**
+ * get cell elements
+ * @returns {Array} cellElems
+ */
+proto$3.getCellElements = function () {
+  return this.cells.map(function (cell) {
+    return cell.element;
+  });
+};
+/**
+ * get parent cell from an element
+ * @param {Element} elem
+ * @returns {Flickit.Cell} cell
+ */
+proto$3.getParentCell = function (elem) {
+  // first check if elem is cell
+  const cell = this.getCell(elem);
+  if (cell) {
+    return cell;
+  }
+  // try to get parent cell elem
+  elem = utils.getParent(elem, '.flickity-slider > *');
+  return this.getCell(elem);
+};
+/**
+ * get cells adjacent to a slide
+ * @param {Integer} adjCount - number of adjacent slides
+ * @param {Integer} index - index of slide to start
+ * @returns {Array} cells - array of Flickity.Cells
+ */
+proto$3.getAdjacentCellElements = function (adjCount, index) {
+  if (!adjCount) {
+    return this.selectedSlide.getCellElements();
+  }
+  index = index === undefined ? this.selectedIndex : index;
+  const len = this.slides.length;
+  if (1 + adjCount * 2 >= len) {
+    return this.getCellElements();
+  }
+  let cellElems = [];
+  for (let i = index - adjCount; i <= index + adjCount; i++) {
+    const slideIndex = this.options.wrapAround ? utils.modulo(i, len) : i;
+    const slide = this.slides[slideIndex];
+    if (slide) {
+      cellElems = cellElems.concat(slide.getCellElements());
+    }
+  }
+  return cellElems;
+};
+/**
+ * select slide from number or cell element
+ * @param {Element, Selector String, or Number} selector
+ * @returns {Flickity.Cell} found flickity cell
+ */
+proto$3.queryCell = function (selector) {
+  if (typeof selector == 'number') {
+    // use number as index
+    return this.cells[selector];
+  }
+  if (typeof selector == 'string') {
+    // do not select invalid selectors from hash: #123, #/. #791
+    if (selector.match(/^[#\.]?[\d\/]/)) {
+      return;
+    }
+    // use string as selector, get element
+    selector = this.element.querySelector(selector);
+  }
+  // get cell from element
+  return this.getCell(selector);
+};
+// -------------------------- events -------------------------- //
+proto$3.uiChange = function () {
+  this.emitEvent('uiChange');
+};
+// keep focus on element when child UI elements are clicked
+proto$3.childUIPointerDown = function (event) {
+  // HACK iOS does not allow touch events to bubble up?!
+  if (event.type != 'touchstart') {
+    event.preventDefault();
+  }
+  this.focus();
+};
+// ----- resize ----- //
+proto$3.onresize = function () {
+  this.watchCSS();
+  this.resize();
+};
+utils.debounceMethod(Flickity, 'onresize', 150);
+proto$3.resize = function () {
+  if (!this.isActive) {
+    return;
+  }
+  this.getSize();
+  // wrap values
+  if (this.options.wrapAround) {
+    this.x = utils.modulo(this.x, this.slideableWidth);
+  }
+  this.positionCells();
+  this._getWrapShiftCells();
+  this.setGallerySize();
+  this.emitEvent('resize');
+  // update selected index for group slides, instant
+  // TODO: position can be lost between groups of various numbers
+  const selectedElement = this.selectedElements && this.selectedElements[0];
+  this.selectCell(selectedElement, false, true);
+};
+// watches the :after property, activates/deactivates
+proto$3.watchCSS = function () {
+  const watchOption = this.options.watchCSS;
+  if (!watchOption) {
+    return;
+  }
+  const afterContent = getComputedStyle$1(this.element, ':after').content;
+  // activate if :after { content: 'flickity' }
+  if (afterContent.indexOf('flickity') != -1) {
+    this.activate();
+  }
+  else {
+    this.deactivate();
+  }
+};
+// ----- keydown ----- //
+// go previous/next if left/right keys pressed
+proto$3.onkeydown = function (event) {
+  // only work if element is in focus
+  const isNotFocused = document.activeElement && document.activeElement != this.element;
+  if (!this.options.accessibility || isNotFocused) {
+    return;
+  }
+  const handler = Flickity.keyboardHandlers[event.keyCode];
+  if (handler) {
+    handler.call(this);
+  }
+};
+Flickity.keyboardHandlers = {
+  // left arrow
+  37: function () {
+    const leftMethod = this.options.rightToLeft ? 'next' : 'previous';
+    this.uiChange();
+    this[leftMethod]();
+  },
+  // right arrow
+  39: function () {
+    const rightMethod = this.options.rightToLeft ? 'previous' : 'next';
+    this.uiChange();
+    this[rightMethod]();
+  },
+};
+// ----- focus ----- //
+proto$3.focus = function () {
+  // TODO remove scrollTo once focus options gets more support
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#Browser_compatibility
+  const prevScrollY = window.pageYOffset;
+  this.element.focus({ preventScroll: true });
+  // hack to fix scroll jump after focus, #76
+  if (window.pageYOffset != prevScrollY) {
+    window.scrollTo(window.pageXOffset, prevScrollY);
+  }
+};
+// -------------------------- destroy -------------------------- //
+// deactivate all Flickity functionality, but keep stuff available
+proto$3.deactivate = function () {
+  if (!this.isActive) {
+    return;
+  }
+  this.element.classList.remove('flickity-enabled');
+  this.element.classList.remove('flickity-rtl');
+  this.unselectSelectedSlide();
+  // destroy cells
+  this.cells.forEach(function (cell) {
+    cell.destroy();
+  });
+  this.element.removeChild(this.viewport);
+  // move child elements back into element
+  moveElements(this.slider.children, this.element);
+  if (this.options.accessibility) {
+    this.element.removeAttribute('tabIndex');
+    this.element.removeEventListener('keydown', this);
+  }
+  // set flags
+  this.isActive = false;
+  this.emitEvent('deactivate');
+};
+proto$3.destroy = function () {
+  this.deactivate();
+  window.removeEventListener('resize', this);
+  this.allOff();
+  this.emitEvent('destroy');
+  delete this.element.flickityGUID;
+  delete instances[this.guid];
+};
+// -------------------------- prototype -------------------------- //
+utils.extend(proto$3, proto$4);
+// -------------------------- extras -------------------------- //
+/**
+ * get Flickity instance from element
+ * @param {Element} elem
+ * @returns {Flickity} Flickity instance
+ */
+Flickity.data = function (elem) {
+  elem = utils.getQueryElement(elem);
+  const id = elem && elem.flickityGUID;
+  return id && instances[id];
+};
+utils.htmlInit(Flickity, 'flickity');
+Flickity.Cell = Cell;
+Flickity.Slide = Slide;
+
+/*!
+ * Unipointer v2.4.0
+ * base class for doing one thing with pointer event
+ * MIT license
+ */
+function noop() { }
+function Unipointer() { }
+// inherit EvEmitter
+const pointerProto = (Unipointer.prototype = Object.create(EvEmitter.prototype));
+pointerProto.bindStartEvent = function (elem) {
+  this._bindStartEvent(elem, true);
+};
+pointerProto.unbindStartEvent = function (elem) {
+  this._bindStartEvent(elem, false);
+};
+/**
+ * Add or remove start event
+ * @param {Element} elem
+ * @param {Boolean} isAdd - remove if falsey
+ */
+pointerProto._bindStartEvent = function (elem, isAdd) {
+  // munge isAdd, default to true
+  isAdd = isAdd === undefined ? true : isAdd;
+  const bindMethod = isAdd ? 'addEventListener' : 'removeEventListener';
+  // default to mouse events
+  let startEvent = 'mousedown';
+  if ('ontouchstart' in window) {
+    // HACK prefer Touch Events as you can preventDefault on touchstart to
+    // disable scroll in iOS & mobile Chrome metafizzy/flickity#1177
+    startEvent = 'touchstart';
+  }
+  else if (window.PointerEvent) {
+    // Pointer Events
+    startEvent = 'pointerdown';
+  }
+  elem[bindMethod](startEvent, this);
+};
+// trigger handler methods for events
+pointerProto.handleEvent = function (event) {
+  const method = 'on' + event.type;
+  if (this[method]) {
+    this[method](event);
+  }
+};
+// returns the touch that we're keeping track of
+pointerProto.getTouch = function (touches) {
+  for (let i = 0; i < touches.length; i++) {
+    const touch = touches[i];
+    if (touch.identifier == this.pointerIdentifier) {
+      return touch;
+    }
+  }
+};
+// ----- start event ----- //
+pointerProto.onmousedown = function (event) {
+  // dismiss clicks from right or middle buttons
+  const button = event.button;
+  if (button && button !== 0 && button !== 1) {
+    return;
+  }
+  this._pointerDown(event, event);
+};
+pointerProto.ontouchstart = function (event) {
+  this._pointerDown(event, event.changedTouches[0]);
+};
+pointerProto.onpointerdown = function (event) {
+  this._pointerDown(event, event);
+};
+/**
+ * pointer start
+ * @param {Event} event
+ * @param {Event or Touch} pointer
+ */
+pointerProto._pointerDown = function (event, pointer) {
+  // dismiss right click and other pointers
+  // button = 0 is okay, 1-4 not
+  if (event.button || this.isPointerDown) {
+    return;
+  }
+  this.isPointerDown = true;
+  // save pointer identifier to match up touch events
+  this.pointerIdentifier =
+    pointer.pointerId !== undefined
+      ? // pointerId for pointer events, touch.indentifier for touch events
+        pointer.pointerId
+      : pointer.identifier;
+  this.pointerDown(event, pointer);
+};
+pointerProto.pointerDown = function (event, pointer) {
+  this._bindPostStartEvents(event);
+  this.emitEvent('pointerDown', [event, pointer]);
+};
+// hash of events to be bound after start event
+const postStartEvents = {
+  mousedown: ['mousemove', 'mouseup'],
+  touchstart: ['touchmove', 'touchend', 'touchcancel'],
+  pointerdown: ['pointermove', 'pointerup', 'pointercancel'],
+};
+pointerProto._bindPostStartEvents = function (event) {
+  if (!event) {
+    return;
+  }
+  // get proper events to match start event
+  const events = postStartEvents[event.type];
+  // bind events to node
+  events.forEach(function (eventName) {
+    window.addEventListener(eventName, this);
+  }, this);
+  // save these arguments
+  this._boundPointerEvents = events;
+};
+pointerProto._unbindPostStartEvents = function () {
+  // check for _boundEvents, in case dragEnd triggered twice (old IE8 bug)
+  if (!this._boundPointerEvents) {
+    return;
+  }
+  this._boundPointerEvents.forEach(function (eventName) {
+    window.removeEventListener(eventName, this);
+  }, this);
+  delete this._boundPointerEvents;
+};
+// ----- move event ----- //
+pointerProto.onmousemove = function (event) {
+  this._pointerMove(event, event);
+};
+pointerProto.onpointermove = function (event) {
+  if (event.pointerId == this.pointerIdentifier) {
+    this._pointerMove(event, event);
+  }
+};
+pointerProto.ontouchmove = function (event) {
+  const touch = this.getTouch(event.changedTouches);
+  if (touch) {
+    this._pointerMove(event, touch);
+  }
+};
+/**
+ * pointer move
+ * @param {Event} event
+ * @param {Event or Touch} pointer
+ * @private
+ */
+pointerProto._pointerMove = function (event, pointer) {
+  this.pointerMove(event, pointer);
+};
+// public
+pointerProto.pointerMove = function (event, pointer) {
+  this.emitEvent('pointerMove', [event, pointer]);
+};
+// ----- end event ----- //
+pointerProto.onmouseup = function (event) {
+  this._pointerUp(event, event);
+};
+pointerProto.onpointerup = function (event) {
+  if (event.pointerId == this.pointerIdentifier) {
+    this._pointerUp(event, event);
+  }
+};
+pointerProto.ontouchend = function (event) {
+  const touch = this.getTouch(event.changedTouches);
+  if (touch) {
+    this._pointerUp(event, touch);
+  }
+};
+/**
+ * pointer up
+ * @param {Event} event
+ * @param {Event or Touch} pointer
+ * @private
+ */
+pointerProto._pointerUp = function (event, pointer) {
+  this._pointerDone();
+  this.pointerUp(event, pointer);
+};
+// public
+pointerProto.pointerUp = function (event, pointer) {
+  this.emitEvent('pointerUp', [event, pointer]);
+};
+// ----- pointer done ----- //
+// triggered on pointer up & pointer cancel
+pointerProto._pointerDone = function () {
+  this._pointerReset();
+  this._unbindPostStartEvents();
+  this.pointerDone();
+};
+pointerProto._pointerReset = function () {
+  // reset properties
+  this.isPointerDown = false;
+  delete this.pointerIdentifier;
+};
+pointerProto.pointerDone = noop;
+// ----- pointer cancel ----- //
+pointerProto.onpointercancel = function (event) {
+  if (event.pointerId == this.pointerIdentifier) {
+    this._pointerCancel(event, event);
+  }
+};
+pointerProto.ontouchcancel = function (event) {
+  const touch = this.getTouch(event.changedTouches);
+  if (touch) {
+    this._pointerCancel(event, touch);
+  }
+};
+/**
+ * pointer cancel
+ * @param {Event} event
+ * @param {Event or Touch} pointer
+ * @private
+ */
+pointerProto._pointerCancel = function (event, pointer) {
+  this._pointerDone();
+  this.pointerCancel(event, pointer);
+};
+// public
+pointerProto.pointerCancel = function (event, pointer) {
+  this.emitEvent('pointerCancel', [event, pointer]);
+};
+// -----  ----- //
+// utility function for getting x/y coords from event
+Unipointer.getPointerPoint = function (pointer) {
+  return {
+    x: pointer.pageX,
+    y: pointer.pageY,
+  };
+};
+/*!
+ * Unidragger v2.4.0
+ * Draggable base class
+ * MIT license
+ */
+function Unidragger() { }
+// inherit Unipointer & EvEmitter
+const draggerProto = (Unidragger.prototype = Object.create(Unipointer.prototype));
+// ----- bind start ----- //
+draggerProto.bindHandles = function () {
+  this._bindHandles(true);
+};
+draggerProto.unbindHandles = function () {
+  this._bindHandles(false);
+};
+/**
+ * Add or remove start event
+ * @param {Boolean} isAdd
+ */
+draggerProto._bindHandles = function (isAdd) {
+  // munge isAdd, default to true
+  isAdd = isAdd === undefined ? true : isAdd;
+  // bind each handle
+  const bindMethod = isAdd ? 'addEventListener' : 'removeEventListener';
+  const touchAction = isAdd ? this._touchActionValue : '';
+  for (let i = 0; i < this.handles.length; i++) {
+    const handle = this.handles[i];
+    this._bindStartEvent(handle, isAdd);
+    handle[bindMethod]('click', this);
+    // touch-action: none to override browser touch gestures. metafizzy/flickity#540
+    if (window.PointerEvent) {
+      handle.style.touchAction = touchAction;
+    }
+  }
+};
+// prototype so it can be overwriteable by Flickity
+draggerProto._touchActionValue = 'none';
+// ----- start event ----- //
+/**
+ * pointer start
+ * @param {Event} event
+ * @param {Event or Touch} pointer
+ */
+draggerProto.pointerDown = function (event, pointer) {
+  const isOkay = this.okayPointerDown(event);
+  if (!isOkay) {
+    return;
+  }
+  // track start event position
+  // Safari 9 overrides pageX and pageY. These values needs to be copied. flickity#842
+  this.pointerDownPointer = {
+    pageX: pointer.pageX,
+    pageY: pointer.pageY,
+  };
+  event.preventDefault();
+  this.pointerDownBlur();
+  // bind move and end events
+  this._bindPostStartEvents(event);
+  this.emitEvent('pointerDown', [event, pointer]);
+};
+// nodes that have text fields
+const cursorNodes = {
+  TEXTAREA: true,
+  INPUT: true,
+  SELECT: true,
+  OPTION: true,
+};
+// input types that do not have text fields
+const clickTypes = {
+  radio: true,
+  checkbox: true,
+  button: true,
+  submit: true,
+  image: true,
+  file: true,
+};
+// dismiss inputs with text fields. flickity#403, flickity#404
+draggerProto.okayPointerDown = function (event) {
+  const isCursorNode = cursorNodes[event.target.nodeName];
+  const isClickType = clickTypes[event.target.type];
+  const isOkay = !isCursorNode || isClickType;
+  if (!isOkay) {
+    this._pointerReset();
+  }
+  return isOkay;
+};
+// kludge to blur previously focused input
+draggerProto.pointerDownBlur = function () {
+  const focused = document.activeElement;
+  // do not blur body for IE10, metafizzy/flickity#117
+  const canBlur = focused && focused.blur && focused != document.body;
+  if (canBlur) {
+    focused.blur();
+  }
+};
+// ----- move event ----- //
+/**
+ * drag move
+ * @param {Event} event
+ * @param {Event or Touch} pointer
+ */
+draggerProto.pointerMove = function (event, pointer) {
+  const moveVector = this._dragPointerMove(event, pointer);
+  this.emitEvent('pointerMove', [event, pointer, moveVector]);
+  this._dragMove(event, pointer, moveVector);
+};
+// base pointer move logic
+draggerProto._dragPointerMove = function (event, pointer) {
+  const moveVector = {
+    x: pointer.pageX - this.pointerDownPointer.pageX,
+    y: pointer.pageY - this.pointerDownPointer.pageY,
+  };
+  // start drag if pointer has moved far enough to start drag
+  if (!this.isDragging && this.hasDragStarted(moveVector)) {
+    this._dragStart(event, pointer);
+  }
+  return moveVector;
+};
+// condition if pointer has moved far enough to start drag
+draggerProto.hasDragStarted = function (moveVector) {
+  return Math.abs(moveVector.x) > 3 || Math.abs(moveVector.y) > 3;
+};
+// ----- end event ----- //
+/**
+ * pointer up
+ * @param {Event} event
+ * @param {Event or Touch} pointer
+ */
+draggerProto.pointerUp = function (event, pointer) {
+  this.emitEvent('pointerUp', [event, pointer]);
+  this._dragPointerUp(event, pointer);
+};
+draggerProto._dragPointerUp = function (event, pointer) {
+  if (this.isDragging) {
+    this._dragEnd(event, pointer);
+  }
+  else {
+    // pointer didn't move enough for drag to start
+    this._staticClick(event, pointer);
+  }
+};
+// -------------------------- drag -------------------------- //
+// dragStart
+draggerProto._dragStart = function (event, pointer) {
+  this.isDragging = true;
+  // prevent clicks
+  this.isPreventingClicks = true;
+  this.dragStart(event, pointer);
+};
+draggerProto.dragStart = function (event, pointer) {
+  this.emitEvent('dragStart', [event, pointer]);
+};
+// dragMove
+draggerProto._dragMove = function (event, pointer, moveVector) {
+  // do not drag if not dragging yet
+  if (!this.isDragging) {
+    return;
+  }
+  this.dragMove(event, pointer, moveVector);
+};
+draggerProto.dragMove = function (event, pointer, moveVector) {
+  event.preventDefault();
+  this.emitEvent('dragMove', [event, pointer, moveVector]);
+};
+// dragEnd
+draggerProto._dragEnd = function (event, pointer) {
+  // set flags
+  this.isDragging = false;
+  // re-enable clicking async
+  setTimeout(function () {
+    delete this.isPreventingClicks;
+  }.bind(this));
+  this.dragEnd(event, pointer);
+};
+draggerProto.dragEnd = function (event, pointer) {
+  this.emitEvent('dragEnd', [event, pointer]);
+};
+// ----- onclick ----- //
+// handle all clicks and prevent clicks when dragging
+draggerProto.onclick = function (event) {
+  if (this.isPreventingClicks) {
+    event.preventDefault();
+  }
+};
+// ----- staticClick ----- //
+// triggered after pointer down & up with no/tiny movement
+draggerProto._staticClick = function (event, pointer) {
+  // ignore emulated mouse up clicks
+  if (this.isIgnoringMouseUp && event.type == 'mouseup') {
+    return;
+  }
+  this.staticClick(event, pointer);
+  // set flag for emulated clicks 300ms after touchend
+  if (event.type != 'mouseup') {
+    this.isIgnoringMouseUp = true;
+    // reset flag after 300ms
+    setTimeout(function () {
+      delete this.isIgnoringMouseUp;
+    }.bind(this), 400);
+  }
+};
+draggerProto.staticClick = function (event, pointer) {
+  this.emitEvent('staticClick', [event, pointer]);
+};
+// ----- utils ----- //
+Unidragger.getPointerPoint = Unipointer.getPointerPoint;
+
+// ----- defaults ----- //
+utils.extend(Flickity.defaults, {
+  draggable: '>1',
+  dragThreshold: 3,
+});
+// ----- create ----- //
+Flickity.createMethods.push('_createDrag');
+// -------------------------- drag prototype -------------------------- //
+const proto$2 = Flickity.prototype;
+utils.extend(proto$2, Unidragger.prototype);
+proto$2._touchActionValue = 'pan-y';
+// --------------------------  -------------------------- //
+const isTouch = 'createTouch' in document;
+let isTouchmoveScrollCanceled = false;
+proto$2._createDrag = function () {
+  this.on('activate', this.onActivateDrag);
+  this.on('uiChange', this._uiChangeDrag);
+  this.on('deactivate', this.onDeactivateDrag);
+  this.on('cellChange', this.updateDraggable);
+  // TODO updateDraggable on resize? if groupCells & slides change
+  // HACK - add seemingly innocuous handler to fix iOS 10 scroll behavior
+  // #457, RubaXa/Sortable#973
+  if (isTouch && !isTouchmoveScrollCanceled) {
+    window.addEventListener('touchmove', function () { });
+    isTouchmoveScrollCanceled = true;
+  }
+};
+proto$2.onActivateDrag = function () {
+  this.handles = [this.viewport];
+  this.bindHandles();
+  this.updateDraggable();
+};
+proto$2.onDeactivateDrag = function () {
+  this.unbindHandles();
+  this.element.classList.remove('is-draggable');
+};
+proto$2.updateDraggable = function () {
+  // disable dragging if less than 2 slides. #278
+  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');
+  }
+};
+// backwards compatibility
+proto$2.bindDrag = function () {
+  this.options.draggable = true;
+  this.updateDraggable();
+};
+proto$2.unbindDrag = function () {
+  this.options.draggable = false;
+  this.updateDraggable();
+};
+proto$2._uiChangeDrag = function () {
+  delete this.isFreeScrolling;
+};
+// -------------------------- pointer events -------------------------- //
+proto$2.pointerDown = function (event, pointer) {
+  if (!this.isDraggable) {
+    this._pointerDownDefault(event, pointer);
+    return;
+  }
+  const isOkay = this.okayPointerDown(event);
+  if (!isOkay) {
+    return;
+  }
+  this._pointerDownPreventDefault(event);
+  this.pointerDownFocus(event);
+  // blur
+  if (document.activeElement != this.element) {
+    // do not blur if already focused
+    this.pointerDownBlur();
+  }
+  // stop if it was moving
+  this.dragX = this.x;
+  this.viewport.classList.add('is-pointer-down');
+  // track scrolling
+  this.pointerDownScroll = getScrollPosition();
+  window.addEventListener('scroll', this);
+  this._pointerDownDefault(event, pointer);
+};
+// default pointerDown logic, used for staticClick
+proto$2._pointerDownDefault = function (event, pointer) {
+  // track start event position
+  // Safari 9 overrides pageX and pageY. These values needs to be copied. #779
+  this.pointerDownPointer = {
+    pageX: pointer.pageX,
+    pageY: pointer.pageY,
+  };
+  // bind move and end events
+  this._bindPostStartEvents(event);
+  this.dispatchEvent('pointerDown', event, [pointer]);
+};
+const focusNodes = {
+  INPUT: true,
+  TEXTAREA: true,
+  SELECT: true,
+};
+proto$2.pointerDownFocus = function (event) {
+  const isFocusNode = focusNodes[event.target.nodeName];
+  if (!isFocusNode) {
+    this.focus();
+  }
+};
+proto$2._pointerDownPreventDefault = function (event) {
+  const isTouchStart = event.type == 'touchstart';
+  const isTouchPointer = event.pointerType == 'touch';
+  const isFocusNode = focusNodes[event.target.nodeName];
+  if (!isTouchStart && !isTouchPointer && !isFocusNode) {
+    event.preventDefault();
+  }
+};
+// ----- move ----- //
+proto$2.hasDragStarted = function (moveVector) {
+  return Math.abs(moveVector.x) > this.options.dragThreshold;
+};
+// ----- up ----- //
+proto$2.pointerUp = function (event, pointer) {
+  delete this.isTouchScrolling;
+  this.viewport.classList.remove('is-pointer-down');
+  this.dispatchEvent('pointerUp', event, [pointer]);
+  this._dragPointerUp(event, pointer);
+};
+proto$2.pointerDone = function () {
+  window.removeEventListener('scroll', this);
+  delete this.pointerDownScroll;
+};
+// -------------------------- dragging -------------------------- //
+proto$2.dragStart = function (event, pointer) {
+  if (!this.isDraggable) {
+    return;
+  }
+  this.dragStartPosition = this.x;
+  this.startAnimation();
+  window.removeEventListener('scroll', this);
+  this.dispatchEvent('dragStart', event, [pointer]);
+};
+proto$2.pointerMove = function (event, pointer) {
+  const moveVector = this._dragPointerMove(event, pointer);
+  this.dispatchEvent('pointerMove', event, [pointer, moveVector]);
+  this._dragMove(event, pointer, moveVector);
+};
+proto$2.dragMove = function (event, pointer, moveVector) {
+  if (!this.isDraggable) {
+    return;
+  }
+  event.preventDefault();
+  this.previousDragX = this.dragX;
+  // reverse if right-to-left
+  const direction = this.options.rightToLeft ? -1 : 1;
+  if (this.options.wrapAround) {
+    // wrap around move. #589
+    moveVector.x = moveVector.x % this.slideableWidth;
+  }
+  let dragX = this.dragStartPosition + moveVector.x * direction;
+  if (!this.options.wrapAround && this.slides.length) {
+    // slow drag
+    const originBound = Math.max(-this.slides[0].target, this.dragStartPosition);
+    dragX = dragX > originBound ? (dragX + originBound) * 0.5 : dragX;
+    const endBound = Math.min(-this.getLastSlide().target, this.dragStartPosition);
+    dragX = dragX < endBound ? (dragX + endBound) * 0.5 : dragX;
+  }
+  this.dragX = dragX;
+  this.dragMoveTime = new Date();
+  this.dispatchEvent('dragMove', event, [pointer, moveVector]);
+};
+proto$2.dragEnd = function (event, pointer) {
+  if (!this.isDraggable) {
+    return;
+  }
+  if (this.options.freeScroll) {
+    this.isFreeScrolling = true;
+  }
+  // set selectedIndex based on where flick will end up
+  let index = this.dragEndRestingSelect();
+  if (this.options.freeScroll && !this.options.wrapAround) {
+    // if free-scroll & not wrap around
+    // do not free-scroll if going outside of bounding slides
+    // so bounding slides can attract slider, and keep it in bounds
+    const restingX = this.getRestingPosition();
+    this.isFreeScrolling =
+      -restingX > this.slides[0].target &&
+        -restingX < this.getLastSlide().target;
+  }
+  else if (!this.options.freeScroll && index == this.selectedIndex) {
+    // boost selection if selected index has not changed
+    index += this.dragEndBoostSelect();
+  }
+  delete this.previousDragX;
+  // apply selection
+  // TODO refactor this, selecting here feels weird
+  // HACK, set flag so dragging stays in correct direction
+  this.isDragSelect = this.options.wrapAround;
+  this.select(index);
+  delete this.isDragSelect;
+  this.dispatchEvent('dragEnd', event, [pointer]);
+};
+proto$2.dragEndRestingSelect = function () {
+  const restingX = this.getRestingPosition();
+  // how far away from selected slide
+  const distance = Math.abs(this.getSlideDistance(-restingX, this.selectedIndex));
+  // get closet resting going up and going down
+  const positiveResting = this._getClosestResting(restingX, distance, 1);
+  const negativeResting = this._getClosestResting(restingX, distance, -1);
+  // use closer resting for wrap-around
+  const index = positiveResting.distance < negativeResting.distance
+    ? positiveResting.index
+    : negativeResting.index;
+  return index;
+};
+/**
+ * given resting X and distance to selected cell
+ * get the distance and index of the closest cell
+ * @param {Number} restingX - estimated post-flick resting position
+ * @param {Number} distance - distance to selected cell
+ * @param {Integer} increment - +1 or -1, going up or down
+ * @returns {Object} - { distance: {Number}, index: {Integer} }
+ */
+proto$2._getClosestResting = function (restingX, distance, increment) {
+  let index = this.selectedIndex;
+  let minDistance = Infinity;
+  const condition = this.options.contain && !this.options.wrapAround
+    ? // if contain, keep going if distance is equal to minDistance
+      function (d, md) {
+        return d <= md;
+      }
+    : function (d, md) {
+      return d < md;
+    };
+  while (condition(distance, minDistance)) {
+    // measure distance to next cell
+    index += increment;
+    minDistance = distance;
+    distance = this.getSlideDistance(-restingX, index);
+    if (distance === null) {
+      break;
+    }
+    distance = Math.abs(distance);
+  }
+  return {
+    distance: minDistance,
+    // selected was previous index
+    index: index - increment,
+  };
+};
+/**
+ * measure distance between x and a slide target
+ * @param {Number} x
+ * @param {Integer} index - slide index
+ * @returns null or distance number
+ */
+proto$2.getSlideDistance = function (x, index) {
+  const len = this.slides.length;
+  // wrap around if at least 2 slides
+  const isWrapAround = this.options.wrapAround && len > 1;
+  const slideIndex = isWrapAround ? utils.modulo(index, len) : index;
+  const slide = this.slides[slideIndex];
+  if (!slide) {
+    return null;
+  }
+  // add distance for wrap-around slides
+  const wrap = isWrapAround ? this.slideableWidth * Math.floor(index / len) : 0;
+  return x - (slide.target + wrap);
+};
+proto$2.dragEndBoostSelect = function () {
+  // do not boost if no previousDragX or dragMoveTime
+  if (this.previousDragX === undefined ||
+    !this.dragMoveTime ||
+    // or if drag was held for 100 ms
+    new Date() - this.dragMoveTime > 100) {
+    return 0;
+  }
+  const distance = this.getSlideDistance(-this.dragX, this.selectedIndex);
+  const delta = this.previousDragX - this.dragX;
+  if (distance > 0 && delta > 0) {
+    // boost to next if moving towards the right, and positive velocity
+    return 1;
+  }
+  else if (distance < 0 && delta < 0) {
+    // boost to previous if moving towards the left, and negative velocity
+    return -1;
+  }
+  return 0;
+};
+// ----- staticClick ----- //
+proto$2.staticClick = function (event, pointer) {
+  // get clickedCell, if cell was clicked
+  const clickedCell = this.getParentCell(event.target);
+  const cellElem = clickedCell && clickedCell.element;
+  const cellIndex = clickedCell && this.cells.indexOf(clickedCell);
+  this.dispatchEvent('staticClick', event, [pointer, cellElem, cellIndex]);
+};
+// ----- scroll ----- //
+proto$2.onscroll = function () {
+  const scroll = getScrollPosition();
+  const scrollMoveX = this.pointerDownScroll.x - scroll.x;
+  const scrollMoveY = this.pointerDownScroll.y - scroll.y;
+  // cancel click/tap if scroll is too much
+  if (Math.abs(scrollMoveX) > 3 || Math.abs(scrollMoveY) > 3) {
+    this._pointerDone();
+  }
+};
+// ----- utils ----- //
+function getScrollPosition() {
+  return {
+    x: window.pageXOffset,
+    y: window.pageYOffset,
+  };
+}
+// -----  ----- //
+
+const svgURI = 'http://www.w3.org/2000/svg';
+// -------------------------- PrevNextButton -------------------------- //
+function PrevNextButton(direction, parent) {
+  this.direction = direction;
+  this.parent = parent;
+  this.parentElement = this.parent.element.shadowRoot || this.parent.element;
+  this._create();
+}
+PrevNextButton.prototype = Object.create(Unipointer.prototype);
+PrevNextButton.prototype._create = function () {
+  // properties
+  this.isEnabled = true;
+  this.isPrevious = this.direction == -1;
+  const leftDirection = this.parent.options.rightToLeft ? 1 : -1;
+  this.isLeft = this.direction == leftDirection;
+  const button = (this.element = document.createElement('button'));
+  button.className = 'flickity-button flickity-prev-next-button';
+  button.part.add('navigation-button');
+  if (this.isPrevious) {
+    button.classList.add('previous');
+    button.part.add('navigation-button--previous');
+  }
+  else {
+    button.classList.add('next');
+    button.part.add('navigation-button--next');
+  }
+  // prevent button from submitting form http://stackoverflow.com/a/10836076/182183
+  button.setAttribute('type', 'button');
+  // init as disabled
+  this.disable();
+  button.setAttribute('aria-label', this.isPrevious ? 'Previous' : 'Next');
+  const slot = document.createElement('slot');
+  slot.name = this.isPrevious ? 'previous-icon' : 'next-icon';
+  button.appendChild(slot);
+  slot.addEventListener('slotchange', () => {
+    slot.assignedElements({ flatten: true }).forEach((ele) => {
+      ele.removeAttribute('hidden');
+    });
+  });
+  // create arrow
+  const svg = this.createSVG();
+  slot.appendChild(svg);
+  // events
+  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);
+  // add to DOM
+  this.parentElement.appendChild(this.element);
+};
+PrevNextButton.prototype.deactivate = function () {
+  // remove from DOM
+  this.parentElement.removeChild(this.element);
+  // click events
+  this.unbindStartEvent(this.element);
+  this.element.removeEventListener('click', this);
+};
+PrevNextButton.prototype.createSVG = function () {
+  const svg = document.createElementNS(svgURI, 'svg');
+  svg.setAttribute('class', 'flickity-button-icon');
+  svg.setAttribute('viewBox', '0 0 100 100');
+  svg.part.add('navigation-icon');
+  const path = document.createElementNS(svgURI, 'path');
+  const pathMovements = getArrowMovements(this.parent.options.arrowShape);
+  path.setAttribute('d', pathMovements);
+  path.setAttribute('class', 'arrow');
+  // rotate arrow
+  if (!this.isLeft) {
+    path.setAttribute('transform', 'translate(100, 100) rotate(180) ');
+  }
+  svg.appendChild(path);
+  return svg;
+};
+// get SVG path movmement
+function getArrowMovements(shape) {
+  // use shape as movement if string
+  if (typeof shape == 'string') {
+    return shape;
+  }
+  // create movement string
+  return ('M ' +
+    shape.x0 +
+    ',50' +
+    ' L ' +
+    shape.x1 +
+    ',' +
+    (shape.y1 + 50) +
+    ' L ' +
+    shape.x2 +
+    ',' +
+    (shape.y2 + 50) +
+    ' L ' +
+    shape.x3 +
+    ',50 ' +
+    ' L ' +
+    shape.x2 +
+    ',' +
+    (50 - shape.y2) +
+    ' L ' +
+    shape.x1 +
+    ',' +
+    (50 - shape.y1) +
+    ' Z');
+}
+PrevNextButton.prototype.handleEvent = utils.handleEvent;
+PrevNextButton.prototype.onclick = function () {
+  if (!this.isEnabled) {
+    return;
+  }
+  this.parent.uiChange();
+  const method = this.isPrevious ? 'previous' : 'next';
+  this.parent[method]();
+};
+// -----  ----- //
+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 () {
+  // index of first or last slide, if previous or next
+  const slides = this.parent.slides;
+  // enable is wrapAround and at least 2 slides
+  if (this.parent.options.wrapAround && slides.length > 1) {
+    this.enable();
+    return;
+  }
+  const lastIndex = slides.length ? slides.length - 1 : 0;
+  const boundIndex = this.isPrevious ? 0 : lastIndex;
+  const method = this.parent.selectedIndex == boundIndex ? 'disable' : 'enable';
+  this[method]();
+};
+PrevNextButton.prototype.destroy = function () {
+  this.deactivate();
+  this.allOff();
+};
+// -------------------------- Flickity prototype -------------------------- //
+utils.extend(Flickity.defaults, {
+  prevNextButtons: true,
+  arrowShape: {
+    x0: 10,
+    x1: 60,
+    y1: 50,
+    x2: 70,
+    y2: 40,
+    x3: 30,
+  },
+});
+Flickity.createMethods.push('_createPrevNextButtons');
+const proto$1 = Flickity.prototype;
+proto$1._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$1.activatePrevNextButtons = function () {
+  this.prevButton.activate();
+  this.nextButton.activate();
+  this.on('deactivate', this.deactivatePrevNextButtons);
+};
+proto$1.deactivatePrevNextButtons = function () {
+  this.prevButton.deactivate();
+  this.nextButton.deactivate();
+  this.off('deactivate', this.deactivatePrevNextButtons);
+};
+// @ts-ignore
+Flickity.PrevNextButton = PrevNextButton;
+
+// -------------------------- Player -------------------------- //
+function Player(parent) {
+  this.parent = parent;
+  this.state = 'stopped';
+  // visibility change event handler
+  this.onVisibilityChange = this.visibilityChange.bind(this);
+  this.onVisibilityPlay = this.visibilityPlay.bind(this);
+}
+Player.prototype = Object.create(EvEmitter.prototype);
+// start play
+Player.prototype.play = function () {
+  if (this.state == 'playing') {
+    return;
+  }
+  // do not play if page is hidden, start playing when page is visible
+  const isPageHidden = document.hidden;
+  if (isPageHidden) {
+    document.addEventListener('visibilitychange', this.onVisibilityPlay);
+    return;
+  }
+  this.state = 'playing';
+  // listen to visibility change
+  document.addEventListener('visibilitychange', this.onVisibilityChange);
+  // start ticking
+  this.tick();
+};
+Player.prototype.tick = function () {
+  // do not tick if not playing
+  if (this.state != 'playing') {
+    return;
+  }
+  let time = this.parent.options.autoPlay;
+  // default to 3 seconds
+  time = typeof time == 'number' ? time : 3000;
+  const _this = this;
+  // HACK: reset ticks if stopped and started within interval
+  this.clear();
+  this.timeout = setTimeout(function () {
+    _this.parent.next(true);
+    _this.tick();
+  }, time);
+};
+Player.prototype.stop = function () {
+  this.state = 'stopped';
+  this.clear();
+  // remove visibility change event
+  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 () {
+  // re-start play if paused
+  if (this.state == 'paused') {
+    this.play();
+  }
+};
+// pause if page visibility is hidden, unpause if visible
+Player.prototype.visibilityChange = function () {
+  const isPageHidden = document.hidden;
+  this[isPageHidden ? 'pause' : 'unpause']();
+};
+Player.prototype.visibilityPlay = function () {
+  this.play();
+  document.removeEventListener('visibilitychange', this.onVisibilityPlay);
+};
+// -------------------------- Flickity -------------------------- //
+utils.extend(Flickity.defaults, {
+  pauseAutoPlayOnHover: true,
+});
+Flickity.createMethods.push('_createPlayer');
+const proto = Flickity.prototype;
+proto._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.activatePlayer = function () {
+  if (!this.options.autoPlay) {
+    return;
+  }
+  this.player.play();
+  this.element.addEventListener('mouseenter', this);
+};
+// Player API, don't hate the ... thanks I know where the door is
+proto.playPlayer = function () {
+  this.player.play();
+};
+proto.stopPlayer = function () {
+  this.player.stop();
+};
+proto.pausePlayer = function () {
+  this.player.pause();
+};
+proto.unpausePlayer = function () {
+  this.player.unpause();
+};
+proto.deactivatePlayer = function () {
+  this.player.stop();
+  this.element.removeEventListener('mouseenter', this);
+};
+// ----- mouseenter/leave ----- //
+// pause auto-play on hover
+proto.onmouseenter = function () {
+  if (!this.options.pauseAutoPlayOnHover) {
+    return;
+  }
+  this.player.pause();
+  this.element.addEventListener('mouseleave', this);
+};
+// resume auto-play on hover off
+proto.onmouseleave = function () {
+  this.player.unpause();
+  this.element.removeEventListener('mouseleave', this);
+};
+// @ts-ignore
+Flickity.Player = Player;
+
+const flickity = Flickity;
+
+const slidesCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--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;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-inline-size:100vw}:host([ready]){opacity:1}.slideshow{max-block-size:100%;min-block-size:inherit;block-size:inherit;position:relative}.slideshow.not-ready{inline-size:100%;overflow:hidden}.flickity-container{opacity:0;transition:opacity 0.2s;display:flex;inline-size:-moz-fit-content;inline-size:fit-content;block-size:-moz-fit-content;block-size:fit-content}.not-ready .flickity-container{inline-size:-moz-fit-content;inline-size:fit-content;block-size:-moz-fit-content;block-size:fit-content}.flickity-container.slides-ready{min-block-size:inherit;max-block-size:inherit;block-size:inherit;inline-size:auto}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start: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;min-block-size:100%;flex:1}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{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;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{inset-block-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{position:absolute;inline-size:100%;inset-block-end: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;inline-size:10px;block-size:10px;margin-block:0;margin-inline: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;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:rgba(0, 0, 0, 0.9);padding-block-end:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{inset-inline:10px auto}.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;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start: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}";
+
+const modulo = (num, div) => {
+  return ((num % div) + div) % div;
+};
+const Slides = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.nanoSlidesDidLoad = index.createEvent(this, "nanoSlidesDidLoad", 7);
+    this.nanoSlidesReady = index.createEvent(this, "nanoSlidesReady", 7);
+    this.nanoSlidesSelect = index.createEvent(this, "nanoSlidesSelect", 7);
+    this.nanoSlidesChange = index.createEvent(this, "nanoSlidesChange", 7);
+    this.nanoSlidesScroll = index.createEvent(this, "nanoSlidesScroll", 7);
+    this.nanoSlidesTransitionEnd = index.createEvent(this, "nanoSlidesTransitionEnd", 7);
+    this.nanoSlidesDragStart = index.createEvent(this, "nanoSlidesDragStart", 7);
+    this.nanoSlidesDragMove = index.createEvent(this, "nanoSlidesDragMove", 7);
+    this.nanoSlidesDragEnd = index.createEvent(this, "nanoSlidesDragEnd", 7);
+    this.nanoSlidesTap = index.createEvent(this, "nanoSlidesTap", 7);
+    this.nanoSlidesFullscreenChange = index.createEvent(this, "nanoSlidesFullscreenChange", 7);
+    this.flickityReady = false;
+    this.flickity = new Promise((resolve) => {
+      this.readyflickity = resolve;
+    });
+    this.hasFullScreenModule = false;
+    this.hasLazyLoadModule = false;
+    this.hasDotsModule = false;
+    this.hasFadeModule = false;
+    this.parallax = async () => {
+      const flkty = await this.flickity;
+      const cells = flkty.cells;
+      cells.forEach((cell) => {
+        const ele = cell.element.children[0];
+        let flkX = flkty.x;
+        if (flkty.options.wrapAround && flkty.cells.length > 1) {
+          flkX = modulo(flkX, flkty.slideableWidth);
+          flkX = flkX - flkty.slideableWidth;
+        }
+        let x = ((cell.target + flkX) * -1) / 3;
+        if (cell.shift < 0) {
+          x = ((cell.target - flkty.slideableWidth + flkX) * -1) / 3;
+        }
+        else if (cell.shift > 0) {
+          x = ((cell.target + (flkX + flkty.slideableWidth)) * -1) / 3;
+        }
+        ele.style.transform = 'translate3d(' + x + 'px, 0, 0)';
+        const animAmount = ((x * 3) / cell.size.width) * 100;
+        cell.element.style.setProperty('--animation-amount', animAmount.toString());
+      });
+    };
+    this.handleFullscreen = (isFullScreen) => {
+      this.fullscreen = isFullScreen;
+      this.nanoSlidesFullscreenChange.emit(isFullScreen);
+    };
+    this.handleSlideSelect = (slide) => {
+      this.iCurrentSlide = slide;
+      this.nanoSlidesSelect.emit(slide);
+    };
+    this.iCurrentSlide = undefined;
+    this.slidesReady = undefined;
+    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;
+  }
+  async optionsChanged() {
+    if (this.flickityReady) {
+      const flickity = await this.getflickity();
+      const newOpts = Object.assign(flickity.options, this.options);
+      await this.loadFlickityModules(newOpts);
+      await this.update();
+    }
+  }
+  async navbtnsChanged() {
+    Array.from(this._getRoot().querySelectorAll('.flickity-prev-next-button')).forEach((btn) => {
+      btn.hidden = !this.navbtns;
+    });
+  }
+  async pagerChanged() {
+    const dots = this._getRoot().querySelector('.flickity-page-dots');
+    if (dots)
+      dots.hidden = !this.pager;
+  }
+  async fullscreenBtnChanged() {
+    const btn = this._getRoot().querySelector('.flickity-fullscreen-button');
+    if (btn)
+      btn.hidden = !this.fullscreenbtn;
+  }
+  async fullscreenChanged(_, oldFs) {
+    const flickity = await this.getflickity();
+    if (this.fullscreen)
+      flickity.viewFullscreen();
+    else if (typeof oldFs !== 'undefined')
+      flickity.exitFullscreen();
+  }
+  async animationChange(_, oldAnim) {
+    const [flkty, slides] = await Promise.all([
+      this.getflickity(),
+      waitForSlides(this.host),
+    ]);
+    // clear old stuff
+    slides.forEach((slide) => {
+      slide.style['left'] = undefined;
+    });
+    if (oldAnim === 'parallax') {
+      flkty.off('scroll', this.parallax);
+      slides.forEach((_, i) => {
+        if (this.childrenEles && this.childrenEles[i])
+          this.childrenEles[i].style['transform'] = undefined;
+      });
+      this.update();
+    }
+    // was a custom animation
+    if (typeof oldAnim === 'function') {
+      flkty.off('scroll', oldAnim);
+    }
+    // is a custom animation
+    if (typeof this.animation === 'function') {
+      this.options = { fade: false, percentPosition: true };
+      flkty.on('scroll', this.animation);
+      return;
+    }
+    // setup new stuff
+    switch (this.animation) {
+      case 'fade':
+        this.options = { fade: true, percentPosition: true };
+        break;
+      case 'parallax':
+        this.options = { fade: false, percentPosition: true };
+        flkty.on('scroll', this.parallax);
+        break;
+      default:
+        this.options = { fade: false, percentPosition: true };
+        break;
+    }
+  }
+  currentSlideChange() {
+    if (this.currentSlide !== this.iCurrentSlide)
+      this.slideTo(this.currentSlide);
+  }
+  internalSlideChange() {
+    this.currentSlide = this.iCurrentSlide;
+  }
+  async autoPlayChange() {
+    await this.stopAutoplay();
+    if (this.autoplay) {
+      if (typeof this.autoplay === 'string')
+        this.autoplay = parseInt(this.autoplay);
+      if (this.autoplay > 0)
+        this.startAutoplay(this.autoplay);
+    }
+  }
+  /**
+   * Update the underlying flickity implementation. Call this if you've added or removed
+   * child slides.
+   */
+  async update() {
+    const [flickity] = await Promise.all([
+      this.getflickity(),
+      waitForSlides(this.host),
+    ]);
+    this.childrenEles = this.host.querySelectorAll('nano-slide > *');
+    flickity.reloadCells();
+    flickity.resize();
+    flickity.reposition();
+  }
+  /**
+   * Force flickity to update its height (when adaptiveHeight is enabled) for the duration
+   * equal to 'speed' parameter.
+   *
+   * @param speed The transition duration (in ms).
+   */
+  async updateAutoHeight(speed) {
+    const vp = document.querySelector('.flickity-viewport');
+    if (vp)
+      vp.style.transition = speed + 'ms';
+  }
+  /**
+   * Transition to the specified slide.
+   *
+   * @param index The index of the slide to transition to.
+   * @param instant Immediately view the selected slide without animation.
+   */
+  async slideTo(index, instant) {
+    const flickity = await this.getflickity();
+    flickity.select(index, instant);
+  }
+  /**
+   * Transition to the next slide.
+   *
+   * @param instant The transition duration (in ms).
+   * @param wrap If true, the first slide will be selected if at the last slide.
+   */
+  async slideNext(instant, wrap) {
+    const flickity = await this.getflickity();
+    flickity.next(wrap, instant);
+  }
+  /**
+   * Transition to the previous slide.
+   *
+   * @param instant The transition duration (in ms).
+   * @param wrap If true, the last slide will be selected if at the first slide.
+   */
+  async slidePrev(instant, wrap) {
+    const flickity = await this.getflickity();
+    flickity.previous(instant, wrap);
+  }
+  /** Get the index of the active slide. */
+  async getActiveIndex() {
+    const flickity = await this.getflickity();
+    return flickity.selectedIndex;
+  }
+  /** Get the total number of slides. */
+  async length() {
+    const flickity = await this.getflickity();
+    return flickity.slides.length;
+  }
+  /** Get whether or not the current slide is the last slide. */
+  async isEnd() {
+    const flickity = await this.getflickity();
+    return flickity.selectedIndex === flickity.slides.length - 1;
+  }
+  /** Get whether or not the current slide is the first slide. */
+  async isBeginning() {
+    const flickity = await this.getflickity();
+    return flickity.selectedIndex === 0;
+  }
+  /**
+   * Start auto play.
+   * @param time - optional time duration to show slides
+   */
+  async startAutoplay(time) {
+    const flickity = await this.getflickity();
+    if (time)
+      this.options = { autoPlay: time };
+    setTimeout(() => flickity.playPlayer());
+  }
+  /** Stop auto play. */
+  async stopAutoplay() {
+    const flickity = await this.getflickity();
+    flickity.stopPlayer();
+  }
+  /**
+   * Lock or unlock the ability to slide to the next slide.
+   *
+   * @param lock If `true`, disable swiping
+   */
+  async lockSwipes(lock) {
+    const flickity = await this.getflickity();
+    flickity.options.draggable = !lock;
+    flickity.updateDraggable();
+  }
+  /**
+   * Get the flickity instance.
+   * Use this to access the full flickity API.
+   * See https://flickity.metafizzy.co/ for all API options.
+   */
+  async getflickity() {
+    return this.flickity;
+  }
+  /**
+   * Hard destroy / create.
+   * Certain flickity options, you will require the instance to be re-initialised
+   */
+  async reload() {
+    this.destroyflickity();
+    setTimeout(() => this.initflickity(), 20);
+  }
+  _getRoot() {
+    return this.host.shadowRoot ? this.host.shadowRoot : this.host;
+  }
+  destroyflickity() {
+    /**
+     * We need to synchronously destroy
+     * flickity otherwise it is possible
+     * that it will be left in a
+     * destroyed state if connectedCallback
+     * is called multiple times
+     */
+    const flickity = this.syncflickity;
+    if (flickity !== undefined) {
+      flickity.destroy();
+      this.flickity = new Promise((resolve) => {
+        this.readyflickity = resolve;
+      });
+      this.flickityReady = false;
+      this.syncflickity = undefined;
+      this.ready = false;
+    }
+    this.didInit = false;
+  }
+  async loadFlickityModules(opts) {
+    if (!this.hasFullScreenModule && opts.fullscreen) {
+      await Promise.resolve().then(function () { return require('./fullscreen-d24940a1.js'); });
+      this.hasFullScreenModule = true;
+    }
+    if (!this.hasLazyLoadModule && opts.lazyLoad) {
+      await Promise.resolve().then(function () { return require('./lazyload-f6be7590.js'); });
+      this.hasLazyLoadModule = true;
+    }
+    if (!this.hasDotsModule && opts.pageDots) {
+      await Promise.resolve().then(function () { return require('./page-dots-ae2cefb4.js'); });
+      this.hasDotsModule = true;
+    }
+    if (!this.hasFadeModule && opts.fade) {
+      await Promise.resolve().then(function () { return require('./fade-dcabf3c1.js'); });
+      this.hasFadeModule = true;
+    }
+  }
+  async initflickity() {
+    const finalOptions = this.normalizeOptions();
+    await this.loadFlickityModules(finalOptions);
+    // init flickity core
+    await waitForSlides(this.host);
+    this.flickityEl =
+      this.flickityEl || this._getRoot().querySelector('.flickity-container');
+    if (!this.flickityEl)
+      return;
+    this.slidesReady = true;
+    if (this.flickityEl.classList.contains('flickity-enabled')) {
+      this.destroyflickity();
+    }
+    this.flickityEl.style.height =
+      this.flickityEl.getBoundingClientRect().height + 'px';
+    setTimeout(() => {
+      this.flickityEl.style.height = '';
+      const flick = new flickity(this.flickityEl, finalOptions);
+      this.flickityReady = true;
+      this.syncflickity = flick;
+      this.animationChange();
+      this.navbtnsChanged();
+      this.pagerChanged();
+      this.fullscreenChanged();
+      this.fullscreenBtnChanged();
+      this.readyflickity(flick);
+      this.ready = true;
+      if (!window['ResizeObserver'])
+        return;
+      // just boots and braces to make sure it's the correct size oninit
+      const ro = (this.resizeO = new ResizeObserver(() => {
+        flick.resize();
+        // this.resizeO.disconnect();
+      }));
+      ro.observe(this.host);
+    }, 100);
+  }
+  normalizeOptions() {
+    // Base options, can be changed
+    const flickityOptions = {
+      cellSelector: 'nano-slide',
+      contain: true,
+      prevNextButtons: true,
+      fullscreen: this.fullscreen,
+      accessibility: true,
+      imagesLoaded: true,
+      pageDots: this.pager,
+    };
+    if (this.animation === 'fade') {
+      flickityOptions.fade = true;
+    }
+    if (this.currentSlide > 0) {
+      flickityOptions.initialIndex = this.currentSlide;
+    }
+    if (this.autoplay) {
+      if (typeof this.autoplay === 'string')
+        this.autoplay = parseInt(this.autoplay);
+      if (this.autoplay > 0)
+        flickityOptions.autoPlay = this.autoplay;
+    }
+    // Keep the event options separate, we dont want users
+    // overwriting these
+    const eventOptions = {
+      ready: () => {
+        setTimeout(() => {
+          this.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,
+    };
+    const customEvents = !!this.options && !!this.options.on ? this.options.on : {};
+    // merge "on" event listeners, while giving our event listeners priority
+    const mergedEventOptions = { on: Object.assign(Object.assign({}, customEvents), eventOptions) };
+    // Merge the base, user options, and events together then pass to flickity
+    // @ts-ignore
+    return Object.assign(Object.assign(Object.assign({}, flickityOptions), mergedEventOptions), this.options);
+  }
+  componentDidLoad() {
+    if (typeof window !== 'undefined' &&
+      window.MutationObserver) {
+      const mut = (this.mutationO = new MutationObserver((e) => {
+        if (e[0].addedNodes[0] &&
+          e[0].addedNodes[0].nodeName.toLowerCase() === 'nano-slide' &&
+          this.flickityReady) {
+          this.update();
+        }
+      }));
+      mut.observe(this.host, {
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+  componentWillLoad() {
+    this.nanoSlidesDidLoad.emit();
+    if (!this.didInit) {
+      this.didInit = true;
+      this.initflickity();
+    }
+  }
+  disconnectedCallback() {
+    if (this.mutationO) {
+      this.mutationO.disconnect();
+      this.mutationO = undefined;
+    }
+    if (this.resizeO)
+      this.resizeO.disconnect();
+    this.destroyflickity();
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: {
+        slideshow: true,
+        ready: this.ready,
+        'not-ready': !this.ready,
+      }, part: "base" }, index.h("div", { ref: (div) => (this.flickityEl = div), class: {
+        'flickity-container': true,
+        'slides-ready': this.slidesReady,
+        'slides-not-ready': !this.slidesReady,
+      }, part: "slide-container" }, index.h("slot", null)), index.h("div", { class: "ui-extras" }, index.h("slot", { name: "ui" })))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "options": ["optionsChanged"],
+    "navbtns": ["navbtnsChanged"],
+    "pager": ["pagerChanged"],
+    "fullscreenbtn": ["fullscreenBtnChanged"],
+    "fullscreen": ["fullscreenChanged"],
+    "animation": ["animationChange"],
+    "currentSlide": ["currentSlideChange"],
+    "iCurrentSlide": ["internalSlideChange"],
+    "autoplay": ["autoPlayChange"]
+  }; }
+};
+const waitForSlides = (host) => {
+  const allSlides = Array.from(host.querySelectorAll('nano-slide'));
+  let toLoadSlides = allSlides.filter((ele) => !ele.ready);
+  if (!toLoadSlides.length)
+    return Promise.resolve(allSlides);
+  return new Promise((resolve) => {
+    const slideResolver = (ev) => {
+      toLoadSlides = toLoadSlides.filter((ele) => ele !== ev.target);
+      if (!toLoadSlides.length) {
+        resolve(allSlides);
+        host.removeEventListener('nanoSlideReady', slideResolver);
+        host.removeEventListener('nano-slide-ready', slideResolver);
+      }
+    };
+    host.addEventListener('nanoSlideReady', slideResolver);
+    // fallback for vue who can't handle camelcase event names
+    host.addEventListener('nano-slide-ready', slideResolver);
+  });
+};
+Slides.style = slidesCss;
+
+exports.Flickity = Flickity;
+exports.Slides = Slides;
+exports.Unipointer = Unipointer;
+exports.utils = utils;
+
+//# sourceMappingURL=nano-slides-2f3dcc02.js.map