@saasquatch/mint-components 1.11.1-48 → 1.11.1-49

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

@@ -1,372 +0,0 @@
-import { h, F as Fragment, r as registerInstance } from './index-014ddfa3.js';
-import { n as h$1, k as useState } from './stencil-hooks.module-576d7f01.js';
-import { i as intl } from './global-701bd5b0.js';
-import { I as In, i as isDemo, d as dist, H, Q, y as yn, $ as $e, B } from './index.module-5eb0926c.js';
-import { g as getProps } from './utils-334c1e34.js';
-import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { R as REFERRAL_CODES_PAGINATION_CONTEXT, a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, C as CopyTextView, u as useReferralCodes } from './copy-text-view-47f83e9b.js';
-import { c as cjs } from './cjs-bdfb4486.js';
-import './mixins-f60a614c.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 = createStyleSheet(style);
-const styleString = sheet.toString();
-function PaginationView(props) {
-  const { states, callbacks, text } = props;
-  const { onNext, onPrev } = callbacks;
-  const { currentPage, totalPages, loading } = states;
-  return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
-    h("style", { type: "text/css" }, styleString),
-    !loading && (h(Fragment, null,
-      h("sl-button", { onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
-        h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
-      h("div", { class: sheet.classes.TextContainer }, text.paginationText))),
-    h("sl-button", { onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
-      h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
-}
-
-function usePagination(props) {
-  var _a;
-  const context = In(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: intl.formatMessage({
-        id: `paginationText`,
-        defaultMessage: props.paginationText,
-      }, {
-        currentPage,
-        totalPages,
-      }),
-    },
-  };
-}
-
-const Pagination = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * @uiName Pagination text
-     */
-    this.paginationText = "{currentPage} of {totalPages}";
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const hookProps = isDemo()
-      ? useDemoPagination(getProps(this))
-      : usePagination(getProps(this));
-    return h(PaginationView, Object.assign({}, hookProps));
-  }
-};
-function useDemoPagination(props) {
-  const [currentPage, setCurrentPage] = useState(1);
-  return cjs({
-    states: {
-      currentPage,
-      totalPages: 5,
-      loading: false,
-    },
-    callbacks: {
-      onNext: () => setCurrentPage(currentPage + 1),
-      onPrev: () => setCurrentPage(currentPage - 1),
-    },
-    text: {
-      paginationText: intl.formatMessage({
-        id: `paginationText`,
-        defaultMessage: props.paginationText || "{currentPage} of {totalPages}",
-      }, {
-        currentPage: currentPage,
-        totalPages: 5,
-      }),
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
-const MessageLinkQuery = dist.gql `
-  query ($programId: ID) {
-    user: viewer {
-      ... on User {
-        referralCode(programId: $programId)
-      }
-    }
-  }
-`;
-const WIDGET_ENGAGEMENT_EVENT = dist.gql `
-  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
-    createUserAnalyticsEvent(eventMeta: $eventMeta)
-  }
-`;
-function useReferralCode(props) {
-  var _a, _b;
-  const { programId = H() } = props;
-  const user = Q();
-  const engagementMedium = B();
-  const contextData = In(REFERRAL_CODES_NAMESPACE);
-  const { data } = yn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.referralCode) !== undefined);
-  const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT);
-  const [setCopied, copiedRes] = $e(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] = 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,
-  };
-}
-
-const ReferralCode = class {
-  constructor(hostRef) {
-    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";
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const thisProps = getProps(this);
-    const props = isDemo()
-      ? useDemoReferralCode(thisProps)
-      : useReferralCode(thisProps);
-    return h(CopyTextView, Object.assign({}, props));
-  }
-};
-function useDemoReferralCode(props) {
-  const [open, setOpen] = useState(false);
-  const copyString = "REFERRALCODE001";
-  return 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 = 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 (h("div", { class: sheet$1.classes.Wrapper },
-      h("div", { class: sheet$1.classes.ShareCodeContainer }, slots.shareCodes),
-      h("div", { class: sheet$1.classes.ShareButtonContainer }, slots.shareButtons)));
-  };
-  return (h("div", { class: sheet$1.classes.Wrapper, part: "sqm-base" },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString$1),
-    h("div", { class: sheet$1.classes.HeaderContainer },
-      h("h2", { class: sheet$1.classes.TitleText }, titleText),
-      !states.noCodes && !states.loading && slots.pagination),
-    getSlotContent(states)));
-}
-
-const ReferralCodes = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * @uiName Title Text
-     */
-    this.titleText = "Start sharing";
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const thisProps = getProps(this);
-    const props = isDemo()
-      ? useDemoReferralCodes(thisProps)
-      : useReferralCodes(thisProps);
-    console.log(props);
-    const slots = {
-      shareButtons: h("slot", { name: "shareButtons" }),
-      shareCodes: h("slot", { name: "shareCodes" }),
-      pagination: h("slot", { name: "pagination" }),
-      empty: h(EmptySlot, null),
-      loading: h(LoadingSlot, null),
-    };
-    const viewProps = {
-      slots,
-      ...props,
-      loading: props.states.loading,
-      noCodes: props.states.noCodes,
-    };
-    return h(ReferralCodesView, Object.assign({}, viewProps));
-  }
-};
-function EmptySlot() {
-  return (h("slot", { name: "empty" }, h("sqm-empty", { emptyStateHeader: "Your new codes and links aren\u2019t ready yet", emptyStateText: "Please contact our program support team to let them know you\u2019re out of codes." })));
-}
-function LoadingSlot() {
-  return (h("slot", { name: "loading" }, h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null)));
-}
-function LoadingRow() {
-  return h("sl-skeleton", { style: { width: "100%" } });
-}
-function useDemoReferralCodes(props) {
-  return cjs({
-    titleText: props.titleText,
-    states: {
-      noCodes: false,
-      loading: false,
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
-export { Pagination as sqm_pagination, ReferralCode as sqm_referral_code, ReferralCodes as sqm_referral_codes };