@saasquatch/mint-components 1.15.0-99 → 1.15.0

package/dist/esm/sqm-lead-checkbox-field-view-a8c1c78e.js

@@ -0,0 +1,81 @@
+import { h } from './index-91e7729f.js';
+import { i as intl } from './global-be1f9992.js';
+import { j as jss, a as create } from './JSS-67b5cff8.js';
+
+const style = {
+  ErrorStyle: {
+    "&::part(control)": {
+      borderColor: "var(--sl-color-danger-500)",
+      outline: "var(--sl-color-danger-500)",
+    },
+    "&:host": {
+      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
+    },
+  },
+  ErrorMessageStyle: {
+    margin: 0,
+    marginTop: "5px",
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-input-help-text-font-size-medium)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+  },
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-checkbox::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: 20px;
+}
+sl-checkbox::part(base){
+  align-items: start;
+}
+`;
+jss.setup(create());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+function LeadCheckboxFieldView(props) {
+  var _a, _b, _c, _d, _e;
+  const { states, content } = props;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
+  const getRequiredFieldErrorMessage = ({ checkboxLabel, }) => intl.formatMessage({
+    id: `requiredFieldErrorMessage-${checkboxLabel}`,
+    defaultMessage: content.errorMessage,
+  }, {
+    checkboxLabel,
+  });
+  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, "onSl-change": (e) => {
+        e.target.value = e.target.checked;
+      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
+        if (!value && !content.checkboxOptional) {
+          return getRequiredFieldErrorMessage({
+            checkboxLabel: content.checkboxLabel,
+          });
+        }
+      } }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.checkboxName]) ? {
+      class: sheet.classes.ErrorStyle,
+    }
+      : [])), intl.formatMessage({
+      id: content.checkboxName + "-message",
+      defaultMessage: content.checkboxLabel,
+    }, {
+      labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
+    })),
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
+      checkboxLabel: content.checkboxLabel,
+    })))));
+}
+
+export { LeadCheckboxFieldView as L };

package/dist/esm/sqm-lead-checkbox-field.entry.js

@@ -0,0 +1,77 @@
+import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
+import { i as d, n as h } from './stencil-hooks.module-4bc38af4.js';
+import './global-be1f9992.js';
+import { i as isDemo } from './index.module-89a79f66.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import { a as getMissingProps, g as getProps } from './utils-334c1e34.js';
+import './JSS-67b5cff8.js';
+import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-9016d812.js';
+import { L as LeadCheckboxFieldView } from './sqm-lead-checkbox-field-view-a8c1c78e.js';
+
+function useLeadCheckboxField() {
+  const leadFormState = d(LEAD_FORM_STATE_CONTEXT);
+  return {
+    states: {
+      leadFormState,
+    },
+  };
+}
+
+const LeadCheckboxField = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Checkbox label
+     * @uiWidget textArea
+     */
+    this.checkboxLabel = "By signing up you agree to the {labelLink}";
+    /**
+     * Used with link text if the checkbox label contains {labelLink}
+     *
+     * @uiName Checkbox label link
+     */
+    this.checkboxLabelLink = "https://example.com";
+    /**
+     * @uiName Checkbox label link lext
+     */
+    this.checkboxLabelLinkText = "Terms and Conditions";
+    /**
+     * @uiName Unchecked error message
+     */
+    this.errorMessage = "Must be checked";
+    /**
+     * @uiName Optional
+     */
+    this.checkboxOptional = false;
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const missingProps = getMissingProps([
+      {
+        attribute: "checkbox-name",
+        value: this.checkboxName,
+      },
+    ]);
+    if (!isDemo() && missingProps) {
+      return (h$1(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this checkbox field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
+    }
+    const content = {
+      ...getProps(this),
+    };
+    const { states } = isDemo()
+      ? useLeadCheckboxFieldDemo(this)
+      : useLeadCheckboxField();
+    return (h$1(LeadCheckboxFieldView, { states: states, content: content }));
+  }
+};
+function useLeadCheckboxFieldDemo(props) {
+  return cjs({
+    states: {
+      leadFormState: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+export { LeadCheckboxField as sqm_lead_checkbox_field };

package/dist/esm/sqm-lead-input-field-view-4ede5d7f.js

@@ -0,0 +1,49 @@
+import { h } from './index-91e7729f.js';
+import { i as intl } from './global-be1f9992.js';
+import { j as jss, a as create } from './JSS-67b5cff8.js';
+import { E as ErrorStyles } from './mixins-83f90fa1.js';
+
+const style = {
+  ErrorStyle: ErrorStyles,
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-medium)",
+  },
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+`;
+jss.setup(create());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+function LeadInputFieldView(props) {
+  var _a, _b, _c, _d, _e, _f;
+  const { states, content } = props;
+  const getRequiredFieldErrorMessage = ({ fieldLabel, }) => intl.formatMessage({
+    id: `requiredFieldErrorMessage-${fieldLabel}`,
+    defaultMessage: content.requiredFieldErrorMessage,
+  }, {
+    fieldLabel,
+  });
+  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.fieldName}`, type: content.fieldType, label: `${content.fieldLabel}${content.fieldOptional ? ` ${content.optionalLabel}` : ""}` }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.disabled), validationError: ({ value }) => {
+        if (!value && !content.fieldOptional) {
+          return getRequiredFieldErrorMessage({
+            fieldLabel: content.fieldLabel,
+          });
+        }
+      } }, (((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d[content.fieldName]) ? {
+      class: sheet.classes.ErrorStyle,
+      helpText: ((_f = (_e = states.leadFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f[content.fieldName]) ||
+        content.requiredFieldErrorMessage,
+    }
+      : [])))));
+}
+
+export { LeadInputFieldView as L };

package/dist/esm/sqm-lead-input-field.entry.js

@@ -0,0 +1,84 @@
+import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
+import { i as d, n as h } from './stencil-hooks.module-4bc38af4.js';
+import './global-be1f9992.js';
+import { i as isDemo } from './index.module-89a79f66.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import { g as getProps, a as getMissingProps } from './utils-334c1e34.js';
+import './JSS-67b5cff8.js';
+import './mixins-83f90fa1.js';
+import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-9016d812.js';
+import { L as LeadInputFieldView } from './sqm-lead-input-field-view-4ede5d7f.js';
+
+function useLeadInputField() {
+  const leadFormState = d(LEAD_FORM_STATE_CONTEXT);
+  return {
+    states: {
+      leadFormState,
+    },
+  };
+}
+
+const LeadInputField = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Optional label
+     */
+    this.optionalLabel = "(optional)";
+    /**
+     * @uiName Input type
+     * @uiType string
+     * @uiEnum ["text", "date", "tel"]
+     * @uiEnumNames ["Text", "Date", "Phone Number"]
+     */
+    this.fieldType = "text";
+    /**
+     * The message to be displayed when a required field is not filled.
+     *
+     * @uiName Required field message
+     * @uiWidget textArea
+     */
+    this.requiredFieldErrorMessage = "Please enter a {fieldLabel}";
+    /**
+     * @uiName Optional
+     * @default
+     */
+    this.fieldOptional = false;
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const content = {
+      ...getProps(this),
+    };
+    const missingProps = getMissingProps([
+      {
+        attribute: "field-name",
+        value: this.fieldName,
+      },
+    ]);
+    if (!isDemo() && missingProps) {
+      return (h$1(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this input field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
+    }
+    const { states } = isDemo()
+      ? useLeadInputFieldDemo(this)
+      : useLeadInputField();
+    return (h$1(LeadInputFieldView, { states: states, content: content }));
+  }
+};
+function useLeadInputFieldDemo(props) {
+  return cjs({
+    states: {
+      leadForState: {},
+    },
+    content: {
+      fieldName: props.fieldName,
+      fieldLabel: props.fieldLabel,
+      fieldType: props.fieldType,
+      requiredFieldErrorMessage: props.requiredFieldErrorMessage,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+export { LeadInputField as sqm_lead_input_field };

package/dist/esm/sqm-leaderboard-rank-view-753c8d4a.js

@@ -0,0 +1,8 @@
+import { h } from './index-91e7729f.js';
+
+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,9 +1,9 @@
-import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
-import { i as intl } from './global-f97ae778.js';
-import { n as h } from './dom-context-hooks.module-63370afd.js';
-import { d as dist, H, J, w as wn, i as isDemo } from './index.module-38dad6c9.js';
+import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
+import { n as h } from './stencil-hooks.module-4bc38af4.js';
+import { i as intl } from './global-be1f9992.js';
+import { d as dist, H, J, w as wn, i as isDemo } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-18baae5b.js';
+import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-753c8d4a.js';
 
 const GET_RANK = dist.gql `
   query ($type: String!, $filter: UserLeaderboardFilterInput) {
@@ -48,7 +48,7 @@ function useLeaderboardRank(props) {
   };
 }
 
-const sqmLeaderboardRankCss = "p,.P{font-size:var(--sl-font-size-small);color:var(--sqm-text);margin-top:0px}p.Subtitle,.P.Subtitle{color:var(--sqm-text-subdued);margin:0px}";
+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) {

package/dist/esm/{sqm-logout-current-user-view-f21e54e3.js → sqm-logout-current-user-view-8ef8180f.js}

@@ -1,4 +1,4 @@
-import { h } from './index-b3a06de8.js';
+import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 
 const style = {

package/dist/esm/sqm-logout-current-user.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
-import { n as h } from './dom-context-hooks.module-63370afd.js';
-import { d as dist, J, w as wn, b as setUserIdentity, i as isDemo } from './index.module-38dad6c9.js';
+import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
+import { n as h } from './stencil-hooks.module-4bc38af4.js';
+import { d as dist, J, w as wn, b as setUserIdentity, i as isDemo } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps } from './utils-03188de2.js';
+import { g as getProps } from './utils-334c1e34.js';
 import './JSS-67b5cff8.js';
-import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-f21e54e3.js';
+import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-8ef8180f.js';
 
 const GET_USER_DETAILS = dist.gql `
   query getUserDetails {

package/dist/esm/sqm-navigation-sidebar-item-view-8f1c72bc.js

@@ -0,0 +1,43 @@
+import { h } from './index-91e7729f.js';
+import { j as jn } from './index.module-89a79f66.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { g as gap } from './mixins-83f90fa1.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", { part: "sqm-link", href: data.path, onClick: (e) => {
+      e.preventDefault();
+      jn.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, part: "sqm-label" }, data.label)));
+}
+
+export { NavigationSidebarItemView as N };

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
-import { n as h } from './dom-context-hooks.module-63370afd.js';
-import { k as kn, i as isDemo } from './index.module-38dad6c9.js';
+import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
+import { n as h } from './stencil-hooks.module-4bc38af4.js';
+import { k as kn, i as isDemo } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps } from './utils-03188de2.js';
+import { g as getProps } from './utils-334c1e34.js';
 import './JSS-67b5cff8.js';
-import './mixins-f750863a.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-797601b0.js';
+import './mixins-83f90fa1.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-8f1c72bc.js';
 
 function useNavigationSidebarItem(props) {
   const currentPage = kn();
@@ -16,29 +16,14 @@ function useNavigationSidebarItem(props) {
     data: {
       label: props.label,
       icon: props.icon,
-      path: props.path,
+      path: props.path
     },
-    backgroundColor: props.backgroundColor,
-    backgroundHoverColor: props.backgroundHoverColor,
-    textColor: props.textColor,
-    textHoverColor: props.textHoverColor,
-    borderRadius: props.borderRadius,
-    backgroundFocusedColor: props.backgroundFocusedColor,
-    textFocusedColor: props.textFocusedColor,
-    padding: props.padding,
   };
 }
 
 const NavigationSidebarItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * @uiName Padding
-     * @uiType string
-     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
-     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
-     */
-    this.padding = "x-small";
     h(this);
   }
   disconnectedCallback() { }
@@ -58,14 +43,6 @@ function useSidebarItemDemo(props) {
       label: props.label || "Dashboard",
       icon: props.icon || "house",
     },
-    backgroundColor: props.backgroundColor,
-    backgroundHoverColor: props.backgroundHoverColor,
-    textColor: props.textColor,
-    textHoverColor: props.textHoverColor,
-    borderRadius: props.borderRadius,
-    backgroundFocusedColor: props.backgroundFocusedColor,
-    textFocusedColor: props.textFocusedColor,
-    padding: props.padding,
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 

package/dist/esm/{sqm-navigation-sidebar-view-0a2ec560.js → sqm-navigation-sidebar-view-9d802b78.js}

@@ -1,7 +1,6 @@
-import { h } from './index-b3a06de8.js';
+import { h } from './index-91e7729f.js';
 
-function NavigationSidebarView(props, children) {
-  const vanillaStyle = `
+const vanillaStyle = `
 
 * {
   padding: 0;
@@ -9,16 +8,6 @@ function NavigationSidebarView(props, children) {
   box-sizing: border-box;
 }
 
-.container {
-  background: var(--sqm-portal-background);
-}
-
-.menu-items {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
 @keyframes slideIn {
   0% {
     left: -350px;
@@ -70,12 +59,12 @@ function NavigationSidebarView(props, children) {
     flex-direction: column;
     z-index: 100;
   }
-  .menu-items {
+  .menu-items { 
     display: none;
     padding: 20px;
-    border-right: var(--sqm-border-thickness) solid var(--sqm-border-color);
+    border-right: 1px solid #eaeaea;
     padding-top: 60px;
-    background: var(--sqm-portal-background); 
+    background: white; 
     width: 100vw;
     height: 100vh;
     position: absolute;
@@ -139,7 +128,7 @@ function NavigationSidebarView(props, children) {
   .toggler:checked ~ .hamburger > .line:nth-child(2),
   .toggler:checked ~ .hamburger > .line:nth-child(3) {
     width: 75%;
-    border-bottom: 3px solid ${props.mobileMenuColor};
+    border-bottom: 3px solid #444445;
     margin: 0;
   }
 
@@ -149,10 +138,11 @@ function NavigationSidebarView(props, children) {
     height: 4px;
     width: 100%;
     margin-bottom: 3px;
-    border-bottom: 5px solid ${props.mobileMenuColor};
+    border-bottom: 5px solid #444445;
   }
 }
 `;
+function NavigationSidebarView(props, children) {
   return (h("div", { class: "container", part: "sqm-base" },
     h("style", null, vanillaStyle),
     h("input", Object.assign({ type: "checkbox", class: "toggler" }, props)),

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

@@ -1,31 +1,21 @@
-import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
-import { n as h, k as useState, f as useEffect } from './dom-context-hooks.module-63370afd.js';
-import { i as isDemo, k as kn, H } from './index.module-38dad6c9.js';
-import { c as cjs } from './cjs-bdfb4486.js';
-import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-0a2ec560.js';
+import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
+import { n as h, k as useState, f as useEffect } from './stencil-hooks.module-4bc38af4.js';
+import { k as kn, H } from './index.module-89a79f66.js';
+import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-9d802b78.js';
 
 const NavigationSidebar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
-    /**
-     * @uiName Text color
-     * @uiWidget color
-     * @format color
-     * @uiGroup Style
-     */
-    this.mobileMenuColor = "var(--sqm-text, #444445)";
     h(this);
   }
   disconnectedCallback() { }
   render() {
-    const props = isDemo()
-      ? useDemoNavigationSidebar(this)
-      : useNavigationSidebar(this);
+    const props = useNavigationSidebar();
     return (h$1(NavigationSidebarView, Object.assign({}, props), h$1("slot", null)));
   }
 };
-function useNavigationSidebar(props) {
+function useNavigationSidebar() {
   const location = kn();
   const programId = H();
   const [checked, setChecked] = useState(false);
@@ -37,15 +27,9 @@ function useNavigationSidebar(props) {
     setChecked(e.target.checked);
   }
   return {
-    mobileMenuColor: props.mobileMenuColor,
     checked,
     onClick,
   };
 }
-function useDemoNavigationSidebar(props) {
-  return cjs({
-    mobileMenuColor: props.mobileMenuColor,
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
 
 export { NavigationSidebar as sqm_navigation_sidebar };