@saasquatch/mint-components 1.5.0-3 → 1.5.0-33

package/dist/collection/styling/JSS.js

@@ -0,0 +1,9 @@
+import preset from "jss-preset-default";
+import { create } from "jss";
+export const jss = create(preset());
+export const createStyleSheet = (...args) => jss.createStyleSheet(...args);
+/**
+ * Use this preset instead of creating a new JSS instance everywhere
+ *
+ */
+export default jss;

package/dist/collection/tables/GenericTableView.js

@@ -1,51 +1,106 @@
 import { h } from "@stencil/core";
-import { TextSpanView } from "../components/sqm-text-span/sqm-text-span-view";
-import jss from "jss";
-import preset from "jss-preset-default";
 import { gap } from "../global/mixins";
-const style = {
-  THead: {
-    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
-    "text-align": "left",
-  },
-  TCell: {
-    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
-  },
-  TRow: {
-    "border-top": "1px solid #EAEAEA",
-  },
-  Table: {
-    "border-collapse": "collapse",
-    width: "100%",
-  },
-  ButtonContainer: {
-    display: "flex",
-    "justify-content": "flex-end",
-    "margin-top": "var(--sl-spacing-small)",
-    ...gap({ direction: "row", size: "var(--sl-spacing-small)" }),
-  },
-};
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
+import { createStyleSheet } from "../styling/JSS";
 export function GenericTableView(props) {
   const { states, data, callbacks, elements } = props;
   const { columns, rows } = elements;
   const { show } = states;
+  console.log(props);
+  const hiddenCols = data.hiddenColumns.split(",").map(Number);
+  const mobile = "@media (max-width: " + data.mdBreakpoint + "px)";
+  const tablet = "@media (min-width: " +
+    data.smBreakpoint +
+    "px) and (max-width: " +
+    data.mdBreakpoint +
+    "px)";
+  const style = {
+    Table: {
+      borderCollapse: "collapse",
+      tableLayout: "fixed",
+      width: "100%",
+      "& th": {
+        paddingBottom: "var(--sl-spacing-small)",
+        textAlign: "left",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        overflowWrap: "anywhere",
+      },
+      "& tr": {},
+      "& td": {
+        borderTop: "1px solid var(--sl-color-neutral-200)",
+        padding: "var(--sl-spacing-small)",
+        paddingLeft: "0",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+      },
+      [mobile]: {
+        "& thead": {
+          display: "none",
+        },
+        "& tr": {
+          display: "block",
+          background: "#FFFFFF",
+          border: "1px solid var(--sl-color-neutral-200)",
+          boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+          borderRadius: "var(--sl-border-radius-medium)",
+          padding: "var(--sl-spacing-medium)",
+          fontSize: "var(--sl-font-size-small)",
+          marginBottom: "var(--sl-spacing-large)",
+        },
+        "& td": {
+          display: "grid",
+          gridTemplateColumns: "0.5fr 0.5fr",
+          borderTop: "none",
+          padding: "0",
+          marginBottom: "var(--sl-spacing-medium)",
+          "&:first-child": {
+            textAlign: "left",
+          },
+          "&:before": {
+            content: "attr(data-label)",
+            whiteSpace: "nowrap",
+          },
+          "&:last-child": {
+            marginBottom: "0",
+          },
+          "&.hidden:before": {
+            content: "none",
+          },
+        },
+      },
+      [tablet]: {
+        "& tbody": {
+          display: "grid",
+          gridTemplateColumns: "0.5fr 0.5fr",
+          gap: "25px",
+        },
+      },
+    },
+    ButtonContainer: {
+      display: "flex",
+      "justify-content": "flex-end",
+      "margin-top": "var(--sl-spacing-small)",
+      ...gap({ direction: "row", size: "var(--sl-spacing-small)" }),
+    },
+    ButtonDisabled: {
+      "&::part(base)": {
+        opacity: "0.25",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("table", { class: sheet.classes.Table },
       data.textOverrides.showLabels && (h("thead", null,
-        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (h("th", { class: sheet.classes.THead },
-          h(TextSpanView, { type: "h3" }, column))))))),
+        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (h("th", null, column)))))),
       h("tbody", null,
         show === "loading" && elements.loadingElement,
         show === "empty" && elements.emptyElement,
-        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (h("tr", { class: sheet.classes.TRow, style: {
+        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (h("tr", { style: {
             borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
-          }, part: "table-row" }, row.map((cell) => (h("td", { class: sheet.classes.TCell },
-          h(TextSpanView, { type: "p" }, cell)))))))))),
+          }, part: "table-row" }, row.map((cell, j) => (h("td", { class: hiddenCols.includes(j) ? "hidden" : "", "data-label": columns[j] + ":" }, cell))))))))),
     h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
-      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.prevLabel),
-      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.moreLabel))));
+      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base", class: !states.hasPrev ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.prevLabel),
+      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base", class: !states.hasNext ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.moreLabel))));
 }

package/dist/collection/tables/TableSlots.js

@@ -1,7 +1,15 @@
 import { h } from "@stencil/core";
 export function LoadingSlot() {
   return (h("slot", { name: "loading" },
-    h(LoadingSkeleton, null)));
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null)));
+}
+export function LoadingRow() {
+  return (h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))));
 }
 export function LoadingSkeleton() {
   return (h("div", { style: { width: "100%" } },

package/dist/collection/utils/RequiredPropsError.js

@@ -1,8 +1,7 @@
 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";
+import { createStyleSheet } from "../styling/JSS";
 const style = {
   IconStyle: {
     display: "block",
@@ -22,8 +21,7 @@ const style = {
     margin: "30px",
   },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function RequiredPropsError({ missingProps }) {
   if (!missingProps)

package/dist/esm/{jss-preset-default.esm-71fae192.js → JSS-fadfaeff.js}

@@ -1,4 +1,4 @@
-import { _ as _extends } from './extends-3a3f9fe2.js';
+import { _ as _extends } from './extends-33266e9b.js';
 
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
@@ -4267,4 +4267,7 @@ var create$1 = function create(options) {
   };
 };
 
-export { create$1 as c, jss as j };
+const jss$1 = create(create$1());
+const createStyleSheet = (...args) => jss$1.createStyleSheet(...args);
+
+export { createStyleSheet as c };

package/dist/esm/ShadowViewAddon-83479740.js

@@ -0,0 +1,208 @@
+import { h, g as getElement } from './index-17b4da69.js';
+import { d as dist, M, n as ne, a as mn } from './index.module-6d78e252.js';
+
+function LoadingSlot() {
+  return (h("slot", { name: "loading" },
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null)));
+}
+function LoadingRow() {
+  return (h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))));
+}
+function LoadingSkeleton() {
+  return (h("div", { style: { width: "100%" } },
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", null)));
+}
+function EmptySlot({ label }) {
+  return (h("slot", { name: "empty" },
+    h(EmptySkeleton, { label: label })));
+}
+function EmptySkeleton({ label }) {
+  return (h("div", { style: { width: "100%" } },
+    h("sqm-text", null,
+      h("h3", { style: { color: "#777777" } }, label))));
+}
+
+function empty(styles) {
+  return (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)),
+    h("tr", null,
+      h("td", { colSpan: 100 }, "No Users"))));
+}
+function loading() {
+  return (h("table", null, [...Array(10)].map(() => {
+    return (h("tr", null,
+      h("td", null,
+        h("sl-skeleton", null))));
+  })));
+}
+function LeaderboardView(props) {
+  var _a, _b, _c, _d, _e;
+  const { states, data, elements } = props;
+  const { styles } = states;
+  console.log(props);
+  let userSeenFlag = false;
+  if (states.loading)
+    return loading();
+  if (!states.hasLeaders)
+    return empty(styles);
+  return (h("div", null,
+    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.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} `),
+          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) || "-"} `),
+        h("td", { class: "Score" }, ((_e = data.userRank) === null || _e === void 0 ? void 0 : _e.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 || "Anonymous",
+        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,
+    },
+  };
+}
+
+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 { EmptySlot as E, LoadingSlot as L, ShadowViewAddon as S, EmptySkeleton as a, LoadingSkeleton as b, LeaderboardView as c, useLeaderboard as u, withShadowView as w };

package/dist/esm/{extends-3a3f9fe2.js → extends-33266e9b.js}

@@ -1129,4 +1129,4 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-export { _extends as _, commonjsGlobal as a, browser as b, createCommonjsModule as c, getDefaultExportFromCjs as d, useEffect as e, useRef as f, getAugmentedNamespace as g, h$1 as h, c as i, useState as j, useMemo as k, l$1 as l, h$2 as m, d$2 as n, m$2 as o, useReducer as u, y$1 as y };
+export { _extends as _, commonjsGlobal as a, browser as b, createCommonjsModule as c, getDefaultExportFromCjs as d, useEffect as e, useRef as f, getAugmentedNamespace as g, h$1 as h, useMemo as i, c as j, useState as k, l$1 as l, h$2 as m, d$2 as n, m$2 as o, useReducer as u, y$1 as y };

package/dist/esm/{global-90da933f.js → global-9b000c0b.js}

@@ -1,5 +1,5 @@
-import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './extends-3a3f9fe2.js';
-import { s as src, m as memoize, S } from './index.module-90d2c3ad.js';
+import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './extends-33266e9b.js';
+import { s as src, m as memoize, S } from './index.module-6d78e252.js';
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -26407,11 +26407,11 @@ html {
   --sl-line-height-dense: 1.4;
   --sl-line-height-normal: 1.8;
   --sl-line-height-loose: 2.2;
-  --sl-focus-ring-color-primary: #0ea5e954;
-  --sl-focus-ring-color-success: #22c55e54;
-  --sl-focus-ring-color-info: #6b728054;
-  --sl-focus-ring-color-warning: #f59e0b54;
-  --sl-focus-ring-color-danger: #ef444454;
+  --sl-focus-ring-color-primary: var(--sl-color-primary-100);
+  --sl-focus-ring-color-success: var(--sl-color-success-100);
+  --sl-focus-ring-color-info: var(--sl-color-info-100);
+  --sl-focus-ring-color-warning: var(--sl-color-warning-100);
+  --sl-focus-ring-color-danger: #var(--sl-color-danger-100);;
   --sl-focus-ring-width: 3px;
   --sl-button-font-size-small: var(--sl-font-size-x-small);
   --sl-button-font-size-medium: var(--sl-font-size-small);
@@ -26510,6 +26510,14 @@ a:visited {
 a:hover {
   color: var(--sl-color-primary-600);
 }
+// .terms-link,
+// .terms-link:visited {
+//   color: var(--sl-color-gray-500);
+//   text-decoration: none;
+// }
+// .terms-link:hover {
+//   color: var(--sl-color-gray-600);
+// }
 h2, .Title {
   font-size: var(--sl-font-size-large);
   font-weight: var(--sl-font-weight-semibold);
@@ -26618,72 +26626,6 @@ sl-input::part(label){
   color: var(--sl-color-gray-900);
 }
 
-// The following commented out styles should be moved to Service Titan
-
-// stn-row[topmargin="x-large"] {
-//   margin-top: var(--sl-spacing-x-large);
-// }
-
-// stn-wrapper-column {
-//   max-width: var(--sqm-content-max-width);
-//   margin: var(--sl-spacing-x-large) auto;
-//   background-color: var(--sqm-content-background);
-// }
-
-// stn-wrapper-column > :not(:first-child), stn-wrapper-item > :not(:first-child) {
-//   margin-top: var(--sl-spacing-medium);
-// }
-
-// stn-wrapper-item, stn-wrapper-column{
-//   display: flex;
-//   flex-direction: column;
-//   box-sizing: border-box;
-//   width: 100%;
-//   height: auto;
-// }
-// stn-wrapper-item {
-//   padding: var(--sl-spacing-large);
-//   background-color: var(--sqm-content-background);
-// }
-
-// stn-row {
-//   display: flex;
-// }
-
-// stn-row[gap="medium"] > :not(:first-child) {
-//   margin-left: var(--sl-spacing-medium);
-// }
-
-// stn-row[space="even"] > * {
-//   flex: 1 1 0;
-// }
-
-// *::part(erroralert-icon), *::part(successalert-icon){
-//   align-items: flex-start;
-//   padding-top: var(--sl-spacing-large);
-// }
-
-// *::part(erroralert-text){
-//   color: var(--sl-color-danger-500);
-// }
-
-// *::part(successalert-text) {
-//   color: var(--sl-color-success-600);
-// }
-
-// *::part(successalert-text),
-// *::part(erroralert-text) {
-//   font-size: var(--sl-font-size-medium);
-//   font-weight: var(--sl-font-weight-semibold);
-//   width: 100%;
-// }
-// *::part(successalert-subtext){
-//   font-size: var(--sl-font-size-medium);
-//   font-weight: var(--sl-font-weight-normal);
-//   color: var(--sl-color-gray-800);
-//   width: 100%;
-// }
-
 .FooterEmail{
   text-decoration: none;
   font-size: var(--sl-font-size-medium);
@@ -26707,7 +26649,7 @@ try {
   // SlAlert.register();
   registerIconLibrary("default", {
     // same link that shoelace uses internally
-    resolver: (name) => `https://fast.ssqt.io/npm/bootstrap-icons@1.2.0/icons/${name}.svg`,
+    resolver: (name) => `https://fast.ssqt.io/npm/bootstrap-icons@1.7.2/icons/${name}.svg`,
   });
   // SlAlert.register();
   customElements.define("sl-alert", alert_default2);