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

Lime Elements

import { r as registerInstance, h, H as Host, g as getElement } from './index-2714248e.js';
import { t as translate } from './translations-91c611da.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) {
    registerInstance(this, hostRef);
    this.language = 'en';
    this.value = 0;
    this.indeterminate = false;
    this.accessibleLabel = undefined;
  }
  render() {
    if (!this.isFinite(this.value)) {
      return;
    }
    const loadingText = translate.get('loading', this.language);
    const ariaLabel = translate.get('progress-bar', this.language);
    const ariaValueNow = this.indeterminate ? undefined : this.value;
    const ariaValueText = this.indeterminate ? loadingText : undefined;
    return (h(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}%` } }, 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 getElement(this); }
  static get watchers() { return {
    "value": ["watchValue"]
  }; }
};
LinearProgress.style = linearProgressCss;

export { LinearProgress as limel_linear_progress };

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