npm - @idds/js - Versions diffs - 1.2.0 → 1.2.2 - Mend

@idds/js 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.iife.js CHANGED Viewed

@@ -2991,23 +2991,29 @@ var InaUI = (() => {
           const isSelected = normSelected.includes(itemValue) || showCustomization && item.textContent.trim() === customizationLabel && normSelected.some(
             (val) => !Array.from(items).filter((i) => i.textContent.trim() !== customizationLabel).map((i) => i.getAttribute("data-value")).includes(val) && val !== ""
           );
+          const isDisabled = item.hasAttribute("disabled");
           if (isSelected) {
             item.classList.add(`${PREFIX4}-chip__item--selected`);
           } else {
             item.classList.remove(`${PREFIX4}-chip__item--selected`);
           }
-          item.setAttribute("tabindex", index2 === focusedIndex ? "0" : "-1");
+          if (isDisabled) {
+            item.classList.add(`${PREFIX4}-chip__item--disabled`);
+          }
+          item.setAttribute(
+            "tabindex",
+            index2 === focusedIndex && !isDisabled ? "0" : "-1"
+          );
         });
         if (showCustomization) {
-          const standardValues = Array.from(items).filter((item) => item.textContent.trim() !== customizationLabel).map((item) => item.getAttribute("data-value"));
+          const isToggleBtn2 = (i) => i.hasAttribute("data-customization-toggle") || i.textContent.trim() === customizationLabel;
+          const standardValues = Array.from(items).filter((item) => !isToggleBtn2(item)).map((item) => item.getAttribute("data-value"));
           const customValues = normSelected.filter(
             (val) => !standardValues.includes(val) && val !== ""
           );
           const isStandard = customValues.length === 0;
           const primaryCustomValue = customValues[customValues.length - 1] || "";
-          const toggleBtn = Array.from(items).find(
-            (i) => i.textContent.trim() === customizationLabel
-          );
+          const toggleBtn = Array.from(items).find(isToggleBtn2);
           const showInput = toggleBtn && normSelected.includes(toggleBtn.getAttribute("data-value")) || !isStandard && normSelected.length > 0;
           if (showInput) {
             if (!customFieldContainer) {
@@ -3028,16 +3034,11 @@ var InaUI = (() => {
              `;
               input = customFieldContainer.querySelector("input");
               input.addEventListener("blur", (e) => {
-                const val = e.target.value;
-                if (val.trim()) {
-                  handleSelect(val.trim());
-                }
+                commitCustomValue(e.target);
               });
               input.addEventListener("keydown", (e) => {
                 if (e.key === "Enter") {
-                  if (e.target.value.trim()) {
-                    handleSelect(e.target.value.trim());
-                  }
+                  commitCustomValue(e.target);
                   e.target.blur();
                 }
               });
@@ -3069,7 +3070,13 @@ var InaUI = (() => {
           finalVal = newSelected;
           selectedValue = newSelected.join(",");
         } else {
-          selectedValue = val;
+          const normSelected = getNormalizedSelected();
+          if (normSelected.includes(val)) {
+            selectedValue = "";
+            finalVal = "";
+          } else {
+            selectedValue = val;
+          }
         }
         container.setAttribute("data-selected", selectedValue);
         updateUI();
@@ -3090,47 +3097,101 @@ var InaUI = (() => {
           currentFocusedIndex = index2;
         }
       };
+      const commitCustomValue = (inputEl) => {
+        const finalValue = inputEl.value.trim();
+        let normSelected = getNormalizedSelected();
+        const toggleBtn = Array.from(items).find(isToggleBtn);
+        const toggleVal = toggleBtn ? toggleBtn.getAttribute("data-value") : null;
+        const standardValues = Array.from(items).filter((i) => !isToggleBtn(i)).map((i) => i.getAttribute("data-value"));
+        const customValues = normSelected.filter(
+          (val) => !standardValues.includes(val) && val !== "" && val !== toggleVal
+        );
+        const primaryCustomValue = customValues[customValues.length - 1];
+        if (primaryCustomValue) {
+          normSelected = normSelected.filter((v) => v !== primaryCustomValue);
+        }
+        if (finalValue !== "") {
+          if (!normSelected.includes(finalValue)) {
+            normSelected.push(finalValue);
+          }
+        }
+        if (isMultiple) {
+          selectedValue = normSelected.join(",");
+        } else {
+          selectedValue = finalValue;
+        }
+        updateUI();
+        const changeEvent = new CustomEvent(`${PREFIX4}-chip:change`, {
+          detail: { value: isMultiple ? getNormalizedSelected() : selectedValue },
+          bubbles: true
+        });
+        container.dispatchEvent(changeEvent);
+      };
       items.forEach((item, index2) => {
         item.addEventListener("click", (e) => {
+          if (item.hasAttribute("disabled")) return;
+          currentFocusedIndex = index2;
           const val = item.getAttribute("data-value");
-          const label = item.textContent.trim();
-          if (showCustomization && label === customizationLabel) {
-            handleSelect(val);
+          if (showCustomization && isToggleBtn(item)) {
+            const normSelected = getNormalizedSelected();
+            let newSelected = [...normSelected];
+            const standardValues = Array.from(items).filter((i) => !isToggleBtn(i)).map((i) => i.getAttribute("data-value"));
+            const customValues = normSelected.filter(
+              (v) => !standardValues.includes(v) && v !== "" && v !== val
+            );
+            const primaryCustomValue = customValues[customValues.length - 1];
+            const isInputVisible = normSelected.includes(val) || customValues.length > 0;
+            if (isInputVisible) {
+              newSelected = newSelected.filter((v) => v !== val);
+              if (primaryCustomValue) {
+                if (isMultiple) {
+                  newSelected = newSelected.filter(
+                    (v) => v !== primaryCustomValue
+                  );
+                } else {
+                  newSelected = [];
+                }
+              }
+              if (isMultiple) {
+                selectedValue = newSelected.join(",");
+              } else {
+                selectedValue = newSelected.length ? newSelected[0] : "";
+              }
+              updateUI();
+              const changeEvent = new CustomEvent(`${PREFIX4}-chip:change`, {
+                detail: {
+                  value: isMultiple ? getNormalizedSelected() : selectedValue
+                },
+                bubbles: true
+              });
+              container.dispatchEvent(changeEvent);
+            } else {
+              handleSelect(val);
+            }
           } else {
             handleSelect(val);
           }
         });
-        item.addEventListener("focus", () => {
-          currentFocusedIndex = index2;
-        });
         item.addEventListener("keydown", (e) => {
+          if (item.hasAttribute("disabled")) return;
           if (e.key === "ArrowRight" || e.key === "ArrowDown") {
             e.preventDefault();
-            const nextIndex = (index2 + 1) % items.length;
+            let nextIndex = (index2 + 1) % items.length;
+            while (items[nextIndex].hasAttribute("disabled") && nextIndex !== index2) {
+              nextIndex = (nextIndex + 1) % items.length;
+            }
             setItemFocus(nextIndex);
           } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
             e.preventDefault();
-            const prevIndex = (index2 - 1 + items.length) % items.length;
+            let prevIndex = (index2 - 1 + items.length) % items.length;
+            while (items[prevIndex].hasAttribute("disabled") && prevIndex !== index2) {
+              prevIndex = (prevIndex - 1 + items.length) % items.length;
+            }
             setItemFocus(prevIndex);
           }
           if (e.key === " " || e.key === "Enter") {
             e.preventDefault();
-            const val = item.getAttribute("data-value");
-            const label = item.textContent.trim();
-            if (showCustomization && label === customizationLabel) {
-              handleSelect(val);
-              setTimeout(() => {
-                const customFieldContainer2 = container.querySelector(
-                  `.${PREFIX4}-chip__custom-field`
-                );
-                if (customFieldContainer2) {
-                  const inputEl = customFieldContainer2.querySelector("input");
-                  if (inputEl) inputEl.focus();
-                }
-              }, 50);
-            } else {
-              handleSelect(val);
-            }
+            item.click();
           }
         });
       });

package/dist/index.js CHANGED Viewed

@@ -3071,23 +3071,29 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
         const isSelected = normSelected.includes(itemValue) || showCustomization && item.textContent.trim() === customizationLabel && normSelected.some(
           (val) => !Array.from(items).filter((i) => i.textContent.trim() !== customizationLabel).map((i) => i.getAttribute("data-value")).includes(val) && val !== ""
         );
+        const isDisabled = item.hasAttribute("disabled");
         if (isSelected) {
           item.classList.add(`${PREFIX5}-chip__item--selected`);
         } else {
           item.classList.remove(`${PREFIX5}-chip__item--selected`);
         }
-        item.setAttribute("tabindex", index2 === focusedIndex ? "0" : "-1");
+        if (isDisabled) {
+          item.classList.add(`${PREFIX5}-chip__item--disabled`);
+        }
+        item.setAttribute(
+          "tabindex",
+          index2 === focusedIndex && !isDisabled ? "0" : "-1"
+        );
       });
       if (showCustomization) {
-        const standardValues = Array.from(items).filter((item) => item.textContent.trim() !== customizationLabel).map((item) => item.getAttribute("data-value"));
+        const isToggleBtn2 = (i) => i.hasAttribute("data-customization-toggle") || i.textContent.trim() === customizationLabel;
+        const standardValues = Array.from(items).filter((item) => !isToggleBtn2(item)).map((item) => item.getAttribute("data-value"));
         const customValues = normSelected.filter(
           (val) => !standardValues.includes(val) && val !== ""
         );
         const isStandard = customValues.length === 0;
         const primaryCustomValue = customValues[customValues.length - 1] || "";
-        const toggleBtn = Array.from(items).find(
-          (i) => i.textContent.trim() === customizationLabel
-        );
+        const toggleBtn = Array.from(items).find(isToggleBtn2);
         const showInput = toggleBtn && normSelected.includes(toggleBtn.getAttribute("data-value")) || !isStandard && normSelected.length > 0;
         if (showInput) {
           if (!customFieldContainer) {
@@ -3108,16 +3114,11 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
              `;
             input = customFieldContainer.querySelector("input");
             input.addEventListener("blur", (e) => {
-              const val = e.target.value;
-              if (val.trim()) {
-                handleSelect(val.trim());
-              }
+              commitCustomValue(e.target);
             });
             input.addEventListener("keydown", (e) => {
               if (e.key === "Enter") {
-                if (e.target.value.trim()) {
-                  handleSelect(e.target.value.trim());
-                }
+                commitCustomValue(e.target);
                 e.target.blur();
               }
             });
@@ -3149,7 +3150,13 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
         finalVal = newSelected;
         selectedValue = newSelected.join(",");
       } else {
-        selectedValue = val;
+        const normSelected = getNormalizedSelected();
+        if (normSelected.includes(val)) {
+          selectedValue = "";
+          finalVal = "";
+        } else {
+          selectedValue = val;
+        }
       }
       container.setAttribute("data-selected", selectedValue);
       updateUI();
@@ -3170,47 +3177,101 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
         currentFocusedIndex = index2;
       }
     };
+    const commitCustomValue = (inputEl) => {
+      const finalValue = inputEl.value.trim();
+      let normSelected = getNormalizedSelected();
+      const toggleBtn = Array.from(items).find(isToggleBtn);
+      const toggleVal = toggleBtn ? toggleBtn.getAttribute("data-value") : null;
+      const standardValues = Array.from(items).filter((i) => !isToggleBtn(i)).map((i) => i.getAttribute("data-value"));
+      const customValues = normSelected.filter(
+        (val) => !standardValues.includes(val) && val !== "" && val !== toggleVal
+      );
+      const primaryCustomValue = customValues[customValues.length - 1];
+      if (primaryCustomValue) {
+        normSelected = normSelected.filter((v) => v !== primaryCustomValue);
+      }
+      if (finalValue !== "") {
+        if (!normSelected.includes(finalValue)) {
+          normSelected.push(finalValue);
+        }
+      }
+      if (isMultiple) {
+        selectedValue = normSelected.join(",");
+      } else {
+        selectedValue = finalValue;
+      }
+      updateUI();
+      const changeEvent = new CustomEvent(`${PREFIX5}-chip:change`, {
+        detail: { value: isMultiple ? getNormalizedSelected() : selectedValue },
+        bubbles: true
+      });
+      container.dispatchEvent(changeEvent);
+    };
     items.forEach((item, index2) => {
       item.addEventListener("click", (e) => {
+        if (item.hasAttribute("disabled")) return;
+        currentFocusedIndex = index2;
         const val = item.getAttribute("data-value");
-        const label = item.textContent.trim();
-        if (showCustomization && label === customizationLabel) {
-          handleSelect(val);
+        if (showCustomization && isToggleBtn(item)) {
+          const normSelected = getNormalizedSelected();
+          let newSelected = [...normSelected];
+          const standardValues = Array.from(items).filter((i) => !isToggleBtn(i)).map((i) => i.getAttribute("data-value"));
+          const customValues = normSelected.filter(
+            (v) => !standardValues.includes(v) && v !== "" && v !== val
+          );
+          const primaryCustomValue = customValues[customValues.length - 1];
+          const isInputVisible = normSelected.includes(val) || customValues.length > 0;
+          if (isInputVisible) {
+            newSelected = newSelected.filter((v) => v !== val);
+            if (primaryCustomValue) {
+              if (isMultiple) {
+                newSelected = newSelected.filter(
+                  (v) => v !== primaryCustomValue
+                );
+              } else {
+                newSelected = [];
+              }
+            }
+            if (isMultiple) {
+              selectedValue = newSelected.join(",");
+            } else {
+              selectedValue = newSelected.length ? newSelected[0] : "";
+            }
+            updateUI();
+            const changeEvent = new CustomEvent(`${PREFIX5}-chip:change`, {
+              detail: {
+                value: isMultiple ? getNormalizedSelected() : selectedValue
+              },
+              bubbles: true
+            });
+            container.dispatchEvent(changeEvent);
+          } else {
+            handleSelect(val);
+          }
         } else {
           handleSelect(val);
         }
       });
-      item.addEventListener("focus", () => {
-        currentFocusedIndex = index2;
-      });
       item.addEventListener("keydown", (e) => {
+        if (item.hasAttribute("disabled")) return;
         if (e.key === "ArrowRight" || e.key === "ArrowDown") {
           e.preventDefault();
-          const nextIndex = (index2 + 1) % items.length;
+          let nextIndex = (index2 + 1) % items.length;
+          while (items[nextIndex].hasAttribute("disabled") && nextIndex !== index2) {
+            nextIndex = (nextIndex + 1) % items.length;
+          }
           setItemFocus(nextIndex);
         } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
           e.preventDefault();
-          const prevIndex = (index2 - 1 + items.length) % items.length;
+          let prevIndex = (index2 - 1 + items.length) % items.length;
+          while (items[prevIndex].hasAttribute("disabled") && prevIndex !== index2) {
+            prevIndex = (prevIndex - 1 + items.length) % items.length;
+          }
           setItemFocus(prevIndex);
         }
         if (e.key === " " || e.key === "Enter") {
           e.preventDefault();
-          const val = item.getAttribute("data-value");
-          const label = item.textContent.trim();
-          if (showCustomization && label === customizationLabel) {
-            handleSelect(val);
-            setTimeout(() => {
-              const customFieldContainer2 = container.querySelector(
-                `.${PREFIX5}-chip__custom-field`
-              );
-              if (customFieldContainer2) {
-                const inputEl = customFieldContainer2.querySelector("input");
-                if (inputEl) inputEl.focus();
-              }
-            }, 50);
-          } else {
-            handleSelect(val);
-          }
+          item.click();
         }
       });
     });

package/package.json CHANGED Viewed

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