pyro/dist/progresscircle.js

Pyro custom elements

import { i as n, r as v, x as u, t as f } from "./custom-element-CWJsDAat.js";
import { n as t } from "./property-Bf-I6Ep_.js";
import { o as h } from "./if-defined-D-M-EmTt.js";
import { o as m } from "./style-map-Bdp7bDSk.js";
var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, s = (c, a, l, o) => {
  for (var r = o > 1 ? void 0 : o ? g(a, l) : a, i = c.length - 1, p; i >= 0; i--)
    (p = c[i]) && (r = (o ? p(a, l, r) : p(r)) || r);
  return o && r && y(a, l, r), r;
};
let e = class extends v {
  constructor() {
    super(...arguments), this.value = 0, this.max = 100;
  }
  render() {
    const a = { "--progress": `${Math.floor(100 * this.value / this.max)}` };
    return u`<span
        role="progressbar"
        aria-valuemin="0"
        aria-valuemax="${this.max}"
        aria-valuenow="${this.value}"
        aria-label=${h(this["aria-label"])}
      >
        <slot name="text">${this.text}</slot>
      </span>
      <svg style=${m(a)} viewBox="0 0 32 32">
        <circle class="background"></circle>
        <circle class="value"></circle>
      </svg>`;
  }
};
e.styles = n`
    :host {
      display: block;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    span {
      color: var(--pyro-progresscircle-text-color, var(--pyro-text-color-on-surface));
      position: absolute;
    }

    svg {
      --size: 32px;
      --stroke-width: 4px;
      --half-size: calc(var(--size) / 2);
      --radius: calc((var(--size) - var(--stroke-width)) / 2);
      --circumference: calc(var(--radius) * pi * 2);
      --dash: calc((var(--progress) * var(--circumference)) / 100);
    }
    circle {
      cx: var(--half-size);
      cy: var(--half-size);
      r: var(--radius);
      stroke-width: var(--stroke-width);
      fill: none;
      stroke-linecap: round;
    }
    circle.background {
      stroke: var(--pyro-progresscircle-background, var(--pyro-surface-color));
    }
    circle.value {
      transform: rotate(-90deg);
      transform-origin: var(--half-size) var(--half-size);
      stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
      stroke: var(--pyro-progresscircle-accent-color, var(--pyro-accent-color));
    }
  `;
s([
  t({ type: Number, reflect: !0 })
], e.prototype, "value", 2);
s([
  t({ type: Number, reflect: !0 })
], e.prototype, "max", 2);
s([
  t()
], e.prototype, "text", 2);
s([
  t()
], e.prototype, "aria-label", 2);
e = s([
  f("pyro-progresscircle")
], e);
export {
  e as PyroProgresscircle
};