@saasquatch/mint-components 1.5.0-65 → 1.5.0-69

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

@@ -1,102 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./use-callback-e754042f.js');
-const index_module = require('./index.module-54724339.js');
-require('./extends-08099afd.js');
-const cjs = require('./cjs-1066ec21.js');
-require('./JSS-c65a40f1.js');
-const useLeaderboard = require('./useLeaderboard-9e950912.js');
-
-const sqmLeaderboardCss = ":host{display:block}:host([hidden]){display:none}table{width:100%;border-collapse:collapse}th{font-size:var(--sl-font-size-small);font-weight:var(--sl-font-weight-semibold);text-align:left}tr:not(:first-child){border-top:1px solid var(--sl-color-neutral-200)}td{font-size:var(--sl-font-size-medium);font-weight:var(--sl-font-weight-normal)}.ellipses{text-align:center;padding:0;color:var(--sl-color-neutral-500)}.highlight{background:var(--sl-color-primary-50)}td,th{color:var(--sl-color-gray-800);padding:var(--sl-spacing-medium)}th{padding:var(--sl-spacing-medium);padding-top:0}.User{width:100%}.Score{width:auto;white-space:nowrap}";
-
-const Leaderboard = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * @uiName Show viewing user's rank
-     */
-    this.showUser = true;
-    /**
-     * @uiName Title displayed for users without names
-     */
-    this.anonymousUser = "Anonymous User";
-    /**
-     * @uiName Empty State Image
-     */
-    this.emptyStateImage = "https://i.imgur.com/KPGnPF8.png";
-    /**
-     * @uiName Empty State Header
-     */
-    this.emptyStateHeader = "View your rank in the leaderboard";
-    /**
-     * @uiName Empty State Description
-     */
-    this.emptyStateText = "Be the first to refer a friend and reach the top of the leaderboard";
-    this.ignored = true;
-    stencilHooks_module.h$1(this);
-    useLeaderboard.withShadowView(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = {
-      empty: index.h(EmptySlot, null),
-      loadingstate: index.h(LoadingSlot, null),
-      usersheading: this.usersheading,
-      statsheading: this.statsheading,
-      rankType: this.rankType,
-      leaderboardType: this.leaderboardType,
-      anonymousUser: this.anonymousUser,
-      interval: this.interval,
-      showUser: this.showUser,
-      showRank: this.showRank,
-    };
-    const demoProps = { ...props, demoData: this.demoData };
-    const viewprops = index_module.k()
-      ? useLeaderboardDemo(demoProps)
-      : useLeaderboard.useLeaderboard(props);
-    return (index.h(useLeaderboard.LeaderboardView, Object.assign({}, viewprops), index.h("slot", null)));
-  }
-};
-function EmptySlot() {
-  return (index.h("slot", { name: "empty" }, index.h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" }, index.h("sqm-image", { "image-url": this.emptyStateImage, "max-width": "100px" }), index.h("sqm-titled-section", { "label-margin": "xxx-small", align: "center" }, index.h("sqm-text", { slot: "label" }, index.h("h3", null, this.emptyStateHeader)), index.h("sqm-text", { slot: "content" }, this.emptyStateText)))));
-}
-function LoadingSlot() {
-  return (index.h("slot", { name: "loadingstate" }, index.h("table", null, [...Array(10)].map(() => {
-    return (index.h("tr", null, index.h("td", null, index.h("sl-skeleton", null))));
-  }))));
-}
-function useLeaderboardDemo(props) {
-  return cjs.cjs({
-    states: {
-      loading: false,
-      hasLeaders: true,
-      styles: {
-        usersheading: props.usersheading
-          ? props.usersheading
-          : "TOP REFERRERS",
-        statsheading: props.statsheading ? props.statsheading : "NEW CUSTOMERS",
-      },
-    },
-    data: {
-      rankType: "rowNumber",
-      leaderboard: [
-        { firstName: "Viktor", lastInitial: "V", value: 82, rank: 1 },
-        { firstName: "MF", lastInitial: "D", value: 73, rank: 2 },
-        { firstName: "Freddie", lastInitial: "G", value: 64, rank: 3 },
-        { firstName: "Benny", lastInitial: "B", value: 55, rank: 4 },
-        { firstName: "Mos", lastInitial: "D", value: 46, rank: 5 },
-      ],
-    },
-    elements: {
-      empty: index.h(EmptySlot, null),
-      loadingstate: index.h(LoadingSlot, null),
-    },
-  }, props.demoProps || {}, { arrayMerge: (_, a) => a });
-}
-Leaderboard.style = sqmLeaderboardCss;
-
-exports.sqm_leaderboard = Leaderboard;

package/dist/cjs/useLeaderboard-9e950912.js

@@ -1,230 +0,0 @@
-'use strict';
-
-const index = require('./index-b0129cd6.js');
-const index_module = require('./index.module-54724339.js');
-const JSS = require('./JSS-c65a40f1.js');
-
-const map = new Map();
-function withShadowView(component) {
-  // TODO: Could only do this if rendered in a Stencilbook environment to prevent unintended side-effects
-  const element = index.getElement(component);
-  let renderFn = component["render"].bind(component);
-  const newRenderFn = () => {
-    const key = element.getAttribute("stencilbook-shadow-view");
-    if (key) {
-      const value = map.get(key);
-      if (value) {
-        return value;
-      }
-    }
-    return renderFn();
-  };
-  component["render"] = newRenderFn;
-}
-/**
- * Any story that defines `parameters.tagname` will be used as a wrapper component around the view
- */
-const ShadowViewAddon = ({ story }, children) => {
-  var _a;
-  let TagName = (_a = story.parent.parameters) === null || _a === void 0 ? void 0 : _a.tagname;
-  if (!TagName)
-    return children;
-  const randomInt = Math.round(Math.random() * 100000);
-  map.set(randomInt + "", children);
-  const RandomTagName = "stencilbook-shawdow-view-" + randomInt;
-  // This will only re-render when the tag name changes, so we use a random tag name every time.
-  // Altneratively we could try to trick Stencil to call `forceUpdate` every time.
-  return (index.h(RandomTagName, null,
-    index.h(TagName, { "stencilbook-shadow-view": randomInt })));
-};
-
-const style = {
-  Leaderboard: {
-    "& table": {
-      width: "100%",
-      borderCollapse: "collapse",
-    },
-    "& th": {
-      textAlign: "left",
-      padding: "var(--sl-spacing-medium)",
-      paddingTop: "0",
-      fontSize: "var(--sl-font-size-medium)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-    },
-    "& tr:not(:first-child)": {
-      borderTop: "1px solid var(--sl-color-neutral-200)",
-    },
-    "& td": {
-      fontSize: "var(--sl-font-size-medium)",
-      fontWeight: "var(--sl-font-weight-normal)",
-    },
-    "& .ellipses": {
-      textAlign: "center",
-      padding: "0",
-      color: "var(--sl-color-neutral-500)",
-    },
-    "& .highlight": {
-      background: "var(--sl-color-primary-50)",
-    },
-    "& td, th": {
-      color: "var(--sl-color-gray-800)",
-      padding: "var(--sl-spacing-medium)",
-    },
-    "& .User": {
-      width: "100%",
-    },
-    "& .Score": {
-      width: "auto",
-      whiteSpace: "nowrap",
-    },
-  },
-};
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-const vanillaStyle = `
-	:host{
-		display: block;
-	}
-`;
-function LeaderboardView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-  const { states, data, elements } = props;
-  const { styles } = states;
-  if (states.loading)
-    return (index.h("div", { class: sheet.classes.Leaderboard },
-      index.h("style", { type: "text/css" },
-        styleString,
-        vanillaStyle),
-      elements.loadingstate));
-  let userSeenFlag = false;
-  return (index.h("div", { class: sheet.classes.Leaderboard },
-    index.h("style", { type: "text/css" },
-      styleString,
-      vanillaStyle),
-    index.h("table", null,
-      index.h("tr", null,
-        styles.showRank && index.h("th", { class: "Rank" }, styles.rankheading),
-        index.h("th", { class: "User" }, styles.usersheading),
-        index.h("th", { class: "Score" }, styles.statsheading)),
-      !states.hasLeaders && (index.h("tr", null,
-        index.h("td", { colSpan: 100 }, elements.empty))), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
-      _a.map((user) => {
-        var _a, _b;
-        if (user.rowNumber === ((_a = data.userRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
-          userSeenFlag = true;
-        return (index.h("tr", { class: user.rowNumber === ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rowNumber) ? "highlight" : "" },
-          styles.showRank && index.h("td", { class: "Rank" }, user.rank),
-          index.h("td", { class: "User" }, user.firstName && user.lastInitial
-            ? user.firstName + " " + user.lastInitial
-            : user.firstName || user.lastInitial
-              ? user.firstName || user.lastInitial
-              : styles.anonymousUser || "Anonymous User"),
-          index.h("td", { class: "Score" }, user.value)));
-      }),
-      !userSeenFlag && data.showUser && (index.h("tr", null,
-        index.h("td", { colSpan: 100, class: "ellipses" },
-          index.h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
-      !userSeenFlag && data.showUser && (index.h("tr", { class: "highlight" },
-        styles.showRank && (index.h("td", { class: "Rank" }, ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
-        index.h("td", { class: "User" }, ((_c = data.userRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.userRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
-          ? ((_e = data.userRank) === null || _e === void 0 ? void 0 : _e.firstName) + " " + ((_f = data.userRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
-          : ((_g = data.userRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.userRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
-            ? ((_j = data.userRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.userRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
-            : styles.anonymousUser || "Anonymous User"),
-        index.h("td", { class: "Score" }, ((_l = data.userRank) === null || _l === void 0 ? void 0 : _l.value) || "0"))))));
-}
-
-const GET_LEADERBOARD = index_module.dist.gql `
-  query ($type: String!, $filter: UserLeaderboardFilterInput) {
-    userLeaderboard(type: $type, filter: $filter) {
-      dateModified
-      rows {
-        value
-        firstName
-        lastInitial
-        rank {
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
-`;
-const GET_RANK = index_module.dist.gql `
-  query ($type: String!, $filter: UserLeaderboardFilterInput) {
-    viewer {
-      ... on User {
-        firstName
-        lastInitial
-        leaderboardRank(type: $type, filter: $filter) {
-          value
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
-`;
-function useLeaderboard(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-  const programId = index_module.M();
-  const user = index_module.ne();
-  const variables = {
-    type: props.leaderboardType,
-    filter: { programId_eq: programId },
-  };
-  if (props.interval) {
-    variables.filter["interval"] = props.interval;
-  }
-  const { data: leaderboardData, loading: loadingLeaderboard } = index_module.mn(GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const { data: rankData } = index_module.mn(GET_RANK, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const leaderboardRows = (_a = leaderboardData === null || leaderboardData === void 0 ? void 0 : leaderboardData.userLeaderboard) === null || _a === void 0 ? void 0 : _a.rows;
-  const flattenedLeaderboard = getFlattenedLeaderboard(leaderboardRows);
-  const sortedLeaderboard = flattenedLeaderboard === null || flattenedLeaderboard === void 0 ? void 0 : flattenedLeaderboard.sort(function (a, b) {
-    return a.rank - b.rank;
-  });
-  function getFlattenedLeaderboard(leaderboardRows) {
-    return leaderboardRows === null || leaderboardRows === void 0 ? void 0 : leaderboardRows.flatMap((user) => {
-      var _a, _b;
-      return ({
-        value: user.value,
-        firstName: user.firstName,
-        lastInitial: user.lastInitial,
-        rank: (_a = user.rank) === null || _a === void 0 ? void 0 : _a[props.rankType],
-        rowNumber: (_b = user.rank) === null || _b === void 0 ? void 0 : _b.rowNumber,
-      });
-    });
-  }
-  console.log(rankData);
-  const viewingUser = {
-    value: (_c = (_b = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _b === void 0 ? void 0 : _b.leaderboardRank) === null || _c === void 0 ? void 0 : _c.value,
-    firstName: (_d = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _d === void 0 ? void 0 : _d.firstName,
-    lastInitial: (_e = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _e === void 0 ? void 0 : _e.lastInitial,
-    rank: (_g = (_f = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _f === void 0 ? void 0 : _f.leaderboardRank) === null || _g === void 0 ? void 0 : _g[props.rankType],
-    rowNumber: (_j = (_h = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _h === void 0 ? void 0 : _h.leaderboardRank) === null || _j === void 0 ? void 0 : _j.rowNumber,
-  };
-  return {
-    states: {
-      loading: loadingLeaderboard,
-      hasLeaders: (sortedLeaderboard === null || sortedLeaderboard === void 0 ? void 0 : sortedLeaderboard.length) > 0,
-      styles: props,
-    },
-    data: {
-      leaderboard: sortedLeaderboard,
-      rankType: props.rankType,
-      userRank: viewingUser,
-      showUser: props.showUser,
-    },
-    elements: {
-      empty: props.empty,
-      loadingstate: props.loadingstate,
-    },
-  };
-}
-
-exports.LeaderboardView = LeaderboardView;
-exports.ShadowViewAddon = ShadowViewAddon;
-exports.useLeaderboard = useLeaderboard;
-exports.withShadowView = withShadowView;

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

@@ -1,98 +0,0 @@
-import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './stencil-hooks.module-2f159754.js';
-import './use-callback-d8ef4b5d.js';
-import { k } from './index.module-ec3dcc82.js';
-import './extends-c31f1eff.js';
-import { c as cjs } from './cjs-bdfb4486.js';
-import './JSS-96eeab98.js';
-import { w as withShadowView, u as useLeaderboard, L as LeaderboardView } from './useLeaderboard-b670847e.js';
-
-const sqmLeaderboardCss = ":host{display:block}:host([hidden]){display:none}table{width:100%;border-collapse:collapse}th{font-size:var(--sl-font-size-small);font-weight:var(--sl-font-weight-semibold);text-align:left}tr:not(:first-child){border-top:1px solid var(--sl-color-neutral-200)}td{font-size:var(--sl-font-size-medium);font-weight:var(--sl-font-weight-normal)}.ellipses{text-align:center;padding:0;color:var(--sl-color-neutral-500)}.highlight{background:var(--sl-color-primary-50)}td,th{color:var(--sl-color-gray-800);padding:var(--sl-spacing-medium)}th{padding:var(--sl-spacing-medium);padding-top:0}.User{width:100%}.Score{width:auto;white-space:nowrap}";
-
-const Leaderboard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * @uiName Show viewing user's rank
-     */
-    this.showUser = true;
-    /**
-     * @uiName Title displayed for users without names
-     */
-    this.anonymousUser = "Anonymous User";
-    /**
-     * @uiName Empty State Image
-     */
-    this.emptyStateImage = "https://i.imgur.com/KPGnPF8.png";
-    /**
-     * @uiName Empty State Header
-     */
-    this.emptyStateHeader = "View your rank in the leaderboard";
-    /**
-     * @uiName Empty State Description
-     */
-    this.emptyStateText = "Be the first to refer a friend and reach the top of the leaderboard";
-    this.ignored = true;
-    h(this);
-    withShadowView(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = {
-      empty: h$1(EmptySlot, null),
-      loadingstate: h$1(LoadingSlot, null),
-      usersheading: this.usersheading,
-      statsheading: this.statsheading,
-      rankType: this.rankType,
-      leaderboardType: this.leaderboardType,
-      anonymousUser: this.anonymousUser,
-      interval: this.interval,
-      showUser: this.showUser,
-      showRank: this.showRank,
-    };
-    const demoProps = { ...props, demoData: this.demoData };
-    const viewprops = k()
-      ? useLeaderboardDemo(demoProps)
-      : useLeaderboard(props);
-    return (h$1(LeaderboardView, Object.assign({}, viewprops), h$1("slot", null)));
-  }
-};
-function EmptySlot() {
-  return (h$1("slot", { name: "empty" }, h$1("sqm-portal-container", { padding: "xxxx-large", gap: "medium" }, h$1("sqm-image", { "image-url": this.emptyStateImage, "max-width": "100px" }), h$1("sqm-titled-section", { "label-margin": "xxx-small", align: "center" }, h$1("sqm-text", { slot: "label" }, h$1("h3", null, this.emptyStateHeader)), h$1("sqm-text", { slot: "content" }, this.emptyStateText)))));
-}
-function LoadingSlot() {
-  return (h$1("slot", { name: "loadingstate" }, h$1("table", null, [...Array(10)].map(() => {
-    return (h$1("tr", null, h$1("td", null, h$1("sl-skeleton", null))));
-  }))));
-}
-function useLeaderboardDemo(props) {
-  return cjs({
-    states: {
-      loading: false,
-      hasLeaders: true,
-      styles: {
-        usersheading: props.usersheading
-          ? props.usersheading
-          : "TOP REFERRERS",
-        statsheading: props.statsheading ? props.statsheading : "NEW CUSTOMERS",
-      },
-    },
-    data: {
-      rankType: "rowNumber",
-      leaderboard: [
-        { firstName: "Viktor", lastInitial: "V", value: 82, rank: 1 },
-        { firstName: "MF", lastInitial: "D", value: 73, rank: 2 },
-        { firstName: "Freddie", lastInitial: "G", value: 64, rank: 3 },
-        { firstName: "Benny", lastInitial: "B", value: 55, rank: 4 },
-        { firstName: "Mos", lastInitial: "D", value: 46, rank: 5 },
-      ],
-    },
-    elements: {
-      empty: h$1(EmptySlot, null),
-      loadingstate: h$1(LoadingSlot, null),
-    },
-  }, props.demoProps || {}, { arrayMerge: (_, a) => a });
-}
-Leaderboard.style = sqmLeaderboardCss;
-
-export { Leaderboard as sqm_leaderboard };

package/dist/esm/useLeaderboard-b670847e.js

@@ -1,225 +0,0 @@
-import { g as getElement, h } from './index-17b4da69.js';
-import { d as dist, M, n as ne, b as mn } from './index.module-ec3dcc82.js';
-import { c as createStyleSheet } from './JSS-96eeab98.js';
-
-const map = new Map();
-function withShadowView(component) {
-  // TODO: Could only do this if rendered in a Stencilbook environment to prevent unintended side-effects
-  const element = getElement(component);
-  let renderFn = component["render"].bind(component);
-  const newRenderFn = () => {
-    const key = element.getAttribute("stencilbook-shadow-view");
-    if (key) {
-      const value = map.get(key);
-      if (value) {
-        return value;
-      }
-    }
-    return renderFn();
-  };
-  component["render"] = newRenderFn;
-}
-/**
- * Any story that defines `parameters.tagname` will be used as a wrapper component around the view
- */
-const ShadowViewAddon = ({ story }, children) => {
-  var _a;
-  let TagName = (_a = story.parent.parameters) === null || _a === void 0 ? void 0 : _a.tagname;
-  if (!TagName)
-    return children;
-  const randomInt = Math.round(Math.random() * 100000);
-  map.set(randomInt + "", children);
-  const RandomTagName = "stencilbook-shawdow-view-" + randomInt;
-  // This will only re-render when the tag name changes, so we use a random tag name every time.
-  // Altneratively we could try to trick Stencil to call `forceUpdate` every time.
-  return (h(RandomTagName, null,
-    h(TagName, { "stencilbook-shadow-view": randomInt })));
-};
-
-const style = {
-  Leaderboard: {
-    "& table": {
-      width: "100%",
-      borderCollapse: "collapse",
-    },
-    "& th": {
-      textAlign: "left",
-      padding: "var(--sl-spacing-medium)",
-      paddingTop: "0",
-      fontSize: "var(--sl-font-size-medium)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-    },
-    "& tr:not(:first-child)": {
-      borderTop: "1px solid var(--sl-color-neutral-200)",
-    },
-    "& td": {
-      fontSize: "var(--sl-font-size-medium)",
-      fontWeight: "var(--sl-font-weight-normal)",
-    },
-    "& .ellipses": {
-      textAlign: "center",
-      padding: "0",
-      color: "var(--sl-color-neutral-500)",
-    },
-    "& .highlight": {
-      background: "var(--sl-color-primary-50)",
-    },
-    "& td, th": {
-      color: "var(--sl-color-gray-800)",
-      padding: "var(--sl-spacing-medium)",
-    },
-    "& .User": {
-      width: "100%",
-    },
-    "& .Score": {
-      width: "auto",
-      whiteSpace: "nowrap",
-    },
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-const vanillaStyle = `
-	:host{
-		display: block;
-	}
-`;
-function LeaderboardView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-  const { states, data, elements } = props;
-  const { styles } = states;
-  if (states.loading)
-    return (h("div", { class: sheet.classes.Leaderboard },
-      h("style", { type: "text/css" },
-        styleString,
-        vanillaStyle),
-      elements.loadingstate));
-  let userSeenFlag = false;
-  return (h("div", { class: sheet.classes.Leaderboard },
-    h("style", { type: "text/css" },
-      styleString,
-      vanillaStyle),
-    h("table", null,
-      h("tr", null,
-        styles.showRank && h("th", { class: "Rank" }, styles.rankheading),
-        h("th", { class: "User" }, styles.usersheading),
-        h("th", { class: "Score" }, styles.statsheading)),
-      !states.hasLeaders && (h("tr", null,
-        h("td", { colSpan: 100 }, elements.empty))), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
-      _a.map((user) => {
-        var _a, _b;
-        if (user.rowNumber === ((_a = data.userRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
-          userSeenFlag = true;
-        return (h("tr", { class: user.rowNumber === ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rowNumber) ? "highlight" : "" },
-          styles.showRank && h("td", { class: "Rank" }, user.rank),
-          h("td", { class: "User" }, user.firstName && user.lastInitial
-            ? user.firstName + " " + user.lastInitial
-            : user.firstName || user.lastInitial
-              ? user.firstName || user.lastInitial
-              : styles.anonymousUser || "Anonymous User"),
-          h("td", { class: "Score" }, user.value)));
-      }),
-      !userSeenFlag && data.showUser && (h("tr", null,
-        h("td", { colSpan: 100, class: "ellipses" },
-          h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
-      !userSeenFlag && data.showUser && (h("tr", { class: "highlight" },
-        styles.showRank && (h("td", { class: "Rank" }, ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
-        h("td", { class: "User" }, ((_c = data.userRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.userRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
-          ? ((_e = data.userRank) === null || _e === void 0 ? void 0 : _e.firstName) + " " + ((_f = data.userRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
-          : ((_g = data.userRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.userRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
-            ? ((_j = data.userRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.userRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
-            : styles.anonymousUser || "Anonymous User"),
-        h("td", { class: "Score" }, ((_l = data.userRank) === null || _l === void 0 ? void 0 : _l.value) || "0"))))));
-}
-
-const GET_LEADERBOARD = dist.gql `
-  query ($type: String!, $filter: UserLeaderboardFilterInput) {
-    userLeaderboard(type: $type, filter: $filter) {
-      dateModified
-      rows {
-        value
-        firstName
-        lastInitial
-        rank {
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
-`;
-const GET_RANK = dist.gql `
-  query ($type: String!, $filter: UserLeaderboardFilterInput) {
-    viewer {
-      ... on User {
-        firstName
-        lastInitial
-        leaderboardRank(type: $type, filter: $filter) {
-          value
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
-`;
-function useLeaderboard(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-  const programId = M();
-  const user = ne();
-  const variables = {
-    type: props.leaderboardType,
-    filter: { programId_eq: programId },
-  };
-  if (props.interval) {
-    variables.filter["interval"] = props.interval;
-  }
-  const { data: leaderboardData, loading: loadingLeaderboard } = mn(GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const { data: rankData } = mn(GET_RANK, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const leaderboardRows = (_a = leaderboardData === null || leaderboardData === void 0 ? void 0 : leaderboardData.userLeaderboard) === null || _a === void 0 ? void 0 : _a.rows;
-  const flattenedLeaderboard = getFlattenedLeaderboard(leaderboardRows);
-  const sortedLeaderboard = flattenedLeaderboard === null || flattenedLeaderboard === void 0 ? void 0 : flattenedLeaderboard.sort(function (a, b) {
-    return a.rank - b.rank;
-  });
-  function getFlattenedLeaderboard(leaderboardRows) {
-    return leaderboardRows === null || leaderboardRows === void 0 ? void 0 : leaderboardRows.flatMap((user) => {
-      var _a, _b;
-      return ({
-        value: user.value,
-        firstName: user.firstName,
-        lastInitial: user.lastInitial,
-        rank: (_a = user.rank) === null || _a === void 0 ? void 0 : _a[props.rankType],
-        rowNumber: (_b = user.rank) === null || _b === void 0 ? void 0 : _b.rowNumber,
-      });
-    });
-  }
-  console.log(rankData);
-  const viewingUser = {
-    value: (_c = (_b = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _b === void 0 ? void 0 : _b.leaderboardRank) === null || _c === void 0 ? void 0 : _c.value,
-    firstName: (_d = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _d === void 0 ? void 0 : _d.firstName,
-    lastInitial: (_e = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _e === void 0 ? void 0 : _e.lastInitial,
-    rank: (_g = (_f = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _f === void 0 ? void 0 : _f.leaderboardRank) === null || _g === void 0 ? void 0 : _g[props.rankType],
-    rowNumber: (_j = (_h = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _h === void 0 ? void 0 : _h.leaderboardRank) === null || _j === void 0 ? void 0 : _j.rowNumber,
-  };
-  return {
-    states: {
-      loading: loadingLeaderboard,
-      hasLeaders: (sortedLeaderboard === null || sortedLeaderboard === void 0 ? void 0 : sortedLeaderboard.length) > 0,
-      styles: props,
-    },
-    data: {
-      leaderboard: sortedLeaderboard,
-      rankType: props.rankType,
-      userRank: viewingUser,
-      showUser: props.showUser,
-    },
-    elements: {
-      empty: props.empty,
-      loadingstate: props.loadingstate,
-    },
-  };
-}
-
-export { LeaderboardView as L, ShadowViewAddon as S, useLeaderboard as u, withShadowView as w };