@adyen/bento-vue2 1.53.0 → 1.54.0

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

@@ -1,631 +0,0 @@
-import { defineComponent as u, provide as S, toRef as M, toRefs as R, inject as D, ref as P, computed as l } from "vue";
-import { u as d } from "./use-has-slot.C9lQZ6nz.js";
-import { S as A, a as h } from "./summary-grid.keys.CxTf_FOc.js";
-import { G as V } from "./grid-layout.HvTAa4to.js";
-import { n as c } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B } from "./dashed-underline.CfQuYKV9.js";
-import { B as k } from "./info-icon.C1ReXurF.js";
-import { B as j, a as T } from "./typography.J1v_SPG3.js";
-import { B as w, a as g } from "./tag.IyMxowGc.js";
-import { C as G } from "./copy.DD_Yfyn_.js";
-import "../assets/summary-grid-item-custom.css";
-const U = u({
-  name: "bento-summary-grid",
-  components: { GridLayout: V },
-  props: {
-    /**
-     * Sets the responsive columns widths values for 1 of the 3 rows.
-     */
-    columnWidth: {
-      type: Object,
-      default: null
-    },
-    /**
-     * Renders a font numeric style with slashed zeros instead of normal ones.
-     */
-    slashedZero: { type: Boolean, default: !1 }
-  },
-  setup(e, { slots: t }) {
-    var a, s;
-    let n = 1;
-    if (t) {
-      const m = (s = (a = Object.keys(t)) == null ? void 0 : a.filter((p) => p.includes("cell-"))) == null ? void 0 : s.map((p) => {
-        var f;
-        return parseInt((f = p.split("-")) == null ? void 0 : f[1], 10);
-      });
-      if (n = Math.max(...m), n > 3)
-        throw new Error(
-          "BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information."
-        );
-    }
-    return S(A, () => ({ isSummaryGridLayout: !0 })), S(h, M(e, "slashedZero")), {
-      hasSlot: d(t),
-      numberOfRows: n
-    };
-  }
-});
-var z = function() {
-  var t = this, n = t._self._c;
-  return t._self._setupProxy, n("div", { staticClass: "b-summary-grid" }, t._l(t.numberOfRows, function(r) {
-    var a;
-    return n("grid-layout", { key: `summary-grid-row-${r}`, attrs: { "data-testid": `summary-grid-row-${r}`, "column-width": (a = t.columnWidth) == null ? void 0 : a[`row${r}`] }, scopedSlots: t._u([t.hasSlot(`cell-${r}-1`) ? { key: "col-1", fn: function() {
-      return [t._t(`cell-${r}-1`)];
-    }, proxy: !0 } : null, t.hasSlot(`cell-${r}-2`) ? { key: "col-2", fn: function() {
-      return [t._t(`cell-${r}-2`)];
-    }, proxy: !0 } : null, t.hasSlot(`cell-${r}-3`) ? { key: "col-3", fn: function() {
-      return [t._t(`cell-${r}-3`)];
-    }, proxy: !0 } : null, t.hasSlot(`cell-${r}-4`) ? { key: "col-4", fn: function() {
-      return [t._t(`cell-${r}-4`)];
-    }, proxy: !0 } : null, t.hasSlot(`cell-${r}-5`) ? { key: "col-5", fn: function() {
-      return [t._t(`cell-${r}-5`)];
-    }, proxy: !0 } : null, t.hasSlot(`cell-${r}-6`) ? { key: "col-6", fn: function() {
-      return [t._t(`cell-${r}-6`)];
-    }, proxy: !0 } : null], null, !0) });
-  }), 1);
-}, q = [], N = /* @__PURE__ */ c(
-  U,
-  z,
-  q,
-  !1,
-  null,
-  "0612378b"
-);
-const It = N.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 F = u({
-  name: "summary-grid-item",
-  components: { BentoDashedUnderline: B, BentoInfoIcon: k, BentoTypography: j, BentoTag: w, 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)
-    },
-    /**
-     * Text showed in a dashed-underline title tooltip on hover
-     */
-    underlineTooltipText: { type: String, default: null }
-  },
-  setup(e, { slots: t }) {
-    const { trendDirection: n, secondaryTrendDirection: r, itemType: a, size: s } = R(e), m = D(h, P(!1)), p = (L) => {
-      switch (L) {
-        case o.POSITIVE:
-          return g.GREEN;
-        case o.NEGATIVE:
-          return g.RED;
-        default:
-          return g.BLUE;
-      }
-    }, f = l(() => p(n.value)), b = l(() => p(r.value)), x = l(() => s.value === i.SMALL ? T.BODY : a.value !== _.TEXT ? T.TITLE : null), C = l(() => ({
-      medium: s.value === i.LARGE,
-      strongest: s.value === i.SMALL,
-      wide: s.value === i.SMALL,
-      variant: x.value
-    })), I = l(() => e.fitContent ? { width: "fit-content" } : {}), $ = l(() => ({ "b-summary-grid-item--slashed-zero": m.value })), E = l(() => ({
-      [`b-summary-grid-item__content-trend--${e.trend}`]: e.trend
-    })), v = d(t), O = l(() => e.underlineTooltipText || v("dashed-underline"));
-    return {
-      // Values
-      trendVariant: f,
-      secondaryTrendVariant: b,
-      typographyProps: C,
-      withUnderline: O,
-      // Styles
-      conditionalClasses: $,
-      computedStyles: I,
-      summaryBarItemTrendConditionalClasses: E,
-      // Utils
-      hasSlot: v
-    };
-  }
-});
-var Y = function() {
-  var t = this, n = t._self._c;
-  return t._self._setupProxy, n("div", { staticClass: "b-summary-grid-item", class: t.conditionalClasses, style: t.computedStyles }, [n("div", { staticClass: "b-summary-grid-item__header" }, [n("bento-typography", { staticClass: "b-summary-grid-item__title", attrs: { el: "span", variant: "body" } }, [t.withUnderline ? n("bento-dashed-underline", { attrs: { "tooltip-text": t.underlineTooltipText }, scopedSlots: t._u([t.hasSlot("dashed-underline") ? { key: "popover-content", fn: function() {
-    return [t._t("dashed-underline")];
-  }, proxy: !0 } : null], null, !0) }, [t._v(" " + t._s(t.title) + " ")]) : [t._v(" " + t._s(t.title) + " ")]], 2), n("div", { staticClass: "b-summary-grid-item__title-icons" }, [t.copy ? n("copy", { staticClass: "b-structured-list__icon", attrs: { text: t.copy } }) : t._e(), t.infoIconTooltipText ? n("bento-info-icon", { staticClass: "b-summary-grid-item__title-tooltip", attrs: { "tooltip-text": t.infoIconTooltipText, "tooltip-position": "top" } }) : t._e()], 1)], 1), n("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" ? n("bento-tag", { staticClass: "b-summary-grid-item__content-trend", attrs: { variant: t.trendVariant, label: t.trend } }) : t._e()], 2), t.hasSlot("secondary") ? n("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 ? n("bento-tag", { staticClass: "b-summary-grid-item__content-trend", attrs: { variant: t.secondaryTrendVariant, label: t.secondaryTrend } }) : t._e()], 2) : t._e()], 1);
-}, Z = [], H = /* @__PURE__ */ c(
-  F,
-  Y,
-  Z,
-  !1,
-  null,
-  "27d5d7ae"
-);
-const y = H.exports, W = u({
-  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)
-    },
-    /**
-     * Text showed in the info-icon tooltip on hover
-     */
-    underlineTooltipText: { type: String, default: null }
-  },
-  setup(e, { slots: t }) {
-    return { hasSlot: d(t) };
-  }
-});
-var X = function() {
-  var t = this, n = t._self._c;
-  return t._self._setupProxy, n("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, "underline-tooltip-text": t.underlineTooltipText }, scopedSlots: t._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
-    return [t._t("dashed-underline")];
-  }, proxy: !0 } : null, t.secondaryMetric ? { key: "secondary", fn: function() {
-    return [t._v(" " + t._s(t.secondaryMetric) + " ")];
-  }, proxy: !0 } : null], null, !0) }, [n("div", { staticClass: "b-summary-grid-item-amount__content" }, [n("div", [t._v(t._s(t.label))]), t.secondaryLabel ? n("div", { staticClass: "b-summary-grid-item-amount__secondary-label" }, [t._v(t._s(t.secondaryLabel))]) : t._e()])]);
-}, J = [], K = /* @__PURE__ */ c(
-  W,
-  X,
-  J,
-  !1,
-  null,
-  "cd530d90"
-);
-const $t = K.exports, Q = u({
-  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)
-    },
-    /**
-     * Text showed in the info-icon tooltip on hover
-     */
-    underlineTooltipText: { type: String, default: null }
-  },
-  setup(e, { slots: t }) {
-    return { hasSlot: d(t) };
-  }
-});
-var tt = function() {
-  var t = this, n = t._self._c;
-  return t._self._setupProxy, n("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, "underline-tooltip-text": t.underlineTooltipText }, scopedSlots: t._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
-    return [t._t("dashed-underline")];
-  }, proxy: !0 } : null, t.secondaryMetric ? { key: "secondary", fn: function() {
-    return [t._v(" " + t._s(t.secondaryMetric) + " ")];
-  }, proxy: !0 } : null], null, !0) }, [t._v(" " + t._s(t.label) + " ")]);
-}, et = [], nt = /* @__PURE__ */ c(
-  Q,
-  tt,
-  et,
-  !1,
-  null,
-  null
-);
-const Et = nt.exports, rt = u({
-  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)
-    },
-    /**
-     * Text showed in the info-icon tooltip on hover
-     */
-    underlineTooltipText: { type: String, default: null }
-  },
-  setup(e, { slots: t }) {
-    return { hasSlot: d(t) };
-  }
-});
-var ot = function() {
-  var t = this, n = t._self._c;
-  return t._self._setupProxy, n("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, "underline-tooltip-text": t.underlineTooltipText }, scopedSlots: t._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
-    return [t._t("dashed-underline")];
-  }, proxy: !0 } : null, t.secondaryMetric ? { key: "secondary", fn: function() {
-    return [t._v(" " + t._s(t.secondaryMetric) + "% ")];
-  }, proxy: !0 } : null], null, !0) }, [t._v(" " + t._s(t.label) + "% ")]);
-}, it = [], lt = /* @__PURE__ */ c(
-  rt,
-  ot,
-  it,
-  !1,
-  null,
-  null
-);
-const Ot = lt.exports, at = u({
-  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
-    },
-    /**
-     * Text showed in the info-icon tooltip on hover
-     */
-    underlineTooltipText: { type: String, default: null }
-  },
-  setup(e, { slots: t }) {
-    return { hasSlot: d(t) };
-  }
-});
-var st = function() {
-  var t = this, n = t._self._c;
-  return t._self._setupProxy, n("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, "underline-tooltip-text": t.underlineTooltipText }, scopedSlots: t._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
-    return [t._t("dashed-underline")];
-  }, proxy: !0 } : null], null, !0) }, [t._v(" " + t._s(t.label) + " ")]);
-}, ut = [], dt = /* @__PURE__ */ c(
-  at,
-  st,
-  ut,
-  !1,
-  null,
-  null
-);
-const Lt = dt.exports, ct = u({
-  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 },
-    /**
-     * Text showed in the info-icon tooltip on hover
-     */
-    underlineTooltipText: { type: String, default: null }
-  },
-  emits: ["copy-to-clipboard"],
-  setup(e, { slots: t }) {
-    return { hasSlot: d(t) };
-  }
-});
-var pt = function() {
-  var t = this, n = t._self._c;
-  return t._self._setupProxy, n("summary-grid-item", { attrs: { title: t.title, "info-icon-tooltip-text": t.infoIconTooltipText, copy: t.copy, "fit-content": t.fitContent, "underline-tooltip-text": t.underlineTooltipText }, on: { "copy-to-clipoard": function(r) {
-    return t.$emit("copy-to-clipboard");
-  } }, scopedSlots: t._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
-    return [t._t("dashed-underline")];
-  }, proxy: !0 } : null], null, !0) }, [t._t("default")], 2);
-}, yt = [], mt = /* @__PURE__ */ c(
-  ct,
-  pt,
-  yt,
-  !1,
-  null,
-  null
-);
-const Mt = mt.exports;
-export {
-  i as B,
-  $t as a,
-  Et as b,
-  Ot as c,
-  Lt as d,
-  Mt as e,
-  o as f,
-  It as s
-};
-//# sourceMappingURL=summary-grid-item-custom.Bbdie4EL.js.map