@adyen/bento-vue3 1.27.0 → 1.28.0

package/dist/chunks/summary-grid-item-custom.B941Kdvq.js

@@ -0,0 +1,720 @@
+import { defineComponent as S, provide as w, resolveComponent as m, openBlock as i, createElementBlock as E, Fragment as P, renderList as N, createBlock as u, createSlots as C, withCtx as r, renderSlot as f, toRefs as R, computed as $, normalizeStyle as z, createElementVNode as O, createVNode as M, createTextVNode as v, toDisplayString as g, createCommentVNode as b, mergeProps as G } from "vue";
+import { u as k } from "./use-has-slot.B7eQSabc.js";
+import { S as q } from "./summary-grid.keys.BBbFrFGF.js";
+import { G as U } from "./grid-layout.CqLbbEzI.js";
+import { _ as T } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as Y } from "./info-icon.DvL1e5Iu.js";
+import { B as W, a as V } from "./typography.D7onlQ9v.js";
+import { B as X, a as L } from "./tag.CPhtHjDD.js";
+import { C as F } from "./copy.BhO7oRgC.js";
+import "../assets/summary-grid-item-custom.css";
+const H = S({
+  name: "bento-summary-grid",
+  components: { GridLayout: U },
+  props: {
+    /**
+     * Sets the responsive columns widths values for 1 of the 3 rows.
+     */
+    columnWidth: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(e, { slots: a }) {
+    var c, s;
+    let l = 1;
+    if (a) {
+      const n = (s = (c = Object.keys(a)) == null ? void 0 : c.filter((t) => t.includes("cell-"))) == null ? void 0 : s.map((t) => {
+        var y;
+        return parseInt((y = t.split("-")) == null ? void 0 : y[1], 10);
+      });
+      if (l = Math.max(...n), l > 3)
+        throw new Error(
+          "BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information."
+        );
+    }
+    return w(q, () => ({ isSummaryGridLayout: !0 })), {
+      hasSlot: k(a),
+      numberOfRows: l
+    };
+  }
+}), J = { class: "b-summary-grid" };
+function K(e, a, l, p, c, s) {
+  const n = m("grid-layout");
+  return i(), E("div", J, [
+    (i(!0), E(P, null, N(e.numberOfRows, (t) => {
+      var y;
+      return i(), u(n, {
+        key: `summary-grid-row-${t}`,
+        "data-testid": `summary-grid-row-${t}`,
+        "column-width": (y = e.columnWidth) == null ? void 0 : y[`row${t}`]
+      }, C({ _: 2 }, [
+        e.hasSlot(`cell-${t}-1`) ? {
+          name: "col-1",
+          fn: r(() => [
+            f(e.$slots, `cell-${t}-1`, {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        e.hasSlot(`cell-${t}-2`) ? {
+          name: "col-2",
+          fn: r(() => [
+            f(e.$slots, `cell-${t}-2`, {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        e.hasSlot(`cell-${t}-3`) ? {
+          name: "col-3",
+          fn: r(() => [
+            f(e.$slots, `cell-${t}-3`, {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        e.hasSlot(`cell-${t}-4`) ? {
+          name: "col-4",
+          fn: r(() => [
+            f(e.$slots, `cell-${t}-4`, {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        e.hasSlot(`cell-${t}-5`) ? {
+          name: "col-5",
+          fn: r(() => [
+            f(e.$slots, `cell-${t}-5`, {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        e.hasSlot(`cell-${t}-6`) ? {
+          name: "col-6",
+          fn: r(() => [
+            f(e.$slots, `cell-${t}-6`, {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0
+      ]), 1032, ["data-testid", "column-width"]);
+    }), 128))
+  ]);
+}
+const _e = /* @__PURE__ */ T(H, [["render", K], ["__scopeId", "data-v-a6c891b9"]]);
+var d = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(d || {}), o = /* @__PURE__ */ ((e) => (e.POSITIVE = "positive", e.NEGATIVE = "negative", e.NEUTRAL = "neutral", e))(o || {}), h = /* @__PURE__ */ ((e) => (e.AMOUNT = "amount", e.PERCENTAGE = "percentage", e.NUMERIC = "numeric", e.TEXT = "text", e.CUSTOM = "custom", e))(h || {});
+const Q = S({
+  name: "summary-grid-item",
+  components: { BentoInfoIcon: Y, BentoTypography: W, BentoTag: X, Copy: F },
+  props: {
+    /**
+     * Text to copy to the clipboard
+     */
+    copy: { type: String, default: void 0 },
+    /**
+     * Applies styling based on content type
+     */
+    // TODO add text truncation for SummaryGridItemType.TEXT
+    itemType: {
+      type: String,
+      default: h.CUSTOM,
+      validator: (e) => Object.values(h).includes(e)
+    },
+    /**
+     * Text showed in the info-icon tooltip on hover
+     */
+    infoIconTooltipText: { type: String, default: null },
+    /**
+     * Text used as a title
+     */
+    title: { type: String, required: !0 },
+    /**
+     * The width of `summary-grid-item` fits its content
+     */
+    fitContent: { type: Boolean, default: !1 },
+    // amount, percentage and numeric props
+    /**
+     * Defines the size of the `summary-grid-item` text content
+     */
+    // TODO implement logic for Large size
+    size: {
+      type: String,
+      default: d.SMALL,
+      validator: (e) => Object.values(d).includes(e)
+    },
+    /**
+     * Shows colored trend label next to text content
+     */
+    trend: {
+      type: String,
+      default: null
+    },
+    /**
+     * Defines the color of trend label
+     */
+    trendDirection: {
+      type: String,
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
+    },
+    /**
+     * Shows colored trend tag next to secondary metric value
+     */
+    secondaryTrend: {
+      type: String,
+      default: null
+    },
+    /**
+     * Defines the color of secondary trend tag
+     */
+    secondaryTrendDirection: {
+      type: String,
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
+    }
+  },
+  setup(e, { slots: a }) {
+    const { trendDirection: l, secondaryTrendDirection: p, itemType: c, size: s } = R(e), n = (j) => {
+      switch (j) {
+        case o.POSITIVE:
+          return L.GREEN;
+        case o.NEGATIVE:
+          return L.RED;
+        default:
+          return L.BLUE;
+      }
+    }, t = $(() => n(l.value)), y = $(() => n(p.value)), I = $(() => s.value === d.SMALL ? V.BODY : c.value !== h.TEXT ? V.TITLE : null), D = $(() => ({
+      medium: s.value === d.LARGE,
+      strongest: s.value === d.SMALL,
+      wide: s.value === d.SMALL,
+      variant: I.value
+    })), A = $(() => e.fitContent ? { width: "fit-content" } : {}), B = $(() => ({
+      [`b-summary-grid-item__content-trend--${e.trend}`]: e.trend
+    }));
+    return {
+      // Values
+      trendVariant: t,
+      secondaryTrendVariant: y,
+      typographyProps: D,
+      // Styles
+      computedStyles: A,
+      summaryBarItemTrendConditionalClasses: B,
+      // Utils
+      hasSlot: k(a)
+    };
+  }
+}), Z = { class: "b-summary-grid-item__header" }, x = { class: "b-summary-grid-item__title-icons" };
+function ee(e, a, l, p, c, s) {
+  const n = m("bento-typography"), t = m("copy"), y = m("bento-info-icon"), I = m("bento-tag");
+  return i(), E("div", {
+    class: "b-summary-grid-item",
+    style: z(e.computedStyles)
+  }, [
+    O("div", Z, [
+      M(n, {
+        class: "b-summary-grid-item__title",
+        el: "span",
+        variant: "body"
+      }, {
+        default: r(() => [
+          v(g(e.title), 1)
+        ]),
+        _: 1
+      }),
+      O("div", x, [
+        e.copy ? (i(), u(t, {
+          key: 0,
+          class: "b-structured-list__icon",
+          text: e.copy
+        }, null, 8, ["text"])) : b("", !0),
+        e.infoIconTooltipText ? (i(), u(y, {
+          key: 1,
+          "tooltip-text": e.infoIconTooltipText,
+          "tooltip-position": "top",
+          class: "b-summary-grid-item__title-tooltip"
+        }, null, 8, ["tooltip-text"])) : b("", !0)
+      ])
+    ]),
+    M(n, G({
+      "data-testid": "summary-grid-item-content-typography",
+      class: "b-summary-grid-item__title"
+    }, e.typographyProps, { el: "span" }), {
+      default: r(() => [
+        f(e.$slots, "default", {}, void 0, !0),
+        e.trend && e.itemType !== "text" ? (i(), u(I, {
+          key: 0,
+          variant: e.trendVariant,
+          label: e.trend,
+          class: "b-summary-grid-item__content-trend"
+        }, null, 8, ["variant", "label"])) : b("", !0)
+      ]),
+      _: 3
+    }, 16),
+    e.hasSlot("secondary") ? (i(), u(n, {
+      key: 0,
+      class: "b-summary-grid-item__title",
+      "data-testid": "summary-grid-item-secondary-metric-typography",
+      el: "span",
+      variant: "caption",
+      stronger: ""
+    }, {
+      default: r(() => [
+        f(e.$slots, "secondary", {}, void 0, !0),
+        e.secondaryTrend ? (i(), u(I, {
+          key: 0,
+          variant: e.secondaryTrendVariant,
+          label: e.secondaryTrend,
+          class: "b-summary-grid-item__content-trend"
+        }, null, 8, ["variant", "label"])) : b("", !0)
+      ]),
+      _: 3
+    })) : b("", !0)
+  ], 4);
+}
+const _ = /* @__PURE__ */ T(Q, [["render", ee], ["__scopeId", "data-v-16298103"]]), te = S({
+  name: "bento-summary-grid-item-amount",
+  components: { SummaryGridItem: _ },
+  props: {
+    /**
+     * Text to copy to the clipboard
+     */
+    copy: { type: String, default: void 0 },
+    /**
+     * Amount to be shown as the main value
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Adds additional label next to amount content
+     */
+    secondaryLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * Amount to be shown as the secondary metric value
+     */
+    secondaryMetric: {
+      type: String,
+      default: null
+    },
+    /**
+     * Text used as a title
+     */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Text showed in the info-icon tooltip on hover
+     */
+    infoIconTooltipText: {
+      type: String,
+      default: null
+    },
+    /**
+     * The width of `summary-grid-item` fits its content
+     */
+    fitContent: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Shows colored trend label next to main label
+     */
+    trend: {
+      type: String,
+      default: null
+    },
+    /**
+     * Defines the direction (color) of the trend label
+     */
+    trendDirection: {
+      type: String,
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
+    },
+    /**
+     * Shows colored secondary trend tag next to the secondary metric value
+     */
+    secondaryTrend: {
+      type: String,
+      default: null
+    },
+    /**
+     * Defines the direction (color) of the secondary metric's trend tag
+     */
+    secondaryTrendDirection: {
+      type: String,
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
+    },
+    /**
+     * Defines the size of the `summary-grid-item` text content
+     */
+    size: {
+      type: String,
+      default: d.SMALL,
+      validator: (e) => Object.values(d).includes(e)
+    }
+  }
+}), ne = { class: "b-summary-grid-item-amount__content" }, oe = {
+  key: 0,
+  class: "b-summary-grid-item-amount__secondary-label"
+};
+function re(e, a, l, p, c, s) {
+  const n = m("summary-grid-item");
+  return i(), u(n, {
+    "item-type": "amount",
+    "info-icon-tooltip-text": e.infoIconTooltipText,
+    title: e.title,
+    copy: e.copy,
+    "fit-content": e.fitContent,
+    size: e.size,
+    trend: e.trend,
+    "trend-direction": e.trendDirection,
+    "secondary-trend": e.secondaryTrend,
+    "secondary-trend-direction": e.secondaryTrendDirection,
+    class: "b-summary-grid-item-amount"
+  }, C({
+    default: r(() => [
+      O("div", ne, [
+        O("div", null, g(e.label), 1),
+        e.secondaryLabel ? (i(), E("div", oe, g(e.secondaryLabel), 1)) : b("", !0)
+      ])
+    ]),
+    _: 2
+  }, [
+    e.secondaryMetric ? {
+      name: "secondary",
+      fn: r(() => [
+        v(g(e.secondaryMetric), 1)
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
+}
+const Ie = /* @__PURE__ */ T(te, [["render", re], ["__scopeId", "data-v-fd1debe6"]]), ie = S({
+  name: "bento-summary-grid-item-numeric",
+  components: { SummaryGridItem: _ },
+  props: {
+    /**
+     * Text to copy to the clipboard
+     */
+    copy: { type: String, default: void 0 },
+    /**
+     * Amount to be shown as the main value
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Amount to be shown as the secondary metric value
+     */
+    secondaryMetric: {
+      type: String,
+      default: null
+    },
+    /**
+     * Text used as a title
+     */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Text showed in the info-icon tooltip on hover
+     */
+    infoIconTooltipText: {
+      type: String,
+      default: null
+    },
+    /**
+     * The width of `summary-grid-item` fits its content
+     */
+    fitContent: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Shows colored trend label next to main numeric content
+     */
+    trend: {
+      type: String,
+      default: null
+    },
+    /**
+     * Defines the direction (color) of the trend label
+     */
+    trendDirection: {
+      type: String,
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
+    },
+    /**
+     * Shows colored secondary trend tag next to the secondary metric value
+     */
+    secondaryTrend: {
+      type: String,
+      default: null
+    },
+    /**
+     * Defines the direction (color) of the secondary metric's trend tag
+     */
+    secondaryTrendDirection: {
+      type: String,
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
+    },
+    /**
+     * Defines the size of the `summary-grid-item` text content
+     */
+    size: {
+      type: String,
+      default: d.SMALL,
+      validator: (e) => Object.values(d).includes(e)
+    }
+  }
+});
+function ae(e, a, l, p, c, s) {
+  const n = m("summary-grid-item");
+  return i(), u(n, {
+    "item-type": "numeric",
+    "info-icon-tooltip-text": e.infoIconTooltipText,
+    title: e.title,
+    copy: e.copy,
+    "fit-content": e.fitContent,
+    size: e.size,
+    trend: e.trend,
+    "trend-direction": e.trendDirection,
+    "secondary-trend": e.secondaryTrend,
+    "secondary-trend-direction": e.secondaryTrendDirection,
+    class: "b-summary-grid-item-numeric"
+  }, C({
+    default: r(() => [
+      v(g(e.label) + " ", 1)
+    ]),
+    _: 2
+  }, [
+    e.secondaryMetric ? {
+      name: "secondary",
+      fn: r(() => [
+        v(g(e.secondaryMetric), 1)
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
+}
+const he = /* @__PURE__ */ T(ie, [["render", ae]]), se = S({
+  name: "bento-summary-grid-item-percentage",
+  components: { SummaryGridItem: _ },
+  props: {
+    /**
+     * Amount to be shown as the main value
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Amount to be shown as the secondary metric value
+     */
+    secondaryMetric: {
+      type: String,
+      default: null
+    },
+    /**
+     * Text used as a title
+     */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Text showed in the info-icon tooltip on hover
+     */
+    infoIconTooltipText: {
+      type: String,
+      default: null
+    },
+    /**
+     * Text to copy to the clipboard
+     */
+    copy: { type: String, default: void 0 },
+    /**
+     * The width of `summary-grid-item` fits its content
+     */
+    fitContent: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Shows colored trend label next to text content
+     */
+    trend: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Defines the direction (color) of the trend label
+     */
+    trendDirection: {
+      type: String,
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
+    },
+    /**
+     * Shows colored secondary trend tag next to the secondary metric value
+     */
+    secondaryTrend: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Defines the direction (color) of the secondary metric's trend tag
+     */
+    secondaryTrendDirection: {
+      type: String,
+      default: o.POSITIVE,
+      validator: (e) => Object.values(o).includes(e)
+    },
+    /**
+     * Defines the size of the `summary-grid-item` text content
+     */
+    size: {
+      type: String,
+      default: d.SMALL,
+      validator: (e) => Object.values(d).includes(e)
+    }
+  }
+});
+function de(e, a, l, p, c, s) {
+  const n = m("summary-grid-item");
+  return i(), u(n, {
+    "item-type": "percentage",
+    "info-icon-tooltip-text": e.infoIconTooltipText,
+    title: e.title,
+    copy: e.copy,
+    "fit-content": e.fitContent,
+    size: e.size,
+    trend: e.trend,
+    "trend-direction": e.trendDirection,
+    "secondary-trend": e.secondaryTrend,
+    "secondary-trend-direction": e.secondaryTrendDirection,
+    class: "b-summary-grid-item-percentage"
+  }, C({
+    default: r(() => [
+      v(g(e.label) + "% ", 1)
+    ]),
+    _: 2
+  }, [
+    e.secondaryMetric ? {
+      name: "secondary",
+      fn: r(() => [
+        v(g(e.secondaryMetric) + "% ", 1)
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
+}
+const Ee = /* @__PURE__ */ T(se, [["render", de]]), le = S({
+  name: "bento-summary-grid-item-text",
+  components: { SummaryGridItem: _ },
+  props: {
+    /**
+     * Text to copy to the clipboard
+     */
+    copy: { type: String, default: void 0 },
+    /**
+     * Amount to be shown as the main value
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Text used as a title
+     */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Text showed in the info-icon tooltip on hover
+     */
+    infoIconTooltipText: {
+      type: String,
+      default: null
+    },
+    /**
+     * The width of `summary-grid-item` fits its content
+     */
+    fitContent: {
+      type: Boolean,
+      default: !1
+    }
+  }
+});
+function ce(e, a, l, p, c, s) {
+  const n = m("summary-grid-item");
+  return i(), u(n, {
+    "item-type": "text",
+    "info-icon-tooltip-text": e.infoIconTooltipText,
+    title: e.title,
+    copy: e.copy,
+    "fit-content": e.fitContent,
+    class: "b-summary-grid-item-text"
+  }, {
+    default: r(() => [
+      v(g(e.label), 1)
+    ]),
+    _: 1
+  }, 8, ["info-icon-tooltip-text", "title", "copy", "fit-content"]);
+}
+const Oe = /* @__PURE__ */ T(le, [["render", ce]]), ue = S({
+  name: "bento-summary-grid-item-custom",
+  components: { SummaryGridItem: _ },
+  props: {
+    /**
+     * Text to copy to the clipboard
+     */
+    copy: { type: String, default: void 0 },
+    /**
+     * Text showed in the info-icon tooltip on hover
+     */
+    infoIconTooltipText: { type: String, default: null },
+    /**
+     * Text used as a title
+     */
+    title: { type: String, required: !0 },
+    /**
+     * The width of `summary-grid-item` fits its content
+     */
+    fitContent: { type: Boolean, default: !1 }
+  },
+  emits: ["copy-to-clipboard"]
+});
+function me(e, a, l, p, c, s) {
+  const n = m("summary-grid-item");
+  return i(), u(n, {
+    title: e.title,
+    "info-icon-tooltip-text": e.infoIconTooltipText,
+    copy: e.copy,
+    "fit-content": e.fitContent,
+    onCopyToClipoard: a[0] || (a[0] = (t) => e.$emit("copy-to-clipboard"))
+  }, {
+    default: r(() => [
+      f(e.$slots, "default")
+    ]),
+    _: 3
+  }, 8, ["title", "info-icon-tooltip-text", "copy", "fit-content"]);
+}
+const Ce = /* @__PURE__ */ T(ue, [["render", me]]);
+export {
+  d as B,
+  Ie as a,
+  he as b,
+  Ee as c,
+  Oe as d,
+  Ce as e,
+  o as f,
+  _e as s
+};
+//# sourceMappingURL=summary-grid-item-custom.B941Kdvq.js.map