@saasquatch/mint-components 1.6.1 → 1.6.2-10

package/dist/collection/components/sqm-card-feed/sqm-card-feed.js

@@ -1,82 +1,82 @@
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop, State } from "@stencil/core";
-import { getProps } from "../../utils/utils";
-import { CardFeedView } from "./sqm-card-feed-view";
-/**
- * @uiName Card Feed
- * @slots [{"name":"","title":"Cards"}]
- * @exampleGroup Rewards
- * @example Task Card Feed - <sqm-card-feed gap="24" width="347"> <sqm-task-card reward-amount="20" goal="1" card-title="Complete a Survey" description="Fill out our NPS survey and get 20 points for giving us honest feedback." button-text="Take survey" reward-unit="Points" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 250 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on Twitter" description="Earn 50 points when you follow us on Twitter!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> </sqm-card-feed>
- */
-export class CardFeed {
-  constructor() {
-    this.ignored = true;
-    /**
-     * @uiName Card Width
-     */
-    this.width = 347;
-    /**
-     * @uiName Column Gap
-     * @uiType number
-     */
-    this.gap = 24;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    return (h(CardFeedView, Object.assign({}, getProps(this)),
-      h("slot", null)));
-  }
-  static get is() { return "sqm-card-feed"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "width": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Card Width",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "width",
-      "reflect": false,
-      "defaultValue": "347"
-    },
-    "gap": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Column Gap",
-            "name": "uiName"
-          }, {
-            "text": "number",
-            "name": "uiType"
-          }],
-        "text": ""
-      },
-      "attribute": "gap",
-      "reflect": false,
-      "defaultValue": "24"
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { CardFeedView } from "./sqm-card-feed-view";
+/**
+ * @uiName Card Feed
+ * @slots [{"name":"","title":"Cards"}]
+ * @exampleGroup Rewards
+ * @example Task Card Feed - <sqm-card-feed gap="24" width="347"> <sqm-task-card reward-amount="20" goal="1" card-title="Complete a Survey" description="Fill out our NPS survey and get 20 points for giving us honest feedback." button-text="Take survey" reward-unit="Points" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 250 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on Twitter" description="Earn 50 points when you follow us on Twitter!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> </sqm-card-feed>
+ */
+export class CardFeed {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Card Width
+     */
+    this.width = 347;
+    /**
+     * @uiName Column Gap
+     * @uiType number
+     */
+    this.gap = 24;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(CardFeedView, Object.assign({}, getProps(this)),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-card-feed"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "width": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Card Width",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "347"
+    },
+    "gap": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Column Gap",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }],
+        "text": ""
+      },
+      "attribute": "gap",
+      "reflect": false,
+      "defaultValue": "24"
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-checkbox-field/CheckboxField.stories.js

@@ -1,91 +1,91 @@
-import { h } from "@stencil/core";
-import { PortalRegisterView, } from "../sqm-portal-register/sqm-portal-register-view";
-import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
-import { CheckboxFieldView, } from "./sqm-checkbox-field-view";
-import scenario from "./sqm-checkbox-field.feature";
-export default {
-  title: "Components/Checkbox Field",
-  parameters: {
-    scenario,
-  },
-};
-const defaultProps = {
-  states: {
-    validationErrors: {},
-    checked: false,
-  },
-  content: {
-    checkboxName: "agree",
-    checkboxLabel: "By signing up you agree to the {labelLink}",
-    checkboxLabelLink: "https://example.com",
-    checkboxLabelLinkText: "Terms and Conditions",
-    errorMessage: "Must be checked",
-  },
-  callbacks: {
-    setChecked: () => { },
-  },
-};
-const defaultRegisterProps = {
-  states: {
-    error: "",
-    loading: false,
-    confirmPassword: true,
-    hideInputs: false,
-    loginPath: "/login",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
-  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
-};
-export const Default = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps))));
-export const DefaultChecked = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { states: {
-    ...defaultProps.states,
-    checked: true,
-  } }))));
-export const CustomLabel = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { content: {
-    ...defaultProps.content,
-    checkboxLabel: "I Agree",
-  } }))));
-export const Error = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { states: {
-    ...defaultProps.states,
-    validationErrors: {
-      agree: "Must be checked",
-    },
-  } }))));
-export const CustomError = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { states: {
-    ...defaultProps.states,
-    validationErrors: {
-      agree: "Must be checked",
-    },
-  }, content: {
-    ...defaultProps.content,
-    errorMessage: "This checkbox must be checked to continue",
-  } }))));
-export const TermsAndConditions = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
-  //@ts-ignore
-  content: {
-    ...defaultRegisterProps.content,
-    terms: (h("p", null,
-      h("sqm-checkbox-field", null))),
-  } }))));
-export const TermsAndConditionsCustomLabel = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
-  //@ts-ignore
-  content: {
-    ...defaultRegisterProps.content,
-    terms: (h("p", null,
-      "By signing up you agree to the",
-      " ",
-      h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"),
-      h("sqm-checkbox-field", { "checkbox-label": "I agree" }))),
-  } }))));
-export const TermsAndConditionsLongCustomLabel = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
-  //@ts-ignore
-  content: {
-    ...defaultRegisterProps.content,
-    terms: (h("sqm-checkbox-field", { "checkbox-label": "Participants must be at least 18 years of age and a legal resident of the U.S. or Canada. By signing up to participate in the rewards program, you agree to the {labelLink}.", "checkbox-label-link": "https://www.example.com", "checkbox-label-link-text": "terms", "checkbox-name": "termsAndConditions" })),
-  } }))));
+import { h } from "@stencil/core";
+import { PortalRegisterView, } from "../sqm-portal-register/sqm-portal-register-view";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import { CheckboxFieldView, } from "./sqm-checkbox-field-view";
+import scenario from "./sqm-checkbox-field.feature";
+export default {
+  title: "Components/Checkbox Field",
+  parameters: {
+    scenario,
+  },
+};
+const defaultProps = {
+  states: {
+    validationErrors: {},
+    checked: false,
+  },
+  content: {
+    checkboxName: "agree",
+    checkboxLabel: "By signing up you agree to the {labelLink}",
+    checkboxLabelLink: "https://example.com",
+    checkboxLabelLinkText: "Terms and Conditions",
+    errorMessage: "Must be checked",
+  },
+  callbacks: {
+    setChecked: () => { },
+  },
+};
+const defaultRegisterProps = {
+  states: {
+    error: "",
+    loading: false,
+    confirmPassword: true,
+    hideInputs: false,
+    loginPath: "/login",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
+};
+export const Default = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps))));
+export const DefaultChecked = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    checked: true,
+  } }))));
+export const CustomLabel = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { content: {
+    ...defaultProps.content,
+    checkboxLabel: "I Agree",
+  } }))));
+export const Error = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    validationErrors: {
+      agree: "Must be checked",
+    },
+  } }))));
+export const CustomError = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    validationErrors: {
+      agree: "Must be checked",
+    },
+  }, content: {
+    ...defaultProps.content,
+    errorMessage: "This checkbox must be checked to continue",
+  } }))));
+export const TermsAndConditions = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+  //@ts-ignore
+  content: {
+    ...defaultRegisterProps.content,
+    terms: (h("p", null,
+      h("sqm-checkbox-field", null))),
+  } }))));
+export const TermsAndConditionsCustomLabel = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+  //@ts-ignore
+  content: {
+    ...defaultRegisterProps.content,
+    terms: (h("p", null,
+      "By signing up you agree to the",
+      " ",
+      h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"),
+      h("sqm-checkbox-field", { "checkbox-label": "I agree" }))),
+  } }))));
+export const TermsAndConditionsLongCustomLabel = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+  //@ts-ignore
+  content: {
+    ...defaultRegisterProps.content,
+    terms: (h("sqm-checkbox-field", { "checkbox-label": "Participants must be at least 18 years of age and a legal resident of the U.S. or Canada. By signing up to participate in the rewards program, you agree to the {labelLink}.", "checkbox-label-link": "https://www.example.com", "checkbox-label-link-text": "terms", "checkbox-name": "termsAndConditions" })),
+  } }))));

package/dist/collection/components/sqm-checkbox-field/UseCheckboxField.stories.js

@@ -1,68 +1,68 @@
-import { setUserIdentity } from "@saasquatch/component-boilerplate";
-import { useEffect } from "@saasquatch/universal-hooks";
-import { h } from "@stencil/core";
-import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
-import scenario from "./sqm-checkbox-field.feature";
-export default {
-  title: "Hooks / useCheckboxField",
-  parameters: {
-    scenario,
-  },
-};
-function setupGraphQL() {
-  const id = "testestest";
-  const accountId = id;
-  const programId = "sam-partner-test-2";
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_a8b41jotf8a1v",
-    appDomain: "https://staging.referralsaasquatch.com",
-    programId,
-  };
-  useEffect(() => {
-    setUserIdentity({
-      accountId,
-      id,
-      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
-    });
-    return () => {
-      window.widgetIdent = undefined;
-      setUserIdentity(undefined);
-    };
-  }, []);
-  return { id, accountId };
-}
-export const TermsAndConditions = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("div", { slot: "terms" },
-      h("sqm-checkbox-field", { "checkbox-name": "terms" }))));
-});
-export const TermsAndConditionsWithLabel = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("div", { slot: "terms" },
-      h("sqm-checkbox-field", { "checkbox-label": "I agree", "checkbox-name": "terms" }))));
-});
-export const MultipleCheckboxes = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("sqm-name-fields", { slot: "formData" }),
-    h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "error-message": "Cannot be a robot", "checkbox-name": "isHuman" }),
-    h("div", { slot: "terms" },
-      h("sqm-checkbox-field", { "checkbox-name": "otherCheckbox" }))));
-});
-export const OptionalCheckboxes = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("sqm-name-fields", { slot: "formData" }),
-    h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "checkbox-optional": "true", "checkbox-name": "isHuman" }),
-    h("div", { slot: "terms" },
-      h("sqm-checkbox-field", { "checkbox-name": "required" }))));
-});
-export const MissingName = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("div", { slot: "terms" },
-      h("sqm-checkbox-field", null))));
-});
+import { setUserIdentity } from "@saasquatch/component-boilerplate";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import scenario from "./sqm-checkbox-field.feature";
+export default {
+  title: "Hooks / useCheckboxField",
+  parameters: {
+    scenario,
+  },
+};
+function setupGraphQL() {
+  const id = "testestest";
+  const accountId = id;
+  const programId = "sam-partner-test-2";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a8b41jotf8a1v",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+export const TermsAndConditions = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("div", { slot: "terms" },
+      h("sqm-checkbox-field", { "checkbox-name": "terms" }))));
+});
+export const TermsAndConditionsWithLabel = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("div", { slot: "terms" },
+      h("sqm-checkbox-field", { "checkbox-label": "I agree", "checkbox-name": "terms" }))));
+});
+export const MultipleCheckboxes = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-name-fields", { slot: "formData" }),
+    h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "error-message": "Cannot be a robot", "checkbox-name": "isHuman" }),
+    h("div", { slot: "terms" },
+      h("sqm-checkbox-field", { "checkbox-name": "otherCheckbox" }))));
+});
+export const OptionalCheckboxes = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-name-fields", { slot: "formData" }),
+    h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "checkbox-optional": "true", "checkbox-name": "isHuman" }),
+    h("div", { slot: "terms" },
+      h("sqm-checkbox-field", { "checkbox-name": "required" }))));
+});
+export const MissingName = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("div", { slot: "terms" },
+      h("sqm-checkbox-field", null))));
+});

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

@@ -1,71 +1,71 @@
-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)": {
-      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(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
-export function CheckboxFieldView(props) {
-  const { states, content, callbacks } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
-  return (h("div", { class: sheet.classes.FieldContainer },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    h("sl-checkbox", Object.assign({ exportparts: "label: input-label", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
-        e.target.value = e.target.checked;
-        callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: true } : []), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[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)),
-      }),
-      !states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, intl.formatMessage({
-        id: `errorMessage-${content.checkboxName}`,
-        defaultMessage: content.errorMessage,
-      }))))));
-}
+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)": {
+      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(preset());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+export function CheckboxFieldView(props) {
+  const { states, content, callbacks } = props;
+  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  return (h("div", { class: sheet.classes.FieldContainer },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h("sl-checkbox", Object.assign({ exportparts: "label: input-label", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
+        e.target.value = e.target.checked;
+        callbacks.setChecked(e.target.value);
+      } }, (!content.checkboxOptional ? { required: true } : []), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[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)),
+      }),
+      !states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, intl.formatMessage({
+        id: `errorMessage-${content.checkboxName}`,
+        defaultMessage: content.errorMessage,
+      }))))));
+}