@saasquatch/mint-components 2.0.8 → 2.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",

package/dist/cjs/sqm-base-registration-form-view-69a4b615.js

@@ -1,74 +0,0 @@
-'use strict';
-
-const index = require('./index-a43a63b4.js');
-const JSS = require('./JSS-8503a151.js');
-const mixins = require('./mixins-4761d472.js');
-const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
-
-const style = {
-  Wrapper: mixins.AuthWrapper,
-  Column: mixins.AuthColumn,
-  HostBlock: mixins.HostBlock,
-  ":host": {
-    margin: "0 auto",
-    width: "100%",
-  },
-  ButtonsContainer: {
-    ...mixins.AuthButtonsContainer,
-    gap: "var(--sl-spacing-medium)",
-    "& > *": {
-      margin: "0 !important",
-    },
-  },
-  ErrorStyle: mixins.ErrorStyles,
-};
-const vanillaStyle = `
-sqm-portal-register {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-
-:host{
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
-`;
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-function BaseRegistrationFormView(props) {
-  var _a, _b;
-  const { states, content, callbacks } = props;
-  return (index.h("div", { class: sheet.classes.Wrapper },
-    index.h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-    index.h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.handleEmailSubmit, novalidate: true },
-      content.formData,
-      index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
-          if (!value) {
-            return content.requiredFieldErrorMessage;
-          }
-          // this matches shoelace validation, but could be better
-          if (!value.includes("@")) {
-            return content.invalidEmailErrorMessage;
-          }
-        } }, (((_a = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _a === void 0 ? void 0 : _a.email) ? {
-        class: sheet.classes.ErrorStyle,
-        helpText: ((_b = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ||
-          content.requiredFieldErrorMessage,
-      }
-        : []))),
-      content.terms,
-      index.h("div", { class: sheet.classes.ButtonsContainer },
-        index.h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" } }, content.submitLabel || "Register"),
-        index.h("sl-menu-divider", { style: { margin: "0" } }),
-        content.googleButton,
-        content.secondaryButton))));
-}
-
-exports.BaseRegistrationFormView = BaseRegistrationFormView;

package/dist/cjs/sqm-portal-google-login.cjs.entry.js

@@ -1,130 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-a43a63b4.js');
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
-require('./jsonpointer-11327262.js');
-const cjs = require('./cjs-1066ec21.js');
-require('./utils-6847bc06.js');
-const JSS = require('./JSS-8503a151.js');
-require('./mixins-4761d472.js');
-require('./sqm-text-span-view-7a61ae4c.js');
-const sqmPortalLoginView = require('./sqm-portal-login-view-bb50304c.js');
-const usePortalLogin = require('./usePortalLogin-1c022d8d.js');
-
-const PortalGoogleLogin = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * Redirect participants to this page after they successfully login.
-     *
-     * @uiName Login redirect
-     * @uiWidget pageSelect
-     */
-    this.nextPage = "/";
-    /**
-     * @uiName Email field label
-     */
-    this.emailLabel = "Email";
-    /**
-     * @uiName Password field label
-     */
-    this.passwordLabel = "Password";
-    /**
-     * @uiName Submit button text
-     */
-    this.submitLabel = "Sign In";
-    /**
-     * Redirect participants to this page to reset their password
-     * @uiName Forgot password redirect
-     * @uiWidget pageSelect
-     */
-    this.forgotPasswordPath = "/forgotPassword";
-    /**
-     * @uiName Forgot password text
-     */
-    this.forgotPasswordLabel = "Forgot Password?";
-    /**
-     * @uiName Register button text
-     */
-    this.registerLabel = "Register";
-    /**
-     * Redirect participants to this page to start registration.
-     * @uiName Register button redirect
-     * @uiWidget pageSelect
-     */
-    this.registerPath = "/register";
-    /**
-     * @uiName Heading label
-     * @uiWidget textArea
-     */
-    this.pageLabel = "Sign in to your account";
-    /**
-     * @uiName Network error message
-     * Displayed when the login fails due to a network error. The participant can try refreshing the page.
-     */
-    this.networkErrorMessage = "An error occurred while logging you in. Please refresh the page and try again.";
-    /**
-     * @uiName Google account error message
-     * Displayed when user tries to sign in with Google account but has not registered.
-     */
-    this.googleUserNotRegisteredError = "Your Google account has not registered on our platform. Please complete the registration process with your Google account.";
-    /**
-     * @uiName Register CTA
-     */
-    this.registerCTA = "Don't have an account?";
-    domContextHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const { states, callbacks } = index_module.isDemo()
-      ? useLoginDemo(this)
-      : usePortalLogin.usePortalLogin(this);
-    const styles = {
-      RegisterButton: {
-        "&::part(label)": {
-          padding: "0",
-        },
-      },
-    };
-    const sheet = JSS.createStyleSheet(styles);
-    const styleString = sheet.toString();
-    const content = {
-      forgotPasswordButton: (index.h("slot", { name: "forgotPassword" }, index.h("a", { onClick: () => index_module.jn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
-      googleButton: (index.h("sqm-google-sign-in", { onInitComplete: callbacks.googleSubmit })),
-      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("style", null, styleString), index.h("span", null, this.registerCTA, " ", index.h("sl-button", { size: "large", type: "text", disabled: states.loading, onClick: () => index_module.jn.push(states.registerPath), className: sheet.classes.RegisterButton }, this.registerLabel)))),
-      emailLabel: this.emailLabel,
-      passwordLabel: this.passwordLabel,
-      submitLabel: this.submitLabel,
-      pageLabel: this.pageLabel,
-    };
-    return (index.h(sqmPortalLoginView.PortalLoginView, { states: states, callbacks: callbacks, content: content }));
-  }
-};
-function useLoginDemo(props) {
-  return cjs.cjs({
-    states: {
-      error: "",
-      loading: false,
-      forgotPasswordPath: "/forgotPassword",
-      registerPath: "/register",
-      showLoginForm: "manual",
-    },
-    callbacks: {
-      googleSubmit: async () => {
-        console.log("google submit");
-      },
-      submit: async (_event) => {
-        console.log("submit");
-      },
-    },
-    content: {
-      googleButton: null,
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
-exports.sqm_portal_google_login = PortalGoogleLogin;

package/dist/cjs/sqm-portal-google-registration-form.cjs.entry.js

@@ -1,381 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-a43a63b4.js');
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
-const jsonpointer = require('./jsonpointer-11327262.js');
-const cjs = require('./cjs-1066ec21.js');
-const JSS = require('./JSS-8503a151.js');
-require('./mixins-4761d472.js');
-require('./sqm-text-span-view-7a61ae4c.js');
-const useRegistrationFormState = require('./useRegistrationFormState-bbee6e7b.js');
-const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-69a4b615.js');
-const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-5a96c2f5.js');
-require('./AsYouType-6788393a.js');
-const usePortalRegistrationForm = require('./usePortalRegistrationForm-75b647fe.js');
-
-class InvalidTokenError extends Error {
-}
-InvalidTokenError.prototype.name = "InvalidTokenError";
-function b64DecodeUnicode(str) {
-    return decodeURIComponent(atob(str).replace(/(.)/g, (m, p) => {
-        let code = p.charCodeAt(0).toString(16).toUpperCase();
-        if (code.length < 2) {
-            code = "0" + code;
-        }
-        return "%" + code;
-    }));
-}
-function base64UrlDecode(str) {
-    let output = str.replace(/-/g, "+").replace(/_/g, "/");
-    switch (output.length % 4) {
-        case 0:
-            break;
-        case 2:
-            output += "==";
-            break;
-        case 3:
-            output += "=";
-            break;
-        default:
-            throw new Error("base64 string is not of the correct length");
-    }
-    try {
-        return b64DecodeUnicode(output);
-    }
-    catch (err) {
-        return atob(output);
-    }
-}
-function jwtDecode(token, options) {
-    if (typeof token !== "string") {
-        throw new InvalidTokenError("Invalid token specified: must be a string");
-    }
-    options || (options = {});
-    const pos = options.header === true ? 0 : 1;
-    const part = token.split(".")[pos];
-    if (typeof part !== "string") {
-        throw new InvalidTokenError(`Invalid token specified: missing part #${pos + 1}`);
-    }
-    let decoded;
-    try {
-        decoded = base64UrlDecode(part);
-    }
-    catch (e) {
-        throw new InvalidTokenError(`Invalid token specified: invalid base64 for part #${pos + 1} (${e.message})`);
-    }
-    try {
-        return JSON.parse(decoded);
-    }
-    catch (e) {
-        throw new InvalidTokenError(`Invalid token specified: invalid json for part #${pos + 1} (${e.message})`);
-    }
-}
-
-function usePortalGoogleRegistrationForm(props) {
-  const [registrationFormState, setRegistrationFormState] = useRegistrationFormState.useRegistrationForm();
-  const [showRegistrationForm, setShowRegistrationForm] = domContextHooks_module.useState({
-    mode: "base",
-  });
-  const handleEmailSubmit = async (event) => {
-    const formControls = event.target.getFormControls();
-    let formData = {};
-    let validationErrors = {};
-    formControls.forEach((control) => {
-      if (!control.name)
-        return;
-      const key = control.name;
-      const value = control.value;
-      jsonpointer.jsonpointer.set(formData, key, value);
-      if (control.required && !value) {
-        jsonpointer.jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
-      }
-      if (typeof control.validationError === "function") {
-        const validate = control.validationError;
-        const validationError = validate({
-          control,
-          key,
-          value,
-        });
-        if (validationError)
-          jsonpointer.jsonpointer.set(validationErrors, key, validationError);
-      }
-    });
-    if (Object.keys(validationErrors).length) {
-      // early return for validation errors
-      setRegistrationFormState({
-        ...registrationFormState,
-        loading: false,
-        error: "",
-        validationErrors,
-      });
-      return;
-    }
-    setRegistrationFormState({
-      ...registrationFormState,
-      validationErrors: {},
-      initialData: {
-        ...registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData,
-        ...formData,
-      },
-    });
-    setShowRegistrationForm({ mode: "manual" });
-  };
-  const handleGoogleInit = (event) => {
-    var _a;
-    if (!((_a = event.detail) === null || _a === void 0 ? void 0 : _a.credential))
-      return;
-    try {
-      const res = jwtDecode(event.detail.credential);
-      setRegistrationFormState({
-        ...registrationFormState,
-        _googleOAuthIdToken: event.detail.credential,
-        initialData: {
-          email: res.email,
-          firstName: res.given_name,
-          lastName: res.family_name,
-        },
-      });
-      setShowRegistrationForm({ mode: "google" });
-    }
-    catch (e) {
-      console.error("Failed to decode Google Sign In credential JWT:", e);
-    }
-  };
-  return {
-    registrationFormState,
-    showRegistrationForm,
-    validationErrors: registrationFormState.validationErrors,
-    handleGoogleInit,
-    handleEmailSubmit,
-  };
-}
-
-const PortalGoogleRegistrationForm = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * Redirect participants to this page after they successfully register.
-     *
-     * @uiName Registration redirect
-     * @uiWidget pageSelect
-     */
-    this.nextPage = "/";
-    /**
-     * Redirect participants to this page from their verification email
-     *
-     * @uiName Email verification redirect
-     * @uiWidget pageSelect
-     */
-    this.redirectPath = "/verifyEmail";
-    /**
-     * @uiName Email field label
-     */
-    this.emailLabel = "Email";
-    /**
-     * @uiName Password field label
-     */
-    this.passwordLabel = "Password";
-    /**
-     * @uiName Submit button text
-     */
-    this.submitLabel = "Register";
-    /**
-     * @uiName Login button text
-     */
-    this.loginLabel = "Sign in";
-    /**
-     * @uiName Confirm password field label
-     */
-    this.confirmPasswordLabel = "Confirm Password";
-    /**
-     * @uiName Show confirm password field
-     */
-    this.confirmPassword = false;
-    /**
-     * @uiName Disable password validation
-     */
-    this.disablePasswordValidation = false;
-    /**
-     * Hides the email and password fields. Note: If you hide default inputs, you must add additional input fields. They must have the input name attributes "email" and "password" for this form to succeed.
-     *
-     * @uiName Hide default fields
-     */
-    this.hideInputs = false;
-    /**
-     * @uiName Header text
-     */
-    this.pageLabel = "Register";
-    /**
-     * Redirect participants to this page after clicking the login button.
-     *
-     * @uiName Login redirect
-     * @uiWidget pageSelect
-     */
-    this.loginPath = "/login";
-    /**
-     * Login Call-to-action
-     *
-     * @uiName Login CTA
-     */
-    this.loginCTA = "Already have an account?";
-    /**
-     * The message to be displayed when a required field is not filled.
-     *
-     * @uiName Required field message
-     * @uiWidget textArea
-     */
-    this.requiredFieldErrorMessage = "Cannot be empty";
-    /**
-     * The message to be displayed when a the form submission fails unexpectedly.
-     *
-     * @uiName Network error message
-     * @uiWidget textArea
-     */
-    this.networkErrorMessage = "Network request failed.";
-    /**
-     * The message to be displayed when password inputs do not match.
-     *
-     * @uiName Password mismatch message
-     * @uiWidget textArea
-     */
-    this.passwordMismatchErrorMessage = "Passwords do not match.";
-    /**
-     * The message to be displayed when the email used is invalid or blocked.
-     *
-     * @uiName Invalid email message
-     * @uiWidget textArea
-     */
-    this.invalidEmailErrorMessage = "Must be a valid email address";
-    /**
-     * The message to be displayed when the registration form is disabled.
-     *
-     * @uiName Form disabled message
-     * @uiWidget textArea
-     */
-    this.formDisabledErrorMessage = "The registration form is currently disabled.";
-    /**
-     * @uiName Password requirement met
-     */
-    this.meetsRequirementsText = "Password has met all requirements";
-    /**
-     * @uiName Password requirement failed
-     */
-    this.doesNotMeetRequirementsText = "Password must meet the following requirements:";
-    /**
-     * @uiName Minimum length text
-     */
-    this.minErrorText = "be a minimum of 8 characters";
-    /**
-     * @uiName Missing uppercase text
-     */
-    this.uppercaseErrorText = "contain at least 1 uppercase character";
-    /**
-     * @uiName Missing lowercase text
-     */
-    this.lowercaseErrorText = "contain at least 1 lowercase character";
-    /**
-     * @uiName Missing number or symbol text
-     */
-    this.hasErrorText = "contain at least 1 number or symbol";
-    /**
-     * Can be "signup_with", "signin_with", "continue_with", or "signin"
-     *
-     * @uiName Google button text
-     */
-    this.googleButtonText = "signup_with";
-    domContextHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const { states, callbacks, refs } = index_module.isDemo()
-      ? useRegisterDemo(this)
-      : usePortalRegistrationForm.usePortalRegistrationForm(this);
-    const styles = {
-      LoginButton: {
-        "&::part(label)": {
-          padding: "0",
-        },
-      },
-    };
-    const sheet = JSS.createStyleSheet(styles);
-    const styleString = sheet.toString();
-    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, validationErrors, } = index_module.isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
-    const content = {
-      formData: index.h("slot", { name: "formData" }),
-      googleButton: (index.h("sqm-google-sign-in", { text: this.googleButtonText, onInitComplete: handleGoogleInit })),
-      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("style", null, styleString), index.h("span", null, this.loginCTA, " ", index.h("sl-button", { size: "large", type: "text", disabled: states.loading, onClick: () => index_module.jn.push(states.loginPath), className: sheet.classes.LoginButton }, this.loginLabel), " "))),
-      terms: index.h("slot", { name: "terms" }),
-      emailLabel: this.emailLabel,
-      passwordLabel: this.passwordLabel,
-      submitLabel: this.submitLabel,
-      pageLabel: this.pageLabel,
-      confirmPasswordLabel: this.confirmPasswordLabel,
-      networkErrorMessage: this.networkErrorMessage,
-      passwordMismatchErrorMessage: this.passwordMismatchErrorMessage,
-      invalidEmailErrorMessage: this.invalidEmailErrorMessage,
-      formDisabledErrorMessage: this.formDisabledErrorMessage,
-      requiredFieldErrorMessage: this.requiredFieldErrorMessage,
-      meetsRequirementsText: this.meetsRequirementsText,
-      doesNotMeetRequirementsText: this.doesNotMeetRequirementsText,
-      minErrorText: this.minErrorText,
-      uppercaseErrorText: this.uppercaseErrorText,
-      lowercaseErrorText: this.lowercaseErrorText,
-      hasErrorText: this.hasErrorText,
-    };
-    if (showRegistrationForm.mode === "base") {
-      return (index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, { states: {
-          validationErrors,
-        }, callbacks: { handleEmailSubmit }, content: content }));
-    }
-    return (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, { states: {
-        ...states,
-        emailDisabled: true,
-        hidePasswords: showRegistrationForm.mode === "google",
-      }, callbacks: callbacks, content: content, refs: refs }));
-  }
-};
-function useRegisterDemo(props) {
-  return cjs.cjs({
-    states: {
-      error: "",
-      loading: false,
-      confirmPassword: props.confirmPassword,
-      hideInputs: props.hideInputs || false,
-      customPasswordField: false,
-      loginPath: "/login",
-    },
-    callbacks: {
-      handleGoogleInit: () => { },
-      setShowRegistrationForm: () => { },
-      submit: async (_event) => {
-        console.log("submit");
-      },
-      inputFunction: () => { },
-    },
-    content: {
-      pageLabel: "Register",
-      formData: null,
-      passwordField: null,
-    },
-    refs: {
-      formRef: {},
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-function useGoogleDemo(props) {
-  const [showRegistrationForm, setShowRegistrationForm] = domContextHooks_module.useState({
-    mode: "base",
-  });
-  return cjs.cjs({
-    validationErrors: {},
-    handleEmailSubmit: () => setShowRegistrationForm({ mode: "manual" }),
-    showRegistrationForm,
-    handleGoogleInit: () => setShowRegistrationForm({ mode: "google" }),
-  }, props.demoGoogleData || {}, { arrayMerge: (_, a) => a });
-}
-
-exports.sqm_portal_google_registration_form = PortalGoogleRegistrationForm;

package/dist/cjs/sqm-portal-login-view-bb50304c.js

@@ -1,58 +0,0 @@
-'use strict';
-
-const index = require('./index-a43a63b4.js');
-const JSS = require('./JSS-8503a151.js');
-const mixins = require('./mixins-4761d472.js');
-const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
-
-const style = {
-  Wrapper: mixins.AuthWrapper,
-  Column: mixins.AuthColumn,
-  ForgotButtonContainer: {
-    display: "inline",
-    cursor: "pointer",
-    "font-size": "13px",
-    "font-weight": "600",
-    color: "var(--sqm-text-subdued)",
-    margin: "0",
-  },
-  ButtonsContainer: {
-    ...mixins.AuthButtonsContainer,
-    gap: "var(--sl-spacing-medium)",
-    "& > *": {
-      margin: "0 !important",
-    },
-  },
-};
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
-`;
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-function PortalLoginView(props) {
-  const { states, callbacks, content } = props;
-  return (index.h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-    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))),
-      index.h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
-      index.h("div", null,
-        index.h("sl-input", { exportparts: "label: input-label, base: input-base", type: "password", name: "/password", label: content.passwordLabel || "Password", disabled: states.loading, required: true }),
-        index.h("div", { class: sheet.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
-      index.h("div", { class: sheet.classes.ButtonsContainer },
-        index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Login"),
-        content.googleButton && index.h("sl-menu-divider", null),
-        content.googleButton,
-        content.secondaryButton))));
-}
-
-exports.PortalLoginView = PortalLoginView;