diff --git a/CHANGELOG.md b/CHANGELOG.md index ffa4cbcfff8..b34431f83c1 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/projects/igniteui-angular/src/lib/carousel/README.md b/projects/igniteui-angular/src/lib/carousel/README.md index 78c2938ec58..9f912772346 100644 --- a/projects/igniteui-angular/src/lib/carousel/README.md +++ b/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 diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts index eed91554909..0e920923fd7 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts +++ b/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', () => { diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts index 8f740c49d02..d2932e3ecaf 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts +++ b/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;