@saasquatch/mint-components 1.5.2-0 → 1.5.2

package/dist/cjs/{sqm-hero-view-788ccca3.js → sqm-hero-view-d5d46a36.js}

@@ -3,147 +3,147 @@
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 const useCallback = require('./use-callback-e754042f.js');
-const JSS = require('./JSS-d8503db1.js');
+const JSS = require('./JSS-a75f3a9a.js');
 
-// import { IntlMessageFormat } from 'intl-messageformat';
-function isMobile(breakPoint) {
-  const [width, setWidth] = stencilHooks_module.useState(window.innerWidth);
-  const handleWindowResize = useCallback.useCallback(() => setWidth(window.innerWidth), []);
-  stencilHooks_module.useEffect(() => {
-    window.addEventListener("resize", handleWindowResize);
-    return () => window.removeEventListener("resize", handleWindowResize);
-  }, []);
-  return width > breakPoint ? false : true;
-}
-function isValidColor(teststr) {
-  return CSS.supports(`(color: ${teststr})`);
+// import { IntlMessageFormat } from 'intl-messageformat';
+function isMobile(breakPoint) {
+  const [width, setWidth] = stencilHooks_module.useState(window.innerWidth);
+  const handleWindowResize = useCallback.useCallback(() => setWidth(window.innerWidth), []);
+  stencilHooks_module.useEffect(() => {
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, []);
+  return width > breakPoint ? false : true;
+}
+function isValidColor(teststr) {
+  return CSS.supports(`(color: ${teststr})`);
 }
 
-const paddingList = [
-  "var(--sl-spacing-xxx-small)",
-  "var(--sl-spacing-xx-small)",
-  "var(--sl-spacing-x-small)",
-  "var(--sl-spacing-small)",
-  "var(--sl-spacing-medium)",
-  "var(--sl-spacing-large)",
-  "var(--sl-spacing-x-large)",
-  "var(--sl-spacing-xx-large)",
-  "var(--sl-spacing-xxx-large)",
-  "var(--sl-spacing-xxxx-large)",
-];
-const parseBackground = (provided_bg) => {
-  if (provided_bg) {
-    if (isValidColor(provided_bg)) {
-      return provided_bg;
-    }
-    else {
-      return `url(${provided_bg})`;
-    }
-  }
-  else {
-    return "";
-  }
-};
-function HeroView(props) {
-  const { states, content } = props;
-  const getVertivalPadding = (size, half) => {
-    const sizes = {
-      small: 7,
-      medium: 8,
-      large: 9,
-    };
-    var index = sizes[size];
-    if (isMobile(767)) {
-      index = index - 2;
-    }
-    else if (isMobile(1023)) {
-      index = index - 1;
-    }
-    return half ? paddingList[index - 2] : paddingList[index];
-  };
-  const getHorizontalPadding = (size) => {
-    if (size == "small") {
-      return "1%";
-    }
-    else if (size == "medium") {
-      return "3%";
-    }
-    else {
-      return "5%";
-    }
-  };
-  // Dependent on props, not feasiable to move out
-  const style = {
-    TwoColumnContainer: {
-      display: "flex",
-      "@media screen and (max-width: 1023px)": {
-        flexDirection: states.wrapDirection == "wrap-reverse" ? "column-reverse" : "column",
-        justfiyContent: "center",
-      },
-    },
-    ColumnPadding: {
-      paddingTop: states.paddingSize == "none"
-        ? "0px"
-        : getVertivalPadding(states.paddingSize),
-      paddingBottom: states.paddingSize == "none"
-        ? "0px"
-        : getVertivalPadding(states.paddingSize),
-      paddingLeft: states.paddingSize == "none"
-        ? "0px"
-        : getHorizontalPadding(states.paddingSize),
-      paddingRight: states.paddingSize == "none"
-        ? "0px"
-        : getHorizontalPadding(states.paddingSize),
-    },
-    ColumnWrapper: {
-      "&:first-of-type": {
-        background: `no-repeat center/cover ${parseBackground(states.background)}`,
-      },
-      "&:last-of-type": {
-        background: `no-repeat center/cover ${parseBackground(states.secondaryBackground)}`,
-      },
-      "@media screen and (min-width: 1023px)": { flex: "1 1 0" },
-      display: "block",
-    },
-    SingleColumnContainer: {
-      background: `no-repeat center/cover ${parseBackground(states.background)}`,
-      flex: "1 1 0",
-    },
-    Container: {
-      width: "100%",
-      maxWidth: "var(--sqm-max-width)",
-      margin: "0 auto",
-      flex: 1,
-      display: "flex",
-      flexDirection: "column",
-      minHeight: "100%",
-    },
-  };
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const vanillaStyle = `
-  :host{    
-    height: 100%;
-    display: contents;
-  }
-  sqm-hero{    
-    height: 100%;
-    display: contents;
-  }
-  img{
-      max-width: 100%;
-      height: auto;
-  }
-  
-`;
-  // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
-  return (index.h("div", { class: sheet.classes.Container },
-    index.h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    states.columns == 2 ? (index.h("div", { class: sheet.classes.TwoColumnContainer },
-      index.h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
-      index.h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (index.h("div", { class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
+const paddingList = [
+  "var(--sl-spacing-xxx-small)",
+  "var(--sl-spacing-xx-small)",
+  "var(--sl-spacing-x-small)",
+  "var(--sl-spacing-small)",
+  "var(--sl-spacing-medium)",
+  "var(--sl-spacing-large)",
+  "var(--sl-spacing-x-large)",
+  "var(--sl-spacing-xx-large)",
+  "var(--sl-spacing-xxx-large)",
+  "var(--sl-spacing-xxxx-large)",
+];
+const parseBackground = (provided_bg) => {
+  if (provided_bg) {
+    if (isValidColor(provided_bg)) {
+      return provided_bg;
+    }
+    else {
+      return `url(${provided_bg})`;
+    }
+  }
+  else {
+    return "";
+  }
+};
+function HeroView(props) {
+  const { states, content } = props;
+  const getVertivalPadding = (size, half) => {
+    const sizes = {
+      small: 7,
+      medium: 8,
+      large: 9,
+    };
+    var index = sizes[size];
+    if (isMobile(767)) {
+      index = index - 2;
+    }
+    else if (isMobile(1023)) {
+      index = index - 1;
+    }
+    return half ? paddingList[index - 2] : paddingList[index];
+  };
+  const getHorizontalPadding = (size) => {
+    if (size == "small") {
+      return "1%";
+    }
+    else if (size == "medium") {
+      return "3%";
+    }
+    else {
+      return "5%";
+    }
+  };
+  // Dependent on props, not feasiable to move out
+  const style = {
+    TwoColumnContainer: {
+      display: "flex",
+      "@media screen and (max-width: 1023px)": {
+        flexDirection: states.wrapDirection == "wrap-reverse" ? "column-reverse" : "column",
+        justfiyContent: "center",
+      },
+    },
+    ColumnPadding: {
+      paddingTop: states.paddingSize == "none"
+        ? "0px"
+        : getVertivalPadding(states.paddingSize),
+      paddingBottom: states.paddingSize == "none"
+        ? "0px"
+        : getVertivalPadding(states.paddingSize),
+      paddingLeft: states.paddingSize == "none"
+        ? "0px"
+        : getHorizontalPadding(states.paddingSize),
+      paddingRight: states.paddingSize == "none"
+        ? "0px"
+        : getHorizontalPadding(states.paddingSize),
+    },
+    ColumnWrapper: {
+      "&:first-of-type": {
+        background: `no-repeat center/cover ${parseBackground(states.background)}`,
+      },
+      "&:last-of-type": {
+        background: `no-repeat center/cover ${parseBackground(states.secondaryBackground)}`,
+      },
+      "@media screen and (min-width: 1023px)": { flex: "1 1 0" },
+      display: "block",
+    },
+    SingleColumnContainer: {
+      background: `no-repeat center/cover ${parseBackground(states.background)}`,
+      flex: "1 1 0",
+    },
+    Container: {
+      width: "100%",
+      maxWidth: "var(--sqm-max-width)",
+      margin: "0 auto",
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100%",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  :host{    
+    height: 100%;
+    display: contents;
+  }
+  sqm-hero{    
+    height: 100%;
+    display: contents;
+  }
+  img{
+      max-width: 100%;
+      height: auto;
+  }
+  
+`;
+  // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    states.columns == 2 ? (index.h("div", { class: sheet.classes.TwoColumnContainer },
+      index.h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
+      index.h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (index.h("div", { class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
 }
 
 exports.HeroView = HeroView;

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

@@ -6,38 +6,38 @@ const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 require('./use-callback-e754042f.js');
 require('./extends-08099afd.js');
-require('./JSS-d8503db1.js');
-const utils = require('./utils-6847bc06.js');
-const sqmHeroView = require('./sqm-hero-view-788ccca3.js');
+require('./JSS-a75f3a9a.js');
+const utils = require('./utils-8ef4fe4a.js');
+const sqmHeroView = require('./sqm-hero-view-d5d46a36.js');
 
-const Hero = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** @uiName Number of columns in the layout */
-    this.columns = 1;
-    /**
-    * Can either be an image url, colour or Shoelace variable.
-    *
-    * @uiName Background
-    */
-    this.background = "var(--sl-color-gray-50)";
-    /** @uiName Padding size */
-    this.paddingSize = "large";
-    /** @uiName Wrap direction */
-    this.wrapDirection = "wrap";
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = {
-      states: { ...utils.getProps(this) },
-      content: {
-        primaryColumn: index.h("slot", null),
-        secondaryColumn: index.h("slot", { name: "secondary-column" }),
-      },
-    };
-    return index.h(sqmHeroView.HeroView, Object.assign({}, props));
-  }
+const Hero = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** @uiName Number of columns in the layout */
+    this.columns = 1;
+    /**
+    * Can either be an image url, colour or Shoelace variable.
+    *
+    * @uiName Background
+    */
+    this.background = "var(--sl-color-gray-50)";
+    /** @uiName Padding size */
+    this.paddingSize = "large";
+    /** @uiName Wrap direction */
+    this.wrapDirection = "wrap";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = {
+      states: { ...utils.getProps(this) },
+      content: {
+        primaryColumn: index.h("slot", null),
+        secondaryColumn: index.h("slot", { name: "secondary-column" }),
+      },
+    };
+    return index.h(sqmHeroView.HeroView, Object.assign({}, props));
+  }
 };
 
 exports.sqm_hero = Hero;

package/dist/cjs/{sqm-leaderboard-rank-view-5a3d4a88.js → sqm-leaderboard-rank-view-35015d30.js}

@@ -2,9 +2,9 @@
 
 const index = require('./index-b0129cd6.js');
 
-function LeaderboardRankView(props) {
-  const { data } = props;
-  return index.h("span", { class: "P" }, data.rank);
+function LeaderboardRankView(props) {
+  const { data } = props;
+  return index.h("span", { class: "P" }, data.rank);
 }
 
 exports.LeaderboardRankView = LeaderboardRankView;

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

@@ -4,78 +4,78 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const global = require('./global-22fb2ec7.js');
+const global = require('./global-dd180d3b.js');
 require('./use-callback-e754042f.js');
 const index_module = require('./index.module-fb61a163.js');
 require('./extends-08099afd.js');
 const cjs = require('./cjs-1066ec21.js');
-const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-5a3d4a88.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-35015d30.js');
 
-const GET_RANK = index_module.dist.gql `
-  query ($type: String!, $filter: UserLeaderboardFilterInput) {
-    viewer {
-      ... on User {
-        leaderboardRank(type: $type, filter: $filter) {
-          rowNumber
-          rank
-          denseRank
-        }
-      }
-    }
-  }
-`;
-function useLeaderboardRank(props) {
-  var _a, _b, _c;
-  const programId = index_module.M();
-  const user = index_module.ie();
-  const rankVariables = {
-    type: props.leaderboardType,
-    filter: { programId_eq: programId },
-  };
-  if (props.interval) {
-    rankVariables.filter["interval"] = props.interval;
-  }
-  const { data: rankData } = index_module.sn(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const fullRankText = ((_a = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _a === void 0 ? void 0 : _a.leaderboardRank) ? global.intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
-    rank: (_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[props.rankType],
-  })
-    : props.unrankedText || "unranked";
-  return {
-    data: {
-      rank: fullRankText,
-    },
-  };
+const GET_RANK = index_module.dist.gql `
+  query ($type: String!, $filter: UserLeaderboardFilterInput) {
+    viewer {
+      ... on User {
+        leaderboardRank(type: $type, filter: $filter) {
+          rowNumber
+          rank
+          denseRank
+        }
+      }
+    }
+  }
+`;
+function useLeaderboardRank(props) {
+  var _a, _b, _c;
+  const programId = index_module.M();
+  const user = index_module.ie();
+  const rankVariables = {
+    type: props.leaderboardType,
+    filter: { programId_eq: programId },
+  };
+  if (props.interval) {
+    rankVariables.filter["interval"] = props.interval;
+  }
+  const { data: rankData } = index_module.sn(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const fullRankText = ((_a = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _a === void 0 ? void 0 : _a.leaderboardRank) ? global.intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
+    rank: (_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[props.rankType],
+  })
+    : props.unrankedText || "unranked";
+  return {
+    data: {
+      rank: fullRankText,
+    },
+  };
 }
 
 const sqmLeaderboardRankCss = "p,.P{font-size:var(--sl-font-size-small);color:var(--sl-color-gray-800);margin-top:0px}p.Subtitle,.P.Subtitle{color:var(--sl-color-gray-500);margin:0px}";
 
-const LeaderboardRank = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * @uiName Rank Text
-     */
-    this.rankText = "You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!";
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = index_module.jn()
-      ? useLeaderboardRankDemo(this)
-      : useLeaderboardRank(this);
-    return index.h(sqmLeaderboardRankView.LeaderboardRankView, Object.assign({}, props));
-  }
-};
-function useLeaderboardRankDemo(props) {
-  const rank = global.intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
-    rank: 1,
-  }) || "1st";
-  return cjs.cjs({
-    data: {
-      rank,
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
+const LeaderboardRank = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @uiName Rank Text
+     */
+    this.rankText = "You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = index_module.jn()
+      ? useLeaderboardRankDemo(this)
+      : useLeaderboardRank(this);
+    return index.h(sqmLeaderboardRankView.LeaderboardRankView, Object.assign({}, props));
+  }
+};
+function useLeaderboardRankDemo(props) {
+  const rank = global.intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
+    rank: 1,
+  }) || "1st";
+  return cjs.cjs({
+    data: {
+      rank,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
 LeaderboardRank.style = sqmLeaderboardRankCss;
 
 exports.sqm_leaderboard_rank = LeaderboardRank;

package/dist/cjs/{sqm-navigation-sidebar-item-view-97a163e3.js → sqm-navigation-sidebar-item-view-bd8b4dfd.js}

@@ -2,44 +2,44 @@
 
 const index = require('./index-b0129cd6.js');
 const index_module = require('./index.module-fb61a163.js');
-const mixins = require('./mixins-ebc0fed1.js');
-const JSS = require('./JSS-d8503db1.js');
+const mixins = require('./mixins-338ca5f1.js');
+const JSS = require('./JSS-a75f3a9a.js');
 
-function NavigationSidebarItemView(props) {
-  const { states, data } = props;
-  const style = {
-    ItemContainer: {
-      display: "flex",
-      "background-color": `${states.active ? "var(--sl-color-gray-200)" : "var(--sl-color-white)"}`,
-      "border-radius": "8px",
-      padding: "8px",
-      "text-decoration": "none",
-      color: "#454444",
-      "align-items": "center",
-      ...mixins.gap({ direction: "row", size: "var(--sl-font-size-small)" }),
-      "&:hover": {
-        cursor: "pointer",
-        background: states.active
-          ? "var(--sl-color-gray-300)"
-          : "var(--sl-color-gray-50)",
-      },
-    },
-    Label: {
-      margin: "0",
-    },
-    Icon: {
-      "flex-shrink": "0",
-    },
-  };
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (index.h("a", { href: data.path, onClick: (e) => {
-      e.preventDefault();
-      index_module.dn.push(data.path);
-    }, class: sheet.classes.ItemContainer },
-    index.h("style", { type: "text/css" }, styleString),
-    index.h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
-    index.h("p", { class: sheet.classes.Label }, data.label)));
+function NavigationSidebarItemView(props) {
+  const { states, data } = props;
+  const style = {
+    ItemContainer: {
+      display: "flex",
+      "background-color": `${states.active ? "var(--sl-color-gray-200)" : "var(--sl-color-white)"}`,
+      "border-radius": "8px",
+      padding: "8px",
+      "text-decoration": "none",
+      color: "#454444",
+      "align-items": "center",
+      ...mixins.gap({ direction: "row", size: "var(--sl-font-size-small)" }),
+      "&:hover": {
+        cursor: "pointer",
+        background: states.active
+          ? "var(--sl-color-gray-300)"
+          : "var(--sl-color-gray-50)",
+      },
+    },
+    Label: {
+      margin: "0",
+    },
+    Icon: {
+      "flex-shrink": "0",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("a", { href: data.path, onClick: (e) => {
+      e.preventDefault();
+      index_module.dn.push(data.path);
+    }, class: sheet.classes.ItemContainer },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
+    index.h("p", { class: sheet.classes.Label }, data.label)));
 }
 
 exports.NavigationSidebarItemView = NavigationSidebarItemView;