@idds/js 1.0.37 → 1.0.39

package/dist/index.js

@@ -109,17 +109,24 @@ function initAccordion(rootSelector = `.${PREFIX}-accordion`) {
 // src/js/components/stateful/datepicker.js
 function initDatepicker() {
   document.querySelectorAll(".ina-date-picker").forEach((datepicker) => {
+    if (datepicker.dataset.initialized === "true") return;
+    datepicker.dataset.initialized = "true";
+    const mode = datepicker.dataset.mode || "single";
+    const format = datepicker.dataset.format || "d MMMM yyyy";
     const trigger = datepicker.querySelector(".ina-date-picker__trigger");
     const triggerText = trigger.querySelector(".ina-date-picker__trigger-text");
     const panel = datepicker.querySelector(".ina-date-picker__panel");
+    panel.style.display = "none";
     let panelContent = panel.querySelector(".ina-date-picker__panel-content");
     if (!panelContent) {
       panelContent = document.createElement("div");
       panelContent.className = "ina-date-picker__panel-content";
       panel.appendChild(panelContent);
     }
-    let currentDate = /* @__PURE__ */ new Date();
+    let viewDate = /* @__PURE__ */ new Date();
     let selectedDate = null;
+    let selectedDates = [];
+    let rangeDate = [null, null];
     let isOpen = false;
     const MONTHS_ID = [
       "Januari",
@@ -151,18 +158,67 @@ function initDatepicker() {
     ];
     const DAYS_SHORT = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
     function formatDate(date) {
+      if (!date) return "";
       const day = date.getDate().toString().padStart(2, "0");
       const monthIndex = date.getMonth();
       const year = date.getFullYear();
       return `${day} ${MONTHS_SHORT_ID[monthIndex]} ${year}`;
     }
-    function createIcon(name, size = 16) {
-      if (name === "chevron-left") {
-        return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`;
-      }
-      if (name === "chevron-right") {
-        return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`;
+    function updateTrigger() {
+      if (mode === "single") {
+        if (selectedDate) {
+          triggerText.textContent = formatDate(selectedDate);
+          triggerText.classList.add("ina-date-picker__trigger-text--value");
+          triggerText.classList.remove(
+            "ina-date-picker__trigger-text--placeholder"
+          );
+        } else {
+          triggerText.textContent = "Pilih Tanggal";
+          triggerText.classList.remove("ina-date-picker__trigger-text--value");
+          triggerText.classList.add(
+            "ina-date-picker__trigger-text--placeholder"
+          );
+        }
+      } else if (mode === "range") {
+        if (rangeDate[0] && rangeDate[1]) {
+          const start = formatDate(rangeDate[0]);
+          const end = formatDate(rangeDate[1]);
+          triggerText.textContent = `${start} - ${end}`;
+          triggerText.classList.add("ina-date-picker__trigger-text--value");
+          triggerText.classList.remove(
+            "ina-date-picker__trigger-text--placeholder"
+          );
+        } else if (rangeDate[0]) {
+          triggerText.textContent = `${formatDate(rangeDate[0])} - ...`;
+          triggerText.classList.add("ina-date-picker__trigger-text--value");
+        } else {
+          triggerText.textContent = "Pilih Rentang Tanggal";
+          triggerText.classList.remove("ina-date-picker__trigger-text--value");
+          triggerText.classList.add(
+            "ina-date-picker__trigger-text--placeholder"
+          );
+        }
+      } else if (mode === "multiple") {
+        if (selectedDates.length > 0) {
+          triggerText.textContent = `${selectedDates.length} Tanggal Terpilih`;
+          triggerText.classList.add("ina-date-picker__trigger-text--value");
+          triggerText.classList.remove(
+            "ina-date-picker__trigger-text--placeholder"
+          );
+        } else {
+          triggerText.textContent = "Pilih Beberapa Tanggal";
+          triggerText.classList.remove("ina-date-picker__trigger-text--value");
+          triggerText.classList.add(
+            "ina-date-picker__trigger-text--placeholder"
+          );
+        }
       }
+    }
+    function createIcon(name, size = 16) {
+      if (name === "chevron-left")
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6l6 6" /></svg>`;
+      if (name === "chevron-right")
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6l-6 6" /></svg>`;
       return "";
     }
     function createMonthPicker(initialMonth, onChange) {
@@ -173,16 +229,10 @@ function initDatepicker() {
       const pickerTrigger = document.createElement("button");
       pickerTrigger.type = "button";
       pickerTrigger.className = "ina-month-picker__trigger ina-month-picker__trigger--size-sm";
-      const updateTriggerText = () => {
-        pickerTrigger.innerHTML = `
-                <span class="ina-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>
-             `;
+      const updateText = () => {
+        pickerTrigger.innerHTML = `<span class="ina-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>`;
       };
-      updateTriggerText();
-      pickerTrigger.addEventListener("click", (e) => {
-        e.stopPropagation();
-        togglePicker(!isPickerOpen);
-      });
+      updateText();
       const pickerPanel = document.createElement("div");
       pickerPanel.className = "ina-month-picker__panel";
       const grid = document.createElement("div");
@@ -197,21 +247,18 @@ function initDatepicker() {
         btn.addEventListener("click", (e) => {
           e.stopPropagation();
           currentMonthIdx = idx;
-          updateTriggerText();
-          grid.querySelectorAll(".ina-month-picker__month-option").forEach((b, i) => {
-            if (i === idx)
-              b.classList.add("ina-month-picker__month-option--selected");
-            else
-              b.classList.remove("ina-month-picker__month-option--selected");
-          });
+          updateText();
           togglePicker(false);
           onChange(idx);
         });
         grid.appendChild(btn);
       });
       pickerPanel.appendChild(grid);
-      container.appendChild(pickerTrigger);
-      container.appendChild(pickerPanel);
+      container.append(pickerTrigger, pickerPanel);
+      pickerTrigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        togglePicker(!isPickerOpen);
+      });
       function togglePicker(show) {
         isPickerOpen = show;
         if (show) {
@@ -229,13 +276,7 @@ function initDatepicker() {
         element: container,
         setMonth: (m) => {
           currentMonthIdx = m;
-          updateTriggerText();
-          grid.querySelectorAll(".ina-month-picker__month-option").forEach((b, i) => {
-            if (i === m)
-              b.classList.add("ina-month-picker__month-option--selected");
-            else
-              b.classList.remove("ina-month-picker__month-option--selected");
-          });
+          updateText();
         }
       };
     }
@@ -248,16 +289,10 @@ function initDatepicker() {
       const pickerTrigger = document.createElement("button");
       pickerTrigger.type = "button";
       pickerTrigger.className = "ina-year-picker__trigger ina-year-picker__trigger--size-sm";
-      const updateTriggerText = () => {
-        pickerTrigger.innerHTML = `
-                <span class="ina-year-picker__trigger-text">${currentYearVal}</span>
-             `;
+      const updateText = () => {
+        pickerTrigger.innerHTML = `<span class="ina-year-picker__trigger-text">${currentYearVal}</span>`;
       };
-      updateTriggerText();
-      pickerTrigger.addEventListener("click", (e) => {
-        e.stopPropagation();
-        togglePicker(!isPickerOpen);
-      });
+      updateText();
       const pickerPanel = document.createElement("div");
       pickerPanel.className = "ina-year-picker__panel";
       const header = document.createElement("div");
@@ -298,7 +333,7 @@ function initDatepicker() {
           btn.addEventListener("click", (e) => {
             e.stopPropagation();
             currentYearVal = y;
-            updateTriggerText();
+            updateText();
             togglePicker(false);
             onChange(y);
           });
@@ -307,16 +342,18 @@ function initDatepicker() {
       }
       pickerPanel.append(header, grid);
       container.append(pickerTrigger, pickerPanel);
+      pickerTrigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        togglePicker(!isPickerOpen);
+      });
       function togglePicker(show) {
         isPickerOpen = show;
         if (show) {
           decadeStart = Math.floor(currentYearVal / 20) * 20;
           renderGrid();
           pickerPanel.classList.add("ina-year-picker__panel--open");
-          pickerTrigger.setAttribute("aria-expanded", "true");
         } else {
           pickerPanel.classList.remove("ina-year-picker__panel--open");
-          pickerTrigger.setAttribute("aria-expanded", "false");
         }
       }
       document.addEventListener("click", (e) => {
@@ -326,131 +363,212 @@ function initDatepicker() {
         element: container,
         setYear: (y) => {
           currentYearVal = y;
-          updateTriggerText();
+          updateText();
         }
       };
     }
-    function renderCalendar() {
-      panelContent.innerHTML = "";
-      const year = currentDate.getFullYear();
-      const month = currentDate.getMonth();
-      const calendarContainer = document.createElement("div");
-      calendarContainer.className = "ina-date-picker__calendar-container";
+    function renderCalendarGrid(baseDate, isNextMonth = false) {
+      const year = baseDate.getFullYear();
+      const month = baseDate.getMonth();
+      const container = document.createElement("div");
+      if (!isNextMonth) {
+        container.className = "ina-date-picker__calendar-container";
+      } else {
+        container.className = "ina-date-picker__calendar";
+      }
       const header = document.createElement("div");
-      header.className = "ina-date-picker__calendar-header";
-      const prevBtn = document.createElement("button");
-      prevBtn.className = "ina-date-picker__nav-button";
-      prevBtn.type = "button";
-      prevBtn.innerHTML = createIcon("chevron-left", 20);
-      prevBtn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        currentDate.setMonth(month - 1);
-        renderCalendar();
-      });
-      const nextBtn = document.createElement("button");
-      nextBtn.className = "ina-date-picker__nav-button";
-      nextBtn.type = "button";
-      nextBtn.innerHTML = createIcon("chevron-right", 20);
-      nextBtn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        currentDate.setMonth(month + 1);
-        renderCalendar();
-      });
-      const controls = document.createElement("div");
-      controls.className = "ina-date-picker__header-controls";
-      const monthContainer = document.createElement("div");
-      monthContainer.className = "ina-date-picker__dropdown-container";
-      const monthPicker = createMonthPicker(month, (newMonth) => {
-        currentDate.setMonth(newMonth);
-        renderCalendar();
-      });
-      monthContainer.appendChild(monthPicker.element);
-      const yearContainer = document.createElement("div");
-      yearContainer.className = "ina-date-picker__dropdown-container";
-      const yearPicker = createYearPicker(year, (newYear) => {
-        currentDate.setFullYear(newYear);
-        renderCalendar();
-      });
-      yearContainer.appendChild(yearPicker.element);
-      controls.append(monthContainer, yearContainer);
-      header.append(prevBtn, controls, nextBtn);
+      header.className = isNextMonth ? "ina-date-picker__next-month-header" : "ina-date-picker__calendar-header";
+      if (!isNextMonth) {
+        const prevBtn = document.createElement("button");
+        prevBtn.type = "button";
+        prevBtn.className = "ina-date-picker__nav-button";
+        prevBtn.innerHTML = createIcon("chevron-left");
+        prevBtn.onclick = (e) => {
+          e.stopPropagation();
+          viewDate.setMonth(viewDate.getMonth() - 1);
+          render();
+        };
+        header.appendChild(prevBtn);
+      } else {
+        const spacer = document.createElement("div");
+        spacer.style.width = "32px";
+        header.appendChild(spacer);
+      }
+      if (!isNextMonth) {
+        const controls = document.createElement("div");
+        controls.className = "ina-date-picker__header-controls";
+        const monthCont = document.createElement("div");
+        monthCont.className = "ina-date-picker__dropdown-container";
+        const monthPicker = createMonthPicker(month, (m) => {
+          viewDate.setMonth(m);
+          render();
+        });
+        monthCont.appendChild(monthPicker.element);
+        const yearCont = document.createElement("div");
+        yearCont.className = "ina-date-picker__dropdown-container";
+        const yearPicker = createYearPicker(year, (y) => {
+          viewDate.setFullYear(y);
+          render();
+        });
+        yearCont.appendChild(yearPicker.element);
+        controls.append(monthCont, yearCont);
+        header.appendChild(controls);
+      } else {
+        const title = document.createElement("div");
+        title.className = "ina-date-picker__calendar-title";
+        title.textContent = `${MONTHS_ID[month]} ${year}`;
+        header.appendChild(title);
+      }
+      const showNextBtn = mode === "single" && !isNextMonth || isNextMonth;
+      if (showNextBtn) {
+        const nextBtn = document.createElement("button");
+        nextBtn.type = "button";
+        nextBtn.className = "ina-date-picker__nav-button";
+        nextBtn.innerHTML = createIcon("chevron-right");
+        nextBtn.onclick = (e) => {
+          e.stopPropagation();
+          viewDate.setMonth(viewDate.getMonth() + 1);
+          render();
+        };
+        header.appendChild(nextBtn);
+      } else if (!isNextMonth) {
+        const spacer = document.createElement("div");
+        spacer.style.width = "32px";
+        header.appendChild(spacer);
+      }
       const grid = document.createElement("div");
       grid.className = "ina-date-picker__calendar-grid";
-      DAYS_SHORT.forEach((day) => {
+      DAYS_SHORT.forEach((d) => {
         const dh = document.createElement("div");
         dh.className = "ina-date-picker__day-header";
-        dh.textContent = day;
+        dh.textContent = d;
         grid.appendChild(dh);
       });
       const firstDayOfMonth = new Date(year, month, 1).getDay();
       const daysInMonth = new Date(year, month + 1, 0).getDate();
       const daysInPrevMonth = new Date(year, month, 0).getDate();
+      const today = /* @__PURE__ */ new Date();
       for (let i = firstDayOfMonth - 1; i >= 0; i--) {
-        const dayBtn = document.createElement("button");
-        dayBtn.type = "button";
-        dayBtn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
-        dayBtn.textContent = daysInPrevMonth - i;
-        grid.appendChild(dayBtn);
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
+        btn.textContent = daysInPrevMonth - i;
+        grid.appendChild(btn);
       }
-      const today = /* @__PURE__ */ new Date();
       for (let i = 1; i <= daysInMonth; i++) {
-        const dayBtn = document.createElement("button");
-        dayBtn.type = "button";
-        dayBtn.className = "ina-date-picker__day";
-        dayBtn.textContent = i;
+        const date = new Date(year, month, i);
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "ina-date-picker__day";
+        btn.textContent = i;
         let isSelected = false;
-        if (selectedDate && selectedDate.getDate() === i && selectedDate.getMonth() === month && selectedDate.getFullYear() === year) {
-          dayBtn.classList.add("ina-date-picker__day--selected");
-          isSelected = true;
+        let isInRange = false;
+        if (mode === "single" && selectedDate) {
+          if (date.toDateString() === selectedDate.toDateString())
+            isSelected = true;
+        } else if (mode === "multiple") {
+          if (selectedDates.some((d) => d.toDateString() === date.toDateString()))
+            isSelected = true;
+        } else if (mode === "range") {
+          const [start, end] = rangeDate;
+          if (start && date.toDateString() === start.toDateString())
+            isSelected = true;
+          if (end && date.toDateString() === end.toDateString())
+            isSelected = true;
+          if (start && end && date > start && date < end) isInRange = true;
         }
-        if (today.getDate() === i && today.getMonth() === month && today.getFullYear() === year) {
-          dayBtn.classList.add("ina-date-picker__day--today");
-        }
-        if (!isSelected) {
-          dayBtn.classList.add("ina-date-picker__day--hover");
-        }
-        dayBtn.addEventListener("click", (e) => {
+        if (isSelected) btn.classList.add("ina-date-picker__day--selected");
+        if (isInRange) btn.classList.add("ina-date-picker__day--in-range");
+        if (date.toDateString() === today.toDateString())
+          btn.classList.add("ina-date-picker__day--today");
+        if (!isSelected && !isInRange)
+          btn.classList.add("ina-date-picker__day--hover");
+        btn.onclick = (e) => {
           e.stopPropagation();
-          selectedDate = new Date(year, month, i);
-          triggerText.textContent = formatDate(selectedDate);
-          triggerText.classList.add("ina-date-picker__trigger-text--value");
-          triggerText.classList.remove(
-            "ina-date-picker__trigger-text--placeholder"
-          );
+          if (mode === "single") {
+            selectedDate = date;
+            close();
+          } else if (mode === "multiple") {
+            const existsIdx = selectedDates.findIndex(
+              (d) => d.toDateString() === date.toDateString()
+            );
+            if (existsIdx >= 0) selectedDates.splice(existsIdx, 1);
+            else selectedDates.push(date);
+            render();
+          } else if (mode === "range") {
+            const [start, end] = rangeDate;
+            if (!start || start && end) {
+              rangeDate = [date, null];
+            } else {
+              if (date < start) {
+                rangeDate = [date, start];
+              } else {
+                rangeDate = [start, date];
+              }
+              close();
+            }
+            render();
+          }
+          updateTrigger();
           datepicker.dispatchEvent(
-            new CustomEvent("date:changed", { detail: { selectedDate } })
+            new CustomEvent("date:changed", {
+              detail: {
+                selectedDate: mode === "single" ? selectedDate : mode === "multiple" ? selectedDates : rangeDate
+              }
+            })
           );
-          toggle(false);
-        });
-        grid.appendChild(dayBtn);
+        };
+        grid.appendChild(btn);
       }
-      const currentCells = grid.children.length - 7;
-      const remaining = 42 - currentCells;
+      const usedCells = grid.children.length - 7;
+      const remaining = 42 - usedCells;
       for (let i = 1; i <= remaining; i++) {
-        const dayBtn = document.createElement("button");
-        dayBtn.type = "button";
-        dayBtn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
-        dayBtn.textContent = i;
-        grid.appendChild(dayBtn);
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
+        btn.textContent = i;
+        grid.appendChild(btn);
       }
-      calendarContainer.append(header, grid);
-      panelContent.appendChild(calendarContainer);
+      container.append(header, grid);
+      return container;
     }
-    function toggle(show) {
-      isOpen = show;
-      if (show) {
-        panel.classList.add("ina-date-picker__panel--open");
-        renderCalendar();
-      } else {
-        panel.classList.remove("ina-date-picker__panel--open");
+    function render() {
+      panelContent.innerHTML = "";
+      const cal1 = renderCalendarGrid(viewDate);
+      panelContent.appendChild(cal1);
+      if (mode === "range" || mode === "multiple") {
+        const nextMonthDate = new Date(
+          viewDate.getFullYear(),
+          viewDate.getMonth() + 1,
+          1
+        );
+        const cal2 = renderCalendarGrid(nextMonthDate, true);
+        panelContent.appendChild(cal2);
       }
     }
+    function open() {
+      isOpen = true;
+      panel.classList.add("ina-date-picker__panel--open");
+      panel.style.display = "block";
+      render();
+    }
+    function close() {
+      isOpen = false;
+      panel.classList.remove("ina-date-picker__panel--open");
+      panel.style.display = "none";
+    }
+    function toggle() {
+      if (isOpen) close();
+      else open();
+    }
     trigger.addEventListener("click", (e) => {
       e.stopPropagation();
-      toggle(!isOpen);
+      toggle();
     });
     document.addEventListener("click", (e) => {
-      if (!datepicker.contains(e.target)) toggle(false);
+      if (!datepicker.contains(e.target)) {
+        close();
+      }
     });
   });
 }
@@ -1211,53 +1329,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 +1535,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.39",
   "publishConfig": {
     "access": "public"
   },