@saasquatch/mint-components 1.15.0-46 → 1.15.0-47

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-note-column.js

@@ -2,10 +2,10 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Method, Prop } from "@stencil/core";
 import { useRequestRerender } from "../../../tables/re-render";
 /**
- * @uiName Rewards Table Customer Note Column
+ * @uiName Reward Table Customer Note Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Customer Note Column - <sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column>
+ * @example Reward Table Customer Note Column - <sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column>
  */
 export class RewardTableCustomerNoteColumn {
   constructor() {
@@ -69,7 +69,8 @@ export class RewardTableCustomerNoteColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.js

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Rewards Table Reward Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward 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>
+ * @example Rewards Table Reward 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>
  */
 export class RewardsTableColumn {
   constructor() {
@@ -147,7 +147,8 @@ export class RewardsTableColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.js

@@ -2,10 +2,10 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Method, Prop } from "@stencil/core";
 import { useRequestRerender } from "../../../tables/re-render";
 /**
- * @uiName Rewards Table Source Column
+ * @uiName Reward Table Source Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Source 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>
+ * @example Reward Table Source 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>
  */
 export class RewardTableUserColumn {
   constructor() {
@@ -215,7 +215,8 @@ export class RewardTableUserColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.js

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Reward Table Status Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Status Column - <sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is current being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward approved for payout and was scheduled for payment based on your settings." ></sqm-rewards-table-status-column>
+ * @example Reward Table Status Column - <sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is current being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward approved for payout and was scheduled for payment based on your settings." ></sqm-rewards-table-status-column>
  */
 export class RewardTableStatusColumn {
   constructor() {
@@ -455,10 +455,12 @@ export class RewardTableStatusColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           },
           "ImpactConnection": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -1,6 +1,6 @@
 import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { useEffect, useReducer, useMemo } from "@saasquatch/universal-hooks";
+import { useEffect, useMemo, useReducer } from "@saasquatch/universal-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { GenericTableView, } from "../../tables/GenericTableView";
@@ -235,7 +235,8 @@ export class RewardsTable {
             "path": "../../tables/GenericTableView"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../saasquatch"
           }
         }
       },

package/dist/collection/components/sqm-rewards-table/useRewardsTable.js

@@ -1,11 +1,11 @@
 import { useLocale, usePaginatedQuery, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useReducer } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
+import debugFn from "debug";
 import { gql } from "graphql-request";
 import { useRerenderListener } from "../../tables/re-render";
 import { useChildElements } from "../../tables/useChildElements";
 import { generateUserError } from "../sqm-referral-table/useReferralTable";
-import debugFn from "debug";
 const debug = debugFn("sq:useRewardsTable");
 export const CSS_NAMESPACE = "sqm-rewards-table";
 const GET_REWARDS = gql `

package/dist/collection/components/sqm-share-button/sqm-share-button.js

@@ -15,12 +15,12 @@ import deepmerge from "deepmerge";
  * @example Facebook Share Button - <sqm-share-button medium="facebook">Share on Facebook</sqm-share-button>
  * @example X Share Button - <sqm-share-button medium="twitter">Share via X</sqm-share-button>
  * @example Email Share Button - <sqm-share-button medium="email">Share via Email</sqm-share-button>
- * @example Mobile Share Sheet Button - <sqm-share-button medium="direct">Share</sqm-share-button>
+ * @example Web Share Sheet Share Button - <sqm-share-button medium="direct">Share</sqm-share-button>
  * @example LinkedIn Share Button - <sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button>
  * @example SMS Share Button - <sqm-share-button medium="sms">Text a friend</sqm-share-button>
- * @example Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
+ * @example Facebook Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
  * @example WhatsApp Share Button - <sqm-share-button medium="whatsapp">Share via WhatsApp</sqm-share-button>
- * @example LINE Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
+ * @example Line Messenger Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
  * @example Pinterest Share Button - <sqm-share-button medium="pinterest">Share on Pinterest</sqm-share-button>
  */
 export class ShareButton {

package/dist/collection/components/sqm-stencilbook/BrandSelector.js

@@ -1,4 +1,4 @@
-import { Component, State, h, Host } from "@stencil/core";
+import { Component, h, Host, State } from "@stencil/core";
 import * as Themes from "./Themes";
 const LOCAL_STORAGE_BRAND_KEY = "localStorageBrandKey";
 const LOCAL_STORAGE_BRAND_CONFIG_KEY = "localStorageBrandConfigKey";

package/dist/collection/components/sqm-stencilbook/Themes.js

@@ -9,53 +9,44 @@
  *  - Shoelace color generator: https://codepen.io/claviska/full/QWveRgL
  *
  */
-//
+// @ts-nocheck
 export const Default = null;
 export const Netflix = {
-  font: {
-    font: "Netflix Sans, Arial, sans-serif",
-    textColor: "white",
-    secondaryTextColor: "#B3B3B3",
-  },
-  border: {
-    color: "#333333",
-    radius: "4px",
-    thickness: "1px",
+  main: {
+    brandFont: "Netflix Sans, Arial, sans-serif",
   },
   color: {
-    primaryColor: "#E50914",
-    background: "#101010",
+    textColorShades: {
+      mainText: "white",
+      subduedText: "#B3B3B3",
+    },
+    backgroundColor: "#101010",
     accentColorShades: {
       text: "#E50914",
       icon: "#E50914",
       border: "#E50914",
       background: "#300609",
-      iconAndBadge: "#E50914",
     },
     success: {
       text: "#66BB6A",
-      icon: "#4CAF50",
       border: "#4CAF50",
       background: "#1B5E20",
       iconAndBadge: "#4CAF50",
     },
     warning: {
       text: "#FFCA28",
-      icon: "#FFA726",
       border: "#FFA726",
       background: "#F57C00",
       iconAndBadge: "#FFA726",
     },
     critical: {
       text: "#EF9A9A",
-      icon: "#E50914",
       border: "#E50914",
       background: "#B71C1C",
       iconAndBadge: "#E50914",
     },
     informative: {
       text: "#64B5F6",
-      icon: "#42A5F5",
       border: "#42A5F5",
       background: "#1976D2",
       iconAndBadge: "#42A5F5",
@@ -69,85 +60,75 @@ export const Netflix = {
     },
   },
   primaryButton: {
-    buttonColor: "#E50914",
-    buttonTextColor: "#FFFFFF",
-    borderRadius: "4px",
-    buttonBorderColor: "transparent",
-    hoverColor: "#CC0000",
-    hoverTextColor: "#FFFFFF",
+    buttonColor: {
+      background: "#E50914",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#CC0000",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
   },
   secondaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#FFFFFF",
-    buttonBorderColor: "#B3B3B3",
-    borderRadius: "4px",
-    hoverColor: "#333333",
-    hoverTextColor: "#FFFFFF",
-  },
-  tertiaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#FFFFFF",
-    borderRadius: "4px",
+    buttonColor: {
+      background: "transparent",
+      border: "#B3B3B3",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#333333",
+      border: "#B3B3B3",
+      label: "#FFFFFF",
+    },
   },
-  inputs: {
-    background: "#222222",
-    borderColor: "#B3B3B3",
-    borderRadius: "4px",
-    textColor: "white",
-    labelColor: "#B3B3B3",
-    borderThickness: "1px",
-    disabledBackground: "#333333",
-    disabledTextColor: "#777777",
-    labelFontSize: "14px",
-    focusBorderColor: "#E50914",
-    hoverBorderColor: "#777777",
+  formFields: {
+    formFieldColor: {
+      background: "#222222",
+      border: "#B3B3B3",
+      inputText: "#B3B3B3",
+    },
+    hoverStateColor: "#777777",
+    selectedStateColor: "#E50914",
   },
 };
 export const Amazon = {
-  font: {
-    font: "Amazon Ember, Arial, sans-serif",
-    textColor: "#2f2f2f",
-    secondaryTextColor: "#565959",
-  },
-  border: {
-    color: "#d5d9d9",
-    radius: "4px",
-    thickness: "1px",
+  main: {
+    brandFont: "Amazon Ember, Arial, sans-serif",
   },
   color: {
-    primaryColor: "#FF9900",
-    background: "#ffffff",
+    backgroundColor: "#ffffff",
+    textColorShades: {
+      mainText: "#2f2f2f",
+      subduedText: "#565959",
+    },
     accentColorShades: {
       text: "#FF9900",
       icon: "#FF9900",
       border: "#FFBF66",
       background: "#FFF4DD",
-      iconAndBadge: "#FF9900",
     },
     success: {
       text: "#198754",
-      icon: "#28A745",
       border: "#BCE8B2",
       background: "#D4EDDA",
       iconAndBadge: "#28A745",
     },
     warning: {
       text: "#856404",
-      icon: "#FFC107",
       border: "#FFEBA2",
       background: "#FFF3CD",
       iconAndBadge: "#FFC107",
     },
     critical: {
       text: "#721C24",
-      icon: "#DC3545",
       border: "#F5C6CB",
       background: "#F8D7DA",
       iconAndBadge: "#DC3545",
     },
     informative: {
       text: "#004085",
-      icon: "#007BFF",
       border: "#B8DAFF",
       background: "#CCE5FF",
       iconAndBadge: "#007BFF",
@@ -161,89 +142,97 @@ export const Amazon = {
     },
   },
   primaryButton: {
-    buttonColor: "#FF9900",
-    buttonTextColor: "#FFFFFF",
-    borderRadius: "7px",
-    buttonBorderColor: "transparent",
-    hoverColor: "#EB9100",
-    hoverTextColor: "#FFFFFF",
+    buttonColor: {
+      background: "#FF9900",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#EB9100",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
   },
   secondaryButton: {
-    buttonColor: "#FFFFFF",
-    buttonTextColor: "#232F3E",
-    buttonBorderColor: "#888C8C",
-    borderRadius: "7px",
-    hoverColor: "#F0F2F2",
-    hoverTextColor: "#232F3E",
-  },
-  tertiaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#007185",
-    borderRadius: "7px",
+    buttonColor: {
+      background: "#FFFFFF",
+      border: "#888C8C",
+      label: "#232F3E",
+    },
+    buttonHoverColor: {
+      background: "#F0F2F2",
+      border: "#888C8C",
+      label: "#232F3E",
+    },
   },
-  inputs: {
-    background: "#FFFFFF",
-    borderColor: "#D5D9D9",
-    borderRadius: "3px",
-    textColor: "#2f2f2f",
-    labelColor: "#565959",
-    borderThickness: "1px",
-    disabledBackground: "#EAEDED",
-    disabledTextColor: "#888C8C",
-    labelFontSize: "14px",
-    focusBorderColor: "#007185",
-    hoverBorderColor: "#A2A2A2",
+  formFields: {
+    formFieldColor: {
+      background: "#FFFFFF",
+      border: "#D5D9D9",
+      inputText: "#2f2f2f",
+    },
+    hoverStateColor: "#A2A2A2",
+    selectedStateColor: "#007185",
   },
 };
 export const Spotify = {
-  font: {
-    textColor: "white",
-  },
   color: {
-    background: "#121212",
+    textColorShades: {
+      mainText: "white",
+      subduedText: "white",
+    },
+    backgroundColor: "#121212",
     accentColorShades: {
-      iconAndBadge: "#1ed760",
+      icon: "#1ed760",
     },
   },
   primaryButton: {
-    buttonColor: "#1ed760",
-    buttonTextColor: "#121212",
-    borderRadius: "30px",
-    buttonBorderColor: "transparent",
-    hoverColor: "#1DB954",
-    hoverTextColor: "#121212",
+    buttonColor: {
+      background: "#1ed760",
+      border: "transparent",
+      label: "#121212",
+    },
+    buttonHoverColor: {
+      background: "#1DB954",
+      border: "transparent",
+      label: "#121212",
+    },
   },
   secondaryButton: {
-    buttonColor: "#191414",
-    buttonTextColor: "#FFFFFF",
-    buttonBorderColor: "#FFFFFF",
-    borderRadius: "30px",
-    hoverColor: "#282828",
-    hoverTextColor: "#121212",
+    buttonColor: {
+      background: "#191414",
+      border: "#FFFFFF",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#282828",
+      border: "#FFFFFF",
+      label: "#121212",
+    },
   },
-  inputs: {
-    background: "#121212",
-    borderColor: "#7c7c7c",
-    borderThickness: "1px",
-    borderRadius: "30px",
-    textColor: "#fff",
-    focusBorderColor: "white",
-    labelColor: "white",
-    hoverBorderColor: "white",
-    labelFontSize: "18px",
-    disabledTextColor: "white",
-    disabledBackground: "#303030",
+  formFields: {
+    formFieldColor: {
+      background: "#121212",
+      border: "#7c7c7c",
+      inputText: "#fff",
+    },
+    hoverStateColor: "white",
+    selectedStateColor: "white",
   },
 };
 export const Google = {
+  main: { brandColor: "#4285F4", brandFont: "Roboto, Arial, sans-serif" },
   color: {
-    primaryColor: "#4285F4",
-    background: "#FFFFFF",
+    textColorShades: {
+      mainText: "#212124",
+      subduedText: "#5F6368",
+    },
+    backgroundColor: "#FFFFFF",
     accentColorShades: {
       text: "#1A73E8",
       border: "#8AB4F8",
       background: "#E8F0FE",
-      iconAndBadge: "#4285F4",
+      icon: "#4285F4",
     },
     success: {
       text: "#044e1d",
@@ -276,48 +265,37 @@ export const Google = {
       iconAndBadge: "#5F6368",
     },
   },
-  border: {
-    color: "#DADCE0",
-    radius: "8px",
-    thickness: "1px",
-  },
-  font: {
-    font: "Roboto, Arial, sans-serif",
-    textColor: "#212124",
-    secondaryTextColor: "#5F6368",
-  },
   primaryButton: {
-    buttonColor: "#4285F4",
-    buttonTextColor: "#FFFFFF",
-    borderRadius: "4px",
-    buttonBorderColor: "transparent",
-    hoverColor: "#3C7CD1",
-    hoverTextColor: "#FFFFFF",
+    buttonColor: {
+      background: "#4285F4",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#3C7CD1",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
   },
   secondaryButton: {
-    buttonColor: "#FFFFFF",
-    buttonTextColor: "#4285F4",
-    buttonBorderColor: "#DADCE0",
-    borderRadius: "4px",
-    hoverColor: "#E8F0FE",
-    hoverTextColor: "#4285F4",
-  },
-  tertiaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#4285F4",
-    borderRadius: "4px",
+    buttonColor: {
+      background: "#FFFFFF",
+      border: "#DADCE0",
+      label: "#4285F4",
+    },
+    buttonHoverColor: {
+      background: "#E8F0FE",
+      border: "#DADCE0",
+      label: "#4285F4",
+    },
   },
-  inputs: {
-    background: "#FFFFFF",
-    borderColor: "#DADCE0",
-    borderThickness: "1px",
-    borderRadius: "8px",
-    textColor: "#202124",
-    focusBorderColor: "#4285F4",
-    labelColor: "#5F6368",
-    hoverBorderColor: "#9AA0A6",
-    labelFontSize: "12px",
-    disabledTextColor: "#9AA0A6",
-    disabledBackground: "#F1F3F4",
+  formFields: {
+    formFieldColor: {
+      background: "#FFFFFF",
+      border: "#DADCE0",
+      inputText: "#202124",
+    },
+    hoverStateColor: "9AA0A6",
+    selectedStateColor: "4285F4",
   },
 };