@saasquatch/mint-components 1.12.1-4 → 1.12.1-6

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

@@ -0,0 +1,392 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cf5ef3d.js');
+const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
+const global = require('./global-d9abaf4d.js');
+const index_module = require('./index.module-ccf9bd9c.js');
+const cjs = require('./cjs-1066ec21.js');
+const utils = require('./utils-6847bc06.js');
+const JSS = require('./JSS-8503a151.js');
+const copyTextView = require('./copy-text-view-43e8349f.js');
+require('./mixins-f7e0377a.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 { states, callbacks, text } = props;
+  const { onNext, onPrev } = callbacks;
+  const { currentPage, totalPages, loading } = states;
+  if (totalPages === 1)
+    return index.h(index.Fragment, null);
+  return (index.h("span", { class: sheet.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" }, styleString),
+    !loading && (index.h(index.Fragment, null,
+      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 }, text.paginationText))),
+    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(props) {
+  var _a;
+  const context = index_module.Dn(copyTextView.REFERRAL_CODES_PAGINATION_CONTEXT);
+  const currentPage = context.states.currentPage + 1;
+  const totalPages = (_a = context.states) === null || _a === void 0 ? void 0 : _a.pageCount;
+  return {
+    states: {
+      currentPage,
+      totalPages,
+      loading: context.states.loading,
+    },
+    callbacks: {
+      onNext: () => { var _a, _b; return (_a = context.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = context.states) === null || _b === void 0 ? void 0 : _b.currentPage) + 1); },
+      onPrev: () => { var _a, _b; return (_a = context.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = context.states) === null || _b === void 0 ? void 0 : _b.currentPage) - 1); },
+    },
+    text: {
+      paginationText: global.intl.formatMessage({
+        id: `paginationText`,
+        defaultMessage: props.paginationText,
+      }, {
+        currentPage,
+        totalPages,
+      }),
+    },
+  };
+}
+
+const Pagination = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Pagination text
+     */
+    this.paginationText = "{currentPage} of {totalPages}";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const hookProps = index_module.isDemo()
+      ? useDemoPagination(utils.getProps(this))
+      : usePagination(utils.getProps(this));
+    return index.h(PaginationView, Object.assign({}, hookProps));
+  }
+};
+function useDemoPagination(props) {
+  const [currentPage, setCurrentPage] = stencilHooks_module.useState(1);
+  return cjs.cjs({
+    states: {
+      currentPage,
+      totalPages: 5,
+      loading: false,
+    },
+    callbacks: {
+      onNext: () => setCurrentPage(currentPage + 1),
+      onPrev: () => setCurrentPage(currentPage - 1),
+    },
+    text: {
+      paginationText: global.intl.formatMessage({
+        id: `paginationText`,
+        defaultMessage: props.paginationText || "{currentPage} of {totalPages}",
+      }, {
+        currentPage: currentPage,
+        totalPages: 5,
+      }),
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+const MessageLinkQuery = index_module.dist.gql `
+  query getReferralCode($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.z() } = props;
+  const user = index_module.K();
+  const engagementMedium = index_module.ne();
+  const contextData = index_module.Dn(copyTextView.REFERRAL_CODES_NAMESPACE);
+  const { data } = index_module.En(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.xe(WIDGET_ENGAGEMENT_EVENT);
+  const [setCopied] = index_module.xe(copyTextView.SET_CODE_COPIED);
+  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);
+  async function onClick() {
+    if (contextData) {
+      await setCopied({ referralCode: contextData.referralCode });
+      contextData.refresh();
+    }
+    // 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,
+    isCopied: contextData === null || contextData === void 0 ? void 0 : contextData.isCopied,
+    showNotificationText: props.showNotificationText && !!(contextData === null || contextData === void 0 ? void 0 : contextData.singleUse),
+  };
+}
+
+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 single-use promo codes 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,
+    isCopied: props.showNotificationText,
+    isUsed: false,
+    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, states } = props;
+  const getSlotContent = (states) => {
+    if (states.noCodes) {
+      return slots.empty;
+    }
+    if (states.loading) {
+      return slots.loading;
+    }
+    return (index.h("div", { class: sheet$1.classes.Wrapper },
+      index.h("div", { class: sheet$1.classes.ShareCodeContainer }, slots.shareCodes),
+      index.h("div", { class: sheet$1.classes.ShareButtonContainer }, slots.shareButtons)));
+  };
+  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),
+      !states.noCodes && !states.loading && slots.pagination),
+    getSlotContent(states)));
+}
+
+const ReferralCodes = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @uiName Title Text
+     */
+    this.titleText = "Start sharing";
+    /**
+     * @uiName Empty State Header Text
+     */
+    this.emptyStateHeaderText = "Your new codes and links aren’t ready yet";
+    /**
+     * @uiName Empty State Description Text
+     */
+    this.emptyStateDescriptionText = "Please contact our program support team to let them know you’re out of codes.";
+    /**
+     * @uiName Empty State Image URL
+     */
+    this.emptyStateImageUrl = "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = utils.getProps(this);
+    const props = index_module.isDemo()
+      ? useDemoReferralCodes(thisProps)
+      : copyTextView.useReferralCodes(thisProps);
+    const slots = {
+      shareButtons: index.h("slot", { name: "shareButtons" }),
+      shareCodes: index.h("slot", { name: "shareCodes" }),
+      pagination: index.h("slot", { name: "pagination" }),
+      empty: (index.h(EmptySlot, { headerText: this.emptyStateHeaderText, descriptionText: this.emptyStateDescriptionText, imageUrl: this.emptyStateImageUrl })),
+      loading: index.h(LoadingSlot, null),
+    };
+    const viewProps = {
+      slots,
+      ...props,
+      loading: props.states.loading,
+      noCodes: props.states.noCodes,
+    };
+    return index.h(ReferralCodesView, Object.assign({}, viewProps));
+  }
+};
+function EmptySlot({ headerText, descriptionText, imageUrl, }) {
+  return (index.h("slot", { name: "empty" }, index.h("sqm-empty", { emptyStateHeader: headerText, emptyStateText: descriptionText, emptyStateImage: imageUrl })));
+}
+function LoadingSlot() {
+  return (index.h("slot", { name: "loading" }, index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null)));
+}
+function LoadingRow() {
+  return index.h("sl-skeleton", { style: { width: "100%" } });
+}
+function useDemoReferralCodes(props) {
+  return cjs.cjs({
+    titleText: props.titleText,
+    states: {
+      noCodes: false,
+      loading: false,
+    },
+  }, 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

@@ -2,14 +2,14 @@
 
 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 index = require('./index-3cf5ef3d.js');
+const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
+const index_module = require('./index.module-ccf9bd9c.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');
+const JSS = require('./JSS-8503a151.js');
+const mixins = require('./mixins-f7e0377a.js');
+const useRegistrationFormState = require('./useRegistrationFormState-5911d016.js');
 
 var constants = {
   error: {

package/dist/cjs/sqm-popup-container.cjs.entry.js

@@ -2,9 +2,9 @@
 
 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 index = require('./index-3cf5ef3d.js');
+const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
+const index_module = require('./index.module-ccf9bd9c.js');
 const utils = require('./utils-6847bc06.js');
 
 const PopupContainerView = (props) => {
@@ -18,10 +18,10 @@ const PopupContainerView = (props) => {
 };
 
 function usePopupContainer(props) {
-  const engagementMedium = index_module.B();
+  const engagementMedium = index_module.ne();
   function closePopup() {
     var _a;
-    if (index_module.B() === "POPUP") {
+    if (index_module.ne() === "POPUP") {
       (_a = window.frameElement["squatchJsApi"]) === null || _a === void 0 ? void 0 : _a.close();
     }
   }
@@ -35,7 +35,7 @@ function usePopupContainer(props) {
       ? "0"
       : `var(--sl-spacing-${props.embedPadding})`
     : "0";
-  const padding = index_module.B() === "POPUP" ? popupPadding : embedPadding;
+  const padding = index_module.ne() === "POPUP" ? popupPadding : embedPadding;
   return {
     states: {
       showCloseButton: props.closeButton && engagementMedium === "POPUP",

package/dist/cjs/{sqm-portal-container-view-990a85a3.js → sqm-portal-container-view-9a36f5ed.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-b0129cd6.js');
+const index = require('./index-3cf5ef3d.js');
 const JSS = require('./JSS-8503a151.js');
 
 function PortalSectionView(props) {

package/dist/cjs/{sqm-portal-email-verification-view-292b5bf4.js → sqm-portal-email-verification-view-6e1e80e7.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-const index = require('./index-b0129cd6.js');
-const global = require('./global-02e50f09.js');
-const mixins = require('./mixins-fe9d4112.js');
+const index = require('./index-3cf5ef3d.js');
+const global = require('./global-d9abaf4d.js');
 const JSS = require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
+const mixins = require('./mixins-f7e0377a.js');
+const sqmTextSpanView = require('./sqm-text-span-view-a22f50aa.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,

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

@@ -2,23 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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 index = require('./index-3cf5ef3d.js');
+const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
+require('./global-d9abaf4d.js');
+const index_module = require('./index.module-ccf9bd9c.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');
+require('./mixins-f7e0377a.js');
+require('./sqm-text-span-view-a22f50aa.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-6e1e80e7.js');
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-  const [request, { loading, data, errors }] = index_module.ln();
-  const [getVerificationStatus, { data: user, loading: loadingVerification }] = index_module.nn();
-  const userIdent = index_module.Q();
+  const [request, { loading, data, errors }] = index_module.hn();
+  const [getVerificationStatus, { data: user, loading: loadingVerification }] = index_module.un();
+  const userIdent = index_module.K();
   const email = (_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.email;
-  const urlParams = new URLSearchParams(index_module.$n.location.search);
+  const urlParams = new URLSearchParams(index_module.xn.location.search);
   const nextPage = urlParams.get("nextPage");
   const [success, setSuccess] = stencilHooks_module.useState(false);
   const [error, setError] = stencilHooks_module.useState("");
@@ -48,7 +48,7 @@ function usePortalEmailVerification(props) {
     const data = (await getVerificationStatus());
     if ((_a = data === null || data === void 0 ? void 0 : data.managedIdentitySession) === null || _a === void 0 ? void 0 : _a.emailVerified) {
       clearInterval(timerRef.current);
-      return index_module.$n.push({
+      return index_module.xn.push({
         pathname: props.redirectPath,
         search: urlParams.toString() && "?" + urlParams.toString(),
       });

package/dist/cjs/{sqm-portal-forgot-password-view-969c49ed.js → sqm-portal-forgot-password-view-97903679.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-b0129cd6.js');
-const mixins = require('./mixins-fe9d4112.js');
+const index = require('./index-3cf5ef3d.js');
 const JSS = require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
+const mixins = require('./mixins-f7e0377a.js');
+const sqmTextSpanView = require('./sqm-text-span-view-a22f50aa.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,

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

@@ -2,22 +2,22 @@
 
 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 index = require('./index-3cf5ef3d.js');
+const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
+const index_module = require('./index.module-ccf9bd9c.js');
 const jsonpointer = require('./jsonpointer-11327262.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');
+require('./mixins-f7e0377a.js');
+require('./sqm-text-span-view-a22f50aa.js');
+const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-97903679.js');
 
 function usePortalForgotPassword(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const [success, setSuccess] = stencilHooks_module.useState(false);
   const [error, setError] = stencilHooks_module.useState("");
-  const [request, { loading, data, errors }] = index_module.un();
-  const urlParams = new URLSearchParams(index_module.$n.location.search);
+  const [request, { loading, data, errors }] = index_module.vn();
+  const urlParams = new URLSearchParams(index_module.xn.location.search);
   const nextPage = urlParams.get("nextPage");
   const submit = async (event) => {
     var _a;
@@ -106,7 +106,7 @@ const PortalForgotPassword = class {
       ? usePortalForgotPasswordDemo(this)
       : usePortalForgotPassword(this);
     const content = {
-      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.$n.push(states.loginPath) }, this.loginText))),
+      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.xn.push(states.loginPath) }, this.loginText))),
       messageSlot: index.h("slot", { name: "messageSlot" }, this.headerText),
       emailLabel: this.emailLabel,
       submitLabel: this.submitLabel,