@wolf-scope/gamifykit/src/components/progress-bar/progress-bar.lit.ts

UI library for web applications using Lit

import { property } from 'lit/decorators.js'
import { LitElement, html, unsafeCSS } from 'lit'
import styles from './progress-bar.lit.scss?inline'

export const tagName = 'gamifykit-progress-bar'

export class GamifyKitProgressBar extends LitElement {
  @property({ type: Number }) current = 0;
  @property({ type: Number }) max = 100;
  @property({ type: String }) size: 'small' | 'medium' | 'large' = 'medium';
  @property({ type: Boolean }) indeterminate = false;
  @property({ type: Boolean }) showLabel = false;

  static styles = unsafeCSS(styles)

  render() {
    const percentage = this.max > 0 ? Math.min((this.current / this.max) * 100, 100) : 0;
    const label = `${Math.round(percentage)}%`;

    return html`
      <div
        class="progress-bar ${this.size} ${this.indeterminate ? 'indeterminate' : ''}"
        role="progressbar"
        aria-valuemin="0"
        aria-valuemax="${this.max}"
        aria-valuenow="${this.indeterminate ? null : this.current}"
        aria-label="${label}"
      >
        <div class="progress" style="width: ${this.indeterminate ? '100%' : `${percentage}%`};"></div>
        ${this.showLabel && !this.indeterminate ? html`<span class="progress-label">${label}</span>` : ''}
      </div>`
  }
}

declare global {
  interface HTMLElementTagNameMap {
    [tagName]: GamifyKitProgressBar
  }
}