import { p as proxyCustomElement, H, h, d as Host } from './p-AiOs8RvA.js';

const verdocsProgressBarCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-progress-bar{font-family:\"Inter\", \"Barlow\", sans-serif;width:100%;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-progress-bar .labels{display:-ms-flexbox;display:flex;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-progress-bar .labels .label{display:-ms-flexbox;display:flex;font-size:14px;font-weight:600;margin-right:8px;color:#33364b}verdocs-progress-bar .bar{display:-ms-flexbox;display:flex;-ms-flex:0 0 10px;flex:0 0 10px;border-radius:5px;background-color:#cccccc}verdocs-progress-bar .bar .slider{display:-ms-flexbox;display:flex;border-radius:5px;background-color:#55bc81}";

const VerdocsProgressBar = /*@__PURE__*/ proxyCustomElement(class VerdocsProgressBar extends H {
    constructor() {
        super();
        this.__registerHost();
        /**
         * Optional label to display above the bar
         */
        this.label = '';
        /**
         * If true, the progress percentage will be displayed above the bar.
         */
        this.showPercent = false;
        /**
         * The current progress value (0-100)
         */
        this.percent = 0;
    }
    render() {
        const widthPercent = Math.ceil((100 * Math.min(this.percent, 100)) / 100);
        console.log('Rendering progress bar', { widthPercent, label: this.label, showPercent: this.showPercent, percent: this.percent });
        return (h(Host, { key: '4fb4646e5feebaf8265fc8042af66d3dcf2426b6' }, h("div", { key: 'd2febb9e8a3b1e89d067324b40aa674287d0fef0', class: "labels" }, this.label && h("div", { key: 'e32eacce952b2ba7bd10819a535b6438c6ba52b4', class: "label" }, this.label), this.showPercent && h("div", { key: '485503902199bcb6752997bef3afcf333c5ce6aa', class: "label" }, this.percent, "%")), h("div", { key: 'ebdfa5c9362f136d7f3690ffeadae2be46a47bc1', class: "bar" }, h("div", { key: 'a72e9c81d14d8e7cc6c37cfcd6a9cb6a27d50a2e', class: "slider", style: { width: `${widthPercent}%` } }))));
    }
    static get style() { return verdocsProgressBarCss; }
}, [0, "verdocs-progress-bar", {
        "label": [1],
        "showPercent": [4, "show-percent"],
        "percent": [2]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-progress-bar"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-progress-bar":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsProgressBar);
            }
            break;
    } });
}

export { VerdocsProgressBar as V, defineCustomElement as d };
//# sourceMappingURL=p-B5a_3bon.js.map

//# sourceMappingURL=p-B5a_3bon.js.map