chore: update Version

docs/pages/resources/viur-changelog.md

@@ -1,4 +1,6 @@
 # Changelog
+## 1.0.10
+- feat: Carousels now reset their timer while sliding.
 ## 1.0.9
 - feat: Carousels now reset their timer in autoplay mode when they are paused.
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@viur/shoelace",
   "description": "A forward-thinking library of web components.",
-  "version": "1.0.9-v2.20.0",
+  "version": "1.0.10-v2.20.0",
   "homepage": "https://github.com/viur-framework/viur-shoelace",
   "author": "Cory LaViska",
   "contributors": [

src/components/carousel/autoplay-controller.ts

@@ -8,6 +8,8 @@ export class AutoplayController implements ReactiveController {
   private host: ReactiveElement;
   private timerId = 0;
   private tickCallback: () => void;
+  private activeInteractions = 0;
+
 
   paused = false;
   stopped = true;
@@ -21,28 +23,22 @@ export class AutoplayController implements ReactiveController {
 
   hostConnected(): void {
     this.host.addEventListener('mouseenter', this.pause);
-    // @ts-ignore
-    this.host.addEventListener('mouseleave', ()=>this.start( this.host.autoplayInterval ));
+    this.host.addEventListener('mouseleave', this.resume);
     this.host.addEventListener('focusin', this.pause);
-    // @ts-ignore
-    this.host.addEventListener('focusout', ()=>this.start( this.host.autoplayInterval ));
+    this.host.addEventListener('focusout', this.resume);
     this.host.addEventListener('touchstart', this.pause, { passive: true });
-    // @ts-ignore
-    this.host.addEventListener('touchend', ()=>this.start( this.host.autoplayInterval ));
+    this.host.addEventListener('touchend', this.resume);
   }
 
   hostDisconnected(): void {
     this.stop();
 
     this.host.removeEventListener('mouseenter', this.pause);
-    // @ts-ignore
-    this.host.removeEventListener('mouseleave', ()=>this.start( this.host.autoplayInterval ));
+    this.host.removeEventListener('mouseleave', this.resume);
     this.host.removeEventListener('focusin', this.pause);
-    // @ts-ignore
-    this.host.removeEventListener('focusout', ()=>this.start( this.host.autoplayInterval ));
+    this.host.removeEventListener('focusout', this.resume);
     this.host.removeEventListener('touchstart', this.pause);
-    // @ts-ignore
-    this.host.removeEventListener('touchend', ()=>this.start( this.host.autoplayInterval ));
+    this.host.removeEventListener('touchend', this.resume);
   }
 
   start(interval: number) {
@@ -63,12 +59,16 @@ export class AutoplayController implements ReactiveController {
   }
 
   pause = () => {
-    this.paused = true;
-    this.host.requestUpdate();
+    if (!this.activeInteractions++) {
+      this.paused = true;
+      this.host.requestUpdate();
+    }
   };
 
   resume = () => {
-    this.paused = false;
-    this.host.requestUpdate();
+    if (!--this.activeInteractions) {
+      this.paused = false;
+      this.host.requestUpdate();
+    }
   };
 }

src/components/carousel/carousel.component.ts

@@ -477,6 +477,10 @@ export default class SlCarousel extends ShoelaceElement {
    * @param behavior - The behavior used for scrolling.
    */
   goToSlide(index: number, behavior: ScrollBehavior = 'smooth') {
+    if (this.autoplay) {
+      this.autoplayController.stop();
+    }
+
     const { slidesPerPage, loop } = this;
 
     const slides = this.getSlides();
@@ -507,6 +511,10 @@ export default class SlCarousel extends ShoelaceElement {
     const nextSlide = slidesWithClones[nextSlideIndex];
 
     this.scrollToSlide(nextSlide, prefersReducedMotion() ? 'auto' : behavior);
+
+    if (this.autoplay) {
+      this.autoplayController.start(this.autoplayInterval);
+    }
   }
 
   private scrollToSlide(slide: HTMLElement, behavior: ScrollBehavior = 'smooth') {