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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (12) hide show
  1. package/dist/capsule/capsule.esm.js +1 -1
  2. package/dist/capsule/{p-bea93fae.entry.js → p-c7be2546.entry.js} +2 -2
  3. package/dist/capsule/p-c7be2546.entry.js.map +1 -0
  4. package/dist/cjs/cpsl-alert_18.cjs.entry.js +27 -21
  5. package/dist/cjs/cpsl-alert_18.cjs.entry.js.map +1 -1
  6. package/dist/collection/components/cpsl-modal/cpsl-modal.js +27 -21
  7. package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +1 -1
  8. package/dist/esm/cpsl-alert_18.entry.js +27 -21
  9. package/dist/esm/cpsl-alert_18.entry.js.map +1 -1
  10. package/dist/types/components/cpsl-modal/cpsl-modal.d.ts +2 -0
  11. package/package.json +1 -1
  12. package/dist/capsule/p-bea93fae.entry.js.map +0 -1
package/dist/collection/components/cpsl-modal/cpsl-modal.js CHANGED
@@ -21,6 +21,32 @@ export class CpslModal {
21
21
  this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();
22
22
  }
23
23
  toggleModal() {
24
+ if (this.hasAnimatedIn) {
25
+ this.handleAnimation();
26
+ }
27
+ }
28
+ componentDidLoad() {
29
+ this.handleAnimation();
30
+ this.hasAnimatedIn = true;
31
+ mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {
32
+ var _a;
33
+ (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
34
+ gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
35
+ });
36
+ mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {
37
+ this.initDraggable();
38
+ gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
39
+ });
40
+ this.footerSlotEl.addEventListener('slotchange', () => {
41
+ if (this.footerSlotEl.assignedNodes().length >= 1) {
42
+ this.hasFooter = true;
43
+ }
44
+ else {
45
+ this.hasFooter = false;
46
+ }
47
+ });
48
+ }
49
+ handleAnimation() {
24
50
  if (this.open) {
25
51
  if (window.innerWidth >= MOBILE_SIZE + 1) {
26
52
  gsap
@@ -95,25 +121,6 @@ export class CpslModal {
95
121
  }
96
122
  }
97
123
  }
98
- componentDidLoad() {
99
- mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {
100
- var _a;
101
- (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
102
- gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
103
- });
104
- mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {
105
- this.initDraggable();
106
- gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
107
- });
108
- this.footerSlotEl.addEventListener('slotchange', () => {
109
- if (this.footerSlotEl.assignedNodes().length >= 1) {
110
- this.hasFooter = true;
111
- }
112
- else {
113
- this.hasFooter = false;
114
- }
115
- });
116
- }
117
124
  addExpandAnim() {
118
125
  setTimeout(() => {
119
126
  this.expandFooterTl = gsap
@@ -196,11 +203,10 @@ export class CpslModal {
196
203
  return this.el.shadowRoot.getElementById('modal-header');
197
204
  }
198
205
  get Modal() {
199
- return (h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, h("slot", null), h("div", { id: "modal-inner-container", class: { 'modal-inner-container': true, 'no-footer': !this.hasFooter }, part: "modal-inner-container" }, h("div", { id: "modal-content", part: "modal-content" }, h("div", { id: "modal-header", class: "modal-header" }, h("slot", { name: "header" })), h("slot", { name: "body" })), h("div", { id: "modal-header-expanded", class: { 'modal-header': true, 'expanded': true, 'no-opacity': true } }, h("slot", { name: "footerExpandedHeader" }))), h("div", { id: "modal-footer" }, h("slot", { name: "footer" })), h("div", { id: "modal-footer-expanded", class: { 'expanded': true, 'no-opacity': true } }, h("slot", { name: "footerExpandedFooter" }))));
206
+ return (h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, h("slot", null), h("div", { id: "modal-inner-container", class: { 'modal-inner-container': true, 'no-footer': !this.hasFooter }, part: "modal-inner-container" }, h("div", { id: "modal-content", part: "modal-content" }, h("div", { id: "modal-header", class: "modal-header", part: "modal-header" }, h("slot", { name: "header" })), h("div", { id: "modal-body", class: "modal-body", part: "modal-body" }, h("slot", { name: "body" }))), h("div", { id: "modal-header-expanded", class: { 'modal-header': true, 'expanded': true, 'no-opacity': true }, part: "modal-header-expanded" }, h("slot", { name: "footerExpandedHeader" }))), h("div", { id: "modal-footer", part: "modal-footer" }, h("slot", { name: "footer" })), h("div", { id: "modal-footer-expanded", class: { 'expanded': true, 'no-opacity': true }, part: "modal-footer-expanded" }, h("slot", { name: "footerExpandedFooter" }))));
200
207
  }
201
208
  render() {
202
209
  if (this.noOverlay) {
203
- this.addExpandAnim();
204
210
  return h(Host, null, this.Modal);
205
211
  }
206
212
  return (h(Host, { class: { 'include-mobile-styling': true } }, h("cpsl-overlay", { id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));
package/dist/collection/components/cpsl-modal/cpsl-modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cpsl-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-modal/cpsl-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\nimport gsap from 'gsap';\nimport Draggable from 'gsap/Draggable';\nimport { MOBILE_SIZE } from '../../constants';\n\ngsap.registerPlugin(Draggable);\nconst mm = gsap.matchMedia();\n@Component({\n tag: 'cpsl-modal',\n styleUrl: 'cpsl-modal.scss',\n shadow: true,\n})\nexport class CpslModal {\n private draggable: Draggable;\n private expandFooterTl;\n\n @Element() el!: HTMLCpslModalElement;\n\n @State() hasFooter: boolean;\n\n /**\n * Duration in seconds of the modal entering.\n * Default is .15.\n */\n @Prop() enterTransitionDuration?: number = 0.15;\n\n /**\n * Duration in seconds of the modal exiting.\n * Default is .15.\n */\n @Prop() exitTransitionDuration?: number = 0.15;\n\n /**\n * Whether or not to show `footerExpandedFooter` and `footerExpandedHeader` slots.\n */\n @Prop() footerExpanded?: boolean;\n\n /**\n * Duration in seconds of the footer expansion animation.\n * Default is 0.15.\n */\n @Prop() footerTransitionDuration?: number = 0.15;\n\n /**\n * Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`.\n */\n @Prop() noOverlay?: boolean;\n\n /**\n * Whether or not to show the modal.\n */\n @Prop() open: boolean;\n\n /**\n * Emitted when enter animation starts.\n */\n @Event() cpslModalEntering!: EventEmitter<null>;\n\n /**\n * Emitted when enter animation finishes.\n */\n @Event() cpslModalEntered!: EventEmitter<null>;\n\n /**\n * Emitted when exit animation starts.\n */\n @Event() cpslModalExiting!: EventEmitter<null>;\n\n /**\n * Emitted when exit animation finishes.\n */\n @Event() cpslModalExited!: EventEmitter<null>;\n\n /**\n * Emitted when exit animation finishes.\n */\n @Event() cpslModalRequestClose!: EventEmitter<null>;\n\n @Watch('footerExpanded')\n toggleHeight() {\n this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();\n }\n\n @Watch('open')\n toggleModal() {\n if (this.open) {\n if (window.innerWidth >= MOBILE_SIZE + 1) {\n gsap\n .timeline({\n onStart: () => {\n this.cpslModalEntering.emit();\n },\n onComplete: () => {\n this.addExpandAnim();\n this.cpslModalEntered.emit();\n },\n })\n .set(this.modalWrapperEl, { display: 'flex', yPercent: 0 })\n .to(this.modalWrapperEl, {\n scale: 1,\n opacity: 1,\n duration: this.enterTransitionDuration,\n });\n } else {\n gsap\n .timeline({\n onStart: () => {\n this.cpslModalEntering.emit();\n },\n onComplete: () => {\n this.addExpandAnim();\n this.cpslModalEntered.emit();\n },\n })\n .set(this.modalWrapperEl, { display: 'flex', scale: 1, opacity: 1 })\n .to(this.modalWrapperEl, {\n yPercent: -100,\n duration: this.enterTransitionDuration,\n });\n }\n } else {\n if (window.innerWidth >= MOBILE_SIZE + 1) {\n gsap\n .timeline({\n onStart: () => {\n this.cpslModalExiting.emit();\n },\n onComplete: () => {\n this.cpslModalExited.emit();\n this.modalWrapperEl.style.setProperty('display', 'none');\n },\n })\n .to(this.modalWrapperEl, {\n scale: 0.8,\n opacity: 0,\n duration: this.exitTransitionDuration,\n });\n } else {\n gsap\n .timeline({\n onStart: () => {\n this.cpslModalExiting.emit();\n },\n onComplete: () => {\n this.cpslModalExited.emit();\n this.modalWrapperEl.style.setProperty('display', 'none');\n },\n })\n .to(this.modalWrapperEl, {\n yPercent: 0,\n duration: this.exitTransitionDuration,\n })\n .set(this.modalContainerEl, { y: 0 });\n }\n }\n }\n\n componentDidLoad() {\n mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {\n this.draggable?.disable();\n gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });\n });\n mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {\n this.initDraggable();\n gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });\n });\n\n this.footerSlotEl.addEventListener('slotchange', () => {\n if (this.footerSlotEl.assignedNodes().length >= 1) {\n this.hasFooter = true;\n } else {\n this.hasFooter = false;\n }\n });\n }\n\n private addExpandAnim() {\n setTimeout(() => {\n this.expandFooterTl = gsap\n .timeline({\n reversed: true,\n paused: true,\n onReverseComplete: () => {\n this.contentEl.style.setProperty('height', 'auto');\n },\n defaults: {\n duration: this.footerTransitionDuration,\n },\n })\n .set(this.footerExpandedEl, { overflow: 'auto', display: 'block' })\n .set(this.headerExpandedEl, { display: 'block' })\n .to(this.innerContainerEl, { paddingBottom: '8px' })\n .to(this.contentEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')\n .to(this.footerEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')\n .to(this.footerExpandedEl, { height: 'auto', opacity: 1 }, '<')\n .to(this.headerExpandedEl, { height: 'auto', opacity: 1 }, '<');\n }, 10);\n }\n\n private getDraggableHeight = () => {\n return this.innerContainerEl.clientHeight;\n };\n\n private initDraggable() {\n this.draggable = Draggable.create(this.modalContainerEl, {\n trigger: this.headerEl,\n dragClickables: false,\n type: 'y',\n edgeResistance: 0.2,\n liveSnap: {\n y: function (y) {\n if (y < 0) return 0; // Restricts dragging to down\n return y;\n },\n },\n onDrag: () => {\n const y = gsap.utils.mapRange(0, this.getDraggableHeight(), 1, 0, this.draggable.y);\n gsap.set(this.overlayEl, { opacity: y });\n },\n onDragEnd: () => {\n if (this.draggable.y > 60) {\n this.cpslModalRequestClose.emit();\n } else {\n gsap.set(this.overlayEl, { opacity: 1 });\n gsap.set(this.modalWrapperEl, { yPercent: -100 });\n gsap.set(this.modalContainerEl, { y: 0 });\n }\n },\n })[0];\n }\n\n private get footerEl() {\n return this.el.shadowRoot.getElementById('modal-footer');\n }\n\n private get footerExpandedEl() {\n return this.el.shadowRoot.getElementById('modal-footer-expanded');\n }\n\n private get headerExpandedEl() {\n return this.el.shadowRoot.getElementById('modal-header-expanded');\n }\n\n private get innerContainerEl() {\n return this.el.shadowRoot.getElementById('modal-inner-container');\n }\n\n private get contentEl() {\n return this.el.shadowRoot.getElementById('modal-content');\n }\n\n private get modalWrapperEl() {\n return this.el.shadowRoot.getElementById('modal-wrapper');\n }\n\n private get modalContainerEl() {\n return this.el.shadowRoot.getElementById('modal-container');\n }\n\n private get overlayEl() {\n return this.el.shadowRoot.getElementById('overlay');\n }\n\n private get footerSlotEl() {\n return this.footerEl.querySelectorAll('slot')[0];\n }\n\n private get headerEl() {\n return this.el.shadowRoot.getElementById('modal-header');\n }\n\n private get Modal() {\n return (\n <div class={{ 'modal-container': true, 'no-footer': !this.hasFooter }} part=\"modal-container\" id=\"modal-container\">\n <slot></slot>\n <div id=\"modal-inner-container\" class={{ 'modal-inner-container': true, 'no-footer': !this.hasFooter }} part=\"modal-inner-container\">\n <div id=\"modal-content\" part=\"modal-content\">\n <div id=\"modal-header\" class=\"modal-header\">\n <slot name=\"header\"></slot>\n </div>\n <slot name=\"body\"></slot>\n </div>\n <div id=\"modal-header-expanded\" class={{ 'modal-header': true, 'expanded': true, 'no-opacity': true }}>\n <slot name=\"footerExpandedHeader\"></slot>\n </div>\n </div>\n <div id=\"modal-footer\">\n <slot name=\"footer\"></slot>\n </div>\n <div id=\"modal-footer-expanded\" class={{ 'expanded': true, 'no-opacity': true }}>\n <slot name=\"footerExpandedFooter\"></slot>\n </div>\n </div>\n );\n }\n\n render() {\n if (this.noOverlay) {\n this.addExpandAnim();\n return <Host>{this.Modal}</Host>;\n }\n\n return (\n <Host class={{ 'include-mobile-styling': true }}>\n <cpsl-overlay id=\"overlay\" open={this.open} enterTransitionDuration={this.enterTransitionDuration} exitTransitionDuration={this.exitTransitionDuration} />\n <div id=\"modal-wrapper\" class=\"modal-wrapper\">\n {this.Modal}\n </div>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"cpsl-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-modal/cpsl-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\nimport gsap from 'gsap';\nimport Draggable from 'gsap/Draggable';\nimport { MOBILE_SIZE } from '../../constants';\n\ngsap.registerPlugin(Draggable);\nconst mm = gsap.matchMedia();\n@Component({\n tag: 'cpsl-modal',\n styleUrl: 'cpsl-modal.scss',\n shadow: true,\n})\nexport class CpslModal {\n private draggable: Draggable;\n private expandFooterTl: gsap.core.Timeline;\n private hasAnimatedIn: boolean;\n\n @Element() el!: HTMLCpslModalElement;\n\n @State() hasFooter: boolean;\n\n /**\n * Duration in seconds of the modal entering.\n * Default is .15.\n */\n @Prop() enterTransitionDuration?: number = 0.15;\n\n /**\n * Duration in seconds of the modal exiting.\n * Default is .15.\n */\n @Prop() exitTransitionDuration?: number = 0.15;\n\n /**\n * Whether or not to show `footerExpandedFooter` and `footerExpandedHeader` slots.\n */\n @Prop() footerExpanded?: boolean;\n\n /**\n * Duration in seconds of the footer expansion animation.\n * Default is 0.15.\n */\n @Prop() footerTransitionDuration?: number = 0.15;\n\n /**\n * Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`.\n */\n @Prop() noOverlay?: boolean;\n\n /**\n * Whether or not to show the modal.\n */\n @Prop() open: boolean;\n\n /**\n * Emitted when enter animation starts.\n */\n @Event() cpslModalEntering!: EventEmitter<null>;\n\n /**\n * Emitted when enter animation finishes.\n */\n @Event() cpslModalEntered!: EventEmitter<null>;\n\n /**\n * Emitted when exit animation starts.\n */\n @Event() cpslModalExiting!: EventEmitter<null>;\n\n /**\n * Emitted when exit animation finishes.\n */\n @Event() cpslModalExited!: EventEmitter<null>;\n\n /**\n * Emitted when exit animation finishes.\n */\n @Event() cpslModalRequestClose!: EventEmitter<null>;\n\n @Watch('footerExpanded')\n toggleHeight() {\n this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();\n }\n\n @Watch('open')\n toggleModal() {\n if (this.hasAnimatedIn) {\n this.handleAnimation();\n }\n }\n\n componentDidLoad() {\n this.handleAnimation();\n this.hasAnimatedIn = true;\n\n mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {\n this.draggable?.disable();\n gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });\n });\n mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {\n this.initDraggable();\n gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });\n });\n\n this.footerSlotEl.addEventListener('slotchange', () => {\n if (this.footerSlotEl.assignedNodes().length >= 1) {\n this.hasFooter = true;\n } else {\n this.hasFooter = false;\n }\n });\n }\n\n private handleAnimation() {\n if (this.open) {\n if (window.innerWidth >= MOBILE_SIZE + 1) {\n gsap\n .timeline({\n onStart: () => {\n this.cpslModalEntering.emit();\n },\n onComplete: () => {\n this.addExpandAnim();\n this.cpslModalEntered.emit();\n },\n })\n .set(this.modalWrapperEl, { display: 'flex', yPercent: 0 })\n .to(this.modalWrapperEl, {\n scale: 1,\n opacity: 1,\n duration: this.enterTransitionDuration,\n });\n } else {\n gsap\n .timeline({\n onStart: () => {\n this.cpslModalEntering.emit();\n },\n onComplete: () => {\n this.addExpandAnim();\n this.cpslModalEntered.emit();\n },\n })\n .set(this.modalWrapperEl, { display: 'flex', scale: 1, opacity: 1 })\n .to(this.modalWrapperEl, {\n yPercent: -100,\n duration: this.enterTransitionDuration,\n });\n }\n } else {\n if (window.innerWidth >= MOBILE_SIZE + 1) {\n gsap\n .timeline({\n onStart: () => {\n this.cpslModalExiting.emit();\n },\n onComplete: () => {\n this.cpslModalExited.emit();\n this.modalWrapperEl.style.setProperty('display', 'none');\n },\n })\n .to(this.modalWrapperEl, {\n scale: 0.8,\n opacity: 0,\n duration: this.exitTransitionDuration,\n });\n } else {\n gsap\n .timeline({\n onStart: () => {\n this.cpslModalExiting.emit();\n },\n onComplete: () => {\n this.cpslModalExited.emit();\n this.modalWrapperEl.style.setProperty('display', 'none');\n },\n })\n .to(this.modalWrapperEl, {\n yPercent: 0,\n duration: this.exitTransitionDuration,\n })\n .set(this.modalContainerEl, { y: 0 });\n }\n }\n }\n\n private addExpandAnim() {\n setTimeout(() => {\n this.expandFooterTl = gsap\n .timeline({\n reversed: true,\n paused: true,\n onReverseComplete: () => {\n this.contentEl.style.setProperty('height', 'auto');\n },\n defaults: {\n duration: this.footerTransitionDuration,\n },\n })\n .set(this.footerExpandedEl, { overflow: 'auto', display: 'block' })\n .set(this.headerExpandedEl, { display: 'block' })\n .to(this.innerContainerEl, { paddingBottom: '8px' })\n .to(this.contentEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')\n .to(this.footerEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')\n .to(this.footerExpandedEl, { height: 'auto', opacity: 1 }, '<')\n .to(this.headerExpandedEl, { height: 'auto', opacity: 1 }, '<');\n }, 10);\n }\n\n private getDraggableHeight = () => {\n return this.innerContainerEl.clientHeight;\n };\n\n private initDraggable() {\n this.draggable = Draggable.create(this.modalContainerEl, {\n trigger: this.headerEl,\n dragClickables: false,\n type: 'y',\n edgeResistance: 0.2,\n liveSnap: {\n y: function (y) {\n if (y < 0) return 0; // Restricts dragging to down\n return y;\n },\n },\n onDrag: () => {\n const y = gsap.utils.mapRange(0, this.getDraggableHeight(), 1, 0, this.draggable.y);\n gsap.set(this.overlayEl, { opacity: y });\n },\n onDragEnd: () => {\n if (this.draggable.y > 60) {\n this.cpslModalRequestClose.emit();\n } else {\n gsap.set(this.overlayEl, { opacity: 1 });\n gsap.set(this.modalWrapperEl, { yPercent: -100 });\n gsap.set(this.modalContainerEl, { y: 0 });\n }\n },\n })[0];\n }\n\n private get footerEl() {\n return this.el.shadowRoot.getElementById('modal-footer');\n }\n\n private get footerExpandedEl() {\n return this.el.shadowRoot.getElementById('modal-footer-expanded');\n }\n\n private get headerExpandedEl() {\n return this.el.shadowRoot.getElementById('modal-header-expanded');\n }\n\n private get innerContainerEl() {\n return this.el.shadowRoot.getElementById('modal-inner-container');\n }\n\n private get contentEl() {\n return this.el.shadowRoot.getElementById('modal-content');\n }\n\n private get modalWrapperEl() {\n return this.el.shadowRoot.getElementById('modal-wrapper');\n }\n\n private get modalContainerEl() {\n return this.el.shadowRoot.getElementById('modal-container');\n }\n\n private get overlayEl() {\n return this.el.shadowRoot.getElementById('overlay');\n }\n\n private get footerSlotEl() {\n return this.footerEl.querySelectorAll('slot')[0];\n }\n\n private get headerEl() {\n return this.el.shadowRoot.getElementById('modal-header');\n }\n\n private get Modal() {\n return (\n <div class={{ 'modal-container': true, 'no-footer': !this.hasFooter }} part=\"modal-container\" id=\"modal-container\">\n <slot></slot>\n <div id=\"modal-inner-container\" class={{ 'modal-inner-container': true, 'no-footer': !this.hasFooter }} part=\"modal-inner-container\">\n <div id=\"modal-content\" part=\"modal-content\">\n <div id=\"modal-header\" class=\"modal-header\" part=\"modal-header\">\n <slot name=\"header\"></slot>\n </div>\n <div id=\"modal-body\" class=\"modal-body\" part=\"modal-body\">\n <slot name=\"body\"></slot>\n </div>\n </div>\n <div id=\"modal-header-expanded\" class={{ 'modal-header': true, 'expanded': true, 'no-opacity': true }} part=\"modal-header-expanded\">\n <slot name=\"footerExpandedHeader\"></slot>\n </div>\n </div>\n <div id=\"modal-footer\" part=\"modal-footer\">\n <slot name=\"footer\"></slot>\n </div>\n <div id=\"modal-footer-expanded\" class={{ 'expanded': true, 'no-opacity': true }} part=\"modal-footer-expanded\">\n <slot name=\"footerExpandedFooter\"></slot>\n </div>\n </div>\n );\n }\n\n render() {\n if (this.noOverlay) {\n return <Host>{this.Modal}</Host>;\n }\n\n return (\n <Host class={{ 'include-mobile-styling': true }}>\n <cpsl-overlay id=\"overlay\" open={this.open} enterTransitionDuration={this.enterTransitionDuration} exitTransitionDuration={this.exitTransitionDuration} />\n <div id=\"modal-wrapper\" class=\"modal-wrapper\">\n {this.Modal}\n </div>\n </Host>\n );\n }\n}\n"]}
package/dist/esm/cpsl-alert_18.entry.js CHANGED
@@ -10140,6 +10140,32 @@ const CpslModal = class {
10140
10140
  this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();
10141
10141
  }
10142
10142
  toggleModal() {
10143
+ if (this.hasAnimatedIn) {
10144
+ this.handleAnimation();
10145
+ }
10146
+ }
10147
+ componentDidLoad() {
10148
+ this.handleAnimation();
10149
+ this.hasAnimatedIn = true;
10150
+ mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {
10151
+ var _a;
10152
+ (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
10153
+ gsapWithCSS.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
10154
+ });
10155
+ mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {
10156
+ this.initDraggable();
10157
+ gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
10158
+ });
10159
+ this.footerSlotEl.addEventListener('slotchange', () => {
10160
+ if (this.footerSlotEl.assignedNodes().length >= 1) {
10161
+ this.hasFooter = true;
10162
+ }
10163
+ else {
10164
+ this.hasFooter = false;
10165
+ }
10166
+ });
10167
+ }
10168
+ handleAnimation() {
10143
10169
  if (this.open) {
10144
10170
  if (window.innerWidth >= MOBILE_SIZE + 1) {
10145
10171
  gsapWithCSS
@@ -10214,25 +10240,6 @@ const CpslModal = class {
10214
10240
  }
10215
10241
  }
10216
10242
  }
10217
- componentDidLoad() {
10218
- mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {
10219
- var _a;
10220
- (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
10221
- gsapWithCSS.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
10222
- });
10223
- mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {
10224
- this.initDraggable();
10225
- gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
10226
- });
10227
- this.footerSlotEl.addEventListener('slotchange', () => {
10228
- if (this.footerSlotEl.assignedNodes().length >= 1) {
10229
- this.hasFooter = true;
10230
- }
10231
- else {
10232
- this.hasFooter = false;
10233
- }
10234
- });
10235
- }
10236
10243
  addExpandAnim() {
10237
10244
  setTimeout(() => {
10238
10245
  this.expandFooterTl = gsapWithCSS
@@ -10315,11 +10322,10 @@ const CpslModal = class {
10315
10322
  return this.el.shadowRoot.getElementById('modal-header');
10316
10323
  }
10317
10324
  get Modal() {
10318
- return (h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, h("slot", null), h("div", { id: "modal-inner-container", class: { 'modal-inner-container': true, 'no-footer': !this.hasFooter }, part: "modal-inner-container" }, h("div", { id: "modal-content", part: "modal-content" }, h("div", { id: "modal-header", class: "modal-header" }, h("slot", { name: "header" })), h("slot", { name: "body" })), h("div", { id: "modal-header-expanded", class: { 'modal-header': true, 'expanded': true, 'no-opacity': true } }, h("slot", { name: "footerExpandedHeader" }))), h("div", { id: "modal-footer" }, h("slot", { name: "footer" })), h("div", { id: "modal-footer-expanded", class: { 'expanded': true, 'no-opacity': true } }, h("slot", { name: "footerExpandedFooter" }))));
10325
+ return (h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, h("slot", null), h("div", { id: "modal-inner-container", class: { 'modal-inner-container': true, 'no-footer': !this.hasFooter }, part: "modal-inner-container" }, h("div", { id: "modal-content", part: "modal-content" }, h("div", { id: "modal-header", class: "modal-header", part: "modal-header" }, h("slot", { name: "header" })), h("div", { id: "modal-body", class: "modal-body", part: "modal-body" }, h("slot", { name: "body" }))), h("div", { id: "modal-header-expanded", class: { 'modal-header': true, 'expanded': true, 'no-opacity': true }, part: "modal-header-expanded" }, h("slot", { name: "footerExpandedHeader" }))), h("div", { id: "modal-footer", part: "modal-footer" }, h("slot", { name: "footer" })), h("div", { id: "modal-footer-expanded", class: { 'expanded': true, 'no-opacity': true }, part: "modal-footer-expanded" }, h("slot", { name: "footerExpandedFooter" }))));
10319
10326
  }
10320
10327
  render() {
10321
10328
  if (this.noOverlay) {
10322
- this.addExpandAnim();
10323
10329
  return h(Host, null, this.Modal);
10324
10330
  }
10325
10331
  return (h(Host, { class: { 'include-mobile-styling': true } }, h("cpsl-overlay", { id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));