@saasquatch/mint-components 1.14.6-2 → 1.14.6-20
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-c0a5fdf8.js → ShadowViewAddon-344e1c0d.js} +75 -47
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mint-components.cjs.js +1 -1
- package/dist/cjs/sqm-big-stat_42.cjs.entry.js +117 -120
- package/dist/cjs/sqm-lead-dropdown-field-view-0211d640.js +67 -0
- package/dist/cjs/sqm-lead-dropdown-field.cjs.entry.js +81 -0
- package/dist/cjs/sqm-lead-input-field-view-5a0b1aed.js +51 -0
- package/dist/cjs/sqm-lead-input-field.cjs.entry.js +84 -0
- package/dist/cjs/sqm-stencilbook.cjs.entry.js +167 -49
- package/dist/cjs/useLeadFormState-c83d2034.js +72 -0
- package/dist/collection/collection-manifest.json +3 -1
- package/dist/collection/components/sqm-lead-form/LeadForm.stories.js +35 -46
- package/dist/collection/components/sqm-lead-form/LeadFormDropdownField.stories.js +59 -0
- package/dist/collection/components/sqm-lead-form/LeadInputField.stories.js +48 -0
- package/dist/collection/components/sqm-lead-form/sqm-lead-dropdown-field-view.js +63 -0
- package/dist/collection/components/sqm-lead-form/sqm-lead-dropdown-field.js +199 -0
- package/dist/collection/components/sqm-lead-form/sqm-lead-form-view.js +77 -48
- package/dist/collection/components/sqm-lead-form/sqm-lead-form.js +150 -36
- package/dist/collection/components/sqm-lead-form/sqm-lead-input-field-view.js +47 -0
- package/dist/collection/components/sqm-lead-form/sqm-lead-input-field.js +228 -0
- package/dist/collection/components/sqm-lead-form/useLeadDropdownField.js +10 -0
- package/dist/collection/components/sqm-lead-form/useLeadForm.js +36 -7
- package/dist/collection/components/sqm-lead-form/useLeadInputField.js +10 -0
- package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js +4 -0
- package/dist/esm/{ShadowViewAddon-aa7177fe.js → ShadowViewAddon-a14f9e24.js} +76 -48
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mint-components.js +1 -1
- package/dist/esm/sqm-big-stat_42.entry.js +114 -117
- package/dist/esm/sqm-lead-dropdown-field-view-62e74a36.js +65 -0
- package/dist/esm/sqm-lead-dropdown-field.entry.js +77 -0
- package/dist/esm/sqm-lead-input-field-view-9b23f22c.js +49 -0
- package/dist/esm/sqm-lead-input-field.entry.js +80 -0
- package/dist/esm/sqm-stencilbook.entry.js +167 -49
- package/dist/esm/useLeadFormState-9016d812.js +68 -0
- package/dist/esm-es5/ShadowViewAddon-a14f9e24.js +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mint-components.js +1 -1
- package/dist/esm-es5/sqm-big-stat_42.entry.js +1 -1
- package/dist/esm-es5/sqm-lead-dropdown-field-view-62e74a36.js +1 -0
- package/dist/esm-es5/sqm-lead-dropdown-field.entry.js +1 -0
- package/dist/esm-es5/sqm-lead-input-field-view-9b23f22c.js +1 -0
- package/dist/esm-es5/sqm-lead-input-field.entry.js +1 -0
- package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
- package/dist/esm-es5/useLeadFormState-9016d812.js +1 -0
- package/dist/mint-components/mint-components.esm.js +1 -1
- package/dist/mint-components/p-00590b7a.system.js +1 -0
- package/dist/mint-components/p-03681bf2.entry.js +273 -0
- package/dist/mint-components/p-05516d33.system.js +1 -0
- package/dist/mint-components/p-1d704c40.system.js +1 -0
- package/dist/mint-components/p-2192104c.entry.js +1 -0
- package/dist/mint-components/p-34c5b141.system.entry.js +1 -0
- package/dist/mint-components/p-37996351.system.js +1 -1
- package/dist/mint-components/p-3e327cc8.system.entry.js +1 -0
- package/dist/mint-components/{p-373a92a2.js → p-5afa5a28.js} +24 -24
- package/dist/mint-components/p-84a9e392.system.entry.js +1 -0
- package/dist/mint-components/p-8698266c.system.js +1 -0
- package/dist/mint-components/p-9398453d.system.entry.js +1 -0
- package/dist/mint-components/p-b54f8e03.entry.js +1 -0
- package/dist/mint-components/p-cd10001b.js +1 -0
- package/dist/mint-components/{p-8dc110b0.entry.js → p-ed69285c.entry.js} +2 -2
- package/dist/mint-components/p-f6717dd7.js +1 -0
- package/dist/mint-components/p-f98a4354.js +1 -0
- package/dist/types/components/sqm-lead-form/LeadForm.stories.d.ts +1 -0
- package/dist/types/components/sqm-lead-form/LeadFormDropdownField.stories.d.ts +9 -0
- package/dist/types/components/sqm-lead-form/LeadInputField.stories.d.ts +8 -0
- package/dist/types/components/sqm-lead-form/sqm-lead-dropdown-field-view.d.ts +15 -0
- package/dist/types/components/sqm-lead-form/sqm-lead-dropdown-field.d.ts +42 -0
- package/dist/types/components/sqm-lead-form/sqm-lead-form-view.d.ts +8 -0
- package/dist/types/components/sqm-lead-form/sqm-lead-form.d.ts +24 -7
- package/dist/types/components/sqm-lead-form/sqm-lead-input-field-view.d.ts +14 -0
- package/dist/types/components/sqm-lead-form/sqm-lead-input-field.d.ts +49 -0
- package/dist/types/components/sqm-lead-form/useLeadDropdownField.d.ts +6 -0
- package/dist/types/components/sqm-lead-form/useLeadForm.d.ts +6 -1
- package/dist/types/components/sqm-lead-form/useLeadInputField.d.ts +6 -0
- package/dist/types/components/sqm-referral-iframe/useReferralIframe.d.ts +1 -1
- package/dist/types/components.d.ts +194 -12
- package/docs/docs.docx +0 -0
- package/docs/raisins.json +1 -1
- package/grapesjs/grapesjs.js +1 -1
- package/package.json +1 -1
- package/dist/esm-es5/ShadowViewAddon-aa7177fe.js +0 -1
- package/dist/mint-components/p-02a6e0df.system.entry.js +0 -1
- package/dist/mint-components/p-0c6ab3ec.system.entry.js +0 -1
- package/dist/mint-components/p-6349fb7c.entry.js +0 -265
- package/dist/mint-components/p-72e5e84f.system.js +0 -1
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-a29c60ef.js');
|
|
6
|
+
const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
|
|
7
|
+
require('./global-e31dc4f5.js');
|
|
8
|
+
const index_module = require('./index.module-ee84433d.js');
|
|
9
|
+
const cjs = require('./cjs-1066ec21.js');
|
|
10
|
+
const utils = require('./utils-6847bc06.js');
|
|
11
|
+
require('./JSS-8503a151.js');
|
|
12
|
+
const useLeadFormState = require('./useLeadFormState-c83d2034.js');
|
|
13
|
+
const sqmLeadDropdownFieldView = require('./sqm-lead-dropdown-field-view-0211d640.js');
|
|
14
|
+
|
|
15
|
+
function useLeadDropdownField() {
|
|
16
|
+
const leadFormState = stencilHooks_module.d(useLeadFormState.LEAD_FORM_STATE_CONTEXT);
|
|
17
|
+
return {
|
|
18
|
+
states: {
|
|
19
|
+
leadFormState,
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const LeadDropdownField = class {
|
|
25
|
+
constructor(hostRef) {
|
|
26
|
+
index.registerInstance(this, hostRef);
|
|
27
|
+
this.ignored = true;
|
|
28
|
+
/**
|
|
29
|
+
* @uiName Dropdown label
|
|
30
|
+
*/
|
|
31
|
+
this.dropdownLabel = "Select an option";
|
|
32
|
+
/**
|
|
33
|
+
* The message to be displayed when a required field is not filled.
|
|
34
|
+
*
|
|
35
|
+
* @uiName Required field message
|
|
36
|
+
* @uiWidget textArea
|
|
37
|
+
*/
|
|
38
|
+
this.requiredFieldErrorMessage = "Please select a {dropdownLabel}";
|
|
39
|
+
/**
|
|
40
|
+
* @uiName Optional
|
|
41
|
+
* @default
|
|
42
|
+
*/
|
|
43
|
+
this.dropdownOptional = false;
|
|
44
|
+
stencilHooks_module.h$1(this);
|
|
45
|
+
}
|
|
46
|
+
disconnectedCallback() { }
|
|
47
|
+
render() {
|
|
48
|
+
const missingProps = utils.getMissingProps([
|
|
49
|
+
{
|
|
50
|
+
attribute: "dropdown-name",
|
|
51
|
+
value: this.dropdownName,
|
|
52
|
+
},
|
|
53
|
+
]);
|
|
54
|
+
if (!index_module.isDemo() && missingProps) {
|
|
55
|
+
return (index.h(useLeadFormState.RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this drop down field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }, index.h("slot", null)));
|
|
56
|
+
}
|
|
57
|
+
const content = {
|
|
58
|
+
...utils.getProps(this),
|
|
59
|
+
selectOptions: index.h("slot", null),
|
|
60
|
+
};
|
|
61
|
+
const { states } = index_module.isDemo()
|
|
62
|
+
? useLeadDropdownFieldDemo(this)
|
|
63
|
+
: useLeadDropdownField();
|
|
64
|
+
return (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, { states: states, content: content }));
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
function useLeadDropdownFieldDemo(props) {
|
|
68
|
+
return cjs.cjs({
|
|
69
|
+
states: {
|
|
70
|
+
leadFormState: {},
|
|
71
|
+
},
|
|
72
|
+
content: {
|
|
73
|
+
dropdownName: props.dropdownName,
|
|
74
|
+
dropdownLabel: props.dropdownLabel,
|
|
75
|
+
requiredFieldErrorMessage: props.requiredFieldErrorMessage,
|
|
76
|
+
dropdownOptional: props.dropdownOptional,
|
|
77
|
+
},
|
|
78
|
+
}, props.demoData || {}, { arrayMerge: (_, a) => a });
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
exports.sqm_lead_dropdown_field = LeadDropdownField;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const index = require('./index-a29c60ef.js');
|
|
4
|
+
const global = require('./global-e31dc4f5.js');
|
|
5
|
+
const JSS = require('./JSS-8503a151.js');
|
|
6
|
+
const mixins = require('./mixins-f7e0377a.js');
|
|
7
|
+
|
|
8
|
+
const style = {
|
|
9
|
+
ErrorStyle: mixins.ErrorStyles,
|
|
10
|
+
FieldContainer: {
|
|
11
|
+
"margin-bottom": "var(--sl-spacing-large)",
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
const vanillaStyle = `
|
|
15
|
+
:host {
|
|
16
|
+
margin: 0 auto;
|
|
17
|
+
width: 100%;
|
|
18
|
+
display: block;
|
|
19
|
+
}
|
|
20
|
+
`;
|
|
21
|
+
JSS.jss.setup(JSS.create());
|
|
22
|
+
const sheet = JSS.jss.createStyleSheet(style);
|
|
23
|
+
const styleString = sheet.toString();
|
|
24
|
+
function LeadInputFieldView(props) {
|
|
25
|
+
var _a, _b, _c, _d, _e, _f;
|
|
26
|
+
const { states, content } = props;
|
|
27
|
+
const getRequiredFieldErrorMessage = ({ fieldLabel, }) => global.intl.formatMessage({
|
|
28
|
+
id: `requiredFieldErrorMessage-${fieldLabel}`,
|
|
29
|
+
defaultMessage: content.requiredFieldErrorMessage,
|
|
30
|
+
}, {
|
|
31
|
+
fieldLabel,
|
|
32
|
+
});
|
|
33
|
+
return (index.h("div", { part: "sqm-base" },
|
|
34
|
+
index.h("style", { type: "text/css" },
|
|
35
|
+
vanillaStyle,
|
|
36
|
+
styleString),
|
|
37
|
+
index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.disabled), validationError: ({ value }) => {
|
|
38
|
+
if (!value) {
|
|
39
|
+
return getRequiredFieldErrorMessage({
|
|
40
|
+
fieldLabel: content.fieldLabel,
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
} }, (((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d[content.fieldName]) ? {
|
|
44
|
+
class: sheet.classes.ErrorStyle,
|
|
45
|
+
helpText: ((_f = (_e = states.leadFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f[content.fieldName]) ||
|
|
46
|
+
content.requiredFieldErrorMessage,
|
|
47
|
+
}
|
|
48
|
+
: [])))));
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
exports.LeadInputFieldView = LeadInputFieldView;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-a29c60ef.js');
|
|
6
|
+
const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
|
|
7
|
+
require('./global-e31dc4f5.js');
|
|
8
|
+
const index_module = require('./index.module-ee84433d.js');
|
|
9
|
+
const cjs = require('./cjs-1066ec21.js');
|
|
10
|
+
const utils = require('./utils-6847bc06.js');
|
|
11
|
+
require('./JSS-8503a151.js');
|
|
12
|
+
require('./mixins-f7e0377a.js');
|
|
13
|
+
const useLeadFormState = require('./useLeadFormState-c83d2034.js');
|
|
14
|
+
const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-5a0b1aed.js');
|
|
15
|
+
|
|
16
|
+
function useLeadInputField() {
|
|
17
|
+
const leadFormState = stencilHooks_module.d(useLeadFormState.LEAD_FORM_STATE_CONTEXT);
|
|
18
|
+
return {
|
|
19
|
+
states: {
|
|
20
|
+
leadFormState,
|
|
21
|
+
},
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const LeadInputField = class {
|
|
26
|
+
constructor(hostRef) {
|
|
27
|
+
index.registerInstance(this, hostRef);
|
|
28
|
+
this.ignored = true;
|
|
29
|
+
/**
|
|
30
|
+
* @uiName Input type
|
|
31
|
+
* @uiType string
|
|
32
|
+
* @uiEnum ["text", "date", "tel"]
|
|
33
|
+
* @uiEnumNames ["Text", "Date", "Phone Number"]
|
|
34
|
+
*/
|
|
35
|
+
this.fieldType = "text";
|
|
36
|
+
/**
|
|
37
|
+
* The message to be displayed when a required field is not filled.
|
|
38
|
+
*
|
|
39
|
+
* @uiName Required field message
|
|
40
|
+
* @uiWidget textArea
|
|
41
|
+
*/
|
|
42
|
+
this.requiredFieldErrorMessage = "Please enter a {fieldLabel}";
|
|
43
|
+
/**
|
|
44
|
+
* @uiName Optional
|
|
45
|
+
* @default
|
|
46
|
+
*/
|
|
47
|
+
this.fieldOptional = false;
|
|
48
|
+
stencilHooks_module.h$1(this);
|
|
49
|
+
}
|
|
50
|
+
disconnectedCallback() { }
|
|
51
|
+
render() {
|
|
52
|
+
const content = {
|
|
53
|
+
...utils.getProps(this),
|
|
54
|
+
};
|
|
55
|
+
const missingProps = utils.getMissingProps([
|
|
56
|
+
{
|
|
57
|
+
attribute: "field-name",
|
|
58
|
+
value: this.fieldName,
|
|
59
|
+
},
|
|
60
|
+
]);
|
|
61
|
+
if (!index_module.isDemo() && missingProps) {
|
|
62
|
+
return (index.h(useLeadFormState.RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this input field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
|
|
63
|
+
}
|
|
64
|
+
const { states } = index_module.isDemo()
|
|
65
|
+
? useLeadInputFieldDemo(this)
|
|
66
|
+
: useLeadInputField();
|
|
67
|
+
return (index.h(sqmLeadInputFieldView.LeadInputFieldView, { states: states, content: content }));
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
function useLeadInputFieldDemo(props) {
|
|
71
|
+
return cjs.cjs({
|
|
72
|
+
states: {
|
|
73
|
+
leadForState: {},
|
|
74
|
+
},
|
|
75
|
+
content: {
|
|
76
|
+
fieldName: props.fieldName,
|
|
77
|
+
fieldLabel: props.fieldLabel,
|
|
78
|
+
fieldType: props.fieldType,
|
|
79
|
+
requiredFieldErrorMessage: props.requiredFieldErrorMessage,
|
|
80
|
+
},
|
|
81
|
+
}, props.demoData || {}, { arrayMerge: (_, a) => a });
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
exports.sqm_lead_input_field = LeadInputField;
|
|
@@ -20,6 +20,7 @@ const sqmAssetCardView = require('./sqm-asset-card-view-21ddf04f.js');
|
|
|
20
20
|
const sqmCloseButtonView = require('./sqm-close-button-view-ea3fa23b.js');
|
|
21
21
|
require('./index-8c6255f5.js');
|
|
22
22
|
const emailRegistrationView = require('./email-registration-view-55b378dc.js');
|
|
23
|
+
const sqmLeadDropdownFieldView = require('./sqm-lead-dropdown-field-view-0211d640.js');
|
|
23
24
|
const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-d39a55d8.js');
|
|
24
25
|
const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-11d57c12.js');
|
|
25
26
|
const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-17111896.js');
|
|
@@ -35,9 +36,10 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-fe6
|
|
|
35
36
|
const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.js');
|
|
36
37
|
require('./ErrorView-b2fcf954.js');
|
|
37
38
|
const sqmQrCodeView = require('./sqm-qr-code-view-15dfc0b6.js');
|
|
38
|
-
const ShadowViewAddon = require('./ShadowViewAddon-
|
|
39
|
+
const ShadowViewAddon = require('./ShadowViewAddon-344e1c0d.js');
|
|
39
40
|
const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
|
|
40
41
|
const sqmInvoiceTableView = require('./sqm-invoice-table-view-0f7fa309.js');
|
|
42
|
+
const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-5a0b1aed.js');
|
|
41
43
|
|
|
42
44
|
/**
|
|
43
45
|
* lodash (Custom Build) <https://lodash.com/>
|
|
@@ -15836,6 +15838,7 @@ const LeadForm_stories = {
|
|
|
15836
15838
|
};
|
|
15837
15839
|
const defaultProps$t = {
|
|
15838
15840
|
states: {
|
|
15841
|
+
success: false,
|
|
15839
15842
|
leadFormState: {},
|
|
15840
15843
|
error: "",
|
|
15841
15844
|
loading: false,
|
|
@@ -15844,80 +15847,67 @@ const defaultProps$t = {
|
|
|
15844
15847
|
callbacks: {
|
|
15845
15848
|
submit: () => console.log("Submit!"),
|
|
15846
15849
|
inputFunction: () => { },
|
|
15850
|
+
resetForm: () => { },
|
|
15847
15851
|
},
|
|
15848
15852
|
refs: {
|
|
15849
15853
|
formRef: {},
|
|
15850
15854
|
},
|
|
15851
15855
|
content: {
|
|
15856
|
+
submitLabel: "Submit",
|
|
15852
15857
|
pageLabel: "Submit your information",
|
|
15858
|
+
resubmitFormLabel: "Refer Another Friend",
|
|
15853
15859
|
requiredFieldErrorMessage: "Cannot be empty",
|
|
15854
15860
|
invalidEmailErrorMessage: "Must be a valid email address",
|
|
15861
|
+
submitSuccessHeader: "Referral submitted",
|
|
15862
|
+
submitSuccessDescription: "Our team will contact your friend to see if they’re a good fit. In the meantime, you can track this referral on Activity page.",
|
|
15863
|
+
submitErrorHeader: "An error occurred while submitting",
|
|
15864
|
+
submitErrorDescription: "Please try again later. If the problem continues, contact Support",
|
|
15855
15865
|
},
|
|
15856
15866
|
};
|
|
15857
|
-
const
|
|
15867
|
+
const successProps$5 = {
|
|
15868
|
+
...defaultProps$t,
|
|
15858
15869
|
states: {
|
|
15859
|
-
|
|
15860
|
-
|
|
15861
|
-
|
|
15862
|
-
referralCode: "ABC123",
|
|
15863
|
-
},
|
|
15864
|
-
callbacks: {
|
|
15865
|
-
submit: () => console.log("Submit!"),
|
|
15866
|
-
inputFunction: () => { },
|
|
15867
|
-
},
|
|
15868
|
-
refs: {
|
|
15869
|
-
formRef: {},
|
|
15870
|
+
...defaultProps$t.states,
|
|
15871
|
+
success: true,
|
|
15872
|
+
error: null,
|
|
15870
15873
|
},
|
|
15871
15874
|
content: {
|
|
15872
|
-
|
|
15873
|
-
|
|
15874
|
-
|
|
15875
|
+
...defaultProps$t.content,
|
|
15876
|
+
pageLabel: "Refer your friend",
|
|
15877
|
+
},
|
|
15878
|
+
};
|
|
15879
|
+
const errorProps$c = {
|
|
15880
|
+
...defaultProps$t,
|
|
15881
|
+
states: {
|
|
15882
|
+
...defaultProps$t.states,
|
|
15883
|
+
error: "Something went wrong. Please try again.",
|
|
15884
|
+
leadFormState: {
|
|
15885
|
+
validationErrors: {
|
|
15886
|
+
firstName: "Please enter a first name",
|
|
15887
|
+
lastName: "Please enter a last name",
|
|
15888
|
+
email: "Please enter a valid email",
|
|
15889
|
+
},
|
|
15890
|
+
},
|
|
15875
15891
|
},
|
|
15876
15892
|
};
|
|
15877
15893
|
const loadingProps$9 = {
|
|
15894
|
+
...defaultProps$t,
|
|
15878
15895
|
states: {
|
|
15879
|
-
|
|
15880
|
-
error: "",
|
|
15896
|
+
...defaultProps$t.states,
|
|
15881
15897
|
loading: true,
|
|
15882
|
-
referralCode: "ABC123",
|
|
15883
|
-
},
|
|
15884
|
-
callbacks: {
|
|
15885
|
-
submit: () => console.log("Submit!"),
|
|
15886
|
-
inputFunction: () => { },
|
|
15887
|
-
},
|
|
15888
|
-
refs: {
|
|
15889
|
-
formRef: {},
|
|
15890
|
-
},
|
|
15891
|
-
content: {
|
|
15892
|
-
pageLabel: "Submit your information",
|
|
15893
|
-
requiredFieldErrorMessage: "Cannot be empty",
|
|
15894
|
-
invalidEmailErrorMessage: "Must be a valid email address",
|
|
15895
15898
|
},
|
|
15896
15899
|
};
|
|
15897
15900
|
const slottedProps$2 = {
|
|
15898
|
-
|
|
15899
|
-
leadFormState: {},
|
|
15900
|
-
error: "",
|
|
15901
|
-
loading: false,
|
|
15902
|
-
referralCode: "ABC123",
|
|
15903
|
-
},
|
|
15904
|
-
callbacks: {
|
|
15905
|
-
submit: () => console.log("Submit!"),
|
|
15906
|
-
inputFunction: () => { },
|
|
15907
|
-
},
|
|
15908
|
-
refs: {
|
|
15909
|
-
formRef: {},
|
|
15910
|
-
},
|
|
15901
|
+
...defaultProps$t,
|
|
15911
15902
|
content: {
|
|
15912
|
-
|
|
15913
|
-
requiredFieldErrorMessage: "Cannot be empty",
|
|
15914
|
-
invalidEmailErrorMessage: "Must be a valid email address",
|
|
15903
|
+
...defaultProps$t.content,
|
|
15915
15904
|
formData: (index.h("div", null,
|
|
15916
15905
|
index.h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
|
|
15917
15906
|
index.h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
|
|
15918
15907
|
},
|
|
15919
15908
|
};
|
|
15920
15909
|
const Default$r = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, defaultProps$t));
|
|
15910
|
+
const LeadSubmitSuccess = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, successProps$5));
|
|
15921
15911
|
const LeadSubmitWithError = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, errorProps$c));
|
|
15922
15912
|
const LeadSubmitLoading = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, loadingProps$9));
|
|
15923
15913
|
const FieldsHidden$2 = () => {
|
|
@@ -15925,6 +15915,7 @@ const FieldsHidden$2 = () => {
|
|
|
15925
15915
|
states: {
|
|
15926
15916
|
leadFormState: {},
|
|
15927
15917
|
error: "",
|
|
15918
|
+
success: false,
|
|
15928
15919
|
loading: true,
|
|
15929
15920
|
referralCode: "ABC123",
|
|
15930
15921
|
},
|
|
@@ -15936,12 +15927,137 @@ const LeadForm = /*#__PURE__*/Object.freeze({
|
|
|
15936
15927
|
__proto__: null,
|
|
15937
15928
|
'default': LeadForm_stories,
|
|
15938
15929
|
Default: Default$r,
|
|
15930
|
+
LeadSubmitSuccess: LeadSubmitSuccess,
|
|
15939
15931
|
LeadSubmitWithError: LeadSubmitWithError,
|
|
15940
15932
|
LeadSubmitLoading: LeadSubmitLoading,
|
|
15941
15933
|
FieldsHidden: FieldsHidden$2,
|
|
15942
15934
|
SlottedInputs: SlottedInputs$2
|
|
15943
15935
|
});
|
|
15944
15936
|
|
|
15937
|
+
const LeadInputField_stories = {
|
|
15938
|
+
title: "Components/Lead Form Input Field",
|
|
15939
|
+
};
|
|
15940
|
+
const defaultProps$u = {
|
|
15941
|
+
states: {
|
|
15942
|
+
leadFormState: {
|
|
15943
|
+
validationErrors: {},
|
|
15944
|
+
loading: false,
|
|
15945
|
+
disabled: false,
|
|
15946
|
+
initialData: {},
|
|
15947
|
+
},
|
|
15948
|
+
},
|
|
15949
|
+
content: {
|
|
15950
|
+
fieldName: "firstName",
|
|
15951
|
+
fieldLabel: "First Name",
|
|
15952
|
+
fieldType: "text",
|
|
15953
|
+
requiredFieldErrorMessage: "Please {fieldAction} a {fieldLabel}",
|
|
15954
|
+
fieldOptional: false,
|
|
15955
|
+
},
|
|
15956
|
+
};
|
|
15957
|
+
const Default$s = () => index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$u));
|
|
15958
|
+
const WithError = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$u, { states: {
|
|
15959
|
+
...defaultProps$u.states,
|
|
15960
|
+
leadFormState: {
|
|
15961
|
+
...defaultProps$u.states.leadFormState,
|
|
15962
|
+
validationErrors: {
|
|
15963
|
+
firstName: "Please enter a first name",
|
|
15964
|
+
},
|
|
15965
|
+
},
|
|
15966
|
+
} })));
|
|
15967
|
+
const Disabled$2 = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$u, { states: {
|
|
15968
|
+
...defaultProps$u.states,
|
|
15969
|
+
leadFormState: {
|
|
15970
|
+
...defaultProps$u.states.leadFormState,
|
|
15971
|
+
disabled: true,
|
|
15972
|
+
},
|
|
15973
|
+
} })));
|
|
15974
|
+
const WithInitialValue = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$u, { states: {
|
|
15975
|
+
...defaultProps$u.states,
|
|
15976
|
+
leadFormState: {
|
|
15977
|
+
...defaultProps$u.states.leadFormState,
|
|
15978
|
+
initialData: {
|
|
15979
|
+
firstName: "Jane",
|
|
15980
|
+
},
|
|
15981
|
+
},
|
|
15982
|
+
} })));
|
|
15983
|
+
|
|
15984
|
+
const LeadInputField = /*#__PURE__*/Object.freeze({
|
|
15985
|
+
__proto__: null,
|
|
15986
|
+
'default': LeadInputField_stories,
|
|
15987
|
+
Default: Default$s,
|
|
15988
|
+
WithError: WithError,
|
|
15989
|
+
Disabled: Disabled$2,
|
|
15990
|
+
WithInitialValue: WithInitialValue
|
|
15991
|
+
});
|
|
15992
|
+
|
|
15993
|
+
const LeadFormDropdownField_stories = {
|
|
15994
|
+
title: "Components/Lead Form Dropdown Field",
|
|
15995
|
+
};
|
|
15996
|
+
const defaultProps$v = {
|
|
15997
|
+
states: {
|
|
15998
|
+
leadFormState: {
|
|
15999
|
+
validationErrors: {},
|
|
16000
|
+
loading: false,
|
|
16001
|
+
disabled: false,
|
|
16002
|
+
initialData: {},
|
|
16003
|
+
},
|
|
16004
|
+
},
|
|
16005
|
+
content: {
|
|
16006
|
+
dropdownName: "country",
|
|
16007
|
+
dropdownLabel: "Country",
|
|
16008
|
+
requiredFieldErrorMessage: "Please select a country",
|
|
16009
|
+
dropdownOptional: false,
|
|
16010
|
+
selectOptions: [
|
|
16011
|
+
index.h("sl-menu-item", { value: "red" }, "Canada"),
|
|
16012
|
+
index.h("sl-menu-item", { value: "blue" }, "United States"),
|
|
16013
|
+
index.h("sl-menu-item", { value: "green" }, "Mexico"),
|
|
16014
|
+
],
|
|
16015
|
+
},
|
|
16016
|
+
};
|
|
16017
|
+
const Default$t = () => index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$v));
|
|
16018
|
+
const WithError$1 = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
|
|
16019
|
+
...defaultProps$v.states,
|
|
16020
|
+
leadFormState: {
|
|
16021
|
+
...defaultProps$v.states.leadFormState,
|
|
16022
|
+
validationErrors: {
|
|
16023
|
+
country: "Please select a country",
|
|
16024
|
+
},
|
|
16025
|
+
},
|
|
16026
|
+
} })));
|
|
16027
|
+
const Disabled$3 = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
|
|
16028
|
+
...defaultProps$v.states,
|
|
16029
|
+
leadFormState: {
|
|
16030
|
+
...defaultProps$v.states.leadFormState,
|
|
16031
|
+
disabled: true,
|
|
16032
|
+
},
|
|
16033
|
+
} })));
|
|
16034
|
+
const Loading$d = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
|
|
16035
|
+
...defaultProps$v.states,
|
|
16036
|
+
leadFormState: {
|
|
16037
|
+
...defaultProps$v.states.leadFormState,
|
|
16038
|
+
loading: true,
|
|
16039
|
+
},
|
|
16040
|
+
} })));
|
|
16041
|
+
const WithInitialValue$1 = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
|
|
16042
|
+
...defaultProps$v.states,
|
|
16043
|
+
leadFormState: {
|
|
16044
|
+
...defaultProps$v.states.leadFormState,
|
|
16045
|
+
initialData: {
|
|
16046
|
+
country: "Canada",
|
|
16047
|
+
},
|
|
16048
|
+
},
|
|
16049
|
+
} })));
|
|
16050
|
+
|
|
16051
|
+
const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
|
|
16052
|
+
__proto__: null,
|
|
16053
|
+
'default': LeadFormDropdownField_stories,
|
|
16054
|
+
Default: Default$t,
|
|
16055
|
+
WithError: WithError$1,
|
|
16056
|
+
Disabled: Disabled$3,
|
|
16057
|
+
Loading: Loading$d,
|
|
16058
|
+
WithInitialValue: WithInitialValue$1
|
|
16059
|
+
});
|
|
16060
|
+
|
|
15945
16061
|
/**
|
|
15946
16062
|
*
|
|
15947
16063
|
* Themes
|
|
@@ -15954,7 +16070,7 @@ const LeadForm = /*#__PURE__*/Object.freeze({
|
|
|
15954
16070
|
*
|
|
15955
16071
|
*/
|
|
15956
16072
|
//
|
|
15957
|
-
const Default$
|
|
16073
|
+
const Default$u = `
|
|
15958
16074
|
// No CSS
|
|
15959
16075
|
`;
|
|
15960
16076
|
const Orangey = `
|
|
@@ -15988,7 +16104,7 @@ const Klip = `
|
|
|
15988
16104
|
|
|
15989
16105
|
const Themes = /*#__PURE__*/Object.freeze({
|
|
15990
16106
|
__proto__: null,
|
|
15991
|
-
Default: Default$
|
|
16107
|
+
Default: Default$u,
|
|
15992
16108
|
Orangey: Orangey,
|
|
15993
16109
|
Netflix: Netflix,
|
|
15994
16110
|
SaaSquatchCorporate: SaaSquatchCorporate,
|
|
@@ -18680,6 +18796,8 @@ const stories = [
|
|
|
18680
18796
|
PayoutStatusAlert,
|
|
18681
18797
|
QRCode,
|
|
18682
18798
|
LeadForm,
|
|
18799
|
+
LeadInputField,
|
|
18800
|
+
LeadFormDropdownField,
|
|
18683
18801
|
];
|
|
18684
18802
|
const StencilStorybook = class {
|
|
18685
18803
|
constructor(hostRef) {
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const index = require('./index-a29c60ef.js');
|
|
4
|
+
const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
|
|
5
|
+
const global = require('./global-e31dc4f5.js');
|
|
6
|
+
const index_module = require('./index.module-ee84433d.js');
|
|
7
|
+
const JSS = require('./JSS-8503a151.js');
|
|
8
|
+
|
|
9
|
+
const style = {
|
|
10
|
+
IconStyle: {
|
|
11
|
+
display: "block",
|
|
12
|
+
position: "absolute",
|
|
13
|
+
top: "23px",
|
|
14
|
+
},
|
|
15
|
+
DivStyle: {
|
|
16
|
+
marginLeft: "28px",
|
|
17
|
+
},
|
|
18
|
+
Details: {
|
|
19
|
+
marginLeft: "28px",
|
|
20
|
+
},
|
|
21
|
+
Heading: {
|
|
22
|
+
display: "inline-block",
|
|
23
|
+
},
|
|
24
|
+
Children: {
|
|
25
|
+
display: "none",
|
|
26
|
+
},
|
|
27
|
+
};
|
|
28
|
+
const sheet = JSS.createStyleSheet(style);
|
|
29
|
+
const styleString = sheet.toString();
|
|
30
|
+
function RequiredPropsError({ missingProps, heading = "There was a problem loading this section", subheading = "There was a technical problem that prevented this section from loading. Please contact us with the link to this page.", description = "Error occured while loading <{tagName}>. Values for the following attributes are missing:", }, children) {
|
|
31
|
+
if (!missingProps)
|
|
32
|
+
return false;
|
|
33
|
+
const host = index_module._();
|
|
34
|
+
const [detailsOpen, setDetailsOpen] = stencilHooks_module.useState(false);
|
|
35
|
+
return (index.h("sl-alert", { type: "danger", open: true },
|
|
36
|
+
index.h("style", { type: "text/css" }, styleString),
|
|
37
|
+
index.h("div", { slot: "icon", class: sheet.classes.IconStyle },
|
|
38
|
+
index.h("sl-icon", { name: "exclamation-octagon" })),
|
|
39
|
+
index.h("div", { class: sheet.classes.DivStyle },
|
|
40
|
+
index.h("h2", { class: sheet.classes.Heading }, global.intl.formatMessage({
|
|
41
|
+
id: `error-heading`,
|
|
42
|
+
defaultMessage: heading,
|
|
43
|
+
})),
|
|
44
|
+
index.h("p", null, global.intl.formatMessage({
|
|
45
|
+
id: `error-subheading`,
|
|
46
|
+
defaultMessage: subheading,
|
|
47
|
+
}))),
|
|
48
|
+
index.h("details", { class: sheet.classes.Details },
|
|
49
|
+
index.h("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
|
|
50
|
+
detailsOpen ? "Less" : "More",
|
|
51
|
+
" details"),
|
|
52
|
+
index.h("p", null, global.intl.formatMessage({
|
|
53
|
+
id: `error-description`,
|
|
54
|
+
defaultMessage: description,
|
|
55
|
+
}, { tagName: host.tagName.toLowerCase() })),
|
|
56
|
+
index.h("ul", null, missingProps.map((prop) => (index.h("li", null,
|
|
57
|
+
index.h("strong", null, prop.attribute)))))),
|
|
58
|
+
index.h("div", { class: sheet.classes.Children }, children)));
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
const LEAD_FORM_STATE_CONTEXT = "sq:lead-form-state";
|
|
62
|
+
const LEAD_FORM_STATE_CONTEXT_INTERNAL = "sq:lead-form-state-internal";
|
|
63
|
+
function useLeadFormState(formState) {
|
|
64
|
+
const host = index_module._();
|
|
65
|
+
const [leadFormState, setLeadFormState] = stencilHooks_module.y(host, LEAD_FORM_STATE_CONTEXT, formState);
|
|
66
|
+
stencilHooks_module.y(host, LEAD_FORM_STATE_CONTEXT_INTERNAL, [leadFormState, setLeadFormState]);
|
|
67
|
+
return { leadFormState, setLeadFormState };
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
exports.LEAD_FORM_STATE_CONTEXT = LEAD_FORM_STATE_CONTEXT;
|
|
71
|
+
exports.RequiredPropsError = RequiredPropsError;
|
|
72
|
+
exports.useLeadFormState = useLeadFormState;
|
|
@@ -42,7 +42,10 @@
|
|
|
42
42
|
"./components/sqm-invoice-table/columns/sqm-invoice-table-data-column.js",
|
|
43
43
|
"./components/sqm-invoice-table/columns/sqm-invoice-table-date-column.js",
|
|
44
44
|
"./components/sqm-invoice-table/columns/sqm-invoice-table-download-column.js",
|
|
45
|
+
"./components/sqm-lead-form/sqm-lead-dropdown-field.js",
|
|
46
|
+
"./components/sqm-referral-iframe/sqm-referral-iframe.js",
|
|
45
47
|
"./components/sqm-lead-form/sqm-lead-form.js",
|
|
48
|
+
"./components/sqm-lead-form/sqm-lead-input-field.js",
|
|
46
49
|
"./components/sqm-leaderboard/sqm-leaderboard.js",
|
|
47
50
|
"./components/sqm-leaderboard-rank/sqm-leaderboard-rank.js",
|
|
48
51
|
"./components/sqm-link-button/sqm-link-button.js",
|
|
@@ -76,7 +79,6 @@
|
|
|
76
79
|
"./components/sqm-qr-code/sqm-qr-code.js",
|
|
77
80
|
"./components/sqm-referral-card/sqm-referral-card.js",
|
|
78
81
|
"./components/sqm-referral-code/sqm-referral-code.js",
|
|
79
|
-
"./components/sqm-referral-iframe/sqm-referral-iframe.js",
|
|
80
82
|
"./components/sqm-referral-table/cells/sqm-referral-table-cell.js",
|
|
81
83
|
"./components/sqm-referral-table/cells/sqm-referral-table-date-cell.js",
|
|
82
84
|
"./components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.js",
|