'use strict';

var index = require('./index-feA4skrY.js');
var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
var bem = require('./bem-p0PWVN8n.js');
var helpers = require('./helpers-HuaiWXrB.js');
var breakpoints_subject = require('./breakpoints.subject-CXJYXMpo.js');
var breakpoints_decorator = require('./breakpoints.decorator-C7C_2t01.js');
var windowResize_decorator = require('./window-resize.decorator-CFAzpxMB.js');
require('./browser-BwmkTmm8.js');
require('./config.utils-Civnz2jT.js');
require('./device-CoogBamh.js');
require('./listener-DspXpqzY.js');
require('./tokens.esm-wVc8fBNC.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) {
        index.registerInstance(this, hostRef);
        this.animated = true;
        this.isTouch = breakpoints_subject.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) {
            helpers.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.BEM.block('progress-bar');
        const bemLineEl = block.element('line');
        return (index.h(index.Host, { key: '3560c076e654839526d357edec7f7d605793d9b0', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, index.h("div", { key: 'd89c4e6cf2d0c12abd70696606c47f03de988889', 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 index.getElement(this); }
};
tslib_es6.__decorate([
    breakpoints_decorator.ListenToBreakpoints(),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Object]),
    tslib_es6.__metadata("design:returntype", void 0)
], ProgressBar.prototype, "breakpointListener", null);
tslib_es6.__decorate([
    windowResize_decorator.ListenToWindowResize(),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", []),
    tslib_es6.__metadata("design:returntype", void 0)
], ProgressBar.prototype, "windowResizeListener", null);
ProgressBar.style = balProgressBarCss;

exports.bal_progress_bar = ProgressBar;
