@progressive-development/pd-wizard/dist/pd-wizard/pd-steps/PdSteps.js

Webcomponent pd-wizard following open-wc recommendations

import { LitElement, css, html } from 'lit';
import { property } from 'lit/decorators.js';

var __defProp = Object.defineProperty;
var __decorateClass = (decorators, target, key, kind) => {
  var result = void 0 ;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (decorator(target, key, result) ) || result;
  if (result) __defProp(target, key, result);
  return result;
};
class PdSteps extends LitElement {
  constructor() {
    super(...arguments);
    this.steps = [];
    this.currentStepNr = -99;
    this.styleTyp = "circle";
  }
  static {
    this.styles = [
      css`
      :host {
        --circle-size: var(--pd-step-circle-size, 40px);
        display: block;
        background-color: var(--pd-steps-bg-color, var(--pd-default-col));
        padding-top: var(--pd-step-padding-top, 0.5em);
        padding-bottom: calc(var(--pd-step-name-font-size, 1em) * 2.5);
      }

      .parent {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        position: relative;
      }

      .step-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        z-index: 51;
        width: 100%;
        position: relative;
      }

      .step.circle {
        width: var(--circle-size);
        height: var(--circle-size);
        border-radius: 50%;
        border: solid var(--pd-step-circle-border-size, 2px)
          var(--pd-step-circle-border-color, white);
        background-color: var(--pd-step-circle-bg-color, var(--pd-default-col));
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 51; /* Ensure the circle is above the hr line */
      }

      /* Dynamische Schriftgröße der Nummer */
      .step-nr {
        font-family: var(--pd-default-font-title-family);
        font-weight: bold;
        color: var(--pd-step-circle-nr-color, white);
        font-size: calc(var(--circle-size) / 1.8);
        position: absolute;
        pointer-events: none;
      }

      hr {
        background-color: var(--pd-step-hr-color, white);
        height: 2px;
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        z-index: 50;
        border-style: none;
        border-width: 0;
        margin: 0;
      }

      .step-name {
        font-family: var(--pd-default-font-title-family);
        color: var(--pd-step-name-color, white);
        font-size: var(--pd-step-name-font-size, 1em);
        font-weight: bold;
        position: absolute;
        top: calc(
          var(--circle-size) + (var(--pd-step-name-font-size, 1em) / 2)
        );
      }

      .current {
        color: var(--pd-step-color-current, var(--pd-default-hover-col));
      }

      .step.circle.current {
        border-color: var(--pd-step-color-current, var(--pd-default-hover-col));
      }

      .passed {
        color: var(--pd-step-color-passed, var(--pd-default-dark-col));
      }

      .step.circle.passed {
        border-color: var(
          --pd-step-color-passed,
          var(--pd-default-success-col)
        );
        background-color: var(--pd-default-success-light-col);
        cursor: pointer;
      }

      @media (max-width: 700px) {
        :host {
          --circle-size: 30px;
        }
        .step-name {
          font-size: 0.9em;
        }
      }
    `
    ];
  }
  render() {
    return this._renderCircle();
  }
  _renderCircle() {
    return html`
      <div class="parent ${this.styleTyp}">
        ${this.styleTyp === "circle" ? html`<hr />` : ""}
        ${this.steps.map((st, index) => {
      const stepNr = index + 1;
      const isCurrent = this.currentStepNr === stepNr;
      const isPassed = this.currentStepNr > stepNr;
      const classNames = [
        "step",
        this.styleTyp,
        isCurrent ? "current" : isPassed ? "passed" : ""
      ].join(" ");
      const nrClassNames = [
        "step-nr",
        isCurrent ? "current" : isPassed ? "passed" : ""
      ].join(" ");
      const nameClassNames = [
        "step-name",
        isCurrent ? "current" : isPassed ? "passed" : ""
      ].join(" ");
      return html`
            <div class="step-container">
              <div
                class="${classNames}"
                data-step="${stepNr}"
                @click=${this._stepClicked}
              >
                <span class="${nrClassNames}">${stepNr}</span>
              </div>
              <span class="${nameClassNames}">${st.name}</span>
            </div>
          `;
    })}
      </div>
    `;
  }
  _stepClicked(e) {
    const stepStr = e.currentTarget.dataset.step;
    const step = Number(stepStr);
    if (!isNaN(step) && step < this.currentStepNr) {
      this.dispatchEvent(
        new CustomEvent("go-to", {
          detail: { step },
          bubbles: true,
          composed: true
        })
      );
    }
  }
}
__decorateClass([
  property({ type: Array })
], PdSteps.prototype, "steps");
__decorateClass([
  property({ type: Number })
], PdSteps.prototype, "currentStepNr");
__decorateClass([
  property({ type: String })
], PdSteps.prototype, "styleTyp");

export { PdSteps };