@saasquatch/mint-components 1.3.3-5 → 1.3.3-6

package/dist/collection/{components/sqm-referral-table → tables}/sqm-table-row.js

@@ -1,33 +1,33 @@
-import { Component, h, Host, Prop } from "@stencil/core";
-export class TableRow {
-  constructor() {
-    this.border = "1px solid #EAEAEA";
-  }
-  render() {
-    return (h(Host, { style: { display: "contents" } },
-      h("tr", { style: { border: this.border } },
-        h("slot", null))));
-  }
-  static get is() { return "sqm-table-row"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "border": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "border",
-      "reflect": false,
-      "defaultValue": "\"1px solid #EAEAEA\""
-    }
-  }; }
-}
+import { Component, h, Host, Prop } from "@stencil/core";
+export class TableRow {
+  constructor() {
+    this.border = "1px solid #EAEAEA";
+  }
+  render() {
+    return (h(Host, { style: { display: "contents" } },
+      h("tr", { style: { border: this.border } },
+        h("slot", null))));
+  }
+  static get is() { return "sqm-table-row"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "border": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "border",
+      "reflect": false,
+      "defaultValue": "\"1px solid #EAEAEA\""
+    }
+  }; }
+}

package/dist/collection/{components/sqm-referral-table → tables}/useChildElements.js

@@ -1,16 +1,16 @@
-import { useHost } from "@saasquatch/component-boilerplate";
-import { useEffect, useState } from "@saasquatch/universal-hooks";
-export function useChildElements() {
-  const host = useHost();
-  const initialState = host.children.length ? Array.from(host.children) : [];
-  const [childElements, setChildElements] = useState(initialState);
-  useEffect(() => {
-    const observer = new MutationObserver(() => {
-      const children = Array.from(host.children);
-      setChildElements([...children]);
-    });
-    observer.observe(host, { childList: true });
-    return () => observer.disconnect();
-  }, [host]);
-  return childElements;
-}
+import { useHost } from "@saasquatch/component-boilerplate";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
+export function useChildElements() {
+  const host = useHost();
+  const initialState = host.children.length ? Array.from(host.children) : [];
+  const [childElements, setChildElements] = useState(initialState);
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const children = Array.from(host.children);
+      setChildElements([...children]);
+    });
+    observer.observe(host, { childList: true });
+    return () => observer.disconnect();
+  }, [host]);
+  return childElements;
+}

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-f84fe5c8.js → ShadowViewAddon-2338f393.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-c4098674.js';
+import { d as dist, M, T, e as en } from './index.module-9b5bb6a2.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 = 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 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 };