@adyen/bento-vue2 1.53.0 → 1.54.0

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

@@ -0,0 +1,295 @@
+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.BbQIbZfu.js";
+import { B as L } from "./info-icon.J62KXp9I.js";
+import { B as E } from "./typography.J1v_SPG3.js";
+import { B as z } from "./tag.CyspYb1E.js";
+import { C as P } from "./copy.k18tXmP1.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.egM7irBt.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"summary-grid.types.egM7irBt.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/tabs.C8CgvNt4.js

@@ -0,0 +1,214 @@
+import { defineComponent as E, toRefs as K, ref as _, provide as T, computed as y, inject as C, onUnmounted as k, watch as w, nextTick as x, onMounted as L } from "vue";
+import { E as F, T as A, a as N } from "./tabs.keys.Bc2pSKRw.js";
+import { n as B } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as P } from "./typography.J1v_SPG3.js";
+import { g as W } from "./generate-uid.NJ8tVoha.js";
+import { F as X } from "./fixed-scroller.BwvXYzE6.js";
+import "../assets/tabs.css";
+const Y = E({
+  props: {
+    /**
+     * Displays a counter next to the tab title
+     */
+    counter: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Title of the tab
+     */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Determines whether the tab is disabled
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays the tab with a notification indicator
+     */
+    withNotificationIndicator: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(s) {
+    const { disabled: t, withNotificationIndicator: e, counter: d } = K(s), n = _();
+    T(F, (f) => {
+      n.value = f;
+    });
+    const o = y(() => n.value ?? s.title), l = C(A), c = C(N), { id: I, unregisterTab: v } = l({
+      disabled: t,
+      title: o,
+      withNotificationIndicator: e,
+      counter: d
+    });
+    return k(() => v()), { activeTabId: c, id: I, computedTitle: o };
+  }
+});
+var j = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { directives: [{ name: "show", rawName: "v-show", value: t.activeTabId === t.id, expression: "activeTabId === id" }], staticClass: "b-tab", attrs: { id: `${t.id}-tabpanel`, role: "tabpanel", "aria-labelledby": t.id } }, [t.activeTabId === t.id ? [t._t("default")] : t._e()], 2);
+}, G = [], J = /* @__PURE__ */ B(
+  Y,
+  j,
+  G,
+  !1,
+  null,
+  "0e7e8dbe"
+);
+const at = J.exports, R = (s, t) => {
+  const e = s === 0 ? t.length - 1 : s - 1;
+  return t[e].disabled ? R(e, t) : e;
+}, O = (s, t) => {
+  const e = s === t.length - 1 ? 0 : s + 1;
+  return t[e].disabled ? O(e, t) : e;
+};
+var m = /* @__PURE__ */ ((s) => (s.ACTIVE_TAB_INDEX = "update:active-tab-index", s))(m || {});
+const U = E({
+  components: {
+    BentoTypography: P,
+    FixedScroller: X
+  },
+  props: {
+    /**
+     * Sets the active tab by its index (0 being the first tab item).
+     */
+    activeTabIndex: { type: Number, default: 0 },
+    /*
+     * Renders the tab with a sticky positioning.
+     */
+    sticky: { type: Boolean, default: !1 },
+    /**
+     * Additional configurable options for tabs rendered with a sticky positioning.
+     * It must be an object of type {@see BentoStickyTabsOption}
+     * @property {Ref<number>} stickyOptions.top - Top position the tabs should take up when rendered as sticky.
+     */
+    stickyOptions: { type: Object, default: null }
+  },
+  emits: [m.ACTIVE_TAB_INDEX],
+  setup(s, { emit: t }) {
+    const e = _([]), d = _(null), n = _(), p = _(), o = _("");
+    let l;
+    T(N, o);
+    const c = (a) => () => {
+      var r;
+      e.value = (r = e.value) == null ? void 0 : r.filter(({ id: i }) => i !== a);
+    };
+    T(A, ({ title: a, disabled: r, withNotificationIndicator: i, counter: b }) => {
+      const u = W("b-tab");
+      return e.value.push({ disabled: r, id: u, title: a, withNotificationIndicator: i, counter: b }), { id: u, unregisterTab: c(u) };
+    });
+    const v = (a) => {
+      if (a.code === "ArrowLeft" || a.code === "ArrowRight") {
+        const r = e.value.find((b) => document.activeElement.id === b.id);
+        let i = e.value.indexOf(r);
+        a.code === "ArrowLeft" ? i = R(i, e.value) : a.code === "ArrowRight" && (i = O(i, e.value)), d.value.children[i].focus();
+      }
+    };
+    w(
+      [() => s.activeTabIndex, e],
+      ([a, r]) => {
+        x(() => {
+          var b;
+          const i = r[a];
+          o.value = i && !i.disabled ? i.id : (b = e.value.find(({ disabled: u }) => !u)) == null ? void 0 : b.id;
+        });
+      },
+      { immediate: !0 }
+    );
+    const f = (a) => {
+      o.value = a;
+      const r = e.value.findIndex(({ id: i }) => i === o.value);
+      t(m.ACTIVE_TAB_INDEX, r);
+    }, S = (a) => a ? "disabled" : !1, g = () => {
+      var a;
+      (a = n.value) != null && a.$el && (l = new IntersectionObserver(
+        ([r]) => {
+          var i, b;
+          (b = (i = n.value) == null ? void 0 : i.$el) == null || b.classList.toggle(
+            "b-tabs__tab-list-wrapper--pinned",
+            r.intersectionRatio < 1
+          );
+        },
+        { threshold: [1] }
+      ), l.observe(n.value.$el));
+    }, h = () => {
+      l && (l.disconnect(), l = null);
+    };
+    L(() => {
+      s.sticky && g();
+    }), k(() => {
+      h();
+    }), w(
+      () => s.sticky,
+      (a) => {
+        x(() => {
+          a ? g() : h();
+        });
+      },
+      // Do not run immediately on component mount, as onMounted handles initial setup
+      { immediate: !1 }
+    );
+    const $ = y(() => {
+      var a;
+      return {
+        "b-tabs__tab-list-wrapper--sticky": s.sticky,
+        "b-tabs__tab-list-wrapper--pinned": s.sticky && ((a = s.stickyOptions) == null ? void 0 : a.top)
+      };
+    }), D = y(
+      () => {
+        var a;
+        return (
+          // This helps us detect when the tabs are pinned without calculations on the tabs positions because it makes the tabs intersect by 1 pixel with the element on top of it, which is getting aught by the intersection observer.
+          // Followed this example: https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/
+          s.sticky ? { top: `${(((a = s.stickyOptions) == null ? void 0 : a.top) ?? 0) - 1}px` } : {}
+        );
+      }
+    );
+    return {
+      tabs: e,
+      tablist: d,
+      tablistwrapper: n,
+      activeTabId: o,
+      tablistWrapperConditionalClasses: $,
+      tablistWrapperStyles: D,
+      onKeydownTabsNavigation: v,
+      handleTabChange: f,
+      isDisabled: S,
+      isPinned: p
+    };
+  }
+});
+var q = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { staticClass: "b-tabs" }, [e("fixed-scroller", { ref: "tablistwrapper", staticClass: "b-tabs__tab-list-wrapper", class: t.tablistWrapperConditionalClasses, style: t.tablistWrapperStyles, attrs: { condensed: "", "extra-padding-top": 2 } }, [e("div", { ref: "tablist", staticClass: "b-tabs__tab-list", attrs: { role: "tablist" }, on: { keydown: t.onKeydownTabsNavigation } }, t._l(t.tabs, function({ disabled: d, id: n, title: p, withNotificationIndicator: o, counter: l }) {
+    return e("button", { key: n, staticClass: "b-tabs__tab", class: {
+      "b-tabs__tab--active": t.activeTabId === n,
+      "b-tabs__tab--disabled": d
+    }, attrs: { id: n, role: "tab", type: "button", "aria-controls": `${n}-tabpanel`, "aria-selected": t.activeTabId === n ? "true" : "false", tabindex: t.activeTabId === n && !d.value ? null : -1, disabled: t.isDisabled(d) }, on: { click: function(c) {
+      return t.handleTabChange(n);
+    }, keydown: function(c) {
+      return !c.type.indexOf("key") && t._k(c.keyCode, "enter", 13, c.key, "Enter") && t._k(c.keyCode, "space", 32, c.key, [" ", "Spacebar"]) ? null : t.handleTabChange(n);
+    } } }, [e("span", { staticClass: "b-tabs__tab-text" }, [e("bento-typography", { staticClass: "b-tabs__tab-title", attrs: { el: "span", variant: "body", stronger: "" } }, [t._v(" " + t._s(p) + " ")]), l != null ? e("bento-typography", { staticClass: "b-tabs__tab-counter", class: {
+      "b-tabs__tab-counter--active": t.activeTabId === n
+    }, attrs: { el: "span", variant: "body", stronger: "" } }, [t._v(" " + t._s(l) + " ")]) : t._e(), o ? e("span", { staticClass: "b-tabs__tab-notification-dot", attrs: { "aria-hidden": "true" } }) : t._e()], 1), e("span", { directives: [{ name: "show", rawName: "v-show", value: t.activeTabId === n, expression: "activeTabId === id" }], staticClass: "b-tabs__tab-underline", attrs: { "aria-hidden": "true" } })]);
+  }), 0)]), t._t("default")], 2);
+}, z = [], M = /* @__PURE__ */ B(
+  U,
+  q,
+  z,
+  !1,
+  null,
+  "90f706fa"
+);
+const st = M.exports;
+export {
+  at as B,
+  st as a
+};
+//# sourceMappingURL=tabs.C8CgvNt4.js.map

package/dist/chunks/tabs.C8CgvNt4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.C8CgvNt4.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 interface BentoStickyTabsOptions {\n    top?: Ref<number>;\n}\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\n            ref=\"tablistwrapper\"\n            condensed\n            :extra-padding-top=\"2\"\n            class=\"b-tabs__tab-list-wrapper\"\n            :class=\"tablistWrapperConditionalClasses\"\n            :style=\"tablistWrapperStyles\"\n        >\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 { computed, defineComponent, nextTick, PropType, 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 { BentoStickyTabsOptions, 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    import { onMounted } from 'vue';\n    import { onUnmounted } from 'vue';\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            /*\n             * Renders the tab with a sticky positioning.\n             */\n            sticky: { type: Boolean, default: false },\n\n            /**\n             * Additional configurable options for tabs rendered with a sticky positioning.\n             * It must be an object of type {@see BentoStickyTabsOption}\n             * @property {Ref<number>} stickyOptions.top - Top position the tabs should take up when rendered as sticky.\n             */\n            stickyOptions: { type: Object as PropType<BentoStickyTabsOptions>, default: null },\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 isPinned = ref();\n            const activeTabId = ref('');\n            let observer;\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            /* == Sticky tabs logic == */\n            // Function to create and observe\n            const setupIntersectionObserver = () => {\n                if (tablistwrapper.value?.$el) {\n                    observer = new IntersectionObserver(\n                        ([e]) => {\n                            tablistwrapper.value?.$el?.classList.toggle(\n                                'b-tabs__tab-list-wrapper--pinned',\n                                e.intersectionRatio < 1\n                            );\n                        },\n                        { threshold: [1] }\n                    );\n                    observer.observe(tablistwrapper.value.$el);\n                }\n            };\n\n            // Function to disconnect observer\n            const disconnectIntersectionObserver = () => {\n                if (observer) {\n                    observer.disconnect();\n                    observer = null;\n                }\n            };\n\n            onMounted(() => {\n                // Initial setup based on `sticky` prop\n                if (props.sticky) {\n                    setupIntersectionObserver();\n                }\n            });\n\n            onUnmounted(() => {\n                disconnectIntersectionObserver();\n            });\n\n            // Watch the `sticky` prop for changes and retrigger the observer accordingly\n            watch(\n                () => props.sticky,\n                newVal => {\n                    nextTick(() => {\n                        // Ensure the DOM is updated before trying to observe\n                        if (newVal) {\n                            setupIntersectionObserver();\n                        } else {\n                            disconnectIntersectionObserver();\n                        }\n                    });\n                },\n                // Do not run immediately on component mount, as onMounted handles initial setup\n                { immediate: false }\n            );\n\n            const tablistWrapperConditionalClasses = computed(() => ({\n                'b-tabs__tab-list-wrapper--sticky': props.sticky,\n                'b-tabs__tab-list-wrapper--pinned': props.sticky && props.stickyOptions?.top,\n            }));\n\n            const tablistWrapperStyles = computed(() =>\n                // This helps us detect when the tabs are pinned without calculations on the tabs positions because it makes the tabs intersect by 1 pixel with the element on top of it, which is getting aught by the intersection observer.\n                // Followed this example: https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/\n                props.sticky ? { top: `${(props.stickyOptions?.top ?? 0) - 1}px` } : {}\n            );\n\n            return {\n                tabs,\n                tablist,\n                tablistwrapper,\n                activeTabId,\n                tablistWrapperConditionalClasses,\n                tablistWrapperStyles,\n                onKeydownTabsNavigation,\n                handleTabChange,\n                isDisabled,\n                isPinned,\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","isPinned","observer","tabIdToRemove","_a","title","generateUid","onKeydownTabsNavigation","e","activeTab","tab","watch","index","currentTabs","nextTick","handleTabChange","tabId","activeIndex","isDisabled","isDisabledTab","setupIntersectionObserver","_b","disconnectIntersectionObserver","onMounted","newVal","tablistWrapperConditionalClasses","tablistWrapperStyles"],"mappings":"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"}

package/dist/chunks/{tag.IyMxowGc.js → tag.CyspYb1E.js}

@@ -2,7 +2,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.BQS5Olxm.js";
-import { B as _ } from "./tooltip.DShIiBiY.js";
+import { B as _ } from "./tooltip.DOvci5lX.js";
 import { n as v } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/tag.css";
 var i = /* @__PURE__ */ ((e) => (e.GREY = "grey", e.BLUE = "blue", e.GREEN = "green", e.ORANGE = "orange", e.RED = "red", e.WHITE = "white", e))(i || {});
@@ -41,4 +41,4 @@ export {
   F as B,
   i as a
 };
-//# sourceMappingURL=tag.IyMxowGc.js.map
+//# sourceMappingURL=tag.CyspYb1E.js.map