@saasquatch/mint-components 1.14.9-0 → 1.14.9

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

@@ -20,6 +20,7 @@ const sqmAssetCardView = require('./sqm-asset-card-view-21ddf04f.js');
 const sqmCloseButtonView = require('./sqm-close-button-view-ea3fa23b.js');
 require('./index-8c6255f5.js');
 const emailRegistrationView = require('./email-registration-view-55b378dc.js');
+const sqmLeadCheckboxFieldView = require('./sqm-lead-checkbox-field-view-34d94919.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-d39a55d8.js');
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-11d57c12.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-17111896.js');
@@ -35,7 +36,7 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-fe6
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.js');
 require('./ErrorView-b2fcf954.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-15dfc0b6.js');
-const ShadowViewAddon = require('./ShadowViewAddon-3c344355.js');
+const ShadowViewAddon = require('./ShadowViewAddon-28865623.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
 const sqmInvoiceTableView = require('./sqm-invoice-table-view-0f7fa309.js');
 const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-89308aab.js');
@@ -16064,6 +16065,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(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$w))));
+const CustomLabel$3 = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$w, { content: {
+    ...defaultProps$w.content,
+    checkboxLabel: "I Agree",
+  } }))));
+const Error$d = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$w, { states: {
+    ...defaultProps$w.states,
+    leadFormState: {
+      validationErrors: {
+        terms: "{checkboxLabel} Must be checked",
+      },
+    },
+  } }))));
+const CustomError$3 = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.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
@@ -16076,7 +16128,7 @@ const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$u = `
+const Default$v = `
  // No CSS
 `;
 const Orangey = `
@@ -16110,7 +16162,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$u,
+  Default: Default$v,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -18804,6 +18856,7 @@ const stories = [
   LeadForm,
   LeadInputField,
   LeadFormDropdownField,
+  LeadCheckboxField,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/collection/collection-manifest.json

@@ -42,6 +42,7 @@
     "./components/sqm-invoice-table/columns/sqm-invoice-table-data-column.js",
     "./components/sqm-invoice-table/columns/sqm-invoice-table-date-column.js",
     "./components/sqm-invoice-table/columns/sqm-invoice-table-download-column.js",
+    "./components/sqm-lead-form/sqm-lead-checkbox-field.js",
     "./components/sqm-lead-form/sqm-lead-dropdown-field.js",
     "./components/sqm-lead-form/sqm-lead-form.js",
     "./components/sqm-lead-form/sqm-lead-input-field.js",

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field-view.js

@@ -5,7 +5,6 @@ import { intl } from "../../global/global";
 const style = {
   ErrorStyle: {
     "&::part(control)": {
-      background: "var(--sl-color-danger-10)",
       borderColor: "var(--sl-color-danger-500)",
       outline: "var(--sl-color-danger-500)",
     },
@@ -44,7 +43,7 @@ jss.setup(preset());
 const sheet = jss.createStyleSheet(style);
 const styleString = sheet.toString();
 export function CheckboxFieldView(props) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const { states, content, callbacks } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
@@ -54,10 +53,18 @@ export function CheckboxFieldView(props) {
     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.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), required: false }), intl.formatMessage({
+      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
+        if (!value && !content.checkboxOptional) {
+          return content.errorMessage;
+        }
+      } }, (((_e = (_d = states.registrationFormState) === 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 }, content.errorMessage))));
 }

package/dist/collection/components/sqm-lead-form/LeadCheckboxField.stories.js

@@ -0,0 +1,44 @@
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import { LeadCheckboxFieldView, } from "./sqm-lead-checkbox-field-view";
+export default {
+  title: "Components/Lead Checkbox Field",
+};
+const defaultProps = {
+  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",
+  },
+};
+export const Default = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps))));
+export const CustomLabel = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps, { content: {
+    ...defaultProps.content,
+    checkboxLabel: "I Agree",
+  } }))));
+export const Error = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      validationErrors: {
+        terms: "{checkboxLabel} Must be checked",
+      },
+    },
+  } }))));
+export const CustomError = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      validationErrors: {
+        terms: "{checkboxLabel} Must be checked",
+      },
+    },
+  }, content: {
+    ...defaultProps.content,
+    errorMessage: "This checkbox must be checked to continue",
+  } }))));

package/dist/collection/components/sqm-lead-form/sqm-lead-checkbox-field-view.js

@@ -0,0 +1,79 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { intl } from "../../global/global";
+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(preset());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+export 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,
+    })))));
+}

package/dist/collection/components/sqm-lead-form/sqm-lead-checkbox-field.js

@@ -0,0 +1,234 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { RequiredPropsError } from "../../utils/RequiredPropsError";
+import { getMissingProps, getProps } from "../../utils/utils";
+import { LeadCheckboxFieldView, } from "./sqm-lead-checkbox-field-view";
+import { useLeadCheckboxField } from "./useCheckboxField";
+/**
+ * @uiName Lead Form Checkbox Field
+ * @validParents ["sqm-lead-form"]
+ */
+export class LeadCheckboxField {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Checkbox label
+     * @uiWidget textArea
+     */
+    this.checkboxLabel = "By signing up you agree to the {labelLink}";
+    /**
+     * Used with link text if the checkbox label contains {labelLink}
+     *
+     * @uiName Checkbox label link
+     */
+    this.checkboxLabelLink = "https://example.com";
+    /**
+     * @uiName Checkbox label link lext
+     */
+    this.checkboxLabelLinkText = "Terms and Conditions";
+    /**
+     * @uiName Unchecked error message
+     */
+    this.errorMessage = "Must be checked";
+    /**
+     * @uiName Optional
+     */
+    this.checkboxOptional = false;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const missingProps = getMissingProps([
+      {
+        attribute: "checkbox-name",
+        value: this.checkboxName,
+      },
+    ]);
+    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:" }));
+    }
+    const content = {
+      ...getProps(this),
+    };
+    const { states } = isDemo()
+      ? useLeadCheckboxFieldDemo(this)
+      : useLeadCheckboxField();
+    return (h(LeadCheckboxFieldView, { states: states, content: content }));
+  }
+  static get is() { return "sqm-lead-checkbox-field"; }
+  static get properties() { return {
+    "checkboxName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Checkbox name attribute",
+            "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "required"
+          }],
+        "text": "This name is used as the key for this form field on submission. The name must be unique within this specific form."
+      },
+      "attribute": "checkbox-name",
+      "reflect": false
+    },
+    "checkboxLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Checkbox label",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "checkbox-label",
+      "reflect": false,
+      "defaultValue": "\"By signing up you agree to the {labelLink}\""
+    },
+    "checkboxLabelLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Checkbox label link",
+            "name": "uiName"
+          }],
+        "text": "Used with link text if the checkbox label contains {labelLink}"
+      },
+      "attribute": "checkbox-label-link",
+      "reflect": false,
+      "defaultValue": "\"https://example.com\""
+    },
+    "checkboxLabelLinkText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Checkbox label link lext",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "checkbox-label-link-text",
+      "reflect": false,
+      "defaultValue": "\"Terms and Conditions\""
+    },
+    "errorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Unchecked error message",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "error-message",
+      "reflect": false,
+      "defaultValue": "\"Must be checked\""
+    },
+    "checkboxOptional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Optional",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "checkbox-optional",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<LeadCheckboxFieldViewProps>",
+        "resolved": "{ states?: { leadFormState?: LeadFormState; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage?: string; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "LeadCheckboxFieldViewProps": {
+            "location": "import",
+            "path": "./sqm-lead-checkbox-field-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useLeadCheckboxFieldDemo(props) {
+  return deepmerge({
+    states: {
+      leadFormState: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-lead-form/sqm-lead-form.js

@@ -6,6 +6,7 @@ import { LeadFormView } from "./sqm-lead-form-view";
 import { useLeadForm } from "./useLeadForm";
 /**
  * @uiName Lead Form
+ * @canvasRenderer always-replace
  * @slots [{"name":"formData","title":"Additional Fields"}]
  */
 export class LeadForm {

package/dist/collection/components/sqm-lead-form/useCheckboxField.js

@@ -0,0 +1,10 @@
+import { useDomContext } from "@saasquatch/stencil-hooks";
+import { LEAD_FORM_STATE_CONTEXT } from "./useLeadFormState";
+export function useLeadCheckboxField() {
+  const leadFormState = useDomContext(LEAD_FORM_STATE_CONTEXT);
+  return {
+    states: {
+      leadFormState,
+    },
+  };
+}

package/dist/collection/components/sqm-lead-form/useLeadForm.js

@@ -113,7 +113,14 @@ export function useLeadForm(props) {
       validationErrors: {},
     });
     (_b = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.getFormControls()) === null || _b === void 0 ? void 0 : _b.forEach((c) => {
-      c.value = "";
+      var _a;
+      if (((_a = c.input) === null || _a === void 0 ? void 0 : _a.type) === "checkbox") {
+        c.checked = false;
+        c.value = false;
+      }
+      else {
+        c.value = "";
+      }
     });
     setSuccess(false);
   }

package/dist/collection/components/sqm-portal-register/sqm-portal-register.js

@@ -6,6 +6,7 @@ import { PortalRegisterView, } from "./sqm-portal-register-view";
 import { usePortalRegister } from "./usePortalRegister";
 /**
  * @uiName Microsite Registration
+ * @canvasRenderer always-replace
  * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"}]
  */
 export class PortalRegister {

package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form.js

@@ -6,6 +6,7 @@ import { PortalRegistrationFormView, } from "./sqm-portal-registration-form-view
 import { usePortalRegistrationForm } from "./usePortalRegistrationForm";
 /**
  * @uiName Microsite Registration
+ * @canvasRenderer always-replace
  * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"},{"name":"emailOptIn","title":"Email Opt-in Fields"}]
  */
 export class PortalRegistrationForm {

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -100,6 +100,7 @@ import * as QRCode from "../sqm-qr-code/QRCode.stories";
 import * as LeadForm from "../sqm-lead-form/LeadForm.stories";
 import * as LeadInputField from "../sqm-lead-form/LeadInputField.stories";
 import * as LeadFormDropdownField from "../sqm-lead-form/LeadFormDropdownField.stories";
+import * as LeadCheckboxField from "../sqm-lead-form/LeadCheckboxField.stories";
 import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -205,6 +206,7 @@ const stories = [
   LeadForm,
   LeadInputField,
   LeadFormDropdownField,
+  LeadCheckboxField,
 ];
 /**
  * For internal documentation

package/dist/esm/{ShadowViewAddon-64194d20.js → ShadowViewAddon-f2176779.js}

@@ -1663,7 +1663,6 @@ function PortalRegisterView(props) {
 const style$4 = {
   ErrorStyle: {
     "&::part(control)": {
-      background: "var(--sl-color-danger-10)",
       borderColor: "var(--sl-color-danger-500)",
       outline: "var(--sl-color-danger-500)",
     },
@@ -1702,8 +1701,9 @@ jss.setup(create());
 const sheet$4 = jss.createStyleSheet(style$4);
 const styleString$4 = sheet$4.toString();
 function CheckboxFieldView(props) {
-  var _b, _c;
+  var _a, _b, _c, _d, _e;
   const { states, content, callbacks } = props;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (h("div", { class: sheet$4.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle$2,
@@ -1711,12 +1711,20 @@ function CheckboxFieldView(props) {
     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.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), required: false }), intl.formatMessage({
+      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
+        if (!value && !content.checkboxOptional) {
+          return content.errorMessage;
+        }
+      } }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.checkboxName]) ? {
+      class: sheet$4.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$4.classes.ErrorMessageStyle }, content.errorMessage))));
 }
 
 function ChangeMarktingView(props) {