@saasquatch/mint-components 1.5.0-13 → 1.5.0-17

package/dist/cjs/sqm-card-feed-view-17fd3f0a.js

@@ -0,0 +1,369 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+
+const DEFAULT_MAX_COL_WIDTH = 500;
+const DEFAULT_COLS = "auto";
+const DEFAULT_DEBOUNCE_MS = 300;
+const DEFAULT_GAP_PX = 24;
+const COL_COUNT_CSS_VAR_NAME = `--_masonry-layout-col-count`;
+const GAP_CSS_VAR_NAME = `--_masonry-layout-gap`;
+// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+const ELEMENT_NODE_TYPE = 1;
+const DEBOUNCE_MAP = new Map();
+/**
+ * Returns a number attribute from an element.
+ * @param $elem
+ * @param name
+ * @param defaultValue
+ */
+function getNumberAttribute($elem, name, defaultValue) {
+    const value = parseFloat($elem.getAttribute(name) || "");
+    return isNaN(value) ? defaultValue : value;
+}
+/**
+ * Returns the amount of cols that the masonry grid should have.
+ * @param totalWidth
+ * @param cols
+ * @param maxColWidth
+ */
+function getColCount(totalWidth, cols, maxColWidth) {
+    return isNaN(cols)
+        ? Math.max(1, Math.ceil(totalWidth / maxColWidth))
+        : cols;
+}
+/**
+ * Debounces a function.
+ * @param cb
+ * @param ms
+ * @param id
+ */
+function debounce(cb, ms, id) {
+    const existingTimeout = DEBOUNCE_MAP.get(id);
+    if (existingTimeout != null)
+        window.clearTimeout(existingTimeout);
+    DEBOUNCE_MAP.set(id, window.setTimeout(cb, ms));
+}
+/**
+ * Returns the index of the column with the smallest height.
+ * @param colHeights
+ */
+function findSmallestColIndex(colHeights) {
+    let smallestIndex = 0;
+    let smallestHeight = Infinity;
+    colHeights.forEach((height, i) => {
+        if (height < smallestHeight) {
+            smallestHeight = height;
+            smallestIndex = i;
+        }
+    });
+    return smallestIndex;
+}
+
+/**
+ * Template for the masonry layout.
+ * Max width of each column is computed as the width in percentage of
+ * the column minus the total with of the gaps divided between each column.
+ */
+const $template = document.createElement("template");
+$template.innerHTML = `
+  <style>
+    :host {
+      display: flex;
+      align-items: flex-start;
+      justify-content: stretch;
+    }
+
+    .column {
+	  max-width: calc((100% / var(${COL_COUNT_CSS_VAR_NAME}, 1) - ((var(${GAP_CSS_VAR_NAME}, ${DEFAULT_GAP_PX}px) * (var(${COL_COUNT_CSS_VAR_NAME}, 1) - 1) / var(${COL_COUNT_CSS_VAR_NAME}, 1)))));
+	  width: 100%;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .column:not(:last-child) {
+      margin-right: var(${GAP_CSS_VAR_NAME}, ${DEFAULT_GAP_PX}px);
+    }
+
+    .column ::slotted(*) {
+      margin-bottom: var(${GAP_CSS_VAR_NAME}, ${DEFAULT_GAP_PX}px);
+      box-sizing: border-box;
+      width: 100%;
+    }
+
+    /* Hide the items that has not yet found the correct slot */
+    #unset-items {
+      opacity: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+  </style>
+  <div id="unset-items">
+    <slot></slot>
+  </div>
+`;
+// Use polyfill only in browsers that lack native Shadow DOM.
+window.ShadyCSS && window.ShadyCSS.prepareTemplateStyles($template, "masonry-layout");
+/**
+ * Masonry layout web component. It places the slotted elements in the optimal position based
+ * on the available vertical space, just like mason fitting stones in a wall.
+ * @example <masonry-layout><div class="item"></div><div class="item"></div></masonry-layout>
+ * @csspart column - Each column of the masonry layout.
+ * @csspart column-index - The specific column at the given index (eg. column-0 would target the first column and so on)
+ * @slot - Items that should be distributed in the layout.
+ */
+class MasonryLayout extends HTMLElement {
+    /**
+     * Attach the shadow DOM.
+     */
+    constructor() {
+        super();
+        // Unique debounce ID so different masonry layouts on one page won't affect eachother
+        this.debounceId = `layout_${Math.random()}`;
+        // Resize observer that layouts when necessary
+        this.ro = undefined;
+        // The current request animation frame callback
+        this.currentRequestAnimationFrameCallback = undefined;
+        const shadow = this.attachShadow({ mode: "open" });
+        shadow.appendChild($template.content.cloneNode(true));
+        this.onSlotChange = this.onSlotChange.bind(this);
+        this.onResize = this.onResize.bind(this);
+        this.layout = this.layout.bind(this);
+        this.$unsetElementsSlot = this.shadowRoot.querySelector("#unset-items > slot");
+    }
+    // The observed attributes.
+    // Whenever one of these changes we need to update the layout.
+    static get observedAttributes() {
+        return ["maxcolwidth", "gap", "cols"];
+    }
+    /**
+     * The maximum width of each column if cols are set to auto.
+     * @attr maxcolwidth
+     * @param v
+     */
+    set maxColWidth(v) {
+        this.setAttribute("maxcolwidth", v.toString());
+    }
+    get maxColWidth() {
+        return getNumberAttribute(this, "maxcolwidth", DEFAULT_MAX_COL_WIDTH);
+    }
+    /**
+     * The amount of columns.
+     * @attr cols
+     * @param v
+     */
+    set cols(v) {
+        this.setAttribute("cols", v.toString());
+    }
+    get cols() {
+        return getNumberAttribute(this, "cols", DEFAULT_COLS);
+    }
+    /**
+     * The gap in pixels between the columns.
+     * @attr gap
+     * @param v
+     */
+    set gap(v) {
+        this.setAttribute("gap", v.toString());
+    }
+    get gap() {
+        return getNumberAttribute(this, "gap", DEFAULT_GAP_PX);
+    }
+    /**
+     * The ms of debounce when the element resizes.
+     * @attr debounce
+     * @param v
+     */
+    set debounce(v) {
+        this.setAttribute("debounce", v.toString());
+    }
+    get debounce() {
+        return getNumberAttribute(this, "debounce", DEFAULT_DEBOUNCE_MS);
+    }
+    /**
+     * The column elements.
+     */
+    get $columns() {
+        return Array.from(this.shadowRoot.querySelectorAll(`.column`));
+    }
+    /**
+     * Hook up event listeners when added to the DOM.
+     */
+    connectedCallback() {
+        this.$unsetElementsSlot.addEventListener("slotchange", this.onSlotChange);
+        // Attach resize observer so we can relayout eachtime the size changes
+        if ("ResizeObserver" in window) {
+            this.ro = new ResizeObserver(this.onResize);
+            this.ro.observe(this);
+        }
+        else {
+            window.addEventListener("resize", this.onResize);
+        }
+    }
+    /**
+     * Remove event listeners when removed from the DOM.
+     */
+    disconnectedCallback() {
+        this.$unsetElementsSlot.removeEventListener("slotchange", this.onSlotChange);
+        window.removeEventListener("resize", this.onResize);
+        if (this.ro != null) {
+            this.ro.unobserve(this);
+        }
+    }
+    /**
+     * Updates the layout when one of the observed attributes changes.
+     */
+    attributeChangedCallback(name) {
+        switch (name) {
+            case "gap":
+                this.style.setProperty(GAP_CSS_VAR_NAME, `${this.gap}px`);
+                break;
+        }
+        // Recalculate the layout
+        this.scheduleLayout();
+    }
+    /**
+     *
+     */
+    onSlotChange() {
+        // Grab unset elements
+        const $unsetElements = (this.$unsetElementsSlot.assignedNodes() || [])
+            .filter(node => node.nodeType === ELEMENT_NODE_TYPE);
+        // If there are more items not yet set layout straight awy to avoid the item being delayed in its render.
+        if ($unsetElements.length > 0) {
+            this.layout();
+        }
+    }
+    /**
+     * Each time the element resizes we need to schedule a layout
+     * if the amount available columns has has changed.
+     * @param entries
+     */
+    onResize(entries) {
+        // Grab the width of the element. If it isn't provided by the resize observer entry
+        // we compute it ourselves by looking at the offset width of the element.
+        const { width } = entries != null && Array.isArray(entries) && entries.length > 0
+            ? entries[0].contentRect : { width: this.offsetWidth };
+        // Get the amount of columns we should have
+        const colCount = getColCount(width, this.cols, this.maxColWidth);
+        // Compare the amount of columns we should have to the current amount of columns.
+        // Schedule a layout if they are no longer the same.
+        if (colCount !== this.$columns.length) {
+            this.scheduleLayout();
+        }
+    }
+    /**
+     * Render X amount of columns.
+     * @param colCount
+     */
+    renderCols(colCount) {
+        // Get the current columns
+        const $columns = this.$columns;
+        // If the amount of columns is correct we don't have to add new columns.
+        if ($columns.length === colCount) {
+            return;
+        }
+        // Remove all of the current columns
+        for (const $column of $columns) {
+            $column.parentNode && $column.parentNode.removeChild($column);
+        }
+        // Add some new columns
+        for (let i = 0; i < colCount; i++) {
+            // Create a column element
+            const $column = document.createElement(`div`);
+            $column.classList.add(`column`);
+            $column.setAttribute(`part`, `column column-${i}`);
+            // Add a slot with the name set to the index of the column
+            const $slot = document.createElement(`slot`);
+            $slot.setAttribute(`name`, i.toString());
+            // Append the slot to the column an the column to the shadow root.
+            $column.appendChild($slot);
+            this.shadowRoot.appendChild($column);
+        }
+        // Set the column count so we can compute the correct width of the columns
+        this.style.setProperty(COL_COUNT_CSS_VAR_NAME, colCount.toString());
+        // Commit the changes for ShadyCSS
+        window.ShadyCSS && window.ShadyCSS.styleElement(this);
+    }
+    /**
+     * Schedules a layout.
+     * @param ms
+     */
+    scheduleLayout(ms = this.debounce) {
+        debounce(this.layout, ms, this.debounceId);
+    }
+    /**
+     * Layouts the elements.
+     */
+    layout() {
+        // Cancel the current animation frame callback
+        if (this.currentRequestAnimationFrameCallback != null) {
+            window.cancelAnimationFrame(this.currentRequestAnimationFrameCallback);
+        }
+        // Layout in the next animationframe
+        this.currentRequestAnimationFrameCallback = requestAnimationFrame(() => {
+            // console.time("layout");
+            // Compute relevant values we are going to use for layouting the elements.
+            const gap = this.gap;
+            const $elements = Array.from(this.children)
+                .filter(node => node.nodeType === ELEMENT_NODE_TYPE);
+            const colCount = getColCount(this.offsetWidth, this.cols, this.maxColWidth);
+            // Have an array that keeps track of the highest col height.
+            const colHeights = Array(colCount).fill(0);
+            // Instead of interleaving reads and writes we create an array for all writes so we can batch them at once.
+            const writes = [];
+            // Go through all elements and figure out what column (aka slot) they should be put in.
+            // We only do reads in this for loop and postpone the writes
+            for (const $elem of $elements) {
+                // Read the height of the element
+                const height = $elem.getBoundingClientRect().height;
+                // Find the currently smallest column
+                let smallestColIndex = findSmallestColIndex(colHeights);
+                // Add the height of the item and the gap to the column heights.
+                // It is very important we add the gap since the more elements we have,
+                // the bigger the role the margins play when computing the actual height of the columns.
+                colHeights[smallestColIndex] += height + gap;
+                // Set the slot on the element to get the element to the correct column.
+                // Only do it if the slot has actually changed.
+                const newSlot = smallestColIndex.toString();
+                if ($elem.slot !== newSlot) {
+                    writes.push(() => ($elem.slot = newSlot));
+                }
+            }
+            // Batch all the writes at once
+            for (const write of writes) {
+                write();
+            }
+            // Render the columns
+            this.renderCols(colCount);
+            // Commit the changes for ShadyCSS
+            window.ShadyCSS && window.ShadyCSS.styleElement(this);
+            // console.timeEnd("layout");
+        });
+    }
+}
+customElements.define("masonry-layout", MasonryLayout);
+
+function CardFeedView(props, children) {
+  const style = {
+    Container: {
+      columnGap: props.gap + "px",
+      columnWidth: props.width + "px",
+      "& > div": {
+        //   display: "inline-block!important",
+        marginBottom: "24px",
+      },
+    },
+  };
+  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
+  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", { class: sheet.classes.Container }, children)));
+}
+
+exports.CardFeedView = CardFeedView;

package/dist/cjs/sqm-card-feed.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
-const sqmCardFeedView = require('./sqm-card-feed-view-ec75fafc.js');
+const sqmCardFeedView = require('./sqm-card-feed-view-17fd3f0a.js');
 
 const CardFeed = class {
   constructor(hostRef) {
@@ -17,11 +17,10 @@ const CardFeed = class {
      */
     this.width = 347;
     /**
-     * @uiName Horizontal Gap
-     * @uiType string
-     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiName Column Gap
+     * @uiType number
      */
-    this.gap = "xx-large";
+    this.gap = 24;
     _extends.h$1(this);
   }
   disconnectedCallback() { }

package/dist/cjs/{sqm-leaderboard-rank-view-510f16d3.js → sqm-leaderboard-rank-view-dff9de2e.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-89f66e76.js');
+const global = require('./global-5ca2a131.js');
 const index_module = require('./index.module-c0bf9df0.js');
 
 var docCache = new Map();

package/dist/cjs/sqm-leaderboard-rank.cjs.entry.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-const global = require('./global-89f66e76.js');
+const global = require('./global-5ca2a131.js');
 require('./use-callback-fadb2643.js');
 const index_module = require('./index.module-c0bf9df0.js');
 const cjs = require('./cjs-1066ec21.js');
-const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-510f16d3.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-dff9de2e.js');
 
 const GET_RANK = sqmLeaderboardRankView.gql `
   query ($type: String!, $filter: UserLeaderboardFilterInput) {

package/dist/cjs/{sqm-portal-email-verification-view-5093ac20.js → sqm-portal-email-verification-view-f0cbd78b.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-89f66e76.js');
+const global = require('./global-5ca2a131.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 const mixins = require('./mixins-7b7c59fe.js');
 const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');

package/dist/cjs/sqm-portal-email-verification.cjs.entry.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./global-89f66e76.js');
+require('./global-5ca2a131.js');
 require('./use-callback-fadb2643.js');
 const index_module = require('./index.module-c0bf9df0.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
 require('./sqm-text-span-view-b5ae787b.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-5093ac20.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-f0cbd78b.js');
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e;
@@ -27,7 +27,8 @@ function usePortalEmailVerification(props) {
       return;
     setError("");
     const urlParams = nextPage ? { nextPage } : null;
-    const variables = { email, urlParams };
+    const redirectPath = props.redirectPath;
+    const variables = { email, urlParams, redirectPath };
     await request(variables);
   };
   _extends.useEffect(() => {
@@ -63,6 +64,12 @@ const PortalEmailVerification = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
+    /**
+     * The page that users are redirected to from the verification email.
+     *
+     * @uiName Email redirection base path
+     */
+    this.redirectPath = "/verifyEmail";
     /**
      * @uiName Email verification header text
      */

package/dist/cjs/{sqm-portal-footer-view-03408484.js → sqm-portal-footer-view-c714590c.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-89f66e76.js');
+const global = require('./global-5ca2a131.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 
 function PoweredByImg({ color = "#A6A6A6", width = 190, height = 29, }) {

package/dist/cjs/sqm-portal-footer.cjs.entry.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./global-89f66e76.js');
+require('./global-5ca2a131.js');
 require('./use-callback-fadb2643.js');
 require('./index.module-c0bf9df0.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
-const sqmPortalFooterView = require('./sqm-portal-footer-view-03408484.js');
+const sqmPortalFooterView = require('./sqm-portal-footer-view-c714590c.js');
 
 const PortalFooter = class {
   constructor(hostRef) {

package/dist/cjs/sqm-portal-forgot-password.cjs.entry.js

@@ -13,7 +13,7 @@ require('./mixins-7b7c59fe.js');
 require('./sqm-text-span-view-b5ae787b.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-1704d285.js');
 
-function usePortalForgotPassword() {
+function usePortalForgotPassword(props) {
   var _a, _b, _c, _d;
   const [success, setSuccess] = _extends.useState(false);
   const [error, setError] = _extends.useState("");
@@ -27,7 +27,8 @@ function usePortalForgotPassword() {
       jsonpointer.jsonpointer.set(formData, key, value);
     });
     const urlParams = nextPage ? { nextPage } : null;
-    const variables = { email: formData.email, urlParams };
+    const redirectPath = props.redirectPath;
+    const variables = { email: formData.email, urlParams, redirectPath };
     await request(variables);
   };
   _extends.useEffect(() => {
@@ -46,6 +47,7 @@ function usePortalForgotPassword() {
       loading,
       error: ((_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.message) || error,
       success,
+      loginPath: props.loginPath,
     },
     callbacks: {
       submit,
@@ -57,6 +59,12 @@ const PortalForgotPassword = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
+    /**
+     * The page that users are redirected to from the password reset email.
+     *
+     * @uiName Email redirection base path
+     */
+    this.redirectPath = "/resetPassword";
     /**
      * @uiName Email label
      */
@@ -65,15 +73,19 @@ const PortalForgotPassword = class {
      * @uiName Password reset button text
      */
     this.submitLabel = "Request Password Reset";
+    /**
+     * @uiName Routing path to login page
+     */
+    this.loginPath = "/login";
     _extends.h$1(this);
   }
   disconnectedCallback() { }
   render() {
     const { states, callbacks } = index_module.j()
       ? usePortalForgotPasswordDemo(this)
-      : usePortalForgotPassword();
+      : usePortalForgotPassword(this);
     const content = {
-      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.mn.push("/login") }, "Sign In"))),
+      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.mn.push(states.loginPath) }, "Sign In"))),
       messageSlot: (index.h("slot", { name: "messageSlot" }, "Enter your email below to receive a password reset link.")),
       emailLabel: this.emailLabel,
       submitLabel: this.submitLabel,

package/dist/cjs/{sqm-portal-profile-view-1a6327e4.js → sqm-portal-profile-view-f0233000.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-89f66e76.js');
+const global = require('./global-5ca2a131.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');
 
@@ -14,12 +14,13 @@ function PortalContainerView(props, children) {
         : "100%",
       "grid-gap": `var(--sl-spacing-${props.gap})`,
       padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
+      maxWidth: props.maxWidth ? props.maxWidth : "",
     },
   };
   const vanillaStyle = `
   :host{
     width: 100%;
-    display: "block";
+    display: block;
   }`;
   jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
   const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);

package/dist/cjs/sqm-portal-profile.cjs.entry.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./global-89f66e76.js');
+require('./global-5ca2a131.js');
 require('./use-callback-fadb2643.js');
 const index_module = require('./index.module-c0bf9df0.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
 const cjs = require('./cjs-1066ec21.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-1a6327e4.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-f0233000.js');
 require('./sqm-text-span-view-b5ae787b.js');
 
 const GET_USER = index_module.dist.gql `

package/dist/cjs/sqm-portal-reset-password.cjs.entry.js

@@ -45,7 +45,7 @@ function usePortalResetPassword(props) {
   };
   const failed = () => {
     index_module.mn.push({
-      pathname: "/",
+      pathname: props.failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
@@ -93,9 +93,17 @@ const PortalResetPassword = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
+     * The page that users are redirected to when the password reset succeeds.
+     *
      * @uiName Next page path
      */
     this.nextPage = "/";
+    /**
+     * The page that users are redirected to if the reset fails due to outdated password reset attempt.
+     *
+     * @uiName Failed page redirection path
+     */
+    this.failedPage = "/";
     /**
      * @uiName Show confirm password
      */

package/dist/cjs/sqm-portal-verify-email.cjs.entry.js

@@ -12,7 +12,7 @@ require('./mixins-7b7c59fe.js');
 require('./sqm-text-span-view-b5ae787b.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-b595e302.js');
 
-function usePortalVerifyEmail({ nextPage }) {
+function usePortalVerifyEmail({ nextPage, failedPage }) {
   var _a, _b, _c, _d, _e;
   const [verified, setVerified] = _extends.useState(false);
   const [disableContinue, setDisableContinue] = _extends.useState(true);
@@ -25,7 +25,7 @@ function usePortalVerifyEmail({ nextPage }) {
   urlParams.delete("oobCode");
   const failed = () => {
     return index_module.mn.push({
-      pathname: "/",
+      pathname: failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
@@ -96,9 +96,17 @@ const PortalVerifyEmail = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
+     * The page that users are redirected to when the verification succeeds.
+     *
      * @uiName Next page path
      */
     this.nextPage = "/";
+    /**
+     * The page that users are redirected to if verification fails due to outdated verification attempt.
+     *
+     * @uiName Failed page redirection path
+     */
+    this.failedPage = "/";
     _extends.h$1(this);
   }
   disconnectedCallback() { }