@saasquatch/mint-components 1.6.2-20 → 1.6.2-23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{ShadowViewAddon-312e517f.js → ShadowViewAddon-fa9574a8.js} +25 -17
- package/dist/cjs/sqm-big-stat_35.cjs.entry.js +57 -32
- package/dist/cjs/sqm-password-field.cjs.entry.js +6 -8
- package/dist/cjs/sqm-portal-email-verification.cjs.entry.js +2 -2
- package/dist/cjs/sqm-portal-protected-route.cjs.entry.js +1 -1
- package/dist/cjs/sqm-portal-registration-form.cjs.entry.js +32 -14
- package/dist/cjs/sqm-stencilbook.cjs.entry.js +68 -35
- package/dist/cjs/{useRegistrationFormState-d0e43ca9.js → useRegistrationFormState-bee054d6.js} +0 -9
- package/dist/collection/components/sqm-brand/sqm-brand.js +7 -1
- package/dist/collection/components/sqm-checkbox-field/CheckboxField.stories.js +12 -5
- package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field-view.js +3 -2
- package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js +4 -4
- package/dist/collection/components/sqm-checkbox-field/useCheckboxField.js +12 -5
- package/dist/collection/components/sqm-divided-layout/sqm-divided-layout.js +2 -2
- package/dist/collection/components/sqm-dropdown-field/DropdownField.stories.js +13 -6
- package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field-view.js +6 -2
- package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field.js +3 -3
- package/dist/collection/components/sqm-dropdown-field/useDropdownField.js +3 -3
- package/dist/collection/components/sqm-input-field/InputField.stories.js +12 -5
- package/dist/collection/components/sqm-input-field/sqm-input-field-view.js +6 -2
- package/dist/collection/components/sqm-input-field/sqm-input-field.js +3 -3
- package/dist/collection/components/sqm-input-field/useInputField.js +3 -3
- package/dist/collection/components/sqm-name-fields/NameFields.stories.js +8 -4
- package/dist/collection/components/sqm-name-fields/sqm-name-fields-view.js +6 -6
- package/dist/collection/components/sqm-name-fields/sqm-name-fields.js +1 -1
- package/dist/collection/components/sqm-name-fields/useNameFields.js +0 -3
- package/dist/collection/components/sqm-password-field/PasswordField.stories.js +9 -6
- package/dist/collection/components/sqm-password-field/sqm-password-field-view.js +4 -3
- package/dist/collection/components/sqm-password-field/sqm-password-field.js +1 -2
- package/dist/collection/components/sqm-password-field/usePasswordField.js +0 -3
- package/dist/collection/components/sqm-portal-change-password/sqm-portal-change-password.js +10 -10
- package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification.js +4 -4
- package/dist/collection/components/sqm-portal-protected-route/sqm-portal-protected-route.js +2 -2
- package/dist/collection/components/sqm-portal-register/PortalRegister.stories.js +5 -0
- package/dist/collection/components/sqm-portal-register/sqm-portal-register-view.js +4 -5
- package/dist/collection/components/sqm-portal-register/sqm-portal-register.js +7 -7
- package/dist/collection/components/sqm-portal-register/usePortalRegister.js +20 -6
- package/dist/collection/components/sqm-portal-registration-form/PortalRegistrationForm.stories.js +1 -0
- package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form-view.js +4 -5
- package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form.js +7 -7
- package/dist/collection/components/sqm-portal-registration-form/usePortalRegistrationForm.js +24 -6
- package/dist/collection/components/sqm-referral-iframe/sqm-referral-iframe.js +4 -4
- package/dist/collection/components/sqm-route/sqm-route.js +1 -1
- package/dist/esm/{ShadowViewAddon-b7ca4ee5.js → ShadowViewAddon-9da264db.js} +25 -17
- package/dist/esm/sqm-big-stat_35.entry.js +57 -32
- package/dist/esm/sqm-password-field.entry.js +6 -8
- package/dist/esm/sqm-portal-email-verification.entry.js +2 -2
- package/dist/esm/sqm-portal-protected-route.entry.js +1 -1
- package/dist/esm/sqm-portal-registration-form.entry.js +32 -14
- package/dist/esm/sqm-stencilbook.entry.js +68 -35
- package/dist/esm/{useRegistrationFormState-e94eec81.js → useRegistrationFormState-3cdf2939.js} +1 -8
- package/dist/esm-es5/ShadowViewAddon-9da264db.js +1 -0
- package/dist/esm-es5/sqm-big-stat_35.entry.js +1 -1
- package/dist/esm-es5/sqm-password-field.entry.js +1 -1
- package/dist/esm-es5/sqm-portal-registration-form.entry.js +1 -1
- package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
- package/dist/esm-es5/useRegistrationFormState-3cdf2939.js +1 -0
- package/dist/mint-components/mint-components.esm.js +1 -1
- package/dist/mint-components/p-11a4a003.system.js +1 -1
- package/dist/mint-components/p-1287215d.js +1 -0
- package/dist/mint-components/p-16e4ee0a.entry.js +9 -0
- package/dist/mint-components/p-2c805081.system.js +1 -0
- package/dist/mint-components/p-4a2238b1.system.entry.js +1 -0
- package/dist/mint-components/p-68824c97.system.js +1 -0
- package/dist/mint-components/p-97c5e680.system.entry.js +1 -0
- package/dist/mint-components/p-a400c8c6.entry.js +13 -0
- package/dist/mint-components/p-ab5a8bf0.system.entry.js +1 -0
- package/dist/mint-components/p-ca319b4f.js +268 -0
- package/dist/mint-components/p-dcf30408.entry.js +1 -0
- package/dist/mint-components/{p-1f6d8c42.entry.js → p-f2150df4.entry.js} +12 -12
- package/dist/mint-components/p-f828edc5.system.entry.js +1 -0
- package/dist/types/components/sqm-checkbox-field/sqm-checkbox-field-view.d.ts +2 -2
- package/dist/types/components/sqm-checkbox-field/sqm-checkbox-field.d.ts +1 -0
- package/dist/types/components/sqm-checkbox-field/useCheckboxField.d.ts +4 -2
- package/dist/types/components/sqm-divided-layout/sqm-divided-layout.d.ts +1 -1
- package/dist/types/components/sqm-dropdown-field/sqm-dropdown-field-view.d.ts +2 -2
- package/dist/types/components/sqm-dropdown-field/sqm-dropdown-field.d.ts +1 -0
- package/dist/types/components/sqm-dropdown-field/useDropdownField.d.ts +2 -1
- package/dist/types/components/sqm-input-field/sqm-input-field-view.d.ts +2 -2
- package/dist/types/components/sqm-input-field/sqm-input-field.d.ts +1 -1
- package/dist/types/components/sqm-input-field/useInputField.d.ts +2 -1
- package/dist/types/components/sqm-name-fields/sqm-name-fields-view.d.ts +0 -2
- package/dist/types/components/sqm-name-fields/useNameFields.d.ts +0 -1
- package/dist/types/components/sqm-password-field/sqm-password-field-view.d.ts +0 -1
- package/dist/types/components/sqm-password-field/sqm-password-field.d.ts +0 -1
- package/dist/types/components/sqm-portal-change-password/sqm-portal-change-password.d.ts +5 -5
- package/dist/types/components/sqm-portal-email-verification/sqm-portal-email-verification.d.ts +2 -2
- package/dist/types/components/sqm-portal-protected-route/sqm-portal-protected-route.d.ts +1 -1
- package/dist/types/components/sqm-portal-register/sqm-portal-register-view.d.ts +2 -2
- package/dist/types/components/sqm-portal-register/sqm-portal-register.d.ts +3 -3
- package/dist/types/components/sqm-portal-register/usePortalRegister.d.ts +1 -1
- package/dist/types/components/sqm-portal-registration-form/sqm-portal-registration-form-view.d.ts +0 -2
- package/dist/types/components/sqm-portal-registration-form/sqm-portal-registration-form.d.ts +3 -3
- package/dist/types/components/sqm-portal-registration-form/usePortalRegistrationForm.d.ts +0 -1
- package/dist/types/components/sqm-portal-registration-form/useRegistrationFormState.d.ts +2 -0
- package/dist/types/components/sqm-referral-iframe/sqm-referral-iframe.d.ts +2 -2
- package/dist/types/components/sqm-route/sqm-route.d.ts +1 -0
- package/dist/types/components.d.ts +42 -36
- package/dist/types/global/android.d.ts +7 -0
- package/dist/types/global/demo.d.ts +1 -0
- package/dist/types/stories/features.d.ts +4 -0
- package/dist/types/stories/templates.d.ts +4 -0
- package/docs/docs.docx +0 -0
- package/docs/grapesjs.js +54 -0
- package/docs/raisins.json +1 -1
- package/grapesjs/grapesjs.js +1 -1
- package/package.json +1 -1
- package/dist/collection/components/sqm-portal-register/useValidationState.js +0 -8
- package/dist/esm-es5/ShadowViewAddon-b7ca4ee5.js +0 -1
- package/dist/esm-es5/useRegistrationFormState-e94eec81.js +0 -1
- package/dist/mint-components/p-233e784a.js +0 -1
- package/dist/mint-components/p-3245da29.entry.js +0 -9
- package/dist/mint-components/p-3435cd60.system.entry.js +0 -1
- package/dist/mint-components/p-5d815633.system.entry.js +0 -1
- package/dist/mint-components/p-5d86baae.entry.js +0 -13
- package/dist/mint-components/p-94e85aa5.system.entry.js +0 -1
- package/dist/mint-components/p-aa893634.entry.js +0 -1
- package/dist/mint-components/p-b01e28dd.system.js +0 -1
- package/dist/mint-components/p-b17ec97c.system.js +0 -1
- package/dist/mint-components/p-eb5835b3.js +0 -268
- package/dist/mint-components/p-f75f56f6.system.entry.js +0 -1
- package/dist/types/components/sqm-portal-register/useValidationState.d.ts +0 -18
|
@@ -27,7 +27,7 @@ const sqmPortalContainerView = require('./sqm-portal-container-view-2ddcaa12.js'
|
|
|
27
27
|
const sqmPortalProfileView = require('./sqm-portal-profile-view-e615e2b2.js');
|
|
28
28
|
const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-4d23de69.js');
|
|
29
29
|
const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-96adafc0.js');
|
|
30
|
-
const ShadowViewAddon = require('./ShadowViewAddon-
|
|
30
|
+
const ShadowViewAddon = require('./ShadowViewAddon-fa9574a8.js');
|
|
31
31
|
const sqmPortalSectionView = require('./sqm-portal-section-view-1e5bbcb1.js');
|
|
32
32
|
|
|
33
33
|
/**
|
|
@@ -4057,6 +4057,7 @@ const PortalRegister_stories = {
|
|
|
4057
4057
|
};
|
|
4058
4058
|
const defaultProps$3 = {
|
|
4059
4059
|
states: {
|
|
4060
|
+
registrationFormState: {},
|
|
4060
4061
|
error: "",
|
|
4061
4062
|
loading: false,
|
|
4062
4063
|
confirmPassword: true,
|
|
@@ -4075,6 +4076,7 @@ const defaultProps$3 = {
|
|
|
4075
4076
|
const errorProps$1 = {
|
|
4076
4077
|
states: {
|
|
4077
4078
|
error: "Something went wrong. Please try again.",
|
|
4079
|
+
registrationFormState: {},
|
|
4078
4080
|
loading: false,
|
|
4079
4081
|
confirmPassword: true,
|
|
4080
4082
|
hideInputs: false,
|
|
@@ -4094,6 +4096,7 @@ const errorProps$1 = {
|
|
|
4094
4096
|
};
|
|
4095
4097
|
const loadingProps$1 = {
|
|
4096
4098
|
states: {
|
|
4099
|
+
registrationFormState: {},
|
|
4097
4100
|
error: "",
|
|
4098
4101
|
loading: true,
|
|
4099
4102
|
confirmPassword: true,
|
|
@@ -4111,6 +4114,7 @@ const loadingProps$1 = {
|
|
|
4111
4114
|
};
|
|
4112
4115
|
const slottedProps = {
|
|
4113
4116
|
states: {
|
|
4117
|
+
registrationFormState: {},
|
|
4114
4118
|
error: "",
|
|
4115
4119
|
loading: false,
|
|
4116
4120
|
confirmPassword: true,
|
|
@@ -4138,6 +4142,7 @@ const RegisterLoading = () => index.h(ShadowViewAddon.PortalRegisterView, Object
|
|
|
4138
4142
|
const FieldsHidden = () => {
|
|
4139
4143
|
return (index.h("sqm-portal-register", { demoData: {
|
|
4140
4144
|
states: {
|
|
4145
|
+
registrationFormState: {},
|
|
4141
4146
|
error: "",
|
|
4142
4147
|
loading: true,
|
|
4143
4148
|
confirmPassword: true,
|
|
@@ -5985,8 +5990,9 @@ const Start = () => {
|
|
|
5985
5990
|
initValue: "",
|
|
5986
5991
|
states: {
|
|
5987
5992
|
enableValidation: true,
|
|
5988
|
-
registrationFormState: {
|
|
5989
|
-
|
|
5993
|
+
registrationFormState: {
|
|
5994
|
+
validationErrors: {},
|
|
5995
|
+
},
|
|
5990
5996
|
content: {
|
|
5991
5997
|
fieldLabel: "Password",
|
|
5992
5998
|
},
|
|
@@ -5998,8 +6004,9 @@ const EmptyError = () => {
|
|
|
5998
6004
|
initValue: "",
|
|
5999
6005
|
states: {
|
|
6000
6006
|
enableValidation: true,
|
|
6001
|
-
|
|
6002
|
-
|
|
6007
|
+
registrationFormState: {
|
|
6008
|
+
validationErrors: { password: "Cannot be empty" },
|
|
6009
|
+
},
|
|
6003
6010
|
content: {
|
|
6004
6011
|
fieldLabel: "Password",
|
|
6005
6012
|
},
|
|
@@ -6011,8 +6018,9 @@ const ValidationError = () => {
|
|
|
6011
6018
|
initValue: "asdf",
|
|
6012
6019
|
states: {
|
|
6013
6020
|
enableValidation: true,
|
|
6014
|
-
registrationFormState: {
|
|
6015
|
-
|
|
6021
|
+
registrationFormState: {
|
|
6022
|
+
validationErrors: { password: "Incomplete" },
|
|
6023
|
+
},
|
|
6016
6024
|
content: {
|
|
6017
6025
|
fieldLabel: "Password",
|
|
6018
6026
|
},
|
|
@@ -9580,21 +9588,21 @@ var marked = stencilHooks_module.createCommonjsModule(function (module, exports)
|
|
|
9580
9588
|
})));
|
|
9581
9589
|
});
|
|
9582
9590
|
|
|
9583
|
-
const LoginReadme = "# sqm-portal-login\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description
|
|
9591
|
+
const LoginReadme = "# sqm-portal-login\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ----------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; forgotPasswordPath: string; registerPath: string; }; content?: { forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }` | `undefined` |\n| `emailLabel` | `email-label` | | `string` | `\"Email\"` |\n| `forgotPasswordLabel` | `forgot-password-label` | | `string` | `\"Forgot Password?\"` |\n| `forgotPasswordPath` | `forgot-password-path` | Redirect participants to this page to reset their password | `string` | `\"/forgotPassword\"` |\n| `nextPage` | `next-page` | Redirect participants to this page after they successfully login. | `string` | `\"/\"` |\n| `pageLabel` | `page-label` | | `string` | `\"Sign in to your account\"` |\n| `passwordLabel` | `password-label` | | `string` | `\"Password\"` |\n| `registerLabel` | `register-label` | | `string` | `\"Register\"` |\n| `registerPath` | `register-path` | Redirect participants to this page to start registration. | `string` | `\"/register\"` |\n| `submitLabel` | `submit-label` | | `string` | `\"Sign In\"` |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-login --> sqm-form-message\n sqm-stencilbook --> sqm-portal-login\n style sqm-portal-login fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
9584
9592
|
|
|
9585
|
-
const ReferralIframeReadme = "# sqm-referral-iframe\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description
|
|
9593
|
+
const ReferralIframeReadme = "# sqm-referral-iframe\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `demoData` | -- | | `{ states?: { content: { iframeSrc: string; iframeHeight: string; iframeWidth: string; }; }; data?: { shareCode: string; }; }` | `undefined` |\n| `iframeHeight` | `iframe-height` | Define the height of the iframe with any valid CSS height value. Example: 100px, 5rem, or auto. | `string` | `\"100%\"` |\n| `iframeSrc` | `iframe-src` | URL of iframe to display | `string` | `undefined` |\n| `iframeWidth` | `iframe-width` | Width of the iframe container to Define the width of the iframe with any valid CSS width value. Example: 100px, 5rem, or auto. | `string` | `\"100%\"` |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-stencilbook --> sqm-referral-iframe\n style sqm-referral-iframe fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
9586
9594
|
|
|
9587
|
-
const ForgotPasswordReadme = "# sqm-portal-forgot-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description
|
|
9595
|
+
const ForgotPasswordReadme = "# sqm-portal-forgot-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------- | --------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined` |\n| `emailLabel` | `email-label` | | `string` | `\"Email\"` |\n| `headerText` | `header-text` | | `string` | `\"Enter your email below to receive a password reset link.\"` |\n| `loginPath` | `login-path` | | `string` | `\"/login\"` |\n| `loginText` | `login-text` | Sign In Link Text | `string` | `\"Sign In\"` |\n| `redirectPath` | `redirect-path` | Redirect participants to this page after they verify their email. | `string` | `\"/resetPassword\"` |\n| `submitLabel` | `submit-label` | | `string` | `\"Request Password Reset\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-forgot-password --> sqm-form-message\n style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
9588
9596
|
|
|
9589
|
-
const RegisterReadme = "# sqm-portal-register\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type
|
|
9597
|
+
const RegisterReadme = "# sqm-portal-register\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | ----------------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\n| `confirmPassword` | `confirm-password` | Show or hide the confirm password input. | `boolean` | `false` |\n| `confirmPasswordLabel` | `confirm-password-label` | | `string` | `\"Confirm Password\"` |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; registrationFormState: RegistrationFormState; disablePasswordValidation?: 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; }; }` | `undefined` |\n| `disablePasswordValidation` | `disable-password-validation` | | `boolean` | `false` |\n| `emailLabel` | `email-label` | | `string` | `\"Email\"` |\n| `hideInputs` | `hide-inputs` | Hide default input fields to use custom fields. | `boolean` | `false` |\n| `loginLabel` | `login-label` | | `string` | `\"Sign in\"` |\n| `loginPath` | `login-path` | Login button redirection path. | `string` | `\"/login\"` |\n| `nextPage` | `next-page` | Page participants are navigated to after registration. | `string` | `\"/\"` |\n| `pageLabel` | `page-label` | | `string` | `\"Register\"` |\n| `passwordLabel` | `password-label` | | `string` | `\"Password\"` |\n| `redirectPath` | `redirect-path` | The page that participants are redirected to from the verification email. | `string` | `\"/verifyEmail\"` |\n| `submitLabel` | `submit-label` | | `string` | `\"Register\"` |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-register --> sqm-form-message\n sqm-portal-register --> sqm-password-field\n sqm-stencilbook --> sqm-portal-register\n style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
9590
9598
|
|
|
9591
|
-
const EditProfileReadme = "# sqm-portal-profile\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description
|
|
9599
|
+
const EditProfileReadme = "# sqm-portal-profile\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ------------------------ | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\n| `countrytext` | `countrytext` | | `string` | `\"Country\"` |\n| `demoData` | -- | | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }` | `undefined` |\n| `editProfileHeader` | `edit-profile-header` | | `string` | `\"Edit your profile\"` |\n| `editProfileSubHeader` | `edit-profile-sub-header` | | `string` | `\"Personal Information\"` |\n| `emailtext` | `emailtext` | | `string` | `\"Email\"` |\n| `firstnametext` | `firstnametext` | | `string` | `\"First Name\"` |\n| `hideCountry` | `hide-country` | | `boolean` | `false` |\n| `lastnametext` | `lastnametext` | | `string` | `\"Last Name\"` |\n| `submitChangeButtonText` | `submit-change-button-text` | | `string` | `\"Submit Changes\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-profile --> sqm-form-message\n style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
9592
9600
|
|
|
9593
|
-
const ResetPasswordReadme = "# sqm-portal-reset-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description
|
|
9601
|
+
const ResetPasswordReadme = "# sqm-portal-reset-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |\n| `confirmPassword` | `confirm-password` | | `boolean` | `false` |\n| `confirmPasswordFieldLabel` | `confirm-password-field-label` | | `string` | `\"Confirm Password\"` |\n| `continueButtonText` | `continue-button-text` | Button text displayed after a successful password reset. | `string` | `\"Continue\"` |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; content: { passwordResetHeader: string; resetPasswordHeader: string; continueButtonText: string; resetPasswordButtonText: string; confirmPasswordFieldLabel: string; passwordFieldLabel: string; }; }; }` | `undefined` |\n| `failedPage` | `failed-page` | Redirect participants to this page if password reset fails due to an outdated reset attempt. | `string` | `\"/\"` |\n| `nextPage` | `next-page` | Redirect participants to this page when they successfully reset their password. | `string` | `\"/\"` |\n| `passwordFieldLabel` | `password-field-label` | | `string` | `\"New Password\"` |\n| `passwordResetHeader` | `password-reset-header` | Displayed after a successful password reset. | `string` | `\"Password reset\"` |\n| `resetPasswordButtonText` | `reset-password-button-text` | | `string` | `\"Reset Password\"` |\n| `resetPasswordHeader` | `reset-password-header` | | `string` | `\"Reset your password\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-reset-password --> sqm-form-message\n sqm-portal-reset-password --> sqm-password-field\n style sqm-portal-reset-password fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
9594
9602
|
|
|
9595
|
-
const EmailVerificationReadme = "# sqm-portal-email-verification\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description
|
|
9603
|
+
const EmailVerificationReadme = "# sqm-portal-email-verification\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ------------------------- | --------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; }; }` | `undefined` |\n| `emailVerificationHeader` | `email-verification-header` | | `string` | `\"Verify your email\"` |\n| `redirectPath` | `redirect-path` | Redirect participants to this page from their verification email. | `string` | `\"/verifyEmail\"` |\n| `resendEmailButtonText` | `resend-email-button-text` | | `string` | `\"Re-send Email\"` |\n| `verifyMessage` | `verify-message` | | `string` | `\"A verification email was sent to {email}. Please verify your email to continue to the portal. Resending an email with invalidate the previous email.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-email-verification --> sqm-form-message\n style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
9596
9604
|
|
|
9597
|
-
const EmailVerifiedReadme = "# sqm-portal-verify-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description
|
|
9605
|
+
const EmailVerifiedReadme = "# sqm-portal-verify-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ------------ | ------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\n| `failedPage` | `failed-page` | Redirect participants to this page if verification fails due to an outdated verification attempt. | `string` | `\"/\"` |\n| `nextPage` | `next-page` | Redirect participants to this page when they successfully verify their email. | `string` | `\"/\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-verify-email --> sqm-form-message\n style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
9598
9606
|
|
|
9599
9607
|
const PortalTemplates_stories = {
|
|
9600
9608
|
title: "Templates / Portal",
|
|
@@ -10065,7 +10073,9 @@ const NameFields_stories = {
|
|
|
10065
10073
|
};
|
|
10066
10074
|
const props$1 = {
|
|
10067
10075
|
states: {
|
|
10068
|
-
|
|
10076
|
+
registrationFormState: {
|
|
10077
|
+
validationErrors: undefined,
|
|
10078
|
+
},
|
|
10069
10079
|
content: {
|
|
10070
10080
|
firstNameLabel: "First Name",
|
|
10071
10081
|
lastNameLabel: "Last Name",
|
|
@@ -10074,9 +10084,11 @@ const props$1 = {
|
|
|
10074
10084
|
};
|
|
10075
10085
|
const errorProps$8 = {
|
|
10076
10086
|
states: {
|
|
10077
|
-
|
|
10078
|
-
|
|
10079
|
-
|
|
10087
|
+
registrationFormState: {
|
|
10088
|
+
validationErrors: {
|
|
10089
|
+
firstName: "Cannot be empty",
|
|
10090
|
+
lastName: "Cannot be empty",
|
|
10091
|
+
},
|
|
10080
10092
|
},
|
|
10081
10093
|
content: {
|
|
10082
10094
|
firstNameLabel: "First Name",
|
|
@@ -10108,7 +10120,9 @@ const CheckboxField_stories = {
|
|
|
10108
10120
|
};
|
|
10109
10121
|
const defaultProps$a = {
|
|
10110
10122
|
states: {
|
|
10111
|
-
|
|
10123
|
+
registrationFormState: {
|
|
10124
|
+
validationErrors: {},
|
|
10125
|
+
},
|
|
10112
10126
|
checked: false,
|
|
10113
10127
|
},
|
|
10114
10128
|
content: {
|
|
@@ -10124,6 +10138,7 @@ const defaultProps$a = {
|
|
|
10124
10138
|
};
|
|
10125
10139
|
const defaultRegisterProps = {
|
|
10126
10140
|
states: {
|
|
10141
|
+
registrationFormState: {},
|
|
10127
10142
|
error: "",
|
|
10128
10143
|
loading: false,
|
|
10129
10144
|
confirmPassword: true,
|
|
@@ -10150,14 +10165,18 @@ const CustomLabel = createHookStory(() => (index.h(ShadowViewAddon.CheckboxField
|
|
|
10150
10165
|
} }))));
|
|
10151
10166
|
const Error$3 = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
|
|
10152
10167
|
...defaultProps$a.states,
|
|
10153
|
-
|
|
10154
|
-
|
|
10168
|
+
registrationFormState: {
|
|
10169
|
+
validationErrors: {
|
|
10170
|
+
agree: "Must be checked",
|
|
10171
|
+
},
|
|
10155
10172
|
},
|
|
10156
10173
|
} }))));
|
|
10157
10174
|
const CustomError = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
|
|
10158
10175
|
...defaultProps$a.states,
|
|
10159
|
-
|
|
10160
|
-
|
|
10176
|
+
registrationFormState: {
|
|
10177
|
+
validationErrors: {
|
|
10178
|
+
agree: "Must be checked",
|
|
10179
|
+
},
|
|
10161
10180
|
},
|
|
10162
10181
|
}, content: {
|
|
10163
10182
|
...defaultProps$a.content,
|
|
@@ -10279,7 +10298,7 @@ const DropdownField_stories = {
|
|
|
10279
10298
|
};
|
|
10280
10299
|
const defaultProps$b = {
|
|
10281
10300
|
states: {
|
|
10282
|
-
|
|
10301
|
+
registrationFormState: {},
|
|
10283
10302
|
},
|
|
10284
10303
|
content: {
|
|
10285
10304
|
dropdownName: "options",
|
|
@@ -10299,14 +10318,21 @@ const CustomLabel$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFie
|
|
|
10299
10318
|
} }))));
|
|
10300
10319
|
const Error$4 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$b, { states: {
|
|
10301
10320
|
...defaultProps$b.states,
|
|
10302
|
-
|
|
10303
|
-
|
|
10321
|
+
registrationFormState: {
|
|
10322
|
+
validationErrors: {
|
|
10323
|
+
options: "Must select an option",
|
|
10324
|
+
},
|
|
10304
10325
|
},
|
|
10305
10326
|
} }))));
|
|
10306
|
-
const CustomError$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$b, { content: {
|
|
10327
|
+
const CustomError$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$b, { content: {
|
|
10328
|
+
...defaultProps$b.content,
|
|
10329
|
+
errorMessage: "An option must be selected to continue",
|
|
10330
|
+
}, states: {
|
|
10307
10331
|
...defaultProps$b.states,
|
|
10308
|
-
|
|
10309
|
-
|
|
10332
|
+
registrationFormState: {
|
|
10333
|
+
validationErrors: {
|
|
10334
|
+
options: "Must select an option",
|
|
10335
|
+
},
|
|
10310
10336
|
},
|
|
10311
10337
|
} }))));
|
|
10312
10338
|
|
|
@@ -10388,7 +10414,9 @@ const InputField_stories = {
|
|
|
10388
10414
|
};
|
|
10389
10415
|
const defaultProps$c = {
|
|
10390
10416
|
states: {
|
|
10391
|
-
|
|
10417
|
+
registrationFormState: {
|
|
10418
|
+
validationErrors: {},
|
|
10419
|
+
},
|
|
10392
10420
|
},
|
|
10393
10421
|
content: {
|
|
10394
10422
|
fieldName: "field",
|
|
@@ -10400,6 +10428,7 @@ const defaultProps$c = {
|
|
|
10400
10428
|
};
|
|
10401
10429
|
const defaultRegisterProps$1 = {
|
|
10402
10430
|
states: {
|
|
10431
|
+
registrationFormState: {},
|
|
10403
10432
|
error: "",
|
|
10404
10433
|
loading: false,
|
|
10405
10434
|
confirmPassword: true,
|
|
@@ -10419,8 +10448,10 @@ const Default$d = () => index.h(ShadowViewAddon.InputFieldView, Object.assign({}
|
|
|
10419
10448
|
const CustomLabel$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$c, { content: { ...defaultProps$c.content, fieldLabel: "My Label" } })));
|
|
10420
10449
|
const Error$5 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$c, { states: {
|
|
10421
10450
|
...defaultProps$c.states,
|
|
10422
|
-
|
|
10423
|
-
|
|
10451
|
+
registrationFormState: {
|
|
10452
|
+
validationErrors: {
|
|
10453
|
+
field: "Cannot be empty",
|
|
10454
|
+
},
|
|
10424
10455
|
},
|
|
10425
10456
|
} })));
|
|
10426
10457
|
const CustomError$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$c, { content: {
|
|
@@ -10428,8 +10459,10 @@ const CustomError$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assi
|
|
|
10428
10459
|
errorMessage: "A value must be entered to continue",
|
|
10429
10460
|
}, states: {
|
|
10430
10461
|
...defaultProps$c.states,
|
|
10431
|
-
|
|
10432
|
-
|
|
10462
|
+
registrationFormState: {
|
|
10463
|
+
validationErrors: {
|
|
10464
|
+
field: "Cannot be empty",
|
|
10465
|
+
},
|
|
10433
10466
|
},
|
|
10434
10467
|
} })));
|
|
10435
10468
|
const DateType = () => {
|
package/dist/cjs/{useRegistrationFormState-d0e43ca9.js → useRegistrationFormState-bee054d6.js}
RENAMED
|
@@ -3,13 +3,6 @@
|
|
|
3
3
|
const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
|
|
4
4
|
const index_module = require('./index.module-93c78ac7.js');
|
|
5
5
|
|
|
6
|
-
const FORM_VALIDATION_CONTEXT = "sq:validation-state";
|
|
7
|
-
function useValidationState(formState) {
|
|
8
|
-
const host = index_module.R();
|
|
9
|
-
const [validationState, setValidationState] = stencilHooks_module.y(host, FORM_VALIDATION_CONTEXT, formState);
|
|
10
|
-
return { validationState, setValidationState };
|
|
11
|
-
}
|
|
12
|
-
|
|
13
6
|
const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
|
|
14
7
|
function useRegistrationFormState(formState) {
|
|
15
8
|
const host = index_module.R();
|
|
@@ -17,7 +10,5 @@ function useRegistrationFormState(formState) {
|
|
|
17
10
|
return { registrationFormState, setRegistrationFormState };
|
|
18
11
|
}
|
|
19
12
|
|
|
20
|
-
exports.FORM_VALIDATION_CONTEXT = FORM_VALIDATION_CONTEXT;
|
|
21
13
|
exports.REGISTRATION_FORM_STATE_CONTEXT = REGISTRATION_FORM_STATE_CONTEXT;
|
|
22
14
|
exports.useRegistrationFormState = useRegistrationFormState;
|
|
23
|
-
exports.useValidationState = useValidationState;
|
|
@@ -17,7 +17,13 @@ export class BrandComponent {
|
|
|
17
17
|
render() {
|
|
18
18
|
var _a, _b;
|
|
19
19
|
const brandColor = (_a = this.brandColor) !== null && _a !== void 0 ? _a : "#FFF";
|
|
20
|
-
|
|
20
|
+
let css;
|
|
21
|
+
try {
|
|
22
|
+
css = autoColorScaleCss(brandColor);
|
|
23
|
+
}
|
|
24
|
+
catch {
|
|
25
|
+
css = autoColorScaleCss("#FFF");
|
|
26
|
+
}
|
|
21
27
|
const sanitizedFont = ((_b = this.brandFont) !== null && _b !== void 0 ? _b : "Nunito Sans").trim() || undefined;
|
|
22
28
|
useEffect(() => {
|
|
23
29
|
if (!sanitizedFont) {
|
|
@@ -11,7 +11,9 @@ export default {
|
|
|
11
11
|
};
|
|
12
12
|
const defaultProps = {
|
|
13
13
|
states: {
|
|
14
|
-
|
|
14
|
+
registrationFormState: {
|
|
15
|
+
validationErrors: {},
|
|
16
|
+
},
|
|
15
17
|
checked: false,
|
|
16
18
|
},
|
|
17
19
|
content: {
|
|
@@ -27,6 +29,7 @@ const defaultProps = {
|
|
|
27
29
|
};
|
|
28
30
|
const defaultRegisterProps = {
|
|
29
31
|
states: {
|
|
32
|
+
registrationFormState: {},
|
|
30
33
|
error: "",
|
|
31
34
|
loading: false,
|
|
32
35
|
confirmPassword: true,
|
|
@@ -53,14 +56,18 @@ export const CustomLabel = createHookStory(() => (h(CheckboxFieldView, Object.as
|
|
|
53
56
|
} }))));
|
|
54
57
|
export const Error = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { states: {
|
|
55
58
|
...defaultProps.states,
|
|
56
|
-
|
|
57
|
-
|
|
59
|
+
registrationFormState: {
|
|
60
|
+
validationErrors: {
|
|
61
|
+
agree: "Must be checked",
|
|
62
|
+
},
|
|
58
63
|
},
|
|
59
64
|
} }))));
|
|
60
65
|
export const CustomError = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { states: {
|
|
61
66
|
...defaultProps.states,
|
|
62
|
-
|
|
63
|
-
|
|
67
|
+
registrationFormState: {
|
|
68
|
+
validationErrors: {
|
|
69
|
+
agree: "Must be checked",
|
|
70
|
+
},
|
|
64
71
|
},
|
|
65
72
|
}, content: {
|
|
66
73
|
...defaultProps.content,
|
|
@@ -44,8 +44,9 @@ jss.setup(preset());
|
|
|
44
44
|
const sheet = jss.createStyleSheet(style);
|
|
45
45
|
const styleString = sheet.toString();
|
|
46
46
|
export function CheckboxFieldView(props) {
|
|
47
|
+
var _a, _b, _c;
|
|
47
48
|
const { states, content, callbacks } = props;
|
|
48
|
-
const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
|
|
49
|
+
const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
|
|
49
50
|
return (h("div", { class: sheet.classes.FieldContainer },
|
|
50
51
|
h("style", { type: "text/css" },
|
|
51
52
|
vanillaStyle,
|
|
@@ -53,7 +54,7 @@ export function CheckboxFieldView(props) {
|
|
|
53
54
|
h("sl-checkbox", Object.assign({ exportparts: "label: input-label", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
|
|
54
55
|
e.target.value = e.target.checked;
|
|
55
56
|
callbacks.setChecked(e.target.value);
|
|
56
|
-
} }, (!content.checkboxOptional ? { required: true } : []), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
|
|
57
|
+
} }, (!content.checkboxOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
|
|
57
58
|
? {
|
|
58
59
|
class: sheet.classes.ErrorStyle,
|
|
59
60
|
}
|
|
@@ -56,7 +56,7 @@ export class CheckboxField {
|
|
|
56
56
|
};
|
|
57
57
|
const { states, callbacks } = isDemo()
|
|
58
58
|
? useCheckboxFieldDemo(this)
|
|
59
|
-
: useCheckboxField();
|
|
59
|
+
: useCheckboxField(this);
|
|
60
60
|
return (h(CheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
|
|
61
61
|
}
|
|
62
62
|
static get is() { return "sqm-checkbox-field"; }
|
|
@@ -79,7 +79,7 @@ export class CheckboxField {
|
|
|
79
79
|
"text": undefined,
|
|
80
80
|
"name": "required"
|
|
81
81
|
}],
|
|
82
|
-
"text": ""
|
|
82
|
+
"text": "This name is used as the key for this form field on submission. The name must be unique within this specific form."
|
|
83
83
|
},
|
|
84
84
|
"attribute": "checkbox-name",
|
|
85
85
|
"reflect": false
|
|
@@ -197,7 +197,7 @@ export class CheckboxField {
|
|
|
197
197
|
"mutable": false,
|
|
198
198
|
"complexType": {
|
|
199
199
|
"original": "DemoData<CheckboxFieldViewProps>",
|
|
200
|
-
"resolved": "{ states?: {
|
|
200
|
+
"resolved": "{ states?: { registrationFormState?: RegistrationFormState; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage: string; }; }",
|
|
201
201
|
"references": {
|
|
202
202
|
"DemoData": {
|
|
203
203
|
"location": "import",
|
|
@@ -230,7 +230,7 @@ export class CheckboxField {
|
|
|
230
230
|
function useCheckboxFieldDemo(props) {
|
|
231
231
|
return deepmerge({
|
|
232
232
|
states: {
|
|
233
|
-
|
|
233
|
+
registrationFormState: {},
|
|
234
234
|
checked: false,
|
|
235
235
|
},
|
|
236
236
|
callbacks: {
|
|
@@ -1,12 +1,19 @@
|
|
|
1
1
|
import { useDomContext } from "@saasquatch/stencil-hooks";
|
|
2
|
-
import { useState } from "@saasquatch/universal-hooks";
|
|
3
|
-
import {
|
|
4
|
-
export function useCheckboxField() {
|
|
5
|
-
|
|
2
|
+
import { useEffect, useState } from "@saasquatch/universal-hooks";
|
|
3
|
+
import { REGISTRATION_FORM_STATE_CONTEXT, } from "../sqm-portal-registration-form/useRegistrationFormState";
|
|
4
|
+
export function useCheckboxField(props) {
|
|
5
|
+
var _a;
|
|
6
|
+
const registrationFormState = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
|
|
6
7
|
const [checked, setChecked] = useState(false);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
var _a, _b;
|
|
10
|
+
if ((_a = registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]) {
|
|
11
|
+
setChecked(!!((_b = registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData) === null || _b === void 0 ? void 0 : _b[props.checkboxName]));
|
|
12
|
+
}
|
|
13
|
+
}, [(_a = registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]]);
|
|
7
14
|
return {
|
|
8
15
|
states: {
|
|
9
|
-
|
|
16
|
+
registrationFormState,
|
|
10
17
|
checked,
|
|
11
18
|
},
|
|
12
19
|
callbacks: {
|
|
@@ -12,7 +12,7 @@ import { getProps } from "../../utils/utils";
|
|
|
12
12
|
export class DividedLayout {
|
|
13
13
|
constructor() {
|
|
14
14
|
/**
|
|
15
|
-
* Uses Shorthand CSS border syntax
|
|
15
|
+
* Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.
|
|
16
16
|
* @uiName Border Style
|
|
17
17
|
*/
|
|
18
18
|
this.dividerStyle = "1px solid #EAEAEA";
|
|
@@ -70,7 +70,7 @@ export class DividedLayout {
|
|
|
70
70
|
"text": "Border Style",
|
|
71
71
|
"name": "uiName"
|
|
72
72
|
}],
|
|
73
|
-
"text": "Uses Shorthand CSS border syntax"
|
|
73
|
+
"text": "Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color."
|
|
74
74
|
},
|
|
75
75
|
"attribute": "divider-style",
|
|
76
76
|
"reflect": false,
|