@nanoporetech-digital/components 7.4.5 → 7.5.1

package/dist/components/nano-slides.js

@@ -87,9 +87,9 @@ function getStyleSize(value) {
     const isValid = value.indexOf('%') == -1 && !isNaN(num);
     return isValid && num;
 }
-function noop() { }
+function noop$1() { }
 const logError = typeof console == 'undefined'
-    ? noop
+    ? noop$1
     : function (message) {
         console.error(message);
     };
@@ -1430,7 +1430,1075 @@ 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;
@@ -1873,10 +2941,10 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class Slides extends HTMLElement
             select: this.handleSlideSelect,
             change: this.nanoSlidesChange.emit,
             scroll: this.nanoSlidesScroll.emit,
-            settle: this.nanoSlidesTransitionEnd.emit,
-            dragStart: this.nanoSlidesDragStart.emit,
-            dragMove: this.nanoSlidesDragMove.emit,
-            dragEnd: this.nanoSlidesDragEnd.emit,
+            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,
         };
@@ -1923,15 +2991,15 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class Slides extends HTMLElement
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: '984cdb5e6e920f4887e6002634fef0df2849b14d' }, h("div", { key: 'ff35fedc4e325bacfabbb254dbce68c8b43bfc2d', class: {
+        return (h(Host, { key: '9e97a224eef505b29bf19db52c901ba85c058f54' }, h("div", { key: 'e3b0778a1b68bf78fe52abc32c74f30e278a00e4', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: '5cb1962388d7bec963441ff6b6ff0cc57de138a8', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: 'da56ec590908be9a10be1fc41bbf83fa3216e674', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: 'a99f63ac2cb5101f76883c67f78e0d83ca3124d4' })), h("div", { key: '5757cabd9881eb9e153999aafe1ff7e3fd957b02', class: "ui-extras" }, h("slot", { key: '6c10bea0e9ede5c30d617f74c6f871cccf9bebdd', name: "ui" })))));
+            }, part: "slide-container" }, h("slot", { key: '12d359c67d1f30245e7aef788018697b0c0b94ee' })), h("div", { key: '8a0a0190ea93acb5ba932b353baa6cbbae33547b', class: "ui-extras" }, h("slot", { key: 'fddc2df69c989ac09e5908a8953783b9ae32d3ba', name: "ui" })))));
     }
     static get watchers() { return {
         "options": ["optionsChanged"],
@@ -2018,6 +3086,6 @@ function defineCustomElement$1() {
 const NanoSlides = Slides;
 const defineCustomElement = defineCustomElement$1;
 
-export { EvEmitter as E, Flickity as F, NanoSlides, defineCustomElement, utils as u };
+export { Flickity as F, NanoSlides, Unipointer as U, defineCustomElement, utils as u };
 
 //# sourceMappingURL=nano-slides.js.map