@saasquatch/mint-components 1.6.6-2 → 1.6.6-4

package/dist/collection/components/sqm-reward-exchange-list/useRewardExchangeList.js

@@ -2,58 +2,58 @@ import { useUserIdentity, useQuery, useMutation, useRefreshDispatcher, } from "@
 import { gql } from "graphql-request";
 import { useEffect, useReducer, useRef, useState, } from "@saasquatch/universal-hooks";
 import confetti from "canvas-confetti";
-const GET_EXCHANGE_LIST = 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 = 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 = gql `
-  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
-    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
-      reward {
-        id
-        fuelTankCode
-      }
-    }
-  }
+const EXCHANGE = gql `
+  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
+    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
+      reward {
+        id
+        fuelTankCode
+      }
+    }
+  }
 `;
 export function useRewardExchangeList(props) {
   var _a, _b, _c, _d, _e;

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

@@ -79,7 +79,7 @@ export class RewardTableDateColumn {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"dateGiven\",\r\n\"dateExpires\",\r\n\"dateCancelled\",\r\n\"dateRedeemed\",\r\n\"dateScheduledFor\"]",
+            "text": "[\"dateGiven\",\n\"dateExpires\",\n\"dateCancelled\",\n\"dateRedeemed\",\n\"dateScheduledFor\"]",
             "name": "uiEnum"
           }, {
             "text": "[\"Date Given\", \"Date Expires\", \"Date Cancelled\", \"Date Redeemed\", \"Date Scheduled For\"]",

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

@@ -66,7 +66,7 @@ export class RewardsTable {
             "text": "programSelector",
             "name": "uiWidget"
           }],
-        "text": "Filters to only show rewards in this program. Will default to filtering by the program context where\r\nthis table lives. If no program ID is set or provided by context, then shows all rewards from all programs."
+        "text": "Filters to only show rewards in this program. Will default to filtering by the program context where\nthis table lives. If no program ID is set or provided by context, then shows all rewards from all programs."
       },
       "attribute": "program-id",
       "reflect": false
@@ -222,7 +222,7 @@ export class RewardsTable {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DemoData<GenericTableViewProps> & {\r\n    mockData?: { data: Referral[] };\r\n  }",
+        "original": "DemoData<GenericTableViewProps> & {\n    mockData?: { data: Referral[] };\n  }",
         "resolved": "Partial<Pick<GenericTableViewProps, \"states\" | \"data\" | \"elements\">> & { mockData?: { data: Referral[]; }; }",
         "references": {
           "DemoData": {

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

@@ -8,109 +8,109 @@ 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 `
-  query getRewards(
-    $limit: Int!
-    $offset: Int!
-    $rewardFilter: RewardFilterInput
-    $locale: RSLocale
-  ) {
-    viewer {
-      ... on User {
-        id
-        rewards(
-          limit: $limit
-          offset: $offset
-          filter: $rewardFilter
-          sortBy: { field: "dateCreated", order: DESC }
-        ) {
-          totalCount
-          count
-          data {
-            meta {
-              status
-              integration {
-                name
-              }
-              message
-              customMeta
-            }
-            id
-            type
-            value
-            unit
-            name
-            dateGiven
-            dateCreated
-            dateExpires
-            dateCancelled
-            dateRedeemed
-            dateScheduledFor
-            fuelTankCode
-            fuelTankType
-            currency
-            prettyValue(locale: $locale)
-            prettyValueNumber: prettyValue(
-              formatType: NUMBER_FORMATTED
-              locale: $locale
-            )
-            prettyAvailableNumber: prettyAvailableValue(
-              formatType: NUMBER_FORMATTED
-              locale: $locale
-            )
-            prettyRedeemedNumber: prettyRedeemedCredit(
-              formatType: NUMBER_FORMATTED
-              locale: $locale
-            )
-            programId
-            program {
-              name
-            }
-            statuses
-            pendingReasons
-            globalRewardKey
-            programRewardKey
-            rewardSource
-            prettyRedeemedCredit(locale: $locale)
-            prettyAssignedCredit(locale: $locale)
-            prettyAvailableValue(locale: $locale)
-            exchangedRewardRedemptionTransaction {
-              id
-              creditRedeemed
-              prettyRedeemedCredit(locale: $locale)
-              unit
-              dateRedeemed
-            }
-            referral {
-              id
-              referrerUser {
-                id
-                firstName
-                lastName
-              }
-              referredUser {
-                id
-                firstName
-                lastName
-              }
-            }
-            rewardRedemptionTransactions {
-              data {
-                exchangedRewards {
-                  data {
-                    prettyValue(locale: $locale)
-                    type
-                    fuelTankCode
-                    globalRewardKey
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+const GET_REWARDS = gql `
+  query getRewards(
+    $limit: Int!
+    $offset: Int!
+    $rewardFilter: RewardFilterInput
+    $locale: RSLocale
+  ) {
+    viewer {
+      ... on User {
+        id
+        rewards(
+          limit: $limit
+          offset: $offset
+          filter: $rewardFilter
+          sortBy: { field: "dateCreated", order: DESC }
+        ) {
+          totalCount
+          count
+          data {
+            meta {
+              status
+              integration {
+                name
+              }
+              message
+              customMeta
+            }
+            id
+            type
+            value
+            unit
+            name
+            dateGiven
+            dateCreated
+            dateExpires
+            dateCancelled
+            dateRedeemed
+            dateScheduledFor
+            fuelTankCode
+            fuelTankType
+            currency
+            prettyValue(locale: $locale)
+            prettyValueNumber: prettyValue(
+              formatType: NUMBER_FORMATTED
+              locale: $locale
+            )
+            prettyAvailableNumber: prettyAvailableValue(
+              formatType: NUMBER_FORMATTED
+              locale: $locale
+            )
+            prettyRedeemedNumber: prettyRedeemedCredit(
+              formatType: NUMBER_FORMATTED
+              locale: $locale
+            )
+            programId
+            program {
+              name
+            }
+            statuses
+            pendingReasons
+            globalRewardKey
+            programRewardKey
+            rewardSource
+            prettyRedeemedCredit(locale: $locale)
+            prettyAssignedCredit(locale: $locale)
+            prettyAvailableValue(locale: $locale)
+            exchangedRewardRedemptionTransaction {
+              id
+              creditRedeemed
+              prettyRedeemedCredit(locale: $locale)
+              unit
+              dateRedeemed
+            }
+            referral {
+              id
+              referrerUser {
+                id
+                firstName
+                lastName
+              }
+              referredUser {
+                id
+                firstName
+                lastName
+              }
+            }
+            rewardRedemptionTransactions {
+              data {
+                exchangedRewards {
+                  data {
+                    prettyValue(locale: $locale)
+                    type
+                    fuelTankCode
+                    globalRewardKey
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 `;
 export function useRewardsTable(props, emptyElement, loadingElement) {
   var _a, _b;

package/dist/collection/components/sqm-router/Router.stories.js

@@ -5,68 +5,68 @@ import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 export default {
   title: "Tests/Router",
 };
-const templates = `
-    <template path="/foo"><h1>foo</h1>
-    
-    <p>These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.
-
-    Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the Accessibility concerns section below for more details.</p>
-    </template>
-    <template path="/bar"><h2>bar</h2>
-    
-    <p>Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
-    To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.</p>
-    </template>
-    <template path="/baz/bang"><h3>baz/bang</h3>
-    <pre>
-    ▄▄▄▄▄▄▄░▄▄▄▄▄▄▄░▄▄▄▄▄▄░▄▄▄▄▄
-    ░░▀███░░░░▀██░░░░██▀░░░░██░░
-    ░░░▀██░░░░░▀██░░▄█░░░░░▄█░░░
-    ░░░░███░░░░░▀██▄█░░░░░░█░░░░
-    ░░░░░███░░░░░▀██░░░░░░█▀░░░░
-    ░░░░░░███░░░░▄███░░░░█▀░░░░░
-    ░░░░░░░██▄░░▄▀░███░░█▀░░░░░░
-    ░░░░░░░▀██▄█▀░░░███▄▀░░░░░░░
-    ░░░░░░░░▀██▀░░░░░███░░░░░░░░
-    ░░░░░░░░░▀▀░░░░░░░▀░░░░░░░░░
-    </pre>
-    </template>
-    <template path="/refer/:page"><h3>/refer/:page</h3>
-    <pre>
-      refer/:page
-    </pre>
-    </template>
+const templates = `
+    <template path="/foo"><h1>foo</h1>
+    
+    <p>These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.
+
+    Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the Accessibility concerns section below for more details.</p>
+    </template>
+    <template path="/bar"><h2>bar</h2>
+    
+    <p>Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
+    To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.</p>
+    </template>
+    <template path="/baz/bang"><h3>baz/bang</h3>
+    <pre>
+    ▄▄▄▄▄▄▄░▄▄▄▄▄▄▄░▄▄▄▄▄▄░▄▄▄▄▄
+    ░░▀███░░░░▀██░░░░██▀░░░░██░░
+    ░░░▀██░░░░░▀██░░▄█░░░░░▄█░░░
+    ░░░░███░░░░░▀██▄█░░░░░░█░░░░
+    ░░░░░███░░░░░▀██░░░░░░█▀░░░░
+    ░░░░░░███░░░░▄███░░░░█▀░░░░░
+    ░░░░░░░██▄░░▄▀░███░░█▀░░░░░░
+    ░░░░░░░▀██▄█▀░░░███▄▀░░░░░░░
+    ░░░░░░░░▀██▀░░░░░███░░░░░░░░
+    ░░░░░░░░░▀▀░░░░░░░▀░░░░░░░░░
+    </pre>
+    </template>
+    <template path="/refer/:page"><h3>/refer/:page</h3>
+    <pre>
+      refer/:page
+    </pre>
+    </template>
 `;
-const routes = `
-    <sqm-route path="/foo"><h1>foo</h1>
-    
-    <p>These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.
-
-    Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the Accessibility concerns section below for more details.</p>
-    </sqm-route>
-    <sqm-route path="/bar"><h2>bar</h2>
-    <p>Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
-    To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.</p>
-    </sqm-route>
-    <sqm-route path="/baz/bang"><h3>baz/bang</h3>
-    <pre>
-    ▄▄▄▄▄▄▄░▄▄▄▄▄▄▄░▄▄▄▄▄▄░▄▄▄▄▄
-    ░░▀███░░░░▀██░░░░██▀░░░░██░░
-    ░░░▀██░░░░░▀██░░▄█░░░░░▄█░░░
-    ░░░░███░░░░░▀██▄█░░░░░░█░░░░
-    ░░░░░███░░░░░▀██░░░░░░█▀░░░░
-    ░░░░░░███░░░░▄███░░░░█▀░░░░░
-    ░░░░░░░██▄░░▄▀░███░░█▀░░░░░░
-    ░░░░░░░▀██▄█▀░░░███▄▀░░░░░░░
-    ░░░░░░░░▀██▀░░░░░███░░░░░░░░
-    ░░░░░░░░░▀▀░░░░░░░▀░░░░░░░░░
-    </pre>
-    </sqm-route>
-    <sqm-route path="/refer/:page"><h3>/refer/:page</h3>
-    <pre>
-      refer/:page
-    </pre>
-    </sqm-route>
+const routes = `
+    <sqm-route path="/foo"><h1>foo</h1>
+    
+    <p>These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.
+
+    Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the Accessibility concerns section below for more details.</p>
+    </sqm-route>
+    <sqm-route path="/bar"><h2>bar</h2>
+    <p>Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
+    To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.</p>
+    </sqm-route>
+    <sqm-route path="/baz/bang"><h3>baz/bang</h3>
+    <pre>
+    ▄▄▄▄▄▄▄░▄▄▄▄▄▄▄░▄▄▄▄▄▄░▄▄▄▄▄
+    ░░▀███░░░░▀██░░░░██▀░░░░██░░
+    ░░░▀██░░░░░▀██░░▄█░░░░░▄█░░░
+    ░░░░███░░░░░▀██▄█░░░░░░█░░░░
+    ░░░░░███░░░░░▀██░░░░░░█▀░░░░
+    ░░░░░░███░░░░▄███░░░░█▀░░░░░
+    ░░░░░░░██▄░░▄▀░███░░█▀░░░░░░
+    ░░░░░░░▀██▄█▀░░░███▄▀░░░░░░░
+    ░░░░░░░░▀██▀░░░░░███░░░░░░░░
+    ░░░░░░░░░▀▀░░░░░░░▀░░░░░░░░░
+    </pre>
+    </sqm-route>
+    <sqm-route path="/refer/:page"><h3>/refer/:page</h3>
+    <pre>
+      refer/:page
+    </pre>
+    </sqm-route>
 `;
 export const TemplateNavigation = createHookStory(() => {
   return (h("div", null,
@@ -102,10 +102,10 @@ export const Styling = createHookStory(() => {
     h("button", { onClick: () => navigation.push("/foo") }, "/foo"),
     h("hr", null),
     h("div", { style: { display: "flex", justifyContent: "space-around" } },
-      h("sqm-router", { innerHTML: `<template path="/">
-      
-      <div>Column 1</div>
-      <div>Column 2 </div>
+      h("sqm-router", { innerHTML: `<template path="/">
+      
+      <div>Column 1</div>
+      <div>Column 2 </div>
       </template>` }))));
 });
 function useTemplate(templateString) {
@@ -120,12 +120,12 @@ function useTemplate(templateString) {
     callbacks: { setEditedTemplate, setPreviewTemplate, setPath },
   };
 }
-const defaultRouter = `
-<sqm-router>
-  <template path="/">
-  <div>hello world</div>
-  </template>
-</sqm-router>
+const defaultRouter = `
+<sqm-router>
+  <template path="/">
+  <div>hello world</div>
+  </template>
+</sqm-router>
 `;
 function TemplateView(props) {
   const { states, callbacks } = props;

package/dist/collection/components/sqm-router/sqm-router.css

@@ -1,7 +1,7 @@
-sqm-router {
-  /** 
-    Acts like a slot, doesn't provide it's own box 
-    see: https://developer.mozilla.org/en-US/docs/Web/CSS/display#box
-  **/
-  display: contents;
-}
+sqm-router {
+  /** 
+    Acts like a slot, doesn't provide it's own box 
+    see: https://developer.mozilla.org/en-US/docs/Web/CSS/display#box
+  **/
+  display: contents;
+}

package/dist/collection/components/sqm-scroll/Scroll.stories.js

@@ -29,61 +29,61 @@ export const ScrollAutoAnimation = () => {
 export const ScrollTabGroup = () => {
   return (h("div", { style: { position: "relative", height: "2000px" } },
     h("sqm-scroll", { "button-text": "Redeem rewards", "scroll-id": "tab-3", "scroll-animation": "smooth" }),
-    h("div", { style: { position: "absolute", bottom: "0" }, innerHTML: `
-              <sqm-tabs>
-              <sqm-tab header="Leaderboard">
-                <sqm-hero-image
-                  image-url="https://i.imgur.com/MVgOJn7.png"
-                  description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
-                  layout="columns"
-                  image-percentage="33%"
-                  padding-image="large"
-                  padding-text="large"
-                  background-color=""
-                ></sqm-hero-image>
-                <sqm-leaderboard></sqm-leaderboard>
-              </sqm-tab>
-              <sqm-tab header="Referral history"
-              >
-                <sqm-referral-table></sqm-referral-table>
-              </sqm-tab>
-              <sqm-tab header="Reward history">
-                <sqm-rewards-table></sqm-rewards-table>
-              </sqm-tab>
-              <sqm-tab header="Redeem">
-                <sqm-reward-exchange-list></sqm-reward-exchange-list>
-              </sqm-tab>
-            </sqm-tabs>
+    h("div", { style: { position: "absolute", bottom: "0" }, innerHTML: `
+              <sqm-tabs>
+              <sqm-tab header="Leaderboard">
+                <sqm-hero-image
+                  image-url="https://i.imgur.com/MVgOJn7.png"
+                  description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+                  layout="columns"
+                  image-percentage="33%"
+                  padding-image="large"
+                  padding-text="large"
+                  background-color=""
+                ></sqm-hero-image>
+                <sqm-leaderboard></sqm-leaderboard>
+              </sqm-tab>
+              <sqm-tab header="Referral history"
+              >
+                <sqm-referral-table></sqm-referral-table>
+              </sqm-tab>
+              <sqm-tab header="Reward history">
+                <sqm-rewards-table></sqm-rewards-table>
+              </sqm-tab>
+              <sqm-tab header="Redeem">
+                <sqm-reward-exchange-list></sqm-reward-exchange-list>
+              </sqm-tab>
+            </sqm-tabs>
       ` })));
 };
 export const ScrollTabGroupInner = () => {
   return (h("div", { style: { position: "relative", height: "2000px" } },
     h("sqm-scroll", { "button-text": "Redeem rewards", "scroll-tag-name": "sqm-reward-exchange-list" }),
-    h("div", { style: { position: "absolute", bottom: "0" }, innerHTML: `
-              <sqm-tabs>
-              <sqm-tab header="Leaderboard">
-                <sqm-hero-image
-                  image-url="https://i.imgur.com/MVgOJn7.png"
-                  description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
-                  layout="columns"
-                  image-percentage="33%"
-                  padding-image="large"
-                  padding-text="large"
-                  background-color=""
-                ></sqm-hero-image>
-                <sqm-leaderboard></sqm-leaderboard>
-              </sqm-tab>
-              <sqm-tab header="Referral history"
-              >
-                <sqm-referral-table></sqm-referral-table>
-              </sqm-tab>
-              <sqm-tab header="Reward history">
-                <sqm-rewards-table></sqm-rewards-table>
-              </sqm-tab>
-              <sqm-tab header="Redeem">
-                <sqm-reward-exchange-list></sqm-reward-exchange-list>
-              </sqm-tab>
-            </sqm-tabs>
+    h("div", { style: { position: "absolute", bottom: "0" }, innerHTML: `
+              <sqm-tabs>
+              <sqm-tab header="Leaderboard">
+                <sqm-hero-image
+                  image-url="https://i.imgur.com/MVgOJn7.png"
+                  description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+                  layout="columns"
+                  image-percentage="33%"
+                  padding-image="large"
+                  padding-text="large"
+                  background-color=""
+                ></sqm-hero-image>
+                <sqm-leaderboard></sqm-leaderboard>
+              </sqm-tab>
+              <sqm-tab header="Referral history"
+              >
+                <sqm-referral-table></sqm-referral-table>
+              </sqm-tab>
+              <sqm-tab header="Reward history">
+                <sqm-rewards-table></sqm-rewards-table>
+              </sqm-tab>
+              <sqm-tab header="Redeem">
+                <sqm-reward-exchange-list></sqm-reward-exchange-list>
+              </sqm-tab>
+            </sqm-tabs>
       ` })));
 };
 export const ShoelaceProps = () => {