@synergy-design-system/components/dist/chunks/chunk.GQ77BF6G.js

This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define

import {
  progress_ring_custom_styles_default
} from "./chunk.2V3HGTTL.js";
import {
  progress_ring_styles_default
} from "./chunk.RMIDAEF5.js";
import {
  LocalizeController
} from "./chunk.OAQRCZOO.js";
import {
  component_styles_default
} from "./chunk.NLYVOJGK.js";
import {
  SynergyElement
} from "./chunk.3AZFEB6D.js";
import {
  __decorateClass
} from "./chunk.Z4XV3SMG.js";

// src/components/progress-ring/progress-ring.component.ts
import { html } from "lit";
import { property, query, state } from "lit/decorators.js";
var SynProgressRing = class extends SynergyElement {
  constructor() {
    super(...arguments);
    this.localize = new LocalizeController(this);
    this.value = 0;
    this.label = "";
  }
  updated(changedProps) {
    super.updated(changedProps);
    if (changedProps.has("value")) {
      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue("r"));
      const circumference = 2 * Math.PI * radius;
      const offset = circumference - this.value / 100 * circumference;
      this.indicatorOffset = `${offset}px`;
    }
  }
  render() {
    return html`
      <div
        part="base"
        class="progress-ring"
        role="progressbar"
        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
        aria-describedby="label"
        aria-valuemin="0"
        aria-valuemax="100"
        aria-valuenow="${this.value}"
        style="--percentage: ${this.value / 100}"
      >
        <svg class="progress-ring__image">
          <circle class="progress-ring__track"></circle>
          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
        </svg>

        <slot id="label" part="label" class="progress-ring__label"></slot>
      </div>
    `;
  }
};
SynProgressRing.styles = [component_styles_default, progress_ring_styles_default, progress_ring_custom_styles_default];
__decorateClass([
  query(".progress-ring__indicator")
], SynProgressRing.prototype, "indicator", 2);
__decorateClass([
  state()
], SynProgressRing.prototype, "indicatorOffset", 2);
__decorateClass([
  property({ type: Number, reflect: true })
], SynProgressRing.prototype, "value", 2);
__decorateClass([
  property()
], SynProgressRing.prototype, "label", 2);

export {
  SynProgressRing
};
//# sourceMappingURL=chunk.GQ77BF6G.js.map