@getpara/core-components 0.1.0

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

@@ -0,0 +1,45 @@
+// commenting out as lottie-web increases bundle size by a lot
+// not deleting for now in case we want to use it in the future and replace lottie-web
+// with a smaller library
+// import { Component, Host, h, Element, Method, Prop } from '@stencil/core';
+// import lottie, { AnimationItem } from 'lottie-web';
+// @Component({
+//   tag: 'cpsl-animation',
+//   styleUrl: 'cpsl-animation.scss',
+//   shadow: true,
+// })
+// export class CpslAnimation {
+//   private animation: AnimationItem;
+//   @Element() el!: HTMLCpslAnimationElement;
+//   /**
+//    * Source of the Lottie animation file.
+//    */
+//   @Prop() src: string;
+//   /**
+//    * Will replay the animation
+//    */
+//   @Method()
+//   async replayAnimation() {
+//     this.animation.play();
+//   }
+//   componentDidLoad() {
+//     this.animation = lottie.loadAnimation({
+//       loop: false,
+//       container: this.animationContainerEl,
+//       renderer: 'svg',
+//       path: this.src,
+//     });
+//     this.animation.play();
+//   }
+//   private get animationContainerEl() {
+//     return this.el.shadowRoot.getElementById('animation-container');
+//   }
+//   render() {
+//     return (
+//       <Host>
+//         <div part="animation-container" id="animation-container" class="animation-container" />
+//       </Host>
+//     );
+//   }
+// }
+//# sourceMappingURL=cpsl-animation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-animation.js","sourceRoot":"","sources":["../../../../src/components/cpsl-animation/cpsl-animation.tsx"],"names":[],"mappings":"AAAA,8DAA8D;AAC9D,sFAAsF;AACtF,yBAAyB;AAEzB,6EAA6E;AAC7E,sDAAsD;AAEtD,eAAe;AACf,2BAA2B;AAC3B,qCAAqC;AACrC,kBAAkB;AAClB,KAAK;AACL,+BAA+B;AAC/B,sCAAsC;AAEtC,8CAA8C;AAE9C,QAAQ;AACR,4CAA4C;AAC5C,QAAQ;AACR,yBAAyB;AAEzB,QAAQ;AACR,iCAAiC;AACjC,QAAQ;AACR,cAAc;AACd,8BAA8B;AAC9B,6BAA6B;AAC7B,MAAM;AAEN,yBAAyB;AACzB,8CAA8C;AAC9C,qBAAqB;AACrB,8CAA8C;AAC9C,yBAAyB;AACzB,wBAAwB;AACxB,UAAU;AAEV,6BAA6B;AAC7B,MAAM;AAEN,yCAAyC;AACzC,uEAAuE;AACvE,MAAM;AAEN,eAAe;AACf,eAAe;AACf,eAAe;AACf,kGAAkG;AAClG,gBAAgB;AAChB,SAAS;AACT,MAAM;AACN,IAAI","sourcesContent":["// commenting out as lottie-web increases bundle size by a lot\n// not deleting for now in case we want to use it in the future and replace lottie-web\n// with a smaller library\n\n// import { Component, Host, h, Element, Method, Prop } from '@stencil/core';\n// import lottie, { AnimationItem } from 'lottie-web';\n\n// @Component({\n//   tag: 'cpsl-animation',\n//   styleUrl: 'cpsl-animation.scss',\n//   shadow: true,\n// })\n// export class CpslAnimation {\n//   private animation: AnimationItem;\n\n//   @Element() el!: HTMLCpslAnimationElement;\n\n//   /**\n//    * Source of the Lottie animation file.\n//    */\n//   @Prop() src: string;\n\n//   /**\n//    * Will replay the animation\n//    */\n//   @Method()\n//   async replayAnimation() {\n//     this.animation.play();\n//   }\n\n//   componentDidLoad() {\n//     this.animation = lottie.loadAnimation({\n//       loop: false,\n//       container: this.animationContainerEl,\n//       renderer: 'svg',\n//       path: this.src,\n//     });\n\n//     this.animation.play();\n//   }\n\n//   private get animationContainerEl() {\n//     return this.el.shadowRoot.getElementById('animation-container');\n//   }\n\n//   render() {\n//     return (\n//       <Host>\n//         <div part=\"animation-container\" id=\"animation-container\" class=\"animation-container\" />\n//       </Host>\n//     );\n//   }\n// }\n"]}

package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.css

@@ -0,0 +1,67 @@
+/**
+ * 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;
+  position: relative;
+  top: 0;
+  width: 100%;
+  z-index: 10000;
+}
+
+.container {
+  display: flex;
+  width: 100%;
+}

package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js

@@ -0,0 +1,88 @@
+import { Host, h } from "@stencil/core";
+export class CpslAppBar {
+    constructor() {
+        this.height = undefined;
+        this.position = 'fixed';
+        this.zIndexOverride = undefined;
+    }
+    render() {
+        return (h(Host, { key: '281c1ebcc7ad61ccbd6878fb31d9b52a5860c273', style: Object.assign({
+                // position: this.position,
+                height: `${this.height}px`
+            }, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})) }, h("div", { key: '90fdd0e77212ac8a1c861e2402b34b15a9d26f7b', class: "container", part: "container", style: {
+                position: this.position,
+                height: `${this.height}px`,
+            } }, h("slot", { key: '6aa42ab3e08a7d0629082a0bbba2831b1c9374f2' })), this.position === 'fixed' && (h("div", { key: '99169fc7212b22fcaa2e490ee2f6a7aad750e5a3', style: {
+                height: `${this.height}px`,
+            } }))));
+    }
+    static get is() { return "cpsl-app-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-app-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-app-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the app bar."
+                },
+                "attribute": "height",
+                "reflect": false
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fixed' | 'static'",
+                    "resolved": "\"fixed\" | \"static\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The position of the drawer.\nDefault is `fixed`."
+                },
+                "attribute": "position",
+                "reflect": false,
+                "defaultValue": "'fixed'"
+            },
+            "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
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-app-bar.js.map

package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-app-bar.js","sourceRoot":"","sources":["../../../../src/components/cpsl-app-bar/cpsl-app-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;;wBAUmB,OAAO;;;IAO/C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK;gBACH,2BAA2B;gBAC3B,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,IACvB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAGtE,4DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;oBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B;gBAED,8DAAa,CACT;YACL,IAAI,CAAC,QAAQ,KAAK,OAAO,IAAI,CAC5B,4DACE,KAAK,EAAE;oBACL,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B,GACD,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-app-bar',\n  styleUrl: 'cpsl-app-bar.scss',\n  shadow: true,\n})\nexport class CpslAppBar {\n  /**\n   * Height of the app bar.\n   */\n  @Prop() height: number;\n\n  /**\n   * The position of the drawer.\n   * Default is `fixed`.\n   */\n  @Prop() position?: 'fixed' | 'static' = 'fixed';\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\n\n  render() {\n    return (\n      <Host\n        style={{\n          // position: this.position,\n          height: `${this.height}px`,\n          ...(this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}),\n        }}\n      >\n        <div\n          class=\"container\"\n          part=\"container\"\n          style={{\n            position: this.position,\n            height: `${this.height}px`,\n          }}\n        >\n          <slot></slot>\n        </div>\n        {this.position === 'fixed' && (\n          <div\n            style={{\n              height: `${this.height}px`,\n            }}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.css

@@ -0,0 +1,183 @@
+/**
+ * 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 {
+  --container-width: 560px;
+  --container-gap: 8px;
+  --card-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
+  display: block;
+  z-index: 10011;
+  position: relative;
+}
+
+:host cpsl-overlay {
+  z-index: 10011;
+}
+
+@media (max-width: 480px) {
+  :host(.include-mobile-styling) .modal-wrapper {
+    scale: none;
+    top: 100%;
+    left: 0;
+    height: unset;
+    opacity: 1;
+  }
+  :host(.include-mobile-styling) .modal-container {
+    width: 100%;
+    max-width: none;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+  :host(.include-mobile-styling) .modal-body-card {
+    --card-border-radius-bl: 0px;
+    --card-border-radius-br: 0px;
+  }
+}
+
+:host(.force-mobile-media) .modal-wrapper {
+  scale: none;
+  top: 100%;
+  left: 0;
+  height: unset;
+  opacity: 1;
+}
+:host(.force-mobile-media) .modal-container {
+  width: 100%;
+  max-width: none;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+:host(.force-mobile-media) .modal-body-card {
+  --card-border-radius-bl: 0px;
+  --card-border-radius-br: 0px;
+}
+
+:host(.no-overlay) {
+  z-index: 0;
+}
+:host(.no-overlay) .modal-body-card {
+  --card-border-width: 1px;
+}
+:host(.no-overlay) .modal-container {
+  max-height: unset;
+}
+
+.modal-wrapper {
+  z-index: 10011;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  scale: 0.8;
+  opacity: 0;
+  transform: none;
+}
+
+.modal-container {
+  position: relative;
+  overflow: hidden;
+  width: var(--container-width);
+  display: flex;
+  flex-direction: column;
+  gap: var(--container-gap);
+  max-width: 95vw;
+  max-height: 95vh;
+  max-height: 95dvh;
+  overflow: auto;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  /* Hide scrollbar for Chrome, Safari and Opera */
+}
+.modal-container ::-webkit-scrollbar {
+  display: none;
+}
+.modal-container.no-footer {
+  gap: 0px;
+}
+
+.modal-body-card {
+  --card-padding-top: 16px;
+  --card-padding-bottom: 16px;
+  --card-padding-start: 16px;
+  --card-padding-end: 16px;
+  --card-border-width: 0px;
+}
+
+.body::part(card-container) {
+  box-shadow: var(--card-box-shadow);
+  width: 100%;
+}
+
+.no-opacity {
+  opacity: 0;
+}
+
+.mobile-footer {
+  margin-top: 16px;
+}
+
+.footer-hidden {
+  height: 0px;
+  visibility: hidden;
+  --card-padding-top: 0px;
+  --card-padding-bottom: 0px;
+  --card-padding-start: 0px;
+  --card-padding-end: 0px;
+  --card-border-width: 0px;
+}