wj-elements 0.7.6 → 0.8.0

package/dist/wje-stepper.js

@@ -1,401 +1,153 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { Localizer } from "./localize.js";
-import WJElement from "./wje-element.js";
-import { event } from "./event.js";
-const styles = '.container {\n	display: flex;\n	flex-direction: column;\n}\n\n.header {\n	display: flex;\n	justify-content: var(--wje-stepper-justify);\n	margin-bottom: var(--wje-spacing-medium);\n}\n\n.step-header {\n	display: flex;\n	padding: var(--wje-spacing-medium);\n	gap: var(--wje-spacing-x-small);\n	color: var(--wje-color-contrast-6);\n	flex-grow: var(--wje-stepper-grow);\n	text-align: center;\n}\n\n.pointer {\n	cursor: pointer;\n}\n\n[active] {\n	color: var(--wje-color-contrast-11);\n}\n\n.content {\n	margin-bottom: var(--wje-spacing-medium);\n}\n\n.arrow-icon {\n	margin-top: var(--wje-stepper-margin);\n}\n\n.step {\n	padding: var(--wje-spacing-medium);\n	text-align: center;\n}\n\n[done] {\n	color: var(--wje-color-contrast-11);\n}\n\n.nav-buttons {\n	display: flex;\n	justify-content: space-between;\n\n	slot[hidden] {\n		visibility: hidden;\n		display: initial;\n	}\n\n	slot[disabled] {\n		opacity: 0.5;\n		pointer-events: none;\n		cursor: not-allowed;\n\n		/* after */\n		::after {\n			content: "";\n			display: block;\n			width: 100%;\n			height: 100%;\n			background-color: var(--wje-color-contrast-2);\n			position: absolute;\n			top: 0;\n			left: 0;\n			opacity: .5;\n		}\n	}\n}';
-let stepperId = 0;
-class Stepper extends WJElement {
+import { Localizer as e } from "./localize.js";
+import t from "./wje-element.js";
+import { event as s } from "./event.js";
+let i = 0;
+class n extends t {
   constructor() {
     super();
     __publicField(this, "className", "Stepper");
-    /**
-     * A callback function that is executed before opening a step in a process.
-     * This allows for custom behavior or logic to be applied before the step is displayed.
-     * @callback beforeOpen
-     * @param {number} stepIndex The index of the step that is about to be opened.
-     * @param {object} currentStep The current step data or configuration object before opening the new step.
-     */
-    __publicField(this, "beforeOpen", (stepIndex, currentStep) => {
+    __publicField(this, "beforeOpen", (e2, t2) => {
     });
-    /**
-     * Callback function executed after a step is opened.
-     * This function can be overridden to implement custom behavior
-     * that should take place immediately after a step is opened.
-     * @function afterOpen
-     * @param {number} stepIndex The index of the step that has been opened.
-     * @param {object} currentStep The object representing the current step that has been opened.
-     */
-    __publicField(this, "afterOpen", (stepIndex, currentStep) => {
+    __publicField(this, "afterOpen", (e2, t2) => {
     });
-    this.currentStep = 0;
-    this.localizer = new Localizer(this);
-    this.steps = [];
-    this.headerSteps = [];
-    this._stepperId = ++stepperId;
+    this.currentStep = 0, this.localizer = new e(this), this.steps = [], this.headerSteps = [], this._stepperId = ++i;
   }
-  /**
-   * Sets the start index for an operation or a process. This method assigns
-   * the provided value to the attribute 'start-index'.
-   * @param {number|string} value The value to set for the 'start-index' attribute.
-   */
-  set startIndex(value) {
-    this.setAttribute("start-index", value);
+  set startIndex(e2) {
+    this.setAttribute("start-index", e2);
   }
-  /**
-   * Retrieves the starting index value stored as an attribute.
-   * If the attribute 'start-index' exists and is not null, it parses the value as an integer and returns it.
-   * If the attribute does not exist, it returns the default value of 0.
-   * @returns {number} The starting index as an integer, or 0 if the attribute is not present.
-   */
   get startIndex() {
-    const index = this.getAttribute("start-index");
-    return index !== null ? +index : 0;
+    const e2 = this.getAttribute("start-index");
+    return null !== e2 ? +e2 : 0;
   }
   get active() {
-    if (this.hasAttribute("active")) return this.getAttribute("active");
-    return "primary";
+    return this.hasAttribute("active") ? this.getAttribute("active") : "primary";
   }
   get done() {
-    if (this.hasAttribute("done")) return this.getAttribute("done");
-    return "success";
+    return this.hasAttribute("done") ? this.getAttribute("done") : "success";
   }
   static get cssStyleSheet() {
-    return styles;
+    return '.container{display:flex;flex-direction:column}.header{display:flex;justify-content:var(--wje-stepper-justify);margin-bottom:var(--wje-spacing-medium)}.step-header{display:flex;padding:var(--wje-spacing-medium);gap:var(--wje-spacing-x-small);color:var(--wje-color-contrast-6);flex-grow:var(--wje-stepper-grow);text-align:center}.pointer{cursor:pointer}[active]{color:var(--wje-color-contrast-11)}.content{margin-bottom:var(--wje-spacing-medium)}.arrow-icon{margin-top:var(--wje-stepper-margin)}.step{padding:var(--wje-spacing-medium);text-align:center}[done]{color:var(--wje-color-contrast-11)}.nav-buttons{display:flex;justify-content:space-between}.nav-buttons slot[hidden]{visibility:hidden;display:initial}.nav-buttons slot[disabled]{opacity:.5;pointer-events:none;cursor:not-allowed}.nav-buttons slot[disabled] :after{content:"";display:block;width:100%;height:100%;background-color:var(--wje-color-contrast-2);position:absolute;top:0;left:0;opacity:.5}';
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  /**
-   * Draws the component for the stepper.
-   * @returns {DocumentFragment}
-   */
   draw() {
     var _a;
-    let fragment = document.createDocumentFragment();
-    const native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.className = "native-stepper";
-    const header = document.createElement("div");
-    header.setAttribute("part", "header");
-    header.className = "header";
-    header.setAttribute("role", "tablist");
-    const content = document.createElement("div");
-    content.setAttribute("part", "content");
-    content.className = "content";
-    const steps = Array.from(this.children);
-    steps == null ? void 0 : steps.forEach((step, index) => {
-      if (step.nodeName === "WJE-STEP") {
-        this.headerSteps.push(this.processStep(index, step, header, steps));
-      }
+    let e2 = document.createDocumentFragment();
+    const t2 = document.createElement("div");
+    t2.setAttribute("part", "native"), t2.className = "native-stepper";
+    const s2 = document.createElement("div");
+    s2.setAttribute("part", "header"), s2.className = "header", s2.setAttribute("role", "tablist");
+    const i2 = document.createElement("div");
+    i2.setAttribute("part", "content"), i2.className = "content";
+    const n2 = Array.from(this.children);
+    n2 == null ? void 0 : n2.forEach((e3, t3) => {
+      "WJE-STEP" === e3.nodeName && this.headerSteps.push(this.processStep(t3, e3, s2, n2));
     });
-    let slot = document.createElement("slot");
-    const navButtons = document.createElement("div");
-    navButtons.className = "nav-buttons";
-    const prevButton = document.createElement("wje-button");
-    prevButton.setAttribute("label", this.localizer.translate("wj.stepper.button.previous"));
-    prevButton.innerHTML = this.localizer.translate("wj.stepper.button.previous");
-    let nextButton = document.createElement("wje-button");
-    nextButton.setAttribute("label", this.localizer.translate("wj.stepper.button.next"));
-    nextButton.innerHTML = this.localizer.translate("wj.stepper.button.next");
-    let finishButton = document.createElement("wje-button");
-    finishButton.setAttribute("label", this.localizer.translate("wj.stepper.button.next"));
-    finishButton.innerHTML = this.localizer.translate("wj.stepper.button.finish");
-    finishButton.setAttribute("color", "primary");
-    const navButtonPrevSlot = document.createElement("slot");
-    navButtonPrevSlot.setAttribute("name", "prev");
-    navButtonPrevSlot.appendChild(prevButton);
-    navButtonPrevSlot.hidden = this.currentStep === 0;
-    const navButtonNextSlot = document.createElement("slot");
-    navButtonNextSlot.setAttribute("name", "next");
-    navButtonNextSlot.appendChild(nextButton);
-    navButtonNextSlot.hidden = this.currentStep === this.steps.length - 1;
-    const navButtonFinishSlot = document.createElement("slot");
-    navButtonFinishSlot.setAttribute("name", "finish");
-    navButtonFinishSlot.appendChild(nextButton);
-    navButtonFinishSlot.hidden = this.currentStep !== this.steps.length - 1;
-    const isNextLocked = (_a = this.headerSteps[this.currentStep + 1]) == null ? void 0 : _a.hasAttribute("locked");
-    navButtonNextSlot.toggleAttribute("disabled", !!isNextLocked);
-    navButtonFinishSlot.toggleAttribute("disabled", !!isNextLocked);
-    if (steps.length > 1) {
-      navButtonPrevSlot.appendChild(prevButton);
-      navButtonNextSlot.appendChild(nextButton);
-      navButtonFinishSlot.appendChild(finishButton);
-      navButtonFinishSlot.style.display = "none";
-    } else {
-      navButtonPrevSlot.hidden = true;
-      navButtonNextSlot.hidden = true;
-      navButtonPrevSlot.appendChild(prevButton);
-      navButtonNextSlot.appendChild(nextButton);
-      navButtonFinishSlot.appendChild(finishButton);
-    }
-    content.appendChild(slot);
-    native.appendChild(header);
-    native.appendChild(content);
-    native.appendChild(navButtons);
-    navButtons.appendChild(navButtonPrevSlot);
-    navButtons.appendChild(navButtonNextSlot);
-    navButtons.appendChild(navButtonFinishSlot);
-    fragment.appendChild(native);
-    this.header = header;
-    this.prev = navButtonPrevSlot;
-    this.next = navButtonNextSlot;
-    this.finish = navButtonFinishSlot;
-    return fragment;
-  }
-  processStep(index, step, header, steps) {
-    const nav = document.createElement("div");
-    nav.className = "step-header";
-    nav.setAttribute("role", "tab");
-    nav.addEventListener("click", (e) => {
-      this.goToStep(index);
+    let r = document.createElement("slot");
+    const a = document.createElement("div");
+    a.className = "nav-buttons";
+    const o = document.createElement("wje-button");
+    o.setAttribute("label", this.localizer.translate("wj.stepper.button.previous")), o.innerHTML = this.localizer.translate("wj.stepper.button.previous");
+    let d = document.createElement("wje-button");
+    d.setAttribute("label", this.localizer.translate("wj.stepper.button.next")), d.innerHTML = this.localizer.translate("wj.stepper.button.next");
+    let l = document.createElement("wje-button");
+    l.setAttribute("label", this.localizer.translate("wj.stepper.button.next")), l.innerHTML = this.localizer.translate("wj.stepper.button.finish"), l.setAttribute("color", "primary");
+    const p = document.createElement("slot");
+    p.setAttribute("name", "prev"), p.appendChild(o), p.hidden = 0 === this.currentStep;
+    const c = document.createElement("slot");
+    c.setAttribute("name", "next"), c.appendChild(d), c.hidden = this.currentStep === this.steps.length - 1;
+    const h = document.createElement("slot");
+    h.setAttribute("name", "finish"), h.appendChild(d), h.hidden = this.currentStep !== this.steps.length - 1;
+    const u = (_a = this.headerSteps[this.currentStep + 1]) == null ? void 0 : _a.hasAttribute("locked");
+    return c.toggleAttribute("disabled", !!u), h.toggleAttribute("disabled", !!u), n2.length > 1 ? (p.appendChild(o), c.appendChild(d), h.appendChild(l), h.style.display = "none") : (p.hidden = true, c.hidden = true, p.appendChild(o), c.appendChild(d), h.appendChild(l)), i2.appendChild(r), t2.appendChild(s2), t2.appendChild(i2), t2.appendChild(a), a.appendChild(p), a.appendChild(c), a.appendChild(h), e2.appendChild(t2), this.header = s2, this.prev = p, this.next = c, this.finish = h, e2;
+  }
+  processStep(e2, t2, s2, i2) {
+    const n2 = document.createElement("div");
+    n2.className = "step-header", n2.setAttribute("role", "tab"), n2.addEventListener("click", (t3) => {
+      this.goToStep(e2);
     });
-    const badge = document.createElement("wje-badge");
-    badge.setAttribute("label", (index + 1).toString());
-    badge.className = "step-badge";
-    badge.innerHTML = index + 1;
-    const label = document.createElement("span");
-    label.innerText = step.getAttribute("label") || `${this.localizer.translate("wj.stepper.step")} ${index + 1}`;
-    const panelId = step.id || `wje-stepper-${this._stepperId}-panel-${index}`;
-    const tabId = nav.id || `wje-stepper-${this._stepperId}-tab-${index}`;
-    step.id = panelId;
-    nav.id = tabId;
-    nav.setAttribute("aria-controls", panelId);
-    step.setAttribute("role", "tabpanel");
-    step.setAttribute("aria-labelledby", tabId);
-    if (index === this.currentStep || step.hasAttribute("active")) {
-      this.setStepActive(nav, badge, index);
-    } else {
-      nav.setAttribute("aria-selected", "false");
-      nav.setAttribute("tabindex", "-1");
-    }
-    if (step.hasAttribute("disabled")) {
-      nav.setAttribute("disabled", "");
-      this.setStepLocked(nav, badge);
-    } else {
-      nav.classList.add("pointer");
-    }
-    nav.appendChild(badge);
-    nav.appendChild(label);
-    header.appendChild(nav);
-    if (index < steps.length - 1) {
-      const arrowIcon = document.createElement("wje-icon");
-      arrowIcon.setAttribute("name", "chevron-right");
-      arrowIcon.classList.add("arrow-icon");
-      arrowIcon.setAttribute("size", "small");
-      header.appendChild(arrowIcon);
-    }
-    step.classList.add("step");
-    if (index !== this.currentStep) {
-      step.style.display = "none";
-      step.setAttribute("aria-hidden", "true");
-    } else {
-      step.setAttribute("aria-hidden", "false");
+    const r = document.createElement("wje-badge");
+    r.setAttribute("label", (e2 + 1).toString()), r.className = "step-badge", r.innerHTML = e2 + 1;
+    const a = document.createElement("span");
+    a.innerText = t2.getAttribute("label") || `${this.localizer.translate("wj.stepper.step")} ${e2 + 1}`;
+    const o = t2.id || `wje-stepper-${this._stepperId}-panel-${e2}`, d = n2.id || `wje-stepper-${this._stepperId}-tab-${e2}`;
+    if (t2.id = o, n2.id = d, n2.setAttribute("aria-controls", o), t2.setAttribute("role", "tabpanel"), t2.setAttribute("aria-labelledby", d), e2 === this.currentStep || t2.hasAttribute("active") ? this.setStepActive(n2, r, e2) : (n2.setAttribute("aria-selected", "false"), n2.setAttribute("tabindex", "-1")), t2.hasAttribute("disabled") ? (n2.setAttribute("disabled", ""), this.setStepLocked(n2, r)) : n2.classList.add("pointer"), n2.appendChild(r), n2.appendChild(a), s2.appendChild(n2), e2 < i2.length - 1) {
+      const e3 = document.createElement("wje-icon");
+      e3.setAttribute("name", "chevron-right"), e3.classList.add("arrow-icon"), e3.setAttribute("size", "small"), s2.appendChild(e3);
     }
-    this.steps.push(step);
-    return nav;
+    return t2.classList.add("step"), e2 !== this.currentStep ? (t2.style.display = "none", t2.setAttribute("aria-hidden", "true")) : t2.setAttribute("aria-hidden", "false"), this.steps.push(t2), n2;
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   afterDraw() {
-    if (this.steps.length <= 1) {
-      this.prev.hidden = true;
-    }
-    event.addListener(this.prev, "click", "", () => this.navigate(-1));
-    event.addListener(this.next, "click", "", () => this.navigate(1));
-    event.addListener(this.finish, "click", "", () => this.navigate(1));
-    requestAnimationFrame(() => {
+    this.steps.length <= 1 && (this.prev.hidden = true), s.addListener(this.prev, "click", "", () => this.navigate(-1)), s.addListener(this.next, "click", "", () => this.navigate(1)), s.addListener(this.finish, "click", "", () => this.navigate(1)), requestAnimationFrame(() => {
       this.goToStep(this.startIndex);
     });
   }
-  /**
-   * Navigates to a different step in a multi-step process based on the provided direction.
-   * @param {number} direction The navigation direction.
-   * Use a positive value to move forward or a negative value to move backward.
-   */
-  navigate(direction) {
-    this.goToStep(this.currentStep + direction);
+  navigate(e2) {
+    this.goToStep(this.currentStep + e2);
   }
-  /**
-   * Navigates to a specific step in a workflow or process.
-   * Executes a set of operations before and after the step transition.
-   * @param {number} stepIndex The index of the step to navigate to.
-   * @returns {void} This method does not return a value.
-   */
-  goToStep(stepIndex) {
-    Promise.resolve(this.beforeOpen(stepIndex, this.currentStep)).then((res) => {
-      this._executeGoToStep(stepIndex);
-      Promise.resolve(this.afterOpen(stepIndex, this.currentStep));
+  goToStep(e2) {
+    Promise.resolve(this.beforeOpen(e2, this.currentStep)).then((t2) => {
+      this._executeGoToStep(e2), Promise.resolve(this.afterOpen(e2, this.currentStep));
     }).catch(console.error);
   }
-  _executeGoToStep(stepIndex = 0) {
+  _executeGoToStep(e2 = 0) {
     var _a;
-    if (stepIndex >= 0 && stepIndex < this.steps.length) {
-      if (this.headerSteps[stepIndex].hasAttribute("disabled")) {
-        return;
-      }
-      if (stepIndex > this.currentStep) {
-        this.dispatchEvent(
-          new CustomEvent("stepper:next", { detail: { stepIndex }, bubbles: true, composed: true })
-        );
-      } else {
-        this.dispatchEvent(
-          new CustomEvent("stepper:prev", { detail: { stepIndex }, bubbles: true, composed: true })
-        );
-      }
-      this.headerSteps.forEach((step, index) => {
-        let badge = step.querySelector("wje-badge");
-        this.setStepDefault(step, badge, index);
-        if (index < stepIndex) this.setStepDone(step, badge);
-        if (index > stepIndex && step.hasAttribute("disabled")) this.setStepLocked(step, badge, index);
-      });
-      this.setStepActive(this.headerSteps[stepIndex], null, stepIndex);
-      this.setContentActive(stepIndex);
-      this.currentStep = stepIndex;
-      this.prev.hidden = this.currentStep === 0;
-      const isNextLocked = (_a = this.headerSteps[this.currentStep + 1]) == null ? void 0 : _a.hasAttribute("locked");
-      this.next.toggleAttribute("disabled", !!isNextLocked);
-      this.finish.toggleAttribute("disabled", !!isNextLocked);
-      if (this.currentStep === this.steps.length - 1) {
-        this.next.hidden = true;
-        this.finish.hidden = false;
-        this.finish.style.display = "block";
-      } else {
-        this.next.hidden = false;
-        this.finish.hidden = true;
-        this.finish.style.display = "none";
-      }
-    } else if (stepIndex === this.steps.length) {
-      this.dispatchEvent(
-        new CustomEvent("stepper:finish", { detail: { stepIndex }, bubbles: true, composed: true })
-      );
-    }
-  }
-  /**
-   * Resets a step to its default state by clearing its active and done attributes.
-   * Updates the step's badge to show its index and removes any color styling.
-   * @param {HTMLElement} nav The navigation element representing the step.
-   * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.
-   * @param {number} [stepIndex] The index of the step, used to set the badge content.
-   */
-  setStepDefault(nav, badge = null, stepIndex = 0) {
-    nav.removeAttribute("active");
-    nav.removeAttribute("done");
-    nav.setAttribute("aria-selected", "false");
-    nav.setAttribute("tabindex", "-1");
-    if (!badge) {
-      badge = nav.querySelector("wje-badge");
-    }
-    badge.innerHTML = stepIndex + 1;
-    badge.removeAttribute("color");
-  }
-  /**
-   * Sets a step as active by adding the `active` attribute and updating the step's badge.
-   * @param {HTMLElement} nav The navigation element representing the step to activate.
-   * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.
-   * @param {number|null} [stepIndex] The index of the step, used to set the badge content. Defaults to `null` if not provided.
-   */
-  setStepActive(nav, badge = null, stepIndex = null) {
-    nav.setAttribute("active", "");
-    nav.setAttribute("aria-selected", "true");
-    nav.setAttribute("tabindex", "0");
-    if (!badge) {
-      badge = nav.querySelector("wje-badge");
-    }
-    badge.innerHTML = stepIndex + 1;
-    badge.setAttribute("color", this.active);
-  }
-  /**
-   * Activates the content of a specific step by displaying it and hiding all others.
-   * @param {number} stepIndex The index of the step whose content should be displayed.
-   */
-  setContentActive(stepIndex) {
+    if (e2 >= 0 && e2 < this.steps.length) {
+      if (this.headerSteps[e2].hasAttribute("disabled")) return;
+      e2 > this.currentStep ? this.dispatchEvent(new CustomEvent("stepper:next", { detail: { stepIndex: e2 }, bubbles: true, composed: true })) : this.dispatchEvent(new CustomEvent("stepper:prev", { detail: { stepIndex: e2 }, bubbles: true, composed: true })), this.headerSteps.forEach((t3, s2) => {
+        let i2 = t3.querySelector("wje-badge");
+        this.setStepDefault(t3, i2, s2), s2 < e2 && this.setStepDone(t3, i2), s2 > e2 && t3.hasAttribute("disabled") && this.setStepLocked(t3, i2, s2);
+      }), this.setStepActive(this.headerSteps[e2], null, e2), this.setContentActive(e2), this.currentStep = e2, this.prev.hidden = 0 === this.currentStep;
+      const t2 = (_a = this.headerSteps[this.currentStep + 1]) == null ? void 0 : _a.hasAttribute("locked");
+      this.next.toggleAttribute("disabled", !!t2), this.finish.toggleAttribute("disabled", !!t2), this.currentStep === this.steps.length - 1 ? (this.next.hidden = true, this.finish.hidden = false, this.finish.style.display = "block") : (this.next.hidden = false, this.finish.hidden = true, this.finish.style.display = "none");
+    } else e2 === this.steps.length && this.dispatchEvent(new CustomEvent("stepper:finish", { detail: { stepIndex: e2 }, bubbles: true, composed: true }));
+  }
+  setStepDefault(e2, t2 = null, s2 = 0) {
+    e2.removeAttribute("active"), e2.removeAttribute("done"), e2.setAttribute("aria-selected", "false"), e2.setAttribute("tabindex", "-1"), t2 || (t2 = e2.querySelector("wje-badge")), t2.innerHTML = s2 + 1, t2.removeAttribute("color");
+  }
+  setStepActive(e2, t2 = null, s2 = null) {
+    e2.setAttribute("active", ""), e2.setAttribute("aria-selected", "true"), e2.setAttribute("tabindex", "0"), t2 || (t2 = e2.querySelector("wje-badge")), t2.innerHTML = s2 + 1, t2.setAttribute("color", this.active);
+  }
+  setContentActive(e2) {
     var _a;
-    (_a = this.steps) == null ? void 0 : _a.forEach((step, index) => {
-      if (index === stepIndex) {
-        step.style.display = "block";
-        step.setAttribute("aria-hidden", "false");
-      } else {
-        step.style.display = "none";
-        step.setAttribute("aria-hidden", "true");
-      }
+    (_a = this.steps) == null ? void 0 : _a.forEach((t2, s2) => {
+      s2 === e2 ? (t2.style.display = "block", t2.setAttribute("aria-hidden", "false")) : (t2.style.display = "none", t2.setAttribute("aria-hidden", "true"));
     });
   }
-  /**
-   * Returns the DOM element of a step by index.
-   * @param {number} stepIndex
-   * @returns {HTMLElement}
-   */
-  getStepElement(stepIndex) {
+  getStepElement(e2) {
     var _a;
-    return (_a = this.steps) == null ? void 0 : _a[stepIndex];
-  }
-  /**
-   * Appends or replaces content inside the step container.
-   * @param {number} stepIndex
-   * @param {Node|string|Node[]} content DOM node(s) or HTML string to insert.
-   * @param {{ replace?: boolean }} [options]
-   */
-  renderStepContent(stepIndex, content, options = {}) {
-    const stepEl = this.getStepElement(stepIndex);
-    if (!stepEl) return;
-    const { replace = false } = options;
-    let frag = document.createDocumentFragment();
-    if (typeof content === "string") {
-      const tpl = document.createElement("template");
-      tpl.innerHTML = content;
-      frag.append(tpl.content);
-    } else if (Array.isArray(content)) {
-      content.forEach((node) => {
-        if (node instanceof Node) frag.appendChild(node);
-      });
-    } else if (content instanceof Node) {
-      frag.append(content);
-    }
-    if (replace) {
-      stepEl.replaceChildren(frag);
-    } else {
-      stepEl.append(frag);
-    }
-  }
-  /**
-   * Marks a step as completed by setting the `done` attribute and updating its badge with a check icon.
-   * @param {HTMLElement} nav The navigation element representing the completed step.
-   * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.
-   */
-  setStepDone(nav, badge = null) {
-    nav.setAttribute("done", "");
-    const checkIcon = document.createElement("wje-icon");
-    checkIcon.setAttribute("name", "check");
-    checkIcon.setAttribute("color", this.done);
-    checkIcon.setAttribute("size", "medium");
-    if (!badge) {
-      badge = nav.querySelector("wje-badge");
-    }
-    badge.setAttribute("color", this.done);
-    badge.innerHTML = "";
-    badge.appendChild(checkIcon);
-  }
-  setStepLocked(nav, badge = null) {
-    nav.setAttribute("disabled", "");
-    nav.setAttribute("locked", "");
-    const lockIcon = document.createElement("wje-icon");
-    lockIcon.setAttribute("name", "lock");
-    lockIcon.setAttribute("color", "danger");
-    lockIcon.setAttribute("size", "medium");
-    if (!badge) {
-      badge = nav.querySelector("wje-badge");
-    }
-    badge.innerHTML = "";
-    badge.removeAttribute("color");
-    badge.classList.add("disabled");
-    badge.appendChild(lockIcon);
+    return (_a = this.steps) == null ? void 0 : _a[e2];
+  }
+  renderStepContent(e2, t2, s2 = {}) {
+    const i2 = this.getStepElement(e2);
+    if (!i2) return;
+    const { replace: n2 = false } = s2;
+    let r = document.createDocumentFragment();
+    if ("string" == typeof t2) {
+      const e3 = document.createElement("template");
+      e3.innerHTML = t2, r.append(e3.content);
+    } else Array.isArray(t2) ? t2.forEach((e3) => {
+      e3 instanceof Node && r.appendChild(e3);
+    }) : t2 instanceof Node && r.append(t2);
+    n2 ? i2.replaceChildren(r) : i2.append(r);
+  }
+  setStepDone(e2, t2 = null) {
+    e2.setAttribute("done", "");
+    const s2 = document.createElement("wje-icon");
+    s2.setAttribute("name", "check"), s2.setAttribute("color", this.done), s2.setAttribute("size", "medium"), t2 || (t2 = e2.querySelector("wje-badge")), t2.setAttribute("color", this.done), t2.innerHTML = "", t2.appendChild(s2);
+  }
+  setStepLocked(e2, t2 = null) {
+    e2.setAttribute("disabled", ""), e2.setAttribute("locked", "");
+    const s2 = document.createElement("wje-icon");
+    s2.setAttribute("name", "lock"), s2.setAttribute("color", "danger"), s2.setAttribute("size", "medium"), t2 || (t2 = e2.querySelector("wje-badge")), t2.innerHTML = "", t2.removeAttribute("color"), t2.classList.add("disabled"), t2.appendChild(s2);
   }
 }
-Stepper.define("wje-stepper", Stepper);
+n.define("wje-stepper", n);
 export {
-  Stepper as default
+  n as default
 };
 //# sourceMappingURL=wje-stepper.js.map