@idds/js 1.0.69 → 1.0.70

package/dist/index.iife.js

@@ -36,6 +36,7 @@ var InaUI = (() => {
     initRangeDatepicker: () => initRangeDatepicker,
     initSelectDropdown: () => initSelectDropdown,
     initSingleFileUpload: () => initSingleFileUpload,
+    initStepper: () => initStepper,
     initTab: () => initTab,
     initTimepicker: () => initTimepicker,
     initToggle: () => initToggle,
@@ -1024,6 +1025,129 @@ var InaUI = (() => {
     });
   }
 
+  // src/js/components/stateful/stepper.js
+  function initStepper() {
+    const steppers = document.querySelectorAll(`.${PREFIX}-stepper`);
+    steppers.forEach((stepper) => {
+      if (stepper.dataset.initialized === "true") return;
+      stepper.dataset.initialized = "true";
+      const stepperId = stepper.id;
+      const items = stepper.querySelectorAll(`.${PREFIX}-stepper__item`);
+      const separators = stepper.querySelectorAll(
+        `.${PREFIX}-stepper__separator`
+      );
+      const totalSteps = items.length;
+      let currentStep = parseInt(stepper.dataset.currentStep || "0", 10);
+      const nextBtns = document.querySelectorAll(
+        `[data-stepper-next="${stepperId}"]`
+      );
+      const prevBtns = document.querySelectorAll(
+        `[data-stepper-prev="${stepperId}"]`
+      );
+      const displayTargetId = stepper.dataset.displayTarget;
+      const displayTarget = displayTargetId ? document.getElementById(displayTargetId) : null;
+      const checkIcon = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="${PREFIX}-stepper__check-icon"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        stroke-width="2.5"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M5 12l5 5l10 -10" />
+      </svg>
+    `;
+      const updateUI = () => {
+        stepper.dataset.currentStep = currentStep;
+        items.forEach((item, index) => {
+          const iconWrapper = item.querySelector(
+            `.${PREFIX}-stepper__icon-wrapper`
+          );
+          const itemNumber = index + 1;
+          item.classList.remove(
+            `${PREFIX}-stepper__item--completed`,
+            `${PREFIX}-stepper__item--active`
+          );
+          if (iconWrapper) iconWrapper.innerHTML = "";
+          if (index < currentStep) {
+            item.classList.add(`${PREFIX}-stepper__item--completed`);
+            if (iconWrapper) iconWrapper.innerHTML = checkIcon;
+          } else if (index === currentStep) {
+            item.classList.add(`${PREFIX}-stepper__item--active`);
+            if (iconWrapper)
+              iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
+          } else {
+            if (iconWrapper)
+              iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
+          }
+        });
+        separators.forEach((separator, index) => {
+          if (index < currentStep) {
+            separator.classList.add(`${PREFIX}-stepper__separator--completed`);
+          } else {
+            separator.classList.remove(`${PREFIX}-stepper__separator--completed`);
+          }
+        });
+        prevBtns.forEach((btn) => {
+          if (currentStep === 0) {
+            btn.setAttribute("disabled", "true");
+          } else {
+            btn.removeAttribute("disabled");
+          }
+        });
+        nextBtns.forEach((btn) => {
+          if (currentStep === totalSteps - 1) {
+            btn.setAttribute("disabled", "true");
+          } else {
+            btn.removeAttribute("disabled");
+          }
+        });
+        if (displayTarget) {
+          displayTarget.textContent = `Current Step: ${currentStep + 1}`;
+        }
+        stepper.dispatchEvent(
+          new CustomEvent("stepper:change", {
+            bubbles: true,
+            detail: { currentStep, totalSteps }
+          })
+        );
+      };
+      nextBtns.forEach((btn) => {
+        btn.addEventListener("click", () => {
+          if (currentStep < totalSteps - 1) {
+            currentStep++;
+            updateUI();
+          }
+        });
+      });
+      prevBtns.forEach((btn) => {
+        btn.addEventListener("click", () => {
+          if (currentStep > 0) {
+            currentStep--;
+            updateUI();
+          }
+        });
+      });
+      items.forEach((item, index) => {
+        if (item.classList.contains(`${PREFIX}-stepper__item--clickable`) || item.hasAttribute("data-clickable")) {
+          item.addEventListener("click", () => {
+            if (!item.classList.contains(`${PREFIX}-stepper__item--disabled`)) {
+              currentStep = index;
+              updateUI();
+            }
+          });
+        }
+      });
+      updateUI();
+    });
+  }
+
   // src/js/components/stateful/file-upload.js
   var ICONS = {
     upload: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="16"></line></svg>`,
@@ -2690,6 +2814,7 @@ var InaUI = (() => {
       initModal();
       initRangeDatepicker();
       initRadioButton();
+      initStepper();
       initTab();
       initTimepicker();
       initToggle();

package/dist/index.js

@@ -1187,6 +1187,129 @@ function initRadioButton() {
   });
 }
 
+// src/js/components/stateful/stepper.js
+function initStepper() {
+  const steppers = document.querySelectorAll(`.${PREFIX}-stepper`);
+  steppers.forEach((stepper) => {
+    if (stepper.dataset.initialized === "true") return;
+    stepper.dataset.initialized = "true";
+    const stepperId = stepper.id;
+    const items = stepper.querySelectorAll(`.${PREFIX}-stepper__item`);
+    const separators = stepper.querySelectorAll(
+      `.${PREFIX}-stepper__separator`
+    );
+    const totalSteps = items.length;
+    let currentStep = parseInt(stepper.dataset.currentStep || "0", 10);
+    const nextBtns = document.querySelectorAll(
+      `[data-stepper-next="${stepperId}"]`
+    );
+    const prevBtns = document.querySelectorAll(
+      `[data-stepper-prev="${stepperId}"]`
+    );
+    const displayTargetId = stepper.dataset.displayTarget;
+    const displayTarget = displayTargetId ? document.getElementById(displayTargetId) : null;
+    const checkIcon = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="${PREFIX}-stepper__check-icon"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        stroke-width="2.5"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M5 12l5 5l10 -10" />
+      </svg>
+    `;
+    const updateUI = () => {
+      stepper.dataset.currentStep = currentStep;
+      items.forEach((item, index) => {
+        const iconWrapper = item.querySelector(
+          `.${PREFIX}-stepper__icon-wrapper`
+        );
+        const itemNumber = index + 1;
+        item.classList.remove(
+          `${PREFIX}-stepper__item--completed`,
+          `${PREFIX}-stepper__item--active`
+        );
+        if (iconWrapper) iconWrapper.innerHTML = "";
+        if (index < currentStep) {
+          item.classList.add(`${PREFIX}-stepper__item--completed`);
+          if (iconWrapper) iconWrapper.innerHTML = checkIcon;
+        } else if (index === currentStep) {
+          item.classList.add(`${PREFIX}-stepper__item--active`);
+          if (iconWrapper)
+            iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
+        } else {
+          if (iconWrapper)
+            iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
+        }
+      });
+      separators.forEach((separator, index) => {
+        if (index < currentStep) {
+          separator.classList.add(`${PREFIX}-stepper__separator--completed`);
+        } else {
+          separator.classList.remove(`${PREFIX}-stepper__separator--completed`);
+        }
+      });
+      prevBtns.forEach((btn) => {
+        if (currentStep === 0) {
+          btn.setAttribute("disabled", "true");
+        } else {
+          btn.removeAttribute("disabled");
+        }
+      });
+      nextBtns.forEach((btn) => {
+        if (currentStep === totalSteps - 1) {
+          btn.setAttribute("disabled", "true");
+        } else {
+          btn.removeAttribute("disabled");
+        }
+      });
+      if (displayTarget) {
+        displayTarget.textContent = `Current Step: ${currentStep + 1}`;
+      }
+      stepper.dispatchEvent(
+        new CustomEvent("stepper:change", {
+          bubbles: true,
+          detail: { currentStep, totalSteps }
+        })
+      );
+    };
+    nextBtns.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        if (currentStep < totalSteps - 1) {
+          currentStep++;
+          updateUI();
+        }
+      });
+    });
+    prevBtns.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        if (currentStep > 0) {
+          currentStep--;
+          updateUI();
+        }
+      });
+    });
+    items.forEach((item, index) => {
+      if (item.classList.contains(`${PREFIX}-stepper__item--clickable`) || item.hasAttribute("data-clickable")) {
+        item.addEventListener("click", () => {
+          if (!item.classList.contains(`${PREFIX}-stepper__item--disabled`)) {
+            currentStep = index;
+            updateUI();
+          }
+        });
+      }
+    });
+    updateUI();
+  });
+}
+
 // src/js/components/stateful/file-upload.js
 var ICONS = {
   upload: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="16"></line></svg>`,
@@ -2660,6 +2783,7 @@ function initAll() {
   initActionDropdown();
   initSelectDropdown();
   initRadioButton();
+  initStepper();
   initFileUpload();
   initSingleFileUpload();
   initFileUploadBase();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/js",
-  "version": "1.0.69",
+  "version": "1.0.70",
   "publishConfig": {
     "access": "public"
   },