@idds/js 1.0.63 → 1.0.65

package/dist/index.js

@@ -833,13 +833,14 @@ function initModal(rootSelector = `.${PREFIX}-modal`) {
 }
 
 // src/js/components/stateless/drawer.js
-function initDrawer(rootSelector = `.${PREFIX}-drawer`) {
+var PREFIX2 = "ina";
+function initDrawer(rootSelector = `.${PREFIX2}-drawer`) {
   const drawers = document.querySelectorAll(rootSelector);
   const closeDrawer = (drawer) => {
     if (!drawer) return;
-    drawer.classList.add(`${PREFIX}-drawer--closing`);
+    drawer.classList.add(`${PREFIX2}-drawer--closing`);
     const onAnimationEnd = () => {
-      drawer.classList.remove(`${PREFIX}-drawer--closing`);
+      drawer.classList.remove(`${PREFIX2}-drawer--closing`);
       drawer.style.display = "none";
       document.body.style.overflow = "";
       drawer.removeEventListener("animationend", onAnimationEnd);
@@ -856,12 +857,12 @@ function initDrawer(rootSelector = `.${PREFIX}-drawer`) {
     if (drawer.__inaDrawerInitialized) return;
     const isPersistent = drawer.getAttribute("data-persistent") === "true";
     const closeBtns = drawer.querySelectorAll(
-      `.${PREFIX}-drawer__close-button`
+      `.${PREFIX2}-drawer__close-button`
     );
     closeBtns.forEach((btn) => {
       btn.addEventListener("click", () => closeDrawer(drawer));
     });
-    const backdrop = drawer.querySelector(`.${PREFIX}-drawer__backdrop`);
+    const backdrop = drawer.querySelector(`.${PREFIX2}-drawer__backdrop`);
     if (backdrop) {
       backdrop.addEventListener("click", (e) => {
         if (!isPersistent) {
@@ -894,7 +895,7 @@ function initDrawer(rootSelector = `.${PREFIX}-drawer`) {
       if (targetId) {
         targetDrawer = document.querySelector(targetId);
       } else {
-        targetDrawer = closeTrigger.closest(`.${PREFIX}-drawer`);
+        targetDrawer = closeTrigger.closest(`.${PREFIX2}-drawer`);
       }
       if (targetDrawer) {
         closeDrawer(targetDrawer);
@@ -904,6 +905,7 @@ function initDrawer(rootSelector = `.${PREFIX}-drawer`) {
 }
 
 // src/js/components/stateful/basic-dropdown.js
+var PREFIX3 = "ina";
 var handleDropdownLogic = (rootSelector, triggerSelector, panelSelector, activeClass) => {
   const dropdowns = document.querySelectorAll(rootSelector);
   dropdowns.forEach((dropdown) => {
@@ -916,35 +918,44 @@ var handleDropdownLogic = (rootSelector, triggerSelector, panelSelector, activeC
       const shouldExpand = force !== void 0 ? force : !isExpanded;
       trigger.setAttribute("aria-expanded", shouldExpand);
       if (shouldExpand) {
-        panel.classList.add(activeClass);
-        panel.style.display = "block";
-        if (activeClass) panel.classList.add(activeClass);
+        if (activeClass) {
+          panel.classList.add(activeClass);
+        }
+        panel.style.removeProperty("display");
         if (rootSelector.includes("basic")) {
           const btn = trigger.querySelector(
-            `.${PREFIX}-basic-dropdown__trigger-button`
+            `.${PREFIX3}-basic-dropdown__trigger-button`
           );
           if (btn)
-            btn.classList.add(`${PREFIX}-basic-dropdown__trigger-button--open`);
+            btn.classList.add(`${PREFIX3}-basic-dropdown__trigger-button--open`);
         } else {
-          trigger.classList.add(`${PREFIX}-action-dropdown__trigger--open`);
+          trigger.classList.add(`${PREFIX3}-action-dropdown__trigger--open`);
         }
       } else {
-        if (activeClass) panel.classList.remove(activeClass);
-        panel.style.display = "none";
+        if (activeClass) {
+          panel.classList.remove(activeClass);
+        } else {
+          panel.style.display = "none";
+        }
         if (rootSelector.includes("basic")) {
           const btn = trigger.querySelector(
-            `.${PREFIX}-basic-dropdown__trigger-button`
+            `.${PREFIX3}-basic-dropdown__trigger-button`
           );
           if (btn)
             btn.classList.remove(
-              `${PREFIX}-basic-dropdown__trigger-button--open`
+              `${PREFIX3}-basic-dropdown__trigger-button--open`
             );
         } else {
-          trigger.classList.remove(`${PREFIX}-action-dropdown__trigger--open`);
+          trigger.classList.remove(`${PREFIX3}-action-dropdown__trigger--open`);
         }
       }
     };
-    panel.style.display = "none";
+    if (!activeClass) {
+      panel.style.display = "none";
+    } else {
+      panel.classList.remove(activeClass);
+      panel.style.removeProperty("display");
+    }
     trigger.addEventListener("click", (e) => {
       e.stopPropagation();
       toggle();
@@ -961,7 +972,7 @@ var handleDropdownLogic = (rootSelector, triggerSelector, panelSelector, activeC
     });
     if (rootSelector.includes("action")) {
       panel.addEventListener("click", (e) => {
-        const item = e.target.closest(`.${PREFIX}-action-dropdown__item`);
+        const item = e.target.closest(`.${PREFIX3}-action-dropdown__item`);
         if (item && !item.disabled) {
           toggle(false);
         }
@@ -972,47 +983,48 @@ var handleDropdownLogic = (rootSelector, triggerSelector, panelSelector, activeC
 };
 function initBasicDropdown() {
   handleDropdownLogic(
-    `.${PREFIX}-basic-dropdown`,
-    `.${PREFIX}-basic-dropdown__trigger`,
-    `.${PREFIX}-basic-dropdown__panel`
+    `.${PREFIX3}-basic-dropdown`,
+    `.${PREFIX3}-basic-dropdown__trigger`,
+    `.${PREFIX3}-basic-dropdown__panel`
   );
 }
 function initActionDropdown() {
   handleDropdownLogic(
-    `.${PREFIX}-action-dropdown`,
-    `.${PREFIX}-action-dropdown__trigger`,
-    `.${PREFIX}-action-dropdown__menu`,
-    `${PREFIX}-action-dropdown__menu--visible`
+    `.${PREFIX3}-action-dropdown`,
+    `.${PREFIX3}-action-dropdown__trigger`,
+    `.${PREFIX3}-action-dropdown__menu`,
+    `${PREFIX3}-action-dropdown__menu--visible`
   );
 }
 
 // src/js/components/stateful/select-dropdown.js
-function initSelectDropdown(rootSelector = `.${PREFIX}-select-dropdown`) {
+var PREFIX4 = "ina";
+function initSelectDropdown(rootSelector = `.${PREFIX4}-select-dropdown`) {
   document.querySelectorAll(rootSelector).forEach((dropdown) => {
     if (dropdown.__inaSelectDropdownInitialized) return;
     const isMultiple = dropdown.getAttribute("data-multiple") === "true";
     const isSearchable = dropdown.getAttribute("data-searchable") !== "false";
     const trigger = dropdown.querySelector(
-      `.${PREFIX}-select-dropdown__trigger`
+      `.${PREFIX4}-select-dropdown__trigger`
     );
     const input = dropdown.querySelector(
-      `.${PREFIX}-select-dropdown__trigger-input`
+      `.${PREFIX4}-select-dropdown__trigger-input`
     );
-    const panel = dropdown.querySelector(`.${PREFIX}-select-dropdown__panel`);
+    const panel = dropdown.querySelector(`.${PREFIX4}-select-dropdown__panel`);
     const optionsContainer = dropdown.querySelector(
-      `.${PREFIX}-select-dropdown__options`
+      `.${PREFIX4}-select-dropdown__options`
     );
     if (!trigger || !panel) return;
     let isOpen = false;
     let selectedValues = [];
     const options = panel.querySelectorAll(
-      `.${PREFIX}-select-dropdown__option`
+      `.${PREFIX4}-select-dropdown__option`
     );
     options.forEach((opt) => {
       if (opt.classList.contains(
-        `${PREFIX}-select-dropdown__option--selected-single`
+        `${PREFIX4}-select-dropdown__option--selected-single`
       ) || opt.classList.contains(
-        `${PREFIX}-select-dropdown__option--selected-multiple`
+        `${PREFIX4}-select-dropdown__option--selected-multiple`
       )) {
         const val = getOptionValue(opt);
         if (val) selectedValues.push(val);
@@ -1024,7 +1036,7 @@ function initSelectDropdown(rootSelector = `.${PREFIX}-select-dropdown`) {
       isOpen = shouldOpen;
       trigger.setAttribute("aria-expanded", isOpen);
       if (isOpen) {
-        panel.style.display = "block";
+        panel.style.removeProperty("display");
         if (input) input.focus();
       } else {
         panel.style.display = "none";
@@ -1039,7 +1051,7 @@ function initSelectDropdown(rootSelector = `.${PREFIX}-select-dropdown`) {
     }
     function updateTriggerUI() {
       const triggerText = trigger.querySelector(
-        `.${PREFIX}-select-dropdown__trigger-text`
+        `.${PREFIX4}-select-dropdown__trigger-text`
       );
       if (isMultiple) {
         let label = "";
@@ -1064,7 +1076,7 @@ function initSelectDropdown(rootSelector = `.${PREFIX}-select-dropdown`) {
         } else if (triggerText) {
           triggerText.textContent = label;
           triggerText.classList.toggle(
-            `${PREFIX}-select-dropdown__trigger-text--placeholder`,
+            `${PREFIX4}-select-dropdown__trigger-text--placeholder`,
             selectedValues.length === 0
           );
         }
@@ -1084,7 +1096,7 @@ function initSelectDropdown(rootSelector = `.${PREFIX}-select-dropdown`) {
         } else if (triggerText) {
           triggerText.textContent = label;
           triggerText.classList.toggle(
-            `${PREFIX}-select-dropdown__trigger-text--placeholder`,
+            `${PREFIX4}-select-dropdown__trigger-text--placeholder`,
             !val
           );
         }
@@ -1098,37 +1110,37 @@ function initSelectDropdown(rootSelector = `.${PREFIX}-select-dropdown`) {
         if (idx > -1) {
           selectedValues.splice(idx, 1);
           option.classList.remove(
-            `${PREFIX}-select-dropdown__option--selected-multiple`
+            `${PREFIX4}-select-dropdown__option--selected-multiple`
           );
           const checkbox = option.querySelector(
-            `.${PREFIX}-select-dropdown__option-checkbox`
+            `.${PREFIX4}-select-dropdown__option-checkbox`
           );
           if (checkbox)
             checkbox.classList.remove(
-              `${PREFIX}-select-dropdown__option-checkbox--checked`
+              `${PREFIX4}-select-dropdown__option-checkbox--checked`
             );
         } else {
           selectedValues.push(val);
           option.classList.add(
-            `${PREFIX}-select-dropdown__option--selected-multiple`
+            `${PREFIX4}-select-dropdown__option--selected-multiple`
           );
           const checkbox = option.querySelector(
-            `.${PREFIX}-select-dropdown__option-checkbox`
+            `.${PREFIX4}-select-dropdown__option-checkbox`
           );
           if (checkbox)
             checkbox.classList.add(
-              `${PREFIX}-select-dropdown__option-checkbox--checked`
+              `${PREFIX4}-select-dropdown__option-checkbox--checked`
             );
         }
       } else {
         selectedValues = [val];
         options.forEach((o) => {
           o.classList.remove(
-            `${PREFIX}-select-dropdown__option--selected-single`
+            `${PREFIX4}-select-dropdown__option--selected-single`
           );
         });
         option.classList.add(
-          `${PREFIX}-select-dropdown__option--selected-single`
+          `${PREFIX4}-select-dropdown__option--selected-single`
         );
         toggle(false);
       }
@@ -2470,26 +2482,27 @@ if (typeof window !== void 0) {
 }
 
 // src/js/components/stateful/chip.js
-function initChip(rootSelector = `.${PREFIX}-chip`) {
+var PREFIX5 = "ina";
+function initChip(rootSelector = `.${PREFIX5}-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(`.${PREFIX}-chip__list`);
-    const items = list ? list.querySelectorAll(`.${PREFIX}-chip__item`) : [];
+    const list = container.querySelector(`.${PREFIX5}-chip__list`);
+    const items = list ? list.querySelectorAll(`.${PREFIX5}-chip__item`) : [];
     let customFieldContainer = container.querySelector(
-      `.${PREFIX}-chip__custom-field`
+      `.${PREFIX5}-chip__custom-field`
     );
     const updateUI = () => {
       items.forEach((item) => {
         const itemValue = item.getAttribute("data-value");
         const isSelected = itemValue === selectedValue;
         if (isSelected) {
-          item.classList.add(`${PREFIX}-chip__item--selected`);
+          item.classList.add(`${PREFIX5}-chip__item--selected`);
         } else {
-          item.classList.remove(`${PREFIX}-chip__item--selected`);
+          item.classList.remove(`${PREFIX5}-chip__item--selected`);
         }
       });
       if (showCustomization) {
@@ -2507,17 +2520,17 @@ function initChip(rootSelector = `.${PREFIX}-chip`) {
         if (showInput) {
           if (!customFieldContainer) {
             customFieldContainer = document.createElement("div");
-            customFieldContainer.className = `${PREFIX}-chip__custom-field`;
+            customFieldContainer.className = `${PREFIX5}-chip__custom-field`;
             container.appendChild(customFieldContainer);
           }
           let input = customFieldContainer.querySelector(
-            `.${PREFIX}-chip__input`
+            `.${PREFIX5}-chip__input`
           );
           if (!input) {
             customFieldContainer.innerHTML = `
-               <div class="${PREFIX}-text-field ${PREFIX}-text-field--size-medium ${PREFIX}-text-field--variant-outline ${PREFIX}-chip__input">
-                 <div class="${PREFIX}-text-field__wrapper">
-                   <input type="text" class="${PREFIX}-text-field__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? selectedValue : ""}" />
+               <div class="${PREFIX5}-text-field ${PREFIX5}-text-field--size-medium ${PREFIX5}-text-field--variant-outline ${PREFIX5}-chip__input">
+                 <div class="${PREFIX5}-text-field__wrapper">
+                   <input type="text" class="${PREFIX5}-text-field__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? selectedValue : ""}" />
                  </div>
                </div>
              `;

package/package.json

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