@saasquatch/mint-components 1.5.3-1 → 1.5.3-10

package/CHANGELOG.md

@@ -7,6 +7,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.5.3] - 2022-03-31
+
+### Added
+- Input component added for use in \<sqm-portal-register>
+- Added Component:
+  - \<sqm-input-field>
+    - Required by default but can be optional with the `field-optional` prop
+    - Field label and error message are configurable by prop
+    - Best used in `formData` slot inside \<sqm-portal-register>
+    - Form field name can be customized with the `field-name` prop
+      - `field-name` must be a unique string and is submitted as the key to the value submitted
+        - For example, with `field-name` set to `businessName` the result is `{"businessName":"SaaSquatch"}`
+      - An error is displayed if `field-name` prop is not included
+    - Input type can be customized with the `field-type` prop
+      - Supports `text`, `tel`, and `date` as types
+
+### Changed
+
+- Changed Components:
+  - \<sqm-dropdown-field>
+    - An error is now displayed if `dropdown-name` prop is not included
+    - `dropdown-required` prop deprecated, must use `dropdown-optional` instead
+      - Field is still required by default
+  - \<sqm-checkbox-field>
+    - Error is now displayed if `checkbox-name` prop is not included
+    - `checkbox-required` prop deprecated, must use `checkbox-optional` instead
+      - Field is still required by default
+  - \<sqm-referral-iframe>
+    - Updated fail fast state text
+
 ## [1.5.2] - 2022-03-08
 
 ### Changed
@@ -385,7 +415,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - \<sqm-popup-container>
   - \<sqm-stencilbook>
 
-[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.5.2...HEAD
+[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.5.3...HEAD
+[1.5.3]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.5.3
 [1.5.2]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.5.2
 [1.5.1]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.5.1
 [1.5.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.5.0

package/dist/cjs/{GenericTableView-c2a781ea.js → GenericTableView-f98bcef7.js}

@@ -2,7 +2,7 @@
 
 const index = require('./index-b0129cd6.js');
 const mixins = require('./mixins-338ca5f1.js');
-const JSS = require('./JSS-a75f3a9a.js');
+const JSS = require('./JSS-c73206b7.js');
 
 function GenericTableView(props) {
   const { states, data, callbacks, elements } = props;

package/dist/cjs/{JSS-a75f3a9a.js → JSS-c73206b7.js}

@@ -1,6 +1,22 @@
 'use strict';
 
-const _extends = require('./extends-08099afd.js');
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
 
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
@@ -350,7 +366,7 @@ function (_BaseStyleRule) {
   _proto2.toString = function toString(options) {
     var sheet = this.options.sheet;
     var link = sheet ? sheet.options.link : false;
-    var opts = link ? _extends._extends({}, options, {
+    var opts = link ? _extends({}, options, {
       allowEmpty: true
     }) : options;
     return toCss(this.selectorText, this.style, opts);
@@ -418,7 +434,7 @@ function () {
 
     this.query = options.name || "@" + this.at;
     this.options = options;
-    this.rules = new RuleList(_extends._extends({}, options, {
+    this.rules = new RuleList(_extends({}, options, {
       parent: this
     }));
 
@@ -523,12 +539,12 @@ function () {
         sheet = options.sheet,
         generateId = options.generateId;
     this.id = scoped === false ? this.name : escape(generateId(this, sheet));
-    this.rules = new RuleList(_extends._extends({}, options, {
+    this.rules = new RuleList(_extends({}, options, {
       parent: this
     }));
 
     for (var name in frames) {
-      this.rules.add(name, frames[name], _extends._extends({}, options, {
+      this.rules.add(name, frames[name], _extends({}, options, {
         parent: this
       }));
     }
@@ -646,7 +662,7 @@ function (_BaseStyleRule) {
   _proto.toString = function toString(options) {
     var sheet = this.options.sheet;
     var link = sheet ? sheet.options.link : false;
-    var opts = link ? _extends._extends({}, options, {
+    var opts = link ? _extends({}, options, {
       allowEmpty: true
     }) : options;
     return toCss(this.key, this.style, opts);
@@ -846,7 +862,7 @@ function () {
         generateId = _this$options.generateId,
         scoped = _this$options.scoped;
 
-    var options = _extends._extends({
+    var options = _extends({
       classes: this.classes,
       parent: parent,
       sheet: sheet,
@@ -1072,7 +1088,7 @@ function () {
     this.deployed = false;
     this.classes = {};
     this.keyframes = {};
-    this.options = _extends._extends({}, options, {
+    this.options = _extends({}, options, {
       sheet: this,
       parent: this,
       classes: this.classes,
@@ -2048,7 +2064,7 @@ function () {
     }
 
     if (options.id) {
-      this.options.id = _extends._extends({}, this.options.id, options.id);
+      this.options.id = _extends({}, this.options.id, options.id);
     }
 
     if (options.createGenerateId || options.id) {
@@ -2082,7 +2098,7 @@ function () {
       index = registry.index === 0 ? 0 : registry.index + 1;
     }
 
-    var sheet = new StyleSheet(styles, _extends._extends({}, options, {
+    var sheet = new StyleSheet(styles, _extends({}, options, {
       jss: this,
       generateId: options.generateId || this.generateId,
       insertionPoint: this.options.insertionPoint,
@@ -2124,7 +2140,7 @@ function () {
     } // $FlowFixMe[incompatible-type]
 
 
-    var ruleOptions = _extends._extends({}, options, {
+    var ruleOptions = _extends({}, options, {
       name: name,
       jss: this,
       Renderer: this.options.Renderer
@@ -2380,7 +2396,7 @@ function () {
     this.isProcessed = false;
     this.key = key;
     this.options = options;
-    this.rules = new RuleList(_extends._extends({}, options, {
+    this.rules = new RuleList(_extends({}, options, {
       parent: this
     }));
 
@@ -2443,7 +2459,7 @@ function () {
     this.key = key;
     this.options = options;
     var selector = key.substr(atPrefix.length);
-    this.rule = options.jss.createRule(selector, style, _extends._extends({}, options, {
+    this.rule = options.jss.createRule(selector, style, _extends({}, options, {
       parent: this
     }));
   }
@@ -2478,7 +2494,7 @@ function handleNestedGlobalContainerRule(rule, sheet) {
   if (!rules) return;
 
   for (var name in rules) {
-    sheet.addRule(name, rules[name], _extends._extends({}, options, {
+    sheet.addRule(name, rules[name], _extends({}, options, {
       selector: addScope(name, rule.selector)
     }));
   }
@@ -2493,7 +2509,7 @@ function handlePrefixedGlobalRule(rule, sheet) {
   for (var prop in style) {
     if (prop[0] !== '@' || prop.substr(0, at.length) !== at) continue;
     var selector = addScope(prop.substr(at.length), rule.selector);
-    sheet.addRule(selector, style[prop], _extends._extends({}, options, {
+    sheet.addRule(selector, style[prop], _extends({}, options, {
       selector: selector
     }));
     delete style[prop];
@@ -2578,7 +2594,7 @@ function mergeExtend(style, rule, sheet, newStyle) {
   if (Array.isArray(style.extend)) {
     for (var index = 0; index < style.extend.length; index++) {
       var singleExtend = style.extend[index];
-      var singleStyle = typeof singleExtend === 'string' ? _extends._extends({}, style, {
+      var singleStyle = typeof singleExtend === 'string' ? _extends({}, style, {
         extend: singleExtend
       }) : style.extend[index];
       extend(singleStyle, rule, sheet, newStyle);
@@ -2730,14 +2746,14 @@ function jssNested() {
 
   function getOptions(rule, container, prevOptions) {
     // Options has been already created, now we only increase index.
-    if (prevOptions) return _extends._extends({}, prevOptions, {
+    if (prevOptions) return _extends({}, prevOptions, {
       index: prevOptions.index + 1 // $FlowFixMe[prop-missing]
 
     });
     var nestingLevel = rule.options.nestingLevel;
     nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;
 
-    var options = _extends._extends({}, rule.options, {
+    var options = _extends({}, rule.options, {
       nestingLevel: nestingLevel,
       index: container.indexOf(rule) + 1 // We don't need the parent name to be set options for chlid.
 
@@ -2767,7 +2783,7 @@ function jssNested() {
         if (!replaceRef) replaceRef = getReplaceRef(container, sheet); // Replace all $refs.
 
         selector = selector.replace(refRegExp$1, replaceRef);
-        container.addRule(selector, style[prop], _extends._extends({}, options, {
+        container.addRule(selector, style[prop], _extends({}, options, {
           selector: selector
         }));
       } else if (isNestedConditional) {

package/dist/cjs/{ShadowViewAddon-8665ac96.js → ShadowViewAddon-0becaef1.js}

@@ -1,17 +1,18 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const global = require('./global-dd180d3b.js');
-const index_module = require('./index.module-fb61a163.js');
+const stencilHooks_module = require('./stencil-hooks.module-ffd2b47a.js');
+const global = require('./global-7eb8c483.js');
+const index_module = require('./index.module-c9cec1f7.js');
 const cjs = require('./cjs-1066ec21.js');
 const mixins = require('./mixins-338ca5f1.js');
-const JSS = require('./JSS-a75f3a9a.js');
-const luxon = require('./luxon-59ca7d19.js');
+const JSS = require('./JSS-c73206b7.js');
+const luxon = require('./luxon-6b09461e.js');
+const index$1 = require('./index-4933129a.js');
 const utils = require('./utils-8ef4fe4a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-ab4ad6ef.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-2d11ed71.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-765aae4d.js');
+const sqmTextSpanView = require('./sqm-text-span-view-b0c90c27.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-4a8432e9.js');
+const sqmPortalSectionView = require('./sqm-portal-section-view-71a57cd9.js');
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -344,7 +345,7 @@ const EditProfileView = (props) => {
       }, exportparts: "base: primarybutton-base" }, text.editprofiletext)));
 };
 
-const MessageLinkQuery = index_module.dist.gql `
+const MessageLinkQuery = index$1.dist.gql `
   query ($programId: ID) {
     user: viewer {
       ... on User {
@@ -353,7 +354,7 @@ const MessageLinkQuery = index_module.dist.gql `
     }
   }
 `;
-const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
+const WIDGET_ENGAGEMENT_EVENT = index$1.dist.gql `
   mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
     createUserAnalyticsEvent(eventMeta: $eventMeta)
   }
@@ -391,7 +392,7 @@ function useShareLink(props) {
   return { ...props, onClick, open, shareString };
 }
 
-const MessageLinkQuery$1 = index_module.dist.gql `
+const MessageLinkQuery$1 = index$1.dist.gql `
   query (
     $programId: ID
     $engagementMedium: UserEngagementMedium!
@@ -794,7 +795,7 @@ _, status) => {
       ? { dateConverted_exists: false }
       : {};
   const queryFilter = { ...programFilter, ...convertedFilter };
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query ($queryFilter: ReferralFilterInput) {
         viewer {
           ... on User {
@@ -816,7 +817,7 @@ const programGoalsQuery = (programId, locale, metricType, goalId) => {
   // Confirm this behaviour
   if (programId === "classic")
     return null;
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query {
         viewer {
           ... on User {
@@ -839,7 +840,7 @@ const programGoalsQuery = (programId, locale, metricType, goalId) => {
   });
 };
 const customFieldsQuery = (_programId, locale, fieldName, goalId) => {
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query {
         viewer {
           ... on User {
@@ -864,7 +865,7 @@ const referralsMonthQuery = (programId) => {
     ...programFilter,
     dateReferralStarted_timeframe: "this_month",
   };
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query ($filter: ReferralFilterInput) {
         viewer {
           ... on User {
@@ -890,7 +891,7 @@ const referralsWeekQuery = (programId) => {
     ...programFilter,
     dateReferralStarted_timeframe: "this_month",
   };
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query ($filter: ReferralFilterInput) {
         viewer {
           ... on User {
@@ -911,7 +912,7 @@ const referralsWeekQuery = (programId) => {
 const rewardsCountQuery = (programId, 
 // locale
 _, global = "") => {
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query ($programId: ID) {
         viewer {
           ... on User {
@@ -935,7 +936,7 @@ const rewardsCountFilteredQuery = (programId,
 // locale
 _, type, unit, status, global = "") => {
   const statusFilter = status ? { status } : null;
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query (
         $programId: ID
         $unit: String
@@ -974,7 +975,7 @@ const integrationRewardsCountFilteredQuery = (programId,
 // locale
 _, status, global = "") => {
   const statusFilter = status ? { status } : null;
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query ($programId: ID, $statusFilter: RewardStatusFilterInput) {
         viewer {
           ... on User {
@@ -1004,7 +1005,7 @@ _, status, global = "") => {
 const rewardsMonthQuery = (programId, 
 // locale
 _, global = "") => {
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query ($programId: ID) {
         viewer {
           ... on User {
@@ -1032,7 +1033,7 @@ _, global = "") => {
 const rewardsWeekQuery = (programId, 
 // locale
 _, global = "") => {
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query ($programId: ID) {
         viewer {
           ... on User {
@@ -1058,7 +1059,7 @@ _, global = "") => {
   });
 };
 const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query (
         $programId: ID
         $type: RewardType
@@ -1101,7 +1102,7 @@ const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
   });
 };
 const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query (
         $programId: ID
         $type: RewardType
@@ -1144,7 +1145,7 @@ const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
   });
 };
 const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query (
         $programId: ID
         $type: RewardType
@@ -1192,7 +1193,7 @@ const parseRewardValueFormat = {
 };
 const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValue", global = "") => {
   var _a;
-  return debugQuery(index_module.dist.gql `
+  return debugQuery(index$1.dist.gql `
       query (
         $programId: ID
         $type: RewardType!
@@ -2514,7 +2515,7 @@ function CheckboxFieldView(props) {
     index.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.checkboxRequired ? { required: true } : []), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
+      } }, (!content.checkboxOptional ? { required: true } : []), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
       ? {
         class: sheet$a.classes.ErrorStyle,
       }
@@ -2525,7 +2526,10 @@ function CheckboxFieldView(props) {
       }, {
         labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
       }),
-      !states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet$a.classes.ErrorMessageStyle }, content.errorMessage)))));
+      !states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet$a.classes.ErrorMessageStyle }, global.intl.formatMessage({
+        id: `errorMessage-${content.checkboxName}`,
+        defaultMessage: content.errorMessage,
+      }))))));
 }
 
 const style$b = {
@@ -2565,11 +2569,14 @@ function DropdownFieldView(props) {
     index.h("style", { type: "text/css" },
       vanillaStyle$5,
       styleString$b),
-    index.h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (content.dropdownRequired ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
+    index.h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
       class: sheet$b.classes.ErrorStyle,
     }
       : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$b.classes.ErrorMessageStyle }, content.errorMessage))));
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$b.classes.ErrorMessageStyle }, global.intl.formatMessage({
+      id: `errorMessage-${content.dropdownName}`,
+      defaultMessage: content.errorMessage,
+    })))));
 }
 
 const style$c = {
@@ -2584,14 +2591,6 @@ const vanillaStyle$6 = `
   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$c = JSS.jss.createStyleSheet(style$c);
@@ -2603,9 +2602,12 @@ function InputFieldView(props) {
     index.h("style", { type: "text/css" },
       vanillaStyle$6,
       styleString$c),
-    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (content.fieldRequired ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
+    index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
       class: sheet$c.classes.ErrorStyle,
-      helpText: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
+      helpText: global.intl.formatMessage({
+        id: `errorMessage-${content.fieldName}`,
+        defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
+      }),
     }
       : [])))));
 }