@idds/js 1.0.54 → 1.0.56

package/dist/index.iife.js

@@ -21,8 +21,8 @@ var InaUI = (() => {
   var bundle_exports = {};
   __export(bundle_exports, {
     initAccordion: () => initAccordion,
-    initBanner: () => initBanner,
     initButtonGroup: () => initButtonGroup,
+    initCheckbox: () => initCheckbox,
     initDatepicker: () => initDatepicker,
     initDropdown: () => initDropdown,
     initFileUploadBase: () => initFileUploadBase,
@@ -36,6 +36,50 @@ var InaUI = (() => {
     showToast: () => showToast
   });
 
+  // src/js/components/stateful/checkbox.js
+  function initCheckbox(rootSelector = `.${PREFIX}-checkbox`) {
+    const checkboxes = document.querySelectorAll(rootSelector);
+    checkboxes.forEach((checkboxLabel) => {
+      if (checkboxLabel.__inaCheckboxInitialized) return;
+      const input = checkboxLabel.querySelector(`.${PREFIX}-checkbox__input`);
+      const box = checkboxLabel.querySelector(`.${PREFIX}-checkbox__box`);
+      if (!input || !box) return;
+      const ICON_CHECK = `
+      <svg class="${PREFIX}-checkbox__icon" width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    `;
+      const ICON_MINUS = `
+      <svg class="${PREFIX}-checkbox__icon" width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    `;
+      const updateState = () => {
+        box.classList.remove(`${PREFIX}-checkbox__box--checked`);
+        box.classList.remove(`${PREFIX}-checkbox__box--unchecked`);
+        box.classList.remove(`${PREFIX}-checkbox__box--indeterminate`);
+        checkboxLabel.classList.remove(`${PREFIX}-checkbox--disabled`);
+        if (input.disabled) {
+          checkboxLabel.classList.add(`${PREFIX}-checkbox--disabled`);
+        }
+        if (input.indeterminate) {
+          box.classList.add(`${PREFIX}-checkbox__box--indeterminate`);
+          box.innerHTML = ICON_MINUS;
+        } else if (input.checked) {
+          box.classList.add(`${PREFIX}-checkbox__box--checked`);
+          box.innerHTML = ICON_CHECK;
+        } else {
+          box.classList.add(`${PREFIX}-checkbox__box--unchecked`);
+          box.innerHTML = "";
+        }
+      };
+      updateState();
+      input.addEventListener("change", updateState);
+      checkboxLabel.__inaCheckboxInitialized = true;
+      checkboxLabel.updateState = updateState;
+    });
+  }
+
   // src/js/components/stateful/tab.js
   function initTab(rootSelector = `.${PREFIX}-tab`) {
     document.querySelectorAll(rootSelector).forEach((tab) => {
@@ -927,68 +971,6 @@ var InaUI = (() => {
     });
   }
 
-  // src/js/components/stateless/banner.js
-  function initBanner(rootSelector = `.${PREFIX}-banner`) {
-    document.querySelectorAll(rootSelector).forEach((banner) => {
-      const mediaQuery = window.matchMedia("(max-width: 1279px)");
-      function updateElText(targetEl, mediaQuery2) {
-        targetEl.textContent = mediaQuery2.matches ? "Situs ini merupakan platform resmi pemerintah." : "Situs ini merupakan platform resmi pemerintah Indonesia yang dikelola oleh INA Digital.";
-      }
-      const contentEl = document.createElement("div");
-      contentEl.className = `${PREFIX}-banner__content`;
-      const iconEl = document.createElement("div");
-      iconEl.className = `${PREFIX}-banner__icon`;
-      const wrapperEl = document.createElement("div");
-      wrapperEl.className = `${PREFIX}-banner__wrapper`;
-      const headerEl = document.createElement("div");
-      headerEl.className = `${PREFIX}-banner__header`;
-      const headerWrapperEl = document.createElement("div");
-      headerWrapperEl.className = `${PREFIX}-banner__header-wrapper`;
-      const headerTitleEl = document.createElement("p");
-      headerTitleEl.className = `${PREFIX}-banner__title`;
-      headerTitleEl.textContent = "Situs ini merupakan platform resmi pemerintah. ";
-      updateElText(headerTitleEl, mediaQuery);
-      const identityEl = document.createElement("a");
-      identityEl.href = "#";
-      identityEl.className = `${PREFIX}-banner__identity`;
-      identityEl.textContent = "Lebih Lanjut";
-      identityEl.addEventListener("click", (e) => {
-        e.preventDefault();
-        banner.classList.toggle("open");
-      });
-      const chevronEl = document.createElement("button");
-      chevronEl.className = `${PREFIX}-banner__chevron`;
-      chevronEl.addEventListener("click", (e) => {
-        e.preventDefault();
-        banner.classList.toggle("open");
-        const isOpen = banner.classList.contains("open");
-        headerTitleEl.textContent = isOpen ? "Situs ini merupakan platform resmi pemerintah Indonesia yang dikelola oleh INA Digital." : "Situs ini merupakan platform resmi pemerintah. ";
-      });
-      headerWrapperEl.appendChild(headerTitleEl);
-      headerWrapperEl.appendChild(identityEl);
-      headerEl.appendChild(headerWrapperEl);
-      headerEl.appendChild(chevronEl);
-      const bodyEl = document.createElement("div");
-      bodyEl.className = `${PREFIX}-banner__body`;
-      const bodyTitleEl = document.createElement("p");
-      bodyTitleEl.className = `${PREFIX}-banner__title`;
-      bodyTitleEl.textContent = "INA Digital adalah inisiatif pemerintah Indonesia untuk membangun ekosistem layanan publik digital yang terintegrasi, aman, dan mudah digunakan oleh masyarakat.";
-      const descEl = document.createElement("p");
-      descEl.className = `${PREFIX}-banner__desc`;
-      descEl.textContent = "Pastikan untuk memperhatikan ikon kunci (\u{1F512}) dan alamat https:// sebagai penanda keamanan.";
-      bodyEl.appendChild(bodyTitleEl);
-      bodyEl.appendChild(descEl);
-      wrapperEl.appendChild(headerEl);
-      wrapperEl.appendChild(bodyEl);
-      contentEl.appendChild(iconEl);
-      contentEl.appendChild(wrapperEl);
-      banner.appendChild(contentEl);
-      mediaQuery.addEventListener("change", () => {
-        updateElText(headerTitleEl, mediaQuery);
-      });
-    });
-  }
-
   // src/js/components/stateful/file-upload-base.js
   function initFileUploadBase(rootSelector = `.${PREFIX}-file-base`) {
     document.querySelectorAll(rootSelector).forEach((fileUploadBase) => {
@@ -1375,28 +1357,45 @@ var InaUI = (() => {
   var PREFIX = "ina";
 
   // src/js/components/stateful/button-group.js
-  function initButtonGroup(rootSelector = `.${PREFIX}-btn-group`) {
-    document.querySelectorAll(rootSelector).forEach((buttonGroup) => {
-      const buttons = buttonGroup.querySelectorAll(`.${PREFIX}-btn`);
+  function initButtonGroup(rootSelector = `.${PREFIX}-button-group`) {
+    const buttonGroups = document.querySelectorAll(rootSelector);
+    buttonGroups.forEach((buttonGroup) => {
+      if (buttonGroup.__inaButtonGroupInitialized) return;
+      const buttons = buttonGroup.querySelectorAll(
+        `.${PREFIX}-button-group__button`
+      );
+      const updateState = (clickedButton) => {
+        const isDisabled = clickedButton.hasAttribute("disabled") || clickedButton.classList.contains(
+          `${PREFIX}-button-group__button--disabled`
+        );
+        if (isDisabled) return;
+        const value = clickedButton.getAttribute("data-value");
+        buttons.forEach((btn) => {
+          if (btn === clickedButton) {
+            btn.classList.add(`${PREFIX}-button-group__button--selected`);
+            btn.setAttribute("aria-pressed", "true");
+          } else {
+            btn.classList.remove(`${PREFIX}-button-group__button--selected`);
+            btn.setAttribute("aria-pressed", "false");
+          }
+        });
+        buttonGroup.dispatchEvent(
+          new CustomEvent("button-group:change", {
+            detail: { value },
+            bubbles: true,
+            composed: true
+          })
+        );
+      };
       buttons.forEach((button) => {
-        function updateState() {
-          const index = Array.from(buttons).indexOf(button);
-          buttons.forEach((button2, i) => {
-            button2.classList.remove(`${PREFIX}-btn--active`);
-            if (i === index) {
-              button2.classList.add(`${PREFIX}-btn--active`);
-            }
-          });
-          button.dispatchEvent(
-            new CustomEvent("button:change", {
-              detail: { activeIndex: index },
-              bubbles: true,
-              composed: true
-            })
-          );
-        }
-        button.addEventListener("click", updateState);
+        button.addEventListener("click", (e) => {
+          if (button.type !== "submit") {
+            e.preventDefault();
+          }
+          updateState(button);
+        });
       });
+      buttonGroup.__inaButtonGroupInitialized = true;
     });
   }
 
@@ -1838,8 +1837,8 @@ var InaUI = (() => {
   if (typeof window !== void 0) {
     document.addEventListener("DOMContentLoaded", () => {
       initAccordion();
-      initBanner();
       initButtonGroup();
+      initCheckbox();
       initDatepicker();
       initDropdown();
       initFileUploadBase();

package/dist/index.js

@@ -1,26 +1,87 @@
 // src/js/components/stateful/button-group.js
-function initButtonGroup(rootSelector = `.${PREFIX}-btn-group`) {
-  document.querySelectorAll(rootSelector).forEach((buttonGroup) => {
-    const buttons = buttonGroup.querySelectorAll(`.${PREFIX}-btn`);
+function initButtonGroup(rootSelector = `.${PREFIX}-button-group`) {
+  const buttonGroups = document.querySelectorAll(rootSelector);
+  buttonGroups.forEach((buttonGroup) => {
+    if (buttonGroup.__inaButtonGroupInitialized) return;
+    const buttons = buttonGroup.querySelectorAll(
+      `.${PREFIX}-button-group__button`
+    );
+    const updateState = (clickedButton) => {
+      const isDisabled = clickedButton.hasAttribute("disabled") || clickedButton.classList.contains(
+        `${PREFIX}-button-group__button--disabled`
+      );
+      if (isDisabled) return;
+      const value = clickedButton.getAttribute("data-value");
+      buttons.forEach((btn) => {
+        if (btn === clickedButton) {
+          btn.classList.add(`${PREFIX}-button-group__button--selected`);
+          btn.setAttribute("aria-pressed", "true");
+        } else {
+          btn.classList.remove(`${PREFIX}-button-group__button--selected`);
+          btn.setAttribute("aria-pressed", "false");
+        }
+      });
+      buttonGroup.dispatchEvent(
+        new CustomEvent("button-group:change", {
+          detail: { value },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
     buttons.forEach((button) => {
-      function updateState() {
-        const index = Array.from(buttons).indexOf(button);
-        buttons.forEach((button2, i) => {
-          button2.classList.remove(`${PREFIX}-btn--active`);
-          if (i === index) {
-            button2.classList.add(`${PREFIX}-btn--active`);
-          }
-        });
-        button.dispatchEvent(
-          new CustomEvent("button:change", {
-            detail: { activeIndex: index },
-            bubbles: true,
-            composed: true
-          })
-        );
-      }
-      button.addEventListener("click", updateState);
+      button.addEventListener("click", (e) => {
+        if (button.type !== "submit") {
+          e.preventDefault();
+        }
+        updateState(button);
+      });
     });
+    buttonGroup.__inaButtonGroupInitialized = true;
+  });
+}
+
+// src/js/components/stateful/checkbox.js
+function initCheckbox(rootSelector = `.${PREFIX}-checkbox`) {
+  const checkboxes = document.querySelectorAll(rootSelector);
+  checkboxes.forEach((checkboxLabel) => {
+    if (checkboxLabel.__inaCheckboxInitialized) return;
+    const input = checkboxLabel.querySelector(`.${PREFIX}-checkbox__input`);
+    const box = checkboxLabel.querySelector(`.${PREFIX}-checkbox__box`);
+    if (!input || !box) return;
+    const ICON_CHECK = `
+      <svg class="${PREFIX}-checkbox__icon" width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    `;
+    const ICON_MINUS = `
+      <svg class="${PREFIX}-checkbox__icon" width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    `;
+    const updateState = () => {
+      box.classList.remove(`${PREFIX}-checkbox__box--checked`);
+      box.classList.remove(`${PREFIX}-checkbox__box--unchecked`);
+      box.classList.remove(`${PREFIX}-checkbox__box--indeterminate`);
+      checkboxLabel.classList.remove(`${PREFIX}-checkbox--disabled`);
+      if (input.disabled) {
+        checkboxLabel.classList.add(`${PREFIX}-checkbox--disabled`);
+      }
+      if (input.indeterminate) {
+        box.classList.add(`${PREFIX}-checkbox__box--indeterminate`);
+        box.innerHTML = ICON_MINUS;
+      } else if (input.checked) {
+        box.classList.add(`${PREFIX}-checkbox__box--checked`);
+        box.innerHTML = ICON_CHECK;
+      } else {
+        box.classList.add(`${PREFIX}-checkbox__box--unchecked`);
+        box.innerHTML = "";
+      }
+    };
+    updateState();
+    input.addEventListener("change", updateState);
+    checkboxLabel.__inaCheckboxInitialized = true;
+    checkboxLabel.updateState = updateState;
   });
 }
 
@@ -915,68 +976,6 @@ function initDropdown(rootSelector = `.${PREFIX}-dropdown`) {
   });
 }
 
-// src/js/components/stateless/banner.js
-function initBanner(rootSelector = `.${PREFIX}-banner`) {
-  document.querySelectorAll(rootSelector).forEach((banner) => {
-    const mediaQuery = window.matchMedia("(max-width: 1279px)");
-    function updateElText(targetEl, mediaQuery2) {
-      targetEl.textContent = mediaQuery2.matches ? "Situs ini merupakan platform resmi pemerintah." : "Situs ini merupakan platform resmi pemerintah Indonesia yang dikelola oleh INA Digital.";
-    }
-    const contentEl = document.createElement("div");
-    contentEl.className = `${PREFIX}-banner__content`;
-    const iconEl = document.createElement("div");
-    iconEl.className = `${PREFIX}-banner__icon`;
-    const wrapperEl = document.createElement("div");
-    wrapperEl.className = `${PREFIX}-banner__wrapper`;
-    const headerEl = document.createElement("div");
-    headerEl.className = `${PREFIX}-banner__header`;
-    const headerWrapperEl = document.createElement("div");
-    headerWrapperEl.className = `${PREFIX}-banner__header-wrapper`;
-    const headerTitleEl = document.createElement("p");
-    headerTitleEl.className = `${PREFIX}-banner__title`;
-    headerTitleEl.textContent = "Situs ini merupakan platform resmi pemerintah. ";
-    updateElText(headerTitleEl, mediaQuery);
-    const identityEl = document.createElement("a");
-    identityEl.href = "#";
-    identityEl.className = `${PREFIX}-banner__identity`;
-    identityEl.textContent = "Lebih Lanjut";
-    identityEl.addEventListener("click", (e) => {
-      e.preventDefault();
-      banner.classList.toggle("open");
-    });
-    const chevronEl = document.createElement("button");
-    chevronEl.className = `${PREFIX}-banner__chevron`;
-    chevronEl.addEventListener("click", (e) => {
-      e.preventDefault();
-      banner.classList.toggle("open");
-      const isOpen = banner.classList.contains("open");
-      headerTitleEl.textContent = isOpen ? "Situs ini merupakan platform resmi pemerintah Indonesia yang dikelola oleh INA Digital." : "Situs ini merupakan platform resmi pemerintah. ";
-    });
-    headerWrapperEl.appendChild(headerTitleEl);
-    headerWrapperEl.appendChild(identityEl);
-    headerEl.appendChild(headerWrapperEl);
-    headerEl.appendChild(chevronEl);
-    const bodyEl = document.createElement("div");
-    bodyEl.className = `${PREFIX}-banner__body`;
-    const bodyTitleEl = document.createElement("p");
-    bodyTitleEl.className = `${PREFIX}-banner__title`;
-    bodyTitleEl.textContent = "INA Digital adalah inisiatif pemerintah Indonesia untuk membangun ekosistem layanan publik digital yang terintegrasi, aman, dan mudah digunakan oleh masyarakat.";
-    const descEl = document.createElement("p");
-    descEl.className = `${PREFIX}-banner__desc`;
-    descEl.textContent = "Pastikan untuk memperhatikan ikon kunci (\u{1F512}) dan alamat https:// sebagai penanda keamanan.";
-    bodyEl.appendChild(bodyTitleEl);
-    bodyEl.appendChild(descEl);
-    wrapperEl.appendChild(headerEl);
-    wrapperEl.appendChild(bodyEl);
-    contentEl.appendChild(iconEl);
-    contentEl.appendChild(wrapperEl);
-    banner.appendChild(contentEl);
-    mediaQuery.addEventListener("change", () => {
-      updateElText(headerTitleEl, mediaQuery);
-    });
-  });
-}
-
 // src/js/components/stateful/file-upload-base.js
 function initFileUploadBase(rootSelector = `.${PREFIX}-file-base`) {
   document.querySelectorAll(rootSelector).forEach((fileUploadBase) => {
@@ -1728,8 +1727,8 @@ function initImgCompare(rootSelector = `.${PREFIX}-img-compare`) {
 if (typeof window !== void 0) {
   document.addEventListener("DOMContentLoaded", () => {
     initAccordion();
-    initBanner();
     initButtonGroup();
+    initCheckbox();
     initDatepicker();
     initDropdown();
     initFileUploadBase();
@@ -1749,6 +1748,7 @@ function initAll() {
   initAccordion();
   initBanner();
   initButtonGroup();
+  initCheckbox();
   initDatepicker();
   initDropdown();
   initFileUploadBase();

package/package.json

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