refactor(carousel): add interval to carousel state

Author: xidedix

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

@@ -12,7 +12,8 @@ export class CarouselState {
     animate: true,
     items: [],
     direction: 'next',
-    transition: 'slide'
+    transition: 'slide',
+    interval: 0
   };
 
   get state(): ICarouselState {
@@ -75,7 +76,8 @@ export class CarouselState {
       animate: true,
       items: [],
       direction: 'next',
-      transition: 'slide'
+      transition: 'slide',
+      interval: 0
     };
   }
 }

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

@@ -1,17 +1,18 @@
 import { CarouselItemComponent } from './carousel-item/carousel-item.component';
 
 export interface ICarouselOptions {
-  interval?: number;
-  animate?: boolean;
   activeIndex?: number;
+  animate?: boolean;
   direction?: 'next' | 'prev';
+  interval?: number;
   transition?: 'slide' | 'crossfade';
 }
 
 export interface ICarouselState {
   activeItemIndex?: number;
   animate?: boolean;
-  items?: CarouselItemComponent[];
   direction?: 'next' | 'prev';
+  interval?: number;
+  items?: CarouselItemComponent[];
   transition?: 'slide' | 'crossfade';
 }

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

@@ -100,7 +100,9 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
   });
 
   readonly #intervalEffect = effect(() => {
-    this.interval() ? this.setTimer() : this.resetTimer();
+    const interval = this.interval();
+    this.#carouselState.state = { interval: interval };
+    interval ? this.setTimer() : this.resetTimer();
   });
 
   /**
@@ -156,6 +158,7 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
     this.#carouselState.state = {
       activeItemIndex: this.activeIndex(),
       animate: this.animate(),
+      interval: this.interval(),
       transition: this.transition()
     };
     this.setListeners();