@saasquatch/mint-components 1.11.0 → 1.11.1-1

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

@@ -0,0 +1,316 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-df530553.js');
+const utils = require('./utils-6847bc06.js');
+const JSS = require('./JSS-8503a151.js');
+const copyTextView = require('./copy-text-view-a22ad7e7.js');
+const cjs = require('./cjs-1066ec21.js');
+require('./mixins-fe9d4112.js');
+
+const style = {
+  Container: {
+    display: "flex",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: "var(--sl-spacing-small)",
+    width: "100%",
+  },
+  TextContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-xx-small)",
+  },
+};
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+function PaginationView(props) {
+  const { onNext, onPrev, currentPage, totalPages } = props;
+  return (index.h("span", { class: sheet.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("sl-button", { onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
+      index.h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
+    index.h("div", { class: sheet.classes.TextContainer },
+      index.h("span", null, currentPage),
+      index.h("span", null, "of"),
+      index.h("span", null, totalPages)),
+    index.h("sl-button", { onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
+      index.h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
+}
+
+function usePagination() {
+  const context = index_module.In(copyTextView.REFERRAL_CODES_PAGINATION_CONTEXT);
+  return {
+    ...context,
+  };
+}
+
+const Pagination = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    // const props = getProps(this);
+    var _a, _b;
+    const hookProps = index_module.isDemo()
+      ? useDemoPagination(utils.getProps(this))
+      : usePagination();
+    const props = {
+      currentPage: (_a = hookProps.states) === null || _a === void 0 ? void 0 : _a.currentPage,
+      totalPages: (_b = hookProps.states) === null || _b === void 0 ? void 0 : _b.pageCount,
+      onNext: () => { var _a, _b; return (_a = hookProps.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = hookProps.states) === null || _b === void 0 ? void 0 : _b.currentPage) + 1); },
+      onPrev: () => { var _a, _b; return (_a = hookProps.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = hookProps.states) === null || _b === void 0 ? void 0 : _b.currentPage) - 1); },
+      text: {
+        ofText: "of",
+      },
+    };
+    return index.h(PaginationView, Object.assign({}, props));
+  }
+};
+function useDemoPagination(props) {
+  const [currentPage, setCurrentPage] = stencilHooks_module.useState(1);
+  return cjs.cjs({
+    states: {
+      currentPage: currentPage,
+      pageCount: 5,
+    },
+    callbacks: {
+      setCurrentPage,
+    },
+    text: {
+      ofText: `${currentPage} of 5`,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+const MessageLinkQuery = index_module.dist.gql `
+  query ($programId: ID) {
+    user: viewer {
+      ... on User {
+        referralCode(programId: $programId)
+      }
+    }
+  }
+`;
+const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
+function useReferralCode(props) {
+  var _a, _b;
+  const { programId = index_module.H() } = props;
+  const user = index_module.Q();
+  const engagementMedium = index_module.B();
+  const contextData = index_module.In(copyTextView.REFERRAL_CODES_NAMESPACE);
+  const { data } = index_module.yn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.referralCode) !== undefined);
+  const [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
+  const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.referralCode) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode))) !== null && _b !== void 0 ? _b : 
+  // Shown during loading
+  "...";
+  const [open, setOpen] = stencilHooks_module.useState(false);
+  function onClick() {
+    // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
+    // Only if called from a user-initiated event
+    navigator.clipboard.writeText(copyString);
+    setOpen(true);
+    setTimeout(() => setOpen(false), props.tooltiplifespan);
+    sendLoadEvent({
+      eventMeta: {
+        programId,
+        id: user === null || user === void 0 ? void 0 : user.id,
+        accountId: user === null || user === void 0 ? void 0 : user.accountId,
+        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
+        meta: {
+          engagementMedium,
+          shareMedium: "DIRECT",
+        },
+      },
+    });
+  }
+  return { ...props, onClick, open, copyString: copyString };
+}
+
+const ReferralCode = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Shown inside a tooltip after someone has successfully copied the link to their clipboard
+     *
+     * @uiName Tooltip text
+     */
+    this.tooltiptext = "Copied to Clipboard";
+    /**
+     * Boolean used to show notification text below input
+     *
+     * @uiName Show notification text
+     */
+    this.showNotificationText = false;
+    /**
+     * Shown underneath the referral code when the user has already copied the code
+     *
+     * @uiName Notification text
+     */
+    this.notificationText = "You've copied this code before";
+    /**
+     * The number of milliseconds that the tooltip appears for
+     *
+     * @uiName Tooltip lifespan
+     */
+    this.tooltiplifespan = 1000;
+    /**
+     * Change the text alignment
+     *
+     * @uiName referral code alignment
+     * @uiType string
+     * @uiEnum ["left", "center", "right"]
+     * @uiEnumNames ["Left", "Center", "Right"]
+     */
+    this.textAlign = "left";
+    /**
+     * @uiName Copy button label
+     */
+    this.copyButtonLabel = "Copy Code";
+    /**
+     * Set the copy button style and placement
+     *
+     * @uiName Style
+     * @uiType string
+     * @uiEnum ["icon", "button-outside", "button-below"]
+     * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     */
+    this.buttonStyle = "icon";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = utils.getProps(this);
+    const props = index_module.isDemo()
+      ? useDemoReferralCode(thisProps)
+      : useReferralCode(thisProps);
+    return index.h(copyTextView.CopyTextView, Object.assign({}, props));
+  }
+};
+function useDemoReferralCode(props) {
+  const [open, setOpen] = stencilHooks_module.useState(false);
+  const copyString = "REFERRALCODE001";
+  return cjs.cjs({
+    copyString: copyString,
+    tooltiptext: props.tooltiptext,
+    textAlign: props.textAlign,
+    copyButtonLabel: props.copyButtonLabel,
+    buttonStyle: props.buttonStyle,
+    notificationText: props.notificationText,
+    showNotificationText: props.showNotificationText,
+    rewardStatus: "AVAILABLE",
+    open,
+    onClick: () => {
+      // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
+      // Only if called from a user-initiated event
+      navigator.clipboard.writeText(copyString);
+      setOpen(true);
+      setTimeout(() => setOpen(false), props.tooltiplifespan);
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+const style$1 = {
+  Wrapper: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-large)",
+  },
+  HeaderContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+  },
+  ShareCodeContainer: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    flexDirection: "column",
+  },
+  ShareButtonContainer: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    flexDirection: "column",
+  },
+  TitleText: {
+    color: "var(--sl-color-neutral-700)",
+    fontSize: "var(--sl-font-size-large)",
+    margin: "0",
+  },
+};
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+`;
+const sheet$1 = JSS.createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
+function ReferralCodesView(props) {
+  const { slots, titleText } = props;
+  return (index.h("div", { class: sheet$1.classes.Wrapper, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString$1),
+    index.h("div", { class: sheet$1.classes.HeaderContainer },
+      index.h("h2", { class: sheet$1.classes.TitleText }, titleText),
+      slots.pagination),
+    index.h("div", { class: sheet$1.classes.ShareCodeContainer }, slots.shareCodes),
+    index.h("div", { class: sheet$1.classes.ShareButtonContainer }, slots.shareButtons)));
+}
+
+const ReferralCodes = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @uiName Title Text
+     */
+    this.titleText = "Your referral code";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = utils.getProps(this);
+    const props = index_module.isDemo()
+      ? useDemoReferralCodes(thisProps)
+      : copyTextView.useReferralCodes(thisProps);
+    console.log(props);
+    const slots = {
+      shareButtons: index.h("slot", { name: "shareButtons" }),
+      shareCodes: index.h("slot", { name: "shareCodes" }),
+      pagination: index.h("slot", { name: "pagination" }),
+    };
+    const viewProps = {
+      slots,
+      ...props,
+    };
+    return index.h(ReferralCodesView, Object.assign({}, viewProps));
+  }
+};
+function useDemoReferralCodes(props) {
+  return cjs.cjs({
+    titleText: props.titleText,
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+exports.sqm_pagination = Pagination;
+exports.sqm_referral_code = ReferralCode;
+exports.sqm_referral_codes = ReferralCodes;

package/dist/cjs/sqm-password-field.cjs.entry.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
 const index_module = require('./index.module-df530553.js');
+const utils = require('./utils-6847bc06.js');
+const JSS = require('./JSS-8503a151.js');
 const cjs = require('./cjs-1066ec21.js');
 const mixins = require('./mixins-fe9d4112.js');
-const JSS = require('./JSS-8503a151.js');
-const utils = require('./utils-6847bc06.js');
 const useRegistrationFormState = require('./useRegistrationFormState-876ed65d.js');
 
 var constants = {

package/dist/cjs/sqm-portal-email-verification.cjs.entry.js

@@ -6,11 +6,11 @@ const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
 require('./global-02e50f09.js');
 const index_module = require('./index.module-df530553.js');
+require('./JSS-8503a151.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
-require('./JSS-8503a151.js');
 require('./sqm-text-span-view-e1cd9bd3.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-292b5bf4.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-bff9783d.js');
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;

package/dist/cjs/sqm-portal-forgot-password.cjs.entry.js

@@ -6,11 +6,11 @@ const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
 const index_module = require('./index.module-df530553.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
+require('./JSS-8503a151.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
-require('./JSS-8503a151.js');
 require('./sqm-text-span-view-e1cd9bd3.js');
-const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-969c49ed.js');
+const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-3cd69fe7.js');
 
 function usePortalForgotPassword(props) {
   var _a, _b, _c, _d, _e, _f, _g;

package/dist/cjs/sqm-portal-profile.cjs.entry.js

@@ -6,9 +6,9 @@ const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
 require('./global-02e50f09.js');
 const index_module = require('./index.module-df530553.js');
-const cjs = require('./cjs-1066ec21.js');
-require('./JSS-8503a151.js');
 const utils = require('./utils-6847bc06.js');
+require('./JSS-8503a151.js');
+const cjs = require('./cjs-1066ec21.js');
 require('./sqm-text-span-view-e1cd9bd3.js');
 const sqmPortalProfileView = require('./sqm-portal-profile-view-fde54e35.js');
 const utilities = require('./utilities-cec9dd36.js');

package/dist/cjs/sqm-portal-registration-form.cjs.entry.js

@@ -6,9 +6,9 @@ const index = require('./index-b0129cd6.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 JSS = require('./JSS-8503a151.js');
 const cjs = require('./cjs-1066ec21.js');
 const mixins = require('./mixins-fe9d4112.js');
-const JSS = require('./JSS-8503a151.js');
 const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
 const useRegistrationFormState = require('./useRegistrationFormState-876ed65d.js');
 const AsYouType = require('./AsYouType-6788393a.js');

package/dist/cjs/sqm-portal-reset-password.cjs.entry.js

@@ -6,12 +6,12 @@ const index = require('./index-b0129cd6.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 utils = require('./utils-6847bc06.js');
+require('./JSS-8503a151.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
-require('./JSS-8503a151.js');
-const utils = require('./utils-6847bc06.js');
 require('./sqm-text-span-view-e1cd9bd3.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-96f329ed.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-34771d2c.js');
 
 function usePortalResetPassword(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;

package/dist/cjs/sqm-portal-verify-email.cjs.entry.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
 const index_module = require('./index.module-df530553.js');
+const utils = require('./utils-6847bc06.js');
+require('./JSS-8503a151.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
-require('./JSS-8503a151.js');
-const utils = require('./utils-6847bc06.js');
 require('./sqm-text-span-view-e1cd9bd3.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7ffcc0d4.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-c8f91506.js');
 
 let globalPromise = null;
 function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyEmailText, verifyInvalidText, networkErrorMessage, continueText, }) {

package/dist/cjs/sqm-referral-table_11.cjs.entry.js

@@ -6,16 +6,16 @@ const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
 const global = require('./global-02e50f09.js');
 const index_module = require('./index.module-df530553.js');
+const utils = require('./utils-6847bc06.js');
+const JSS = require('./JSS-8503a151.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
-const JSS = require('./JSS-8503a151.js');
-const GenericTableView = require('./GenericTableView-80d7642e.js');
+const GenericTableView = require('./GenericTableView-a3f48e15.js');
 const reRender = require('./re-render-1976e05e.js');
 const useChildElements = require('./useChildElements-e0d44916.js');
 const luxon = require('./luxon-05098e19.js');
 const mockRewardData = require('./mockRewardData-4258e067.js');
 const useReferralTable = require('./useReferralTable-a76adb0d.js');
-const utils = require('./utils-6847bc06.js');
 const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
 
 const mockReferralData = (count = 4) => {

package/dist/cjs/sqm-referred-registration.cjs.entry.js

@@ -6,10 +6,10 @@ const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
 const index_module = require('./index.module-df530553.js');
 require('./jsonpointer-11327262.js');
+require('./JSS-8503a151.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
-require('./JSS-8503a151.js');
-const emailRegistrationView = require('./email-registration-view-248652bb.js');
+const emailRegistrationView = require('./email-registration-view-4c5d9379.js');
 require('./useRegistrationFormState-876ed65d.js');
 const useInstantAccessRegistration = require('./useInstantAccessRegistration-bbe746d1.js');
 

package/dist/cjs/sqm-rewards-table_9.cjs.entry.js

@@ -6,16 +6,16 @@ const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
 const global = require('./global-02e50f09.js');
 const index_module = require('./index.module-df530553.js');
+const utils = require('./utils-6847bc06.js');
+const JSS = require('./JSS-8503a151.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
-const JSS = require('./JSS-8503a151.js');
-const GenericTableView = require('./GenericTableView-80d7642e.js');
+const GenericTableView = require('./GenericTableView-a3f48e15.js');
 const reRender = require('./re-render-1976e05e.js');
 const useChildElements = require('./useChildElements-e0d44916.js');
 const luxon = require('./luxon-05098e19.js');
 const mockRewardData = require('./mockRewardData-4258e067.js');
 const useReferralTable = require('./useReferralTable-a76adb0d.js');
-const utils = require('./utils-6847bc06.js');
 
 const debug = stencilHooks_module.browser("sq:useRewardsTable");
 const CSS_NAMESPACE = "sqm-rewards-table";