fix #1090 Add ToggleButton and ToggleButtonGroup componentsAdd ToggleButton and ToggleButtonGroup components

Author: vegegoku

domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/BooleanCssClass.java

@@ -17,6 +17,7 @@
 package org.dominokit.domino.ui.style;
 
 import elemental2.dom.Element;
+import java.util.function.Supplier;
 import org.dominokit.domino.ui.IsElement;
 
 /**
@@ -30,7 +31,7 @@
 public class BooleanCssClass implements CssClass {
 
   private CssClass cssClass;
-  private boolean addRemove;
+  private Supplier<Boolean> addRemove;
 
   /**
    * Creates an instance with a specified {@link CssClass} and a condition flag.
@@ -43,6 +44,17 @@ public class BooleanCssClass implements CssClass {
   public static BooleanCssClass of(CssClass cssClass, boolean addRemove) {
     return new BooleanCssClass(cssClass, addRemove);
   }
+  /**
+   * Creates an instance with a specified {@link CssClass} and a condition flag.
+   *
+   * @param cssClass The CSS class to be conditionally applied or removed.
+   * @param addRemove Condition flag to determine if the class should be applied (true) or removed
+   *     (false).
+   * @return A new instance of {@code BooleanCssClass}.
+   */
+  public static BooleanCssClass of(CssClass cssClass, Supplier<Boolean> addRemove) {
+    return new BooleanCssClass(cssClass, addRemove);
+  }
 
   /**
    * Creates an instance with a specified {@link HasCssClass} and a condition flag. This method
@@ -57,6 +69,19 @@ public static BooleanCssClass of(HasCssClass cssClass, boolean addRemove) {
     return new BooleanCssClass(cssClass.getCssClass(), addRemove);
   }
 
+  /**
+   * Creates an instance with a specified {@link HasCssClass} and a condition flag. This method
+   * extracts the {@link CssClass} from the provided {@link HasCssClass}.
+   *
+   * @param cssClass The object implementing {@link HasCssClass} whose CSS class will be extracted.
+   * @param addRemove Condition flag to determine if the class should be applied (true) or removed
+   *     (false).
+   * @return A new instance of {@code BooleanCssClass}.
+   */
+  public static BooleanCssClass of(HasCssClass cssClass, Supplier<Boolean> addRemove) {
+    return new BooleanCssClass(cssClass.getCssClass(), addRemove);
+  }
+
   /**
    * Creates an instance with a specified CSS class string and a condition flag.
    *
@@ -70,6 +95,19 @@ public static BooleanCssClass of(String cssClass, boolean addRemove) {
     return new BooleanCssClass(() -> cssClass, addRemove);
   }
 
+  /**
+   * Creates an instance with a specified CSS class string and a condition flag.
+   *
+   * @param cssClass The string representation of the CSS class to be conditionally applied or
+   *     removed.
+   * @param addRemove Condition flag to determine if the class should be applied (true) or removed
+   *     (false).
+   * @return A new instance of {@code BooleanCssClass}.
+   */
+  public static BooleanCssClass of(String cssClass, Supplier<Boolean> addRemove) {
+    return new BooleanCssClass(() -> cssClass, addRemove);
+  }
+
   /**
    * Creates an instance with a specified {@link CssClass} and sets the condition flag to true
    * (class will be applied by default).
@@ -112,6 +150,17 @@ public static BooleanCssClass of(String cssClass) {
    *     (false).
    */
   public BooleanCssClass(CssClass cssClass, boolean addRemove) {
+    this(cssClass, () -> addRemove);
+  }
+
+  /**
+   * Initializes the {@code BooleanCssClass} with a provided {@link CssClass} and a condition flag.
+   *
+   * @param cssClass The CSS class to be managed.
+   * @param addRemove Condition flag to determine if the class should be applied (true) or removed
+   *     (false).
+   */
+  public BooleanCssClass(CssClass cssClass, Supplier<Boolean> addRemove) {
     this.cssClass = cssClass;
     this.addRemove = addRemove;
   }
@@ -133,7 +182,7 @@ public BooleanCssClass(CssClass cssClass) {
    */
   @Override
   public void apply(Element element) {
-    apply(element, addRemove);
+    apply(element, addRemove.get());
   }
 
   /**

domino-ui/src/main/java/org/dominokit/domino/ui/button/BaseButton.java

@@ -62,8 +62,11 @@ protected BaseButton() {
             .appendChild(bodyElement = div().addCss(dui_button_body));
     textElement = LazyChild.of(span().addCss(dui_button_text), bodyElement);
     init((B) this);
+    prepare();
   }
 
+  protected void prepare() {}
+
   /**
    * createButtonElement.
    *

domino-ui/src/main/java/org/dominokit/domino/ui/button/ButtonStyles.java

@@ -40,4 +40,6 @@ public interface ButtonStyles {
 
   /** Constant <code>dui_top_scroller</code> */
   CssClass dui_top_scroller = () -> "dui-top-scroller";
+
+  CssClass dui_toggle_button = () -> "dui-toggle-button";
 }

domino-ui/src/main/java/org/dominokit/domino/ui/button/ToggleButton.java

@@ -0,0 +1,266 @@
+/*
+ * Copyright © 2019 Dominokit
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.dominokit.domino.ui.button;
+
+import static java.util.Objects.isNull;
+import static java.util.Objects.nonNull;
+import static org.dominokit.domino.ui.button.ButtonStyles.dui_toggle_button;
+import static org.dominokit.domino.ui.style.ColorsCss.dui_bg_primary;
+import static org.dominokit.domino.ui.style.ColorsCss.dui_fg_white;
+import static org.dominokit.domino.ui.utils.Domino.button;
+
+import elemental2.dom.HTMLButtonElement;
+import java.util.HashSet;
+import java.util.Set;
+import org.dominokit.domino.ui.elements.ButtonElement;
+import org.dominokit.domino.ui.icons.Icon;
+import org.dominokit.domino.ui.style.BooleanCssClass;
+import org.dominokit.domino.ui.style.CompositeCssClass;
+import org.dominokit.domino.ui.style.CssClass;
+import org.dominokit.domino.ui.utils.HasChangeListeners;
+import org.dominokit.domino.ui.utils.IsToggleGroup;
+import org.dominokit.domino.ui.utils.IsToggleItem;
+
+public class ToggleButton extends BaseButton<HTMLButtonElement, ToggleButton>
+    implements HasChangeListeners<ToggleButton, Boolean>, IsToggleItem<ToggleButton> {
+
+  private CssClass toggleCssClass = CompositeCssClass.of(dui_bg_primary, dui_fg_white);
+  private CssClass untoggledCssClass = CssClass.NONE;
+  private boolean changeListenersPaused;
+  private Set<ChangeListener<? super Boolean>> changeListeners;
+  private boolean state = false;
+  private IsToggleGroup<ToggleButton> group;
+  private String key;
+
+  /** Creates an empty button */
+  public ToggleButton() {}
+
+  /**
+   * create a Button with a text.
+   *
+   * @param text String, the button text
+   */
+  public ToggleButton(String text) {
+    super(text);
+  }
+
+  /**
+   * Creates a Button with an icon
+   *
+   * @param icon The button icon
+   */
+  public ToggleButton(Icon<?> icon) {
+    super(icon);
+  }
+
+  /**
+   * Creates button with text and icon
+   *
+   * @param text The button text
+   * @param icon The button icon
+   */
+  public ToggleButton(String text, Icon<?> icon) {
+    super(text, icon);
+  }
+
+  /**
+   * Factory method to create empty button
+   *
+   * @return new Button instance
+   */
+  public static ToggleButton create() {
+    return new ToggleButton();
+  }
+
+  /**
+   * Factory method to create a button with a text.
+   *
+   * @param text The button text
+   * @return new Button instance
+   */
+  public static ToggleButton create(String text) {
+    return new ToggleButton(text);
+  }
+
+  /**
+   * Factory method to create a button with an icon.
+   *
+   * @param icon the button icon
+   * @return new Button instance
+   */
+  public static ToggleButton create(Icon<?> icon) {
+    return new ToggleButton(icon);
+  }
+
+  /**
+   * Factory method to create button with a text and icon.
+   *
+   * @param text a {@link java.lang.String} object
+   * @param icon the button icon
+   * @return new Button instance
+   */
+  public static ToggleButton create(String text, Icon<?> icon) {
+    return new ToggleButton(text, icon);
+  }
+
+  /**
+   * Factory method to create button with a text and icon.
+   *
+   * @param icon the button icon
+   * @param text a {@link java.lang.String} object
+   * @return new Button instance
+   */
+  public static ToggleButton create(Icon<?> icon, String text) {
+    return new ToggleButton(text, icon);
+  }
+
+  @Override
+  protected void prepare() {
+    addCss(dui_toggle_button);
+    this.addClickListener(
+        evt -> {
+          boolean state = isToggled();
+          if (nonNull(group) && (!group.isMultipleToggle() && state)) {
+            return;
+          }
+          setToggle(!isToggled());
+        });
+  }
+
+  public ToggleButton setToggle(boolean toggle, boolean silent) {
+    withPauseChangeListenersToggle(silent, toggleButton -> updateToggle(toggle, true));
+    return this;
+  }
+
+  ToggleButton updateToggle(boolean toggle, boolean notifyParent) {
+    boolean oldState = this.state;
+    this.state = toggle;
+    if (toggle) {
+      untoggledCssClass = CompositeCssClass.of(this);
+    }
+    addCss(BooleanCssClass.of(toggleCssClass, toggle));
+    if (!toggle) {
+      addCss(untoggledCssClass);
+    }
+    if (this.state != oldState) {
+      withPauseChangeListenersToggle(
+          isChangeListenersPaused(), toggleButton -> triggerChangeListeners(oldState, this.state));
+      if (nonNull(group) && notifyParent) {
+        this.group.onItemToggle(this);
+      }
+    }
+    return this;
+  }
+
+  public boolean isToggled() {
+    return this.state;
+  }
+
+  /** @dominokit-site-ignore {@inheritDoc} */
+  @Override
+  protected ButtonElement createButtonElement() {
+    return button();
+  }
+
+  @Override
+  public ToggleButton pauseChangeListeners() {
+    this.changeListenersPaused = true;
+    return this;
+  }
+
+  @Override
+  public ToggleButton resumeChangeListeners() {
+    this.changeListenersPaused = false;
+    return this;
+  }
+
+  @Override
+  public ToggleButton togglePauseChangeListeners(boolean toggle) {
+    this.changeListenersPaused = toggle;
+    return this;
+  }
+
+  @Override
+  public Set<ChangeListener<? super Boolean>> getChangeListeners() {
+    if (isNull(this.changeListeners)) {
+      this.changeListeners = new HashSet<>();
+    }
+    return this.changeListeners;
+  }
+
+  @Override
+  public boolean isChangeListenersPaused() {
+    return this.changeListenersPaused;
+  }
+
+  @Override
+  public ToggleButton triggerChangeListeners(Boolean oldValue, Boolean newValue) {
+    if (!isChangeListenersPaused()) {
+      getChangeListeners()
+          .forEach(changeListener -> changeListener.onValueChanged(oldValue, newValue));
+    }
+    return this;
+  }
+
+  @Override
+  public ToggleButton bindTo(IsToggleGroup<ToggleButton> toggleGroup) {
+    this.group = toggleGroup;
+    return this;
+  }
+
+  @Override
+  public ToggleButton toggle() {
+    return setToggle(!isToggled());
+  }
+
+  @Override
+  public ToggleButton toggle(boolean silent) {
+    return setToggle(!isToggled(), silent);
+  }
+
+  @Override
+  public ToggleButton setToggle(boolean value) {
+    return setToggle(value, isChangeListenersPaused());
+  }
+
+  @Override
+  public ToggleButton setKey(String key) {
+    this.key = key;
+    return this;
+  }
+
+  @Override
+  public String getKey() {
+    return this.key;
+  }
+
+  public CssClass getToggleCssClass() {
+    return toggleCssClass;
+  }
+
+  public ToggleButton setToggleCssClass(CssClass toggleCssClass) {
+    if (isNull(toggleCssClass)) {
+      this.toggleCssClass = CssClass.NONE;
+    } else {
+      this.toggleCssClass = toggleCssClass;
+    }
+    return this;
+  }
+
+  public boolean getValue() {
+    return state;
+  }
+}