@adyen/bento-vue2 1.83.1 → 1.84.1

package/dist/chunks/nl.B6vCf2B9.js

@@ -0,0 +1,327 @@
+import { b as d, c as n, d as r, e as s } from "./en-US.BZii9jNW.js";
+const m = {
+  lessThanXSeconds: {
+    one: "minder dan een seconde",
+    other: "minder dan {{count}} seconden"
+  },
+  xSeconds: {
+    one: "1 seconde",
+    other: "{{count}} seconden"
+  },
+  halfAMinute: "een halve minuut",
+  lessThanXMinutes: {
+    one: "minder dan een minuut",
+    other: "minder dan {{count}} minuten"
+  },
+  xMinutes: {
+    one: "een minuut",
+    other: "{{count}} minuten"
+  },
+  aboutXHours: {
+    one: "ongeveer 1 uur",
+    other: "ongeveer {{count}} uur"
+  },
+  xHours: {
+    one: "1 uur",
+    other: "{{count}} uur"
+  },
+  xDays: {
+    one: "1 dag",
+    other: "{{count}} dagen"
+  },
+  aboutXWeeks: {
+    one: "ongeveer 1 week",
+    other: "ongeveer {{count}} weken"
+  },
+  xWeeks: {
+    one: "1 week",
+    other: "{{count}} weken"
+  },
+  aboutXMonths: {
+    one: "ongeveer 1 maand",
+    other: "ongeveer {{count}} maanden"
+  },
+  xMonths: {
+    one: "1 maand",
+    other: "{{count}} maanden"
+  },
+  aboutXYears: {
+    one: "ongeveer 1 jaar",
+    other: "ongeveer {{count}} jaar"
+  },
+  xYears: {
+    one: "1 jaar",
+    other: "{{count}} jaar"
+  },
+  overXYears: {
+    one: "meer dan 1 jaar",
+    other: "meer dan {{count}} jaar"
+  },
+  almostXYears: {
+    one: "bijna 1 jaar",
+    other: "bijna {{count}} jaar"
+  }
+}, u = (e, o, a) => {
+  let t;
+  const i = m[e];
+  return typeof i == "string" ? t = i : o === 1 ? t = i.one : t = i.other.replace("{{count}}", String(o)), a != null && a.addSuffix ? a.comparison && a.comparison > 0 ? "over " + t : t + " geleden" : t;
+}, c = {
+  full: "EEEE d MMMM y",
+  long: "d MMMM y",
+  medium: "d MMM y",
+  short: "dd-MM-y"
+}, h = {
+  full: "HH:mm:ss zzzz",
+  long: "HH:mm:ss z",
+  medium: "HH:mm:ss",
+  short: "HH:mm"
+}, l = {
+  full: "{{date}} 'om' {{time}}",
+  long: "{{date}} 'om' {{time}}",
+  medium: "{{date}}, {{time}}",
+  short: "{{date}}, {{time}}"
+}, g = {
+  date: d({
+    formats: c,
+    defaultWidth: "full"
+  }),
+  time: d({
+    formats: h,
+    defaultWidth: "full"
+  }),
+  dateTime: d({
+    formats: l,
+    defaultWidth: "full"
+  })
+}, v = {
+  lastWeek: "'afgelopen' eeee 'om' p",
+  yesterday: "'gisteren om' p",
+  today: "'vandaag om' p",
+  tomorrow: "'morgen om' p",
+  nextWeek: "eeee 'om' p",
+  other: "P"
+}, f = (e, o, a, t) => v[e], b = {
+  narrow: ["v.C.", "n.C."],
+  abbreviated: ["v.Chr.", "n.Chr."],
+  wide: ["voor Christus", "na Christus"]
+}, w = {
+  narrow: ["1", "2", "3", "4"],
+  abbreviated: ["K1", "K2", "K3", "K4"],
+  wide: ["1e kwartaal", "2e kwartaal", "3e kwartaal", "4e kwartaal"]
+}, P = {
+  narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
+  abbreviated: [
+    "jan.",
+    "feb.",
+    "mrt.",
+    "apr.",
+    "mei",
+    "jun.",
+    "jul.",
+    "aug.",
+    "sep.",
+    "okt.",
+    "nov.",
+    "dec."
+  ],
+  wide: [
+    "januari",
+    "februari",
+    "maart",
+    "april",
+    "mei",
+    "juni",
+    "juli",
+    "augustus",
+    "september",
+    "oktober",
+    "november",
+    "december"
+  ]
+}, p = {
+  narrow: ["Z", "M", "D", "W", "D", "V", "Z"],
+  short: ["zo", "ma", "di", "wo", "do", "vr", "za"],
+  abbreviated: ["zon", "maa", "din", "woe", "don", "vri", "zat"],
+  wide: [
+    "zondag",
+    "maandag",
+    "dinsdag",
+    "woensdag",
+    "donderdag",
+    "vrijdag",
+    "zaterdag"
+  ]
+}, M = {
+  narrow: {
+    am: "AM",
+    pm: "PM",
+    midnight: "middernacht",
+    noon: "het middaguur",
+    morning: "'s ochtends",
+    afternoon: "'s middags",
+    evening: "'s avonds",
+    night: "'s nachts"
+  },
+  abbreviated: {
+    am: "AM",
+    pm: "PM",
+    midnight: "middernacht",
+    noon: "het middaguur",
+    morning: "'s ochtends",
+    afternoon: "'s middags",
+    evening: "'s avonds",
+    night: "'s nachts"
+  },
+  wide: {
+    am: "AM",
+    pm: "PM",
+    midnight: "middernacht",
+    noon: "het middaguur",
+    morning: "'s ochtends",
+    afternoon: "'s middags",
+    evening: "'s avonds",
+    night: "'s nachts"
+  }
+}, j = (e, o) => Number(e) + "e", y = {
+  ordinalNumber: j,
+  era: n({
+    values: b,
+    defaultWidth: "wide"
+  }),
+  quarter: n({
+    values: w,
+    defaultWidth: "wide",
+    argumentCallback: (e) => e - 1
+  }),
+  month: n({
+    values: P,
+    defaultWidth: "wide"
+  }),
+  day: n({
+    values: p,
+    defaultWidth: "wide"
+  }),
+  dayPeriod: n({
+    values: M,
+    defaultWidth: "wide"
+  })
+}, z = /^(\d+)e?/i, k = /\d+/i, W = {
+  narrow: /^([vn]\.? ?C\.?)/,
+  abbreviated: /^([vn]\. ?Chr\.?)/,
+  wide: /^((voor|na) Christus)/
+}, C = {
+  any: [/^v/, /^n/]
+}, D = {
+  narrow: /^[1234]/i,
+  abbreviated: /^K[1234]/i,
+  wide: /^[1234]e kwartaal/i
+}, x = {
+  any: [/1/i, /2/i, /3/i, /4/i]
+}, H = {
+  narrow: /^[jfmasond]/i,
+  abbreviated: /^(jan.|feb.|mrt.|apr.|mei|jun.|jul.|aug.|sep.|okt.|nov.|dec.)/i,
+  wide: /^(januari|februari|maart|april|mei|juni|juli|augustus|september|oktober|november|december)/i
+}, F = {
+  narrow: [
+    /^j/i,
+    /^f/i,
+    /^m/i,
+    /^a/i,
+    /^m/i,
+    /^j/i,
+    /^j/i,
+    /^a/i,
+    /^s/i,
+    /^o/i,
+    /^n/i,
+    /^d/i
+  ],
+  any: [
+    /^jan/i,
+    /^feb/i,
+    /^m(r|a)/i,
+    /^apr/i,
+    /^mei/i,
+    /^jun/i,
+    /^jul/i,
+    /^aug/i,
+    /^sep/i,
+    /^okt/i,
+    /^nov/i,
+    /^dec/i
+  ]
+}, X = {
+  narrow: /^[zmdwv]/i,
+  short: /^(zo|ma|di|wo|do|vr|za)/i,
+  abbreviated: /^(zon|maa|din|woe|don|vri|zat)/i,
+  wide: /^(zondag|maandag|dinsdag|woensdag|donderdag|vrijdag|zaterdag)/i
+}, V = {
+  narrow: [/^z/i, /^m/i, /^d/i, /^w/i, /^d/i, /^v/i, /^z/i],
+  any: [/^zo/i, /^ma/i, /^di/i, /^wo/i, /^do/i, /^vr/i, /^za/i]
+}, A = {
+  any: /^(am|pm|middernacht|het middaguur|'s (ochtends|middags|avonds|nachts))/i
+}, E = {
+  any: {
+    am: /^am/i,
+    pm: /^pm/i,
+    midnight: /^middernacht/i,
+    noon: /^het middaguur/i,
+    morning: /ochtend/i,
+    afternoon: /middag/i,
+    evening: /avond/i,
+    night: /nacht/i
+  }
+}, L = {
+  ordinalNumber: s({
+    matchPattern: z,
+    parsePattern: k,
+    valueCallback: (e) => parseInt(e, 10)
+  }),
+  era: r({
+    matchPatterns: W,
+    defaultMatchWidth: "wide",
+    parsePatterns: C,
+    defaultParseWidth: "any"
+  }),
+  quarter: r({
+    matchPatterns: D,
+    defaultMatchWidth: "wide",
+    parsePatterns: x,
+    defaultParseWidth: "any",
+    valueCallback: (e) => e + 1
+  }),
+  month: r({
+    matchPatterns: H,
+    defaultMatchWidth: "wide",
+    parsePatterns: F,
+    defaultParseWidth: "any"
+  }),
+  day: r({
+    matchPatterns: X,
+    defaultMatchWidth: "wide",
+    parsePatterns: V,
+    defaultParseWidth: "any"
+  }),
+  dayPeriod: r({
+    matchPatterns: A,
+    defaultMatchWidth: "any",
+    parsePatterns: E,
+    defaultParseWidth: "any"
+  })
+}, S = {
+  code: "nl",
+  formatDistance: u,
+  formatLong: g,
+  formatRelative: f,
+  localize: y,
+  match: L,
+  options: {
+    weekStartsOn: 1,
+    firstWeekContainsDate: 4
+  }
+};
+export {
+  S as default,
+  S as nl
+};
+//# sourceMappingURL=nl.B6vCf2B9.js.map

package/dist/chunks/nl.B6vCf2B9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nl.B6vCf2B9.js","sources":["../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/locale/nl/_lib/formatDistance.js","../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/locale/nl/_lib/formatLong.js","../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/locale/nl/_lib/formatRelative.js","../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/locale/nl/_lib/localize.js","../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/locale/nl/_lib/match.js","../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/locale/nl.js"],"sourcesContent":["const formatDistanceLocale = {\n  lessThanXSeconds: {\n    one: \"minder dan een seconde\",\n    other: \"minder dan {{count}} seconden\",\n  },\n\n  xSeconds: {\n    one: \"1 seconde\",\n    other: \"{{count}} seconden\",\n  },\n\n  halfAMinute: \"een halve minuut\",\n\n  lessThanXMinutes: {\n    one: \"minder dan een minuut\",\n    other: \"minder dan {{count}} minuten\",\n  },\n\n  xMinutes: {\n    one: \"een minuut\",\n    other: \"{{count}} minuten\",\n  },\n\n  aboutXHours: {\n    one: \"ongeveer 1 uur\",\n    other: \"ongeveer {{count}} uur\",\n  },\n\n  xHours: {\n    one: \"1 uur\",\n    other: \"{{count}} uur\",\n  },\n\n  xDays: {\n    one: \"1 dag\",\n    other: \"{{count}} dagen\",\n  },\n\n  aboutXWeeks: {\n    one: \"ongeveer 1 week\",\n    other: \"ongeveer {{count}} weken\",\n  },\n\n  xWeeks: {\n    one: \"1 week\",\n    other: \"{{count}} weken\",\n  },\n\n  aboutXMonths: {\n    one: \"ongeveer 1 maand\",\n    other: \"ongeveer {{count}} maanden\",\n  },\n\n  xMonths: {\n    one: \"1 maand\",\n    other: \"{{count}} maanden\",\n  },\n\n  aboutXYears: {\n    one: \"ongeveer 1 jaar\",\n    other: \"ongeveer {{count}} jaar\",\n  },\n\n  xYears: {\n    one: \"1 jaar\",\n    other: \"{{count}} jaar\",\n  },\n\n  overXYears: {\n    one: \"meer dan 1 jaar\",\n    other: \"meer dan {{count}} jaar\",\n  },\n\n  almostXYears: {\n    one: \"bijna 1 jaar\",\n    other: \"bijna {{count}} jaar\",\n  },\n};\n\nexport const formatDistance = (token, count, options) => {\n  let result;\n\n  const tokenValue = formatDistanceLocale[token];\n  if (typeof tokenValue === \"string\") {\n    result = tokenValue;\n  } else if (count === 1) {\n    result = tokenValue.one;\n  } else {\n    result = tokenValue.other.replace(\"{{count}}\", String(count));\n  }\n\n  if (options?.addSuffix) {\n    if (options.comparison && options.comparison > 0) {\n      return \"over \" + result;\n    } else {\n      return result + \" geleden\";\n    }\n  }\n\n  return result;\n};\n","import { buildFormatLongFn } from \"../../_lib/buildFormatLongFn.js\";\n\nconst dateFormats = {\n  full: \"EEEE d MMMM y\",\n  long: \"d MMMM y\",\n  medium: \"d MMM y\",\n  short: \"dd-MM-y\",\n};\n\nconst timeFormats = {\n  full: \"HH:mm:ss zzzz\",\n  long: \"HH:mm:ss z\",\n  medium: \"HH:mm:ss\",\n  short: \"HH:mm\",\n};\n\nconst dateTimeFormats = {\n  full: \"{{date}} 'om' {{time}}\",\n  long: \"{{date}} 'om' {{time}}\",\n  medium: \"{{date}}, {{time}}\",\n  short: \"{{date}}, {{time}}\",\n};\n\nexport const formatLong = {\n  date: buildFormatLongFn({\n    formats: dateFormats,\n    defaultWidth: \"full\",\n  }),\n\n  time: buildFormatLongFn({\n    formats: timeFormats,\n    defaultWidth: \"full\",\n  }),\n\n  dateTime: buildFormatLongFn({\n    formats: dateTimeFormats,\n    defaultWidth: \"full\",\n  }),\n};\n","const formatRelativeLocale = {\n  lastWeek: \"'afgelopen' eeee 'om' p\",\n  yesterday: \"'gisteren om' p\",\n  today: \"'vandaag om' p\",\n  tomorrow: \"'morgen om' p\",\n  nextWeek: \"eeee 'om' p\",\n  other: \"P\",\n};\n\nexport const formatRelative = (token, _date, _baseDate, _options) =>\n  formatRelativeLocale[token];\n","import { buildLocalizeFn } from \"../../_lib/buildLocalizeFn.js\";\n\nconst eraValues = {\n  narrow: [\"v.C.\", \"n.C.\"],\n  abbreviated: [\"v.Chr.\", \"n.Chr.\"],\n  wide: [\"voor Christus\", \"na Christus\"],\n};\n\nconst quarterValues = {\n  narrow: [\"1\", \"2\", \"3\", \"4\"],\n  abbreviated: [\"K1\", \"K2\", \"K3\", \"K4\"],\n  wide: [\"1e kwartaal\", \"2e kwartaal\", \"3e kwartaal\", \"4e kwartaal\"],\n};\n\nconst monthValues = {\n  narrow: [\"J\", \"F\", \"M\", \"A\", \"M\", \"J\", \"J\", \"A\", \"S\", \"O\", \"N\", \"D\"],\n  abbreviated: [\n    \"jan.\",\n    \"feb.\",\n    \"mrt.\",\n    \"apr.\",\n    \"mei\",\n    \"jun.\",\n    \"jul.\",\n    \"aug.\",\n    \"sep.\",\n    \"okt.\",\n    \"nov.\",\n    \"dec.\",\n  ],\n\n  wide: [\n    \"januari\",\n    \"februari\",\n    \"maart\",\n    \"april\",\n    \"mei\",\n    \"juni\",\n    \"juli\",\n    \"augustus\",\n    \"september\",\n    \"oktober\",\n    \"november\",\n    \"december\",\n  ],\n};\n\nconst dayValues = {\n  narrow: [\"Z\", \"M\", \"D\", \"W\", \"D\", \"V\", \"Z\"],\n  short: [\"zo\", \"ma\", \"di\", \"wo\", \"do\", \"vr\", \"za\"],\n  abbreviated: [\"zon\", \"maa\", \"din\", \"woe\", \"don\", \"vri\", \"zat\"],\n  wide: [\n    \"zondag\",\n    \"maandag\",\n    \"dinsdag\",\n    \"woensdag\",\n    \"donderdag\",\n    \"vrijdag\",\n    \"zaterdag\",\n  ],\n};\n\nconst dayPeriodValues = {\n  narrow: {\n    am: \"AM\",\n    pm: \"PM\",\n    midnight: \"middernacht\",\n    noon: \"het middaguur\",\n    morning: \"'s ochtends\",\n    afternoon: \"'s middags\",\n    evening: \"'s avonds\",\n    night: \"'s nachts\",\n  },\n  abbreviated: {\n    am: \"AM\",\n    pm: \"PM\",\n    midnight: \"middernacht\",\n    noon: \"het middaguur\",\n    morning: \"'s ochtends\",\n    afternoon: \"'s middags\",\n    evening: \"'s avonds\",\n    night: \"'s nachts\",\n  },\n  wide: {\n    am: \"AM\",\n    pm: \"PM\",\n    midnight: \"middernacht\",\n    noon: \"het middaguur\",\n    morning: \"'s ochtends\",\n    afternoon: \"'s middags\",\n    evening: \"'s avonds\",\n    night: \"'s nachts\",\n  },\n};\n\nconst ordinalNumber = (dirtyNumber, _options) => {\n  const number = Number(dirtyNumber);\n  return number + \"e\";\n};\n\nexport const localize = {\n  ordinalNumber,\n\n  era: buildLocalizeFn({\n    values: eraValues,\n    defaultWidth: \"wide\",\n  }),\n\n  quarter: buildLocalizeFn({\n    values: quarterValues,\n    defaultWidth: \"wide\",\n    argumentCallback: (quarter) => quarter - 1,\n  }),\n\n  month: buildLocalizeFn({\n    values: monthValues,\n    defaultWidth: \"wide\",\n  }),\n\n  day: buildLocalizeFn({\n    values: dayValues,\n    defaultWidth: \"wide\",\n  }),\n\n  dayPeriod: buildLocalizeFn({\n    values: dayPeriodValues,\n    defaultWidth: \"wide\",\n  }),\n};\n","import { buildMatchFn } from \"../../_lib/buildMatchFn.js\";\nimport { buildMatchPatternFn } from \"../../_lib/buildMatchPatternFn.js\";\n\nconst matchOrdinalNumberPattern = /^(\\d+)e?/i;\nconst parseOrdinalNumberPattern = /\\d+/i;\n\nconst matchEraPatterns = {\n  narrow: /^([vn]\\.? ?C\\.?)/,\n  abbreviated: /^([vn]\\. ?Chr\\.?)/,\n  wide: /^((voor|na) Christus)/,\n};\nconst parseEraPatterns = {\n  any: [/^v/, /^n/],\n};\n\nconst matchQuarterPatterns = {\n  narrow: /^[1234]/i,\n  abbreviated: /^K[1234]/i,\n  wide: /^[1234]e kwartaal/i,\n};\nconst parseQuarterPatterns = {\n  any: [/1/i, /2/i, /3/i, /4/i],\n};\n\nconst matchMonthPatterns = {\n  narrow: /^[jfmasond]/i,\n  abbreviated: /^(jan.|feb.|mrt.|apr.|mei|jun.|jul.|aug.|sep.|okt.|nov.|dec.)/i,\n  wide: /^(januari|februari|maart|april|mei|juni|juli|augustus|september|oktober|november|december)/i,\n};\nconst parseMonthPatterns = {\n  narrow: [\n    /^j/i,\n    /^f/i,\n    /^m/i,\n    /^a/i,\n    /^m/i,\n    /^j/i,\n    /^j/i,\n    /^a/i,\n    /^s/i,\n    /^o/i,\n    /^n/i,\n    /^d/i,\n  ],\n\n  any: [\n    /^jan/i,\n    /^feb/i,\n    /^m(r|a)/i,\n    /^apr/i,\n    /^mei/i,\n    /^jun/i,\n    /^jul/i,\n    /^aug/i,\n    /^sep/i,\n    /^okt/i,\n    /^nov/i,\n    /^dec/i,\n  ],\n};\n\nconst matchDayPatterns = {\n  narrow: /^[zmdwv]/i,\n  short: /^(zo|ma|di|wo|do|vr|za)/i,\n  abbreviated: /^(zon|maa|din|woe|don|vri|zat)/i,\n  wide: /^(zondag|maandag|dinsdag|woensdag|donderdag|vrijdag|zaterdag)/i,\n};\nconst parseDayPatterns = {\n  narrow: [/^z/i, /^m/i, /^d/i, /^w/i, /^d/i, /^v/i, /^z/i],\n  any: [/^zo/i, /^ma/i, /^di/i, /^wo/i, /^do/i, /^vr/i, /^za/i],\n};\n\nconst matchDayPeriodPatterns = {\n  any: /^(am|pm|middernacht|het middaguur|'s (ochtends|middags|avonds|nachts))/i,\n};\nconst parseDayPeriodPatterns = {\n  any: {\n    am: /^am/i,\n    pm: /^pm/i,\n    midnight: /^middernacht/i,\n    noon: /^het middaguur/i,\n    morning: /ochtend/i,\n    afternoon: /middag/i,\n    evening: /avond/i,\n    night: /nacht/i,\n  },\n};\n\nexport const match = {\n  ordinalNumber: buildMatchPatternFn({\n    matchPattern: matchOrdinalNumberPattern,\n    parsePattern: parseOrdinalNumberPattern,\n    valueCallback: (value) => parseInt(value, 10),\n  }),\n\n  era: buildMatchFn({\n    matchPatterns: matchEraPatterns,\n    defaultMatchWidth: \"wide\",\n    parsePatterns: parseEraPatterns,\n    defaultParseWidth: \"any\",\n  }),\n\n  quarter: buildMatchFn({\n    matchPatterns: matchQuarterPatterns,\n    defaultMatchWidth: \"wide\",\n    parsePatterns: parseQuarterPatterns,\n    defaultParseWidth: \"any\",\n    valueCallback: (index) => index + 1,\n  }),\n\n  month: buildMatchFn({\n    matchPatterns: matchMonthPatterns,\n    defaultMatchWidth: \"wide\",\n    parsePatterns: parseMonthPatterns,\n    defaultParseWidth: \"any\",\n  }),\n\n  day: buildMatchFn({\n    matchPatterns: matchDayPatterns,\n    defaultMatchWidth: \"wide\",\n    parsePatterns: parseDayPatterns,\n    defaultParseWidth: \"any\",\n  }),\n\n  dayPeriod: buildMatchFn({\n    matchPatterns: matchDayPeriodPatterns,\n    defaultMatchWidth: \"any\",\n    parsePatterns: parseDayPeriodPatterns,\n    defaultParseWidth: \"any\",\n  }),\n};\n","import { formatDistance } from \"./nl/_lib/formatDistance.js\";\nimport { formatLong } from \"./nl/_lib/formatLong.js\";\nimport { formatRelative } from \"./nl/_lib/formatRelative.js\";\nimport { localize } from \"./nl/_lib/localize.js\";\nimport { match } from \"./nl/_lib/match.js\";\n\n/**\n * @category Locales\n * @summary Dutch locale.\n * @language Dutch\n * @iso-639-2 nld\n * @author Jorik Tangelder [@jtangelder](https://github.com/jtangelder)\n * @author Ruben Stolk [@rubenstolk](https://github.com/rubenstolk)\n * @author Lode Vanhove [@bitcrumb](https://github.com/bitcrumb)\n * @author Edo Rivai [@edorivai](https://github.com/edorivai)\n * @author Niels Keurentjes [@curry684](https://github.com/curry684)\n * @author Stefan Vermaas [@stefanvermaas](https://github.com/stefanvermaas)\n */\nexport const nl = {\n  code: \"nl\",\n  formatDistance: formatDistance,\n  formatLong: formatLong,\n  formatRelative: formatRelative,\n  localize: localize,\n  match: match,\n  options: {\n    weekStartsOn: 1 /* Monday */,\n    firstWeekContainsDate: 4,\n  },\n};\n\n// Fallback for modularized imports:\nexport default nl;\n"],"names":["formatDistanceLocale","formatDistance","token","count","options","result","tokenValue","dateFormats","timeFormats","dateTimeFormats","formatLong","buildFormatLongFn","formatRelativeLocale","formatRelative","_date","_baseDate","_options","eraValues","quarterValues","monthValues","dayValues","dayPeriodValues","ordinalNumber","dirtyNumber","localize","buildLocalizeFn","quarter","matchOrdinalNumberPattern","parseOrdinalNumberPattern","matchEraPatterns","parseEraPatterns","matchQuarterPatterns","parseQuarterPatterns","matchMonthPatterns","parseMonthPatterns","matchDayPatterns","parseDayPatterns","matchDayPeriodPatterns","parseDayPeriodPatterns","match","buildMatchPatternFn","value","buildMatchFn","index","nl"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5]}

package/dist/chunks/{pagination.BSyshRGH.js → pagination.BcFt2FqK.js}

@@ -1,10 +1,10 @@
 import { defineComponent as d, computed as p, useSlots as S, useAttrs as B, ref as N, toRefs as I } from "vue";
 import { B as f } from "./typography.Bq-EGj9y.js";
-import { B as L } from "./dropdown.Dt0_ZUBn.js";
+import { B as L } from "./dropdown.C2pXf8Li.js";
 import { g as x } from "./generate-uid.NJ8tVoha.js";
 import { u as m, g as $, a as w } from "./index.B6WW_F-J.js";
 import { n as c } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as O } from "./button.C5GvPqe5.js";
+import { B as O } from "./button.DIU6m9wD.js";
 /* empty css              */
 import { u as F } from "./aria-label.CaUURpnB.js";
 import { u as R } from "./use-has-slot.C9lQZ6nz.js";
@@ -27,8 +27,8 @@ const k = {
     showingItemsWithTotal: "{itemCount} élément(s) sur {totalCount}"
   },
   "ja-JP": {
-    showingItems: "{itemCount}個のアイテムを表示しています",
-    showingItemsWithTotal: "{totalCount}件中{itemCount}件のアイテムを表示"
+    showingItems: "{itemCount}件のアイテム",
+    showingItemsWithTotal: "{itemCount}/{totalCount}件"
   },
   "pt-BR": {
     showingItems: "{itemCount} itens",
@@ -90,7 +90,7 @@ const W = M.exports, E = {
     pageOneOfOne: "Page 1 sur 1"
   },
   "ja-JP": {
-    pageNumber: "ページ{page}",
+    pageNumber: "ページ {page}",
     pageOneOfOne: "ページ1/1"
   },
   "pt-BR": {
@@ -335,4 +335,4 @@ const Dt = wt.exports;
 export {
   Dt as B
 };
-//# sourceMappingURL=pagination.BSyshRGH.js.map
+//# sourceMappingURL=pagination.BcFt2FqK.js.map

package/dist/chunks/{pagination.BSyshRGH.js.map → pagination.BcFt2FqK.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pagination.BSyshRGH.js","sources":["../../src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue","../../src/components/pagination/components/pagination-context/pagination-context.vue","../../../ui-assets/icons-16/dist/vue/skip-left.vue","../../../ui-assets/icons-16/dist/vue/skip-right.vue","../../../ui-assets/icons-16/dist/vue/chevron-left-small.vue","../../../ui-assets/icons-16/dist/vue/chevron-right-small.vue","../../src/components/pagination/components/pagination-controls/pagination-controls.vue","../../src/components/pagination/pagination.vue"],"sourcesContent":["<template>\n    <div class=\"b-pagination-results-per-page\">\n        <bento-typography el=\"div\">\n            <component\n                :is=\"i18nComponent\"\n                v-bind=\"getI18nProps(translationPathKey)\"\n                class=\"b-pagination-results-per-page__dropdown-container\"\n                tag=\"div\"\n                :plural=\"totalCount\"\n            >\n                <template #itemCount>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t(translationPathKey, { itemCount: itemsPerPage, totalCount })\"\n                        class=\"b-pagination-results-per-page__dropdown\"\n                        condensed\n                        :items=\"predefinedDropdownOptions\"\n                        :model-value=\"itemsPerPage\"\n                        @update:model-value=\"onSelectChange\"\n                    />\n                </template>\n                <template v-if=\"!!totalCount\" #totalCount>{{ totalCount }}</template>\n            </component>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { generateUid } from '@/core/utils/ts';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  itemsPerPage: { default: 50 },\n  totalCount: { default: null }\n});\n\n    const emit = defineEmits([\"select\"]);\n\n    const dropdownId = generateUid('b-pagination-context-number-elements');\n    const predefinedDropdownOptions = computed(() => [\n        { label: n(10), value: 10 },\n        { label: n(20), value: 20 },\n        { label: n(50), value: 50 },\n        { label: n(75), value: 75 },\n        { label: n(100), value: 100 },\n    ]);\n    const i18nComponent = getI18nComponent();\n\n    const onSelectChange = (selectedNumberOfResults: number) => {\n        emit('select', selectedNumberOfResults);\n    };\n\n    const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems'));\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-results-per-page.scss\" />\n","<template>\n    <div class=\"b-pagination-context\">\n        <bento-typography v-if=\"totalPages > 1\" el=\"div\">\n            <component :is=\"i18nComponent\" v-bind=\"getI18nProps('pageNumber')\" tag=\"div\">\n                <template #page>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t('pageNumber', { page: n(page) })\"\n                        class=\"b-pagination-context__dropdown\"\n                        condensed\n                        :items=\"listOfAvailablePages\"\n                        :model-value=\"page\"\n                        :virtual-scroll=\"virtualScroll\"\n                        @update:model-value=\"onPageSelectChange\"\n                    />\n                </template>\n            </component>\n        </bento-typography>\n        <bento-typography v-else-if=\"totalPages === 1\" el=\"span\">\n            {{ t('pageOneOfOne') }}\n        </bento-typography>\n        <bento-typography v-else el=\"span\">\n            {{ t('pageNumber', { page: n(page) }) }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { type BentoListboxOptionItem } from '@/types/listbox';\n    import { generateUid } from '@/core/utils/ts';\n    import messages from './messages.json';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  page: { default: 1 },\n  totalPages: { default: null },\n  virtualScroll: { type: Boolean, default: false }\n});\n    const emit = defineEmits([\"page-selected\"]);\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const dropdownId = generateUid('bento-pagination-context-current-page');\n    const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage);\n    const i18nComponent = getI18nComponent();\n\n    // Generate a list of pages from 1 to \"totalPages\"\n    const transformIntoOption = (value: number): BentoListboxOptionItem => ({\n        label: n(value),\n        value,\n    });\n    const transformToPageNumber = (_, index) => index + 1;\n    const listOfAvailablePages = computed(() =>\n        Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption)\n    );\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-context.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z\"/><path fill=\"#001222\" d=\"M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z\"/><path fill=\"#001222\" d=\"M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M5.43924 10.9999L8.43924 7.99989L5.43924 4.99989L6.4999 3.93923L10.5606 7.99989L6.4999 12.0605L5.43924 10.9999Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <ul class=\"b-pagination-controls\">\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the first page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(1)\">\n                <template #iconLeft>\n                    <skip-left :svg-title=\"t('navigateToTheFirstPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the previous page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(page - 1)\">\n                <template #iconLeft>\n                    <chevron-left :svg-title=\"t('navigateToThePreviousPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the next page -->\n            <bento-button :disabled=\"isNextButtonDisabled\" variant=\"tertiary\" condensed @click=\"navigate(page + 1)\">\n                <template #iconLeft>\n                    <chevron-right :svg-title=\"t('navigateToTheNextPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the last page -->\n            <bento-button\n                :disabled=\"isLastPageButtonDisabled\"\n                variant=\"tertiary\"\n                condensed\n                @click=\"navigate(totalPages)\"\n            >\n                <template #iconLeft>\n                    <skip-right :svg-title=\"t('navigateToTheLastPage')\" />\n                </template>\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left';\n    import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right';\n    import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small';\n    import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  hasNext: { type: Boolean, default: null },\n  page: null,\n  totalPages: { default: null }\n});\n\n    const emit = defineEmits([\"navigate\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isCurrentPageFirst = computed(() => props.page === 1);\n    const isCurrentPageLast = computed(() => props.page === props.totalPages);\n    const isNextButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        return hasNoNextPage || isCurrentPageLast.value;\n    });\n    const isLastPageButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        const hasNoTotalPagesNumber = !props.totalPages;\n\n        return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber;\n    });\n\n    const navigate = (pageArg: number) => {\n        emit('navigate', pageArg);\n    };\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-controls.scss\" />\n","<template>\n    <div class=\"b-pagination\">\n        <nav :aria-label=\"computedAriaLabel\" class=\"b-pagination__navigation\" :class=\"navigationConditionalClasses()\">\n            <bento-pagination-results-per-page\n                v-if=\"!hidePageSize\"\n                class=\"b-pagination__results-per-page\"\n                :items-per-page=\"size\"\n                :total-count=\"totalCount\"\n                @select=\"onItemsPerPageChange\"\n            />\n            <bento-typography v-else-if=\"hasSlot('default')\"><slot /></bento-typography>\n\n            <div class=\"b-pagination__page-navigator\">\n                <bento-pagination-context\n                    class=\"b-pagination__context\"\n                    :total-pages=\"totalPages\"\n                    :page=\"page\"\n                    :total-count=\"totalCount\"\n                    :virtual-scroll=\"virtualScroll\"\n                    @page-selected=\"onPageSelected\"\n                />\n\n                <div class=\"b-pagination__divider\"></div>\n\n                <bento-pagination-controls\n                    class=\"b-pagination__controls\"\n                    :has-next=\"hasNext\"\n                    :page=\"page\"\n                    :total-pages=\"totalPages\"\n                    @navigate=\"navigate\"\n                />\n            </div>\n        </nav>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRefs, useAttrs, useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue';\n    import BentoPaginationContext from './components/pagination-context/pagination-context.vue';\n    import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useHasSlot } from '@/composables';\n    import type { BentoPaginationProps } from './pagination.types';\n\n    const props = defineProps({\n  ariaLabel: { default: null },\n  hasNext: { type: Boolean, default: null },\n  hidePageSize: { type: Boolean, default: false },\n  page: { default: 1 },\n  size: { default: 20 },\n  totalCount: { default: null },\n  virtualScroll: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([\"navigate\", \"items-page\", \"update:page\", \"update:size\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const attrs = useAttrs();\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n    });\n\n    const totalPages = computed(() =>\n        !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size)\n    );\n\n    const navigate = (pageArg: number, itemsPerPage?: number) => {\n        if (props.hidePageSize) {\n            emit('navigate', pageArg);\n        } else {\n            emit('navigate', pageArg, itemsPerPage ?? props?.size);\n        }\n        emit('update:page', pageArg);\n    };\n\n    const onPageSelected = (pageNumber: number) => {\n        navigate(pageNumber);\n    };\n\n    const onItemsPerPageChange = (elements: number) => {\n        emit('items-page', elements);\n        emit('update:size', elements);\n\n        // Always go to first page when the\n        // number of items page changes\n        navigate(1, elements);\n    };\n\n    const navigationConditionalClasses = () => ({\n        'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Paginiation component to help users page through data sets.\n     *\n     * There are two ways of doing navigation in this component:\n     *      1. (Basic) You tell the component if there is a next page (hasNext)\n     *      2. (Enhanced) You tell the component:\n     *          - How many total items exist (totalCount)\n     *          - The max number of items that you show/fetch per page (size)\n     *          - In this case you should not set the hasNext props\n     *\n     * If you have the data available and opt to use the Enhanced way you get extra controls:\n     *      - Page dropdown selector\n     *      - Last page button\n     *      - \"Showing 10 of 200 items\" text\n     *\n     * @usage\n     * import { BentoPagination } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPagination },\n     *     template: `\n     *         <bento-pagination :has-next=\"isNextPage\" />\n     *     `,\n     * }\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination.scss\" />\n"],"names":["__default__$3","messages$2","t","useI18n","dropdownId","generateUid","predefinedDropdownOptions","computed","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","emit","translationPathKey","props","__default__$2","messages$1","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","uuid$3","_sfc_main$5","uuid$2","_sfc_main$4","uuid$1","_sfc_main$3","uuid","_sfc_main$2","__default__$1","messages","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","pageArg","__default__","slots","useSlots","hasSlot","useHasSlot","attrs","useAttrs","ariaLabelAttribute","ref","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","totalPages","navigate","itemsPerPage","pageNumber","elements"],"mappings":"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"}
+{"version":3,"file":"pagination.BcFt2FqK.js","sources":["../../src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue","../../src/components/pagination/components/pagination-context/pagination-context.vue","../../../ui-assets/icons-16/dist/vue/skip-left.vue","../../../ui-assets/icons-16/dist/vue/skip-right.vue","../../../ui-assets/icons-16/dist/vue/chevron-left-small.vue","../../../ui-assets/icons-16/dist/vue/chevron-right-small.vue","../../src/components/pagination/components/pagination-controls/pagination-controls.vue","../../src/components/pagination/pagination.vue"],"sourcesContent":["<template>\n    <div class=\"b-pagination-results-per-page\">\n        <bento-typography el=\"div\">\n            <component\n                :is=\"i18nComponent\"\n                v-bind=\"getI18nProps(translationPathKey)\"\n                class=\"b-pagination-results-per-page__dropdown-container\"\n                tag=\"div\"\n                :plural=\"totalCount\"\n            >\n                <template #itemCount>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t(translationPathKey, { itemCount: itemsPerPage, totalCount })\"\n                        class=\"b-pagination-results-per-page__dropdown\"\n                        condensed\n                        :items=\"predefinedDropdownOptions\"\n                        :model-value=\"itemsPerPage\"\n                        @update:model-value=\"onSelectChange\"\n                    />\n                </template>\n                <template v-if=\"!!totalCount\" #totalCount>{{ totalCount }}</template>\n            </component>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { generateUid } from '@/core/utils/ts';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  itemsPerPage: { default: 50 },\n  totalCount: { default: null }\n});\n\n    const emit = defineEmits([\"select\"]);\n\n    const dropdownId = generateUid('b-pagination-context-number-elements');\n    const predefinedDropdownOptions = computed(() => [\n        { label: n(10), value: 10 },\n        { label: n(20), value: 20 },\n        { label: n(50), value: 50 },\n        { label: n(75), value: 75 },\n        { label: n(100), value: 100 },\n    ]);\n    const i18nComponent = getI18nComponent();\n\n    const onSelectChange = (selectedNumberOfResults: number) => {\n        emit('select', selectedNumberOfResults);\n    };\n\n    const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems'));\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-results-per-page.scss\" />\n","<template>\n    <div class=\"b-pagination-context\">\n        <bento-typography v-if=\"totalPages > 1\" el=\"div\">\n            <component :is=\"i18nComponent\" v-bind=\"getI18nProps('pageNumber')\" tag=\"div\">\n                <template #page>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t('pageNumber', { page: n(page) })\"\n                        class=\"b-pagination-context__dropdown\"\n                        condensed\n                        :items=\"listOfAvailablePages\"\n                        :model-value=\"page\"\n                        :virtual-scroll=\"virtualScroll\"\n                        @update:model-value=\"onPageSelectChange\"\n                    />\n                </template>\n            </component>\n        </bento-typography>\n        <bento-typography v-else-if=\"totalPages === 1\" el=\"span\">\n            {{ t('pageOneOfOne') }}\n        </bento-typography>\n        <bento-typography v-else el=\"span\">\n            {{ t('pageNumber', { page: n(page) }) }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { type BentoListboxOptionItem } from '@/types/listbox';\n    import { generateUid } from '@/core/utils/ts';\n    import messages from './messages.json';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  page: { default: 1 },\n  totalPages: { default: null },\n  virtualScroll: { type: Boolean, default: false }\n});\n    const emit = defineEmits([\"page-selected\"]);\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const dropdownId = generateUid('bento-pagination-context-current-page');\n    const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage);\n    const i18nComponent = getI18nComponent();\n\n    // Generate a list of pages from 1 to \"totalPages\"\n    const transformIntoOption = (value: number): BentoListboxOptionItem => ({\n        label: n(value),\n        value,\n    });\n    const transformToPageNumber = (_, index) => index + 1;\n    const listOfAvailablePages = computed(() =>\n        Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption)\n    );\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-context.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z\"/><path fill=\"#001222\" d=\"M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z\"/><path fill=\"#001222\" d=\"M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M5.43924 10.9999L8.43924 7.99989L5.43924 4.99989L6.4999 3.93923L10.5606 7.99989L6.4999 12.0605L5.43924 10.9999Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <ul class=\"b-pagination-controls\">\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the first page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(1)\">\n                <template #iconLeft>\n                    <skip-left :svg-title=\"t('navigateToTheFirstPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the previous page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(page - 1)\">\n                <template #iconLeft>\n                    <chevron-left :svg-title=\"t('navigateToThePreviousPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the next page -->\n            <bento-button :disabled=\"isNextButtonDisabled\" variant=\"tertiary\" condensed @click=\"navigate(page + 1)\">\n                <template #iconLeft>\n                    <chevron-right :svg-title=\"t('navigateToTheNextPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the last page -->\n            <bento-button\n                :disabled=\"isLastPageButtonDisabled\"\n                variant=\"tertiary\"\n                condensed\n                @click=\"navigate(totalPages)\"\n            >\n                <template #iconLeft>\n                    <skip-right :svg-title=\"t('navigateToTheLastPage')\" />\n                </template>\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left';\n    import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right';\n    import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small';\n    import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  hasNext: { type: Boolean, default: null },\n  page: null,\n  totalPages: { default: null }\n});\n\n    const emit = defineEmits([\"navigate\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isCurrentPageFirst = computed(() => props.page === 1);\n    const isCurrentPageLast = computed(() => props.page === props.totalPages);\n    const isNextButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        return hasNoNextPage || isCurrentPageLast.value;\n    });\n    const isLastPageButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        const hasNoTotalPagesNumber = !props.totalPages;\n\n        return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber;\n    });\n\n    const navigate = (pageArg: number) => {\n        emit('navigate', pageArg);\n    };\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-controls.scss\" />\n","<template>\n    <div class=\"b-pagination\">\n        <nav :aria-label=\"computedAriaLabel\" class=\"b-pagination__navigation\" :class=\"navigationConditionalClasses()\">\n            <bento-pagination-results-per-page\n                v-if=\"!hidePageSize\"\n                class=\"b-pagination__results-per-page\"\n                :items-per-page=\"size\"\n                :total-count=\"totalCount\"\n                @select=\"onItemsPerPageChange\"\n            />\n            <bento-typography v-else-if=\"hasSlot('default')\"><slot /></bento-typography>\n\n            <div class=\"b-pagination__page-navigator\">\n                <bento-pagination-context\n                    class=\"b-pagination__context\"\n                    :total-pages=\"totalPages\"\n                    :page=\"page\"\n                    :total-count=\"totalCount\"\n                    :virtual-scroll=\"virtualScroll\"\n                    @page-selected=\"onPageSelected\"\n                />\n\n                <div class=\"b-pagination__divider\"></div>\n\n                <bento-pagination-controls\n                    class=\"b-pagination__controls\"\n                    :has-next=\"hasNext\"\n                    :page=\"page\"\n                    :total-pages=\"totalPages\"\n                    @navigate=\"navigate\"\n                />\n            </div>\n        </nav>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRefs, useAttrs, useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue';\n    import BentoPaginationContext from './components/pagination-context/pagination-context.vue';\n    import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useHasSlot } from '@/composables';\n    import type { BentoPaginationProps } from './pagination.types';\n\n    const props = defineProps({\n  ariaLabel: { default: null },\n  hasNext: { type: Boolean, default: null },\n  hidePageSize: { type: Boolean, default: false },\n  page: { default: 1 },\n  size: { default: 20 },\n  totalCount: { default: null },\n  virtualScroll: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([\"navigate\", \"items-page\", \"update:page\", \"update:size\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const attrs = useAttrs();\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n    });\n\n    const totalPages = computed(() =>\n        !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size)\n    );\n\n    const navigate = (pageArg: number, itemsPerPage?: number) => {\n        if (props.hidePageSize) {\n            emit('navigate', pageArg);\n        } else {\n            emit('navigate', pageArg, itemsPerPage ?? props?.size);\n        }\n        emit('update:page', pageArg);\n    };\n\n    const onPageSelected = (pageNumber: number) => {\n        navigate(pageNumber);\n    };\n\n    const onItemsPerPageChange = (elements: number) => {\n        emit('items-page', elements);\n        emit('update:size', elements);\n\n        // Always go to first page when the\n        // number of items page changes\n        navigate(1, elements);\n    };\n\n    const navigationConditionalClasses = () => ({\n        'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Paginiation component to help users page through data sets.\n     *\n     * There are two ways of doing navigation in this component:\n     *      1. (Basic) You tell the component if there is a next page (hasNext)\n     *      2. (Enhanced) You tell the component:\n     *          - How many total items exist (totalCount)\n     *          - The max number of items that you show/fetch per page (size)\n     *          - In this case you should not set the hasNext props\n     *\n     * If you have the data available and opt to use the Enhanced way you get extra controls:\n     *      - Page dropdown selector\n     *      - Last page button\n     *      - \"Showing 10 of 200 items\" text\n     *\n     * @usage\n     * import { BentoPagination } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPagination },\n     *     template: `\n     *         <bento-pagination :has-next=\"isNextPage\" />\n     *     `,\n     * }\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination.scss\" />\n"],"names":["__default__$3","messages$2","t","useI18n","dropdownId","generateUid","predefinedDropdownOptions","computed","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","emit","translationPathKey","props","__default__$2","messages$1","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","uuid$3","_sfc_main$5","uuid$2","_sfc_main$4","uuid$1","_sfc_main$3","uuid","_sfc_main$2","__default__$1","messages","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","pageArg","__default__","slots","useSlots","hasSlot","useHasSlot","attrs","useAttrs","ariaLabelAttribute","ref","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","totalPages","navigate","itemsPerPage","pageNumber","elements"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;iBA7BA,EAAA,GAAAC,GAAA,EAAA,IAAAC,EAAA,GASAC,IAAAC,EAAA,sCAAA,GACAC,IAAAC,EAAA,MAAA;AAAA,MAAiD,EAAA,OAAA,EAAA,EAAA,GAAA,OAAA,GAAA;AAAA,MACnB,EAAA,OAAA,EAAA,EAAA,GAAA,OAAA,GAAA;AAAA,MACA,EAAA,OAAA,EAAA,EAAA,GAAA,OAAA,GAAA;AAAA,MACA,EAAA,OAAA,EAAA,EAAA,GAAA,OAAA,GAAA;AAAA,MACA,EAAA,OAAA,EAAA,GAAA,GAAA,OAAA,IAAA;AAAA,IACE,CAAA,GAEhCC,IAAAC,EAAA,GAEAC,IAAA,CAAAC,MAAA;AACI,MAAAC,EAAA,UAAAD,CAAA;AAAA,IAAsC,GAG1CE,IAAAN,EAAA,MAAAO,EAAA,aAAA,0BAAA,cAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCCAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;iBAnBA,EAAA,GAAAd,GAAA,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,uCAAA,GACAY,IAAA,CAAAC,MAAAN,EAAA,iBAAAM,CAAA,GACAV,IAAAC,EAAA,GAGAU,IAAA,CAAAC,OAAA;AAAA,MAAwE,OAAA,EAAAA,CAAA;AAAA,MACtD,OAAAA;AAAA,IACd,IAEJC,IAAA,CAAAC,GAAAC,MAAAA,IAAA,GACAC,IAAAjB;AAAA,MAA6B,MAAA,MAAA,KAAA,IAAA,MAAAO,EAAA,UAAA,GAAAO,CAAA,EAAA,IAAAF,CAAA;AAAA,IAC6D;;;;;;;;;;;;;;;;;;AClD9F,IAAAM,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAE,IAAA;AAEA,MAAAC,KAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAE,IAAA;AAEA,MAAAC,KAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAE,IAAA;AAEA,MAAAC,KAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCsEIE,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,GAAA;AAEf;;;;;;;;;;iBAvBA,EAAA,GAAAhC,EAAA,IAAAC,EAAA,GAEAgC,IAAA5B,EAAA,MAAAO,EAAA,SAAA,CAAA,GACAsB,IAAA7B,EAAA,MAAAO,EAAA,SAAAA,EAAA,UAAA,GACAuB,IAAA9B,EAAA,MACI,CAAAO,EAAA,WACAsB,EAAA,KAA0C,GAE9CE,IAAA/B,EAAA,MAAA;AACI,YAAAgC,IAAA,CAAAzB,EAAA,SACA0B,IAAA,CAAA1B,EAAA;AAEA,aAAAyB,KAAAH,EAAA,SAAAI;AAAA,IAAmD,CAAA;8JAGvD,CAAAC,MAAA;AACI,MAAA7B,EAAA,YAAA6B,CAAA;AAAA,IAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBCiD5BC,KAAA,CAAA;;;;;;;;;;;;;;iBAtEAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,GACAC,IAAAC,EAAAH,EAAA,YAAA,CAAA,GACA,EAAA,WAAAI,EAAA,IAAAC,EAAAtC,CAAA,GACAuC,IAAAC,EAAA;AAAA,MAAuC,WAAAL,EAAA;AAAA;AAAA,MACL,OAAAE;AAAA,IAEvB,CAAA,GAGXI,IAAAhD;AAAA,MAAmB,MAAA,CAAAO,EAAA,cAAA,CAAAA,EAAA,OAAA,OAAA,KAAA,KAAAA,EAAA,aAAAA,EAAA,IAAA;AAAA,IACkE,GAGrF0C,IAAA,CAAAf,GAAAgB,MAAA;AACI,MAAA3C,EAAA,eACIF,EAAA,YAAA6B,CAAA,IAEA7B,EAAA,YAAA6B,GAAAgB,MAAA3C,KAAA,gBAAAA,EAAA,KAAA,GAEJF,EAAA,eAAA6B,CAAA;AAAA,IAA2B;kLAG/B,CAAAiB,MAAA;AACI,MAAAF,EAAAE,CAAA;AAAA,IAAmB,yBAGvB,CAAAC,MAAA;AACI,MAAA/C,EAAA,cAAA+C,CAAA,GACA/C,EAAA,eAAA+C,CAAA,GAIAH,EAAA,GAAAG,CAAA;AAAA,IAAoB,iCAGxB,OAAA;AAAA,MAA4C,iDAAA,CAAAd,EAAA,SAAA,KAAA/B,EAAA;AAAA,IACsC;;;;;;;;;;;;;;;"}

package/dist/chunks/{promo-banner.D3aG5wnp.js → promo-banner.yfBorKj7.js}

@@ -1,6 +1,6 @@
 import { defineComponent as v, ref as B, computed as o } from "vue";
 import { b as y } from "./index.BDK4hwK_.js";
-import { B as R } from "./button.C5GvPqe5.js";
+import { B as R } from "./button.DIU6m9wD.js";
 import { a as c, b as I, B as b } from "./image.C2D2hKat.js";
 import { B as T } from "./typography.Bq-EGj9y.js";
 import { u as C } from "./index.B6WW_F-J.js";
@@ -67,4 +67,4 @@ export {
   l as a,
   Z as p
 };
-//# sourceMappingURL=promo-banner.D3aG5wnp.js.map
+//# sourceMappingURL=promo-banner.yfBorKj7.js.map

package/dist/chunks/{promo-banner.D3aG5wnp.js.map → promo-banner.yfBorKj7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"promo-banner.D3aG5wnp.js","sources":["../../src/components/promo-banner/promo-banner.types.ts","../../src/components/promo-banner/promo-banner.vue"],"sourcesContent":["import { type BentoButtonActionObject } from '@/components/button';\nimport { type BentoButtonVariant } from '../button';\nimport { type BentoImageAspectRatio, type BentoImageProps } from '../image';\n\nexport interface BentoPromoBannerProps {\n    /**\n     * List of actions that will be used to render the buttons.\n     *\n     * Each object in the list should have a `title`, an `event` and a `variant`.\n     *\n     * `title`: Button's text.\n     * `event`: Event triggered when clicking the Button.\n     * `variant`: Button's style.\n     *\n     * ```\n     * [{\n     *   title: 'Primary',\n     *   event: () => { ... },\n     *   variant: 'primary'\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   variant: 'secondary'\n     * }]\n     * ```\n     */\n    actions?: Array<BentoPromoBannerAction>;\n\n    /**\n     * Defines the color of banner's background\n     */\n    color?: `${BentoPromoBannerColor}`;\n\n    /**\n     * Defines whether the banner has a `Dismiss` button\n     */\n    isDismissible?: boolean;\n\n    /**\n     * Defines whether the banner has a `Dismiss` button\n     */\n    dismissButtonText?: string;\n\n    /**\n     * Defines the image used in the banner.\n     *\n     * The promotional banner adapts to different container sizes based on the image's `aspect-ratio`.\n     * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`.\n     *\n     * In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows:\n     *  - `./1-1.png` with an aspect ratio of `1:1`\n     *  - `./2-1.png` with an aspect ratio of `2:1`\n     *  - `./16-9.png` with an aspect ratio of `16:9`\n     */\n    image: BentoPromoBannerImage;\n\n    /**\n     * Defines style of the banner.\n     *\n     * The horizontal layout is responsive to the container size and\n     * changes depending on the image aspect ratio.\n     *\n     * The vertical layout remains the same regardless of container size.\n     */\n    layout?: `${BentoPromoBannerLayout}`;\n\n    /**\n     * Defines the title text to be shown on the banner\n     */\n    title: string;\n}\n\nexport type BentoPromoBannerImageAspectRatio = `${\n    | BentoImageAspectRatio.P16_9\n    | BentoImageAspectRatio.P2_1\n    | BentoImageAspectRatio.P1_1}`;\n\nexport type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY}`;\n\n/**\n * @deprecated for usage with generic. Remove the generic and use it as `BentoPromoBannerAction`.\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject & {\n    variant: BentoPromoBannerButtonVariant;\n};\n\nexport interface BentoPromoBannerImage {\n    src: BentoImageProps['src'];\n    alt?: BentoImageProps['alt'];\n    aspectRatio: BentoPromoBannerImageAspectRatio;\n}\n\nexport enum BentoPromoBannerColor {\n    BLUE = 'blue',\n    GREY = 'grey',\n    GREEN = 'green',\n}\n\nexport enum BentoPromoBannerLayout {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n","<template>\n    <section\n        ref=\"promoBannerRef\"\n        class=\"b-promo-banner\"\n        :class=\"bannerConditionalClass\"\n        :aria-labelledby=\"promoBannerTitleId\"\n    >\n        <div class=\"b-promo-banner__content\">\n            <div class=\"b-promo-banner__content-header\">\n                <bento-typography :id=\"promoBannerTitleId\" variant=\"title\" large>\n                    {{ title }}\n                </bento-typography>\n\n                <slot name=\"description\" />\n            </div>\n\n            <div class=\"b-promo-banner__content-actions\">\n                <template v-if=\"actions\">\n                    <bento-button\n                        v-for=\"(button, index) in actions\"\n                        :key=\"index\"\n                        :variant=\"button.variant\"\n                        :critical=\"button.critical\"\n                        :disabled=\"button.disabled\"\n                        :inverse=\"button.inverse\"\n                        :icon-only=\"button.iconOnly\"\n                        :link=\"button.link\"\n                        @click=\"button.event\"\n                    >\n                        <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n                            <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n                        </template>\n\n                        <template v-if=\"!isIconOnly(button)\" #default>\n                            {{ button.title }}\n                        </template>\n\n                        <template v-if=\"button.iconRight\" #iconRight>\n                            <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n                        </template>\n                    </bento-button>\n                </template>\n\n                <bento-button v-if=\"isDismissible\" variant=\"secondary\" @click=\"emit('dismiss')\">\n                    {{ computedDismissButtonText }}\n                </bento-button>\n            </div>\n        </div>\n\n        <div class=\"b-promo-banner__image\">\n            <bento-image\n                class=\"b-promo-banner__image-item\"\n                :src=\"image.src\"\n                :alt=\"image.alt ?? ''\"\n                :aspect-ratio=\"image.aspectRatio\"\n                :object-fit=\"BentoImageObjectFit.CONTAIN\"\n            ></bento-image>\n        </div>\n    </section>\n</template>\n\n<script setup lang=\"ts\">\n    import { useElementSize } from '@vueuse/core';\n    import { computed, ref } from 'vue';\n\n    // Components\n    import { BentoButton, type BentoButtonActionObject } from '@/components/button';\n    import { BentoImage, BentoImageAspectRatio, BentoImageObjectFit } from '@/components/image';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoPromoBannerColor, BentoPromoBannerLayout, type BentoPromoBannerProps } from './promo-banner.types';\n\n    // Utils\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import { generateUid } from '@/core/utils/ts';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  actions: { default: null },\n  color: { default: BentoPromoBannerColor.GREY },\n  isDismissible: { type: Boolean, default: true },\n  dismissButtonText: { default: null },\n  image: null,\n  layout: { default: BentoPromoBannerLayout.HORIZONTAL },\n  title: null\n});\n\n    const emit = defineEmits([\"dismiss\"]);\n\n    const promoBannerRef = ref(null);\n    const promoBannerSize = useElementSize(promoBannerRef);\n    const promoBannerTitleId = generateUid('promoBannerTitle');\n\n    const horizontalLayoutBreakpoint = computed(() => {\n        if (props.image.aspectRatio === BentoImageAspectRatio.P16_9) {\n            return 800;\n        } else if (props.image.aspectRatio === BentoImageAspectRatio.P2_1) {\n            return 850;\n        } else if (props.image.aspectRatio === BentoImageAspectRatio.P1_1) {\n            return 623;\n        }\n\n        return 0;\n    });\n\n    const bannerLayoutClass = computed(() => {\n        // only horizontal layout is responsive and, by design, follows the container size\n        if (\n            props.layout === BentoPromoBannerLayout.HORIZONTAL &&\n            promoBannerSize.width.value <= horizontalLayoutBreakpoint.value\n        ) {\n            return BentoPromoBannerLayout.VERTICAL;\n        }\n\n        return props.layout;\n    });\n\n    const bannerConditionalClass = computed(() =>\n        [`b-promo-banner--${bannerLayoutClass.value}`, `b-promo-banner--${props.color}`].join(' ')\n    );\n\n    const isIconOnly = (button: BentoButtonActionObject) =>\n        button.iconOnly && (button.iconLeft || button.iconRight || button.icon);\n\n    const computedDismissButtonText = computed(() => props.dismissButtonText || t('dismiss'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Promotional Banner highlights important information, announcements, or promotions.\n     *\n     * @example\n     * import { BentoPromoBanner } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPromoBanner },\n     *     template: `\n     *         <bento-promo-banner\n     *              title=\"Title\"\n     *              description=\"Brief description explaining and giving more information about the title\"\n     *              :image=\"{ src: '16-1.png', aspectRatio: '16:9' }\"\n     *              :actions=\"[{ title: 'Primary', event: () => {} }]\"\n     *         >\n     *         </bento-promo-banner>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-promo-banner',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./promo-banner.scss\" />\n"],"names":["BentoPromoBannerColor","BentoPromoBannerColor2","BentoPromoBannerLayout","BentoPromoBannerLayout2","__default__","messages","t","useI18n","promoBannerRef","ref","promoBannerSize","useElementSize","promoBannerTitleId","generateUid","horizontalLayoutBreakpoint","computed","props","BentoImageAspectRatio","bannerLayoutClass","bannerConditionalClass","isIconOnly","button","computedDismissButtonText"],"mappings":";;;;;;;;;AA6FY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA,GAMAE,IAAA,kBAAAC,OACRA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;GCoDRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;iBA3EA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAcAC,IAAAC,EAAA,IAAA,GACAC,IAAAC,EAAAH,CAAA,GACAI,IAAAC,EAAA,kBAAA,GAEAC,IAAAC,EAAA,MACIC,EAAA,MAAA,gBAAAC,EAAA,QACI,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAGJ,CAAO,GAGXC,IAAAH,EAAA,MAEIC,EAAA,WAAAd,EAAA,cAAAQ,EAAA,MAAA,SAAAI,EAAA,QAIIZ,EAAA,WAGJc,EAAA,MAAa,GAGjBG,IAAAJ;AAAA,MAA+B,MAAA,CAAA,mBAAAG,EAAA,KAAA,IAAA,mBAAAF,EAAA,KAAA,EAAA,EAAA,KAAA,GAAA;AAAA,IAC8D,GAG7FI,IAAA,CAAAC,MAAAA,EAAA,aAAAA,EAAA,YAAAA,EAAA,aAAAA,EAAA,OAGAC,IAAAP,EAAA,MAAAC,EAAA,qBAAAV,EAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"promo-banner.yfBorKj7.js","sources":["../../src/components/promo-banner/promo-banner.types.ts","../../src/components/promo-banner/promo-banner.vue"],"sourcesContent":["import { type BentoButtonActionObject } from '@/components/button';\nimport { type BentoButtonVariant } from '../button';\nimport { type BentoImageAspectRatio, type BentoImageProps } from '../image';\n\nexport interface BentoPromoBannerProps {\n    /**\n     * List of actions that will be used to render the buttons.\n     *\n     * Each object in the list should have a `title`, an `event` and a `variant`.\n     *\n     * `title`: Button's text.\n     * `event`: Event triggered when clicking the Button.\n     * `variant`: Button's style.\n     *\n     * ```\n     * [{\n     *   title: 'Primary',\n     *   event: () => { ... },\n     *   variant: 'primary'\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   variant: 'secondary'\n     * }]\n     * ```\n     */\n    actions?: Array<BentoPromoBannerAction>;\n\n    /**\n     * Defines the color of banner's background\n     */\n    color?: `${BentoPromoBannerColor}`;\n\n    /**\n     * Defines whether the banner has a `Dismiss` button\n     */\n    isDismissible?: boolean;\n\n    /**\n     * Defines whether the banner has a `Dismiss` button\n     */\n    dismissButtonText?: string;\n\n    /**\n     * Defines the image used in the banner.\n     *\n     * The promotional banner adapts to different container sizes based on the image's `aspect-ratio`.\n     * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`.\n     *\n     * In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows:\n     *  - `./1-1.png` with an aspect ratio of `1:1`\n     *  - `./2-1.png` with an aspect ratio of `2:1`\n     *  - `./16-9.png` with an aspect ratio of `16:9`\n     */\n    image: BentoPromoBannerImage;\n\n    /**\n     * Defines style of the banner.\n     *\n     * The horizontal layout is responsive to the container size and\n     * changes depending on the image aspect ratio.\n     *\n     * The vertical layout remains the same regardless of container size.\n     */\n    layout?: `${BentoPromoBannerLayout}`;\n\n    /**\n     * Defines the title text to be shown on the banner\n     */\n    title: string;\n}\n\nexport type BentoPromoBannerImageAspectRatio = `${\n    | BentoImageAspectRatio.P16_9\n    | BentoImageAspectRatio.P2_1\n    | BentoImageAspectRatio.P1_1}`;\n\nexport type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY}`;\n\n/**\n * @deprecated for usage with generic. Remove the generic and use it as `BentoPromoBannerAction`.\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject & {\n    variant: BentoPromoBannerButtonVariant;\n};\n\nexport interface BentoPromoBannerImage {\n    src: BentoImageProps['src'];\n    alt?: BentoImageProps['alt'];\n    aspectRatio: BentoPromoBannerImageAspectRatio;\n}\n\nexport enum BentoPromoBannerColor {\n    BLUE = 'blue',\n    GREY = 'grey',\n    GREEN = 'green',\n}\n\nexport enum BentoPromoBannerLayout {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n","<template>\n    <section\n        ref=\"promoBannerRef\"\n        class=\"b-promo-banner\"\n        :class=\"bannerConditionalClass\"\n        :aria-labelledby=\"promoBannerTitleId\"\n    >\n        <div class=\"b-promo-banner__content\">\n            <div class=\"b-promo-banner__content-header\">\n                <bento-typography :id=\"promoBannerTitleId\" variant=\"title\" large>\n                    {{ title }}\n                </bento-typography>\n\n                <slot name=\"description\" />\n            </div>\n\n            <div class=\"b-promo-banner__content-actions\">\n                <template v-if=\"actions\">\n                    <bento-button\n                        v-for=\"(button, index) in actions\"\n                        :key=\"index\"\n                        :variant=\"button.variant\"\n                        :critical=\"button.critical\"\n                        :disabled=\"button.disabled\"\n                        :inverse=\"button.inverse\"\n                        :icon-only=\"button.iconOnly\"\n                        :link=\"button.link\"\n                        @click=\"button.event\"\n                    >\n                        <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n                            <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n                        </template>\n\n                        <template v-if=\"!isIconOnly(button)\" #default>\n                            {{ button.title }}\n                        </template>\n\n                        <template v-if=\"button.iconRight\" #iconRight>\n                            <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n                        </template>\n                    </bento-button>\n                </template>\n\n                <bento-button v-if=\"isDismissible\" variant=\"secondary\" @click=\"emit('dismiss')\">\n                    {{ computedDismissButtonText }}\n                </bento-button>\n            </div>\n        </div>\n\n        <div class=\"b-promo-banner__image\">\n            <bento-image\n                class=\"b-promo-banner__image-item\"\n                :src=\"image.src\"\n                :alt=\"image.alt ?? ''\"\n                :aspect-ratio=\"image.aspectRatio\"\n                :object-fit=\"BentoImageObjectFit.CONTAIN\"\n            ></bento-image>\n        </div>\n    </section>\n</template>\n\n<script setup lang=\"ts\">\n    import { useElementSize } from '@vueuse/core';\n    import { computed, ref } from 'vue';\n\n    // Components\n    import { BentoButton, type BentoButtonActionObject } from '@/components/button';\n    import { BentoImage, BentoImageAspectRatio, BentoImageObjectFit } from '@/components/image';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoPromoBannerColor, BentoPromoBannerLayout, type BentoPromoBannerProps } from './promo-banner.types';\n\n    // Utils\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import { generateUid } from '@/core/utils/ts';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  actions: { default: null },\n  color: { default: BentoPromoBannerColor.GREY },\n  isDismissible: { type: Boolean, default: true },\n  dismissButtonText: { default: null },\n  image: null,\n  layout: { default: BentoPromoBannerLayout.HORIZONTAL },\n  title: null\n});\n\n    const emit = defineEmits([\"dismiss\"]);\n\n    const promoBannerRef = ref(null);\n    const promoBannerSize = useElementSize(promoBannerRef);\n    const promoBannerTitleId = generateUid('promoBannerTitle');\n\n    const horizontalLayoutBreakpoint = computed(() => {\n        if (props.image.aspectRatio === BentoImageAspectRatio.P16_9) {\n            return 800;\n        } else if (props.image.aspectRatio === BentoImageAspectRatio.P2_1) {\n            return 850;\n        } else if (props.image.aspectRatio === BentoImageAspectRatio.P1_1) {\n            return 623;\n        }\n\n        return 0;\n    });\n\n    const bannerLayoutClass = computed(() => {\n        // only horizontal layout is responsive and, by design, follows the container size\n        if (\n            props.layout === BentoPromoBannerLayout.HORIZONTAL &&\n            promoBannerSize.width.value <= horizontalLayoutBreakpoint.value\n        ) {\n            return BentoPromoBannerLayout.VERTICAL;\n        }\n\n        return props.layout;\n    });\n\n    const bannerConditionalClass = computed(() =>\n        [`b-promo-banner--${bannerLayoutClass.value}`, `b-promo-banner--${props.color}`].join(' ')\n    );\n\n    const isIconOnly = (button: BentoButtonActionObject) =>\n        button.iconOnly && (button.iconLeft || button.iconRight || button.icon);\n\n    const computedDismissButtonText = computed(() => props.dismissButtonText || t('dismiss'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Promotional Banner highlights important information, announcements, or promotions.\n     *\n     * @example\n     * import { BentoPromoBanner } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPromoBanner },\n     *     template: `\n     *         <bento-promo-banner\n     *              title=\"Title\"\n     *              description=\"Brief description explaining and giving more information about the title\"\n     *              :image=\"{ src: '16-1.png', aspectRatio: '16:9' }\"\n     *              :actions=\"[{ title: 'Primary', event: () => {} }]\"\n     *         >\n     *         </bento-promo-banner>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-promo-banner',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./promo-banner.scss\" />\n"],"names":["BentoPromoBannerColor","BentoPromoBannerColor2","BentoPromoBannerLayout","BentoPromoBannerLayout2","__default__","messages","t","useI18n","promoBannerRef","ref","promoBannerSize","useElementSize","promoBannerTitleId","generateUid","horizontalLayoutBreakpoint","computed","props","BentoImageAspectRatio","bannerLayoutClass","bannerConditionalClass","isIconOnly","button","computedDismissButtonText"],"mappings":";;;;;;;;;AA6FY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA,GAMAE,IAAA,kBAAAC,OACRA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;GCoDRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;iBA3EA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAcAC,IAAAC,EAAA,IAAA,GACAC,IAAAC,EAAAH,CAAA,GACAI,IAAAC,EAAA,kBAAA,GAEAC,IAAAC,EAAA,MACIC,EAAA,MAAA,gBAAAC,EAAA,QACI,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAGJ,CAAO,GAGXC,IAAAH,EAAA,MAEIC,EAAA,WAAAd,EAAA,cAAAQ,EAAA,MAAA,SAAAI,EAAA,QAIIZ,EAAA,WAGJc,EAAA,MAAa,GAGjBG,IAAAJ;AAAA,MAA+B,MAAA,CAAA,mBAAAG,EAAA,KAAA,IAAA,mBAAAF,EAAA,KAAA,EAAA,EAAA,KAAA,GAAA;AAAA,IAC8D,GAG7FI,IAAA,CAAAC,MAAAA,EAAA,aAAAA,EAAA,YAAAA,EAAA,aAAAA,EAAA,OAGAC,IAAAP,EAAA,MAAAC,EAAA,qBAAAV,EAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}