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

package/dist/esm/nano-slides-BEE7xEu_.js

@@ -0,0 +1,3045 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { r as registerInstance, c as createEvent, a as getElement, f as readTask, e as writeTask, d as Host } from './index-DOuz1S3w.js';
+import { t as transformTag, h } from './renderer-CnE0Hztu.js';
+
+function EvEmitter() { }
+const proto$4 = EvEmitter.prototype;
+proto$4.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$4.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$4.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$4.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$4.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$3 = Cell.prototype;
+proto$3.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$3.destroy = function () {
+    // reset style
+    this.unselect();
+    this.element.style.position = '';
+    const side = this.parent.originSide;
+    this.element.style[side] = '';
+};
+proto$3.getSize = function () {
+    this.size = getSize(this.element);
+};
+proto$3.setPosition = function (x) {
+    this.x = x;
+    this.updateTarget();
+    this.renderPosition(x);
+};
+// setDefaultTarget v1 method, backwards compatibility, remove in v3
+proto$3.updateTarget = proto$3.setDefaultTarget = function () {
+    const marginProperty = this.parent.originSide == 'left' ? 'marginLeft' : 'marginRight';
+    this.target =
+        this.x +
+            this.size[marginProperty] +
+            this.size.width * this.parent.cellAlign;
+};
+proto$3.renderPosition = function (x) {
+    // render position of cell with in slider
+    const side = this.parent.originSide;
+    this.element.style[side] = this.parent.getPositionValue(x);
+};
+proto$3.select = function () {
+    this.element.classList.add('is-selected');
+    this.element.removeAttribute('aria-hidden');
+    Array.from(this.element.querySelectorAll('*')).forEach((element) => {
+        element.removeAttribute('tabindex');
+    });
+};
+proto$3.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$3.wrapShift = function (shift) {
+    this.shift = shift;
+    this.renderPosition(this.x + this.parent.slideableWidth * shift);
+};
+proto$3.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$2 = Slide.prototype;
+proto$2.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$2.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$2.getLastCell = function () {
+    return this.cells[this.cells.length - 1];
+};
+proto$2.select = function () {
+    this.cells.forEach(function (cell) {
+        cell.select();
+    });
+};
+proto$2.unselect = function () {
+    this.cells.forEach(function (cell) {
+        cell.unselect();
+    });
+};
+proto$2.getCellElements = function () {
+    return this.cells.map(function (cell) {
+        return cell.element;
+    });
+};
+
+const proto$1 = {};
+proto$1.startAnimation = function () {
+    if (this.isAnimating) {
+        return;
+    }
+    this.isAnimating = true;
+    this.restingFrames = 0;
+    this.animate();
+};
+proto$1.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$1.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$1.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$1.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$1.positionSliderAtSelected = function () {
+    if (!this.cells.length) {
+        return;
+    }
+    this.x = -this.selectedSlide.target;
+    this.velocity = 0; // stop wobble
+    this.positionSlider();
+};
+proto$1.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$1.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$1.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$1._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$1._unshiftCells = function (cells) {
+    if (!cells || !cells.length) {
+        return;
+    }
+    for (let i = 0; i < cells.length; i++) {
+        cells[i].wrapShift(0);
+    }
+};
+// -------------------------- physics -------------------------- //
+proto$1.integratePhysics = function () {
+    this.x += this.velocity;
+    this.velocity *= this.getFrictionFactor();
+};
+proto$1.applyForce = function (force) {
+    this.velocity += force;
+};
+proto$1.getFrictionFactor = function () {
+    return (1 - this.options[this.isFreeScrolling ? 'freeScrollFriction' : 'friction']);
+};
+proto$1.getRestingPosition = function () {
+    // my thanks to Steven Wittens, who simplified this math greatly
+    return this.x + this.velocity / (1 - this.getFrictionFactor());
+};
+proto$1.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$1.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 when free-scrolling
+    friction: 0.28, // friction when selecting
+    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 = Flickity.prototype;
+// inherit EventEmitter
+utils.extend(proto, EvEmitter.prototype);
+proto._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.option = function (opts) {
+    utils.extend(this.options, opts);
+};
+proto.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._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._filterFindCellElements = function (elems) {
+    return utils.filterFindElements(elems, this.options.cellSelector);
+};
+// goes through all children
+proto.reloadCells = function () {
+    let children = this.slider.children;
+    if (this.slider.getRootNode().host) {
+        children = [];
+        for (const ele of this.slider.getRootNode().host.children) {
+            if ('assignedElements' in ele) {
+                children = [...children, ...ele.assignedElements()];
+            }
+            else {
+                children.push(ele);
+            }
+        }
+    }
+    // collection of item elements
+    this.cells = this._makeCells(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._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.getLastCell = function () {
+    return this.cells[this.cells.length - 1];
+};
+proto.getLastSlide = function () {
+    return this.slides[this.slides.length - 1];
+};
+// positions all cells
+proto.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._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._sizeCells = function (cells) {
+    cells.forEach(function (cell) {
+        cell.getSize();
+    });
+};
+// --------------------------  -------------------------- //
+proto.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._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._init = proto.reposition = function () {
+    this.positionCells();
+    this.positionSliderAtSelected();
+};
+proto.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.setCellAlign = function () {
+    const shorthand = cellAlignShorthands[this.options.cellAlign];
+    this.cellAlign = shorthand
+        ? shorthand[this.originSide]
+        : this.options.cellAlign;
+};
+proto.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._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._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._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.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.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._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.previous = function (isWrap, isInstant) {
+    this.select(this.selectedIndex - 1, isWrap, isInstant);
+};
+proto.next = function (isWrap, isInstant) {
+    this.select(this.selectedIndex + 1, isWrap, isInstant);
+};
+proto.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.unselectSelectedSlide = function () {
+    if (this.selectedSlide) {
+        this.selectedSlide.unselect();
+    }
+};
+proto.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.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.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.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.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.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.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.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.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.uiChange = function () {
+    this.emitEvent('uiChange');
+};
+// keep focus on element when child UI elements are clicked
+proto.childUIPointerDown = function (event) {
+    // HACK iOS does not allow touch events to bubble up?!
+    if (event.type != 'touchstart') {
+        event.preventDefault();
+    }
+    this.focus();
+};
+// ----- resize ----- //
+proto.onresize = function () {
+    this.watchCSS();
+    this.resize();
+};
+utils.debounceMethod(Flickity, 'onresize', 150);
+proto.resize = function () {
+    if (!this.isActive) {
+        return;
+    }
+    this.getSize();
+    // yo
+    // 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.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.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.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.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.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, proto$1);
+// -------------------------- 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;
+
+var drag = () => {
+    // ----- defaults ----- //
+    utils.extend(Flickity.defaults, {
+        draggable: '>1',
+        dragThreshold: 3,
+    });
+    // ----- create ----- //
+    Flickity.createMethods.push('_createDrag');
+    // -------------------------- drag prototype -------------------------- //
+    const proto = Flickity.prototype;
+    utils.extend(proto, Unidragger.prototype);
+    proto._touchActionValue = 'pan-y';
+    // --------------------------  -------------------------- //
+    const isTouch = 'createTouch' in document;
+    let isTouchmoveScrollCanceled = false;
+    proto._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.onActivateDrag = function () {
+        this.handles = [this.viewport];
+        this.bindHandles();
+        this.updateDraggable();
+    };
+    proto.onDeactivateDrag = function () {
+        this.unbindHandles();
+        this.element.classList.remove('is-draggable');
+    };
+    proto.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.bindDrag = function () {
+        this.options.draggable = true;
+        this.updateDraggable();
+    };
+    proto.unbindDrag = function () {
+        this.options.draggable = false;
+        this.updateDraggable();
+    };
+    proto._uiChangeDrag = function () {
+        delete this.isFreeScrolling;
+    };
+    // -------------------------- pointer events -------------------------- //
+    proto.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._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.pointerDownFocus = function (event) {
+        const isFocusNode = focusNodes[event.target.nodeName];
+        if (!isFocusNode) {
+            this.focus();
+        }
+    };
+    proto._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.hasDragStarted = function (moveVector) {
+        return Math.abs(moveVector.x) > this.options.dragThreshold;
+    };
+    // ----- up ----- //
+    proto.pointerUp = function (event, pointer) {
+        delete this.isTouchScrolling;
+        this.viewport.classList.remove('is-pointer-down');
+        this.dispatchEvent('pointerUp', event, [pointer]);
+        this._dragPointerUp(event, pointer);
+    };
+    proto.pointerDone = function () {
+        window.removeEventListener('scroll', this);
+        delete this.pointerDownScroll;
+    };
+    // -------------------------- dragging -------------------------- //
+    proto.dragStart = function (event, pointer) {
+        if (!this.isDraggable) {
+            return;
+        }
+        this.dragStartPosition = this.x;
+        this.startAnimation();
+        window.removeEventListener('scroll', this);
+        this.dispatchEvent('dragStart', event, [pointer]);
+    };
+    proto.pointerMove = function (event, pointer) {
+        const moveVector = this._dragPointerMove(event, pointer);
+        this.dispatchEvent('pointerMove', event, [pointer, moveVector]);
+        this._dragMove(event, pointer, moveVector);
+    };
+    proto.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.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.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._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.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.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.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.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.scrollX,
+            y: window.scrollY,
+        };
+    }
+};
+
+var nowNext = () => {
+    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 = Flickity.prototype;
+    proto._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.activatePrevNextButtons = function () {
+        this.prevButton.activate();
+        this.nextButton.activate();
+        this.on('deactivate', this.deactivatePrevNextButtons);
+    };
+    proto.deactivatePrevNextButtons = function () {
+        this.prevButton.deactivate();
+        this.nextButton.deactivate();
+        this.off('deactivate', this.deactivatePrevNextButtons);
+    };
+    // @ts-ignore
+    Flickity.PrevNextButton = PrevNextButton;
+};
+
+var player = () => {
+    // -------------------------- 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;
+drag();
+nowNext();
+player();
+
+const slidesCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--dot-color:var(--nano-color-neutral-400);--dot-color-active:var(--nano-color-primary-1000);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:var(--nano-color-base-0);--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:var(--nano-color-base-0);--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:var(--nano-color-base-0);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%;block-size:300px;overflow:hidden}.flickity-container{opacity:0;transition:opacity 0.2s;display:flex;inline-size:fit-content;block-size:fit-content}.not-ready .flickity-container{inline-size: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;text-align:center;line-height:1;z-index:4;display:inline-flex}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{all:unset;text-indent:200%;white-space:nowrap;overflow:hidden;display:inline-block;display:inline-block;position:relative;inline-size:1.25rem;block-size:0.375rem;margin-block:0;cursor:pointer;background:var(--dot-color);border:calc(var(--nano-spacing-md) / 2) solid var(--nano-color-base-0)}.flickity-page-dots .dot:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.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:hsla(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) {
+        registerInstance(this, hostRef);
+        this.nanoSlidesDidLoad = createEvent(this, "nanoSlidesDidLoad", 7);
+        this.nanoSlidesReady = createEvent(this, "nanoSlidesReady", 7);
+        this.nanoSlidesSelect = createEvent(this, "nanoSlidesSelect", 7);
+        this.nanoSlidesChange = createEvent(this, "nanoSlidesChange", 7);
+        this.nanoSlidesScroll = createEvent(this, "nanoSlidesScroll", 7);
+        this.nanoSlidesTransitionEnd = createEvent(this, "nanoSlidesTransitionEnd", 7);
+        this.nanoSlidesDragStart = createEvent(this, "nanoSlidesDragStart", 7);
+        this.nanoSlidesDragMove = createEvent(this, "nanoSlidesDragMove", 7);
+        this.nanoSlidesDragEnd = createEvent(this, "nanoSlidesDragEnd", 7);
+        this.nanoSlidesTap = createEvent(this, "nanoSlidesTap", 7);
+        this.nanoSlidesFullscreenChange = createEvent(this, "nanoSlidesFullscreenChange", 7);
+    }
+    flickityEl;
+    flickityReady = false;
+    mutationO;
+    resizeO;
+    readyflickity;
+    flickity = new Promise((resolve) => {
+        this.readyflickity = resolve;
+    });
+    syncflickity;
+    childrenEles;
+    hasFullScreenModule = false;
+    hasLazyLoadModule = false;
+    hasDotsModule = false;
+    hasFadeModule = false;
+    iCurrentSlide;
+    slidesReady;
+    didInit = false;
+    get host() { return getElement(this); }
+    /**
+     * Options to pass to the flickity instance.
+     * See https://flickity.metafizzy.co/options.html for valid options
+     */
+    options = {};
+    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();
+        }
+    }
+    /** If `true`, show the next / prev buttons. */
+    navbtns = false;
+    async navbtnsChanged() {
+        Array.from(this._getRoot().querySelectorAll('.flickity-prev-next-button')).forEach((btn) => {
+            btn.hidden = !this.navbtns;
+        });
+    }
+    /** If `true`, show the pagination. */
+    pager = false;
+    async pagerChanged() {
+        const dots = this._getRoot().querySelector('.flickity-page-dots');
+        if (dots)
+            dots.hidden = !this.pager;
+    }
+    /** If `true`, show a fullscreen button. */
+    fullscreenbtn = false;
+    async fullscreenBtnChanged() {
+        const btn = this._getRoot().querySelector('.flickity-fullscreen-button');
+        if (btn)
+            btn.hidden = !this.fullscreenbtn;
+    }
+    /** If `true`, make the slider fullscreen. */
+    fullscreen = false;
+    async fullscreenChanged(_, oldFs) {
+        const flickity = await this.getflickity();
+        if (this.fullscreen)
+            flickity.viewFullscreen();
+        else if (typeof oldFs !== 'undefined')
+            flickity.exitFullscreen();
+    }
+    /** Animation presets or your own custom animation function; called every frame during scroll */
+    animation = 'scroll';
+    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;
+        }
+    }
+    /** Zero-based index of the selected cell. */
+    currentSlide = 0;
+    currentSlideChange() {
+        if (this.currentSlide !== this.iCurrentSlide)
+            this.slideTo(this.currentSlide);
+    }
+    internalSlideChange() {
+        this.currentSlide = this.iCurrentSlide;
+    }
+    /** time duration, in ms, to automatically advance slides */
+    autoplay = false;
+    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);
+        }
+    }
+    /** @internal */
+    ready = false;
+    /** Emitted after component initialisation. */
+    nanoSlidesDidLoad;
+    /** Emitted after flickity initialisation. */
+    nanoSlidesReady;
+    /** Emitted when a slide is selected, even on the same slide. */
+    nanoSlidesSelect;
+    /** Emitted when the selected slide is changed. */
+    nanoSlidesChange;
+    /** Emitted when the slider moves. */
+    nanoSlidesScroll;
+    /** Emitted when the slide transition has finished. */
+    nanoSlidesTransitionEnd;
+    /** Emitted when the slider starts actively being moved. */
+    nanoSlidesDragStart;
+    /** Emitted when the slider is being dragged. */
+    nanoSlidesDragMove;
+    /** Emitted when the slider has finished being dragged. */
+    nanoSlidesDragEnd;
+    /** Emitted when the user taps/clicks on the slide's container. */
+    nanoSlidesTap;
+    /** Emitted when the user taps/clicks on the slide's container. */
+    nanoSlidesFullscreenChange;
+    /**
+     * 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(`${transformTag('nano-slide')} > *`);
+        flickity.reloadCells();
+        flickity.resize();
+        flickity.reposition();
+    }
+    /**
+     * 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.
+     * @returns the index of the active slide
+     */
+    async getActiveIndex() {
+        const flickity = await this.getflickity();
+        return flickity.selectedIndex;
+    }
+    /**
+     * Get the total number of slides.
+     * @returns 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.
+     * @returns true if the current slide is the last slide, false otherwise
+     */
+    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.
+     * @returns true if the current slide is the first slide, false otherwise
+     */
+    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.
+     * @returns the flickity instance
+     */
+    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;
+    }
+    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());
+        });
+    };
+    handleFullscreen = (isFullScreen) => {
+        this.fullscreen = isFullScreen;
+        this.nanoSlidesFullscreenChange.emit(isFullScreen);
+    };
+    handleSlideSelect = (slide) => {
+        this.iCurrentSlide = slide;
+        this.nanoSlidesSelect.emit(slide);
+    };
+    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 import('./fullscreen-T7b44-vN.js');
+            this.hasFullScreenModule = true;
+        }
+        if (!this.hasLazyLoadModule && opts.lazyLoad) {
+            await import('./lazyload-BdH0bSmg.js');
+            this.hasLazyLoadModule = true;
+        }
+        if (!this.hasDotsModule && opts.pageDots) {
+            await import('./page-dots-D2WI1eZ0.js');
+            this.hasDotsModule = true;
+        }
+        if (!this.hasFadeModule && opts.fade) {
+            await import('./fade-C3aqZinc.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;
+            if (this.resizeO) {
+                this.resizeO.disconnect();
+                this.resizeO = undefined;
+            }
+            const ro = (this.resizeO = new ResizeObserver(() => {
+                readTask(() => {
+                    const vp = this.host.shadowRoot.querySelector('.flickity-viewport');
+                    writeTask(() => {
+                        // reset the height, otherwise it *only* gets bigger
+                        if (vp)
+                            vp.style.height = '';
+                        flick.resize();
+                    });
+                });
+            }));
+            ro.observe(this.host);
+        }, 100);
+    }
+    normalizeOptions() {
+        // Base options, can be changed
+        const flickityOptions = {
+            cellSelector: transformTag('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: () => requestAnimationFrame(() => this.nanoSlidesTransitionEnd.emit()),
+            dragStart: () => requestAnimationFrame(() => this.nanoSlidesDragStart.emit()),
+            dragMove: () => requestAnimationFrame(() => this.nanoSlidesDragMove.emit()),
+            dragEnd: () => requestAnimationFrame(() => 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: { ...customEvents, ...eventOptions } };
+        // Merge the base, user options, and events together then pass to flickity
+        // @ts-expect-error - merged options don't quite match the flickity options
+        return { ...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() ===
+                        transformTag('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.resizeO = undefined;
+        }
+        this.destroyflickity();
+    }
+    render() {
+        return (h(Host, { key: '778b37c200236cc6940c12f4ed28355c83804434', class: "nano-slides" }, h("div", { key: '29bb9128e4c2e13f754b15deb335d100a4bbd8cc', class: {
+                slideshow: true,
+                ready: this.ready,
+                'not-ready': !this.ready,
+            }, part: "base" }, h("div", { key: 'bc5e82987d73da6ba47bcc0d6d85694660e63539', ref: (div) => (this.flickityEl = div), class: {
+                'flickity-container': true,
+                'slides-ready': this.slidesReady,
+                'slides-not-ready': !this.slidesReady,
+            }, part: "slide-container" }, h("slot", { key: 'a26b2ef0d1b133231dec665fd670bdfda1bca949' })), h("div", { key: 'e02f3971f707f6fedeae00d879be04d4b576119a', class: "ui-extras" }, h("slot", { key: '97cabadc46d2011e2ca41d8f5c7c26ef53e32b6a', name: "ui" })))));
+    }
+    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(transformTag('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;
+
+export { Flickity as F, Slides as S, Unipointer as U, utils as u };