@saasquatch/mint-components 1.12.1-7 → 1.12.1-9

package/dist/cjs/sqm-tab.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3cf5ef3d.js');
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-require('./index.module-ccf9bd9c.js');
-const reRender = require('./re-render-1e63c82b.js');
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+require('./index.module-df530553.js');
+const reRender = require('./re-render-1976e05e.js');
 
 const TabView = ({}, children) => {
   return index.h(index.Host, null, children);

package/dist/cjs/sqm-tabs.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3cf5ef3d.js');
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-const index_module = require('./index.module-ccf9bd9c.js');
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-df530553.js');
+const reRender = require('./re-render-1976e05e.js');
+const useChildElements = require('./useChildElements-e0d44916.js');
 const utils = require('./utils-6847bc06.js');
-const reRender = require('./re-render-1e63c82b.js');
-const useChildElements = require('./useChildElements-438cf387.js');
 
 const TabsView = ({ content, placement, }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.
@@ -41,7 +41,7 @@ const TabsView = ({ content, placement, }) => {
 const REVEAL_EVENT = "sq:reveal";
 function useTabs() {
   const rawTabs = useChildElements.useChildElements();
-  const host = index_module.T();
+  const host = index_module._();
   const tick = reRender.useRerenderListener();
   const tabs = stencilHooks_module.useMemo(() => rawTabs
     .filter((tab) => tab.tagName === "SQM-TAB" || tab.tagName === "RAISINS-PLOP-TARGET")

package/dist/cjs/{sqm-text-span-view-a22f50aa.js → sqm-text-span-view-f318b5ac.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-3cf5ef3d.js');
-const JSS = require('./JSS-8503a151.js');
+const index = require('./index-b0129cd6.js');
+const JSS = require('./JSS-9a3cf556.js');
 
 const style = {
   p: {

package/dist/cjs/sqm-text-span.cjs.entry.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3cf5ef3d.js');
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-a22f50aa.js');
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+require('./jss-preset-default.esm-451bc403.js');
+require('./JSS-9a3cf556.js');
+const sqmTextSpanView = require('./sqm-text-span-view-f318b5ac.js');
 
 const Text = class {
   constructor(hostRef) {

package/dist/cjs/{stencil-hooks.module-ece1ee46.js → stencil-hooks.module-72742a0b.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-3cf5ef3d.js');
+const index = require('./index-b0129cd6.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

package/dist/cjs/useCheckboxField-97471065.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const useRegistrationFormState = require('./useRegistrationFormState-876ed65d.js');
+
+function useCheckboxField(props) {
+  var _a;
+  const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
+  const [checked, setChecked] = stencilHooks_module.useState(false);
+  stencilHooks_module.useEffect(() => {
+    var _a, _b;
+    if ((_a = registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]) {
+      setChecked(!!((_b = registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData) === null || _b === void 0 ? void 0 : _b[props.checkboxName]));
+    }
+  }, [(_a = registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]]);
+  return {
+    states: {
+      registrationFormState,
+      checked,
+    },
+    callbacks: {
+      setChecked,
+    },
+  };
+}
+
+exports.useCheckboxField = useCheckboxField;

package/dist/cjs/{useChildElements-438cf387.js → useChildElements-e0d44916.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-const index_module = require('./index.module-ccf9bd9c.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-df530553.js');
 
 function useChildElements() {
-  const host = index_module.T();
+  const host = index_module._();
   const initialState = host.children.length
     ? Array.from(host.children)
     : [];

package/dist/cjs/{useInstantAccessRegistration-7d91867a.js → useInstantAccessRegistration-bbe746d1.js}

@@ -1,15 +1,15 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-const index_module = require('./index.module-ccf9bd9c.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-df530553.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-5911d016.js');
+const useRegistrationFormState = require('./useRegistrationFormState-876ed65d.js');
 
 function useInstantAccessRegistration(props) {
   const cookie = new URLSearchParams(window.location.search);
   const cookies = cookie === null || cookie === void 0 ? void 0 : cookie.get("_saasquatch");
   const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState();
-  const [request, { loading, errors, data }] = index_module.Cn();
+  const [request, { loading, errors, data }] = index_module.mn();
   const [error, setError] = stencilHooks_module.useState("");
   const submit = async (event) => {
     var _a;

package/dist/cjs/{useReferralTable-6b4920f9.js → useReferralTable-a76adb0d.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-const index = require('./index-3cf5ef3d.js');
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-const index_module = require('./index.module-ccf9bd9c.js');
-const reRender = require('./re-render-1e63c82b.js');
-const useChildElements = require('./useChildElements-438cf387.js');
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-df530553.js');
+const reRender = require('./re-render-1976e05e.js');
+const useChildElements = require('./useChildElements-e0d44916.js');
 
 const debug = stencilHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
@@ -245,8 +245,8 @@ const GET_IMPACT_TAX = index_module.dist.gql `
 `;
 function useReferralTable(props, emptyElement, loadingElement) {
   var _a, _b, _c, _d;
-  const user = index_module.K();
-  const programIdContext = index_module.z();
+  const user = index_module.Q();
+  const programIdContext = index_module.H();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
   // If no program ID, shows all programs
@@ -268,17 +268,17 @@ function useReferralTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const locale = index_module.Q();
-  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.En(GET_REFERRER_DATA, {
+  const locale = index_module.L();
+  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.yn(GET_REFERRER_DATA, {
     programId: programId === "classic" ? null : programId,
     rewardFilter,
     locale,
   }, !props.showReferrer || !(user === null || user === void 0 ? void 0 : user.jwt));
   const referrerData = (_b = referrerResponse === null || referrerResponse === void 0 ? void 0 : referrerResponse.viewer) === null || _b === void 0 ? void 0 : _b.referredByReferral;
   const showReferrerRow = props.showReferrer && !!(referrerData === null || referrerData === void 0 ? void 0 : referrerData.dateReferralStarted);
-  const { data: taxResponse, loading: taxLoading } = index_module.En(GET_IMPACT_TAX, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: taxResponse, loading: taxLoading } = index_module.yn(GET_IMPACT_TAX, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
   const taxConnection = (_c = taxResponse === null || taxResponse === void 0 ? void 0 : taxResponse.viewer) === null || _c === void 0 ? void 0 : _c.impactConnection;
-  const { envelope: referralData, states, callbacks, } = index_module.On(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
+  const { envelope: referralData, states, callbacks, } = index_module.kn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
     limit: props.perPage,
     offset: 0,
   }, {

package/dist/cjs/{useRegistrationFormState-5911d016.js → useRegistrationFormState-876ed65d.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-const index_module = require('./index.module-ccf9bd9c.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-df530553.js');
 
 const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
 function useRegistrationFormState(formState) {
-  const host = index_module.T();
+  const host = index_module._();
   const [registrationFormState, setRegistrationFormState] = stencilHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
   return { registrationFormState, setRegistrationFormState };
 }

package/dist/cjs/{utilities-27e9535b.js → utilities-cec9dd36.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
-const index_module = require('./index.module-ccf9bd9c.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-df530553.js');
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {

package/dist/collection/collection-manifest.json

@@ -3,8 +3,6 @@
     "./components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form.js",
     "./components/tax-and-cash/sqm-docusign-form/sqm-docusign-form.js",
     "./components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form.js",
-    "./components/sqm-referral-codes/sqm-referral-codes.js",
-    "./components/sqm-pagination/sqm-pagination.js",
     "./components/sqm-password-field/sqm-password-field.js",
     "./components/sqm-referral-table/sqm-referral-table.js",
     "./components/sqm-reward-exchange-list/sqm-reward-exchange-list.js",
@@ -24,7 +22,6 @@
     "./components/sqm-edit-profile/sqm-edit-profile.js",
     "./components/sqm-empty/sqm-empty.js",
     "./components/sqm-form-message/sqm-form-message.js",
-    "./components/sqm-google-sign-in/sqm-google-sign-in.js",
     "./components/sqm-graphql-client-provider/sqm-graphql-client-provider.js",
     "./components/sqm-header-logo/sqm-header-logo.js",
     "./components/sqm-hero/sqm-hero.js",
@@ -45,30 +42,30 @@
     "./components/sqm-leaderboard-rank/sqm-leaderboard-rank.js",
     "./components/sqm-link-button/sqm-link-button.js",
     "./components/sqm-logout-current-user/sqm-logout-current-user.js",
+    "./components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.js",
     "./components/sqm-name-fields/sqm-name-fields.js",
     "./components/sqm-navigation-menu/sqm-navigation-menu.js",
     "./components/sqm-navigation-sidebar/sqm-navigation-sidebar.js",
     "./components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item.js",
     "./components/sqm-popup-container/sqm-popup-container.js",
+    "./components/sqm-portal-change-marketing/sqm-portal-change-marketing.js",
     "./components/sqm-portal-change-password/sqm-portal-change-password.js",
     "./components/sqm-portal-container/sqm-portal-container.js",
     "./components/sqm-portal-email-verification/sqm-portal-email-verification.js",
     "./components/sqm-portal-footer/sqm-portal-footer.js",
     "./components/sqm-portal-forgot-password/sqm-portal-forgot-password.js",
     "./components/sqm-portal-frame/sqm-portal-frame.js",
-    "./components/sqm-portal-registration-form/sqm-portal-registration-form.js",
-    "./components/sqm-portal-google-registration-form/sqm-portal-google-registration-form.js",
     "./components/sqm-portal-login/sqm-portal-login.js",
     "./components/sqm-portal-logout/sqm-portal-logout.js",
     "./components/sqm-portal-profile/sqm-portal-profile.js",
     "./components/sqm-portal-protected-route/sqm-portal-protected-route.js",
+    "./components/sqm-portal-registration-form/sqm-portal-registration-form.js",
     "./components/sqm-portal-reset-password/sqm-portal-reset-password.js",
     "./components/sqm-portal-verify-email/sqm-portal-verify-email.js",
     "./components/sqm-program-explainer/sqm-program-explainer.js",
     "./components/sqm-program-explainer-step/sqm-program-explainer-step.js",
     "./components/sqm-program-menu/sqm-program-menu.js",
     "./components/sqm-referral-card/sqm-referral-card.js",
-    "./components/sqm-referral-code/sqm-referral-code.js",
     "./components/sqm-referral-iframe/sqm-referral-iframe.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-cell.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-date-cell.js",
@@ -121,13 +118,6 @@
   },
   "collections": [],
   "bundles": [
-    {
-      "components": [
-        "sqm-pagination",
-        "sqm-referral-code",
-        "sqm-referral-codes"
-      ]
-    },
     {
       "components": [
         "sqm-rewards-table",

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

@@ -17,7 +17,7 @@ const defaultProps = {
     checked: false,
   },
   content: {
-    checkboxName: "agree",
+    checkboxName: "terms",
     checkboxLabel: "By signing up you agree to the {labelLink}",
     checkboxLabelLink: "https://example.com",
     checkboxLabelLinkText: "Terms and Conditions",

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

@@ -54,19 +54,10 @@ export function CheckboxFieldView(props) {
     h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (!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,
-      }))))));
+      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), required: false }), intl.formatMessage({
+      id: content.checkboxName + "-message",
+      defaultMessage: content.checkboxLabel,
+    }, {
+      labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
+    }))));
 }

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

@@ -10,7 +10,7 @@ import { useCheckboxField } from "./useCheckboxField";
  * @uiName Form Checkbox Field
  * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
  * @exampleGroup Microsite Components
- * @example Form Checkbox Field - <sqm-checkbox-field checkbox-label="By signing up you agree to the {labelLink}" checkbox-label-link="https://example.com" checkbox-label-link-text="Terms and Conditions" error-message="Must be checked" ></sqm-checkbox-field>
+ * @example Form Checkbox Field - <sqm-checkbox-field checkbox-name="terms" checkbox-label="By signing up you agree to the {labelLink}" checkbox-label-link="https://example.com" checkbox-label-link-text="Terms and Conditions" error-message="Must be checked" ></sqm-checkbox-field>
  */
 export class CheckboxField {
   constructor() {
@@ -117,7 +117,7 @@ export class CheckboxField {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "Checkbox label link",
@@ -138,7 +138,7 @@ export class CheckboxField {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "Checkbox label link lext",
@@ -159,7 +159,7 @@ export class CheckboxField {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "Unchecked error message",
@@ -197,7 +197,7 @@ export class CheckboxField {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CheckboxFieldViewProps>",
-        "resolved": "{ states?: { registrationFormState?: RegistrationFormState; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage: string; }; }",
+        "resolved": "{ states?: { registrationFormState?: RegistrationFormState; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-coupon-code/sqm-coupon-code.js

@@ -475,7 +475,7 @@ export class CouponCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CouponCodeViewProps>",
-        "resolved": "{ loading?: boolean; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-empty/sqm-empty.js

@@ -5,13 +5,6 @@ import { EmptyStateView } from "./sqm-empty-view";
  * @validParents ["sqm-referral-table","sqm-rewards-table","sqm-leaderboard","sqm-reward-exchange-list"]
  */
 export class Empty {
-  constructor() {
-    /**
-     * @uiWidget ImageUpload
-     * @format url
-     * @uiName Image */
-    this.emptyStateImage = "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png";
-  }
   render() {
     return (h(Host, { slot: "empty" },
       h(EmptyStateView, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText, supportText: this.supportText })));
@@ -28,7 +21,7 @@ export class Empty {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "ImageUpload",
@@ -43,8 +36,7 @@ export class Empty {
         "text": ""
       },
       "attribute": "empty-state-image",
-      "reflect": false,
-      "defaultValue": "\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png\""
+      "reflect": false
     },
     "emptyStateHeader": {
       "type": "string",

package/dist/collection/components/sqm-logout-current-user/sqm-logout-current-user.js

@@ -122,7 +122,7 @@ export class LogoutCurrentUser {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories.js

@@ -0,0 +1,11 @@
+import { h } from "@stencil/core";
+import scenario from "./sqm-marketing-emails-checkbox.feature";
+export default {
+  title: "Components/Marketing Emails Checkbox",
+  parameters: {
+    scenario,
+  },
+};
+export const Default = () => {
+  return h("sqm-marketing-emails-checkbox", null);
+};

package/dist/collection/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.js

@@ -0,0 +1,130 @@
+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 { getProps } from "../../utils/utils";
+import { CheckboxFieldView, } from "../sqm-checkbox-field/sqm-checkbox-field-view";
+import { useCheckboxField } from "../sqm-checkbox-field/useCheckboxField";
+/**
+ * @uiName Marketing Emails Checkbox Field
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @exampleGroup Microsite Components
+ * @example Marketing Emails Checkbox - <sqm-marketing-emails-checkbox slot="emailOptIn" name="marketingEmails" checkbox-label="I would like to receive marketing and promotional emails for this referral program" required="false" name="marketing-emails" required="false" ></sqm-marketing-emails-checkbox>
+ */
+export class MarketingEmailsCheckbox {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Checkbox label
+     * @uiWidget textArea
+     */
+    this.checkboxLabel = "I would like to receive marketing and promotional emails for this referral program";
+    /**
+     * @undocumented
+     */
+    this.checkboxName = "marketingEmailOptIn";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const content = {
+      ...getProps(this),
+    };
+    const { states, callbacks } = isDemo()
+      ? useCheckboxFieldDemo(this)
+      : useCheckboxField(this);
+    return (h(CheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
+  }
+  static get is() { return "sqm-marketing-emails-checkbox"; }
+  static get properties() { return {
+    "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": "\"I would like to receive marketing and promotional emails for this referral program\""
+    },
+    "checkboxName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }],
+        "text": ""
+      },
+      "attribute": "checkbox-name",
+      "reflect": false,
+      "defaultValue": "\"marketingEmailOptIn\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<CheckboxFieldViewProps>",
+        "resolved": "{ states?: { registrationFormState?: RegistrationFormState; 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/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: {
+      registrationFormState: {},
+      checked: false,
+    },
+    callbacks: {
+      setChecked: () => { },
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-portal-change-marketing/sqm-portal-change-marketing-view.js

@@ -0,0 +1,31 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
+export function PortalProfileView(props) {
+  const { states, callbacks } = props;
+  const { text, formState } = states;
+  const { error } = formState;
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-xxx-large)",
+      padding: "var(--sl-spacing-xxx-large)",
+    },
+    Error: {
+      "&::part(erroralert-base)": {
+        "margin-bottom": "15px",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString),
+    h(TextSpanView, Object.assign({}, { type: "h2" }), text.emailPreferencesHeader),
+    h("sl-form", { "onSl-submit": callbacks.onSubmit },
+      h("sqm-marketing-emails-checkbox", { checkboxLabel: text.marketingCheckboxLabel }),
+      h("sl-button", { type: "primary" }, text.submitChangeButtonText),
+      error && (h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
+        h("div", { part: "erroralert-text" }, error))))));
+}