@saasquatch/mint-components 1.13.3-9 → 1.13.4

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

@@ -1,229 +0,0 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { useState, withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop } from "@stencil/core";
-import deepmerge from "deepmerge";
-import { getProps } from "../../utils/utils";
-import { QrCodeView } from "./sqm-qr-code-view";
-import { useQRCode } from "./useQRCode";
-/**
- * @uiName QR Code
- * @exampleGroup Sharing
- * @example QR Code - <sqm-qr-code></sqm-qr-code>
- */
-export class QrCode {
-  constructor() {
-    /**
-     * @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";
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const thisProps = getProps(this);
-    const props = isDemo() ? useDemoQRCode(thisProps) : useQRCode(thisProps);
-    return h(QrCodeView, Object.assign({}, props));
-  }
-  static get is() { return "sqm-qr-code"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "titleText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Title",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "title-text",
-      "reflect": false,
-      "defaultValue": "\"Share your QR code\""
-    },
-    "viewCodeText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "View QR code text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "view-code-text",
-      "reflect": false,
-      "defaultValue": "\"View QR code\""
-    },
-    "downloadCodeText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Download QR code text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "download-code-text",
-      "reflect": false,
-      "defaultValue": "\"Download\""
-    },
-    "printCodeText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Print QR code text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "print-code-text",
-      "reflect": false,
-      "defaultValue": "\"Print\""
-    },
-    "errorHeaderText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Header for error banner",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "error-header-text",
-      "reflect": false,
-      "defaultValue": "\"There was an error loading your QR code\""
-    },
-    "errorDescriptionText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Description for error banner",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "error-description-text",
-      "reflect": false,
-      "defaultValue": "\"Please refresh this page and try again\""
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<QRCodeViewProps>",
-        "resolved": "{ titleText?: string; error?: boolean; dialogIsOpen?: boolean; viewError?: boolean; showDialog?: () => void; hideDialog?: () => void; qrLink?: string; createDownloadable?: () => void; viewCodeText?: string; downloadCodeText?: string; printCodeText?: string; errorHeaderText?: string; errorDescriptionText?: string; createPrintable?: () => void; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          },
-          "QRCodeViewProps": {
-            "location": "import",
-            "path": "./sqm-qr-code-view"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-}
-function useDemoQRCode(props) {
-  const [dialogIsOpen, setDialog] = useState(false);
-  return deepmerge({
-    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 });
-}

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

@@ -1,129 +0,0 @@
-import { useEngagementMedium, useMutation, useParentValue, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { useState } from "@saasquatch/stencil-hooks";
-import { useEffect } from "@saasquatch/universal-hooks";
-import { gql } from "graphql-request";
-import { REFERRAL_CODES_NAMESPACE, } from "../sqm-referral-codes/useReferralCodes";
-const ShareLinkQuery = gql `
-  query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {
-    user: viewer {
-      ... on User {
-        shareLink(
-          programId: $programId
-          engagementMedium: $engagementMedium
-          shareMedium: DIRECT
-        )
-      }
-    }
-  }
-`;
-const WIDGET_ENGAGEMENT_EVENT = gql `
-  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
-    createUserAnalyticsEvent(eventMeta: $eventMeta)
-  }
-`;
-export function useQRCode(props) {
-  var _a;
-  const programId = useProgramId();
-  const user = useUserIdentity();
-  const engagementMedium = useEngagementMedium();
-  const contextData = useParentValue(REFERRAL_CODES_NAMESPACE);
-  const [dialogIsOpen, setDialog] = useState(false);
-  const [qrLink, setQrUrl] = useState(null);
-  const [error, setError] = useState(false);
-  const [viewError, setViewError] = useState(false);
-  const { data, errors } = useQuery(ShareLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
-  const [sendLoadEvent] = useMutation(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`;
-  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,
-  };
-}

package/dist/esm/ErrorView-48e2b969.js

@@ -1,33 +0,0 @@
-import { h } from './index-91e7729f.js';
-import { c as createStyleSheet } from './JSS-67b5cff8.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 = createStyleSheet(styles);
-  const styleString = sheet.toString();
-  const { classes } = sheet;
-  return (h("div", null,
-    h("style", null, styleString),
-    h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: classes.Alert },
-      h("sl-icon", { slot: "icon", name: "exclamation-octagon", class: "Error" }),
-      h("strong", null, props.loadingErrorAlertHeader),
-      h("br", null),
-      props.loadingErrorAlertDescription)));
-};
-
-export { ErrorView as E };

package/dist/esm/copy-text-view-782137ba.js

@@ -1,94 +0,0 @@
-import { h } from './index-91e7729f.js';
-import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { H as HostBlock } from './mixins-83f90fa1.js';
-
-const style = {
-  HostBlock: 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 = 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 = (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" ? (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 })) : (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 (h("div", { class: sheet.classes.ContainerDiv },
-    h("style", { type: "text/css" },
-      styleString,
-      vanillaStyle,
-      textAlignStyle[props.textAlign],
-      disabled && disabledStyles),
-    h("div", { class: sheet.classes.containerStyle, style: {
-        flexDirection: `${buttonStyle === "button-below" ? "column" : "row"}`,
-      } },
-      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 && (h("p", { slot: "help-text", class: sheet.classes.errorTextStyle }, props.errorText))),
-      (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
-        copyButton),
-    props.isCopied &&
-      props.showNotificationText &&
-      props.notificationText && (h("p", { part: "sqm-notification-text", class: sheet.classes.notificationTextStyle }, props.notificationText))));
-}
-
-export { CopyTextView as C };

package/dist/esm/sqm-qr-code-view-2dff1823.js

@@ -1,87 +0,0 @@
-import { h } from './index-91e7729f.js';
-import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { E as ErrorView } from './ErrorView-48e2b969.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 = 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 (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)))));
-}
-
-export { QrCodeView as Q };