@adyen/bento-vue2 1.28.0 → 1.29.0

package/dist/summary-grid.js

@@ -1,12 +1,587 @@
-import { s as r, a as t, e as a, b as o, c as i, B as n, d as u, f as d } from "./chunks/summary-grid-item-custom.CJpDnoPw.js";
+import { defineComponent as l, provide as x, toRefs as $, computed as u } from "vue";
+import { u as v } from "./chunks/use-has-slot.fbeb19ec.js";
+import { S as h } from "./chunks/summary-grid.keys.1d1028c2.js";
+import { G as E } from "./chunks/grid-layout.e0025286.js";
+import { n as c } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { BentoInfoIcon as O } from "./info-icon.js";
+import { B as L, a as g } from "./chunks/index.e29a6907.js";
+import { BentoTag as M, BentoTagVariant as f } from "./tag.js";
+import { C as G } from "./chunks/copy.d5dd2b60.js";
+import "./assets/index37.css";
+const P = l({
+  name: "bento-summary-grid",
+  components: { GridLayout: E },
+  props: {
+    /**
+     * Sets the responsive columns widths values for 1 of the 3 rows.
+     */
+    columnWidth: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(e, { slots: t }) {
+    var a, s;
+    let r = 1;
+    if (t) {
+      const d = (s = (a = Object.keys(t)) == null ? void 0 : a.filter((m) => m.includes("cell-"))) == null ? void 0 : s.map((m) => {
+        var p;
+        return parseInt((p = m.split("-")) == null ? void 0 : p[1], 10);
+      });
+      if (r = Math.max(...d), r > 3)
+        throw new Error(
+          "BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information."
+        );
+    }
+    return x(h, () => ({ isSummaryGridLayout: !0 })), {
+      hasSlot: v(t),
+      numberOfRows: r
+    };
+  }
+});
+var R = function() {
+  var t = this, r = t._self._c;
+  return t._self._setupProxy, r("div", { staticClass: "b-summary-grid" }, t._l(t.numberOfRows, function(n) {
+    var a;
+    return r("grid-layout", { key: `summary-grid-row-${n}`, attrs: { "data-testid": `summary-grid-row-${n}`, "column-width": (a = t.columnWidth) == null ? void 0 : a[`row${n}`] }, scopedSlots: t._u([t.hasSlot(`cell-${n}-1`) ? { key: "col-1", fn: function() {
+      return [t._t(`cell-${n}-1`)];
+    }, proxy: !0 } : null, t.hasSlot(`cell-${n}-2`) ? { key: "col-2", fn: function() {
+      return [t._t(`cell-${n}-2`)];
+    }, proxy: !0 } : null, t.hasSlot(`cell-${n}-3`) ? { key: "col-3", fn: function() {
+      return [t._t(`cell-${n}-3`)];
+    }, proxy: !0 } : null, t.hasSlot(`cell-${n}-4`) ? { key: "col-4", fn: function() {
+      return [t._t(`cell-${n}-4`)];
+    }, proxy: !0 } : null, t.hasSlot(`cell-${n}-5`) ? { key: "col-5", fn: function() {
+      return [t._t(`cell-${n}-5`)];
+    }, proxy: !0 } : null, t.hasSlot(`cell-${n}-6`) ? { key: "col-6", fn: function() {
+      return [t._t(`cell-${n}-6`)];
+    }, proxy: !0 } : null], null, !0) });
+  }), 1);
+}, A = [], V = /* @__PURE__ */ c(
+  P,
+  R,
+  A,
+  !1,
+  null,
+  "7bb9380f",
+  null,
+  null
+);
+const _t = V.exports;
+var i = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(i || {}), o = /* @__PURE__ */ ((e) => (e.POSITIVE = "positive", e.NEGATIVE = "negative", e.NEUTRAL = "neutral", e))(o || {}), _ = /* @__PURE__ */ ((e) => (e.AMOUNT = "amount", e.PERCENTAGE = "percentage", e.NUMERIC = "numeric", e.TEXT = "text", e.CUSTOM = "custom", e))(_ || {});
+const B = l({
+  name: "summary-grid-item",
+  components: { BentoInfoIcon: O, BentoTypography: L, BentoTag: M, Copy: G },
+  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: _.CUSTOM,
+      validator: (e) => Object.values(_).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: i.SMALL,
+      validator: (e) => Object.values(i).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: t }) {
+    const { trendDirection: r, secondaryTrendDirection: n, itemType: a, size: s } = $(e), d = (C) => {
+      switch (C) {
+        case o.POSITIVE:
+          return f.GREEN;
+        case o.NEGATIVE:
+          return f.RED;
+        default:
+          return f.BLUE;
+      }
+    }, m = u(() => d(r.value)), p = u(() => d(n.value)), S = u(() => s.value === i.SMALL ? g.BODY : a.value !== _.TEXT ? g.TITLE : null), T = u(() => ({
+      medium: s.value === i.LARGE,
+      strongest: s.value === i.SMALL,
+      wide: s.value === i.SMALL,
+      variant: S.value
+    })), b = u(() => e.fitContent ? { width: "fit-content" } : {}), I = u(() => ({
+      [`b-summary-grid-item__content-trend--${e.trend}`]: e.trend
+    }));
+    return {
+      // Values
+      trendVariant: m,
+      secondaryTrendVariant: p,
+      typographyProps: T,
+      // Styles
+      computedStyles: b,
+      summaryBarItemTrendConditionalClasses: I,
+      // Utils
+      hasSlot: v(t)
+    };
+  }
+});
+var D = function() {
+  var t = this, r = t._self._c;
+  return t._self._setupProxy, r("div", { staticClass: "b-summary-grid-item", style: t.computedStyles }, [r("div", { staticClass: "b-summary-grid-item__header" }, [r("bento-typography", { staticClass: "b-summary-grid-item__title", attrs: { el: "span", variant: "body" } }, [t._v(" " + t._s(t.title) + " ")]), r("div", { staticClass: "b-summary-grid-item__title-icons" }, [t.copy ? r("copy", { staticClass: "b-structured-list__icon", attrs: { text: t.copy } }) : t._e(), t.infoIconTooltipText ? r("bento-info-icon", { staticClass: "b-summary-grid-item__title-tooltip", attrs: { "tooltip-text": t.infoIconTooltipText, "tooltip-position": "top" } }) : t._e()], 1)], 1), r("bento-typography", t._b({ staticClass: "b-summary-grid-item__title", attrs: { "data-testid": "summary-grid-item-content-typography", el: "span" } }, "bento-typography", t.typographyProps, !1), [t._t("default"), t.trend && t.itemType !== "text" ? r("bento-tag", { staticClass: "b-summary-grid-item__content-trend", attrs: { variant: t.trendVariant, label: t.trend } }) : t._e()], 2), t.hasSlot("secondary") ? r("bento-typography", { staticClass: "b-summary-grid-item__title", attrs: { "data-testid": "summary-grid-item-secondary-metric-typography", el: "span", variant: "caption", stronger: "" } }, [t._t("secondary"), t.secondaryTrend ? r("bento-tag", { staticClass: "b-summary-grid-item__content-trend", attrs: { variant: t.secondaryTrendVariant, label: t.secondaryTrend } }) : t._e()], 2) : t._e()], 1);
+}, j = [], w = /* @__PURE__ */ c(
+  B,
+  D,
+  j,
+  !1,
+  null,
+  "6f017e49",
+  null,
+  null
+);
+const y = w.exports, k = l({
+  name: "bento-summary-grid-item-amount",
+  components: { SummaryGridItem: y },
+  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: i.SMALL,
+      validator: (e) => Object.values(i).includes(e)
+    }
+  }
+});
+var N = function() {
+  var t = this, r = t._self._c;
+  return t._self._setupProxy, r("summary-grid-item", { staticClass: "b-summary-grid-item-amount", attrs: { "item-type": "amount", "info-icon-tooltip-text": t.infoIconTooltipText, title: t.title, copy: t.copy, "fit-content": t.fitContent, size: t.size, trend: t.trend, "trend-direction": t.trendDirection, "secondary-trend": t.secondaryTrend, "secondary-trend-direction": t.secondaryTrendDirection }, scopedSlots: t._u([t.secondaryMetric ? { key: "secondary", fn: function() {
+    return [t._v(" " + t._s(t.secondaryMetric) + " ")];
+  }, proxy: !0 } : null], null, !0) }, [r("div", { staticClass: "b-summary-grid-item-amount__content" }, [r("div", [t._v(t._s(t.label))]), t.secondaryLabel ? r("div", { staticClass: "b-summary-grid-item-amount__secondary-label" }, [t._v(t._s(t.secondaryLabel))]) : t._e()])]);
+}, q = [], z = /* @__PURE__ */ c(
+  k,
+  N,
+  q,
+  !1,
+  null,
+  "13717f92",
+  null,
+  null
+);
+const ft = z.exports, U = l({
+  name: "bento-summary-grid-item-numeric",
+  components: { SummaryGridItem: y },
+  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: i.SMALL,
+      validator: (e) => Object.values(i).includes(e)
+    }
+  }
+});
+var F = function() {
+  var t = this, r = t._self._c;
+  return t._self._setupProxy, r("summary-grid-item", { staticClass: "b-summary-grid-item-numeric", attrs: { "item-type": "numeric", "info-icon-tooltip-text": t.infoIconTooltipText, title: t.title, copy: t.copy, "fit-content": t.fitContent, size: t.size, trend: t.trend, "trend-direction": t.trendDirection, "secondary-trend": t.secondaryTrend, "secondary-trend-direction": t.secondaryTrendDirection }, scopedSlots: t._u([t.secondaryMetric ? { key: "secondary", fn: function() {
+    return [t._v(" " + t._s(t.secondaryMetric) + " ")];
+  }, proxy: !0 } : null], null, !0) }, [t._v(" " + t._s(t.label) + " ")]);
+}, Y = [], W = /* @__PURE__ */ c(
+  U,
+  F,
+  Y,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const gt = W.exports, X = l({
+  name: "bento-summary-grid-item-percentage",
+  components: { SummaryGridItem: y },
+  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: i.SMALL,
+      validator: (e) => Object.values(i).includes(e)
+    }
+  }
+});
+var H = function() {
+  var t = this, r = t._self._c;
+  return t._self._setupProxy, r("summary-grid-item", { staticClass: "b-summary-grid-item-percentage", attrs: { "item-type": "percentage", "info-icon-tooltip-text": t.infoIconTooltipText, title: t.title, copy: t.copy, "fit-content": t.fitContent, size: t.size, trend: t.trend, "trend-direction": t.trendDirection, "secondary-trend": t.secondaryTrend, "secondary-trend-direction": t.secondaryTrendDirection }, scopedSlots: t._u([t.secondaryMetric ? { key: "secondary", fn: function() {
+    return [t._v(" " + t._s(t.secondaryMetric) + "% ")];
+  }, proxy: !0 } : null], null, !0) }, [t._v(" " + t._s(t.label) + "% ")]);
+}, J = [], K = /* @__PURE__ */ c(
+  X,
+  H,
+  J,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const vt = K.exports, Q = l({
+  name: "bento-summary-grid-item-text",
+  components: { SummaryGridItem: y },
+  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
+    }
+  }
+});
+var Z = function() {
+  var t = this, r = t._self._c;
+  return t._self._setupProxy, r("summary-grid-item", { staticClass: "b-summary-grid-item-text", attrs: { "item-type": "text", "info-icon-tooltip-text": t.infoIconTooltipText, title: t.title, copy: t.copy, "fit-content": t.fitContent } }, [t._v(" " + t._s(t.label) + " ")]);
+}, tt = [], et = /* @__PURE__ */ c(
+  Q,
+  Z,
+  tt,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const St = et.exports, rt = l({
+  name: "bento-summary-grid-item-custom",
+  components: { SummaryGridItem: y },
+  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"]
+});
+var nt = function() {
+  var t = this, r = t._self._c;
+  return t._self._setupProxy, r("summary-grid-item", { attrs: { title: t.title, "info-icon-tooltip-text": t.infoIconTooltipText, copy: t.copy, "fit-content": t.fitContent }, on: { "copy-to-clipoard": function(n) {
+    return t.$emit("copy-to-clipboard");
+  } } }, [t._t("default")], 2);
+}, ot = [], it = /* @__PURE__ */ c(
+  rt,
+  nt,
+  ot,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const Tt = it.exports;
 export {
-  r as BentoSummaryGrid,
-  t as BentoSummaryGridItemAmount,
-  a as BentoSummaryGridItemCustom,
-  o as BentoSummaryGridItemNumeric,
-  i as BentoSummaryGridItemPercentage,
-  n as BentoSummaryGridItemSize,
-  u as BentoSummaryGridItemText,
-  d as BentoSummaryGridItemTrendDirection
+  _t as BentoSummaryGrid,
+  ft as BentoSummaryGridItemAmount,
+  Tt as BentoSummaryGridItemCustom,
+  gt as BentoSummaryGridItemNumeric,
+  vt as BentoSummaryGridItemPercentage,
+  i as BentoSummaryGridItemSize,
+  St as BentoSummaryGridItemText,
+  o as BentoSummaryGridItemTrendDirection
 };
 //# sourceMappingURL=summary-grid.js.map