@idds/js 1.0.37 → 1.0.38

package/dist/index.iife.js

@@ -31,6 +31,7 @@ var InaUI = (() => {
     initModal: () => initModal,
     initRangeDatepicker: () => initRangeDatepicker,
     initTab: () => initTab,
+    initTimepicker: () => initTimepicker,
     initToggle: () => initToggle,
     showToast: () => showToast
   });
@@ -886,6 +887,212 @@ var InaUI = (() => {
     });
   }
 
+  // src/js/components/stateful/timepicker.js
+  function initTimepicker() {
+    document.querySelectorAll(".ina-time-picker").forEach((picker) => {
+      if (picker.dataset.initialized === "true") return;
+      picker.dataset.initialized = "true";
+      const input = picker.querySelector(".ina-time-picker__input");
+      const wrapper = picker.querySelector(".ina-time-picker__wrapper");
+      if (!input || !wrapper) return;
+      const format = picker.dataset.format || "HH:mm";
+      const use12Hours = picker.dataset.use12Hours === "true";
+      const showSecond = picker.dataset.showSecond === "true";
+      const disabled = picker.classList.contains("ina-time-picker--disabled");
+      const allowClear = picker.dataset.allowClear !== "false";
+      let isOpen = false;
+      let internalValue = input.value || "";
+      let panel = picker.querySelector(".ina-time-picker__panel");
+      if (!panel) {
+        panel = document.createElement("div");
+        panel.className = "ina-time-picker__panel";
+        panel.style.display = "none";
+        picker.appendChild(panel);
+      }
+      let content = panel.querySelector(".ina-time-picker__content");
+      if (!content) {
+        content = document.createElement("div");
+        content.className = "ina-time-picker__content";
+        panel.appendChild(content);
+      } else {
+        content.innerHTML = "";
+      }
+      let actions = panel.querySelector(".ina-time-picker__actions");
+      if (!actions) {
+        actions = document.createElement("div");
+        actions.className = "ina-time-picker__actions";
+        const confirmBtn = document.createElement("button");
+        confirmBtn.type = "button";
+        confirmBtn.className = "ina-time-picker__confirm-button";
+        confirmBtn.textContent = "Pilih";
+        confirmBtn.onclick = (e) => {
+          e.stopPropagation();
+          close();
+        };
+        actions.appendChild(confirmBtn);
+        panel.appendChild(actions);
+      }
+      const parseTime = (timeStr) => {
+        if (!timeStr) return { hours: 0, minutes: 0, seconds: 0, period: "AM" };
+        let hours = 0, minutes = 0, seconds = 0, period = "AM";
+        try {
+          if (use12Hours) {
+            const [time, p] = timeStr.split(" ");
+            const [h, m, s] = time.split(":");
+            hours = parseInt(h || "0", 10);
+            minutes = parseInt(m || "0", 10);
+            seconds = parseInt(s || "0", 10);
+            period = p || "AM";
+          } else {
+            const [h, m, s] = timeStr.split(":");
+            hours = parseInt(h || "0", 10);
+            minutes = parseInt(m || "0", 10);
+            seconds = parseInt(s || "0", 10);
+          }
+        } catch (e) {
+          console.warn("Invalid time format", timeStr);
+        }
+        return { hours, minutes, seconds, period };
+      };
+      const formatTime = (h, m, s, p) => {
+        const pad = (n) => n.toString().padStart(2, "0");
+        if (use12Hours) {
+          let displayHours = h;
+          if (displayHours === 0) displayHours = 12;
+          const main = `${pad(displayHours)}:${pad(m)}`;
+          const sec = showSecond ? `:${pad(s)}` : "";
+          return `${main}${sec} ${p}`;
+        } else {
+          const main = `${pad(h)}:${pad(m)}`;
+          const sec = showSecond ? `:${pad(s)}` : "";
+          return `${main}${sec}`;
+        }
+      };
+      let currentTime = parseTime(internalValue);
+      const renderColumn = (type, max) => {
+        const column = document.createElement("div");
+        column.className = `ina-time-picker__column ina-time-picker__column--${type}`;
+        const colContent = document.createElement("div");
+        colContent.className = "ina-time-picker__column-content";
+        column.appendChild(colContent);
+        const start = type === "hour" && use12Hours ? 1 : 0;
+        const end = type === "hour" && use12Hours ? 12 : max - 1;
+        for (let i = start; i <= end; i++) {
+          const option = document.createElement("div");
+          option.className = "ina-time-picker__option";
+          option.textContent = i.toString().padStart(2, "0");
+          option.dataset.value = i;
+          let isSelected = false;
+          if (type === "hour") {
+            isSelected = currentTime.hours === i || use12Hours && currentTime.hours === 0 && i === 12;
+          } else if (type === "minute") isSelected = currentTime.minutes === i;
+          else if (type === "second") isSelected = currentTime.seconds === i;
+          if (isSelected)
+            option.classList.add("ina-time-picker__option--selected");
+          option.addEventListener("click", (e) => {
+            e.stopPropagation();
+            const val = parseInt(option.dataset.value, 10);
+            if (type === "hour")
+              currentTime.hours = use12Hours && val === 12 ? 0 : val;
+            if (type === "hour") currentTime.hours = val;
+            if (type === "minute") currentTime.minutes = val;
+            if (type === "second") currentTime.seconds = val;
+            updateInput();
+            colContent.querySelectorAll(".ina-time-picker__option").forEach(
+              (el) => el.classList.remove("ina-time-picker__option--selected")
+            );
+            option.classList.add("ina-time-picker__option--selected");
+          });
+          colContent.appendChild(option);
+        }
+        return column;
+      };
+      const renderPeriodColumn = () => {
+        const column = document.createElement("div");
+        column.className = `ina-time-picker__column ina-time-picker__column--period`;
+        const colContent = document.createElement("div");
+        colContent.className = "ina-time-picker__column-content";
+        column.appendChild(colContent);
+        ["AM", "PM"].forEach((p) => {
+          const option = document.createElement("div");
+          option.className = "ina-time-picker__option";
+          option.textContent = p;
+          if (currentTime.period === p)
+            option.classList.add("ina-time-picker__option--selected");
+          option.addEventListener("click", (e) => {
+            e.stopPropagation();
+            currentTime.period = p;
+            updateInput();
+            colContent.querySelectorAll(".ina-time-picker__option").forEach(
+              (el) => el.classList.remove("ina-time-picker__option--selected")
+            );
+            option.classList.add("ina-time-picker__option--selected");
+          });
+          colContent.appendChild(option);
+        });
+        return column;
+      };
+      const updateInput = () => {
+        const val = formatTime(
+          currentTime.hours,
+          currentTime.minutes,
+          currentTime.seconds,
+          currentTime.period
+        );
+        input.value = val;
+        picker.dataset.value = val;
+        input.dispatchEvent(new Event("change", { bubbles: true }));
+      };
+      const buildPanel = () => {
+        content.innerHTML = "";
+        content.appendChild(renderColumn("hour", use12Hours ? 13 : 24));
+        content.appendChild(renderColumn("minute", 60));
+        if (showSecond) content.appendChild(renderColumn("second", 60));
+        if (use12Hours) content.appendChild(renderPeriodColumn());
+      };
+      const open = () => {
+        if (disabled) return;
+        isOpen = true;
+        picker.classList.add("ina-time-picker--open");
+        panel.style.display = "block";
+        currentTime = parseTime(input.value);
+        buildPanel();
+        document.dispatchEvent(
+          new CustomEvent("closeTimePicker", { detail: { exclude: picker } })
+        );
+      };
+      const close = () => {
+        isOpen = false;
+        picker.classList.remove("ina-time-picker--open");
+        panel.style.display = "none";
+      };
+      const toggle = (e) => {
+        e.stopPropagation();
+        if (isOpen) close();
+        else open();
+      };
+      wrapper.addEventListener("click", toggle);
+      input.addEventListener("click", (e) => {
+      });
+      document.addEventListener("click", (e) => {
+        if (!picker.contains(e.target)) close();
+      });
+      document.addEventListener("closeTimePicker", (e) => {
+        if (e.detail && e.detail.exclude !== picker) close();
+      });
+      const clearBtn = picker.querySelector(".ina-time-picker__clear-button");
+      if (clearBtn && allowClear) {
+        clearBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          input.value = "";
+          currentTime = { hours: 0, minutes: 0, seconds: 0, period: "AM" };
+          picker.dataset.value = "";
+          input.dispatchEvent(new Event("change", { bubbles: true }));
+        });
+      }
+    });
+  }
+
   // src/js/index.js
   var PREFIX = "ina-ss";
 
@@ -1363,6 +1570,7 @@ var InaUI = (() => {
       initModal();
       initRangeDatepicker();
       initTab();
+      initTimepicker();
       initToggle();
     });
   }

package/dist/index.js

@@ -1211,53 +1211,6 @@ function initRangeDatepicker() {
   });
 }
 
-// src/js/components/stateless/img-compare.js
-function initImgCompare(rootSelector = `.${PREFIX}-img-compare`) {
-  document.querySelectorAll(rootSelector).forEach((imgCompare) => {
-    const sliderEl = document.createElement("input");
-    sliderEl.type = "range";
-    sliderEl.min = "0";
-    sliderEl.max = "100";
-    sliderEl.value = "50";
-    sliderEl.setAttribute("aria-label", "Percentage of the image to show");
-    sliderEl.setAttribute("aria-valuenow", "50");
-    sliderEl.setAttribute("aria-valuemin", "0");
-    sliderEl.setAttribute("aria-valuemax", "100");
-    sliderEl.classList.add("ina-ss-img__slider");
-    sliderEl.addEventListener("input", () => {
-      imgCompare.style.setProperty(
-        `--${PREFIX}-position`,
-        `${sliderEl.value}%`
-      );
-    });
-    const sliderLineEl = document.createElement("div");
-    sliderLineEl.classList.add("ina-ss-img__slider-line");
-    const sliderButtonEl = document.createElement("button");
-    sliderButtonEl.classList.add("ina-ss-img__slider-button");
-    imgCompare.appendChild(sliderEl);
-    imgCompare.appendChild(sliderLineEl);
-    imgCompare.appendChild(sliderButtonEl);
-  });
-}
-
-// src/js/bundle.js
-if (typeof window !== void 0) {
-  document.addEventListener("DOMContentLoaded", () => {
-    initAccordion();
-    initBanner();
-    initButtonGroup();
-    initDatepicker();
-    initDropdown();
-    initFileUploadBase();
-    initFileUploadItem();
-    initImgCompare();
-    initModal();
-    initRangeDatepicker();
-    initTab();
-    initToggle();
-  });
-}
-
 // src/js/components/stateful/timepicker.js
 function initTimepicker() {
   document.querySelectorAll(".ina-time-picker").forEach((picker) => {
@@ -1464,6 +1417,54 @@ function initTimepicker() {
   });
 }
 
+// src/js/components/stateless/img-compare.js
+function initImgCompare(rootSelector = `.${PREFIX}-img-compare`) {
+  document.querySelectorAll(rootSelector).forEach((imgCompare) => {
+    const sliderEl = document.createElement("input");
+    sliderEl.type = "range";
+    sliderEl.min = "0";
+    sliderEl.max = "100";
+    sliderEl.value = "50";
+    sliderEl.setAttribute("aria-label", "Percentage of the image to show");
+    sliderEl.setAttribute("aria-valuenow", "50");
+    sliderEl.setAttribute("aria-valuemin", "0");
+    sliderEl.setAttribute("aria-valuemax", "100");
+    sliderEl.classList.add("ina-ss-img__slider");
+    sliderEl.addEventListener("input", () => {
+      imgCompare.style.setProperty(
+        `--${PREFIX}-position`,
+        `${sliderEl.value}%`
+      );
+    });
+    const sliderLineEl = document.createElement("div");
+    sliderLineEl.classList.add("ina-ss-img__slider-line");
+    const sliderButtonEl = document.createElement("button");
+    sliderButtonEl.classList.add("ina-ss-img__slider-button");
+    imgCompare.appendChild(sliderEl);
+    imgCompare.appendChild(sliderLineEl);
+    imgCompare.appendChild(sliderButtonEl);
+  });
+}
+
+// src/js/bundle.js
+if (typeof window !== void 0) {
+  document.addEventListener("DOMContentLoaded", () => {
+    initAccordion();
+    initBanner();
+    initButtonGroup();
+    initDatepicker();
+    initDropdown();
+    initFileUploadBase();
+    initFileUploadItem();
+    initImgCompare();
+    initModal();
+    initRangeDatepicker();
+    initTab();
+    initTimepicker();
+    initToggle();
+  });
+}
+
 // src/js/index.js
 var PREFIX = "ina-ss";
 function initAll() {

package/package.json

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