@saasquatch/mint-components 1.7.0-7 → 1.7.0-9

package/dist/cjs/sqm-portal-profile.cjs.entry.js

@@ -3,17 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./global-a7614907.js');
-require('./use-callback-e754042f.js');
-const index_module = require('./index.module-1c799b1f.js');
-require('./extends-08099afd.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+require('./global-97364373.js');
+require('./use-callback-5d15897d.js');
+const index_module = require('./index.module-d3a28293.js');
 const cjs = require('./cjs-1066ec21.js');
-require('./JSS-a75f3a9a.js');
+require('./JSS-c73206b7.js');
 const utils = require('./utils-8ef4fe4a.js');
-require('./sqm-text-span-view-ab4ad6ef.js');
-require('./sqm-portal-container-view-a3e86fc2.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-a8ee44c2.js');
+require('./sqm-text-span-view-b0c90c27.js');
+require('./sqm-portal-container-view-4a8432e9.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-9792a786.js');
 
 const GET_USER = index_module.dist.gql `
   query {
@@ -59,12 +58,12 @@ const defaultFormState = {
   error: "",
 };
 function usePortalProfile(props) {
-  const userIdent = index_module.ae();
+  const userIdent = index_module.N();
   const [success, setSuccess] = stencilHooks_module.useState(false);
   const [userData, setUserData] = stencilHooks_module.useState(undefined);
   const [formState, setFormState] = stencilHooks_module.useState(defaultFormState);
-  const userDataResponse = index_module.pn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
-  const [upsertUser, upsertUserResponse] = index_module.$e(UPSERT_USER);
+  const userDataResponse = index_module.dn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
+  const [upsertUser, upsertUserResponse] = index_module.Pe(UPSERT_USER);
   stencilHooks_module.useEffect(() => {
     if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading)
       return;
@@ -139,7 +138,7 @@ function usePortalProfile(props) {
       success,
       loading: (userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.loading) || upsertUserResponse.loading,
       submitDisabled: false,
-      showCountry: props.showCountry,
+      showCountry: !props.hideCountry,
       formState,
       user: userData,
       text: {
@@ -167,27 +166,19 @@ const PortalProfile = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
-     * First name input field label
-     *
      * @uiName First Name Label
      */
     this.firstnametext = "First Name";
     /**
-     * Last name input field label
-     *
-     * @uiName Last Name Label
+     * @uiName Last Name Field Label
      */
     this.lastnametext = "Last Name";
     /**
-     * Email input field label
-     *
-     * @uiName Email Label
+     * @uiName Email Field Label
      */
     this.emailtext = "Email";
     /**
-     * Country input field label
-     *
-     * @uiName Country Label
+     * @uiName Country Field Label
      */
     this.countrytext = "Country";
     /**
@@ -203,16 +194,14 @@ const PortalProfile = class {
      */
     this.submitChangeButtonText = "Submit Changes";
     /**
-     * Show or hide the country field
-     *
-     * @uiName Show Country Field
+     * @uiName Hide Country Field
      */
-    this.showCountry = true;
+    this.hideCountry = false;
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    const props = index_module.L()
+    const props = index_module.isDemo()
       ? usePortalProfileDemo(utils.getProps(this))
       : usePortalProfile(utils.getProps(this));
     return index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, props));
@@ -224,7 +213,7 @@ function usePortalProfileDemo(props) {
       success: false,
       loading: false,
       submitDisabled: false,
-      showCountry: true,
+      showCountry: !props.hideCountry,
       user: {
         id: "01",
         accountId: "111100000",
@@ -234,13 +223,13 @@ function usePortalProfileDemo(props) {
         countryCode: "CA",
       },
       text: {
-        firstnametext: "First Name",
-        lastnametext: "Last Name",
-        emailtext: "Email",
-        countrytext: "Country",
-        editProfileHeader: "Edit your profile",
-        editProfileSubHeader: "Personal Information",
-        submitChangeButtonText: "Submit Changes",
+        firstnametext: props.firstnametext,
+        lastnametext: props.lastnametext,
+        emailtext: props.emailtext,
+        countrytext: props.countrytext,
+        editProfileHeader: props.editProfileHeader,
+        editProfileSubHeader: props.editProfileSubHeader,
+        submitChangeButtonText: props.submitChangeButtonText,
       },
       formState: {
         country: "Canada",

package/dist/cjs/sqm-portal-protected-route.cjs.entry.js

@@ -3,28 +3,27 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./use-callback-e754042f.js');
-const index_module = require('./index.module-1c799b1f.js');
-require('./extends-08099afd.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+require('./use-callback-5d15897d.js');
+const index_module = require('./index.module-d3a28293.js');
 
 function usePortalProtectedRoute({ requireEmailVerification, redirectTo, redirectToUnverified, }) {
   var _a;
-  const userIdent = index_module.ae();
+  const userIdent = index_module.N();
   const authenticated = !!(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt);
   const emailVerified = (_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified;
-  const { pathname, search } = index_module.bn();
+  const { pathname, search } = index_module.ln();
   const nextPageParam = new URLSearchParams();
   nextPageParam.append("nextPage", `${pathname}${search}`);
   stencilHooks_module.useEffect(() => {
     if (!authenticated) {
-      return index_module.wn.push({
+      return index_module.fn.push({
         pathname: redirectTo,
         search: "?" + nextPageParam.toString(),
       });
     }
     if (requireEmailVerification && !emailVerified) {
-      return index_module.wn.push({
+      return index_module.fn.push({
         pathname: redirectToUnverified || redirectTo,
         search: "?" + nextPageParam.toString(),
       });
@@ -38,23 +37,26 @@ const PortalProtectedRoute = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
-     * @uiName Redirect Path
+     * Redirect participants to this page they are not logged in.
+     *
+     * @uiName Unauthenticated Participant Redirect
      */
     this.redirectTo = "/";
     /**
      * @uiName Require Email Verification
-     * @default
      */
     this.requireEmailVerification = false;
     /**
-     * @uiName Redirect Unverified Users Path
+     * Redirect participants to this page when email verification is required but they have not verified their email.
+     *
+     * @uiName Unverified Participant Redirect
      */
     this.redirectToUnverified = "/emailVerification";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    const hasUser = index_module.L()
+    const hasUser = index_module.isDemo()
       ? usePortalProtectedRouteDemo()
       : usePortalProtectedRoute(this);
     return (index.h(index.Host, { style: { display: hasUser ? "contents" : "none" } }, index.h("slot", null)));

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

@@ -0,0 +1,441 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+const useCallback = require('./use-callback-5d15897d.js');
+const index_module = require('./index.module-d3a28293.js');
+const jsonpointer = require('./jsonpointer-11327262.js');
+const cjs = require('./cjs-1066ec21.js');
+const mixins = require('./mixins-338ca5f1.js');
+const JSS = require('./JSS-c73206b7.js');
+const sqmTextSpanView = require('./sqm-text-span-view-b0c90c27.js');
+const AsYouType = require('./AsYouType-6788393a.js');
+const useRegistrationFormState = require('./useRegistrationFormState-3f88db90.js');
+
+const style = {
+  Wrapper: { ...mixins.AuthWrapper, "max-width": "600px" },
+  Column: mixins.AuthColumn,
+  HostBlock: mixins.HostBlock,
+  ":host": {
+    margin: "0 auto",
+    width: "100%",
+  },
+  ButtonsContainer: mixins.AuthButtonsContainer,
+  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 PortalRegistrationFormView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+  const { states, refs, callbacks, content } = props;
+  if (states.error) {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  }
+  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.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+      ((_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.disabled) ? (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        index.h("div", { part: "erroralert-text" }, states.registrationFormState.disabledMessage))) : (states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        index.h("div", { part: "erroralert-text" }, props.states.error)))),
+      content.formData,
+      !states.hideInputs && (index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading || ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.disabled), required: true, validationError: ({ value }) => {
+          if (!value) {
+            return content.requiredFieldErrorMessage;
+          }
+          // this matches shoelace validation, but could be better
+          if (!value.includes("@")) {
+            return content.invalidEmailErrorMessage;
+          }
+        } }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.email) ? {
+        value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.email,
+      }
+        : {}), (((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_k = (_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.validationErrors) === null || _k === void 0 ? void 0 : _k.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : [])))),
+      !states.hideInputs && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": !states.enablePasswordValidation })),
+      content.passwordField,
+      !states.hideInputs && states.confirmPassword && (index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.disabled), required: true }, (((_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.confirmPassword) ? {
+        value: (_q = (_p = states.registrationFormState) === null || _p === void 0 ? void 0 : _p.initialData) === null || _q === void 0 ? void 0 : _q.confirmPassword,
+      }
+        : {}), (((_s = (_r = states.registrationFormState) === null || _r === void 0 ? void 0 : _r.validationErrors) === null || _s === void 0 ? void 0 : _s.confirmPassword) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_u = (_t = states.registrationFormState) === null || _t === void 0 ? void 0 : _t.validationErrors) === null || _u === void 0 ? void 0 : _u.confirmPassword) || content.requiredFieldErrorMessage,
+      }
+        : [])))),
+      content.terms,
+      index.h("div", { class: sheet.classes.ButtonsContainer },
+        index.h("sl-button", { submit: true, loading: states.loading, disabled: (_v = states.registrationFormState) === null || _v === void 0 ? void 0 : _v.disabled, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
+        content.secondaryButton))));
+}
+
+const RegistrationFormQuery = index_module.dist.gql `
+  query RegistrationFormQuery($key: String!) {
+    form(key: $key) {
+      key
+      type
+      initialData {
+        initialData
+        isEnabled
+        isEnabledErrorMessage
+      }
+    }
+  }
+`;
+function usePortalRegistrationForm(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const formRef = stencilHooks_module.useRef(null);
+  const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
+  const [request, { loading, errors, data, formError }] = index_module.qe();
+  const queryResponse = index_module.dn(RegistrationFormQuery, { key: props.formKey });
+  const formLoading = loading || queryResponse.loading;
+  stencilHooks_module.useEffect(() => {
+    var _a, _b, _c;
+    const initialData = (_a = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _a === void 0 ? void 0 : _a.form.initialData.initialData;
+    const disabled = ((_b = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _b === void 0 ? void 0 : _b.form.initialData.isEnabled) === false;
+    const disabledMessage = ((_c = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _c === void 0 ? void 0 : _c.form.initialData.isEnabledErrorMessage) ||
+      props.formDisabledErrorMessage;
+    const formState = {
+      loading: formLoading,
+      disabled,
+      disabledMessage,
+      initialData,
+    };
+    setRegistrationFormState(formState);
+  }, [(_a = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _a === void 0 ? void 0 : _a.form.initialData]);
+  stencilHooks_module.useEffect(() => {
+    if (!formRef.current)
+      return;
+    const form = formRef.current;
+    form.addEventListener("sl-input", inputFunction);
+    return () => {
+      form.removeEventListener("sl-input", inputFunction);
+    };
+  }, [formRef.current]);
+  const submit = async (event) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    let formControls = event.target.getFormControls();
+    let formData = {};
+    let validationErrors = {};
+    formControls === null || formControls === void 0 ? void 0 : formControls.forEach((control) => {
+      if (!control.name)
+        return;
+      const key = control.name;
+      const value = control.value;
+      // control.value = initialData[key] || control.value;
+      jsonpointer.jsonpointer.set(formData, key, value);
+      // required validation
+      if (control.required && !value) {
+        jsonpointer.jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
+      }
+      // custom validation
+      if (typeof control.validationError === "function") {
+        const validate = control.validationError;
+        const validationError = validate({ control, key, value });
+        if (validationError)
+          jsonpointer.jsonpointer.set(validationErrors, key, validationError);
+      }
+    });
+    if ((props.confirmPassword || formData.confirmPassword) &&
+      formData.password !== formData.confirmPassword) {
+      validationErrors = {
+        ...validationErrors,
+        confirmPassword: props.passwordMismatchErrorMessage,
+      };
+    }
+    if (Object.keys(validationErrors).length) {
+      // early return for validation errors
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors,
+      });
+      return;
+    }
+    setRegistrationFormState({
+      ...registrationFormState,
+      loading: true,
+      error: "",
+      validationErrors: {},
+    });
+    const { email, password } = formData;
+    delete formData.email;
+    delete formData.password;
+    delete formData.confirmPassword;
+    const redirectPath = props.redirectPath;
+    const variables = {
+      key: props.formKey,
+      formData: {
+        email,
+        password,
+        redirectPath,
+        ...formData,
+      },
+    };
+    try {
+      const result = await request(variables);
+      if (result instanceof Error) {
+        throw result;
+      }
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors: {},
+      });
+      const managedIdentityResponse = (_a = result.submitForm) === null || _a === void 0 ? void 0 : _a.results.find((result) => { var _a; return ((_a = result === null || result === void 0 ? void 0 : result.formHandler) === null || _a === void 0 ? void 0 : _a.namespace) === "identity"; });
+      if (managedIdentityResponse &&
+        managedIdentityResponse.result.results.length &&
+        managedIdentityResponse.result.results[0].success &&
+        managedIdentityResponse.result.results[0].data.token) {
+        index_module.fn.push(props.nextPage);
+      }
+      else if (
+      // check for blocked email error response
+      ((_b = result.submitForm) === null || _b === void 0 ? void 0 : _b.results.length) === 1 &&
+        ((_f = (_e = (_d = (_c = result.submitForm) === null || _c === void 0 ? void 0 : _c.results[0]) === null || _d === void 0 ? void 0 : _d.result) === null || _e === void 0 ? void 0 : _e.results) === null || _f === void 0 ? void 0 : _f.length) === 1 &&
+        ((_l = (_k = (_j = (_h = (_g = result.submitForm) === null || _g === void 0 ? void 0 : _g.results[0]) === null || _h === void 0 ? void 0 : _h.result) === null || _j === void 0 ? void 0 : _j.results) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.success) ===
+          false && ((_s = (_r = (_q = (_p = (_o = (_m = result.submitForm) === null || _m === void 0 ? void 0 : _m.results[0]) === null || _o === void 0 ? void 0 : _o.result) === null || _p === void 0 ? void 0 : _p.results) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.message) === null || _s === void 0 ? void 0 : _s.startsWith("Blocked email"))) {
+        setRegistrationFormState({
+          ...registrationFormState,
+          loading: false,
+          error: "",
+          validationErrors: {
+            email: props.invalidEmailErrorMessage,
+          },
+        });
+      }
+    }
+    catch (error) {
+      // check for invalid email
+      if ((_t = error === null || error === void 0 ? void 0 : error.message) === null || _t === void 0 ? void 0 : _t.includes("is not a valid email address")) {
+        setRegistrationFormState({
+          ...registrationFormState,
+          loading: false,
+          error: "",
+          validationErrors: { email: props.invalidEmailErrorMessage },
+        });
+      }
+      else {
+        setRegistrationFormState({
+          ...registrationFormState,
+          loading: false,
+          error: props.networkErrorMessage,
+          validationErrors: {},
+        });
+      }
+    }
+  };
+  const inputFunction = useCallback.useCallback((e) => {
+    var _a, _b;
+    const name = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    if (name !== "tel")
+      return;
+    const asYouType = new AsYouType.AsYouType("US");
+    e.target.value = asYouType.input(e.target.value);
+  }, []);
+  let errorMessage = "";
+  if (((_b = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _b === void 0 ? void 0 : _b.form.initialData.isEnabled) === false) {
+    errorMessage =
+      ((_c = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _c === void 0 ? void 0 : _c.form.initialData.isEnabledErrorMessage) ||
+        props.formDisabledErrorMessage;
+  }
+  else if ((_d = errors === null || errors === void 0 ? void 0 : errors.response) === null || _d === void 0 ? void 0 : _d["error"]) {
+    errorMessage = props.networkErrorMessage;
+  }
+  else if ((errors === null || errors === void 0 ? void 0 : errors.message) && !((_e = errors === null || errors === void 0 ? void 0 : errors.response) === null || _e === void 0 ? void 0 : _e.errors.length)) {
+    errorMessage = props.networkErrorMessage;
+  }
+  else {
+    errorMessage =
+      formError || ((_j = (_h = (_g = (_f = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.errors) === null || _f === void 0 ? void 0 : _f.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) || (registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.error);
+  }
+  return {
+    states: {
+      loading: loading || queryResponse.loading,
+      error: errorMessage,
+      registrationFormState,
+      confirmPassword: props.confirmPassword,
+      hideInputs: props.hideInputs,
+      loginPath: props.loginPath,
+      enablePasswordValidation: !props.disablePasswordValidation,
+    },
+    callbacks: {
+      submit,
+      inputFunction,
+    },
+    refs: {
+      formRef,
+    },
+  };
+}
+
+const PortalRegistrationForm = 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";
+    /**
+     * 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.";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks, refs } = index_module.isDemo()
+      ? useRegisterDemo(this)
+      : usePortalRegistrationForm(this);
+    const content = {
+      formData: index.h("slot", { name: "formData" }),
+      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.fn.push(states.loginPath) }, 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,
+    };
+    return (index.h(PortalRegistrationFormView, { states: states, 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: {
+      submit: async (_event) => {
+        console.log("submit");
+      },
+      inputFunction: () => { },
+    },
+    refs: {
+      formRef: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+exports.sqm_portal_registration_form = PortalRegistrationForm;

package/dist/cjs/{sqm-portal-reset-password-view-042073ca.js → sqm-portal-reset-password-view-035245e6.js}

@@ -2,8 +2,8 @@
 
 const index = require('./index-b0129cd6.js');
 const mixins = require('./mixins-338ca5f1.js');
-const JSS = require('./JSS-a75f3a9a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-ab4ad6ef.js');
+const JSS = require('./JSS-c73206b7.js');
+const sqmTextSpanView = require('./sqm-text-span-view-b0c90c27.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,