@adyen/bento-vue3 1.27.0 → 1.28.0

package/dist/country.js

@@ -1,104 +1,11 @@
-import { defineComponent as _, toRefs as v, ref as f, watch as C, inject as b, resolveComponent as h, openBlock as u, createElementBlock as l, createElementVNode as B, toDisplayString as i, createBlock as N, withCtx as S, createTextVNode as g } from "vue";
-import { B as L, d as O } from "./chunks/index.ee15db35.js";
-import { c as p, B as o, u as E, a as I, b as $ } from "./chunks/country.types.002caff2.js";
-import { u as T } from "./chunks/i18n.f7e6533e.js";
-import { S as A } from "./chunks/summary-grid.keys.1d1028c2.js";
-import { _ as M } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index19.css";
-const U = _({
-  name: "bento-country",
-  components: { BentoTypography: L },
-  props: {
-    /**
-     * Two character country code ([ISO 3166-1 alpha-2 format](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)).
-     */
-    code: {
-      type: String,
-      default: p.UNKNOWN,
-      validator: (e) => Object.values(p).includes(e.toUpperCase())
-    },
-    /**
-     * Custom label text.
-     */
-    label: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Which label variant to display.
-     * @values iso, name, phone_code, capital
-     */
-    variant: {
-      type: String,
-      default: o.NAME,
-      validator: (e) => Object.values(o).includes(e)
-    }
-  },
-  setup(e) {
-    const { code: t, variant: a, label: c } = v(e), { locale: n } = T(void 0, !0), r = E(t, n), s = f(""), y = () => {
-      switch (a.value) {
-        case o.ISO:
-          return t.value;
-        case o.PHONE_CODE:
-          return `${t.value} (${$(t).value})`;
-        case o.CAPITAL:
-          return `${I(t, n).value} (${r.value})`;
-        case o.CUSTOM:
-          return c.value;
-        case o.NAME:
-        default:
-          return r.value;
-      }
-    };
-    C(
-      [a, n, t],
-      () => {
-        s.value = y();
-      },
-      { immediate: !0 }
-    ), (a.value === "custom" || e.label) && O(
-      'BentoCountry "custom" variant and "label" prop',
-      "Use any of the other BentoCountry variants instead OR BentoTypography component for custom text",
-      "2.0.0"
-    );
-    const d = b(
-      A,
-      () => ({
-        isSummaryGridLayout: !1
-      })
-    ), { isSummaryGridLayout: m } = d();
-    return {
-      // Values
-      countryName: r,
-      countryLabel: s,
-      isSummaryGridLayout: m
-    };
-  }
-});
-const k = { class: "b-country" }, G = { class: "b-country__label" }, x = { key: 0 };
-function P(e, t, a, c, n, r) {
-  const s = h("bento-typography");
-  return u(), l("div", k, [
-    B("div", G, [
-      e.isSummaryGridLayout ? (u(), l("span", x, i(e.countryLabel), 1)) : (u(), N(s, {
-        key: 1,
-        el: "span"
-      }, {
-        default: S(() => [
-          g(i(e.countryLabel), 1)
-        ]),
-        _: 1
-      }))
-    ])
-  ]);
-}
-const K = /* @__PURE__ */ M(U, [["render", P], ["__scopeId", "data-v-1762e806"]]);
+import { c as a } from "./chunks/country.vX94O3uR.js";
+import { a as n, B as r, u, b as s, c as C } from "./chunks/country.types.Br0AjxGy.js";
 export {
-  K as BentoCountry,
-  p as BentoCountryCode,
-  o as BentoCountryVariant,
-  I as useCountryCapital,
-  E as useCountryName,
-  $ as useCountryPhoneCode
+  a as BentoCountry,
+  n as BentoCountryCode,
+  r as BentoCountryVariant,
+  u as useCountryCapital,
+  s as useCountryName,
+  C as useCountryPhoneCode
 };
 //# sourceMappingURL=country.js.map

package/dist/country.js.map

@@ -1 +1 @@
-{"version":3,"file":"country.js","sources":["../../vue2/src/components/country/country.vue"],"sourcesContent":["<template>\n    <div class=\"b-country\">\n        <div class=\"b-country__label\">\n            <span v-if=\"isSummaryGridLayout\">{{ countryLabel }}</span>\n            <bento-typography v-else el=\"span\">{{ countryLabel }}</bento-typography>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, inject, PropType, ref, toRefs, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryCapital, useCountryName, useCountryPhoneCode } from './composables';\n    import { BentoCountryCode, BentoCountryVariant } from './country.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { BentoSummaryGridLayout } from '@/components/summary-grid';\n    import { SUMMARY_GRID_LAYOUT_INJECTION_KEY } from '@/components/summary-grid/summary-grid.keys';\n\n    /**\n     * A component to display a country's label.\n     * The label comes in four variates: iso code, country name, phone number code or capital city.\n     *\n     * @example\n     * import { BentoCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCountry },\n     *     template: `\n     *          <bento-country :code=\"BentoCountryCode.NL\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-country',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Two character country code ([ISO 3166-1 alpha-2 format](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)).\n             */\n            code: {\n                type: String as PropType<BentoCountryCode | `${BentoCountryCode}`>,\n                default: BentoCountryCode.UNKNOWN,\n                validator: (value: BentoCountryCode) =>\n                    Object.values(BentoCountryCode).includes(value.toUpperCase() as BentoCountryCode),\n            },\n\n            /**\n             * Custom label text.\n             */\n            label: {\n                type: String,\n                default: undefined,\n            },\n\n            /**\n             * Which label variant to display.\n             * @values iso, name, phone_code, capital\n             */\n            variant: {\n                type: String as PropType<BentoCountryVariant | `${BentoCountryVariant}`>,\n                default: BentoCountryVariant.NAME,\n                validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value),\n            },\n        },\n\n        setup(props) {\n            const { code, variant, label: customLabel } = toRefs(props);\n            const { locale } = useI18n(undefined, true);\n            const countryName = useCountryName(code, locale);\n            const countryLabel = ref('');\n\n            const getLabel = () => {\n                switch (variant.value) {\n                    case BentoCountryVariant.ISO:\n                        return code.value;\n                    case BentoCountryVariant.PHONE_CODE:\n                        return `${code.value} (${useCountryPhoneCode(code).value})`;\n                    case BentoCountryVariant.CAPITAL:\n                        // TODO: do we need an API OR get a longer translations list???\n                        // Need to be able TRANSLATE as well as map...\n                        return `${useCountryCapital(code, locale).value} (${countryName.value})`;\n                    case BentoCountryVariant.CUSTOM:\n                        return customLabel.value;\n                    case BentoCountryVariant.NAME:\n                    default:\n                        return countryName.value;\n                }\n            };\n\n            // Update label if variant prop changes\n            watch(\n                [variant, locale, code],\n                () => {\n                    countryLabel.value = getLabel();\n                },\n                { immediate: true }\n            );\n\n            if (variant.value === 'custom' || props.label) {\n                deprecate(\n                    'BentoCountry \"custom\" variant and \"label\" prop',\n                    'Use any of the other BentoCountry variants instead OR BentoTypography component for custom text',\n                    '2.0.0'\n                );\n            }\n\n            /* == Summary-grid styles == */\n            const registerPaymentMethodInSummaryGrid: BentoSummaryGridLayout = inject(\n                SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n                () => ({\n                    isSummaryGridLayout: false,\n                })\n            );\n\n            const { isSummaryGridLayout } = registerPaymentMethodInSummaryGrid();\n\n            return {\n                // Values\n                countryName,\n                countryLabel,\n                isSummaryGridLayout,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./country.scss\" />\n"],"names":["_sfc_main","defineComponent","BentoTypography","BentoCountryCode","value","BentoCountryVariant","props","code","variant","customLabel","toRefs","locale","useI18n","countryName","useCountryName","countryLabel","ref","getLabel","useCountryPhoneCode","useCountryCapital","watch","deprecate","registerPaymentMethodInSummaryGrid","inject","SUMMARY_GRID_LAYOUT_INJECTION_KEY","isSummaryGridLayout","createElementVNode","_hoisted_2","_ctx","openBlock","createElementBlock","_hoisted_3","toDisplayString","createBlock","_component_bento_typography"],"mappings":";;;;;;;AAiCI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACwB,OAAA;AAAA;AAAA;AAAA;AAAA,IACvB,MAAA;AAAA,MAIG,MAAA;AAAA,MACI,SAAAC,EAAA;AAAA,MACoB,WAAA,CAAAC,MAAA,OAAA,OAAAD,CAAA,EAAA,SAAAC,EAAA,YAAA,CAAA;AAAA,IAE0D;AAAA;AAAA;AAAA;AAAA,IACxF,OAAA;AAAA,MAKO,MAAA;AAAA,MACG,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,SAAA;AAAA,MAMS,MAAA;AAAA,MACC,SAAAC,EAAA;AAAA,MACuB,WAAA,CAAAD,MAAA,OAAA,OAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IAC+D;AAAA,EAChG;AAAA,EACJ,MAAAE,GAAA;AAGI,UAAA,EAAA,MAAAC,GAAA,SAAAC,GAAA,OAAAC,EAAA,IAAAC,EAAAJ,CAAA,GACA,EAAA,QAAAK,EAAA,IAAAC,EAAA,QAAA,EAAA,GACAC,IAAAC,EAAAP,GAAAI,CAAA,GACAI,IAAAC,EAAA,EAAA,GAEAC,IAAA,MAAA;AACI,cAAAT,EAAA,OAAA;AAAA,QAAuB,KAAAH,EAAA;AAEf,iBAAAE,EAAA;AAAA,QAAY,KAAAF,EAAA;AAEZ,iBAAA,GAAAE,EAAA,UAAAW,EAAAX,CAAA,EAAA;AAAA,QAAmD,KAAAF,EAAA;AAInD,iBAAA,GAAAc,EAAAZ,GAAAI,CAAA,EAAA,UAAAE,EAAA;AAAA,QAAgE,KAAAR,EAAA;AAEhE,iBAAAI,EAAA;AAAA,QAAmB,KAAAJ,EAAA;AAAA,QACE;AAErB,iBAAAQ,EAAA;AAAA,MAAmB;AAAA,IAC3B;AAIJ,IAAAO;AAAA,MAAA,CAAAZ,GAAAG,GAAAJ,CAAA;AAAA,MAC0B,MAAA;AAElB,QAAAQ,EAAA,QAAAE,EAAA;AAAA,MAA8B;AAAA,MAClC,EAAA,WAAA,GAAA;AAAA,IACkB,IAGtBT,EAAA,UAAA,YAAAF,EAAA,UACIe;AAAA,MAAA;AAAA,MACI;AAAA,MACA;AAAA,IACA;AAKR,UAAAC,IAAAC;AAAA,MAAmEC;AAAA,MAC/D,OAAA;AAAA,QACO,qBAAA;AAAA,MACkB;AAAA,IACzB,GAGJ,EAAA,qBAAAC,EAAA,IAAAH,EAAA;AAEA,WAAA;AAAA;AAAA,MAAO,aAAAT;AAAA,MAEH,cAAAE;AAAA,MACA,qBAAAU;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;;;;IAzHuCC,EAAA,OAAAC,GAAA;AAAA,MAA/BC,EAAA,uBAAAC,EAAA,GAAAC,EAAA,QAAAC,GAAAC,EAAAJ,EAAA,YAAA,GAAA,CAAA,MAAAC,EAAA,GAAAI,EAAAC,GAAA;AAAA,QACkC,KAAA;AAAA;;;;;;;;;;;"}
+{"version":3,"file":"country.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/currency.js

@@ -1,121 +1,6 @@
-import { defineComponent as i, computed as U, resolveComponent as f, openBlock as T, createElementBlock as s, createBlock as p, withCtx as H, createTextVNode as l, toDisplayString as N, Fragment as Y } from "vue";
-import { B as Z } from "./chunks/index.ee15db35.js";
-import { g as W } from "./chunks/get-slot-text.bead058f.js";
-import { _ as V } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-const g = [
-  {
-    exponent: 0,
-    currencies: [
-      "CVE",
-      "DJF",
-      "GNF",
-      "IDR",
-      "JPY",
-      "KMF",
-      "KRW",
-      "PYG",
-      "RWF",
-      "UGX",
-      "VND",
-      "VUV",
-      "XAF",
-      "XOF",
-      "XPF"
-    ]
-  },
-  {
-    exponent: 1,
-    currencies: ["MRO"]
-  },
-  {
-    exponent: 3,
-    currencies: ["BHD", "IQD", "JOD", "KWD", "LYD", "OMR", "TND"]
-  }
-], F = (D) => {
-  var a;
-  return ((a = g.find((R) => R.currencies.includes(D))) == null ? void 0 : a.exponent) ?? 2;
-}, X = (D) => {
-  const a = F(D.currency), R = Number(D.value);
-  return Math.round(R * 10 ** a);
-}, v = (D, a) => (
-  // Amount is in minor units and have to be converted to number with fraction digits
-  // return (amount.value * 100) / 10 ** exp;
-  D.value / 10 ** a
-);
-function J(D, a = {}, R = !1) {
-  const K = (a == null ? void 0 : a.exponent) ?? F(D.currency), M = R ? X(D) : D.value, P = { ...D, value: M }, L = v(P, K), m = L < 0 ? "decimal" : (a == null ? void 0 : a.style) || "currency", G = a != null && a.optionalFractions ? 0 : K, E = a != null && a.highPrecision ? 10 : K;
-  return {
-    value: L,
-    format: {
-      style: m,
-      currency: D.currency,
-      currencyDisplay: "symbol",
-      minimumFractionDigits: G,
-      maximumFractionDigits: E
-    }
-  };
-}
-const b = (D, a, R) => {
-  const K = { value: parseFloat(D), currency: a }, M = J(K, { style: "decimal" }, R);
-  return new Intl.NumberFormat("en-US", M.format).format(M.value);
-};
-var A = /* @__PURE__ */ ((D) => (D.AFA = "AFA", D.ALL = "ALL", D.DZD = "DZD", D.AOA = "AOA", D.ARS = "ARS", D.AMD = "AMD", D.AWG = "AWG", D.AUD = "AUD", D.AZN = "AZN", D.BSD = "BSD", D.BHD = "BHD", D.BDT = "BDT", D.BBD = "BBD", D.BYR = "BYR", D.BEF = "BEF", D.BZD = "BZD", D.BMD = "BMD", D.BTN = "BTN", D.BTC = "BTC", D.BOB = "BOB", D.BAM = "BAM", D.BWP = "BWP", D.BRL = "BRL", D.GBP = "GBP", D.BND = "BND", D.BGN = "BGN", D.BIF = "BIF", D.KHR = "KHR", D.CAD = "CAD", D.CVE = "CVE", D.KYD = "KYD", D.XOF = "XOF", D.XAF = "XAF", D.XPF = "XPF", D.CLP = "CLP", D.CLF = "CLF", D.CNY = "CNY", D.COP = "COP", D.KMF = "KMF", D.CDF = "CDF", D.CRC = "CRC", D.HRK = "HRK", D.CUC = "CUC", D.CZK = "CZK", D.DKK = "DKK", D.DJF = "DJF", D.DOP = "DOP", D.XCD = "XCD", D.EGP = "EGP", D.ERN = "ERN", D.EEK = "EEK", D.ETB = "ETB", D.EUR = "EUR", D.FKP = "FKP", D.FJD = "FJD", D.GMD = "GMD", D.GEL = "GEL", D.DEM = "DEM", D.GHS = "GHS", D.GIP = "GIP", D.GRD = "GRD", D.GTQ = "GTQ", D.GNF = "GNF", D.GYD = "GYD", D.HTG = "HTG", D.HNL = "HNL", D.HKD = "HKD", D.HUF = "HUF", D.ISK = "ISK", D.INR = "INR", D.IDR = "IDR", D.IRR = "IRR", D.IQD = "IQD", D.ILS = "ILS", D.ITL = "ITL", D.JMD = "JMD", D.JPY = "JPY", D.JOD = "JOD", D.KZT = "KZT", D.KES = "KES", D.KWD = "KWD", D.KGS = "KGS", D.LAK = "LAK", D.LVL = "LVL", D.LBP = "LBP", D.LSL = "LSL", D.LRD = "LRD", D.LYD = "LYD", D.LTC = "LTC", D.LTL = "LTL", D.MOP = "MOP", D.MKD = "MKD", D.MGA = "MGA", D.MWK = "MWK", D.MYR = "MYR", D.MVR = "MVR", D.MRO = "MRO", D.MUR = "MUR", D.MXN = "MXN", D.MDL = "MDL", D.MNT = "MNT", D.MAD = "MAD", D.MZM = "MZM", D.MMK = "MMK", D.NAD = "NAD", D.NPR = "NPR", D.ANG = "ANG", D.TWD = "TWD", D.NZD = "NZD", D.NIO = "NIO", D.NGN = "NGN", D.KPW = "KPW", D.NOK = "NOK", D.OMR = "OMR", D.PKR = "PKR", D.PAB = "PAB", D.PGK = "PGK", D.PYG = "PYG", D.PEN = "PEN", D.PHP = "PHP", D.PLN = "PLN", D.QAR = "QAR", D.RON = "RON", D.RUB = "RUB", D.RWF = "RWF", D.SVC = "SVC", D.WST = "WST", D.STD = "STD", D.SAR = "SAR", D.RSD = "RSD", D.SCR = "SCR", D.SLL = "SLL", D.SGD = "SGD", D.SKK = "SKK", D.SBD = "SBD", D.SOS = "SOS", D.ZAR = "ZAR", D.KRW = "KRW", D.SSP = "SSP", D.XDR = "XDR", D.LKR = "LKR", D.SHP = "SHP", D.SDG = "SDG", D.SRD = "SRD", D.SZL = "SZL", D.SEK = "SEK", D.CHF = "CHF", D.SYP = "SYP", D.TJS = "TJS", D.TZS = "TZS", D.THB = "THB", D.TOP = "TOP", D.TTD = "TTD", D.TND = "TND", D.TRY = "TRY", D.TMT = "TMT", D.UGX = "UGX", D.UAH = "UAH", D.AED = "AED", D.UYU = "UYU", D.USD = "USD", D.UZS = "UZS", D.VUV = "VUV", D.VEF = "VEF", D.VND = "VND", D.YER = "YER", D.ZMK = "ZMK", D.ZWL = "ZWL", D))(A || {});
-const _ = i({
-  name: "bento-currency",
-  components: { BentoTypography: Z },
-  props: {
-    currency: {
-      type: String,
-      default: A.EUR,
-      validator: (D) => Object.values(A).includes(D)
-    },
-    /**
-     * Accepts currency value in major units instead of minor ones
-     */
-    majorUnits: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Disable the default typography for the component. Only use this when the component is inside another typography component.
-     */
-    disableTypography: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  setup(D, { slots: a }) {
-    return {
-      // Values
-      formattedCurrency: U(() => {
-        const K = a.default ? W(a)("default") : null;
-        return b(K, D.currency, D.majorUnits);
-      })
-    };
-  }
-}), h = { class: "b-currency" };
-function x(D, a, R, K, M, P) {
-  const L = f("bento-typography");
-  return T(), s("div", h, [
-    D.disableTypography ? (T(), s(Y, { key: 1 }, [
-      l(N(D.formattedCurrency) + " " + N(D.currency), 1)
-    ], 64)) : (T(), p(L, {
-      key: 0,
-      class: "b-currency__amount",
-      el: "span",
-      variant: "body",
-      strong: ""
-    }, {
-      default: H(() => [
-        l(N(D.formattedCurrency) + " " + N(D.currency), 1)
-      ]),
-      _: 1
-    }))
-  ]);
-}
-const w = /* @__PURE__ */ V(_, [["render", x]]);
+import { c as o, B as n } from "./chunks/currency.CgVd9fQN.js";
 export {
-  w as BentoCurrency,
-  A as BentoCurrencyISOCode
+  o as BentoCurrency,
+  n as BentoCurrencyISOCode
 };
 //# sourceMappingURL=currency.js.map

package/dist/currency.js.map

@@ -1 +1 @@
-{"version":3,"file":"currency.js","sources":["../../vue2/src/utils/ts/currency/countries-list.ts","../../vue2/src/utils/ts/currency/currency.ts","../../vue2/src/components/currency/currency.types.ts","../../vue2/src/components/currency/currency.vue"],"sourcesContent":["/**\n * Contains mapping configuration between currency code and exponent for amount in the corresponding currency.\n * Since the majority of the currencies have an exponent equal to 2, they are not listed here.\n * https://docs.adyen.com/development-resources/currency-codes\n * @type {Array}\n * @internal\n */\nexport const currencyExponentMap = [\n    {\n        exponent: 0,\n        currencies: [\n            'CVE',\n            'DJF',\n            'GNF',\n            'IDR',\n            'JPY',\n            'KMF',\n            'KRW',\n            'PYG',\n            'RWF',\n            'UGX',\n            'VND',\n            'VUV',\n            'XAF',\n            'XOF',\n            'XPF',\n        ],\n    },\n    {\n        exponent: 1,\n        currencies: ['MRO'],\n    },\n    {\n        exponent: 3,\n        currencies: ['BHD', 'IQD', 'JOD', 'KWD', 'LYD', 'OMR', 'TND'],\n    },\n];\n","import { CurrencyAmount, CurrencyOptions, NumberFormatOptionsResult } from './currency.types';\nimport { currencyExponentMap } from './countries-list';\n\n/**\n * Returns exponent for specified currency code.\n */\nexport const getExponent = (currencyCode: string): number =>\n    currencyExponentMap.find(obj => obj.currencies.includes(currencyCode))?.exponent ?? 2;\n\n/**\n * Converts passed amount from regular to minor units, based on currency exponent\n */\nexport const getMinorUnitsAmount = (amount: CurrencyAmount): number => {\n    const exponent = getExponent(amount.currency);\n    const value = Number(amount.value);\n\n    return Math.round(value * 10 ** exponent);\n};\n\n/**\n * Returns normalized amount value from minor units as decimal point number (when exponent is more than zero).\n */\nexport const getNormalizedAmount = (amount: CurrencyAmount, exponent: number) =>\n    // Amount is in minor units and have to be converted to number with fraction digits\n    // return (amount.value * 100) / 10 ** exp;\n    amount.value / 10 ** exponent;\n\n/**\n * /**\n * Prepares amount to be rendered by Intl.NumberFormat function.\n * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat\n *\n * It enables language-sensitive number formatting.\n * Adds currency symbol and ISO code based on provided options\n * The result of execution - is a configuration object that is used in 'getLocalizedCurrencyValue' function\n *\n * @param amount - the value and currency to format.\n * @param options - the formatting options that are passed to the Intl.NumberFormat function.\n * @param majorUnits - if set to true, then currency major units will be used instead of minor ones\n */\nexport function getNumberFormatOptions(\n    amount: CurrencyAmount,\n    options: CurrencyOptions = {},\n    majorUnits = false\n): NumberFormatOptionsResult {\n    // Exponent is based on currency, if not specified explicitly.\n    const exp = options?.exponent ?? getExponent(amount.currency);\n    // Minor Units have to be retrieved from component passed amount\n    const minorAmount = majorUnits ? getMinorUnitsAmount(amount) : amount.value;\n    const amountInMinorUnits: CurrencyAmount = { ...amount, value: minorAmount };\n    // Amount is in minor units and have to be converted to number with fraction digits\n    const value = getNormalizedAmount(amountInMinorUnits, exp);\n    // This is the requirement for currency component - to remove currency symbol for negative values\n    const style = value < 0 ? 'decimal' : options?.style || 'currency';\n    // If optionalFractions is true, numbers will not contain fraction digits when they are zero (e.g. 100.00 will be 100)\n    const minimumFractionDigits = options?.optionalFractions ? 0 : exp;\n    // If highPrecision is true, numbers can contain 10 fraction digits (highest precision in Adyen is about 5)\n    const maximumFractionDigits = options?.highPrecision ? 10 : exp;\n\n    return {\n        value,\n        format: {\n            style,\n            currency: amount.currency,\n            currencyDisplay: 'symbol',\n            minimumFractionDigits,\n            maximumFractionDigits,\n        },\n    };\n}\n\n/**\n * Get a formatted and localised currency string given an amount and currency type.\n *\n * @param amountValue - the amount of the currency.\n * @param currency - the ISO 4217 currency code.\n * @param majorUnits - if set to true, then currency major units will be used instead of minor ones\n */\nexport const getLocalizedCurrencyValue = (amountValue: string, currency: string, majorUnits?: boolean): string => {\n    const amount: CurrencyAmount = { value: parseFloat(amountValue), currency };\n    const numberFormatOptions = getNumberFormatOptions(amount, { style: 'decimal' }, majorUnits);\n    // TODO replace hardcoded locale with dynamic one, when i18n strategy is defined\n    const formatter = new Intl.NumberFormat('en-US', numberFormatOptions.format);\n\n    return formatter.format(numberFormatOptions.value);\n};\n","export enum BentoCurrencyISOCode {\n    AFA = 'AFA',\n    ALL = 'ALL',\n    DZD = 'DZD',\n    AOA = 'AOA',\n    ARS = 'ARS',\n    AMD = 'AMD',\n    AWG = 'AWG',\n    AUD = 'AUD',\n    AZN = 'AZN',\n    BSD = 'BSD',\n    BHD = 'BHD',\n    BDT = 'BDT',\n    BBD = 'BBD',\n    BYR = 'BYR',\n    BEF = 'BEF',\n    BZD = 'BZD',\n    BMD = 'BMD',\n    BTN = 'BTN',\n    BTC = 'BTC',\n    BOB = 'BOB',\n    BAM = 'BAM',\n    BWP = 'BWP',\n    BRL = 'BRL',\n    GBP = 'GBP',\n    BND = 'BND',\n    BGN = 'BGN',\n    BIF = 'BIF',\n    KHR = 'KHR',\n    CAD = 'CAD',\n    CVE = 'CVE',\n    KYD = 'KYD',\n    XOF = 'XOF',\n    XAF = 'XAF',\n    XPF = 'XPF',\n    CLP = 'CLP',\n    CLF = 'CLF',\n    CNY = 'CNY',\n    COP = 'COP',\n    KMF = 'KMF',\n    CDF = 'CDF',\n    CRC = 'CRC',\n    HRK = 'HRK',\n    CUC = 'CUC',\n    CZK = 'CZK',\n    DKK = 'DKK',\n    DJF = 'DJF',\n    DOP = 'DOP',\n    XCD = 'XCD',\n    EGP = 'EGP',\n    ERN = 'ERN',\n    EEK = 'EEK',\n    ETB = 'ETB',\n    EUR = 'EUR',\n    FKP = 'FKP',\n    FJD = 'FJD',\n    GMD = 'GMD',\n    GEL = 'GEL',\n    DEM = 'DEM',\n    GHS = 'GHS',\n    GIP = 'GIP',\n    GRD = 'GRD',\n    GTQ = 'GTQ',\n    GNF = 'GNF',\n    GYD = 'GYD',\n    HTG = 'HTG',\n    HNL = 'HNL',\n    HKD = 'HKD',\n    HUF = 'HUF',\n    ISK = 'ISK',\n    INR = 'INR',\n    IDR = 'IDR',\n    IRR = 'IRR',\n    IQD = 'IQD',\n    ILS = 'ILS',\n    ITL = 'ITL',\n    JMD = 'JMD',\n    JPY = 'JPY',\n    JOD = 'JOD',\n    KZT = 'KZT',\n    KES = 'KES',\n    KWD = 'KWD',\n    KGS = 'KGS',\n    LAK = 'LAK',\n    LVL = 'LVL',\n    LBP = 'LBP',\n    LSL = 'LSL',\n    LRD = 'LRD',\n    LYD = 'LYD',\n    LTC = 'LTC',\n    LTL = 'LTL',\n    MOP = 'MOP',\n    MKD = 'MKD',\n    MGA = 'MGA',\n    MWK = 'MWK',\n    MYR = 'MYR',\n    MVR = 'MVR',\n    MRO = 'MRO',\n    MUR = 'MUR',\n    MXN = 'MXN',\n    MDL = 'MDL',\n    MNT = 'MNT',\n    MAD = 'MAD',\n    MZM = 'MZM',\n    MMK = 'MMK',\n    NAD = 'NAD',\n    NPR = 'NPR',\n    ANG = 'ANG',\n    TWD = 'TWD',\n    NZD = 'NZD',\n    NIO = 'NIO',\n    NGN = 'NGN',\n    KPW = 'KPW',\n    NOK = 'NOK',\n    OMR = 'OMR',\n    PKR = 'PKR',\n    PAB = 'PAB',\n    PGK = 'PGK',\n    PYG = 'PYG',\n    PEN = 'PEN',\n    PHP = 'PHP',\n    PLN = 'PLN',\n    QAR = 'QAR',\n    RON = 'RON',\n    RUB = 'RUB',\n    RWF = 'RWF',\n    SVC = 'SVC',\n    WST = 'WST',\n    STD = 'STD',\n    SAR = 'SAR',\n    RSD = 'RSD',\n    SCR = 'SCR',\n    SLL = 'SLL',\n    SGD = 'SGD',\n    SKK = 'SKK',\n    SBD = 'SBD',\n    SOS = 'SOS',\n    ZAR = 'ZAR',\n    KRW = 'KRW',\n    SSP = 'SSP',\n    XDR = 'XDR',\n    LKR = 'LKR',\n    SHP = 'SHP',\n    SDG = 'SDG',\n    SRD = 'SRD',\n    SZL = 'SZL',\n    SEK = 'SEK',\n    CHF = 'CHF',\n    SYP = 'SYP',\n    TJS = 'TJS',\n    TZS = 'TZS',\n    THB = 'THB',\n    TOP = 'TOP',\n    TTD = 'TTD',\n    TND = 'TND',\n    TRY = 'TRY',\n    TMT = 'TMT',\n    UGX = 'UGX',\n    UAH = 'UAH',\n    AED = 'AED',\n    UYU = 'UYU',\n    USD = 'USD',\n    UZS = 'UZS',\n    VUV = 'VUV',\n    VEF = 'VEF',\n    VND = 'VND',\n    YER = 'YER',\n    ZMK = 'ZMK',\n    ZWL = 'ZWL',\n}\n","<template>\n    <div class=\"b-currency\">\n        <bento-typography v-if=\"!disableTypography\" class=\"b-currency__amount\" el=\"span\" variant=\"body\" strong>\n            {{ formattedCurrency }} {{ currency }}\n        </bento-typography>\n        <template v-else>{{ formattedCurrency }} {{ currency }}</template>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { getLocalizedCurrencyValue } from '@/utils/ts/currency/currency';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoCurrencyISOCode } from '@/components/currency/currency.types';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    /**\n     * A Currency component is used to display a formatted currency value.\n     *\n     * @example\n     * import { BentoCurrency } from '@adyen/adl-vue-components';\n     * import { BentoCurrency, BentoCurrencyCode } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCurrency },\n     *     template: `\n     *          <bento-currency :currency=\"CurrencyCode.USD\">\n     *              76.33\n     *          </bento-currency>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-currency',\n        components: { BentoTypography },\n        props: {\n            currency: {\n                type: String as PropType<BentoCurrencyISOCode | `${BentoCurrencyISOCode}`>,\n                default: BentoCurrencyISOCode.EUR,\n                validator: (value: BentoCurrencyISOCode) => Object.values(BentoCurrencyISOCode).includes(value),\n            },\n            /**\n             * Accepts currency value in major units instead of minor ones\n             */\n            majorUnits: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Disable the default typography for the component. Only use this when the component is inside another typography component.\n             */\n            disableTypography: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props, { slots }) {\n            const formattedCurrency = computed((): string => {\n                const value = slots.default ? getSlotText(slots)('default') : null;\n                return getLocalizedCurrencyValue(value, props.currency, props.majorUnits);\n            });\n\n            return {\n                // Values\n                formattedCurrency,\n            };\n        },\n    });\n</script>\n"],"names":["currencyExponentMap","getExponent","currencyCode","_a","obj","getMinorUnitsAmount","amount","exponent","value","getNormalizedAmount","getNumberFormatOptions","options","majorUnits","exp","minorAmount","amountInMinorUnits","style","minimumFractionDigits","maximumFractionDigits","getLocalizedCurrencyValue","amountValue","currency","numberFormatOptions","BentoCurrencyISOCode","_sfc_main","defineComponent","BentoTypography","props","slots","computed","getSlotText","_resolveComponent","_createElementBlock","_hoisted_1","_ctx","_openBlock","_createBlock","_component_bento_typography"],"mappings":";;;;AAOO,MAAMA,IAAsB;AAAA,EAC/B;AAAA,IACI,UAAU;AAAA,IACV,YAAY;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AAAA,EACA;AAAA,IACI,UAAU;AAAA,IACV,YAAY,CAAC,KAAK;AAAA,EACtB;AAAA,EACA;AAAA,IACI,UAAU;AAAA,IACV,YAAY,CAAC,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;AAAA,EAChE;AACJ,GC9BaC,IAAc,CAACC,MACxB;;AAAA,WAAAC,IAAAH,EAAoB,KAAK,CAAAI,MAAOA,EAAI,WAAW,SAASF,CAAY,CAAC,MAArE,gBAAAC,EAAwE,aAAY;AAAA,GAK3EE,IAAsB,CAACC,MAAmC;AAC7D,QAAAC,IAAWN,EAAYK,EAAO,QAAQ,GACtCE,IAAQ,OAAOF,EAAO,KAAK;AAEjC,SAAO,KAAK,MAAME,IAAQ,MAAMD,CAAQ;AAC5C,GAKaE,IAAsB,CAACH,GAAwBC;AAAA;AAAA;AAAA,EAGxDD,EAAO,QAAQ,MAAMC;AAAA;AAelB,SAASG,EACZJ,GACAK,IAA2B,CAAA,GAC3BC,IAAa,IACY;AAEzB,QAAMC,KAAMF,KAAA,gBAAAA,EAAS,aAAYV,EAAYK,EAAO,QAAQ,GAEtDQ,IAAcF,IAAaP,EAAoBC,CAAM,IAAIA,EAAO,OAChES,IAAqC,EAAE,GAAGT,GAAQ,OAAOQ,EAAY,GAErEN,IAAQC,EAAoBM,GAAoBF,CAAG,GAEnDG,IAAQR,IAAQ,IAAI,aAAYG,KAAA,gBAAAA,EAAS,UAAS,YAElDM,IAAwBN,KAAA,QAAAA,EAAS,oBAAoB,IAAIE,GAEzDK,IAAwBP,KAAA,QAAAA,EAAS,gBAAgB,KAAKE;AAErD,SAAA;AAAA,IACH,OAAAL;AAAA,IACA,QAAQ;AAAA,MACJ,OAAAQ;AAAA,MACA,UAAUV,EAAO;AAAA,MACjB,iBAAiB;AAAA,MACjB,uBAAAW;AAAA,MACA,uBAAAC;AAAA,IACJ;AAAA,EAAA;AAER;AASO,MAAMC,IAA4B,CAACC,GAAqBC,GAAkBT,MAAiC;AAC9G,QAAMN,IAAyB,EAAE,OAAO,WAAWc,CAAW,GAAG,UAAAC,KAC3DC,IAAsBZ,EAAuBJ,GAAQ,EAAE,OAAO,UAAA,GAAaM,CAAU;AAIpF,SAFW,IAAI,KAAK,aAAa,SAASU,EAAoB,MAAM,EAE1D,OAAOA,EAAoB,KAAK;AACrD;ACrFY,IAAAC,sBAAAA,OACRA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,MAAM,OAxKEA,IAAAA,KAAA,CAAA,CAAA;ACgCR,MAAAC,IAAeC,EAAgB;AAAA,EAC3B,MAAM;AAAA,EACN,YAAY,EAAE,iBAAAC,EAAgB;AAAA,EAC9B,OAAO;AAAA,IACH,UAAU;AAAA,MACN,MAAM;AAAA,MACN,SAASH,EAAqB;AAAA,MAC9B,WAAW,CAACf,MAAgC,OAAO,OAAOe,CAAoB,EAAE,SAASf,CAAK;AAAA,IAClG;AAAA;AAAA;AAAA;AAAA,IAIA,YAAY;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACb;AAAA;AAAA;AAAA;AAAA,IAIA,mBAAmB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACb;AAAA,EACJ;AAAA,EACA,MAAMmB,GAAO,EAAE,OAAAC,KAAS;AAMb,WAAA;AAAA;AAAA,MAEH,mBAPsBC,EAAS,MAAc;AAC7C,cAAMrB,IAAQoB,EAAM,UAAUE,EAAYF,CAAK,EAAE,SAAS,IAAI;AAC9D,eAAOT,EAA0BX,GAAOmB,EAAM,UAAUA,EAAM,UAAU;AAAA,MAAA,CAC3E;AAAA,IAIG;AAAA,EAER;AACJ,CAAC;;YAlEDI,EAKM,kBAAA;cAJFC,EAEmB,OAAAC,GAAA;AAAA,IAAAC,EAAA;;eAAAC,EAAA,GAFmDC,EAAAC,GAAA;AAAA,MAAC,KAAG;AAAA,MAAO,OAAO;AAAA,MAAQ,IAAA;AAAA,MAAA,SAAA;AAAA;;;;;;;;;;"}
+{"version":3,"file":"currency.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/dashboard-template.js

@@ -1,169 +1,6 @@
-import { defineComponent as F, useSlots as R, ref as u, computed as d, watch as w, onUnmounted as O, openBlock as a, createElementBlock as i, createVNode as B, unref as t, mergeProps as H, createSlots as P, withCtx as f, renderSlot as l, createElementVNode as v, normalizeClass as p, createCommentVNode as W, createBlock as I, Fragment as U, renderList as q, onMounted as A } from "vue";
-import { BentoHeader as D } from "./header.js";
-import { BentoTabs as G, BentoTab as J } from "./tabs.js";
-import { a as K } from "./chunks/index.fedbb4c2.js";
-import { o as Q } from "./chunks/resize.a041304d.js";
-import { u as E } from "./chunks/use-has-slot.4d98bf29.js";
-import { _ as N } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as X } from "./chunks/index.b18c78d6.js";
-import "./assets/index39.css";
-const Y = { class: "b-dashboard-template" }, Z = { class: "b-dashboard-template__container b-dashboard-template__container--tabs" }, x = {
-  key: 2,
-  class: "b-dashboard-template__container"
-}, tt = {}, et = /* @__PURE__ */ F({
-  ...tt,
-  __name: "dashboard-template",
-  props: {
-    header: null,
-    tabs: { default: void 0 },
-    stickyTabs: { type: Boolean, default: !1 },
-    stickyFilters: { type: Boolean, default: !1 }
-  },
-  setup(c) {
-    const o = c, h = R(), n = E(h), r = u(), s = u(null), m = u(!1);
-    let _ = null;
-    const S = u(!1), y = u(0), k = d(() => s.value && o.stickyFilters), T = d(() => r.value && o.stickyTabs), V = d(() => ({
-      "b-dashboard-template__filters--sticky": o.stickyFilters,
-      "b-dashboard-template__filters--show-border": k.value && !T.value && m.value
-    })), z = d(() => ({
-      "b-dashboard-template__tabs--sticky": o.stickyTabs,
-      "b-dashboard-template__tabs--show-border": o.stickyTabs && S.value
-    })), j = d(() => ({
-      "b-dashboard-template__top-section--sticky": o.stickyTabs || o.stickyFilters
-    })), g = d(() => Object.keys(h).filter((e) => e == null ? void 0 : e.includes("tab-"))), L = (e) => {
-      var b, $;
-      return (($ = (b = o == null ? void 0 : o.tabs.tabs) == null ? void 0 : b[e]) == null ? void 0 : $.title) ?? `Tab ${e + 1}`;
-    }, { y: M } = K();
-    return w(
-      () => s.value,
-      () => {
-        !_ && s.value && (_ = Q(s.value, () => {
-          if (s.value && T.value) {
-            const e = s.value.offsetHeight;
-            y.value = k.value ? e : 0, r.value.tablistwrapper.$el.style.top = `${y.value}px`;
-          }
-        }));
-      }
-    ), w(
-      () => M.value,
-      () => {
-        var e, b;
-        k.value && (m.value = ((e = s.value) == null ? void 0 : e.getBoundingClientRect().top) === 0), T.value && (S.value = ((b = r.value.tablistwrapper.$el) == null ? void 0 : b.getBoundingClientRect().top) === y.value);
-      }
-    ), O(() => {
-      _ == null || _.disconnect();
-    }), (e, b) => (a(), i("main", Y, [
-      B(t(D), H(c.header, {
-        variant: "page",
-        class: "b-dashboard-template__header"
-      }), P({ _: 2 }, [
-        t(n)("infoIconTooltipContent") ? {
-          name: "infoIconTooltipContent",
-          fn: f(() => [
-            l(e.$slots, "infoIconTooltipContent", {}, void 0, !0)
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1040),
-      v("div", {
-        class: p(["b-dashboard-template__top-section", t(j)])
-      }, [
-        t(n)("filters") ? (a(), i("div", {
-          key: 0,
-          ref_key: "filtersRef",
-          ref: s,
-          class: p(["b-dashboard-template__filters", t(V)]),
-          "data-testid": "filters"
-        }, [
-          l(e.$slots, "filters", {}, void 0, !0)
-        ], 2)) : W("", !0),
-        t(g).length > 1 ? (a(), I(t(G), {
-          key: 1,
-          ref_key: "tabsRef",
-          ref: r,
-          "active-tab-index": c.tabs.activeTabIndex,
-          class: p(["b-dashboard-template__tabs", t(z)]),
-          "data-testid": "tabs"
-        }, {
-          default: f(() => [
-            (a(!0), i(U, null, q(t(g), ($, C) => (a(), I(t(J), {
-              key: `tab-${C}`,
-              title: L(C)
-            }, {
-              default: f(() => [
-                v("div", Z, [
-                  l(e.$slots, `tab-${C + 1}`, {}, void 0, !0)
-                ])
-              ]),
-              _: 2
-            }, 1032, ["title"]))), 128))
-          ]),
-          _: 3
-        }, 8, ["active-tab-index", "class"])) : (a(), i("div", x, [
-          l(e.$slots, "default", {}, void 0, !0)
-        ]))
-      ], 2)
-    ]));
-  }
-});
-const vt = /* @__PURE__ */ N(et, [["__scopeId", "data-v-b18dccc2"]]), st = {
-  key: 0,
-  class: "b-dashboard-section__controls"
-}, ot = {
-  key: 1,
-  class: "b-dashboard-section__content"
-}, at = {
-  key: 2,
-  class: "b-dashboard-section__columns"
-}, nt = { class: "b-dashboard-section__content" }, lt = { class: "b-dashboard-section__content" }, it = {}, dt = /* @__PURE__ */ F({
-  ...it,
-  __name: "dashboard-section",
-  props: {
-    header: null,
-    halfWidth: { type: Boolean, default: !1 }
-  },
-  setup(c) {
-    const o = c, h = R(), n = E(h), r = d(() => ({
-      "b-dashboard-section--half-width": o.halfWidth
-    }));
-    return A(() => {
-      if ((n("content-col-1") || n("content-col-2")) && o.halfWidth)
-        throw new Error("`content-col-1` and `content-col-2` cannot be used with half-width prop");
-    }), (s, m) => (a(), i("div", {
-      class: p(["b-dashboard-section", t(r)])
-    }, [
-      B(t(D), H(c.header, {
-        variant: "component",
-        class: "b-dashboard-template__header"
-      }), P({ _: 2 }, [
-        t(n)("infoIconTooltipContent") ? {
-          name: "infoIconTooltipContent",
-          fn: f(() => [
-            l(s.$slots, "infoIconTooltipContent", {}, void 0, !0)
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1040),
-      t(n)("controls") ? (a(), i("div", st, [
-        l(s.$slots, "controls", {}, void 0, !0)
-      ])) : W("", !0),
-      !t(n)("content-col-1") && !t(n)("content-col-2") ? (a(), i("div", ot, [
-        l(s.$slots, "default", {}, void 0, !0)
-      ])) : (a(), i("div", at, [
-        v("div", nt, [
-          l(s.$slots, "content-col-1", {}, void 0, !0)
-        ]),
-        v("div", lt, [
-          l(s.$slots, "content-col-2", {}, void 0, !0)
-        ])
-      ])),
-      B(t(X), { class: "b-dashboard-section__divider" })
-    ], 2));
-  }
-});
-const mt = /* @__PURE__ */ N(dt, [["__scopeId", "data-v-55110156"]]);
+import { a as e, d as t } from "./chunks/dashboard-section.DKeDjvkB.js";
 export {
-  mt as BentoDashboardSection,
-  vt as BentoDashboardTemplate
+  e as BentoDashboardSection,
+  t as BentoDashboardTemplate
 };
 //# sourceMappingURL=dashboard-template.js.map

package/dist/dashboard-template.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-template.js","sources":["../../vue2/src/templates/dashboard-template/dashboard-template.vue","../../vue2/src/templates/dashboard-template/components/dashboard-section/dashboard-section.vue"],"sourcesContent":["<template>\n    <main class=\"b-dashboard-template\">\n        <bento-header v-bind=\"header\" variant=\"page\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div class=\"b-dashboard-template__top-section\" :class=\"dashboardTopSectionConditionalClasses\">\n            <div\n                v-if=\"hasSlot('filters')\"\n                ref=\"filtersRef\"\n                class=\"b-dashboard-template__filters\"\n                :class=\"dashboardFiltersConditionalClasses\"\n                data-testid=\"filters\"\n            >\n                <slot name=\"filters\" />\n            </div>\n\n            <bento-tabs\n                v-if=\"tabsSlots.length > 1\"\n                ref=\"tabsRef\"\n                :active-tab-index=\"tabs.activeTabIndex\"\n                class=\"b-dashboard-template__tabs\"\n                :class=\"dashboardTabsConditionalClasses\"\n                data-testid=\"tabs\"\n            >\n                <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                    <div class=\"b-dashboard-template__container b-dashboard-template__container--tabs\">\n                        <slot :name=\"`tab-${index + 1}`\" />\n                    </div>\n                </bento-tab>\n            </bento-tabs>\n            <div v-else class=\"b-dashboard-template__container\">\n                <slot />\n            </div>\n        </div>\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onUnmounted, ref, useSlots, watch } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useWindowScroll } from '@vueuse/core';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader, BentoDashboardTemplateTabs } from './dashboard-template.types';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * The header that goes to the top of the template\n             */\n            header: BentoDashboardTemplateHeader;\n\n            /**\n             * All the tab properties that can be set on the inner tab components.\n             *  - tabs.activeTabIndex: the currently active tab index.\n             *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.\n             */\n            tabs?: BentoDashboardTemplateTabs;\n\n            /**\n             * Renders the tabs with a sticky positioning\n             */\n            stickyTabs?: boolean;\n\n            /**\n             * Renders the tabs with a sticky positioning\n             */\n            stickyFilters?: boolean;\n        }>(),\n        {\n            tabs: undefined,\n            stickyTabs: false,\n            stickyFilters: false,\n        }\n    );\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const tabsRef = ref<InstanceType<typeof BentoTabs>>();\n    const filtersRef = ref<HTMLDivElement>(null);\n    const isFiltersPinned = ref(false);\n    let filtersElementObserver: ResizeObserver | null = null;\n    const isTabsPinned = ref(false);\n    const tabsPosition = ref(0);\n\n    const hasStickyFilters = computed(() => filtersRef.value && props.stickyFilters);\n    const hasStickyTabs = computed(() => tabsRef.value && props.stickyTabs);\n\n    const dashboardFiltersConditionalClasses = computed(() => ({\n        'b-dashboard-template__filters--sticky': props.stickyFilters,\n        'b-dashboard-template__filters--show-border':\n            hasStickyFilters.value && !hasStickyTabs.value && isFiltersPinned.value,\n    }));\n\n    const dashboardTabsConditionalClasses = computed(() => ({\n        'b-dashboard-template__tabs--sticky': props.stickyTabs,\n        'b-dashboard-template__tabs--show-border': props.stickyTabs && isTabsPinned.value,\n    }));\n\n    const dashboardTopSectionConditionalClasses = computed(() => ({\n        'b-dashboard-template__top-section--sticky': props.stickyTabs || props.stickyFilters,\n    }));\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const { y } = useWindowScroll();\n\n    watch(\n        () => filtersRef.value,\n        () => {\n            if (!filtersElementObserver && filtersRef.value) {\n                filtersElementObserver = observeSizeOfElement(filtersRef.value, () => {\n                    if (filtersRef.value && hasStickyTabs.value) {\n                        const filtersHeight = filtersRef.value.offsetHeight;\n                        tabsPosition.value = hasStickyFilters.value ? filtersHeight : 0;\n                        (tabsRef.value.tablistwrapper.$el as HTMLDivElement).style.top = `${tabsPosition.value}px`;\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        () => y.value,\n        () => {\n            if (hasStickyFilters.value) {\n                isFiltersPinned.value = filtersRef.value?.getBoundingClientRect().top === 0;\n            }\n            if (hasStickyTabs.value) {\n                isTabsPinned.value =\n                    (tabsRef.value.tablistwrapper.$el as HTMLDivElement)?.getBoundingClientRect().top ===\n                    tabsPosition.value;\n            }\n        }\n    );\n\n    onUnmounted(() => {\n        filtersElementObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard template is a full page template used to visualize data on pages such as data dashboards and reports.\n     *\n     * @example\n     * import { BentoDashboardTemplate, BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardTemplate, BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-template :header=\"{ title: 'Dashboard'}\" :tabs=\"tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }]\" sticky-tabs sticky-filters>\n     *              <template #tab-1>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      <template #controls>\n     *                          // Add your controls here\n     *                      </template>\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *              <template #tab-2>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *          </bento-dashboard-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-template.scss\" />\n","<template>\n    <div class=\"b-dashboard-section\" :class=\"conditionalClasses\">\n        <bento-header v-bind=\"header\" variant=\"component\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div v-if=\"hasSlot('controls')\" class=\"b-dashboard-section__controls\">\n            <slot name=\"controls\"></slot>\n        </div>\n        <div v-if=\"!hasSlot('content-col-1') && !hasSlot('content-col-2')\" class=\"b-dashboard-section__content\">\n            <slot name=\"default\"></slot>\n        </div>\n        <div v-else class=\"b-dashboard-section__columns\">\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-1\"></slot></div>\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-2\"></slot></div>\n        </div>\n        <bento-divider class=\"b-dashboard-section__divider\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoDivider } from '@/components/divider';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader } from '../../dashboard-template.types';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * The header of the section\n             */\n            header: BentoDashboardTemplateHeader;\n\n            /**\n             * Renders the section to take only half of the page\n             */\n            halfWidth?: boolean;\n        }>(),\n        {\n            halfWidth: false,\n        }\n    );\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClasses = computed(() => ({\n        'b-dashboard-section--half-width': props.halfWidth,\n    }));\n\n    onMounted(() => {\n        if ((hasSlot('content-col-1') || hasSlot('content-col-2')) && props.halfWidth) {\n            throw new Error('`content-col-1` and `content-col-2` cannot be used with half-width prop');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard section is subcomponent of Dashboard template meant to be used to create the different sections within the page.\n     *\n     * @example\n     * import { BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-section :header=\"{ title: 'Section' }\" half-width>\n     *              <template #controls>\n     *                  // Add your controls here\n     *              </template>\n     *              // You can render content with two cols\n     *              <template #content-col-1>\n     *                  // Add your content here\n     *              </template>\n     *              <template #content-col-2>\n     *                  // Add your content here\n     *              </template>\n     *              // Or you can render full width content by using default slot\n     *              // Add your content here\n     *          </bento-dashboard-section>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-section.scss\" />\n"],"names":["__default__$1","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","filtersRef","isFiltersPinned","filtersElementObserver","isTabsPinned","tabsPosition","hasStickyFilters","computed","props","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTabsConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","_b","_a","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;;;;GA+KIA,KAAA,CAAA;;;;;;;;;;iBAhGAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,EAAA;AACA,QAAAG,IAAA;AACA,UAAAC,IAAAJ,EAAA,EAAA,GACAK,IAAAL,EAAA,CAAA,GAEAM,IAAAC,EAAA,MAAAN,EAAA,SAAAO,EAAA,aAAA,GACAC,IAAAF,EAAA,MAAAR,EAAA,SAAAS,EAAA,UAAA,GAEAE,IAAAH,EAAA,OAAA;AAAA,MAA2D,yCAAAC,EAAA;AAAA,MACR,8CAAAF,EAAA,SAAA,CAAAG,EAAA,SAAAP,EAAA;AAAA,IAEuB,EAAA,GAG1ES,IAAAJ,EAAA,OAAA;AAAA,MAAwD,sCAAAC,EAAA;AAAA,MACR,2CAAAA,EAAA,cAAAJ,EAAA;AAAA,IACgC,EAAA,GAGhFQ,IAAAL,EAAA,OAAA;AAAA,MAA8D,6CAAAC,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EK,IAAAN,EAAA,MAAA,OAAA,KAAAZ,CAAA,EAAA,OAAA,CAAAmB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAV,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAU,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA;AAAA,OAEA,EAAA,GAAAG,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAApB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAmB,EAAArB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAQ,EAAA,OAAA;AACI,kBAAAc,IAAAtB,EAAA,MAAA;AACA,YAAAI,EAAA,QAAAC,EAAA,QAAAiB,IAAA,GACAxB,EAAA,MAAA,eAAA,IAAA,MAAA,MAAA,GAAAM,EAAA;AAAA;AAAA,QACJ,CAAA;AAAA,MAER;AAAA,IACJ,GAGJgB;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAb,EAAA,UACIJ,EAAA,UAAAgB,IAAAjB,EAAA,UAAA,gBAAAiB,EAAA,wBAAA,SAAA,IAEJT,EAAA,UACIL,EAAA,UAAAa,IAAAlB,EAAA,MAAA,eAAA,QAAA,gBAAAkB,EAAA,wBAAA,SAAAZ,EAAA;AAAA,MAGJ;AAAA,IACJ,GAGJmB,EAAA,MAAA;AACI,MAAArB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGCzDvCsB,KAAA,CAAA;;;;;;;;iBAzCA9B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA+B,IAAAnB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAmB,EAAA,MAAA;AACI,WAAA9B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAW,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dashboard-template.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/dashed-underline.js

@@ -0,0 +1,5 @@
+import { d as n } from "./chunks/dashed-underline.DGTW7Y_-.js";
+export {
+  n as BentoDashedUnderline
+};
+//# sourceMappingURL=dashed-underline.js.map

package/dist/dashed-underline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashed-underline.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/data-grid-template.js

@@ -1,90 +1,5 @@
-import { defineComponent as g, useSlots as k, ref as v, computed as p, provide as I, openBlock as o, createElementBlock as l, createVNode as D, unref as a, mergeProps as R, createSlots as h, withCtx as c, renderSlot as n, createCommentVNode as C, createBlock as u, Fragment as G, renderList as B, toRef as $ } from "vue";
-import { BentoHeader as E } from "./header.js";
-import { BentoTabs as S, BentoTab as N } from "./tabs.js";
-import { u as O } from "./chunks/use-has-slot.4d98bf29.js";
-import { D as j } from "./chunks/data-grid-template.keys.a819a991.js";
-import { _ as A } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index49.css";
-const H = { class: "b-data-grid-template b-data-grid-template--sticky-tabs" }, L = {
-  key: 0,
-  class: "b-data-grid-template__additional-content"
-}, P = {}, V = /* @__PURE__ */ g({
-  ...P,
-  __name: "data-grid-template",
-  props: {
-    /**
-     * The header that goes to the top of the template
-     */
-    header: {
-      type: Object,
-      required: !0
-    },
-    /**
-     * All the tab properties that can be set on the inner tab components.
-     *  - tabs.activeTabIndex: the currently active tab index.
-     *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.
-     */
-    tabs: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Renders the tabs with a sticky positioning
-     */
-    stickyTabs: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  setup(i) {
-    const s = i, m = k(), b = O(m), f = v(null), T = p(() => {
-      var t, e;
-      return (e = (t = f.value) == null ? void 0 : t.$refs) == null ? void 0 : e.tablist;
-    }), _ = p(() => Object.keys(m).filter((t) => t == null ? void 0 : t.includes("tab-"))), y = (t) => {
-      var e, r;
-      return ((r = (e = s == null ? void 0 : s.tabs.tabs) == null ? void 0 : e[t]) == null ? void 0 : r.title) ?? `Tab ${t + 1}`;
-    };
-    return I(j, () => ({ isDataGridTemplate: !0, stickyTabs: $(s, "stickyTabs"), tabsRef: T })), (t, e) => (o(), l("main", H, [
-      D(a(E), R(i.header, {
-        variant: "component",
-        class: "b-data-grid-template__header"
-      }), h({ _: 2 }, [
-        a(b)("infoIconTooltipContent") ? {
-          name: "infoIconTooltipContent",
-          fn: c(() => [
-            n(t.$slots, "infoIconTooltipContent", {}, void 0, !0)
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1040),
-      a(b)("additionalContent") ? (o(), l("div", L, [
-        n(t.$slots, "additionalContent", {}, void 0, !0)
-      ])) : C("", !0),
-      a(_).length > 1 ? (o(), u(a(S), {
-        key: 1,
-        ref_key: "tabsRef",
-        ref: f,
-        "active-tab-index": i.tabs.activeTabIndex,
-        class: "b-data-grid-template__tabs"
-      }, {
-        default: c(() => [
-          (o(!0), l(G, null, B(a(_), (r, d) => (o(), u(a(N), {
-            key: `tab-${d}`,
-            title: y(d)
-          }, {
-            default: c(() => [
-              n(t.$slots, `tab-${d + 1}`, {}, void 0, !0)
-            ]),
-            _: 2
-          }, 1032, ["title"]))), 128))
-        ]),
-        _: 3
-      }, 8, ["active-tab-index"])) : n(t.$slots, "default", { key: 2 }, void 0, !0)
-    ]));
-  }
-});
-const Y = /* @__PURE__ */ A(V, [["__scopeId", "data-v-61bf7fc6"]]);
+import { d as t } from "./chunks/data-grid-template.6Nls-D4o.js";
 export {
-  Y as BentoDataGridTemplate
+  t as BentoDataGridTemplate
 };
 //# sourceMappingURL=data-grid-template.js.map

package/dist/data-grid-template.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid-template.js","sources":["../../vue2/src/templates/data-grid-template/data-grid-template.vue"],"sourcesContent":["<template>\n    <main class=\"b-data-grid-template b-data-grid-template--sticky-tabs\">\n        <bento-header v-bind=\"header\" variant=\"component\" class=\"b-data-grid-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div v-if=\"hasSlot('additionalContent')\" class=\"b-data-grid-template__additional-content\">\n            <slot name=\"additionalContent\" />\n        </div>\n        <bento-tabs\n            v-if=\"tabsSlots.length > 1\"\n            ref=\"tabsRef\"\n            :active-tab-index=\"tabs.activeTabIndex\"\n            class=\"b-data-grid-template__tabs\"\n        >\n            <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                <slot :name=\"`tab-${index + 1}`\" />\n            </bento-tab>\n        </bento-tabs>\n        <slot v-else />\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, Ref, ref, toRef, useSlots } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useHasSlot } from '@/composables';\n    import { DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY } from './data-grid-template.keys';\n    import type {\n        BentoDataGridTemplateDataGrid,\n        BentoDataGridTemplateHeader,\n        BentoDataGridTemplateTabs,\n    } from './data-grid-template.types';\n\n    const props = defineProps({\n        /**\n         * The header that goes to the top of the template\n         */\n        header: {\n            type: Object as PropType<BentoDataGridTemplateHeader>,\n            required: true,\n        },\n\n        /**\n         * All the tab properties that can be set on the inner tab components.\n         *  - tabs.activeTabIndex: the currently active tab index.\n         *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.\n         */\n        tabs: {\n            type: Object as PropType<BentoDataGridTemplateTabs>,\n            default: undefined,\n        },\n\n        /**\n         * Renders the tabs with a sticky positioning\n         */\n        stickyTabs: {\n            type: Boolean,\n            default: false,\n        },\n    });\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const tabsRef = ref(null);\n\n    const computedTabsRef = computed(() => tabsRef.value?.$refs?.tablist);\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const registerDatagridInDataGridTemplate: BentoDataGridTemplateDataGrid = () => {\n        const isDataGridTemplate = true;\n        const stickyTabs: Ref<boolean> = toRef(props, 'stickyTabs');\n        const tabsRef: Ref<HTMLDivElement> | null = computedTabsRef;\n\n        // return values to the Tab component\n        return { isDataGridTemplate, stickyTabs, tabsRef };\n    };\n\n    provide(DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY, registerDatagridInDataGridTemplate);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The data grid template is a restrictive, full-page data grid used to display information from a data set.\n     * You can use this data grid template when your user needs a clear overview of data or a way of organizing and analyzing the data in their own way.\n     * This data grid template shouldn’t be confused with the data grid.\n     *\n     * @example\n     * import { BentoDataGridTemplate } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDataGridTemplate },\n     *     template: `\n     *          // If you want to display multiple data grids in the same page (they will be rendered in different tabs)\n     *          <bento-data-grid-template>\n     *              <template #tab-1><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 1\"/></template>\n     *              <template #tab-2><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 2\"/></template>\n     *          </bento-data-grid-template>\n     *          // Alternatively, if you only want to pass one data grid to your template:\n     *          <bento-data-grid-template>\n     *              <template #default><bento-data-grid v-bind=\"your-data-grid-args\"/></template>\n     *          </bento-data-grid-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./data-grid-template.scss\" />\n"],"names":["__default__","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","computedTabsRef","computed","_b","_a","tabsSlots","el","getTabTitle","index","props","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY","toRef"],"mappings":";;;;;;;;;;GA8GIA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/CAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,MAAA;;AAAA,cAAAC,KAAAC,IAAAL,EAAA,UAAA,gBAAAK,EAAA,UAAA,gBAAAD,EAAA;AAAA,KAAA,GAEAE,IAAAH,EAAA,MAAA,OAAA,KAAAP,CAAA,EAAA,OAAA,CAAAW,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAL,KAAAC,IAAAK,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAL,EAAAI,OAAA,gBAAAL,EAAA,UAAA,OAAAK,IAAA;AAAA;AAWA,WAAAE,EAAAC,GATA,OAMI,EAAA,wBAAA,YAJAC,EAAAH,GAAA,YAAA,GAIA,SAHAR,EAGA,EAGJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"data-grid-template.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}