@saasquatch/mint-components 1.6.2-13 → 1.6.2-16

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

@@ -8,353 +8,356 @@ const useCallback = require('./use-callback-5d15897d.js');
 const index_module = require('./index.module-93c78ac7.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
-const mixins = require('./mixins-fe9d4112.js');
-const JSS = require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-b318af73.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-d0e43ca9.js');
+const useRegistrationFormState = require('./useRegistrationFormState-3c1cd78b.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;
+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;
+  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 "Cannot be empty";
+          }
+          // this matches shoelace validation, but could be better
+          if (!value.includes("@")) {
+            return "Must be a valid email address";
+          }
+        } }, (((_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.validationState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_k = (_j = states.validationState) === null || _j === void 0 ? void 0 : _j.validationErrors) === null || _k === void 0 ? void 0 : _k.email) ||
+          "Cannot be empty",
+      }
+        : [])))),
+      !states.hideInputs && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "enable-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, required: true }, (((_m = (_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.initialData) === null || _m === void 0 ? void 0 : _m.confirmPassword) ? {
+        value: (_p = (_o = states.registrationFormState) === null || _o === void 0 ? void 0 : _o.initialData) === null || _p === void 0 ? void 0 : _p.confirmPassword,
+      }
+        : {}), (((_r = (_q = states.validationState) === null || _q === void 0 ? void 0 : _q.validationErrors) === null || _r === void 0 ? void 0 : _r.confirmPassword) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_t = (_s = states.validationState) === null || _s === void 0 ? void 0 : _s.validationErrors) === null || _t === void 0 ? void 0 : _t.confirmPassword) ||
+          "Cannot be empty",
+      }
+        : [])))),
+      content.terms,
+      index.h("div", { class: sheet.classes.ButtonsContainer },
+        index.h("sl-button", { submit: true, loading: states.loading, disabled: (_u = states.registrationFormState) === null || _u === void 0 ? void 0 : _u.disabled, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
+        content.secondaryButton))));
 }
 
-:host{
-  display: block;
+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, _k, _l, _m, _o, _p, _q, _r;
+  const formRef = stencilHooks_module.useRef(null);
+  const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
+  const { validationState, setValidationState } = useRegistrationFormState.useValidationState({});
+  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) ||
+      "The registration form is currently disabled.";
+    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;
+    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, "Cannot be empty");
+      }
+      // 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: "Passwords do not match.",
+      };
+    }
+    setValidationState({ error: "", validationErrors });
+    if (Object.keys(validationErrors).length) {
+      // early return for validation errors
+      return;
+    }
+    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;
+      }
+      const managedIdentityResponse = (_a = result.submitForm) === null || _a === void 0 ? void 0 : _a.results.find((result) => result.formHandler.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);
+      }
+    }
+    catch (error) {
+      setValidationState({ error: "Network request failed." });
+    }
+  };
+  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) ||
+        "The registration form is disabled";
+  }
+  else if ((_d = errors === null || errors === void 0 ? void 0 : errors.response) === null || _d === void 0 ? void 0 : _d["error"]) {
+    errorMessage = "Network request failed";
+  }
+  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 = "Network request failed";
+  }
+  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) || ((_o = (_m = (_l = (_k = errors === null || errors === void 0 ? void 0 : errors.response) === null || _k === void 0 ? void 0 : _k.errors) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.extensions) === null || _o === void 0 ? void 0 : _o.message) || ((_r = (_q = (_p = errors === null || errors === void 0 ? void 0 : errors.response) === null || _p === void 0 ? void 0 : _p.errors) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.message) || (validationState === null || validationState === void 0 ? void 0 : validationState.error);
+  }
+  return {
+    states: {
+      loading: loading || queryResponse.loading,
+      error: errorMessage,
+      validationState,
+      registrationFormState,
+      confirmPassword: props.confirmPassword,
+      hideInputs: props.hideInputs,
+      loginPath: props.loginPath,
+    },
+    callbacks: {
+      submit,
+      inputFunction,
+    },
+    refs: {
+      formRef,
+    },
+  };
 }
 
-: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;
-  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 "Cannot be empty";
-          }
-          // this matches shoelace validation, but could be better
-          if (!value.includes("@")) {
-            return "Must be a valid email address";
-          }
-        } }, (((_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.validationState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.email) ? {
-        class: sheet.classes.ErrorStyle,
-        helpText: ((_k = (_j = states.validationState) === null || _j === void 0 ? void 0 : _j.validationErrors) === null || _k === void 0 ? void 0 : _k.email) ||
-          "Cannot be empty",
-      }
-        : [])))),
-      !states.hideInputs && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "enable-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, required: true }, (((_m = (_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.initialData) === null || _m === void 0 ? void 0 : _m.confirmPassword) ? {
-        value: (_p = (_o = states.registrationFormState) === null || _o === void 0 ? void 0 : _o.initialData) === null || _p === void 0 ? void 0 : _p.confirmPassword,
-      }
-        : {}), (((_r = (_q = states.validationState) === null || _q === void 0 ? void 0 : _q.validationErrors) === null || _r === void 0 ? void 0 : _r.confirmPassword) ? {
-        class: sheet.classes.ErrorStyle,
-        helpText: ((_t = (_s = states.validationState) === null || _s === void 0 ? void 0 : _s.validationErrors) === null || _t === void 0 ? void 0 : _t.confirmPassword) ||
-          "Cannot be empty",
-      }
-        : [])))),
-      content.terms,
-      index.h("div", { class: sheet.classes.ButtonsContainer },
-        index.h("sl-button", { submit: true, loading: states.loading, disabled: (_u = states.registrationFormState) === null || _u === void 0 ? void 0 : _u.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, _k, _l, _m, _o, _p, _q, _r;
-  const formRef = stencilHooks_module.useRef(null);
-  const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
-  const { validationState, setValidationState } = useRegistrationFormState.useValidationState({});
-  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) ||
-      "The registration form is currently disabled.";
-    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;
-    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, "Cannot be empty");
-      }
-      // 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: "Passwords do not match.",
-      };
-    }
-    setValidationState({ error: "", validationErrors });
-    if (Object.keys(validationErrors).length) {
-      // early return for validation errors
-      return;
-    }
-    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;
-      }
-      const managedIdentityResponse = (_a = result.submitForm) === null || _a === void 0 ? void 0 : _a.results.find((result) => result.formHandler.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);
-      }
-    }
-    catch (error) {
-      setValidationState({ error: "Network request failed." });
-    }
-  };
-  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) ||
-        "The registration form is disabled";
-  }
-  else if ((_d = errors === null || errors === void 0 ? void 0 : errors.response) === null || _d === void 0 ? void 0 : _d["error"]) {
-    errorMessage = "Network request failed";
-  }
-  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 = "Network request failed";
-  }
-  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) || ((_o = (_m = (_l = (_k = errors === null || errors === void 0 ? void 0 : errors.response) === null || _k === void 0 ? void 0 : _k.errors) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.extensions) === null || _o === void 0 ? void 0 : _o.message) || ((_r = (_q = (_p = errors === null || errors === void 0 ? void 0 : errors.response) === null || _p === void 0 ? void 0 : _p.errors) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.message) || (validationState === null || validationState === void 0 ? void 0 : validationState.error);
-  }
-  return {
-    states: {
-      loading: loading || queryResponse.loading,
-      error: errorMessage,
-      validationState,
-      registrationFormState,
-      confirmPassword: props.confirmPassword,
-      hideInputs: props.hideInputs,
-      loginPath: props.loginPath,
-    },
-    callbacks: {
-      submit,
-      inputFunction,
-    },
-    refs: {
-      formRef,
-    },
-  };
-}
-
-const PortalRegistrationForm = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * Page participants are navigated to after registration.
-     *
-     * @uiName Registration Redirect Path
-     */
-    this.nextPage = "/";
-    /**
-     * The page that participants are redirected to from the verification email.
-     *
-     * @uiName Email Redirection Path
-     */
-    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 Label
-     */
-    this.confirmPasswordLabel = "Confirm Password";
-    /**
-     * Show or hide the confirm password input.
-     *
-     * @uiName Show Confirm Password Field
-     */
-    this.confirmPassword = false;
-    /**
-     * @uiName Enable Password Validation
-     */
-    this.enablePasswordValidation = true;
-    /**
-     * Hide default input fields to use custom fields.
-     *
-     * @uiName Hide Default Inputs
-     */
-    this.hideInputs = false;
-    /**
-     * @uiName Header Text
-     */
-    this.pageLabel = "Register";
-    /**
-     * Login button redirection path.
-     *
-     * @uiName Login Redirect Path
-     */
-    this.loginPath = "/login";
-    /**
-     * Microsite Registration Form Key
-     *
-     * @uiName Form Key
-     */
-    this.formKey = "microsite-registration-form";
-    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,
-    };
-    return (index.h(PortalRegistrationFormView, { states: states, callbacks: callbacks, content: content, refs: refs }));
-  }
-};
-function useRegisterDemo(props) {
-  return cjs.cjs({
-    states: {
-      error: "",
-      loading: false,
-      confirmPassword: true,
-      hideInputs: props.hideInputs || false,
-      customPasswordField: false,
-      loginPath: "/login",
-    },
-    callbacks: {
-      submit: async (_event) => {
-        console.log("submit");
-      },
-      inputFunction: () => { },
-    },
-    refs: {
-      formRef: {},
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+const PortalRegistrationForm = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * Page participants are navigated to after registration.
+     *
+     * @uiName Registration Redirect Path
+     * @uiWidget pageSelect
+     */
+    this.nextPage = "/";
+    /**
+     * The page that participants are redirected to from the verification email.
+     *
+     * @uiName Email Redirection Path
+     * @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 Label
+     */
+    this.confirmPasswordLabel = "Confirm Password";
+    /**
+     * Show or hide the confirm password input.
+     *
+     * @uiName Show Confirm Password Field
+     */
+    this.confirmPassword = false;
+    /**
+     * @uiName Enable Password Validation
+     */
+    this.enablePasswordValidation = true;
+    /**
+     * Hide default input fields to use custom fields.
+     *
+     * @uiName Hide Default Inputs
+     */
+    this.hideInputs = false;
+    /**
+     * @uiName Header Text
+     */
+    this.pageLabel = "Register";
+    /**
+     * Login button redirection path.
+     *
+     * @uiName Login Redirect Path
+     * @uiWidget pageSelect
+     */
+    this.loginPath = "/login";
+    /**
+     * Microsite Registration Form Key
+     *
+     * @uiName Form Key
+     */
+    this.formKey = "microsite-registration";
+    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,
+    };
+    return (index.h(PortalRegistrationFormView, { states: states, callbacks: callbacks, content: content, refs: refs }));
+  }
+};
+function useRegisterDemo(props) {
+  return cjs.cjs({
+    states: {
+      error: "",
+      loading: false,
+      confirmPassword: true,
+      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;