@saasquatch/mint-components 1.14.7-5 → 1.14.7-7

package/dist/esm/sqm-lead-checkbox-field-view-a8c1c78e.js

@@ -0,0 +1,81 @@
+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: {
+    "&::part(control)": {
+      borderColor: "var(--sl-color-danger-500)",
+      outline: "var(--sl-color-danger-500)",
+    },
+    "&:host": {
+      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
+    },
+  },
+  ErrorMessageStyle: {
+    margin: 0,
+    marginTop: "5px",
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-input-help-text-font-size-medium)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+  },
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-checkbox::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: 20px;
+}
+sl-checkbox::part(base){
+  align-items: start;
+}
+`;
+jss.setup(create());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+function LeadCheckboxFieldView(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 = ({ checkboxLabel, }) => intl.formatMessage({
+    id: `requiredFieldErrorMessage-${checkboxLabel}`,
+    defaultMessage: content.errorMessage,
+  }, {
+    checkboxLabel,
+  });
+  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, "onSl-change": (e) => {
+        e.target.value = e.target.checked;
+      } }, (!content.checkboxOptional ? { required: false } : []), { 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.checkboxOptional) {
+          return getRequiredFieldErrorMessage({
+            checkboxLabel: content.checkboxLabel,
+          });
+        }
+      } }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.checkboxName]) ? {
+      class: sheet.classes.ErrorStyle,
+    }
+      : [])), intl.formatMessage({
+      id: content.checkboxName + "-message",
+      defaultMessage: content.checkboxLabel,
+    }, {
+      labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
+    })),
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
+      checkboxLabel: content.checkboxLabel,
+    })))));
+}
+
+export { LeadCheckboxFieldView as L };

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

@@ -1,107 +1,18 @@
-import { h, r as registerInstance } from './index-91e7729f.js';
-import { i as d, k as useState, f as useEffect, n as h$1 } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-be1f9992.js';
+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 { j as jss, a as create } from './JSS-67b5cff8.js';
+import './JSS-67b5cff8.js';
 import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-9016d812.js';
+import { L as LeadCheckboxFieldView } from './sqm-lead-checkbox-field-view-a8c1c78e.js';
 
-const style = {
-  ErrorStyle: {
-    "&::part(control)": {
-      background: "var(--sl-color-danger-10)",
-      borderColor: "var(--sl-color-danger-500)",
-      outline: "var(--sl-color-danger-500)",
-    },
-    "&:host": {
-      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
-    },
-  },
-  ErrorMessageStyle: {
-    margin: 0,
-    marginTop: "5px",
-    color: "var(--sl-color-danger-500)",
-    fontSize: "var(--sl-input-help-text-font-size-medium)",
-    fontFamily: "var(--sl-font-sans)",
-    fontWeight: "var(--sl-font-weight-normal)",
-  },
-  FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
-  },
-};
-const vanillaStyle = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-sl-checkbox::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-normal);
-  line-height: 20px;
-}
-sl-checkbox::part(base){
-  align-items: start;
-}
-`;
-jss.setup(create());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
-function LeadCheckboxFieldView(props) {
-  var _a, _b, _c, _d, _e;
-  const { states, content, callbacks } = props;
-  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  const getRequiredFieldErrorMessage = ({ checkboxLabel, }) => intl.formatMessage({
-    id: `requiredFieldErrorMessage-${checkboxLabel}`,
-    defaultMessage: content.errorMessage,
-  }, {
-    checkboxLabel,
-  });
-  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
-        e.target.value = e.target.checked;
-        callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: false } : []), { 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.checkboxOptional) {
-          return getRequiredFieldErrorMessage({
-            checkboxLabel: content.checkboxLabel,
-          });
-        }
-      } }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.checkboxName]) ? {
-      class: sheet.classes.ErrorStyle,
-    }
-      : [])), intl.formatMessage({
-      id: content.checkboxName + "-message",
-      defaultMessage: content.checkboxLabel,
-    }, {
-      labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
-    })),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
-      checkboxLabel: content.checkboxLabel,
-    })))));
-}
-
-function useLeadCheckboxField(props) {
-  var _a;
+function useLeadCheckboxField() {
   const leadFormState = d(LEAD_FORM_STATE_CONTEXT);
-  const [checked, setChecked] = useState(false);
-  useEffect(() => {
-    var _a, _b;
-    if ((_a = leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]) {
-      setChecked(!!((_b = leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.initialData) === null || _b === void 0 ? void 0 : _b[props.checkboxName]));
-    }
-  }, [(_a = leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]]);
   return {
     states: {
       leadFormState,
-      checked,
-    },
-    callbacks: {
-      setChecked,
     },
   };
 }
@@ -128,12 +39,12 @@ const LeadCheckboxField = class {
     /**
      * @uiName Unchecked error message
      */
-    this.errorMessage = "{checkboxLabel} must be checked";
+    this.errorMessage = "Must be checked";
     /**
      * @uiName Optional
      */
     this.checkboxOptional = false;
-    h$1(this);
+    h(this);
   }
   disconnectedCallback() { }
   render() {
@@ -144,25 +55,21 @@ const LeadCheckboxField = class {
       },
     ]);
     if (!isDemo() && missingProps) {
-      return (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 (h$1(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 = {
       ...getProps(this),
     };
-    const { states, callbacks } = isDemo()
+    const { states } = isDemo()
       ? useLeadCheckboxFieldDemo(this)
-      : useLeadCheckboxField(this);
-    return (h(LeadCheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
+      : useLeadCheckboxField();
+    return (h$1(LeadCheckboxFieldView, { states: states, content: content }));
   }
 };
 function useLeadCheckboxFieldDemo(props) {
   return cjs({
     states: {
-      registrationFormState: {},
-      checked: false,
-    },
-    callbacks: {
-      setChecked: () => { },
+      leadFormState: {},
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/esm/sqm-stencilbook.entry.js

@@ -16,6 +16,7 @@ import { A as AssetCardView } from './sqm-asset-card-view-fe5db3c0.js';
 import { C as CloseButtonView } from './sqm-close-button-view-f9819751.js';
 import './index-ffa26b43.js';
 import { E as EmailRegistrationView } from './email-registration-view-a7818cf2.js';
+import { L as LeadCheckboxFieldView } from './sqm-lead-checkbox-field-view-a8c1c78e.js';
 import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-753c8d4a.js';
 import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-8ef8180f.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-9d802b78.js';
@@ -16060,6 +16061,57 @@ const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
   WithInitialValue: WithInitialValue$1
 });
 
+const LeadCheckboxField_stories = {
+  title: "Components/Lead Checkbox Field",
+};
+const defaultProps$w = {
+  states: {
+    leadFormState: {
+      validationErrors: {},
+    },
+  },
+  content: {
+    checkboxName: "terms",
+    checkboxLabel: "By signing up you agree to the {labelLink}",
+    checkboxLabelLink: "https://example.com",
+    checkboxLabelLinkText: "Terms and Conditions",
+    errorMessage: "{checkboxLabel} Must be checked",
+  },
+};
+const Default$u = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps$w))));
+const CustomLabel$3 = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps$w, { content: {
+    ...defaultProps$w.content,
+    checkboxLabel: "I Agree",
+  } }))));
+const Error$d = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps$w, { states: {
+    ...defaultProps$w.states,
+    leadFormState: {
+      validationErrors: {
+        terms: "{checkboxLabel} Must be checked",
+      },
+    },
+  } }))));
+const CustomError$3 = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps$w, { states: {
+    ...defaultProps$w.states,
+    leadFormState: {
+      validationErrors: {
+        terms: "{checkboxLabel} Must be checked",
+      },
+    },
+  }, content: {
+    ...defaultProps$w.content,
+    errorMessage: "This checkbox must be checked to continue",
+  } }))));
+
+const LeadCheckboxField = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': LeadCheckboxField_stories,
+  Default: Default$u,
+  CustomLabel: CustomLabel$3,
+  Error: Error$d,
+  CustomError: CustomError$3
+});
+
 /**
  *
  * Themes
@@ -16072,7 +16124,7 @@ const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$u = `
+const Default$v = `
  // No CSS
 `;
 const Orangey = `
@@ -16106,7 +16158,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$u,
+  Default: Default$v,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -18800,6 +18852,7 @@ const stories = [
   LeadForm,
   LeadInputField,
   LeadFormDropdownField,
+  LeadCheckboxField,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {