@saasquatch/mint-components 1.14.8 → 1.14.9-0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "1.14.8",
+  "version": "1.14.9-0",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",

package/dist/cjs/sqm-lead-checkbox-field-view-34d94919.js

@@ -1,83 +0,0 @@
-'use strict';
-
-const index = require('./index-a29c60ef.js');
-const global = require('./global-e31dc4f5.js');
-const JSS = require('./JSS-8503a151.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.jss.setup(JSS.create());
-const sheet = JSS.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, }) => global.intl.formatMessage({
-    id: `requiredFieldErrorMessage-${checkboxLabel}`,
-    defaultMessage: content.errorMessage,
-  }, {
-    checkboxLabel,
-  });
-  return (index.h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    index.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,
-    }
-      : [])), global.intl.formatMessage({
-      id: content.checkboxName + "-message",
-      defaultMessage: content.checkboxLabel,
-    }, {
-      labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
-    })),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
-      checkboxLabel: content.checkboxLabel,
-    })))));
-}
-
-exports.LeadCheckboxFieldView = LeadCheckboxFieldView;

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

@@ -1,81 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-e31dc4f5.js');
-const index_module = require('./index.module-ee84433d.js');
-const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-6847bc06.js');
-require('./JSS-8503a151.js');
-const useLeadFormState = require('./useLeadFormState-c83d2034.js');
-const sqmLeadCheckboxFieldView = require('./sqm-lead-checkbox-field-view-34d94919.js');
-
-function useLeadCheckboxField() {
-  const leadFormState = stencilHooks_module.d(useLeadFormState.LEAD_FORM_STATE_CONTEXT);
-  return {
-    states: {
-      leadFormState,
-    },
-  };
-}
-
-const LeadCheckboxField = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    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;
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const missingProps = utils.getMissingProps([
-      {
-        attribute: "checkbox-name",
-        value: this.checkboxName,
-      },
-    ]);
-    if (!index_module.isDemo() && missingProps) {
-      return (index.h(useLeadFormState.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 = {
-      ...utils.getProps(this),
-    };
-    const { states } = index_module.isDemo()
-      ? useLeadCheckboxFieldDemo(this)
-      : useLeadCheckboxField();
-    return (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, { states: states, content: content }));
-  }
-};
-function useLeadCheckboxFieldDemo(props) {
-  return cjs.cjs({
-    states: {
-      leadFormState: {},
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
-exports.sqm_lead_checkbox_field = LeadCheckboxField;

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

@@ -1,44 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,234 +0,0 @@
-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/useCheckboxField.js

@@ -1,10 +0,0 @@
-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/esm/sqm-lead-checkbox-field-view-a8c1c78e.js

@@ -1,81 +0,0 @@
-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 };