@saasquatch/mint-components 1.7.0-9 → 1.7.0

package/dist/collection/components/sqm-leaderboard/UseLeaderboard.stories.js

@@ -1,208 +1,208 @@
-import { h } from "@stencil/core";
-import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
-import { useEffect } from "@saasquatch/universal-hooks";
-import { setUserIdentity } from "@saasquatch/component-boilerplate";
-export default {
-  title: "Hooks / useLeaderboard",
-};
-function setupGraphQL() {
-  const id = "testestest";
-  const accountId = id;
-  const programId = "sam-partner-test-2";
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_a8b41jotf8a1v",
-    appDomain: "https://staging.referralsaasquatch.com",
-    programId,
-  };
-  useEffect(() => {
-    setUserIdentity({
-      accountId,
-      id,
-      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
-    });
-    return () => {
-      window.widgetIdent = undefined;
-      setUserIdentity(undefined);
-    };
-  }, []);
-}
-function setupOtherGraphQL() {
-  const id = "sam+klip@saasquat.ch";
-  const accountId = id;
-  const programId = "klip-referral-program";
-  const JWT = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbStrbGlwQHNhYXNxdWF0LmNoIiwiaWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCIsImVtYWlsIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJsb2NhbGUiOiJlbiJ9fQ.a2nYYrSJ81FHXlCU-Sqp_-wquQizinHBhzwzULDzimg";
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_a74miwdpofztj",
-    appDomain: "https://staging.referralsaasquatch.com",
-    programId,
-  };
-  useEffect(() => {
-    setUserIdentity({
-      accountId,
-      id,
-      jwt: JWT,
-    });
-    return () => {
-      window.widgetIdent = undefined;
-      setUserIdentity(undefined);
-    };
-  }, []);
-  return { id, accountId };
-}
-const View = (overrideProps) => {
-  const props = {
-    "leaderboard-type": "topConvertedReferrers",
-    showRank: true,
-    "rank-type": "rowNumber",
-    usersheading: "Top Referrers",
-    statsheading: "Completed Referrals",
-    interval: "",
-    // empty: <span>No Referrals</span>,
-    // loadingstate: <span>Loading</span>,
-    ...overrideProps,
-  };
-  const { leaderboardType, rankType } = props;
-  //   console.log(`View("${leaderboardType}") - CALLED`, { ...props });
-  return (h("div", { style: { marginBottom: "20px" } },
-    h("sqm-divided-layout", { direction: "row" },
-      h("div", { style: { padding: "10px" } },
-        h("b", null, "Leaderboard Type"),
-        h("pre", null, leaderboardType)),
-      h("div", { style: { padding: "10px" } },
-        h("b", null, "Rank Type"),
-        h("pre", null, rankType))),
-    h("sqm-leaderboard", Object.assign({}, props),
-      h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })),
-    h("hr", null)));
-};
-export const TopConvertedReferrers = createHookStory(() => {
-  setupGraphQL();
-  return [
-    View({}),
-    View({ rankType: "rank" }),
-    View({ rankType: "denseRank" }),
-  ];
-});
-export const TopStartedReferrers = createHookStory(() => {
-  setupGraphQL();
-  return [
-    View({
-      leaderboardType: "topStartedReferrers",
-      statsheading: "New Referrals",
-    }),
-    View({
-      leaderboardType: "topStartedReferrers",
-      rankType: "rank",
-      statsheading: "New Referrals",
-    }),
-    View({
-      leaderboardType: "topStartedReferrers",
-      rankType: "denseRank",
-      statsheading: "New Referrals",
-    }),
-  ];
-});
-export const topPointEarners = createHookStory(() => {
-  setupGraphQL();
-  return [
-    View({
-      leaderboardType: "topPointEarners",
-      statsheading: "Points",
-      usersheading: "Top Earners",
-    }),
-    View({
-      leaderboardType: "topPointEarners",
-      rankType: "rank",
-      statsheading: "Points",
-      usersheading: "Top Earners",
-    }),
-    View({
-      leaderboardType: "topPointEarners",
-      rankType: "denseRank",
-      statsheading: "Points",
-      usersheading: "Top Earners",
-    }),
-  ];
-});
-export const globalLeaderboards = createHookStory(() => {
-  setupGraphQL();
-  return [
-    View({
-      leaderboardType: "topPointEarners",
-      rankType: "rank",
-      statsheading: "Points",
-      usersheading: "Top Earners",
-      programId: "",
-    }),
-    View({
-      leaderboardType: "topStartedReferrers",
-      rankType: "rank",
-      statsheading: "Referrals",
-      programId: "",
-    }),
-    View({
-      leaderboardType: "topConvertedReferrers",
-      rankType: "rank",
-      statsheading: "Referrals",
-      programId: "",
-    }),
-  ];
-});
-export const FiveResults = createHookStory(() => {
-  setupGraphQL();
-  return [
-    View({
-      leaderboardType: "topStartedReferrers",
-      maxRows: 5,
-      statsheading: "Referrals",
-    }),
-  ];
-});
-export const EmptyLeaderboard = createHookStory(() => {
-  setupOtherGraphQL();
-  return [
-    View({
-      leaderboardType: "topStartedReferrers",
-      statsheading: "New Referrals",
-      interval: "2021-02-11T08:00:00.000Z/2021-02-13T08:00:00.000Z",
-    }),
-    View({
-      leaderboardType: "topStartedReferrers",
-      rankType: "rank",
-      statsheading: "New Referrals",
-      interval: "2021-02-11T08:00:00.000Z/2021-02-13T08:00:00.000Z",
-    }),
-    View({
-      leaderboardType: "topStartedReferrers",
-      rankType: "denseRank",
-      statsheading: "New Referrals",
-      interval: "2021-02-11T08:00:00.000Z/2021-02-13T08:00:00.000Z",
-    }),
-  ];
-});
-export const DemoHook = createHookStory(() => {
-  return (h("sqm-leaderboard", { usersheading: "Referrer", statsheading: "Referrals", "rank-type": "rank", "leaderboard-type": "topStartedReferrers", rankheading: "Rank", "show-rank": "true" },
-    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })));
-});
-export const DemoHookEmpty = createHookStory(() => {
-  return (h("sqm-leaderboard", { usersheading: "Referrer", statsheading: "Referrals", "rank-type": "rank", "leaderboard-type": "topStartedReferrers", rankheading: "Rank", "show-rank": "true", demoData: {
-      data: {
-        rankType: "rank",
-        leaderboard: [],
-      },
-      states: {
-        loading: false,
-        hasLeaders: false,
-        styles: {
-          usersheading: "Top referrers",
-          statsheading: "New customers",
-          rankheading: "Rank",
-          anonymousUser: "Anonymous User",
-          showRank: true,
-        },
-      },
-    } },
-    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })));
-});
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { setUserIdentity } from "@saasquatch/component-boilerplate";
+export default {
+  title: "Hooks / useLeaderboard",
+};
+function setupGraphQL() {
+  const id = "testestest";
+  const accountId = id;
+  const programId = "sam-partner-test-2";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a8b41jotf8a1v",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+}
+function setupOtherGraphQL() {
+  const id = "sam+klip@saasquat.ch";
+  const accountId = id;
+  const programId = "klip-referral-program";
+  const JWT = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbStrbGlwQHNhYXNxdWF0LmNoIiwiaWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCIsImVtYWlsIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJsb2NhbGUiOiJlbiJ9fQ.a2nYYrSJ81FHXlCU-Sqp_-wquQizinHBhzwzULDzimg";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a74miwdpofztj",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: JWT,
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+const View = (overrideProps) => {
+  const props = {
+    "leaderboard-type": "topConvertedReferrers",
+    showRank: true,
+    "rank-type": "rowNumber",
+    usersheading: "Top Referrers",
+    statsheading: "Completed Referrals",
+    interval: "",
+    // empty: <span>No Referrals</span>,
+    // loadingstate: <span>Loading</span>,
+    ...overrideProps,
+  };
+  const { leaderboardType, rankType } = props;
+  //   console.log(`View("${leaderboardType}") - CALLED`, { ...props });
+  return (h("div", { style: { marginBottom: "20px" } },
+    h("sqm-divided-layout", { direction: "row" },
+      h("div", { style: { padding: "10px" } },
+        h("b", null, "Leaderboard Type"),
+        h("pre", null, leaderboardType)),
+      h("div", { style: { padding: "10px" } },
+        h("b", null, "Rank Type"),
+        h("pre", null, rankType))),
+    h("sqm-leaderboard", Object.assign({}, props),
+      h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })),
+    h("hr", null)));
+};
+export const TopConvertedReferrers = createHookStory(() => {
+  setupGraphQL();
+  return [
+    View({}),
+    View({ rankType: "rank" }),
+    View({ rankType: "denseRank" }),
+  ];
+});
+export const TopStartedReferrers = createHookStory(() => {
+  setupGraphQL();
+  return [
+    View({
+      leaderboardType: "topStartedReferrers",
+      statsheading: "New Referrals",
+    }),
+    View({
+      leaderboardType: "topStartedReferrers",
+      rankType: "rank",
+      statsheading: "New Referrals",
+    }),
+    View({
+      leaderboardType: "topStartedReferrers",
+      rankType: "denseRank",
+      statsheading: "New Referrals",
+    }),
+  ];
+});
+export const topPointEarners = createHookStory(() => {
+  setupGraphQL();
+  return [
+    View({
+      leaderboardType: "topPointEarners",
+      statsheading: "Points",
+      usersheading: "Top Earners",
+    }),
+    View({
+      leaderboardType: "topPointEarners",
+      rankType: "rank",
+      statsheading: "Points",
+      usersheading: "Top Earners",
+    }),
+    View({
+      leaderboardType: "topPointEarners",
+      rankType: "denseRank",
+      statsheading: "Points",
+      usersheading: "Top Earners",
+    }),
+  ];
+});
+export const globalLeaderboards = createHookStory(() => {
+  setupGraphQL();
+  return [
+    View({
+      leaderboardType: "topPointEarners",
+      rankType: "rank",
+      statsheading: "Points",
+      usersheading: "Top Earners",
+      programId: "",
+    }),
+    View({
+      leaderboardType: "topStartedReferrers",
+      rankType: "rank",
+      statsheading: "Referrals",
+      programId: "",
+    }),
+    View({
+      leaderboardType: "topConvertedReferrers",
+      rankType: "rank",
+      statsheading: "Referrals",
+      programId: "",
+    }),
+  ];
+});
+export const FiveResults = createHookStory(() => {
+  setupGraphQL();
+  return [
+    View({
+      leaderboardType: "topStartedReferrers",
+      maxRows: 5,
+      statsheading: "Referrals",
+    }),
+  ];
+});
+export const EmptyLeaderboard = createHookStory(() => {
+  setupOtherGraphQL();
+  return [
+    View({
+      leaderboardType: "topStartedReferrers",
+      statsheading: "New Referrals",
+      interval: "2021-02-11T08:00:00.000Z/2021-02-13T08:00:00.000Z",
+    }),
+    View({
+      leaderboardType: "topStartedReferrers",
+      rankType: "rank",
+      statsheading: "New Referrals",
+      interval: "2021-02-11T08:00:00.000Z/2021-02-13T08:00:00.000Z",
+    }),
+    View({
+      leaderboardType: "topStartedReferrers",
+      rankType: "denseRank",
+      statsheading: "New Referrals",
+      interval: "2021-02-11T08:00:00.000Z/2021-02-13T08:00:00.000Z",
+    }),
+  ];
+});
+export const DemoHook = createHookStory(() => {
+  return (h("sqm-leaderboard", { usersheading: "Referrer", statsheading: "Referrals", "rank-type": "rank", "leaderboard-type": "topStartedReferrers", rankheading: "Rank", "show-rank": "true" },
+    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })));
+});
+export const DemoHookEmpty = createHookStory(() => {
+  return (h("sqm-leaderboard", { usersheading: "Referrer", statsheading: "Referrals", "rank-type": "rank", "leaderboard-type": "topStartedReferrers", rankheading: "Rank", "show-rank": "true", demoData: {
+      data: {
+        rankType: "rank",
+        leaderboard: [],
+      },
+      states: {
+        loading: false,
+        hasLeaders: false,
+        styles: {
+          usersheading: "Top referrers",
+          statsheading: "New customers",
+          rankheading: "Rank",
+          anonymousUser: "Anonymous User",
+          showRank: true,
+        },
+      },
+    } },
+    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })));
+});

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard-view.js

@@ -1,101 +1,101 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-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;
-	}
-`;
-export 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));
-  if (!states.hasLeaders)
-    return elements.empty;
-  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)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
-      _a.map((user) => {
-        var _a, _b;
-        if (user.rowNumber === ((_a = data.viewerRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
-          userSeenFlag = true;
-        return (h("tr", { class: !styles.hideViewer &&
-            user.rowNumber === ((_b = data.viewerRank) === 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),
-          h("td", { class: "Score" }, user.textValue)));
-      }),
-      !userSeenFlag && !styles.hideViewer && (h("tr", null,
-        h("td", { colSpan: 100, class: "ellipses" },
-          h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
-      !userSeenFlag && !styles.hideViewer && (h("tr", { class: "highlight" },
-        styles.showRank && (h("td", { class: "Rank" }, ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
-        h("td", { class: "User" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.viewerRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
-          ? ((_e = data.viewerRank) === null || _e === void 0 ? void 0 : _e.firstName) +
-            " " + ((_f = data.viewerRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
-          : ((_g = data.viewerRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.viewerRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
-            ? ((_j = data.viewerRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.viewerRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
-            : styles.anonymousUser),
-        h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.textValue) || "0"))))));
-}
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+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;
+	}
+`;
+export 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));
+  if (!states.hasLeaders)
+    return elements.empty;
+  let userSeenFlag = false;
+  return (h("div", { class: sheet.classes.Leaderboard, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("table", { part: "sqm-table" },
+      h("tr", null,
+        styles.showRank && h("th", { class: "Rank" }, styles.rankheading),
+        h("th", { class: "User" }, styles.usersheading),
+        h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
+      _a.map((user) => {
+        var _a, _b;
+        if (user.rowNumber === ((_a = data.viewerRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
+          userSeenFlag = true;
+        return (h("tr", { class: !styles.hideViewer &&
+            user.rowNumber === ((_b = data.viewerRank) === 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),
+          h("td", { class: "Score" }, user.textValue)));
+      }),
+      !userSeenFlag && !styles.hideViewer && (h("tr", null,
+        h("td", { colSpan: 100, class: "ellipses" },
+          h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
+      !userSeenFlag && !styles.hideViewer && (h("tr", { class: "highlight" },
+        styles.showRank && (h("td", { class: "Rank" }, ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
+        h("td", { class: "User" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.viewerRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
+          ? ((_e = data.viewerRank) === null || _e === void 0 ? void 0 : _e.firstName) +
+            " " + ((_f = data.viewerRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
+          : ((_g = data.viewerRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.viewerRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
+            ? ((_j = data.viewerRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.viewerRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
+            : styles.anonymousUser),
+        h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.textValue) || "0"))))));
+}