@saasquatch/mint-components 1.6.2-2 → 1.7.0-1

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,
+      }))))));
+}

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

@@ -1,234 +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 { CheckboxFieldView, } from "./sqm-checkbox-field-view";
-import { useCheckboxField } from "./useCheckboxField";
-/**
- * @uiName Checkbox Field
- */
-export class CheckboxField {
-  constructor() {
-    this.ignored = true;
-    /**
-     * @uiName Checkbox Label
-     */
-    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 Text
-     */
-    this.checkboxLabelLinkText = "Terms and Conditions";
-    /**
-     * @uiName Unchecked Error Message
-     */
-    this.errorMessage = "Must be checked";
-    /**
-     * @uiName Optional
-     * @default
-     */
-    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, callbacks } = isDemo()
-      ? useCheckboxFieldDemo(this)
-      : useCheckboxField();
-    return (h(CheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
-  }
-  static get is() { return "sqm-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": ""
-      },
-      "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": ""
-      },
-      "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": false,
-      "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": false,
-      "docs": {
-        "tags": [{
-            "text": "Checkbox Label Link Text",
-            "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": false,
-      "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": undefined,
-            "name": "default"
-          }],
-        "text": ""
-      },
-      "attribute": "checkbox-optional",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<CheckboxFieldViewProps>",
-        "resolved": "{ states?: { validationErrors?: ValidationErrors; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage: string; }; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          },
-          "CheckboxFieldViewProps": {
-            "location": "import",
-            "path": "./sqm-checkbox-field-view"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
-function useCheckboxFieldDemo(props) {
-  return deepmerge({
-    states: {
-      validationErrors: [],
-      checked: false,
-    },
-    callbacks: {
-      setChecked: () => { },
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
+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 { CheckboxFieldView, } from "./sqm-checkbox-field-view";
+import { useCheckboxField } from "./useCheckboxField";
+/**
+ * @uiName Checkbox Field
+ */
+export class CheckboxField {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Checkbox Label
+     */
+    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 Text
+     */
+    this.checkboxLabelLinkText = "Terms and Conditions";
+    /**
+     * @uiName Unchecked Error Message
+     */
+    this.errorMessage = "Must be checked";
+    /**
+     * @uiName Optional
+     * @default
+     */
+    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, callbacks } = isDemo()
+      ? useCheckboxFieldDemo(this)
+      : useCheckboxField();
+    return (h(CheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
+  }
+  static get is() { return "sqm-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": ""
+      },
+      "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": ""
+      },
+      "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": false,
+      "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": false,
+      "docs": {
+        "tags": [{
+            "text": "Checkbox Label Link Text",
+            "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": false,
+      "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": undefined,
+            "name": "default"
+          }],
+        "text": ""
+      },
+      "attribute": "checkbox-optional",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<CheckboxFieldViewProps>",
+        "resolved": "{ states?: { validationErrors?: ValidationErrors; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage: string; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "CheckboxFieldViewProps": {
+            "location": "import",
+            "path": "./sqm-checkbox-field-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useCheckboxFieldDemo(props) {
+  return deepmerge({
+    states: {
+      validationErrors: [],
+      checked: false,
+    },
+    callbacks: {
+      setChecked: () => { },
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

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

@@ -1,16 +1,16 @@
-import { useDomContext } from "@saasquatch/stencil-hooks";
-import { useState } from "@saasquatch/universal-hooks";
-import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
-export function useCheckboxField() {
-  const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
-  const [checked, setChecked] = useState(false);
-  return {
-    states: {
-      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
-      checked,
-    },
-    callbacks: {
-      setChecked,
-    },
-  };
-}
+import { useDomContext } from "@saasquatch/stencil-hooks";
+import { useState } from "@saasquatch/universal-hooks";
+import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
+export function useCheckboxField() {
+  const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
+  const [checked, setChecked] = useState(false);
+  return {
+    states: {
+      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
+      checked,
+    },
+    callbacks: {
+      setChecked,
+    },
+  };
+}