@saasquatch/mint-components 1.11.0-7 → 1.11.0

package/dist/cjs/{ShadowViewAddon-ba87315e.js → ShadowViewAddon-c3e91cee.js}

@@ -1,24 +1,23 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const global = require('./global-0e1b8019.js');
-const index_module = require('./index.module-2d82a984.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const global = require('./global-02e50f09.js');
+const index_module = require('./index.module-df530553.js');
 const cjs = require('./cjs-1066ec21.js');
 const mixins = require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
-const useChildElements = require('./useChildElements-079a23aa.js');
-const luxon = require('./luxon-20eafbd9.js');
-const index$1 = require('./index-56d1fa5b.js');
+const useChildElements = require('./useChildElements-e0d44916.js');
+const luxon = require('./luxon-05098e19.js');
 const utils = require('./utils-6847bc06.js');
 const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
-const index$2 = require('./index-8c6255f5.js');
-const utilities = require('./utilities-a4072d5b.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-5fb2ad49.js');
+const index$1 = require('./index-8c6255f5.js');
+const utilities = require('./utilities-cec9dd36.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-990a85a3.js');
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
-  twitter: { color: "#1da1f2", text: "#fff", icon: "twitter" },
+  twitter: { color: "#000000", text: "#fff", icon: "twitter-x" },
   email: { color: "#666666", text: "#fff", icon: "envelope" },
   direct: { color: "var(--sl-color-primary-500)", text: "#fff", icon: "send" },
   linkedin: { color: "#0077b5", text: "#fff", icon: "linkedin" },
@@ -112,9 +111,10 @@ const style$1 = {
       fontWeight: "var(--sl-font-weight-normal)",
     },
     "& .ellipses": {
-      textAlign: "center",
+      textAlign: "left",
       padding: "0",
       color: "var(--sl-color-neutral-500)",
+      paddingLeft: "25%",
     },
     "& .highlight": {
       background: "var(--sl-color-primary-50)",
@@ -130,6 +130,12 @@ const style$1 = {
       width: "auto",
       whiteSpace: "nowrap",
     },
+    "& .Rank": {
+      whiteSpace: "nowrap",
+    },
+    "& .fullWidth": {
+      width: "100%",
+    },
   },
 };
 const sheet$1 = JSS.createStyleSheet(style$1);
@@ -140,58 +146,76 @@ const vanillaStyle = `
   }
 `;
 function LeaderboardView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _a, _b, _c;
   const { states, data, elements } = props;
   const { styles } = states;
-  if (states.loading)
-    return (index.h("div", { class: sheet$1.classes.Leaderboard },
+  if (states.isEssentials) {
+    return (index.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" }));
+  }
+  if (states.loading) {
+    return (index.h("div", { class: sheet$1.classes.Leaderboard, style: { width: styles.width || "100%" } },
       index.h("style", { type: "text/css" },
         styleString$1,
         vanillaStyle),
-      elements.loadingstate));
-  if (states.isEssentials)
-    return elements.essentials;
+      index.h("table", null, [...Array(10)].map(() => {
+        return (index.h("tr", null,
+          index.h("td", null,
+            index.h("sl-skeleton", null))));
+      }))));
+  }
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
-  return (index.h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-base" },
+  const getUsersName = (user) => {
+    if (!user.firstName && !user.lastInitial)
+      return styles.anonymousUser;
+    const { firstName, lastInitial } = user;
+    if (firstName && lastInitial)
+      return `${firstName} ${lastInitial}`;
+    if (firstName || lastInitial)
+      return firstName || lastInitial;
+    return styles.anonymousUser;
+  };
+  const getRankCellText = (userRank, isViewingUsersRow) => {
+    if (!userRank) {
+      return styles.hideNames ? `${styles.viewingUserText}` : "-";
+    }
+    const viewingUserText = ` - ${styles.viewingUserText}`;
+    return styles.rankSuffix
+      ? global.intl.formatMessage({
+        id: "rank",
+        defaultMessage: styles.rankSuffix,
+      }, {
+        rank: userRank,
+      }) + `${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`
+      : `${userRank} ${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`;
+  };
+  return (index.h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
     index.h("style", { type: "text/css" },
       styleString$1,
       vanillaStyle),
-    index.h("div", null, "Leaderboards"),
     index.h("table", { part: "sqm-table" },
       index.h("tr", null,
-        styles.showRank && index.h("th", { class: "Rank" }, styles.rankheading),
-        index.h("th", { class: "User" }, styles.usersheading),
+        styles.showRank && (index.h("th", { class: `Rank ${styles.hideNames ? "fullWidth" : ""}` }, styles.rankheading)),
+        !styles.hideNames && index.h("th", { class: "User" }, styles.usersheading),
         index.h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
       _a.map((user) => {
         var _a, _b;
         if (user.rowNumber === ((_a = data.viewerRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
           userSeenFlag = true;
-        return (index.h("tr", { class: !styles.hideViewer &&
-            user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber)
-            ? "highlight"
-            : "" },
-          styles.showRank && index.h("td", { class: "Rank" }, user.rank),
-          index.h("td", { class: "User" }, user.firstName && user.lastInitial
-            ? user.firstName + " " + user.lastInitial
-            : user.firstName || user.lastInitial
-              ? user.firstName || user.lastInitial
-              : styles.anonymousUser),
+        const isViewingUsersRow = !styles.hideViewer && user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber);
+        return (index.h("tr", { class: isViewingUsersRow ? "highlight" : "" },
+          styles.showRank && (index.h("td", { class: "Rank" }, getRankCellText(user.rank, isViewingUsersRow))),
+          !styles.hideNames && index.h("td", { class: "User" }, getUsersName(user)),
           index.h("td", { class: "Score" }, user.textValue)));
       }),
       !userSeenFlag && !styles.hideViewer && (index.h("tr", null,
         index.h("td", { colSpan: 100, class: "ellipses" },
           index.h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
       !userSeenFlag && !styles.hideViewer && (index.h("tr", { class: "highlight" },
-        styles.showRank && (index.h("td", { class: "Rank" }, ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
-        index.h("td", { class: "User" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.viewerRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
-          ? ((_e = data.viewerRank) === null || _e === void 0 ? void 0 : _e.firstName) +
-            " " + ((_f = data.viewerRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
-          : ((_g = data.viewerRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.viewerRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
-            ? ((_j = data.viewerRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.viewerRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
-            : styles.anonymousUser),
-        index.h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.textValue) || "0"))))));
+        styles.showRank && (index.h("td", { class: "Rank" }, getRankCellText((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank, true))),
+        !styles.hideNames && (index.h("td", { class: "User" }, getUsersName(data.viewerRank || {}))),
+        index.h("td", { class: "Score" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.textValue) || "0"))))));
 }
 
 const style$2 = {
@@ -404,7 +428,7 @@ const EditProfileView = (props) => {
       }, exportparts: "base: primarybutton-base" }, text.editprofiletext)));
 };
 
-const MessageLinkQuery = index$1.dist.gql `
+const MessageLinkQuery = index_module.dist.gql `
   query ($programId: ID, $engagementMedium: UserEngagementMedium!) {
     user: viewer {
       ... on User {
@@ -417,18 +441,18 @@ const MessageLinkQuery = index$1.dist.gql `
     }
   }
 `;
-const WIDGET_ENGAGEMENT_EVENT = index$1.dist.gql `
+const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
   mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
     createUserAnalyticsEvent(eventMeta: $eventMeta)
   }
 `;
 function useShareLink(props) {
   var _a, _b;
-  const { programId = index_module.z() } = props;
-  const user = index_module.K();
-  const engagementMedium = index_module.ne();
-  const { data } = index_module.En(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = index_module.xe(WIDGET_ENGAGEMENT_EVENT);
+  const { programId = index_module.H() } = props;
+  const user = index_module.Q();
+  const engagementMedium = index_module.B();
+  const { data } = index_module.yn(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
   const copyString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -455,7 +479,7 @@ function useShareLink(props) {
   return { ...props, onClick, open, copyString: copyString };
 }
 
-const MessageLinkQuery$1 = index$1.dist.gql `
+const MessageLinkQuery$1 = index_module.dist.gql `
   query (
     $programId: ID
     $engagementMedium: UserEngagementMedium!
@@ -513,15 +537,15 @@ function GenericShare(res, errorText) {
 function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
-  const programId = props.programId ? props.programId : index_module.z();
-  const user = index_module.K();
+  const programId = props.programId ? props.programId : index_module.H();
+  const user = index_module.Q();
   const variables = {
-    engagementMedium: index_module.ne(),
+    engagementMedium: index_module.B(),
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
   // only queries if a programId is available
-  const res = index_module.En(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const res = index_module.yn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   const directLink = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink;
   const environment = index_module.getEnvironmentSDK();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
@@ -545,7 +569,7 @@ function useShareButton(props) {
 const debug = stencilHooks_module.browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = index_module.En(query, variables);
+  const res = index_module.yn(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
@@ -564,7 +588,7 @@ _, status) => {
       ? { dateConverted_exists: false }
       : {};
   const queryFilter = { ...programFilter, ...convertedFilter };
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query ($queryFilter: ReferralFilterInput) {
         viewer {
           ... on User {
@@ -586,7 +610,7 @@ const programGoalsQuery = (programId, locale, metricType, goalId) => {
   // Confirm this behaviour
   if (programId === "classic")
     return null;
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query {
         viewer {
           ... on User {
@@ -609,7 +633,7 @@ const programGoalsQuery = (programId, locale, metricType, goalId) => {
   });
 };
 const customFieldsQuery = (_programId, locale, fieldName, goalId) => {
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query {
         viewer {
           ... on User {
@@ -634,7 +658,7 @@ const referralsMonthQuery = (programId) => {
     ...programFilter,
     dateReferralStarted_timeframe: "this_month",
   };
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query ($filter: ReferralFilterInput) {
         viewer {
           ... on User {
@@ -660,7 +684,7 @@ const referralsWeekQuery = (programId) => {
     ...programFilter,
     dateReferralStarted_timeframe: "this_week",
   };
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query ($filter: ReferralFilterInput) {
         viewer {
           ... on User {
@@ -681,7 +705,7 @@ const referralsWeekQuery = (programId) => {
 const rewardsCountQuery = (programId, 
 // locale
 _, global = "") => {
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query ($programId: ID) {
         viewer {
           ... on User {
@@ -705,7 +729,7 @@ const rewardsCountFilteredQuery = (programId,
 // locale
 _, type, unit, status, global = "") => {
   const statusFilter = status ? { status } : null;
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query (
         $programId: ID
         $unit: String
@@ -744,7 +768,7 @@ const integrationRewardsCountFilteredQuery = (programId,
 // locale
 _, status, global = "") => {
   const statusFilter = status ? { status } : null;
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query ($programId: ID, $statusFilter: RewardStatusFilterInput) {
         viewer {
           ... on User {
@@ -774,7 +798,7 @@ _, status, global = "") => {
 const rewardsMonthQuery = (programId, 
 // locale
 _, global = "") => {
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query ($programId: ID) {
         viewer {
           ... on User {
@@ -802,7 +826,7 @@ _, global = "") => {
 const rewardsWeekQuery = (programId, 
 // locale
 _, global = "") => {
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query ($programId: ID) {
         viewer {
           ... on User {
@@ -828,7 +852,7 @@ _, global = "") => {
   });
 };
 const rewardsPendingQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query (
         $programId: ID
         $type: RewardType
@@ -871,7 +895,7 @@ const rewardsPendingQuery = (programId, locale, type, unit, global = "") => {
   });
 };
 const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query (
         $programId: ID
         $type: RewardType
@@ -914,7 +938,7 @@ const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
   });
 };
 const rewardsRedeemedWeekQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query ($programId: ID, $type: RewardType, $unit: String!) {
         viewer: viewer {
           ... on User {
@@ -956,7 +980,7 @@ const rewardsRedeemedWeekQuery = (programId, locale, type, unit, global = "") =>
           locale: $locale
           formatType: UNIT_FORMATTED
         )}`;
-      const result = index_module.En(query, {
+      const result = index_module.yn(query, {
         value: redeemedTotal,
         unit,
         locale,
@@ -973,7 +997,7 @@ const rewardsRedeemedWeekQuery = (programId, locale, type, unit, global = "") =>
   });
 };
 const rewardsRedeemedMonthQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query ($programId: ID, $type: RewardType, $unit: String!) {
         viewer: viewer {
           ... on User {
@@ -1015,7 +1039,7 @@ const rewardsRedeemedMonthQuery = (programId, locale, type, unit, global = "") =
           locale: $locale
           formatType: UNIT_FORMATTED
         )}`;
-      const result = index_module.En(query, {
+      const result = index_module.yn(query, {
         value: redeemedTotal,
         unit,
         locale,
@@ -1032,7 +1056,7 @@ const rewardsRedeemedMonthQuery = (programId, locale, type, unit, global = "") =
   });
 };
 const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query (
         $programId: ID
         $type: RewardType
@@ -1075,7 +1099,7 @@ const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
   });
 };
 const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query (
         $programId: ID
         $type: RewardType
@@ -1123,7 +1147,7 @@ const parseRewardValueFormat = {
 };
 const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValue", global = "") => {
   var _a;
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query (
         $programId: ID
         $type: RewardType!
@@ -1168,7 +1192,7 @@ const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValu
   });
 };
 const trafficQuery = () => {
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query traffic {
         viewer: viewer {
           ... on User {
@@ -1204,7 +1228,7 @@ const userStatsQuery = (_programId, _locale, statId) => {
     referredRevenue: false,
     ...statArg,
   };
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query userStat(
         $traffic: Boolean!
         $referrals: Boolean!
@@ -1243,7 +1267,7 @@ const userStatsQuery = (_programId, _locale, statId) => {
   });
 };
 const payoutBalanceQuery = () => {
-  return debugQuery(index$1.dist.gql `
+  return debugQuery(index_module.dist.gql `
       query payoutBalance {
         viewer: viewer {
           ... on User {
@@ -1408,14 +1432,14 @@ const StatPaths = [
     route: "/(payoutBalance)",
   },
 ];
-const StatPatterns = StatPaths.map((pattern) => index$2.pathToRegexp(pattern.route));
+const StatPatterns = StatPaths.map((pattern) => index$1.pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment, programId = index_module.z(), } = props;
+  const { statType, flexReverse, alignment, programId = index_module.H(), } = props;
   // triggers a re-render if the label is manually changed
   useChildElements.useChildElements();
-  const locale = index_module.Q();
-  const userIdent = index_module.K();
+  const locale = index_module.L();
+  const userIdent = index_module.Q();
   const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
@@ -1434,7 +1458,7 @@ function useBigStat(props) {
   const statPath = StatPaths.find((pattern) => pattern.name === queryName);
   // Get a list all possible keys in path
   const keys = [];
-  const regex = index$2.pathToRegexp(statPath === null || statPath === void 0 ? void 0 : statPath.route, keys, {
+  const regex = index$1.pathToRegexp(statPath === null || statPath === void 0 ? void 0 : statPath.route, keys, {
     strict: false,
     sensitive: false,
     end: true,

package/dist/cjs/{email-registration-view-5170d9f1.js → email-registration-view-248652bb.js}

@@ -45,7 +45,7 @@ function EmailRegistrationView(props) {
       index.h("div", { part: "erroralert-text" }, error)));
   };
   const emailValidationRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-  return (index.h("div", { class: sheet.classes.Wrapper, style: {
+  return (index.h("div", { part: "sqm-base", class: sheet.classes.Wrapper, style: {
       border: `${content.hideBorder ? "none" : "1px solid #eaeaea"}`,
       backgroundColor: content.backgroundColor,
       "padding-top": `var(--sl-spacing-${content.paddingTop})`,