@saasquatch/mint-components 1.6.8-17 → 1.6.8-18

package/dist/cjs/{ShadowViewAddon-dc9b7f1f.js → ShadowViewAddon-33b35ab0.js}

@@ -216,15 +216,18 @@ const vanillaStyle$1 = `
     width: 100%;
   }
 `;
-const textAlignStyle = `
-  :host{
-    display: block;
-  }
-  sl-input::part(input){
-    text-align: center;
-  }
-`;
-const loadingStyles = `
+const textAlignStyle = {
+  right: `
+sl-input::part(input){
+  text-align: right;
+}
+`,
+  center: `  sl-input::part(input){
+  text-align: center;
+}`,
+  left: ``,
+};
+const disabledStyles = `
   sl-input::part(input){
     cursor: default;
   }
@@ -236,18 +239,19 @@ function CopyTextView(props) {
   const copyButton = buttonStyle === "icon" ? null : (index.h("sl-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: `${buttonStyle == "button inside" ? "small" : "medium"}`, style: { width: `${buttonStyle === "button below" && "100%"}` }, disabled: props.disabled, slot: "suffix", type: "primary" }, props.copyButtonLabel || "Copy"));
   const error = !props.loading && props.rewardStatus && props.rewardStatus !== "AVAILABLE";
   const inputText = error ? props.inputPlaceholderText : props.copyString;
+  const disabled = error || props.loading || props.disabled;
   return (index.h("div", null,
     index.h("style", { type: "text/css" },
       styleString$2,
       vanillaStyle$1,
-      props.textAlign === "center" && textAlignStyle,
-      props.loading && loadingStyles),
-    index.h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: props.disabled, open: props.open, skidding: -20 },
+      textAlignStyle[props.textAlign],
+      disabled && disabledStyles),
+    index.h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: disabled, open: props.open, skidding: -20 },
       index.h("div", { class: sheet$2.classes.containerStyle, style: {
           flexDirection: `${buttonStyle === "button below" ? "column" : "row"}`,
           width: "100%",
         } },
-        index.h("sl-input", { class: `${sheet$2.classes.inputStyle} ${error ? sheet$2.classes.inputErrorStyle : ""}`, exportparts: "label: input-label", value: props.loading ? "Loading..." : inputText, readonly: true, disabled: props.loading }, buttonStyle === "icon" ? (index.h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, slot: "suffix", name: "files", disabled: props.disabled || props.loading })) : (buttonStyle === "button inside" && copyButton)),
+        index.h("sl-input", { class: `${sheet$2.classes.inputStyle} ${error ? sheet$2.classes.inputErrorStyle : ""}`, exportparts: "label: input-label", value: props.loading ? "Loading..." : inputText, readonly: true, disabled: disabled }, buttonStyle === "icon" ? (index.h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, slot: "suffix", name: "files", disabled: disabled })) : (buttonStyle === "button inside" && copyButton)),
         (buttonStyle === "button outside" ||
           buttonStyle === "button below") &&
           copyButton),

package/dist/cjs/{email-registration-view-ac643a5b.js → email-registration-view-99fe375a.js}

@@ -5,7 +5,10 @@ const mixins = require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
 
 const style = {
-  Wrapper: mixins.AuthWrapper,
+  Wrapper: {
+    ...mixins.AuthWrapper,
+    ...mixins.gap({ direction: "column", size: "var(--sl-spacing-small)" }),
+  },
   Column: mixins.AuthColumn,
   ForgotButtonContainer: {
     display: "inline",
@@ -50,9 +53,9 @@ function EmailRegistrationView(props) {
     index.h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
       props.states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         index.h("div", { part: "erroralert-text" }, props.states.error))),
-      content.includeName && (index.h("sl-input", { exportparts: "label: input-label", type: "name", name: "/firstName", label: content.firstNameLabel || "First Name", disabled: states.loading, required: false })),
-      content.includeName && (index.h("sl-input", { exportparts: "label: input-label", type: "name", name: "/lastName", label: content.lastNameLabel || "Last Name", disabled: states.loading, required: false })),
-      index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email *", disabled: states.loading, required: true, validationError: ({ value }) => {
+      content.includeName && (index.h("sl-input", { exportparts: "label: input-label", type: "name", name: "/firstName", label: content.firstNameLabel || "First Name", disabled: states.loading, required: true })),
+      content.includeName && (index.h("sl-input", { exportparts: "label: input-label", type: "name", name: "/lastName", label: content.lastNameLabel || "Last Name", disabled: states.loading, required: true })),
+      index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }

package/dist/cjs/sqm-big-stat_37.cjs.entry.js

@@ -18,7 +18,7 @@ const utils = require('./utils-6847bc06.js');
 require('./sqm-text-span-view-3c734dbb.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const useRegistrationFormState = require('./useRegistrationFormState-81f74f14.js');
-const ShadowViewAddon = require('./ShadowViewAddon-dc9b7f1f.js');
+const ShadowViewAddon = require('./ShadowViewAddon-33b35ab0.js');
 require('./sqm-portal-container-view-9ad6a6bc.js');
 
 const BigStat = class {
@@ -378,25 +378,29 @@ const CouponCode = class {
     /**
      * Set error message
      *
-     * @uiName Error message
+     * @uiWidget textArea
+     * @uiName Pending message
      */
     this.pendingErrorText = "Your reward will be available on ";
     /**
      * Set error message
      *
-     * @uiName Error message
+     * @uiWidget textArea
+     * @uiName Cancelled error message
      */
     this.cancelledErrorText = "Oops! Your coupon code is cancelled. Please try again later or contact support.";
     /**
      * Set error message
      *
-     * @uiName Error message
+     * @uiWidget textArea
+     * @uiName Expired error message
      */
     this.expiredErrorText = "Oops! Your coupon code is expired. Please try again later or contact support.";
     /**
      * Set error message
      *
-     * @uiName Error message
+     * @uiWidget textArea
+     * @uiName Already redeemed error message
      */
     this.redeemedErrorText = "Oops! Your coupon code has already been redeemed. Please try again later or contact support.";
     /**
@@ -1590,24 +1594,28 @@ const PortalFooter = class {
     this.poweredByLink = "https://saasquatch.com";
     /**
      * @uiName Padding Top
+     * @uiGroup Padding
      * @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
+     * @uiGroup Padding
      * @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
+     * @uiGroup Padding
      * @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
+     * @uiGroup Padding
      * @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"]
      */
@@ -2312,33 +2320,38 @@ const ReferralCard = class {
     this.removeBorder = false;
     /**
      * @uiName Padding Top
+     * @uiGroup Padding
      * @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
+     * @uiGroup Padding
      * @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
+     * @uiGroup Padding
      * @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
+     * @uiGroup Padding
      * @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";
     /**
      * @uiName Background color
+     * @uiWidget color
      * @uiType string
      */
-    this.backgroundColor = "var(--sl-color-neutral-0)";
+    this.backgroundColor = "#ffffff";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }

package/dist/cjs/sqm-close-button-view-73887afc.js

@@ -0,0 +1,26 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const mixins = require('./mixins-fe9d4112.js');
+const JSS = require('./JSS-8503a151.js');
+
+const style = {
+  HostBlock: mixins.HostBlock,
+  icon: {
+    fontSize: "24px",
+    cursor: "pointer",
+    position: "absolute",
+    top: "var(--sl-spacing-medium)",
+    right: "var(--sl-spacing-medium)",
+  },
+};
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+function CloseButtonView(props) {
+  const { onClick } = props;
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("span", { class: sheet.classes.icon, onClick: onClick }, "X")));
+}
+
+exports.CloseButtonView = CloseButtonView;

package/dist/cjs/sqm-close-button.cjs.entry.js

@@ -6,6 +6,9 @@ const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
 require('./use-callback-86e9ac75.js');
 const index_module = require('./index.module-dba49050.js');
+require('./mixins-fe9d4112.js');
+require('./JSS-8503a151.js');
+const sqmCloseButtonView = require('./sqm-close-button-view-73887afc.js');
 
 const CloseButton = class {
   constructor(hostRef) {
@@ -18,7 +21,15 @@ const CloseButton = class {
     const sdk = index_module.getEnvironmentSDK();
     const isPopup = sdk.type === "SquatchJS2" &&
       ((_a = sdk.widgetIdent) === null || _a === void 0 ? void 0 : _a.engagementMedium) === "POPUP";
-    return isPopup ? (index.h("span", null, "\u00D7")) : (index.h("span", { style: { display: "none" } }));
+    if (isPopup)
+      return index.h("div", { style: { display: "none" } });
+    const onClick = () => {
+      var _a, _b;
+      if (sdk.type === "SquatchJS2") {
+        (_b = (_a = sdk.api).close) === null || _b === void 0 ? void 0 : _b.call(_a);
+      }
+    };
+    return index.h(sqmCloseButtonView.CloseButtonView, { onClick: onClick });
   }
 };
 

package/dist/cjs/sqm-instant-access-registration.cjs.entry.js

@@ -10,7 +10,7 @@ require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
 require('./JSS-8503a151.js');
-const emailRegistrationView = require('./email-registration-view-ac643a5b.js');
+const emailRegistrationView = require('./email-registration-view-99fe375a.js');
 const useInstantAccessRegistration = require('./useInstantAccessRegistration-2d149bea.js');
 
 const InstantAccessRegistration = class {
@@ -57,33 +57,38 @@ const InstantAccessRegistration = class {
     this.invalidEmailErrorMessage = "Must be a valid email address";
     /**
      * @uiName Padding Top
+     * @uiGroup Padding
      * @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
+     * @uiGroup Padding
      * @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
+     * @uiGroup Padding
      * @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
+     * @uiGroup Padding
      * @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";
     /**
      * @uiName Background color
+     * @uiWidget color
      * @uiType string
      */
-    this.backgroundColor = "var(--sl-color-neutral-0)";
+    this.backgroundColor = "#ffffff";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }

package/dist/cjs/sqm-referred-registration.cjs.entry.js

@@ -10,7 +10,7 @@ require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
 require('./JSS-8503a151.js');
-const emailRegistrationView = require('./email-registration-view-ac643a5b.js');
+const emailRegistrationView = require('./email-registration-view-99fe375a.js');
 const useInstantAccessRegistration = require('./useInstantAccessRegistration-2d149bea.js');
 
 const ReferredRegistration = class {
@@ -57,33 +57,38 @@ const ReferredRegistration = class {
     this.invalidEmailErrorMessage = "Must be a valid email address";
     /**
      * @uiName Padding Top
+     * @uiGroup Padding
      * @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
+     * @uiGroup Padding
      * @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
+     * @uiGroup Padding
      * @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
+     * @uiGroup Padding
      * @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";
     /**
      * @uiName Background color
+     * @uiWidget color
      * @uiType string
      */
-    this.backgroundColor = "var(--sl-color-neutral-0)";
+    this.backgroundColor = "#ffffff";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }