import { n as l, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as d } from "../chunks/component.styles.CRO4Odto.js";
import { c as g } from "../chunks/custom-element.L4WJXn1j.js";
import { L as u } from "../chunks/i18n.BABe9hN4.js";
import { i as f, x as v } from "../chunks/lit-element.jLBm65_O.js";
import { r as m } from "../chunks/state.CSDxrqLd.js";
import { e as h } from "../chunks/query.BBf1UFkC.js";
const _ = f`:host{--size:128px;--track-width:4px;--track-color:var(--cx-color-neutral-200);--indicator-width:var(--track-width);--indicator-color:var(--cx-color-primary);--indicator-transition-duration:.35s;display:inline-flex}.progress-ring{justify-content:center;align-items:center;display:inline-flex;position:relative}.progress-ring__image{width:var(--size);height:var(--size);transform-origin:50%;rotate:-90deg}.progress-ring__track,.progress-ring__indicator{--radius:calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * .5);--circumference:calc(var(--radius) * 2 * 3.14159);fill:none;r:var(--radius);cx:calc(var(--size) / 2);cy:calc(var(--size) / 2)}.progress-ring__track{stroke:var(--track-color);stroke-width:var(--track-width)}.progress-ring__indicator{stroke:var(--indicator-color);stroke-width:var(--indicator-width);stroke-linecap:round;transition-property:stroke-dashoffset;transition-duration:var(--indicator-transition-duration);stroke-dasharray:var(--circumference) var(--circumference);stroke-dashoffset:calc(var(--circumference) - var(--percentage) * var(--circumference))}.progress-ring__label{text-align:center;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}`;
var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (s, t, i, a) => {
  for (var r = a > 1 ? void 0 : a ? b(t, i) : t, c = s.length - 1, n; c >= 0; c--)
    (n = s[c]) && (r = (a ? n(t, i, r) : n(r)) || r);
  return a && r && y(t, i, r), r;
};
let e = class extends p {
  constructor() {
    super(...arguments), this.localize = new u(this), this.value = 0, this.label = "";
  }
  updated(s) {
    if (super.updated(s), s.has("value")) {
      const t = parseFloat(
        getComputedStyle(this.indicator).getPropertyValue("r")
      ), i = 2 * Math.PI * t, a = i - this.value / 100 * i;
      this.indicatorOffset = `${a}px`;
    }
  }
  render() {
    return v`<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>`;
  }
};
e.styles = [d, _];
o([
  h(".progress-ring__indicator")
], e.prototype, "indicator", 2);
o([
  m()
], e.prototype, "indicatorOffset", 2);
o([
  l({ reflect: !0, type: Number })
], e.prototype, "value", 2);
o([
  l()
], e.prototype, "label", 2);
e = o([
  g("cx-progress-ring")
], e);
export {
  e as default
};
