@usecapsule/core-components 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10087,6 +10087,32 @@ const CpslModal = class {
10087
10087
  this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();
10088
10088
  }
10089
10089
  toggleModal() {
10090
+ if (this.hasAnimatedIn) {
10091
+ this.handleAnimation();
10092
+ }
10093
+ }
10094
+ componentDidLoad() {
10095
+ this.handleAnimation();
10096
+ this.hasAnimatedIn = true;
10097
+ mm.add(`(min-width: ${constants.MOBILE_SIZE + 1}px)`, () => {
10098
+ var _a;
10099
+ (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
10100
+ gsapWithCSS.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
10101
+ });
10102
+ mm.add(`(max-width: ${constants.MOBILE_SIZE}px)`, () => {
10103
+ this.initDraggable();
10104
+ gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
10105
+ });
10106
+ this.footerSlotEl.addEventListener('slotchange', () => {
10107
+ if (this.footerSlotEl.assignedNodes().length >= 1) {
10108
+ this.hasFooter = true;
10109
+ }
10110
+ else {
10111
+ this.hasFooter = false;
10112
+ }
10113
+ });
10114
+ }
10115
+ handleAnimation() {
10090
10116
  if (this.open) {
10091
10117
  if (window.innerWidth >= constants.MOBILE_SIZE + 1) {
10092
10118
  gsapWithCSS
@@ -10161,25 +10187,6 @@ const CpslModal = class {
10161
10187
  }
10162
10188
  }
10163
10189
  }
10164
- componentDidLoad() {
10165
- mm.add(`(min-width: ${constants.MOBILE_SIZE + 1}px)`, () => {
10166
- var _a;
10167
- (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
10168
- gsapWithCSS.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
10169
- });
10170
- mm.add(`(max-width: ${constants.MOBILE_SIZE}px)`, () => {
10171
- this.initDraggable();
10172
- gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
10173
- });
10174
- this.footerSlotEl.addEventListener('slotchange', () => {
10175
- if (this.footerSlotEl.assignedNodes().length >= 1) {
10176
- this.hasFooter = true;
10177
- }
10178
- else {
10179
- this.hasFooter = false;
10180
- }
10181
- });
10182
- }
10183
10190
  addExpandAnim() {
10184
10191
  setTimeout(() => {
10185
10192
  this.expandFooterTl = gsapWithCSS