refactor(carousel): select index overload, change detail, suppress slides (#1457)

Author: damyanpetev

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Added
+- Carousel component select method overload accepting index [#1457](https://github.com/IgniteUI/igniteui-webcomponents/issues/1457)
+
 ## [5.1.1] - 2024-10-28
 ### Fixed
 - Library - internal import path for styles and public exports for themes

src/components/carousel/carousel.spec.ts

@@ -429,6 +429,21 @@ describe('Carousel', () => {
       animation = await carousel.select(slides[2]);
       expect(animation).to.be.true;
       expect(carousel.current).to.equal(2);
+
+      // select current slide by index
+      animation = await carousel.select(2);
+      expect(animation).to.be.false;
+      expect(carousel.current).to.equal(2);
+
+      // select invalid slide by index
+      animation = await carousel.select(3);
+      expect(animation).to.be.false;
+      expect(carousel.current).to.equal(2);
+
+      // select fist slide by index
+      animation = await carousel.select(0);
+      expect(animation).to.be.true;
+      expect(carousel.current).to.equal(0);
     });
   });
 
@@ -505,6 +520,7 @@ describe('Carousel', () => {
   describe('Interactions', () => {
     describe('Click', () => {
       it('should change slide when clicking next button', async () => {
+        const eventSpy = spy(carousel, 'emitEvent');
         expect(carousel.current).to.equal(0);
         expect(defaultIndicators[0].active).to.be.true;
 
@@ -514,9 +530,11 @@ describe('Carousel', () => {
         expect(carousel.current).to.equal(1);
         expect(defaultIndicators[0].active).to.be.false;
         expect(defaultIndicators[1].active).to.be.true;
+        expect(eventSpy.firstCall).calledWith('igcSlideChanged', { detail: 1 });
       });
 
       it('should change slide when clicking previous button', async () => {
+        const eventSpy = spy(carousel, 'emitEvent');
         expect(carousel.current).to.equal(0);
         expect(defaultIndicators[0].active).to.be.true;
 
@@ -526,9 +544,11 @@ describe('Carousel', () => {
         expect(carousel.current).to.equal(2);
         expect(defaultIndicators[0].active).to.be.false;
         expect(defaultIndicators[2].active).to.be.true;
+        expect(eventSpy.firstCall).calledWith('igcSlideChanged', { detail: 2 });
       });
 
       it('should change slide when clicking indicators', async () => {
+        const eventSpy = spy(carousel, 'emitEvent');
         expect(carousel.current).to.equal(0);
         expect(defaultIndicators[0].active).to.be.true;
 
@@ -539,6 +559,7 @@ describe('Carousel', () => {
         expect(carousel.current).to.equal(1);
         expect(defaultIndicators[0].active).to.be.false;
         expect(defaultIndicators[1].active).to.be.true;
+        expect(eventSpy.firstCall).calledWith('igcSlideChanged', { detail: 1 });
 
         // select first slide
         simulateClick(defaultIndicators[0]);
@@ -547,6 +568,9 @@ describe('Carousel', () => {
         expect(carousel.current).to.equal(0);
         expect(defaultIndicators[0].active).to.be.true;
         expect(defaultIndicators[1].active).to.be.false;
+        expect(eventSpy.secondCall).calledWith('igcSlideChanged', {
+          detail: 0,
+        });
       });
     });
 

src/components/carousel/carousel.ts

@@ -52,7 +52,7 @@ import { all } from './themes/container.js';
 import { styles as shared } from './themes/shared/carousel.common.css.js';
 
 export interface IgcCarouselComponentEventMap {
-  igcSlideChanged: CustomEvent<void>;
+  igcSlideChanged: CustomEvent<number>;
   igcPlaying: CustomEvent<void>;
   igcPaused: CustomEvent<void>;
 }
@@ -243,7 +243,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
    * @attr interval
    */
   @property({ type: Number, reflect: false })
-  public interval!: number;
+  public interval: number | undefined;
 
   /**
    * Controls the maximum indicator controls (dots) that can be shown. Default value is `10`.
@@ -263,6 +263,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
   @property({ attribute: 'animation-type' })
   public animationType: 'slide' | 'fade' | 'none' = 'slide';
 
+  /* blazorSuppress */
   /**
    * The slides of the carousel.
    */
@@ -505,7 +506,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     }
 
     await callback.call(this);
-    this.emitEvent('igcSlideChanged');
+    this.emitEvent('igcSlideChanged', { detail: this.current });
 
     if (this.interval) {
       this.restartInterval();
@@ -553,7 +554,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
       this._lastInterval = setInterval(() => {
         if (this.isPlaying && this.total) {
           this.next();
-          this.emitEvent('igcSlideChanged');
+          this.emitEvent('igcSlideChanged', { detail: this.current });
         } else {
           this.pause();
         }
@@ -606,7 +607,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
   }
 
   /**
-   * Switches to the next slide running any animations and returns if the operation was a success.
+   * Switches to the next slide, runs any animations, and returns if the operation was successful.
    */
   public async next(): Promise<boolean> {
     if (this.disableLoop && this.nextIndex === 0) {
@@ -618,7 +619,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
   }
 
   /**
-   * Switches to the previous slide running any animations and returns if the operation was a success.
+   * Switches to the previous slide, runs any animations, and returns if the operation was successful.
    */
   public async prev(): Promise<boolean> {
     if (this.disableLoop && this.prevIndex === this.total - 1) {
@@ -629,20 +630,41 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     return await this.select(this.slides[this.prevIndex], 'prev');
   }
 
+  /* blazorSuppress */
   /**
-   * Switches the passed in slide running any animations and returns if the operation was a success.
+   * Switches to the passed-in slide, runs any animations, and returns if the operation was successful.
    */
   public async select(
     slide: IgcCarouselSlideComponent,
-    direction?: 'next' | 'prev'
+    animationDirection?: 'next' | 'prev'
+  ): Promise<boolean>;
+  /**
+   * Switches to slide by index, runs any animations, and returns if the operation was successful.
+   */
+  public async select(
+    index: number,
+    animationDirection?: 'next' | 'prev'
+  ): Promise<boolean>;
+  public async select(
+    slideOrIndex: IgcCarouselSlideComponent | number,
+    animationDirection?: 'next' | 'prev'
   ): Promise<boolean> {
-    const index = this.slides.indexOf(slide);
+    let index: number;
+    let slide: IgcCarouselSlideComponent | undefined;
+
+    if (typeof slideOrIndex === 'number') {
+      index = slideOrIndex;
+      slide = this.slides.at(index);
+    } else {
+      slide = slideOrIndex;
+      index = this.slides.indexOf(slide);
+    }
 
-    if (index === this.current || index === -1) {
+    if (index === this.current || index === -1 || !slide) {
       return false;
     }
 
-    const dir = direction ?? (index > this.current ? 'next' : 'prev');
+    const dir = animationDirection ?? (index > this.current ? 'next' : 'prev');
 
     await this.animateSlides(slide, this._activeSlide, dir);
     return true;