@saasquatch/mint-components 1.14.6-8 → 1.14.6

package/dist/cjs/{ShadowViewAddon-d1dda2b0.js → ShadowViewAddon-3c344355.js}

@@ -2844,7 +2844,7 @@ const style$9 = {
     fontSize: "var(--sl-input-help-text-font-size-medium)",
   },
   FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
+    "margin-bottom": "var(--sl-spacing-medium)",
   },
 };
 const vanillaStyle$5 = `
@@ -4047,7 +4047,12 @@ function CouponCodeView(props) {
 }
 
 const style$d = {
-  Wrapper: { ...mixins.AuthWrapper, "max-width": "600px" },
+  Wrapper: {
+    ...mixins.AuthWrapper,
+    "max-width": "600px",
+    border: "none",
+    margin: "0",
+  },
   Column: mixins.AuthColumn,
   HostBlock: mixins.HostBlock,
   ":host": {
@@ -4057,6 +4062,7 @@ const style$d = {
   NameFieldWrapper: {
     display: "flex",
     gap: "var(--sl-spacing-medium)",
+    marginBottom: "0 !important",
   },
   ContinueButton: { maxWidth: "169px" },
   ButtonsContainer: mixins.AuthButtonsContainer,
@@ -4072,6 +4078,10 @@ const style$d = {
       borderTop: "none",
     },
   },
+  NameInput: {
+    marginBottom: "0",
+    width: "50%",
+  },
   ErrorStyle: mixins.ErrorStyles,
 };
 const vanillaStyle$8 = `
@@ -4094,7 +4104,6 @@ const styleString$d = sheet$d.toString();
 function LeadFormView(props) {
   var _a, _b, _c, _d;
   const { states, refs, callbacks, content } = props;
-  console.log({ states });
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   }
@@ -4104,8 +4113,8 @@ function LeadFormView(props) {
   }, {
     fieldLabel,
   });
-  if (states.success) {
-    return (index.h("div", { class: sheet$d.classes.Wrapper, part: "sqm-base" },
+  return (index.h(index.Fragment, null,
+    states.success && (index.h("div", { class: sheet$d.classes.Wrapper, part: "sqm-base" },
       index.h("style", { type: "text/css" },
         vanillaStyle$8,
         styleString$d),
@@ -4114,51 +4123,108 @@ function LeadFormView(props) {
         index.h("b", null, content.submitSuccessHeader),
         index.h("br", null),
         index.h("div", { part: "successalert-text" }, content.submitSuccessDescription)),
-      index.h("sl-button", { 
-        // AL: TODO add button to allow user to submit another form
-        class: sheet$d.classes.ContinueButton, 
-        // onClick={callbacks.submitAnotherForm}
-        loading: states.loading, exportparts: "base: primarybutton-base", type: "default" }, content.resubmitFormLabel)));
-  }
-  return (index.h("div", { class: sheet$d.classes.Wrapper, part: "sqm-base" },
+      index.h("sl-button", { class: sheet$d.classes.ContinueButton, onClick: callbacks.resetForm, loading: states.loading, exportparts: "base: primarybutton-base", type: "default" }, content.resubmitFormLabel))),
+    index.h("div", { class: sheet$d.classes.Wrapper, part: "sqm-base", style: { display: states.success ? "none" : "block" } },
+      index.h("style", { type: "text/css" },
+        vanillaStyle$8,
+        styleString$d),
+      index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
+      index.h("sl-form", { class: sheet$d.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+        states.error && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet$d.classes.ErrorAlertContainer, open: true },
+          index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+          index.h("b", null, content.submitErrorHeader),
+          index.h("br", null),
+          global.intl.formatMessage({
+            id: "submitErrorDescription",
+            defaultMessage: content.submitErrorDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, content.supportLinkText)),
+          }))),
+        index.h("div", { class: sheet$d.classes.NameFieldWrapper },
+          index.h("sqm-lead-input-field", { class: sheet$d.classes.NameInput, "field-label": content.firstNameLabel || "First Name", "field-name": "firstName" }),
+          index.h("sqm-lead-input-field", { class: sheet$d.classes.NameInput, "field-label": content.lastNameLabel || "Last Name", "field-name": "lastName" })),
+        index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
+            if (!value) {
+              return getRequiredFieldErrorMessage({
+                fieldLabel: content.emailLabel || "Email",
+              });
+            }
+            // this matches shoelace validation, but could be better
+            if (!value.includes("@")) {
+              return content.invalidEmailErrorMessage;
+            }
+          } }, (((_b = (_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+          class: sheet$d.classes.ErrorStyle,
+          helpText: ((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
+            content.requiredFieldErrorMessage,
+        }
+          : []))),
+        index.h("input", { type: "hidden", hidden: true, name: "/referralCode", value: states.referralCode }),
+        content.formData,
+        index.h("div", { class: sheet$d.classes.ButtonsContainer },
+          index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"))))));
+}
+
+const style$e = {
+  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$9 = `
+: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);
+}
+sl-select::part(menu){
+  max-height: 300px;
+}
+`;
+JSS.jss.setup(JSS.create());
+const sheet$e = JSS.jss.createStyleSheet(style$e);
+const styleString$e = sheet$e.toString();
+function LeadDropdownFieldView(props) {
+  var _a, _b, _c, _d, _e;
+  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-${dropdownLabel}`,
+    defaultMessage: content.requiredFieldErrorMessage,
+  }, {
+    dropdownLabel,
+  });
+  return (index.h("div", { class: sheet$e.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$8,
-      styleString$d),
-    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-    index.h("sl-form", { class: sheet$d.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-      states.error && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet$d.classes.ErrorAlertContainer, open: true },
-        index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        index.h("b", null, content.submitErrorHeader),
-        index.h("br", null),
-        global.intl.formatMessage({
-          id: "submitErrorDescription",
-          defaultMessage: content.submitErrorDescription,
-        }, {
-          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, content.supportLink)),
-        }))),
-      index.h("div", { class: sheet$d.classes.NameFieldWrapper },
-        index.h("sqm-lead-input-field", { style: { width: "50%" }, "field-label": "First Name", "field-name": "firstName" }),
-        index.h("sqm-lead-input-field", { style: { width: "50%" }, "field-label": "Last Name", "field-name": "lastName" })),
-      index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
-          if (!value) {
-            return getRequiredFieldErrorMessage({
-              fieldLabel: content.emailLabel || "Email",
-            });
-          }
-          // this matches shoelace validation, but could be better
-          if (!value.includes("@")) {
-            return content.invalidEmailErrorMessage;
-          }
-        } }, (((_b = (_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
-        class: sheet$d.classes.ErrorStyle,
-        helpText: ((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
-          content.requiredFieldErrorMessage,
-      }
-        : []))),
-      index.h("input", { type: "hidden", hidden: true, name: "/rsReferralCode", value: states.referralCode }),
-      content.formData,
-      index.h("div", { class: sheet$d.classes.ButtonsContainer },
-        index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register")))));
+      vanillaStyle$9,
+      styleString$e),
+    index.h("sl-select", Object.assign({ style: { maxHeight: "100px" }, exportparts: "label: input-label, base: input-base", label: `${content.dropdownLabel}${content.dropdownOptional ? ` ${content.optionalLabel}` : ""}`, name: `/${content.dropdownName}`, multiple: content.multiple }, (!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 && !content.dropdownOptional) {
+          return getRequiredFieldErrorMessage({
+            dropdownLabel: content.dropdownLabel,
+          });
+        }
+      } }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
+      class: sheet$e.classes.ErrorStyle,
+    }
+      : [])), content.selectOptions),
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$e.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
+      dropdownLabel: content.dropdownLabel,
+    })))));
 }
 
 function t(t,n,r){return Math.min(Math.max(t,r),n)}class n extends Error{constructor(t){super(`Failed to parse color: "${t}"`);}}function r(r){if("string"!=typeof r)throw new n(r);if("transparent"===r.trim().toLowerCase())return [0,0,0,0];let e=r.trim();e=u.test(r)?function(t){const r=t.toLowerCase().trim(),e=o[function(t){let n=5381,r=t.length;for(;r;)n=33*n^t.charCodeAt(--r);return (n>>>0)%2341}(r)];if(!e)throw new n(t);return `#${e}`}(r):r;const f=s.exec(e);if(f){const t=Array.from(f).slice(1);return [...t.slice(0,3).map(t=>parseInt(_(t,2),16)),parseInt(_(t[3]||"f",2),16)/255]}const p=i.exec(e);if(p){const t=Array.from(p).slice(1);return [...t.slice(0,3).map(t=>parseInt(t,16)),parseInt(t[3]||"ff",16)/255]}const z=a.exec(e);if(z){const t=Array.from(z).slice(1);return [...t.slice(0,3).map(t=>parseInt(t,10)),parseFloat(t[3]||"1")]}const h=c.exec(e);if(h){const[e,o,_,s]=Array.from(h).slice(1).map(parseFloat);if(t(0,100,o)!==o)throw new n(r);if(t(0,100,_)!==_)throw new n(r);return [...l(e,o,_),s||1]}throw new n(r)}const e=t=>parseInt(t.replace(/_/g,""),36),o="1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce((t,n)=>{const r=e(n.substring(0,3)),o=e(n.substring(3)).toString(16);let _="";for(let t=0;t<6-o.length;t++)_+="0";return t[r]=`${_}${o}`,t},{}),_=(t,n)=>Array.from(Array(n)).map(()=>t).join(""),s=new RegExp(`^#${_("([a-f0-9])",3)}([a-f0-9])?$`,"i"),i=new RegExp(`^#${_("([a-f0-9]{2})",3)}([a-f0-9]{2})?$`,"i"),a=new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${_(",\\s*(\\d+)\\s*",2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,"i"),c=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,u=/^[a-z]+$/i,f=t=>Math.round(255*t),l=(t,n,r)=>{let e=r/100;if(0===n)return [e,e,e].map(f);const o=(t%360+360)%360/60,_=(1-Math.abs(2*e-1))*(n/100),s=_*(1-Math.abs(o%2-1));let i=0,a=0,c=0;o>=0&&o<1?(i=_,a=s):o>=1&&o<2?(i=s,a=_):o>=2&&o<3?(a=_,c=s):o>=3&&o<4?(a=s,c=_):o>=4&&o<5?(i=s,c=_):o>=5&&o<6&&(i=_,c=s);const u=e-_/2;return [i+u,a+u,c+u].map(f)};function p(t){const[n,e,o,_]=r(t).map((t,n)=>3===n?t:t/255),s=Math.max(n,e,o),i=Math.min(n,e,o),a=(s+i)/2;if(s===i)return [0,0,a,_];const c=s-i;return [60*(n===s?(e-o)/c+(e<o?6:0):e===s?(o-n)/c+2:(n-e)/c+4),a>.5?c/(2-s-i):c/(s+i),a,_]}function z(n,r,e,o){return `hsla(${(n%360).toFixed()}, ${t(0,100,100*r).toFixed()}%, ${t(0,100,100*e).toFixed()}%, ${parseFloat(t(0,1,o).toFixed(3))})`}
@@ -4255,6 +4321,7 @@ exports.DropdownFieldView = DropdownFieldView;
 exports.EditProfileView = EditProfileView;
 exports.HeroView = HeroView;
 exports.InputFieldView = InputFieldView;
+exports.LeadDropdownFieldView = LeadDropdownFieldView;
 exports.LeadFormView = LeadFormView;
 exports.LeaderboardView = LeaderboardView;
 exports.NameFieldsView = NameFieldsView;