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

@idds/js 1.2.1 → 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

@@ -3006,15 +3006,14 @@ var InaUI = (() => {
           );
         });
         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) {
@@ -3035,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();
                 }
               });
@@ -3103,14 +3097,77 @@ 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);
           }
@@ -3134,22 +3191,7 @@ var InaUI = (() => {
           }
           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

@@ -3086,15 +3086,14 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
         );
       });
       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) {
@@ -3115,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();
               }
             });
@@ -3183,14 +3177,77 @@ 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);
         }
@@ -3214,22 +3271,7 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
         }
         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.1",
+  "version": "1.2.2",
   "publishConfig": {
     "access": "public"
   },