import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { v as v4 } from './v4.js';

const pnScrollCss = "pn-scroll .scroll-wrapper{transition:all var(--transition-duration) ease-in-out 250ms}pn-scroll .scroll-wrapper.fade{opacity:0}pn-scroll .scroll-wrapper.fade.in-view{opacity:1}pn-scroll .scroll-wrapper.slide-up{transform:translateY(50px)}pn-scroll .scroll-wrapper.slide-up.in-view{transform:translateY(0)}";
const PnScrollStyle0 = pnScrollCss;

const defaultObserverOptions = {
    root: null,
    threshold: 0,
    rootMargin: '0px 0px -150px 0px',
};
const SCROLL_ID = `pn-scroll-wrapper-id-`;
const PnScroll = /*@__PURE__*/ proxyCustomElement(class PnScroll extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.observerOptions = defaultObserverOptions;
        this.behaviourClasses = 'fade slide-up';
        this.transitionDurationSeconds = 0.5;
        this.shouldLoop = false;
        this.intersectFunc = undefined;
        this.notIntersectFunc = undefined;
        this.compId = null;
    }
    get hostElement() { return this; }
    generateUniqueId() {
        return v4();
    }
    handleIntersection(entries, observer, onIntersecting, onNotIntersecting, shouldLoop) {
        entries.forEach(entry => {
            if (!shouldLoop) {
                if (!entry.isIntersecting) {
                    onNotIntersecting?.(entry, observer);
                    return;
                }
                entry.target.classList.add('in-view');
                onIntersecting?.(entry, observer);
                observer.unobserve(entry.target);
            }
            else {
                entry.target.classList.toggle('in-view', entry.isIntersecting);
                if (entry.isIntersecting) {
                    onIntersecting?.(entry, observer);
                }
                else {
                    onNotIntersecting?.(entry, observer);
                }
            }
        });
    }
    //on load, generate unique id for this wrapper
    componentWillLoad() {
        this.compId = this.generateUniqueId();
    }
    componentDidLoad() {
        const observer = new IntersectionObserver((entries, observer) => this.handleIntersection(entries, observer, this.intersectFunc, this.notIntersectFunc, this.shouldLoop), this.observerOptions);
        const objectToObserve = document.getElementById(`${SCROLL_ID}${this.compId}`);
        observer.observe(objectToObserve);
    }
    render() {
        return (h(Host, { key: '443d7a3794f4b2292d39837ca89726bcdd2a5cee' }, h("div", { key: '341524e340709a5db403e024b448fd08087fa9c5', class: `scroll-wrapper ${this.behaviourClasses}`, id: `${SCROLL_ID}${this.compId}`, style: { '--transition-duration': `${this.transitionDurationSeconds}s` } }, h("slot", { key: '625bd566d903c15298969428a50030ee47c5568b', name: "scroll-affected" }))));
    }
    static get style() { return PnScrollStyle0; }
}, [4, "pn-scroll", {
        "observerOptions": [16],
        "behaviourClasses": [1, "behaviour-classes"],
        "transitionDurationSeconds": [2, "transition-duration-seconds"],
        "shouldLoop": [4, "should-loop"],
        "intersectFunc": [16],
        "notIntersectFunc": [16],
        "compId": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-scroll"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-scroll":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnScroll);
            }
            break;
    } });
}

export { PnScroll as P, defineCustomElement as d };

//# sourceMappingURL=pn-scroll2.js.map