@adyen/bento-vue2 1.47.1 → 1.48.0

package/dist/chunks/{summary-grid-item-custom.atXX3GY9.js → summary-grid-item-custom.A11AzfH0.js}

@@ -1,16 +1,16 @@
-import { defineComponent as l, provide as $, toRefs as x, computed as u } from "vue";
-import { u as v } from "./use-has-slot.C9lQZ6nz.js";
-import { S as h } from "./summary-grid.keys.BBbFrFGF.js";
-import { G as E } from "./grid-layout.HvTAa4to.js";
-import { n as c } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as O } from "./info-icon.0d0GzDe2.js";
-import { B as L, a as g } from "./typography.J1v_SPG3.js";
-import { B as M, a as _ } from "./tag.-YNhsBv7.js";
-import { C as P } from "./copy.BuMSGw23.js";
+import { defineComponent as c, provide as g, toRef as O, toRefs as L, inject as M, ref as R, computed as l } from "vue";
+import { u as S } from "./use-has-slot.C9lQZ6nz.js";
+import { S as P, a as T } from "./summary-grid.keys.CxTf_FOc.js";
+import { G as A } from "./grid-layout.HvTAa4to.js";
+import { n as u } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as D } from "./info-icon.0d0GzDe2.js";
+import { B as V, a as v } from "./typography.J1v_SPG3.js";
+import { B as j, a as _ } from "./tag.3fthBtwc.js";
+import { C as B } from "./copy.adSQlAOY.js";
 import "../assets/summary-grid-item-custom.css";
-const R = l({
+const G = c({
   name: "bento-summary-grid",
-  components: { GridLayout: E },
+  components: { GridLayout: A },
   props: {
     /**
      * Sets the responsive columns widths values for 1 of the 3 rows.
@@ -18,32 +18,36 @@ const R = l({
     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;
+    var i, s;
     let r = 1;
     if (t) {
-      const d = (s = (a = Object.keys(t)) == null ? void 0 : a.filter((y) => y.includes("cell-"))) == null ? void 0 : s.map((y) => {
-        var m;
-        return parseInt((m = y.split("-")) == null ? void 0 : m[1], 10);
+      const m = (s = (i = Object.keys(t)) == null ? void 0 : i.filter((d) => d.includes("cell-"))) == null ? void 0 : s.map((d) => {
+        var p;
+        return parseInt((p = d.split("-")) == null ? void 0 : p[1], 10);
       });
-      if (r = Math.max(...d), r > 3)
+      if (r = Math.max(...m), r > 3)
         throw new Error(
           "BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information."
         );
     }
-    return $(h, () => ({ isSummaryGridLayout: !0 })), {
-      hasSlot: v(t),
+    return g(P, () => ({ isSummaryGridLayout: !0 })), g(T, O(e, "slashedZero")), {
+      hasSlot: S(t),
       numberOfRows: r
     };
   }
 });
-var V = function() {
+var w = 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() {
+    var i;
+    return r("grid-layout", { key: `summary-grid-row-${n}`, attrs: { "data-testid": `summary-grid-row-${n}`, "column-width": (i = t.columnWidth) == null ? void 0 : i[`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`)];
@@ -57,19 +61,19 @@ var V = function() {
       return [t._t(`cell-${n}-6`)];
     }, proxy: !0 } : null], null, !0) });
   }), 1);
-}, A = [], D = /* @__PURE__ */ c(
-  R,
-  V,
-  A,
+}, k = [], z = /* @__PURE__ */ u(
+  G,
+  w,
+  k,
   !1,
   null,
-  "7bb9380f"
+  "0612378b"
 );
-const ft = D.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 || {}), f = /* @__PURE__ */ ((e) => (e.AMOUNT = "amount", e.PERCENTAGE = "percentage", e.NUMERIC = "numeric", e.TEXT = "text", e.CUSTOM = "custom", e))(f || {});
-const j = l({
+const bt = z.exports;
+var a = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(a || {}), o = /* @__PURE__ */ ((e) => (e.POSITIVE = "positive", e.NEGATIVE = "negative", e.NEUTRAL = "neutral", e))(o || {}), f = /* @__PURE__ */ ((e) => (e.AMOUNT = "amount", e.PERCENTAGE = "percentage", e.NUMERIC = "numeric", e.TEXT = "text", e.CUSTOM = "custom", e))(f || {});
+const q = c({
   name: "summary-grid-item",
-  components: { BentoInfoIcon: O, BentoTypography: L, BentoTag: M, Copy: P },
+  components: { BentoInfoIcon: D, BentoTypography: V, BentoTag: j, Copy: B },
   props: {
     /**
      * Text to copy to the clipboard
@@ -103,8 +107,8 @@ const j = l({
     // TODO implement logic for Large size
     size: {
       type: String,
-      default: i.SMALL,
-      validator: (e) => Object.values(i).includes(e)
+      default: a.SMALL,
+      validator: (e) => Object.values(a).includes(e)
     },
     /**
      * Shows colored trend label next to text content
@@ -138,8 +142,8 @@ const j = l({
     }
   },
   setup(e, { slots: t }) {
-    const { trendDirection: r, secondaryTrendDirection: n, itemType: a, size: s } = x(e), d = (I) => {
-      switch (I) {
+    const { trendDirection: r, secondaryTrendDirection: n, itemType: i, size: s } = L(e), m = M(T, R(!1)), d = (E) => {
+      switch (E) {
         case o.POSITIVE:
           return _.GREEN;
         case o.NEGATIVE:
@@ -147,41 +151,42 @@ const j = l({
         default:
           return _.BLUE;
       }
-    }, y = u(() => d(r.value)), m = u(() => d(n.value)), S = u(() => s.value === i.SMALL ? g.BODY : a.value !== f.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" } : {}), C = u(() => ({
+    }, p = l(() => d(r.value)), b = l(() => d(n.value)), C = l(() => s.value === a.SMALL ? v.BODY : i.value !== f.TEXT ? v.TITLE : null), I = l(() => ({
+      medium: s.value === a.LARGE,
+      strongest: s.value === a.SMALL,
+      wide: s.value === a.SMALL,
+      variant: C.value
+    })), h = l(() => e.fitContent ? { width: "fit-content" } : {}), $ = l(() => ({ "b-summary-grid-item--slashed-zero": m.value })), x = l(() => ({
       [`b-summary-grid-item__content-trend--${e.trend}`]: e.trend
     }));
     return {
       // Values
-      trendVariant: y,
-      secondaryTrendVariant: m,
-      typographyProps: T,
+      trendVariant: p,
+      secondaryTrendVariant: b,
+      typographyProps: I,
       // Styles
-      computedStyles: b,
-      summaryBarItemTrendConditionalClasses: C,
+      conditionalClasses: $,
+      computedStyles: h,
+      summaryBarItemTrendConditionalClasses: x,
       // Utils
-      hasSlot: v(t)
+      hasSlot: S(t)
     };
   }
 });
-var B = function() {
+var N = 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);
-}, w = [], G = /* @__PURE__ */ c(
-  j,
-  B,
-  w,
+  return t._self._setupProxy, r("div", { staticClass: "b-summary-grid-item", class: t.conditionalClasses, 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);
+}, U = [], F = /* @__PURE__ */ u(
+  q,
+  N,
+  U,
   !1,
   null,
-  "6f017e49"
+  "a6358e03"
 );
-const p = G.exports, k = l({
+const y = F.exports, Y = c({
   name: "bento-summary-grid-item-amount",
-  components: { SummaryGridItem: p },
+  components: { SummaryGridItem: y },
   props: {
     /**
      * Text to copy to the clipboard
@@ -264,27 +269,27 @@ const p = G.exports, k = l({
      */
     size: {
       type: String,
-      default: i.SMALL,
-      validator: (e) => Object.values(i).includes(e)
+      default: a.SMALL,
+      validator: (e) => Object.values(a).includes(e)
     }
   }
 });
-var q = function() {
+var Z = 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()])]);
-}, z = [], N = /* @__PURE__ */ c(
-  k,
-  q,
-  z,
+}, H = [], W = /* @__PURE__ */ u(
+  Y,
+  Z,
+  H,
   !1,
   null,
   "13717f92"
 );
-const _t = N.exports, U = l({
+const Ct = W.exports, X = c({
   name: "bento-summary-grid-item-numeric",
-  components: { SummaryGridItem: p },
+  components: { SummaryGridItem: y },
   props: {
     /**
      * Text to copy to the clipboard
@@ -360,27 +365,27 @@ const _t = N.exports, U = l({
      */
     size: {
       type: String,
-      default: i.SMALL,
-      validator: (e) => Object.values(i).includes(e)
+      default: a.SMALL,
+      validator: (e) => Object.values(a).includes(e)
     }
   }
 });
-var F = function() {
+var J = 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,
+}, K = [], Q = /* @__PURE__ */ u(
+  X,
+  J,
+  K,
   !1,
   null,
   null
 );
-const gt = W.exports, X = l({
+const It = Q.exports, tt = c({
   name: "bento-summary-grid-item-percentage",
-  components: { SummaryGridItem: p },
+  components: { SummaryGridItem: y },
   props: {
     /**
      * Amount to be shown as the main value
@@ -456,27 +461,27 @@ const gt = W.exports, X = l({
      */
     size: {
       type: String,
-      default: i.SMALL,
-      validator: (e) => Object.values(i).includes(e)
+      default: a.SMALL,
+      validator: (e) => Object.values(a).includes(e)
     }
   }
 });
-var H = function() {
+var et = 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,
+}, rt = [], nt = /* @__PURE__ */ u(
+  tt,
+  et,
+  rt,
   !1,
   null,
   null
 );
-const vt = K.exports, Q = l({
+const ht = nt.exports, ot = c({
   name: "bento-summary-grid-item-text",
-  components: { SummaryGridItem: p },
+  components: { SummaryGridItem: y },
   props: {
     /**
      * Text to copy to the clipboard
@@ -512,20 +517,20 @@ const vt = K.exports, Q = l({
     }
   }
 });
-var Z = function() {
+var at = 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,
+}, it = [], st = /* @__PURE__ */ u(
+  ot,
+  at,
+  it,
   !1,
   null,
   null
 );
-const St = et.exports, rt = l({
+const $t = st.exports, lt = c({
   name: "bento-summary-grid-item-custom",
-  components: { SummaryGridItem: p },
+  components: { SummaryGridItem: y },
   props: {
     /**
      * Text to copy to the clipboard
@@ -546,28 +551,28 @@ const St = et.exports, rt = l({
   },
   emits: ["copy-to-clipboard"]
 });
-var nt = function() {
+var ct = 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,
+}, ut = [], dt = /* @__PURE__ */ u(
+  lt,
+  ct,
+  ut,
   !1,
   null,
   null
 );
-const Tt = it.exports;
+const xt = dt.exports;
 export {
-  i as B,
-  _t as a,
-  gt as b,
-  vt as c,
-  St as d,
-  Tt as e,
+  a as B,
+  Ct as a,
+  It as b,
+  ht as c,
+  $t as d,
+  xt as e,
   o as f,
-  ft as s
+  bt as s
 };
-//# sourceMappingURL=summary-grid-item-custom.atXX3GY9.js.map
+//# sourceMappingURL=summary-grid-item-custom.A11AzfH0.js.map

package/dist/chunks/summary-grid-item-custom.A11AzfH0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"summary-grid-item-custom.A11AzfH0.js","sources":["../../src/components/summary-grid/summary-grid.vue","../../src/components/summary-grid/summary-grid.types.ts","../../src/components/summary-grid/components/summary-grid-item/summary-grid-item.types.ts","../../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"],"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 lang=\"ts\">\n    import { defineComponent, PropType, provide, toRef } from 'vue';\n    import { BentoSummaryGridColumnWidth, BentoSummaryGridLayout } 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    /**\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 defineComponent({\n        name: 'bento-summary-grid',\n        components: { GridLayout },\n        props: {\n            /**\n             * Sets the responsive columns widths values for 1 of the 3 rows.\n             */\n            columnWidth: {\n                type: Object as PropType<BentoSummaryGridColumnWidth>,\n                default: null,\n            },\n            /**\n             * Renders a font numeric style with slashed zeros instead of normal ones.\n             */\n            slashedZero: { type: Boolean, default: false },\n        },\n\n        setup(props, { slots }) {\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                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\n                return { isSummaryGridLayout };\n            };\n\n            provide(SUMMARY_GRID_LAYOUT_INJECTION_KEY, registerComponentsInSummaryGrid);\n            provide(SUMMARY_GRID_SLASHED_ZERO, toRef(props, 'slashedZero'));\n\n            return {\n                hasSlot: useHasSlot(slots),\n                numberOfRows,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid.scss\" />\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","/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum SummaryGridItemType {\n    AMOUNT = 'amount',\n    PERCENTAGE = 'percentage',\n    NUMERIC = 'numeric',\n    TEXT = 'text',\n    CUSTOM = 'custom',\n}\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                {{ title }}\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 lang=\"ts\">\n    import { computed, defineComponent, inject, PropType, ref, toRefs } from 'vue';\n\n    // Components\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, BentoTypographyVariant } from '@/components/typography';\n    import { BentoTag, BentoTagVariant } from '@/components/tag';\n    import { Copy } from '@/internal';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n\n    // Types\n    import {\n        BentoSummaryGridItemSize,\n        BentoSummaryGridItemTrendDirection,\n    } from '@/components/summary-grid/summary-grid.types';\n    import { SUMMARY_GRID_SLASHED_ZERO } from '@/components/summary-grid/summary-grid.keys';\n    import { SummaryGridItemType } from './summary-grid-item.types';\n\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 defineComponent({\n        name: 'summary-grid-item',\n        components: { BentoInfoIcon, BentoTypography, BentoTag, Copy },\n        props: {\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n\n            /**\n             * Applies styling based on content type\n             */\n            // TODO add text truncation for SummaryGridItemType.TEXT\n            itemType: {\n                type: String as PropType<SummaryGridItemType | `${SummaryGridItemType}`>,\n                default: SummaryGridItemType.CUSTOM,\n                validator: (value: SummaryGridItemType) => Object.values(SummaryGridItemType).includes(value),\n            },\n\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: { type: String, default: null },\n\n            /**\n             * Text used as a title\n             */\n            title: { type: String, required: true },\n\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: { type: Boolean, default: false },\n\n            // amount, percentage and numeric props\n            /**\n             * Defines the size of the `summary-grid-item` text content\n             */\n            // TODO implement logic for Large size\n            size: {\n                type: String as PropType<BentoSummaryGridItemSize | `${BentoSummaryGridItemSize}`>,\n                default: BentoSummaryGridItemSize.SMALL,\n                validator: (value: BentoSummaryGridItemSize) => Object.values(BentoSummaryGridItemSize).includes(value),\n            },\n\n            /**\n             * Shows colored trend label next to text content\n             */\n            trend: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Defines the color of trend label\n             */\n            trendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection | `${BentoSummaryGridItemTrendDirection}`>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n                validator: (value: BentoSummaryGridItemTrendDirection) =>\n                    Object.values(BentoSummaryGridItemTrendDirection).includes(value),\n            },\n\n            /**\n             * Shows colored trend tag next to secondary metric value\n             */\n            secondaryTrend: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Defines the color of secondary trend tag\n             */\n            secondaryTrendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection | `${BentoSummaryGridItemTrendDirection}`>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n                validator: (value: BentoSummaryGridItemTrendDirection) =>\n                    Object.values(BentoSummaryGridItemTrendDirection).includes(value),\n            },\n        },\n        setup(props, { slots }) {\n            const { trendDirection, secondaryTrendDirection, itemType, size } = toRefs(props);\n            const hasSlashedZero = inject(SUMMARY_GRID_SLASHED_ZERO, ref(false));\n\n            const tagVariantColor = direction => {\n                switch (direction) {\n                    case BentoSummaryGridItemTrendDirection.POSITIVE:\n                        return BentoTagVariant.GREEN;\n                    case BentoSummaryGridItemTrendDirection.NEGATIVE:\n                        return BentoTagVariant.RED;\n                    default:\n                        return BentoTagVariant.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(() => {\n                if (size.value === BentoSummaryGridItemSize.SMALL) {\n                    return BentoTypographyVariant.BODY;\n                }\n                if (itemType.value !== SummaryGridItemType.TEXT) {\n                    return BentoTypographyVariant.TITLE;\n                }\n\n                return null;\n            });\n\n            const typographyProps = computed(() => ({\n                medium: size.value === BentoSummaryGridItemSize.LARGE,\n                strongest: size.value === BentoSummaryGridItemSize.SMALL,\n                wide: size.value === BentoSummaryGridItemSize.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 summaryBarItemTrendConditionalClasses = computed(() => ({\n                [`b-summary-grid-item__content-trend--${props.trend}`]: props.trend,\n            }));\n\n            return {\n                // Values\n                trendVariant,\n                secondaryTrendVariant,\n                typographyProps,\n\n                // Styles\n                conditionalClasses,\n                computedStyles,\n                summaryBarItemTrendConditionalClasses,\n\n                // Utils\n                hasSlot: useHasSlot(slots),\n            };\n        },\n    });\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        class=\"b-summary-grid-item-amount\"\n    >\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 lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import {\n        BentoSummaryGridItemSize,\n        BentoSummaryGridItemTrendDirection,\n    } from '@/components/summary-grid/summary-grid.types';\n    import { SummaryGridItem } from '../summary-grid-item';\n\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 defineComponent({\n        name: 'bento-summary-grid-item-amount',\n        components: { SummaryGridItem },\n        props: {\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n\n            /**\n             * Amount to be shown as the main value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Adds additional label next to amount content\n             */\n            secondaryLabel: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Amount to be shown as the secondary metric value\n             */\n            secondaryMetric: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Text used as a title\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Shows colored trend label next to main label\n             */\n            trend: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Defines the direction (color) of the trend label\n             */\n            trendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection | `${BentoSummaryGridItemTrendDirection}`>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n                validator: (value: BentoSummaryGridItemTrendDirection) =>\n                    Object.values(BentoSummaryGridItemTrendDirection).includes(value),\n            },\n\n            /**\n             * Shows colored secondary trend tag next to the secondary metric value\n             */\n            secondaryTrend: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Defines the direction (color) of the secondary metric's trend tag\n             */\n            secondaryTrendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection | `${BentoSummaryGridItemTrendDirection}`>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n                validator: (value: BentoSummaryGridItemTrendDirection) =>\n                    Object.values(BentoSummaryGridItemTrendDirection).includes(value),\n            },\n\n            /**\n             * Defines the size of the `summary-grid-item` text content\n             */\n            size: {\n                type: String as PropType<BentoSummaryGridItemSize | `${BentoSummaryGridItemSize}`>,\n                default: BentoSummaryGridItemSize.SMALL,\n                validator: (value: BentoSummaryGridItemSize) => Object.values(BentoSummaryGridItemSize).includes(value),\n            },\n        },\n    });\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        class=\"b-summary-grid-item-numeric\"\n    >\n        {{ label }}\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import {\n        BentoSummaryGridItemSize,\n        BentoSummaryGridItemTrendDirection,\n    } from '@/components/summary-grid/summary-grid.types';\n    import { SummaryGridItem } from '../summary-grid-item';\n\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 defineComponent({\n        name: 'bento-summary-grid-item-numeric',\n        components: { SummaryGridItem },\n        props: {\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n\n            /**\n             * Amount to be shown as the main value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Amount to be shown as the secondary metric value\n             */\n            secondaryMetric: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Text used as a title\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Shows colored trend label next to main numeric content\n             */\n            trend: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Defines the direction (color) of the trend label\n             */\n            trendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection | `${BentoSummaryGridItemTrendDirection}`>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n                validator: (value: BentoSummaryGridItemTrendDirection) =>\n                    Object.values(BentoSummaryGridItemTrendDirection).includes(value),\n            },\n            /**\n             * Shows colored secondary trend tag next to the secondary metric value\n             */\n            secondaryTrend: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Defines the direction (color) of the secondary metric's trend tag\n             */\n            secondaryTrendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection | `${BentoSummaryGridItemTrendDirection}`>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n                validator: (value: BentoSummaryGridItemTrendDirection) =>\n                    Object.values(BentoSummaryGridItemTrendDirection).includes(value),\n            },\n            /**\n             * Defines the size of the `summary-grid-item` text content\n             */\n            size: {\n                type: String as PropType<BentoSummaryGridItemSize | `${BentoSummaryGridItemSize}`>,\n                default: BentoSummaryGridItemSize.SMALL,\n                validator: (value: BentoSummaryGridItemSize) => Object.values(BentoSummaryGridItemSize).includes(value),\n            },\n        },\n    });\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        class=\"b-summary-grid-item-percentage\"\n    >\n        {{ label }}%\n        <template v-if=\"secondaryMetric\" #secondary> {{ secondaryMetric }}% </template>\n    </summary-grid-item>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import {\n        BentoSummaryGridItemSize,\n        BentoSummaryGridItemTrendDirection,\n    } from '@/components/summary-grid/summary-grid.types';\n    import { SummaryGridItem } from '../summary-grid-item';\n\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 defineComponent({\n        name: 'bento-summary-grid-item-percentage',\n        components: { SummaryGridItem },\n        props: {\n            /**\n             * Amount to be shown as the main value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Amount to be shown as the secondary metric value\n             */\n            secondaryMetric: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Text used as a title\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Shows colored trend label next to text content\n             */\n            trend: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Defines the direction (color) of the trend label\n             */\n            trendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection | `${BentoSummaryGridItemTrendDirection}`>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n                validator: (value: BentoSummaryGridItemTrendDirection) =>\n                    Object.values(BentoSummaryGridItemTrendDirection).includes(value),\n            },\n            /**\n             * Shows colored secondary trend tag next to the secondary metric value\n             */\n            secondaryTrend: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Defines the direction (color) of the secondary metric's trend tag\n             */\n            secondaryTrendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection | `${BentoSummaryGridItemTrendDirection}`>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n                validator: (value: BentoSummaryGridItemTrendDirection) =>\n                    Object.values(BentoSummaryGridItemTrendDirection).includes(value),\n            },\n            /**\n             * Defines the size of the `summary-grid-item` text content\n             */\n            size: {\n                type: String as PropType<BentoSummaryGridItemSize | `${BentoSummaryGridItemSize}`>,\n                default: BentoSummaryGridItemSize.SMALL,\n                validator: (value: BentoSummaryGridItemSize) => Object.values(BentoSummaryGridItemSize).includes(value),\n            },\n        },\n    });\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        class=\"b-summary-grid-item-text\"\n    >\n        {{ label }}\n    </summary-grid-item>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n\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 defineComponent({\n        name: 'bento-summary-grid-item-text',\n        components: { SummaryGridItem },\n        props: {\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n\n            /**\n             * Amount to be shown as the main value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text used as a title\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: {\n                type: Boolean,\n                default: false,\n            },\n        },\n    });\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        @copy-to-clipoard=\"$emit('copy-to-clipboard')\"\n    >\n        <slot />\n    </summary-grid-item>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n    import SummaryGridItem from '../summary-grid-item/summary-grid-item.vue';\n\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 defineComponent({\n        name: 'bento-summary-grid-item-custom',\n        components: { SummaryGridItem },\n        props: {\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: { type: String, default: null },\n\n            /**\n             * Text used as a title\n             */\n            title: { type: String, required: true },\n\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: { type: Boolean, default: false },\n        },\n        emits: ['copy-to-clipboard'],\n    });\n</script>\n"],"names":["_sfc_main$6","defineComponent","GridLayout","props","slots","numberOfRows","slotRows","_b","_a","slotName","provide","SUMMARY_GRID_LAYOUT_INJECTION_KEY","SUMMARY_GRID_SLASHED_ZERO","toRef","useHasSlot","BentoSummaryGridItemSize","BentoSummaryGridItemSize2","BentoSummaryGridItemTrendDirection","BentoSummaryGridItemTrendDirection2","SummaryGridItemType","SummaryGridItemType2","_sfc_main$5","BentoInfoIcon","BentoTypography","BentoTag","Copy","value","trendDirection","secondaryTrendDirection","itemType","size","toRefs","hasSlashedZero","inject","ref","tagVariantColor","direction","BentoTagVariant","trendVariant","computed","secondaryTrendVariant","typographyContentElement","BentoTypographyVariant","typographyProps","computedStyles","conditionalClasses","summaryBarItemTrendConditionalClasses","_sfc_main$4","SummaryGridItem","_sfc_main$3","_sfc_main$2","_sfc_main$1","_sfc_main"],"mappings":"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"}

package/dist/chunks/summary-grid.keys.CxTf_FOc.js

@@ -0,0 +1,6 @@
+const o = Symbol("summary-grid layout injection key"), s = Symbol("summary-grid slashed zero key");
+export {
+  o as S,
+  s as a
+};
+//# sourceMappingURL=summary-grid.keys.CxTf_FOc.js.map

package/dist/chunks/summary-grid.keys.CxTf_FOc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"summary-grid.keys.CxTf_FOc.js","sources":["../../src/components/summary-grid/summary-grid.keys.ts"],"sourcesContent":["export const SUMMARY_GRID_LAYOUT_INJECTION_KEY = Symbol('summary-grid layout injection key');\nexport const SUMMARY_GRID_SLASHED_ZERO = Symbol('summary-grid slashed zero key');\n"],"names":["SUMMARY_GRID_LAYOUT_INJECTION_KEY","SUMMARY_GRID_SLASHED_ZERO"],"mappings":"AAAa,MAAAA,IAAoC,OAAO,mCAAmC,GAC9EC,IAA4B,OAAO,+BAA+B;"}

package/dist/chunks/{tabs.9kObZry9.js → tabs.5zgaD1k3.js}

@@ -3,7 +3,7 @@ import { E as R, T as y, a as g } from "./tabs.keys.Bc2pSKRw.js";
 import { n as x } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { B as D } from "./typography.J1v_SPG3.js";
 import { g as S } from "./generate-uid.NJ8tVoha.js";
-import { F as K } from "./fixed-scroller.IPM3AzHS.js";
+import { F as K } from "./fixed-scroller.DX2YUuoU.js";
 import "../assets/tabs.css";
 const F = h({
   props: {
@@ -151,4 +151,4 @@ export {
   M as B,
   Q as a
 };
-//# sourceMappingURL=tabs.9kObZry9.js.map
+//# sourceMappingURL=tabs.5zgaD1k3.js.map

package/dist/chunks/{tabs.9kObZry9.js.map → tabs.5zgaD1k3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tabs.9kObZry9.js","sources":["../../src/components/tabs/components/tab.vue","../../src/components/tabs/tabs.utils.ts","../../src/components/tabs/tabs.types.ts","../../src/components/tabs/tabs.vue"],"sourcesContent":["<template>\n    <div v-show=\"activeTabId === id\" :id=\"`${id}-tabpanel`\" class=\"b-tab\" role=\"tabpanel\" :aria-labelledby=\"id\">\n        <template v-if=\"activeTabId === id\">\n            <slot />\n        </template>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, onUnmounted, provide, ref, toRefs } from 'vue';\n    import {\n        EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY,\n        TABS_ACTIVE_TAB_ID_KEY,\n        TABS_REGISTER_TAB_INJECTION_KEY,\n    } from '../tabs.keys';\n    import { BentoTabsRegisterTab } from '../tabs.types';\n    import { BentoTabProvidedTitle } from './tab.types';\n\n    export default defineComponent({\n        props: {\n            /**\n             * Displays a counter next to the tab title\n             */\n            counter: {\n                type: Number,\n                default: null,\n            },\n            /**\n             * Title of the tab\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Determines whether the tab is disabled\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays the tab with a notification indicator\n             */\n            withNotificationIndicator: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            // External title injection\n            const { disabled, withNotificationIndicator, counter } = toRefs(props);\n            const componentTitle = ref();\n            const setTitle: BentoTabProvidedTitle = (value: string) => {\n                componentTitle.value = value;\n            };\n            provide(EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, setTitle);\n\n            const computedTitle = computed(() => (componentTitle.value ?? props.title) as string);\n\n            const registerTab: BentoTabsRegisterTab = inject(TABS_REGISTER_TAB_INJECTION_KEY);\n            const activeTabId = inject(TABS_ACTIVE_TAB_ID_KEY);\n\n            const { id, unregisterTab } = registerTab({\n                disabled,\n                title: computedTitle,\n                withNotificationIndicator,\n                counter,\n            });\n\n            onUnmounted(() => unregisterTab());\n\n            return { activeTabId, id, computedTitle };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tab.scss\" />\n","import { BentoTab } from './components/tab.types';\n\nexport const getPreviousTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === 0 ? tabsValue.length - 1 : activeTabIndex - 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getPreviousTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n\nexport const getNextTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === tabsValue.length - 1 ? 0 : activeTabIndex + 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getNextTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n","import type { Ref } from 'vue';\n\nexport type BentoTabsRegisterTab = (props: {\n    disabled: Ref<boolean>;\n    title: Ref<string>;\n    withNotificationIndicator: Ref<boolean>;\n    counter: Ref<number>;\n}) => { id: string; unregisterTab: () => void };\n\nexport enum BentoTabsEvent {\n    ACTIVE_TAB_INDEX = 'update:active-tab-index',\n}\n","<template>\n    <div class=\"b-tabs\">\n        <fixed-scroller ref=\"tablistwrapper\" condensed :extra-padding-top=\"2\" class=\"b-tabs__tab-list-wrapper\">\n            <div ref=\"tablist\" class=\"b-tabs__tab-list\" role=\"tablist\" @keydown=\"onKeydownTabsNavigation\">\n                <button\n                    v-for=\"{ disabled, id, title, withNotificationIndicator, counter } in tabs\"\n                    :id=\"id\"\n                    :key=\"id\"\n                    role=\"tab\"\n                    type=\"button\"\n                    class=\"b-tabs__tab\"\n                    :class=\"{\n                        'b-tabs__tab--active': activeTabId === id,\n                        'b-tabs__tab--disabled': disabled,\n                    }\"\n                    :aria-controls=\"`${id}-tabpanel`\"\n                    :aria-selected=\"activeTabId === id ? 'true' : 'false'\"\n                    :tabindex=\"activeTabId === id && !disabled.value ? null : -1\"\n                    :disabled=\"isDisabled(disabled)\"\n                    @click=\"handleTabChange(id)\"\n                    @keydown.enter.space=\"handleTabChange(id)\"\n                >\n                    <span class=\"b-tabs__tab-text\">\n                        <bento-typography class=\"b-tabs__tab-title\" el=\"span\" variant=\"body\" stronger>\n                            {{ title }}\n                        </bento-typography>\n                        <bento-typography\n                            v-if=\"counter != null\"\n                            class=\"b-tabs__tab-counter\"\n                            el=\"span\"\n                            variant=\"body\"\n                            stronger\n                            :class=\"{\n                                'b-tabs__tab-counter--active': activeTabId === id,\n                            }\"\n                        >\n                            {{ counter }}\n                        </bento-typography>\n                        <span\n                            v-if=\"withNotificationIndicator\"\n                            class=\"b-tabs__tab-notification-dot\"\n                            aria-hidden=\"true\"\n                        ></span>\n                    </span>\n                    <span v-show=\"activeTabId === id\" class=\"b-tabs__tab-underline\" aria-hidden=\"true\"></span>\n                </button>\n            </div>\n        </fixed-scroller>\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, nextTick, provide, ref, Ref, watch } from 'vue';\n\n    // components\n    import { BentoTypography } from '@/components/typography';\n    import { FixedScroller } from '@/internal';\n\n    // utils\n    import { generateUid } from '@/core/utils/ts';\n    import { getNextTabIndex, getPreviousTabIndex } from './tabs.utils';\n\n    // types\n    import { BentoTab } from './components/tab.types';\n    import { BentoTabsEvent, BentoTabsRegisterTab } from './tabs.types';\n\n    // keys\n    import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from './tabs.keys';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Tabs are used to navigate between different, but related content views within a page.\n     * This component conforms to the official WAI-ARIA guidelines for tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n     *\n     * @example\n     * import { BentoTabs, BentoTab } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTabs, BentoTab },\n     *     template: `\n     *         <bento-tabs v-bind=\"$props\">\n     *             <bento-tab title=\"Maria Ahlefeldt\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *             <bento-tab title=\"Carl Andersen\">\n     *                 (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen.\n     *             </bento-tab>\n     *             <bento-tab title=\"Karl Truffel\">\n     *                 (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel.\n     *             </bento-tab>\n     *             <bento-tab title=\"Maria Ahlefeldt\" :disabled=\"true\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *         </bento-tabs>\n     *     `\n     * };\n     */\n\n    // component\n    export default defineComponent({\n        components: {\n            BentoTypography,\n            FixedScroller,\n        },\n        props: {\n            /**\n             * Sets the active tab by its index (0 being the first tab item).\n             */\n            activeTabIndex: { type: Number, default: 0 },\n        },\n        emits: [BentoTabsEvent.ACTIVE_TAB_INDEX],\n        setup(props, { emit }) {\n            const tabs: Ref<BentoTab[]> = ref([]);\n            const tablist = ref(null);\n            const tablistwrapper = ref();\n            const activeTabId = ref('');\n\n            provide(TABS_ACTIVE_TAB_ID_KEY, activeTabId);\n\n            // unregister tab if removed / destroyed\n            const unregisterTab = (tabIdToRemove: string) => () => {\n                tabs.value = tabs.value?.filter(({ id }) => id !== tabIdToRemove);\n            };\n\n            // register tab\n            const registerTab: BentoTabsRegisterTab = ({ title, disabled, withNotificationIndicator, counter }) => {\n                const id = generateUid('b-tab');\n\n                // add tab to tabs\n                tabs.value.push({ disabled, id, title, withNotificationIndicator, counter });\n\n                // return values to the Tab component\n                return { id, unregisterTab: unregisterTab(id) };\n            };\n\n            // provide activeTab and registerTab to tab items\n            provide(TABS_REGISTER_TAB_INJECTION_KEY, registerTab);\n\n            // keyboard navigation\n            const onKeydownTabsNavigation = (e: KeyboardEvent) => {\n                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n                    // find tab that is focussed\n                    const activeTab = tabs.value.find(tab => document.activeElement.id === tab.id);\n                    let activeTabIndex = tabs.value.indexOf(activeTab);\n\n                    // conditionally increase or decrease the\n                    if (e.code === 'ArrowLeft') {\n                        activeTabIndex = getPreviousTabIndex(activeTabIndex, tabs.value);\n                    } else if (e.code === 'ArrowRight') {\n                        activeTabIndex = getNextTabIndex(activeTabIndex, tabs.value);\n                    }\n\n                    // focus new active tab\n                    tablist.value.children[activeTabIndex].focus();\n                }\n            };\n\n            watch(\n                [() => props.activeTabIndex, tabs],\n                ([index, currentTabs]) => {\n                    nextTick(() => {\n                        const tab = currentTabs[index];\n                        activeTabId.value =\n                            tab && !tab.disabled ? tab.id : tabs.value.find(({ disabled }) => !disabled)?.id;\n                    });\n                },\n                { immediate: true }\n            );\n\n            const handleTabChange = (tabId: string) => {\n                activeTabId.value = tabId;\n                const activeIndex = tabs.value.findIndex(({ id }) => id === activeTabId.value);\n                emit(BentoTabsEvent.ACTIVE_TAB_INDEX, activeIndex);\n            };\n\n            const isDisabled = (isDisabledTab: Ref<boolean>): Booleanish =>\n                (isDisabledTab ? 'disabled' : false) as Booleanish;\n\n            return {\n                tabs,\n                tablist,\n                tablistwrapper,\n                activeTabId,\n                onKeydownTabsNavigation,\n                handleTabChange,\n                isDisabled,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tabs.scss\" />\n"],"names":["_sfc_main$1","defineComponent","props","disabled","withNotificationIndicator","counter","toRefs","componentTitle","ref","provide","EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY","value","computedTitle","computed","registerTab","inject","TABS_REGISTER_TAB_INJECTION_KEY","activeTabId","TABS_ACTIVE_TAB_ID_KEY","id","unregisterTab","onUnmounted","getPreviousTabIndex","activeTabIndex","tabsValue","newActiveTabIndex","getNextTabIndex","BentoTabsEvent","BentoTabsEvent2","_sfc_main","BentoTypography","FixedScroller","emit","tabs","tablist","tablistwrapper","tabIdToRemove","_a","title","generateUid","onKeydownTabsNavigation","e","activeTab","tab","watch","index","currentTabs","nextTick","tabId","activeIndex","isDisabledTab"],"mappings":"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"}
+{"version":3,"file":"tabs.5zgaD1k3.js","sources":["../../src/components/tabs/components/tab.vue","../../src/components/tabs/tabs.utils.ts","../../src/components/tabs/tabs.types.ts","../../src/components/tabs/tabs.vue"],"sourcesContent":["<template>\n    <div v-show=\"activeTabId === id\" :id=\"`${id}-tabpanel`\" class=\"b-tab\" role=\"tabpanel\" :aria-labelledby=\"id\">\n        <template v-if=\"activeTabId === id\">\n            <slot />\n        </template>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, onUnmounted, provide, ref, toRefs } from 'vue';\n    import {\n        EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY,\n        TABS_ACTIVE_TAB_ID_KEY,\n        TABS_REGISTER_TAB_INJECTION_KEY,\n    } from '../tabs.keys';\n    import { BentoTabsRegisterTab } from '../tabs.types';\n    import { BentoTabProvidedTitle } from './tab.types';\n\n    export default defineComponent({\n        props: {\n            /**\n             * Displays a counter next to the tab title\n             */\n            counter: {\n                type: Number,\n                default: null,\n            },\n            /**\n             * Title of the tab\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Determines whether the tab is disabled\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays the tab with a notification indicator\n             */\n            withNotificationIndicator: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            // External title injection\n            const { disabled, withNotificationIndicator, counter } = toRefs(props);\n            const componentTitle = ref();\n            const setTitle: BentoTabProvidedTitle = (value: string) => {\n                componentTitle.value = value;\n            };\n            provide(EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, setTitle);\n\n            const computedTitle = computed(() => (componentTitle.value ?? props.title) as string);\n\n            const registerTab: BentoTabsRegisterTab = inject(TABS_REGISTER_TAB_INJECTION_KEY);\n            const activeTabId = inject(TABS_ACTIVE_TAB_ID_KEY);\n\n            const { id, unregisterTab } = registerTab({\n                disabled,\n                title: computedTitle,\n                withNotificationIndicator,\n                counter,\n            });\n\n            onUnmounted(() => unregisterTab());\n\n            return { activeTabId, id, computedTitle };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tab.scss\" />\n","import { BentoTab } from './components/tab.types';\n\nexport const getPreviousTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === 0 ? tabsValue.length - 1 : activeTabIndex - 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getPreviousTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n\nexport const getNextTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === tabsValue.length - 1 ? 0 : activeTabIndex + 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getNextTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n","import type { Ref } from 'vue';\n\nexport type BentoTabsRegisterTab = (props: {\n    disabled: Ref<boolean>;\n    title: Ref<string>;\n    withNotificationIndicator: Ref<boolean>;\n    counter: Ref<number>;\n}) => { id: string; unregisterTab: () => void };\n\nexport enum BentoTabsEvent {\n    ACTIVE_TAB_INDEX = 'update:active-tab-index',\n}\n","<template>\n    <div class=\"b-tabs\">\n        <fixed-scroller ref=\"tablistwrapper\" condensed :extra-padding-top=\"2\" class=\"b-tabs__tab-list-wrapper\">\n            <div ref=\"tablist\" class=\"b-tabs__tab-list\" role=\"tablist\" @keydown=\"onKeydownTabsNavigation\">\n                <button\n                    v-for=\"{ disabled, id, title, withNotificationIndicator, counter } in tabs\"\n                    :id=\"id\"\n                    :key=\"id\"\n                    role=\"tab\"\n                    type=\"button\"\n                    class=\"b-tabs__tab\"\n                    :class=\"{\n                        'b-tabs__tab--active': activeTabId === id,\n                        'b-tabs__tab--disabled': disabled,\n                    }\"\n                    :aria-controls=\"`${id}-tabpanel`\"\n                    :aria-selected=\"activeTabId === id ? 'true' : 'false'\"\n                    :tabindex=\"activeTabId === id && !disabled.value ? null : -1\"\n                    :disabled=\"isDisabled(disabled)\"\n                    @click=\"handleTabChange(id)\"\n                    @keydown.enter.space=\"handleTabChange(id)\"\n                >\n                    <span class=\"b-tabs__tab-text\">\n                        <bento-typography class=\"b-tabs__tab-title\" el=\"span\" variant=\"body\" stronger>\n                            {{ title }}\n                        </bento-typography>\n                        <bento-typography\n                            v-if=\"counter != null\"\n                            class=\"b-tabs__tab-counter\"\n                            el=\"span\"\n                            variant=\"body\"\n                            stronger\n                            :class=\"{\n                                'b-tabs__tab-counter--active': activeTabId === id,\n                            }\"\n                        >\n                            {{ counter }}\n                        </bento-typography>\n                        <span\n                            v-if=\"withNotificationIndicator\"\n                            class=\"b-tabs__tab-notification-dot\"\n                            aria-hidden=\"true\"\n                        ></span>\n                    </span>\n                    <span v-show=\"activeTabId === id\" class=\"b-tabs__tab-underline\" aria-hidden=\"true\"></span>\n                </button>\n            </div>\n        </fixed-scroller>\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, nextTick, provide, ref, Ref, watch } from 'vue';\n\n    // components\n    import { BentoTypography } from '@/components/typography';\n    import { FixedScroller } from '@/internal';\n\n    // utils\n    import { generateUid } from '@/core/utils/ts';\n    import { getNextTabIndex, getPreviousTabIndex } from './tabs.utils';\n\n    // types\n    import { BentoTab } from './components/tab.types';\n    import { BentoTabsEvent, BentoTabsRegisterTab } from './tabs.types';\n\n    // keys\n    import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from './tabs.keys';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Tabs are used to navigate between different, but related content views within a page.\n     * This component conforms to the official WAI-ARIA guidelines for tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n     *\n     * @example\n     * import { BentoTabs, BentoTab } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTabs, BentoTab },\n     *     template: `\n     *         <bento-tabs v-bind=\"$props\">\n     *             <bento-tab title=\"Maria Ahlefeldt\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *             <bento-tab title=\"Carl Andersen\">\n     *                 (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen.\n     *             </bento-tab>\n     *             <bento-tab title=\"Karl Truffel\">\n     *                 (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel.\n     *             </bento-tab>\n     *             <bento-tab title=\"Maria Ahlefeldt\" :disabled=\"true\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *         </bento-tabs>\n     *     `\n     * };\n     */\n\n    // component\n    export default defineComponent({\n        components: {\n            BentoTypography,\n            FixedScroller,\n        },\n        props: {\n            /**\n             * Sets the active tab by its index (0 being the first tab item).\n             */\n            activeTabIndex: { type: Number, default: 0 },\n        },\n        emits: [BentoTabsEvent.ACTIVE_TAB_INDEX],\n        setup(props, { emit }) {\n            const tabs: Ref<BentoTab[]> = ref([]);\n            const tablist = ref(null);\n            const tablistwrapper = ref();\n            const activeTabId = ref('');\n\n            provide(TABS_ACTIVE_TAB_ID_KEY, activeTabId);\n\n            // unregister tab if removed / destroyed\n            const unregisterTab = (tabIdToRemove: string) => () => {\n                tabs.value = tabs.value?.filter(({ id }) => id !== tabIdToRemove);\n            };\n\n            // register tab\n            const registerTab: BentoTabsRegisterTab = ({ title, disabled, withNotificationIndicator, counter }) => {\n                const id = generateUid('b-tab');\n\n                // add tab to tabs\n                tabs.value.push({ disabled, id, title, withNotificationIndicator, counter });\n\n                // return values to the Tab component\n                return { id, unregisterTab: unregisterTab(id) };\n            };\n\n            // provide activeTab and registerTab to tab items\n            provide(TABS_REGISTER_TAB_INJECTION_KEY, registerTab);\n\n            // keyboard navigation\n            const onKeydownTabsNavigation = (e: KeyboardEvent) => {\n                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n                    // find tab that is focussed\n                    const activeTab = tabs.value.find(tab => document.activeElement.id === tab.id);\n                    let activeTabIndex = tabs.value.indexOf(activeTab);\n\n                    // conditionally increase or decrease the\n                    if (e.code === 'ArrowLeft') {\n                        activeTabIndex = getPreviousTabIndex(activeTabIndex, tabs.value);\n                    } else if (e.code === 'ArrowRight') {\n                        activeTabIndex = getNextTabIndex(activeTabIndex, tabs.value);\n                    }\n\n                    // focus new active tab\n                    tablist.value.children[activeTabIndex].focus();\n                }\n            };\n\n            watch(\n                [() => props.activeTabIndex, tabs],\n                ([index, currentTabs]) => {\n                    nextTick(() => {\n                        const tab = currentTabs[index];\n                        activeTabId.value =\n                            tab && !tab.disabled ? tab.id : tabs.value.find(({ disabled }) => !disabled)?.id;\n                    });\n                },\n                { immediate: true }\n            );\n\n            const handleTabChange = (tabId: string) => {\n                activeTabId.value = tabId;\n                const activeIndex = tabs.value.findIndex(({ id }) => id === activeTabId.value);\n                emit(BentoTabsEvent.ACTIVE_TAB_INDEX, activeIndex);\n            };\n\n            const isDisabled = (isDisabledTab: Ref<boolean>): Booleanish =>\n                (isDisabledTab ? 'disabled' : false) as Booleanish;\n\n            return {\n                tabs,\n                tablist,\n                tablistwrapper,\n                activeTabId,\n                onKeydownTabsNavigation,\n                handleTabChange,\n                isDisabled,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tabs.scss\" />\n"],"names":["_sfc_main$1","defineComponent","props","disabled","withNotificationIndicator","counter","toRefs","componentTitle","ref","provide","EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY","value","computedTitle","computed","registerTab","inject","TABS_REGISTER_TAB_INJECTION_KEY","activeTabId","TABS_ACTIVE_TAB_ID_KEY","id","unregisterTab","onUnmounted","getPreviousTabIndex","activeTabIndex","tabsValue","newActiveTabIndex","getNextTabIndex","BentoTabsEvent","BentoTabsEvent2","_sfc_main","BentoTypography","FixedScroller","emit","tabs","tablist","tablistwrapper","tabIdToRemove","_a","title","generateUid","onKeydownTabsNavigation","e","activeTab","tab","watch","index","currentTabs","nextTick","tabId","activeIndex","isDisabledTab"],"mappings":"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"}

package/dist/chunks/{tag.-YNhsBv7.js → tag.3fthBtwc.js}

@@ -1,7 +1,7 @@
 import { defineComponent as p, useSlots as m, computed as r } from "vue";
 import { B as d } from "./typography.J1v_SPG3.js";
 import { u as f } from "./aria-label.CaUURpnB.js";
-import { g as n } from "./get-slot-text.Cgn-E48s.js";
+import { g as n } from "./get-slot-text.BQS5Olxm.js";
 import { B as _ } from "./tooltip.R2sqydIE.js";
 import { n as v } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/tag.css";
@@ -41,4 +41,4 @@ export {
   F as B,
   i as a
 };
-//# sourceMappingURL=tag.-YNhsBv7.js.map
+//# sourceMappingURL=tag.3fthBtwc.js.map