fix(carousel-item): add missing item interval prop

Author: xidedix

projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.ts

@@ -8,12 +8,11 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 @Component({
   selector: 'c-carousel-item',
   templateUrl: './carousel-item.component.html',
-  styleUrls: ['./carousel-item.component.scss'],
+  styleUrls: ['./carousel-item.component.scss']
 })
 export class CarouselItemComponent implements OnDestroy, AfterViewInit {
 
   static ngAcceptInputType_active: BooleanInput;
-  private _active = false;
 
   index?: number;
   private carouselIndexSubscription?: Subscription;
@@ -29,12 +28,20 @@ export class CarouselItemComponent implements OnDestroy, AfterViewInit {
   get active(): boolean {
     return this._active;
   }
+  private _active = false;
+
+  /**
+   * Time delay before cycling to next item. If -1, uses carousel interval value.
+   * @type number
+   * @default -1
+   */
+  @Input() interval: number = -1;
 
   @HostBinding('class')
   get hostClasses(): any {
     return {
       'carousel-item': true,
-      active: this.active,
+      active: this.active
     };
   }
 

projects/coreui-angular/src/lib/carousel/carousel-state.ts

@@ -24,7 +24,9 @@ export class CarouselState {
     const nextState = { ...this._state, ...state };
     this._state = nextState;
     if (prevState.activeItemIndex !== nextState.activeItemIndex) {
-      this.carouselService.setIndex({active: nextState.activeItemIndex});
+      const activeItemIndex = this.state.activeItemIndex || 0;
+      const itemInterval = this.state.items && this.state.items[activeItemIndex]?.interval || -1;
+      this.carouselService.setIndex({ active: nextState.activeItemIndex, interval: itemInterval });
     }
   }
 
@@ -35,7 +37,7 @@ export class CarouselState {
         item.index = i;
       });
       this.state = {
-        items: itemsArray,
+        items: itemsArray
       };
     } else {
       this.reset();
@@ -46,7 +48,7 @@ export class CarouselState {
     this.carouselService.setIndex(nextIndex);
   }
 
-  direction(direction: 'next' | 'prev' = 'next' ): number {
+  direction(direction: 'next' | 'prev' = 'next'): number {
     this.state = { direction };
     const { activeItemIndex = -1, items } = this.state;
     const itemsCount = items?.length ?? 0;

projects/coreui-angular/src/lib/carousel/carousel.service.ts

@@ -3,6 +3,7 @@ import { BehaviorSubject } from 'rxjs';
 
 export interface ICarouselIndex {
   active?: number;
+  interval?: number;
 }
 
 @Injectable()

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

@@ -84,6 +84,7 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
   public onMouseleave($event: MouseEvent): void {
     this.setTimer();
   }
+  private activeItemInterval = 0;
 
   constructor(
     @Inject(CarouselConfig) private config: CarouselConfig,
@@ -103,16 +104,24 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
 
   ngAfterContentInit(): void {
     this.carouselState.state = { activeItemIndex: this.activeIndex, animate: this.animate };
-    this.setTimer();
   }
 
+  set visible(value) {
+    this._visible = value;
+  }
+  get visible() {
+    return this._visible;
+  }
+  private _visible: boolean = true;
+
   setTimer(): void {
+    const interval = this.activeItemInterval || 0;
     this.resetTimer();
-    if (this.interval > 0) {
+    if (interval > 0) {
       this.timerId = setTimeout(() => {
         const nextIndex = this.carouselState.direction(this.direction);
         this.carouselState.state = { activeItemIndex: nextIndex };
-      }, this.interval);
+      }, interval);
     }
   }
 
@@ -124,8 +133,10 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
     if (subscribe) {
       this.carouselIndexSubscription = this.carouselService.carouselIndex$.subscribe((nextIndex) => {
         if ('active' in nextIndex) {
-          this.setTimer();
+          this.itemChange.emit(nextIndex.active);
         }
+        this.activeItemInterval = typeof nextIndex.interval === 'number' && nextIndex.interval > -1 ? nextIndex.interval : this.interval;
+        this.setTimer();
       });
     } else {
       this.carouselIndexSubscription?.unsubscribe();