@adyen/bento-vue2 1.55.1 → 1.56.0

package/dist/chunks/summary-grid.types.DoD7Ls0O.js

@@ -1,295 +0,0 @@
-import { defineComponent as a, useSlots as i, onMounted as I, provide as h, toRef as B, toRefs as D, inject as R, ref as G, computed as s } from "vue";
-import { u } from "./use-has-slot.C9lQZ6nz.js";
-import { S as M, a as x } from "./summary-grid.keys.CxTf_FOc.js";
-import { G as k } from "./grid-layout.HvTAa4to.js";
-import { n as d } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as w } from "./dashed-underline.0K0Xbu6k.js";
-import { B as L } from "./info-icon.Dn0FHy-U.js";
-import { B as E } from "./typography.J1v_SPG3.js";
-import { B as z } from "./tag.C7ATWnRW.js";
-import { C as P } from "./copy.C7gFAgeL.js";
-import "../assets/summary-grid.css";
-const A = {}, U = /* @__PURE__ */ a({
-  ...A,
-  __name: "summary-grid",
-  props: {
-    columnWidth: { default: null },
-    slashedZero: { type: Boolean, default: !1 }
-  },
-  setup(r) {
-    var _, c;
-    const t = r, n = i(), e = u(n);
-    let o = 1;
-    if (n) {
-      const y = (c = (_ = Object.keys(n)) == null ? void 0 : _.filter((p) => p.includes("cell-"))) == null ? void 0 : c.map((p) => {
-        var f;
-        return parseInt((f = p.split("-")) == null ? void 0 : f[1], 10);
-      });
-      o = Math.max(...y);
-    }
-    I(() => {
-      if (o > 3)
-        throw new Error(
-          "BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information."
-        );
-    });
-    const l = () => ({ isSummaryGridLayout: !0 });
-    return h(M, l), h(x, B(t, "slashedZero")), { __sfc: !0, props: t, slots: n, hasSlot: e, numberOfRows: o, registerComponentsInSummaryGrid: l, GridLayout: k };
-  }
-});
-var F = function() {
-  var t = this, n = t._self._c, e = t._self._setupProxy;
-  return n("div", { staticClass: "b-summary-grid" }, t._l(e.numberOfRows, function(o) {
-    var l;
-    return n(e.GridLayout, { key: `summary-grid-row-${o}`, attrs: { "data-testid": `summary-grid-row-${o}`, "column-width": (l = t.columnWidth) == null ? void 0 : l[`row${o}`] }, scopedSlots: t._u([e.hasSlot(`cell-${o}-1`) ? { key: "col-1", fn: function() {
-      return [t._t(`cell-${o}-1`)];
-    }, proxy: !0 } : null, e.hasSlot(`cell-${o}-2`) ? { key: "col-2", fn: function() {
-      return [t._t(`cell-${o}-2`)];
-    }, proxy: !0 } : null, e.hasSlot(`cell-${o}-3`) ? { key: "col-3", fn: function() {
-      return [t._t(`cell-${o}-3`)];
-    }, proxy: !0 } : null, e.hasSlot(`cell-${o}-4`) ? { key: "col-4", fn: function() {
-      return [t._t(`cell-${o}-4`)];
-    }, proxy: !0 } : null, e.hasSlot(`cell-${o}-5`) ? { key: "col-5", fn: function() {
-      return [t._t(`cell-${o}-5`)];
-    }, proxy: !0 } : null, e.hasSlot(`cell-${o}-6`) ? { key: "col-6", fn: function() {
-      return [t._t(`cell-${o}-6`)];
-    }, proxy: !0 } : null], null, !0) });
-  }), 1);
-}, O = [], V = /* @__PURE__ */ d(
-  U,
-  F,
-  O,
-  !1,
-  null,
-  "397e4d9c"
-);
-const Mt = V.exports, N = {}, Y = /* @__PURE__ */ a({
-  ...N,
-  __name: "summary-grid-item",
-  props: {
-    copy: { default: void 0 },
-    fitContent: { type: Boolean, default: !1 },
-    infoIconTooltipText: { default: null },
-    size: { default: "small" },
-    title: null,
-    trend: { default: null },
-    trendDirection: { default: "positive" },
-    secondaryTrend: { default: null },
-    secondaryTrendDirection: { default: "positive" },
-    underlineTooltipText: { default: null },
-    itemType: { default: "custom" }
-  },
-  setup(r) {
-    const t = r, { trendDirection: n, secondaryTrendDirection: e, itemType: o, size: l } = D(t), _ = R(x, G(!1)), c = (C) => {
-      switch (C) {
-        case "positive":
-          return "green";
-        case "negative":
-          return "red";
-        default:
-          return "blue";
-      }
-    }, y = s(() => c(n.value)), p = s(() => c(e.value)), f = s(() => l.value === "small" ? "body" : o.value !== "text" ? "title" : null), g = s(() => ({
-      medium: l.value === "large",
-      strongest: l.value === "small",
-      wide: l.value === "small",
-      variant: f.value
-    })), $ = s(() => t.fitContent ? { width: "fit-content" } : {}), b = s(() => ({ "b-summary-grid-item--slashed-zero": _.value })), v = i(), T = u(v), S = s(() => t.underlineTooltipText || T("dashed-underline"));
-    return { __sfc: !0, props: t, trendDirection: n, secondaryTrendDirection: e, itemType: o, size: l, hasSlashedZero: _, tagVariantColor: c, trendVariant: y, secondaryTrendVariant: p, typographyContentElement: f, typographyProps: g, computedStyles: $, conditionalClasses: b, slots: v, hasSlot: T, withUnderline: S, BentoDashedUnderline: w, BentoInfoIcon: L, BentoTypography: E, BentoTag: z, Copy: P };
-  }
-});
-var Z = function() {
-  var t = this, n = t._self._c, e = t._self._setupProxy;
-  return n("div", { staticClass: "b-summary-grid-item", class: e.conditionalClasses, style: e.computedStyles }, [n("div", { staticClass: "b-summary-grid-item__header" }, [n(e.BentoTypography, { staticClass: "b-summary-grid-item__title", attrs: { el: "span", variant: "body" } }, [e.withUnderline ? n(e.BentoDashedUnderline, { attrs: { "tooltip-text": t.underlineTooltipText }, scopedSlots: t._u([e.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(e.Copy, { staticClass: "b-structured-list__icon", attrs: { text: t.copy } }) : t._e(), t.infoIconTooltipText ? n(e.BentoInfoIcon, { staticClass: "b-summary-grid-item__title-tooltip", attrs: { "tooltip-text": t.infoIconTooltipText, "tooltip-position": "top" } }) : t._e()], 1)], 1), n(e.BentoTypography, t._b({ staticClass: "b-summary-grid-item__title", attrs: { "data-testid": "summary-grid-item-content-typography", el: "span" } }, "bento-typography", e.typographyProps, !1), [t._t("default"), t.trend && e.itemType !== "text" ? n(e.BentoTag, { staticClass: "b-summary-grid-item__content-trend", attrs: { variant: e.trendVariant, label: t.trend } }) : t._e()], 2), e.hasSlot("secondary") ? n(e.BentoTypography, { 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(e.BentoTag, { staticClass: "b-summary-grid-item__content-trend", attrs: { variant: e.secondaryTrendVariant, label: t.secondaryTrend } }) : t._e()], 2) : t._e()], 1);
-}, j = [], H = /* @__PURE__ */ d(
-  Y,
-  Z,
-  j,
-  !1,
-  null,
-  "55342bfd"
-);
-const m = H.exports, W = {}, J = /* @__PURE__ */ a({
-  ...W,
-  __name: "summary-grid-item-amount",
-  props: {
-    copy: { default: void 0 },
-    fitContent: { type: Boolean, default: !1 },
-    infoIconTooltipText: { default: null },
-    size: { default: "small" },
-    title: null,
-    trend: { default: null },
-    trendDirection: { default: "positive" },
-    secondaryTrend: { default: null },
-    secondaryTrendDirection: { default: "positive" },
-    underlineTooltipText: { default: null },
-    label: null,
-    secondaryLabel: { default: null },
-    secondaryMetric: { default: null }
-  },
-  setup(r) {
-    const t = i(), n = u(t);
-    return { __sfc: !0, slots: t, hasSlot: n, SummaryGridItem: m };
-  }
-});
-var K = function() {
-  var t = this, n = t._self._c, e = t._self._setupProxy;
-  return n(e.SummaryGridItem, { 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([e.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()])]);
-}, q = [], Q = /* @__PURE__ */ d(
-  J,
-  K,
-  q,
-  !1,
-  null,
-  "33f45b74"
-);
-const kt = Q.exports, X = {}, tt = /* @__PURE__ */ a({
-  ...X,
-  __name: "summary-grid-item-numeric",
-  props: {
-    copy: { default: void 0 },
-    fitContent: { type: Boolean, default: !1 },
-    infoIconTooltipText: { default: null },
-    size: { default: "small" },
-    title: null,
-    trend: { default: null },
-    trendDirection: { default: "positive" },
-    secondaryTrend: { default: null },
-    secondaryTrendDirection: { default: "positive" },
-    underlineTooltipText: { default: null },
-    label: null,
-    secondaryMetric: { default: null }
-  },
-  setup(r) {
-    const t = i(), n = u(t);
-    return { __sfc: !0, slots: t, hasSlot: n, SummaryGridItem: m };
-  }
-});
-var et = function() {
-  var t = this, n = t._self._c, e = t._self._setupProxy;
-  return n(e.SummaryGridItem, { 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([e.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) + " ")]);
-}, nt = [], rt = /* @__PURE__ */ d(
-  tt,
-  et,
-  nt,
-  !1,
-  null,
-  null
-);
-const wt = rt.exports, ot = {}, lt = /* @__PURE__ */ a({
-  ...ot,
-  __name: "summary-grid-item-percentage",
-  props: {
-    copy: { default: void 0 },
-    fitContent: { type: Boolean, default: !1 },
-    infoIconTooltipText: { default: null },
-    size: { default: "small" },
-    title: null,
-    trend: { default: null },
-    trendDirection: { default: "positive" },
-    secondaryTrend: { default: null },
-    secondaryTrendDirection: { default: "positive" },
-    underlineTooltipText: { default: null },
-    label: null,
-    secondaryMetric: { default: null }
-  },
-  setup(r) {
-    const t = i(), n = u(t);
-    return { __sfc: !0, slots: t, hasSlot: n, SummaryGridItem: m };
-  }
-});
-var st = function() {
-  var t = this, n = t._self._c, e = t._self._setupProxy;
-  return n(e.SummaryGridItem, { 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([e.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) + "% ")]);
-}, at = [], it = /* @__PURE__ */ d(
-  lt,
-  st,
-  at,
-  !1,
-  null,
-  null
-);
-const Lt = it.exports, ut = {}, dt = /* @__PURE__ */ a({
-  ...ut,
-  __name: "summary-grid-item-text",
-  props: {
-    copy: { default: void 0 },
-    fitContent: { type: Boolean, default: !1 },
-    infoIconTooltipText: { default: null },
-    label: null,
-    title: null,
-    underlineTooltipText: { default: null }
-  },
-  setup(r) {
-    const t = i(), n = u(t);
-    return { __sfc: !0, slots: t, hasSlot: n, SummaryGridItem: m };
-  }
-});
-var ct = function() {
-  var t = this, n = t._self._c, e = t._self._setupProxy;
-  return n(e.SummaryGridItem, { 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([e.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
-    return [t._t("dashed-underline")];
-  }, proxy: !0 } : null], null, !0) }, [t._v(" " + t._s(t.label) + " ")]);
-}, _t = [], pt = /* @__PURE__ */ d(
-  dt,
-  ct,
-  _t,
-  !1,
-  null,
-  null
-);
-const Et = pt.exports, ft = {}, mt = /* @__PURE__ */ a({
-  ...ft,
-  __name: "summary-grid-item-custom",
-  props: {
-    copy: { default: void 0 },
-    infoIconTooltipText: { default: null },
-    title: null,
-    fitContent: { type: Boolean, default: !1 },
-    underlineTooltipText: { default: null }
-  },
-  setup(r) {
-    const t = i(), n = u(t);
-    return { __sfc: !0, slots: t, hasSlot: n, SummaryGridItem: m };
-  }
-});
-var yt = function() {
-  var t = this, n = t._self._c, e = t._self._setupProxy;
-  return n(e.SummaryGridItem, { attrs: { title: t.title, "info-icon-tooltip-text": t.infoIconTooltipText, copy: t.copy, "fit-content": t.fitContent, "underline-tooltip-text": t.underlineTooltipText }, scopedSlots: t._u([e.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
-    return [t._t("dashed-underline")];
-  }, proxy: !0 } : null], null, !0) }, [t._t("default")], 2);
-}, vt = [], Tt = /* @__PURE__ */ d(
-  mt,
-  yt,
-  vt,
-  !1,
-  null,
-  null
-);
-const zt = Tt.exports;
-var ht = /* @__PURE__ */ ((r) => (r.SMALL = "small", r.MEDIUM = "medium", r.LARGE = "large", r))(ht || {}), xt = /* @__PURE__ */ ((r) => (r.POSITIVE = "positive", r.NEGATIVE = "negative", r.NEUTRAL = "neutral", r))(xt || {});
-export {
-  ht as B,
-  kt as a,
-  wt as b,
-  Lt as c,
-  Et as d,
-  zt as e,
-  xt as f,
-  Mt as s
-};
-//# sourceMappingURL=summary-grid.types.DoD7Ls0O.js.map

package/dist/chunks/summary-grid.types.DoD7Ls0O.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"summary-grid.types.DoD7Ls0O.js","sources":["../../src/components/summary-grid/summary-grid.vue","../../src/components/summary-grid/components/summary-grid-item/summary-grid-item.vue","../../src/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.vue","../../src/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.vue","../../src/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.vue","../../src/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.vue","../../src/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.vue","../../src/components/summary-grid/summary-grid.types.ts"],"sourcesContent":["<template>\n    <div class=\"b-summary-grid\">\n        <grid-layout\n            v-for=\"index in numberOfRows\"\n            :key=\"`summary-grid-row-${index}`\"\n            :data-testid=\"`summary-grid-row-${index}`\"\n            :column-width=\"columnWidth?.[`row${index}`]\"\n        >\n            <template v-if=\"hasSlot(`cell-${index}-1`)\" #col-1>\n                <slot :name=\"`cell-${index}-1`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-2`)\" #col-2>\n                <slot :name=\"`cell-${index}-2`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-3`)\" #col-3>\n                <slot :name=\"`cell-${index}-3`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-4`)\" #col-4>\n                <slot :name=\"`cell-${index}-4`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-5`)\" #col-5>\n                <slot :name=\"`cell-${index}-5`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-6`)\" #col-6>\n                <slot :name=\"`cell-${index}-6`\" />\n            </template>\n        </grid-layout>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { onMounted, provide, toRef, useSlots } from 'vue';\n    import type { BentoSummaryGridLayout, BentoSummaryGridProps } from './summary-grid.types';\n    import { GridLayout } from '@/components/internal';\n    import { useHasSlot } from '@/composables';\n    import {\n        SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n        SUMMARY_GRID_SLASHED_ZERO,\n    } from '@/components/summary-grid/summary-grid.keys';\n\n    const props = defineProps({\n  columnWidth: { default: null },\n  slashedZero: { type: Boolean, default: false }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    let numberOfRows = 1;\n    if (slots) {\n        const slotRows = Object.keys(slots)\n            ?.filter(slotName => slotName.includes('cell-'))\n            ?.map(slotName => parseInt(slotName.split('-')?.[1], 10));\n        numberOfRows = Math.max(...slotRows);\n    }\n\n    onMounted(() => {\n        if (numberOfRows > 3) {\n            throw new Error(\n                'BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information.'\n            );\n        }\n    });\n\n    const registerComponentsInSummaryGrid: BentoSummaryGridLayout = () => {\n        const isSummaryGridLayout = true;\n        return { isSummaryGridLayout };\n    };\n\n    provide(SUMMARY_GRID_LAYOUT_INJECTION_KEY, registerComponentsInSummaryGrid);\n    provide(SUMMARY_GRID_SLASHED_ZERO, toRef(props, 'slashedZero'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary grid component that displays a collection items.\n     *\n     * @example\n     * import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGrid, BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid>\n     *             <template #cell-2-2>\n     *                <bento-summary-grid-item-amount\n     *                   title=\"Text Item\"\n     *                   label=\"14\"\n     *                   info-icon-tooltip-text=\"text for icon\"\n     *                   copy=\"copy this to clipboard\"\n     *                />\n     *             </template>\n     *          </bento-summary-grid>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid.scss\" />\n","<template>\n    <div class=\"b-summary-grid-item\" :class=\"conditionalClasses\" :style=\"computedStyles\">\n        <div class=\"b-summary-grid-item__header\">\n            <bento-typography class=\"b-summary-grid-item__title\" el=\"span\" variant=\"body\">\n                <bento-dashed-underline v-if=\"withUnderline\" :tooltip-text=\"underlineTooltipText\">\n                    {{ title }}\n                    <template v-if=\"hasSlot('dashed-underline')\" #popover-content>\n                        <slot name=\"dashed-underline\"></slot>\n                    </template>\n                </bento-dashed-underline>\n                <template v-else>\n                    {{ title }}\n                </template>\n            </bento-typography>\n            <div class=\"b-summary-grid-item__title-icons\">\n                <copy v-if=\"copy\" class=\"b-structured-list__icon\" :text=\"copy\" />\n\n                <bento-info-icon\n                    v-if=\"infoIconTooltipText\"\n                    :tooltip-text=\"infoIconTooltipText\"\n                    tooltip-position=\"top\"\n                    class=\"b-summary-grid-item__title-tooltip\"\n                />\n            </div>\n        </div>\n        <bento-typography\n            data-testid=\"summary-grid-item-content-typography\"\n            class=\"b-summary-grid-item__title\"\n            v-bind=\"typographyProps\"\n            el=\"span\"\n        >\n            <slot />\n            <bento-tag\n                v-if=\"trend && itemType !== 'text'\"\n                :variant=\"trendVariant\"\n                :label=\"trend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n        <bento-typography\n            v-if=\"hasSlot('secondary')\"\n            class=\"b-summary-grid-item__title\"\n            data-testid=\"summary-grid-item-secondary-metric-typography\"\n            el=\"span\"\n            variant=\"caption\"\n            stronger\n        >\n            <slot name=\"secondary\" />\n            <bento-tag\n                v-if=\"secondaryTrend\"\n                :variant=\"secondaryTrendVariant\"\n                :label=\"secondaryTrend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, toRefs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDashedUnderline } from '@/components/dashed-underline';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, type BentoTypographyVariant } from '@/components/typography';\n    import { BentoTag, type BentoTagVariant } from '@/components/tag';\n    import { Copy } from '@/internal';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n\n    // Types\n    import { SUMMARY_GRID_SLASHED_ZERO } from '@/components/summary-grid/summary-grid.keys';\n    import type { BentoSummaryGridItemTrendDirection } from '@/components/summary-grid/summary-grid.types';\n    import type { BentoSummaryGridItemProps } from './summary-grid-item.types';\n\n    const props = defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlineTooltipText: { default: null },\n  itemType: { default: 'custom' }\n});\n\n    const { trendDirection, secondaryTrendDirection, itemType, size } = toRefs(props);\n    const hasSlashedZero = inject(SUMMARY_GRID_SLASHED_ZERO, ref(false));\n\n    const tagVariantColor = (direction: `${BentoSummaryGridItemTrendDirection}`): `${BentoTagVariant}` => {\n        switch (direction) {\n            case 'positive':\n                return 'green';\n            case 'negative':\n                return 'red';\n            default:\n                return 'blue';\n        }\n    };\n\n    // TODO implement plus or minus symbol logic\n    const trendVariant = computed(() => tagVariantColor(trendDirection.value));\n    const secondaryTrendVariant = computed(() => tagVariantColor(secondaryTrendDirection.value));\n\n    const typographyContentElement = computed<`${BentoTypographyVariant}`>(() => {\n        if (size.value === 'small') {\n            return 'body';\n        }\n        if (itemType.value !== 'text') {\n            return 'title';\n        }\n\n        return null;\n    });\n\n    const typographyProps = computed(() => ({\n        medium: size.value === 'large',\n        strongest: size.value === 'small',\n        wide: size.value === 'small',\n        variant: typographyContentElement.value,\n    }));\n\n    const computedStyles = computed(() => (props.fitContent ? { width: 'fit-content' } : {}));\n\n    const conditionalClasses = computed(() => ({ 'b-summary-grid-item--slashed-zero': hasSlashedZero.value }));\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const withUnderline = computed(() => props.underlineTooltipText || hasSlot('dashed-underline'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"amount\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-amount\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <div class=\"b-summary-grid-item-amount__content\">\n            <div>{{ label }}</div>\n            <div v-if=\"secondaryLabel\" class=\"b-summary-grid-item-amount__secondary-label\">{{ secondaryLabel }}</div>\n        </div>\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemAmountProps } from './summary-grid-item-amount.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryLabel: { default: null },\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display financial data, such as currency values and monetary amounts\n     *\n     * @example\n     * import { BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid-item-amount\n     *              title=\"Your title\"\n     *              label=\"200.00 EUR\"\n     *              secondary-label=\"/ day\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item-amount.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"numeric\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-numeric\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemNumericProps } from './summary-grid-item-numeric.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any numeric information\n     *\n     * @example\n     * import { BentoSummaryGridItemNumeric } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemNumeric },\n     *     template: `\n     *          <bento-summary-grid-item-numeric\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"percentage\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-percentage\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}%\n        <template v-if=\"secondaryMetric\" #secondary> {{ secondaryMetric }}% </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemPercentageProps } from './summary-grid-item-percentage.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any percentage information\n     *\n     * @example\n     * import { BentoSummaryGridItemPercentage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemPercentage },\n     *     template: `\n     *          <bento-summary-grid-item-percentage\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"text\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-text\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n\n    import type { BentoSummaryGridItemTextProps } from './summary-grid-item-text.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  label: null,\n  title: null,\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display text only. Can be used for references, IDs or any other text data.\n     *\n     * @example\n     * import { BentoSummaryGridItemText } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemText },\n     *     template: `\n     *          <bento-summary-grid-item-text\n     *              title=\"Your title\"\n     *              label=\"Your text here\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        :title=\"title\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <slot />\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import SummaryGridItem from '../summary-grid-item/summary-grid-item.vue';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemCustomProps } from './summary-grid-item-custom.types';\n\n    defineProps({\n  copy: { default: undefined },\n  infoIconTooltipText: { default: null },\n  title: null,\n  fitContent: { type: Boolean, default: false },\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","import { GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoSummaryGridItemSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoSummaryGridItemTrendDirection {\n    POSITIVE = 'positive',\n    NEGATIVE = 'negative',\n    NEUTRAL = 'neutral',\n}\n\nexport interface BentoSummaryGridColumnWidth {\n    row1: GridLayoutColumnWidths;\n    row2?: GridLayoutColumnWidths;\n    row3?: GridLayoutColumnWidths;\n}\n\nexport type BentoSummaryGridLayout = () => {\n    isSummaryGridLayout: boolean;\n};\n\nexport interface BentoSummaryGridProps {\n    /**\n     * Sets the responsive columns widths values for 1 of the 3 rows.\n     */\n    columnWidth?: BentoSummaryGridColumnWidth;\n\n    /**\n     * Renders a font numeric style with slashed zeros instead of normal ones.\n     */\n    slashedZero?: boolean;\n}\n"],"names":["__default__$6","slots","useSlots","hasSlot","useHasSlot","numberOfRows","slotRows","_b","_a","slotName","onMounted","registerComponentsInSummaryGrid","provide","SUMMARY_GRID_LAYOUT_INJECTION_KEY","SUMMARY_GRID_SLASHED_ZERO","toRef","props","__default__$5","trendDirection","secondaryTrendDirection","itemType","size","toRefs","hasSlashedZero","inject","ref","tagVariantColor","direction","trendVariant","computed","secondaryTrendVariant","typographyContentElement","typographyProps","computedStyles","conditionalClasses","withUnderline","__default__$4","__default__$3","__default__$2","__default__$1","__default__","BentoSummaryGridItemSize","BentoSummaryGridItemSize2","BentoSummaryGridItemTrendDirection","BentoSummaryGridItemTrendDirection2"],"mappings":"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"}

package/dist/chunks/teleport.5oodkxuB.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"teleport.5oodkxuB.js","sources":["../../src/composables/use-click-outside/use-click-outside.ts","../../src/components/internal/teleport/teleport.vue"],"sourcesContent":["import { onClickOutside } from '@/directives/click-outside/on-click-outside';\nimport { OnClickOutsideHandler, OnClickOutsideOptions } from '@/directives/click-outside/types';\nimport { MaybeElementRef } from '@/types';\nimport { onMounted, onUnmounted } from 'vue';\n\n/**\n * Composable to listen for clicks outside of an element ref.\n *\n * @param {MaybeElementRef} target - HTML Element or \"ref\" to an Element on which the click outside listener will be attached to\n * @param {OnClickOutsideHandler} handler - Function that will be called when the listener gets triggered\n * @param {OnClickOutsideOptions} options - Options to be passed to the listener\n */\nexport const useClickOutside = <T extends OnClickOutsideOptions>(\n    target: MaybeElementRef,\n    handler: OnClickOutsideHandler,\n    options: T = {} as T\n) => {\n    let onClickOutsideStop: () => void;\n\n    onMounted(() => {\n        onClickOutsideStop = onClickOutside(target, handler, options);\n    });\n\n    onUnmounted(() => {\n        if (onClickOutsideStop) {\n            onClickOutsideStop();\n\n            onClickOutsideStop = null;\n        }\n    });\n};\n","<!-- Taken from: https://github.com/Mechazawa/vue2-teleport/blob/master/src/Teleport.vue -->\n<template>\n    <div v-if=\"isVue2\" :class=\"classes\">\n        <slot />\n    </div>\n    <Teleport v-else :to=\"defaultTo\" :where=\"where\" :disabled=\"disabled\" :class=\"classes\">\n        <slot />\n    </Teleport>\n</template>\n\n<script setup lang=\"ts\">\n    import { isVue2 } from 'vue-demi';\n    import { defineComponent, inject } from 'vue';\n    import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys';\n    import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from '@/components/sidepanel/sidepanel.keys';\n    import { MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY } from '@/components/modal-fullscreen/modal-fullscreen.keys';\n</script>\n\n<script lang=\"ts\">\n    export default defineComponent({\n        name: 'teleport',\n        props: {\n            to: {\n                type: String,\n                default: '',\n            },\n            where: {\n                type: String,\n                default: 'after',\n            },\n            disabled: Boolean,\n        },\n        data: () => ({\n            childObserver: null,\n            nodes: [],\n            waiting: false,\n            observer: null,\n            parent: null,\n            isVue2,\n        }),\n        computed: {\n            classes() {\n                if (this.disabled) {\n                    return ['b-teleport'];\n                }\n\n                return ['b-teleport', 'b-teleport--hidden'];\n            },\n            defaultTo() {\n                if (this.to) {\n                    return this.to;\n                }\n\n                const injectionKey =\n                    inject<string>(MODAL_DIALOG_ID_INJECTION_KEY, '') ||\n                    inject<string>(MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY, '') ||\n                    inject<string>(SIDEPANEL_DIALOG_ID_INJECTION_KEY, '');\n\n                const teleportElement = injectionKey ? `#${injectionKey}` : 'body';\n                return teleportElement;\n            },\n        },\n        watch: {\n            to: 'maybeMove',\n            where: 'maybeMove',\n            disabled(value) {\n                if (value) {\n                    this.disable();\n                    // Ensure all event done.\n                    this.$nextTick(() => {\n                        this.teardownObserver();\n                    });\n                } else {\n                    this.bootObserver();\n                    this.move();\n                }\n            },\n        },\n        mounted() {\n            // Store a reference to the nodes\n            this.nodes = Array.from(this.$el.childNodes);\n\n            if (!this.disabled) {\n                this.bootObserver();\n            }\n\n            // Move slot content to target\n            this.maybeMove();\n        },\n        beforeDestroy() {\n            // Fix nodes reference\n            this.nodes = this.getComponentChildrenNode();\n\n            // Move back\n            this.disable();\n\n            // Stop observing\n            this.teardownObserver();\n        },\n        methods: {\n            // Using a fragment is faster because it'll trigger only a single reflow\n            // See https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment\n            getFragment(): DocumentFragment {\n                const fragment = document.createDocumentFragment();\n\n                this.nodes.forEach(node => fragment.appendChild(node));\n\n                return fragment;\n            },\n            disable() {\n                this.$el.appendChild(this.getFragment());\n                this.parent = null;\n            },\n            move() {\n                this.waiting = false;\n\n                this.parent = document.querySelector(this.defaultTo);\n\n                if (!this.parent) {\n                    this.disable();\n\n                    this.waiting = true;\n\n                    return;\n                }\n\n                if (this.where === 'before') {\n                    this.parent.prepend(this.getFragment());\n                } else {\n                    this.parent.appendChild(this.getFragment());\n                }\n            },\n            maybeMove() {\n                if (!this.disabled) {\n                    this.move();\n                }\n            },\n            onMutations(mutations) {\n                // Makes sure the move operation is only done once\n                let shouldMove = false;\n\n                for (let i = 0; i < mutations.length; i++) {\n                    const mutation = mutations[i];\n                    const filteredAddedNodes = Array.from(mutation.addedNodes).filter(\n                        node => !this.nodes.includes(node)\n                    );\n\n                    if (Array.from(mutation.removedNodes).includes(this.parent)) {\n                        this.disable();\n                        this.waiting = !this.disabled;\n                    } else if (this.waiting && filteredAddedNodes.length > 0) {\n                        shouldMove = true;\n                    }\n                }\n\n                if (shouldMove) {\n                    this.move();\n                }\n            },\n            bootObserver() {\n                if (this.observer) {\n                    return;\n                }\n\n                this.observer = new MutationObserver(mutations => this.onMutations(mutations));\n\n                this.observer.observe(document.body, {\n                    childList: true,\n                    subtree: true,\n                    attributes: false,\n                    characterData: false,\n                });\n\n                if (this.childObserver) {\n                    return;\n                }\n                // watch childNodes change\n                this.childObserver = new MutationObserver(mutations => {\n                    const childChangeRecord = mutations.find(i => i.target === this.$el);\n                    if (childChangeRecord) {\n                        // Remove old nodes before update position.\n                        this.nodes.forEach(node => node.parentNode && node.parentNode.removeChild(node));\n                        this.nodes = this.getComponentChildrenNode();\n                        this.maybeMove();\n                    }\n                });\n\n                this.childObserver.observe(this.$el, {\n                    childList: true,\n                    subtree: false,\n                    attributes: false,\n                    characterData: false,\n                });\n            },\n            teardownObserver() {\n                if (this.observer) {\n                    this.observer.disconnect();\n                    this.observer = null;\n                }\n                if (this.childObserver) {\n                    this.childObserver.disconnect();\n                    this.childObserver = null;\n                }\n            },\n            getComponentChildrenNode() {\n                // Vue3\n                if (!isVue2) {\n                    return [];\n                }\n\n                // Trick for Vue3 type checking\n                return (this as any).$vnode.componentOptions.children.map(i => i.elm).filter(i => i);\n            },\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./teleport.scss\" />\n"],"names":["useClickOutside","target","handler","options","onClickOutsideStop","onMounted","onClickOutside","onUnmounted","__default__","defineComponent","isVue2","injectionKey","inject","MODAL_DIALOG_ID_INJECTION_KEY","MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY","SIDEPANEL_DIALOG_ID_INJECTION_KEY","value","fragment","node","mutations","shouldMove","i","mutation","filteredAddedNodes"],"mappings":"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"}