@saasquatch/mint-components 1.6.2-5 → 1.6.2-8

package/dist/collection/components/sqm-hero/sqm-hero.js

@@ -3,9 +3,8 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { HeroView } from "./sqm-hero-view";
 import { getProps } from "../../utils/utils";
 /**
- * The hero container
- *
  * @uiName Hero Layout
+ * @slots [{"name":"","title":"Primary Column Content"},{"name":"secondary-column","title":"Secondary Column Content"}]
  */
 export class Hero {
   constructor() {
@@ -13,6 +12,8 @@ export class Hero {
      * Number of columns in the layout
      *
      * @uiName Columns
+     * @uiEnum [1, 2]
+     * @uiEnumNames ["One", "Two"]
      */
     this.columns = 1;
     /**
@@ -65,6 +66,12 @@ export class Hero {
         "tags": [{
             "text": "Columns",
             "name": "uiName"
+          }, {
+            "text": "[1, 2]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"One\", \"Two\"]",
+            "name": "uiEnumNames"
           }],
         "text": "Number of columns in the layout"
       },

package/dist/collection/components/sqm-hero-image/sqm-hero-image.js

@@ -5,8 +5,8 @@ import { HeroImageView } from "./sqm-hero-image-view";
 /**
  * @uiName Hero Image
  * @exampleGroup Common Components
- * @example Two Column Layout - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right" background-color="#F9F9F9"></sqm-hero-image>
- * @example Overlay - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" background-color="#F9F9F9" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
+ * @example Two Column Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right" background-color="#F9F9F9"></sqm-hero-image>
+ * @example Overlay Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" background-color="#F9F9F9" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
  */
 export class HeroImage {
   constructor() {

package/dist/collection/components/sqm-image/sqm-image.js

@@ -99,7 +99,7 @@ export class Image {
             "text": "color",
             "name": "uiWidget"
           }, {
-            "text": undefined,
+            "text": "color",
             "name": "format"
           }],
         "text": ""

package/dist/collection/components/sqm-input-field/sqm-input-field.js

@@ -7,7 +7,10 @@ import { getMissingProps, getProps } from "../../utils/utils";
 import { InputFieldView } from "./sqm-input-field-view";
 import { useInputField } from "./useInputField";
 /**
- * @uiName Input Field
+ * @uiName Form Input Field
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @exampleGroup Microsite Components
+ * @example Form Input Field - <sqm-input-field slot="formData" input-label="Field Label" field-type="text" error-message="Cannot be empty"></sqm-input-field>
  */
 export class InputField {
   constructor() {

package/dist/collection/components/sqm-name-fields/sqm-name-fields.js

@@ -5,7 +5,10 @@ import deepmerge from "deepmerge";
 import { NameFieldsView } from "./sqm-name-fields-view";
 import { useNameFields } from "./useNameFields";
 /**
- * @uiName Name Fields
+ * @uiName Form Name Fields
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @exampleGroup Microsite Components
+ * @example Form Name Fields - <sqm-name-fields first-name-label="First Name" last-name-label="Last Name"></sqm-name-fields>
  */
 export class NameFields {
   constructor() {

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar.js

@@ -2,9 +2,8 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, State } from "@stencil/core";
 import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
 /**
- * A container for navigation menu items
- *
- * @uiName Navigation Sidebar
+ * @uiName Microsite Sidebar
+ * @slots [{"name":"", "title":"Sidebar Content", "validChildren":["sqm-navigation-sidebar-item"]}]
  */
 export class NavigationSidebar {
   constructor() {

package/dist/collection/components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item.js

@@ -6,7 +6,10 @@ import { getProps } from "../../utils/utils";
 import { NavigationSidebarItemView, } from "./sqm-navigation-sidebar-item-view";
 import { useNavigationSidebarItem } from "./useNavigationSidebarItem";
 /**
- * @uiName Navigation Link
+ * @uiName Microsite Sidebar Item
+ * @validParents ["sqm-navigation-sidebar"]
+ * @exampleGroup Microsite Components
+ * @example Sidebar Item - <sqm-navigation-sidebar-item label="Sidebar Item" icon="house"></sqm-navigation-sidebar-item>
  */
 export class NavigationSidebarItem {
   constructor() {

package/dist/collection/components/sqm-password-field/sqm-password-field.js

@@ -7,7 +7,10 @@ import { validateNewPassword } from "./passwordValidation";
 import { PortalResetPasswordView, } from "./sqm-password-field-view";
 import { usePasswordField } from "./usePasswordField";
 /**
- * @uiName Portal Password Field
+ * @uiName Form Password Field
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @exampleGroup Microsite Components
+ * @example Form Password Field - <sqm-password-field slot="formData" field-label="Password" enable-validation></sqm-password-field>
  */
 export class PortalPasswordField {
   constructor() {

package/dist/collection/components/sqm-popup-container/sqm-popup-container.js

@@ -4,7 +4,9 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { usePopupContainer } from "./usePopupContainer";
 import { getProps } from "../../utils/utils";
 /**
- * @uiName Popup Container For Widgets
+ * @uiName Popup Container
+ * @slots [{"name":"","title":"Content"}]
+ * @canvasRenderer always-replace
  */
 export class PopupContainer {
   constructor() {

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

@@ -5,7 +5,7 @@ import { usePortalChangePassword } from "./usePortalChangePassword";
 import { isDemo } from "@saasquatch/component-boilerplate";
 import deepmerge from "deepmerge";
 /**
- * @uiName Portal Profile
+ * @uiName Microsite Password Change
  */
 export class PortalChangePassword {
   constructor() {
@@ -41,7 +41,8 @@ export class PortalChangePassword {
     /**
      * Successful password change message
      *
-     * @uiName Successful Message
+     * @uiName Successful Password Change Message
+     * @uiWidget textArea
      */
     this.successMessage = "Your password has been updated.";
     /**
@@ -183,8 +184,11 @@ export class PortalChangePassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Successful Message",
+            "text": "Successful Password Change Message",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
         "text": "Successful password change message"
       },

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

@@ -6,8 +6,8 @@ import { getProps } from "../../utils/utils";
  * @uiName Container
  * @slots [{"name":"", "title":"Widget Content"}]
  * @exampleGroup Layout
- * @example Row Layout Container - <sqm-portal-container direction="row" padding="none" gap="xxx-large" display="flex" max-width="100%"><p>Add your column content above or below!</p></sqm-portal-container>
- * @example Column Layout Container - <sqm-portal-container direction="column" padding="none" gap="xxx-large" display="grid" max-width="100%"><p>Add your column content to the left or right!</p></sqm-portal-container>
+ * @example Row Layout Container - <sqm-portal-container direction="row" padding="none" gap="xxx-large" display="flex" max-width="100%"><p>Add your row content!</p></sqm-portal-container>
+ * @example Column Layout Container - <sqm-portal-container direction="column" padding="none" gap="xxx-large" display="grid" max-width="100%"><p>Add your column content!</p></sqm-portal-container>
  */
 export class PortalContainer {
   constructor() {

package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification.js

@@ -5,15 +5,15 @@ import deepmerge from "deepmerge";
 import { PortalEmailVerificationView, } from "./sqm-portal-email-verification-view";
 import { usePortalEmailVerification } from "./usePortalEmailVerification";
 /**
- * @uiName Portal Email Verification
+ * @uiName Microsite Email Verification
  */
 export class PortalEmailVerification {
   constructor() {
     this.ignored = true;
     /**
-     * The page that users are redirected to from the verification email.
+     * The microsite page that participants are redirected to from the verification email.
      *
-     * @uiName Email Redirection Base Path
+     * @uiName Email Redirection Path
      */
     this.redirectPath = "/verifyEmail";
     /**
@@ -26,6 +26,7 @@ export class PortalEmailVerification {
     this.resendEmailButtonText = "Re-send Email";
     /**
      * @uiName Email Verification Body Text
+     * @uiWidget textArea
      */
     this.verifyMessage = "A verification email was sent to {email}. Please verify your email to continue to the portal.";
     withHooks(this);
@@ -52,10 +53,10 @@ export class PortalEmailVerification {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Email Redirection Base Path",
+            "text": "Email Redirection Path",
             "name": "uiName"
           }],
-        "text": "The page that users are redirected to from the verification email."
+        "text": "The microsite page that participants are redirected to from the verification email."
       },
       "attribute": "redirect-path",
       "reflect": false,
@@ -117,6 +118,9 @@ export class PortalEmailVerification {
         "tags": [{
             "text": "Email Verification Body Text",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
         "text": ""
       },

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

@@ -3,7 +3,7 @@ import { Component, h, Prop, State } from "@stencil/core";
 import { getProps } from "../../utils/utils";
 import { PortalFooterView } from "./sqm-portal-footer-view";
 /**
- * @uiName Portal Footer
+ * @uiName Footer
  */
 export class PortalFooter {
   constructor() {
@@ -14,6 +14,7 @@ export class PortalFooter {
     this.supportEmail = "support@example.com";
     /**
      * @uiName Support Text
+     * @uiWidget textArea
      */
     this.supportText = "For program support, contact {email}";
     /**
@@ -26,18 +27,26 @@ export class PortalFooter {
     this.poweredByLink = "https://saasquatch.com";
     /**
      * @uiName Padding Top
+     * @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.paddingTop = "large";
     /**
      * @uiName Padding Right
+     * @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.paddingRight = "large";
     /**
      * @uiName Padding Bottom
+     * @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.paddingBottom = "large";
     /**
      * @uiName Padding Left
+     * @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.paddingLeft = "large";
     withHooks(this);
@@ -85,6 +94,9 @@ export class PortalFooter {
         "tags": [{
             "text": "Support Text",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
         "text": ""
       },
@@ -228,6 +240,12 @@ export class PortalFooter {
         "tags": [{
             "text": "Padding Top",
             "name": "uiName"
+          }, {
+            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },
@@ -249,6 +267,12 @@ export class PortalFooter {
         "tags": [{
             "text": "Padding Right",
             "name": "uiName"
+          }, {
+            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },
@@ -270,6 +294,12 @@ export class PortalFooter {
         "tags": [{
             "text": "Padding Bottom",
             "name": "uiName"
+          }, {
+            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },
@@ -291,6 +321,12 @@ export class PortalFooter {
         "tags": [{
             "text": "Padding Left",
             "name": "uiName"
+          }, {
+            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },

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

@@ -5,19 +5,19 @@ import deepmerge from "deepmerge";
 import { PortalForgotPasswordView, } from "./sqm-portal-forgot-password-view";
 import { usePortalForgotPassword } from "./usePortalForgotPassword";
 /**
- * @uiName Portal Forgot Password
+ * @uiName Microsite Forgot Password
  */
 export class PortalForgotPassword {
   constructor() {
     this.ignored = true;
     /**
-     * The page that users are redirected to from the password reset email.
+     * The microsite page that participants are redirected to from the password reset email.
      *
-     * @uiName Email Redirection Base Path
+     * @uiName Email Redirection Path
      */
     this.redirectPath = "/resetPassword";
     /**
-     * @uiName Email Label
+     * @uiName Email Field Label
      */
     this.emailLabel = "Email";
     /**
@@ -25,9 +25,18 @@ export class PortalForgotPassword {
      */
     this.submitLabel = "Request Password Reset";
     /**
-     * @uiName Login Page Routing Path
+     * @uiName Login Redirect Path
      */
     this.loginPath = "/login";
+    /**
+     * @uiName Header Text
+     * @uiWidget textArea
+     */
+    this.headerText = "Enter your email below to receive a password reset link.";
+    /**
+     * Sign In Link Text
+     */
+    this.loginText = "Sign In";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -59,10 +68,10 @@ export class PortalForgotPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Email Redirection Base Path",
+            "text": "Email Redirection Path",
             "name": "uiName"
           }],
-        "text": "The page that users are redirected to from the password reset email."
+        "text": "The microsite page that participants are redirected to from the password reset email."
       },
       "attribute": "redirect-path",
       "reflect": false,
@@ -80,7 +89,7 @@ export class PortalForgotPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Email Label",
+            "text": "Email Field Label",
             "name": "uiName"
           }],
         "text": ""
@@ -122,7 +131,7 @@ export class PortalForgotPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Login Page Routing Path",
+            "text": "Login Redirect Path",
             "name": "uiName"
           }],
         "text": ""
@@ -131,6 +140,48 @@ export class PortalForgotPassword {
       "reflect": false,
       "defaultValue": "\"/login\""
     },
+    "headerText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Header Text",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "header-text",
+      "reflect": false,
+      "defaultValue": "\"Enter your email below to receive a password reset link.\""
+    },
+    "loginText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sign In Link Text"
+      },
+      "attribute": "login-text",
+      "reflect": false,
+      "defaultValue": "\"Sign In\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,

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

@@ -38,6 +38,8 @@ export function usePortalForgotPassword(props) {
         error,
       success,
       loginPath: props.loginPath,
+      headerText: props.headerText,
+      loginText: props.loginText,
     },
     callbacks: {
       submit,

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

@@ -5,7 +5,8 @@ import { PortalFrameView } from "./sqm-portal-frame-view";
 import { usePortalFrame } from "./usePortalFrame";
 import deepmerge from "deepmerge";
 /**
- * @uiName Portal Frame
+ * @uiName Microsite Frame
+ * @slots [{"name":"header","title":"Header Content"},{"name":"footer","title":"Footer Content"},{"name":"","title":"Body Content"}]
  */
 export class PortalFrame {
   constructor() {