@saasquatch/mint-components 1.7.0-7 → 1.7.0-9

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

@@ -1,10 +1,9 @@
 import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
-import { m as h$1 } from './stencil-hooks.module-e39af977.js';
-import './extends-c31f1eff.js';
-import { c as createStyleSheet } from './JSS-418cab16.js';
+import { m as h$1 } from './stencil-hooks.module-eefa3570.js';
+import { c as createStyleSheet } from './JSS-506b9295.js';
 import { g as getProps } from './utils-d7bbb0e2.js';
-import { P as PortalContainerView } from './sqm-portal-container-view-5d6f1411.js';
-import { P as PortalSectionView } from './sqm-portal-section-view-c8d1c727.js';
+import { P as PortalContainerView } from './sqm-portal-container-view-8f1bcc77.js';
+import { P as PortalSectionView } from './sqm-portal-section-view-d64cd5de.js';
 
 function EmptyStateView(props) {
   const { emptyStateHeader, emptyStateImage, emptyStateText } = props;
@@ -31,7 +30,6 @@ function ImageView(props) {
     Container: {
       display: "flex",
       width: "100%",
-      borderRadius: `${props.borderRadius}px` || "none",
       justifyContent: props.alignment || "center",
       background: props.backgroundColor || "",
     },

package/dist/esm/sqm-form-message.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './stencil-hooks.module-e39af977.js';
+import { m as h } from './stencil-hooks.module-eefa3570.js';
 
 const sqmFormMessageCss = "sl-alert::part(base){border:1px solid;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(20, 20, 20, 0.1);box-shadow:0 1px 2px rgba(20, 20, 20, 0.1)}.Error::part(base){background-color:var(--sl-color-danger-100);border-color:var(--sl-color-danger-200)}.Success::part(base){background-color:var(--sl-color-success-100);border-color:var(--sl-color-success-200)}.Info::part(base){background-color:var(--sl-color-primary-100);border-color:var(--sl-color-primary-200)}";
 

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

@@ -1,16 +1,15 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { n as m, e as useEffect, m as h } from './stencil-hooks.module-e39af977.js';
-import './use-callback-697e2ff0.js';
-import { r as re, W, M as Me, c as Ee } from './index.module-2b4f1755.js';
-import './extends-c31f1eff.js';
+import { n as m, f as useEffect, m as h } from './stencil-hooks.module-eefa3570.js';
+import './use-callback-684c8bb7.js';
+import { H, y as ye, L, h as he } from './index.module-877f3231.js';
 
 async function useGraphQLClientProvider({ domain }) {
-  const token = re();
+  const token = H();
   const appDomain = domain;
-  const tenantAlias = W();
+  const tenantAlias = L();
   // Memoization is shared. One client per domain, tenant and token (or null)
-  const managedIdentityClient = Me(appDomain, tenantAlias, token);
-  const [, setGraphQLClient] = m(Ee, managedIdentityClient);
+  const managedIdentityClient = ye(appDomain, tenantAlias, token);
+  const [, setGraphQLClient] = m(he, managedIdentityClient);
   useEffect(() => {
     setGraphQLClient(managedIdentityClient);
   }, [managedIdentityClient]);

package/dist/esm/sqm-hamburger-menu.entry.js

@@ -0,0 +1,156 @@
+import { h, r as registerInstance } from './index-17b4da69.js';
+import { g as getProps } from './utils-d7bbb0e2.js';
+
+function HamburgerMenuView(
+// @ts-ignore - Stencil requires props (even if empty)
+props, children) {
+  const vanillaStyle = `
+
+    * {
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+    }
+
+    .container {
+      position: sticky;
+      top: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 60px;
+      width: 60px;
+      flex-direction: column;
+      z-index: 100;
+      display: none;
+    }
+    .menu-items { 
+      display: none;
+      padding: 20px;
+      border-right: 2px solid #eaeaea;
+      padding-top: 60px;
+      background: white; 
+      max-width: 400px;
+      width: 70vw;
+      height: 100vh;
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0px;
+      margin: 0;
+      animation: slideIn 500ms ease-in-out;
+    }
+  
+   @keyframes slideIn {
+      0% {
+        left: -350px;
+      }
+      100% {
+        left: 0;
+      }
+    } 
+  
+
+    .toggler {
+      border: 2px solid #eee;
+      cursor: pointer;
+      opacity: 0;
+      z-index: 5;
+    }
+
+    @media screen and (max-width: 799px) {
+      .toggler,
+      .hamburger {
+        visibility: visible !important;
+      }
+
+      .container {
+        display: flex;
+      }
+
+      .hamburger > .line {
+        visibility: visible !important;
+      }
+    }
+
+
+    .toggler,
+    .hamburger {
+      user-select: none;
+      visibility:hidden;
+      position: absolute;
+      padding: 20px 10px;
+    }
+
+    .toggler {
+      z-index: 100;
+      width: 100%;
+      height: 100%;
+    }
+
+    .hamburger {
+      z-index: 10;
+      width: 75%;
+      height: 100%;
+    }
+
+    .toggler:checked ~ .menu-items {
+      display: block;
+    }
+
+    /***** Turn hamburger into an X *****/
+    .toggler:checked ~ .hamburger > .line:nth-child(1) {
+      opacity: 0;
+    }
+
+    .toggler:checked ~ .hamburger > .line:nth-child(2) {
+      transform: rotate(45deg) translate(0px, -0.5px);
+    }
+
+    .toggler:checked ~ .hamburger > .line:nth-child(3) {
+      transform: rotate(-45deg) translate(3px, -3.5px);
+    }
+
+    .toggler:checked ~ .hamburger > .line:nth-child(1),
+    .toggler:checked ~ .hamburger > .line:nth-child(2),
+    .toggler:checked ~ .hamburger > .line:nth-child(3) {
+      width: 75%;
+      border-bottom: 3px solid #444445;
+      margin: 0;
+    }
+
+    .hamburger > .line {
+      visibility:hidden;
+      z-index: 2;
+      height: 4px;
+      width: 100%;
+      margin-bottom: 3px;
+      border-bottom: 5px solid #444445;
+    }
+
+  `;
+  return (h("div", { class: "container" },
+    h("style", null, vanillaStyle),
+    h("input", { type: "checkbox", class: "toggler", part: "toggler" }),
+    h("div", { class: "hamburger" },
+      h("div", { class: "line" }),
+      h("div", { class: "line" }),
+      h("div", { class: "line" })),
+    h("ul", { class: "menu-items" },
+      h("div", null, children))));
+}
+
+const HamburgerMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    this.position = "right";
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = getProps(this);
+    return (h(HamburgerMenuView, Object.assign({}, props), h("slot", null)));
+  }
+};
+
+export { HamburgerMenu as sqm_hamburger_menu };

package/dist/esm/sqm-header-logo.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
+import { m as h } from './stencil-hooks.module-eefa3570.js';
+
+const HeroImage = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Page participants are navigated to after clicking the header logo.
+     *
+     * @uiName Redirect Path
+     * @uiWidget pageSelect
+     */
+    this.nextPage = "/";
+    /**
+     * @uiName Logo Height
+     */
+    this.height = 60;
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h$1(Host, null, h$1("a", { href: this.nextPage }, h$1("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: this === null || this === void 0 ? void 0 : this.imageUrl }))));
+  }
+};
+
+export { HeroImage as sqm_header_logo };

package/dist/esm/{sqm-hero-view-1f148798.js → sqm-hero-view-ed7fa8f3.js}

@@ -1,7 +1,7 @@
 import { h } from './index-17b4da69.js';
-import { k as useState, e as useEffect } from './stencil-hooks.module-e39af977.js';
-import { u as useCallback } from './use-callback-697e2ff0.js';
-import { c as createStyleSheet } from './JSS-418cab16.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-506b9295.js';
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {

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

@@ -1,10 +1,9 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './stencil-hooks.module-e39af977.js';
-import './use-callback-697e2ff0.js';
-import './extends-c31f1eff.js';
-import './JSS-418cab16.js';
+import { m as h } from './stencil-hooks.module-eefa3570.js';
+import './use-callback-684c8bb7.js';
+import './JSS-506b9295.js';
 import { g as getProps } from './utils-d7bbb0e2.js';
-import { H as HeroView } from './sqm-hero-view-1f148798.js';
+import { H as HeroView } from './sqm-hero-view-ed7fa8f3.js';
 
 const Hero = class {
   constructor(hostRef) {
@@ -13,6 +12,8 @@ const Hero = class {
      * Number of columns in the layout
      *
      * @uiName Columns
+     * @uiEnum [1, 2]
+     * @uiEnumNames ["One", "Two"]
      */
     this.columns = 1;
     /**

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

@@ -1,9 +1,8 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './stencil-hooks.module-e39af977.js';
-import { i as intl } from './global-2d97b8c1.js';
-import './use-callback-697e2ff0.js';
-import { d as dist, A, a as ae, p as pn, L } from './index.module-2b4f1755.js';
-import './extends-c31f1eff.js';
+import { m as h } from './stencil-hooks.module-eefa3570.js';
+import { i as intl } from './global-5f5e66ae.js';
+import './use-callback-684c8bb7.js';
+import { d as dist, O, N, a as dn, i as isDemo } from './index.module-877f3231.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-da91f5f3.js';
 
@@ -22,10 +21,10 @@ const GET_RANK = dist.gql `
 `;
 function useLeaderboardRank(props) {
   var _a, _b, _c, _d;
-  const programIdContext = A();
+  const programIdContext = O();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
-  const user = ae();
+  const user = N();
   const rankVariables = programId
     ? {
       type: props.leaderboardType,
@@ -38,7 +37,7 @@ function useLeaderboardRank(props) {
   if (props.interval) {
     rankVariables.filter["interval"] = props.interval;
   }
-  const { data: rankData } = pn(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  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],
   })
@@ -64,7 +63,7 @@ const LeaderboardRank = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = L()
+    const props = isDemo()
       ? useLeaderboardRankDemo(this)
       : useLeaderboardRank(this);
     return h$1(LeaderboardRankView, Object.assign({}, props));

package/dist/esm/{sqm-navigation-sidebar-item-view-b22b07a2.js → sqm-navigation-sidebar-item-view-393c5475.js}

@@ -1,7 +1,7 @@
 import { h } from './index-17b4da69.js';
-import { w as wn } from './index.module-2b4f1755.js';
+import { f as fn } from './index.module-877f3231.js';
 import { g as gap } from './mixins-59fd94b7.js';
-import { c as createStyleSheet } from './JSS-418cab16.js';
+import { c as createStyleSheet } from './JSS-506b9295.js';
 
 function NavigationSidebarItemView(props) {
   const { states, data } = props;
@@ -33,7 +33,7 @@ function NavigationSidebarItemView(props) {
   const styleString = sheet.toString();
   return (h("a", { href: data.path, onClick: (e) => {
       e.preventDefault();
-      wn.push(data.path);
+      fn.push(data.path);
     }, class: sheet.classes.ItemContainer },
     h("style", { type: "text/css" }, styleString),
     h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),

package/dist/esm/sqm-navigation-sidebar-item.entry.js

@@ -1,16 +1,15 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './stencil-hooks.module-e39af977.js';
-import './use-callback-697e2ff0.js';
-import { e as bn, L } from './index.module-2b4f1755.js';
-import './extends-c31f1eff.js';
+import { m as h } from './stencil-hooks.module-eefa3570.js';
+import './use-callback-684c8bb7.js';
+import { l as ln, i as isDemo } from './index.module-877f3231.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-59fd94b7.js';
-import './JSS-418cab16.js';
+import './JSS-506b9295.js';
 import { g as getProps } from './utils-d7bbb0e2.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-b22b07a2.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-393c5475.js';
 
 function useNavigationSidebarItem(props) {
-  const currentPage = bn();
+  const currentPage = ln();
   return {
     states: {
       active: currentPage.pathname === props.path,
@@ -30,7 +29,7 @@ const NavigationSidebarItem = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = L()
+    const props = isDemo()
       ? useSidebarItemDemo(getProps(this))
       : useNavigationSidebarItem(getProps(this));
     return h$1(NavigationSidebarItemView, Object.assign({}, props));

package/dist/esm/sqm-navigation-sidebar.entry.js

@@ -1,19 +1,210 @@
-import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './stencil-hooks.module-e39af977.js';
-import './extends-c31f1eff.js';
-import './mixins-59fd94b7.js';
-import './JSS-418cab16.js';
-import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-9cb9a5f4.js';
+import { h, r as registerInstance } from './index-17b4da69.js';
+import { i as useState, f as useEffect, m as h$1 } from './stencil-hooks.module-eefa3570.js';
+import './use-callback-684c8bb7.js';
+import { R } from './index.module-877f3231.js';
+import { g as gap } from './mixins-59fd94b7.js';
+import { c as createStyleSheet } from './JSS-506b9295.js';
+
+const style = {
+  ItemsContainer: {
+    "min-width": "290px",
+    "max-width": "320px",
+    "box-sizing": "border-box",
+    padding: "20px 15px",
+    ...gap({ direction: "column", size: "4px" }),
+    "@media screen and (max-width: 799px)": {
+      display: "none",
+    },
+  },
+};
+const vanillaStyle = `
+  @media screen and (max-width: 799px) {
+    :host {
+     max-width: max-content;
+    }
+  }
+  :host {    
+    width: 30vw;
+    min-width: min-content;
+    max-width: 320px;
+  }
+`;
+const hamburgerStyle = `
+    * {
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+    }
+
+    .hamburger-container {
+      position: sticky;
+      top: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 60px;
+      width: 60px;
+      flex-direction: column;
+      z-index: 100;
+      display: none;
+    }
+    .menu-items { 
+      display: none;
+      padding: 20px;
+      border-right: 2px solid #eaeaea;
+      padding-top: 60px;
+      background: white; 
+      max-width: 400px;
+      width: 70vw;
+      height: 100vh;
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0px;
+      margin: 0;
+      animation: slideIn 500ms ease-in-out;
+    }
+  
+   @keyframes slideIn {
+      0% {
+        left: -350px;
+      }
+      100% {
+        left: 0;
+      }
+    } 
+  
+
+    .toggler {
+      border: 2px solid #eee;
+      cursor: pointer;
+      opacity: 0;
+      z-index: 5;
+    }
+
+    @media screen and (max-width: 799px) {
+      .toggler,
+      .hamburger {
+        visibility: visible !important;
+      }
+
+      .hamburger-container {
+        display: flex;
+      }
+
+      .hamburger > .line {
+        visibility: visible !important;
+      }
+    }
+
+
+    .toggler,
+    .hamburger {
+      user-select: none;
+      visibility:hidden;
+      position: absolute;
+      padding: 20px 10px;
+    }
+
+    .toggler {
+      z-index: 100;
+      width: 100%;
+      height: 100%;
+    }
+
+    .hamburger {
+      z-index: 10;
+      width: 75%;
+      height: 100%;
+    }
+
+    .toggler:checked ~ .menu-items {
+      display: block;
+    }
+
+    /***** Turn hamburger into an X *****/
+    .toggler:checked ~ .hamburger > .line:nth-child(1) {
+      opacity: 0;
+    }
+
+    .toggler:checked ~ .hamburger > .line:nth-child(2) {
+      transform: rotate(45deg) translate(0px, -0.5px);
+    }
+
+    .toggler:checked ~ .hamburger > .line:nth-child(3) {
+      transform: rotate(-45deg) translate(3px, -3.5px);
+    }
+
+    .toggler:checked ~ .hamburger > .line:nth-child(1),
+    .toggler:checked ~ .hamburger > .line:nth-child(2),
+    .toggler:checked ~ .hamburger > .line:nth-child(3) {
+      width: 75%;
+      border-bottom: 3px solid #444445;
+      margin: 0;
+    }
+
+    .hamburger > .line {
+      visibility:hidden;
+      z-index: 2;
+      height: 4px;
+      width: 100%;
+      margin-bottom: 3px;
+      border-bottom: 5px solid #444445;
+    }
+
+  `;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+function NavigationSidebarView(props, children) {
+  return [
+    h("div", { class: "hamburger-container" },
+      h("input", { type: "checkbox", class: "toggler", part: "toggler" }),
+      h("div", { class: "hamburger" },
+        h("div", { class: "line" }),
+        h("div", { class: "line" }),
+        h("div", { class: "line" })),
+      h("ul", { class: "menu-items" }, props.mobileItemsSlot)),
+    h("div", { class: sheet.classes.ItemsContainer },
+      h("style", { type: "text/css" },
+        vanillaStyle,
+        styleString,
+        hamburgerStyle),
+      h("div", null, children)),
+  ];
+}
+
+function useNavigationSidebar(renderNavigationItem) {
+  const host = R();
+  const [mobileChildren, setMobileChildren] = useState([]);
+  const children = host.children;
+  const renderChildren = Array.from(children).map(async (child) => await renderNavigationItem(child));
+  useEffect(() => {
+    if (children)
+      setClonedChildren();
+  }, [children]);
+  async function setClonedChildren() {
+    const clonedChildren = await Promise.all(renderChildren);
+    setMobileChildren(clonedChildren);
+  }
+  return { mobileChildren };
+}
 
 const NavigationSidebar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
-    h(this);
+    h$1(this);
   }
   disconnectedCallback() { }
+  async renderNavigationItem(child) {
+    return h("div", { innerHTML: child.outerHTML });
+  }
   render() {
-    return (h$1(NavigationSidebarView, null, h$1("slot", null)));
+    const { mobileChildren } = useNavigationSidebar(this.renderNavigationItem);
+    const props = {
+      mobileItemsSlot: mobileChildren,
+    };
+    return (h(NavigationSidebarView, Object.assign({}, props), h("slot", null)));
   }
 };