import{__decorate as e}from"tslib";import{html as s}from"lit";import{s as r}from"./nile-progress-bar.css.esm.js";import{property as t,customElement as i}from"lit/decorators.js";import{N as a}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 l=class extends a{constructor(){super(...arguments),this.value=0}updated(e){e.has("value")&&((this.value<0||this.value>100)&&(console.error(`[NileProgressBar]: Invalid value (${this.value}) detected. Value must be between 0 and 100.`),this.value=0),100===this.value&&this.emit("nile-complete",{message:"Nile Progress reached 100%"}))}render(){return s`
      <div part="container" class="nile-progress-bar__container">
        <ul part="progress-bar" class="nile-progress-bar__progress-bar">
          <li part="remaining"><span part="progress" style="width: ${this.value}%"></span></li>
        </ul>
      </div>
    `}};l.styles=r,e([t({type:Number,reflect:!0,attribute:!0})],l.prototype,"value",void 0),l=e([i("nile-progress-bar")],l);export{l as N};
