@saasquatch/mint-components 1.5.2-0 → 1.5.2

package/dist/collection/components/sqm-portal-change-password/usePortalChangePassword.js

@@ -1,61 +1,61 @@
-import { useEffect, useState } from "@saasquatch/universal-hooks";
-import jsonpointer from "jsonpointer";
-import { useChangePasswordMutation, useUserIdentity, } from "@saasquatch/component-boilerplate";
-export function usePortalChangePassword(props) {
-  var _a, _b, _c, _d;
-  const [request, { loading, errors, data }] = useChangePasswordMutation();
-  const [open, setOpen] = useState(false);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState(false);
-  const user = useUserIdentity();
-  const submit = async (event) => {
-    var _a;
-    setSuccess(false);
-    const formData = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.formData;
-    formData === null || formData === void 0 ? void 0 : formData.forEach((value, key) => {
-      jsonpointer.set(formData, key, value);
-    });
-    if (!(user === null || user === void 0 ? void 0 : user.jwt)) {
-      setError("Please log in again to change your password.");
-      return;
-    }
-    if (formData.password !== formData.confirmPassword) {
-      setError("Passwords do not match.");
-      return;
-    }
-    setError("");
-    const variables = {
-      password: formData.password,
-    };
-    await request(variables);
-  };
-  useEffect(() => {
-    var _a;
-    if ((_a = data === null || data === void 0 ? void 0 : data.changeManagedIdentityPassword) === null || _a === void 0 ? void 0 : _a.success) {
-      setSuccess(true);
-    }
-  }, [(_a = data === null || data === void 0 ? void 0 : data.changeManagedIdentityPassword) === null || _a === void 0 ? void 0 : _a.success]);
-  return {
-    states: {
-      open,
-      loading,
-      success,
-      error: 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),
-      content: {
-        modalChangePasswordHeader: props.modalChangePasswordHeader,
-        cancelText: props.cancelText,
-        changePasswordButtonText: props.changePasswordButtonText,
-        passwordFieldLabel: props.passwordFieldLabel,
-        confirmPasswordFieldLabel: props.confirmPasswordFieldLabel,
-        successMessage: props.successMessage,
-        portalChangePasswordHeader: props.portalChangePasswordHeader,
-        portalChangePasswordButtonText: props.portalChangePasswordButtonText,
-      },
-    },
-    data: {},
-    callbacks: {
-      setOpen,
-      submit,
-    },
-  };
-}
+import { useEffect, useState } from "@saasquatch/universal-hooks";
+import jsonpointer from "jsonpointer";
+import { useChangePasswordMutation, useUserIdentity, } from "@saasquatch/component-boilerplate";
+export function usePortalChangePassword(props) {
+  var _a, _b, _c, _d;
+  const [request, { loading, errors, data }] = useChangePasswordMutation();
+  const [open, setOpen] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+  const user = useUserIdentity();
+  const submit = async (event) => {
+    var _a;
+    setSuccess(false);
+    const formData = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.formData;
+    formData === null || formData === void 0 ? void 0 : formData.forEach((value, key) => {
+      jsonpointer.set(formData, key, value);
+    });
+    if (!(user === null || user === void 0 ? void 0 : user.jwt)) {
+      setError("Please log in again to change your password.");
+      return;
+    }
+    if (formData.password !== formData.confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
+    setError("");
+    const variables = {
+      password: formData.password,
+    };
+    await request(variables);
+  };
+  useEffect(() => {
+    var _a;
+    if ((_a = data === null || data === void 0 ? void 0 : data.changeManagedIdentityPassword) === null || _a === void 0 ? void 0 : _a.success) {
+      setSuccess(true);
+    }
+  }, [(_a = data === null || data === void 0 ? void 0 : data.changeManagedIdentityPassword) === null || _a === void 0 ? void 0 : _a.success]);
+  return {
+    states: {
+      open,
+      loading,
+      success,
+      error: 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),
+      content: {
+        modalChangePasswordHeader: props.modalChangePasswordHeader,
+        cancelText: props.cancelText,
+        changePasswordButtonText: props.changePasswordButtonText,
+        passwordFieldLabel: props.passwordFieldLabel,
+        confirmPasswordFieldLabel: props.confirmPasswordFieldLabel,
+        successMessage: props.successMessage,
+        portalChangePasswordHeader: props.portalChangePasswordHeader,
+        portalChangePasswordButtonText: props.portalChangePasswordButtonText,
+      },
+    },
+    data: {},
+    callbacks: {
+      setOpen,
+      submit,
+    },
+  };
+}

package/dist/collection/components/sqm-portal-container/PortalContainer.stories.js

@@ -1,119 +1,119 @@
-import { h } from "@stencil/core";
-import scenario from "./sqm-portal-container.feature";
-export default {
-  title: "Components/Portal Container",
-  parameters: {
-    scenario,
-  },
-};
-export const TooWideColumn = () => (h("div", { style: { width: "200px", border: "1px dashed grey" } },
-  h("sqm-portal-container", { gap: "xxx-large" },
-    h("div", { style: { background: "grey", border: "1px solid red" } }, "Small"),
-    h("div", { style: { background: "lightblue", width: "1000px" } }, "Too wide, content goes off the side of the page for ever and is hidden."))));
-export const TooWideRow = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
-  h("sqm-portal-container", { gap: "xxx-large", direction: "row", "min-width": "160px" },
-    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
-    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
-export const TooWideSmallGap = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
-  h("sqm-portal-container", { gap: "small", direction: "row", "min-width": "160px" },
-    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
-    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
-export const TooWidePadding = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
-  h("sqm-portal-container", { padding: "xxx-large", gap: "xxx-large", direction: "row", "min-width": "160px" },
-    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
-    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
-export const TooWideDisplayFlex = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
-  h("sqm-portal-container", { gap: "xxx-large", direction: "row", display: "flex", "min-width": "160px" },
-    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
-    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
-export const HalfWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
-  h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%" },
-    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
-    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
-export const HalfWidthCenter = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
-  h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%", center: true },
-    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
-    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
-export const FullWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
-  h("sqm-portal-container", { gap: "xxx-large", direction: "row", maxWidth: "100%" },
-    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
-    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
-export const SpaceBetween = () => {
-  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
-    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-between" },
-      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
-        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
-          h("sqm-text", null,
-            h("p", null, "Rewards Redeemed"))),
-        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
-          h("sqm-text", null,
-            h("p", null, "Points Balance")))),
-      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
-};
-export const SpaceAround = () => {
-  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
-    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-around" },
-      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
-        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
-          h("sqm-text", null,
-            h("p", null, "Rewards Redeemed"))),
-        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
-          h("sqm-text", null,
-            h("p", null, "Points Balance")))),
-      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
-};
-export const SpaceEvenly = () => {
-  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
-    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-evenly" },
-      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
-        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
-          h("sqm-text", null,
-            h("p", null, "Rewards Redeemed"))),
-        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
-          h("sqm-text", null,
-            h("p", null, "Points Balance")))),
-      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
-};
-export const Start = () => {
-  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
-    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "start" },
-      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
-        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
-          h("sqm-text", null,
-            h("p", null, "Rewards Redeemed"))),
-        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
-          h("sqm-text", null,
-            h("p", null, "Points Balance")))),
-      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
-};
-export const Center = () => {
-  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
-    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "center" },
-      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
-        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
-          h("sqm-text", null,
-            h("p", null, "Rewards Redeemed"))),
-        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
-          h("sqm-text", null,
-            h("p", null, "Points Balance")))),
-      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
-};
-export const End = () => {
-  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
-    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "end" },
-      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
-        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
-          h("sqm-text", null,
-            h("p", null, "Rewards Redeemed"))),
-        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
-          h("sqm-text", null,
-            h("p", null, "Points Balance")))),
-      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
-};
+import { h } from "@stencil/core";
+import scenario from "./sqm-portal-container.feature";
+export default {
+  title: "Components/Portal Container",
+  parameters: {
+    scenario,
+  },
+};
+export const TooWideColumn = () => (h("div", { style: { width: "200px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large" },
+    h("div", { style: { background: "grey", border: "1px solid red" } }, "Small"),
+    h("div", { style: { background: "lightblue", width: "1000px" } }, "Too wide, content goes off the side of the page for ever and is hidden."))));
+export const TooWideRow = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large", direction: "row", "min-width": "160px" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const TooWideSmallGap = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "small", direction: "row", "min-width": "160px" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const TooWidePadding = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { padding: "xxx-large", gap: "xxx-large", direction: "row", "min-width": "160px" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const TooWideDisplayFlex = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large", direction: "row", display: "flex", "min-width": "160px" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const HalfWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const HalfWidthCenter = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%", center: true },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const FullWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large", direction: "row", maxWidth: "100%" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const SpaceBetween = () => {
+  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-between" },
+      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          h("sqm-text", null,
+            h("p", null, "Rewards Redeemed"))),
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          h("sqm-text", null,
+            h("p", null, "Points Balance")))),
+      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
+export const SpaceAround = () => {
+  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-around" },
+      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          h("sqm-text", null,
+            h("p", null, "Rewards Redeemed"))),
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          h("sqm-text", null,
+            h("p", null, "Points Balance")))),
+      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
+export const SpaceEvenly = () => {
+  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-evenly" },
+      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          h("sqm-text", null,
+            h("p", null, "Rewards Redeemed"))),
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          h("sqm-text", null,
+            h("p", null, "Points Balance")))),
+      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
+export const Start = () => {
+  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "start" },
+      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          h("sqm-text", null,
+            h("p", null, "Rewards Redeemed"))),
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          h("sqm-text", null,
+            h("p", null, "Points Balance")))),
+      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
+export const Center = () => {
+  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "center" },
+      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          h("sqm-text", null,
+            h("p", null, "Rewards Redeemed"))),
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          h("sqm-text", null,
+            h("p", null, "Points Balance")))),
+      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
+export const End = () => {
+  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "end" },
+      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          h("sqm-text", null,
+            h("p", null, "Rewards Redeemed"))),
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          h("sqm-text", null,
+            h("p", null, "Points Balance")))),
+      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};

package/dist/collection/components/sqm-portal-container/sqm-portal-container-view.js

@@ -1,30 +1,30 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-export function PortalContainerView(props, children) {
-  const style = {
-    Container: {
-      display: props.display || "grid",
-      flexWrap: "wrap",
-      "grid-template-columns": props.direction === "row"
-        ? `repeat(auto-fill, minmax(${props.minWidth}, auto))`
-        : "100%",
-      "grid-gap": `var(--sl-spacing-${props.gap})`,
-      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
-      maxWidth: props.maxWidth,
-      margin: props.center && "auto",
-      justifyContent: props.justifyContent,
-    },
-  };
-  const vanillaStyle = `
-  :host{
-    width: 100%;
-    display: block;
-  }`;
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.Container },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    children));
-}
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function PortalContainerView(props, children) {
+  const style = {
+    Container: {
+      display: props.display || "grid",
+      flexWrap: "wrap",
+      "grid-template-columns": props.direction === "row"
+        ? `repeat(auto-fill, minmax(${props.minWidth}, auto))`
+        : "100%",
+      "grid-gap": `var(--sl-spacing-${props.gap})`,
+      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
+      maxWidth: props.maxWidth,
+      margin: props.center && "auto",
+      justifyContent: props.justifyContent,
+    },
+  };
+  const vanillaStyle = `
+  :host{
+    width: 100%;
+    display: block;
+  }`;
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    children));
+}