pyro/dist/progressbar.js

Pyro custom elements

import { i as n, r as c, x as u, t as g } from "./custom-element-CWJsDAat.js";
import { n as p } from "./property-Bf-I6Ep_.js";
import { o as v } from "./if-defined-D-M-EmTt.js";
var y = Object.defineProperty, d = Object.getOwnPropertyDescriptor, e = (s, a, i, t) => {
  for (var r = t > 1 ? void 0 : t ? d(a, i) : a, b = s.length - 1, l; b >= 0; b--)
    (l = s[b]) && (r = (t ? l(a, i, r) : l(r)) || r);
  return t && r && y(a, i, r), r;
};
let o = class extends c {
  constructor() {
    super(...arguments), this.value = 0, this.max = 100, this.isComplete = this.value === this.max;
  }
  render() {
    const s = Math.floor(100 * this.value / this.max);
    return u`
      <progress
        .value=${this.value}
        max="${this.max}"
        aria-busy=${this.isComplete}
        aria-label=${v(this["aria-label"])}
        tabindex="-1"
      >
        ${s} %
      </progress>
      <span><slot name="text">${this.text}</slot></span>
    `;
  }
};
o.styles = n`
    :host {
      display: block;
      box-sizing: border-box;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    progress {
      appearance: none;
      box-sizing: border-box;
      width: 100%;
      border: var(--pyro-progressbar-border, var(--pyro-border));
      border-radius: var(--pyro-progressbar-border-radius, var(--pyro-border-radius));
      background: var(--pyro-progressbar-background, var(--pyro-surface-color));
      height: var(--pyro-progressbar-height, 1em);
      overflow: hidden;
    }
    progress:focus-visible {
      outline-color: var(--_progress);
      outline-offset: 5px;
    }
    progress::-webkit-progress-bar {
      background: var(--pyro-progressbar-background, var(--pyro-surface-color));
      border-radius: var(--pyro-progressbar-border-radius, var(--pyro-border-radius));
    }
    progress::-webkit-progress-value {
      background: var(--pyro-progressbar-accent-color, var(--pyro-accent-color));
    }
    progress::-moz-progress-bar {
      background: var(--pyro-progressbar-accent-color, var(--pyro-accent-color));
    }

    span {
      color: var(--pyro-progressbar-text-color, var(--pyro-text-color-on-surface));
      position: absolute;
      font-size: 0.8em;
      line-height: 1;
    }
  `;
e([
  p({ type: Number, reflect: !0 })
], o.prototype, "value", 2);
e([
  p({ type: Number, reflect: !0 })
], o.prototype, "max", 2);
e([
  p()
], o.prototype, "text", 2);
e([
  p()
], o.prototype, "aria-label", 2);
o = e([
  g("pyro-progressbar")
], o);
export {
  o as PyroProgressbar
};