@saasquatch/mint-components 1.3.3-4 → 1.4.0-0

package/dist/collection/stories/UseShareLink.stories.js

@@ -1,59 +1,59 @@
-import { setUserIdentity } from "@saasquatch/component-boilerplate";
-import { useEffect } from "@saasquatch/universal-hooks";
-import { h } from "@stencil/core";
-import { ShareLinkView } from "../components/sqm-share-link/sqm-share-link-view";
-import { useShareLink } from "../components/sqm-share-link/useShareLink";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
-export default {
-  title: "Hooks / useShareLink",
-};
-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);
-    };
-  }, []);
-}
-export const BareBonesView = createHookStory(() => {
-  setupGraphQL();
-  const res = useShareLink({
-    programId: "sam-partner-test-2",
-    tooltiplifespan: 0,
-    tooltiptext: "",
-  });
-  return (h("div", null,
-    "Sharelink:",
-    " ",
-    h("code", { style: { borderStyle: "solid", borderWidth: "1px", padding: "2px" } }, res.shareString)));
-});
-export const RegularView = createHookStory(() => {
-  setupGraphQL();
-  return (h(ShareLinkView, Object.assign({}, useShareLink({
-    programId: "sam-partner-test-2",
-    tooltiptext: "Copied to clipboard",
-    tooltiplifespan: 1000,
-  }))));
-});
-export const FastTooltip = createHookStory(() => {
-  setupGraphQL();
-  return (h(ShareLinkView, Object.assign({}, useShareLink({
-    programId: "sam-partner-test-2",
-    tooltiptext: "⠀⠀⠀⠀⠀⠀⠀⠀⠀HELLO THERE!!!\n⠀⠀⠀⡯⡯⡾⠝⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢊⠘⡮⣣⠪⠢⡑⡌\n⠀⠀⠀⠟⠝⠈⠀⠀⠀⠡⠀⠠⢈⠠⢐⢠⢂⢔⣐⢄⡂⢔⠀⡁⢉⠸⢨⢑⠕⡌\n⠀⠀⡀⠁⠀⠀⠀⡀⢂⠡⠈⡔⣕⢮⣳⢯⣿⣻⣟⣯⣯⢷⣫⣆⡂⠀⠀⢐⠑⡌\n⢀⠠⠐⠈⠀⢀⢂⠢⡂⠕⡁⣝⢮⣳⢽⡽⣾⣻⣿⣯⡯⣟⣞⢾⢜⢆⠀⡀⠀⠪\n⣬⠂⠀⠀⢀⢂⢪⠨⢂⠥⣺⡪⣗⢗⣽⢽⡯⣿⣽⣷⢿⡽⡾⡽⣝⢎⠀⠀⠀⢡\n⣿⠀⠀⠀⢂⠢⢂⢥⢱⡹⣪⢞⡵⣻⡪⡯⡯⣟⡾⣿⣻⡽⣯⡻⣪⠧⠑⠀⠁⢐\n⣿⠀⠀⠀⠢⢑⠠⠑⠕⡝⡎⡗⡝⡎⣞⢽⡹⣕⢯⢻⠹⡹⢚⠝⡷⡽⡨⠀⠀⢔\n⣿⡯⠀⢈⠈⢄⠂⠂⠐⠀⠌⠠⢑⠱⡱⡱⡑⢔⠁⠀⡀⠐⠐⠐⡡⡹⣪⠀⠀⢘\n⣿⣽⠀⡀⡊⠀⠐⠨⠈⡁⠂⢈⠠⡱⡽⣷⡑⠁⠠⠑⠀⢉⢇⣤⢘⣪⢽⠀⢌⢎\n⣿⢾⠀⢌⠌⠀⡁⠢⠂⠐⡀⠀⢀⢳⢽⣽⡺⣨⢄⣑⢉⢃⢭⡲⣕⡭⣹⠠⢐⢗\n⣿⡗⠀⠢⠡⡱⡸⣔⢵⢱⢸⠈⠀⡪⣳⣳⢹⢜⡵⣱⢱⡱⣳⡹⣵⣻⢔⢅⢬⡷\n⣷⡇⡂⠡⡑⢕⢕⠕⡑⠡⢂⢊⢐⢕⡝⡮⡧⡳⣝⢴⡐⣁⠃⡫⡒⣕⢏⡮⣷⡟\n⣷⣻⣅⠑⢌⠢⠁⢐⠠⠑⡐⠐⠌⡪⠮⡫⠪⡪⡪⣺⢸⠰⠡⠠⠐⢱⠨⡪⡪⡰\n⣯⢷⣟⣇⡂⡂⡌⡀⠀⠁⡂⠅⠂⠀⡑⡄⢇⠇⢝⡨⡠⡁⢐⠠⢀⢪⡐⡜⡪⡊\n⣿⢽⡾⢹⡄⠕⡅⢇⠂⠑⣴⡬⣬⣬⣆⢮⣦⣷⣵⣷⡗⢃⢮⠱⡸⢰⢱⢸⢨⢌\n⣯⢯⣟⠸⣳⡅⠜⠔⡌⡐⠈⠻⠟⣿⢿⣿⣿⠿⡻⣃⠢⣱⡳⡱⡩⢢⠣⡃⠢⠁\n⡯⣟⣞⡇⡿⣽⡪⡘⡰⠨⢐⢀⠢⢢⢄⢤⣰⠼⡾⢕⢕⡵⣝⠎⢌⢪⠪⡘⡌⠀\n⡯⣳⠯⠚⢊⠡⡂⢂⠨⠊⠔⡑⠬⡸⣘⢬⢪⣪⡺⡼⣕⢯⢞⢕⢝⠎⢻⢼⣀⠀\n⠁⡂⠔⡁⡢⠣⢀⠢⠀⠅⠱⡐⡱⡘⡔⡕⡕⣲⡹⣎⡮⡏⡑⢜⢼⡱⢩⣗⣯⣟\n⢀⢂⢑⠀⡂⡃⠅⠊⢄⢑⠠⠑⢕⢕⢝⢮⢺⢕⢟⢮⢊⢢⢱⢄⠃⣇⣞⢞⣞⢾\n⢀⠢⡑⡀⢂⢊⠠⠁⡂⡐⠀⠅⡈⠪⠪⠪⠣⠫⠑⡁⢔⠕⣜⣜⢦⡰⡎⡯⡾⡽",
-    tooltiplifespan: 500,
-  }))));
-});
+import { setUserIdentity } from "@saasquatch/component-boilerplate";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { ShareLinkView } from "../components/sqm-share-link/sqm-share-link-view";
+import { useShareLink } from "../components/sqm-share-link/useShareLink";
+import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+export default {
+  title: "Hooks / useShareLink",
+};
+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);
+    };
+  }, []);
+}
+export const BareBonesView = createHookStory(() => {
+  setupGraphQL();
+  const res = useShareLink({
+    programId: "sam-partner-test-2",
+    tooltiplifespan: 0,
+    tooltiptext: "",
+  });
+  return (h("div", null,
+    "Sharelink:",
+    " ",
+    h("code", { style: { borderStyle: "solid", borderWidth: "1px", padding: "2px" } }, res.shareString)));
+});
+export const RegularView = createHookStory(() => {
+  setupGraphQL();
+  return (h(ShareLinkView, Object.assign({}, useShareLink({
+    programId: "sam-partner-test-2",
+    tooltiptext: "Copied to clipboard",
+    tooltiplifespan: 1000,
+  }))));
+});
+export const FastTooltip = createHookStory(() => {
+  setupGraphQL();
+  return (h(ShareLinkView, Object.assign({}, useShareLink({
+    programId: "sam-partner-test-2",
+    tooltiptext: "⠀⠀⠀⠀⠀⠀⠀⠀⠀HELLO THERE!!!\n⠀⠀⠀⡯⡯⡾⠝⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢊⠘⡮⣣⠪⠢⡑⡌\n⠀⠀⠀⠟⠝⠈⠀⠀⠀⠡⠀⠠⢈⠠⢐⢠⢂⢔⣐⢄⡂⢔⠀⡁⢉⠸⢨⢑⠕⡌\n⠀⠀⡀⠁⠀⠀⠀⡀⢂⠡⠈⡔⣕⢮⣳⢯⣿⣻⣟⣯⣯⢷⣫⣆⡂⠀⠀⢐⠑⡌\n⢀⠠⠐⠈⠀⢀⢂⠢⡂⠕⡁⣝⢮⣳⢽⡽⣾⣻⣿⣯⡯⣟⣞⢾⢜⢆⠀⡀⠀⠪\n⣬⠂⠀⠀⢀⢂⢪⠨⢂⠥⣺⡪⣗⢗⣽⢽⡯⣿⣽⣷⢿⡽⡾⡽⣝⢎⠀⠀⠀⢡\n⣿⠀⠀⠀⢂⠢⢂⢥⢱⡹⣪⢞⡵⣻⡪⡯⡯⣟⡾⣿⣻⡽⣯⡻⣪⠧⠑⠀⠁⢐\n⣿⠀⠀⠀⠢⢑⠠⠑⠕⡝⡎⡗⡝⡎⣞⢽⡹⣕⢯⢻⠹⡹⢚⠝⡷⡽⡨⠀⠀⢔\n⣿⡯⠀⢈⠈⢄⠂⠂⠐⠀⠌⠠⢑⠱⡱⡱⡑⢔⠁⠀⡀⠐⠐⠐⡡⡹⣪⠀⠀⢘\n⣿⣽⠀⡀⡊⠀⠐⠨⠈⡁⠂⢈⠠⡱⡽⣷⡑⠁⠠⠑⠀⢉⢇⣤⢘⣪⢽⠀⢌⢎\n⣿⢾⠀⢌⠌⠀⡁⠢⠂⠐⡀⠀⢀⢳⢽⣽⡺⣨⢄⣑⢉⢃⢭⡲⣕⡭⣹⠠⢐⢗\n⣿⡗⠀⠢⠡⡱⡸⣔⢵⢱⢸⠈⠀⡪⣳⣳⢹⢜⡵⣱⢱⡱⣳⡹⣵⣻⢔⢅⢬⡷\n⣷⡇⡂⠡⡑⢕⢕⠕⡑⠡⢂⢊⢐⢕⡝⡮⡧⡳⣝⢴⡐⣁⠃⡫⡒⣕⢏⡮⣷⡟\n⣷⣻⣅⠑⢌⠢⠁⢐⠠⠑⡐⠐⠌⡪⠮⡫⠪⡪⡪⣺⢸⠰⠡⠠⠐⢱⠨⡪⡪⡰\n⣯⢷⣟⣇⡂⡂⡌⡀⠀⠁⡂⠅⠂⠀⡑⡄⢇⠇⢝⡨⡠⡁⢐⠠⢀⢪⡐⡜⡪⡊\n⣿⢽⡾⢹⡄⠕⡅⢇⠂⠑⣴⡬⣬⣬⣆⢮⣦⣷⣵⣷⡗⢃⢮⠱⡸⢰⢱⢸⢨⢌\n⣯⢯⣟⠸⣳⡅⠜⠔⡌⡐⠈⠻⠟⣿⢿⣿⣿⠿⡻⣃⠢⣱⡳⡱⡩⢢⠣⡃⠢⠁\n⡯⣟⣞⡇⡿⣽⡪⡘⡰⠨⢐⢀⠢⢢⢄⢤⣰⠼⡾⢕⢕⡵⣝⠎⢌⢪⠪⡘⡌⠀\n⡯⣳⠯⠚⢊⠡⡂⢂⠨⠊⠔⡑⠬⡸⣘⢬⢪⣪⡺⡼⣕⢯⢞⢕⢝⠎⢻⢼⣀⠀\n⠁⡂⠔⡁⡢⠣⢀⠢⠀⠅⠱⡐⡱⡘⡔⡕⡕⣲⡹⣎⡮⡏⡑⢜⢼⡱⢩⣗⣯⣟\n⢀⢂⢑⠀⡂⡃⠅⠊⢄⢑⠠⠑⢕⢕⢝⢮⢺⢕⢟⢮⢊⢢⢱⢄⠃⣇⣞⢞⣞⢾\n⢀⠢⡑⡀⢂⢊⠠⠁⡂⡐⠀⠅⡈⠪⠪⠪⠣⠫⠑⡁⢔⠕⣜⣜⢦⡰⡎⡯⡾⡽",
+    tooltiplifespan: 500,
+  }))));
+});

package/dist/collection/stories/UserName.stories.js

@@ -1,14 +1,14 @@
-import { h } from "@stencil/core";
-export default {
-  title: "User Name",
-};
-export const FullStack = () => {
-  return (h("sqm-user-name", { demoData: {
-      loading: false,
-      loadingText: "...",
-      username: "Test Testerson",
-    } }));
-};
-export const FullStackDefault = () => {
-  return h("sqm-user-name", null);
-};
+import { h } from "@stencil/core";
+export default {
+  title: "User Name",
+};
+export const FullStack = () => {
+  return (h("sqm-user-name", { demoData: {
+      loading: false,
+      loadingText: "...",
+      username: "Test Testerson",
+    } }));
+};
+export const FullStackDefault = () => {
+  return h("sqm-user-name", null);
+};

package/dist/collection/utilities.js

@@ -1,21 +1,21 @@
-// import { IntlMessageFormat } from 'intl-messageformat';
-// export function formatMessage(message: string, locale: string, variables: Record<string, any>) {
-//   return new IntlMessageFormat(message, locale).format(variables);
-// }
-// TODO fix IntlMessageFormat
-import { useState, useEffect, useCallback } from "@saasquatch/universal-hooks";
-export function formatMessage(message, locale, variables) {
-  return message + locale + variables;
-}
-export function isMobile(breakPoint) {
-  const [width, setWidth] = useState(window.innerWidth);
-  const handleWindowResize = useCallback(() => setWidth(window.innerWidth), []);
-  useEffect(() => {
-    window.addEventListener("resize", handleWindowResize);
-    return () => window.removeEventListener("resize", handleWindowResize);
-  }, []);
-  return width > breakPoint ? false : true;
-}
-export function isValidColor(teststr) {
-  return CSS.supports(`(color: ${teststr})`);
-}
+// import { IntlMessageFormat } from 'intl-messageformat';
+// export function formatMessage(message: string, locale: string, variables: Record<string, any>) {
+//   return new IntlMessageFormat(message, locale).format(variables);
+// }
+// TODO fix IntlMessageFormat
+import { useState, useEffect, useCallback } from "@saasquatch/universal-hooks";
+export function formatMessage(message, locale, variables) {
+  return message + locale + variables;
+}
+export function isMobile(breakPoint) {
+  const [width, setWidth] = useState(window.innerWidth);
+  const handleWindowResize = useCallback(() => setWidth(window.innerWidth), []);
+  useEffect(() => {
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, []);
+  return width > breakPoint ? false : true;
+}
+export function isValidColor(teststr) {
+  return CSS.supports(`(color: ${teststr})`);
+}

package/dist/collection/utils/RequiredPropsError.js

@@ -1,50 +1,50 @@
-import { useHost } from "@saasquatch/component-boilerplate";
-import { useState } from "@saasquatch/universal-hooks";
-import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
-const style = {
-  IconStyle: {
-    display: "block",
-    position: "absolute",
-    top: "23px",
-  },
-  DivStyle: {
-    marginLeft: "30px",
-  },
-  Details: {
-    marginLeft: "30px",
-  },
-  Heading: {
-    display: "inline-block",
-  },
-  Alert: {
-    margin: "30px",
-  },
-};
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
-export function RequiredPropsError({ missingProps }) {
-  if (!missingProps)
-    return false;
-  const host = useHost();
-  const [detailsOpen, setDetailsOpen] = useState(false);
-  return (h("sl-alert", { type: "danger", open: true, class: sheet.classes.Alert },
-    h("style", { type: "text/css" }, styleString),
-    h("div", { slot: "icon", class: sheet.classes.IconStyle },
-      h("sl-icon", { name: "exclamation-octagon" })),
-    h("div", { class: sheet.classes.DivStyle },
-      h("h2", { class: sheet.classes.Heading }, "There was a problem loading this page"),
-      h("p", null, "There was a technical problem that prevented this page from loading. Please contact us with the link to this page.")),
-    h("details", { class: sheet.classes.Details },
-      h("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
-        detailsOpen ? "Less" : "More",
-        " details"),
-      h("p", null,
-        "Error occured while loading ",
-        `<${host.tagName.toLowerCase()}>`,
-        ". Values for the following attributes are missing:"),
-      h("ul", null, missingProps.map((prop) => (h("li", null,
-        h("strong", null, prop.attribute))))))));
-}
+import { useHost } from "@saasquatch/component-boilerplate";
+import { useState } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+const style = {
+  IconStyle: {
+    display: "block",
+    position: "absolute",
+    top: "23px",
+  },
+  DivStyle: {
+    marginLeft: "30px",
+  },
+  Details: {
+    marginLeft: "30px",
+  },
+  Heading: {
+    display: "inline-block",
+  },
+  Alert: {
+    margin: "30px",
+  },
+};
+jss.setup(preset());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+export function RequiredPropsError({ missingProps }) {
+  if (!missingProps)
+    return false;
+  const host = useHost();
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  return (h("sl-alert", { type: "danger", open: true, class: sheet.classes.Alert },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { slot: "icon", class: sheet.classes.IconStyle },
+      h("sl-icon", { name: "exclamation-octagon" })),
+    h("div", { class: sheet.classes.DivStyle },
+      h("h2", { class: sheet.classes.Heading }, "There was a problem loading this page"),
+      h("p", null, "There was a technical problem that prevented this page from loading. Please contact us with the link to this page.")),
+    h("details", { class: sheet.classes.Details },
+      h("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
+        detailsOpen ? "Less" : "More",
+        " details"),
+      h("p", null,
+        "Error occured while loading ",
+        `<${host.tagName.toLowerCase()}>`,
+        ". Values for the following attributes are missing:"),
+      h("ul", null, missingProps.map((prop) => (h("li", null,
+        h("strong", null, prop.attribute))))))));
+}

package/dist/collection/utils/isDemo.js

@@ -1,10 +1,10 @@
-// TODO: Add exports from boilerplate
-// import { getEnvironment } from '@saasquatch/component-boilerplate';
-const getEnvironment = () => 'None';
-/**
- * Determines when to fake out the GraphQL calls
- */
-export function isDemo() {
-  const envType = getEnvironment();
-  return envType === 'None' || envType === 'SquatchAdmin';
-}
+// TODO: Add exports from boilerplate
+// import { getEnvironment } from '@saasquatch/component-boilerplate';
+const getEnvironment = () => 'None';
+/**
+ * Determines when to fake out the GraphQL calls
+ */
+export function isDemo() {
+  const envType = getEnvironment();
+  return envType === 'None' || envType === 'SquatchAdmin';
+}

package/dist/collection/utils/utils.js

@@ -1,33 +1,33 @@
-export function format(first, middle, last) {
-  return ((first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : ""));
-}
-function readGetters(obj) {
-  var result = [];
-  Object.keys(obj).forEach((property) => {
-    var descriptor = Object.getOwnPropertyDescriptor(obj, property);
-    if (typeof descriptor.get === "function") {
-      result.push(property);
-    }
-  });
-  return result;
-}
-// turns the "get" prototypes on stencil "this" objects into regular properties
-// basically you can't do {...this} in stencil components before calling this
-export function getProps(obj) {
-  let props = {};
-  for (const k of readGetters(Object.getPrototypeOf(obj))) {
-    props[k] = obj[k];
-  }
-  return props;
-}
-export function middleClickLink(e, path) {
-  e.preventDefault();
-  Object.assign(document.createElement("a"), {
-    target: "_blank",
-    href: path,
-  }).click();
-}
-export function getMissingProps(props) {
-  const missingProps = props.filter((prop) => !prop.value);
-  return missingProps.length ? missingProps : false;
-}
+export function format(first, middle, last) {
+  return ((first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : ""));
+}
+function readGetters(obj) {
+  var result = [];
+  Object.keys(obj).forEach((property) => {
+    var descriptor = Object.getOwnPropertyDescriptor(obj, property);
+    if (typeof descriptor.get === "function") {
+      result.push(property);
+    }
+  });
+  return result;
+}
+// turns the "get" prototypes on stencil "this" objects into regular properties
+// basically you can't do {...this} in stencil components before calling this
+export function getProps(obj) {
+  let props = {};
+  for (const k of readGetters(Object.getPrototypeOf(obj))) {
+    props[k] = obj[k];
+  }
+  return props;
+}
+export function middleClickLink(e, path) {
+  e.preventDefault();
+  Object.assign(document.createElement("a"), {
+    target: "_blank",
+    href: path,
+  }).click();
+}
+export function getMissingProps(props) {
+  const missingProps = props.filter((prop) => !prop.value);
+  return missingProps.length ? missingProps : false;
+}

package/dist/esm/{ShadowViewAddon-6146607d.js → ShadowViewAddon-5f66de48.js}

@@ -1,122 +1,122 @@
 import { h, g as getElement } from './index-17b4da69.js';
-import { d as dist, M, T, e as en } from './index.module-8c0fcb22.js';
+import { d as dist, M, n as ne, c as cn } from './index.module-1e92a7a3.js';
 
-function LeaderboardView(props) {
-  var _a;
-  const { states, data, elements } = props;
-  const { styles } = states;
-  if (states.loading) {
-    return elements.loadingstate;
-  }
-  return (h("div", null,
-    !states.hasLeaders && elements.empty,
-    states.hasLeaders && (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) => {
-        return (h("tr", { class: "SeparateContent" },
-          styles.showRank && h("td", { class: "Rank" }, user.rank),
-          h("td", { class: "User" }, `${user.firstName} ${user.lastInitial} `),
-          h("td", { class: "Score" }, user.value)));
-      })))));
+function LeaderboardView(props) {
+  var _a;
+  const { states, data, elements } = props;
+  const { styles } = states;
+  if (states.loading) {
+    return elements.loadingstate;
+  }
+  return (h("div", null,
+    !states.hasLeaders && elements.empty,
+    states.hasLeaders && (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) => {
+        return (h("tr", { class: "SeparateContent" },
+          styles.showRank && h("td", { class: "Rank" }, user.rank),
+          h("td", { class: "User" }, `${user.firstName} ${user.lastInitial} `),
+          h("td", { class: "Score" }, user.value)));
+      })))));
 }
 
-const GET_LEADERBOARD = dist.gql `
-  query ($type: String!, $filter: UserLeaderboardFilterInput) {
-    userLeaderboard(type: $type, filter: $filter) {
-      dateModified
-      rows {
-        value
-        firstName
-        lastInitial
-        rank {
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
-`;
-function useLeaderboard(props) {
-  var _a;
-  const programId = M();
-  const user = T();
-  const variables = {
-    type: props.leaderboardType,
-    filter: { programId_eq: programId },
-  };
-  if (props.interval) {
-    variables.filter["interval"] = props.interval;
-  }
-  const { data: leaderboardData, loading: loadingLeaderboard } = en(GET_LEADERBOARD, 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;
-      return ({
-        value: user.value,
-        firstName: user.firstName || "Anonymous",
-        lastInitial: user.lastInitial,
-        rank: (_a = user.rank) === null || _a === void 0 ? void 0 : _a[props.rankType],
-      });
-    });
-  }
-  return {
-    states: {
-      loading: loadingLeaderboard,
-      hasLeaders: (sortedLeaderboard === null || sortedLeaderboard === void 0 ? void 0 : sortedLeaderboard.length) > 0,
-      styles: props,
-    },
-    data: {
-      leaderboard: sortedLeaderboard,
-      rankType: props.rankType,
-    },
-    elements: {
-      empty: props.empty,
-      loadingstate: props.loadingstate,
-    },
-  };
+const GET_LEADERBOARD = dist.gql `
+  query ($type: String!, $filter: UserLeaderboardFilterInput) {
+    userLeaderboard(type: $type, filter: $filter) {
+      dateModified
+      rows {
+        value
+        firstName
+        lastInitial
+        rank {
+          rank
+          denseRank
+          rowNumber
+        }
+      }
+    }
+  }
+`;
+function useLeaderboard(props) {
+  var _a;
+  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 } = cn(GET_LEADERBOARD, 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;
+      return ({
+        value: user.value,
+        firstName: user.firstName || "Anonymous",
+        lastInitial: user.lastInitial,
+        rank: (_a = user.rank) === null || _a === void 0 ? void 0 : _a[props.rankType],
+      });
+    });
+  }
+  return {
+    states: {
+      loading: loadingLeaderboard,
+      hasLeaders: (sortedLeaderboard === null || sortedLeaderboard === void 0 ? void 0 : sortedLeaderboard.length) > 0,
+      styles: props,
+    },
+    data: {
+      leaderboard: sortedLeaderboard,
+      rankType: props.rankType,
+    },
+    elements: {
+      empty: props.empty,
+      loadingstate: props.loadingstate,
+    },
+  };
 }
 
-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 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 })));
 };
 
 export { LeaderboardView as L, ShadowViewAddon as S, useLeaderboard as u, withShadowView as w };