/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
import { h } from './renderer.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 = /*@__PURE__*/ proxyCustomElement(class Slide extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        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"]
    }; }
    static get style() { return slideCss; }
}, [257, "nano-slide", {
        "ready": [1540]
    }, undefined, {
        "ready": ["readyChange"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["nano-slide"];
    components.forEach(tagName => { switch (tagName) {
        case "nano-slide":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Slide);
            }
            break;
    } });
}

const NanoSlide = Slide;
const defineCustomElement = defineCustomElement$1;

export { NanoSlide, defineCustomElement };
