import { r as registerInstance, g as getElement, h, d as Host, c as createEvent } from './index-c0a4d8bd.js';
import { v as v4 } from './v4-964634d6.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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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 getElement(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" }))));
    }
};
PnScroll.style = PnScrollStyle0;

const translations = {
    sv: {
        ariaLabel: 'Spela eller pausa video',
    },
    en: {
        ariaLabel: 'Play or pause video',
    },
    da: {
        ariaLabel: 'Afspil eller sæt video på pause',
    },
    no: {
        ariaLabel: 'Spill av eller sett video på pause',
    },
    fi: {
        ariaLabel: 'Toista tai keskeytä video',
    },
    de: {
        ariaLabel: 'Video abspielen oder anhalten',
    },
    zh: {
        sharelabel: 'Play or pause video',
    },
    it: {
        sharelabel: 'Play or pause video',
    },
    nl: {
        sharelabel: 'Play or pause video',
    },
};

const pnVideoOverlayCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-video-overlay.pn-video-overlay--show-overlay{position:absolute;width:100%;height:100%;background:radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%)}pn-video-overlay button{position:absolute;bottom:8px;left:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0;border:none;outline:none;cursor:pointer;background-color:transparent}@media screen and (min-width: 768px){pn-video-overlay button{bottom:16px;left:16px}}pn-video-overlay button:hover svg rect{fill:#003d5f}pn-video-overlay button:active svg rect{fill:#001c2c}pn-video-overlay button:focus,pn-video-overlay button:focus-visible{outline:2px solid #ffffff}pn-video-overlay button svg{scale:0.7}@media screen and (min-width: 768px){pn-video-overlay button svg{scale:1}}";
const PnVideoOverlayStyle0 = pnVideoOverlayCss;

const PnVideoOverlay = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.playPauseClicked = createEvent(this, "playPauseClicked", 7);
        this.language = 'en';
        this.isPaused = false;
        this.showOverlay = false;
        this.i18n = undefined;
    }
    get hostElement() { return getElement(this); }
    playPauseClicked;
    componentWillLoad() {
        this.setTranslations();
    }
    setTranslations() {
        if (this.language === 'nb') {
            this.language = 'no';
        }
        if (this.language && translations[this.language]) {
            this.i18n = translations[this.language];
        }
    }
    onLanguageChange() {
        this.setTranslations();
    }
    handlePlayPauseClicked = () => {
        this.playPauseClicked.emit();
    };
    renderPlayIcon = () => {
        return (h("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { width: "64", height: "64", rx: "32", fill: "#005D92" }), h("path", { d: "M8 32C8 18.7305 18.7305 8 32 8C38.6401 8 44.5751 10.6887 48.9432 15.0568C49.5851 15.6988 49.5851 16.7396 48.9432 17.3815C48.3012 18.0235 47.2604 18.0235 46.6185 17.3815C42.8331 13.5962 37.7215 11.2877 32 11.2877C20.5462 11.2877 11.2877 20.5462 11.2877 32C11.2877 43.4538 20.5462 52.7123 32 52.7123C43.4538 52.7123 52.7123 43.4538 52.7123 32C52.7123 31.0921 53.4483 30.3562 54.3562 30.3562C55.264 30.3562 56 31.0921 56 32C56 45.2695 45.2695 56 32 56C18.7305 56 8 45.2695 8 32Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M24.5996 20.0577C25.1064 19.7636 25.7315 19.7615 26.2402 20.0522L44.6512 30.5728C45.1634 30.8654 45.4795 31.4101 45.4795 32C45.4795 32.5899 45.1634 33.1346 44.6512 33.4272L26.2402 43.9478C25.7315 44.2385 25.1064 44.2364 24.5996 43.9423C24.0928 43.6482 23.7808 43.1065 23.7808 42.5205V21.4795C23.7808 20.8935 24.0928 20.3518 24.5996 20.0577ZM27.0685 39.6879L40.5224 32L27.0685 24.3121V39.6879Z", fill: "white" }), h("path", { d: "M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z", fill: "white" })));
    };
    renderPauseIcon = () => {
        return (h("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { width: "64", height: "64", rx: "32", fill: "#005D92" }), h("path", { d: "M32 8C18.7305 8 8 18.7305 8 32C8 45.2695 18.7305 56 32 56C45.2695 56 56 45.2695 56 32C56 31.0921 55.264 30.3562 54.3562 30.3562C53.4483 30.3562 52.7123 31.0921 52.7123 32C52.7123 43.4538 43.4538 52.7123 32 52.7123C20.5462 52.7123 11.2877 43.4538 11.2877 32C11.2877 20.5462 20.5462 11.2877 32 11.2877C37.7215 11.2877 42.8331 13.5962 46.6185 17.3815C47.2604 18.0235 48.3012 18.0235 48.9432 17.3815C49.5851 16.7396 49.5851 15.6988 48.9432 15.0568C44.5751 10.6887 38.6401 8 32 8Z", fill: "white" }), h("path", { d: "M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.1729 24.1096C19.1729 21.7491 21.0865 19.8356 23.4469 19.8356H26.0771C28.4375 19.8356 30.351 21.7491 30.351 24.1096V39.8904C30.351 42.2509 28.4375 44.1644 26.0771 44.1644H23.4469C21.0865 44.1644 19.1729 42.2509 19.1729 39.8904V24.1096ZM23.4469 23.1233C22.9022 23.1233 22.4606 23.5649 22.4606 24.1096V39.8904C22.4606 40.4351 22.9022 40.8767 23.4469 40.8767H26.0771C26.6218 40.8767 27.0634 40.4351 27.0634 39.8904V24.1096C27.0634 23.5649 26.6218 23.1233 26.0771 23.1233H23.4469Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M37.7765 19.8356C35.4161 19.8356 33.5026 21.7491 33.5026 24.1096V39.8904C33.5026 42.2509 35.4161 44.1644 37.7765 44.1644H40.4067C42.7671 44.1644 44.6807 42.2509 44.6807 39.8904V24.1096C44.6807 21.7491 42.7671 19.8356 40.4067 19.8356H37.7765ZM36.7902 24.1096C36.7902 23.5649 37.2318 23.1233 37.7765 23.1233H40.4067C40.9514 23.1233 41.393 23.5649 41.393 24.1096V39.8904C41.393 40.4351 40.9514 40.8767 40.4067 40.8767H37.7765C37.2318 40.8767 36.7902 40.4351 36.7902 39.8904V24.1096Z", fill: "white" })));
    };
    render() {
        return (h(Host, { key: '469d957d702aaddf614c350488710934ef9f45db', class: `pn-video-overlay ${this.showOverlay ? 'pn-video-overlay--show-overlay' : ''}` }, h("button", { key: 'd45e7df077ca7a3a3bf8ae1c31499d02791e8044', type: "button", id: "overlayed-button-pause-video", "aria-label": `${this.i18n.ariaLabel}`, onClick: this.handlePlayPauseClicked }, this.isPaused ? this.renderPlayIcon() : this.renderPauseIcon())));
    }
    static get watchers() { return {
        "language": ["onLanguageChange"]
    }; }
};
PnVideoOverlay.style = PnVideoOverlayStyle0;

export { PnScroll as pn_scroll, PnVideoOverlay as pn_video_overlay };

//# sourceMappingURL=pn-scroll_2.entry.js.map