fix(ui5-color-palette): rename change event (#3429)

Part of #3107

BREAKING_CHANGE: change event of ui5-color-palette is renamed to item-click

Author: fifoosid

packages/main/src/ColorPalette.js

@@ -79,9 +79,10 @@ const metadata = {
 		 *
 		 * @event
 		 * @public
+		 * @since 1.0.0-rc.15
 		 * @param {String} color the selected color
 		 */
-		change: {
+		"item-click": {
 			details: {
 				color: {
 					type: String,
@@ -196,7 +197,7 @@ class ColorPalette extends UI5Element {
 			}
 		}
 
-		this.fireEvent("change", {
+		this.fireEvent("item-click", {
 			color: this._selectedColor,
 		});
 	}

packages/main/test/pages/ColorPalette.html

@@ -58,7 +58,7 @@
 	<br/>
 	<br/>
 	<br/>
-	<ui5-input id="changeResult" value="Nothing selected"></ui5-input>
+	<ui5-input id="itemClickResult" value="Nothing selected"></ui5-input>
 	<br>
 	<ui5-button id="colorPaletteBtn" >Open ColorPalette</ui5-button>
 	<ui5-responsive-popover id="respPopover" with-padding>
@@ -125,12 +125,14 @@
 	</ui5-color-palette>
 
 	<script>
-		cp1.addEventListener("change", function(event) {
-			changeResult.value = event.detail.color;
+		cp1.addEventListener("item-click", function(event) {
+			itemClickResult.value = event.detail.color;
 		});
+
 		colorPaletteBtn.addEventListener("click", function(event) {
 			respPopover.open(colorPaletteBtn);
 		});
+
 		btnClose.addEventListener("click", function(event) {
 			respPopover.close();
 		});