@saasquatch/mint-components 1.6.2-3 → 1.6.2-4

package/dist/{esm/useValidationState-34e24357.js → cjs/AsYouType-6788393a.js}

@@ -1,5 +1,4 @@
-import { y } from './stencil-hooks.module-66fea7dc.js';
-import { P } from './index.module-8e654eb1.js';
+'use strict';
 
 // This file is a workaround for a bug in web browsers' "native"
 // ES6 importing system which is uncapable of importing "*.json" files.
@@ -3872,11 +3871,4 @@ function AsYouType$1(country) {
 AsYouType$1.prototype = Object.create(AsYouType.prototype, {});
 AsYouType$1.prototype.constructor = AsYouType$1;
 
-const FORM_VALIDATION_CONTEXT = "sq:validation-state";
-function useValidationState(formState) {
-  const host = P();
-  const [validationState, setValidationState] = y(host, FORM_VALIDATION_CONTEXT, formState);
-  return { validationState, setValidationState };
-}
-
-export { AsYouType$1 as A, FORM_VALIDATION_CONTEXT as F, useValidationState as u };
+exports.AsYouType = AsYouType$1;

package/dist/cjs/{ShadowViewAddon-1c9ca20c.js → ShadowViewAddon-d2c9b323.js}

@@ -2450,18 +2450,25 @@ sl-input::part(label){
 const sheet$9 = JSS.createStyleSheet(style$9);
 const styleString$9 = sheet$9.toString();
 function NameFieldsView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
   const { states } = props;
   const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
   return (index.h("div", { class: sheet$9.classes.FieldsContainer },
     index.h("style", { type: "text/css" },
       vanillaStyle$3,
       styleString$9),
-    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true }, ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
+    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.disabled) }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.firstName) ? {
+      value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.firstName,
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
       class: sheet$9.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
-    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true }, ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
+    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true, disabled: ((_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.loading) || ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.disabled) }, (((_k = (_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.initialData) === null || _k === void 0 ? void 0 : _k.lastName) ? {
+      value: (_m = (_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.initialData) === null || _m === void 0 ? void 0 : _m.lastName,
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
       class: sheet$9.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
     }

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

@@ -18,8 +18,9 @@ require('./luxon-59ca7d19.js');
 const utils = require('./utils-6847bc06.js');
 require('./sqm-text-span-view-2c7d94b5.js');
 require('./sqm-portal-container-view-840db620.js');
-const useValidationState = require('./useValidationState-942d11da.js');
-const ShadowViewAddon = require('./ShadowViewAddon-1c9ca20c.js');
+const AsYouType = require('./AsYouType-6788393a.js');
+const useRegistrationFormState = require('./useRegistrationFormState-aa366992.js');
+const ShadowViewAddon = require('./ShadowViewAddon-d2c9b323.js');
 require('./sqm-portal-section-view-854a3e9c.js');
 
 const BigStat = class {
@@ -180,7 +181,7 @@ function RequiredPropsError({ missingProps, heading = "There was a problem loadi
 }
 
 function useCheckboxField() {
-  const validationState = stencilHooks_module.d(useValidationState.FORM_VALIDATION_CONTEXT);
+  const validationState = stencilHooks_module.d(useRegistrationFormState.FORM_VALIDATION_CONTEXT);
   const [checked, setChecked] = stencilHooks_module.useState(false);
   return {
     states: {
@@ -322,7 +323,7 @@ const DividedLayout = class {
 };
 
 function useDropdownField() {
-  const validationState = stencilHooks_module.d(useValidationState.FORM_VALIDATION_CONTEXT);
+  const validationState = stencilHooks_module.d(useRegistrationFormState.FORM_VALIDATION_CONTEXT);
   return {
     states: {
       validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
@@ -813,7 +814,7 @@ const SqmHookStoryContainer = class {
 };
 
 function useInputField() {
-  const validationState = stencilHooks_module.d(useValidationState.FORM_VALIDATION_CONTEXT);
+  const validationState = stencilHooks_module.d(useRegistrationFormState.FORM_VALIDATION_CONTEXT);
   return {
     states: {
       validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
@@ -1105,10 +1106,12 @@ function useLeaderboardDemo(props) {
 }
 
 function useNameFields(props) {
-  const validationState = stencilHooks_module.d(useValidationState.FORM_VALIDATION_CONTEXT);
+  const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
+  const validationState = stencilHooks_module.d(useRegistrationFormState.FORM_VALIDATION_CONTEXT);
   return {
     states: {
       validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
+      registrationFormState,
       content: {
         lastNameLabel: props.lastNameLabel,
         firstNameLabel: props.firstNameLabel,
@@ -1542,7 +1545,7 @@ function useLoginDemo(props) {
 function usePortalRegister(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const formRef = stencilHooks_module.useRef(null);
-  const { validationState, setValidationState } = useValidationState.useValidationState({});
+  const { validationState, setValidationState } = useRegistrationFormState.useValidationState({});
   const [request, { loading, errors, data }] = index_module.He();
   const submit = async (event) => {
     let formControls = event.target.getFormControls();
@@ -1602,7 +1605,7 @@ function usePortalRegister(props) {
     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 useValidationState.AsYouType("US");
+    const asYouType = new AsYouType.AsYouType("US");
     e.target.value = asYouType.input(e.target.value);
   }, []);
   stencilHooks_module.useEffect(() => {

package/dist/cjs/sqm-password-field.cjs.entry.js

@@ -10,6 +10,7 @@ require('./extends-08099afd.js');
 const cjs = require('./cjs-1066ec21.js');
 const mixins = require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-97fd087e.js');
+const useRegistrationFormState = require('./useRegistrationFormState-aa366992.js');
 
 var constants = {
   error: {
@@ -487,27 +488,30 @@ const vanillaStyle = `
 const sheet$1 = JSS.createStyleSheet(style$1);
 const styleString$1 = sheet$1.toString();
 function PortalResetPasswordView(props) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { states, callbacks } = props;
   return (index.h("div", { class: sheet$1.classes.InputContainer },
     index.h("style", { type: "text/css" },
       vanillaStyle,
       styleString$1),
-    index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/password", label: states.content.fieldLabel || "Password", required: true, validationError: ({ value }) => {
+    index.h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/password", label: states.content.fieldLabel || "Password", required: true, disabled: ((_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.disabled), validationError: ({ value }) => {
         if (!value) {
           return "Cannot be empty";
         }
-      } }, (((_a = states.validationErrors) === null || _a === void 0 ? void 0 : _a.password) ? {
+      } }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.password) ? {
+      value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.password,
+    }
+      : {}), (((_g = states.validationErrors) === null || _g === void 0 ? void 0 : _g.password) ? {
       class: sheet$1.classes.ErrorStyle,
-      helpText: ((_b = states.validationErrors) === null || _b === void 0 ? void 0 : _b.password) || "Cannot be empty",
+      helpText: ((_h = states.validationErrors) === null || _h === void 0 ? void 0 : _h.password) || "Cannot be empty",
     }
       : []), { onInput: (input) => states.enableValidation && callbacks.onInput(input) })),
     states.dynamicValidation));
 }
 
-const CONTEXT_NAME = "sq:validation-state";
 function usePasswordField(props) {
-  const validationState = stencilHooks_module.d(CONTEXT_NAME);
+  const validationState = stencilHooks_module.d(useRegistrationFormState.FORM_VALIDATION_CONTEXT);
+  const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
   const [dynamicValidation, setDynamicValidation] = stencilHooks_module.useState("");
   function onInput(input) {
     const validation = validateNewPassword(input.target.value);
@@ -517,6 +521,7 @@ function usePasswordField(props) {
     states: {
       enableValidation: props.enableValidation,
       dynamicValidation,
+      registrationFormState,
       validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
       content: {
         fieldLabel: props.fieldLabel,
@@ -571,6 +576,7 @@ function usePasswordFieldDemo(props) {
       enableValidation: true,
       dynamicValidation,
       validationErrors: ((_f = (_e = props === null || props === void 0 ? void 0 : props.demoData) === null || _e === void 0 ? void 0 : _e.states) === null || _f === void 0 ? void 0 : _f.validationErrors) || {},
+      registrationFormState: {},
       content: {
         fieldLabel: "Password",
       },

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

@@ -12,7 +12,8 @@ const cjs = require('./cjs-1066ec21.js');
 const mixins = require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-97fd087e.js');
 const sqmTextSpanView = require('./sqm-text-span-view-2c7d94b5.js');
-const useValidationState = require('./useValidationState-942d11da.js');
+const AsYouType = require('./AsYouType-6788393a.js');
+const useRegistrationFormState = require('./useRegistrationFormState-aa366992.js');
 
 const style = {
   Wrapper: { ...mixins.AuthWrapper, "max-width": "600px" },
@@ -43,7 +44,7 @@ sqm-portal-register {
 const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 function PortalRegistrationFormView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  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" });
@@ -54,10 +55,11 @@ function PortalRegistrationFormView(props) {
       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 },
-      states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        index.h("div", { part: "erroralert-text" }, props.states.error))),
+      ((_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, required: true, validationError: ({ value }) => {
+      !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";
           }
@@ -65,40 +67,78 @@ function PortalRegistrationFormView(props) {
           if (!value.includes("@")) {
             return "Must be a valid email address";
           }
-        } }, (((_b = (_a = states.validationState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+        } }, (((_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: ((_d = (_c = states.validationState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
+        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 }, (((_f = (_e = states.validationState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
+      !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: ((_h = (_g = states.validationState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) ||
+        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, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
+        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;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
   const formRef = stencilHooks_module.useRef(null);
-  const { validationState, setValidationState } = useValidationState.useValidationState({});
+  const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
+  const { validationState, setValidationState } = useRegistrationFormState.useValidationState({});
   const [request, { loading, errors, data, formError }] = index_module.We();
+  const queryResponse = index_module.wn(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);
+    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, formLoading]);
   const submit = async (event) => {
     let formControls = event.target.getFormControls();
     let formData = {};
     let validationErrors = {};
     formControls === null || formControls === void 0 ? void 0 : formControls.forEach((control) => {
+      console.log({ control }, control.name);
       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) {
@@ -149,7 +189,7 @@ function usePortalRegistrationForm(props) {
     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 useValidationState.AsYouType("US");
+    const asYouType = new AsYouType.AsYouType("US");
     e.target.value = asYouType.input(e.target.value);
   }, []);
   stencilHooks_module.useEffect(() => {
@@ -172,21 +212,27 @@ function usePortalRegistrationForm(props) {
     };
   }, [formRef.current]);
   let errorMessage = "";
-  if ((_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a["error"]) {
+  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) && !((_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors.length)) {
+  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 || ((_f = (_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors.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) || (validationState === null || validationState === void 0 ? void 0 : validationState.error);
+      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: loading || queryResponse.loading,
       error: errorMessage,
       validationState,
+      registrationFormState,
       confirmPassword: props.confirmPassword,
       hideInputs: props.hideInputs,
       loginPath: props.loginPath,

package/dist/cjs/sqm-portal-verify-email.cjs.entry.js

@@ -24,7 +24,6 @@ function usePortalVerifyEmail({ nextPage, failedPage }) {
   const urlParams = new URLSearchParams(window.location.search);
   const oobCode = urlParams.get("oobCode");
   const nextPageOverride = urlParams.get("nextPage");
-  urlParams.delete("oobCode");
   const failed = () => {
     return index_module.In.push({
       pathname: failedPage,

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -28,7 +28,7 @@ const sqmPortalContainerView = require('./sqm-portal-container-view-840db620.js'
 const sqmPortalProfileView = require('./sqm-portal-profile-view-d0818828.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-f8dc0b79.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-cc59877c.js');
-const ShadowViewAddon = require('./ShadowViewAddon-1c9ca20c.js');
+const ShadowViewAddon = require('./ShadowViewAddon-d2c9b323.js');
 const sqmPortalSectionView = require('./sqm-portal-section-view-854a3e9c.js');
 
 /**
@@ -5986,6 +5986,7 @@ const Start = () => {
       initValue: "",
       states: {
         enableValidation: true,
+        registrationFormState: {},
         validationErrors: {},
         content: {
           fieldLabel: "Password",
@@ -5999,6 +6000,7 @@ const EmptyError = () => {
       states: {
         enableValidation: true,
         validationErrors: { password: "Cannot be empty" },
+        registrationFormState: {},
         content: {
           fieldLabel: "Password",
         },
@@ -6010,6 +6012,7 @@ const ValidationError = () => {
       initValue: "asdf",
       states: {
         enableValidation: true,
+        registrationFormState: {},
         validationErrors: { password: "Incomplete" },
         content: {
           fieldLabel: "Password",

package/dist/cjs/useRegistrationFormState-aa366992.js

@@ -0,0 +1,23 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+const index_module = require('./index.module-7eab8006.js');
+
+const FORM_VALIDATION_CONTEXT = "sq:validation-state";
+function useValidationState(formState) {
+  const host = index_module.P();
+  const [validationState, setValidationState] = stencilHooks_module.y(host, FORM_VALIDATION_CONTEXT, formState);
+  return { validationState, setValidationState };
+}
+
+const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
+function useRegistrationFormState(formState) {
+  const host = index_module.P();
+  const [registrationFormState, setRegistrationFormState] = stencilHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
+  return { registrationFormState, setRegistrationFormState };
+}
+
+exports.FORM_VALIDATION_CONTEXT = FORM_VALIDATION_CONTEXT;
+exports.REGISTRATION_FORM_STATE_CONTEXT = REGISTRATION_FORM_STATE_CONTEXT;
+exports.useRegistrationFormState = useRegistrationFormState;
+exports.useValidationState = useValidationState;

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

@@ -24,18 +24,25 @@ sl-input::part(label){
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function NameFieldsView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
   const { states } = props;
   const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
   return (h("div", { class: sheet.classes.FieldsContainer },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true }, ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.disabled) }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.firstName) ? {
+      value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.firstName,
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
       class: sheet.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true }, ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true, disabled: ((_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.loading) || ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.disabled) }, (((_k = (_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.initialData) === null || _k === void 0 ? void 0 : _k.lastName) ? {
+      value: (_m = (_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.initialData) === null || _m === void 0 ? void 0 : _m.lastName,
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
       class: sheet.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
     }

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

@@ -74,7 +74,7 @@ export class NameFields {
       "mutable": false,
       "complexType": {
         "original": "DemoData<NameFieldsViewProps>",
-        "resolved": "{ states?: { validationErrors?: ValidationErrors; content: { firstNameLabel: string; lastNameLabel: string; }; }; }",
+        "resolved": "{ states?: { validationErrors?: ValidationErrors; registrationFormState?: RegistrationFormState; content: { firstNameLabel: string; lastNameLabel: string; }; }; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -1,10 +1,13 @@
 import { useDomContext } from "@saasquatch/stencil-hooks";
 import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
+import { REGISTRATION_FORM_STATE_CONTEXT, } from "../sqm-portal-registration-form/useRegistrationFormState";
 export function useNameFields(props) {
+  const registrationFormState = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
   const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
   return {
     states: {
       validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
+      registrationFormState,
       content: {
         lastNameLabel: props.lastNameLabel,
         firstNameLabel: props.firstNameLabel,

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

@@ -7,6 +7,7 @@ export const Start = () => {
       initValue: "",
       states: {
         enableValidation: true,
+        registrationFormState: {},
         validationErrors: {},
         content: {
           fieldLabel: "Password",
@@ -20,6 +21,7 @@ export const EmptyError = () => {
       states: {
         enableValidation: true,
         validationErrors: { password: "Cannot be empty" },
+        registrationFormState: {},
         content: {
           fieldLabel: "Password",
         },
@@ -31,6 +33,7 @@ export const ValidationError = () => {
       initValue: "asdf",
       states: {
         enableValidation: true,
+        registrationFormState: {},
         validationErrors: { password: "Incomplete" },
         content: {
           fieldLabel: "Password",

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

@@ -22,19 +22,22 @@ const vanillaStyle = `
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalResetPasswordView(props) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { states, callbacks } = props;
   return (h("div", { class: sheet.classes.InputContainer },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/password", label: states.content.fieldLabel || "Password", required: true, validationError: ({ value }) => {
+    h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/password", label: states.content.fieldLabel || "Password", required: true, disabled: ((_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.disabled), validationError: ({ value }) => {
         if (!value) {
           return "Cannot be empty";
         }
-      } }, (((_a = states.validationErrors) === null || _a === void 0 ? void 0 : _a.password) ? {
+      } }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.password) ? {
+      value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.password,
+    }
+      : {}), (((_g = states.validationErrors) === null || _g === void 0 ? void 0 : _g.password) ? {
       class: sheet.classes.ErrorStyle,
-      helpText: ((_b = states.validationErrors) === null || _b === void 0 ? void 0 : _b.password) || "Cannot be empty",
+      helpText: ((_h = states.validationErrors) === null || _h === void 0 ? void 0 : _h.password) || "Cannot be empty",
     }
       : []), { onInput: (input) => states.enableValidation && callbacks.onInput(input) })),
     states.dynamicValidation));

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

@@ -124,6 +124,7 @@ function usePasswordFieldDemo(props) {
       enableValidation: true,
       dynamicValidation,
       validationErrors: ((_f = (_e = props === null || props === void 0 ? void 0 : props.demoData) === null || _e === void 0 ? void 0 : _e.states) === null || _f === void 0 ? void 0 : _f.validationErrors) || {},
+      registrationFormState: {},
       content: {
         fieldLabel: "Password",
       },

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

@@ -1,9 +1,11 @@
 import { useState } from "@saasquatch/universal-hooks";
+import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
 import { validateNewPassword } from "./passwordValidation";
 import { useDomContext } from "@saasquatch/stencil-hooks";
-const CONTEXT_NAME = "sq:validation-state";
+import { REGISTRATION_FORM_STATE_CONTEXT, } from "../sqm-portal-registration-form/useRegistrationFormState";
 export function usePasswordField(props) {
-  const validationState = useDomContext(CONTEXT_NAME);
+  const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
+  const registrationFormState = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
   const [dynamicValidation, setDynamicValidation] = useState("");
   function onInput(input) {
     const validation = validateNewPassword(input.target.value);
@@ -13,6 +15,7 @@ export function usePasswordField(props) {
     states: {
       enableValidation: props.enableValidation,
       dynamicValidation,
+      registrationFormState,
       validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
       content: {
         fieldLabel: props.fieldLabel,

package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form-view.js

@@ -31,7 +31,7 @@ sqm-portal-register {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalRegistrationFormView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  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" });
@@ -42,10 +42,11 @@ export function PortalRegistrationFormView(props) {
       styleString),
     h(TextSpanView, { type: "h3" }, content.pageLabel),
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-      states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        h("div", { part: "erroralert-text" }, props.states.error))),
+      ((_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.disabled) ? (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        h("div", { part: "erroralert-text" }, states.registrationFormState.disabledMessage))) : (states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        h("div", { part: "erroralert-text" }, props.states.error)))),
       content.formData,
-      !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
+      !states.hideInputs && (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";
           }
@@ -53,22 +54,28 @@ export function PortalRegistrationFormView(props) {
           if (!value.includes("@")) {
             return "Must be a valid email address";
           }
-        } }, (((_b = (_a = states.validationState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+        } }, (((_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: ((_d = (_c = states.validationState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
+        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 && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "enable-validation": states.enablePasswordValidation })),
       content.passwordField,
-      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.validationState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
+      !states.hideInputs && states.confirmPassword && (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: ((_h = (_g = states.validationState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) ||
+        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,
       h("div", { class: sheet.classes.ButtonsContainer },
-        h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
+        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))));
 }

package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form.js

@@ -383,7 +383,7 @@ export class PortalRegistrationForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalRegistrationFormViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; registrationFormState?: RegistrationFormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",