@adyen/bento-vue2 1.65.0 → 1.66.0

package/dist/chunks/{structured-list-item.tox2Kcb6.js.map → structured-list-item.Bnn6-Z3q.js.map}

@@ -1 +1 @@
-{"version":3,"file":"structured-list-item.tox2Kcb6.js","sources":["../../src/components/structured-list/structured-list.keys.ts","../../src/components/structured-list/structured-list.types.ts","../../src/components/structured-list/structured-list.vue","../../src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\nexport const STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY = Symbol('structured list labels width injection key');\n","export type BentoStructuredListLayoutOptions = '25-75' | '33-66' | '42-58' | '50-50' | '75-25' | '66-33' | '58-42';\nexport const BentoStructuredListLayoutOptions = ['25-75', '33-66', '42-58', '50-50', '75-25', '66-33', '58-42'];\n","<template>\n    <dl class=\"b-structured-list\">\n        <slot />\n    </dl>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, provide } from 'vue';\n    import {\n        STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n        STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n    } from '@/components/structured-list/structured-list.keys';\n    import { BentoStructuredListLayoutOptions } from './structured-list.types';\n\n    const props = defineProps({\n  labelsWidth: { default: null },\n  layout: { default: '33-66' }\n});\n\n    const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n    const computedLayout = computed(() =>\n        BentoStructuredListLayoutOptions.includes(props.layout) ? props.layout : '33-66'\n    );\n\n    const computedLabelsWidth = computed(() => {\n        if (isCondensed) {\n            return '130px';\n        }\n\n        if (props.labelsWidth) {\n            return `${props.labelsWidth}px`;\n        }\n\n        return `${computedLayout.value.split('-')[0]}%`;\n    });\n\n    provide(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, computedLabelsWidth);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This is a list used to display pairs of information in a clear and organized manner.\n     * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n     *\n     * @example\n     * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredList, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Payment\">\n     *               <bento-payment-method label=\"Klarna\" type=\"Klarna\"  />\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\">\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","<template>\n    <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n        <dt class=\"b-structured-list-item__label\" :style=\"computedLabelStyle\">\n            <bento-typography :variant=\"labelTypographyVariant\">{{ label }}</bento-typography>\n            <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n        </dt>\n        <dd class=\"b-structured-list-item__value\" :class=\"valueConditionalClasses\">\n            <slot />\n            <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" />\n            <bento-button\n                v-if=\"search\"\n                v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : t('search')\"\n                class=\"b-structured-list-item__icon\"\n                variant=\"tertiary\"\n                @click=\"search\"\n            >\n                <template #iconLeft>\n                    <search-icon :svg-title=\"t('search')\" />\n                </template>\n            </bento-button>\n        </dd>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, Ref } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography } from '@/components/typography';\n    import Copy from '@/components/internal/copy/copy.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n    // Utils\n    import { useI18n } from '@/utils/ts/i18n';\n\n    // Directives\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n    // Keys\n    import {\n        STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n        STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n    } from '../../structured-list.keys';\n\n    import messages from '../../messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const DEFAULT_LABELS_WIDTH = '33%';\n\n    const props = defineProps({\n  label: null,\n  labelInfo: null,\n  copy: null,\n  search: { type: Function },\n  searchTooltip: null,\n  truncate: { type: Boolean }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n    const labelsWidth = inject<Ref<string>>(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, ref(DEFAULT_LABELS_WIDTH));\n    const computedLabelStyle = computed(() => `flex-basis:${labelsWidth.value}`);\n    const conditionalClasses = computed(() => ({\n        'b-structured-list-item--condensed': isCondensed,\n    }));\n\n    const valueConditionalClasses = computed(() => ({\n        'b-structured-list-item__value--truncate': props.truncate,\n    }));\n\n    const labelTypographyVariant = computed(() => (isCondensed ? 'caption' : 'body'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This is an item of the `BentoStructuredList` meant to be used only with that component.\n     * It consists of a label/value pair, and also the optional copy and search modifiers.\n     *\n     * @example\n     * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredListItem, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n     *               <bento-typography>\n     *                  143442642\n     *               </bento-status>\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\" copy='123456'>\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["STRUCTURED_LIST_CONDENSED_INJECTION_KEY","STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY","BentoStructuredListLayoutOptions","__default__$1","isCondensed","inject","computedLayout","computed","props","computedLabelsWidth","provide","__default__","messages","DEFAULT_LABELS_WIDTH","t","useI18n","labelsWidth","ref","computedLabelStyle","conditionalClasses","valueConditionalClasses","labelTypographyVariant"],"mappings":";;;;;;;;;;AAAa,MAAAA,IAAA,OAAA,+CAAA,GACAC,IAAA,OAAA,4CAAA,GCAAC,IAAA,CAAA,SAAA,SAAA,SAAA,SAAA,SAAA,SAAA,OAAA,GC6DTC,IAAA,CAAA;;;;;;;;iBA3CAC,IAAAC,EAAAL,GAAA,EAAA,GAEAM,IAAAC;AAAA,MAAuB,MAAAL,EAAA,SAAAM,EAAA,MAAA,IAAAA,EAAA,SAAA;AAAA,IACsD,GAG7EC,IAAAF,EAAA,MACIH,IACI,UAGJI,EAAA,cACI,GAAAA,EAAA,WAAA,OAGJ,GAAAF,EAAA,MAAA,MAAA,GAAA,EAAA,CAAA,CAAA,GAA4C;AAGhD,WAAAI,EAAAT,GAAAQ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GC+DAE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;iBApDAC,IAAA,OAWA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAX,IAAAC,EAAAL,GAAA,EAAA,GACAgB,IAAAX,EAAAJ,GAAAgB,EAAAJ,CAAA,CAAA,GACAK,IAAAX,EAAA,MAAA,cAAAS,EAAA,KAAA,EAAA,GACAG,IAAAZ,EAAA,OAAA;AAAA,MAA2C,qCAAAH;AAAA,IACF,EAAA,GAGzCgB,IAAAb,EAAA,OAAA;AAAA,MAAgD,2CAAAC,EAAA;AAAA,IACK,EAAA,GAGrDa,IAAAd,EAAA,MAAAH,IAAA,YAAA,MAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"structured-list-item.Bnn6-Z3q.js","sources":["../../src/components/structured-list/structured-list.keys.ts","../../src/components/structured-list/structured-list.types.ts","../../src/components/structured-list/structured-list.vue","../../src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\nexport const STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY = Symbol('structured list labels width injection key');\n","export type BentoStructuredListLayoutOptions = '25-75' | '33-66' | '42-58' | '50-50' | '75-25' | '66-33' | '58-42';\nexport const BentoStructuredListLayoutOptions = ['25-75', '33-66', '42-58', '50-50', '75-25', '66-33', '58-42'];\n","<template>\n    <dl class=\"b-structured-list\">\n        <slot />\n    </dl>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, provide } from 'vue';\n    import {\n        STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n        STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n    } from '@/components/structured-list/structured-list.keys';\n    import { BentoStructuredListLayoutOptions } from './structured-list.types';\n\n    const props = defineProps({\n  labelsWidth: { default: null },\n  layout: { default: '33-66' }\n});\n\n    const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n    const computedLayout = computed(() =>\n        BentoStructuredListLayoutOptions.includes(props.layout) ? props.layout : '33-66'\n    );\n\n    const computedLabelsWidth = computed(() => {\n        if (isCondensed) {\n            return '130px';\n        }\n\n        if (props.labelsWidth) {\n            return `${props.labelsWidth}px`;\n        }\n\n        return `${computedLayout.value.split('-')[0]}%`;\n    });\n\n    provide(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, computedLabelsWidth);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This is a list used to display pairs of information in a clear and organized manner.\n     * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n     *\n     * @example\n     * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredList, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Payment\">\n     *               <bento-payment-method label=\"Klarna\" type=\"Klarna\"  />\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\">\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","<template>\n    <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n        <dt class=\"b-structured-list-item__label\" :style=\"computedLabelStyle\">\n            <bento-typography :variant=\"labelTypographyVariant\">{{ label }}</bento-typography>\n            <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n        </dt>\n        <dd class=\"b-structured-list-item__value\" :class=\"valueConditionalClasses\">\n            <slot />\n            <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" />\n            <bento-button\n                v-if=\"search\"\n                v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : t('search')\"\n                class=\"b-structured-list-item__icon\"\n                variant=\"tertiary\"\n                @click=\"search\"\n            >\n                <template #iconLeft>\n                    <search-icon :svg-title=\"t('search')\" />\n                </template>\n            </bento-button>\n        </dd>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, Ref } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography } from '@/components/typography';\n    import Copy from '@/components/internal/copy/copy.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n    // Utils\n    import { useI18n } from '@/utils/ts/i18n';\n\n    // Directives\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n    // Keys\n    import {\n        STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n        STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n    } from '../../structured-list.keys';\n\n    import messages from '../../messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const DEFAULT_LABELS_WIDTH = '33%';\n\n    const props = defineProps({\n  label: null,\n  labelInfo: null,\n  copy: null,\n  search: { type: Function },\n  searchTooltip: null,\n  truncate: { type: Boolean }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n    const labelsWidth = inject<Ref<string>>(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, ref(DEFAULT_LABELS_WIDTH));\n    const computedLabelStyle = computed(() => `flex-basis:${labelsWidth.value}`);\n    const conditionalClasses = computed(() => ({\n        'b-structured-list-item--condensed': isCondensed,\n    }));\n\n    const valueConditionalClasses = computed(() => ({\n        'b-structured-list-item__value--truncate': props.truncate,\n    }));\n\n    const labelTypographyVariant = computed(() => (isCondensed ? 'caption' : 'body'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This is an item of the `BentoStructuredList` meant to be used only with that component.\n     * It consists of a label/value pair, and also the optional copy and search modifiers.\n     *\n     * @example\n     * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredListItem, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n     *               <bento-typography>\n     *                  143442642\n     *               </bento-status>\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\" copy='123456'>\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["STRUCTURED_LIST_CONDENSED_INJECTION_KEY","STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY","BentoStructuredListLayoutOptions","__default__$1","isCondensed","inject","computedLayout","computed","props","computedLabelsWidth","provide","__default__","messages","DEFAULT_LABELS_WIDTH","t","useI18n","labelsWidth","ref","computedLabelStyle","conditionalClasses","valueConditionalClasses","labelTypographyVariant"],"mappings":";;;;;;;;;;AAAa,MAAAA,IAAA,OAAA,+CAAA,GACAC,IAAA,OAAA,4CAAA,GCAAC,IAAA,CAAA,SAAA,SAAA,SAAA,SAAA,SAAA,SAAA,OAAA,GC6DTC,IAAA,CAAA;;;;;;;;iBA3CAC,IAAAC,EAAAL,GAAA,EAAA,GAEAM,IAAAC;AAAA,MAAuB,MAAAL,EAAA,SAAAM,EAAA,MAAA,IAAAA,EAAA,SAAA;AAAA,IACsD,GAG7EC,IAAAF,EAAA,MACIH,IACI,UAGJI,EAAA,cACI,GAAAA,EAAA,WAAA,OAGJ,GAAAF,EAAA,MAAA,MAAA,GAAA,EAAA,CAAA,CAAA,GAA4C;AAGhD,WAAAI,EAAAT,GAAAQ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GC+DAE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;iBApDAC,IAAA,OAWA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAX,IAAAC,EAAAL,GAAA,EAAA,GACAgB,IAAAX,EAAAJ,GAAAgB,EAAAJ,CAAA,CAAA,GACAK,IAAAX,EAAA,MAAA,cAAAS,EAAA,KAAA,EAAA,GACAG,IAAAZ,EAAA,OAAA;AAAA,MAA2C,qCAAAH;AAAA,IACF,EAAA,GAGzCgB,IAAAb,EAAA,OAAA;AAAA,MAAgD,2CAAAC,EAAA;AAAA,IACK,EAAA,GAGrDa,IAAAd,EAAA,MAAAH,IAAA,YAAA,MAAA;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,337 @@
+import { defineComponent as d, useSlots as p, onMounted as I, provide as h, toRef as k, toRefs as z, inject as P, ref as D, computed as a } from "vue";
+import { u as m } from "./use-has-slot.C9lQZ6nz.js";
+import { S as B, a as x } from "./summary-grid.keys.CxTf_FOc.js";
+import { G as M } from "./grid-layout.HvTAa4to.js";
+import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { u as R } from "./i18n.BQkEbtPM.js";
+import { B as G } from "./dashed-underline.CEaAmjDa.js";
+import { B as w } from "./info-icon.CYOXx8CL.js";
+import { B as L } from "./typography.J1v_SPG3.js";
+import { B as E } from "./tag.CGkclKVL.js";
+import { C as N } from "./copy.CF8Fzu2Y.js";
+import "../assets/summary-grid.css";
+const A = {}, F = /* @__PURE__ */ d({
+  ...A,
+  __name: "summary-grid",
+  props: {
+    columnWidth: { default: null },
+    slashedZero: { type: Boolean, default: !1 }
+  },
+  setup(r) {
+    var u, s;
+    const e = r, o = p(), t = m(o);
+    let n = 1;
+    if (o) {
+      const _ = (s = (u = Object.keys(o)) == null ? void 0 : u.filter((c) => c.includes("cell-"))) == null ? void 0 : s.map((c) => {
+        var l;
+        return parseInt((l = c.split("-")) == null ? void 0 : l[1], 10);
+      });
+      n = Math.max(..._);
+    }
+    I(() => {
+      if (n > 3)
+        throw new Error(
+          "BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information."
+        );
+    });
+    const i = () => ({ isSummaryGridLayout: !0 });
+    return h(B, i), h(x, k(e, "slashedZero")), { __sfc: !0, props: e, slots: o, hasSlot: t, numberOfRows: n, registerComponentsInSummaryGrid: i, GridLayout: M };
+  }
+});
+var U = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o("div", { staticClass: "b-summary-grid" }, e._l(t.numberOfRows, function(n) {
+    var i;
+    return o(t.GridLayout, { key: `summary-grid-row-${n}`, attrs: { "data-testid": `summary-grid-row-${n}`, "column-width": (i = e.columnWidth) == null ? void 0 : i[`row${n}`] }, scopedSlots: e._u([t.hasSlot(`cell-${n}-1`) ? { key: "col-1", fn: function() {
+      return [e._t(`cell-${n}-1`)];
+    }, proxy: !0 } : null, t.hasSlot(`cell-${n}-2`) ? { key: "col-2", fn: function() {
+      return [e._t(`cell-${n}-2`)];
+    }, proxy: !0 } : null, t.hasSlot(`cell-${n}-3`) ? { key: "col-3", fn: function() {
+      return [e._t(`cell-${n}-3`)];
+    }, proxy: !0 } : null, t.hasSlot(`cell-${n}-4`) ? { key: "col-4", fn: function() {
+      return [e._t(`cell-${n}-4`)];
+    }, proxy: !0 } : null, t.hasSlot(`cell-${n}-5`) ? { key: "col-5", fn: function() {
+      return [e._t(`cell-${n}-5`)];
+    }, proxy: !0 } : null, t.hasSlot(`cell-${n}-6`) ? { key: "col-6", fn: function() {
+      return [e._t(`cell-${n}-6`)];
+    }, proxy: !0 } : null], null, !0) });
+  }), 1);
+}, O = [], V = /* @__PURE__ */ f(
+  F,
+  U,
+  O,
+  !1,
+  null,
+  "397e4d9c"
+);
+const Re = V.exports, Y = {}, Z = /* @__PURE__ */ d({
+  ...Y,
+  __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" },
+    underlinePopoverSize: { default: "fit-content" },
+    underlineTooltipText: { default: null },
+    itemType: { default: "custom" }
+  },
+  emits: ["copy-click", "info-icon-mouseenter"],
+  setup(r) {
+    const e = r, { trendDirection: o, secondaryTrendDirection: t, itemType: n, size: i } = z(e), u = P(x, D(!1)), s = (C) => {
+      switch (C) {
+        case "positive":
+          return "green";
+        case "negative":
+          return "red";
+        default:
+          return "blue";
+      }
+    }, _ = a(() => s(o.value)), c = a(() => s(t.value)), l = a(() => i.value === "small" ? "body" : n.value !== "text" ? "title" : null), g = a(() => ({
+      medium: i.value === "large",
+      strongest: i.value === "small",
+      wide: i.value === "small",
+      variant: l.value
+    })), S = a(() => e.fitContent ? { width: "fit-content" } : {}), $ = a(() => ({ "b-summary-grid-item--slashed-zero": u.value })), v = p(), T = m(v), b = a(() => e.underlineTooltipText || T("dashed-underline"));
+    return { __sfc: !0, props: e, trendDirection: o, secondaryTrendDirection: t, itemType: n, size: i, hasSlashedZero: u, tagVariantColor: s, trendVariant: _, secondaryTrendVariant: c, typographyContentElement: l, typographyProps: g, computedStyles: S, conditionalClasses: $, slots: v, hasSlot: T, withUnderline: b, BentoDashedUnderline: G, BentoInfoIcon: w, BentoTypography: L, BentoTag: E, Copy: N };
+  }
+});
+var j = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o("div", { staticClass: "b-summary-grid-item", class: t.conditionalClasses, style: t.computedStyles }, [o("div", { staticClass: "b-summary-grid-item__header" }, [o(t.BentoTypography, { staticClass: "b-summary-grid-item__title", attrs: { el: "span", variant: "body" } }, [t.withUnderline ? o(t.BentoDashedUnderline, { attrs: { "tooltip-text": e.underlineTooltipText, "popover-size": e.underlinePopoverSize }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "popover-content", fn: function() {
+    return [e._t("dashed-underline")];
+  }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(e.title) + " ")]) : [e._v(" " + e._s(e.title) + " ")]], 2), o("div", { staticClass: "b-summary-grid-item__title-icons" }, [e.copy ? o(t.Copy, { staticClass: "b-structured-list__icon", attrs: { text: e.copy }, on: { click: function(n) {
+    return e.$emit("copy-click", n);
+  } } }) : e._e(), e.infoIconTooltipText ? o(t.BentoInfoIcon, { staticClass: "b-summary-grid-item__title-tooltip", attrs: { "tooltip-text": e.infoIconTooltipText, "tooltip-position": "top" }, on: { mouseenter: function(n) {
+    return e.$emit("info-icon-mouseenter", n);
+  } } }) : e._e()], 1)], 1), o(t.BentoTypography, e._b({ staticClass: "b-summary-grid-item__title", attrs: { "data-testid": "summary-grid-item-content-typography", el: "span" } }, "bento-typography", t.typographyProps, !1), [e._t("default"), e.trend && t.itemType !== "text" ? o(t.BentoTag, { staticClass: "b-summary-grid-item__content-trend", attrs: { variant: t.trendVariant, label: e.trend } }) : e._e()], 2), t.hasSlot("secondary") ? o(t.BentoTypography, { staticClass: "b-summary-grid-item__title", attrs: { "data-testid": "summary-grid-item-secondary-metric-typography", el: "span", variant: "caption", stronger: "" } }, [e._t("secondary"), e.secondaryTrend ? o(t.BentoTag, { staticClass: "b-summary-grid-item__content-trend", attrs: { variant: t.secondaryTrendVariant, label: e.secondaryTrend } }) : e._e()], 2) : e._e()], 1);
+}, H = [], W = /* @__PURE__ */ f(
+  Z,
+  j,
+  H,
+  !1,
+  null,
+  "01431a71"
+);
+const y = W.exports, J = {}, K = /* @__PURE__ */ d({
+  ...J,
+  __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" },
+    underlinePopoverSize: { default: "fit-content" },
+    underlineTooltipText: { default: null },
+    label: null,
+    secondaryLabel: { default: null },
+    secondaryMetric: { default: null }
+  },
+  emits: ["copy-click", "info-icon-mouseenter"],
+  setup(r) {
+    const e = p(), o = m(e);
+    return { __sfc: !0, slots: e, hasSlot: o, SummaryGridItem: y };
+  }
+});
+var q = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o(t.SummaryGridItem, { staticClass: "b-summary-grid-item-amount", attrs: { "item-type": "amount", "info-icon-tooltip-text": e.infoIconTooltipText, title: e.title, copy: e.copy, "fit-content": e.fitContent, size: e.size, trend: e.trend, "trend-direction": e.trendDirection, "secondary-trend": e.secondaryTrend, "secondary-trend-direction": e.secondaryTrendDirection, "underline-popover-size": e.underlinePopoverSize, "underline-tooltip-text": e.underlineTooltipText }, on: { "copy-click": function(n) {
+    return e.$emit("copy-click", n);
+  }, "info-icon-mouseenter": function(n) {
+    return e.$emit("info-icon-mouseenter", n);
+  } }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
+    return [e._t("dashed-underline")];
+  }, proxy: !0 } : null, e.secondaryMetric ? { key: "secondary", fn: function() {
+    return [e._v(" " + e._s(e.secondaryMetric) + " ")];
+  }, proxy: !0 } : null], null, !0) }, [o("div", { staticClass: "b-summary-grid-item-amount__content" }, [o("div", [e._v(e._s(e.label))]), e.secondaryLabel ? o("div", { staticClass: "b-summary-grid-item-amount__secondary-label" }, [e._v(e._s(e.secondaryLabel))]) : e._e()])]);
+}, Q = [], X = /* @__PURE__ */ f(
+  K,
+  q,
+  Q,
+  !1,
+  null,
+  "49c31a1c"
+);
+const Ge = X.exports, ee = {}, te = /* @__PURE__ */ d({
+  ...ee,
+  __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" },
+    underlinePopoverSize: { default: "fit-content" },
+    underlineTooltipText: { default: null },
+    label: null,
+    secondaryMetric: { default: null }
+  },
+  emits: ["copy-click", "info-icon-mouseenter"],
+  setup(r) {
+    const e = p(), o = m(e);
+    return { __sfc: !0, slots: e, hasSlot: o, SummaryGridItem: y };
+  }
+});
+var ne = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o(t.SummaryGridItem, { staticClass: "b-summary-grid-item-numeric", attrs: { "item-type": "numeric", "info-icon-tooltip-text": e.infoIconTooltipText, title: e.title, copy: e.copy, "fit-content": e.fitContent, size: e.size, trend: e.trend, "trend-direction": e.trendDirection, "secondary-trend": e.secondaryTrend, "secondary-trend-direction": e.secondaryTrendDirection, "underline-popover-size": e.underlinePopoverSize, "underline-tooltip-text": e.underlineTooltipText }, on: { "copy-click": function(n) {
+    return e.$emit("copy-click", n);
+  }, "info-icon-mouseenter": function(n) {
+    return e.$emit("info-icon-mouseenter", n);
+  } }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
+    return [e._t("dashed-underline")];
+  }, proxy: !0 } : null, e.secondaryMetric ? { key: "secondary", fn: function() {
+    return [e._v(" " + e._s(e.secondaryMetric) + " ")];
+  }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(e.label) + " ")]);
+}, oe = [], re = /* @__PURE__ */ f(
+  te,
+  ne,
+  oe,
+  !1,
+  null,
+  null
+);
+const we = re.exports, ie = {
+  i18n: {}
+}, le = /* @__PURE__ */ d({
+  ...ie,
+  __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" },
+    underlinePopoverSize: { default: "fit-content" },
+    underlineTooltipText: { default: null },
+    label: null,
+    secondaryMetric: { default: null }
+  },
+  emits: ["copy-click", "info-icon-mouseenter"],
+  setup(r) {
+    const e = r, { locale: o } = R(), t = p(), n = m(t), i = {
+      style: "percent",
+      maximumFractionDigits: 2
+    }, u = (l) => l != null && l !== "" && !isNaN(Number(l)), s = (l) => l && u(l) ? new Intl.NumberFormat(o.value, i).format(Number(l) / 100) : l, _ = a(() => s(e.label)), c = a(() => s(e.secondaryMetric));
+    return { __sfc: !0, locale: o, props: e, slots: t, hasSlot: n, percentageArgs: i, isNumeric: u, convertToPercentIfNumber: s, computedLabelPercentage: _, computedSecondaryMetricPercentage: c, SummaryGridItem: y };
+  }
+});
+var se = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o(t.SummaryGridItem, { staticClass: "b-summary-grid-item-percentage", attrs: { "item-type": "percentage", "info-icon-tooltip-text": e.infoIconTooltipText, title: e.title, copy: e.copy, "fit-content": e.fitContent, size: e.size, trend: e.trend, "trend-direction": e.trendDirection, "secondary-trend": e.secondaryTrend, "secondary-trend-direction": e.secondaryTrendDirection, "underline-popover-size": e.underlinePopoverSize, "underline-tooltip-text": e.underlineTooltipText }, on: { "copy-click": function(n) {
+    return e.$emit("copy-click", n);
+  }, "info-icon-mouseenter": function(n) {
+    return e.$emit("info-icon-mouseenter", n);
+  } }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
+    return [e._t("dashed-underline")];
+  }, proxy: !0 } : null, e.secondaryMetric ? { key: "secondary", fn: function() {
+    return [e._v(" " + e._s(t.computedSecondaryMetricPercentage) + " ")];
+  }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(t.computedLabelPercentage) + " ")]);
+}, ae = [], ue = /* @__PURE__ */ f(
+  le,
+  se,
+  ae,
+  !1,
+  null,
+  null
+);
+const Le = ue.exports, ce = {}, de = /* @__PURE__ */ d({
+  ...ce,
+  __name: "summary-grid-item-text",
+  props: {
+    copy: { default: void 0 },
+    fitContent: { type: Boolean, default: !1 },
+    infoIconTooltipText: { default: null },
+    label: null,
+    title: null,
+    underlinePopoverSize: { default: "fit-content" },
+    underlineTooltipText: { default: null }
+  },
+  emits: ["copy-click", "info-icon-mouseenter"],
+  setup(r) {
+    const e = p(), o = m(e);
+    return { __sfc: !0, slots: e, hasSlot: o, SummaryGridItem: y };
+  }
+});
+var pe = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o(t.SummaryGridItem, { staticClass: "b-summary-grid-item-text", attrs: { "item-type": "text", "info-icon-tooltip-text": e.infoIconTooltipText, title: e.title, copy: e.copy, "fit-content": e.fitContent, "underline-popover-size": e.underlinePopoverSize, "underline-tooltip-text": e.underlineTooltipText }, on: { "copy-click": function(n) {
+    return e.$emit("copy-click", n);
+  }, "info-icon-mouseenter": function(n) {
+    return e.$emit("info-icon-mouseenter", n);
+  } }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
+    return [e._t("dashed-underline")];
+  }, proxy: !0 } : null], null, !0) }, [e._v(" " + e._s(e.label) + " ")]);
+}, me = [], fe = /* @__PURE__ */ f(
+  de,
+  pe,
+  me,
+  !1,
+  null,
+  null
+);
+const Ee = fe.exports, _e = {}, ye = /* @__PURE__ */ d({
+  ..._e,
+  __name: "summary-grid-item-custom",
+  props: {
+    copy: { default: void 0 },
+    infoIconTooltipText: { default: null },
+    title: null,
+    fitContent: { type: Boolean, default: !1 },
+    underlinePopoverSize: { default: "fit-content" },
+    underlineTooltipText: { default: null }
+  },
+  emits: ["copy-click", "info-icon-mouseenter"],
+  setup(r) {
+    const e = p(), o = m(e);
+    return { __sfc: !0, slots: e, hasSlot: o, SummaryGridItem: y };
+  }
+});
+var ve = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o(t.SummaryGridItem, { attrs: { title: e.title, "info-icon-tooltip-text": e.infoIconTooltipText, copy: e.copy, "fit-content": e.fitContent, "underline-popover-size": e.underlinePopoverSize, "underline-tooltip-text": e.underlineTooltipText }, on: { "copy-click": function(n) {
+    return e.$emit("copy-click", n);
+  }, "info-icon-mouseenter": function(n) {
+    return e.$emit("info-icon-mouseenter", n);
+  } }, scopedSlots: e._u([t.hasSlot("dashed-underline") ? { key: "dashed-underline", fn: function() {
+    return [e._t("dashed-underline")];
+  }, proxy: !0 } : null], null, !0) }, [e._t("default")], 2);
+}, Te = [], he = /* @__PURE__ */ f(
+  ye,
+  ve,
+  Te,
+  !1,
+  null,
+  null
+);
+const Ne = he.exports;
+var xe = /* @__PURE__ */ ((r) => (r.SMALL = "small", r.MEDIUM = "medium", r.LARGE = "large", r))(xe || {}), ge = /* @__PURE__ */ ((r) => (r.POSITIVE = "positive", r.NEGATIVE = "negative", r.NEUTRAL = "neutral", r))(ge || {});
+export {
+  xe as B,
+  Ge as a,
+  we as b,
+  Le as c,
+  Ee as d,
+  Ne as e,
+  ge as f,
+  Re as s
+};
+//# sourceMappingURL=summary-grid.types.Cwri2Y3T.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"summary-grid.types.Cwri2Y3T.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\n                    v-if=\"withUnderline\"\n                    :tooltip-text=\"underlineTooltipText\"\n                    :popover-size=\"underlinePopoverSize\"\n                >\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\" @click=\"$emit('copy-click', $event)\" />\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                    @mouseenter=\"$emit('info-icon-mouseenter', $event)\"\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 { BentoSummaryGridItemEvents, BentoSummaryGridItemProps } from './summary-grid-item.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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  underlinePopoverSize: { default: 'fit-content' },\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-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-amount\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\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 { BentoSummaryGridItemEvents, SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemAmountProps } from './summary-grid-item-amount.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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  underlinePopoverSize: { default: 'fit-content' },\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-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-numeric\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\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 { BentoSummaryGridItemEvents, SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemNumericProps } from './summary-grid-item-numeric.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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  underlinePopoverSize: { default: 'fit-content' },\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-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-percentage\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ computedLabelPercentage }}\n        <template v-if=\"secondaryMetric\" #secondary> {{ computedSecondaryMetricPercentage }} </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { BentoSummaryGridItemEvents, SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import type { BentoSummaryGridItemPercentageProps } from './summary-grid-item-percentage.types';\n    import type { NumberFormatOptions } from 'vue-i18n';\n\n    const { locale } = useI18n();\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const percentageArgs: NumberFormatOptions = {\n        style: 'percent',\n        maximumFractionDigits: 2,\n    };\n\n    const isNumeric = (value: string | number) => value != null && value !== '' && !isNaN(Number(value));\n    const convertToPercentIfNumber = (value: string | number) => {\n        if (value && isNumeric(value)) {\n            return new Intl.NumberFormat(locale.value, percentageArgs).format(Number(value) / 100);\n        }\n        return value;\n    };\n\n    const computedLabelPercentage = computed(() => convertToPercentIfNumber(props.label));\n    const computedSecondaryMetricPercentage = computed(() => convertToPercentIfNumber(props.secondaryMetric));\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        i18n: {},\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        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-text\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\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 { BentoSummaryGridItemEvents, SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n\n    import type { BentoSummaryGridItemTextProps } from './summary-grid-item-text.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  label: null,\n  title: null,\n  underlinePopoverSize: { default: 'fit-content' },\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-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\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 { BentoSummaryGridItemEvents, SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemCustomProps } from './summary-grid-item-custom.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  infoIconTooltipText: { default: null },\n  title: null,\n  fitContent: { type: Boolean, default: false },\n  underlinePopoverSize: { default: 'fit-content' },\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","locale","useI18n","percentageArgs","isNumeric","value","convertToPercentIfNumber","computedLabelPercentage","computedSecondaryMetricPercentage","__default__$1","__default__","BentoSummaryGridItemSize","BentoSummaryGridItemSize2","BentoSummaryGridItemTrendDirection","BentoSummaryGridItemTrendDirection2"],"mappings":";;;;;;;;;;;;AAgGI,MAAAA,IAAA,CAAA;;;;;;;;;iBAnDAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;AAEA,QAAAI,IAAA;AACA,QAAAJ,GAAA;AACI,YAAAK,KAAAC,KAAAC,IAAA,OAAA,KAAAP,CAAA,MAAA,gBAAAO,EAAA,OAAA,CAAAC,MAAAA,EAAA,SAAA,OAAA,OAAA,gBAAAF,EAAA,IAAA,CAAAE,MAAA;;AAAA,yBAAAD,IAAAC,EAAA,MAAA,GAAA,MAAA,gBAAAD,EAAA,IAAA,EAAA;AAAA;AAGA,MAAAH,IAAA,KAAA,IAAA,GAAAC,CAAA;AAAA,IAAmC;AAGvC,IAAAI,EAAA,MAAA;AACI,UAAAL,IAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;AAGJ,UAAAM,IAAA,OAEI,EAAA,wBAAA;AAGJ,WAAAC,EAAAC,GAAAF,CAAA,GACAC,EAAAE,GAAAC,EAAAC,GAAA,aAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBCyFAC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;iBA7DA,EAAA,gBAAAC,GAAA,yBAAAC,GAAA,UAAAC,GAAA,MAAAC,EAAA,IAAAC,EAAAN,CAAA,GACAO,IAAAC,EAAAV,GAAAW,EAAA,EAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;AACI,cAAAA,GAAA;AAAA,QAAmB,KAAA;AAEX,iBAAA;AAAA,QAAO,KAAA;AAEP,iBAAA;AAAA,QAAO;AAEP,iBAAA;AAAA,MAAO;AAAA,IACf,GAIJC,IAAAC,EAAA,MAAAH,EAAAR,EAAA,KAAA,CAAA,GACAY,IAAAD,EAAA,MAAAH,EAAAP,EAAA,KAAA,CAAA,GAEAY,IAAAF,EAAA,MACIR,EAAA,UAAA,UACI,SAEJD,EAAA,UAAA,SACI,UAGJ,IAAO,GAGXY,IAAAH,EAAA,OAAA;AAAA,MAAwC,QAAAR,EAAA,UAAA;AAAA,MACb,WAAAA,EAAA,UAAA;AAAA,MACG,MAAAA,EAAA,UAAA;AAAA,MACL,SAAAU,EAAA;AAAA,IACa,EAAA,GAGtCE,IAAAJ,EAAA,MAAAb,EAAA,aAAA,EAAA,OAAA,cAAA,IAAA,CAAA,CAAA,GAEAkB,IAAAL,EAAA,OAAA,EAAA,qCAAAN,EAAA,MAAA,EAAA,GAEAtB,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GACAkC,IAAAN,EAAA,MAAAb,EAAA,wBAAAb,EAAA,kBAAA,CAAA;;;;;;;;;;;;;;;;;;;;;qBC1DAiC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;AA1BA,UAAAnC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;;sBCoBAoC,KAAA,CAAA;;;;;;;;;;;;;;;;;;;;AAzBA,UAAApC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;;uBC0CAqC,KAAA;AAAA,EAAe,MAAA,CAAA;AAEf;;;;;;;;;;;;;;;;;;;;iBA/DA,EAAA,QAAAC,EAAA,IAAAC,EAAA,GAoBAvC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAwC,IAAA;AAAA,MAA4C,OAAA;AAAA,MACjC,uBAAA;AAAA,IACgB,GAG3BC,IAAA,CAAAC,MAAAA,KAAA,QAAAA,MAAA,MAAA,CAAA,MAAA,OAAAA,CAAA,CAAA,GACAC,IAAA,CAAAD,MACIA,KAAAD,EAAAC,CAAA,IACI,IAAA,KAAA,aAAAJ,EAAA,OAAAE,CAAA,EAAA,OAAA,OAAAE,CAAA,IAAA,GAAA,IAEJA,GAGJE,IAAAhB,EAAA,MAAAe,EAAA5B,EAAA,KAAA,CAAA,GACA8B,IAAAjB,EAAA,MAAAe,EAAA5B,EAAA,eAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;uBCVA+B,KAAA,CAAA;;;;;;;;;;;;;;AAtBA,UAAA9C,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;uBCeA+C,KAAA,CAAA;;;;;;;;;;;;;AApBA,UAAA/C,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;AC/BQ,IAAAgD,KAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,QAAA,SAHQA,IAAAD,MAAA,CAAA,CAAA,GASAE,KAAA,kBAAAC,OACRA,EAAA,WAAA,YACAA,EAAA,WAAA,YACAA,EAAA,UAAA,WAHQA,IAAAD,MAAA,CAAA,CAAA;"}