@universal-material/web/progress/progress-bar.js

Material web components

import { __decorate } from "tslib";
import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './progress-bar.styles.js';
let UmProgressBar = class UmProgressBar extends LitElement {
    constructor() {
        super(...arguments);
        this.max = 1;
    }
    static { this.styles = [styles]; }
    render() {
        return this.value === undefined
            ? this.#renderIndeterminate()
            : this.#renderDeterminate();
    }
    #renderIndeterminate() {
        return html `
      <div class="indeterminate">
        <div class="bar track first"></div>
        <div class="bar active fast"></div>
        <div class="bar track middle"></div>
        <div class="bar active slow"></div>
        <div class="bar track last"></div>
      </div>
    `;
    }
    #renderDeterminate() {
        const proportion = this.value / this.max;
        const percentage = Math.floor(proportion * 1000) / 10;
        const trackPercentage = 100 - percentage;
        return html `
      <div class="determinate">
        <div class="bar active" style="flex-basis: ${percentage}%"></div>
        <div class="bar track" style="flex-basis: ${trackPercentage}%"></div>
      </div>
    `;
    }
};
__decorate([
    property({ type: Number })
], UmProgressBar.prototype, "value", void 0);
__decorate([
    property({ type: Number })
], UmProgressBar.prototype, "max", void 0);
UmProgressBar = __decorate([
    customElement('u-progress-bar')
], UmProgressBar);
export { UmProgressBar };
//# sourceMappingURL=progress-bar.js.map