feat: add click event to chip

Close #7

Author: ngonzalezpazFC

src/main/java/com/flowingcode/vaadin/addons/chipfield/Chip.java

@@ -41,6 +41,7 @@
 @JavaScript("./paper-chip.js")
 public class Chip extends Component {
 
+	public static final String CHIP_LABEL = "event.detail.chipLabel";
 	private String label;
 	private boolean closable;
 	private Icon icon;

src/main/java/com/flowingcode/vaadin/addons/chipfield/ChipField.java

@@ -19,16 +19,6 @@
  */
 package com.flowingcode.vaadin.addons.chipfield;
 
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-import java.util.Optional;
-import java.util.concurrent.atomic.AtomicInteger;
-import java.util.stream.Collectors;
-import java.util.stream.Stream;
-
 import com.vaadin.flow.component.AbstractField;
 import com.vaadin.flow.component.AttachEvent;
 import com.vaadin.flow.component.ComponentEvent;
@@ -48,10 +38,18 @@
 import com.vaadin.flow.data.provider.Query;
 import com.vaadin.flow.function.SerializableFunction;
 import com.vaadin.flow.shared.Registration;
-
 import elemental.json.JsonArray;
 import elemental.json.JsonObject;
 import elemental.json.impl.JreJsonFactory;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.Optional;
+import java.util.concurrent.atomic.AtomicInteger;
+import java.util.stream.Collectors;
+import java.util.stream.Stream;
 
 @SuppressWarnings("serial")
 @Tag("paper-chip-input-autocomplete")
@@ -119,6 +117,10 @@ private void configure() {
 			T itemToRemove = selectedItems.remove(chipLabel);
 			getValue().remove(itemToRemove);
 		}).addEventData(CHIP_LABEL);
+		getElement().addEventListener("chip-clicked", e -> {
+			JsonObject eventData = e.getEventData();
+			String chipLabel = eventData.get(CHIP_LABEL).asString();
+		}).addEventData(CHIP_LABEL);
 	}
 
 	private void configureItems() {
@@ -327,4 +329,24 @@ public void removeSelectedItem(T itemToRemove) {
 		this.fireEvent(new ChipRemovedEvent<>(this, false, itemLabelGenerator.apply(itemToRemove)));
 	}
 
+	@DomEvent("chip-clicked")
+	public static class ChipClickedEvent<T> extends ComponentEvent<ChipField<T>> {
+
+		private final String chipLabel;
+
+		public ChipClickedEvent(ChipField<T> source, boolean fromClient, @EventData(CHIP_LABEL) String chipLabel) {
+			super(source, fromClient);
+			this.chipLabel = chipLabel;
+		}
+
+		public String getChipLabel() {
+			return chipLabel;
+		}
+	}
+
+	@SuppressWarnings({ "unchecked", "rawtypes" })
+	public Registration addChipClickedListener(ComponentEventListener<ChipClickedEvent<T>> listener) {
+		return addListener(ChipClickedEvent.class, (ComponentEventListener) listener);
+	}
+
 }

src/main/resources/META-INF/frontend/paper-chip.js

@@ -165,7 +165,7 @@ class PaperChip extends PolymerElement {
             }
         </style>
 
-        <div class\$="[[_computePaperChipClass(noHover, selected)]]">
+        <div on-click="_clicked" class\$="[[_computePaperChipClass(noHover, selected)]]">
             <span class="avatar"><slot name="avatar"></slot></span>
             <span class="label">[[label]]</span>
             <div hidden\$="[[!closable]]" class="closeIcon" on-click="_remove">
@@ -186,18 +186,27 @@ class PaperChip extends PolymerElement {
     }
 
     _remove(event) {
-				this.dispatchEvent(new CustomEvent('chip-removed', {
+			event.stopPropagation();
+			this._dispatch('chip-removed');
+				if (!this.noAutoDomRemoval && this.parentNode.id != 'slot2' && this.parentNode.querySelector("dom-repeat") === null) {
+            this.parentNode.removeChild(this);
+				}
+    }
+	
+	_clicked(event){
+		event.stopPropagation();
+		this._dispatch('chip-clicked');
+	}
+
+	_dispatch(eventName){
+		this.dispatchEvent(new CustomEvent(eventName, {
             detail: {
                 'chipLabel': this.label
             },
             composed: true,
             bubbles: true
 				}));
-				if (!this.noAutoDomRemoval && this.parentNode.id != 'slot2' && this.parentNode.querySelector("dom-repeat") === null) {
-            this.parentNode.removeChild(this);
-				}
-    }
-
+	}
 }
 
 window.customElements.define(PaperChip.is, PaperChip);

src/test/java/com/flowingcode/vaadin/addons/chipfield/DemoView.java

@@ -19,11 +19,6 @@
  */
 package com.flowingcode.vaadin.addons.chipfield;
 
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.List;
-import java.util.stream.Collectors;
-
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.notification.Notification;
 import com.vaadin.flow.component.notification.Notification.Position;
@@ -32,6 +27,10 @@
 import com.vaadin.flow.data.binder.Binder;
 import com.vaadin.flow.data.provider.ListDataProvider;
 import com.vaadin.flow.router.Route;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+import java.util.stream.Collectors;
 
 @SuppressWarnings("serial")
 @Route("")
@@ -61,6 +60,7 @@ public DemoView() {
 
     	chf.addChipCreatedListener(ev->Notification.show("Chip: " + ev.getChipLabel() + " Created by client: " + ev.isFromClient() + "!",5000,Position.BOTTOM_END));
     	chf.addChipRemovedListener(ev->Notification.show("Chip: " + ev.getChipLabel() + " Removed by client: " + ev.isFromClient() + "!",5000,Position.BOTTOM_END));
+		chf.addChipClickedListener(ev->Notification.show("Chip: " + ev.getChipLabel() + " Clicked!", 5000, Position.BOTTOM_END));
 
     	VerticalLayout vl = new VerticalLayout(chf,new HorizontalLayout(b,b2));
         add(vl);