Merge pull request #16051 from IgniteUI/rivanova/feat-carousel-16046

feat(carousel): select slide by index

Author: kacheshmarova

CHANGELOG.md

@@ -3,9 +3,17 @@
 All notable changes for each version of this project will be documented in this file.
 
 ## 20.1.0
+### New Features
+- `IgxCarousel`
+    - Added `select` method overload accepting index.
+    ```ts
+    this.carousel.select(2, Direction.NEXT);
+    ```
+
 ### General
 - `IgxDropDown` now exposes a `role` input property, allowing users to customize the role attribute based on the use case. The default is `listbox`.
 
+
 ## 20.0.6
 ### General
 - `IgxSimpleCombo`

projects/igniteui-angular/src/lib/carousel/README.md

@@ -34,8 +34,9 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | `next()` | void | Switches to the next slide. Emits `slideChanged` event. |
 | `add(slide: IgxSlide)` | void | Adds a slide to the carousel. Emits `slideAdded` event. |
 | `remove(slide: IgxSlide)` | void | Removes an existing slide from the carousel. Emits `slideRemoved` event. |
-| `get(index: Number)` | IgxSlide or void | Returns the slide with the given index or null. |
-| `select(slide: IgxSlide, direction: Direction)`| void | Selects the slide and the direction to transition to. Emits `slideChanged` event. |
+| `get(index: number)` | IgxSlide or void | Returns the slide with the given index or null. |
+| `select(slide: IgxSlide, direction: Direction)`| void | Switches to the passed-in slide with a given direction. Emits `slideChanged` event. |
+| `select(index: number, direction: Direction)`| void | Switches to slide by index with a given direction. Emits `slideChanged` event. |
 
 ### Keyboard navigation
 

projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts

@@ -143,15 +143,27 @@ describe('Carousel', () => {
 
             carousel.next();
             let currentSlide = carousel.get(carousel.current);
-
             fixture.detectChanges();
             expect(carousel.get(1)).toBe(currentSlide);
 
             currentSlide = carousel.get(0);
             carousel.prev();
-
             fixture.detectChanges();
             expect(carousel.get(0)).toBe(currentSlide);
+
+            carousel.select(1);
+            fixture.detectChanges();
+            expect(carousel.get(1)).toBe(carousel.get(carousel.current));
+
+            // select a negative index -> active slide remains the same
+            carousel.select(-1);
+            fixture.detectChanges();
+            expect(carousel.get(1)).toBe(carousel.get(carousel.current));
+
+            // select a non-existent index -> active slide remains the same
+            carousel.select(carousel.slides.length);
+            fixture.detectChanges();
+            expect(carousel.get(1)).toBe(carousel.get(carousel.current));
         });
 
         it('emit events', () => {

projects/igniteui-angular/src/lib/carousel/carousel.component.ts

@@ -816,14 +816,29 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
     }
 
     /**
-     * Kicks in a transition for a given slide with a given `direction`.
+     * Switches to the passed-in slide with a given `direction`.
      * ```typescript
-     * this.carousel.select(this.carousel.get(2), Direction.NEXT);
+     * const slide = this.carousel.get(2);
+     * this.carousel.select(slide, Direction.NEXT);
      * ```
      *
      * @memberOf IgxCarouselComponent
      */
-    public select(slide: IgxSlideComponent, direction: Direction = Direction.NONE) {
+    public select(slide: IgxSlideComponent, direction?: Direction): void;
+    /**
+     * Switches to slide by index with a given `direction`.
+     * ```typescript
+     * this.carousel.select(2, Direction.NEXT);
+     * ```
+     *
+     * @memberOf IgxCarouselComponent
+     */
+    public select(index: number, direction?: Direction): void;
+    public select(slideOrIndex: IgxSlideComponent | number, direction: Direction = Direction.NONE): void {
+        const slide = typeof slideOrIndex === 'number'
+            ? this.get(slideOrIndex)
+            : slideOrIndex;
+
         if (slide && slide !== this.currentItem) {
             slide.direction = direction;
             slide.active = true;