@saasquatch/mint-components 1.3.1-7 → 1.3.2-0

package/dist/cjs/sqm-graphql-client-provider.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-6a7bda18.js');
 
 async function useGraphQLClientProvider({ domain }) {
   const token = index_module.Q();

package/dist/cjs/sqm-leaderboard-rank-view-35015d30.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+
+function LeaderboardRankView(props) {
+  const { data } = props;
+  return index.h("span", { class: "P" }, data.rank);
+}
+
+exports.LeaderboardRankView = LeaderboardRankView;

package/dist/cjs/sqm-leaderboard-rank.cjs.entry.js

@@ -2,15 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0129cd6.js');
+const index$1 = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-const global = require('./global-5610b310.js');
+const global = require('./global-041b5338.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-6a7bda18.js');
+require('./tslib.es6-0e81fab1.js');
 const cjs = require('./cjs-1066ec21.js');
-const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-c287ac06.js');
+const index = require('./index-19309631.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-35015d30.js');
 
-const GET_RANK = sqmLeaderboardRankView.gql `
+const GET_RANK = index.gql `
   query ($type: String!, $filter: UserLeaderboardFilterInput) {
     viewer {
       ... on User {
@@ -50,7 +52,7 @@ const sqmLeaderboardRankCss = "p,.P{font-size:var(--sl-font-size-small);color:va
 
 const LeaderboardRank = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    index$1.registerInstance(this, hostRef);
     /**
      * @uiName Rank Text
      */
@@ -62,7 +64,7 @@ const LeaderboardRank = class {
     const props = index_module.j()
       ? useLeaderboardRankDemo(this)
       : useLeaderboardRank(this);
-    return index.h(sqmLeaderboardRankView.LeaderboardRankView, Object.assign({}, props));
+    return index$1.h(sqmLeaderboardRankView.LeaderboardRankView, Object.assign({}, props));
   }
 };
 function useLeaderboardRankDemo(props) {

package/dist/cjs/sqm-leaderboard.cjs.entry.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-6a7bda18.js');
 const cjs = require('./cjs-1066ec21.js');
-const ShadowViewAddon = require('./ShadowViewAddon-b021dc8c.js');
+const ShadowViewAddon = require('./ShadowViewAddon-75c18b96.js');
 
 const sqmLeaderboardCss = ":host{display:block}:host([hidden]){display:none}table{width:100%}th{font-size:var(--sl-font-size-small);font-weight:var(--sl-font-weight-semibold);text-align:left}td{font-size:var(--sl-font-size-medium);font-weight:var(--sl-font-weight-normal)}td,th{color:var(--sl-color-gray-800);padding:var(--sl-spacing-x-small) var(--sl-spacing-small)}.User{width:100%}.Score{width:auto;white-space:nowrap}";
 

package/dist/cjs/sqm-name-fields.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-6a7bda18.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');

package/dist/cjs/{sqm-navigation-sidebar-item-view-153503f0.js → sqm-navigation-sidebar-item-view-e99b4a10.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-6a7bda18.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 const mixins = require('./mixins-7b7c59fe.js');
 

package/dist/cjs/sqm-navigation-sidebar-item.cjs.entry.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-6a7bda18.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-153503f0.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-e99b4a10.js');
 
 function useNavigationSidebarItem(props) {
   const currentPage = index_module.an();

package/dist/cjs/sqm-popup-container.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-6a7bda18.js');
 const utils = require('./utils-95e5317c.js');
 
 const PopupContainerView = (props) => {

package/dist/cjs/{sqm-portal-email-verification-view-1d8728f9.js → sqm-portal-email-verification-view-5e955797.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-5610b310.js');
+const global = require('./global-041b5338.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 const mixins = require('./mixins-7b7c59fe.js');
 const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');

package/dist/cjs/sqm-portal-email-verification.cjs.entry.js

@@ -4,14 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./global-5610b310.js');
+require('./global-041b5338.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-6a7bda18.js');
+require('./tslib.es6-0e81fab1.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
 require('./sqm-text-span-view-b5ae787b.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-1d8728f9.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-5e955797.js');
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e;

package/dist/cjs/{sqm-portal-footer-view-dc4b0667.js → sqm-portal-footer-view-9089feb7.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-5610b310.js');
+const global = require('./global-041b5338.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 
 function PoweredByImg({ color = "#A6A6A6", width = 190, height = 29, }) {

package/dist/cjs/sqm-portal-footer.cjs.entry.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./global-5610b310.js');
+require('./global-041b5338.js');
 require('./use-callback-fadb2643.js');
-require('./index.module-03ce03c2.js');
+require('./index.module-6a7bda18.js');
+require('./tslib.es6-0e81fab1.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
-const sqmPortalFooterView = require('./sqm-portal-footer-view-dc4b0667.js');
+const sqmPortalFooterView = require('./sqm-portal-footer-view-9089feb7.js');
 
 const PortalFooter = class {
   constructor(hostRef) {

package/dist/cjs/sqm-portal-forgot-password.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-6a7bda18.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');

package/dist/cjs/sqm-portal-logout.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-6a7bda18.js');
 
 function usePortalLogout({ nextPage }) {
   index_module.L(undefined);

package/dist/cjs/{sqm-portal-profile-view-a7519f19.js → sqm-portal-profile-view-a23ea292.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-5610b310.js');
+const global = require('./global-041b5338.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-d144735a.js');
 const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');

package/dist/cjs/sqm-portal-profile.cjs.entry.js

@@ -4,15 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./global-5610b310.js');
+require('./global-041b5338.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-6a7bda18.js');
+require('./tslib.es6-0e81fab1.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./sqm-portal-container-view-d144735a.js');
 require('./sqm-text-span-view-b5ae787b.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-a7519f19.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-a23ea292.js');
 
 const GET_USER = index_module.dist.gql `
   query {

package/dist/cjs/sqm-portal-protected-route.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-6a7bda18.js');
 
 function usePortalProtectedRoute({ requireEmailVerification, redirectTo, redirectToUnverified, }) {
   var _a;

package/dist/cjs/sqm-portal-reset-password.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-6a7bda18.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');

package/dist/cjs/sqm-portal-verify-email.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-6a7bda18.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');

package/dist/cjs/sqm-referral-table-column.cjs.entry.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-require('./index.module-03ce03c2.js');
-const reRender = require('./re-render-b5efae5f.js');
+require('./index.module-6a7bda18.js');
+const reRender = require('./re-render-7cdb2d81.js');
 
 const ReferralTableGenericColumn = class {
   constructor(hostRef) {

package/dist/cjs/sqm-referral-table-date-column.cjs.entry.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-require('./index.module-03ce03c2.js');
-const reRender = require('./re-render-b5efae5f.js');
+require('./index.module-6a7bda18.js');
+const reRender = require('./re-render-7cdb2d81.js');
 
 const ReferralTableDateColumn = class {
   constructor(hostRef) {

package/dist/cjs/sqm-referral-table-rewards-column.cjs.entry.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-require('./index.module-03ce03c2.js');
-const reRender = require('./re-render-b5efae5f.js');
+require('./index.module-6a7bda18.js');
+const reRender = require('./re-render-7cdb2d81.js');
 
 const ReferralTableRewardsColumn = class {
   constructor(hostRef) {

package/dist/cjs/sqm-referral-table-status-column.cjs.entry.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-require('./index.module-03ce03c2.js');
-const reRender = require('./re-render-b5efae5f.js');
+require('./index.module-6a7bda18.js');
+const reRender = require('./re-render-7cdb2d81.js');
 
 const ReferralTableStatusColumn = class {
   constructor(hostRef) {

package/dist/cjs/sqm-referral-table-user-column.cjs.entry.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-require('./index.module-03ce03c2.js');
-const reRender = require('./re-render-b5efae5f.js');
+require('./index.module-6a7bda18.js');
+const reRender = require('./re-render-7cdb2d81.js');
 
 const ReferralTableUserColumn = class {
   constructor(hostRef) {

package/dist/cjs/sqm-rewards-table.cjs.entry.js

@@ -0,0 +1,332 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const _extends = require('./extends-0302d27d.js');
+require('./use-callback-fadb2643.js');
+const index_module = require('./index.module-6a7bda18.js');
+require('./tslib.es6-0e81fab1.js');
+const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const cjs = require('./cjs-1066ec21.js');
+const mixins = require('./mixins-7b7c59fe.js');
+const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');
+const index$1 = require('./index-19309631.js');
+const reRender = require('./re-render-7cdb2d81.js');
+const useChildElements = require('./useChildElements-428ca5b8.js');
+
+const style = {
+  THead: {
+    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
+    "text-align": "left",
+  },
+  TCell: {
+    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
+  },
+  TRow: {
+    "border-top": "1px solid #EAEAEA",
+  },
+  Table: {
+    "border-collapse": "collapse",
+    width: "100%",
+  },
+  ButtonContainer: {
+    display: "flex",
+    "justify-content": "flex-end",
+    "margin-top": "var(--sl-spacing-small)",
+    ...mixins.gap({ direction: "row", size: "var(--sl-spacing-small)" }),
+  },
+};
+jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
+const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+const styleString = sheet.toString();
+function GenericTableView(props) {
+  const { states, data, callbacks, elements } = props;
+  const { columns, rows } = elements;
+  const { show } = states;
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("table", { class: sheet.classes.Table },
+      data.textOverrides.showLabels && (index.h("thead", null,
+        index.h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (index.h("th", { class: sheet.classes.THead },
+          index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, column))))))),
+      index.h("tbody", null,
+        show === "loading" && elements.loadingElement,
+        show === "empty" && elements.emptyElement,
+        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (index.h("tr", { class: sheet.classes.TRow, style: {
+            borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
+          }, part: "table-row" }, row.map((cell) => (index.h("td", { class: sheet.classes.TCell },
+          index.h(sqmTextSpanView.TextSpanView, { type: "p" }, cell)))))))))),
+    index.h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
+      index.h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.prevLabel),
+      index.h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.moreLabel))));
+}
+
+function LoadingSlot() {
+  return (index.h("slot", { name: "loading" },
+    index.h(LoadingSkeleton, null)));
+}
+function LoadingSkeleton() {
+  return (index.h("div", { style: { width: "100%" } },
+    index.h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    index.h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    index.h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    index.h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    index.h("sl-skeleton", null)));
+}
+function EmptySlot({ label }) {
+  return (index.h("slot", { name: "empty" },
+    index.h(EmptySkeleton, { label: label })));
+}
+function EmptySkeleton({ label }) {
+  return (index.h("div", { style: { width: "100%" } },
+    index.h("sqm-text", null,
+      index.h("h3", { style: { color: "#777777" } }, label))));
+}
+
+const CSS_NAMESPACE = "sqm-rewards-table";
+const GET_REWARDS = index$1.gql `
+  query getRewards(
+    $limit: Int!
+    $offset: Int!
+    $referralFilter: ReferralFilterInput
+    $rewardFilter: RewardFilterInput
+  ) {
+    viewer {
+      ... on User {
+        id
+        rewards(limit: $limit, offset: $offset, filter: $referralFilter) {
+          totalCount
+          count
+          data {
+            id
+            type
+            value
+            unit
+            name
+            dateGiven
+            dateExpires
+            dateCancelled
+            dateRedeemed
+            dateScheduledFor
+            fuelTankCode
+            fuelTankType
+            currency
+            prettyValue
+            statuses
+            globalRewardKey
+            programRewardKey
+            rewardRedemptionTransactions {
+              data {
+                exchangedRewards {
+                  data {
+                    prettyValue
+                    type
+                    fuelTankCode
+                    globalRewardKey
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function useRewardsTable(props, emptyElement, loadingElement) {
+  var _a, _b;
+  const user = index_module.T();
+  const programIdContext = index_module.M();
+  // Default to context, overriden by props
+  const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
+  // If no program ID, shows all programs
+  const referralFilter = programId
+    ? programId === "classic"
+      ? { programId_exists: false }
+      : { programId_eq: programId }
+    : {};
+  const rewardFilter = {
+    userId_eq: user === null || user === void 0 ? void 0 : user.id,
+    accountId_eq: user === null || user === void 0 ? void 0 : user.accountId,
+  };
+  const [content, setContent] = _extends.useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    columns: [],
+    rows: [],
+    loading: false,
+    page: 0,
+  });
+  const { envelope: rewardsData, states, callbacks, } = index_module.sn(GET_REWARDS, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
+    limit: props.perPage,
+    offset: 0,
+  }, {
+    referralFilter,
+    rewardFilter,
+  }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const tick = reRender.useRerenderListener();
+  const components = useChildElements.useChildElements();
+  const data = rewardsData === null || rewardsData === void 0 ? void 0 : rewardsData.data;
+  async function getComponentData(components) {
+    // filter out loading and empty states from columns array
+    const columnComponents = components.filter((component) => component.slot !== "loading" && component.slot !== "empty");
+    // get the column titles (renderLabel is asynchronous)
+    const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderLabel()));
+    // get the column cells (renderCell is asynchronous)
+    const cellsPromise = data === null || data === void 0 ? void 0 : data.map(async (r) => {
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, c)));
+      const cells = await Promise.all(cellPromise);
+      return cells;
+    });
+    const rows = cellsPromise && (await Promise.all(cellsPromise)).filter((i) => i);
+    setContent({ rows });
+    const columns = columnsPromise && (await Promise.all(columnsPromise));
+    // Set the content to render and finish loading components
+    setContent({ columns, loading: false, page: states.currentPage });
+  }
+  _extends.useEffect(() => {
+    setContent({ loading: true });
+    rewardsData && getComponentData(components);
+  }, [rewardsData, components, tick]);
+  const isEmpty = !((_b = content === null || content === void 0 ? void 0 : content.rows) === null || _b === void 0 ? void 0 : _b.length) && !(data === null || data === void 0 ? void 0 : data.length);
+  const show = 
+  // 1 - Loading if loading
+  states.loading || content.loading
+    ? "loading"
+    : // 2 - Empty if empty
+      isEmpty
+        ? "empty"
+        : // 3 - Then show rows
+          "rows";
+  return {
+    states: {
+      hasNext: states.currentPage < states.pageCount - 1,
+      hasPrev: states.currentPage > 0,
+      show,
+      namespace: CSS_NAMESPACE
+    },
+    data: {
+      textOverrides: {
+        showLabels: props.showLabels,
+        prevLabel: props.prevLabel,
+        moreLabel: props.moreLabel,
+      },
+    },
+    elements: {
+      columns: content.columns,
+      rows: content.rows,
+      emptyElement,
+      loadingElement,
+    },
+    callbacks: {
+      nextPage: () => {
+        if (states.currentPage === 0)
+          callbacks.setLimit(props.perPage);
+        callbacks.setCurrentPage(states.currentPage + 1);
+      },
+      prevPage: () => {
+        if (states.currentPage === 1)
+          callbacks.setLimit(props.perPage - 1);
+        callbacks.setCurrentPage(states.currentPage - 1);
+      },
+    },
+  };
+}
+function generateUserError(e) {
+  try {
+    return JSON.stringify(e);
+  }
+  catch (e) {
+    return "An unknown error";
+  }
+}
+async function tryMethod(c, callback) {
+  const tag = c.tagName.toLowerCase();
+  await customElements.whenDefined(tag);
+  let labelPromise;
+  try {
+    labelPromise = callback();
+  }
+  catch (e) {
+    // renderLabel did not return a promise, so this method probably doesn't exist
+    // therefore, we IGNORE the label
+    if (callback.name === "renderReferrerCell") {
+      console.error("column does not have a renderReferrerCell method.");
+    }
+    else {
+      console.error("label promise failed", e);
+    }
+    return index.h("span", null);
+  }
+  try {
+    return await labelPromise;
+  }
+  catch (e) {
+    // The column returned a promise, and that promise failed.
+    // This should not happen so we fail fast
+    console.error("Error rendering label", e);
+    const userError = generateUserError(e);
+    return (index.h("details", null,
+      index.h("summary", null, "Error"),
+      userError));
+  }
+}
+
+const RewardsTable = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** @uiName Number of rewards per page */
+    this.perPage = 3;
+    /** @uiName Show column labels */
+    this.showLabels = true;
+    /** @uiName Previous button text  */
+    this.prevLabel = "Prev";
+    /** @uiName View More button text  */
+    this.moreLabel = "Next";
+    /** @uiName Show Referred by user in table  */
+    this.showReferrer = false;
+    _extends.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const empty = index.h(EmptySlot, { label: "No Rewards Yet" });
+    const loading = index.h(LoadingSlot, null);
+    const { states, data, callbacks, elements } = index_module.j()
+      ? useRewardsTableDemo(this)
+      : useRewardsTable(this, empty, loading);
+    return (index.h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
+  }
+};
+function useRewardsTableDemo(props) {
+  return cjs.cjs({
+    states: {
+      hasPrev: false,
+      hasNext: false,
+      loading: false,
+      namespace: CSS_NAMESPACE,
+    },
+    callbacks: {
+      prevPage: () => console.log("Prev"),
+      nextPage: () => console.log("Next"),
+    },
+    data: {
+      textOverrides: {
+        showLabels: props.showLabels,
+        prevLabel: props.prevLabel,
+        moreLabel: props.moreLabel,
+      },
+      referralData: [],
+    },
+    elements: {
+      emptyElement: index.h(EmptySkeleton, { label: "No Rewards Yet" }),
+      loadingElement: index.h(LoadingSkeleton, null),
+      // TODO: This should be smarter
+      columns: [index.h("div", null, "Name"), index.h("div", null, "Email"), index.h("div", null, "DOB")],
+      rows: [],
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+exports.sqm_rewards_table = RewardsTable;