@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.
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/{p-bea93fae.entry.js → p-c7be2546.entry.js} +2 -2
- package/dist/capsule/p-c7be2546.entry.js.map +1 -0
- package/dist/cjs/cpsl-alert_18.cjs.entry.js +27 -21
- package/dist/cjs/cpsl-alert_18.cjs.entry.js.map +1 -1
- package/dist/collection/components/cpsl-modal/cpsl-modal.js +27 -21
- package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +1 -1
- package/dist/esm/cpsl-alert_18.entry.js +27 -21
- package/dist/esm/cpsl-alert_18.entry.js.map +1 -1
- package/dist/types/components/cpsl-modal/cpsl-modal.d.ts +2 -0
- package/package.json +1 -1
- package/dist/capsule/p-bea93fae.entry.js.map +0 -1
@@ -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)));
|