/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { Host, readTask, writeTask, } from "@stencil/core";
import { transformTag, h } from "../../utils/renderer";
import { flickity } from "./lib/js";
const modulo = (num, div) => {
    return ((num % div) + div) % div;
};
/**
 * A toolbox for creating carousel or slide-show widgets, allowing users to navigate through a collection of items one at a time.
 *
 * @version 1.0.0
 * @status stable
 *
 * @part base - Wrapper around slides and additional ui elements.
 * @part slide-container - Wraps all slide elements.
 * @part slide-viewport - The visible, scrollable area around slide elements.
 * @part navigation-button - Next / previous navigation buttons.
 * @part navigation-button--next - the next navigation button.
 * @part navigation-button--previous - The previous navigation button.
 * @part navigation-icon - The chevron / arrow icon within a navigation button.
 * @part pagination - Wraps pagination indicators.
 * @part pagination-item - A pagination indicator.
 * @part pagination-item--active - The current, active pagination indicator.
 *
 * @slot - default slot of nano-slide components.
 * @slot ui - An absolutely positioned element that will be placed over the slider. Any custom ui can be housed here.
 * @slot next-icon - Optional next icon to use instead of the default.
 * @slot previous-icon - Optional previous icon to use instead of the default.
 */
export class Slides {
    flickityEl;
    flickityReady = false;
    resizeO;
    readyflickity;
    flickity = new Promise((resolve) => {
        this.readyflickity = resolve;
    });
    syncflickity;
    childrenEles;
    hasFullScreenModule = false;
    hasLazyLoadModule = false;
    hasFadeModule = false;
    iCurrentSlide;
    slidesReady;
    didInit = false;
    slideCount = 0;
    host;
    /**
     * 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;
    /** If `true`, show the pagination. */
    pager = false;
    /** 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(),
            this.waitForSlides(),
        ]);
        // 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.updateOptions({ fade: false, percentPosition: true });
            flkty.on('scroll', this.animation);
            return;
        }
        // setup new stuff
        switch (this.animation) {
            case 'fade':
                this.updateOptions({ fade: true, percentPosition: true });
                break;
            case 'parallax':
                this.updateOptions({ fade: false, percentPosition: true });
                flkty.on('scroll', this.parallax);
                break;
            default:
                this.updateOptions({ fade: false, percentPosition: true });
                break;
        }
    }
    updateOptions(opts) {
        this.options = { ...this.options, ...opts };
    }
    /** 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() {
        if (!this.didInit)
            return;
        const [flickity] = await Promise.all([
            this.getflickity(),
            this.waitForSlides(),
        ]);
        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());
        });
    };
    isActive(num) {
        if (num === this.currentSlide) {
            return true;
        }
        return false;
    }
    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('./lib/js/fullscreen');
            this.hasFullScreenModule = true;
        }
        if (!this.hasLazyLoadModule && opts.lazyLoad) {
            await import('./lib/js/lazyload');
            this.hasLazyLoadModule = true;
        }
        if (!this.hasFadeModule && opts.fade) {
            await import('./lib/js/fade');
            this.hasFadeModule = true;
        }
    }
    async initflickity() {
        const finalOptions = this.normalizeOptions();
        await this.loadFlickityModules(finalOptions);
        // init flickity core
        await this.waitForSlides();
        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.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: false,
            fullscreen: this.fullscreen,
            accessibility: true,
            imagesLoaded: true,
        };
        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 };
    }
    waitForSlides = () => {
        const allSlides = Array.from(this.host.querySelectorAll(transformTag('nano-slide')));
        this.slideCount = allSlides.length;
        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);
                    this.host.removeEventListener('nanoSlideReady', slideResolver);
                    this.host.removeEventListener('nano-slide-ready', slideResolver);
                }
            };
            this.host.addEventListener('nanoSlideReady', slideResolver);
            // fallback for vue who can't handle camelcase event names
            this.host.addEventListener('nano-slide-ready', slideResolver);
        });
    };
    componentDidLoad() {
        this.nanoSlidesDidLoad.emit();
        if (!this.didInit) {
            this.didInit = true;
            this.initflickity();
        }
    }
    disconnectedCallback() {
        if (this.resizeO) {
            this.resizeO.disconnect();
            this.resizeO = undefined;
        }
        this.destroyflickity();
    }
    render() {
        return (h(Host, { key: 'ab3c7c4aee4786601f82e6d83ddb2de195ff8fd7', class: "nano-slides" }, h("div", { key: 'fbe7dadaddefd92daef76bec6e01dfb7a11aded7', class: {
                slideshow: true,
                ready: this.ready,
                'not-ready': !this.ready,
            }, part: "base" }, h("div", { key: 'efef77051a0db1a52586ce3e12baee3cb443d312', ref: (div) => (this.flickityEl = div), class: {
                'flickity-container': true,
                'slides-ready': this.slidesReady,
                'slides-not-ready': !this.slidesReady,
            }, part: "slide-container" }, h("slot", { key: 'cbdf063d45eb964328ade1026c897e02e27567f2', onSlotchange: () => this.update() })), h("div", { key: 'a68ae1524777a0fbb9369135e4f802cd70b8249f', class: "ui-extras" }, h("slot", { key: 'ea8f0636dcfabaa7704ed86fa10cdbd5d21db872', name: "ui" })), this.slideCount > 1 && (this.pager || this.navbtns) && (h("div", { key: '078617be5a5af3ea80886927f2f2b6c8bafd8427', class: "pagination", part: "pagination" }, this.navbtns && (h("button", { key: 'fb0c9671d14839940f71640edf42039f28e81ca1', class: "flickity-button flickity-prev-next-button previous", part: "navigation-button navigation-button--previous", "aria-label": "Previous slide", onClick: () => this.slidePrev(), disabled: this.iCurrentSlide === 0 && !this.options.wrapAround }, h("span", { key: '4b535329bbcc1a13cb13e07b6885e33127c21d25', class: "button-icon button-icon--previous", part: "navigation-icon" }, h("slot", { key: '160d5479d37a91b4b210b3f477d780a39f93049d', name: "previous-icon" })))), this.pager && (h("div", { key: '370e6b8f4991efa3a19362f7e886ea8650cc92ad', class: "flickity-page-dots" }, Array.from({ length: this.slideCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
                'pagination-btn': true,
                'pagination-btn--active': this.isActive(index),
                'is-selected': this.isActive(index),
                dot: true,
            }, "aria-current": this.isActive(index) ? 'step' : undefined, onClick: () => {
                if (this.isActive(index))
                    return;
                this.slideTo(index);
            } }, h("span", { class: "pagination-btn__label" }, "Go to slide ", index + 1)))))), this.navbtns && (h("button", { key: '8c8841103ecf7e698326216cd9d19616098ba087', class: "flickity-button flickity-prev-next-button next", part: "navigation-button navigation-button--next", "aria-label": "Next slide", onClick: () => this.slideNext(), disabled: this.syncflickity?.slides.length ===
                this.iCurrentSlide + 1 && !this.options.wrapAround }, h("span", { key: '038894a16910a9f7156d69ddf02805cd7a4b3db2', class: "button-icon", part: "navigation-icon" }, h("slot", { key: 'fce4e6b92873f9805e8d2d5db6eac1afb04bd9f2', name: "next-icon" })))))))));
    }
    static get is() { return "nano-slides"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["slides.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["slides.css"]
        };
    }
    static get properties() {
        return {
            "options": {
                "type": "unknown",
                "attribute": "options",
                "mutable": true,
                "complexType": {
                    "original": "FlickityOptions",
                    "resolved": "Options & { fullscreen?: boolean; fade?: boolean; }",
                    "references": {
                        "FlickityOptions": {
                            "location": "import",
                            "path": "./slides-interface",
                            "id": "src/components/slides/slides-interface.d.ts::FlickityOptions"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Options to pass to the flickity instance.\nSee https://flickity.metafizzy.co/options.html for valid options"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{}"
            },
            "navbtns": {
                "type": "boolean",
                "attribute": "navbtns",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, show the next / prev buttons."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "pager": {
                "type": "boolean",
                "attribute": "pager",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, show the pagination."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "fullscreenbtn": {
                "type": "boolean",
                "attribute": "fullscreenbtn",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, show a fullscreen button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "fullscreen": {
                "type": "boolean",
                "attribute": "fullscreen",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, make the slider fullscreen."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "animation": {
                "type": "string",
                "attribute": "animation",
                "mutable": false,
                "complexType": {
                    "original": "SlideAnimation",
                    "resolved": "\"fade\" | \"parallax\" | \"scroll\" | (() => void)",
                    "references": {
                        "SlideAnimation": {
                            "location": "import",
                            "path": "./slides-interface",
                            "id": "src/components/slides/slides-interface.d.ts::SlideAnimation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Animation presets or your own custom animation function; called every frame during scroll"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "'scroll'"
            },
            "currentSlide": {
                "type": "number",
                "attribute": "current-slide",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Zero-based index of the selected cell."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "0"
            },
            "autoplay": {
                "type": "any",
                "attribute": "autoplay",
                "mutable": false,
                "complexType": {
                    "original": "string | false | number",
                    "resolved": "boolean | number | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "time duration, in ms, to automatically advance slides"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "ready": {
                "type": "boolean",
                "attribute": "ready",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "iCurrentSlide": {},
            "slidesReady": {},
            "didInit": {},
            "slideCount": {}
        };
    }
    static get events() {
        return [{
                "method": "nanoSlidesDidLoad",
                "name": "nanoSlidesDidLoad",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted after component initialisation."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "nanoSlidesReady",
                "name": "nanoSlidesReady",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted after flickity initialisation."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "nanoSlidesSelect",
                "name": "nanoSlidesSelect",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when a slide is selected, even on the same slide."
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }, {
                "method": "nanoSlidesChange",
                "name": "nanoSlidesChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the selected slide is changed."
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }, {
                "method": "nanoSlidesScroll",
                "name": "nanoSlidesScroll",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the slider moves."
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }, {
                "method": "nanoSlidesTransitionEnd",
                "name": "nanoSlidesTransitionEnd",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the slide transition has finished."
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }, {
                "method": "nanoSlidesDragStart",
                "name": "nanoSlidesDragStart",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the slider starts actively being moved."
                },
                "complexType": {
                    "original": "DragEvent",
                    "resolved": "PointerDragEvent | TouchDragEvent",
                    "references": {
                        "DragEvent": {
                            "location": "import",
                            "path": "./slides-interface",
                            "id": "src/components/slides/slides-interface.d.ts::DragEvent"
                        }
                    }
                }
            }, {
                "method": "nanoSlidesDragMove",
                "name": "nanoSlidesDragMove",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the slider is being dragged."
                },
                "complexType": {
                    "original": "DragEvent",
                    "resolved": "PointerDragEvent | TouchDragEvent",
                    "references": {
                        "DragEvent": {
                            "location": "import",
                            "path": "./slides-interface",
                            "id": "src/components/slides/slides-interface.d.ts::DragEvent"
                        }
                    }
                }
            }, {
                "method": "nanoSlidesDragEnd",
                "name": "nanoSlidesDragEnd",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the slider has finished being dragged."
                },
                "complexType": {
                    "original": "DragEvent",
                    "resolved": "PointerDragEvent | TouchDragEvent",
                    "references": {
                        "DragEvent": {
                            "location": "import",
                            "path": "./slides-interface",
                            "id": "src/components/slides/slides-interface.d.ts::DragEvent"
                        }
                    }
                }
            }, {
                "method": "nanoSlidesTap",
                "name": "nanoSlidesTap",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the user taps/clicks on the slide's container."
                },
                "complexType": {
                    "original": "DragEvent",
                    "resolved": "PointerDragEvent | TouchDragEvent",
                    "references": {
                        "DragEvent": {
                            "location": "import",
                            "path": "./slides-interface",
                            "id": "src/components/slides/slides-interface.d.ts::DragEvent"
                        }
                    }
                }
            }, {
                "method": "nanoSlidesFullscreenChange",
                "name": "nanoSlidesFullscreenChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the user taps/clicks on the slide's container."
                },
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "update": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Update the underlying flickity implementation. Call this if you've added or removed\nchild slides.",
                    "tags": []
                }
            },
            "slideTo": {
                "complexType": {
                    "signature": "(index: number, instant?: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "index",
                            "type": "number",
                            "docs": "The index of the slide to transition to."
                        }, {
                            "name": "instant",
                            "type": "boolean",
                            "docs": "Immediately view the selected slide without animation."
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Transition to the specified slide.",
                    "tags": [{
                            "name": "param",
                            "text": "index The index of the slide to transition to."
                        }, {
                            "name": "param",
                            "text": "instant Immediately view the selected slide without animation."
                        }]
                }
            },
            "slideNext": {
                "complexType": {
                    "signature": "(instant?: boolean, wrap?: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "instant",
                            "type": "boolean",
                            "docs": "The transition duration (in ms)."
                        }, {
                            "name": "wrap",
                            "type": "boolean",
                            "docs": "If true, the first slide will be selected if at the last slide."
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Transition to the next slide.",
                    "tags": [{
                            "name": "param",
                            "text": "instant The transition duration (in ms)."
                        }, {
                            "name": "param",
                            "text": "wrap If true, the first slide will be selected if at the last slide."
                        }]
                }
            },
            "slidePrev": {
                "complexType": {
                    "signature": "(instant?: boolean, wrap?: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "instant",
                            "type": "boolean",
                            "docs": "The transition duration (in ms)."
                        }, {
                            "name": "wrap",
                            "type": "boolean",
                            "docs": "If true, the last slide will be selected if at the first slide."
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Transition to the previous slide.",
                    "tags": [{
                            "name": "param",
                            "text": "instant The transition duration (in ms)."
                        }, {
                            "name": "param",
                            "text": "wrap If true, the last slide will be selected if at the first slide."
                        }]
                }
            },
            "getActiveIndex": {
                "complexType": {
                    "signature": "() => Promise<number>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<number>"
                },
                "docs": {
                    "text": "Get the index of the active slide.",
                    "tags": [{
                            "name": "returns",
                            "text": "the index of the active slide"
                        }]
                }
            },
            "length": {
                "complexType": {
                    "signature": "() => Promise<number>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<number>"
                },
                "docs": {
                    "text": "Get the total number of slides.",
                    "tags": [{
                            "name": "returns",
                            "text": "the total number of slides"
                        }]
                }
            },
            "isEnd": {
                "complexType": {
                    "signature": "() => Promise<boolean>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<boolean>"
                },
                "docs": {
                    "text": "Get whether or not the current slide is the last slide.",
                    "tags": [{
                            "name": "returns",
                            "text": "true if the current slide is the last slide, false otherwise"
                        }]
                }
            },
            "isBeginning": {
                "complexType": {
                    "signature": "() => Promise<boolean>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<boolean>"
                },
                "docs": {
                    "text": "Get whether or not the current slide is the first slide.",
                    "tags": [{
                            "name": "returns",
                            "text": "true if the current slide is the first slide, false otherwise"
                        }]
                }
            },
            "startAutoplay": {
                "complexType": {
                    "signature": "(time?: number) => Promise<void>",
                    "parameters": [{
                            "name": "time",
                            "type": "number",
                            "docs": "- optional time duration to show slides"
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Start auto play.",
                    "tags": [{
                            "name": "param",
                            "text": "time - optional time duration to show slides"
                        }]
                }
            },
            "stopAutoplay": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Stop auto play.",
                    "tags": []
                }
            },
            "lockSwipes": {
                "complexType": {
                    "signature": "(lock: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "lock",
                            "type": "boolean",
                            "docs": "If `true`, disable swiping"
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Lock or unlock the ability to slide to the next slide.",
                    "tags": [{
                            "name": "param",
                            "text": "lock If `true`, disable swiping"
                        }]
                }
            },
            "getflickity": {
                "complexType": {
                    "signature": "() => Promise<Flickity>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "Flickity": {
                            "location": "import",
                            "path": "./slides-interface",
                            "id": "src/components/slides/slides-interface.d.ts::Flickity"
                        }
                    },
                    "return": "Promise<Flickity>"
                },
                "docs": {
                    "text": "Get the flickity instance.\nUse this to access the full flickity API.\nSee https://flickity.metafizzy.co/ for all API options.",
                    "tags": [{
                            "name": "returns",
                            "text": "the flickity instance"
                        }]
                }
            },
            "reload": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Hard destroy / create.\nCertain flickity options, you will require the instance to be re-initialised",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "options",
                "methodName": "optionsChanged"
            }, {
                "propName": "fullscreenbtn",
                "methodName": "fullscreenBtnChanged"
            }, {
                "propName": "fullscreen",
                "methodName": "fullscreenChanged"
            }, {
                "propName": "animation",
                "methodName": "animationChange"
            }, {
                "propName": "currentSlide",
                "methodName": "currentSlideChange"
            }, {
                "propName": "iCurrentSlide",
                "methodName": "internalSlideChange"
            }, {
                "propName": "autoplay",
                "methodName": "autoPlayChange"
            }];
    }
}
