@idds/js 1.0.68 → 1.0.69

package/dist/index.js

@@ -1163,6 +1163,30 @@ function initSelectDropdown() {
   window.__inaSelectDropdownInitialized = true;
 }
 
+// src/js/components/stateful/radio-button.js
+function initRadioButton() {
+  const radioGroups = document.querySelectorAll(`.${PREFIX}-radio-input`);
+  radioGroups.forEach((group) => {
+    if (group.dataset.initialized === "true") return;
+    group.dataset.initialized = "true";
+    const inputs = group.querySelectorAll('input[type="radio"]');
+    const displayTargetId = group.dataset.displayTarget;
+    const displayTarget = displayTargetId ? document.getElementById(displayTargetId) : null;
+    const updateDisplay = () => {
+      if (!displayTarget) return;
+      const selected = Array.from(inputs).find((input) => input.checked);
+      const value = selected ? selected.value : "";
+      displayTarget.textContent = `Selected: ${value || "None"}`;
+    };
+    if (inputs.length > 0) {
+      inputs.forEach((input) => {
+        input.addEventListener("change", updateDisplay);
+      });
+      updateDisplay();
+    }
+  });
+}
+
 // 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>`,
@@ -1686,150 +1710,6 @@ function initFileUploadItem(rootSelector = `.${PREFIX}-file-item`) {
   });
 }
 
-// src/js/components/stateful/dropdown.js
-function initDropdown(rootSelector = `.${PREFIX}-dropdown`) {
-  document.querySelectorAll(rootSelector).forEach((dropdown) => {
-    const trigger = dropdown.querySelector(`.${PREFIX}-dropdown__trigger`);
-    const input = dropdown.querySelector(`.${PREFIX}-dropdown__input`);
-    const menu = dropdown.querySelector(`.${PREFIX}-dropdown__menu`);
-    const menuItems = menu.querySelectorAll("li[role='option']");
-    const menuId = menu.id;
-    let activeIndex = -1;
-    menuItems.forEach((item, index) => {
-      item.id = `${menuId}-item-${index}`;
-    });
-    const toggleMenu = (show) => {
-      const isCurrentlyShown = dropdown.classList.contains("show");
-      const isShown = show !== void 0 ? show : !isCurrentlyShown;
-      if (isShown === isCurrentlyShown) {
-        return;
-      }
-      dropdown.classList.toggle("show", isShown);
-      trigger.setAttribute("aria-expanded", isShown);
-      if (isShown) {
-        input.focus();
-      } else {
-        input.blur();
-        removeHighlight();
-        activeIndex = -1;
-        input.removeAttribute("aria-activedescendant");
-      }
-    };
-    const filterItems = () => {
-      const filterValue = input.value.toLowerCase();
-      let hasVisibleItems = false;
-      activeIndex = -1;
-      removeHighlight();
-      input.removeAttribute("aria-activedescendant");
-      const activeItem = menu.querySelector("li[role='option'].selected");
-      if (activeItem && input.value !== activeItem.textContent.trim()) {
-        activeItem.classList.remove("selected");
-      }
-      menuItems.forEach((item) => {
-        const itemText = item.textContent.toLowerCase();
-        const isMatch = itemText.includes(filterValue);
-        item.classList.toggle("hidden", !isMatch);
-        if (isMatch) hasVisibleItems = true;
-      });
-      if (!dropdown.classList.contains("show") && hasVisibleItems) {
-        toggleMenu(true);
-      }
-    };
-    const selectItem = (item) => {
-      const itemText = item.textContent.trim();
-      input.value = itemText;
-      menuItems.forEach((li) => {
-        li.classList.remove("selected");
-      });
-      if (item) {
-        item.classList.add("selected");
-        dropdown.dispatchEvent(
-          new CustomEvent("dropdown:changed", {
-            detail: { value: itemText }
-          })
-        );
-      }
-      toggleMenu(false);
-    };
-    const setHighlight = (index) => {
-      removeHighlight();
-      const visibleItems = menu.querySelectorAll(
-        "li[role='option']:not(.hidden)"
-      );
-      if (visibleItems.length === 0) return;
-      if (index < 0) index = 0;
-      else if (index >= visibleItems.length) index = visibleItems.length - 1;
-      const itemToHighlight = visibleItems[index];
-      if (itemToHighlight) {
-        itemToHighlight.classList.add("highlighted");
-        input.setAttribute("aria-activedescendant", itemToHighlight.id);
-        itemToHighlight.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest"
-        });
-        activeIndex = index;
-      }
-    };
-    const removeHighlight = () => {
-      menuItems.forEach((item) => item.classList.remove("highlighted"));
-    };
-    trigger.addEventListener("click", () => {
-      toggleMenu();
-    });
-    input.addEventListener("input", filterItems);
-    menu.addEventListener("click", (e) => {
-      const option = e.target.closest("li[role='option']");
-      if (option) {
-        e.preventDefault();
-        selectItem(option);
-      }
-    });
-    document.addEventListener("click", (e) => {
-      if (!dropdown.contains(e.target)) {
-        toggleMenu(false);
-      }
-    });
-    input.addEventListener("keydown", (e) => {
-      const { key } = e;
-      const isMenuOpen = dropdown.classList.contains("show");
-      switch (key) {
-        case "ArrowDown":
-          e.preventDefault();
-          if (!isMenuOpen) {
-            toggleMenu(true);
-          }
-          setHighlight(activeIndex + 1);
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          if (isMenuOpen) {
-            setHighlight(activeIndex - 1);
-          }
-          break;
-        case "Enter":
-          e.preventDefault();
-          const firstVisible = menu.querySelector(
-            "li[role='option']:not(.hidden)"
-          );
-          const activeItem = menu.querySelector(".highlighted");
-          if (isMenuOpen && activeItem) {
-            selectItem(activeItem);
-          } else if (isMenuOpen && firstVisible) {
-            toggleMenu(false);
-          }
-          break;
-        case "Escape":
-          e.preventDefault();
-          toggleMenu(false);
-          break;
-        case "Tab":
-          toggleMenu(false);
-          break;
-      }
-    });
-  });
-}
-
 // src/js/components/stateful/range-datepicker.js
 function initRangeDatepicker() {
   document.querySelectorAll(".ina-ss-range-datepicker").forEach((rangeDatepicker) => {
@@ -2195,6 +2075,35 @@ 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/components/stateful/timepicker.js
 function initTimepicker() {
   document.querySelectorAll(`.${PREFIX}-time-picker`).forEach((picker) => {
@@ -2405,56 +2314,6 @@ 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();
-    initButtonGroup();
-    initCheckbox();
-    initDatepicker();
-    initDropdown();
-    initFileUpload();
-    initSingleFileUpload();
-    initFileUploadBase();
-    initFileUploadItem();
-    initImgCompare();
-    initModal();
-    initRangeDatepicker();
-    initTab();
-    initTimepicker();
-    initToggle();
-  });
-}
-
 // src/js/components/stateful/chip.js
 var PREFIX5 = "ina";
 function initChip(rootSelector = `.${PREFIX5}-chip`) {
@@ -2564,6 +2423,230 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
   });
 }
 
+// src/js/components/stateful/pagination.js
+function initPagination() {
+  document.querySelectorAll(`.${PREFIX}-pagination`).forEach((container) => {
+    if (container.dataset.initialized === "true") return;
+    container.dataset.initialized = "true";
+    const navButtonsContainer = container.querySelector(
+      `.${PREFIX}-pagination__nav-buttons`
+    );
+    const pageInfo = container.querySelector(
+      `.${PREFIX}-pagination__page-info`
+    );
+    const firstBtn = container.querySelector('[data-action="first"]');
+    const prevBtn = container.querySelector('[data-action="prev"]');
+    const nextBtn = container.querySelector('[data-action="next"]');
+    const lastBtn = container.querySelector('[data-action="last"]');
+    const pageSizeSelect = container.querySelector('[data-role="page-size"]');
+    if (!navButtonsContainer || !pageInfo) return;
+    let currentPage = parseInt(container.dataset.current || "1", 10);
+    let totalPages = parseInt(container.dataset.total || "10", 10);
+    let pageSize = parseInt(container.dataset.pageSize || "10", 10);
+    let pageButtons = [];
+    const updateUI = () => {
+      pageInfo.textContent = `Halaman ${currentPage} dari ${totalPages}`;
+      const isFirst = currentPage === 1;
+      if (firstBtn) {
+        firstBtn.disabled = isFirst;
+        firstBtn.classList.toggle(
+          `${PREFIX}-pagination__nav-button--disabled`,
+          isFirst
+        );
+        firstBtn.classList.toggle(
+          `${PREFIX}-pagination__nav-button--enabled`,
+          !isFirst
+        );
+      }
+      if (prevBtn) {
+        prevBtn.disabled = isFirst;
+        prevBtn.classList.toggle(
+          `${PREFIX}-pagination__nav-button--disabled`,
+          isFirst
+        );
+        prevBtn.classList.toggle(
+          `${PREFIX}-pagination__nav-button--enabled`,
+          !isFirst
+        );
+      }
+      const isLast = currentPage === totalPages;
+      if (nextBtn) {
+        nextBtn.disabled = isLast;
+        nextBtn.classList.toggle(
+          `${PREFIX}-pagination__nav-button--disabled`,
+          isLast
+        );
+        nextBtn.classList.toggle(
+          `${PREFIX}-pagination__nav-button--enabled`,
+          !isLast
+        );
+      }
+      if (lastBtn) {
+        lastBtn.disabled = isLast;
+        lastBtn.classList.toggle(
+          `${PREFIX}-pagination__nav-button--disabled`,
+          isLast
+        );
+        lastBtn.classList.toggle(
+          `${PREFIX}-pagination__nav-button--enabled`,
+          !isLast
+        );
+      }
+      renderPageNumbers();
+    };
+    const renderPageNumbers = () => {
+      let start, end;
+      if (currentPage === 1) {
+        start = 1;
+        end = Math.min(3, totalPages);
+      } else if (currentPage === totalPages) {
+        start = Math.max(1, totalPages - 2);
+        end = totalPages;
+      } else {
+        start = currentPage - 1;
+        end = currentPage + 1;
+      }
+      if (start < 1) start = 1;
+      if (end > totalPages) end = totalPages;
+      pageButtons.forEach((btn) => btn.remove());
+      pageButtons = [];
+      const refNode = nextBtn || null;
+      for (let i = start; i <= end; i++) {
+        const isActive = i === currentPage;
+        const button = document.createElement("button");
+        button.type = "button";
+        button.textContent = i;
+        button.className = `${PREFIX}-pagination__page-button ${PREFIX}-pagination__page-button--${isActive ? "active" : "enabled"}`;
+        button.addEventListener("click", (e) => {
+          e.stopPropagation();
+          if (i !== currentPage) {
+            goToPage(i);
+          }
+        });
+        navButtonsContainer.insertBefore(button, refNode);
+        pageButtons.push(button);
+      }
+    };
+    const goToPage = (page) => {
+      if (page < 1) page = 1;
+      if (page > totalPages) page = totalPages;
+      if (page === currentPage) return;
+      currentPage = page;
+      container.dataset.current = currentPage;
+      updateUI();
+      dispatchChange();
+    };
+    const dispatchChange = () => {
+      container.dispatchEvent(
+        new CustomEvent("pagination:change", {
+          bubbles: true,
+          detail: {
+            page: currentPage,
+            pageSize,
+            totalPages
+          }
+        })
+      );
+    };
+    if (firstBtn)
+      firstBtn.addEventListener("click", () => {
+        if (currentPage > 1) goToPage(1);
+      });
+    if (prevBtn)
+      prevBtn.addEventListener("click", () => {
+        if (currentPage > 1) goToPage(currentPage - 1);
+      });
+    if (nextBtn)
+      nextBtn.addEventListener("click", () => {
+        if (currentPage < totalPages) goToPage(currentPage + 1);
+      });
+    if (lastBtn)
+      lastBtn.addEventListener("click", () => {
+        if (currentPage < totalPages) goToPage(totalPages);
+      });
+    if (pageSizeSelect) {
+      pageSizeSelect.addEventListener("change", (e) => {
+        pageSize = parseInt(e.target.value, 10);
+        currentPage = 1;
+        container.dataset.pageSize = pageSize;
+        container.dataset.current = currentPage;
+        updateUI();
+        dispatchChange();
+      });
+    }
+    updateUI();
+  });
+}
+
+// src/js/components/stateless/toast.js
+function showToast(optionsOrMessage, variant = "default", duration = 3e3) {
+  let message, title, state, style, position, actionHtml;
+  if (typeof optionsOrMessage === "object") {
+    message = optionsOrMessage.message || "";
+    title = optionsOrMessage.title;
+    state = optionsOrMessage.state || "default";
+    style = optionsOrMessage.style || "solid";
+    duration = optionsOrMessage.duration || 3e3;
+    position = optionsOrMessage.position || "top-right";
+    actionHtml = optionsOrMessage.actionHtml || "";
+  } else {
+    message = optionsOrMessage;
+    state = variant;
+    style = "solid";
+    position = "top-right";
+    actionHtml = "";
+  }
+  let containerId = `ina-toast-container-${position}`;
+  let container = document.getElementById(containerId);
+  if (!container) {
+    container = document.createElement("div");
+    container.id = containerId;
+    container.className = `ina-toast-container ina-toast-container--${position}`;
+    document.body.appendChild(container);
+  }
+  const toastItem = document.createElement("div");
+  toastItem.className = "ina-toast-item";
+  const toast = document.createElement("div");
+  toast.className = `ina-toast ina-toast--state-${state} ina-toast--style-${style} ina-toast--visible`;
+  const iconMap = {
+    default: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
+    destructive: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
+    positive: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>'
+  };
+  const iconHtml = iconMap[state] || iconMap.default;
+  let contentHtml = `
+     <div class="ina-toast__icon">${iconHtml}</div>
+     <div class="ina-toast__content">
+        <div class="ina-toast__text-area">
+           ${title ? `<p class="ina-toast__title">${title}</p>` : ""}
+           ${message ? `<p class="ina-toast__description">${message}</p>` : ""}
+        </div>
+        ${actionHtml ? `<div class="ina-toast__action-area">${actionHtml}</div>` : ""}
+     </div>
+     <button class="ina-toast__close-button">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ina-toast__close-icon"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+     </button>
+  `;
+  toast.innerHTML = contentHtml;
+  toastItem.appendChild(toast);
+  const closeBtn = toast.querySelector(".ina-toast__close-button");
+  const close = () => {
+    toast.classList.remove("ina-toast--visible");
+    toast.classList.add("ina-toast--hidden");
+    setTimeout(() => {
+      if (toastItem.parentNode) toastItem.parentNode.removeChild(toastItem);
+      if (container.children.length === 0) {
+        if (container.parentNode) container.parentNode.removeChild(container);
+      }
+    }, 300);
+  };
+  closeBtn.addEventListener("click", close);
+  container.appendChild(toastItem);
+  if (duration > 0) {
+    setTimeout(close, duration);
+  }
+}
+
 // src/js/index.js
 var PREFIX = "ina";
 function initAll() {
@@ -2576,6 +2659,7 @@ function initAll() {
   initBasicDropdown();
   initActionDropdown();
   initSelectDropdown();
+  initRadioButton();
   initFileUpload();
   initSingleFileUpload();
   initFileUploadBase();
@@ -2586,9 +2670,11 @@ function initAll() {
   initTab();
   initToggle();
   initTimepicker();
+  initPagination();
   initChip();
 }
 export {
   PREFIX,
-  initAll
+  initAll,
+  showToast
 };

package/package.json

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