import { p as proxyCustomElement, H, h } from './index.js';
import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';

const progressBarCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex;width:100%}.progress-bar{height:16px;bottom:0;right:0;top:0;left:0;display:flex;height:20px;border-radius:1px;width:100%;overflow:hidden;background-color:#EEEDED;font-family:var(--ifx-font-family)}.progress-bar.s{height:4px}.progress-bar .label{font-style:normal;font-size:0.875rem;font-weight:400;line-height:1.25rem;color:#FFFFFF}.progress-bar .progress{display:flex;align-items:center;justify-content:center;min-width:fit-content;height:100%;background-color:#0A8276;transition:width 0.2s ease}";

const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.value = 0;
        this.showLabel = false;
    }
    valueChanged(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.internalValue = newValue;
        }
    }
    componentWillLoad() {
        this.internalValue = this.value;
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent('ifx-progress-bar', await framework);
        }
    }
    render() {
        return (h("div", { key: 'a99e043a0360b85e054a7393e37482d38f4a3217', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '6cb2c2b0f8b70baae03cac6d7bdaf6ad3ebeb96d', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '86edd2ed1aaebe86e7dae432492edce7ae997ef6', class: "label" }, `${this.internalValue}%`))));
    }
    get el() { return this; }
    static get watchers() { return {
        "value": ["valueChanged"]
    }; }
    static get style() { return progressBarCss; }
}, [257, "ifx-progress-bar", {
        "value": [2],
        "size": [1],
        "showLabel": [4, "show-label"],
        "internalValue": [32]
    }, undefined, {
        "value": ["valueChanged"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ifx-progress-bar"];
    components.forEach(tagName => { switch (tagName) {
        case "ifx-progress-bar":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ProgressBar);
            }
            break;
    } });
}

export { ProgressBar as P, defineCustomElement as d };
//# sourceMappingURL=p-CDq1_QJF.js.map

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