@saasquatch/mint-components 1.6.2-9 → 1.6.3-1

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-eefa3570.js';
-import './extends-c31f1eff.js';
-import { c as createStyleSheet } from './JSS-f00f9536.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { g as getProps } from './utils-334c1e34.js';
-import { P as PortalContainerView } from './sqm-portal-container-view-ca454627.js';
-import { P as PortalSectionView } from './sqm-portal-section-view-6c249c74.js';
+import { P as PortalContainerView } from './sqm-portal-container-view-21bd84e0.js';
+import { P as PortalSectionView } from './sqm-portal-section-view-a991e019.js';
 
 function EmptyStateView(props) {
   const { emptyStateHeader, emptyStateImage, emptyStateText } = props;
@@ -43,10 +42,10 @@ function ImageView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-    :host{
-      display: block;   
-    }
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
   `;
   return (h("div", null,
     h("style", { type: "text/css" },
@@ -109,52 +108,52 @@ const PortalContainer = class {
   }
 };
 
-const vanillaStyle = `
-  sqm-text {
-    display: block;
-  }
-
-  sqm-text h1 {
-    font-size: var(--sl-font-size-xxx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h2 {
-    font-size: var(--sl-font-size-xx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h3 {
-    font-size: var(--sl-font-size-x-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h4 {
-    font-size: var(--sl-font-size-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text p {
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text sub {
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-400);
-    margin: 0;
-  }
+const vanillaStyle = `
+  sqm-text {
+    display: block;
+  }
+
+  sqm-text h1 {
+    font-size: var(--sl-font-size-xxx-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text h2 {
+    font-size: var(--sl-font-size-xx-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text h3 {
+    font-size: var(--sl-font-size-x-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text h4 {
+    font-size: var(--sl-font-size-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text p {
+    font-size: var(--sl-font-size-medium);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text sub {
+    font-size: var(--sl-font-size-small);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-400);
+    margin: 0;
+  }
 `;
 const Text = class {
   constructor(hostRef) {

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, f as useEffect, m as h } from './stencil-hooks.module-eefa3570.js';
 import './use-callback-684c8bb7.js';
-import { L, C as Ce, U, b as be } from './index.module-132e274f.js';
-import './extends-c31f1eff.js';
+import { H, y as ye, L, h as he } from './index.module-14794b69.js';
 
 async function useGraphQLClientProvider({ domain }) {
-  const token = L();
+  const token = H();
   const appDomain = domain;
-  const tenantAlias = U();
+  const tenantAlias = L();
   // Memoization is shared. One client per domain, tenant and token (or null)
-  const managedIdentityClient = Ce(appDomain, tenantAlias, token);
-  const [, setGraphQLClient] = m(be, managedIdentityClient);
+  const managedIdentityClient = ye(appDomain, tenantAlias, token);
+  const [, setGraphQLClient] = m(he, managedIdentityClient);
   useEffect(() => {
     setGraphQLClient(managedIdentityClient);
   }, [managedIdentityClient]);

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-9fb2be89.js → sqm-hero-view-1904c178.js}

@@ -1,7 +1,7 @@
 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-f00f9536.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {
@@ -119,20 +119,20 @@ function HeroView(props) {
   };
   const sheet = 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;
-  }
-  
+  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 (h("div", { class: sheet.classes.Container },

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-eefa3570.js';
 import './use-callback-684c8bb7.js';
-import './extends-c31f1eff.js';
-import './JSS-f00f9536.js';
+import './JSS-67b5cff8.js';
 import { g as getProps } from './utils-334c1e34.js';
-import { H as HeroView } from './sqm-hero-view-9fb2be89.js';
+import { H as HeroView } from './sqm-hero-view-1904c178.js';
 
 const Hero = class {
   constructor(hostRef) {

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

@@ -1,31 +1,30 @@
 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-44835899.js';
+import { i as intl } from './global-126fa55c.js';
 import './use-callback-684c8bb7.js';
-import { d as dist, W, _, a as dn, i as isDemo } from './index.module-132e274f.js';
-import './extends-c31f1eff.js';
+import { d as dist, O, N, a as dn, i as isDemo } from './index.module-14794b69.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-10657658.js';
 
-const GET_RANK = dist.gql `
-  query ($type: String!, $filter: UserLeaderboardFilterInput) {
-    viewer {
-      ... on User {
-        leaderboardRank(type: $type, filter: $filter) {
-          rowNumber
-          rank
-          denseRank
-        }
-      }
-    }
-  }
+const GET_RANK = 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, _d;
-  const programIdContext = W();
+  const programIdContext = O();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
-  const user = _();
+  const user = N();
   const rankVariables = programId
     ? {
       type: props.leaderboardType,

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

@@ -1,7 +1,7 @@
 import { h } from './index-17b4da69.js';
-import { v as vn } from './index.module-132e274f.js';
+import { f as fn } from './index.module-14794b69.js';
 import { g as gap } from './mixins-f60a614c.js';
-import { c as createStyleSheet } from './JSS-f00f9536.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.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();
-      vn.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-eefa3570.js';
 import './use-callback-684c8bb7.js';
-import { g as gn, i as isDemo } from './index.module-132e274f.js';
-import './extends-c31f1eff.js';
+import { l as ln, i as isDemo } from './index.module-14794b69.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
-import './JSS-f00f9536.js';
+import './JSS-67b5cff8.js';
 import { g as getProps } from './utils-334c1e34.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-364af025.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-d6b9f5d0.js';
 
 function useNavigationSidebarItem(props) {
-  const currentPage = gn();
+  const currentPage = ln();
   return {
     states: {
       active: currentPage.pathname === props.path,

package/dist/esm/{sqm-navigation-sidebar-view-06d444ca.js → sqm-navigation-sidebar-view-a5b72846.js}

@@ -1,6 +1,6 @@
 import { h } from './index-17b4da69.js';
 import { g as gap } from './mixins-f60a614c.js';
-import { c as createStyleSheet } from './JSS-f00f9536.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
 
 const style = {
   ItemsContainer: {
@@ -11,12 +11,12 @@ const style = {
     ...gap({ direction: "column", size: "4px" }),
   },
 };
-const vanillaStyle = `
-  :host{    
-    width: 30vw;
-    min-width: min-content;
-    max-width: 320px;
-  }
+const vanillaStyle = `
+  :host{    
+    width: 30vw;
+    min-width: min-content;
+    max-width: 320px;
+  }
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();

package/dist/esm/sqm-navigation-sidebar.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-eefa3570.js';
-import './extends-c31f1eff.js';
 import './mixins-f60a614c.js';
-import './JSS-f00f9536.js';
-import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-06d444ca.js';
+import './JSS-67b5cff8.js';
+import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-a5b72846.js';
 
 const NavigationSidebar = class {
   constructor(hostRef) {

package/dist/esm/sqm-password-field.entry.js

@@ -1,12 +1,11 @@
 import { h, r as registerInstance } from './index-17b4da69.js';
 import { o as d, i as useState, m as h$1 } from './stencil-hooks.module-eefa3570.js';
 import './use-callback-684c8bb7.js';
-import { i as isDemo } from './index.module-132e274f.js';
-import './extends-c31f1eff.js';
+import { i as isDemo } from './index.module-14794b69.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { E as ErrorStyles } from './mixins-f60a614c.js';
-import { c as createStyleSheet } from './JSS-f00f9536.js';
-import { F as FORM_VALIDATION_CONTEXT, R as REGISTRATION_FORM_STATE_CONTEXT } from './useRegistrationFormState-ebb08075.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { R as REGISTRATION_FORM_STATE_CONTEXT } from './useRegistrationFormState-abed2c1e.js';
 
 var constants = {
   error: {
@@ -471,20 +470,20 @@ const style$1 = {
   },
   ErrorStyle: ErrorStyles,
 };
-const vanillaStyle = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
 `;
 const sheet$1 = createStyleSheet(style$1);
 const styleString$1 = sheet$1.toString();
 function PortalResetPasswordView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const { states, callbacks } = props;
   return (h("div", { class: sheet$1.classes.InputContainer },
     h("style", { type: "text/css" },
@@ -497,16 +496,16 @@ function PortalResetPasswordView(props) {
       } }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.password) ? {
       value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.password,
     }
-      : {}), (((_g = states.validationErrors) === null || _g === void 0 ? void 0 : _g.password) ? {
+      : {}), (((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.password) ? {
       class: sheet$1.classes.ErrorStyle,
-      helpText: ((_h = states.validationErrors) === null || _h === void 0 ? void 0 : _h.password) || "Cannot be empty",
+      helpText: ((_k = (_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.validationErrors) === null || _k === void 0 ? void 0 : _k.password) ||
+        "Cannot be empty",
     }
       : []), { onInput: (input) => states.enableValidation && callbacks.onInput(input) })),
     states.dynamicValidation));
 }
 
 function usePasswordField(props) {
-  const validationState = d(FORM_VALIDATION_CONTEXT);
   const registrationFormState = d(REGISTRATION_FORM_STATE_CONTEXT);
   const [dynamicValidation, setDynamicValidation] = useState("");
   function onInput(input) {
@@ -515,10 +514,9 @@ function usePasswordField(props) {
   }
   return {
     states: {
-      enableValidation: props.enableValidation,
+      enableValidation: !props.disableValidation,
       dynamicValidation,
       registrationFormState,
-      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
       content: {
         fieldLabel: props.fieldLabel,
       },
@@ -540,10 +538,10 @@ const PortalPasswordField = class {
      */
     this.fieldLabel = "Password";
     /**
-     * Enable live password validation
-     * @uiName Enable Validation
+     * Disable live password validation
+     * @uiName Disable Validation
      */
-    this.enableValidation = true;
+    this.disableValidation = false;
     h$1(this);
   }
   disconnectedCallback() { }
@@ -569,12 +567,11 @@ function usePasswordFieldDemo(props) {
   }
   return cjs({
     states: {
-      enableValidation: true,
+      enableValidation: !props.disableValidation,
       dynamicValidation,
-      validationErrors: ((_f = (_e = props === null || props === void 0 ? void 0 : props.demoData) === null || _e === void 0 ? void 0 : _e.states) === null || _f === void 0 ? void 0 : _f.validationErrors) || {},
-      registrationFormState: {},
+      registrationFormState: ((_f = (_e = props === null || props === void 0 ? void 0 : props.demoData) === null || _e === void 0 ? void 0 : _e.states) === null || _f === void 0 ? void 0 : _f.registrationFormState) || {},
       content: {
-        fieldLabel: "Password",
+        fieldLabel: props.fieldLabel,
       },
     },
     callbacks: {

package/dist/esm/sqm-popup-container.entry.js

@@ -1,8 +1,7 @@
 import { h, c as Host, r as registerInstance } from './index-17b4da69.js';
 import { m as h$1 } from './stencil-hooks.module-eefa3570.js';
 import './use-callback-684c8bb7.js';
-import { Q } from './index.module-132e274f.js';
-import './extends-c31f1eff.js';
+import { U } from './index.module-14794b69.js';
 import { g as getProps } from './utils-334c1e34.js';
 
 const PopupContainerView = (props) => {
@@ -16,10 +15,10 @@ const PopupContainerView = (props) => {
 };
 
 function usePopupContainer(props) {
-  const engagementMedium = Q();
+  const engagementMedium = U();
   function closePopup() {
     var _a;
-    if (Q() === "POPUP") {
+    if (U() === "POPUP") {
       (_a = window.frameElement["squatchJsApi"]) === null || _a === void 0 ? void 0 : _a.close();
     }
   }
@@ -33,7 +32,7 @@ function usePopupContainer(props) {
       ? "0"
       : `var(--sl-spacing-${props.embedPadding})`
     : "0";
-  const padding = Q() === "POPUP" ? popupPadding : embedPadding;
+  const padding = U() === "POPUP" ? popupPadding : embedPadding;
   return {
     states: {
       showCloseButton: props.closeButton && engagementMedium === "POPUP",

package/dist/esm/{sqm-portal-container-view-ca454627.js → sqm-portal-container-view-21bd84e0.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { c as createStyleSheet } from './JSS-f00f9536.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
 
 function PortalContainerView(props, children) {
   const style = {
@@ -16,10 +16,10 @@ function PortalContainerView(props, children) {
       justifyContent: props.justifyContent,
     },
   };
-  const vanillaStyle = `
-  :host{
-    width: 100%;
-    display: block;
+  const vanillaStyle = `
+  :host{
+    width: 100%;
+    display: block;
   }`;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();

package/dist/esm/{sqm-portal-email-verification-view-5ac21bb4.js → sqm-portal-email-verification-view-c181c9ff.js}

@@ -1,25 +1,25 @@
 import { h } from './index-17b4da69.js';
-import { i as intl } from './global-44835899.js';
+import { i as intl } from './global-126fa55c.js';
 import { A as AuthWrapper, a as AuthColumn } from './mixins-f60a614c.js';
-import { c as createStyleSheet } from './JSS-f00f9536.js';
-import { T as TextSpanView } from './sqm-text-span-view-0ba1484d.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { T as TextSpanView } from './sqm-text-span-view-2567b6c0.js';
 
 const style = {
   Wrapper: AuthWrapper,
   Column: { ...AuthColumn },
 };
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 function PortalEmailVerificationView(props) {
-  const { states, callbacks, content: { email, verifyMessage, emailVerificationHeader, resendEmailButtonText, }, } = props;
+  const { states, callbacks, content: { email, verifyMessage, emailVerificationHeader, resendEmailButtonText, verificationStatusMessage, verificationLoadingMessage, }, } = props;
   return (h("div", { class: sheet.classes.Wrapper },
     h("style", { type: "text/css" },
       vanillaStyle,
@@ -36,7 +36,11 @@ function PortalEmailVerificationView(props) {
       }, {
         email: (h("span", { style: { fontWeight: "var(--sl-font-weight-semibold)" } }, email)),
       })),
-      h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, resendEmailButtonText))));
+      h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, resendEmailButtonText),
+      states.loadingVerification ? (h("p", null, verificationLoadingMessage)) : (h("p", null, intl.formatMessage({
+        id: `verificationStatus`,
+        defaultMessage: verificationStatusMessage,
+      }, { countdown: states.countdown }))))));
 }
 
 export { PortalEmailVerificationView as P };