@saasquatch/mint-components 1.15.0-115 → 1.15.0-117

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

@@ -0,0 +1,147 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ad175903.js');
+const domContextHooks_module = require('./dom-context-hooks.module-baf97805.js');
+const index_module = require('./index.module-0ec494e5.js');
+require('./jss-preset-default.esm-b48f0c33.js');
+require('./JSS-518e9b4d.js');
+require('./mixins-f51b04f1.js');
+const utils = require('./utils-ebe923b6.js');
+const cjs = require('./cjs-2bf512b9.js');
+const copyTextView = require('./copy-text-view-f0313f78.js');
+
+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 useShareCode(props) {
+  var _a, _b;
+  const { programId = index_module.H() } = props;
+  const user = index_module.J();
+  const engagementMedium = index_module.B();
+  const { data } = index_module.wn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
+  const copyString = (_b = (_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] = domContextHooks_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 ShareCode = 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";
+    /**
+     * The number of milliseconds that the tooltip appears for
+     *
+     * @uiName Tooltip lifespan
+     */
+    this.tooltiplifespan = 1000;
+    /**
+     * Change the text alignment
+     *
+     * @uiName Share code alignment
+     * @uiType string
+     * @uiEnum ["left", "center", "right"]
+     * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
+     */
+    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"]
+     * @uiGroup Style
+     */
+    this.buttonStyle = "icon";
+    /**
+     * The type of the button that is used (primary or secondary).
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
+    domContextHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = utils.getProps(this);
+    const props = index_module.isDemo()
+      ? useDemoShareCode(thisProps)
+      : useShareCode(thisProps);
+    return index.h(copyTextView.CopyTextView, Object.assign({}, props));
+  }
+};
+function useDemoShareCode(props) {
+  const [open, setOpen] = domContextHooks_module.useState(false);
+  const copyString = "SHARECODE001";
+  return cjs.cjs({
+    copyString: copyString,
+    tooltiptext: props.tooltiptext,
+    textAlign: props.textAlign,
+    copyButtonLabel: props.copyButtonLabel,
+    buttonStyle: props.buttonStyle,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    borderColor: props.borderColor,
+    buttonType: props.buttonType,
+    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 });
+}
+
+exports.sqm_share_code = ShareCode;

package/dist/cjs/sqm-share-link.cjs.entry.js

@@ -0,0 +1,102 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ad175903.js');
+const domContextHooks_module = require('./dom-context-hooks.module-baf97805.js');
+const index_module = require('./index.module-0ec494e5.js');
+require('./jss-preset-default.esm-b48f0c33.js');
+require('./JSS-518e9b4d.js');
+require('./mixins-f51b04f1.js');
+const utils = require('./utils-ebe923b6.js');
+const cjs = require('./cjs-2bf512b9.js');
+require('./useReferralCodes-bb07449a.js');
+const copyTextView = require('./copy-text-view-f0313f78.js');
+const useShareLink = require('./useShareLink-ce1c14bd.js');
+
+const ShareLink = 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";
+    /**
+     * The number of milliseconds that the tooltip appears for
+     *
+     * @uiName Tooltip lifespan
+     */
+    this.tooltiplifespan = 1000;
+    /**
+     * Change the text alignment
+     *
+     * @uiName Share link alignment
+     * @uiType string
+     * @uiEnum ["left", "center", "right"]
+     * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
+     */
+    this.textAlign = "left";
+    /**
+     * @uiName Copy button label
+     */
+    this.copyButtonLabel = "Copy Link";
+    /**
+     * The type of the button that is used (primary or secondary).
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
+    /**
+     * Set the copy button style and placement
+     *
+     * @uiName Button style
+     * @uiType string
+     * @uiEnum ["icon", "button-outside", "button-below"]
+     * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
+     */
+    this.buttonStyle = "icon";
+    domContextHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = utils.getProps(this);
+    const props = index_module.isDemo()
+      ? useDemoShareLink(thisProps)
+      : useShareLink.useShareLink(thisProps);
+    return index.h(copyTextView.CopyTextView, Object.assign({}, props));
+  }
+};
+function useDemoShareLink(props) {
+  const [open, setOpen] = domContextHooks_module.useState(false);
+  const copyString = "https://www.example.com/sharelink/abc";
+  return cjs.cjs({
+    copyString: copyString,
+    tooltiptext: props.tooltiptext,
+    textAlign: props.textAlign,
+    buttonStyle: props.buttonStyle,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
+    copyButtonLabel: props.copyButtonLabel,
+    borderColor: props.borderColor,
+    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 });
+}
+
+exports.sqm_share_link = ShareLink;

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

@@ -11,7 +11,7 @@ require('./utils-7cbd60cc.js');
 const JSS = require('./JSS-8503a151.js');
 require('./useReferralCodes-11cdf43b.js');
 require('./mixins-4761d472.js');
-const copyTextView = require('./copy-text-view-c13907f9.js');
+const copyTextView = require('./copy-text-view-44dfefc7.js');
 const GenericTableView = require('./GenericTableView-a9845e80.js');
 require('./useChildElements-966c9041.js');
 const luxon = require('./luxon-949beaf2.js');
@@ -33,7 +33,7 @@ require('./utilities-9a0c5e91.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-25eb2099.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-1c4e781f.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-0c3b2f48.js');
-const ShadowViewAddon = require('./ShadowViewAddon-74752e56.js');
+const ShadowViewAddon = require('./ShadowViewAddon-f1bd9b26.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
 const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-cf888c7b.js');
 const utils = require('./utils-e3305bd8.js');
@@ -13395,7 +13395,7 @@ const Default$m = () => {
     open: false,
     tooltiptext: "Copied!",
   };
-  return index.h(copyTextView.CopyTextView, Object.assign({ textColor: "red" }, props));
+  return index.h(copyTextView.CopyTextView, Object.assign({}, props));
 };
 const Tooltip = () => {
   const props = {

package/dist/collection/components/sqm-share-link/ShareLink.stories.js

@@ -13,7 +13,7 @@ export const Default = () => {
     open: false,
     tooltiptext: "Copied!",
   };
-  return h(CopyTextView, Object.assign({ textColor: "red" }, props));
+  return h(CopyTextView, Object.assign({}, props));
 };
 export const Tooltip = () => {
   const props = {

package/dist/collection/components/views/copy-text-view.js

@@ -33,15 +33,10 @@ export function CopyTextView(props) {
         width: "100%",
       },
       "&::part(base)": {
-        // Use ternary operators for optional props to avoid issues with "undefinedpx"
-        "--sl-input-border-radius": props.borderRadius
-          ? `${props.borderRadius}px`
-          : "var(--sqm-input-border-radius)",
-        "--sl-input-border-color": props.borderColor || "var(--sqm-border-color)",
-        // These are now correct
+        "--sl-input-border-radius": `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
         "--sl-input-background-color": props.backgroundColor || "var(--sqm-portal-background)",
         "--sl-input-color": props.textColor || "var(--sqm-input-color)",
-        // Other variables
+        "--sl-input-border-color": "var(--sqm-border-color)",
         "--sl-input-border-color-hover": "#999999",
         "--sl-input-border-color-focus": "#999999",
         "--sl-input-color-hover": "var(--sqm-input-color-hover)",
@@ -51,6 +46,9 @@ export function CopyTextView(props) {
         "--sl-input-background-color-hover": "var(--sqm-portal-background)",
         cursor: "pointer",
         overflow: "visible",
+        borderRadius: `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
+        background: props.backgroundColor || "var(--sqm-portal-background)",
+        border: `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-input-border-color)"}`,
       },
       width: "100%",
     },