npm - @adyen/bento-vue2 - Versions diffs - 1.102.0 → 1.103.0 - Mend

@adyen/bento-vue2 1.102.0 → 1.103.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (399) hide show

package/dist/chunks/currency.POwX-Trj.js ADDED Viewed

@@ -0,0 +1,124 @@
+import { defineComponent as U, useSlots as E, computed as T, onMounted as _ } from "vue";
+import { p as g, d as Y, B as H } from "./typography.D1OZJbEa.js";
+import { u as Z } from "./index.CPOlyau9.js";
+import { g as l } from "./get-slot-text.DM_NdrUC.js";
+import { n as W } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/currency.css";
+const v = [
+  {
+    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 = (s) => v.find((a) => a.currencies.includes(s));
+function A(s) {
+  return L(s)?.exponent ?? 2;
+}
+const V = (s, a) => s / 10 ** A(a), b = "USD";
+function X() {
+  const { n: s } = Z(), a = "standard", R = (N, i) => {
+    const P = i?.currency ?? b, M = Number(N) || 0;
+    isNaN(Number(N)) && g(
+      "The value provided is not a valid string with numbers or valid number. Falling back to 0."
+    );
+    const F = i?.majorUnits ? M : V(M, P), m = L(P)?.exponent ?? A(P), G = s(F, {
+      style: "currency",
+      currency: P,
+      currencySign: i?.currencySign ?? a,
+      currencyDisplay: "code",
+      minimumFractionDigits: m,
+      maximumFractionDigits: m
+    }), f = new RegExp(`\\s*${P}\\s*`);
+    return {
+      currencyNumber: G.replace(f, ""),
+      currencyCode: P
+    };
+  }, D = (N, i) => K(N, i).formattedCurrency, K = (N, i) => {
+    const { currencyNumber: P, currencyCode: M } = R(N, i);
+    return {
+      currencyNumber: P,
+      currencyCode: M,
+      formattedCurrency: `${P} ${M}`
+    };
+  };
+  return {
+    formatCurrency: D,
+    formatCurrencyParts: K
+  };
+}
+var p = /* @__PURE__ */ ((s) => (s.AED = "AED", s.AFA = "AFA", s.ALL = "ALL", s.AMD = "AMD", s.ANG = "ANG", s.AOA = "AOA", s.ARS = "ARS", s.AUD = "AUD", s.AWG = "AWG", s.AZN = "AZN", s.BAM = "BAM", s.BBD = "BBD", s.BDT = "BDT", s.BEF = "BEF", s.BGN = "BGN", s.BHD = "BHD", s.BIF = "BIF", s.BMD = "BMD", s.BND = "BND", s.BOB = "BOB", s.BRL = "BRL", s.BSD = "BSD", s.BTC = "BTC", s.BTN = "BTN", s.BWP = "BWP", s.BYR = "BYR", s.BZD = "BZD", s.CAD = "CAD", s.CDF = "CDF", s.CHF = "CHF", s.CLF = "CLF", s.CLP = "CLP", s.CNY = "CNY", s.COP = "COP", s.CRC = "CRC", s.CUC = "CUC", s.CVE = "CVE", s.CZK = "CZK", s.DEM = "DEM", s.DJF = "DJF", s.DKK = "DKK", s.DOP = "DOP", s.DZD = "DZD", s.EEK = "EEK", s.EGP = "EGP", s.ERN = "ERN", s.ETB = "ETB", s.EUR = "EUR", s.FJD = "FJD", s.FKP = "FKP", s.GBP = "GBP", s.GEL = "GEL", s.GHS = "GHS", s.GIP = "GIP", s.GMD = "GMD", s.GNF = "GNF", s.GRD = "GRD", s.GTQ = "GTQ", s.GYD = "GYD", s.HKD = "HKD", s.HNL = "HNL", s.HRK = "HRK", s.HTG = "HTG", s.HUF = "HUF", s.IDR = "IDR", s.ILS = "ILS", s.INR = "INR", s.IQD = "IQD", s.IRR = "IRR", s.ISK = "ISK", s.ITL = "ITL", s.JMD = "JMD", s.JOD = "JOD", s.JPY = "JPY", s.KES = "KES", s.KGS = "KGS", s.KHR = "KHR", s.KMF = "KMF", s.KPW = "KPW", s.KRW = "KRW", s.KWD = "KWD", s.KYD = "KYD", s.KZT = "KZT", s.LAK = "LAK", s.LBP = "LBP", s.LKR = "LKR", s.LRD = "LRD", s.LSL = "LSL", s.LTC = "LTC", s.LTL = "LTL", s.LVL = "LVL", s.LYD = "LYD", s.MAD = "MAD", s.MDL = "MDL", s.MGA = "MGA", s.MKD = "MKD", s.MMK = "MMK", s.MNT = "MNT", s.MOP = "MOP", s.MRO = "MRO", s.MRU = "MRU", s.MUR = "MUR", s.MVR = "MVR", s.MWK = "MWK", s.MXN = "MXN", s.MYR = "MYR", s.MZM = "MZM", s.NAD = "NAD", s.NGN = "NGN", s.NIO = "NIO", s.NOK = "NOK", s.NPR = "NPR", s.NZD = "NZD", s.OMR = "OMR", s.PAB = "PAB", s.PEN = "PEN", s.PGK = "PGK", s.PHP = "PHP", s.PKR = "PKR", s.PLN = "PLN", s.PYG = "PYG", s.QAR = "QAR", s.RON = "RON", s.RSD = "RSD", s.RUB = "RUB", s.RWF = "RWF", s.SAR = "SAR", s.SBD = "SBD", s.SCR = "SCR", s.SDG = "SDG", s.SEK = "SEK", s.SGD = "SGD", s.SHP = "SHP", s.SKK = "SKK", s.SLL = "SLL", s.SOS = "SOS", s.SRD = "SRD", s.SSP = "SSP", s.STD = "STD", s.SVC = "SVC", s.SYP = "SYP", s.SZL = "SZL", s.THB = "THB", s.TJS = "TJS", s.TMT = "TMT", s.TND = "TND", s.TOP = "TOP", s.TRY = "TRY", s.TTD = "TTD", s.TWD = "TWD", s.TZS = "TZS", s.UAH = "UAH", s.UGX = "UGX", s.USD = "USD", s.UYU = "UYU", s.UZS = "UZS", s.VEF = "VEF", s.VND = "VND", s.VUV = "VUV", s.WST = "WST", s.XAF = "XAF", s.XCD = "XCD", s.XDR = "XDR", s.XOF = "XOF", s.XPF = "XPF", s.YER = "YER", s.ZAR = "ZAR", s.ZMK = "ZMK", s.ZWL = "ZWL", s))(p || {});
+const J = {
+  name: "bento-currency",
+  i18n: {}
+  // required to enable E2E to run as they do not have vue-i18n set up
+}, x = /* @__PURE__ */ U({
+  ...J,
+  props: {
+    currency: { default: p.EUR },
+    disableTypography: { type: Boolean, default: !1 },
+    majorUnits: { type: Boolean, default: !1 },
+    value: { default: void 0 },
+    currencySign: { default: "standard" },
+    strongerAmount: { type: Boolean }
+  },
+  setup(s) {
+    const a = s, R = E(), { formatCurrencyParts: D } = X(), K = T(() => {
+      const i = a.value ?? l(R)("default");
+      return D(i, {
+        currency: a.currency,
+        currencySign: a.currencySign,
+        majorUnits: a.majorUnits
+      });
+    }), N = T(() => ` ${K.value.currencyCode}`);
+    return _(() => {
+      l(R)("default") && Y(
+        'BentoCurrency "default" slot',
+        `The use of "default" slot in "BentoCurrency" is no longer supported as it causes issues with dynamic content.
+                Use the "value" property instead.
+                <bento-currency :value="12345.67" currency="USD" major-units="false" />`,
+        "2.0.0"
+      );
+    }), { __sfc: !0, slots: R, props: a, formatCurrencyParts: D, formattedCurrencyParts: K, formattedCurrencyCode: N, BentoTypography: H };
+  }
+});
+var t = function() {
+  var a = this, R = a._self._c, D = a._self._setupProxy;
+  return R("div", { staticClass: "b-currency", attrs: { "aria-label": D.formattedCurrencyParts.formattedCurrency } }, [a.disableTypography ? [a._v(a._s(D.formattedCurrencyParts.formattedCurrency))] : R(D.BentoTypography, { staticClass: "b-currency__amount", attrs: { el: "span", variant: "body", strong: "" } }, [R(D.BentoTypography, { attrs: { el: "span", strongest: a.strongerAmount } }, [a._v(a._s(D.formattedCurrencyParts.currencyNumber))]), R("span", [a._v(a._s(D.formattedCurrencyCode))])], 1)], 2);
+}, h = [], Q = /* @__PURE__ */ W(
+  x,
+  t,
+  h,
+  !1,
+  null,
+  "ed641ecc"
+);
+const c = Q.exports;
+export {
+  p as B,
+  c,
+  X as u
+};
+//# sourceMappingURL=currency.POwX-Trj.js.map

package/dist/chunks/{currency.Dvy9Qjjf.js.map → currency.POwX-Trj.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"currency.Dvy9Qjjf.js","sources":["../../src/utils/ts/currency/currency-map.ts","../../src/utils/ts/currency/currency.ts","../../src/composables/use-bento-currency/use-bento-currency.ts","../../src/components/currency/currency.types.ts","../../src/components/currency/currency.vue"],"sourcesContent":["export interface CurrencyMap {\n exponent: number;\n currencies: Array<string>;\n}\n\n/*\n Contains mapping configuration between currency code and exponent for amount in the corresponding currency.\n * https://docs.adyen.com/development-resources/currency-codes\n \n @internal\n /\nexport const currencyMap: Array<CurrencyMap> = [\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 { currencyMap, type CurrencyMap } from './currency-map';\nimport { type CurrencyAmount } from './currency.types';\n\n/\n Returns exponent for specified currency code that do not adhere to the ISO 4217 standard.\n /\nexport const getNonStandardCurrency = (currency: string): CurrencyMap =>\n currencyMap.find(item => item.currencies.includes(currency));\n\n/\n Returns the number of minor units (decimal places) for a given currency.\n * The function uses an internal map for currencies with non-standard decimal places and defaults to 2 for all others.\n \n @param currency - The three-letter ISO 4217 currency code (e.g., 'USD', 'JPY').\n * @returns The number of decimal places for the currency.\n \n @example\n * getMinorUnitDigits('USD'); // Returns 2\n * getMinorUnitDigits('JPY'); // Returns 0\n /\nexport function getMinorUnitDigits(currency: string): number {\n const exception = getNonStandardCurrency(currency);\n\n return exception?.exponent ?? 2;\n}\n\n/\n Converts a currency amount from minor units to major units.\n \n @param amount The amount in minor units (e.g., cents).\n * @param currency The three-letter ISO 4217 currency code.\n * @returns The amount in major units (e.g., dollars).\n /\nexport const getNormalizedAmount = (amount: CurrencyAmount['value'], currency: string) =>\n amount / 10 * getMinorUnitDigits(currency);\n","import { getMinorUnitDigits, getNonStandardCurrency, getNormalizedAmount } from '@/utils/ts/currency';\nimport { useI18n } from '@/utils/ts/i18n';\nimport { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\nimport { type BentoCurrencyISOCode } from '../../components/currency/currency.types';\n\nexport interface UseBentoCurrencyFormatCurrencyOptions {\n currency?: `${BentoCurrencyISOCode}`;\n currencySign?: Intl.NumberFormatOptions['currencySign'];\n majorUnits?: boolean;\n}\n\nexport interface UseBentoCurrencyParts {\n /*\n The localized number portion of the formatted currency.\n /\n currencyNumber: string;\n\n /\n The ISO currency code used for formatting.\n /\n currencyCode: string;\n\n /\n The complete formatted currency string.\n /\n formattedCurrency: string;\n}\n\nconst DEFAULT_CURRENCY = 'USD';\n\n/\n A composable that returns a fully formatted and localized currency string.\n * It enforces the format `[localized number][non-breaking space][ISO code]`.\n \n @remarks\n * The formatting process involves several steps:\n * 1. It safely resolves the input `value`, whether it's from a prop or a slot, into a valid number.\n \n 2. If `majorUnits` is false, it converts the amount from minor units to major units\n * (e.g., cents to dollars) by dividing by 10 to the power of the currency's\n * decimal places (the \"exponent\"). For example, `12345 / (10 ** 2)` becomes `123.45`.\n \n 3. It determines the correct number of decimal places, respecting any non-standard\n * currency exceptions.\n \n 4. It uses `vue-i18n` to format the number with the correct sign placement and decimal/thousand\n * separators for the current locale, then manually reconstructs the string to ensure\n * the ISO code is always at the end.\n \n @returns An object with a function to format the currency string.\n /\nexport function useBentoCurrency() {\n const { n } = useI18n();\n\n const DEFAULT_CURRENCY_SIGN = 'standard';\n\n /\n Resolves the shared formatting details used by currency string and currency parts formatters.\n \n @param amount The numeric value to be formatted. If `formatOptions.majorUnits` is `false` or undefined,\n * this value is treated as being in the currency's minor units (e.g., cents).\n * @param formatOptions An optional object containing options for currency formatting.\n \n @returns The localized number and ISO currency code.\n /\n const getCurrencyFormatDetails = (\n amount: string \| number,\n formatOptions?: UseBentoCurrencyFormatCurrencyOptions\n ) => {\n const targetCurrency = formatOptions?.currency ?? DEFAULT_CURRENCY;\n\n // Parse and Fallback\n const parsedValue = Number(amount) \|\| 0;\n\n if (isNaN(Number(amount))) {\n printDevelopmentWarning(\n 'The value provided is not a valid string with numbers or valid number. Falling back to 0.'\n );\n }\n\n // Normalize Amount\n const normalizedAmount = formatOptions?.majorUnits\n ? parsedValue\n : getNormalizedAmount(parsedValue, targetCurrency);\n\n // Determine Precision\n const fractionDigits = getNonStandardCurrency(targetCurrency)?.exponent ?? getMinorUnitDigits(targetCurrency);\n\n // Format with Locale\n const localizedCurrencyString = n(normalizedAmount, {\n style: 'currency',\n currency: targetCurrency,\n currencySign: formatOptions?.currencySign ?? DEFAULT_CURRENCY_SIGN,\n currencyDisplay: 'code',\n minimumFractionDigits: fractionDigits,\n maximumFractionDigits: fractionDigits,\n });\n\n // Enforce Standard Format: `[number][nbsp][code]`\n const isoCodeRegex = new RegExp(`\\\\s${targetCurrency}\\\\s`);\n const numberPart = localizedCurrencyString.replace(isoCodeRegex, '');\n\n return {\n currencyNumber: numberPart,\n currencyCode: targetCurrency,\n };\n };\n\n /\n Formats a given amount into a localized currency string with a specific structure.\n \n This function ensures that the output format is always `[localized number][non-breaking space][ISO code]`,\n * providing a consistent and predictable currency representation across different locales.\n \n @param amount The numeric value to be formatted. If `formatOptions.majorUnits` is `false` or undefined,\n * this value is treated as being in the currency's minor units (e.g., cents).\n * @param formatOptions An optional object containing options for currency formatting.\n * - `currency`: The 3-letter ISO currency code (e.g., `'USD'`, `'EUR'`). Defaults to `'USD'`.\n * - `currencySign`: The currency sign to use. Can be `'standard'` or `'accounting'`. Defaults to `'standard'`. In `accounting` mode, negative values are typically wrapped in parentheses.\n * - `majorUnits`: Set to `true` if the `amount` is already in major units (e.g., dollars instead of cents). Defaults to `false`.\n \n @returns A fully formatted and localized currency string (e.g., \"1,234.56 EUR\").\n /\n const formatCurrency = (amount: string \| number, formatOptions?: UseBentoCurrencyFormatCurrencyOptions): string =>\n formatCurrencyParts(amount, formatOptions).formattedCurrency;\n /\n Formats a given amount into separate currency parts for consumers that need custom markup.\n \n This function reuses the shared currency formatting details to keep parsing, normalization, precision, locale formatting,\n * and final string construction aligned with the standard currency formatter.\n \n @param amount The numeric value to be formatted. If `formatOptions.majorUnits` is `false` or undefined,\n * this value is treated as being in the currency's minor units (e.g., cents).\n * @param formatOptions An optional object containing options for currency formatting.\n \n @returns The localized number, ISO currency code, and complete formatted currency string.\n /\n const formatCurrencyParts = (\n amount: string \| number,\n formatOptions?: UseBentoCurrencyFormatCurrencyOptions\n ): UseBentoCurrencyParts => {\n const { currencyNumber, currencyCode } = getCurrencyFormatDetails(amount, formatOptions);\n\n return {\n currencyNumber,\n currencyCode,\n formattedCurrency: `${currencyNumber}\\u00A0${currencyCode}`,\n };\n };\n\n return {\n formatCurrency,\n formatCurrencyParts,\n };\n}\n","export interface BentoCurrencyProps {\n /\n Currency code based on the ISO 4217 standard\n /\n currency?: BentoCurrencyISOCode \| `${BentoCurrencyISOCode}`;\n\n /\n Disable the default typography for the component. Only use this when the component is inside another typography component.\n /\n disableTypography?: boolean;\n\n /\n Accepts currency value in major units instead of minor ones\n /\n majorUnits?: boolean;\n\n /\n Currency value to be formatted\n /\n value?: number;\n\n /\n Determines how the currency symbol and negative values are displayed.\n * This is only applicable to certain countries such as `en-US`.\n \n - `'standard'`: Default format (e.g., `-1,234.56 USD`).\n * - `'accounting'`: Uses accounting conventions, such as wrapping negative numbers in parentheses (e.g., `(1,234.56) USD`).\n \n @default 'standard'\n /\n currencySign?: Intl.NumberFormatOptions['currencySign'];\n\n /\n Makes only the numeric part of the formatted currency bold.\n /\n strongerAmount?: boolean;\n}\n\nexport enum BentoCurrencyISOCode {\n AED = 'AED',\n AFA = 'AFA',\n ALL = 'ALL',\n AMD = 'AMD',\n ANG = 'ANG',\n AOA = 'AOA',\n ARS = 'ARS',\n AUD = 'AUD',\n AWG = 'AWG',\n AZN = 'AZN',\n BAM = 'BAM',\n BBD = 'BBD',\n BDT = 'BDT',\n BEF = 'BEF',\n BGN = 'BGN',\n BHD = 'BHD',\n BIF = 'BIF',\n BMD = 'BMD',\n BND = 'BND',\n BOB = 'BOB',\n BRL = 'BRL',\n BSD = 'BSD',\n BTC = 'BTC',\n BTN = 'BTN',\n BWP = 'BWP',\n BYR = 'BYR',\n BZD = 'BZD',\n CAD = 'CAD',\n CDF = 'CDF',\n CHF = 'CHF',\n CLF = 'CLF',\n CLP = 'CLP',\n CNY = 'CNY',\n COP = 'COP',\n CRC = 'CRC',\n CUC = 'CUC',\n CVE = 'CVE',\n CZK = 'CZK',\n DEM = 'DEM',\n DJF = 'DJF',\n DKK = 'DKK',\n DOP = 'DOP',\n DZD = 'DZD',\n EEK = 'EEK',\n EGP = 'EGP',\n ERN = 'ERN',\n ETB = 'ETB',\n EUR = 'EUR',\n FJD = 'FJD',\n FKP = 'FKP',\n GBP = 'GBP',\n GEL = 'GEL',\n GHS = 'GHS',\n GIP = 'GIP',\n GMD = 'GMD',\n GNF = 'GNF',\n GRD = 'GRD',\n GTQ = 'GTQ',\n GYD = 'GYD',\n HKD = 'HKD',\n HNL = 'HNL',\n HRK = 'HRK',\n HTG = 'HTG',\n HUF = 'HUF',\n IDR = 'IDR',\n ILS = 'ILS',\n INR = 'INR',\n IQD = 'IQD',\n IRR = 'IRR',\n ISK = 'ISK',\n ITL = 'ITL',\n JMD = 'JMD',\n JOD = 'JOD',\n JPY = 'JPY',\n KES = 'KES',\n KGS = 'KGS',\n KHR = 'KHR',\n KMF = 'KMF',\n KPW = 'KPW',\n KRW = 'KRW',\n KWD = 'KWD',\n KYD = 'KYD',\n KZT = 'KZT',\n LAK = 'LAK',\n LBP = 'LBP',\n LKR = 'LKR',\n LRD = 'LRD',\n LSL = 'LSL',\n LTC = 'LTC',\n LTL = 'LTL',\n LVL = 'LVL',\n LYD = 'LYD',\n MAD = 'MAD',\n MDL = 'MDL',\n MGA = 'MGA',\n MKD = 'MKD',\n MMK = 'MMK',\n MNT = 'MNT',\n MOP = 'MOP',\n MRO = 'MRO',\n MRU = 'MRU',\n MUR = 'MUR',\n MVR = 'MVR',\n MWK = 'MWK',\n MXN = 'MXN',\n MYR = 'MYR',\n MZM = 'MZM',\n NAD = 'NAD',\n NGN = 'NGN',\n NIO = 'NIO',\n NOK = 'NOK',\n NPR = 'NPR',\n NZD = 'NZD',\n OMR = 'OMR',\n PAB = 'PAB',\n PEN = 'PEN',\n PGK = 'PGK',\n PHP = 'PHP',\n PKR = 'PKR',\n PLN = 'PLN',\n PYG = 'PYG',\n QAR = 'QAR',\n RON = 'RON',\n RSD = 'RSD',\n RUB = 'RUB',\n RWF = 'RWF',\n SAR = 'SAR',\n SBD = 'SBD',\n SCR = 'SCR',\n SDG = 'SDG',\n SEK = 'SEK',\n SGD = 'SGD',\n SHP = 'SHP',\n SKK = 'SKK',\n SLL = 'SLL',\n SOS = 'SOS',\n SRD = 'SRD',\n SSP = 'SSP',\n STD = 'STD',\n SVC = 'SVC',\n SYP = 'SYP',\n SZL = 'SZL',\n THB = 'THB',\n TJS = 'TJS',\n TMT = 'TMT',\n TND = 'TND',\n TOP = 'TOP',\n TRY = 'TRY',\n TTD = 'TTD',\n TWD = 'TWD',\n TZS = 'TZS',\n UAH = 'UAH',\n UGX = 'UGX',\n USD = 'USD',\n UYU = 'UYU',\n UZS = 'UZS',\n VEF = 'VEF',\n VND = 'VND',\n VUV = 'VUV',\n WST = 'WST',\n XAF = 'XAF',\n XCD = 'XCD',\n XDR = 'XDR',\n XOF = 'XOF',\n XPF = 'XPF',\n YER = 'YER',\n ZAR = 'ZAR',\n ZMK = 'ZMK',\n ZWL = 'ZWL',\n}\n","<template>\n <div class=\"b-currency\" :aria-label=\"formattedCurrencyParts.formattedCurrency\">\n <bento-typography v-if=\"!disableTypography\" class=\"b-currency__amount\" el=\"span\" variant=\"body\" strong>\n <bento-typography el=\"span\" :strongest=\"strongerAmount\">{{\n formattedCurrencyParts.currencyNumber\n }}</bento-typography>\n <span>{{ formattedCurrencyCode }}</span>\n </bento-typography>\n\n <template v-else>{{ formattedCurrencyParts.formattedCurrency }}</template>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, onMounted, useSlots } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { useBentoCurrency } from '@/composables/use-bento-currency/use-bento-currency';\n import { deprecate } from '@/utils/ts/deprecate';\n import { getSlotText } from '@/utils/ts/get-slot-text';\n import { BentoCurrencyISOCode, type BentoCurrencyProps } from './currency.types';\n\n const slots = useSlots();\n\n const props = defineProps({\n currency: { default: BentoCurrencyISOCode.EUR },\n disableTypography: { type: Boolean, default: false },\n majorUnits: { type: Boolean, default: false },\n value: { default: undefined },\n currencySign: { default: 'standard' },\n strongerAmount: { type: Boolean }\n});\n\n const { formatCurrencyParts } = useBentoCurrency();\n\n const formattedCurrencyParts = computed(() => {\n const rawCurrencyValue = props.value ?? getSlotText(slots)('default');\n\n return formatCurrencyParts(rawCurrencyValue, {\n currency: props.currency,\n currencySign: props.currencySign,\n majorUnits: props.majorUnits,\n });\n });\n const formattedCurrencyCode = computed(() => `\\u00A0${formattedCurrencyParts.value.currencyCode}`);\n\n onMounted(() => {\n if (getSlotText(slots)('default')) {\n deprecate(\n 'BentoCurrency \"default\" slot',\n `The use of \"default\" slot in \"BentoCurrency\" is no longer supported as it causes issues with dynamic content.\n Use the \"value\" property instead.\n <bento-currency :value=\"12345.67\" currency=\"USD\" major-units=\"false\" />`,\n '2.0.0'\n );\n }\n });\n</script>\n\n<script lang=\"ts\">\n /\n A Currency component is used to display a formatted currency value.\n \n @example\n * import { BentoCurrency, BentoCurrencyISOCode } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoCurrency },\n * template: `\n * <bento-currency\n * :currency=\"BentoCurrencyISOCode.USD\"\n * :value=\"76.33\"\n * />\n * `\n * }\n */\n export default {\n name: 'bento-currency',\n i18n: {}, // required to enable E2E to run as they do not have vue-i18n set up\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./currency.scss\" />\n"],"names":["currencyMap","getNonStandardCurrency","currency","item","getMinorUnitDigits","exception","getNormalizedAmount","amount","DEFAULT_CURRENCY","useBentoCurrency","n","useI18n","DEFAULT_CURRENCY_SIGN","getCurrencyFormatDetails","formatOptions","targetCurrency","parsedValue","printDevelopmentWarning","normalizedAmount","fractionDigits","_a","localizedCurrencyString","isoCodeRegex","formatCurrency","formatCurrencyParts","currencyNumber","currencyCode","BentoCurrencyISOCode","BentoCurrencyISOCode2","__default__","slots","useSlots","formattedCurrencyParts","computed","rawCurrencyValue","props","getSlotText","formattedCurrencyCode","onMounted","deprecate"],"mappings":";;;;;;AAWO,MAAAA,IAAA;AAAA,EAAwC;AAAA,IAC3C,UAAA;AAAA,IACc,YAAA;AAAA,MACE;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,IACA;AAAA,EACJ;AAAA,EACJ;AAAA,IACA,UAAA;AAAA,IACc,YAAA,CAAA,KAAA;AAAA,EACQ;AAAA,EACtB;AAAA,IACA,UAAA;AAAA,IACc,YAAA,CAAA,OAAA,OAAA,OAAA,OAAA,OAAA,OAAA,KAAA;AAAA,EACkD;AAEpE,GClCOC,IAAA,CAAAC,MAAAF,EAAA,KAAA,CAAAG,MAAAA,EAAA,WAAA,SAAAD,CAAA,CAAA;AAcA,SAAAE,EAAAF,GAAA;AACH,QAAAG,IAAAJ,EAAAC,CAAA;AAEA,UAAAG,KAAA,gBAAAA,EAAA,aAAA;AACJ;AASO,MAAAC,IAAA,CAAAC,GAAAL,MAAAK,IAAA,MAAAH,EAAAF,CAAA,GCLPM,IAAA;AAuBO,SAAAC,IAAA;AACH,QAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAEAC,IAAA,YAWAC,IAAA,CAAAN,GAAAO,MAAA;;AAII,UAAAC,KAAAD,KAAA,gBAAAA,EAAA,aAAAN,GAGAQ,IAAA,OAAAT,CAAA,KAAA;AAEA,IAAA,MAAA,OAAAA,CAAA,CAAA,KACIU;AAAA,MAAA;AAAA,IACI;AAKR,UAAAC,IAAAJ,KAAA,QAAAA,EAAA,aAAAE,IAAAV,EAAAU,GAAAD,CAAA,GAKAI,MAAAC,IAAAnB,EAAAc,CAAA,MAAA,gBAAAK,EAAA,aAAAhB,EAAAW,CAAA,GAGAM,IAAAX,EAAAQ,GAAA;AAAA,MAAoD,OAAA;AAAA,MACzC,UAAAH;AAAA,MACG,eAAAD,KAAA,gBAAAA,EAAA,iBAAAF;AAAA,MACmC,iBAAA;AAAA,MAC5B,uBAAAO;AAAA,MACM,uBAAAA;AAAA,IACA,CAAA,GAI3BG,IAAA,IAAA,OAAA,OAAAP,CAAA,MAAA;AAGA,WAAA;AAAA,MAAO,gBAFPM,EAAA,QAAAC,GAAA,EAAA;AAAA,MAGoB,cAAAP;AAAA,IACF;AAAA,EAClB,GAkBJQ,IAAA,CAAAhB,GAAAO,MAAAU,EAAAjB,GAAAO,CAAA,EAAA,mBAcAU,IAAA,CAAAjB,GAAAO,MAAA;AAII,UAAA,EAAA,gBAAAW,GAAA,cAAAC,EAAA,IAAAb,EAAAN,GAAAO,CAAA;AAEA,WAAA;AAAA,MAAO,gBAAAW;AAAA,MACH,cAAAC;AAAA,MACA,mBAAA,GAAAD,CAAA,IAAAC,CAAA;AAAA,IACyD;AAAA,EAC7D;AAGJ,SAAA;AAAA,IAAO,gBAAAH;AAAA,IACH,qBAAAC;AAAA,EACA;AAER;ACpHO,IAAAG,IAAA,kBAAAC,OACHA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OAzKQA,IAAAD,KAAA,CAAA,CAAA;ACqCR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,CAAA;AAAA;AAEV;;;;;;;;;;;iBAzDAC,IAAAC,EAAA,GAWA,EAAA,qBAAAP,EAAA,IAAAf,EAAA,GAEAuB,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAC,EAAA,SAAAC,EAAAN,CAAA,EAAA,SAAA;AAEA,aAAAN,EAAAU,GAAA;AAAA,QAA6C,UAAAC,EAAA;AAAA,QACzB,cAAAA,EAAA;AAAA,QACI,YAAAA,EAAA;AAAA,MACF,CAAA;AAAA,IACrB,CAAA,GAELE,IAAAJ,EAAA,MAAA,IAAAD,EAAA,MAAA,YAAA,EAAA;AAEA,WAAAM,EAAA,MAAA;AACI,MAAAF,EAAAN,CAAA,EAAA,SAAA,KACIS;AAAA,QAAA;AAAA,QACI;AAAA;AAAA;AAAA,QACA;AAAA,MAGA;AAAA,IAER,CAAA;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"currency.POwX-Trj.js","sources":["../../src/utils/ts/currency/currency-map.ts","../../src/utils/ts/currency/currency.ts","../../src/composables/use-bento-currency/use-bento-currency.ts","../../src/components/currency/currency.types.ts","../../src/components/currency/currency.vue"],"sourcesContent":["export interface CurrencyMap {\n exponent: number;\n currencies: Array<string>;\n}\n\n/*\n Contains mapping configuration between currency code and exponent for amount in the corresponding currency.\n * https://docs.adyen.com/development-resources/currency-codes\n \n @internal\n /\nexport const currencyMap: Array<CurrencyMap> = [\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 { currencyMap, type CurrencyMap } from './currency-map';\nimport { type CurrencyAmount } from './currency.types';\n\n/\n Returns exponent for specified currency code that do not adhere to the ISO 4217 standard.\n /\nexport const getNonStandardCurrency = (currency: string): CurrencyMap =>\n currencyMap.find(item => item.currencies.includes(currency));\n\n/\n Returns the number of minor units (decimal places) for a given currency.\n * The function uses an internal map for currencies with non-standard decimal places and defaults to 2 for all others.\n \n @param currency - The three-letter ISO 4217 currency code (e.g., 'USD', 'JPY').\n * @returns The number of decimal places for the currency.\n \n @example\n * getMinorUnitDigits('USD'); // Returns 2\n * getMinorUnitDigits('JPY'); // Returns 0\n /\nexport function getMinorUnitDigits(currency: string): number {\n const exception = getNonStandardCurrency(currency);\n\n return exception?.exponent ?? 2;\n}\n\n/\n Converts a currency amount from minor units to major units.\n \n @param amount The amount in minor units (e.g., cents).\n * @param currency The three-letter ISO 4217 currency code.\n * @returns The amount in major units (e.g., dollars).\n /\nexport const getNormalizedAmount = (amount: CurrencyAmount['value'], currency: string) =>\n amount / 10 * getMinorUnitDigits(currency);\n","import { getMinorUnitDigits, getNonStandardCurrency, getNormalizedAmount } from '@/utils/ts/currency';\nimport { useI18n } from '@/utils/ts/i18n';\nimport { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\nimport { type BentoCurrencyISOCode } from '../../components/currency/currency.types';\n\nexport interface UseBentoCurrencyFormatCurrencyOptions {\n currency?: `${BentoCurrencyISOCode}`;\n currencySign?: Intl.NumberFormatOptions['currencySign'];\n majorUnits?: boolean;\n}\n\nexport interface UseBentoCurrencyParts {\n /*\n The localized number portion of the formatted currency.\n /\n currencyNumber: string;\n\n /\n The ISO currency code used for formatting.\n /\n currencyCode: string;\n\n /\n The complete formatted currency string.\n /\n formattedCurrency: string;\n}\n\nconst DEFAULT_CURRENCY = 'USD';\n\n/\n A composable that returns a fully formatted and localized currency string.\n * It enforces the format `[localized number][non-breaking space][ISO code]`.\n \n @remarks\n * The formatting process involves several steps:\n * 1. It safely resolves the input `value`, whether it's from a prop or a slot, into a valid number.\n \n 2. If `majorUnits` is false, it converts the amount from minor units to major units\n * (e.g., cents to dollars) by dividing by 10 to the power of the currency's\n * decimal places (the \"exponent\"). For example, `12345 / (10 ** 2)` becomes `123.45`.\n \n 3. It determines the correct number of decimal places, respecting any non-standard\n * currency exceptions.\n \n 4. It uses `vue-i18n` to format the number with the correct sign placement and decimal/thousand\n * separators for the current locale, then manually reconstructs the string to ensure\n * the ISO code is always at the end.\n \n @returns An object with a function to format the currency string.\n /\nexport function useBentoCurrency() {\n const { n } = useI18n();\n\n const DEFAULT_CURRENCY_SIGN = 'standard';\n\n /\n Resolves the shared formatting details used by currency string and currency parts formatters.\n \n @param amount The numeric value to be formatted. If `formatOptions.majorUnits` is `false` or undefined,\n * this value is treated as being in the currency's minor units (e.g., cents).\n * @param formatOptions An optional object containing options for currency formatting.\n \n @returns The localized number and ISO currency code.\n /\n const getCurrencyFormatDetails = (\n amount: string \| number,\n formatOptions?: UseBentoCurrencyFormatCurrencyOptions\n ) => {\n const targetCurrency = formatOptions?.currency ?? DEFAULT_CURRENCY;\n\n // Parse and Fallback\n const parsedValue = Number(amount) \|\| 0;\n\n if (isNaN(Number(amount))) {\n printDevelopmentWarning(\n 'The value provided is not a valid string with numbers or valid number. Falling back to 0.'\n );\n }\n\n // Normalize Amount\n const normalizedAmount = formatOptions?.majorUnits\n ? parsedValue\n : getNormalizedAmount(parsedValue, targetCurrency);\n\n // Determine Precision\n const fractionDigits = getNonStandardCurrency(targetCurrency)?.exponent ?? getMinorUnitDigits(targetCurrency);\n\n // Format with Locale\n const localizedCurrencyString = n(normalizedAmount, {\n style: 'currency',\n currency: targetCurrency,\n currencySign: formatOptions?.currencySign ?? DEFAULT_CURRENCY_SIGN,\n currencyDisplay: 'code',\n minimumFractionDigits: fractionDigits,\n maximumFractionDigits: fractionDigits,\n });\n\n // Enforce Standard Format: `[number][nbsp][code]`\n const isoCodeRegex = new RegExp(`\\\\s${targetCurrency}\\\\s`);\n const numberPart = localizedCurrencyString.replace(isoCodeRegex, '');\n\n return {\n currencyNumber: numberPart,\n currencyCode: targetCurrency,\n };\n };\n\n /\n Formats a given amount into a localized currency string with a specific structure.\n \n This function ensures that the output format is always `[localized number][non-breaking space][ISO code]`,\n * providing a consistent and predictable currency representation across different locales.\n \n @param amount The numeric value to be formatted. If `formatOptions.majorUnits` is `false` or undefined,\n * this value is treated as being in the currency's minor units (e.g., cents).\n * @param formatOptions An optional object containing options for currency formatting.\n * - `currency`: The 3-letter ISO currency code (e.g., `'USD'`, `'EUR'`). Defaults to `'USD'`.\n * - `currencySign`: The currency sign to use. Can be `'standard'` or `'accounting'`. Defaults to `'standard'`. In `accounting` mode, negative values are typically wrapped in parentheses.\n * - `majorUnits`: Set to `true` if the `amount` is already in major units (e.g., dollars instead of cents). Defaults to `false`.\n \n @returns A fully formatted and localized currency string (e.g., \"1,234.56 EUR\").\n /\n const formatCurrency = (amount: string \| number, formatOptions?: UseBentoCurrencyFormatCurrencyOptions): string =>\n formatCurrencyParts(amount, formatOptions).formattedCurrency;\n /\n Formats a given amount into separate currency parts for consumers that need custom markup.\n \n This function reuses the shared currency formatting details to keep parsing, normalization, precision, locale formatting,\n * and final string construction aligned with the standard currency formatter.\n \n @param amount The numeric value to be formatted. If `formatOptions.majorUnits` is `false` or undefined,\n * this value is treated as being in the currency's minor units (e.g., cents).\n * @param formatOptions An optional object containing options for currency formatting.\n \n @returns The localized number, ISO currency code, and complete formatted currency string.\n /\n const formatCurrencyParts = (\n amount: string \| number,\n formatOptions?: UseBentoCurrencyFormatCurrencyOptions\n ): UseBentoCurrencyParts => {\n const { currencyNumber, currencyCode } = getCurrencyFormatDetails(amount, formatOptions);\n\n return {\n currencyNumber,\n currencyCode,\n formattedCurrency: `${currencyNumber}\\u00A0${currencyCode}`,\n };\n };\n\n return {\n formatCurrency,\n formatCurrencyParts,\n };\n}\n","export interface BentoCurrencyProps {\n /\n Currency code based on the ISO 4217 standard\n /\n currency?: BentoCurrencyISOCode \| `${BentoCurrencyISOCode}`;\n\n /\n Disable the default typography for the component. Only use this when the component is inside another typography component.\n /\n disableTypography?: boolean;\n\n /\n Accepts currency value in major units instead of minor ones\n /\n majorUnits?: boolean;\n\n /\n Currency value to be formatted\n /\n value?: number;\n\n /\n Determines how the currency symbol and negative values are displayed.\n * This is only applicable to certain countries such as `en-US`.\n \n - `'standard'`: Default format (e.g., `-1,234.56 USD`).\n * - `'accounting'`: Uses accounting conventions, such as wrapping negative numbers in parentheses (e.g., `(1,234.56) USD`).\n \n @default 'standard'\n /\n currencySign?: Intl.NumberFormatOptions['currencySign'];\n\n /\n Makes only the numeric part of the formatted currency bold.\n /\n strongerAmount?: boolean;\n}\n\nexport enum BentoCurrencyISOCode {\n AED = 'AED',\n AFA = 'AFA',\n ALL = 'ALL',\n AMD = 'AMD',\n ANG = 'ANG',\n AOA = 'AOA',\n ARS = 'ARS',\n AUD = 'AUD',\n AWG = 'AWG',\n AZN = 'AZN',\n BAM = 'BAM',\n BBD = 'BBD',\n BDT = 'BDT',\n BEF = 'BEF',\n BGN = 'BGN',\n BHD = 'BHD',\n BIF = 'BIF',\n BMD = 'BMD',\n BND = 'BND',\n BOB = 'BOB',\n BRL = 'BRL',\n BSD = 'BSD',\n BTC = 'BTC',\n BTN = 'BTN',\n BWP = 'BWP',\n BYR = 'BYR',\n BZD = 'BZD',\n CAD = 'CAD',\n CDF = 'CDF',\n CHF = 'CHF',\n CLF = 'CLF',\n CLP = 'CLP',\n CNY = 'CNY',\n COP = 'COP',\n CRC = 'CRC',\n CUC = 'CUC',\n CVE = 'CVE',\n CZK = 'CZK',\n DEM = 'DEM',\n DJF = 'DJF',\n DKK = 'DKK',\n DOP = 'DOP',\n DZD = 'DZD',\n EEK = 'EEK',\n EGP = 'EGP',\n ERN = 'ERN',\n ETB = 'ETB',\n EUR = 'EUR',\n FJD = 'FJD',\n FKP = 'FKP',\n GBP = 'GBP',\n GEL = 'GEL',\n GHS = 'GHS',\n GIP = 'GIP',\n GMD = 'GMD',\n GNF = 'GNF',\n GRD = 'GRD',\n GTQ = 'GTQ',\n GYD = 'GYD',\n HKD = 'HKD',\n HNL = 'HNL',\n HRK = 'HRK',\n HTG = 'HTG',\n HUF = 'HUF',\n IDR = 'IDR',\n ILS = 'ILS',\n INR = 'INR',\n IQD = 'IQD',\n IRR = 'IRR',\n ISK = 'ISK',\n ITL = 'ITL',\n JMD = 'JMD',\n JOD = 'JOD',\n JPY = 'JPY',\n KES = 'KES',\n KGS = 'KGS',\n KHR = 'KHR',\n KMF = 'KMF',\n KPW = 'KPW',\n KRW = 'KRW',\n KWD = 'KWD',\n KYD = 'KYD',\n KZT = 'KZT',\n LAK = 'LAK',\n LBP = 'LBP',\n LKR = 'LKR',\n LRD = 'LRD',\n LSL = 'LSL',\n LTC = 'LTC',\n LTL = 'LTL',\n LVL = 'LVL',\n LYD = 'LYD',\n MAD = 'MAD',\n MDL = 'MDL',\n MGA = 'MGA',\n MKD = 'MKD',\n MMK = 'MMK',\n MNT = 'MNT',\n MOP = 'MOP',\n MRO = 'MRO',\n MRU = 'MRU',\n MUR = 'MUR',\n MVR = 'MVR',\n MWK = 'MWK',\n MXN = 'MXN',\n MYR = 'MYR',\n MZM = 'MZM',\n NAD = 'NAD',\n NGN = 'NGN',\n NIO = 'NIO',\n NOK = 'NOK',\n NPR = 'NPR',\n NZD = 'NZD',\n OMR = 'OMR',\n PAB = 'PAB',\n PEN = 'PEN',\n PGK = 'PGK',\n PHP = 'PHP',\n PKR = 'PKR',\n PLN = 'PLN',\n PYG = 'PYG',\n QAR = 'QAR',\n RON = 'RON',\n RSD = 'RSD',\n RUB = 'RUB',\n RWF = 'RWF',\n SAR = 'SAR',\n SBD = 'SBD',\n SCR = 'SCR',\n SDG = 'SDG',\n SEK = 'SEK',\n SGD = 'SGD',\n SHP = 'SHP',\n SKK = 'SKK',\n SLL = 'SLL',\n SOS = 'SOS',\n SRD = 'SRD',\n SSP = 'SSP',\n STD = 'STD',\n SVC = 'SVC',\n SYP = 'SYP',\n SZL = 'SZL',\n THB = 'THB',\n TJS = 'TJS',\n TMT = 'TMT',\n TND = 'TND',\n TOP = 'TOP',\n TRY = 'TRY',\n TTD = 'TTD',\n TWD = 'TWD',\n TZS = 'TZS',\n UAH = 'UAH',\n UGX = 'UGX',\n USD = 'USD',\n UYU = 'UYU',\n UZS = 'UZS',\n VEF = 'VEF',\n VND = 'VND',\n VUV = 'VUV',\n WST = 'WST',\n XAF = 'XAF',\n XCD = 'XCD',\n XDR = 'XDR',\n XOF = 'XOF',\n XPF = 'XPF',\n YER = 'YER',\n ZAR = 'ZAR',\n ZMK = 'ZMK',\n ZWL = 'ZWL',\n}\n","<template>\n <div class=\"b-currency\" :aria-label=\"formattedCurrencyParts.formattedCurrency\">\n <bento-typography v-if=\"!disableTypography\" class=\"b-currency__amount\" el=\"span\" variant=\"body\" strong>\n <bento-typography el=\"span\" :strongest=\"strongerAmount\">{{\n formattedCurrencyParts.currencyNumber\n }}</bento-typography>\n <span>{{ formattedCurrencyCode }}</span>\n </bento-typography>\n\n <template v-else>{{ formattedCurrencyParts.formattedCurrency }}</template>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, onMounted, useSlots } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { useBentoCurrency } from '@/composables/use-bento-currency/use-bento-currency';\n import { deprecate } from '@/utils/ts/deprecate';\n import { getSlotText } from '@/utils/ts/get-slot-text';\n import { BentoCurrencyISOCode, type BentoCurrencyProps } from './currency.types';\n\n const slots = useSlots();\n\n const props = defineProps({\n currency: { default: BentoCurrencyISOCode.EUR },\n disableTypography: { type: Boolean, default: false },\n majorUnits: { type: Boolean, default: false },\n value: { default: undefined },\n currencySign: { default: 'standard' },\n strongerAmount: { type: Boolean }\n});\n\n const { formatCurrencyParts } = useBentoCurrency();\n\n const formattedCurrencyParts = computed(() => {\n const rawCurrencyValue = props.value ?? getSlotText(slots)('default');\n\n return formatCurrencyParts(rawCurrencyValue, {\n currency: props.currency,\n currencySign: props.currencySign,\n majorUnits: props.majorUnits,\n });\n });\n const formattedCurrencyCode = computed(() => `\\u00A0${formattedCurrencyParts.value.currencyCode}`);\n\n onMounted(() => {\n if (getSlotText(slots)('default')) {\n deprecate(\n 'BentoCurrency \"default\" slot',\n `The use of \"default\" slot in \"BentoCurrency\" is no longer supported as it causes issues with dynamic content.\n Use the \"value\" property instead.\n <bento-currency :value=\"12345.67\" currency=\"USD\" major-units=\"false\" />`,\n '2.0.0'\n );\n }\n });\n</script>\n\n<script lang=\"ts\">\n /\n A Currency component is used to display a formatted currency value.\n \n @example\n * import { BentoCurrency, BentoCurrencyISOCode } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoCurrency },\n * template: `\n * <bento-currency\n * :currency=\"BentoCurrencyISOCode.USD\"\n * :value=\"76.33\"\n * />\n * `\n * }\n */\n export default {\n name: 'bento-currency',\n i18n: {}, // required to enable E2E to run as they do not have vue-i18n set up\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./currency.scss\" />\n"],"names":["currencyMap","getNonStandardCurrency","currency","item","getMinorUnitDigits","getNormalizedAmount","amount","DEFAULT_CURRENCY","useBentoCurrency","n","useI18n","DEFAULT_CURRENCY_SIGN","getCurrencyFormatDetails","formatOptions","targetCurrency","parsedValue","printDevelopmentWarning","normalizedAmount","fractionDigits","localizedCurrencyString","isoCodeRegex","formatCurrency","formatCurrencyParts","currencyNumber","currencyCode","BentoCurrencyISOCode","BentoCurrencyISOCode2","__default__","slots","useSlots","formattedCurrencyParts","computed","rawCurrencyValue","props","getSlotText","formattedCurrencyCode","onMounted","deprecate"],"mappings":"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AAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OAzKQA,IAAAD,KAAA,CAAA,CAAA;ACqCR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,CAAA;AAAA;AAEV;;;;;;;;;;;iBAzDAC,IAAAC,EAAA,GAWA,EAAA,qBAAAP,EAAA,IAAAd,EAAA,GAEAsB,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAC,EAAA,SAAAC,EAAAN,CAAA,EAAA,SAAA;AAEA,aAAAN,EAAAU,GAAA;AAAA,QAA6C,UAAAC,EAAA;AAAA,QACzB,cAAAA,EAAA;AAAA,QACI,YAAAA,EAAA;AAAA,MACF,CAAA;AAAA,IACrB,CAAA,GAELE,IAAAJ,EAAA,MAAA,IAAAD,EAAA,MAAA,YAAA,EAAA;AAEA,WAAAM,EAAA,MAAA;AACI,MAAAF,EAAAN,CAAA,EAAA,SAAA,KACIS;AAAA,QAAA;AAAA,QACI;AAAA;AAAA;AAAA,QACA;AAAA,MAGA;AAAA,IAER,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/dashboard-section.Bmu65OHg.js ADDED Viewed

@@ -0,0 +1,98 @@
+import { defineComponent as h, useSlots as m, ref as _, computed as o, watch as p, onUnmounted as g, onMounted as w } from "vue";
+import { B as v } from "./header.DUAxdw_d.js";
+import { a as $, B as I } from "./tab.DFk4K9cq.js";
+import { a as R } from "./index.CL3TXc0a.js";
+import { o as x } from "./resize.Bqks3WUm.js";
+import { u as C } from "./use-has-slot.C9lQZ6nz.js";
+import { n as y } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as H } from "./divider.DX5gwN7p.js";
+import "../assets/dashboard-section.css";
+const O = {}, P = /* @__PURE__ */ h({
+  ...O,
+  __name: "dashboard-template",
+  props: {
+    header: null,
+    tabs: { default: void 0 },
+    stickyTabs: { type: Boolean, default: !1 },
+    stickyFilters: { type: Boolean, default: !1 }
+  },
+  setup(l) {
+    const t = l, e = m(), s = C(e), i = _(), a = _(null), b = _(!1);
+    let r = null;
+    const c = _(0), d = o(() => a.value && t.stickyFilters), f = o(() => i.value && t.stickyTabs), T = o(() => ({
+      "b-dashboard-template__filters--sticky": t.stickyFilters,
+      "b-dashboard-template__filters--show-border": d.value && !f.value && b.value
+    })), S = o(() => ({
+      "b-dashboard-template__top-section--sticky": t.stickyTabs || t.stickyFilters
+    })), k = o(() => Object.keys(e).filter((n) => n?.includes("tab-"))), B = (n) => t?.tabs.tabs?.[n]?.title ?? `Tab ${n + 1}`, F = o(() => c.value ? { top: c.value } : void 0), { y: u } = R();
+    return p(
+      () => a.value,
+      () => {
+        !r && a.value && (r = x(a.value, () => {
+          if (a.value && f.value) {
+            const n = a.value.offsetHeight;
+            c.value = d.value ? n : 0;
+          }
+        }));
+      }
+    ), p(
+      () => u.value,
+      () => {
+        d.value && (b.value = a.value?.getBoundingClientRect().top === 0);
+      }
+    ), g(() => {
+      r?.disconnect();
+    }), { __sfc: !0, props: t, slots: e, hasSlot: s, tabsRef: i, filtersRef: a, isFiltersPinned: b, filtersElementObserver: r, tabsPosition: c, hasStickyFilters: d, hasStickyTabs: f, dashboardFiltersConditionalClasses: T, dashboardTopSectionConditionalClasses: S, tabsSlots: k, getTabTitle: B, computedTabsOptions: F, y: u, BentoHeader: v, BentoTab: I, BentoTabs: $ };
+  }
+});
+var W = function() {
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e("main", { staticClass: "b-dashboard-template" }, [e(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)), e("div", { staticClass: "b-dashboard-template__top-section", class: s.dashboardTopSectionConditionalClasses }, [s.hasSlot("filters") ? e("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 ? e(s.BentoTabs, { ref: "tabsRef", attrs: { "active-tab-index": t.tabs.activeTabIndex, sticky: t.stickyTabs, "sticky-options": s.computedTabsOptions, "data-testid": "tabs" } }, t._l(s.tabsSlots, function(i, a) {
+    return e(s.BentoTab, { key: `tab-${a}`, attrs: { title: s.getTabTitle(a) } }, [e("div", { staticClass: "b-dashboard-template__container b-dashboard-template__container--tabs" }, [t._t(`tab-${a + 1}`)], 2)]);
+  }), 1) : e("div", { staticClass: "b-dashboard-template__container" }, [t._t("default")], 2)], 1)], 1);
+}, E = [], z = /* @__PURE__ */ y(
+  P,
+  W,
+  E,
+  !1,
+  null,
+  "075794ed"
+);
+const X = z.exports, D = {}, j = /* @__PURE__ */ h({
+  ...D,
+  __name: "dashboard-section",
+  props: {
+    header: null,
+    halfWidth: { type: Boolean, default: !1 }
+  },
+  setup(l) {
+    const t = l, e = m(), s = C(e), i = o(() => ({
+      "b-dashboard-section--half-width": t.halfWidth
+    }));
+    return w(() => {
+      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: e, hasSlot: s, conditionalClasses: i, BentoHeader: v, BentoDivider: H };
+  }
+});
+var M = function() {
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e("div", { staticClass: "b-dashboard-section", class: s.conditionalClasses }, [e(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") ? e("div", { staticClass: "b-dashboard-section__controls" }, [t._t("controls")], 2) : t._e(), !s.hasSlot("content-col-1") && !s.hasSlot("content-col-2") ? e("div", { staticClass: "b-dashboard-section__content" }, [t._t("default")], 2) : e("div", { staticClass: "b-dashboard-section__columns" }, [e("div", { staticClass: "b-dashboard-section__content" }, [t._t("content-col-1")], 2), e("div", { staticClass: "b-dashboard-section__content" }, [t._t("content-col-2")], 2)]), e(s.BentoDivider, { staticClass: "b-dashboard-section__divider" })], 1);
+}, U = [], q = /* @__PURE__ */ y(
+  j,
+  M,
+  U,
+  !1,
+  null,
+  "df6a2511"
+);
+const Y = q.exports;
+export {
+  X as a,
+  Y as d
+};
+//# sourceMappingURL=dashboard-section.Bmu65OHg.js.map

package/dist/chunks/{dashboard-section.D2yqhERq.js.map → dashboard-section.Bmu65OHg.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dashboard-section.D2yqhERq.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 :sticky=\"stickyTabs\"\n :sticky-options=\"computedTabsOptions\"\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 = defineProps({\n header: null,\n tabs: { default: undefined },\n stickyTabs: { type: Boolean, default: false },\n stickyFilters: { type: Boolean, default: false }\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 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 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 computedTabsOptions = computed(() => (tabsPosition.value ? { top: tabsPosition.value } : undefined));\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 }\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 }\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 = defineProps({\n header: null,\n halfWidth: { type: Boolean, default: false }\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","tabsPosition","hasStickyFilters","computed","props","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","_b","_a","computedTabsOptions","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;AA6II,MAAAA,IAAA,CAAA;;;;;;;;;;iBAtFAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,EAAA;AACA,QAAAG,IAAA;AACA,UAAAC,IAAAJ,EAAA,CAAA,GAEAK,IAAAC,EAAA,MAAAL,EAAA,SAAAM,EAAA,aAAA,GACAC,IAAAF,EAAA,MAAAP,EAAA,SAAAQ,EAAA,UAAA,GAEAE,IAAAH,EAAA,OAAA;AAAA,MAA2D,yCAAAC,EAAA;AAAA,MACR,8CAAAF,EAAA,SAAA,CAAAG,EAAA,SAAAN,EAAA;AAAA,IAEuB,EAAA,GAG1EQ,IAAAJ,EAAA,OAAA;AAAA,MAA8D,6CAAAC,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EI,IAAAL,EAAA,MAAA,OAAA,KAAAX,CAAA,EAAA,OAAA,CAAAiB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAT,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAS,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA,CAAA;AAAA,OAEAG,IAAAX,EAAA,MAAAF,EAAA,QAAA,EAAA,KAAAA,EAAA,MAAA,IAAA,MAAA,GAEA,EAAA,GAAAc,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAnB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAkB,EAAApB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAO,EAAA,OAAA;AACI,kBAAAc,IAAArB,EAAA,MAAA;AACA,YAAAG,EAAA,QAAAC,EAAA,QAAAiB,IAAA;AAAA,UAA8D;AAAA,QAClE,CAAA;AAAA,MAER;AAAA,IACJ,GAGJF;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAb,EAAA,UACIH,EAAA,UAAAc,IAAAf,EAAA,UAAA,gBAAAe,EAAA,wBAAA,SAAA;AAAA,MACJ;AAAA,IACJ,GAGJO,EAAA,MAAA;AACI,MAAApB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;qBCnCvCqB,IAAA,CAAA;;;;;;;;iBAzCA7B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA8B,IAAAnB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAmB,EAAA,MAAA;AACI,WAAA7B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAU,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"dashboard-section.Bmu65OHg.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 :sticky=\"stickyTabs\"\n :sticky-options=\"computedTabsOptions\"\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 = defineProps({\n header: null,\n tabs: { default: undefined },\n stickyTabs: { type: Boolean, default: false },\n stickyFilters: { type: Boolean, default: false }\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 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 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 computedTabsOptions = computed(() => (tabsPosition.value ? { top: tabsPosition.value } : undefined));\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 }\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 }\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 = defineProps({\n header: null,\n halfWidth: { type: Boolean, default: false }\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","tabsPosition","hasStickyFilters","computed","props","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","computedTabsOptions","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;AA6II,MAAAA,IAAA,CAAA;;;;;;;;;;iBAtFAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,EAAA;AACA,QAAAG,IAAA;AACA,UAAAC,IAAAJ,EAAA,CAAA,GAEAK,IAAAC,EAAA,MAAAL,EAAA,SAAAM,EAAA,aAAA,GACAC,IAAAF,EAAA,MAAAP,EAAA,SAAAQ,EAAA,UAAA,GAEAE,IAAAH,EAAA,OAAA;AAAA,MAA2D,yCAAAC,EAAA;AAAA,MACR,8CAAAF,EAAA,SAAA,CAAAG,EAAA,SAAAN,EAAA;AAAA,IAEuB,EAAA,GAG1EQ,IAAAJ,EAAA,OAAA;AAAA,MAA8D,6CAAAC,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EI,IAAAL,EAAA,MAAA,OAAA,KAAAX,CAAA,EAAA,OAAA,CAAAiB,MAAAA,GAAA,SAAA,MAAA,CAAA,CAAA,GAEAC,IAAA,CAAAC,MAAAP,GAAA,KAAA,OAAAO,CAAA,GAAA,SAAA,OAAAA,IAAA,CAAA,IAEAC,IAAAT,EAAA,MAAAF,EAAA,QAAA,EAAA,KAAAA,EAAA,MAAA,IAAA,MAAA,GAEA,EAAA,GAAAY,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAjB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAgB,EAAAlB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAO,EAAA,OAAA;AACI,kBAAAY,IAAAnB,EAAA,MAAA;AACA,YAAAG,EAAA,QAAAC,EAAA,QAAAe,IAAA;AAAA,UAA8D;AAAA,QAClE,CAAA;AAAA,MAER;AAAA,IACJ,GAGJF;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;AAEJ,QAAAX,EAAA,UACIH,EAAA,QAAAD,EAAA,OAAA,sBAAA,EAAA,QAAA;AAAA,MACJ;AAAA,IACJ,GAGJoB,EAAA,MAAA;AACI,MAAAlB,GAAA,WAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;qBCnCvCmB,IAAA,CAAA;;;;;;;;iBAzCA3B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA4B,IAAAjB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAiB,EAAA,MAAA;AACI,WAAA3B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAU,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{dashed-underline.ByPcIHNe.js → dashed-underline.CbzCYKrk.js} RENAMED Viewed

@@ -1,9 +1,9 @@
-import { defineComponent as v, useSlots as u, ref as c, computed as l, watch as f } from "vue";
-import { e as m, h as _ } from "./button-actions.Dpbx0xf3.js";
+import { defineComponent as v, useSlots as u, ref as c, computed as i, watch as f } from "vue";
+import { e as m, h as _ } from "./button-actions.CxX7lK7z.js";
 import { u as h } from "./use-has-slot.C9lQZ6nz.js";
-import { B as T } from "./typography.C8lPlsbD.js";
-import { b as B } from "./tooltip.7ct8WxCl.js";
-import { u as b } from "./use-bento-delayed-hover.Bz_8EabW.js";
+import { B as T } from "./typography.D1OZJbEa.js";
+import { b as B } from "./tooltip.D_XsoD_u.js";
+import { u as b } from "./use-bento-delayed-hover.D6QjSugc.js";
 import { n as x } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/dashed-underline.css";
 const P = {}, g = /* @__PURE__ */ v({
@@ -20,10 +20,10 @@ const P = {}, g = /* @__PURE__ */ v({
     tooltipText: { default: null },
     tooltipPosition: { default: "top" }
   },
-  setup(p) {
-    const e = p, t = u(), o = h(t), r = c(null), { isOpen: n, hoverEvents: a } = b(), i = l(() => e.popoverText || o("popover-content")), s = l(() => !e.tooltipText && !i.value);
+  setup(r) {
+    const e = r, t = u(), o = h(t), s = c(null), { isOpen: l, hoverEvents: a } = b(), n = i(() => e.popoverText || o("popover-content")), p = i(() => !e.tooltipText && !n.value);
     return f(
-      s,
+      p,
       (d) => {
         if (d)
           throw new Error(
@@ -31,13 +31,12 @@ const P = {}, g = /* @__PURE__ */ v({
           );
       },
       { immediate: !0 }
-    ), { __sfc: !0, props: e, slots: t, hasSlot: o, element: r, isOpen: n, hoverEvents: a, hasPopover: i, shouldShowTooltipPopoverError: s, BentoPopover: _, vBentoTooltipDirective: B, BentoTypography: T, BentoTeleport: m };
+    ), { __sfc: !0, props: e, slots: t, hasSlot: o, element: s, isOpen: l, hoverEvents: a, hasPopover: n, shouldShowTooltipPopoverError: p, BentoPopover: _, vBentoTooltipDirective: B, BentoTypography: T, BentoTeleport: m };
   }
 });
 var S = function() {
-  var r, n;
   var e = this, t = e._self._c, o = e._self._setupProxy;
-  return t("span", e._g({ directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive:[tooltipPosition]", value: e.tooltipText, expression: "tooltipText", arg: e.tooltipPosition }], ref: "element", staticClass: "b-dashed-underline", attrs: { tabindex: "0" } }, o.hoverEvents), [t("span", { staticClass: "b-dashed-underline__content" }, [e._t("default")], 2), o.element && o.hasPopover ? t(o.BentoTeleport, { attrs: { disabled: (r = e.teleport) == null ? void 0 : r.disabled, to: (n = e.teleport) == null ? void 0 : n.to } }, [t("span", e._g({}, o.hoverEvents), [t(o.BentoPopover, { attrs: { open: o.isOpen, "target-element": o.element, position: e.popoverPosition, role: "tooltip", "fit-content": e.popoverSize === "fit-content" || void 0, large: e.popoverSize === "large" || void 0, small: e.popoverSize === "small" || void 0, title: e.popoverTitle, "disable-focus-trap": "" } }, [e._t("popover-content", function() {
+  return t("span", e._g({ directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive:[tooltipPosition]", value: e.tooltipText, expression: "tooltipText", arg: e.tooltipPosition }], ref: "element", staticClass: "b-dashed-underline", attrs: { tabindex: "0" } }, o.hoverEvents), [t("span", { staticClass: "b-dashed-underline__content" }, [e._t("default")], 2), o.element && o.hasPopover ? t(o.BentoTeleport, { attrs: { disabled: e.teleport?.disabled, to: e.teleport?.to } }, [t("span", e._g({}, o.hoverEvents), [t(o.BentoPopover, { attrs: { open: o.isOpen, "target-element": o.element, position: e.popoverPosition, role: "tooltip", "fit-content": e.popoverSize === "fit-content" || void 0, large: e.popoverSize === "large" || void 0, small: e.popoverSize === "small" || void 0, title: e.popoverTitle, "disable-focus-trap": "" } }, [e._t("popover-content", function() {
     return [t(o.BentoTypography, [e._v(" " + e._s(e.popoverText) + " ")])];
   })], 2)], 1)]) : e._e()], 1);
 }, y = [], w = /* @__PURE__ */ x(
@@ -52,4 +51,4 @@ const k = w.exports;
 export {
   k as B
 };
-//# sourceMappingURL=dashed-underline.ByPcIHNe.js.map
+//# sourceMappingURL=dashed-underline.CbzCYKrk.js.map

package/dist/chunks/{dashed-underline.ByPcIHNe.js.map → dashed-underline.CbzCYKrk.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dashed-underline.~~ByPcIHNe~~.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 v-on=\"hoverEvents\"\n >\n <span class=\"b-dashed-underline__content\">\n <slot></slot>\n </span>\n <bento-teleport v-if=\"element && hasPopover\" :disabled=\"teleport?.disabled\" :to=\"teleport?.to\">\n <span v-on=\"hoverEvents\">\n <bento-popover\n :open=\"isOpen\"\n :target-element=\"element\"\n :position=\"popoverPosition\"\n role=\"tooltip\"\n :fit-content=\"popoverSize === 'fit-content' \|\| undefined\"\n :large=\"popoverSize === 'large' \|\| undefined\"\n :small=\"popoverSize === 'small' \|\| undefined\"\n :title=\"popoverTitle\"\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 </bento-teleport>\n </span>\n</template>\n\n<script lang=\"ts\" setup>\n import { computed, ref, useSlots, watch } from 'vue';\n import { BentoPopover } from '@/components/popover';\n import { useBentoDelayedHover } from '@/composables';\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip/index';\n import { BentoTypography } from '@/components/typography';\n import { useHasSlot } from '@/composables';\n import { BentoTeleport } from '@/internal';\n import { type BentoDashedUnderlineProps } from './dashed-underline.types';\n\n const props = defineProps({\n popoverText: { default: null },\n popoverTitle: { default: null },\n popoverPosition: { default: 'top' },\n popoverSize: { default: 'fit-content' },\n teleport: { default: () => ({\n disabled: true,\n }) },\n tooltipText: { default: null },\n tooltipPosition: { default: 'top' }\n});\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const element = ref<HTMLSpanElement>(null);\n\n const { isOpen, hoverEvents } = useBentoDelayedHover();\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 Provides a dashed underline to text, indicating that more information is available on\n * hover or focus. The additional information is displayed in a tooltip or a popover.\n \n @example\n * import { BentoDashedUnderline } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoDashedUnderline },\n * template: `\n * <p>\n * This is some <bento-dashed-underline tooltip-text=\"A short explanation\">annotated text</bento-dashed-underline>.\n * </p>\n * `\n * }\n */\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashed-underline.scss\" />\n"],"names":["__default__","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","hoverEvents","useBentoDelayedHover","hasPopover","computed","props","shouldShowTooltipPopoverError","watch","value"],"mappings":";;;;;;;;AAkGI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;iBAzCAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GAEA,EAAA,QAAAC,GAAA,aAAAC,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,eAAAT,EAAA,iBAAA,CAAA,GAEAU,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~~;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"dashed-underline.CbzCYKrk.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 v-on=\"hoverEvents\"\n >\n <span class=\"b-dashed-underline__content\">\n <slot></slot>\n </span>\n <bento-teleport v-if=\"element && hasPopover\" :disabled=\"teleport?.disabled\" :to=\"teleport?.to\">\n <span v-on=\"hoverEvents\">\n <bento-popover\n :open=\"isOpen\"\n :target-element=\"element\"\n :position=\"popoverPosition\"\n role=\"tooltip\"\n :fit-content=\"popoverSize === 'fit-content' \|\| undefined\"\n :large=\"popoverSize === 'large' \|\| undefined\"\n :small=\"popoverSize === 'small' \|\| undefined\"\n :title=\"popoverTitle\"\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 </bento-teleport>\n </span>\n</template>\n\n<script lang=\"ts\" setup>\n import { computed, ref, useSlots, watch } from 'vue';\n import { BentoPopover } from '@/components/popover';\n import { useBentoDelayedHover } from '@/composables';\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip/index';\n import { BentoTypography } from '@/components/typography';\n import { useHasSlot } from '@/composables';\n import { BentoTeleport } from '@/internal';\n import { type BentoDashedUnderlineProps } from './dashed-underline.types';\n\n const props = defineProps({\n popoverText: { default: null },\n popoverTitle: { default: null },\n popoverPosition: { default: 'top' },\n popoverSize: { default: 'fit-content' },\n teleport: { default: () => ({\n disabled: true,\n }) },\n tooltipText: { default: null },\n tooltipPosition: { default: 'top' }\n});\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const element = ref<HTMLSpanElement>(null);\n\n const { isOpen, hoverEvents } = useBentoDelayedHover();\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 Provides a dashed underline to text, indicating that more information is available on\n * hover or focus. The additional information is displayed in a tooltip or a popover.\n \n @example\n * import { BentoDashedUnderline } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoDashedUnderline },\n * template: `\n * <p>\n * This is some <bento-dashed-underline tooltip-text=\"A short explanation\">annotated text</bento-dashed-underline>.\n * </p>\n * `\n * }\n */\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashed-underline.scss\" />\n"],"names":["__default__","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","hoverEvents","useBentoDelayedHover","hasPopover","computed","props","shouldShowTooltipPopoverError","watch","value"],"mappings":";;;;;;;;AAkGI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;iBAzCAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GAEA,EAAA,QAAAC,GAAA,aAAAC,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,eAAAT,EAAA,iBAAA,CAAA,GAEAU,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/chunks/data-grid-template.BvBHJ0sH.js ADDED Viewed

@@ -0,0 +1,102 @@
+import { defineComponent as R, useSlots as S, ref as r, computed as s, provide as I, toRef as u } from "vue";
+import { B as h } from "./header.DUAxdw_d.js";
+import { B } from "./inspector.Aet0jTC2.js";
+import { a as x, B as A } from "./tab.DFk4K9cq.js";
+import { u as E } from "./use-has-slot.C9lQZ6nz.js";
+import { D } from "./data-grid-template.keys.VezYtHtM.js";
+import { n as G } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/data-grid-template.css";
+const H = {}, O = /* @__PURE__ */ R({
+  ...H,
+  __name: "data-grid-template",
+  props: {
+    /**
+     * The header that goes to the top of the template
+     */
+    header: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * All the tab properties that can be set on the inner tab components.
+     *  - tabs.activeTabIndex: the currenly 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 additional content slot with a sticky positioning
+     */
+    stickyAdditionalContent: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Renders the tabs with a sticky positioning
+     */
+    stickyTabs: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * All the inspector properties that can be set on the inner inspector component.
+     */
+    inspector: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:tabs", "update:is-open:inspector", "update:active-page:inspector", "expand:inspector"],
+  setup(c, { emit: t }) {
+    const n = c, e = S(), d = E(e), a = r(null), i = r(null), f = r(null), _ = s(() => ({
+      "b-data-grid-template__additional-content--sticky": n.stickyAdditionalContent
+    })), b = s(() => ({
+      title: "",
+      ...n.inspector
+    })), m = s(() => i?.value?.offsetHeight), l = s(() => a.value?.$refs?.tablistwrapper), T = s(() => Object.keys(e).filter((o) => o?.includes("tab-"))), y = s(() => ({
+      "update:is-open": (o) => t("update:is-open:inspector", o),
+      "update:active-page": (o) => t("update:active-page:inspector", o),
+      expand: (o) => t("expand:inspector", o)
+    })), C = (o) => {
+      t("update:tabs", { ...n.tabs, activeTabIndex: o });
+    }, v = (o) => n?.tabs.tabs?.[o]?.title ?? `Tab ${o + 1}`, p = () => {
+      const k = u(n, "stickyTabs"), g = u(n, "stickyAdditionalContent");
+      return {
+        isDataGridTemplate: !0,
+        stickyTabs: k,
+        tabsRef: l,
+        stickyAdditionalContent: g,
+        additionalContentSlotRef: i
+      };
+    };
+    return I(D, p), { __sfc: !0, props: n, slots: e, hasSlot: d, emit: t, tabsRef: a, additionalContentRef: i, inspectorRef: f, additionalContentConditionalClasses: _, computedInspectorProps: b, computedStickyAdditionalContentHeight: m, computedTabsRef: l, tabsSlots: T, inspectorEvents: y, emitTabs: C, getTabTitle: v, registerDatagridInDataGridTemplate: p, BentoHeader: h, BentoInspector: B, BentoTab: A, BentoTabs: x };
+  }
+});
+var j = function() {
+  var t = this, n = t._self._c, e = t._self._setupProxy;
+  return n("main", { staticClass: "b-data-grid-template" }, [n(e.BentoInspector, t._g(t._b({ ref: "inspectorRef", scopedSlots: t._u([{ key: "page", fn: function() {
+    return [n("div", { staticClass: "b-data-grid-template__header" }, [t._t("header", function() {
+      return [n(e.BentoHeader, t._b({ scopedSlots: t._u([e.hasSlot("infoIconTooltipContent") ? { key: "infoIconTooltipContent", fn: function() {
+        return [t._t("infoIconTooltipContent")];
+      }, proxy: !0 } : null], null, !0) }, "bento-header", t.header, !1))];
+    })], 2), e.hasSlot("additionalContent") ? n("div", { ref: "additionalContentRef", staticClass: "b-data-grid-template__additional-content", class: e.additionalContentConditionalClasses }, [t._t("additionalContent")], 2) : t._e(), e.tabsSlots.length > 1 ? n(e.BentoTabs, { ref: "tabsRef", attrs: { "active-tab-index": t.tabs.activeTabIndex, sticky: t.stickyTabs, "sticky-options": t.stickyAdditionalContent ? { top: e.computedStickyAdditionalContentHeight } : null }, on: { "update:active-tab-index": e.emitTabs } }, t._l(e.tabsSlots, function(d, a) {
+      return n(e.BentoTab, { key: `tab-${a}`, attrs: { title: e.getTabTitle(a) } }, [t._t(`tab-${a + 1}`)], 2);
+    }), 1) : t._t("default")];
+  }, proxy: !0 }, { key: "content", fn: function() {
+    return [t._t("inspector-content")];
+  }, proxy: !0 }], null, !0) }, "bento-inspector", e.computedInspectorProps, !1), e.inspectorEvents))], 1);
+}, P = [], $ = /* @__PURE__ */ G(
+  O,
+  j,
+  P,
+  !1,
+  null,
+  "2ce69cd0"
+);
+const q = $.exports;
+export {
+  q as d
+};
+//# sourceMappingURL=data-grid-template.BvBHJ0sH.js.map