import{__decorate as e}from"tslib";import{html as t}from"lit";import{query as s,property as i,customElement as r}from"lit/decorators.js";import{s as l}from"./nile-circular-progressbar.css.esm.js";import{N as c}from"../internal/nile-element.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let a=class extends c{constructor(){super(...arguments),this.value=0,this.isInvalidValue=!1,this.size=40}static get styles(){return[l]}get circleSize(){return{radius:this.size/2-4,viewBox:this.size,fontSize:.25*this.size+"px"}}connectedCallback(){super.connectedCallback(),this.updateComplete.then((()=>{this.value=Math.max(0,Math.min(100,this.value)),this.setProgress(this.value)}))}setProgress(e){if(this.progressCircle){const t=2*this.progressCircle.r.baseVal.value*Math.PI;this.progressCircle.style.transition="stroke-dashoffset 0.8s ease-in-out",this.progressCircle.style.strokeDasharray=`${t}`,this.progressCircle.style.strokeDashoffset=""+(t-e/100*t)}}validateValue(){isNaN(this.value)||this.value<0||this.value>100?(console.error(`[NileCircularProgressBar]: Invalid value (${this.value}) detected. Value must be between 0 to 100.`),this.value=0,this.isInvalidValue=!0):this.isInvalidValue=!1}updated(e){e.has("value")&&(this.validateValue(),this.setProgress(this.value),100===this.value&&this.emit("nile-complete",{message:"Nile Circular Progress reached 100%"}))}render(){const{radius:e,viewBox:s,fontSize:i}=this.circleSize,r=this.isInvalidValue?" ":this.content??`${Math.round(this.value)}%`;return t`
      <svg width="${s}" height="${s}" viewBox="0 0 ${s} ${s}">
        <circle r="${e}" cx="${s/2}" cy="${s/2}" class="track"></circle>
        <circle r="${e}" cx="${s/2}" cy="${s/2}" class="progress"></circle>
        
        <text
          x="50%"
          y="53%"
          text-anchor="middle"
          alignment-baseline="middle"
          class="circle__text"
          style="font-size: ${i};"
        >
          ${r}
        </text>
      </svg>
    `}};e([s(".progress")],a.prototype,"progressCircle",void 0),e([i({type:Number,reflect:!0})],a.prototype,"value",void 0),e([i({type:String,reflect:!0})],a.prototype,"content",void 0),e([i({type:Number,reflect:!0})],a.prototype,"size",void 0),a=e([r("nile-circular-progressbar")],a);export{a as N};
