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

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

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./extends-08099afd.js');
-const JSS = require('./JSS-a75f3a9a.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+const JSS = require('./JSS-c73206b7.js');
 const utils = require('./utils-8ef4fe4a.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-a3e86fc2.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-765aae4d.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-4a8432e9.js');
+const sqmPortalSectionView = require('./sqm-portal-section-view-71a57cd9.js');
 
 function EmptyStateView(props) {
   const { emptyStateHeader, emptyStateImage, emptyStateText } = props;
@@ -35,7 +34,6 @@ function ImageView(props) {
     Container: {
       display: "flex",
       width: "100%",
-      borderRadius: `${props.borderRadius}px` || "none",
       justifyContent: props.alignment || "center",
       background: props.backgroundColor || "",
     },

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.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/cjs/sqm-graphql-client-provider.cjs.entry.js

@@ -3,18 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./use-callback-e754042f.js');
-const index_module = require('./index.module-1c799b1f.js');
-require('./extends-08099afd.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+require('./use-callback-5d15897d.js');
+const index_module = require('./index.module-d3a28293.js');
 
 async function useGraphQLClientProvider({ domain }) {
-  const token = index_module.re();
+  const token = index_module.H();
   const appDomain = domain;
-  const tenantAlias = index_module.W();
+  const tenantAlias = index_module.L();
   // Memoization is shared. One client per domain, tenant and token (or null)
-  const managedIdentityClient = index_module.Me(appDomain, tenantAlias, token);
-  const [, setGraphQLClient] = stencilHooks_module.m(index_module.Ee, managedIdentityClient);
+  const managedIdentityClient = index_module.ye(appDomain, tenantAlias, token);
+  const [, setGraphQLClient] = stencilHooks_module.m(index_module.he, managedIdentityClient);
   stencilHooks_module.useEffect(() => {
     setGraphQLClient(managedIdentityClient);
   }, [managedIdentityClient]);

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

@@ -0,0 +1,160 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const utils = require('./utils-8ef4fe4a.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 (index.h("div", { class: "container" },
+    index.h("style", null, vanillaStyle),
+    index.h("input", { type: "checkbox", class: "toggler", part: "toggler" }),
+    index.h("div", { class: "hamburger" },
+      index.h("div", { class: "line" }),
+      index.h("div", { class: "line" }),
+      index.h("div", { class: "line" })),
+    index.h("ul", { class: "menu-items" },
+      index.h("div", null, children))));
+}
+
+const HamburgerMenu = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    this.position = "right";
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = utils.getProps(this);
+    return (index.h(HamburgerMenuView, Object.assign({}, props), index.h("slot", null)));
+  }
+};
+
+exports.sqm_hamburger_menu = HamburgerMenu;

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+
+const HeroImage = class {
+  constructor(hostRef) {
+    index.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;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (index.h(index.Host, null, index.h("a", { href: this.nextPage }, index.h("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: this === null || this === void 0 ? void 0 : this.imageUrl }))));
+  }
+};
+
+exports.sqm_header_logo = HeroImage;

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

@@ -1,9 +1,9 @@
 'use strict';
 
 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-a75f3a9a.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+const useCallback = require('./use-callback-5d15897d.js');
+const JSS = require('./JSS-c73206b7.js');
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {

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

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 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-a75f3a9a.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+require('./use-callback-5d15897d.js');
+require('./JSS-c73206b7.js');
 const utils = require('./utils-8ef4fe4a.js');
-const sqmHeroView = require('./sqm-hero-view-d5d46a36.js');
+const sqmHeroView = require('./sqm-hero-view-f4264d5e.js');
 
 const Hero = class {
   constructor(hostRef) {
@@ -17,6 +16,8 @@ const Hero = class {
      * Number of columns in the layout
      *
      * @uiName Columns
+     * @uiEnum [1, 2]
+     * @uiEnumNames ["One", "Two"]
      */
     this.columns = 1;
     /**

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

@@ -3,11 +3,10 @@
 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-a7614907.js');
-require('./use-callback-e754042f.js');
-const index_module = require('./index.module-1c799b1f.js');
-require('./extends-08099afd.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+const global = require('./global-97364373.js');
+require('./use-callback-5d15897d.js');
+const index_module = require('./index.module-d3a28293.js');
 const cjs = require('./cjs-1066ec21.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-35015d30.js');
 
@@ -26,10 +25,10 @@ const GET_RANK = index_module.dist.gql `
 `;
 function useLeaderboardRank(props) {
   var _a, _b, _c, _d;
-  const programIdContext = index_module.A();
+  const programIdContext = index_module.O();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
-  const user = index_module.ae();
+  const user = index_module.N();
   const rankVariables = programId
     ? {
       type: props.leaderboardType,
@@ -42,7 +41,7 @@ function useLeaderboardRank(props) {
   if (props.interval) {
     rankVariables.filter["interval"] = props.interval;
   }
-  const { data: rankData } = index_module.pn(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: rankData } = index_module.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) ? global.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],
   })
@@ -68,7 +67,7 @@ const LeaderboardRank = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = index_module.L()
+    const props = index_module.isDemo()
       ? useLeaderboardRankDemo(this)
       : useLeaderboardRank(this);
     return index.h(sqmLeaderboardRankView.LeaderboardRankView, Object.assign({}, props));

package/dist/cjs/{sqm-navigation-sidebar-item-view-85e51ba6.js → sqm-navigation-sidebar-item-view-46a53c67.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const index_module = require('./index.module-1c799b1f.js');
+const index_module = require('./index.module-d3a28293.js');
 const mixins = require('./mixins-338ca5f1.js');
-const JSS = require('./JSS-a75f3a9a.js');
+const JSS = require('./JSS-c73206b7.js');
 
 function NavigationSidebarItemView(props) {
   const { states, data } = props;
@@ -35,7 +35,7 @@ function NavigationSidebarItemView(props) {
   const styleString = sheet.toString();
   return (index.h("a", { href: data.path, onClick: (e) => {
       e.preventDefault();
-      index_module.wn.push(data.path);
+      index_module.fn.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 }),

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

@@ -3,18 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./use-callback-e754042f.js');
-const index_module = require('./index.module-1c799b1f.js');
-require('./extends-08099afd.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+require('./use-callback-5d15897d.js');
+const index_module = require('./index.module-d3a28293.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-338ca5f1.js');
-require('./JSS-a75f3a9a.js');
+require('./JSS-c73206b7.js');
 const utils = require('./utils-8ef4fe4a.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-85e51ba6.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-46a53c67.js');
 
 function useNavigationSidebarItem(props) {
-  const currentPage = index_module.bn();
+  const currentPage = index_module.ln();
   return {
     states: {
       active: currentPage.pathname === props.path,
@@ -34,7 +33,7 @@ const NavigationSidebarItem = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = index_module.L()
+    const props = index_module.isDemo()
       ? useSidebarItemDemo(utils.getProps(this))
       : useNavigationSidebarItem(utils.getProps(this));
     return index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, props));

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

@@ -3,11 +3,195 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./extends-08099afd.js');
-require('./mixins-338ca5f1.js');
-require('./JSS-a75f3a9a.js');
-const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-0ee28f65.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+require('./use-callback-5d15897d.js');
+const index_module = require('./index.module-d3a28293.js');
+const mixins = require('./mixins-338ca5f1.js');
+const JSS = require('./JSS-c73206b7.js');
+
+const style = {
+  ItemsContainer: {
+    "min-width": "290px",
+    "max-width": "320px",
+    "box-sizing": "border-box",
+    padding: "20px 15px",
+    ...mixins.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 = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+function NavigationSidebarView(props, children) {
+  return [
+    index.h("div", { class: "hamburger-container" },
+      index.h("input", { type: "checkbox", class: "toggler", part: "toggler" }),
+      index.h("div", { class: "hamburger" },
+        index.h("div", { class: "line" }),
+        index.h("div", { class: "line" }),
+        index.h("div", { class: "line" })),
+      index.h("ul", { class: "menu-items" }, props.mobileItemsSlot)),
+    index.h("div", { class: sheet.classes.ItemsContainer },
+      index.h("style", { type: "text/css" },
+        vanillaStyle,
+        styleString,
+        hamburgerStyle),
+      index.h("div", null, children)),
+  ];
+}
+
+function useNavigationSidebar(renderNavigationItem) {
+  const host = index_module.R();
+  const [mobileChildren, setMobileChildren] = stencilHooks_module.useState([]);
+  const children = host.children;
+  const renderChildren = Array.from(children).map(async (child) => await renderNavigationItem(child));
+  stencilHooks_module.useEffect(() => {
+    if (children)
+      setClonedChildren();
+  }, [children]);
+  async function setClonedChildren() {
+    const clonedChildren = await Promise.all(renderChildren);
+    setMobileChildren(clonedChildren);
+  }
+  return { mobileChildren };
+}
 
 const NavigationSidebar = class {
   constructor(hostRef) {
@@ -16,8 +200,15 @@ const NavigationSidebar = class {
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
+  async renderNavigationItem(child) {
+    return index.h("div", { innerHTML: child.outerHTML });
+  }
   render() {
-    return (index.h(sqmNavigationSidebarView.NavigationSidebarView, null, index.h("slot", null)));
+    const { mobileChildren } = useNavigationSidebar(this.renderNavigationItem);
+    const props = {
+      mobileItemsSlot: mobileChildren,
+    };
+    return (index.h(NavigationSidebarView, Object.assign({}, props), index.h("slot", null)));
   }
 };