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

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.
@@ -10144,6 +10144,32 @@ const CpslModal = class {
10144
10144
  this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();
10145
10145
  }
10146
10146
  toggleModal() {
10147
+ if (this.hasAnimatedIn) {
10148
+ this.handleAnimation();
10149
+ }
10150
+ }
10151
+ componentDidLoad() {
10152
+ this.handleAnimation();
10153
+ this.hasAnimatedIn = true;
10154
+ mm.add(`(min-width: ${constants.MOBILE_SIZE + 1}px)`, () => {
10155
+ var _a;
10156
+ (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
10157
+ gsapWithCSS.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
10158
+ });
10159
+ mm.add(`(max-width: ${constants.MOBILE_SIZE}px)`, () => {
10160
+ this.initDraggable();
10161
+ gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
10162
+ });
10163
+ this.footerSlotEl.addEventListener('slotchange', () => {
10164
+ if (this.footerSlotEl.assignedNodes().length >= 1) {
10165
+ this.hasFooter = true;
10166
+ }
10167
+ else {
10168
+ this.hasFooter = false;
10169
+ }
10170
+ });
10171
+ }
10172
+ handleAnimation() {
10147
10173
  if (this.open) {
10148
10174
  if (window.innerWidth >= constants.MOBILE_SIZE + 1) {
10149
10175
  gsapWithCSS
@@ -10218,25 +10244,6 @@ const CpslModal = class {
10218
10244
  }
10219
10245
  }
10220
10246
  }
10221
- componentDidLoad() {
10222
- mm.add(`(min-width: ${constants.MOBILE_SIZE + 1}px)`, () => {
10223
- var _a;
10224
- (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
10225
- gsapWithCSS.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
10226
- });
10227
- mm.add(`(max-width: ${constants.MOBILE_SIZE}px)`, () => {
10228
- this.initDraggable();
10229
- gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
10230
- });
10231
- this.footerSlotEl.addEventListener('slotchange', () => {
10232
- if (this.footerSlotEl.assignedNodes().length >= 1) {
10233
- this.hasFooter = true;
10234
- }
10235
- else {
10236
- this.hasFooter = false;
10237
- }
10238
- });
10239
- }
10240
10247
  addExpandAnim() {
10241
10248
  setTimeout(() => {
10242
10249
  this.expandFooterTl = gsapWithCSS
@@ -10319,11 +10326,10 @@ const CpslModal = class {
10319
10326
  return this.el.shadowRoot.getElementById('modal-header');
10320
10327
  }
10321
10328
  get Modal() {
10322
- 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" }))));
10329
+ 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" }))));
10323
10330
  }
10324
10331
  render() {
10325
10332
  if (this.noOverlay) {
10326
- this.addExpandAnim();
10327
10333
  return index.h(index.Host, null, this.Modal);
10328
10334
  }
10329
10335
  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)));