@saasquatch/mint-components 1.14.6-0 → 1.14.6-10

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-91e7729f.js';
-import { n as h, f as useEffect, k as useState, i as d, m as useRef, y, u as useMemo, b as browser, j as useReducer } from './stencil-hooks.module-4bc38af4.js';
+import { n as h, f as useEffect, i as d, k as useState, m as useRef, u as useMemo, b as browser, j as useReducer } from './stencil-hooks.module-4bc38af4.js';
 import { i as intl } from './global-be1f9992.js';
-import { i as isDemo, _, d as dist, J, H, $ as $e, w as wn, B, j as jn, u as useCallback, L, y as yn, r as Ue, V as Ve, Q as Qe, k as kn } from './index.module-89a79f66.js';
+import { i as isDemo, _, d as dist, J, H, $ as $e, w as wn, B, u as useCallback, L, y as yn, j as jn, r as Ue, V as Ve, Q as Qe, k as kn } from './index.module-89a79f66.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { g as getProps, a as getMissingProps } from './utils-334c1e34.js';
@@ -15,11 +15,12 @@ import './luxon-8d51c92b.js';
 import './sqm-text-span-view-ca32495e.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-d6f33135.js';
+import { R as RequiredPropsError, u as useLeadFormState } from './useLeadFormState-9016d812.js';
 import { P as PortalLoginView } from './sqm-portal-login-view-7e49609a.js';
 import { u as usePortalLogin } from './usePortalLogin-ef647a50.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
 import { i as isEmpty } from './utilities-5b0ca040.js';
-import { b as useDemoBigStat, V as useBigStat, B as BigStatView, Q as autoColorScaleCss, J as CardFeedView, i as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, O as LeadFormView, W as withShadowView, L as LeaderboardView, N as NameFieldsView, C as ChangeMarktingView, d as PortalChangePasswordView, h as PortalFooterView, P as PortalFrameView, e as PortalRegisterView, R as ReferralIframeView, X as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-9a77dd6b.js';
+import { b as useDemoBigStat, V as useBigStat, B as BigStatView, Q as autoColorScaleCss, J as CardFeedView, i as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, O as LeadFormView, W as withShadowView, L as LeaderboardView, N as NameFieldsView, C as ChangeMarktingView, d as PortalChangePasswordView, h as PortalFooterView, P as PortalFrameView, e as PortalRegisterView, R as ReferralIframeView, X as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-81771102.js';
 import './sqm-portal-container-view-1683ae32.js';
 import { u as usePayoutStatus } from './usePayoutStatus-fed17fc9.js';
 
@@ -137,58 +138,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 = 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 = _();
-  const [detailsOpen, setDetailsOpen] = useState(false);
-  return (h$1("sl-alert", { type: "danger", open: true },
-    h$1("style", { type: "text/css" }, styleString),
-    h$1("div", { slot: "icon", class: sheet.classes.IconStyle },
-      h$1("sl-icon", { name: "exclamation-octagon" })),
-    h$1("div", { class: sheet.classes.DivStyle },
-      h$1("h2", { class: sheet.classes.Heading }, intl.formatMessage({
-        id: `error-heading`,
-        defaultMessage: heading,
-      })),
-      h$1("p", null, intl.formatMessage({
-        id: `error-subheading`,
-        defaultMessage: subheading,
-      }))),
-    h$1("details", { class: sheet.classes.Details },
-      h$1("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
-        detailsOpen ? "Less" : "More",
-        " details"),
-      h$1("p", null, intl.formatMessage({
-        id: `error-description`,
-        defaultMessage: description,
-      }, { tagName: host.tagName.toLowerCase() })),
-      h$1("ul", null, missingProps.map((prop) => (h$1("li", null,
-        h$1("strong", null, prop.attribute)))))),
-    h$1("div", { class: sheet.classes.Children }, children)));
-}
-
 function useCheckboxField(props) {
   var _a;
   const registrationFormState = d(REGISTRATION_FORM_STATE_CONTEXT);
@@ -1340,27 +1289,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 = _();
-  const [leadFormState, setLeadFormState] = y(host, LEAD_FORM_STATE_CONTEXT, formState);
-  y(host, LEAD_FORM_STATE_CONTEXT_INTERNAL, [leadFormState, setLeadFormState]);
-  return { leadFormState, setLeadFormState };
-}
-
 const SUBMIT_LEAD = dist.gql `
-  mutation submitForm($formSubmissionInput: FormSubmissionInput) {
+  mutation submitForm($formSubmissionInput: FormSubmissionInput!) {
     submitForm(formSubmissionInput: $formSubmissionInput) {
       success
     }
   }
 `;
+const GET_USER_DETAILS = 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 = useRef(null);
   const { leadFormState, setLeadFormState } = useLeadFormState({});
+  const programId = H();
+  const user = J();
+  const { data: userDetails } = wn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  console.log({ userDetails });
   const [submitLead, { loading, errors, data }] = $e(SUBMIT_LEAD);
+  const [success, setSuccess] = useState(false);
   useEffect(() => {
     if (!formRef.current)
       return;
@@ -1371,6 +1325,7 @@ function useLeadForm(props) {
     };
   }, [formRef.current]);
   const submit = async (event) => {
+    var _a, _b, _c;
     let formControls = event.target.getFormControls();
     let formData = {};
     let validationErrors = {};
@@ -1409,6 +1364,11 @@ function useLeadForm(props) {
     };
     try {
       const result = await submitLead({ formSubmissionInput: variables });
+      console.log({
+        result,
+        success: (_a = result === null || result === void 0 ? void 0 : result.submitForm) === null || _a === void 0 ? void 0 : _a.success,
+        isError: result instanceof Error,
+      });
       if (result instanceof Error) {
         throw result;
       }
@@ -1417,11 +1377,12 @@ function useLeadForm(props) {
         error: "",
         validationErrors: {},
       });
-      if (result.success) {
-        jn.push(props.nextPage);
+      if ((_c = (_b = result === null || result === void 0 ? void 0 : result.data) === null || _b === void 0 ? void 0 : _b.submitForm) === null || _c === void 0 ? void 0 : _c.success) {
+        setSuccess(true);
       }
     }
     catch (error) {
+      console.log({ error });
       setLeadFormState({
         loading: false,
         error: props.networkErrorMessage,
@@ -1448,12 +1409,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,
@@ -1469,13 +1432,6 @@ const LeadForm = class {
   constructor(hostRef) {
     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
      */
@@ -1492,18 +1448,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.
      *
@@ -1529,7 +1509,13 @@ const LeadForm = class {
       formData: h$1("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,
     };
@@ -1541,6 +1527,7 @@ function useRegisterDemo(props) {
     states: {
       error: "",
       loading: false,
+      success: false,
     },
     callbacks: {
       submit: async (_event) => {
@@ -1851,7 +1838,7 @@ function useLeaderboardDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$1 = {
+const style = {
   Container: { display: "contents" },
   Link: {
     textDecoration: "none",
@@ -1863,16 +1850,16 @@ const vanillaStyle = `
   display: inline;   
 }
 `;
-const sheet$1 = createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
 function LinkButtonView(props) {
   const { onClick, buttonText } = props;
-  return (h$1("span", { class: sheet$1.classes.Container, part: "sqm-base" },
+  return (h$1("span", { class: sheet.classes.Container, part: "sqm-base" },
     h$1("style", { type: "text/css" },
-      styleString$1,
+      styleString,
       vanillaStyle),
     h$1("sl-button", { onClick: onClick, type: "primary", exportparts: "base: primarybutton-base" },
-      h$1("a", { class: sheet$1.classes.Link, part: "sqm-link" }, buttonText))));
+      h$1("a", { class: sheet.classes.Link, part: "sqm-link" }, buttonText))));
 }
 
 const LinkButton = class {
@@ -2053,7 +2040,7 @@ function useNavigationMenuDemo(props) {
 }
 NavigationMenu.style = sqmNavigationMenuCss;
 
-const style$2 = {
+const style$1 = {
   Wrapper: {
     maxWidth: "200px",
     marginLeft: "auto",
@@ -2064,16 +2051,16 @@ const style$2 = {
     margin: "0",
   },
 };
-const sheet$2 = createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
+const sheet$1 = createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
 function PayoutButtonScrollView(props) {
   const { text, states } = props;
   if (!states.payoutSettingsComplete)
     return h$1("div", null);
-  return (h$1("div", { class: sheet$2.classes.Wrapper },
-    h$1("style", { type: "text/css" }, styleString$2),
+  return (h$1("div", { class: sheet$1.classes.Wrapper },
+    h$1("style", { type: "text/css" }, styleString$1),
     h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.payoutButtonText, "scroll-animation": "smooth" }),
-    h$1("p", { class: sheet$2.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
+    h$1("p", { class: sheet$1.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
 }
 
 const GET_PAYOUT_DETAILS = dist.gql `
@@ -2146,7 +2133,7 @@ function useDemoPayoutButtonScroll(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$3 = {
+const style$2 = {
   SkeletonOne: {
     width: "50%",
     height: "16px",
@@ -2197,8 +2184,8 @@ const style$3 = {
     "&::part(footer)": {},
   },
 };
-const sheet$3 = createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
+const sheet$2 = createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
 function PayoutStatusAlertView(props) {
   const { text, states, data, callbacks } = props;
   function getAlert(status) {
@@ -2209,7 +2196,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":
@@ -2219,7 +2206,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 {
@@ -2233,7 +2220,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 {
@@ -2246,7 +2233,7 @@ function PayoutStatusAlertView(props) {
           }),
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
+          class: sheet$2.classes.WarningAlertContainer,
         };
       case "VERIFICATION:REVIEW":
         return {
@@ -2259,7 +2246,7 @@ function PayoutStatusAlertView(props) {
           }),
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
+          class: sheet$2.classes.WarningAlertContainer,
         };
       case "VERIFICATION:FAILED":
         return {
@@ -2272,7 +2259,7 @@ function PayoutStatusAlertView(props) {
           }),
           alertType: "critical",
           icon: "exclamation-octagon",
-          class: sheet$3.classes.ErrorAlertContainer,
+          class: sheet$2.classes.ErrorAlertContainer,
         };
       case "HOLD":
         return {
@@ -2286,7 +2273,7 @@ function PayoutStatusAlertView(props) {
           buttonText: null,
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
+          class: sheet$2.classes.WarningAlertContainer,
         };
       default:
         return;
@@ -2305,18 +2292,18 @@ function PayoutStatusAlertView(props) {
     }
   }
   if (states.loading) {
-    return h$1("sl-skeleton", { class: sheet$3.classes.SkeletonOne });
+    return h$1("sl-skeleton", { class: sheet$2.classes.SkeletonOne });
   }
   const alertDetails = getAlert(states.status);
   if (states.status === "DONE" || !alertDetails) {
     return h$1("div", null);
   }
   return (h$1("div", { part: "sqm-base" },
-    h$1("style", { type: "text/css" }, styleString$3),
+    h$1("style", { type: "text/css" }, styleString$2),
     h$1("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: alertDetails.alertType, class: alertDetails.class, open: true },
       h$1("sl-icon", { slot: "icon", name: alertDetails.icon }),
       h$1("strong", null, alertDetails.header),
-      h$1("p", { class: sheet$3.classes.AlertDescriptionText }, alertDetails.description),
+      h$1("p", { class: sheet$2.classes.AlertDescriptionText }, alertDetails.description),
       getButton(states.status))));
 }
 
@@ -3470,7 +3457,7 @@ const ProgramMenu = class {
   }
 };
 
-const style$4 = {
+const style$3 = {
   Container: {
     borderRadius: "var(--sl-border-radius-large)",
     color: "var(--sl-color-neutral-900)",
@@ -3498,15 +3485,15 @@ const style$4 = {
     },
   },
 };
-const sheet$4 = createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
+const sheet$3 = createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
 const vanillaStyle$1 = `
     :host{
       display: block;   
     }
   `;
 function ReferralCardView(props) {
-  return (h$1("div", { part: "sqm-base", class: sheet$4.classes.Container, style: {
+  return (h$1("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})`,
@@ -3517,15 +3504,15 @@ function ReferralCardView(props) {
       margin: `${props.limitWidth ? "auto" : "none"}`,
     } },
     h$1("style", { type: "text/css" },
-      styleString$4,
+      styleString$3,
       vanillaStyle$1),
-    props.hasHeader && (h$1("div", { class: sheet$4.classes.EndContainer }, props.slots.header)),
-    h$1("div", { part: "sqm-column-container", class: sheet$4.classes.ColumnContainer, style: {
+    props.hasHeader && (h$1("div", { class: sheet$3.classes.EndContainer }, props.slots.header)),
+    h$1("div", { part: "sqm-column-container", class: sheet$3.classes.ColumnContainer, style: {
         alignItems: props.verticalAlignment,
       } },
       props.slots.left,
       props.slots.right),
-    props.hasFooter && (h$1("div", { class: sheet$4.classes.EndContainer }, props.slots.footer))));
+    props.hasFooter && (h$1("div", { class: sheet$3.classes.EndContainer }, props.slots.footer))));
 }
 
 const ReferralCard = class {
@@ -3600,7 +3587,7 @@ const ReferralCard = class {
   }
 };
 
-const GET_USER_DETAILS = dist.gql `
+const GET_USER_DETAILS$1 = dist.gql `
   query getUser($programId: ID) {
     viewer {
       ... on User {
@@ -3613,7 +3600,7 @@ function useReferralIframe(props) {
   var _a;
   const programId = H();
   const user = J();
-  const { data } = wn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const { data } = wn(GET_USER_DETAILS$1, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   return {
     states: {
       content: props,
@@ -5248,7 +5235,7 @@ const Gift = () => (h$1("svg", { width: "24", height: "24", viewBox: "0 0 24 24"
 const Circle = () => (h$1("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h$1("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)",
@@ -5291,8 +5278,8 @@ const style$5 = {
     },
   },
 };
-const sheet$5 = createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
+const sheet$4 = createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
 const vanillaStyle$2 = `
 	:host{
 		display: block; 
@@ -5305,9 +5292,9 @@ const vanillaStyle$2 = `
 function TimelineEntryView(props) {
   var _a;
   const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  return (h$1("div", { class: sheet$5.classes.TimelineReward, part: "sqm-base" },
+  return (h$1("div", { class: sheet$4.classes.TimelineReward, part: "sqm-base" },
     h$1("style", { type: "text/css" },
-      styleString$5,
+      styleString$4,
       vanillaStyle$2),
     h$1("div", { class: "container", part: "sqm-entry-container" },
       h$1("div", { class: "line" }, "/"),

package/dist/esm/sqm-lead-dropdown-field-view-4c85fe20.js

@@ -0,0 +1,67 @@
+import { h } from './index-91e7729f.js';
+import { i as intl } from './global-be1f9992.js';
+import { j as jss, a as create } from './JSS-67b5cff8.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.setup(create());
+const sheet = 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, }) => intl.formatMessage({
+    id: "requiredFieldErrorMessage",
+    defaultMessage: content.requiredFieldErrorMessage,
+  }, {
+    dropdownLabel,
+  });
+  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    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]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, intl.formatMessage({
+      id: `errorMessage-${content.dropdownName}`,
+      defaultMessage: content.requiredFieldErrorMessage,
+    })))));
+}
+
+export { LeadDropdownFieldView as L };

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

@@ -0,0 +1,77 @@
+import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
+import { i as d, n as h } from './stencil-hooks.module-4bc38af4.js';
+import './global-be1f9992.js';
+import { i as isDemo } from './index.module-89a79f66.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import { a as getMissingProps, g as getProps } from './utils-334c1e34.js';
+import './JSS-67b5cff8.js';
+import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-9016d812.js';
+import { L as LeadDropdownFieldView } from './sqm-lead-dropdown-field-view-4c85fe20.js';
+
+function useLeadDropdownField() {
+  const leadFormState = d(LEAD_FORM_STATE_CONTEXT);
+  return {
+    states: {
+      leadFormState,
+    },
+  };
+}
+
+const LeadDropdownField = class {
+  constructor(hostRef) {
+    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;
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const missingProps = getMissingProps([
+      {
+        attribute: "dropdown-name",
+        value: this.dropdownName,
+      },
+    ]);
+    if (!isDemo() && missingProps) {
+      return (h$1(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:" }, h$1("slot", null)));
+    }
+    const content = {
+      ...getProps(this),
+      selectOptions: h$1("slot", null),
+    };
+    const { states } = isDemo()
+      ? useLeadDropdownFieldDemo(this)
+      : useLeadDropdownField();
+    return (h$1(LeadDropdownFieldView, { states: states, content: content }));
+  }
+};
+function useLeadDropdownFieldDemo(props) {
+  return cjs({
+    states: {
+      leadFormState: {},
+    },
+    content: {
+      dropdownName: props.dropdownName,
+      dropdownLabel: props.dropdownLabel,
+      requiredFieldErrorMessage: props.requiredFieldErrorMessage,
+      dropdownOptional: props.dropdownOptional,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+export { LeadDropdownField as sqm_lead_dropdown_field };