@baloise/ds-core 19.9.2 → 19.9.3-nightly.20260403

package/dist/collection/components/bal-accordion/bal-accordion.js

@@ -7,6 +7,7 @@ import { Logger } from "../../utils/log";
 export class Accordion {
     constructor() {
         this.componentId = `bal-accordion-${accordionIds++}`;
+        this.animationGeneration = 0;
         this.state = 1 /* AccordionState.Collapsed */;
         this.animated = true;
         /**
@@ -88,6 +89,17 @@ export class Accordion {
                 summaryElement.active = this.active;
             }
         };
+        this.cancelAnimation = () => {
+            if (this.currentRaf !== undefined) {
+                cancelAnimationFrame(this.currentRaf);
+                this.currentRaf = undefined;
+            }
+            if (this.currentRafInner !== undefined) {
+                cancelAnimationFrame(this.currentRafInner);
+                this.currentRafInner = undefined;
+            }
+            this.animationGeneration++;
+        };
         this.expand = (initialUpdate = false) => {
             this.active = true;
             const detailsElement = this.detailsElement;
@@ -99,18 +111,23 @@ export class Accordion {
             if (this.state === 4 /* AccordionState.Expanded */) {
                 return this.active;
             }
-            if (this.currentRaf !== undefined) {
-                cancelAnimationFrame(this.currentRaf);
-            }
+            this.cancelAnimation();
+            const generation = this.animationGeneration;
             if (this.shouldAnimate()) {
-                raf(() => {
+                this.currentRaf = raf(() => {
+                    if (generation !== this.animationGeneration)
+                        return;
                     this.setState(8 /* AccordionState.Expanding */);
                     this.balWillAnimate.emit(this.active);
-                    this.currentRaf = raf(async () => {
+                    this.currentRafInner = raf(async () => {
+                        if (generation !== this.animationGeneration)
+                            return;
                         const contentHeight = detailsWrapperElement.offsetHeight;
                         const waitForTransition = transitionEndAsync(detailsElement, 300);
                         detailsElement.style.setProperty('max-height', `${contentHeight}px`);
                         await waitForTransition;
+                        if (generation !== this.animationGeneration)
+                            return;
                         this.setState(4 /* AccordionState.Expanded */);
                         detailsElement.style.removeProperty('max-height');
                         this.balDidAnimate.emit(this.active);
@@ -134,18 +151,23 @@ export class Accordion {
             if (this.state === 1 /* AccordionState.Collapsed */) {
                 return this.active;
             }
-            if (this.currentRaf !== undefined) {
-                cancelAnimationFrame(this.currentRaf);
-            }
+            this.cancelAnimation();
+            const generation = this.animationGeneration;
             if (this.shouldAnimate()) {
                 this.currentRaf = raf(async () => {
+                    if (generation !== this.animationGeneration)
+                        return;
                     const contentHeight = detailsElement.offsetHeight;
                     detailsElement.style.setProperty('max-height', `${contentHeight}px`);
-                    raf(async () => {
+                    this.currentRafInner = raf(async () => {
+                        if (generation !== this.animationGeneration)
+                            return;
                         const waitForTransition = transitionEndAsync(detailsElement, 300);
                         this.setState(2 /* AccordionState.Collapsing */);
-                        this.balDidAnimate.emit(this.active);
+                        this.balWillAnimate.emit(this.active);
                         await waitForTransition;
+                        if (generation !== this.animationGeneration)
+                            return;
                         this.setState(1 /* AccordionState.Collapsed */);
                         detailsElement.style.removeProperty('max-height');
                         this.balDidAnimate.emit(this.active);
@@ -153,7 +175,7 @@ export class Accordion {
                 });
             }
             else {
-                this.balDidAnimate.emit(this.active);
+                this.balWillAnimate.emit(this.active);
                 this.setState(1 /* AccordionState.Collapsed */);
                 this.balDidAnimate.emit(this.active);
             }