@adyen/bento-vue2 1.28.1 → 1.29.0

package/dist/currency.js

@@ -1,6 +1,115 @@
-import { c as o, B as n } from "./chunks/currency.H7n7RQiX.js";
+import { defineComponent as F, computed as m } from "vue";
+import { B as G } from "./chunks/index.e29a6907.js";
+import { g as E } from "./chunks/get-slot-text.99c3d860.js";
+import { n as i } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+const U = [
+  {
+    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"]
+  }
+], l = (D) => {
+  var a;
+  return ((a = U.find((R) => R.currencies.includes(D))) == null ? void 0 : a.exponent) ?? 2;
+}, f = (D) => {
+  const a = l(D.currency), R = Number(D.value);
+  return Math.round(R * 10 ** a);
+}, H = (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 Y(D, a = {}, R = !1) {
+  const K = (a == null ? void 0 : a.exponent) ?? l(D.currency), M = R ? f(D) : D.value, P = { ...D, value: M }, L = H(P, K), N = L < 0 ? "decimal" : (a == null ? void 0 : a.style) || "currency", T = a != null && a.optionalFractions ? 0 : K, A = a != null && a.highPrecision ? 10 : K;
+  return {
+    value: L,
+    format: {
+      style: N,
+      currency: D.currency,
+      currencyDisplay: "symbol",
+      minimumFractionDigits: T,
+      maximumFractionDigits: A
+    }
+  };
+}
+const Z = (D, a, R) => {
+  const K = { value: parseFloat(D), currency: a }, M = Y(K, { style: "decimal" }, R);
+  return new Intl.NumberFormat("en-US", M.format).format(M.value);
+};
+var s = /* @__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))(s || {});
+const _ = F({
+  name: "bento-currency",
+  components: { BentoTypography: G },
+  props: {
+    currency: {
+      type: String,
+      default: s.EUR,
+      validator: (D) => Object.values(s).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: m(() => {
+        const K = a.default ? E(a)("default") : null;
+        return Z(K, D.currency, D.majorUnits);
+      })
+    };
+  }
+});
+var W = function() {
+  var a = this, R = a._self._c;
+  return a._self._setupProxy, R("div", { staticClass: "b-currency" }, [a.disableTypography ? [a._v(a._s(a.formattedCurrency) + " " + a._s(a.currency))] : R("bento-typography", { staticClass: "b-currency__amount", attrs: { el: "span", variant: "body", strong: "" } }, [a._v(" " + a._s(a.formattedCurrency) + " " + a._s(a.currency) + " ")])], 2);
+}, p = [], v = /* @__PURE__ */ i(
+  _,
+  W,
+  p,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const x = v.exports;
 export {
-  o as BentoCurrency,
-  n as BentoCurrencyISOCode
+  x as BentoCurrency,
+  s as BentoCurrencyISOCode
 };
 //# sourceMappingURL=currency.js.map

package/dist/currency.js.map

@@ -1 +1 @@
-{"version":3,"file":"currency.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"currency.js","sources":["../src/utils/ts/currency/countries-list.ts","../src/utils/ts/currency/currency.ts","../src/components/currency/currency.types.ts","../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"],"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;ACgCZ,MAAAC,IAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA,IACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAH,EAAA;AAAA,MACA,WAAA,CAAAf,MAAA,OAAA,OAAAe,CAAA,EAAA,SAAAf,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAmB,GAAA,EAAA,OAAAC,KAAA;AAMA,WAAA;AAAA;AAAA,MAEA,mBAPAC,EAAA,MAAA;AACA,cAAArB,IAAAoB,EAAA,UAAAE,EAAAF,CAAA,EAAA,SAAA,IAAA;AACA,eAAAT,EAAAX,GAAAmB,EAAA,UAAAA,EAAA,UAAA;AAAA,MAAA,CACA;AAAA,IAIA;AAAA,EAEA;AACA,CAAA;;;;;;;;;;;;;;;"}

package/dist/dashboard-template.js

@@ -1,6 +1,109 @@
-import { a as e, d as t } from "./chunks/dashboard-section.BcH-_en7.js";
+import { defineComponent as C, useSlots as y, ref as d, computed as l, watch as m, onUnmounted as x, onMounted as R } from "vue";
+import { BentoHeader as T } from "./header.js";
+import { BentoTab as I, BentoTabs as H } from "./tabs.js";
+import { b as P } from "./chunks/index.6584f75e.js";
+import { o as D } from "./chunks/resize.a041304d.js";
+import { u as S } from "./chunks/use-has-slot.fbeb19ec.js";
+import { n as k } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as W } from "./chunks/index.4afa7b19.js";
+import "./assets/index47.css";
+const z = {}, j = /* @__PURE__ */ C({
+  ...z,
+  __name: "dashboard-template",
+  props: {
+    header: null,
+    tabs: { default: void 0 },
+    stickyTabs: { type: Boolean, default: !1 },
+    stickyFilters: { type: Boolean, default: !1 }
+  },
+  setup(r) {
+    const t = r, a = y(), s = S(a), n = d(), e = d(null), f = d(!1);
+    let i = null;
+    const p = d(!1), _ = d(0), b = l(() => e.value && t.stickyFilters), u = l(() => n.value && t.stickyTabs), B = l(() => ({
+      "b-dashboard-template__filters--sticky": t.stickyFilters,
+      "b-dashboard-template__filters--show-border": b.value && !u.value && f.value
+    })), g = l(() => ({
+      "b-dashboard-template__tabs--sticky": t.stickyTabs,
+      "b-dashboard-template__tabs--show-border": t.stickyTabs && p.value
+    })), w = l(() => ({
+      "b-dashboard-template__top-section--sticky": t.stickyTabs || t.stickyFilters
+    })), $ = l(() => Object.keys(a).filter((o) => o == null ? void 0 : o.includes("tab-"))), F = (o) => {
+      var c, v;
+      return ((v = (c = t == null ? void 0 : t.tabs.tabs) == null ? void 0 : c[o]) == null ? void 0 : v.title) ?? `Tab ${o + 1}`;
+    }, { y: h } = P();
+    return m(
+      () => e.value,
+      () => {
+        !i && e.value && (i = D(e.value, () => {
+          if (e.value && u.value) {
+            const o = e.value.offsetHeight;
+            _.value = b.value ? o : 0, n.value.tablistwrapper.$el.style.top = `${_.value}px`;
+          }
+        }));
+      }
+    ), m(
+      () => h.value,
+      () => {
+        var o, c;
+        b.value && (f.value = ((o = e.value) == null ? void 0 : o.getBoundingClientRect().top) === 0), u.value && (p.value = ((c = n.value.tablistwrapper.$el) == null ? void 0 : c.getBoundingClientRect().top) === _.value);
+      }
+    ), x(() => {
+      i == null || i.disconnect();
+    }), { __sfc: !0, props: t, slots: a, hasSlot: s, tabsRef: n, filtersRef: e, isFiltersPinned: f, filtersElementObserver: i, isTabsPinned: p, tabsPosition: _, hasStickyFilters: b, hasStickyTabs: u, dashboardFiltersConditionalClasses: B, dashboardTabsConditionalClasses: g, dashboardTopSectionConditionalClasses: w, tabsSlots: $, getTabTitle: F, y: h, BentoHeader: T, BentoTab: I, BentoTabs: H };
+  }
+});
+var E = function() {
+  var t = this, a = t._self._c, s = t._self._setupProxy;
+  return a("main", { staticClass: "b-dashboard-template" }, [a(s.BentoHeader, t._b({ staticClass: "b-dashboard-template__header", attrs: { variant: "page" }, scopedSlots: t._u([s.hasSlot("infoIconTooltipContent") ? { key: "infoIconTooltipContent", fn: function() {
+    return [t._t("infoIconTooltipContent")];
+  }, proxy: !0 } : null], null, !0) }, "bento-header", t.header, !1)), a("div", { staticClass: "b-dashboard-template__top-section", class: s.dashboardTopSectionConditionalClasses }, [s.hasSlot("filters") ? a("div", { ref: "filtersRef", staticClass: "b-dashboard-template__filters", class: s.dashboardFiltersConditionalClasses, attrs: { "data-testid": "filters" } }, [t._t("filters")], 2) : t._e(), s.tabsSlots.length > 1 ? a(s.BentoTabs, { ref: "tabsRef", staticClass: "b-dashboard-template__tabs", class: s.dashboardTabsConditionalClasses, attrs: { "active-tab-index": t.tabs.activeTabIndex, "data-testid": "tabs" } }, t._l(s.tabsSlots, function(n, e) {
+    return a(s.BentoTab, { key: `tab-${e}`, attrs: { title: s.getTabTitle(e) } }, [a("div", { staticClass: "b-dashboard-template__container b-dashboard-template__container--tabs" }, [t._t(`tab-${e + 1}`)], 2)]);
+  }), 1) : a("div", { staticClass: "b-dashboard-template__container" }, [t._t("default")], 2)], 1)], 1);
+}, M = [], O = /* @__PURE__ */ k(
+  j,
+  E,
+  M,
+  !1,
+  null,
+  "18ac8340",
+  null,
+  null
+);
+const tt = O.exports, U = {}, q = /* @__PURE__ */ C({
+  ...U,
+  __name: "dashboard-section",
+  props: {
+    header: null,
+    halfWidth: { type: Boolean, default: !1 }
+  },
+  setup(r) {
+    const t = r, a = y(), s = S(a), n = l(() => ({
+      "b-dashboard-section--half-width": t.halfWidth
+    }));
+    return R(() => {
+      if ((s("content-col-1") || s("content-col-2")) && t.halfWidth)
+        throw new Error("`content-col-1` and `content-col-2` cannot be used with half-width prop");
+    }), { __sfc: !0, props: t, slots: a, hasSlot: s, conditionalClasses: n, BentoHeader: T, BentoDivider: W };
+  }
+});
+var A = function() {
+  var t = this, a = t._self._c, s = t._self._setupProxy;
+  return a("div", { staticClass: "b-dashboard-section", class: s.conditionalClasses }, [a(s.BentoHeader, t._b({ staticClass: "b-dashboard-template__header", attrs: { variant: "component" }, scopedSlots: t._u([s.hasSlot("infoIconTooltipContent") ? { key: "infoIconTooltipContent", fn: function() {
+    return [t._t("infoIconTooltipContent")];
+  }, proxy: !0 } : null], null, !0) }, "bento-header", t.header, !1)), s.hasSlot("controls") ? a("div", { staticClass: "b-dashboard-section__controls" }, [t._t("controls")], 2) : t._e(), !s.hasSlot("content-col-1") && !s.hasSlot("content-col-2") ? a("div", { staticClass: "b-dashboard-section__content" }, [t._t("default")], 2) : a("div", { staticClass: "b-dashboard-section__columns" }, [a("div", { staticClass: "b-dashboard-section__content" }, [t._t("content-col-1")], 2), a("div", { staticClass: "b-dashboard-section__content" }, [t._t("content-col-2")], 2)]), a(s.BentoDivider, { staticClass: "b-dashboard-section__divider" })], 1);
+}, G = [], J = /* @__PURE__ */ k(
+  q,
+  A,
+  G,
+  !1,
+  null,
+  "6656200a",
+  null,
+  null
+);
+const st = J.exports;
 export {
-  e as BentoDashboardSection,
-  t as BentoDashboardTemplate
+  st as BentoDashboardSection,
+  tt as BentoDashboardTemplate
 };
 //# sourceMappingURL=dashboard-template.js.map

package/dist/dashboard-template.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-template.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"dashboard-template.js","sources":["../src/templates/dashboard-template/dashboard-template.vue","../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":";;;;;;;;;AA+KI,MAAAA,IAAA,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;;;;;;;;;;;;;;;;;;;;sBCzDvCsB,IAAA,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;;;;;;;;;;;;;;;;;;;"}

package/dist/dashed-underline.js

@@ -1,5 +1,61 @@
-import { d as n } from "./chunks/dashed-underline.ChUlcFJR.js";
+import { defineComponent as h, useSlots as P, ref as l, computed as d, watch as T } from "vue";
+import { a as x } from "./chunks/index.40b77741.js";
+import { B as O } from "./chunks/index.e29a6907.js";
+import { u as g } from "./chunks/use-has-slot.fbeb19ec.js";
+import { b as B } from "./chunks/tooltip.77610390.js";
+import { n as b } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index2.css";
+const y = {}, I = /* @__PURE__ */ h({
+  ...y,
+  __name: "dashed-underline",
+  props: {
+    popoverText: { default: null },
+    popoverPosition: { default: "top" },
+    tooltipText: { default: null },
+    tooltipPosition: { default: "top" }
+  },
+  setup(p) {
+    const o = p, n = 200, e = P(), a = g(e), r = l(null), i = l(!1), s = l(), c = () => {
+      i.value = !0, s.value && clearTimeout(s.value);
+    }, u = () => {
+      const t = setTimeout(() => {
+        i.value = !1;
+      }, n);
+      s.value = t;
+    }, v = () => {
+      c();
+    }, m = (t) => {
+      (!r.value || !((t == null ? void 0 : t.relatedTarget) instanceof Element) || !r.value.contains(t.relatedTarget)) && u();
+    }, f = d(() => o.popoverText || a("popover-content")), _ = d(() => !o.tooltipText && !f.value);
+    return T(
+      _,
+      (t) => {
+        if (t)
+          throw new Error(
+            "BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info."
+          );
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, CLOSING_POPOVER_DELAY_MS: n, props: o, slots: e, hasSlot: a, element: r, isOpen: i, closingTimeOutId: s, openPopover: c, closePopover: u, infoIconOnFocus: v, infoIconOnFocusOut: m, hasPopover: f, shouldShowTooltipPopoverError: _, BentoPopover: x, vBentoTooltipDirective: B, BentoTypography: O };
+  }
+});
+var S = function() {
+  var o = this, n = o._self._c, e = o._self._setupProxy;
+  return n("span", { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive:[tooltipPosition]", value: o.tooltipText, expression: "tooltipText", arg: o.tooltipPosition }], ref: "element", staticClass: "b-dashed-underline", attrs: { tabindex: "0" }, on: { mouseenter: e.openPopover, mouseleave: e.closePopover, focus: e.infoIconOnFocus, focusout: e.infoIconOnFocusOut } }, [o._t("default"), e.element && e.hasPopover ? n(e.BentoPopover, { attrs: { open: e.isOpen, "target-element": e.element, position: o.popoverPosition, role: "tooltip", "fit-content": "", "disable-focus-trap": "" } }, [o._t("popover-content", function() {
+    return [n(e.BentoTypography, [o._v(" " + o._s(o.popoverText) + " ")])];
+  })], 2) : o._e()], 2);
+}, w = [], C = /* @__PURE__ */ b(
+  I,
+  S,
+  w,
+  !1,
+  null,
+  "ae8fce01",
+  null,
+  null
+);
+const R = C.exports;
 export {
-  n as BentoDashedUnderline
+  R as BentoDashedUnderline
 };
 //# sourceMappingURL=dashed-underline.js.map

package/dist/dashed-underline.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashed-underline.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"dashed-underline.js","sources":["../src/components/dashed-underline/dashed-underline.vue"],"sourcesContent":["<template>\n    <span\n        ref=\"element\"\n        v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\"\n        class=\"b-dashed-underline\"\n        tabindex=\"0\"\n        @mouseenter=\"openPopover\"\n        @mouseleave=\"closePopover\"\n        @focus=\"infoIconOnFocus\"\n        @focusout=\"infoIconOnFocusOut\"\n    >\n        <slot></slot>\n        <bento-popover\n            v-if=\"element && hasPopover\"\n            :open=\"isOpen\"\n            :target-element=\"element\"\n            :position=\"popoverPosition\"\n            role=\"tooltip\"\n            fit-content\n            disable-focus-trap\n        >\n            <slot name=\"popover-content\">\n                <bento-typography>\n                    {{ popoverText }}\n                </bento-typography>\n            </slot>\n        </bento-popover>\n    </span>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { BentoPopover, type BentoPopoverPositions } from '@/components/popover';\n    import {\n        type BentoTooltipPosition,\n        BentoTooltipDirective as vBentoTooltipDirective,\n    } from '@/directives/tooltip/index';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    const CLOSING_POPOVER_DELAY_MS = 200;\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Text showed in the popover on hover\n             */\n            popoverText?: string;\n\n            /**\n             * Position the popover should take if space is available\n             */\n            popoverPosition?: BentoPopoverPositions | `${BentoPopoverPositions}`;\n\n            /**\n             * Attaches a `BentoTooltip` if present. Text showed in the tooltip on hover.\n             */\n            tooltipText?: string;\n\n            /**\n             * Position the tooltip should take if space is available.\n             */\n            tooltipPosition?: BentoTooltipPosition | `${BentoTooltipPosition}`;\n        }>(),\n        {\n            popoverText: null,\n            popoverPosition: 'top',\n            tooltipText: null,\n            tooltipPosition: 'top',\n        }\n    );\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const element = ref<HTMLSpanElement>(null);\n    const isOpen = ref(false);\n\n    const closingTimeOutId = ref();\n\n    const openPopover = () => {\n        isOpen.value = true;\n        if (closingTimeOutId.value) {\n            clearTimeout(closingTimeOutId.value);\n        }\n    };\n\n    const closePopover = () => {\n        // We want to delay closing for a couple of seconds so\n        // it doesn't flicker if a user hovers over the icon and then inside the popover.\n        const timeOutId = setTimeout(() => {\n            isOpen.value = false;\n        }, CLOSING_POPOVER_DELAY_MS);\n        closingTimeOutId.value = timeOutId;\n    };\n\n    const infoIconOnFocus = () => {\n        openPopover();\n    };\n\n    /**\n     * Only close popover on blur if the newly focus element is not a child of this element\n     * @param e - the event that contains the newly focused element\n     */\n    const infoIconOnFocusOut = (e: FocusEvent) => {\n        if (!element.value || !(e?.relatedTarget instanceof Element) || !element.value.contains(e.relatedTarget)) {\n            closePopover();\n        }\n    };\n\n    const hasPopover = computed(() => props.popoverText || hasSlot('popover-content'));\n\n    const shouldShowTooltipPopoverError = computed(() => !props.tooltipText && !hasPopover.value);\n\n    watch(\n        shouldShowTooltipPopoverError,\n        value => {\n            if (value) {\n                throw new Error(\n                    'BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The dashed underline serves as a visual cue to indicate that additional information is available for\n     * a specific word or phrase without adding an icon.\n     *\n     * @example\n     * import { BentoDashedUnderline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashedUnderline },\n     *     template: `\n     *          <bento-dashed-underline>\n     *              annotated text\n     *          </bento-dashed-underline>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashed-underline.scss\" />\n"],"names":["__default__","CLOSING_POPOVER_DELAY_MS","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","closingTimeOutId","openPopover","closePopover","timeOutId","infoIconOnFocus","infoIconOnFocusOut","e","hasPopover","computed","props","shouldShowTooltipPopoverError","watch","value"],"mappings":";;;;;;;AAgJI,MAAAA,IAAA,CAAA;;;;;;;;;;iBAxGAC,IAAA,KAgCAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GAEAE,IAAAF,EAAA,GAEAG,IAAA,MAAA;AACI,MAAAF,EAAA,QAAA,IACAC,EAAA,SACI,aAAAA,EAAA,KAAA;AAAA,IACJ,GAGJE,IAAA,MAAA;AAGI,YAAAC,IAAA,WAAA,MAAA;AACI,QAAAJ,EAAA,QAAA;AAAA,MAAe,GAAAP,CAAA;AAEnB,MAAAQ,EAAA,QAAAG;AAAA,IAAyB,GAG7BC,IAAA,MAAA;AACI,MAAAH,EAAA;AAAA,IAAY,GAOhBI,IAAA,CAAAC,MAAA;AACI,OAAA,CAAAT,EAAA,SAAA,GAAAS,KAAA,gBAAAA,EAAA,0BAAA,YAAA,CAAAT,EAAA,MAAA,SAAAS,EAAA,aAAA,MACIJ,EAAA;AAAA,IACJ,GAGJK,IAAAC,EAAA,MAAAC,EAAA,eAAAd,EAAA,iBAAA,CAAA,GAEAe,IAAAF,EAAA,MAAA,CAAAC,EAAA,eAAA,CAAAF,EAAA,KAAA;AAEA,WAAAI;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA;AAAA,YAAU;AAAA,UACN;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}

package/dist/data-grid-template.js

@@ -1,5 +1,68 @@
-import { d as t } from "./chunks/data-grid-template.DqG5bNeD.js";
+import { defineComponent as p, useSlots as f, ref as m, computed as c, provide as u, toRef as T } from "vue";
+import { BentoHeader as y } from "./header.js";
+import { BentoTab as v, BentoTabs as g } from "./tabs.js";
+import { u as C } from "./chunks/use-has-slot.fbeb19ec.js";
+import { D as R } from "./chunks/data-grid-template.keys.a819a991.js";
+import { n as S } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index49.css";
+const h = {}, I = /* @__PURE__ */ p({
+  ...h,
+  __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(l) {
+    const t = l, s = f(), e = C(s), r = m(null), o = c(() => {
+      var a, n;
+      return (n = (a = r.value) == null ? void 0 : a.$refs) == null ? void 0 : n.tablist;
+    }), d = c(() => Object.keys(s).filter((a) => a == null ? void 0 : a.includes("tab-"))), b = (a) => {
+      var n, i;
+      return ((i = (n = t == null ? void 0 : t.tabs.tabs) == null ? void 0 : n[a]) == null ? void 0 : i.title) ?? `Tab ${a + 1}`;
+    }, _ = () => ({ isDataGridTemplate: !0, stickyTabs: T(t, "stickyTabs"), tabsRef: o });
+    return u(R, _), { __sfc: !0, props: t, slots: s, hasSlot: e, tabsRef: r, computedTabsRef: o, tabsSlots: d, getTabTitle: b, registerDatagridInDataGridTemplate: _, BentoHeader: y, BentoTab: v, BentoTabs: g };
+  }
+});
+var k = function() {
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return s("main", { staticClass: "b-data-grid-template b-data-grid-template--sticky-tabs" }, [s(e.BentoHeader, t._b({ staticClass: "b-data-grid-template__header", attrs: { variant: "component" }, scopedSlots: t._u([e.hasSlot("infoIconTooltipContent") ? { key: "infoIconTooltipContent", fn: function() {
+    return [t._t("infoIconTooltipContent")];
+  }, proxy: !0 } : null], null, !0) }, "bento-header", t.header, !1)), e.hasSlot("additionalContent") ? s("div", { staticClass: "b-data-grid-template__additional-content" }, [t._t("additionalContent")], 2) : t._e(), e.tabsSlots.length > 1 ? s(e.BentoTabs, { ref: "tabsRef", staticClass: "b-data-grid-template__tabs", attrs: { "active-tab-index": t.tabs.activeTabIndex } }, t._l(e.tabsSlots, function(r, o) {
+    return s(e.BentoTab, { key: `tab-${o}`, attrs: { title: e.getTabTitle(o) } }, [t._t(`tab-${o + 1}`)], 2);
+  }), 1) : t._t("default")], 2);
+}, B = [], D = /* @__PURE__ */ S(
+  I,
+  k,
+  B,
+  !1,
+  null,
+  "1bab1958",
+  null,
+  null
+);
+const A = D.exports;
 export {
-  t as BentoDataGridTemplate
+  A 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":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"data-grid-template.js","sources":["../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","registerDatagridInDataGridTemplate","toRef","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY"],"mappings":";;;;;;;AA8GI,MAAAA,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,OAEAE,IAAA,OAMI,EAAA,wBAAA,YAJAC,EAAAF,GAAA,YAAA,GAIA,SAHAR,EAGA;AAGJ,WAAAW,EAAAC,GAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;"}