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

package/dist/cjs/sqm-graphql-client-provider.cjs.entry.js

@@ -5,31 +5,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-66cd975e.js');
 
-async function useGraphQLClientProvider({ domain }) {
-  const token = index_module.Q();
-  const appDomain = domain;
-  const tenantAlias = index_module.k();
-  // Memoization is shared. One client per domain, tenant and token (or null)
-  const managedIdentityClient = index_module.pe(appDomain, tenantAlias, token);
-  const [, setGraphQLClient] = _extends.m(index_module.ge, managedIdentityClient);
-  _extends.useEffect(() => {
-    setGraphQLClient(managedIdentityClient);
-  }, [managedIdentityClient]);
+async function useGraphQLClientProvider({ domain }) {
+  const token = index_module.Q();
+  const appDomain = domain;
+  const tenantAlias = index_module.k();
+  // Memoization is shared. One client per domain, tenant and token (or null)
+  const managedIdentityClient = index_module.pe(appDomain, tenantAlias, token);
+  const [, setGraphQLClient] = _extends.m(index_module.ge, managedIdentityClient);
+  _extends.useEffect(() => {
+    setGraphQLClient(managedIdentityClient);
+  }, [managedIdentityClient]);
 }
 
-const GraphQLClientProvider = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ignored = true;
-    _extends.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-     useGraphQLClientProvider(this);
-    return (index.h(index.Host, { style: { display: "contents" } }, index.h("slot", null)));
-  }
+const GraphQLClientProvider = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    _extends.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+     useGraphQLClientProvider(this);
+    return (index.h(index.Host, { style: { display: "contents" } }, index.h("slot", null)));
+  }
 };
 
 exports.sqm_graphql_client_provider = GraphQLClientProvider;

package/dist/cjs/{sqm-hero-view-bb3d00a1.js → sqm-hero-view-dce6baf4.js}

@@ -5,145 +5,145 @@ const _extends = require('./extends-0302d27d.js');
 const useCallback = require('./use-callback-fadb2643.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 
-// import { IntlMessageFormat } from 'intl-messageformat';
-function isMobile(breakPoint) {
-  const [width, setWidth] = _extends.useState(window.innerWidth);
-  const handleWindowResize = useCallback.useCallback(() => setWidth(window.innerWidth), []);
-  _extends.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] = _extends.useState(window.innerWidth);
+  const handleWindowResize = useCallback.useCallback(() => setWidth(window.innerWidth), []);
+  _extends.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%";
-    }
-  };
-  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%",
-    },
-  };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.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%";
+    }
+  };
+  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%",
+    },
+  };
+  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
+  const sheet = jssPresetDefault_esm.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,31 +6,31 @@ const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
 require('./jss-preset-default.esm-6304d24f.js');
-const utils = require('./utils-95e5317c.js');
-const sqmHeroView = require('./sqm-hero-view-bb3d00a1.js');
+const utils = require('./utils-a58bfe0d.js');
+const sqmHeroView = require('./sqm-hero-view-dce6baf4.js');
 
-const Hero = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** @uiName Number of columns in the layout */
-    this.columns = 1;
-    /** @uiName Padding size */
-    this.paddingSize = "large";
-    /** @uiName Wrap direction */
-    this.wrapDirection = "wrap";
-    _extends.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;
+    /** @uiName Padding size */
+    this.paddingSize = "large";
+    /** @uiName Wrap direction */
+    this.wrapDirection = "wrap";
+    _extends.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-c287ac06.js → sqm-leaderboard-rank-view-e1b86aee.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-5610b310.js');
-const index_module = require('./index.module-03ce03c2.js');
+const global = require('./global-7d095200.js');
+const index_module = require('./index.module-66cd975e.js');
 
 var docCache = new Map();
 var fragmentSourceMap = new Map();
@@ -122,9 +122,9 @@ var extras = {
 gql["default"] = gql;
 const gql$1 = gql;
 
-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,80 +4,80 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-const global = require('./global-5610b310.js');
+const global = require('./global-7d095200.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-03ce03c2.js');
+const index_module = require('./index.module-66cd975e.js');
 const cjs = require('./cjs-1066ec21.js');
-const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-c287ac06.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-e1b86aee.js');
 
-const GET_RANK = sqmLeaderboardRankView.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.T();
-  const rankVariables = {
-    type: props.leaderboardType,
-    filter: { programId_eq: programId },
-  };
-  if (props.interval) {
-    rankVariables.filter["interval"] = props.interval;
-  }
-  const { data: rankData } = index_module.en(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 = sqmLeaderboardRankView.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.T();
+  const rankVariables = {
+    type: props.leaderboardType,
+    filter: { programId_eq: programId },
+  };
+  if (props.interval) {
+    rankVariables.filter["interval"] = props.interval;
+  }
+  const { data: rankData } = index_module.en(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!";
-    _extends.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = index_module.j()
-      ? useLeaderboardRankDemo(this)
-      : useLeaderboardRank(this);
-    return index.h(sqmLeaderboardRankView.LeaderboardRankView, Object.assign({}, props));
-  }
-};
-function useLeaderboardRankDemo(props) {
-  const intl = global.createIntl({
-    locale: "en",
-  });
-  const rank = 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!";
+    _extends.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = index_module.j()
+      ? useLeaderboardRankDemo(this)
+      : useLeaderboardRank(this);
+    return index.h(sqmLeaderboardRankView.LeaderboardRankView, Object.assign({}, props));
+  }
+};
+function useLeaderboardRankDemo(props) {
+  const intl = global.createIntl({
+    locale: "en",
+  });
+  const rank = 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;