@usecapsule/core-components 2.0.0-dev.dropdown → 2.0.1-dev.dropdown

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

@@ -10144,6 +10144,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
@@ -10218,25 +10244,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
@@ -10319,11 +10326,10 @@ const CpslModal = class {
         return this.el.shadowRoot.getElementById('modal-header');
     }
     get Modal() {
-        return (index.h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, index.h("slot", null), index.h("div", { id: "modal-inner-container", class: { 'modal-inner-container': true, 'no-footer': !this.hasFooter }, part: "modal-inner-container" }, index.h("div", { id: "modal-content", part: "modal-content" }, index.h("div", { id: "modal-header", class: "modal-header" }, index.h("slot", { name: "header" })), index.h("slot", { name: "body" })), index.h("div", { id: "modal-header-expanded", class: { 'modal-header': true, 'expanded': true, 'no-opacity': true } }, index.h("slot", { name: "footerExpandedHeader" }))), index.h("div", { id: "modal-footer" }, index.h("slot", { name: "footer" })), index.h("div", { id: "modal-footer-expanded", class: { 'expanded': true, 'no-opacity': true } }, index.h("slot", { name: "footerExpandedFooter" }))));
+        return (index.h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, index.h("slot", null), index.h("div", { id: "modal-inner-container", class: { 'modal-inner-container': true, 'no-footer': !this.hasFooter }, part: "modal-inner-container" }, index.h("div", { id: "modal-content", part: "modal-content" }, index.h("div", { id: "modal-header", class: "modal-header", part: "modal-header" }, index.h("slot", { name: "header" })), index.h("div", { id: "modal-body", class: "modal-body", part: "modal-body" }, index.h("slot", { name: "body" }))), index.h("div", { id: "modal-header-expanded", class: { 'modal-header': true, 'expanded': true, 'no-opacity': true }, part: "modal-header-expanded" }, index.h("slot", { name: "footerExpandedHeader" }))), index.h("div", { id: "modal-footer", part: "modal-footer" }, index.h("slot", { name: "footer" })), index.h("div", { id: "modal-footer-expanded", class: { 'expanded': true, 'no-opacity': true }, part: "modal-footer-expanded" }, index.h("slot", { name: "footerExpandedFooter" }))));
     }
     render() {
         if (this.noOverlay) {
-            this.addExpandAnim();
             return index.h(index.Host, null, this.Modal);
         }
         return (index.h(index.Host, { class: { 'include-mobile-styling': true } }, index.h("cpsl-overlay", { id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), index.h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));