import { __decorate } from "tslib";
import { html } from 'lit';
import styles from './nile-progress-bar.css';
import { customElement, property } from 'lit/decorators.js';
import NileElement from '../internal/nile-element';
let NileProgressBar = class NileProgressBar extends NileElement {
    constructor() {
        super(...arguments);
        this.value = 0;
    }
    updated(changedProperties) {
        if (changedProperties.has('value')) {
            if (this.value < 0 || this.value > 100) {
                console.error(`[NileProgressBar]: Invalid value (${this.value}) detected. Value must be between 0 and 100.`);
                this.value = 0;
            }
            if (this.value === 100) {
                this.emit('nile-complete', { message: 'Nile Progress reached 100%' });
            }
        }
    }
    render() {
        return html `
      <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>
    `;
    }
};
NileProgressBar.styles = styles;
__decorate([
    property({ type: Number, reflect: true, attribute: true })
], NileProgressBar.prototype, "value", void 0);
NileProgressBar = __decorate([
    customElement('nile-progress-bar')
], NileProgressBar);
export { NileProgressBar };
//# sourceMappingURL=nile-progress-bar.js.map