@saasquatch/mint-components 1.14.6-1 → 1.14.6-11

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

@@ -19,11 +19,12 @@ require('./luxon-2926d85f.js');
 require('./sqm-text-span-view-0aa82125.js');
 const index$1 = require('./index-8c6255f5.js');
 const useRegistrationFormState = require('./useRegistrationFormState-7b820f0c.js');
+const useLeadFormState = require('./useLeadFormState-c83d2034.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
 const usePortalLogin = require('./usePortalLogin-63d896d1.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const utilities = require('./utilities-78f5e169.js');
-const ShadowViewAddon = require('./ShadowViewAddon-c0a5fdf8.js');
+const ShadowViewAddon = require('./ShadowViewAddon-d1dda2b0.js');
 require('./sqm-portal-container-view-4f15143a.js');
 const usePayoutStatus = require('./usePayoutStatus-feeac99b.js');
 
@@ -141,58 +142,6 @@ const CardFeed = class {
   }
 };
 
-const style = {
-  IconStyle: {
-    display: "block",
-    position: "absolute",
-    top: "23px",
-  },
-  DivStyle: {
-    marginLeft: "28px",
-  },
-  Details: {
-    marginLeft: "28px",
-  },
-  Heading: {
-    display: "inline-block",
-  },
-  Children: {
-    display: "none",
-  },
-};
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-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) {
-  if (!missingProps)
-    return false;
-  const host = index_module._();
-  const [detailsOpen, setDetailsOpen] = stencilHooks_module.useState(false);
-  return (index.h("sl-alert", { type: "danger", open: true },
-    index.h("style", { type: "text/css" }, styleString),
-    index.h("div", { slot: "icon", class: sheet.classes.IconStyle },
-      index.h("sl-icon", { name: "exclamation-octagon" })),
-    index.h("div", { class: sheet.classes.DivStyle },
-      index.h("h2", { class: sheet.classes.Heading }, global.intl.formatMessage({
-        id: `error-heading`,
-        defaultMessage: heading,
-      })),
-      index.h("p", null, global.intl.formatMessage({
-        id: `error-subheading`,
-        defaultMessage: subheading,
-      }))),
-    index.h("details", { class: sheet.classes.Details },
-      index.h("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
-        detailsOpen ? "Less" : "More",
-        " details"),
-      index.h("p", null, global.intl.formatMessage({
-        id: `error-description`,
-        defaultMessage: description,
-      }, { tagName: host.tagName.toLowerCase() })),
-      index.h("ul", null, missingProps.map((prop) => (index.h("li", null,
-        index.h("strong", null, prop.attribute)))))),
-    index.h("div", { class: sheet.classes.Children }, children)));
-}
-
 function useCheckboxField(props) {
   var _a;
   const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
@@ -252,7 +201,7 @@ const CheckboxField = class {
       },
     ]);
     if (!index_module.isDemo() && missingProps) {
-      return (index.h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this checkbox field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
+      return (index.h(useLeadFormState.RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this checkbox field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
     }
     const content = {
       ...utils.getProps(this),
@@ -718,7 +667,7 @@ const DropdownField = class {
       },
     ]);
     if (!index_module.isDemo() && missingProps) {
-      return (index.h(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)));
+      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)));
     }
     const content = {
       ...utils.getProps(this),
@@ -1330,7 +1279,7 @@ const InputField = class {
       },
     ]);
     if (!index_module.isDemo() && missingProps) {
-      return (index.h(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:" }));
+      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:" }));
     }
     const { states } = index_module.isDemo() ? useInputFieldDemo(this) : useInputField();
     return index.h(ShadowViewAddon.InputFieldView, { states: states, content: content });
@@ -1344,27 +1293,32 @@ function useInputFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const LEAD_FORM_STATE_CONTEXT = "sq:lead-form-state";
-const LEAD_FORM_STATE_CONTEXT_INTERNAL = "sq:lead-form-state-internal";
-function useLeadFormState(formState) {
-  const host = index_module._();
-  const [leadFormState, setLeadFormState] = stencilHooks_module.y(host, LEAD_FORM_STATE_CONTEXT, formState);
-  stencilHooks_module.y(host, LEAD_FORM_STATE_CONTEXT_INTERNAL, [leadFormState, setLeadFormState]);
-  return { leadFormState, setLeadFormState };
-}
-
 const SUBMIT_LEAD = index_module.dist.gql `
-  mutation submitForm($formSubmissionInput: FormSubmissionInput) {
+  mutation submitForm($formSubmissionInput: FormSubmissionInput!) {
     submitForm(formSubmissionInput: $formSubmissionInput) {
       success
     }
   }
 `;
+const GET_USER_DETAILS = index_module.dist.gql `
+  query getUser($programId: ID) {
+    viewer {
+      ... on User {
+        referralCode(programId: $programId)
+      }
+    }
+  }
+`;
 function useLeadForm(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const formRef = stencilHooks_module.useRef(null);
-  const { leadFormState, setLeadFormState } = useLeadFormState({});
+  const { leadFormState, setLeadFormState } = useLeadFormState.useLeadFormState({});
+  const programId = index_module.H();
+  const user = index_module.J();
+  const { data: userDetails } = index_module.wn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  console.log({ userDetails });
   const [submitLead, { loading, errors, data }] = index_module.$e(SUBMIT_LEAD);
+  const [success, setSuccess] = stencilHooks_module.useState(false);
   stencilHooks_module.useEffect(() => {
     if (!formRef.current)
       return;
@@ -1375,6 +1329,7 @@ function useLeadForm(props) {
     };
   }, [formRef.current]);
   const submit = async (event) => {
+    var _a;
     let formControls = event.target.getFormControls();
     let formData = {};
     let validationErrors = {};
@@ -1421,8 +1376,8 @@ function useLeadForm(props) {
         error: "",
         validationErrors: {},
       });
-      if (result.success) {
-        index_module.jn.push(props.nextPage);
+      if ((_a = result === null || result === void 0 ? void 0 : result.submitForm) === null || _a === void 0 ? void 0 : _a.success) {
+        setSuccess(true);
       }
     }
     catch (error) {
@@ -1452,12 +1407,14 @@ function useLeadForm(props) {
     errorMessage =
       ((_f = (_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) || (leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.error);
   }
+  console.log({ errors, errorMessage });
   return {
     states: {
       loading,
       error: errorMessage,
+      success,
       leadFormState,
-      referralCode: "ABC123",
+      referralCode: ((_k = userDetails === null || userDetails === void 0 ? void 0 : userDetails.viewer) === null || _k === void 0 ? void 0 : _k.referralCode) || "",
     },
     callbacks: {
       submit,
@@ -1473,13 +1430,6 @@ const LeadForm = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    /**
-     * Redirect participants to this page from their verification email
-     *
-     * @uiName Submission redirect
-     * @uiWidget pageSelect
-     */
-    this.nextPage = "/";
     /**
      * @uiName Email field label
      */
@@ -1496,18 +1446,42 @@ const LeadForm = class {
      * @uiName Submit button text
      */
     this.submitLabel = "Submit";
+    /**
+     * @uiName Submit another form button label
+     */
+    this.resubmitFormLabel = "Refer Another Friend";
     /**
      * @uiName Header text
      */
-    this.pageLabel = "Submit your information";
+    this.pageLabel = "Refer your friend";
     this.formKey = "lead-form";
+    /**
+     * Optional support link for error messages.
+     */
+    this.supportLink = "Support";
+    /**
+     * Header text shown on successful submission.
+     */
+    this.submitSuccessHeader = "Referral submitted";
+    /**
+     * Description text shown on successful submission.
+     */
+    this.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.";
+    /**
+     * Header text shown when an error occurs.
+     */
+    this.submitErrorHeader = "An error occurred while submitting";
+    /**
+     * Description text shown when an error occurs.
+     */
+    this.submitErrorDescription = "Please try again later. If the problem continues, contact {supportLink}";
     /**
      * The message to be displayed when a required field is not filled.
      *
      * @uiName Required field message
      * @uiWidget textArea
      */
-    this.requiredFieldErrorMessage = "Cannot be empty";
+    this.requiredFieldErrorMessage = "Please enter a valid {fieldLabel}";
     /**
      * The message to be displayed when a the form submission fails unexpectedly.
      *
@@ -1533,7 +1507,13 @@ const LeadForm = class {
       formData: index.h("slot", { name: "formData" }),
       emailLabel: this.emailLabel,
       submitLabel: this.submitLabel,
+      resubmitFormLabel: this.resubmitFormLabel,
       pageLabel: this.pageLabel,
+      supportLink: this.supportLink,
+      submitSuccessHeader: this.submitSuccessHeader,
+      submitSuccessDescription: this.submitSuccessDescription,
+      submitErrorHeader: this.submitErrorHeader,
+      submitErrorDescription: this.submitErrorDescription,
       invalidEmailErrorMessage: this.invalidEmailErrorMessage,
       requiredFieldErrorMessage: this.requiredFieldErrorMessage,
     };
@@ -1545,6 +1525,7 @@ function useRegisterDemo(props) {
     states: {
       error: "",
       loading: false,
+      success: false,
     },
     callbacks: {
       submit: async (_event) => {
@@ -1855,7 +1836,7 @@ function useLeaderboardDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$1 = {
+const style = {
   Container: { display: "contents" },
   Link: {
     textDecoration: "none",
@@ -1867,16 +1848,16 @@ const vanillaStyle = `
   display: inline;   
 }
 `;
-const sheet$1 = JSS.createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
 function LinkButtonView(props) {
   const { onClick, buttonText } = props;
-  return (index.h("span", { class: sheet$1.classes.Container, part: "sqm-base" },
+  return (index.h("span", { class: sheet.classes.Container, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      styleString$1,
+      styleString,
       vanillaStyle),
     index.h("sl-button", { onClick: onClick, type: "primary", exportparts: "base: primarybutton-base" },
-      index.h("a", { class: sheet$1.classes.Link, part: "sqm-link" }, buttonText))));
+      index.h("a", { class: sheet.classes.Link, part: "sqm-link" }, buttonText))));
 }
 
 const LinkButton = class {
@@ -2057,7 +2038,7 @@ function useNavigationMenuDemo(props) {
 }
 NavigationMenu.style = sqmNavigationMenuCss;
 
-const style$2 = {
+const style$1 = {
   Wrapper: {
     maxWidth: "200px",
     marginLeft: "auto",
@@ -2068,16 +2049,16 @@ const style$2 = {
     margin: "0",
   },
 };
-const sheet$2 = JSS.createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
+const sheet$1 = JSS.createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
 function PayoutButtonScrollView(props) {
   const { text, states } = props;
   if (!states.payoutSettingsComplete)
     return index.h("div", null);
-  return (index.h("div", { class: sheet$2.classes.Wrapper },
-    index.h("style", { type: "text/css" }, styleString$2),
+  return (index.h("div", { class: sheet$1.classes.Wrapper },
+    index.h("style", { type: "text/css" }, styleString$1),
     index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.payoutButtonText, "scroll-animation": "smooth" }),
-    index.h("p", { class: sheet$2.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
+    index.h("p", { class: sheet$1.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
 }
 
 const GET_PAYOUT_DETAILS = index_module.dist.gql `
@@ -2150,7 +2131,7 @@ function useDemoPayoutButtonScroll(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$3 = {
+const style$2 = {
   SkeletonOne: {
     width: "50%",
     height: "16px",
@@ -2201,8 +2182,8 @@ const style$3 = {
     "&::part(footer)": {},
   },
 };
-const sheet$3 = JSS.createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
+const sheet$2 = JSS.createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
 function PayoutStatusAlertView(props) {
   const { text, states, data, callbacks } = props;
   function getAlert(status) {
@@ -2213,7 +2194,7 @@ function PayoutStatusAlertView(props) {
         buttonText: null,
         alertType: "critical",
         icon: "exclamation-triangle",
-        class: sheet$3.classes.ErrorAlertContainer,
+        class: sheet$2.classes.ErrorAlertContainer,
       };
     switch (status) {
       case "INFORMATION_REQUIRED":
@@ -2223,7 +2204,7 @@ function PayoutStatusAlertView(props) {
           buttonText: text.informationRequiredButtonText,
           alertType: "info",
           icon: "info-circle",
-          class: sheet$3.classes.InfoAlertContainer,
+          class: sheet$2.classes.InfoAlertContainer,
         };
       case "VERIFICATION:REQUIRED":
         return {
@@ -2237,7 +2218,7 @@ function PayoutStatusAlertView(props) {
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
+          class: sheet$2.classes.WarningAlertContainer,
         };
       case "VERIFICATION:INTERNAL":
         return {
@@ -2250,7 +2231,7 @@ function PayoutStatusAlertView(props) {
           }),
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
+          class: sheet$2.classes.WarningAlertContainer,
         };
       case "VERIFICATION:REVIEW":
         return {
@@ -2263,7 +2244,7 @@ function PayoutStatusAlertView(props) {
           }),
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
+          class: sheet$2.classes.WarningAlertContainer,
         };
       case "VERIFICATION:FAILED":
         return {
@@ -2276,7 +2257,7 @@ function PayoutStatusAlertView(props) {
           }),
           alertType: "critical",
           icon: "exclamation-octagon",
-          class: sheet$3.classes.ErrorAlertContainer,
+          class: sheet$2.classes.ErrorAlertContainer,
         };
       case "HOLD":
         return {
@@ -2290,7 +2271,7 @@ function PayoutStatusAlertView(props) {
           buttonText: null,
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
+          class: sheet$2.classes.WarningAlertContainer,
         };
       default:
         return;
@@ -2309,18 +2290,18 @@ function PayoutStatusAlertView(props) {
     }
   }
   if (states.loading) {
-    return index.h("sl-skeleton", { class: sheet$3.classes.SkeletonOne });
+    return index.h("sl-skeleton", { class: sheet$2.classes.SkeletonOne });
   }
   const alertDetails = getAlert(states.status);
   if (states.status === "DONE" || !alertDetails) {
     return index.h("div", null);
   }
   return (index.h("div", { part: "sqm-base" },
-    index.h("style", { type: "text/css" }, styleString$3),
+    index.h("style", { type: "text/css" }, styleString$2),
     index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: alertDetails.alertType, class: alertDetails.class, open: true },
       index.h("sl-icon", { slot: "icon", name: alertDetails.icon }),
       index.h("strong", null, alertDetails.header),
-      index.h("p", { class: sheet$3.classes.AlertDescriptionText }, alertDetails.description),
+      index.h("p", { class: sheet$2.classes.AlertDescriptionText }, alertDetails.description),
       getButton(states.status))));
 }
 
@@ -3474,7 +3455,7 @@ const ProgramMenu = class {
   }
 };
 
-const style$4 = {
+const style$3 = {
   Container: {
     borderRadius: "var(--sl-border-radius-large)",
     color: "var(--sl-color-neutral-900)",
@@ -3502,15 +3483,15 @@ const style$4 = {
     },
   },
 };
-const sheet$4 = JSS.createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
+const sheet$3 = JSS.createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
 const vanillaStyle$1 = `
     :host{
       display: block;   
     }
   `;
 function ReferralCardView(props) {
-  return (index.h("div", { part: "sqm-base", class: sheet$4.classes.Container, style: {
+  return (index.h("div", { part: "sqm-base", class: sheet$3.classes.Container, style: {
       border: `${props.hideBorder ? "none" : "1px solid var(--sl-color-neutral-300)"}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
@@ -3521,15 +3502,15 @@ function ReferralCardView(props) {
       margin: `${props.limitWidth ? "auto" : "none"}`,
     } },
     index.h("style", { type: "text/css" },
-      styleString$4,
+      styleString$3,
       vanillaStyle$1),
-    props.hasHeader && (index.h("div", { class: sheet$4.classes.EndContainer }, props.slots.header)),
-    index.h("div", { part: "sqm-column-container", class: sheet$4.classes.ColumnContainer, style: {
+    props.hasHeader && (index.h("div", { class: sheet$3.classes.EndContainer }, props.slots.header)),
+    index.h("div", { part: "sqm-column-container", class: sheet$3.classes.ColumnContainer, style: {
         alignItems: props.verticalAlignment,
       } },
       props.slots.left,
       props.slots.right),
-    props.hasFooter && (index.h("div", { class: sheet$4.classes.EndContainer }, props.slots.footer))));
+    props.hasFooter && (index.h("div", { class: sheet$3.classes.EndContainer }, props.slots.footer))));
 }
 
 const ReferralCard = class {
@@ -3604,7 +3585,7 @@ const ReferralCard = class {
   }
 };
 
-const GET_USER_DETAILS = index_module.dist.gql `
+const GET_USER_DETAILS$1 = index_module.dist.gql `
   query getUser($programId: ID) {
     viewer {
       ... on User {
@@ -3617,7 +3598,7 @@ function useReferralIframe(props) {
   var _a;
   const programId = index_module.H();
   const user = index_module.J();
-  const { data } = index_module.wn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const { data } = index_module.wn(GET_USER_DETAILS$1, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   return {
     states: {
       content: props,
@@ -3653,7 +3634,7 @@ const SqmReferralIframe = class {
       },
     ]);
     if (missingProps) {
-      return (index.h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this page", subheading: "A technical problem prevented this iframe from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
+      return (index.h(useLeadFormState.RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this page", subheading: "A technical problem prevented this iframe from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
     }
     const { states, data } = index_module.isDemo()
       ? useReferralIframeDemo(utils.getProps(this))
@@ -5252,7 +5233,7 @@ const Gift = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24
 const Circle = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor", stroke: "currentColor", "stroke-width": "2" })));
 
-const style$5 = {
+const style$4 = {
   TimelineReward: {
     color: "var(--sl-color-neutral-900)",
     lineHeight: "var(--sl-line-height-dense)",
@@ -5295,8 +5276,8 @@ const style$5 = {
     },
   },
 };
-const sheet$5 = JSS.createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
+const sheet$4 = JSS.createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
 const vanillaStyle$2 = `
 	:host{
 		display: block; 
@@ -5309,9 +5290,9 @@ const vanillaStyle$2 = `
 function TimelineEntryView(props) {
   var _a;
   const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  return (index.h("div", { class: sheet$5.classes.TimelineReward, part: "sqm-base" },
+  return (index.h("div", { class: sheet$4.classes.TimelineReward, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      styleString$5,
+      styleString$4,
       vanillaStyle$2),
     index.h("div", { class: "container", part: "sqm-entry-container" },
       index.h("div", { class: "line" }, "/"),

package/dist/cjs/sqm-lead-dropdown-field-view-03a3e03f.js

@@ -0,0 +1,69 @@
+'use strict';
+
+const index = require('./index-a29c60ef.js');
+const global = require('./global-e31dc4f5.js');
+const JSS = require('./JSS-8503a151.js');
+
+const style = {
+  ErrorStyle: {
+    "--sl-input-border-color": "var(--sl-color-danger-500)",
+    "--sl-input-background-color": "var(--sl-color-danger-10)",
+    "--sl-input-border-color-focus": "var(--sl-color-danger-500)",
+    "--sl-input-border-color-hover": "var(--sl-color-danger-500)",
+  },
+  ErrorMessageStyle: {
+    margin: 0,
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-input-help-text-font-size-medium)",
+  },
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-select::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-semibold);
+}
+`;
+JSS.jss.setup(JSS.create());
+const sheet = JSS.jss.createStyleSheet(style);
+const styleString = sheet.toString();
+function LeadDropdownFieldView(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { states, content } = props;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
+  const getRequiredFieldErrorMessage = ({ dropdownLabel, }) => global.intl.formatMessage({
+    id: "requiredFieldErrorMessage",
+    defaultMessage: content.requiredFieldErrorMessage,
+  }, {
+    dropdownLabel,
+  });
+  return (index.h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    index.h("sl-select", Object.assign({ exportparts: "label: input-label, base: input-base", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
+        if (!value) {
+          return getRequiredFieldErrorMessage({
+            dropdownLabel: content.dropdownLabel,
+          });
+        }
+      } }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e.firstName) ? {
+      class: sheet.classes.ErrorStyle,
+      helpText: ((_g = (_f = states.leadFormState) === null || _f === void 0 ? void 0 : _f.validationErrors) === null || _g === void 0 ? void 0 : _g.firstName) ||
+        content.requiredFieldErrorMessage,
+    }
+      : [])), content.selectOptions),
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet.classes.ErrorMessageStyle }, global.intl.formatMessage({
+      id: `errorMessage-${content.dropdownName}`,
+      defaultMessage: content.requiredFieldErrorMessage,
+    })))));
+}
+
+exports.LeadDropdownFieldView = LeadDropdownFieldView;

package/dist/cjs/sqm-lead-dropdown-field.cjs.entry.js

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+require('./global-e31dc4f5.js');
+const index_module = require('./index.module-ee84433d.js');
+const cjs = require('./cjs-1066ec21.js');
+const utils = require('./utils-6847bc06.js');
+require('./JSS-8503a151.js');
+const useLeadFormState = require('./useLeadFormState-c83d2034.js');
+const sqmLeadDropdownFieldView = require('./sqm-lead-dropdown-field-view-03a3e03f.js');
+
+function useLeadDropdownField() {
+  const leadFormState = stencilHooks_module.d(useLeadFormState.LEAD_FORM_STATE_CONTEXT);
+  return {
+    states: {
+      leadFormState,
+    },
+  };
+}
+
+const LeadDropdownField = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Dropdown label
+     */
+    this.dropdownLabel = "Select an option";
+    /**
+     * The message to be displayed when a required field is not filled.
+     *
+     * @uiName Required field message
+     * @uiWidget textArea
+     */
+    this.requiredFieldErrorMessage = "Please select a {dropdownLabel}";
+    /**
+     * @uiName Optional
+     * @default
+     */
+    this.dropdownOptional = false;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const missingProps = utils.getMissingProps([
+      {
+        attribute: "dropdown-name",
+        value: this.dropdownName,
+      },
+    ]);
+    if (!index_module.isDemo() && missingProps) {
+      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)));
+    }
+    const content = {
+      ...utils.getProps(this),
+      selectOptions: index.h("slot", null),
+    };
+    const { states } = index_module.isDemo()
+      ? useLeadDropdownFieldDemo(this)
+      : useLeadDropdownField();
+    return (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, { states: states, content: content }));
+  }
+};
+function useLeadDropdownFieldDemo(props) {
+  return cjs.cjs({
+    states: {
+      leadFormState: {},
+    },
+    content: {
+      dropdownName: props.dropdownName,
+      dropdownLabel: props.dropdownLabel,
+      requiredFieldErrorMessage: props.requiredFieldErrorMessage,
+      dropdownOptional: props.dropdownOptional,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+exports.sqm_lead_dropdown_field = LeadDropdownField;