import { LitElement, css, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; @customElement('arx-progress-steps') export class ProgressSteps extends LitElement { @property({ type: Number }) currentPage = 1; @property({ type: Array }) pageLabels: string[] = []; static override styles = css` :host { display: block; width: 100%; margin-bottom: calc(var(--spacing-unit) * 8); } .progress-container { display: flex; flex-direction: column; gap: calc(var(--spacing-unit) * 2); } .progress-bar { width: 100%; height: 4px; background: var(--color-base-200); border-radius: 2px; overflow: hidden; } .progress-fill { height: 100%; background: var(--color-accent); transition: width 0.3s ease; } .page-indicators { display: flex; justify-content: space-between; padding: 0 calc(var(--spacing-unit) * 2); } .page-indicator { display: flex; flex-direction: column; align-items: center; gap: calc(var(--spacing-unit) * 1); } .page-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-base-300); transition: all 0.3s ease; } .page-dot.active { background: var(--color-accent); transform: scale(1.2); } .page-dot.completed { background: var(--color-accent); } .page-label { font-size: 0.875rem; color: var(--color-secondary); transition: color 0.3s ease; } .page-label.active { color: var(--color-accent); font-weight: 500; } .page-label.completed { color: var(--color-accent); } `; override render() { const progress = ((this.currentPage - 1) / (this.pageLabels.length - 1)) * 100; return html` <div class="progress-container"> <div class="progress-bar"> <div class="progress-fill" style="width: ${progress}%" ></div> </div> <div class="page-indicators"> ${this.pageLabels.map((label, index) => { const pageNum = index + 1; const isActive = pageNum === this.currentPage; const isCompleted = pageNum < this.currentPage; return html` <div class="page-indicator"> <div class="page-dot ${isActive ? 'active' : ''} ${isCompleted ? 'completed' : ''}" ></div> <span class="page-label ${isActive ? 'active' : ''} ${isCompleted ? 'completed' : ''}" >${label}</span> </div> `; })} </div> </div> `; } }