components/cart-steps.js

class CustomCartSteps extends HTMLElement {
  connectedCallback() {
    const activeStep = this.getAttribute('active-step') || '1';
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .step {
          position: relative;
          flex: 1;
          text-align: center;
        }
        .step:not(:last-child):after {
          content: '';
          position: absolute;
          top: 16px;
          left: 50%;
          width: 100%;
          height: 2px;
          background-color: #e5e7eb;
          z-index: 0;
        }
        .step.active:not(:last-child):after {
          background-color: #4f46e5;
        }
        .step-number {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background-color: #e5e7eb;
          color: #6b7280;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 8px;
          position: relative;
          z-index: 1;
        }
        .step.active .step-number {
          background-color: #4f46e5;
          color: white;
        }
        .step.completed .step-number {
          background-color: #4f46e5;
          color: white;
        }
        .step.completed .step-number:after {
          content: '✓';
        }
        .step-label {
          font-size: 0.875rem;
          color: #9ca3af;
        }
        .step.active .step-label,
        .step.completed .step-label {
          color: #4f46e5;
          font-weight: 500;
        }
      </style>
      <div class="flex mb-8">
        <div class="step ${activeStep === '1' ? 'active' : 'completed'}">
          <div class="step-number">1</div>
          <div class="step-label">Carrinho</div>
        </div>
        <div class="step ${activeStep === '2' ? 'active' : activeStep > '2' ? 'completed' : ''}">
          <div class="step-number">2</div>
          <div class="step-label">Pagamento</div>
        </div>
        <div class="step ${activeStep === '3' ? 'active' : activeStep > '3' ? 'completed' : ''}">
          <div class="step-number">3</div>
          <div class="step-label">Confirmação</div>
        </div>
      </div>
    `;
  }
}
customElements.define('custom-cart-steps', CustomCartSteps);