import { r as n, c as d, h as t, H as p } from "./reactcomponent-44b70bf6.mjs";
import "react";
import "react-dom";
const h = ":host{display:flex}button{padding:16px;background-color:transparent;border:none}button:disabled svg{fill:#d1d5db}button svg{fill:#1f2937}div.steps{padding-top:12px;padding-bottom:12px;padding-left:4px;padding-right:4px;display:flex;flex-grow:1;flex-direction:column;vertical-align:center;justify-content:center}div.steps p{margin:0;padding-bottom:8px;color:#1c1917;font-size:1rem;font-weight:500;line-height:1.25rem;text-align:center}div.steps__dots{display:flex;justify-content:center}div.steps__dots span{width:8px;height:8px;margin-right:8px;float:left;background-color:#d1d5db;border-radius:50%}div.steps__dots span.active{background-color:#1f2937}div.steps__dots span:last-child{margin-right:0px}", o = class {
  constructor(e) {
    n(this, e), this.stepIndexChanged = d(this, "stepIndexChanged", 7), this.heading = void 0, this.steps = [], this.stepIndex = 0;
  }
  /**
   * Set step index and emit stepIndexChanged event.
   *
   * @param {number} index
   */
  setStepIndex(e) {
    this.stepIndex = e, this.stepIndexChanged.emit(this.stepIndex);
  }
  render() {
    return t(p, null, t("button", { type: "button", disabled: this.steps.length === 0 || this.stepIndex === 0, onClick: () => this.setStepIndex(this.stepIndex - 1) }, t("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24px", height: "24px" }, t("path", { d: "M0 0h24v24H0V0z", fill: "none" }), t("path", { d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" }))), t("div", { class: "steps" }, this.heading ? t("p", { part: "heading" }, this.heading) : null, t("div", { class: "steps__dots" }, this.steps.map((e, i) => {
      const s = this.stepIndex === i;
      return t("span", { part: s ? "active-dot" : "dot", class: { active: s } });
    }))), t("button", { type: "button", disabled: this.steps.length === 0 || this.stepIndex === this.steps.length - 1, onClick: () => this.setStepIndex(this.stepIndex + 1) }, t("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24px", height: "24px" }, t("path", { d: "M0 0h24v24H0V0z", fill: "none" }), t("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" }))));
  }
};
o.style = h;
export {
  o as mi_step_switcher
};
//# sourceMappingURL=mi-step-switcher.entry-b9c2b413.mjs.map
