@usecapsule/core-components 2.0.0 → 2.0.1

package/dist/cjs/cpsl-alert_17.cjs.entry.js

@@ -10087,6 +10087,32 @@ const CpslModal = class {
         this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();
     }
     toggleModal() {
+        if (this.hasAnimatedIn) {
+            this.handleAnimation();
+        }
+    }
+    componentDidLoad() {
+        this.handleAnimation();
+        this.hasAnimatedIn = true;
+        mm.add(`(min-width: ${constants.MOBILE_SIZE + 1}px)`, () => {
+            var _a;
+            (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
+            gsapWithCSS.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
+        });
+        mm.add(`(max-width: ${constants.MOBILE_SIZE}px)`, () => {
+            this.initDraggable();
+            gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
+        });
+        this.footerSlotEl.addEventListener('slotchange', () => {
+            if (this.footerSlotEl.assignedNodes().length >= 1) {
+                this.hasFooter = true;
+            }
+            else {
+                this.hasFooter = false;
+            }
+        });
+    }
+    handleAnimation() {
         if (this.open) {
             if (window.innerWidth >= constants.MOBILE_SIZE + 1) {
                 gsapWithCSS
@@ -10161,25 +10187,6 @@ const CpslModal = class {
             }
         }
     }
-    componentDidLoad() {
-        mm.add(`(min-width: ${constants.MOBILE_SIZE + 1}px)`, () => {
-            var _a;
-            (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
-            gsapWithCSS.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
-        });
-        mm.add(`(max-width: ${constants.MOBILE_SIZE}px)`, () => {
-            this.initDraggable();
-            gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
-        });
-        this.footerSlotEl.addEventListener('slotchange', () => {
-            if (this.footerSlotEl.assignedNodes().length >= 1) {
-                this.hasFooter = true;
-            }
-            else {
-                this.hasFooter = false;
-            }
-        });
-    }
     addExpandAnim() {
         setTimeout(() => {
             this.expandFooterTl = gsapWithCSS