@saasquatch/mint-components 1.6.11-0 → 1.6.12

package/dist/esm/sqm-big-stat_39.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
 import { m as h, f as useEffect, j as useState, o as d, k as useRef, b as browser, i as useReducer } from './stencil-hooks.module-14b87f98.js';
-import { i as intl } from './global-8c190dcb.js';
+import { i as intl } from './global-85c8c43e.js';
 import { i as isDemo, V, d as dist, L, O, I as Ie, b as mn, T, W, a as dn, p as pn, k as xe, S as Se, l as ke, f as useCallback, n as _e, v as vn } from './index.module-c549b2c8.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
@@ -10,11 +10,11 @@ import { a as useRequestRerender } from './re-render-3211b893.js';
 import { u as useChildElements } from './useChildElements-a97f3864.js';
 import './luxon-f01e85fe.js';
 import { g as getProps, a as getMissingProps, s as sanitizeUrlPath } from './utils-334c1e34.js';
-import './sqm-text-span-view-8d140661.js';
+import './sqm-text-span-view-1eaedc4d.js';
 import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-b1f730bd.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { b as useDemoBigStat, U as useBigStat, B as BigStatView, O as autoColorScaleCss, K as CardFeedView, j as CheckboxFieldView, M as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, W as demoRewardExchange, k as RewardExchangeView, X as pathToRegexp, a as useShareButton, S as ShareButtonView, C as CopyTextView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-8b1e3c6b.js';
-import './sqm-portal-container-view-ab89c6cc.js';
+import { b as useDemoBigStat, U as useBigStat, B as BigStatView, O as autoColorScaleCss, K as CardFeedView, j as CheckboxFieldView, M as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, W as demoRewardExchange, k as RewardExchangeView, X as pathToRegexp, a as useShareButton, S as ShareButtonView, C as CopyTextView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-dbb5a208.js';
+import './sqm-portal-container-view-b7b10841.js';
 
 const BigStat = class {
   constructor(hostRef) {
@@ -84,27 +84,27 @@ const BrandComponent = class {
       return () => document.head.removeChild(sheet);
     }, [sanitizedFont]);
     const font = sanitizedFont !== null && sanitizedFont !== void 0 ? sanitizedFont : "";
-    return (h$1(Host, null, h$1("style", null, `
-
-          :host{
-            display: contents;
-          }
-          /* 
-          Selects any element placed inside a slot
-           - resets css variable inheritence for fonts
-          
-          */
-          ::slotted(*) {
-            --sl-font-sans: "${font}", arial;
-            --sl-input-font-family: "${font}", arial;
-            --sl-tooltip-font-family: "${font}", arial;
-            font-family:  "${font}", arial;
-			
-            ${css}
-
-            --sl-focus-ring-color-primary: var(--sl-color-primary-100);
-            --sl-input-border-color-focus: var(--sl-color-primary-500);
-            --sl-color-primary-hue: var(--sl-color-primary-500);
+    return (h$1(Host, null, h$1("style", null, `
+
+          :host{
+            display: contents;
+          }
+          /* 
+          Selects any element placed inside a slot
+           - resets css variable inheritence for fonts
+          
+          */
+          ::slotted(*) {
+            --sl-font-sans: "${font}", arial;
+            --sl-input-font-family: "${font}", arial;
+            --sl-tooltip-font-family: "${font}", arial;
+            font-family:  "${font}", arial;
+			
+            ${css}
+
+            --sl-focus-ring-color-primary: var(--sl-color-primary-100);
+            --sl-input-border-color-focus: var(--sl-color-primary-500);
+            --sl-color-primary-hue: var(--sl-color-primary-500);
           }`), h$1("slot", null)));
   }
 };
@@ -264,35 +264,35 @@ function useCheckboxFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const FuelTankRewardsQuery = dist.gql `
-  query fuelTankRewardsQuery($programId: ID!) {
-    user: viewer {
-      ... on User {
-        instantAccessRewards(
-          filter: { type_eq: FUELTANK, programId_eq: $programId }
-        ) {
-          data {
-            fuelTankCode
-            fuelTankType
-            statuses
-            dateGiven
-            dateExpires
-            dateRedeemed
-            dateCancelled
-            dateScheduledFor
-            datePendingForUnhandledError
-          }
-          count
-          totalCount
-        }
-      }
-    }
-  }
+const FuelTankRewardsQuery = dist.gql `
+  query fuelTankRewardsQuery($programId: ID!) {
+    user: viewer {
+      ... on User {
+        instantAccessRewards(
+          filter: { type_eq: FUELTANK, programId_eq: $programId }
+        ) {
+          data {
+            fuelTankCode
+            fuelTankType
+            statuses
+            dateGiven
+            dateExpires
+            dateRedeemed
+            dateCancelled
+            dateScheduledFor
+            datePendingForUnhandledError
+          }
+          count
+          totalCount
+        }
+      }
+    }
+  }
 `;
-const WIDGET_ENGAGEMENT_EVENT = dist.gql `
-  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
-    createUserAnalyticsEvent(eventMeta: $eventMeta)
-  }
+const WIDGET_ENGAGEMENT_EVENT = dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
 `;
 function useCouponCode(props) {
   var _a, _b, _c;
@@ -537,24 +537,24 @@ function DividedLayoutView(props, children) {
       },
     },
   };
-  const hostStyle = `
-    display: flex;
-    flex: 1;
-    box-sizing: border-box;
-    flex-direction: ${props.direction};
-    background-color: var(--sqm-content-background);
-    overflow-x: clip;
+  const hostStyle = `
+    display: flex;
+    flex: 1;
+    box-sizing: border-box;
+    flex-direction: ${props.direction};
+    background-color: var(--sqm-content-background);
+    overflow-x: clip;
     ${props.direction === "column"
     ? "width: 100%; max-width: var(--sqm-portal-main-width);"
-    : ""}
+    : ""}
   `;
-  const vanillaStyle = `
-  :host{
-    ${hostStyle}
-  }
-  sqm-divided-layout {
-    ${hostStyle}
-  }
+  const vanillaStyle = `
+  :host{
+    ${hostStyle}
+  }
+  sqm-divided-layout {
+    ${hostStyle}
+  }
   `;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
@@ -638,39 +638,39 @@ function useDropdownFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const GET_USER = dist.gql `
-  query {
-    viewer {
-      ... on User {
-        id
-        accountId
-        firstName
-        lastName
-        email
-        countryCode
-      }
-    }
-  }
+const GET_USER = dist.gql `
+  query {
+    viewer {
+      ... on User {
+        id
+        accountId
+        firstName
+        lastName
+        email
+        countryCode
+      }
+    }
+  }
 `;
-const UPSERT_USER = dist.gql `
-  mutation (
-    $id: String!
-    $accountId: String!
-    $firstName: String!
-    $lastName: String!
-  ) {
-    upsertUser(
-      userInput: {
-        id: $id
-        accountId: $accountId
-        firstName: $firstName
-        lastName: $lastName
-      }
-    ) {
-      firstName
-      lastName
-    }
-  }
+const UPSERT_USER = dist.gql `
+  mutation (
+    $id: String!
+    $accountId: String!
+    $firstName: String!
+    $lastName: String!
+  ) {
+    upsertUser(
+      userInput: {
+        id: $id
+        accountId: $accountId
+        firstName: $firstName
+        lastName: $lastName
+      }
+    ) {
+      firstName
+      lastName
+    }
+  }
 `;
 // view doesn't tolerate undefined, even when we're loading
 const defaultFormState = {
@@ -1019,9 +1019,9 @@ function HeroImageView(props, children) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-  :host{
-    display: block;
+  const vanillaStyle = `
+  :host{
+    display: block;
   }`;
   return (h$1("div", { class: sheet.classes.Container, part: "sqm-base" },
     h$1("style", { type: "text/css" },
@@ -1183,47 +1183,47 @@ function useInputFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const GET_LEADERBOARD = dist.gql `
-  query (
-    $type: String!
-    $filter: UserLeaderboardFilterInput
-    $locale: RSLocale
-    $limit: Int!
-  ) {
-    userLeaderboard(type: $type, filter: $filter) {
-      dateModified
-      rows(limit: $limit) {
-        textValue(locale: $locale)
-        firstName
-        lastInitial
-        rank {
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
+const GET_LEADERBOARD = dist.gql `
+  query (
+    $type: String!
+    $filter: UserLeaderboardFilterInput
+    $locale: RSLocale
+    $limit: Int!
+  ) {
+    userLeaderboard(type: $type, filter: $filter) {
+      dateModified
+      rows(limit: $limit) {
+        textValue(locale: $locale)
+        firstName
+        lastInitial
+        rank {
+          rank
+          denseRank
+          rowNumber
+        }
+      }
+    }
+  }
 `;
-const GET_RANK = dist.gql `
-  query (
-    $type: String!
-    $filter: UserLeaderboardFilterInput
-    $locale: RSLocale
-  ) {
-    viewer {
-      ... on User {
-        firstName
-        lastInitial
-        leaderboardRank(type: $type, filter: $filter) {
-          textValue(locale: $locale)
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
+const GET_RANK = dist.gql `
+  query (
+    $type: String!
+    $filter: UserLeaderboardFilterInput
+    $locale: RSLocale
+  ) {
+    viewer {
+      ... on User {
+        firstName
+        lastInitial
+        leaderboardRank(type: $type, filter: $filter) {
+          textValue(locale: $locale)
+          rank
+          denseRank
+          rowNumber
+        }
+      }
+    }
+  }
 `;
 function useLeaderboard(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -1425,10 +1425,10 @@ const style$1 = {
     color: "inherit",
   },
 };
-const vanillaStyle = `
-:host{
-  display: inline;   
-}
+const vanillaStyle = `
+:host{
+  display: inline;   
+}
 `;
 const sheet$1 = createStyleSheet(style$1);
 const styleString$1 = sheet$1.toString();
@@ -2242,15 +2242,15 @@ function ProgramExplainerView(props, children) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-  ::slotted(*){
-    display: flex;
-    width: 100%;
-  }
-  @media (max-width: 499px) {
-    ::slotted(*){
-      display: block;
-    }
+  const vanillaStyle = `
+  ::slotted(*){
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    ::slotted(*){
+      display: block;
+    }
   }`;
   return (h$1("div", { class: sheet.classes.Container, part: "sqm-base" },
     h$1("style", { type: "text/css" },
@@ -2344,8 +2344,8 @@ const ProgramExplainerStep = class {
   }
 };
 
-const debug = browser("sq:useProgramMenu");
-const UPDATE_PROGRAM_EVENT = "sq:update-program-id";
+const debug = browser('sq:useProgramMenu');
+const UPDATE_PROGRAM_EVENT = 'sq:update-program-id';
 function useProgramMenu(props) {
   const programId = O();
   const host = V();
@@ -2354,7 +2354,7 @@ function useProgramMenu(props) {
   const [, rerender] = dn();
   useEffect(() => {
     var _a;
-    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => {
+    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('sl-select', (e) => {
       const programId = e.detail.item.value;
       // setProgramId(programId);
       host.dispatchEvent(new CustomEvent(UPDATE_PROGRAM_EVENT, {
@@ -2418,10 +2418,10 @@ const style$2 = {
 };
 const sheet$2 = createStyleSheet(style$2);
 const styleString$2 = sheet$2.toString();
-const vanillaStyle$1 = `
-    :host{
-      display: block;   
-    }
+const vanillaStyle$1 = `
+    :host{
+      display: block;   
+    }
   `;
 function ReferralCardView(props) {
   return (h$1("div", { part: "sqm-base", class: sheet$2.classes.Container, style: {
@@ -2518,14 +2518,14 @@ const ReferralCard = class {
   }
 };
 
-const GET_USER_DETAILS = dist.gql `
-  query getUser($programId: ID) {
-    viewer {
-      ... on User {
-        referralCode(programId: $programId)
-      }
-    }
-  }
+const GET_USER_DETAILS = dist.gql `
+  query getUser($programId: ID) {
+    viewer {
+      ... on User {
+        referralCode(programId: $programId)
+      }
+    }
+  }
 `;
 function useReferralIframe(props) {
   var _a;
@@ -3189,58 +3189,58 @@ var module = {};
 
 const confetti = module.exports;
 
-const GET_EXCHANGE_LIST = dist.gql `
-  query getExchangeList {
-    viewer {
-      ... on User {
-        visibleRewardExchangeItems(limit: 20, offset: 0) {
-          data {
-            key
-            name
-            description
-            imageUrl
-            available
-            unavailableReasonCode
-            ruleType
-            sourceUnit
-            sourceValue
-            prettySourceValue
-            sourceMinValue
-            prettySourceMinValue
-            sourceMaxValue
-            prettySourceMaxValue
-            destinationMinValue
-            prettyDestinationMinValue
-            destinationMaxValue
-            prettyDestinationMaxValue
-            globalRewardKey
-            destinationUnit
-            steps {
-              sourceValue
-              prettySourceValue
-              destinationValue
-              prettyDestinationValue
-              available
-              globalRewardKey
-              unavailableReasonCode
-              rewardInput
-            }
-          }
-          totalCount
-        }
-      }
-    }
-  }
+const GET_EXCHANGE_LIST = dist.gql `
+  query getExchangeList {
+    viewer {
+      ... on User {
+        visibleRewardExchangeItems(limit: 20, offset: 0) {
+          data {
+            key
+            name
+            description
+            imageUrl
+            available
+            unavailableReasonCode
+            ruleType
+            sourceUnit
+            sourceValue
+            prettySourceValue
+            sourceMinValue
+            prettySourceMinValue
+            sourceMaxValue
+            prettySourceMaxValue
+            destinationMinValue
+            prettyDestinationMinValue
+            destinationMaxValue
+            prettyDestinationMaxValue
+            globalRewardKey
+            destinationUnit
+            steps {
+              sourceValue
+              prettySourceValue
+              destinationValue
+              prettyDestinationValue
+              available
+              globalRewardKey
+              unavailableReasonCode
+              rewardInput
+            }
+          }
+          totalCount
+        }
+      }
+    }
+  }
 `;
-const EXCHANGE = dist.gql `
-  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
-    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
-      reward {
-        id
-        fuelTankCode
-      }
-    }
-  }
+const EXCHANGE = dist.gql `
+  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
+    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
+      reward {
+        id
+        fuelTankCode
+      }
+    }
+  }
 `;
 function useRewardExchangeList(props) {
   var _a, _b, _c, _d, _e$1;
@@ -3744,19 +3744,19 @@ const Scroll = class {
     };
     const sheet = createStyleSheet(style);
     const styleString = sheet.toString();
-    const vanillaStyle = `
-		:host{
-			display: contents;
-		}
+    const vanillaStyle = `
+		:host{
+			display: contents;
+		}
 		${this.mobile &&
-      `
-		@media only screen and (max-width: 499px) {
-			:host {
-				display: block;
-				width: 100%;
-			}
-		}
-	  `}
+      `
+		@media only screen and (max-width: 499px) {
+			:host {
+				display: block;
+				width: 100%;
+			}
+		}
+	  `}
 	`;
     let classStack = "";
     if (this.outline && this.buttonType != "default")
@@ -3821,19 +3821,19 @@ function useDemoShareButton(props) {
 }
 ShareButton.style = sqmShareButtonCss;
 
-const MessageLinkQuery = dist.gql `
-  query ($programId: ID) {
-    user: viewer {
-      ... on User {
-        referralCode(programId: $programId)
-      }
-    }
-  }
+const MessageLinkQuery = dist.gql `
+  query ($programId: ID) {
+    user: viewer {
+      ... on User {
+        referralCode(programId: $programId)
+      }
+    }
+  }
 `;
-const WIDGET_ENGAGEMENT_EVENT$1 = dist.gql `
-  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
-    createUserAnalyticsEvent(eventMeta: $eventMeta)
-  }
+const WIDGET_ENGAGEMENT_EVENT$1 = dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
 `;
 function useShareCode(props) {
   var _a, _b;
@@ -4058,12 +4058,12 @@ const TableRow = class {
   }
 };
 
-const SEND_EVENT = dist.gql `
-  mutation taskCardEvent($userEventInput: UserEventInput!) {
-    logUserEvent(userEventInput: $userEventInput) {
-      userId
-    }
-  }
+const SEND_EVENT = dist.gql `
+  mutation taskCardEvent($userEventInput: UserEventInput!) {
+    logUserEvent(userEventInput: $userEventInput) {
+      userId
+    }
+  }
 `;
 function useTaskCard(props) {
   const user = L();
@@ -4256,14 +4256,14 @@ const Timeline = class {
         // incase child is not sqm-timeline-entry
       }
     });
-    const vanillaStyle = `
-		:host{
-			display: block;   
-		}
-
-		::slotted(*:not(:only-child):not(:last-child)) {
-			margin-bottom: var(--sl-spacing-xx-large);
-		}
+    const vanillaStyle = `
+		:host{
+			display: block;   
+		}
+
+		::slotted(*:not(:only-child):not(:last-child)) {
+			margin-bottom: var(--sl-spacing-xx-large);
+		}
 	`;
     return (h$1("div", null, h$1("style", { type: "text/css" }, vanillaStyle), h$1("slot", null)));
   }
@@ -4322,14 +4322,14 @@ const style$3 = {
 };
 const sheet$3 = createStyleSheet(style$3);
 const styleString$3 = sheet$3.toString();
-const vanillaStyle$2 = `
-	:host{
-		display: block; 
-	}
-
-	:host(:not(:last-of-type)) .line {
-		display: block; 
-	}
+const vanillaStyle$2 = `
+	:host{
+		display: block; 
+	}
+
+	:host(:not(:last-of-type)) .line {
+		display: block; 
+	}
 	`;
 function TimelineEntryView(props) {
   var _a;
@@ -4373,15 +4373,15 @@ function UserNameView(props) {
   return h$1(Host, null, props.loading ? props.loadingText : props.username);
 }
 
-const GET_USER_NAME = dist.gql `
-  query getUserName {
-    viewer {
-      ... on User {
-        firstName
-        lastName
-      }
-    }
-  }
+const GET_USER_NAME = dist.gql `
+  query getUserName {
+    viewer {
+      ... on User {
+        firstName
+        lastName
+      }
+    }
+  }
 `;
 function useUserName(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;