@adyen/bento-vue2 1.26.0 → 1.28.0

package/dist/summary-grid.js

@@ -1,587 +1,12 @@
-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.dd30e538.js";
-import { BentoTag as M, BentoTagVariant as f } from "./tag.js";
-import { C as G } from "./chunks/copy.f85700c6.js";
-import "./assets/index41.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;
+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";
 export {
-  _t as BentoSummaryGrid,
-  ft as BentoSummaryGridItemAmount,
-  Tt as BentoSummaryGridItemCustom,
-  gt as BentoSummaryGridItemNumeric,
-  vt as BentoSummaryGridItemPercentage,
-  i as BentoSummaryGridItemSize,
-  St as BentoSummaryGridItemText,
-  o as BentoSummaryGridItemTrendDirection
+  r as BentoSummaryGrid,
+  t as BentoSummaryGridItemAmount,
+  a as BentoSummaryGridItemCustom,
+  o as BentoSummaryGridItemNumeric,
+  i as BentoSummaryGridItemPercentage,
+  n as BentoSummaryGridItemSize,
+  u as BentoSummaryGridItemText,
+  d as BentoSummaryGridItemTrendDirection
 };
 //# sourceMappingURL=summary-grid.js.map