feat(ui5-carousel): add navigate event

packages/main/src/Carousel.hbs

@@ -19,13 +19,15 @@
         {{#if arrows.content}}
             <div class="ui5-carousel-navigation-arrows">
                 <ui5-button
+                     arrow-back
                     class="ui5-carousel-navigation-button"
                     icon="slim-arrow-left"
                     tabindex="-1"
                     @click={{navigateLeft}}
                     @keydown={{_onbuttonkeydown}}
                 ></ui5-button>
                 <ui5-button
+                    arrow-forward
                     class="ui5-carousel-navigation-button"
                     icon="slim-arrow-right"
                     tabindex="-1"
@@ -39,6 +41,7 @@
             <div class="{{classes.navigation}}">
                 {{#if arrows.navigation}}
                 <ui5-button
+                    arrow-back
                     class="ui5-carousel-navigation-button"
                     icon="slim-arrow-left"
                     tabindex="-1"
@@ -62,6 +65,7 @@
 
                 {{#if arrows.navigation}}
                     <ui5-button
+                        arrow-forward
                         class="ui5-carousel-navigation-button"
                         icon="slim-arrow-right"
                         tabindex="-1"

packages/main/src/Carousel.js

@@ -143,7 +143,20 @@ const metadata = {
 		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Carousel.prototype */ {
-		//
+		/**
+		 * Fired when the currently selected page changes,
+		 * when the user clicks on the navigation arrows.
+		 *
+		 * @event
+		 * @param {Integer} selectedIndex the current <code>selectedIndex</code>.
+		 * @public
+		 * @since 1.0.0-rc.7
+		 */
+		selectedPageChange: {
+			detail: {
+				selectedIndex: { type: Integer },
+			},
+		},
 	},
 };
 
@@ -265,23 +278,35 @@ class Carousel extends UI5Element {
 	}
 
 	navigateLeft() {
+		const peviousSelectedIndex = this.selectedIndex;
+
 		if (this.selectedIndex - 1 < 0) {
 			if (this.cyclic) {
 				this.selectedIndex = this.pages.length - 1;
 			}
 		} else {
 			--this.selectedIndex;
 		}
+
+		if (peviousSelectedIndex !== this.selectedIndex) {
+			this.fireEvent("selectedPageChange", { selectedIndex: this.selectedIndex });
+		}
 	}
 
 	navigateRight() {
+		const peviousSelectedIndex = this.selectedIndex;
+
 		if (this.selectedIndex + 1 > this.pages.length - 1) {
 			if (this.cyclic) {
 				this.selectedIndex = 0;
 			}
 		} else {
 			++this.selectedIndex;
 		}
+
+		if (peviousSelectedIndex !== this.selectedIndex) {
+			this.fireEvent("selectedPageChange", { selectedIndex: this.selectedIndex });
+		}
 	}
 
 	get shouldAnimate() {

packages/main/test/pages/Carousel.html

@@ -358,6 +358,8 @@
 	<ui5-button>Button 7</ui5-button>
 	<ui5-button>Button 8</ui5-button>
 </ui5-carousel>
+<ui5-input id="result"></ui5-input>
+<ui5-input id="resultCounter"></ui5-input>
 
 <ui5-title>Carousel with one page</ui5-title>
 <ui5-label>The arrows and dots are not displayed</ui5-label>
@@ -369,4 +371,12 @@
 </ui5-carousel>
 
 </body>
+
+<script>
+	var counter = 0;
+	carousel5.addEventListener("ui5-selectedPageChange", function(event){
+		result.value = event.detail.selectedIndex;
+		resultCounter.value = ++counter;
+	});
+</script>
 </html>

packages/main/test/specs/Carousel.spec.js

@@ -64,4 +64,28 @@ describe("Carousel general interaction", () => {
 		assert.ok(!navigationArrows.isExisting(), "Navigation is rendered");
 		assert.strictEqual(pages, 1, "There are only 3 pages.");
 	});
+
+	it("Event selectedPageChange fired when pressing navigation arrows", () => {
+		const carousel = browser.$("#carousel5");
+		const selectedIndex = browser.$("#result");
+		const eventCounter = browser.$("#resultCounter");
+		const navigationArrowForward = carousel.shadow$("ui5-button[arrow-forward]");
+		const navigationArrowsBack = carousel.shadow$("ui5-button[arrow-back]");
+
+		navigationArrowForward.click(); // forward
+		assert.strictEqual(selectedIndex.getProperty("value"), "1", "The selectedIndex is correct.");
+		assert.strictEqual(eventCounter.getProperty("value"), "1", "The selectedPageChange is fired.");
+
+		navigationArrowForward.click(); // forward
+		assert.strictEqual(selectedIndex.getProperty("value"), "1", "The selectedIndex remains the same as this is the last page.");
+		assert.strictEqual(eventCounter.getProperty("value"), "1", "The selectedPageChange not fired as this is last page.");
+
+		navigationArrowsBack.click(); // back
+		assert.strictEqual(selectedIndex.getProperty("value"), "0", "The selectedIndex is correct");
+		assert.strictEqual(eventCounter.getProperty("value"), "2", "The selectedPageChange is fired.");
+
+		navigationArrowsBack.click(); // back
+		assert.strictEqual(selectedIndex.getProperty("value"), "0", "The selectedIndex remains the same as this is the first page.");
+		assert.strictEqual(eventCounter.getProperty("value"), "2", "The selectedPageChange is not fired as this is the first page.");
+	});
 });