@saasquatch/mint-components 1.15.0-4 → 1.15.0-41

package/dist/collection/components/sqm-portal-forgot-password/sqm-portal-forgot-password-view.js

@@ -2,15 +2,7 @@ import { h } from "@stencil/core";
 import { AuthButtonsContainer, AuthColumn, AuthWrapper, } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
-const style = {
-  Wrapper: AuthWrapper,
-  Column: { ...AuthColumn },
-  ButtonsContainer: AuthButtonsContainer,
-  SecondaryButton: {
-    cursor: "pointer",
-    width: "25%",
-  },
-};
+import { navigation } from "@saasquatch/component-boilerplate";
 const vanillaStyle = `
 :host {
   display: block;
@@ -19,15 +11,30 @@ const vanillaStyle = `
   display: none;
 }
 `;
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
 export function PortalForgotPasswordView(props) {
-  const { states, callbacks, content } = props;
-  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
+  const { states, callbacks, content, styles } = props;
+  const style = {
+    FormWrapper: {
+      ...AuthWrapper,
+      background: styles.backgroundColor,
+      borderRadius: styles.borderRadius,
+      border: styles.border,
+    },
+    Column: { ...AuthColumn },
+    ButtonsContainer: AuthButtonsContainer,
+    SecondaryButton: {
+      margin: "auto",
+      display: "block",
+      cursor: "pointer",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.FormWrapper, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h(TextSpanView, { type: "h3" }, content.messageSlot),
+    h(TextSpanView, { textColor: styles.textColor, type: "h3" }, content.messageSlot),
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
       props.states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error))),
@@ -36,5 +43,5 @@ export function PortalForgotPasswordView(props) {
       h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Reset Password"),
-        h("div", { class: sheet.classes.SecondaryButton }, content.secondaryButton)))));
+        h("sl-button", { type: "text", exportparts: "base: tertiarybutton-base", class: sheet.classes.SecondaryButton, disabled: states.loading, onClick: () => navigation.push(states.loginPath) }, content.loginText)))));
 }

package/dist/collection/components/sqm-portal-forgot-password/sqm-portal-forgot-password.js

@@ -48,6 +48,21 @@ export class PortalForgotPassword {
      * @uiName Email verification sent text
      */
     this.successAlertText = "If an account with that email exists, a password reset email will be sent.";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     */
+    this.backgroundColor = "var(--sqm-portal-background, #ffffff)";
+    /**
+     * @uiName Border radius
+     * @uiWidget number
+     */
+    this.borderRadius = "var(--sqm-border-radius-normal)";
+    /**
+     * @uiName Border style
+     * @uiWidget textArea
+     */
+    this.border = "1px solid var(--sqm-border-color, var(--sqm-text), #eaeaea)";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -62,8 +77,14 @@ export class PortalForgotPassword {
       emailLabel: this.emailLabel,
       submitLabel: this.submitLabel,
       successAlertText: this.successAlertText,
+      loginText: this.loginText,
     };
-    return (h(PortalForgotPasswordView, { states: states, callbacks: callbacks, content: content }));
+    const styles = {
+      backgroundColor: this.backgroundColor,
+      borderRadius: this.borderRadius,
+      border: this.border,
+    };
+    return (h(PortalForgotPasswordView, { states: states, callbacks: callbacks, content: content, styles: styles }));
   }
   static get is() { return "sqm-portal-forgot-password"; }
   static get encapsulation() { return "shadow"; }
@@ -245,12 +266,84 @@ export class PortalForgotPassword {
       "reflect": false,
       "defaultValue": "\"If an account with that email exists, a password reset email will be sent.\""
     },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "background-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-portal-background, #ffffff)\""
+    },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Border radius",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "border-radius",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-border-radius-normal)\""
+    },
+    "border": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Border style",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "border",
+      "reflect": false,
+      "defaultValue": "\"1px solid var(--sqm-border-color, var(--sqm-text), #eaeaea)\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalForgotPasswordViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; loginText?: string; }; styles?: { backgroundColor?: string; borderRadius?: string; border?: string; textColor?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-portal-frame/sqm-portal-frame-view.js

@@ -1,44 +1,49 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
-const style = {
-  HostBlock: HostBlock,
-  Frame: {
-    display: "flex",
-    "flex-direction": "column",
-    "box-sizing": "border-box",
-  },
-  FooterWrapper: {
-    width: "100%",
-    "max-width": "100%",
-    padding: "var(--sl-spacing-medium) var(--sl-spacing-x-large)",
-    background: "var(--sqm-footer-background)",
-    display: "flex",
-    "justify-content": "flex-end",
-    "align-items": "center",
-    "box-sizing": "border-box",
-    "margin-top": "auto",
-  },
-  HeaderWrapper: {
-    width: "100%",
-    "max-width": "100%",
-    "box-sizing": "border-box",
-    display: "flex",
-    "justify-content": "space-between",
-    padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
-    "align-items": "center",
-    "background-color": "var(--sqm-header-background)",
-    "@media screen and (max-width: 499px)": {
-      "flex-direction": "row-reverse",
+export function PortalFrameView(props, children) {
+  const { data, notFullScreen, border } = props;
+  const style = {
+    HostBlock: HostBlock,
+    Frame: {
+      display: "flex",
+      "flex-direction": "column",
+      "box-sizing": "border-box",
+      "&:nth-child(2)": {
+        background: props.backgroundColor,
+      },
+    },
+    FooterWrapper: {
+      width: "100%",
+      "max-width": "100%",
+      padding: "var(--sl-spacing-medium) var(--sl-spacing-x-large)",
+      background: props.headerAndFooterBackgroundColor,
+      display: "flex",
       "justify-content": "flex-end",
-      padding: "0",
+      "align-items": "center",
+      "box-sizing": "border-box",
+      borderTop: border,
+      "margin-top": "auto",
     },
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-export function PortalFrameView(props, children) {
-  const { data, notFullScreen } = props;
+    HeaderWrapper: {
+      width: "100%",
+      "max-width": "100%",
+      "box-sizing": "border-box",
+      display: "flex",
+      "justify-content": "space-between",
+      padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
+      "align-items": "center",
+      borderBottom: border,
+      background: props.headerAndFooterBackgroundColor,
+      "@media screen and (max-width: 499px)": {
+        "flex-direction": "row-reverse",
+        "justify-content": "flex-end",
+        padding: "0",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   return (h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet.classes.Frame, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
     h("div", { class: sheet.classes.HeaderWrapper, part: "sqm-header" },

package/dist/collection/components/sqm-portal-frame/sqm-portal-frame.js

@@ -15,6 +15,26 @@ export class PortalFrame {
      * @undocumented
      */
     this.notFullScreen = false;
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.backgroundColor = "var(--sqm-portal-background, #fff);";
+    // TODO: Replace with border variable later
+    /**
+     * Borders placed to seperate the header and footer from the body content.
+     * @uiName Border
+     * @uiType string
+     */
+    this.border = "1px solid var(--sqm-text, #eaeaea);";
+    /**
+     * Background color for the header and footer.
+     * @uiName Header and Footer Background Color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.headerAndFooterBackgroundColor = "var(--sqm-portal-background, #fff);";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -23,7 +43,7 @@ export class PortalFrame {
     const headerContent = h("slot", { name: "header" });
     const props = isDemo()
       ? usePortalFrameDemo(footerContent, headerContent, this)
-      : usePortalFrame(footerContent, headerContent);
+      : usePortalFrame(footerContent, headerContent, this);
     return (h(PortalFrameView, Object.assign({}, props),
       h("slot", null)));
   }
@@ -51,12 +71,90 @@ export class PortalFrame {
       "reflect": false,
       "defaultValue": "false"
     },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": ""
+      },
+      "attribute": "background-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-portal-background, #fff);\""
+    },
+    "border": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Border",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": "Borders placed to seperate the header and footer from the body content."
+      },
+      "attribute": "border",
+      "reflect": false,
+      "defaultValue": "\"1px solid var(--sqm-text, #eaeaea);\""
+    },
+    "headerAndFooterBackgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Header and Footer Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": "Background color for the header and footer."
+      },
+      "attribute": "header-and-footer-background-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-portal-background, #fff);\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalFrameViewProps>",
-        "resolved": "{ data?: { footer: VNode; header: VNode; }; notFullScreen?: boolean; }",
+        "resolved": "{ data?: { footer: VNode; header: VNode; }; backgroundColor?: string; notFullScreen?: boolean; border?: string; headerAndFooterBackgroundColor?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -89,6 +187,9 @@ export class PortalFrame {
 function usePortalFrameDemo(footerContent, headerContent, props) {
   return deepmerge({
     notFullScreen: true,
+    backgroundColor: props.backgroundColor,
+    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
+    border: props.border,
     data: {
       footer: footerContent ? (footerContent) : (h("span", null, "example@example.com")),
       header: headerContent ? (headerContent) : (h("div", { style: { display: "flex", flexDirection: "column" } },

package/dist/collection/components/sqm-portal-frame/usePortalFrame.js

@@ -1,5 +1,5 @@
 import { useTick } from "@saasquatch/component-boilerplate";
-export function usePortalFrame(footerContent, headerContent) {
+export function usePortalFrame(footerContent, headerContent, props) {
   const [, rerender] = useTick();
   return {
     data: {
@@ -9,5 +9,8 @@ export function usePortalFrame(footerContent, headerContent) {
     callbacks: {
       rerender,
     },
+    backgroundColor: props.backgroundColor,
+    border: props.border,
+    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
   };
 }

package/dist/collection/components/sqm-portal-login/sqm-portal-login-view.js

@@ -10,7 +10,7 @@ const style = {
     cursor: "pointer",
     "font-size": "13px",
     "font-weight": "600",
-    color: "#AAAAAA",
+    color: "var(--sqm-text-subdued)",
     margin: "0",
   },
   ButtonsContainer: {

package/dist/collection/components/sqm-portal-profile/sqm-portal-profile-view.js

@@ -76,7 +76,7 @@ export function PortalProfileView(props) {
             ? errors === null || errors === void 0 ? void 0 : errors.lastName.message : undefined }))),
       h("sl-input", { label: text.emailtext, value: (_e = states.user) === null || _e === void 0 ? void 0 : _e.email, exportparts: "label: input-label, base: input-base", disabled: true }),
       states.showCountry && (h("sl-input", { label: text.countrytext, value: country, exportparts: "label: input-label, base: input-base", disabled: true })),
-      h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
+      h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
           callbacks.onSubmit(e);
         }, submit: true }, text.submitChangeButtonText))));
 }

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step-view.js

@@ -8,8 +8,11 @@ export function ProgramExplainerStepView(props) {
       width: "100%",
       padding: "var(--sl-spacing-x-large)",
       lineHeight: "var(--sl-line-height-dense)",
+      borderRadius: props.borderRadius
+        ? `${props.borderRadius}px`
+        : "var(--sqm-border-radius-normal)",
       color: props.textColor || "var(--sqm-text)",
-      background: props.backgroundColor || "var(--sl-color-primary-50)",
+      background: props.backgroundColor || "var(--sqm-accent-color-background)",
       "@media (max-width: 499px)": {
         flexDirection: "row",
         width: "auto",
@@ -44,11 +47,14 @@ export function ProgramExplainerStepView(props) {
       borderRadius: "100%",
       objectFit: "cover",
       userSelect: "none",
-      background: "#FFF",
-      color: "var(--sl-color-primary-300)",
+      background: props.iconBackgroundColor || "var(--sl-color-white)",
+      color: props.iconColor || "var(--sqm-accent-color-icon)",
       fontSize: "26px",
       textAlign: "center",
       lineHeight: "72px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
     },
   };
   const sheet = createStyleSheet(style);

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step.js

@@ -71,7 +71,7 @@ export class ProgramExplainerStep {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "Text color",
@@ -97,7 +97,7 @@ export class ProgramExplainerStep {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "Background color",
@@ -114,6 +114,81 @@ export class ProgramExplainerStep {
       "attribute": "background-color",
       "reflect": false
     },
+    "borderRadius": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border radius",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "type"
+          }],
+        "text": "Amount in pixels"
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
+    "iconBackgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Icon Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": ""
+      },
+      "attribute": "icon-background-color",
+      "reflect": false
+    },
+    "iconColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Icon color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": ""
+      },
+      "attribute": "icon-color",
+      "reflect": false
+    },
     "imageUrl": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/sqm-qr-code/sqm-qr-code-view.js

@@ -38,11 +38,6 @@ const style = {
     height: "100%",
     maxWidth: "335px",
   },
-  TextButton: {
-    "&::part(base)": {
-      color: "var(--sl-color-gray-600)",
-    },
-  },
   LoadingSkeleton: {
     "&::part(indicator)": {
       borderRadius: "0px !important",
@@ -93,6 +88,6 @@ export function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCo
       !hideTitle && h("span", { part: "sqm-title" }, titleText),
       codeContent,
       h("div", { class: sheet.classes.ButtonContainer },
-        h("sl-button", { size: "small", exportparts: "base: defaultbutton-base", type: "default", onClick: createDownloadable }, downloadCodeText),
-        h("sl-button", { size: "small", exportparts: "base: textbutton-base", type: "text", onClick: createPrintable, class: sheet.classes.TextButton }, printCodeText)))));
+        h("sl-button", { size: "small", exportparts: "base: primarybutton-base", type: "primary", onClick: createDownloadable }, downloadCodeText),
+        h("sl-button", { size: "small", exportparts: "base: tertiarybutton-base", type: "text", onClick: createPrintable }, printCodeText)))));
 }

package/dist/collection/components/sqm-referral-card/sqm-referral-card-view.js

@@ -1,43 +1,44 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
-const style = {
-  Container: {
-    borderRadius: "var(--sl-border-radius-large)",
-    color: "var(--sqm-text)",
-    background: "var(--sl-color-neutral-0)",
-    display: "flex",
-    flexDirection: "column",
-    rowGap: "var(--sl-spacing-large)",
-  },
-  EndContainer: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-  },
-  ColumnContainer: {
-    "& p": { margin: "0" },
-    display: "grid",
-    gridAutoColumns: "minmax(0, 1fr)",
-    gridAutoFlow: "column",
-    gap: "calc(2 * var(--sl-spacing-medium))",
-    "@media (max-width: 499px)": {
-      gridAutoFlow: "unset",
-      gridAutoColumns: "unset",
-      gridTemplateColumns: "1fr",
-      border: "none",
-    },
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
 const vanillaStyle = `
     :host{
       display: block;   
     }
   `;
 export function ReferralCardView(props) {
+  const style = {
+    Container: {
+      borderRadius: props.borderRadius || "var(--sqm-border-radius-normal)",
+      color: props.textColor || "var(--sqm-text)",
+      background: props.backgroundColor || "var(--sqm-portal-background)",
+      display: "flex",
+      flexDirection: "column",
+      rowGap: "var(--sl-spacing-large)",
+    },
+    EndContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+    },
+    ColumnContainer: {
+      "& p": { margin: "0" },
+      display: "grid",
+      gridAutoColumns: "minmax(0, 1fr)",
+      gridAutoFlow: "column",
+      gap: "calc(2 * var(--sl-spacing-medium))",
+      "@media (max-width: 499px)": {
+        gridAutoFlow: "unset",
+        gridAutoColumns: "unset",
+        gridTemplateColumns: "1fr",
+        border: "none",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const borderColor = props.borderColor || "var(--sqm-border-color)";
   return (h("div", { part: "sqm-base", class: sheet.classes.Container, style: {
-      border: `${props.hideBorder ? "none" : "1px solid var(--sl-color-neutral-300)"}`,
+      border: `${props.hideBorder ? "none" : "1px solid " + borderColor}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,