@saasquatch/mint-components 1.14.6-9 → 1.14.7-0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "1.14.6-9",
+  "version": "1.14.7-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-dropdown-field-view-03a3e03f.js

@@ -1,69 +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: {
-    "--sl-input-border-color": "var(--sl-color-danger-500)",
-    "--sl-input-background-color": "var(--sl-color-danger-10)",
-    "--sl-input-border-color-focus": "var(--sl-color-danger-500)",
-    "--sl-input-border-color-hover": "var(--sl-color-danger-500)",
-  },
-  ErrorMessageStyle: {
-    margin: 0,
-    color: "var(--sl-color-danger-500)",
-    fontSize: "var(--sl-input-help-text-font-size-medium)",
-  },
-  FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
-  },
-};
-const vanillaStyle = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-sl-select::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-}
-`;
-JSS.jss.setup(JSS.create());
-const sheet = JSS.jss.createStyleSheet(style);
-const styleString = sheet.toString();
-function LeadDropdownFieldView(props) {
-  var _a, _b, _c, _d, _e, _f, _g;
-  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 = ({ dropdownLabel, }) => global.intl.formatMessage({
-    id: "requiredFieldErrorMessage",
-    defaultMessage: content.requiredFieldErrorMessage,
-  }, {
-    dropdownLabel,
-  });
-  return (index.h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    index.h("sl-select", Object.assign({ exportparts: "label: input-label, base: input-base", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { 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) {
-          return getRequiredFieldErrorMessage({
-            dropdownLabel: content.dropdownLabel,
-          });
-        }
-      } }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e.firstName) ? {
-      class: sheet.classes.ErrorStyle,
-      helpText: ((_g = (_f = states.leadFormState) === null || _f === void 0 ? void 0 : _f.validationErrors) === null || _g === void 0 ? void 0 : _g.firstName) ||
-        content.requiredFieldErrorMessage,
-    }
-      : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet.classes.ErrorMessageStyle }, global.intl.formatMessage({
-      id: `errorMessage-${content.dropdownName}`,
-      defaultMessage: content.requiredFieldErrorMessage,
-    })))));
-}
-
-exports.LeadDropdownFieldView = LeadDropdownFieldView;

package/dist/cjs/sqm-lead-dropdown-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 sqmLeadDropdownFieldView = require('./sqm-lead-dropdown-field-view-03a3e03f.js');
-
-function useLeadDropdownField() {
-  const leadFormState = stencilHooks_module.d(useLeadFormState.LEAD_FORM_STATE_CONTEXT);
-  return {
-    states: {
-      leadFormState,
-    },
-  };
-}
-
-const LeadDropdownField = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * @uiName Dropdown label
-     */
-    this.dropdownLabel = "Select an option";
-    /**
-     * The message to be displayed when a required field is not filled.
-     *
-     * @uiName Required field message
-     * @uiWidget textArea
-     */
-    this.requiredFieldErrorMessage = "Please select a {dropdownLabel}";
-    /**
-     * @uiName Optional
-     * @default
-     */
-    this.dropdownOptional = false;
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const missingProps = utils.getMissingProps([
-      {
-        attribute: "dropdown-name",
-        value: this.dropdownName,
-      },
-    ]);
-    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 drop down field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }, index.h("slot", null)));
-    }
-    const content = {
-      ...utils.getProps(this),
-      selectOptions: index.h("slot", null),
-    };
-    const { states } = index_module.isDemo()
-      ? useLeadDropdownFieldDemo(this)
-      : useLeadDropdownField();
-    return (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, { states: states, content: content }));
-  }
-};
-function useLeadDropdownFieldDemo(props) {
-  return cjs.cjs({
-    states: {
-      leadFormState: {},
-    },
-    content: {
-      dropdownName: props.dropdownName,
-      dropdownLabel: props.dropdownLabel,
-      requiredFieldErrorMessage: props.requiredFieldErrorMessage,
-      dropdownOptional: props.dropdownOptional,
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
-exports.sqm_lead_dropdown_field = LeadDropdownField;

package/dist/esm/sqm-lead-dropdown-field-view-4c85fe20.js

@@ -1,67 +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: {
-    "--sl-input-border-color": "var(--sl-color-danger-500)",
-    "--sl-input-background-color": "var(--sl-color-danger-10)",
-    "--sl-input-border-color-focus": "var(--sl-color-danger-500)",
-    "--sl-input-border-color-hover": "var(--sl-color-danger-500)",
-  },
-  ErrorMessageStyle: {
-    margin: 0,
-    color: "var(--sl-color-danger-500)",
-    fontSize: "var(--sl-input-help-text-font-size-medium)",
-  },
-  FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
-  },
-};
-const vanillaStyle = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-sl-select::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-}
-`;
-jss.setup(create());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
-function LeadDropdownFieldView(props) {
-  var _a, _b, _c, _d, _e, _f, _g;
-  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 = ({ dropdownLabel, }) => intl.formatMessage({
-    id: "requiredFieldErrorMessage",
-    defaultMessage: content.requiredFieldErrorMessage,
-  }, {
-    dropdownLabel,
-  });
-  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    h("sl-select", Object.assign({ exportparts: "label: input-label, base: input-base", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { 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) {
-          return getRequiredFieldErrorMessage({
-            dropdownLabel: content.dropdownLabel,
-          });
-        }
-      } }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e.firstName) ? {
-      class: sheet.classes.ErrorStyle,
-      helpText: ((_g = (_f = states.leadFormState) === null || _f === void 0 ? void 0 : _f.validationErrors) === null || _g === void 0 ? void 0 : _g.firstName) ||
-        content.requiredFieldErrorMessage,
-    }
-      : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, intl.formatMessage({
-      id: `errorMessage-${content.dropdownName}`,
-      defaultMessage: content.requiredFieldErrorMessage,
-    })))));
-}
-
-export { LeadDropdownFieldView as L };

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

@@ -1,77 +0,0 @@
-import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
-import { i as d, n as h } from './stencil-hooks.module-4bc38af4.js';
-import './global-be1f9992.js';
-import { i as isDemo } from './index.module-89a79f66.js';
-import { c as cjs } from './cjs-bdfb4486.js';
-import { a as getMissingProps, g as getProps } from './utils-334c1e34.js';
-import './JSS-67b5cff8.js';
-import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-9016d812.js';
-import { L as LeadDropdownFieldView } from './sqm-lead-dropdown-field-view-4c85fe20.js';
-
-function useLeadDropdownField() {
-  const leadFormState = d(LEAD_FORM_STATE_CONTEXT);
-  return {
-    states: {
-      leadFormState,
-    },
-  };
-}
-
-const LeadDropdownField = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * @uiName Dropdown label
-     */
-    this.dropdownLabel = "Select an option";
-    /**
-     * The message to be displayed when a required field is not filled.
-     *
-     * @uiName Required field message
-     * @uiWidget textArea
-     */
-    this.requiredFieldErrorMessage = "Please select a {dropdownLabel}";
-    /**
-     * @uiName Optional
-     * @default
-     */
-    this.dropdownOptional = false;
-    h(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const missingProps = getMissingProps([
-      {
-        attribute: "dropdown-name",
-        value: this.dropdownName,
-      },
-    ]);
-    if (!isDemo() && missingProps) {
-      return (h$1(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this drop down field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }, h$1("slot", null)));
-    }
-    const content = {
-      ...getProps(this),
-      selectOptions: h$1("slot", null),
-    };
-    const { states } = isDemo()
-      ? useLeadDropdownFieldDemo(this)
-      : useLeadDropdownField();
-    return (h$1(LeadDropdownFieldView, { states: states, content: content }));
-  }
-};
-function useLeadDropdownFieldDemo(props) {
-  return cjs({
-    states: {
-      leadFormState: {},
-    },
-    content: {
-      dropdownName: props.dropdownName,
-      dropdownLabel: props.dropdownLabel,
-      requiredFieldErrorMessage: props.requiredFieldErrorMessage,
-      dropdownOptional: props.dropdownOptional,
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
-export { LeadDropdownField as sqm_lead_dropdown_field };