@usecapsule/core-components 2.0.0 → 2.0.2

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

@@ -1,423 +0,0 @@
-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.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 });
-            }
-        }
-    }
-    componentDidLoad() {
-        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;
-            }
-        });
-    }
-    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" }, 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" }))));
-    }
-    render() {
-        if (this.noOverlay) {
-            this.addExpandAnim();
-            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

@@ -1 +0,0 @@
-{"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"]}

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

@@ -1,29 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,37 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,11 +0,0 @@
-: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

@@ -1,108 +0,0 @@
-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

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

@@ -1 +0,0 @@
-{"version":3,"file":"cpsl-overlay.js","sourceRoot":"","sources":["../../../../src/components/cpsl-overlay/cpsl-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,WAAW;;;uCAYqB,GAAG;sCAMJ,GAAG;;IAG7C,YAAY;QACV,IAAI,CAAC,IAAI;YACP,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,uBAAuB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;YACvH,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;QAExH,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACrD,CAAC;aAAM,CAAC;YAEN,UAAU,CAAC,GAAG,EAAE;gBACd,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;YACnD,CAAC,EAAE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,uBAAuB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;YACtH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACrD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, Watch } from '@stencil/core';\nimport gsap from 'gsap';\n\n@Component({\n  tag: 'cpsl-overlay',\n  styleUrl: 'cpsl-overlay.scss',\n  shadow: true,\n})\nexport class CpslOverlay {\n  @Element() el!: HTMLCpslOverlayElement;\n\n  /**\n   * Whether or not to show the overlay.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Duration in seconds of the fade out animation.\n   * Default is .5.\n   */\n  @Prop() enterTransitionDuration?: number = 0.5;\n\n  /**\n   * Duration in seconds of the fade out animation.\n   * Default is .5.\n   */\n  @Prop() exitTransitionDuration?: number = 0.5;\n\n  @Watch('open')\n  toggleHeight() {\n    this.open\n      ? gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 })\n      : gsap.timeline({ defaults: { duration: this.exitTransitionDuration } }).to(this.el, { display: 'none', opacity: 0 });\n\n    if (this.open) {\n      document.documentElement.style.overflow = 'hidden';\n    } else {\n      // Setting a timeout here to prevent modal from shifting when the scroll bar appears\n      setTimeout(() => {\n        document.documentElement.style.overflow = 'auto';\n      }, this.exitTransitionDuration * 1000);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 });\n      document.documentElement.style.overflow = 'hidden';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}