import { r as registerInstance, h, H as Host, g as getElement } from './index-BdVwMG9u.js';
import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
import { B as BEM } from './bem-ByiN-QjD.js';
import { m as raf } from './helpers-BNj87EbG.js';
import { b as balBreakpoints } from './breakpoints.subject-UT4MEAUI.js';
import { L as ListenToBreakpoints } from './breakpoints.decorator-C0r82kHO.js';
import { L as ListenToWindowResize } from './window-resize.decorator-C1qT4Mte.js';
import './browser-B1u-Mq75.js';
import './config.utils-B7jugjyM.js';
import './device-TtMibDFL.js';
import './listener-CClDIhvK.js';
import './tokens.esm-BpQhhcNz.js';

const balProgressBarCss = ":root{--bal-progress-bar-background-white:var(--bal-color-white);--bal-progress-bar-background-grey:var(--bal-color-grey-3);--bal-progress-bar-background-purple:var(--bal-color-purple-2);--bal-progress-bar-background-yellow:var(--bal-color-yellow-2);--bal-progress-bar-background-red:var(--bal-color-red-2);--bal-progress-bar-background-green:var(--bal-color-green-2);--bal-progress-bar-line-color-primary:var(--bal-color-primary);--bal-progress-bar-line-color-purple:var(--bal-color-purple-6);--bal-progress-bar-line-color-yellow:var(--bal-color-yellow-6);--bal-progress-bar-line-color-red:var(--bal-color-red-6);--bal-progress-bar-line-color-green:var(--bal-color-green-6);--bal-progress-bar-line-radius:var(--bal-radius-rounded)}.bal-progress-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;min-width:0;height:.25rem}.bal-progress-bar--background-white-of-primary,.bal-progress-bar--background-white-of-purple,.bal-progress-bar--background-white-of-red,.bal-progress-bar--background-white-of-green,.bal-progress-bar--background-white-of-yellow{background:var(--bal-progress-bar-background-white)}.bal-progress-bar--background-grey-of-primary{background:var(--bal-progress-bar-background-grey)}.bal-progress-bar--background-grey-of-purple{background:var(--bal-progress-bar-background-purple)}.bal-progress-bar--background-grey-of-red{background:var(--bal-progress-bar-background-red)}.bal-progress-bar--background-grey-of-green{background:var(--bal-progress-bar-background-green)}.bal-progress-bar--background-grey-of-yellow{background:var(--bal-progress-bar-background-yellow)}.bal-progress-bar__line{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;height:.25rem;width:0;background:var(--bal-progress-bar-line-color-primary);border-top-right-radius:var(--bal-progress-bar-line-radius);border-bottom-right-radius:var(--bal-progress-bar-line-radius)}.bal-progress-bar__line--animated{will-change:width;-webkit-transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-progress-bar__line--full{border-top-right-radius:0;border-bottom-right-radius:0}.bal-progress-bar__line--color-purple{background:var(--bal-progress-bar-line-color-purple)}.bal-progress-bar__line--color-yellow{background:var(--bal-progress-bar-line-color-yellow)}.bal-progress-bar__line--color-red{background:var(--bal-progress-bar-line-color-red)}.bal-progress-bar__line--color-green{background:var(--bal-progress-bar-line-color-green)}";

const ProgressBar = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.animated = true;
        this.isTouch = balBreakpoints.isTouch; // need this part to improve a none side effect import
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * The value of the bar in percentage. So min is 0 and 100 would be the max value.
         */
        this.value = 0;
        /**
         * The background color
         */
        this.background = 'white';
        /**
         * The progress bar color
         */
        this.color = 'primary';
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    componentDidRender() {
        this.updateProgress();
    }
    /**
     * LISTENERS
     * ------------------------------------------------------
     */
    breakpointListener(_breakpoints) {
        this.updateProgress();
    }
    windowResizeListener() {
        this.updateProgress();
    }
    async configChanged(state) {
        this.animated = state.animated;
    }
    /**
     * PRIVATE METHODS
     * ------------------------------------------------------
     */
    updateProgress() {
        if (this.lineEl) {
            raf(() => {
                const maxWidth = this.el.clientWidth;
                const value = Math.max(0, Math.min(100, this.value));
                const lineWidth = (maxWidth / 100) * value;
                this.lineEl.style.width = `${lineWidth}px`;
                if (value === 100) {
                    this.lineEl.classList.add('bal-progress-bar__line--full');
                }
                else {
                    this.lineEl.classList.remove('bal-progress-bar__line--full');
                }
            });
        }
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = BEM.block('progress-bar');
        const bemLineEl = block.element('line');
        return (h(Host, { key: '4452ea701b96a45d8c29a644c76cbb1849284ca1', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, h("div", { key: 'c58656c6f9db6b8154681a70182e101007480a34', class: Object.assign(Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`color-${this.color}`).class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
    }
    get el() { return getElement(this); }
};
__decorate([
    ListenToBreakpoints(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], ProgressBar.prototype, "breakpointListener", null);
__decorate([
    ListenToWindowResize(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], ProgressBar.prototype, "windowResizeListener", null);
ProgressBar.style = balProgressBarCss;

export { ProgressBar as bal_progress_bar };
