Add option to allow wrapping MultiSelect selected options and show selected options counter

fix #1020

Author: vegegoku

domino-ui/src/main/java/org/dominokit/domino/ui/config/FormsFieldsConfig.java

@@ -146,6 +146,10 @@ default boolean isFormFieldFloatLabelLeft() {
     return false;
   }
 
+  default String multiSelectSelectionCountFormatExpression(int count) {
+    return count + " Selected";
+  }
+
   interface NumberParsers {
     default Function<String, BigDecimal> bigDecimalParser(BigDecimalBox field) {
       return value -> BigDecimal.valueOf(field.parseDouble(value));

domino-ui/src/main/java/org/dominokit/domino/ui/forms/suggest/AbstractSelect.java

@@ -94,7 +94,7 @@ public AbstractSelect() {
         .appendChild(
             fieldInput =
                 div()
-                    .addCss(dui_field_input)
+                    .addCss(dui_field_input, dui_flex_nowrap)
                     .appendChild(placeHolderElement.addCss(dui_field_placeholder)))
         .appendChild(inputElement = input(getType()).addCss(dui_hidden_input))
         .appendChild(

domino-ui/src/main/java/org/dominokit/domino/ui/forms/suggest/CheckOption.java

@@ -37,6 +37,8 @@
  */
 public class CheckOption<V> extends SelectOption<V> {
 
+  private CheckBox checkbox;
+
   /**
    * Creates a new CheckOption with the provided key, value, and text.
    *
@@ -156,7 +158,7 @@ private void initCheckBox() {
         (option, self) -> {
           self.withPrefixElement(
               (menuItem, pre) -> {
-                CheckBox checkbox = CheckBox.create().addCss(dui_minified);
+                checkbox = CheckBox.create().addCss(dui_minified);
                 pre.appendChild(checkbox);
                 checkbox.addChangeListener(
                     (oldValue, newValue) -> {
@@ -166,13 +168,19 @@ private void initCheckBox() {
                         menuItem.deselect();
                       }
                     });
-
-                menuItem.addSelectionHandler(
-                    menuItemValue -> checkbox.withValue(menuItem.isSelected(), true));
-
-                menuItem.addDeselectionHandler(
-                    () -> checkbox.withValue(menuItem.isSelected(), true));
               });
         });
   }
+
+  @Override
+  public SelectOption<V> onSelected() {
+    checkbox.withValue(true, true);
+    return super.onSelected();
+  }
+
+  @Override
+  public SelectOption<V> onDeselected() {
+    checkbox.withValue(false, true);
+    return super.onDeselected();
+  }
 }

domino-ui/src/main/java/org/dominokit/domino/ui/forms/suggest/MultiSelect.java

@@ -17,15 +17,20 @@
 
 import static java.util.Objects.isNull;
 import static java.util.Objects.nonNull;
+import static org.dominokit.domino.ui.style.DisplayCss.dui_hidden;
+import static org.dominokit.domino.ui.style.SpacingCss.dui_flex_nowrap;
 
 import java.util.Arrays;
 import java.util.HashSet;
 import java.util.List;
 import java.util.Optional;
 import java.util.Set;
 import java.util.stream.Collectors;
+import org.dominokit.domino.ui.badges.Badge;
 import org.dominokit.domino.ui.elements.DivElement;
+import org.dominokit.domino.ui.style.BooleanCssClass;
 import org.dominokit.domino.ui.utils.BaseDominoElement;
+import org.dominokit.domino.ui.utils.PrimaryAddOn;
 
 /**
  * Represents a multi-selection dropdown menu UI component, allowing users to select multiple
@@ -45,6 +50,7 @@ public class MultiSelect<V>
     extends AbstractSelect<V, List<V>, DivElement, SelectOption<V>, MultiSelect<V>> {
 
   private Set<SelectOption<V>> selectedOptions = new HashSet<>();
+  private Badge selectionCountBadge;
 
   /**
    * Creates a new instance of {@link MultiSelect} without any predefined label.
@@ -71,6 +77,9 @@ public static <V> MultiSelect<V> create(String label) {
   public MultiSelect() {
     optionsMenu.setMultiSelect(true);
     setAutoCloseOnSelect(false);
+    selectionCountBadge =
+        Badge.create(getConfig().multiSelectSelectionCountFormatExpression(0)).addCss(dui_hidden);
+    appendChild(PrimaryAddOn.of(selectionCountBadge));
   }
 
   /**
@@ -163,6 +172,9 @@ protected void onOptionSelected(SelectOption<V> option, boolean silent) {
     fieldInput.appendChild(option);
     selectedOptions.add(option);
     getInputElement().element().focus();
+    selectionCountBadge.setText(
+        getConfig().multiSelectSelectionCountFormatExpression(selectedOptions.size()));
+    option.onSelected();
   }
 
   /**
@@ -199,6 +211,9 @@ protected void onOptionDeselected(SelectOption<V> option, boolean silent) {
       if (!silent) {
         triggerChangeListeners(oldValue, getValue());
       }
+      selectionCountBadge.setText(
+          getConfig().multiSelectSelectionCountFormatExpression(selectedOptions.size()));
+      option.onDeselected();
     }
   }
 
@@ -243,4 +258,33 @@ protected void onTypingEnd() {
   protected void onOptionRemoved(SelectOption<V> option) {
     selectedOptions.remove(option);
   }
+
+  /**
+   * Sets whether the selection should wrap or not.
+   *
+   * <p>If {@code wrapSelection} is {@code true}, the selection will wrap. Otherwise, it will be
+   * forced to stay on a single line using a no-wrap CSS class.
+   *
+   * @param wrapSelection {@code true} to allow wrapping, {@code false} to prevent wrapping
+   * @return this {@code MultiSelect} instance for method chaining
+   */
+  public MultiSelect<V> setWrapSelection(boolean wrapSelection) {
+    fieldInput.addCss(BooleanCssClass.of(dui_flex_nowrap, !wrapSelection));
+    return this;
+  }
+
+  /**
+   * Sets whether the selection count badge should be visible.
+   *
+   * <p>If {@code showSelectionCount} is {@code true}, the selection count badge will be shown.
+   * Otherwise, it will be hidden using the appropriate CSS class.
+   *
+   * @param showSelectionCount {@code true} to display the selection count badge, {@code false} to
+   *     hide it
+   * @return this {@code MultiSelect} instance for method chaining
+   */
+  public MultiSelect<V> setShowSelectionCount(boolean showSelectionCount) {
+    selectionCountBadge.addCss(BooleanCssClass.of(dui_hidden, !showSelectionCount));
+    return this;
+  }
 }

domino-ui/src/main/java/org/dominokit/domino/ui/forms/suggest/Option.java

@@ -257,6 +257,14 @@ private void cleanHighlight(Node node) {
     }
   }
 
+  public O onSelected() {
+    return (O) this;
+  }
+
+  public O onDeselected() {
+    return (O) this;
+  }
+
   /**
    * Functional interface for supplying an instance of a type {@code T} based on a key and a value.
    *