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

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
 import { o as m, e as useEffect, m as h } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import { Q, k, g as pe, h as ge } from './index.module-33c313d2.js';
+import { Q, k, g as pe, h as ge } from './index.module-f80561db.js';
 
 async function useGraphQLClientProvider({ domain }) {
   const token = Q();

package/dist/esm/sqm-leaderboard-rank-view-da91f5f3.js

@@ -0,0 +1,8 @@
+import { h } from './index-17b4da69.js';
+
+function LeaderboardRankView(props) {
+  const { data } = props;
+  return h("span", { class: "P" }, data.rank);
+}
+
+export { LeaderboardRankView as L };

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

@@ -1,10 +1,12 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { m as h } from './extends-3a3f9fe2.js';
-import { i as intl, c as createIntl } from './global-cc82aa03.js';
+import { i as intl, c as createIntl } from './global-5ecbf81a.js';
 import './use-callback-b38a1523.js';
-import { M, T, e as en, j } from './index.module-33c313d2.js';
+import { M, T, e as en, j } from './index.module-f80561db.js';
+import './tslib.es6-7ac9d7e4.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-4f48da0c.js';
+import { g as gql } from './index-2f5dd0a1.js';
+import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-da91f5f3.js';
 
 const GET_RANK = gql `
   query ($type: String!, $filter: UserLeaderboardFilterInput) {

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

@@ -1,9 +1,9 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { m as h } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import { j } from './index.module-33c313d2.js';
+import { j } from './index.module-f80561db.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { w as withShadowView, u as useLeaderboard, L as LeaderboardView } from './ShadowViewAddon-2e3ea31f.js';
+import { w as withShadowView, u as useLeaderboard, L as LeaderboardView } from './ShadowViewAddon-fff5d35d.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/esm/sqm-name-fields.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { n as d, m as h } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import { j } from './index.module-33c313d2.js';
+import { j } from './index.module-f80561db.js';
 import './jss-preset-default.esm-71fae192.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';

package/dist/esm/{sqm-navigation-sidebar-item-view-5dfa535f.js → sqm-navigation-sidebar-item-view-8a3f374b.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { r as rn } from './index.module-33c313d2.js';
+import { r as rn } from './index.module-f80561db.js';
 import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
 import { g as gap } from './mixins-10353a39.js';
 

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

@@ -1,12 +1,12 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { m as h } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import { c as an, j } from './index.module-33c313d2.js';
+import { c as an, j } from './index.module-f80561db.js';
 import './jss-preset-default.esm-71fae192.js';
 import { g as getProps } from './utils-454405f5.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-5dfa535f.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-8a3f374b.js';
 
 function useNavigationSidebarItem(props) {
   const currentPage = an();

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

@@ -1,7 +1,7 @@
 import { h, c as Host, r as registerInstance } from './index-17b4da69.js';
 import { m as h$1 } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import { x } from './index.module-33c313d2.js';
+import { x } from './index.module-f80561db.js';
 import { g as getProps } from './utils-454405f5.js';
 
 const PopupContainerView = (props) => {

package/dist/esm/{sqm-portal-email-verification-view-87bf8191.js → sqm-portal-email-verification-view-90781be2.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { i as intl } from './global-cc82aa03.js';
+import { i as intl } from './global-5ecbf81a.js';
 import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
 import { A as AuthWrapper, a as AuthColumn } from './mixins-10353a39.js';
 import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';

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

@@ -1,13 +1,14 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { j as useState, e as useEffect, m as h } from './extends-3a3f9fe2.js';
-import './global-cc82aa03.js';
+import './global-5ecbf81a.js';
 import './use-callback-b38a1523.js';
-import { B as Be, T, j } from './index.module-33c313d2.js';
+import { B as Be, T, j } from './index.module-f80561db.js';
+import './tslib.es6-7ac9d7e4.js';
 import './jss-preset-default.esm-71fae192.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
 import './sqm-text-span-view-1781df94.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-87bf8191.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-90781be2.js';
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e;

package/dist/esm/{sqm-portal-footer-view-da135cff.js → sqm-portal-footer-view-c317518e.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { i as intl } from './global-cc82aa03.js';
+import { i as intl } from './global-5ecbf81a.js';
 import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
 
 function PoweredByImg({ color = "#A6A6A6", width = 190, height = 29, }) {

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

@@ -1,11 +1,12 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { m as h } from './extends-3a3f9fe2.js';
-import './global-cc82aa03.js';
+import './global-5ecbf81a.js';
 import './use-callback-b38a1523.js';
-import './index.module-33c313d2.js';
+import './index.module-f80561db.js';
+import './tslib.es6-7ac9d7e4.js';
 import './jss-preset-default.esm-71fae192.js';
 import { g as getProps } from './utils-454405f5.js';
-import { a as PortalFooterView } from './sqm-portal-footer-view-da135cff.js';
+import { a as PortalFooterView } from './sqm-portal-footer-view-c317518e.js';
 
 const PortalFooter = class {
   constructor(hostRef) {

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { j as useState, e as useEffect, m as h } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import { z as ze, j, r as rn } from './index.module-33c313d2.js';
+import { z as ze, j, r as rn } from './index.module-f80561db.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import './jss-preset-default.esm-71fae192.js';
 import { c as cjs } from './cjs-bdfb4486.js';

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

@@ -1,7 +1,7 @@
 import { r as registerInstance } from './index-17b4da69.js';
 import { m as h } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import { L, r as rn, j } from './index.module-33c313d2.js';
+import { L, r as rn, j } from './index.module-f80561db.js';
 
 function usePortalLogout({ nextPage }) {
   L(undefined);

package/dist/esm/{sqm-portal-profile-view-8781176c.js → sqm-portal-profile-view-824c8242.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { i as intl } from './global-cc82aa03.js';
+import { i as intl } from './global-5ecbf81a.js';
 import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
 import { P as PortalContainerView } from './sqm-portal-container-view-73757ca5.js';
 import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';

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

@@ -1,14 +1,15 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { j as useState, e as useEffect, m as h } from './extends-3a3f9fe2.js';
-import './global-cc82aa03.js';
+import './global-5ecbf81a.js';
 import './use-callback-b38a1523.js';
-import { d as dist, T, e as en, b as be, j } from './index.module-33c313d2.js';
+import { d as dist, T, e as en, b as be, j } from './index.module-f80561db.js';
+import './tslib.es6-7ac9d7e4.js';
 import './jss-preset-default.esm-71fae192.js';
 import { g as getProps } from './utils-454405f5.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './sqm-portal-container-view-73757ca5.js';
 import './sqm-text-span-view-1781df94.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-8781176c.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-824c8242.js';
 
 const GET_USER = dist.gql `
   query {

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
 import { e as useEffect, m as h } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import { T, c as an, r as rn, j } from './index.module-33c313d2.js';
+import { T, c as an, r as rn, j } from './index.module-f80561db.js';
 
 function usePortalProtectedRoute({ requireEmailVerification, redirectTo, redirectToUnverified, }) {
   var _a;

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { j as useState, e as useEffect, m as h } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import { i as Re, $ as $e, r as rn, j } from './index.module-33c313d2.js';
+import { i as Re, $ as $e, r as rn, j } from './index.module-f80561db.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import './jss-preset-default.esm-71fae192.js';
 import { c as cjs } from './cjs-bdfb4486.js';

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { j as useState, e as useEffect, m as h } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import { T, l as Le, r as rn, j } from './index.module-33c313d2.js';
+import { T, l as Le, r as rn, j } from './index.module-f80561db.js';
 import './jss-preset-default.esm-71fae192.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, h as h$1, g as getElement, c as Host } from './index-17b4da69.js';
 import { m as h } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import './index.module-33c313d2.js';
-import { a as useRequestRerender } from './re-render-338d931e.js';
+import './index.module-f80561db.js';
+import { a as useRequestRerender } from './re-render-9ab5fe0f.js';
 
 const ReferralTableGenericColumn = class {
   constructor(hostRef) {

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
 import { m as h } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import './index.module-33c313d2.js';
-import { a as useRequestRerender } from './re-render-338d931e.js';
+import './index.module-f80561db.js';
+import { a as useRequestRerender } from './re-render-9ab5fe0f.js';
 
 const ReferralTableDateColumn = class {
   constructor(hostRef) {

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
 import { m as h } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import './index.module-33c313d2.js';
-import { a as useRequestRerender } from './re-render-338d931e.js';
+import './index.module-f80561db.js';
+import { a as useRequestRerender } from './re-render-9ab5fe0f.js';
 
 const ReferralTableRewardsColumn = class {
   constructor(hostRef) {

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
 import { m as h } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import './index.module-33c313d2.js';
-import { a as useRequestRerender } from './re-render-338d931e.js';
+import './index.module-f80561db.js';
+import { a as useRequestRerender } from './re-render-9ab5fe0f.js';
 
 const ReferralTableStatusColumn = class {
   constructor(hostRef) {

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
 import { m as h } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import './index.module-33c313d2.js';
-import { a as useRequestRerender } from './re-render-338d931e.js';
+import './index.module-f80561db.js';
+import { a as useRequestRerender } from './re-render-9ab5fe0f.js';
 
 const ReferralTableUserColumn = class {
   constructor(hostRef) {

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

@@ -0,0 +1,328 @@
+import { h, r as registerInstance } from './index-17b4da69.js';
+import { u as useReducer, e as useEffect, m as h$1 } from './extends-3a3f9fe2.js';
+import './use-callback-b38a1523.js';
+import { T, M, a as sn, j } from './index.module-f80561db.js';
+import './tslib.es6-7ac9d7e4.js';
+import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import { g as gap } from './mixins-10353a39.js';
+import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
+import { g as gql } from './index-2f5dd0a1.js';
+import { u as useRerenderListener } from './re-render-9ab5fe0f.js';
+import { u as useChildElements } from './useChildElements-506f00d0.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)",
+    ...gap({ direction: "row", size: "var(--sl-spacing-small)" }),
+  },
+};
+jss.setup(create());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+function GenericTableView(props) {
+  const { states, data, callbacks, elements } = props;
+  const { columns, rows } = elements;
+  const { show } = states;
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("table", { class: sheet.classes.Table },
+      data.textOverrides.showLabels && (h("thead", null,
+        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (h("th", { class: sheet.classes.THead },
+          h(TextSpanView, { type: "h3" }, column))))))),
+      h("tbody", null,
+        show === "loading" && elements.loadingElement,
+        show === "empty" && elements.emptyElement,
+        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (h("tr", { class: sheet.classes.TRow, style: {
+            borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
+          }, part: "table-row" }, row.map((cell) => (h("td", { class: sheet.classes.TCell },
+          h(TextSpanView, { type: "p" }, cell)))))))))),
+    h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
+      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.prevLabel),
+      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.moreLabel))));
+}
+
+function LoadingSlot() {
+  return (h("slot", { name: "loading" },
+    h(LoadingSkeleton, null)));
+}
+function LoadingSkeleton() {
+  return (h("div", { style: { width: "100%" } },
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", null)));
+}
+function EmptySlot({ label }) {
+  return (h("slot", { name: "empty" },
+    h(EmptySkeleton, { label: label })));
+}
+function EmptySkeleton({ label }) {
+  return (h("div", { style: { width: "100%" } },
+    h("sqm-text", null,
+      h("h3", { style: { color: "#777777" } }, label))));
+}
+
+const CSS_NAMESPACE = "sqm-rewards-table";
+const GET_REWARDS = 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 = T();
+  const programIdContext = 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] = useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    columns: [],
+    rows: [],
+    loading: false,
+    page: 0,
+  });
+  const { envelope: rewardsData, states, callbacks, } = 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 = useRerenderListener();
+  const components = 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 });
+  }
+  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 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 (h("details", null,
+      h("summary", null, "Error"),
+      userError));
+  }
+}
+
+const RewardsTable = class {
+  constructor(hostRef) {
+    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;
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const empty = h(EmptySlot, { label: "No Rewards Yet" });
+    const loading = h(LoadingSlot, null);
+    const { states, data, callbacks, elements } = j()
+      ? useRewardsTableDemo(this)
+      : useRewardsTable(this, empty, loading);
+    return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
+  }
+};
+function useRewardsTableDemo(props) {
+  return 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: h(EmptySkeleton, { label: "No Rewards Yet" }),
+      loadingElement: h(LoadingSkeleton, null),
+      // TODO: This should be smarter
+      columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
+      rows: [],
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+export { RewardsTable as sqm_rewards_table };

package/dist/esm/sqm-share-code.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { j as useState, m as h } from './extends-3a3f9fe2.js';
 import './use-callback-b38a1523.js';
-import { d as dist, M, T, e as en, j } from './index.module-33c313d2.js';
+import { d as dist, M, T, e as en, j } from './index.module-f80561db.js';
 import './jss-preset-default.esm-71fae192.js';
 import { g as getProps } from './utils-454405f5.js';
 import { c as cjs } from './cjs-bdfb4486.js';