@limetech/lime-elements/dist/cjs/limel-linear-progress.cjs.entry.js

Lime Elements

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-174a078a.js');
const translations = require('./translations-d2be6dd7.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);
    this.language = 'en';
    this.value = 0;
    this.indeterminate = false;
    this.accessibleLabel = undefined;
  }
  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"]
  }; }
};
LinearProgress.style = linearProgressCss;

exports.limel_linear_progress = LinearProgress;

//# sourceMappingURL=limel-linear-progress.cjs.entry.js.map