@usecapsule/core-components 2.0.2 → 2.0.3

package/dist/collection/components/cpsl-modal/cpsl-modal.js

@@ -0,0 +1,429 @@
+import { Host, h } from "@stencil/core";
+import gsap from "gsap";
+import Draggable from "gsap/Draggable";
+import { MOBILE_SIZE } from "../../constants";
+gsap.registerPlugin(Draggable);
+const mm = gsap.matchMedia();
+export class CpslModal {
+    constructor() {
+        this.getDraggableHeight = () => {
+            return this.innerContainerEl.clientHeight;
+        };
+        this.hasFooter = undefined;
+        this.enterTransitionDuration = 0.15;
+        this.exitTransitionDuration = 0.15;
+        this.footerExpanded = undefined;
+        this.footerTransitionDuration = 0.15;
+        this.noOverlay = undefined;
+        this.open = undefined;
+    }
+    toggleHeight() {
+        this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();
+    }
+    toggleModal() {
+        if (this.hasAnimatedIn) {
+            this.handleAnimation();
+        }
+    }
+    componentDidLoad() {
+        this.handleAnimation();
+        this.hasAnimatedIn = true;
+        mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {
+            var _a;
+            (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
+            gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
+        });
+        mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {
+            this.initDraggable();
+            gsap.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 >= MOBILE_SIZE + 1) {
+                gsap
+                    .timeline({
+                    onStart: () => {
+                        this.cpslModalEntering.emit();
+                    },
+                    onComplete: () => {
+                        this.addExpandAnim();
+                        this.cpslModalEntered.emit();
+                    },
+                })
+                    .set(this.modalWrapperEl, { display: 'flex', yPercent: 0 })
+                    .to(this.modalWrapperEl, {
+                    scale: 1,
+                    opacity: 1,
+                    duration: this.enterTransitionDuration,
+                });
+            }
+            else {
+                gsap
+                    .timeline({
+                    onStart: () => {
+                        this.cpslModalEntering.emit();
+                    },
+                    onComplete: () => {
+                        this.addExpandAnim();
+                        this.cpslModalEntered.emit();
+                    },
+                })
+                    .set(this.modalWrapperEl, { display: 'flex', scale: 1, opacity: 1 })
+                    .to(this.modalWrapperEl, {
+                    yPercent: -100,
+                    duration: this.enterTransitionDuration,
+                });
+            }
+        }
+        else {
+            if (window.innerWidth >= MOBILE_SIZE + 1) {
+                gsap
+                    .timeline({
+                    onStart: () => {
+                        this.cpslModalExiting.emit();
+                    },
+                    onComplete: () => {
+                        this.cpslModalExited.emit();
+                        this.modalWrapperEl.style.setProperty('display', 'none');
+                    },
+                })
+                    .to(this.modalWrapperEl, {
+                    scale: 0.8,
+                    opacity: 0,
+                    duration: this.exitTransitionDuration,
+                });
+            }
+            else {
+                gsap
+                    .timeline({
+                    onStart: () => {
+                        this.cpslModalExiting.emit();
+                    },
+                    onComplete: () => {
+                        this.cpslModalExited.emit();
+                        this.modalWrapperEl.style.setProperty('display', 'none');
+                    },
+                })
+                    .to(this.modalWrapperEl, {
+                    yPercent: 0,
+                    duration: this.exitTransitionDuration,
+                })
+                    .set(this.modalContainerEl, { y: 0 });
+            }
+        }
+    }
+    addExpandAnim() {
+        setTimeout(() => {
+            this.expandFooterTl = gsap
+                .timeline({
+                reversed: true,
+                paused: true,
+                onReverseComplete: () => {
+                    this.contentEl.style.setProperty('height', 'auto');
+                },
+                defaults: {
+                    duration: this.footerTransitionDuration,
+                },
+            })
+                .set(this.footerExpandedEl, { overflow: 'auto', display: 'block' })
+                .set(this.headerExpandedEl, { display: 'block' })
+                .to(this.innerContainerEl, { paddingBottom: '8px' })
+                .to(this.contentEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')
+                .to(this.footerEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')
+                .to(this.footerExpandedEl, { height: 'auto', opacity: 1 }, '<')
+                .to(this.headerExpandedEl, { height: 'auto', opacity: 1 }, '<');
+        }, 10);
+    }
+    initDraggable() {
+        this.draggable = Draggable.create(this.modalContainerEl, {
+            trigger: this.headerEl,
+            dragClickables: false,
+            type: 'y',
+            edgeResistance: 0.2,
+            liveSnap: {
+                y: function (y) {
+                    if (y < 0)
+                        return 0;
+                    return y;
+                },
+            },
+            onDrag: () => {
+                const y = gsap.utils.mapRange(0, this.getDraggableHeight(), 1, 0, this.draggable.y);
+                gsap.set(this.overlayEl, { opacity: y });
+            },
+            onDragEnd: () => {
+                if (this.draggable.y > 60) {
+                    this.cpslModalRequestClose.emit();
+                }
+                else {
+                    gsap.set(this.overlayEl, { opacity: 1 });
+                    gsap.set(this.modalWrapperEl, { yPercent: -100 });
+                    gsap.set(this.modalContainerEl, { y: 0 });
+                }
+            },
+        })[0];
+    }
+    get footerEl() {
+        return this.el.shadowRoot.getElementById('modal-footer');
+    }
+    get footerExpandedEl() {
+        return this.el.shadowRoot.getElementById('modal-footer-expanded');
+    }
+    get headerExpandedEl() {
+        return this.el.shadowRoot.getElementById('modal-header-expanded');
+    }
+    get innerContainerEl() {
+        return this.el.shadowRoot.getElementById('modal-inner-container');
+    }
+    get contentEl() {
+        return this.el.shadowRoot.getElementById('modal-content');
+    }
+    get modalWrapperEl() {
+        return this.el.shadowRoot.getElementById('modal-wrapper');
+    }
+    get modalContainerEl() {
+        return this.el.shadowRoot.getElementById('modal-container');
+    }
+    get overlayEl() {
+        return this.el.shadowRoot.getElementById('overlay');
+    }
+    get footerSlotEl() {
+        return this.footerEl.querySelectorAll('slot')[0];
+    }
+    get headerEl() {
+        return this.el.shadowRoot.getElementById('modal-header');
+    }
+    get Modal() {
+        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" }))));
+    }
+    render() {
+        if (this.noOverlay) {
+            return h(Host, null, this.Modal);
+        }
+        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)));
+    }
+    static get is() { return "cpsl-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "enterTransitionDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration in seconds of the modal entering.\nDefault is .15."
+                },
+                "attribute": "enter-transition-duration",
+                "reflect": false,
+                "defaultValue": "0.15"
+            },
+            "exitTransitionDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration in seconds of the modal exiting.\nDefault is .15."
+                },
+                "attribute": "exit-transition-duration",
+                "reflect": false,
+                "defaultValue": "0.15"
+            },
+            "footerExpanded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to show `footerExpandedFooter` and `footerExpandedHeader` slots."
+                },
+                "attribute": "footer-expanded",
+                "reflect": false
+            },
+            "footerTransitionDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration in seconds of the footer expansion animation.\nDefault is 0.15."
+                },
+                "attribute": "footer-transition-duration",
+                "reflect": false,
+                "defaultValue": "0.15"
+            },
+            "noOverlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`."
+                },
+                "attribute": "no-overlay",
+                "reflect": false
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to show the modal."
+                },
+                "attribute": "open",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFooter": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslModalEntering",
+                "name": "cpslModalEntering",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when enter animation starts."
+                },
+                "complexType": {
+                    "original": "null",
+                    "resolved": "null",
+                    "references": {}
+                }
+            }, {
+                "method": "cpslModalEntered",
+                "name": "cpslModalEntered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when enter animation finishes."
+                },
+                "complexType": {
+                    "original": "null",
+                    "resolved": "null",
+                    "references": {}
+                }
+            }, {
+                "method": "cpslModalExiting",
+                "name": "cpslModalExiting",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when exit animation starts."
+                },
+                "complexType": {
+                    "original": "null",
+                    "resolved": "null",
+                    "references": {}
+                }
+            }, {
+                "method": "cpslModalExited",
+                "name": "cpslModalExited",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when exit animation finishes."
+                },
+                "complexType": {
+                    "original": "null",
+                    "resolved": "null",
+                    "references": {}
+                }
+            }, {
+                "method": "cpslModalRequestClose",
+                "name": "cpslModalRequestClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when exit animation finishes."
+                },
+                "complexType": {
+                    "original": "null",
+                    "resolved": "null",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "footerExpanded",
+                "methodName": "toggleHeight"
+            }, {
+                "propName": "open",
+                "methodName": "toggleModal"
+            }];
+    }
+}
+//# sourceMappingURL=cpsl-modal.js.map

package/dist/collection/components/cpsl-modal/cpsl-modal.js.map

@@ -0,0 +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/collection/components/cpsl-modal/test/cpsl-modal.e2e.js

@@ -0,0 +1,29 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newE2EPage } from "@stencil/core/testing";
+describe('cpsl-modal', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newE2EPage();
+        yield page.setContent('<cpsl-modal></cpsl-modal>');
+        const element = yield page.find('cpsl-modal');
+        expect(element).toHaveClass('hydrated');
+    }));
+});
+//# sourceMappingURL=cpsl-modal.e2e.js.map

package/dist/collection/components/cpsl-modal/test/cpsl-modal.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-modal.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-modal/test/cpsl-modal.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,2BAA2B,CAAC,CAAC;QAEnD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cpsl-modal', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-modal></cpsl-modal>');\n\n    const element = await page.find('cpsl-modal');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/cpsl-modal/test/cpsl-modal.spec.js

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newSpecPage } from "@stencil/core/testing";
+import { CpslModal } from "../cpsl-modal";
+describe('cpsl-modal', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newSpecPage({
+            components: [CpslModal],
+            html: `<cpsl-modal></cpsl-modal>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <cpsl-modal>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </cpsl-modal>
+    `);
+    }));
+});
+//# sourceMappingURL=cpsl-modal.spec.js.map

package/dist/collection/components/cpsl-modal/test/cpsl-modal.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-modal.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-modal/test/cpsl-modal.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,2BAA2B;SAClC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CpslModal } from '../cpsl-modal';\n\ndescribe('cpsl-modal', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslModal],\n      html: `<cpsl-modal></cpsl-modal>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-modal>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-modal>\n    `);\n  });\n});\n"]}

package/dist/collection/components/cpsl-overlay/cpsl-overlay.css

@@ -0,0 +1,11 @@
+:host {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 999999999999;
+  opacity: 0%;
+  display: none;
+  background-color: var(--cpsl-color-alpha-black-50);
+}

package/dist/collection/components/cpsl-overlay/cpsl-overlay.js

@@ -0,0 +1,108 @@
+import { Host, h } from "@stencil/core";
+import gsap from "gsap";
+export class CpslOverlay {
+    constructor() {
+        this.open = undefined;
+        this.enterTransitionDuration = 0.5;
+        this.exitTransitionDuration = 0.5;
+    }
+    toggleHeight() {
+        this.open
+            ? gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 })
+            : gsap.timeline({ defaults: { duration: this.exitTransitionDuration } }).to(this.el, { display: 'none', opacity: 0 });
+        if (this.open) {
+            document.documentElement.style.overflow = 'hidden';
+        }
+        else {
+            setTimeout(() => {
+                document.documentElement.style.overflow = 'auto';
+            }, this.exitTransitionDuration * 1000);
+        }
+    }
+    componentDidLoad() {
+        if (this.open) {
+            gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 });
+            document.documentElement.style.overflow = 'hidden';
+        }
+    }
+    render() {
+        return (h(Host, { key: '4d8c07e1704e32808745d92d5befa8a4145a779f' }, h("slot", { key: 'f767b8da95b657cf8c118c298c38acaf72af8e8c' })));
+    }
+    static get is() { return "cpsl-overlay"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-overlay.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-overlay.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to show the overlay."
+                },
+                "attribute": "open",
+                "reflect": false
+            },
+            "enterTransitionDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration in seconds of the fade out animation.\nDefault is .5."
+                },
+                "attribute": "enter-transition-duration",
+                "reflect": false,
+                "defaultValue": "0.5"
+            },
+            "exitTransitionDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration in seconds of the fade out animation.\nDefault is .5."
+                },
+                "attribute": "exit-transition-duration",
+                "reflect": false,
+                "defaultValue": "0.5"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "toggleHeight"
+            }];
+    }
+}
+//# sourceMappingURL=cpsl-overlay.js.map