import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const styleCss = "x-number{display:inline-block}";
const XNumberStyle0 = styleCss;

const XNumber$1 = /*@__PURE__*/ proxyCustomElement(class XNumber extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.value = 0;
        this.from = 0;
        this.fixed = 0;
        this.thousandsSeparator = ',';
        this.interval = 1;
        this.withoutAnimation = false;
        this.lastNumber = undefined;
        this.actualNumber = undefined;
        this.typingTimer = undefined;
    }
    /**
     * Watch changes in value property
     */
    onChangeNumber() {
        if (this.withoutAnimation) {
            this.actualNumber = this.numberWithCommas(this.value);
            this.lastNumber = this.value;
        }
        else {
            clearTimeout(this.typingTimer);
            this.typingTimer = setTimeout(this.animateNumber, this.interval * 1000);
        }
    }
    /**
     * On component will load hook
     */
    componentWillLoad() {
        this.lastNumber = this.from;
        this.actualNumber = this.from.toFixed(this.fixed);
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        if (this.withoutAnimation) {
            this.actualNumber = this.numberWithCommas(this.value);
        }
        else {
            setTimeout(() => {
                this.animateNumber();
            }, 300);
        }
    }
    /**
     * Start number animation
     */
    animateNumber() {
        let startTimestamp = null;
        const step = (timestamp) => {
            if (!startTimestamp) {
                startTimestamp = timestamp;
            }
            const progress = Math.min((timestamp - startTimestamp) / 1000, 1);
            this.actualNumber = this.numberWithCommas(progress * (this.value - this.lastNumber) + this.lastNumber);
            if (progress < 1) {
                window.requestAnimationFrame(step);
            }
            else {
                this.lastNumber = this.value;
            }
        };
        window.requestAnimationFrame(step);
    }
    /**
     * Format number human readable
     *
     * @param n
     * @returns
     */
    numberWithCommas(n) {
        return parseFloat(n)
            .toFixed(this.fixed)
            .replace(/\B(?=(\d{3})+(?!\d))/g, this.thousandsSeparator);
    }
    /**
     * Render component
     */
    render() {
        return h(Host, { key: 'e4056ec201651128e61728f536fc82a8af21ee63' }, this.actualNumber);
    }
    static get watchers() { return {
        "value": ["onChangeNumber"]
    }; }
    static get style() { return XNumberStyle0; }
}, [0, "x-number", {
        "value": [2],
        "from": [2],
        "fixed": [2],
        "thousandsSeparator": [1, "thousands-separator"],
        "interval": [2],
        "withoutAnimation": [4, "without-animation"],
        "lastNumber": [32],
        "actualNumber": [32],
        "typingTimer": [32]
    }, undefined, {
        "value": ["onChangeNumber"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-number"];
    components.forEach(tagName => { switch (tagName) {
        case "x-number":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XNumber$1);
            }
            break;
    } });
}

const XNumber = XNumber$1;
const defineCustomElement = defineCustomElement$1;

export { XNumber, defineCustomElement };
