npm - @saasquatch/mint-components - Versions diffs - 1.6.2-4 → 1.6.2-40 - Mend

@saasquatch/mint-components 1.6.2-4 → 1.6.2-40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (582) hide show

package/dist/collection/components/sqm-portal-reset-password/sqm-portal-reset-password.js CHANGED Viewed

@@ -5,28 +5,27 @@ import deepmerge from "deepmerge";
 import { PortalResetPasswordView, } from "./sqm-portal-reset-password-view";
 import { usePortalResetPassword } from "./usePortalResetPassword";
 /**
- * @uiName Portal Reset Password
+ * @uiName Microsite Reset Password
  */
 export class PortalResetPassword {
   constructor() {
     this.ignored = true;
     /**
-     * The page that users are redirected to when the password reset succeeds.
+     * Redirect participants to this page when they successfully reset their password.
      *
-     * @uiName Next Page Path
+     * @uiName Successful Reset Redirect
+     * @uiWidget pageSelect
      */
     this.nextPage = "/";
     /**
-     * The page that users are redirected to if the reset fails due to outdated password reset attempt.
+     * Redirect participants to this page if password reset fails due to an outdated reset attempt.
      *
-     * @uiName Failed Page Path
+     * @uiName Failed Reset Redirect
+     * @uiWidget pageSelect
      */
     this.failedPage = "/";
     /**
-     * Show or hide confirm password field
-     *
-     * @uiName Show Confirm Password
-     * @default
+     * @uiName Show Confirm Password Field
      */
     this.confirmPassword = false;
     /**
@@ -34,9 +33,10 @@ export class PortalResetPassword {
      */
     this.resetPasswordHeader = "Reset your password";
     /**
-     * Displayed after a successful password reset
+     * Displayed after a successful password reset.
      *
      * @uiName Successful Password Reset Text
+     * @uiWidget textArea
      */
     this.passwordResetHeader = "Password reset";
     /**
@@ -44,17 +44,17 @@ export class PortalResetPassword {
      */
     this.resetPasswordButtonText = "Reset Password";
     /**
-     * Button text displayed after a successful password reset
+     * Button text displayed after a successful password reset.
      *
      * @uiName Continue Button Text
      */
     this.continueButtonText = "Continue";
     /**
-     * @uiName Confirm Password Label
+     * @uiName Password Confirmation Field Label
      */
     this.confirmPasswordFieldLabel = "Confirm Password";
     /**
-     * @uiName Password Label
+     * @uiName Password Field Label
      */
     this.passwordFieldLabel = "New Password";
     withHooks(this);
@@ -81,10 +81,13 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Next Page Path",
+            "text": "Successful Reset Redirect",
             "name": "uiName"
+          }, {
+            "text": "pageSelect",
+            "name": "uiWidget"
           }],
-        "text": "The page that users are redirected to when the password reset succeeds."
+        "text": "Redirect participants to this page when they successfully reset their password."
       },
       "attribute": "next-page",
       "reflect": false,
@@ -102,10 +105,13 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Failed Page Path",
+            "text": "Failed Reset Redirect",
             "name": "uiName"
+          }, {
+            "text": "pageSelect",
+            "name": "uiWidget"
           }],
-        "text": "The page that users are redirected to if the reset fails due to outdated password reset attempt."
+        "text": "Redirect participants to this page if password reset fails due to an outdated reset attempt."
       },
       "attribute": "failed-page",
       "reflect": false,
@@ -123,13 +129,10 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show Confirm Password",
+            "text": "Show Confirm Password Field",
             "name": "uiName"
-          }, {
-            "text": undefined,
-            "name": "default"
           }],
-        "text": "Show or hide confirm password field"
+        "text": ""
       },
       "attribute": "confirm-password",
       "reflect": false,
@@ -170,8 +173,11 @@ export class PortalResetPassword {
         "tags": [{
             "text": "Successful Password Reset Text",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
-        "text": "Displayed after a successful password reset"
+        "text": "Displayed after a successful password reset."
       },
       "attribute": "password-reset-header",
       "reflect": false,
@@ -213,7 +219,7 @@ export class PortalResetPassword {
             "text": "Continue Button Text",
             "name": "uiName"
           }],
-        "text": "Button text displayed after a successful password reset"
+        "text": "Button text displayed after a successful password reset."
       },
       "attribute": "continue-button-text",
       "reflect": false,
@@ -231,7 +237,7 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Confirm Password Label",
+            "text": "Password Confirmation Field Label",
             "name": "uiName"
           }],
         "text": ""
@@ -252,7 +258,7 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Password Label",
+            "text": "Password Field Label",
             "name": "uiName"
           }],
         "text": ""
@@ -302,16 +308,16 @@ function usePortalResetPasswordDemo(props) {
       error: "",
       loading: false,
       reset: false,
-      confirmPassword: true,
+      confirmPassword: props.confirmPassword,
       oobCodeValidating: false,
       oobCodeValid: true,
       content: {
-        passwordResetHeader: "Password reset",
-        resetPasswordHeader: "Reset your password",
-        continueButtonText: "Continue",
-        resetPasswordButtonText: "Reset Password",
-        confirmPasswordFieldLabel: "Confirm Password",
-        passwordFieldLabel: "New Password",
+        passwordResetHeader: props.passwordResetHeader,
+        resetPasswordHeader: props.resetPasswordHeader,
+        continueButtonText: props.continueButtonText,
+        resetPasswordButtonText: props.resetPasswordButtonText,
+        confirmPasswordFieldLabel: props.confirmPasswordFieldLabel,
+        passwordFieldLabel: props.passwordFieldLabel,
       },
     },
     callbacks: {

package/dist/collection/components/sqm-portal-reset-password/usePortalResetPassword.js CHANGED Viewed

@@ -3,15 +3,24 @@ import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { navigation, useVerifyPasswordResetCodeMutation, useResetPasswordMutation, } from "@saasquatch/component-boilerplate";
 import { sanitizeUrlPath } from "../../utils/utils";
 export function usePortalResetPassword(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const [reset, setReset] = useState(false);
   const [error, setError] = useState("");
   const [verifyPasswordResetCode, verifyPasswordResetCodeState] = useVerifyPasswordResetCodeMutation();
   const [resetPassword, resetPasswordState] = useResetPasswordMutation();
-  const urlParams = new URLSearchParams(window.location.search);
+  const urlParams = new URLSearchParams(navigation.location.search);
   const oobCode = urlParams.get("oobCode");
   urlParams.delete("oobCode");
   const nextPageOverride = urlParams.get("nextPage");
+  const verifyPasswordResetCodeAndHandleResponse = async () => {
+    const result = await verifyPasswordResetCode({ oobCode });
+    if (result instanceof Error) {
+      setError("Network request failed.");
+    }
+  };
+  useEffect(() => {
+    verifyPasswordResetCodeAndHandleResponse();
+  }, []);
   const submit = async (event) => {
     setError("");
     let formData = event.detail.formData;
@@ -23,7 +32,16 @@ export function usePortalResetPassword(props) {
       setError("Passwords do not match.");
       return;
     }
-    await resetPassword(variables);
+    const result = await resetPassword(variables);
+    if (result instanceof Error) {
+      return setError("Network request failed.");
+    }
+    if (result.resetManagedIdentityPassword) {
+      setReset(true);
+      setTimeout(() => {
+        gotoNextPage();
+      }, 5000);
+    }
   };
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
@@ -36,39 +54,15 @@ export function usePortalResetPassword(props) {
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
-  useEffect(() => {
-    var _a;
-    if ((_a = resetPasswordState.data) === null || _a === void 0 ? void 0 : _a.resetManagedIdentityPassword) {
-      setReset(true);
-      setTimeout(() => {
-        gotoNextPage();
-      }, 5000);
-    }
-  }, [(_a = resetPasswordState.data) === null || _a === void 0 ? void 0 : _a.resetManagedIdentityPassword]);
-  useEffect(() => {
-    verifyPasswordResetCode({ oobCode });
-  }, [oobCode]);
-  useEffect(() => {
-    var _a;
-    if ((_a = verifyPasswordResetCodeState === null || verifyPasswordResetCodeState === void 0 ? void 0 : verifyPasswordResetCodeState.errors) === null || _a === void 0 ? void 0 : _a.message) {
-      setError("Network request failed.");
-    }
-  }, [verifyPasswordResetCodeState === null || verifyPasswordResetCodeState === void 0 ? void 0 : verifyPasswordResetCodeState.errors]);
-  useEffect(() => {
-    var _a;
-    if ((_a = resetPasswordState === null || resetPasswordState === void 0 ? void 0 : resetPasswordState.errors) === null || _a === void 0 ? void 0 : _a.message) {
-      setError("Network request failed.");
-    }
-  }, [resetPasswordState === null || resetPasswordState === void 0 ? void 0 : resetPasswordState.errors]);
   return {
     states: {
       loading: resetPasswordState.loading,
       reset,
       confirmPassword: props.confirmPassword,
-      error: ((_f = (_e = (_d = (_c = (_b = resetPasswordState.errors) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_k = (_j = (_h = (_g = resetPasswordState.errors) === null || _g === void 0 ? void 0 : _g.response) === null || _h === void 0 ? void 0 : _h.errors) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.message) ||
+      error: ((_e = (_d = (_c = (_b = (_a = resetPasswordState.errors) === null || _a === void 0 ? void 0 : _a.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) || ((_j = (_h = (_g = (_f = resetPasswordState.errors) === null || _f === void 0 ? void 0 : _f.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) ||
         error,
       oobCodeValidating: verifyPasswordResetCodeState.loading,
-      oobCodeValid: (_l = verifyPasswordResetCodeState.data) === null || _l === void 0 ? void 0 : _l.verifyManagedIdentityPasswordResetCode.success,
+      oobCodeValid: (_k = verifyPasswordResetCodeState.data) === null || _k === void 0 ? void 0 : _k.verifyManagedIdentityPasswordResetCode.success,
       content: {
         passwordResetHeader: props.passwordResetHeader,
         resetPasswordHeader: props.resetPasswordHeader,

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

@@ -5,21 +5,23 @@ import deepmerge from "deepmerge";
 import { PortalVerifyEmailView, } from "./sqm-portal-verify-email-view";
 import { usePortalVerifyEmail } from "./usePortalVerifyEmail";
 /**
- * @uiName Portal Verify Email
+ * @uiName Microsite Verify Email
  */
 export class PortalVerifyEmail {
   constructor() {
     this.ignored = true;
     /**
-     * The page that users are redirected to when the verification succeeds.
+     * Redirect participants to this page when they successfully verify their email.
      *
-     * @uiName Next Page Path
+     * @uiName Successful Verification Redirect
+     * @uiWidget pageSelect
      */
     this.nextPage = "/";
     /**
-     * The page that users are redirected to if verification fails due to outdated verification attempt.
+     * Redirect participants to this page if verification fails due to an outdated verification attempt.
      *
-     * @uiName Failed Page Path
+     * @uiName Failed Verification Redirect
+     * @uiWidget pageSelect
      */
     this.failedPage = "/";
     withHooks(this);
@@ -46,10 +48,13 @@ export class PortalVerifyEmail {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Next Page Path",
+            "text": "Successful Verification Redirect",
             "name": "uiName"
+          }, {
+            "text": "pageSelect",
+            "name": "uiWidget"
           }],
-        "text": "The page that users are redirected to when the verification succeeds."
+        "text": "Redirect participants to this page when they successfully verify their email."
       },
       "attribute": "next-page",
       "reflect": false,
@@ -67,10 +72,13 @@ export class PortalVerifyEmail {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Failed Page Path",
+            "text": "Failed Verification Redirect",
             "name": "uiName"
+          }, {
+            "text": "pageSelect",
+            "name": "uiWidget"
           }],
-        "text": "The page that users are redirected to if verification fails due to outdated verification attempt."
+        "text": "Redirect participants to this page if verification fails due to an outdated verification attempt."
       },
       "attribute": "failed-page",
       "reflect": false,

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

@@ -1,16 +1,17 @@
-import { useEffect, useState } from "@saasquatch/universal-hooks";
+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, _j;
-  const [verified, setVerified] = useState(false);
-  const [disableContinue, setDisableContinue] = useState(true);
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const userIdent = useUserIdentity();
   const [request, { loading, data, errors }] = useVerifyEmailMutation();
-  const [error, setError] = useState("");
-  const urlParams = new URLSearchParams(window.location.search);
+  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,
@@ -20,52 +21,32 @@ export function usePortalVerifyEmail({ nextPage, failedPage }) {
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
     const url = sanitizeUrlPath(nextPageOverride || nextPage);
+    // window.history.pushState(undefined, "", url.href);
     navigation.push(url.href);
   };
   const submit = async () => {
-    if (oobCode) {
-      setError("");
-      await request({ oobCode });
-    }
-  };
-  useEffect(() => {
     var _a;
-    if ((_a = data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail) === null || _a === void 0 ? void 0 : _a.success) {
-      setVerified(true);
-    }
-  }, [(_a = data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail) === null || _a === void 0 ? void 0 : _a.success]);
-  useEffect(() => {
-    submit();
-  }, []);
-  useEffect(() => {
-    var _a, _b;
-    if ((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified) {
-      setDisableContinue(false);
-      setTimeout(() => {
-        gotoNextPage();
-      }, 3000);
-    }
-    else if (!oobCode ||
-      ((_b = data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail) === null || _b === void 0 ? void 0 : _b.success) === false) {
-      setDisableContinue(false);
-    }
-    else if (!userIdent) {
-      setDisableContinue(false);
+    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);
     }
-  }, [(_b = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _b === void 0 ? void 0 : _b.emailVerified]);
+  };
   useEffect(() => {
-    if (errors === null || errors === void 0 ? void 0 : errors.message) {
-      setError("Network request failed.");
-    }
-  }, [errors]);
+    submit();
+  }, []);
   return {
     states: {
       loading: loading || disableContinue,
-      error: ((_f = (_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) ||
-        error,
+      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: {

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

@@ -6,7 +6,7 @@ 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="Complete tasks like uploading your first video or sharing videos with friends" 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>
+ * @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() {

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { ProgramExplainerStepView } from "./sqm-program-explainer-step-view";
 /**
  * @uiName Program Explainer Step
  * @exampleGroup Common Components
- * @example Program Explainer Step - <sqm-program-explainer-step description="Complete tasks like uploading your first video or sharing videos with friends" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step>
+ * @example Program Explainer Step - <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>
  * @validParents ["sqm-program-explainer"]
  */
 export class ProgramExplainerStep {
@@ -155,7 +155,7 @@ export class ProgramExplainerStep {
             "text": "Icon",
             "name": "uiName"
           }],
-        "text": "Full list of valid icon names available in the {@link https://shoelace.style/components/icon Shoelace Icon Library}. This value is case sensitive."
+        "text": "Full list of valid icon names available in the [Shoelace Icon Library](https://shoelace.style/components/icon). This value is case sensitive."
       },
       "attribute": "icon",
       "reflect": false

package/dist/collection/components/sqm-program-menu/sqm-program-menu.js CHANGED Viewed

@@ -3,7 +3,8 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { useProgramMenu } from "./useProgramMenu";
 import { getProps } from "../../utils/utils";
 /**
- * @uiName Portal Menu
+ * @uiName Microsite Program Menu
+ * @slots [{"name":"","title":"Menu Content"}]
  * @canvasRenderer always-replace
  */
 export class ProgramMenu {

package/dist/collection/components/sqm-referral-iframe/sqm-referral-iframe.js CHANGED Viewed

@@ -13,12 +13,12 @@ export class SqmReferralIframe {
   constructor() {
     this.ignored = true;
     /**
-     * Height of the iframe container
+     * Define the height of the iframe with any valid CSS height value. Example: 100px, 5rem, or auto.
      * @uiName Iframe Height
      */
     this.iframeHeight = "100%";
     /**
-     * Width of the iframe container
+     * Define the width of the iframe with any valid CSS width value. Example: 100px, 5rem, or auto.
      * @uiName Iframe Width
      */
     this.iframeWidth = "100%";
@@ -81,7 +81,7 @@ export class SqmReferralIframe {
             "text": "Iframe Height",
             "name": "uiName"
           }],
-        "text": "Height of the iframe container"
+        "text": "Define the height of the iframe with any valid CSS height value. Example: 100px, 5rem, or auto."
       },
       "attribute": "iframe-height",
       "reflect": false,
@@ -102,7 +102,7 @@ export class SqmReferralIframe {
             "text": "Iframe Width",
             "name": "uiName"
           }],
-        "text": "Width of the iframe container"
+        "text": "Define the width of the iframe with any valid CSS width value. Example: 100px, 5rem, or auto."
       },
       "attribute": "iframe-width",
       "reflect": false,

package/dist/collection/components/sqm-referral-table/sqm-referral-table.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { tryMethod, useReferralTable } from "./useReferralTable";
  * @uiName Referral Table
  * @exampleGroup Referrals
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
- * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" show-labels sm-breakpoint="599" md-breakpoint="799"><sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User" deleted-user="Deleted User"></sqm-referral-table-user-column><sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}"></sqm-referral-table-rewards-column><sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted"></sqm-referral-table-date-column><sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress"></sqm-referral-table-status-column><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned" slot="empty"></sqm-empty></sqm-referral-table>
+ * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799"><sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User" deleted-user="Deleted User"></sqm-referral-table-user-column><sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}"></sqm-referral-table-rewards-column><sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted"></sqm-referral-table-date-column><sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress"></sqm-referral-table-status-column><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned" slot="empty"></sqm-empty></sqm-referral-table>
  */
 export class ReferralTable {
   constructor() {
@@ -22,8 +22,8 @@ export class ReferralTable {
      * @uiName Referrals Per Page
      */
     this.perPage = 4;
-    /** @uiName Show Column Labels */
-    this.showLabels = true;
+    /** @uiName Hide Column Labels */
+    this.hideLabels = false;
     /** @uiName Previous Button Text  */
     this.prevLabel = "Prev";
     /** @uiName View More Button Text  */
@@ -104,7 +104,7 @@ export class ReferralTable {
       "reflect": false,
       "defaultValue": "4"
     },
-    "showLabels": {
+    "hideLabels": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -116,14 +116,14 @@ export class ReferralTable {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Show Column Labels",
+            "text": "Hide Column Labels",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "show-labels",
+      "attribute": "hide-labels",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
     "prevLabel": {
       "type": "string",
@@ -393,7 +393,7 @@ function useReferralTableDemo(props, emptyElement, loadingElement) {
     },
     data: {
       textOverrides: {
-        showLabels: props.showLabels,
+        showLabels: !props.hideLabels,
         prevLabel: props.prevLabel,
         moreLabel: props.moreLabel,
       },

package/dist/collection/components/sqm-referral-table/useReferralTable.js CHANGED Viewed

@@ -280,7 +280,7 @@ export function useReferralTable(props, emptyElement, loadingElement) {
     },
     data: {
       textOverrides: {
-        showLabels: props.showLabels,
+        showLabels: !props.hideLabels,
         prevLabel: props.prevLabel,
         moreLabel: props.moreLabel,
       },

package/dist/collection/components/sqm-rewards-table/sqm-rewards-table.js CHANGED Viewed

@@ -12,14 +12,14 @@ import { tryMethod, useRewardsTable } from "./useRewardsTable";
  * @uiName Reward Table
  * @exampleGroup Rewards
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
- * @example Reward Table - <sqm-rewards-table per-page="4" show-labels= prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799"><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error"></sqm-rewards-table-status-column><sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!"></sqm-rewards-table-reward-column><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column><sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column><sqm-empty slot="empty" empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png" empty-state-header="View your rewards" empty-state-text="Complete program tasks to view the details of your rewards"></sqm-empty></sqm-rewards-table>
+ * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799"><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error"></sqm-rewards-table-status-column><sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!"></sqm-rewards-table-reward-column><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column><sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column><sqm-empty slot="empty" empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png" empty-state-header="View your rewards" empty-state-text="Complete program tasks to view the details of your rewards"></sqm-empty></sqm-rewards-table>
  */
 export class RewardsTable {
   constructor() {
     /** @uiName Number of rewards per page */
     this.perPage = 4;
-    /** @uiName Show column labels */
-    this.showLabels = true;
+    /** @uiName Hide Column Labels */
+    this.hideLabels = false;
     /** @uiName Previous button text  */
     this.prevLabel = "Prev";
     /** @uiName View More button text  */
@@ -92,7 +92,7 @@ export class RewardsTable {
       "reflect": false,
       "defaultValue": "4"
     },
-    "showLabels": {
+    "hideLabels": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -104,14 +104,14 @@ export class RewardsTable {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Show column labels",
+            "text": "Hide Column Labels",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "show-labels",
+      "attribute": "hide-labels",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
     "prevLabel": {
       "type": "string",
@@ -283,7 +283,13 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
     let componentData = data;
     componentData = data.slice(0, props.perPage);
     // filter out loading and empty states from columns array
-    const columnComponents = components.filter((component) => component.slot !== "loading" && component.slot !== "empty");
+    const columnComponents = components.filter((component) => {
+      var _a, _b;
+      return component.slot !== "loading" &&
+        component.slot !== "empty" &&
+        ((_a = component === null || component === void 0 ? void 0 : component.firstElementChild) === null || _a === void 0 ? void 0 : _a.getAttribute("slot")) !== "loading" &&
+        ((_b = component === null || component === void 0 ? void 0 : component.firstElementChild) === null || _b === void 0 ? void 0 : _b.getAttribute("slot")) !== "empty";
+    });
     // get the column titles (renderLabel is asynchronous)
     const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c, idx) => {
       var _a;
@@ -332,7 +338,7 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
     },
     data: {
       textOverrides: {
-        showLabels: props.showLabels,
+        showLabels: !props.hideLabels,
         prevLabel: props.prevLabel,
         moreLabel: props.moreLabel,
       },