@saasquatch/mint-components 1.6.3-9 → 1.6.4-0

package/dist/esm/{sqm-hero-view-1904c178.js → sqm-hero-view-30732cf2.js}

@@ -1,124 +1,124 @@
 import { h } from './index-17b4da69.js';
-import { i as useState, f as useEffect } from './stencil-hooks.module-eefa3570.js';
-import { u as useCallback } from './use-callback-684c8bb7.js';
-import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { i as useState, u as useEffect } from './stencil-hooks.module-203eab48.js';
+import { u as useCallback } from './use-callback-f03b0607.js';
+import { c as createStyleSheet } from './JSS-506b9295.js';
 
-// import { IntlMessageFormat } from 'intl-messageformat';
-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;
-}
-function isValidColor(teststr) {
-  return CSS.supports(`(color: ${teststr})`);
+// import { IntlMessageFormat } from 'intl-messageformat';
+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;
+}
+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 = createStyleSheet(style);
-  const styleString = sheet.toString();
+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 = createStyleSheet(style);
+  const styleString = sheet.toString();
   const vanillaStyle = `
   :host{    
     height: 100%;
@@ -133,15 +133,15 @@ function HeroView(props) {
       height: auto;
   }
   
-`;
-  // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
-  return (h("div", { class: sheet.classes.Container },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer },
-      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
-      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (h("div", { class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
+`;
+  // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer },
+      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
+      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (h("div", { class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
 }
 
 export { HeroView as H };

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

@@ -1,54 +1,54 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './stencil-hooks.module-eefa3570.js';
-import './use-callback-684c8bb7.js';
-import './JSS-67b5cff8.js';
-import { g as getProps } from './utils-334c1e34.js';
-import { H as HeroView } from './sqm-hero-view-1904c178.js';
+import { m as h } from './stencil-hooks.module-203eab48.js';
+import './use-callback-f03b0607.js';
+import './JSS-506b9295.js';
+import { g as getProps } from './utils-d7bbb0e2.js';
+import { H as HeroView } from './sqm-hero-view-30732cf2.js';
 
-const Hero = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Number of columns in the layout
-     *
-     * @uiName Columns
-     * @uiEnum [1, 2]
-     * @uiEnumNames ["One", "Two"]
-     */
-    this.columns = 1;
-    /**
-     * Can be an image url, colour or Shoelace variable.
-     *
-     * @uiName Background
-     */
-    this.background = "var(--sl-color-gray-50)";
-    /**
-     * @uiName Padding Size
-     * @uiEnum ["none", "small", "medium","large"]
-     * @uiEnumNames ["None", "Small", "Medium", "Large"]
-     */
-    this.paddingSize = "large";
-    /**
-     * Flexbox wrap direction, accepts wrap or wrap-reverse
-     *
-     * @uiName Wrap Direction
-     * @uiEnum ["wrap", "wrap-reverse"]
-     * @uiEnumNames ["Wrap", "Wrap Reverse"]
-     */
-    this.wrapDirection = "wrap";
-    h(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = {
-      states: { ...getProps(this) },
-      content: {
-        primaryColumn: h$1("slot", null),
-        secondaryColumn: h$1("slot", { name: "secondary-column" }),
-      },
-    };
-    return h$1(HeroView, Object.assign({}, props));
-  }
+const Hero = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Number of columns in the layout
+     *
+     * @uiName Columns
+     * @uiEnum [1, 2]
+     * @uiEnumNames ["One", "Two"]
+     */
+    this.columns = 1;
+    /**
+     * Can be an image url, colour or Shoelace variable.
+     *
+     * @uiName Background
+     */
+    this.background = "var(--sl-color-gray-50)";
+    /**
+     * @uiName Padding Size
+     * @uiEnum ["none", "small", "medium","large"]
+     * @uiEnumNames ["None", "Small", "Medium", "Large"]
+     */
+    this.paddingSize = "large";
+    /**
+     * Flexbox wrap direction, accepts wrap or wrap-reverse
+     *
+     * @uiName Wrap Direction
+     * @uiEnum ["wrap", "wrap-reverse"]
+     * @uiEnumNames ["Wrap", "Wrap Reverse"]
+     */
+    this.wrapDirection = "wrap";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = {
+      states: { ...getProps(this) },
+      content: {
+        primaryColumn: h$1("slot", null),
+        secondaryColumn: h$1("slot", { name: "secondary-column" }),
+      },
+    };
+    return h$1(HeroView, Object.assign({}, props));
+  }
 };
 
 export { Hero as sqm_hero };

package/dist/esm/{sqm-leaderboard-rank-view-10657658.js → sqm-leaderboard-rank-view-da91f5f3.js}

@@ -1,8 +1,8 @@
 import { h } from './index-17b4da69.js';
 
-function LeaderboardRankView(props) {
-  const { data } = props;
-  return h("span", { class: "P" }, data.rank);
+function LeaderboardRankView(props) {
+  const { data } = props;
+  return h("span", { class: "P" }, data.rank);
 }
 
 export { LeaderboardRankView as L };

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

@@ -1,10 +1,10 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './stencil-hooks.module-eefa3570.js';
-import { i as intl } from './global-126fa55c.js';
-import './use-callback-684c8bb7.js';
-import { d as dist, O, N, a as dn, i as isDemo } from './index.module-14794b69.js';
+import { m as h } from './stencil-hooks.module-203eab48.js';
+import { i as intl } from './global-9ad01db9.js';
+import './use-callback-f03b0607.js';
+import { d as dist, O, N, a as dn, i as isDemo } from './index.module-48cc9ee0.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-10657658.js';
+import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-da91f5f3.js';
 
 const GET_RANK = dist.gql `
   query ($type: String!, $filter: UserLeaderboardFilterInput) {
@@ -18,67 +18,67 @@ const GET_RANK = dist.gql `
       }
     }
   }
-`;
-function useLeaderboardRank(props) {
-  var _a, _b, _c, _d;
-  const programIdContext = O();
-  // Default to context, overriden by props
-  const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
-  const user = N();
-  const rankVariables = programId
-    ? {
-      type: props.leaderboardType,
-      filter: { programId_eq: programId },
-    }
-    : {
-      type: props.leaderboardType,
-      filter: {},
-    };
-  if (props.interval) {
-    rankVariables.filter["interval"] = props.interval;
-  }
-  const { data: rankData } = dn(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const fullRankText = ((_b = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _b === void 0 ? void 0 : _b.leaderboardRank) ? intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
-    rank: (_d = (_c = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _c === void 0 ? void 0 : _c.leaderboardRank) === null || _d === void 0 ? void 0 : _d[props.rankType],
-  })
-    : props.unrankedText || "unranked";
-  return {
-    data: {
-      rank: fullRankText,
-    },
-  };
+`;
+function useLeaderboardRank(props) {
+  var _a, _b, _c, _d;
+  const programIdContext = O();
+  // Default to context, overriden by props
+  const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
+  const user = N();
+  const rankVariables = programId
+    ? {
+      type: props.leaderboardType,
+      filter: { programId_eq: programId },
+    }
+    : {
+      type: props.leaderboardType,
+      filter: {},
+    };
+  if (props.interval) {
+    rankVariables.filter["interval"] = props.interval;
+  }
+  const { data: rankData } = dn(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const fullRankText = ((_b = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _b === void 0 ? void 0 : _b.leaderboardRank) ? intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
+    rank: (_d = (_c = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _c === void 0 ? void 0 : _c.leaderboardRank) === null || _d === void 0 ? void 0 : _d[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) {
-    registerInstance(this, hostRef);
-    /**
-     * @uiName Rank Text
-     * @uiWidget textArea
-     */
-    this.rankText = "You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!";
-    h(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = isDemo()
-      ? useLeaderboardRankDemo(this)
-      : useLeaderboardRank(this);
-    return h$1(LeaderboardRankView, Object.assign({}, props));
-  }
-};
-function useLeaderboardRankDemo(props) {
-  const rank = intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
-    rank: 1,
-  }) || "1st";
-  return cjs({
-    data: {
-      rank,
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
+const LeaderboardRank = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Rank Text
+     * @uiWidget textArea
+     */
+    this.rankText = "You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = isDemo()
+      ? useLeaderboardRankDemo(this)
+      : useLeaderboardRank(this);
+    return h$1(LeaderboardRankView, Object.assign({}, props));
+  }
+};
+function useLeaderboardRankDemo(props) {
+  const rank = intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
+    rank: 1,
+  }) || "1st";
+  return cjs({
+    data: {
+      rank,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
 LeaderboardRank.style = sqmLeaderboardRankCss;
 
 export { LeaderboardRank as sqm_leaderboard_rank };

package/dist/esm/{sqm-navigation-sidebar-item-view-d6b9f5d0.js → sqm-navigation-sidebar-item-view-ea1423d3.js}

@@ -1,43 +1,43 @@
 import { h } from './index-17b4da69.js';
-import { f as fn } from './index.module-14794b69.js';
-import { g as gap } from './mixins-f60a614c.js';
-import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { f as fn } from './index.module-48cc9ee0.js';
+import { g as gap } from './mixins-59fd94b7.js';
+import { c as createStyleSheet } from './JSS-506b9295.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",
-      ...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 = createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h("a", { href: data.path, onClick: (e) => {
-      e.preventDefault();
-      fn.push(data.path);
-    }, class: sheet.classes.ItemContainer },
-    h("style", { type: "text/css" }, styleString),
-    h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
-    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",
+      ...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 = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("a", { href: data.path, onClick: (e) => {
+      e.preventDefault();
+      fn.push(data.path);
+    }, class: sheet.classes.ItemContainer },
+    h("style", { type: "text/css" }, styleString),
+    h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
+    h("p", { class: sheet.classes.Label }, data.label)));
 }
 
 export { NavigationSidebarItemView as N };