@getpara/core-components 0.1.0

package/dist/collection/components/cpsl-nav-button/cpsl-nav-button.js

@@ -0,0 +1,175 @@
+import { Host, h } from "@stencil/core";
+export class CpslNavButton {
+    constructor() {
+        this.handleNavButtonClick = () => {
+            this.cpslNavButtonClick.emit(this.route);
+        };
+        this.handleSubRouteClick = (route) => () => {
+            this.cpslNavButtonSubRouteClick.emit(route);
+        };
+        this.disabled = false;
+        this.exactMainRouteMatch = undefined;
+        this.exactSubRouteMatch = undefined;
+        this.route = undefined;
+        this.subRoutes = undefined;
+        this.path = undefined;
+    }
+    render() {
+        var _a, _b;
+        const selectedSubRoute = (_a = this.subRoutes) === null || _a === void 0 ? void 0 : _a.find(sr => (this.exactSubRouteMatch ? this.path === `${this.route}/${sr.value}` : this.path.includes(`${this.route}/${sr.value}`)));
+        const isMainRouteSelected = this.exactMainRouteMatch ? this.path === this.route : this.path.includes(this.route);
+        return (h(Host, { key: '502ee237751a59264f26e3cc0bb1d98c3b27416c' }, h("cpsl-button", { key: 'bd3ad1ae9cf793a62c706912cabcf944b1519684', id: this.route, class: { 'main-route': true, 'selected': !!selectedSubRoute || isMainRouteSelected }, fullWidth: true, variant: "primary", disabled: this.disabled, onClick: this.handleNavButtonClick }, h("slot", { key: '45f67ecbb581fda045d786bf4d82ef7740fd4ee7', name: "start" }), h("slot", { key: '53ef86ef731b99344e398162429217adc8807b3f' }), h("slot", { key: '248fdf014c63862a45a9faa5b03a9994c9ddd50c', name: "end" })), (!!selectedSubRoute || isMainRouteSelected) && !!((_b = this.subRoutes) === null || _b === void 0 ? void 0 : _b.length) && (h("div", { key: '766e04ef327cb4291a5cde6c38e267b97703dbb0', class: "sub-route-container" }, this.subRoutes.map(sr => (h("cpsl-button", { key: sr.value, id: `${this.route}/${sr.value}`, class: { 'sub-route': true, 'selected': sr.value === (selectedSubRoute === null || selectedSubRoute === void 0 ? void 0 : selectedSubRoute.value) }, onClick: this.handleSubRouteClick(`${this.route}/${sr.value}`), fullWidth: true, variant: "primary" }, sr.label)))))));
+    }
+    static get is() { return "cpsl-nav-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-nav-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-nav-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If the button is disabled.\nDefault is: false."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "exactMainRouteMatch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to use exact matching for the selected main route."
+                },
+                "attribute": "exact-main-route-match",
+                "reflect": false
+            },
+            "exactSubRouteMatch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to use exact matching for the selected sub route."
+                },
+                "attribute": "exact-sub-route-match",
+                "reflect": false
+            },
+            "route": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The route for the button."
+                },
+                "attribute": "route",
+                "reflect": false
+            },
+            "subRoutes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ label: string; value: string }[]",
+                    "resolved": "{ label: string; value: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The id of the selected button."
+                }
+            },
+            "path": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Path used to determine what button is selected"
+                },
+                "attribute": "path",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslNavButtonClick",
+                "name": "cpslNavButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Called when the nav button is clicked."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "cpslNavButtonSubRouteClick",
+                "name": "cpslNavButtonSubRouteClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Called when a nav button sub route is clicked."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=cpsl-nav-button.js.map

package/dist/collection/components/cpsl-nav-button/cpsl-nav-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-nav-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-nav-button/cpsl-nav-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOvF,MAAM,OAAO,aAAa;;QAuChB,yBAAoB,GAAG,GAAG,EAAE;YAClC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC,CAAC;QAOM,wBAAmB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,EAAE;YACpD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC,CAAC;wBA3C4C,KAAK;;;;;;;IA6CnD,MAAM;;QACJ,MAAM,gBAAgB,GAAG,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;QAC7K,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEjH,OAAO,CACL,EAAC,IAAI;YACH,oEACE,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,gBAAgB,IAAI,mBAAmB,EAAE,EACpF,SAAS,QACT,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,oBAAoB;gBAElC,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,8DAAa;gBACb,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACZ;YACb,CAAC,CAAC,CAAC,gBAAgB,IAAI,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,MAAM,CAAA,IAAI,CAC1E,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CACxB,mBACE,GAAG,EAAE,EAAE,CAAC,KAAK,EACb,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,KAAK,EAAE,EAC/B,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,CAAC,KAAK,MAAK,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,KAAK,CAAA,EAAE,EAC9E,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,EAC9D,SAAS,QACT,OAAO,EAAC,SAAS,IAEhB,EAAE,CAAC,KAAK,CACG,CACf,CAAC,CACE,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, EventEmitter, Host, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-nav-button',\n  styleUrl: 'cpsl-nav-button.scss',\n  shadow: true,\n})\nexport class CpslNavButton {\n  @Element() el!: HTMLCpslNavButtonElement;\n\n  /**\n   * If the button is disabled.\n   * Default is: false.\n   */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /**\n   * Whether or not to use exact matching for the selected main route.\n   */\n  @Prop() exactMainRouteMatch?: boolean;\n\n  /**\n   * Whether or not to use exact matching for the selected sub route.\n   */\n  @Prop() exactSubRouteMatch?: boolean;\n\n  /**\n   * The route for the button.\n   */\n  @Prop() route: string;\n\n  /**\n   * The id of the selected button.\n   */\n  @Prop() subRoutes?: { label: string; value: string }[];\n\n  /**\n   * Path used to determine what button is selected\n   */\n  @Prop() path?: string;\n\n  /**\n   * Called when the nav button is clicked.\n   */\n  @Event() cpslNavButtonClick: EventEmitter<string>;\n\n  private handleNavButtonClick = () => {\n    this.cpslNavButtonClick.emit(this.route);\n  };\n\n  /**\n   * Called when a nav button sub route is clicked.\n   */\n  @Event() cpslNavButtonSubRouteClick: EventEmitter<string>;\n\n  private handleSubRouteClick = (route: string) => () => {\n    this.cpslNavButtonSubRouteClick.emit(route);\n  };\n\n  render() {\n    const selectedSubRoute = this.subRoutes?.find(sr => (this.exactSubRouteMatch ? this.path === `${this.route}/${sr.value}` : this.path.includes(`${this.route}/${sr.value}`)));\n    const isMainRouteSelected = this.exactMainRouteMatch ? this.path === this.route : this.path.includes(this.route);\n\n    return (\n      <Host>\n        <cpsl-button\n          id={this.route}\n          class={{ 'main-route': true, 'selected': !!selectedSubRoute || isMainRouteSelected }}\n          fullWidth\n          variant=\"primary\"\n          disabled={this.disabled}\n          onClick={this.handleNavButtonClick}\n        >\n          <slot name=\"start\"></slot>\n          <slot></slot>\n          <slot name=\"end\"></slot>\n        </cpsl-button>\n        {(!!selectedSubRoute || isMainRouteSelected) && !!this.subRoutes?.length && (\n          <div class=\"sub-route-container\">\n            {this.subRoutes.map(sr => (\n              <cpsl-button\n                key={sr.value}\n                id={`${this.route}/${sr.value}`}\n                class={{ 'sub-route': true, 'selected': sr.value === selectedSubRoute?.value }}\n                onClick={this.handleSubRouteClick(`${this.route}/${sr.value}`)}\n                fullWidth\n                variant=\"primary\"\n              >\n                {sr.label}\n              </cpsl-button>\n            ))}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.css

@@ -0,0 +1,8 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0px 16px;
+  box-sizing: border-box;
+  width: 100%;
+}

package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.js

@@ -0,0 +1,30 @@
+import { Host, h } from "@stencil/core";
+export class CpslNavButtonGroup {
+    componentWillRender() {
+        var _a;
+        if ((_a = this.otherSlots) === null || _a === void 0 ? void 0 : _a.length) {
+            console.error('cpsl-button is the only valid child of cpsl-nav-button-group');
+            this.otherSlots.forEach(item => item.remove());
+        }
+    }
+    get otherSlots() {
+        return this.el.querySelectorAll('&> *:not(cpsl-nav-button)');
+    }
+    render() {
+        return (h(Host, { key: 'd52d419d0bcd96e2759a6a39f048f823c3d2ba69' }, h("slot", { key: '851d194ca0b7b0caef7b09420918eb4cdcbee137' })));
+    }
+    static get is() { return "cpsl-nav-button-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-nav-button-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-nav-button-group.css"]
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=cpsl-nav-button-group.js.map

package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-nav-button-group.js","sourceRoot":"","sources":["../../../../src/components/cpsl-nav-button-group/cpsl-nav-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO5D,MAAM,OAAO,kBAAkB;IAG7B,mBAAmB;;QACjB,IAAI,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,EAAE,CAAC;YAC5B,OAAO,CAAC,KAAK,CAAC,8DAA8D,CAAC,CAAC;YAC9E,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IAED,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,CAAC;IAC/D,CAAC;IACD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Element, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-nav-button-group',\n  styleUrl: 'cpsl-nav-button-group.scss',\n  shadow: true,\n})\nexport class CpslNavButtonGroup {\n  @Element() el!: HTMLCpslNavButtonGroupElement;\n\n  componentWillRender() {\n    if (this.otherSlots?.length) {\n      console.error('cpsl-button is the only valid child of cpsl-nav-button-group');\n      this.otherSlots.forEach(item => item.remove());\n    }\n  }\n\n  private get otherSlots() {\n    return this.el.querySelectorAll('&> *:not(cpsl-nav-button)');\n  }\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,69 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  inset: 0px;
+  z-index: 10001;
+  opacity: 0%;
+  display: none;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.7) 100%);
+}
+
+:host(.over-modal) {
+  z-index: 10005;
+}

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

@@ -0,0 +1,127 @@
+import { Host, h } from "@stencil/core";
+import gsap from "gsap";
+export class CpslOverlay {
+    constructor() {
+        this.enterTransitionDuration = 0.5;
+        this.exitTransitionDuration = 0.5;
+        this.open = undefined;
+        this.zIndexOverride = undefined;
+    }
+    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 {
+            // Setting a timeout here to prevent modal from shifting when the scroll bar appears
+            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: '62199abc410f605818c392e64e0bcfc1a33ec8a5', style: this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {} }, h("slot", { key: 'df78ed55eac09acb15743c933ad0ee38a3d5b93a' })));
+    }
+    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 {
+            "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"
+            },
+            "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
+            },
+            "zIndexOverride": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override z-index."
+                },
+                "attribute": "z-index-override",
+                "reflect": false
+            }
+        };
+    }
+    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

@@ -0,0 +1 @@
+{"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;;uCAOqB,GAAG;sCAMJ,GAAG;;;;IAa7C,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;YACN,oFAAoF;YACpF,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,qDAAC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE;YAC1E,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   * 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  /**\n   * Whether or not to show the overlay.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\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 style={this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,71 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  display: block;
+}
+
+.icon {
+  --height: 20px;
+  --width: 20px;
+}
+
+.start-icon {
+  transform: rotate(180deg);
+}
+
+.arrow-button {
+  --button-secondary-icon-color: var(--cpsl-color-text-tertiary);
+}