@idds/js 1.0.80 → 1.0.82

package/dist/index.iife.js

@@ -25,6 +25,7 @@ var InaUI = (() => {
     initCheckbox: () => initCheckbox,
     initChip: () => initChip,
     initDatepicker: () => initDatepicker,
+    initDrawer: () => initDrawer,
     initDropdown: () => initDropdown,
     initFileUpload: () => initFileUpload,
     initFileUploadBase: () => initFileUploadBase,
@@ -960,8 +961,86 @@ var InaUI = (() => {
     });
   }
 
-  // src/js/components/stateful/select-dropdown.js
+  // src/js/components/stateless/drawer.js
   var PREFIX2 = "ina";
+  function initDrawer(rootSelector = `.${PREFIX2}-drawer`) {
+    const drawers = document.querySelectorAll(rootSelector);
+    const closeDrawer = (drawer) => {
+      if (!drawer) return;
+      drawer.classList.add(`${PREFIX2}-drawer--closing`);
+      drawer.classList.remove(`${PREFIX2}-drawer--open`);
+      const onAnimationEnd = () => {
+        drawer.classList.remove(`${PREFIX2}-drawer--closing`);
+        drawer.style.display = "none";
+        document.body.style.overflow = "";
+        drawer.removeEventListener("animationend", onAnimationEnd);
+      };
+      setTimeout(() => {
+        if (drawer.style.display !== "none") onAnimationEnd();
+      }, 300);
+      drawer.addEventListener("animationend", onAnimationEnd, { once: true });
+    };
+    const openDrawer = (drawer) => {
+      if (!drawer) return;
+      drawer.style.display = "flex";
+      document.body.style.overflow = "hidden";
+      drawer.offsetHeight;
+      drawer.classList.add(`${PREFIX2}-drawer--open`);
+      drawer.dispatchEvent(new CustomEvent("drawer:open"));
+    };
+    drawers.forEach((drawer) => {
+      if (drawer.__inaDrawerInitialized) return;
+      const isPersistent = drawer.getAttribute("data-persistent") === "true";
+      const closeBtns = drawer.querySelectorAll(
+        `.${PREFIX2}-drawer__close-button`
+      );
+      closeBtns.forEach((btn) => {
+        btn.addEventListener("click", () => closeDrawer(drawer));
+      });
+      const backdrop = drawer.querySelector(`.${PREFIX2}-drawer__backdrop`);
+      if (backdrop) {
+        backdrop.addEventListener("click", (e) => {
+          if (!isPersistent) {
+            closeDrawer(drawer);
+          }
+        });
+      }
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && drawer.style.display === "flex" && !isPersistent) {
+          closeDrawer(drawer);
+        }
+      });
+      drawer.__inaDrawerInitialized = true;
+    });
+    document.body.addEventListener("click", (e) => {
+      const trigger = e.target.closest('[data-trigger="drawer"]');
+      if (trigger) {
+        const targetId = trigger.getAttribute("data-target");
+        if (targetId) {
+          const targetDrawer = document.querySelector(targetId);
+          if (targetDrawer) {
+            openDrawer(targetDrawer);
+          }
+        }
+      }
+      const closeTrigger = e.target.closest('[data-dismiss="drawer"]');
+      if (closeTrigger) {
+        const targetId = closeTrigger.getAttribute("data-target");
+        let targetDrawer;
+        if (targetId) {
+          targetDrawer = document.querySelector(targetId);
+        } else {
+          targetDrawer = closeTrigger.closest(`.${PREFIX2}-drawer`);
+        }
+        if (targetDrawer) {
+          closeDrawer(targetDrawer);
+        }
+      }
+    });
+  }
+
+  // src/js/components/stateful/select-dropdown.js
+  var PREFIX3 = "ina";
   function getDropdownState(root) {
     return {
       isOpen: root.getAttribute("data-state") === "open",
@@ -973,9 +1052,9 @@ var InaUI = (() => {
   function setDropdownState(root, newState) {
     if (newState.isOpen !== void 0) {
       root.setAttribute("data-state", newState.isOpen ? "open" : "closed");
-      const trigger = root.querySelector(`.${PREFIX2}-select-dropdown__trigger`);
+      const trigger = root.querySelector(`.${PREFIX3}-select-dropdown__trigger`);
       if (trigger) trigger.setAttribute("aria-expanded", newState.isOpen);
-      const panel = root.querySelector(`.${PREFIX2}-select-dropdown__panel`);
+      const panel = root.querySelector(`.${PREFIX3}-select-dropdown__panel`);
       if (panel) {
         if (newState.isOpen) {
           panel.style.removeProperty("display");
@@ -990,20 +1069,20 @@ var InaUI = (() => {
     }
   }
   function closeAllSelectDropdowns(exceptRoot = null) {
-    document.querySelectorAll(`.${PREFIX2}-select-dropdown[data-state="open"]`).forEach((root) => {
+    document.querySelectorAll(`.${PREFIX3}-select-dropdown[data-state="open"]`).forEach((root) => {
       if (root !== exceptRoot) {
         setDropdownState(root, { isOpen: false });
       }
     });
   }
   function updateTriggerUI(root, values, isMultiple) {
-    const trigger = root.querySelector(`.${PREFIX2}-select-dropdown__trigger`);
+    const trigger = root.querySelector(`.${PREFIX3}-select-dropdown__trigger`);
     const input = trigger.querySelector("input");
     const textSpan = trigger.querySelector(
-      `.${PREFIX2}-select-dropdown__trigger-text`
+      `.${PREFIX3}-select-dropdown__trigger-text`
     );
     const placeholder = input ? input.getAttribute("placeholder") : textSpan ? textSpan.getAttribute("data-placeholder") : "Select...";
-    const options = root.querySelectorAll(`.${PREFIX2}-select-dropdown__option`);
+    const options = root.querySelectorAll(`.${PREFIX3}-select-dropdown__option`);
     const getLabel = (val) => {
       const opt = Array.from(options).find(
         (o) => o.getAttribute("data-value") === val
@@ -1027,7 +1106,7 @@ var InaUI = (() => {
     } else if (textSpan) {
       textSpan.textContent = values.length > 0 ? label : placeholder;
       textSpan.classList.toggle(
-        `${PREFIX2}-select-dropdown__trigger-text--placeholder`,
+        `${PREFIX3}-select-dropdown__trigger-text--placeholder`,
         values.length === 0
       );
     }
@@ -1036,20 +1115,20 @@ var InaUI = (() => {
       const isSelected = values.includes(val);
       if (isMultiple) {
         opt.classList.toggle(
-          `${PREFIX2}-select-dropdown__option--selected-multiple`,
+          `${PREFIX3}-select-dropdown__option--selected-multiple`,
           isSelected
         );
         const cb = opt.querySelector(
-          `.${PREFIX2}-select-dropdown__option-checkbox`
+          `.${PREFIX3}-select-dropdown__option-checkbox`
         );
         if (cb)
           cb.classList.toggle(
-            `${PREFIX2}-select-dropdown__option-checkbox--checked`,
+            `${PREFIX3}-select-dropdown__option-checkbox--checked`,
             isSelected
           );
       } else {
         opt.classList.toggle(
-          `${PREFIX2}-select-dropdown__option--selected-single`,
+          `${PREFIX3}-select-dropdown__option--selected-single`,
           isSelected
         );
       }
@@ -1059,9 +1138,9 @@ var InaUI = (() => {
     if (window.__inaSelectDropdownInitialized) return;
     document.addEventListener("click", (e) => {
       const target = e.target;
-      const trigger = target.closest(`.${PREFIX2}-select-dropdown__trigger`);
-      const option = target.closest(`.${PREFIX2}-select-dropdown__option`);
-      const root = target.closest(`.${PREFIX2}-select-dropdown`);
+      const trigger = target.closest(`.${PREFIX3}-select-dropdown__trigger`);
+      const option = target.closest(`.${PREFIX3}-select-dropdown__option`);
+      const root = target.closest(`.${PREFIX3}-select-dropdown`);
       if (trigger) {
         if (root) {
           const state = getDropdownState(root);
@@ -1107,12 +1186,12 @@ var InaUI = (() => {
       }
     });
     document.addEventListener("input", (e) => {
-      if (e.target.matches(`.${PREFIX2}-select-dropdown__trigger-input`)) {
-        const root = e.target.closest(`.${PREFIX2}-select-dropdown`);
+      if (e.target.matches(`.${PREFIX3}-select-dropdown__trigger-input`)) {
+        const root = e.target.closest(`.${PREFIX3}-select-dropdown`);
         if (root) {
           const term = e.target.value.toLowerCase();
           const options = root.querySelectorAll(
-            `.${PREFIX2}-select-dropdown__option`
+            `.${PREFIX3}-select-dropdown__option`
           );
           if (root.getAttribute("data-state") !== "open") {
             setDropdownState(root, { isOpen: true });
@@ -2402,27 +2481,27 @@ var InaUI = (() => {
   }
 
   // src/js/components/stateful/chip.js
-  var PREFIX3 = "ina";
-  function initChip(rootSelector = `.${PREFIX3}-chip`) {
+  var PREFIX4 = "ina";
+  function initChip(rootSelector = `.${PREFIX4}-chip`) {
     const chips = document.querySelectorAll(rootSelector);
     chips.forEach((container) => {
       if (container.__inaChipInitialized) return;
       const showCustomization = container.getAttribute("data-show-customization") === "true";
       const customizationLabel = container.getAttribute("data-customization-label") || "Kustomisasi";
       let selectedValue = container.getAttribute("data-selected") || "";
-      const list = container.querySelector(`.${PREFIX3}-chip__list`);
-      const items = list ? list.querySelectorAll(`.${PREFIX3}-chip__item`) : [];
+      const list = container.querySelector(`.${PREFIX4}-chip__list`);
+      const items = list ? list.querySelectorAll(`.${PREFIX4}-chip__item`) : [];
       let customFieldContainer = container.querySelector(
-        `.${PREFIX3}-chip__custom-field`
+        `.${PREFIX4}-chip__custom-field`
       );
       const updateUI = () => {
         items.forEach((item) => {
           const itemValue = item.getAttribute("data-value");
           const isSelected = itemValue === selectedValue;
           if (isSelected) {
-            item.classList.add(`${PREFIX3}-chip__item--selected`);
+            item.classList.add(`${PREFIX4}-chip__item--selected`);
           } else {
-            item.classList.remove(`${PREFIX3}-chip__item--selected`);
+            item.classList.remove(`${PREFIX4}-chip__item--selected`);
           }
         });
         if (showCustomization) {
@@ -2440,17 +2519,17 @@ var InaUI = (() => {
           if (showInput) {
             if (!customFieldContainer) {
               customFieldContainer = document.createElement("div");
-              customFieldContainer.className = `${PREFIX3}-chip__custom-field`;
+              customFieldContainer.className = `${PREFIX4}-chip__custom-field`;
               container.appendChild(customFieldContainer);
             }
             let input = customFieldContainer.querySelector(
-              `.${PREFIX3}-chip__input`
+              `.${PREFIX4}-chip__input`
             );
             if (!input) {
               customFieldContainer.innerHTML = `
-               <div class="${PREFIX3}-text-field ${PREFIX3}-text-field--size-medium ${PREFIX3}-text-field--variant-outline ${PREFIX3}-chip__input">
-                 <div class="${PREFIX3}-text-field__wrapper">
-                   <input type="text" class="${PREFIX3}-text-field__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? selectedValue : ""}" />
+               <div class="${PREFIX4}-text-field ${PREFIX4}-text-field--size-medium ${PREFIX4}-text-field--variant-outline ${PREFIX4}-chip__input">
+                 <div class="${PREFIX4}-text-field__wrapper">
+                   <input type="text" class="${PREFIX4}-text-field__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? selectedValue : ""}" />
                  </div>
                </div>
              `;
@@ -3127,6 +3206,7 @@ var InaUI = (() => {
   if (typeof window !== void 0) {
     document.addEventListener("DOMContentLoaded", () => {
       initAccordion();
+      initDrawer();
       initButtonGroup();
       initCheckbox();
       initDatepicker();

package/dist/index.js

@@ -962,18 +962,24 @@ function initDrawer(rootSelector = `.${PREFIX2}-drawer`) {
   const closeDrawer = (drawer) => {
     if (!drawer) return;
     drawer.classList.add(`${PREFIX2}-drawer--closing`);
+    drawer.classList.remove(`${PREFIX2}-drawer--open`);
     const onAnimationEnd = () => {
       drawer.classList.remove(`${PREFIX2}-drawer--closing`);
       drawer.style.display = "none";
       document.body.style.overflow = "";
       drawer.removeEventListener("animationend", onAnimationEnd);
     };
+    setTimeout(() => {
+      if (drawer.style.display !== "none") onAnimationEnd();
+    }, 300);
     drawer.addEventListener("animationend", onAnimationEnd, { once: true });
   };
   const openDrawer = (drawer) => {
     if (!drawer) return;
     drawer.style.display = "flex";
     document.body.style.overflow = "hidden";
+    drawer.offsetHeight;
+    drawer.classList.add(`${PREFIX2}-drawer--open`);
     drawer.dispatchEvent(new CustomEvent("drawer:open"));
   };
   drawers.forEach((drawer) => {

package/package.json

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