'use strict';

var index = require('./index-BjHIBY-I.js');
var translations = require('./translations-Bu_0fli7.js');

const linearProgressCss = () => `:host(limel-linear-progress){isolation:isolate;position:relative;overflow:hidden;display:flex;width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--background-color, rgb(var(--contrast-800), 0.5))}.progress{height:100%;width:var(--percentage, 0%);border-radius:0.25rem;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-linear-progress[indeterminate]) .progress{background-color:transparent;width:100%}:host(limel-linear-progress[indeterminate]) .progress:before,:host(limel-linear-progress[indeterminate]) .progress:after{will-change:left, right, opacity;content:"";position:absolute;inset:0;height:100%;border-radius:0.25rem;opacity:0;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-linear-progress[indeterminate]) .progress:before{animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}:host(limel-linear-progress[indeterminate]) .progress:after{animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite 1.15s}@keyframes indeterminate{0%{left:-35%;right:100%;opacity:0}10%,80%{opacity:1}60%{left:100%;right:-90%}100%{left:100%;right:-90%;opacity:0}}@keyframes indeterminate-short{0%{left:-200%;right:100%;opacity:0}10%,80%{opacity:1}60%{left:107%;right:-8%}100%{left:107%;right:-8%;opacity:0}}`;

const PERCENT = 100;
const LinearProgress = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * Defines the language for translations.
         * Will translate the translatable strings on the components.
         */
        this.language = 'en';
        /**
         * The value of the progress bar. Should be between `0` and `1`.
         */
        this.value = 0;
        /**
         * Puts the progress bar in an indeterminate state
         */
        this.indeterminate = false;
    }
    render() {
        if (!this.isFinite(this.value)) {
            return;
        }
        const loadingText = translations.translate.get('loading', this.language);
        const ariaLabel = translations.translate.get('progress-bar', this.language);
        const ariaValueNow = this.indeterminate ? undefined : this.value;
        const ariaValueText = this.indeterminate ? loadingText : undefined;
        return (index.h(index.Host, { role: "progressbar", "aria-label": this.accessibleLabel || ariaLabel, "aria-live": "polite", "aria-valuemin": "0", "aria-valuemax": "1", "aria-valuenow": ariaValueNow, "aria-valuetext": ariaValueText, style: { '--percentage': `${this.value * PERCENT}%` } }, index.h("div", { class: "progress" })));
    }
    watchValue(newValue) {
        if (!this.isFinite(newValue)) {
            return;
        }
        this.updateProgress(newValue);
    }
    updateProgress(value) {
        if (this.host) {
            this.host.style.setProperty('--percentage', `${value * PERCENT}%`);
        }
    }
    isFinite(value) {
        return Number.isFinite(value);
    }
    get host() { return index.getElement(this); }
    static get watchers() { return {
        "value": [{
                "watchValue": 0
            }]
    }; }
};
LinearProgress.style = linearProgressCss();

exports.limel_linear_progress = LinearProgress;
