@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.
Files changed (85) hide show
  1. package/dist/cjs/{ShadowViewAddon-c0a5fdf8.js → ShadowViewAddon-344e1c0d.js} +75 -47
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/mint-components.cjs.js +1 -1
  4. package/dist/cjs/sqm-big-stat_42.cjs.entry.js +117 -120
  5. package/dist/cjs/sqm-lead-dropdown-field-view-0211d640.js +67 -0
  6. package/dist/cjs/sqm-lead-dropdown-field.cjs.entry.js +81 -0
  7. package/dist/cjs/sqm-lead-input-field-view-5a0b1aed.js +51 -0
  8. package/dist/cjs/sqm-lead-input-field.cjs.entry.js +84 -0
  9. package/dist/cjs/sqm-stencilbook.cjs.entry.js +167 -49
  10. package/dist/cjs/useLeadFormState-c83d2034.js +72 -0
  11. package/dist/collection/collection-manifest.json +3 -1
  12. package/dist/collection/components/sqm-lead-form/LeadForm.stories.js +35 -46
  13. package/dist/collection/components/sqm-lead-form/LeadFormDropdownField.stories.js +59 -0
  14. package/dist/collection/components/sqm-lead-form/LeadInputField.stories.js +48 -0
  15. package/dist/collection/components/sqm-lead-form/sqm-lead-dropdown-field-view.js +63 -0
  16. package/dist/collection/components/sqm-lead-form/sqm-lead-dropdown-field.js +199 -0
  17. package/dist/collection/components/sqm-lead-form/sqm-lead-form-view.js +77 -48
  18. package/dist/collection/components/sqm-lead-form/sqm-lead-form.js +150 -36
  19. package/dist/collection/components/sqm-lead-form/sqm-lead-input-field-view.js +47 -0
  20. package/dist/collection/components/sqm-lead-form/sqm-lead-input-field.js +228 -0
  21. package/dist/collection/components/sqm-lead-form/useLeadDropdownField.js +10 -0
  22. package/dist/collection/components/sqm-lead-form/useLeadForm.js +36 -7
  23. package/dist/collection/components/sqm-lead-form/useLeadInputField.js +10 -0
  24. package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js +4 -0
  25. package/dist/esm/{ShadowViewAddon-aa7177fe.js → ShadowViewAddon-a14f9e24.js} +76 -48
  26. package/dist/esm/loader.js +1 -1
  27. package/dist/esm/mint-components.js +1 -1
  28. package/dist/esm/sqm-big-stat_42.entry.js +114 -117
  29. package/dist/esm/sqm-lead-dropdown-field-view-62e74a36.js +65 -0
  30. package/dist/esm/sqm-lead-dropdown-field.entry.js +77 -0
  31. package/dist/esm/sqm-lead-input-field-view-9b23f22c.js +49 -0
  32. package/dist/esm/sqm-lead-input-field.entry.js +80 -0
  33. package/dist/esm/sqm-stencilbook.entry.js +167 -49
  34. package/dist/esm/useLeadFormState-9016d812.js +68 -0
  35. package/dist/esm-es5/ShadowViewAddon-a14f9e24.js +1 -0
  36. package/dist/esm-es5/loader.js +1 -1
  37. package/dist/esm-es5/mint-components.js +1 -1
  38. package/dist/esm-es5/sqm-big-stat_42.entry.js +1 -1
  39. package/dist/esm-es5/sqm-lead-dropdown-field-view-62e74a36.js +1 -0
  40. package/dist/esm-es5/sqm-lead-dropdown-field.entry.js +1 -0
  41. package/dist/esm-es5/sqm-lead-input-field-view-9b23f22c.js +1 -0
  42. package/dist/esm-es5/sqm-lead-input-field.entry.js +1 -0
  43. package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
  44. package/dist/esm-es5/useLeadFormState-9016d812.js +1 -0
  45. package/dist/mint-components/mint-components.esm.js +1 -1
  46. package/dist/mint-components/p-00590b7a.system.js +1 -0
  47. package/dist/mint-components/p-03681bf2.entry.js +273 -0
  48. package/dist/mint-components/p-05516d33.system.js +1 -0
  49. package/dist/mint-components/p-1d704c40.system.js +1 -0
  50. package/dist/mint-components/p-2192104c.entry.js +1 -0
  51. package/dist/mint-components/p-34c5b141.system.entry.js +1 -0
  52. package/dist/mint-components/p-37996351.system.js +1 -1
  53. package/dist/mint-components/p-3e327cc8.system.entry.js +1 -0
  54. package/dist/mint-components/{p-373a92a2.js → p-5afa5a28.js} +24 -24
  55. package/dist/mint-components/p-84a9e392.system.entry.js +1 -0
  56. package/dist/mint-components/p-8698266c.system.js +1 -0
  57. package/dist/mint-components/p-9398453d.system.entry.js +1 -0
  58. package/dist/mint-components/p-b54f8e03.entry.js +1 -0
  59. package/dist/mint-components/p-cd10001b.js +1 -0
  60. package/dist/mint-components/{p-8dc110b0.entry.js → p-ed69285c.entry.js} +2 -2
  61. package/dist/mint-components/p-f6717dd7.js +1 -0
  62. package/dist/mint-components/p-f98a4354.js +1 -0
  63. package/dist/types/components/sqm-lead-form/LeadForm.stories.d.ts +1 -0
  64. package/dist/types/components/sqm-lead-form/LeadFormDropdownField.stories.d.ts +9 -0
  65. package/dist/types/components/sqm-lead-form/LeadInputField.stories.d.ts +8 -0
  66. package/dist/types/components/sqm-lead-form/sqm-lead-dropdown-field-view.d.ts +15 -0
  67. package/dist/types/components/sqm-lead-form/sqm-lead-dropdown-field.d.ts +42 -0
  68. package/dist/types/components/sqm-lead-form/sqm-lead-form-view.d.ts +8 -0
  69. package/dist/types/components/sqm-lead-form/sqm-lead-form.d.ts +24 -7
  70. package/dist/types/components/sqm-lead-form/sqm-lead-input-field-view.d.ts +14 -0
  71. package/dist/types/components/sqm-lead-form/sqm-lead-input-field.d.ts +49 -0
  72. package/dist/types/components/sqm-lead-form/useLeadDropdownField.d.ts +6 -0
  73. package/dist/types/components/sqm-lead-form/useLeadForm.d.ts +6 -1
  74. package/dist/types/components/sqm-lead-form/useLeadInputField.d.ts +6 -0
  75. package/dist/types/components/sqm-referral-iframe/useReferralIframe.d.ts +1 -1
  76. package/dist/types/components.d.ts +194 -12
  77. package/docs/docs.docx +0 -0
  78. package/docs/raisins.json +1 -1
  79. package/grapesjs/grapesjs.js +1 -1
  80. package/package.json +1 -1
  81. package/dist/esm-es5/ShadowViewAddon-aa7177fe.js +0 -1
  82. package/dist/mint-components/p-02a6e0df.system.entry.js +0 -1
  83. package/dist/mint-components/p-0c6ab3ec.system.entry.js +0 -1
  84. package/dist/mint-components/p-6349fb7c.entry.js +0 -265
  85. 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-c0a5fdf8.js');
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 errorProps$c = {
15867
+ const successProps$5 = {
15868
+ ...defaultProps$t,
15858
15869
  states: {
15859
- error: "Something went wrong. Please try again.",
15860
- leadFormState: {},
15861
- loading: false,
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
- pageLabel: "Submit your information",
15873
- requiredFieldErrorMessage: "Cannot be empty",
15874
- invalidEmailErrorMessage: "Must be a valid email address",
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
- leadFormState: {},
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
- states: {
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
- pageLabel: "Submit your information",
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$s = `
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$s,
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",