@saasquatch/mint-components 1.6.6-6 → 1.6.6

package/dist/collection/components/sqm-portal-verify-email/usePortalVerifyEmail.js

@@ -1,65 +1,65 @@
-import { useEffect } from "@saasquatch/universal-hooks";
-import { navigation, useUserIdentity, useVerifyEmailMutation, } from "@saasquatch/component-boilerplate";
-import { sanitizeUrlPath } from "../../utils/utils";
-export function usePortalVerifyEmail({ nextPage, failedPage }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const userIdent = useUserIdentity();
-  const [request, { loading, data, errors }] = useVerifyEmailMutation();
-  const urlParams = new URLSearchParams(navigation.location.search);
-  const oobCode = urlParams.get("oobCode");
-  const nextPageOverride = urlParams.get("nextPage");
-  // derived from useMutation in component boilerplate initialState
-  const disableContinue = data === undefined && errors === undefined && !!oobCode;
-  // if logged out, userIdent?.managedIdentity?.emailVerified will be falsey, even if verification was successful
-  const verified = !!(((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified) || (data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail.success));
-  const failed = () => {
-    return navigation.push({
-      pathname: failedPage,
-      search: urlParams.toString() && "?" + urlParams.toString(),
-    });
-  };
-  const gotoNextPage = () => {
-    urlParams.delete("nextPage");
-    const url = sanitizeUrlPath(nextPageOverride || nextPage);
-    navigation.push(url.href);
-  };
-  const submit = async () => {
-    var _a;
-    if (oobCode) {
-      const result = await request({ oobCode });
-      if ((result instanceof Error ||
-        !result.verifyManagedIdentityEmail.success) &&
-        !((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified)) {
-        // pause on error if logged out/unverified
-        return;
-      }
-      setTimeout(() => {
-        gotoNextPage();
-      }, 3000);
-    }
-  };
-  useEffect(() => {
-    // Already verified, begin redirect
-    if (verified) {
-      setTimeout(() => {
-        gotoNextPage();
-      }, 3000);
-    }
-    !data && submit();
-  }, [verified]);
-  return {
-    states: {
-      loading: loading || disableContinue,
-      error: ((_e = (_d = (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.extensions) === null || _e === void 0 ? void 0 : _e.message) || ((_h = (_g = (_f = errors === null || errors === void 0 ? void 0 : errors.response) === null || _f === void 0 ? void 0 : _f.errors) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.message) ||
-        ((errors === null || errors === void 0 ? void 0 : errors.message) && "Network request failed."),
-      verified,
-    },
-    data: {
-      oobCode,
-    },
-    callbacks: {
-      failed,
-      gotoNextPage,
-    },
-  };
-}
+import { useEffect } from "@saasquatch/universal-hooks";
+import { navigation, useUserIdentity, useVerifyEmailMutation, } from "@saasquatch/component-boilerplate";
+import { sanitizeUrlPath } from "../../utils/utils";
+export function usePortalVerifyEmail({ nextPage, failedPage }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const userIdent = useUserIdentity();
+  const [request, { loading, data, errors }] = useVerifyEmailMutation();
+  const urlParams = new URLSearchParams(navigation.location.search);
+  const oobCode = urlParams.get("oobCode");
+  const nextPageOverride = urlParams.get("nextPage");
+  // derived from useMutation in component boilerplate initialState
+  const disableContinue = data === undefined && errors === undefined && !!oobCode;
+  // if logged out, userIdent?.managedIdentity?.emailVerified will be falsey, even if verification was successful
+  const verified = !!(((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified) || (data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail.success));
+  const failed = () => {
+    return navigation.push({
+      pathname: failedPage,
+      search: urlParams.toString() && "?" + urlParams.toString(),
+    });
+  };
+  const gotoNextPage = () => {
+    urlParams.delete("nextPage");
+    const url = sanitizeUrlPath(nextPageOverride || nextPage);
+    navigation.push(url.href);
+  };
+  const submit = async () => {
+    var _a;
+    if (oobCode) {
+      const result = await request({ oobCode });
+      if ((result instanceof Error ||
+        !result.verifyManagedIdentityEmail.success) &&
+        !((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified)) {
+        // pause on error if logged out/unverified
+        return;
+      }
+      setTimeout(() => {
+        gotoNextPage();
+      }, 3000);
+    }
+  };
+  useEffect(() => {
+    // Already verified, begin redirect
+    if (verified) {
+      setTimeout(() => {
+        gotoNextPage();
+      }, 3000);
+    }
+    !data && submit();
+  }, [verified]);
+  return {
+    states: {
+      loading: loading || disableContinue,
+      error: ((_e = (_d = (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.extensions) === null || _e === void 0 ? void 0 : _e.message) || ((_h = (_g = (_f = errors === null || errors === void 0 ? void 0 : errors.response) === null || _f === void 0 ? void 0 : _f.errors) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.message) ||
+        ((errors === null || errors === void 0 ? void 0 : errors.message) && "Network request failed."),
+      verified,
+    },
+    data: {
+      oobCode,
+    },
+    callbacks: {
+      failed,
+      gotoNextPage,
+    },
+  };
+}

package/dist/collection/components/sqm-program-explainer/ProgramExplainer.stories.js

@@ -1,50 +1,50 @@
-import { h } from "@stencil/core";
-import scenario from "./sqm-program-explainer.feature";
-export default {
-  title: "Components/Program Explainer",
-  parameters: {
-    scenario,
-  },
-};
-export const OneStep = () => {
-  return (h("sqm-program-explainer", { header: "How it works" },
-    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" })));
-};
-export const TwoSteps = () => {
-  return (h("sqm-program-explainer", { header: "How it works" },
-    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" }),
-    h("sqm-program-explainer-step", { header: "Earn points for using Klip", description: "Complete tasks like uploading your first video or sharing videos with friends", icon: "server" })));
-};
-export const ThreeSteps = () => {
-  return (h("sqm-program-explainer", { header: "How it works" },
-    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" }),
-    h("sqm-program-explainer-step", { header: "Earn points for using Klip", description: "Complete tasks like uploading your first video or sharing videos with friends", icon: "server" }),
-    h("sqm-program-explainer-step", { header: "Redeem rewards with your points", description: "Redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America", icon: "people-fill" })));
-};
-export const Custom = () => {
-  return (h("sqm-program-explainer", { header: "How it works", "text-color": "#fffc4b", "background-color": "#ff7f7f" },
-    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" }),
-    h("sqm-program-explainer-step", { header: "Earn points for using Klip", description: "Complete tasks like uploading your first video or sharing videos with friends", icon: "server" }),
-    h("sqm-program-explainer-step", { header: "Redeem rewards with your points", description: "Redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America", icon: "people-fill" })));
-};
-export const ProgramExplainerGeneric = () => {
-  return (h("sqm-program-explainer", { header: "Anything and everything can be passed to this component!", "text-color": "#eee", "background-color": "#333" },
-    h("div", { style: {
-        padding: "100px",
-        border: "1px dashed black",
-        background: "#eee",
-        color: "#333",
-      } }, "PLACEHOLDER"),
-    h("div", { style: {
-        padding: "100px",
-        border: "1px dashed black",
-        background: "#eee",
-        color: "#333",
-      } }, "PLACEHOLDER"),
-    h("div", { style: {
-        padding: "100px",
-        border: "1px dashed black",
-        background: "#eee",
-        color: "#333",
-      } }, "PLACEHOLDER")));
-};
+import { h } from "@stencil/core";
+import scenario from "./sqm-program-explainer.feature";
+export default {
+  title: "Components/Program Explainer",
+  parameters: {
+    scenario,
+  },
+};
+export const OneStep = () => {
+  return (h("sqm-program-explainer", { header: "How it works" },
+    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" })));
+};
+export const TwoSteps = () => {
+  return (h("sqm-program-explainer", { header: "How it works" },
+    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" }),
+    h("sqm-program-explainer-step", { header: "Earn points for using Klip", description: "Complete tasks like uploading your first video or sharing videos with friends", icon: "server" })));
+};
+export const ThreeSteps = () => {
+  return (h("sqm-program-explainer", { header: "How it works" },
+    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" }),
+    h("sqm-program-explainer-step", { header: "Earn points for using Klip", description: "Complete tasks like uploading your first video or sharing videos with friends", icon: "server" }),
+    h("sqm-program-explainer-step", { header: "Redeem rewards with your points", description: "Redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America", icon: "people-fill" })));
+};
+export const Custom = () => {
+  return (h("sqm-program-explainer", { header: "How it works", "text-color": "#fffc4b", "background-color": "#ff7f7f" },
+    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" }),
+    h("sqm-program-explainer-step", { header: "Earn points for using Klip", description: "Complete tasks like uploading your first video or sharing videos with friends", icon: "server" }),
+    h("sqm-program-explainer-step", { header: "Redeem rewards with your points", description: "Redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America", icon: "people-fill" })));
+};
+export const ProgramExplainerGeneric = () => {
+  return (h("sqm-program-explainer", { header: "Anything and everything can be passed to this component!", "text-color": "#eee", "background-color": "#333" },
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        color: "#333",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        color: "#333",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        color: "#333",
+      } }, "PLACEHOLDER")));
+};

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer-view.js

@@ -1,29 +1,29 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-export function ProgramExplainerView(props, children) {
-  const style = {
-    Container: {
-      color: props.textColor || "var(--sl-color-neutral-900)",
-      background: props.backgroundColor || "",
-    },
-    Header: {
-      fontSize: "var(--sl-font-size-x-large)",
-      fontWeight: "var(--sl-font-weight-bold)",
-      lineHeight: "var(--sl-line-height-dense)",
-      marginBottom: "var(--sl-spacing-large)",
-      textAlign: "center",
-    },
-    Grid: {
-      display: "flex",
-      flexDirection: "row",
-      gap: "var(--sl-spacing-large)",
-      "@media (max-width: 499px)": {
-        flexDirection: "column",
-      },
-    },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function ProgramExplainerView(props, children) {
+  const style = {
+    Container: {
+      color: props.textColor || "var(--sl-color-neutral-900)",
+      background: props.backgroundColor || "",
+    },
+    Header: {
+      fontSize: "var(--sl-font-size-x-large)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginBottom: "var(--sl-spacing-large)",
+      textAlign: "center",
+    },
+    Grid: {
+      display: "flex",
+      flexDirection: "row",
+      gap: "var(--sl-spacing-large)",
+      "@media (max-width: 499px)": {
+        flexDirection: "column",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   const vanillaStyle = `
   ::slotted(*){
     display: flex;
@@ -33,12 +33,12 @@ export function ProgramExplainerView(props, children) {
     ::slotted(*){
       display: block;
     }
-  }`;
-  return (h("div", { class: sheet.classes.Container },
-    h("style", { type: "text/css" },
-      styleString,
-      vanillaStyle),
-    h("div", { class: sheet.classes.Header },
-      h("div", { class: sheet.classes.Header }, props.header)),
-    h("div", { class: sheet.classes.Grid }, children)));
-}
+  }`;
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: sheet.classes.Header },
+      h("div", { class: sheet.classes.Header }, props.header)),
+    h("div", { class: sheet.classes.Grid }, children)));
+}

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer.js

@@ -1,100 +1,100 @@
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop, State } from "@stencil/core";
-import { getProps } from "../../utils/utils";
-import { ProgramExplainerView } from "./sqm-program-explainer-view";
-/**
- * @uiName Program Explainer
- * @exampleGroup Common Components
- * @slots [{"name":"", "title":"Explainer", "validChildren":["sqm-program-explainer-step"]}]
- * @example Program Explainer - <sqm-program-explainer header="How it works"><sqm-program-explainer-step description="Explore and use our product while earning points in the process!" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step><sqm-program-explainer-step description="Use your points and redeem rewards like one free month of Enterprise or a visa giftcard" header="Redeem rewards" icon="people" text-color="#000000"></sqm-program-explainer-step></sqm-program-explainer>
- */
-export class ProgramExplainer {
-  constructor() {
-    this.ignored = true;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    return (h(ProgramExplainerView, Object.assign({}, getProps(this)),
-      h("slot", null)));
-  }
-  static get is() { return "sqm-program-explainer"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "header": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Header Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "header",
-      "reflect": false
-    },
-    "textColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Header Text Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }, {
-            "text": "color",
-            "name": "format"
-          }],
-        "text": ""
-      },
-      "attribute": "text-color",
-      "reflect": false
-    },
-    "backgroundColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Header Background Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }, {
-            "text": "color",
-            "name": "format"
-          }],
-        "text": ""
-      },
-      "attribute": "background-color",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { ProgramExplainerView } from "./sqm-program-explainer-view";
+/**
+ * @uiName Program Explainer
+ * @exampleGroup Common Components
+ * @slots [{"name":"", "title":"Explainer", "validChildren":["sqm-program-explainer-step"]}]
+ * @example Program Explainer - <sqm-program-explainer header="How it works"><sqm-program-explainer-step description="Explore and use our product while earning points in the process!" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step><sqm-program-explainer-step description="Use your points and redeem rewards like one free month of Enterprise or a visa giftcard" header="Redeem rewards" icon="people" text-color="#000000"></sqm-program-explainer-step></sqm-program-explainer>
+ */
+export class ProgramExplainer {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(ProgramExplainerView, Object.assign({}, getProps(this)),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-program-explainer"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Header Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "header",
+      "reflect": false
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Header Text Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": ""
+      },
+      "attribute": "text-color",
+      "reflect": false
+    },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Header Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": ""
+      },
+      "attribute": "background-color",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-program-explainer-step/ProgramExplainerStep.stories.js

@@ -1,14 +1,14 @@
-import { h } from "@stencil/core";
-import scenario from "./sqm-program-explainer-step.feature";
-export default {
-  title: "Components/Program Explainer Step",
-  parameters: {
-    scenario,
-  },
-};
-export const ProgramExplainerStep = () => {
-  return (h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Send your referral link to a friend or share it through email, Twitter, or Facebook", icon: "person-plus-fill" }));
-};
-export const ProgramExplainerStepCustom = () => {
-  return (h("sqm-program-explainer-step", { header: "Invite your friends to Klip", description: "Send your referral link to a friend or share it through email, Twitter, or Facebook", "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000265/squatch-assets/Uqn3aXw.png", "text-color": "#fffc4b", "background-color": "#ff7f7f" }));
-};
+import { h } from "@stencil/core";
+import scenario from "./sqm-program-explainer-step.feature";
+export default {
+  title: "Components/Program Explainer Step",
+  parameters: {
+    scenario,
+  },
+};
+export const ProgramExplainerStep = () => {
+  return (h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Send your referral link to a friend or share it through email, Twitter, or Facebook", icon: "person-plus-fill" }));
+};
+export const ProgramExplainerStepCustom = () => {
+  return (h("sqm-program-explainer-step", { header: "Invite your friends to Klip", description: "Send your referral link to a friend or share it through email, Twitter, or Facebook", "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000265/squatch-assets/Uqn3aXw.png", "text-color": "#fffc4b", "background-color": "#ff7f7f" }));
+};