@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/esm/nano-slides-2715825b.js

@@ -1,3038 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import { r as registerInstance, c as createEvent, g as getElement, e as readTask, d as writeTask, a as Host } from './index-6cc72cd9.js';
-import { t as transformTag, h } from './renderer-4bc3e2dc.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);
-};
-const animatePrototype = proto$1;
-
-// 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 () {
-    // collection of item elements
-    this.cells = this._makeCells(this.slider.getRootNode().host
-        ? this.slider.getRootNode().host.children
-        : this.slider.children);
-    this.positionCells();
-    this._getWrapShiftCells();
-    this.setGallerySize();
-};
-/**
- * turn elements into Flickity.Cells
- * @param {Array or NodeList or HTMLElement} elems
- * @returns {Array} items - collection of new Flickity Cells
- */
-proto._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();
-    // 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, animatePrototype);
-// -------------------------- 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;
-
-const 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,
-        };
-    }
-};
-
-const 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;
-};
-
-const 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{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-inline-size:100vw}:host([ready]){opacity:1}.slideshow{max-block-size:100%;min-block-size:inherit;block-size:inherit;position:relative}.slideshow.not-ready{inline-size:100%;overflow:hidden}.flickity-container{opacity:0;transition:opacity 0.2s;display:flex;inline-size: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;list-style:none;text-align:center;line-height:1;z-index:4}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;inline-size:10px;block-size:10px;margin-block:0;margin-inline:8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}.flickity-page-dots .dot.is-selected{opacity:1;background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background: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 NanoSlidesStyle0 = slidesCss;
-
-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-52d62028.js');
-            this.hasFullScreenModule = true;
-        }
-        if (!this.hasLazyLoadModule && opts.lazyLoad) {
-            await import('./lazyload-8ff69ba4.js');
-            this.hasLazyLoadModule = true;
-        }
-        if (!this.hasDotsModule && opts.pageDots) {
-            await import('./page-dots-5b23db8c.js');
-            this.hasDotsModule = true;
-        }
-        if (!this.hasFadeModule && opts.fade) {
-            await import('./fade-ce1a4958.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: 'fec3c2951cb3865b5a90817750783f60791c8152', class: "nano-slides" }, h("div", { key: '6e7da38e24396ff8f274ecf1f12523561f68d7b9', class: {
-                slideshow: true,
-                ready: this.ready,
-                'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: '4a80ee977b2c6adab8667be4d5737ee2b3991c12', ref: (div) => (this.flickityEl = div), class: {
-                'flickity-container': true,
-                'slides-ready': this.slidesReady,
-                'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: '34ff051519aeba458f99ea0d164a0acd1bd547cc' })), h("div", { key: '91192bf437b0c614a7f349f4ae7c0740f6768ea7', class: "ui-extras" }, h("slot", { key: 'e278a3193b7b9c4b88f6245cc63def6f2f4dd941', 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 = NanoSlidesStyle0;
-
-export { Flickity as F, Slides as S, Unipointer as U, utils as u };
-
-//# sourceMappingURL=nano-slides-2715825b.js.map