@saasquatch/mint-components 2.0.6 → 2.0.7

package/dist/cjs/sqm-banking-info-form_10.cjs.entry.js

@@ -3779,6 +3779,7 @@ const style$5 = {
     marginBottom: "var(--sl-spacing-xx-small)",
     margin: "0",
     display: "flex",
+    alignItems: "center",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
       color: "var(--sqm-text)",
@@ -3860,6 +3861,9 @@ const style$5 = {
     display: "flex",
     textAlign: "center",
     width: "250px",
+    "&::part(body)": {
+      pointerEvents: "auto",
+    },
   },
   ToolTip: {
     top: "6px",
@@ -3938,6 +3942,43 @@ const style$5 = {
     gap: "var(--sl-spacing-medium)",
     flexWrap: "wrap",
   },
+  DropdownTooltipContainer: {
+    top: "-4px",
+    "&::part(panel)": {
+      boxShadow: "none",
+      border: "none",
+      marginTop: "var(--sl-spacing-x-small)",
+    },
+  },
+  DropdownContent: {
+    padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
+    fontSize: "var(--sl-font-size-small)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+    lineHeight: "var(--sl-line-height-dense)",
+    minWidth: "225px",
+    backgroundColor: "var(--sl-color-gray-900)",
+    color: "var(--sl-color-white)",
+    borderRadius: "var(--sl-border-radius-medium)",
+    position: "relative",
+    marginLeft: "5px",
+  },
+  DropdownArrow: {
+    position: "absolute",
+    left: "-5px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "0",
+    height: "0",
+    borderTop: "5px solid transparent",
+    borderBottom: "5px solid transparent",
+    borderRight: "5px solid var(--sl-color-gray-900)",
+    zIndex: "1",
+  },
+  DropdownLink: {
+    color: "var(--sl-color-white)",
+    textDecoration: "underline",
+  },
 };
 const sheet$4 = JSS.createStyleSheet(style$5);
 const styleString$4 = sheet$4.toString();
@@ -4253,6 +4294,34 @@ const TaxAndCashDashboardView = (props) => {
     }
   };
   const alertInfo = getAlert(states.payoutStatus);
+  const dropdownHover = (el) => {
+    var _a;
+    if (!el)
+      return;
+    const trigger = el.querySelector('[slot="trigger"]');
+    const panel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dropdown__panel");
+    if (!trigger || !panel)
+      return;
+    let hideTimeout;
+    const show = () => {
+      clearTimeout(hideTimeout);
+      el.show();
+    };
+    const scheduleHide = () => {
+      hideTimeout = setTimeout(() => el.hide(), 100);
+    };
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", scheduleHide);
+    panel.addEventListener("mouseenter", show);
+    panel.addEventListener("mouseleave", scheduleHide);
+    return () => {
+      trigger.removeEventListener("mouseenter", show);
+      trigger.removeEventListener("mouseleave", scheduleHide);
+      panel.removeEventListener("mouseenter", show);
+      panel.removeEventListener("mouseleave", scheduleHide);
+      clearTimeout(hideTimeout);
+    };
+  };
   return (index.h("div", null,
     index.h("div", null,
       index.h("style", { type: "text/css" },
@@ -4316,8 +4385,16 @@ const TaxAndCashDashboardView = (props) => {
         index.h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (index.h("div", null,
         index.h("h3", { class: sheet$4.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
-          index.h("sl-tooltip", { trigger: "hover", placement: "right", content: text.indirectTaxTooltipSupport, class: sheet$4.classes.TooltipContainer },
-            index.h("sl-icon", { name: "info-circle", class: sheet$4.classes.ToolTip }))),
+          index.h("sl-dropdown", { placement: "right", distance: 1, ref: dropdownHover, class: sheet$4.classes.DropdownTooltipContainer },
+            index.h("sl-icon", { slot: "trigger", name: "info-circle", class: sheet$4.classes.ToolTip, style: { cursor: "pointer" } }),
+            index.h("div", { class: sheet$4.classes.DropdownContent },
+              index.h("div", { class: sheet$4.classes.DropdownArrow }),
+              global.intl.formatMessage({
+                id: "indirectTaxTooltipSupport",
+                defaultMessage: text.indirectTaxTooltipSupport,
+              }, {
+                supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com`, class: sheet$4.classes.DropdownLink }, text.supportLink)),
+              })))),
         index.h("div", { class: sheet$4.classes.IndirectTaxPreviewDetails },
           index.h("span", null, states.notRegistered ? (index.h("span", { class: sheet$4.classes.NotRegisteredIndirectTaxText }, global.intl.formatMessage({
             id: "notRegisteredForTax",
@@ -4612,7 +4689,7 @@ const TaxAndCashDashboard = class {
      * @uiName Indirect tax tooltip
      * @uiWidget textArea
      */
-    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our Support team.";
+    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our {supportLink}.";
     /**
      * Displayed to participants who have submitted their indirect tax information.
      *

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.js

@@ -57,6 +57,7 @@ const style = {
     marginBottom: "var(--sl-spacing-xx-small)",
     margin: "0",
     display: "flex",
+    alignItems: "center",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
       color: "var(--sqm-text)",
@@ -138,6 +139,9 @@ const style = {
     display: "flex",
     textAlign: "center",
     width: "250px",
+    "&::part(body)": {
+      pointerEvents: "auto",
+    },
   },
   ToolTip: {
     top: "6px",
@@ -216,6 +220,43 @@ const style = {
     gap: "var(--sl-spacing-medium)",
     flexWrap: "wrap",
   },
+  DropdownTooltipContainer: {
+    top: "-4px",
+    "&::part(panel)": {
+      boxShadow: "none",
+      border: "none",
+      marginTop: "var(--sl-spacing-x-small)",
+    },
+  },
+  DropdownContent: {
+    padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
+    fontSize: "var(--sl-font-size-small)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+    lineHeight: "var(--sl-line-height-dense)",
+    minWidth: "225px",
+    backgroundColor: "var(--sl-color-gray-900)",
+    color: "var(--sl-color-white)",
+    borderRadius: "var(--sl-border-radius-medium)",
+    position: "relative",
+    marginLeft: "5px",
+  },
+  DropdownArrow: {
+    position: "absolute",
+    left: "-5px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "0",
+    height: "0",
+    borderTop: "5px solid transparent",
+    borderBottom: "5px solid transparent",
+    borderRight: "5px solid var(--sl-color-gray-900)",
+    zIndex: "1",
+  },
+  DropdownLink: {
+    color: "var(--sl-color-white)",
+    textDecoration: "underline",
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -531,6 +572,34 @@ export const TaxAndCashDashboardView = (props) => {
     }
   };
   const alertInfo = getAlert(states.payoutStatus);
+  const dropdownHover = (el) => {
+    var _a;
+    if (!el)
+      return;
+    const trigger = el.querySelector('[slot="trigger"]');
+    const panel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dropdown__panel");
+    if (!trigger || !panel)
+      return;
+    let hideTimeout;
+    const show = () => {
+      clearTimeout(hideTimeout);
+      el.show();
+    };
+    const scheduleHide = () => {
+      hideTimeout = setTimeout(() => el.hide(), 100);
+    };
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", scheduleHide);
+    panel.addEventListener("mouseenter", show);
+    panel.addEventListener("mouseleave", scheduleHide);
+    return () => {
+      trigger.removeEventListener("mouseenter", show);
+      trigger.removeEventListener("mouseleave", scheduleHide);
+      panel.removeEventListener("mouseenter", show);
+      panel.removeEventListener("mouseleave", scheduleHide);
+      clearTimeout(hideTimeout);
+    };
+  };
   return (h("div", null,
     h("div", null,
       h("style", { type: "text/css" },
@@ -594,8 +663,16 @@ export const TaxAndCashDashboardView = (props) => {
         h("sl-skeleton", { class: sheet.classes.SkeletonTwo }))) : (h("div", null,
         h("h3", { class: sheet.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
-          h("sl-tooltip", { trigger: "hover", placement: "right", content: text.indirectTaxTooltipSupport, class: sheet.classes.TooltipContainer },
-            h("sl-icon", { name: "info-circle", class: sheet.classes.ToolTip }))),
+          h("sl-dropdown", { placement: "right", distance: 1, ref: dropdownHover, class: sheet.classes.DropdownTooltipContainer },
+            h("sl-icon", { slot: "trigger", name: "info-circle", class: sheet.classes.ToolTip, style: { cursor: "pointer" } }),
+            h("div", { class: sheet.classes.DropdownContent },
+              h("div", { class: sheet.classes.DropdownArrow }),
+              intl.formatMessage({
+                id: "indirectTaxTooltipSupport",
+                defaultMessage: text.indirectTaxTooltipSupport,
+              }, {
+                supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com`, class: sheet.classes.DropdownLink }, text.supportLink)),
+              })))),
         h("div", { class: sheet.classes.IndirectTaxPreviewDetails },
           h("span", null, states.notRegistered ? (h("span", { class: sheet.classes.NotRegisteredIndirectTaxText }, intl.formatMessage({
             id: "notRegisteredForTax",

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.js

@@ -129,7 +129,7 @@ export class TaxAndCashDashboard {
      * @uiName Indirect tax tooltip
      * @uiWidget textArea
      */
-    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our Support team.";
+    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our {supportLink}.";
     /**
      * Displayed to participants who have submitted their indirect tax information.
      *
@@ -872,7 +872,7 @@ export class TaxAndCashDashboard {
       },
       "attribute": "indirect-tax-tooltip-support",
       "reflect": false,
-      "defaultValue": "\"To make changes to your indirect tax information, please contact our Support team.\""
+      "defaultValue": "\"To make changes to your indirect tax information, please contact our {supportLink}.\""
     },
     "indirectTaxDetails": {
       "type": "string",

package/dist/esm/sqm-banking-info-form_10.entry.js

@@ -3775,6 +3775,7 @@ const style$5 = {
     marginBottom: "var(--sl-spacing-xx-small)",
     margin: "0",
     display: "flex",
+    alignItems: "center",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
       color: "var(--sqm-text)",
@@ -3856,6 +3857,9 @@ const style$5 = {
     display: "flex",
     textAlign: "center",
     width: "250px",
+    "&::part(body)": {
+      pointerEvents: "auto",
+    },
   },
   ToolTip: {
     top: "6px",
@@ -3934,6 +3938,43 @@ const style$5 = {
     gap: "var(--sl-spacing-medium)",
     flexWrap: "wrap",
   },
+  DropdownTooltipContainer: {
+    top: "-4px",
+    "&::part(panel)": {
+      boxShadow: "none",
+      border: "none",
+      marginTop: "var(--sl-spacing-x-small)",
+    },
+  },
+  DropdownContent: {
+    padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
+    fontSize: "var(--sl-font-size-small)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+    lineHeight: "var(--sl-line-height-dense)",
+    minWidth: "225px",
+    backgroundColor: "var(--sl-color-gray-900)",
+    color: "var(--sl-color-white)",
+    borderRadius: "var(--sl-border-radius-medium)",
+    position: "relative",
+    marginLeft: "5px",
+  },
+  DropdownArrow: {
+    position: "absolute",
+    left: "-5px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "0",
+    height: "0",
+    borderTop: "5px solid transparent",
+    borderBottom: "5px solid transparent",
+    borderRight: "5px solid var(--sl-color-gray-900)",
+    zIndex: "1",
+  },
+  DropdownLink: {
+    color: "var(--sl-color-white)",
+    textDecoration: "underline",
+  },
 };
 const sheet$4 = createStyleSheet(style$5);
 const styleString$4 = sheet$4.toString();
@@ -4249,6 +4290,34 @@ const TaxAndCashDashboardView = (props) => {
     }
   };
   const alertInfo = getAlert(states.payoutStatus);
+  const dropdownHover = (el) => {
+    var _a;
+    if (!el)
+      return;
+    const trigger = el.querySelector('[slot="trigger"]');
+    const panel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dropdown__panel");
+    if (!trigger || !panel)
+      return;
+    let hideTimeout;
+    const show = () => {
+      clearTimeout(hideTimeout);
+      el.show();
+    };
+    const scheduleHide = () => {
+      hideTimeout = setTimeout(() => el.hide(), 100);
+    };
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", scheduleHide);
+    panel.addEventListener("mouseenter", show);
+    panel.addEventListener("mouseleave", scheduleHide);
+    return () => {
+      trigger.removeEventListener("mouseenter", show);
+      trigger.removeEventListener("mouseleave", scheduleHide);
+      panel.removeEventListener("mouseenter", show);
+      panel.removeEventListener("mouseleave", scheduleHide);
+      clearTimeout(hideTimeout);
+    };
+  };
   return (h("div", null,
     h("div", null,
       h("style", { type: "text/css" },
@@ -4312,8 +4381,16 @@ const TaxAndCashDashboardView = (props) => {
         h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (h("div", null,
         h("h3", { class: sheet$4.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
-          h("sl-tooltip", { trigger: "hover", placement: "right", content: text.indirectTaxTooltipSupport, class: sheet$4.classes.TooltipContainer },
-            h("sl-icon", { name: "info-circle", class: sheet$4.classes.ToolTip }))),
+          h("sl-dropdown", { placement: "right", distance: 1, ref: dropdownHover, class: sheet$4.classes.DropdownTooltipContainer },
+            h("sl-icon", { slot: "trigger", name: "info-circle", class: sheet$4.classes.ToolTip, style: { cursor: "pointer" } }),
+            h("div", { class: sheet$4.classes.DropdownContent },
+              h("div", { class: sheet$4.classes.DropdownArrow }),
+              intl.formatMessage({
+                id: "indirectTaxTooltipSupport",
+                defaultMessage: text.indirectTaxTooltipSupport,
+              }, {
+                supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com`, class: sheet$4.classes.DropdownLink }, text.supportLink)),
+              })))),
         h("div", { class: sheet$4.classes.IndirectTaxPreviewDetails },
           h("span", null, states.notRegistered ? (h("span", { class: sheet$4.classes.NotRegisteredIndirectTaxText }, intl.formatMessage({
             id: "notRegisteredForTax",
@@ -4608,7 +4685,7 @@ const TaxAndCashDashboard = class {
      * @uiName Indirect tax tooltip
      * @uiWidget textArea
      */
-    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our Support team.";
+    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our {supportLink}.";
     /**
      * Displayed to participants who have submitted their indirect tax information.
      *