import { r as registerInstance, h, H as Host } from './index-6191c26c.js';
import { c as cls } from './helpers-7608753a.js';

const styleCss = "x-progress{display:block;width:100%;height:0.25rem;border-radius:2px;overflow:hidden;position:relative;background-color:rgba(var(--color-primary-rgb, 66, 117, 242), 0.1);margin:0 0}.is-dark-mode x-progress{background-color:rgba(255, 255, 255, 0.1)}x-progress>span,x-progress>x-tooltip>span{display:block;position:absolute;height:0.25rem;max-width:100%;min-width:0%;background-color:var(--color-primary, #4275F2);-webkit-transition:0.3s;transition:0.3s;border-radius:0.5rem}x-progress.progress-bar-loading>span{display:block;position:absolute;content:\"\";left:-200px;width:200px;height:0.25rem;background-color:var(--color-primary, #4275F2);animation:loading 1s linear infinite;-moz-animation:loading 1s linear infinite;-webkit-animation:loading 1s linear infinite;border-radius:0.5rem}x-progress.progress-bar-primary>span,x-progress.progress-bar-primary>x-tooltip>span{background-color:var(--color-primary, #4275F2)}x-progress.progress-bar-accent>span,x-progress.progress-bar-accent>x-tooltip>span{background-color:var(--color-accent, #F22710)}x-progress.progress-bar-danger>span,x-progress.progress-bar-danger>x-tooltip>span{background-color:var(--color-danger, #DC3545)}x-progress.progress-bar-warning>span,x-progress.progress-bar-warning>x-tooltip>span{background-color:var(--color-warning, #E3A32F)}x-progress.progress-bar-success>span,x-progress.progress-bar-success>x-tooltip>span{background-color:var(--color-success, #00AE69)}x-progress.progress-bar-info>span,x-progress.progress-bar-info>x-tooltip>span{background-color:var(--color-info, #2FAAC8)}x-progress.progress-bar-link>span,x-progress.progress-bar-link>x-tooltip>span{background-color:var(--color-link, #4275F2)}x-progress.progress-bar-blue>span,x-progress.progress-bar-blue>x-tooltip>span{background-color:var(--color-blue, #2D5FB5)}x-progress.progress-bar-indigo>span,x-progress.progress-bar-indigo>x-tooltip>span{background-color:var(--color-indigo, #5463B3)}x-progress.progress-bar-purple>span,x-progress.progress-bar-purple>x-tooltip>span{background-color:var(--color-purple, #7D55C7)}x-progress.progress-bar-pink>span,x-progress.progress-bar-pink>x-tooltip>span{background-color:var(--color-pink, #F66D9B)}x-progress.progress-bar-red>span,x-progress.progress-bar-red>x-tooltip>span{background-color:var(--color-red, #C73C36)}x-progress.progress-bar-orange>span,x-progress.progress-bar-orange>x-tooltip>span{background-color:var(--color-orange, #D97C35)}x-progress.progress-bar-yellow>span,x-progress.progress-bar-yellow>x-tooltip>span{background-color:var(--color-yellow, #D4AE32)}x-progress.progress-bar-green>span,x-progress.progress-bar-green>x-tooltip>span{background-color:var(--color-green, #38C172)}x-progress.progress-bar-teal>span,x-progress.progress-bar-teal>x-tooltip>span{background-color:var(--color-teal, #4DC0B5)}x-progress.progress-bar-cyan>span,x-progress.progress-bar-cyan>x-tooltip>span{background-color:var(--color-cyan, #6CB2EB)}x-progress.progress-bar-brown>span,x-progress.progress-bar-brown>x-tooltip>span{background-color:var(--color-brown, #574535)}x-progress.progress-bar-stone>span,x-progress.progress-bar-stone>x-tooltip>span{background-color:var(--color-stone, #38485A)}";
const XProgressStyle0 = styleCss;

const XProgress = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.value = 0;
        this.factor = 100;
        this.color = 'default';
        this.loading = false;
    }
    /**
     * Render component
     */
    render() {
        const percent = (this.value / this.factor) * 100;
        return h(Host, { key: '85ed004f9368c68289da0138f7b505cb8bef4a7e', class: cls(`progress-bar-${this.color}`, { 'progress-bar-loading': this.loading }) }, this.loading ?
            h("span", null) :
            h("x-tooltip", { content: `${percent}%` }, h("span", { style: { width: `${percent}%` } })));
    }
};
XProgress.style = XProgressStyle0;

export { XProgress as x_progress };
