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

const animateValue = (obj, start = 0, end = 100, duration = 1000, numberFormat = 'Sv-SE', formatStyle) => {
    const formatter = new Intl.NumberFormat(numberFormat, formatStyle);
    if (duration <= 0) {
        obj.textContent = formatter.format(end);
        return;
    }
    let startTimestamp = null;
    const step = (timestamp) => {
        if (!startTimestamp)
            startTimestamp = timestamp;
        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
        if (progress < 1) {
            const animatedValue = Math.round((progress * (end - start) + start) * 10) / 10;
            obj.textContent = formatter.format(animatedValue);
            window.requestAnimationFrame(step);
        }
        else {
            obj.textContent = formatter.format(end);
        }
    };
    window.requestAnimationFrame(step);
};

const NumberFormatList = {
    Sv: { lang: 'Sv', code: 'Sv-SE' },
    En: { lang: 'En', code: 'En-GB' },
};
const NumberFormatStyle = {
    Decimal: { style: 'decimal' },
    Currency: { style: 'currency', currency: 'SEK' },
    Percent: { style: 'percent' },
    None: { style: 'decimal', useGrouping: false },
};

const inViewport = (entries, toggleClass, isEntryIntersectingCallBack) => {
    entries.forEach(entry => {
        entry.target.classList.toggle(toggleClass, entry.isIntersecting);
        isEntryIntersectingCallBack(entry);
    });
};

const pnStatsInfoDataCss = "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-stats-info-data{width:50%}pn-stats-info-data .pn-stats-info-data__container{width:100%;background-color:transparent;color:#f06365;display:flex;flex-direction:column;align-items:center;padding:2rem}@media screen and (min-width: 768px){pn-stats-info-data .pn-stats-info-data__container{justify-content:center;min-height:102px;padding:0 2rem}}@media screen and (min-width: 1200px){pn-stats-info-data .pn-stats-info-data__container{min-height:125px}}pn-stats-info-data .pn-stats-info-data__container__content{display:flex;flex-direction:row;justify-content:center}pn-stats-info-data .pn-stats-info-data__container__content__data{font-weight:700;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){pn-stats-info-data .pn-stats-info-data__container__content__data{font-size:5.6rem}}pn-stats-info-data .pn-stats-info-data__container__content__unit{font-weight:700;font-size:3rem;line-height:110%;margin-left:0.8rem}@media screen and (min-width: 1200px){pn-stats-info-data .pn-stats-info-data__container__content__unit{font-size:5.6rem}}pn-stats-info-data .pn-stats-info-data__container__content__preamble{text-align:center;font-weight:400;font-size:1.4rem;line-height:110%;color:#ffffff}";
const PnStatsInfoDataStyle0 = pnStatsInfoDataCss;

const PnStatsInfoData = /*@__PURE__*/ proxyCustomElement(class PnStatsInfoData extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.format = 'En';
        this.formatStyle = 'Decimal';
        this.startValue = 0;
        this.data = 0;
        this.unit = null;
        this.preamble = null;
        this.duration = 1000;
        this.index = null;
        this.hasBeenShown = false;
        this.compId = null;
    }
    inViewPortCallback = (entry) => {
        if (entry.isIntersecting) {
            this.hasBeenShown = true;
        }
    };
    generateUniqueId() {
        return v4();
    }
    componentWillLoad() {
        this.compId = this.generateUniqueId();
    }
    watchStateHandlder(newValue, oldValue) {
        const obj = document.getElementById(`pn-stats-info-data-${this.compId}-${this.index}`);
        if (obj.classList.contains('is-inViewport') && newValue !== oldValue) {
            animateValue(obj, this.startValue, this.data, this.duration, NumberFormatList[this.format].code, NumberFormatStyle[this.formatStyle]);
        }
    }
    render() {
        return (h(Host, { key: 'a1341a3318a51adb8a170b773f9109110bca65c6' }, h("div", { key: 'e7c94b94b3cf2b1c7fd4c05f953ca537ec17153c', class: "pn-stats-info-data__container" }, h("div", { key: '391ad615fa5930728fb3a7baece08d3636c90820', class: "pn-stats-info-data__container__content" }, h("div", { key: 'a54130470a7c195f2789c440167022d9eafbee42', class: "pn-stats-info-data__container__content__data", id: `pn-stats-info-data-${this.compId}-${this.index}` }), this.unit && h("div", { key: '0aa67825205280a82b65f8f650203bcbe9318ded', class: "pn-stats-info-data__container__content__unit" }, this.unit)), h("div", { key: '14bd4ef96a6d6be6591dbcb314c395a016e9ad9c', class: "pn-stats-info-data__container__content__preamble" }, this.preamble))));
    }
    componentDidRender() {
        const observer = new IntersectionObserver(entries => inViewport(entries, 'is-inViewport', this.inViewPortCallback));
        const obj = document.getElementById(`pn-stats-info-data-${this.compId}-${this.index}`);
        observer.observe(obj);
    }
    static get watchers() { return {
        "hasBeenShown": ["watchStateHandlder"]
    }; }
    static get style() { return PnStatsInfoDataStyle0; }
}, [0, "pn-stats-info-data", {
        "format": [1],
        "formatStyle": [1, "format-style"],
        "startValue": [2, "start-value"],
        "data": [2],
        "unit": [1],
        "preamble": [1],
        "duration": [2],
        "index": [2],
        "hasBeenShown": [32],
        "compId": [32]
    }, undefined, {
        "hasBeenShown": ["watchStateHandlder"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-stats-info-data"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-stats-info-data":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnStatsInfoData);
            }
            break;
    } });
}

export { PnStatsInfoData as P, defineCustomElement as d };

//# sourceMappingURL=pn-stats-info-data2.js.map