feat(oui-slideshow): add on click event for navigation

packages/oui-slideshow/README.md

@@ -78,16 +78,40 @@
 </div>
 ```
 
+### Panel change event
+**Note**: If you want to access the parameters inside `on-panel-change` callback, you need to use `direction` and `index` variables as below.
+
+* `direction` returns string of `prev` or `next`
+* `index` returns index of current slide
+
+```html:preview
+<div class="oui-doc-preview-only-keep-children" style="padding:50px 35px;background-color:rgba(0,0,0,0.3)">
+<oui-slideshow on-panel-change="$ctrl.onPanelChange(direction, index)">
+    <oui-slideshow-panel heading="New feature"
+        picture="https://upload.wikimedia.org/wikipedia/commons/4/4a/Cercle_rouge_100%25.svg">
+        Display your infrastructure as a list
+    </oui-slideshow-panel>
+    <oui-slideshow-panel heading="Introducing Ad-Sync"
+        picture="https://upload.wikimedia.org/wikipedia/commons/4/4a/Cercle_rouge_100%25.svg"
+        href="http://www.ovh.com/"
+        label="Discover">
+        Designed to help you synchronize your local Active Directory with your OVH Active Directory.
+    </oui-slideshow-panel>
+</oui-slideshow>
+</div>
+```
+
 ## API
 
 ### oui-slideshow
 
-| Attribute     | Type      | Binding   | One-time Binding  | Values            | Default   | Description
-| ----          | ----      | ----      | ----              | ----              | ----      | ----
-| `theme`       | string    | @?        | yes               | n/a               | `default` | add specific theme to component
-| `loading`     | boolean   | <?        | no                | `true`, `false`   | `false`   | display loader flag
-| `loop`        | boolean   | <?        | no                | `true`, `false`   | `false`   | whether the component should cycle continuously
-| `on-dismiss`  | function  | &         | no                | n/a               | n/a       | dismiss callback
+| Attribute         | Type      | Binding   | One-time Binding  | Values                  | Default   | Description
+| ----              | ----      | ----      | ----              | ----                    | ----      | ----
+| `theme`           | string    | @?        | yes               | n/a                     | `default` | add specific theme to component
+| `loading`         | boolean   | <?        | no                | `true`, `false`         | `false`   | display loader flag
+| `loop`            | boolean   | <?        | no                | `true`, `false`         | `false`   | whether the component should cycle continuously
+| `on-dismiss`      | function  | &         | no                | n/a                     | n/a       | dismiss callback
+| `on-panel-change` | function  | &         | no                | direction, index        | n/a       | handler triggered when on click of next slide
 
 ### oui-slideshow-panel
 

packages/oui-slideshow/src/index.spec.js

@@ -142,6 +142,22 @@ describe("ouiSlideshow", () => {
                 $timeout.flush();
                 expect($firstPanel.hasClass("active")).toBe(false);
             });
+
+            it("should call function of event with attributes", () => {
+                const onPanelChangeSpy = jasmine.createSpy("onPanelChangeSpy");
+                const element = TestUtils.compileTemplate(`
+                    <oui-slideshow on-panel-change="$ctrl.onPanelChangeSpy(direction, index)">
+                        <oui-slideshow-panel></oui-slideshow-panel>
+                        <oui-slideshow-panel></oui-slideshow-panel>
+                    </oui-slideshow>`, {
+                        onPanelChangeSpy
+                    });
+                const direction = "next";
+                const index = 1;
+                $timeout.flush();
+                getNextButton(element).triggerHandler("click");
+                expect(onPanelChangeSpy).toHaveBeenCalledWith(direction, index);
+            });
         });
     });
 });

packages/oui-slideshow/src/slideshow.component.js

@@ -9,6 +9,6 @@ export default {
         onDismiss: "&",
         loading: "<?",
         loop: "<?",
-        theme: "@?"
+        onPanelChange: "&"
     }
 };

packages/oui-slideshow/src/slideshow.controller.js

@@ -76,12 +76,14 @@ export default class {
     next () {
         if (!this._isSliding) {
             this._slide(Direction.NEXT);
+            this.onPanelChange({ direction: Direction.NEXT, index: this.currentIndex });
         }
     }
 
     prev () {
         if (!this._isSliding) {
             this._slide(Direction.PREV);
+            this.onPanelChange({ direction: Direction.PREV, index: this.currentIndex });
         }
     }