import{progress_ring_styles_default as r}from"./chunk.NG5GLA5L.js";import{LocalizeController as e}from"./chunk.2A3352EO.js";import{ShoelaceElement as s}from"./chunk.Z7XDKKOD.js";import{__decorateClass as t}from"./chunk.6M63UXML.js";import{html as a}from"../../../../lit/index.js";import{property as i,query as l,state as o}from"../../../../lit/decorators.js";var c=class extends s{constructor(){super(...arguments),this.localize=new e(this),this.value=0,this.label=""}updated(r){if(super.updated(r),r.has("value")){const r=parseFloat(getComputedStyle(this.indicator).getPropertyValue("r")),e=2*Math.PI*r,s=e-this.value/100*e;this.indicatorOffset=`${s}px`}}render(){return a`
      <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>
    `}};c.styles=r,t([l(".progress-ring__indicator")],c.prototype,"indicator",2),t([o()],c.prototype,"indicatorOffset",2),t([i({type:Number,reflect:!0})],c.prototype,"value",2),t([i()],c.prototype,"label",2);export{c as SlProgressRing};