@saasquatch/mint-components 1.13.3-9 → 1.13.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "1.13.3-9",
+  "version": "1.13.4",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",

package/dist/cjs/ErrorView-b2fcf954.js

@@ -1,35 +0,0 @@
-'use strict';
-
-const index = require('./index-a29c60ef.js');
-const JSS = require('./JSS-8503a151.js');
-
-const styles = {
-  Alert: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-danger-100)",
-      border: "1px solid var(--sl-color-danger-200)",
-      padding: "0 16px",
-    },
-    "& sl-icon": {
-      margin: 0,
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-      margin: 0,
-    },
-  },
-};
-const ErrorView = (props) => {
-  const sheet = JSS.createStyleSheet(styles);
-  const styleString = sheet.toString();
-  const { classes } = sheet;
-  return (index.h("div", null,
-    index.h("style", null, styleString),
-    index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: classes.Alert },
-      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon", class: "Error" }),
-      index.h("strong", null, props.loadingErrorAlertHeader),
-      index.h("br", null),
-      props.loadingErrorAlertDescription)));
-};
-
-exports.ErrorView = ErrorView;

package/dist/cjs/copy-text-view-c85acaaa.js

@@ -1,96 +0,0 @@
-'use strict';
-
-const index = require('./index-a29c60ef.js');
-const JSS = require('./JSS-8503a151.js');
-const mixins = require('./mixins-f7e0377a.js');
-
-const style = {
-  HostBlock: mixins.HostBlock,
-  inputStyle: {
-    "&::part(input)": { textOverflow: "ellipsis", width: "100%" },
-    "&::part(base)": { cursor: "pointer", overflow: "visible" },
-    width: "100%",
-  },
-  inputErrorStyle: {
-    "&::part(base)": {
-      border: "2px solid red",
-    },
-  },
-  ContainerDiv: {
-    display: "flex",
-    alignItems: "flex-start",
-    flexDirection: "column",
-    justifyContent: "center",
-    gap: "var(--sl-spacing-x-small)",
-    width: "100%",
-  },
-  containerStyle: {
-    display: "flex",
-    alignItems: "center",
-    gap: "var(--sl-spacing-x-small)",
-    width: "100%",
-  },
-  errorTextStyle: {
-    margin: "0",
-    color: "var(--sl-color-danger-500)",
-  },
-  notificationTextStyle: {
-    margin: "0",
-    color: "var(--sl-color-neutral-500)",
-  },
-};
-const vanillaStyle = `
-  :host{
-    display: block;   
-    width: 100%;
-  }
-`;
-const textAlignStyle = {
-  right: `
-sl-input::part(input){
-  text-align: right;
-}`,
-  center: `  
-sl-input::part(input){
-  text-align: center;
-}`,
-  left: ``,
-};
-const disabledStyles = `
-  sl-input::part(input){
-    cursor: default;
-  }
-`;
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-function CopyTextView(props) {
-  const { buttonStyle = "icon" } = props;
-  const error = !props.loading && props.error;
-  const inputText = error ? props.inputPlaceholderText : props.copyString;
-  const disabled = error || props.loading || props.disabled;
-  const tooltipPlacement = props.buttonStyle === "button-below"
-    ? "bottom"
-    : props.buttonStyle === "button-outside"
-      ? "top"
-      : "top-end";
-  const copyButton = (index.h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (index.h("sl-icon-button", { exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (index.h("sl-button", { exportparts: "base: copy-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
-  return (index.h("div", { class: sheet.classes.ContainerDiv },
-    index.h("style", { type: "text/css" },
-      styleString,
-      vanillaStyle,
-      textAlignStyle[props.textAlign],
-      disabled && disabledStyles),
-    index.h("div", { class: sheet.classes.containerStyle, style: {
-        flexDirection: `${buttonStyle === "button-below" ? "column" : "row"}`,
-      } },
-      index.h("sl-input", { class: `${sheet.classes.inputStyle} ${error ? sheet.classes.inputErrorStyle : ""}`, exportparts: "base: input-base, input: input-label", value: props.loading ? "Loading..." : inputText, readonly: true, disabled: disabled },
-        buttonStyle === "icon" && copyButton,
-        error && (index.h("p", { slot: "help-text", class: sheet.classes.errorTextStyle }, props.errorText))),
-      (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
-        copyButton),
-    props.isCopied &&
-      props.showNotificationText &&
-      props.notificationText && (index.h("p", { part: "sqm-notification-text", class: sheet.classes.notificationTextStyle }, props.notificationText))));
-}
-
-exports.CopyTextView = CopyTextView;

package/dist/cjs/sqm-qr-code-view-82b14685.js

@@ -1,89 +0,0 @@
-'use strict';
-
-const index = require('./index-a29c60ef.js');
-const JSS = require('./JSS-8503a151.js');
-const ErrorView = require('./ErrorView-b2fcf954.js');
-
-const style = {
-  DialogContainer: {
-    maxWidth: "390px !important",
-  },
-  Container: {
-    display: "flex",
-    flexDirection: "row",
-    gap: "var(--sl-spacing-small)",
-    justifyContent: "space-between",
-  },
-  FacadeContainer: {
-    display: "flex",
-    gap: "var(--sl-spacing-medium)",
-    flexDirection: "column",
-  },
-  ButtonContainer: {
-    display: "flex",
-    gap: "var(--sl-spacing-medium)",
-  },
-  FooterContainer: {
-    textAlign: "left",
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-medium)",
-  },
-  CodeContainer: {
-    display: "flex",
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  Code: {
-    width: "100%",
-    height: "100%",
-    maxWidth: "335px",
-  },
-};
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-const vanillaStyle = `
-  sl-dialog::part(panel) {
-    max-width: 390px;
-    width: 100%;
-  }
-  sl-dialog::part(footer) {
-    display: flex;
-    flex-direction: column;
-    gap: var(--sl-spacing-small);
-    width: 100%;
-  }
-  sl-dialog::part(body) {
-    padding: 0 var(--sl-spacing-large);
-  }
-  :host{
-    display: flex;
-    width: 100%;
-  }
-  @media (max-width: 499px) {
-    :host{
-      display: block;
-    }
-  }`;
-function QrCodeView({ dialogIsOpen, error, viewError, showDialog, hideDialog, qrLink, titleText, viewCodeText, downloadCodeText, printCodeText, errorHeaderText, errorDescriptionText, createDownloadable, createPrintable, }) {
-  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
-    index.h("style", null, vanillaStyle),
-    index.h("style", null, styleString),
-    index.h("div", { class: sheet.classes.FacadeContainer },
-      error && (index.h(ErrorView.ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText })),
-      index.h("span", { part: "sqm-title" }, titleText),
-      index.h("div", { class: sheet.classes.ButtonContainer },
-        index.h("sl-button", { type: "primary", onClick: showDialog }, viewCodeText),
-        index.h("sl-button", { type: "text", onClick: createDownloadable }, downloadCodeText),
-        index.h("sl-button", { type: "text", onClick: createPrintable }, printCodeText))),
-    index.h("sl-dialog", { class: sheet.classes.DialogContainer, width: "250px", open: dialogIsOpen, label: titleText, "onSl-hide": hideDialog },
-      (viewError || error) && (index.h(ErrorView.ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText })),
-      qrLink && (index.h("div", { class: sheet.classes.CodeContainer },
-        index.h("img", { class: sheet.classes.Code, src: qrLink }))),
-      index.h("div", { slot: "footer", class: sheet.classes.FooterContainer },
-        index.h("sl-button", { disabled: error, variant: "default", onClick: createDownloadable }, downloadCodeText),
-        index.h("sl-button", { disabled: error, variant: "default", onClick: createPrintable }, printCodeText)))));
-}
-
-exports.QrCodeView = QrCodeView;

package/dist/cjs/sqm-qr-code.cjs.entry.js

@@ -1,199 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
-const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-6847bc06.js');
-require('./JSS-8503a151.js');
-const useReferralCodes = require('./useReferralCodes-82e8797b.js');
-require('./ErrorView-b2fcf954.js');
-const sqmQrCodeView = require('./sqm-qr-code-view-82b14685.js');
-
-const ShareLinkQuery = index_module.dist.gql `
-  query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {
-    user: viewer {
-      ... on User {
-        shareLink(
-          programId: $programId
-          engagementMedium: $engagementMedium
-          shareMedium: DIRECT
-        )
-      }
-    }
-  }
-`;
-const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
-  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
-    createUserAnalyticsEvent(eventMeta: $eventMeta)
-  }
-`;
-function useQRCode(props) {
-  var _a;
-  const programId = index_module.H();
-  const user = index_module.J();
-  const engagementMedium = index_module.B();
-  const contextData = index_module.Fn(useReferralCodes.REFERRAL_CODES_NAMESPACE);
-  const [dialogIsOpen, setDialog] = stencilHooks_module.useState(false);
-  const [qrLink, setQrUrl] = stencilHooks_module.useState(null);
-  const [error, setError] = stencilHooks_module.useState(false);
-  const [viewError, setViewError] = stencilHooks_module.useState(false);
-  const { data, errors } = index_module.wn(ShareLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
-  const [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
-  const shareLink = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink;
-  const qrPrefix = `${shareLink}?qrCode`;
-  stencilHooks_module.useEffect(() => {
-    if (!shareLink)
-      return;
-    const getQrCode = async () => {
-      try {
-        const res = await fetch(`${shareLink}?qrCode&qrCodeImageFormat=svg`);
-        const blob = await res.blob();
-        const url = URL.createObjectURL(blob);
-        setQrUrl(url);
-      }
-      catch (e) {
-        setViewError(true);
-      }
-    };
-    getQrCode();
-  }, [shareLink]);
-  const fireEvent = async () => {
-    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",
-        },
-      },
-    });
-  };
-  const createDownloadable = async () => {
-    try {
-      const res = await fetch(`${qrPrefix}&qrCodeSize=800&qrCodeImageFormat=png`);
-      const blob = await res.blob();
-      const url = URL.createObjectURL(blob);
-      // Successful
-      if (blob)
-        fireEvent();
-      // Trigger download
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = "qrCode.png";
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    }
-    catch (e) {
-      console.error("Failed to fetch QR code:", e);
-      setError(true);
-    }
-  };
-  const createPrintable = async () => {
-    try {
-      const res = await fetch(`${qrPrefix}&qrCodeSize=1000&qrCodeImageFormat=png&qrCodeErrorCorrectionLevel=H`);
-      const blob = await res.blob();
-      const url = URL.createObjectURL(blob);
-      // Successful
-      if (blob)
-        fireEvent();
-      // Trigger print
-      const page = window.open("about:blank", "_new");
-      const img = page.document.createElement("img");
-      img.src = url;
-      img.onload = () => {
-        page.print();
-        page.close();
-      };
-      page.document.body.appendChild(img);
-    }
-    catch (e) {
-      console.error("Failed to fetch QR code: ", e);
-      setError(true);
-    }
-  };
-  return {
-    ...props,
-    qrLink,
-    dialogIsOpen,
-    error: error,
-    viewError: viewError || !!(errors === null || errors === void 0 ? void 0 : errors.message),
-    showDialog: () => {
-      setError(false);
-      setDialog(true);
-    },
-    hideDialog: () => {
-      setError(false);
-      setDialog(false);
-    },
-    createDownloadable,
-    createPrintable,
-  };
-}
-
-const QrCode = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * @uiName Title
-     */
-    this.titleText = "Share your QR code";
-    /**
-     * @uiName View QR code text
-     */
-    this.viewCodeText = "View QR code";
-    /**
-     * @uiName Download QR code text
-     */
-    this.downloadCodeText = "Download";
-    /**
-     * @uiName Print QR code text
-     */
-    this.printCodeText = "Print";
-    /**
-     * @uiName Header for error banner
-     */
-    this.errorHeaderText = "There was an error loading your QR code";
-    /**
-     * @uiName Description for error banner
-     */
-    this.errorDescriptionText = "Please refresh this page and try again";
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const thisProps = utils.getProps(this);
-    const props = index_module.isDemo() ? useDemoQRCode(thisProps) : useQRCode(thisProps);
-    return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, props));
-  }
-};
-function useDemoQRCode(props) {
-  const [dialogIsOpen, setDialog] = stencilHooks_module.useState(false);
-  return cjs.cjs({
-    dialogIsOpen,
-    showDialog: () => setDialog(true),
-    hideDialog: () => setDialog(false),
-    titleText: props.titleText,
-    viewCodeText: props.viewCodeText,
-    downloadCodeText: props.downloadCodeText,
-    printCodeText: props.printCodeText,
-    qrLink: "https://media.istockphoto.com/id/1251071788/vector/qr-code-bar-code-black-icon-digital-technology.jpg?s=612x612&w=0&k=20&c=maw4OqMSEegAdSo8Drm9HO7i1ddddvP2YaL1UuWbRig=",
-    fireViewQrEvent: () => {
-      console.log("View QR Code clicked");
-    },
-    createDownloadable: async () => {
-      console.log("Download QR Code clicked");
-    },
-    createPrintable: async () => {
-      console.log("Print QR Code clicked");
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
-exports.sqm_qr_code = QrCode;

package/dist/collection/components/sqm-qr-code/QRCode.stories.js

@@ -1,37 +0,0 @@
-import { h } from "@stencil/core";
-import { QrCodeView } from "./sqm-qr-code-view";
-export default {
-  title: "Components/QR Code",
-};
-const defaultProps = {
-  dialogIsOpen: false,
-  error: false,
-  viewError: false,
-  showDialog: () => void 0,
-  hideDialog: () => void 0,
-  qrLink: "https://media.istockphoto.com/id/1251071788/vector/qr-code-bar-code-black-icon-digital-technology.jpg?s=612x612&w=0&k=20&c=maw4OqMSEegAdSo8Drm9HO7i1ddddvP2YaL1UuWbRig=",
-  createDownloadable: async () => {
-    console.log("Download QR Code clicked");
-  },
-  createPrintable: async () => {
-    console.log("Print QR Code clicked");
-  },
-  titleText: "Share your QR code",
-  viewCodeText: "View QR code",
-  downloadCodeText: "Download",
-  printCodeText: "Print",
-  errorHeaderText: "There was an error loading your QR code",
-  errorDescriptionText: "Please refresh this page and try again",
-};
-export const Default = () => {
-  return h(QrCodeView, Object.assign({}, defaultProps));
-};
-export const Expanded = () => {
-  return h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: true }));
-};
-export const Error = () => {
-  return (h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: true, viewError: true })));
-};
-export const DownloadError = () => {
-  return (h(QrCodeView, Object.assign({}, defaultProps, { dialogIsOpen: false, error: true })));
-};

package/dist/collection/components/sqm-qr-code/sqm-qr-code-view.js

@@ -1,84 +0,0 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-import { ErrorView } from "../tax-and-cash/sqm-tax-and-cash/ErrorView";
-const style = {
-  DialogContainer: {
-    maxWidth: "390px !important",
-  },
-  Container: {
-    display: "flex",
-    flexDirection: "row",
-    gap: "var(--sl-spacing-small)",
-    justifyContent: "space-between",
-  },
-  FacadeContainer: {
-    display: "flex",
-    gap: "var(--sl-spacing-medium)",
-    flexDirection: "column",
-  },
-  ButtonContainer: {
-    display: "flex",
-    gap: "var(--sl-spacing-medium)",
-  },
-  FooterContainer: {
-    textAlign: "left",
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-medium)",
-  },
-  CodeContainer: {
-    display: "flex",
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  Code: {
-    width: "100%",
-    height: "100%",
-    maxWidth: "335px",
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-const vanillaStyle = `
-  sl-dialog::part(panel) {
-    max-width: 390px;
-    width: 100%;
-  }
-  sl-dialog::part(footer) {
-    display: flex;
-    flex-direction: column;
-    gap: var(--sl-spacing-small);
-    width: 100%;
-  }
-  sl-dialog::part(body) {
-    padding: 0 var(--sl-spacing-large);
-  }
-  :host{
-    display: flex;
-    width: 100%;
-  }
-  @media (max-width: 499px) {
-    :host{
-      display: block;
-    }
-  }`;
-export function QrCodeView({ dialogIsOpen, error, viewError, showDialog, hideDialog, qrLink, titleText, viewCodeText, downloadCodeText, printCodeText, errorHeaderText, errorDescriptionText, createDownloadable, createPrintable, }) {
-  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
-    h("style", null, vanillaStyle),
-    h("style", null, styleString),
-    h("div", { class: sheet.classes.FacadeContainer },
-      error && (h(ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText })),
-      h("span", { part: "sqm-title" }, titleText),
-      h("div", { class: sheet.classes.ButtonContainer },
-        h("sl-button", { type: "primary", onClick: showDialog }, viewCodeText),
-        h("sl-button", { type: "text", onClick: createDownloadable }, downloadCodeText),
-        h("sl-button", { type: "text", onClick: createPrintable }, printCodeText))),
-    h("sl-dialog", { class: sheet.classes.DialogContainer, width: "250px", open: dialogIsOpen, label: titleText, "onSl-hide": hideDialog },
-      (viewError || error) && (h(ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText })),
-      qrLink && (h("div", { class: sheet.classes.CodeContainer },
-        h("img", { class: sheet.classes.Code, src: qrLink }))),
-      h("div", { slot: "footer", class: sheet.classes.FooterContainer },
-        h("sl-button", { disabled: error, variant: "default", onClick: createDownloadable }, downloadCodeText),
-        h("sl-button", { disabled: error, variant: "default", onClick: createPrintable }, printCodeText)))));
-}