/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { r as registerInstance, c as createEvent, a as Host } from './index-BM3Om9WE.js';
import { h } from './renderer-DpNDfhNy.js';

const slideCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:flex;align-items:center;justify-content:center;inline-size:100%;min-block-size:100%;font-size:18px;text-align:center;box-sizing:border-box;overflow:hidden;transition:opacity 0.2s;opacity:0;flex-direction:column}:host([ready]){opacity:1}:host(:not([ready])){flex:1 0 auto}";

const Slide = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.nanoSlideReady = createEvent(this, "nanoSlideReady", 7);
    }
    /**
     * Fired when the slide has loaded.
     */
    nanoSlideReady;
    /**
     * Used to to inform the parent slides components of readiness.
     * This will automatically be set to true when the slide has loaded but can be set and updated manually.
     */
    ready = null;
    readyChange(newReady, oldReady) {
        if (typeof oldReady !== 'undefined' &&
            oldReady === false &&
            newReady === true) {
            this.nanoSlideReady.emit();
        }
    }
    componentDidLoad() {
        // ready state is being loaded manually
        if (typeof this.ready === 'boolean')
            return;
        setTimeout(() => {
            this.nanoSlideReady.emit();
            this.ready = true;
        });
    }
    render() {
        return (h(Host, { key: '3de94ff45cb6dddcca7f0097f3376361c2666f7e', class: "nano-slide" }, h("slot", { key: '9998d9102bdc69eecd28752b4a2c130497b34d06' })));
    }
    static get watchers() { return {
        "ready": ["readyChange"]
    }; }
};
Slide.style = slideCss;

export { Slide as nano_slide };
