@adyen/bento-vue2 1.77.0 → 1.78.0

package/dist/chunks/{selection-card-group.D4rcUyvV.js → selection-card-group.u-2Y_9o2.js}

@@ -1,21 +1,22 @@
-import { defineComponent as A, useSlots as O, computed as l, inject as j, ref as m, watch as P, provide as W, onMounted as Y } from "vue";
-import { b as F } from "./index.BDK4hwK_.js";
+import { defineComponent as O, useSlots as D, computed as n, inject as F, ref as C, watch as j, provide as P, onMounted as W } from "vue";
+import { b as Y } from "./index.BDK4hwK_.js";
 import { a as Q, b as U } from "./es6.MoTTyETW.js";
 import { B as H } from "./typography.hlOAxsEn.js";
-import { C as J } from "./checkbox-input.B0NsfSNR.js";
-import { u as K } from "./aria-label.CaUURpnB.js";
-import { g as M } from "./generate-uid.NJ8tVoha.js";
-import { u as X } from "./use-has-slot.C9lQZ6nz.js";
-import { a as Z } from "./radio-input.kzb4gxLW.js";
-import { n as D } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { G as ee } from "./grid-layout.1aIiz2N_.js";
-import { E as te } from "./field-label.Auq-Pzho.js";
-import { C as oe } from "./controls-group.82mB_GDw.js";
+import { u as J } from "./aria-label.CaUURpnB.js";
+import { g as $ } from "./generate-uid.NJ8tVoha.js";
+import { u as K } from "./use-has-slot.C9lQZ6nz.js";
+import { a as X } from "./radio-input.kzb4gxLW.js";
+import { C as Z } from "./checkbox-input.B0NsfSNR.js";
+import { n as N } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { u as ee } from "./form-field.BBqLu-vs.js";
+import { G as te } from "./grid-layout.1aIiz2N_.js";
+import { E as oe } from "./field-label.Auq-Pzho.js";
+import { C as le } from "./controls-group.82mB_GDw.js";
 import "../assets/selection-card-group.css";
-var B = /* @__PURE__ */ ((c) => (c.DISABLED = "disabled", c.READONLY = "readonly", c.ERROR = "error", c))(B || {});
-const N = Symbol("selection card radio input injection key"), ae = {
+var E = /* @__PURE__ */ ((c) => (c.DISABLED = "disabled", c.READONLY = "readonly", c.ERROR = "error", c))(E || {});
+const q = Symbol("selection card radio input injection key"), ae = {
   name: "bento-selection-card"
-}, le = /* @__PURE__ */ A({
+}, ne = /* @__PURE__ */ O({
   ...ae,
   props: {
     /**
@@ -78,67 +79,69 @@ const N = Symbol("selection card radio input injection key"), ae = {
   },
   emits: ["input", "update:model-value"],
   setup(c, { emit: e }) {
-    const t = c, o = O(), a = X(o), v = M("selection-card-input-id"), s = M("selection-card-description"), C = l(
+    const t = c, o = D(), l = K(o), h = $("selection-card-input-id"), s = $("selection-card-description"), d = n(
       () => t.modelValue
-    ), E = l(
+    ), B = n(
       () => t.modelValue
-    ), S = l(() => ({
-      "b-selection-card--checked": p.value,
+    ), V = n(() => ({
+      "b-selection-card--checked": R.value,
       "b-selection-card--fully-clickable": t.fullyClickable
-    })), _ = l(() => ({
-      [`b-selection-card--${B.DISABLED}`]: t.disabled,
-      [`b-selection-card--${B.ERROR}`]: t.hasError,
-      [`b-selection-card--${B.READONLY}`]: t.readonly,
+    })), x = n(() => ({
+      [`b-selection-card--${E.DISABLED}`]: t.disabled,
+      [`b-selection-card--${E.ERROR}`]: t.hasError,
+      [`b-selection-card--${E.READONLY}`]: t.readonly,
       "b-selection-card--center-aligned": y.value
-    })), h = l(() => ({
+    })), _ = n(() => ({
       "b-selection-card__checkbox-container--center-aligned": y.value
-    })), R = l(() => ({
+    })), g = n(() => ({
       "b-selection-card__checkbox-container-text--center-aligned": y.value
-    })), b = l(() => ({
-      "b-selection-card__slot--with-icon": a("icon")
-    })), r = K({
+    })), S = n(() => ({
+      "b-selection-card__slot--with-icon": l("icon")
+    })), b = J({
       ariaLabel: t.title,
       label: t.value
-    }), g = l(() => Array.isArray(t.modelValue)), p = l(() => k.value ? t.value === t.modelValue : g.value ? t.modelValue.some((i) => i === t.value) : t.modelValue), k = j(N, m(!1)), y = l(() => !t.subtitle && !t.description), u = m(null), n = m(null), d = m(null), q = (i) => {
-      var f, x, $, L, T, G;
-      if (u.value.$refs.inputRef === i.target) {
-        const z = V();
-        w(z);
+    }), a = n(() => Array.isArray(t.modelValue)), R = n(() => u.value ? t.value === t.modelValue : a.value ? t.modelValue.some((i) => i === t.value) : t.modelValue), u = F(q, C(!1)), y = n(() => !t.subtitle && !t.description), p = C(null), m = C(null), r = C(null), v = (i) => {
+      var f, k, L, T, G, A;
+      if (p.value.$refs.inputRef === i.target) {
+        const z = w();
+        M(z);
         return;
       }
-      if (t.disabled && t.readonly || !t.fullyClickable && (n.value && ((x = (f = n.value) == null ? void 0 : f.$el) != null && x.contains(i.target)) || d.value && ((L = ($ = d.value) == null ? void 0 : $.$el) != null && L.contains(i.target)) || u.value && ((G = (T = u.value) == null ? void 0 : T.$el) != null && G.contains(i.target))))
+      if (t.disabled && t.readonly || !t.fullyClickable && (m.value && ((k = (f = m.value) == null ? void 0 : f.$el) != null && k.contains(i.target)) || r.value && ((T = (L = r.value) == null ? void 0 : L.$el) != null && T.contains(i.target)) || p.value && ((A = (G = p.value) == null ? void 0 : G.$el) != null && A.contains(i.target))))
         return;
-      const I = V();
-      w(I);
-    }, V = () => {
+      const I = w();
+      M(I);
+    }, w = () => {
       var I;
-      const i = ((I = u.value) == null ? void 0 : I.$refs.inputRef).checked;
-      if (g.value) {
-        const f = [...t.modelValue], x = f.indexOf(t.value);
-        return x === -1 ? f.push(t.value) : f.splice(x, 1), f;
+      const i = ((I = p.value) == null ? void 0 : I.$refs.inputRef).checked;
+      if (a.value) {
+        const f = [...t.modelValue], k = f.indexOf(t.value);
+        return k === -1 ? f.push(t.value) : f.splice(k, 1), f;
       }
-      return k.value ? t.value : i;
-    }, w = (i) => {
+      return u.value ? t.value : i;
+    }, M = (i) => {
       !t.disabled && !t.readonly && (e("update:model-value", i), e("input", i));
     };
-    return { __sfc: !0, props: t, emit: e, slots: o, hasSlot: a, inputId: v, descriptionId: s, computedRadioInputModelValue: C, computedCheckboxInputModelValue: E, conditionalClasses: S, containerConditionalClasses: _, checkboxContainerConditionalClasses: h, checkboxContainerTextConditionalClasses: R, slotConditionalClasses: b, ariaLabel: r, isCheckboxGroup: g, isChecked: p, isRadioInput: k, isTitleOnly: y, inputRef: u, slotRef: n, dynamicSlotRef: d, handleCardClick: q, toggleInput: V, onChange: w, BentoTypography: H, CheckboxInput: J, RadioInput: Z };
+    return { __sfc: !0, props: t, emit: e, slots: o, hasSlot: l, inputId: h, descriptionId: s, computedRadioInputModelValue: d, computedCheckboxInputModelValue: B, conditionalClasses: V, containerConditionalClasses: x, checkboxContainerConditionalClasses: _, checkboxContainerTextConditionalClasses: g, slotConditionalClasses: S, ariaLabel: b, isCheckboxGroup: a, isChecked: R, isRadioInput: u, isTitleOnly: y, inputRef: p, slotRef: m, dynamicSlotRef: r, handleCardClick: v, toggleInput: w, onChange: M, BentoTypography: H, CheckboxInput: Z, RadioInput: X };
   }
 });
-var ne = function() {
+var re = function() {
   var e = this, t = e._self._c, o = e._self._setupProxy;
-  return t("div", { staticClass: "b-selection-card", class: o.conditionalClasses, on: { click: o.handleCardClick } }, [t("div", { staticClass: "b-selection-card__container", class: o.containerConditionalClasses }, [t("div", { staticClass: "b-selection-card__checkbox-container", class: o.checkboxContainerConditionalClasses }, [t("div", { staticClass: "b-selection-card__checkbox-container-text", class: o.checkboxContainerTextConditionalClasses }, [o.hasSlot("icon") ? t("div", { staticClass: "b-selection-card__icon", attrs: { role: "presentation" } }, [e._t("icon")], 2) : e._e(), t("label", { staticClass: "b-selection-card__text", attrs: { for: o.inputId }, on: { click: function(a) {
-    return a.stopPropagation(), a.preventDefault(), o.handleCardClick.apply(null, arguments);
+  return t("div", { staticClass: "b-selection-card", class: o.conditionalClasses, on: { click: o.handleCardClick } }, [t("div", { staticClass: "b-selection-card__container", class: o.containerConditionalClasses }, [t("div", { staticClass: "b-selection-card__checkbox-container", class: o.checkboxContainerConditionalClasses }, [t("div", { staticClass: "b-selection-card__checkbox-container-text", class: o.checkboxContainerTextConditionalClasses }, [o.hasSlot("icon") ? t("div", { staticClass: "b-selection-card__icon", attrs: { role: "presentation" } }, [e._t("icon")], 2) : e._e(), t("label", { staticClass: "b-selection-card__text", attrs: { for: o.inputId }, on: { click: function(l) {
+    return l.stopPropagation(), l.preventDefault(), o.handleCardClick.apply(null, arguments);
   } } }, [e.subtitle ? t(o.BentoTypography, { staticClass: "b-selection-card__description", attrs: { el: "span", variant: "caption" } }, [e._v(" " + e._s(e.subtitle) + " ")]) : e._e(), t(o.BentoTypography, { attrs: { el: "span", variant: "title" } }, [e._v(e._s(e.title))]), e.description ? t(o.BentoTypography, { staticClass: "b-selection-card__description", attrs: { id: "descriptionId", el: "span", variant: "body" } }, [e._v(" " + e._s(e.description) + " ")]) : e._e()], 1)]), o.isRadioInput ? t(o.RadioInput, { ref: "inputRef", attrs: { id: o.inputId, "aria-label": o.ariaLabel, "aria-describedby": e.description ? o.descriptionId : void 0, disabled: e.disabled, "has-error": e.hasError, "aria-readonly": e.readonly ?? void 0, value: e.value, readonly: e.readonly, "model-value": o.computedRadioInputModelValue } }) : t(o.CheckboxInput, { ref: "inputRef", attrs: { id: o.inputId, "aria-label": o.ariaLabel, "aria-describedby": e.description ? o.descriptionId : void 0, disabled: e.disabled, "has-error": e.hasError, "aria-readonly": e.readonly ?? void 0, value: e.value, readonly: e.readonly, "model-value": o.computedCheckboxInputModelValue } })], 1), o.hasSlot("content") ? t(o.BentoTypography, { ref: "slotRef", staticClass: "b-selection-card__slot", class: o.slotConditionalClasses, attrs: { el: "div" } }, [e._t("content")], 2) : e._e(), o.hasSlot("dynamicContent") && o.isChecked ? t(o.BentoTypography, { ref: "dynamicSlotRef", staticClass: "b-selection-card__slot", class: o.slotConditionalClasses, attrs: { el: "div" } }, [e._t("dynamicContent")], 2) : e._e()], 1)]);
-}, re = [], se = /* @__PURE__ */ D(
-  le,
+}, se = [], ie = /* @__PURE__ */ N(
   ne,
   re,
+  se,
   !1,
   null,
   "e98bb71b"
 );
-const ie = se.exports, ce = {}, ue = /* @__PURE__ */ A({
-  ...ce,
+const ce = ie.exports, ue = {
+  model: { prop: "modelValue" }
+}, de = /* @__PURE__ */ O({
+  ...ue,
   __name: "selection-card-group",
   props: {
     description: { default: null },
@@ -158,58 +161,58 @@ const ie = se.exports, ce = {}, ue = /* @__PURE__ */ A({
     modelValue: { default: null },
     variant: { default: "checkbox" }
   },
-  emits: ["input", "update:model-value"],
+  emits: ["update:model-value", "input"],
   setup(c, { emit: e }) {
-    const t = c, o = O(), a = (n) => !!o[n], v = l(() => ({
+    const t = c, { emitValue: o } = ee(e), l = D(), h = (r) => !!l[r], s = n(() => ({
       "b-selection-card-group__items--horizontal": t.layout === "horizontal"
-    })), s = m(t.modelValue);
-    P(
+    })), d = C(t.modelValue);
+    j(
       () => t.modelValue,
       () => {
-        s.value = t.modelValue;
+        d.value = t.modelValue;
       }
     );
-    const C = M("error"), E = l(() => !t.disabled && !t.readonly && !!t.errorMessage), S = m(null), { width: _ } = F(S), h = l(() => Q.split("px")[0]), R = l(() => U.split("px")[0]), b = l(() => _.value < h.value ? "small" : _.value >= h.value && _.value < R.value ? "medium" : "large"), r = l(() => {
-      var n;
-      return ((n = t.itemsPerRow) == null ? void 0 : n[b == null ? void 0 : b.value]) || t.items.length;
-    }), g = l(() => {
+    const B = $("error"), V = n(() => !t.disabled && !t.readonly && !!t.errorMessage), x = C(null), { width: _ } = Y(x), g = n(() => Q.split("px")[0]), S = n(() => U.split("px")[0]), b = n(() => _.value < g.value ? "small" : _.value >= g.value && _.value < S.value ? "medium" : "large"), a = n(() => {
+      var r;
+      return ((r = t.itemsPerRow) == null ? void 0 : r[b == null ? void 0 : b.value]) || t.items.length;
+    }), R = n(() => {
       if (!t.itemsPerRow)
         return [];
-      const n = [];
-      for (let d = 0; d < t.items.length; d += r == null ? void 0 : r.value)
-        n.push(t.items.slice(d, d + (r == null ? void 0 : r.value)));
-      return n;
-    }), p = l(() => 12 / (r == null ? void 0 : r.value)), k = l(() => r != null && r.value ? new Array(r == null ? void 0 : r.value).fill({
+      const r = [];
+      for (let v = 0; v < t.items.length; v += a == null ? void 0 : a.value)
+        r.push(t.items.slice(v, v + (a == null ? void 0 : a.value)));
+      return r;
+    }), u = n(() => 12 / (a == null ? void 0 : a.value)), y = n(() => a != null && a.value ? new Array(a == null ? void 0 : a.value).fill({
       // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy
-      small: p.value,
-      medium: p.value,
-      large: p.value
-    }) : []), y = (n) => {
-      s.value = n, e("update:model-value", n), e("input", n);
-    }, u = l(() => t.variant === "radio");
-    return W(N, u), Y(() => {
-      t.itemsPerRow && Object.values(t.itemsPerRow).forEach((n) => {
-        if (n && (n < 2 || n > 6))
+      small: u.value,
+      medium: u.value,
+      large: u.value
+    }) : []), p = (r) => {
+      d.value = r, o(r);
+    }, m = n(() => t.variant === "radio");
+    return P(q, m), W(() => {
+      t.itemsPerRow && Object.values(t.itemsPerRow).forEach((r) => {
+        if (r && (r < 2 || r > 6))
           throw new Error(
             "itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information."
           );
       });
-    }), { __sfc: !0, props: t, emit: e, slots: o, hasSlot: a, conditionalItemsClasses: v, inputValue: s, errorMessageId: C, shouldShowGroupError: E, containerRef: S, width: _, smallBreakpoint: h, mediumBreakpoint: R, currentBreakpoint: b, computedItemsPerRow: r, computedRows: g, itemColumnWidth: p, computedColumnWidth: k, onInput: y, isRadioVariant: u, BentoSelectionCard: ie, ControlsGroup: oe, ErrorMessage: te, GridLayout: ee };
+    }), { __sfc: !0, props: t, emit: e, emitValue: o, slots: l, hasSlot: h, conditionalItemsClasses: s, inputValue: d, errorMessageId: B, shouldShowGroupError: V, containerRef: x, width: _, smallBreakpoint: g, mediumBreakpoint: S, currentBreakpoint: b, computedItemsPerRow: a, computedRows: R, itemColumnWidth: u, computedColumnWidth: y, onInput: p, isRadioVariant: m, BentoSelectionCard: ce, ControlsGroup: le, ErrorMessage: oe, GridLayout: te };
   }
 });
-var de = function() {
+var pe = function() {
   var e = this, t = e._self._c, o = e._self._setupProxy;
-  return t(o.ControlsGroup, { ref: "containerRef", staticClass: "b-selection-card-group", attrs: { "aria-describedby": o.shouldShowGroupError ? o.errorMessageId : null, label: e.label, "hide-label": e.hideLabel, description: e.description, disabled: e.disabled, "tooltip-text": e.tooltipText, readonly: e.readonly, required: e.required, optional: e.optional, "component-name": "selection-card-group" } }, [!e.itemsPerRow || e.layout === "vertical" ? t("div", { staticClass: "b-selection-card-group__items", class: o.conditionalItemsClasses }, e._l(e.items, function(a) {
-    return t(o.BentoSelectionCard, e._b({ key: `selection-card-${a.value}`, staticClass: "b-selection-card-group__item", attrs: { "model-value": o.inputValue, readonly: e.readonly || a.readonly, "has-error": o.shouldShowGroupError, disabled: e.disabled || a.disabled }, on: { "update:model-value": o.onInput }, scopedSlots: e._u([o.hasSlot("icon") && a.icon ? { key: "icon", fn: function() {
-      return [e._t("icon", null, null, a)];
-    }, proxy: !0 } : null, o.hasSlot("content") && a.content ? { key: "content", fn: function() {
-      return [e._t("content", null, null, a)];
-    }, proxy: !0 } : null, o.hasSlot("dynamicContent") && a.dynamicContent ? { key: "dynamicContent", fn: function() {
-      return [e._t("dynamicContent", null, null, a)];
-    }, proxy: !0 } : null], null, !0) }, "bento-selection-card", a, !1));
-  }), 1) : [t("div", { key: `selection-card-group-layout-breakpoint-${o.currentBreakpoint}` }, e._l(o.computedRows, function(a, v) {
-    return t(o.GridLayout, { key: `selection-card-group-row-${v}-cols-${o.computedItemsPerRow}`, staticClass: "b-selection-card-group__items--wrap", attrs: { "column-width": o.computedColumnWidth }, scopedSlots: e._u([e._l(a, function(s, C) {
-      return { key: `col-${C + 1}`, fn: function() {
+  return t(o.ControlsGroup, { ref: "containerRef", staticClass: "b-selection-card-group", attrs: { "aria-describedby": o.shouldShowGroupError ? o.errorMessageId : null, label: e.label, "hide-label": e.hideLabel, description: e.description, disabled: e.disabled, "tooltip-text": e.tooltipText, readonly: e.readonly, required: e.required, optional: e.optional, "component-name": "selection-card-group" } }, [!e.itemsPerRow || e.layout === "vertical" ? t("div", { staticClass: "b-selection-card-group__items", class: o.conditionalItemsClasses }, e._l(e.items, function(l) {
+    return t(o.BentoSelectionCard, e._b({ key: `selection-card-${l.value}`, staticClass: "b-selection-card-group__item", attrs: { "model-value": o.inputValue, readonly: e.readonly || l.readonly, "has-error": o.shouldShowGroupError, disabled: e.disabled || l.disabled }, on: { "update:model-value": o.onInput }, scopedSlots: e._u([o.hasSlot("icon") && l.icon ? { key: "icon", fn: function() {
+      return [e._t("icon", null, null, l)];
+    }, proxy: !0 } : null, o.hasSlot("content") && l.content ? { key: "content", fn: function() {
+      return [e._t("content", null, null, l)];
+    }, proxy: !0 } : null, o.hasSlot("dynamicContent") && l.dynamicContent ? { key: "dynamicContent", fn: function() {
+      return [e._t("dynamicContent", null, null, l)];
+    }, proxy: !0 } : null], null, !0) }, "bento-selection-card", l, !1));
+  }), 1) : [t("div", { key: `selection-card-group-layout-breakpoint-${o.currentBreakpoint}` }, e._l(o.computedRows, function(l, h) {
+    return t(o.GridLayout, { key: `selection-card-group-row-${h}-cols-${o.computedItemsPerRow}`, staticClass: "b-selection-card-group__items--wrap", attrs: { "column-width": o.computedColumnWidth }, scopedSlots: e._u([e._l(l, function(s, d) {
+      return { key: `col-${d + 1}`, fn: function() {
         return [t(o.BentoSelectionCard, e._b({ key: `selection-card-${s.value}`, staticClass: "b-selection-card-group__item b-selection-card-group__item--full-height", attrs: { "model-value": o.inputValue, readonly: e.readonly || s.readonly, "has-error": o.shouldShowGroupError, disabled: e.disabled || s.disabled }, on: { "update:model-value": o.onInput }, scopedSlots: e._u([o.hasSlot("icon") && s.icon ? { key: "icon", fn: function() {
           return [e._t("icon", null, null, s)];
         }, proxy: !0 } : null, o.hasSlot("content") && s.content ? { key: "content", fn: function() {
@@ -220,18 +223,18 @@ var de = function() {
       }, proxy: !0 };
     })], null, !0) });
   }), 1)], o.shouldShowGroupError ? t(o.ErrorMessage, { staticClass: "b-selection-card-group__error-message", attrs: { id: o.errorMessageId, "error-message": e.errorMessage } }) : e._e()], 2);
-}, pe = [], fe = /* @__PURE__ */ D(
-  ue,
+}, fe = [], _e = /* @__PURE__ */ N(
   de,
   pe,
+  fe,
   !1,
   null,
-  "b5cb85fc"
+  "fab59f5f"
 );
-const Be = fe.exports;
+const Ve = _e.exports;
 export {
-  ie as B,
-  B as a,
-  Be as s
+  ce as B,
+  E as a,
+  Ve as s
 };
-//# sourceMappingURL=selection-card-group.D4rcUyvV.js.map
+//# sourceMappingURL=selection-card-group.u-2Y_9o2.js.map

package/dist/chunks/{selection-card-group.D4rcUyvV.js.map → selection-card-group.u-2Y_9o2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"selection-card-group.D4rcUyvV.js","sources":["../../src/components/selection-card/selection-card.types.ts","../../src/components/selection-card/selection-card.keys.ts","../../src/components/selection-card/selection-card.vue","../../src/components/selection-card/components/selection-card-group/selection-card-group.vue"],"sourcesContent":["import { type RadioInputValue } from '@/components/internal/radio-input';\nimport { type BentoCheckboxType } from '../checkbox/checkbox.types';\nimport { type VueNodeElement } from '@/types/elements';\n\nexport enum BentoSelectionCardState {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n}\n\nexport type BentoSelectionCardValue = string | number;\n\nexport type BentoSelectionCardModelValue = BentoCheckboxType | RadioInputValue;\n\nexport interface BentoSelectionCardItem {\n    content?: string | object;\n    description?: string;\n    disabled?: boolean;\n    dynamicContent?: string | object;\n    fullyClickable?: boolean;\n    hasError?: boolean;\n    icon?: VueNodeElement;\n    readonly?: boolean;\n    subtitle?: string;\n    title: string;\n    value: BentoSelectionCardValue;\n}\n","export const SELECTION_CARD_RADIO_INPUT_INJECTION_KEY = Symbol('selection card radio input injection key');\n","<template>\n    <div class=\"b-selection-card\" :class=\"conditionalClasses\" @click=\"handleCardClick\">\n        <div class=\"b-selection-card__container\" :class=\"containerConditionalClasses\">\n            <div class=\"b-selection-card__checkbox-container\" :class=\"checkboxContainerConditionalClasses\">\n                <div class=\"b-selection-card__checkbox-container-text\" :class=\"checkboxContainerTextConditionalClasses\">\n                    <div v-if=\"hasSlot('icon')\" class=\"b-selection-card__icon\" role=\"presentation\">\n                        <slot name=\"icon\" />\n                    </div>\n                    <label :for=\"inputId\" class=\"b-selection-card__text\" @click.stop.prevent=\"handleCardClick\">\n                        <bento-typography\n                            v-if=\"subtitle\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"caption\"\n                        >\n                            {{ subtitle }}\n                        </bento-typography>\n                        <bento-typography el=\"span\" variant=\"title\">{{ title }}</bento-typography>\n                        <bento-typography\n                            v-if=\"description\"\n                            id=\"descriptionId\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"body\"\n                        >\n                            {{ description }}\n                        </bento-typography>\n                    </label>\n                </div>\n                <radio-input\n                    v-if=\"isRadioInput\"\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedRadioInputModelValue\"\n                />\n                <checkbox-input\n                    v-else\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedCheckboxInputModelValue\"\n                />\n            </div>\n            <bento-typography\n                v-if=\"hasSlot('content')\"\n                ref=\"slotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"content\" />\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('dynamicContent') && isChecked\"\n                ref=\"dynamicSlotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"dynamicContent\" />\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { type BentoCheckboxType, type BentoMultiCheckboxType, CheckboxInput } from '../internal/checkbox-input';\n    import { RadioInput, type RadioInputValue } from '../internal/radio-input';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { generateUid } from '@/core/utils/ts';\n    import { computed, type ComputedRef, inject, type PropType, type Ref, ref, useSlots } from 'vue';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSelectionCardModelValue, BentoSelectionCardValue } from './selection-card.types';\n    import { BentoSelectionCardState } from './selection-card.types';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from './selection-card.keys';\n\n    const props = defineProps({\n        /**\n         * The description of the selection card\n         */\n        description: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Disables the selection card\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Makes the entire selection card clickable. Clicking over interactive elements inside the card with this prop enabled will not be possible.\n         */\n        fullyClickable: { type: Boolean, default: false },\n\n        /**\n         * Shows the selection card in error state\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * This property should not be used directly.\n         * It will be used by v-model directive on selection card component.\n         *\n         * When handling a single input, use a string or a number.\n         *\n         * When handling multiple inputs, use an array of keys.\n         * These keys exist as a set \"value\" prop for each input.\n         */\n        modelValue: {\n            type: [Boolean, String, Array] as PropType<BentoSelectionCardModelValue>,\n            default: null,\n        },\n\n        /**\n         * Sets the selection card to readonly\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The subtitle of the selection card\n         */\n        subtitle: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * The title of the selection card\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * Indicates the value of the input that will be returned when it's checked.\n         */\n        value: {\n            type: [String, Number] as PropType<BentoSelectionCardValue>,\n            required: true,\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const inputId = generateUid('selection-card-input-id');\n    const descriptionId = generateUid('selection-card-description');\n\n    const computedRadioInputModelValue: ComputedRef<RadioInputValue> = computed(\n        () => props.modelValue as RadioInputValue\n    );\n    const computedCheckboxInputModelValue: ComputedRef<BentoCheckboxType> = computed(\n        () => props.modelValue as BentoCheckboxType\n    );\n\n    const conditionalClasses = computed(() => ({\n        'b-selection-card--checked': isChecked.value,\n        'b-selection-card--fully-clickable': props.fullyClickable,\n    }));\n\n    const containerConditionalClasses = computed(() => ({\n        [`b-selection-card--${BentoSelectionCardState.DISABLED}`]: props.disabled,\n        [`b-selection-card--${BentoSelectionCardState.ERROR}`]: props.hasError,\n        [`b-selection-card--${BentoSelectionCardState.READONLY}`]: props.readonly,\n        'b-selection-card--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerTextConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container-text--center-aligned': isTitleOnly.value,\n    }));\n\n    const slotConditionalClasses = computed(() => ({\n        'b-selection-card__slot--with-icon': hasSlot('icon'),\n    }));\n\n    const ariaLabel = useAriaLabel({\n        ariaLabel: props.title,\n        label: props.value as string,\n    });\n\n    const isCheckboxGroup = computed(() => Array.isArray(props.modelValue));\n\n    const isChecked: ComputedRef<boolean> = computed(() => {\n        if (isRadioInput.value) {\n            return props.value === props.modelValue;\n        }\n        if (!isCheckboxGroup.value) {\n            return props.modelValue as boolean;\n        }\n\n        return (props.modelValue as BentoMultiCheckboxType).some(item => item === props.value);\n    });\n\n    const isRadioInput: Ref<boolean> = inject(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, ref(false));\n\n    const isTitleOnly = computed(() => !props.subtitle && !props.description);\n\n    const inputRef = ref<InstanceType<typeof RadioInput> | InstanceType<typeof CheckboxInput>>(null);\n    const slotRef = ref(null);\n    const dynamicSlotRef = ref(null);\n\n    // Handle click on the whole card area\n    const handleCardClick = (event: Event) => {\n        if (inputRef.value.$refs.inputRef === event.target) {\n            const newValue = toggleInput();\n            onChange(newValue);\n            return;\n        }\n\n        // Do nothing if disabled or readonly\n        if (props.disabled && props.readonly) {\n            return;\n        }\n\n        // If it's not fully clickable prevent selecting the card if the click\n        // originated in a slot\n        if (!props.fullyClickable) {\n            // Check if the click originated from the slot - in that case, do nothng\n            if (slotRef.value && slotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the dynamic slot - in that case, do nothng\n            if (dynamicSlotRef.value && dynamicSlotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the input - in that case do nothing, as the input will emit the event already\n            if (inputRef.value && inputRef.value?.$el?.contains(event.target as Node)) {\n                return;\n            }\n        }\n\n        // If the click originated outside of these two areas, emit the change event\n        const newValue = toggleInput();\n\n        onChange(newValue);\n    };\n\n    const toggleInput = (): BentoSelectionCardModelValue => {\n        const currentValue: boolean = (inputRef.value?.$refs.inputRef as HTMLInputElement).checked;\n\n        if (isCheckboxGroup.value) {\n            const newCheckedList = [...(props.modelValue as BentoMultiCheckboxType)];\n            const index = newCheckedList.indexOf(props.value);\n\n            if (index === -1) {\n                newCheckedList.push(props.value);\n            } else {\n                newCheckedList.splice(index, 1);\n            }\n            return newCheckedList;\n        }\n\n        if (isRadioInput.value) {\n            return props.value;\n        }\n        return currentValue;\n    };\n\n    const onChange = newValue => {\n        if (!props.disabled && !props.readonly) {\n            emit('update:model-value', newValue);\n            emit('input', newValue);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Selection card component. If used standalone, only the checkbox variant can be used. If the checkbox variant is needed, please use the bento-selection-card-group component.\n     *\n     * @example\n     * import { BentoSelectionCard } from '@adyen/bento-vue2';\n     * import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy';\n     *\n     * export default {\n     *     components: { BentoSelectionCard, EmoticonHappyIcon },\n     *     template: `\n     *          <bento-selection-card title=\"Card title\" :model-value.sync=\"yourModelValue\">\n     *              <template #icon>\n     *                  <emoticon-happy-icon />\n     *              </template>\n     *          </bento-selection-card>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-selection-card',\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./selection-card.scss\" />\n","<template>\n    <controls-group\n        ref=\"containerRef\"\n        :aria-describedby=\"shouldShowGroupError ? errorMessageId : null\"\n        :label=\"label\"\n        :hide-label=\"hideLabel\"\n        :description=\"description\"\n        :disabled=\"disabled\"\n        :tooltip-text=\"tooltipText\"\n        :readonly=\"readonly\"\n        :required=\"required\"\n        :optional=\"optional\"\n        class=\"b-selection-card-group\"\n        component-name=\"selection-card-group\"\n    >\n        <div\n            v-if=\"!itemsPerRow || layout === 'vertical'\"\n            class=\"b-selection-card-group__items\"\n            :class=\"conditionalItemsClasses\"\n        >\n            <bento-selection-card\n                v-for=\"item in items\"\n                :key=\"`selection-card-${item.value}`\"\n                class=\"b-selection-card-group__item\"\n                v-bind=\"item\"\n                :model-value=\"inputValue\"\n                :readonly=\"readonly || item.readonly\"\n                :has-error=\"shouldShowGroupError\"\n                :disabled=\"disabled || item.disabled\"\n                @update:model-value=\"onInput\"\n            >\n                <template v-if=\"hasSlot('icon') && item.icon\" #icon>\n                    <slot name=\"icon\" v-bind=\"item\"></slot>\n                </template>\n                <template v-if=\"hasSlot('content') && item.content\" #content>\n                    <slot name=\"content\" v-bind=\"item\"></slot>\n                </template>\n                <template v-if=\"hasSlot('dynamicContent') && item.dynamicContent\" #dynamicContent>\n                    <slot name=\"dynamicContent\" v-bind=\"item\"></slot>\n                </template>\n            </bento-selection-card>\n        </div>\n        <template v-else>\n            <div :key=\"`selection-card-group-layout-breakpoint-${currentBreakpoint}`\">\n                <grid-layout\n                    v-for=\"(row, rowIndex) in computedRows\"\n                    :key=\"`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`\"\n                    class=\"b-selection-card-group__items--wrap\"\n                    :column-width=\"computedColumnWidth\"\n                >\n                    <template v-for=\"(item, columnIndex) in row\" #[`col-${columnIndex+1}`]>\n                        <bento-selection-card\n                            :key=\"`selection-card-${item.value}`\"\n                            class=\"b-selection-card-group__item b-selection-card-group__item--full-height\"\n                            v-bind=\"item\"\n                            :model-value=\"inputValue\"\n                            :readonly=\"readonly || item.readonly\"\n                            :has-error=\"shouldShowGroupError\"\n                            :disabled=\"disabled || item.disabled\"\n                            @update:model-value=\"onInput\"\n                        >\n                            <template v-if=\"hasSlot('icon') && item.icon\" #icon>\n                                <slot name=\"icon\" v-bind=\"item\"></slot>\n                            </template>\n                            <template v-if=\"hasSlot('content') && item.content\" #content>\n                                <slot name=\"content\" v-bind=\"item\"></slot>\n                            </template>\n                            <template v-if=\"hasSlot('dynamicContent') && item.dynamicContent\" #dynamicContent>\n                                <slot name=\"dynamicContent\" v-bind=\"item\"></slot>\n                            </template>\n                        </bento-selection-card>\n                    </template>\n                </grid-layout>\n            </div>\n        </template>\n        <error-message\n            v-if=\"shouldShowGroupError\"\n            :id=\"errorMessageId\"\n            :error-message=\"errorMessage\"\n            class=\"b-selection-card-group__error-message\"\n        />\n    </controls-group>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, provide, ref, useSlots, watch } from 'vue';\n    import { useElementSize } from '@vueuse/core';\n    import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n    import { type BentoSelectionCardGroupProps } from './selection-card-group.types';\n    import BentoSelectionCard from '../../selection-card.vue';\n    import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal';\n    import { type BentoSelectionCardModelValue } from '../../selection-card.types';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys';\n    import { generateUid } from '@/core/utils/ts';\n\n    const props = defineProps({\n  description: { default: null },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: null },\n  optional: { type: Boolean, default: false },\n  placeholder: null,\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  formId: { default: null },\n  hideLabel: { type: Boolean, default: null },\n  layout: { default: 'vertical' },\n  items: null,\n  itemsPerRow: { default: undefined },\n  modelValue: { default: null },\n  variant: { default: 'checkbox' }\n});\n\n    const emit = defineEmits([\"input\", \"update:model-value\"]);\n    const slots = useSlots();\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots\n    // We do the same in bento-checkbox-group\n    const hasSlot = name => !!slots[name];\n\n    const conditionalItemsClasses = computed(() => ({\n        'b-selection-card-group__items--horizontal': props.layout === 'horizontal',\n    }));\n\n    const inputValue = ref(props.modelValue);\n    watch(\n        () => props.modelValue,\n        () => {\n            inputValue.value = props.modelValue;\n        }\n    );\n\n    // Error message logic\n    const errorMessageId = generateUid('error');\n    const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n    // itemsPerRow logic\n    const containerRef = ref<HTMLElement | null>(null);\n    const { width } = useElementSize(containerRef);\n\n    const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]);\n    const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]);\n\n    const currentBreakpoint = computed(() => {\n        if (width.value < smallBreakpoint.value) {\n            return 'small';\n        }\n        if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) {\n            return 'medium';\n        }\n        return 'large';\n    });\n\n    const computedItemsPerRow = computed(() => {\n        return (props.itemsPerRow?.[currentBreakpoint?.value] as number) || props.items.length;\n    });\n\n    const computedRows = computed(() => {\n        if (!props.itemsPerRow) {\n            return [];\n        }\n        const rows = [];\n        for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) {\n            rows.push(props.items.slice(i, i + computedItemsPerRow?.value));\n        }\n        return rows;\n    });\n\n    // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic\n    const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value);\n\n    /**\n     * Filling the columnWidth array with the same parameters per item to pass\n     * to the `grid-layout` layout so the each card can have\n     * the same width according to the screen size.\n     */\n    const computedColumnWidth = computed(() => {\n        return computedItemsPerRow?.value\n            ? new Array(computedItemsPerRow?.value).fill({\n                  // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy\n                  small: itemColumnWidth.value,\n                  medium: itemColumnWidth.value,\n                  large: itemColumnWidth.value,\n              })\n            : [];\n    });\n\n    const onInput = value => {\n        inputValue.value = value;\n        emit('update:model-value', value);\n        emit('input', value);\n    };\n\n    const isRadioVariant = computed(() => props.variant === 'radio');\n\n    provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant);\n\n    onMounted(() => {\n        if (props.itemsPerRow) {\n            Object.values(props.itemsPerRow).forEach(el => {\n                if (el && (el < 2 || el > 6)) {\n                    throw new Error(\n                        'itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information.'\n                    );\n                }\n            });\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Group of bento-selection-cards.\n     *\n     * @example\n     * import { BentoSelectionCardGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSelectionCardGroup },\n     *     template: `\n     *          <bento-selection-card-group\n     *              :items=\"[\n     *                    {\n     *                        title: 'Card 1',\n     *                        value: 'card-1',\n     *                        content: 'Slot content 1',\n     *                        icon: RetailIcon,\n     *                    },\n     *                    {\n     *                        title: 'Card 2',\n     *                        value: 'card-2',\n     *                        content: 'Slot content 2',\n     *                        icon: LeafIcon,\n     *                    },\n     *                ]\"\n     *          >\n     *             <template #icon=\"{ icon }\">\n     *                 <component :is=\"icon\"/>\n     *              </template>\n     *              <template #content=\"{ content }\">\n     *                  <div>{{ content }}</div>\n     *               </template>\n     *          </bento-selection-card-group>\n     *     `,\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./selection-card-group.scss\" />\n"],"names":["BentoSelectionCardState","BentoSelectionCardState2","SELECTION_CARD_RADIO_INPUT_INJECTION_KEY","__default__$1","slots","useSlots","hasSlot","useHasSlot","inputId","generateUid","descriptionId","computedRadioInputModelValue","computed","props","computedCheckboxInputModelValue","conditionalClasses","isChecked","containerConditionalClasses","isTitleOnly","checkboxContainerConditionalClasses","checkboxContainerTextConditionalClasses","slotConditionalClasses","ariaLabel","useAriaLabel","isCheckboxGroup","isRadioInput","item","inject","ref","inputRef","slotRef","dynamicSlotRef","handleCardClick","event","newValue2","toggleInput","onChange","_b","_a","_d","_c","_f","_e","newValue","currentValue","newCheckedList","index","emit","__default__","name","conditionalItemsClasses","inputValue","watch","errorMessageId","shouldShowGroupError","containerRef","width","useElementSize","smallBreakpoint","BMediaQuerySMax","mediumBreakpoint","BMediaQueryMMax","currentBreakpoint","computedItemsPerRow","computedRows","rows","i","itemColumnWidth","computedColumnWidth","onInput","value","isRadioVariant","provide","onMounted","el"],"mappings":"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"}
+{"version":3,"file":"selection-card-group.u-2Y_9o2.js","sources":["../../src/components/selection-card/selection-card.types.ts","../../src/components/selection-card/selection-card.keys.ts","../../src/components/selection-card/selection-card.vue","../../src/components/selection-card/components/selection-card-group/selection-card-group.vue"],"sourcesContent":["import { type RadioInputValue } from '@/components/internal/radio-input';\nimport { type BentoCheckboxType } from '../checkbox/checkbox.types';\nimport { type VueNodeElement } from '@/types/elements';\n\nexport enum BentoSelectionCardState {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n}\n\nexport type BentoSelectionCardValue = string | number;\n\nexport type BentoSelectionCardModelValue = BentoCheckboxType | RadioInputValue;\n\nexport interface BentoSelectionCardItem {\n    content?: string | object;\n    description?: string;\n    disabled?: boolean;\n    dynamicContent?: string | object;\n    fullyClickable?: boolean;\n    hasError?: boolean;\n    icon?: VueNodeElement;\n    readonly?: boolean;\n    subtitle?: string;\n    title: string;\n    value: BentoSelectionCardValue;\n}\n","export const SELECTION_CARD_RADIO_INPUT_INJECTION_KEY = Symbol('selection card radio input injection key');\n","<template>\n    <div class=\"b-selection-card\" :class=\"conditionalClasses\" @click=\"handleCardClick\">\n        <div class=\"b-selection-card__container\" :class=\"containerConditionalClasses\">\n            <div class=\"b-selection-card__checkbox-container\" :class=\"checkboxContainerConditionalClasses\">\n                <div class=\"b-selection-card__checkbox-container-text\" :class=\"checkboxContainerTextConditionalClasses\">\n                    <div v-if=\"hasSlot('icon')\" class=\"b-selection-card__icon\" role=\"presentation\">\n                        <slot name=\"icon\" />\n                    </div>\n                    <label :for=\"inputId\" class=\"b-selection-card__text\" @click.stop.prevent=\"handleCardClick\">\n                        <bento-typography\n                            v-if=\"subtitle\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"caption\"\n                        >\n                            {{ subtitle }}\n                        </bento-typography>\n                        <bento-typography el=\"span\" variant=\"title\">{{ title }}</bento-typography>\n                        <bento-typography\n                            v-if=\"description\"\n                            id=\"descriptionId\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"body\"\n                        >\n                            {{ description }}\n                        </bento-typography>\n                    </label>\n                </div>\n                <radio-input\n                    v-if=\"isRadioInput\"\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedRadioInputModelValue\"\n                />\n                <checkbox-input\n                    v-else\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedCheckboxInputModelValue\"\n                />\n            </div>\n            <bento-typography\n                v-if=\"hasSlot('content')\"\n                ref=\"slotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"content\" />\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('dynamicContent') && isChecked\"\n                ref=\"dynamicSlotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"dynamicContent\" />\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { type BentoCheckboxType, type BentoMultiCheckboxType, CheckboxInput } from '../internal/checkbox-input';\n    import { RadioInput, type RadioInputValue } from '../internal/radio-input';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { generateUid } from '@/core/utils/ts';\n    import { computed, type ComputedRef, inject, type PropType, type Ref, ref, useSlots } from 'vue';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSelectionCardModelValue, BentoSelectionCardValue } from './selection-card.types';\n    import { BentoSelectionCardState } from './selection-card.types';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from './selection-card.keys';\n\n    const props = defineProps({\n        /**\n         * The description of the selection card\n         */\n        description: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Disables the selection card\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Makes the entire selection card clickable. Clicking over interactive elements inside the card with this prop enabled will not be possible.\n         */\n        fullyClickable: { type: Boolean, default: false },\n\n        /**\n         * Shows the selection card in error state\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * This property should not be used directly.\n         * It will be used by v-model directive on selection card component.\n         *\n         * When handling a single input, use a string or a number.\n         *\n         * When handling multiple inputs, use an array of keys.\n         * These keys exist as a set \"value\" prop for each input.\n         */\n        modelValue: {\n            type: [Boolean, String, Array] as PropType<BentoSelectionCardModelValue>,\n            default: null,\n        },\n\n        /**\n         * Sets the selection card to readonly\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The subtitle of the selection card\n         */\n        subtitle: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * The title of the selection card\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * Indicates the value of the input that will be returned when it's checked.\n         */\n        value: {\n            type: [String, Number] as PropType<BentoSelectionCardValue>,\n            required: true,\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const inputId = generateUid('selection-card-input-id');\n    const descriptionId = generateUid('selection-card-description');\n\n    const computedRadioInputModelValue: ComputedRef<RadioInputValue> = computed(\n        () => props.modelValue as RadioInputValue\n    );\n    const computedCheckboxInputModelValue: ComputedRef<BentoCheckboxType> = computed(\n        () => props.modelValue as BentoCheckboxType\n    );\n\n    const conditionalClasses = computed(() => ({\n        'b-selection-card--checked': isChecked.value,\n        'b-selection-card--fully-clickable': props.fullyClickable,\n    }));\n\n    const containerConditionalClasses = computed(() => ({\n        [`b-selection-card--${BentoSelectionCardState.DISABLED}`]: props.disabled,\n        [`b-selection-card--${BentoSelectionCardState.ERROR}`]: props.hasError,\n        [`b-selection-card--${BentoSelectionCardState.READONLY}`]: props.readonly,\n        'b-selection-card--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerTextConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container-text--center-aligned': isTitleOnly.value,\n    }));\n\n    const slotConditionalClasses = computed(() => ({\n        'b-selection-card__slot--with-icon': hasSlot('icon'),\n    }));\n\n    const ariaLabel = useAriaLabel({\n        ariaLabel: props.title,\n        label: props.value as string,\n    });\n\n    const isCheckboxGroup = computed(() => Array.isArray(props.modelValue));\n\n    const isChecked: ComputedRef<boolean> = computed(() => {\n        if (isRadioInput.value) {\n            return props.value === props.modelValue;\n        }\n        if (!isCheckboxGroup.value) {\n            return props.modelValue as boolean;\n        }\n\n        return (props.modelValue as BentoMultiCheckboxType).some(item => item === props.value);\n    });\n\n    const isRadioInput: Ref<boolean> = inject(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, ref(false));\n\n    const isTitleOnly = computed(() => !props.subtitle && !props.description);\n\n    const inputRef = ref<InstanceType<typeof RadioInput> | InstanceType<typeof CheckboxInput>>(null);\n    const slotRef = ref(null);\n    const dynamicSlotRef = ref(null);\n\n    // Handle click on the whole card area\n    const handleCardClick = (event: Event) => {\n        if (inputRef.value.$refs.inputRef === event.target) {\n            const newValue = toggleInput();\n            onChange(newValue);\n            return;\n        }\n\n        // Do nothing if disabled or readonly\n        if (props.disabled && props.readonly) {\n            return;\n        }\n\n        // If it's not fully clickable prevent selecting the card if the click\n        // originated in a slot\n        if (!props.fullyClickable) {\n            // Check if the click originated from the slot - in that case, do nothng\n            if (slotRef.value && slotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the dynamic slot - in that case, do nothng\n            if (dynamicSlotRef.value && dynamicSlotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the input - in that case do nothing, as the input will emit the event already\n            if (inputRef.value && inputRef.value?.$el?.contains(event.target as Node)) {\n                return;\n            }\n        }\n\n        // If the click originated outside of these two areas, emit the change event\n        const newValue = toggleInput();\n\n        onChange(newValue);\n    };\n\n    const toggleInput = (): BentoSelectionCardModelValue => {\n        const currentValue: boolean = (inputRef.value?.$refs.inputRef as HTMLInputElement).checked;\n\n        if (isCheckboxGroup.value) {\n            const newCheckedList = [...(props.modelValue as BentoMultiCheckboxType)];\n            const index = newCheckedList.indexOf(props.value);\n\n            if (index === -1) {\n                newCheckedList.push(props.value);\n            } else {\n                newCheckedList.splice(index, 1);\n            }\n            return newCheckedList;\n        }\n\n        if (isRadioInput.value) {\n            return props.value;\n        }\n        return currentValue;\n    };\n\n    const onChange = newValue => {\n        if (!props.disabled && !props.readonly) {\n            emit('update:model-value', newValue);\n            emit('input', newValue);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Selection card component. If used standalone, only the checkbox variant can be used. If the checkbox variant is needed, please use the bento-selection-card-group component.\n     *\n     * @example\n     * import { BentoSelectionCard } from '@adyen/bento-vue2';\n     * import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy';\n     *\n     * export default {\n     *     components: { BentoSelectionCard, EmoticonHappyIcon },\n     *     template: `\n     *          <bento-selection-card title=\"Card title\" :model-value.sync=\"yourModelValue\">\n     *              <template #icon>\n     *                  <emoticon-happy-icon />\n     *              </template>\n     *          </bento-selection-card>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-selection-card',\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./selection-card.scss\" />\n","<template>\n    <controls-group\n        ref=\"containerRef\"\n        :aria-describedby=\"shouldShowGroupError ? errorMessageId : null\"\n        :label=\"label\"\n        :hide-label=\"hideLabel\"\n        :description=\"description\"\n        :disabled=\"disabled\"\n        :tooltip-text=\"tooltipText\"\n        :readonly=\"readonly\"\n        :required=\"required\"\n        :optional=\"optional\"\n        class=\"b-selection-card-group\"\n        component-name=\"selection-card-group\"\n    >\n        <div\n            v-if=\"!itemsPerRow || layout === 'vertical'\"\n            class=\"b-selection-card-group__items\"\n            :class=\"conditionalItemsClasses\"\n        >\n            <bento-selection-card\n                v-for=\"item in items\"\n                :key=\"`selection-card-${item.value}`\"\n                class=\"b-selection-card-group__item\"\n                v-bind=\"item\"\n                :model-value=\"inputValue\"\n                :readonly=\"readonly || item.readonly\"\n                :has-error=\"shouldShowGroupError\"\n                :disabled=\"disabled || item.disabled\"\n                @update:model-value=\"onInput\"\n            >\n                <template v-if=\"hasSlot('icon') && item.icon\" #icon>\n                    <slot name=\"icon\" v-bind=\"item\"></slot>\n                </template>\n                <template v-if=\"hasSlot('content') && item.content\" #content>\n                    <slot name=\"content\" v-bind=\"item\"></slot>\n                </template>\n                <template v-if=\"hasSlot('dynamicContent') && item.dynamicContent\" #dynamicContent>\n                    <slot name=\"dynamicContent\" v-bind=\"item\"></slot>\n                </template>\n            </bento-selection-card>\n        </div>\n        <template v-else>\n            <div :key=\"`selection-card-group-layout-breakpoint-${currentBreakpoint}`\">\n                <grid-layout\n                    v-for=\"(row, rowIndex) in computedRows\"\n                    :key=\"`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`\"\n                    class=\"b-selection-card-group__items--wrap\"\n                    :column-width=\"computedColumnWidth\"\n                >\n                    <template v-for=\"(item, columnIndex) in row\" #[`col-${columnIndex+1}`]>\n                        <bento-selection-card\n                            :key=\"`selection-card-${item.value}`\"\n                            class=\"b-selection-card-group__item b-selection-card-group__item--full-height\"\n                            v-bind=\"item\"\n                            :model-value=\"inputValue\"\n                            :readonly=\"readonly || item.readonly\"\n                            :has-error=\"shouldShowGroupError\"\n                            :disabled=\"disabled || item.disabled\"\n                            @update:model-value=\"onInput\"\n                        >\n                            <template v-if=\"hasSlot('icon') && item.icon\" #icon>\n                                <slot name=\"icon\" v-bind=\"item\"></slot>\n                            </template>\n                            <template v-if=\"hasSlot('content') && item.content\" #content>\n                                <slot name=\"content\" v-bind=\"item\"></slot>\n                            </template>\n                            <template v-if=\"hasSlot('dynamicContent') && item.dynamicContent\" #dynamicContent>\n                                <slot name=\"dynamicContent\" v-bind=\"item\"></slot>\n                            </template>\n                        </bento-selection-card>\n                    </template>\n                </grid-layout>\n            </div>\n        </template>\n        <error-message\n            v-if=\"shouldShowGroupError\"\n            :id=\"errorMessageId\"\n            :error-message=\"errorMessage\"\n            class=\"b-selection-card-group__error-message\"\n        />\n    </controls-group>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, provide, ref, useSlots, watch } from 'vue';\n    import { useElementSize } from '@vueuse/core';\n    import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n    import { type BentoSelectionCardGroupEmits, type BentoSelectionCardGroupProps } from './selection-card-group.types';\n    import BentoSelectionCard from '../../selection-card.vue';\n    import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys';\n    import { generateUid } from '@/core/utils/ts';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n  description: { default: null },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: null },\n  optional: { type: Boolean, default: false },\n  placeholder: null,\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  formId: { default: null },\n  hideLabel: { type: Boolean, default: null },\n  layout: { default: 'vertical' },\n  items: null,\n  itemsPerRow: { default: undefined },\n  modelValue: { default: null },\n  variant: { default: 'checkbox' }\n});\n\n    const emit = defineEmits([\"update:model-value\", \"input\"]);\n\n    const { emitValue } = useFormFieldEmits(emit);\n\n    const slots = useSlots();\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots\n    // We do the same in bento-checkbox-group\n    const hasSlot = name => !!slots[name];\n\n    const conditionalItemsClasses = computed(() => ({\n        'b-selection-card-group__items--horizontal': props.layout === 'horizontal',\n    }));\n\n    const inputValue = ref(props.modelValue);\n    watch(\n        () => props.modelValue,\n        () => {\n            inputValue.value = props.modelValue;\n        }\n    );\n\n    // Error message logic\n    const errorMessageId = generateUid('error');\n    const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n    // itemsPerRow logic\n    const containerRef = ref<HTMLElement | null>(null);\n    const { width } = useElementSize(containerRef);\n\n    const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]);\n    const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]);\n\n    const currentBreakpoint = computed(() => {\n        if (width.value < smallBreakpoint.value) {\n            return 'small';\n        }\n        if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) {\n            return 'medium';\n        }\n        return 'large';\n    });\n\n    const computedItemsPerRow = computed(() => {\n        return (props.itemsPerRow?.[currentBreakpoint?.value] as number) || props.items.length;\n    });\n\n    const computedRows = computed(() => {\n        if (!props.itemsPerRow) {\n            return [];\n        }\n        const rows = [];\n        for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) {\n            rows.push(props.items.slice(i, i + computedItemsPerRow?.value));\n        }\n        return rows;\n    });\n\n    // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic\n    const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value);\n\n    /**\n     * Filling the columnWidth array with the same parameters per item to pass\n     * to the `grid-layout` layout so the each card can have\n     * the same width according to the screen size.\n     */\n    const computedColumnWidth = computed(() => {\n        return computedItemsPerRow?.value\n            ? new Array(computedItemsPerRow?.value).fill({\n                  // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy\n                  small: itemColumnWidth.value,\n                  medium: itemColumnWidth.value,\n                  large: itemColumnWidth.value,\n              })\n            : [];\n    });\n\n    const onInput = value => {\n        inputValue.value = value;\n        emitValue(value);\n    };\n\n    const isRadioVariant = computed(() => props.variant === 'radio');\n\n    provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant);\n\n    onMounted(() => {\n        if (props.itemsPerRow) {\n            Object.values(props.itemsPerRow).forEach(el => {\n                if (el && (el < 2 || el > 6)) {\n                    throw new Error(\n                        'itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information.'\n                    );\n                }\n            });\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Group of bento-selection-cards.\n     *\n     * @example\n     * import { BentoSelectionCardGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSelectionCardGroup },\n     *     template: `\n     *          <bento-selection-card-group\n     *              :items=\"[\n     *                    {\n     *                        title: 'Card 1',\n     *                        value: 'card-1',\n     *                        content: 'Slot content 1',\n     *                        icon: RetailIcon,\n     *                    },\n     *                    {\n     *                        title: 'Card 2',\n     *                        value: 'card-2',\n     *                        content: 'Slot content 2',\n     *                        icon: LeafIcon,\n     *                    },\n     *                ]\"\n     *          >\n     *             <template #icon=\"{ icon }\">\n     *                 <component :is=\"icon\"/>\n     *              </template>\n     *              <template #content=\"{ content }\">\n     *                  <div>{{ content }}</div>\n     *               </template>\n     *          </bento-selection-card-group>\n     *     `,\n     * }\n     */\n    export default {\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./selection-card-group.scss\" />\n"],"names":["BentoSelectionCardState","BentoSelectionCardState2","SELECTION_CARD_RADIO_INPUT_INJECTION_KEY","__default__$1","slots","useSlots","hasSlot","useHasSlot","inputId","generateUid","descriptionId","computedRadioInputModelValue","computed","props","computedCheckboxInputModelValue","conditionalClasses","isChecked","containerConditionalClasses","isTitleOnly","checkboxContainerConditionalClasses","checkboxContainerTextConditionalClasses","slotConditionalClasses","ariaLabel","useAriaLabel","isCheckboxGroup","isRadioInput","item","inject","ref","inputRef","slotRef","dynamicSlotRef","handleCardClick","event","newValue2","toggleInput","onChange","_b","_a","_d","_c","_f","_e","newValue","currentValue","newCheckedList","index","emit","__default__","emitValue","useFormFieldEmits","name","conditionalItemsClasses","inputValue","watch","errorMessageId","shouldShowGroupError","containerRef","width","useElementSize","smallBreakpoint","BMediaQuerySMax","mediumBreakpoint","BMediaQueryMMax","currentBreakpoint","computedItemsPerRow","computedRows","rows","i","itemColumnWidth","computedColumnWidth","onInput","value","isRadioVariant","provide","onMounted","el"],"mappings":"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"}

package/dist/data-grid.js

@@ -1,4 +1,4 @@
-import { g as e, d as o, a as r, b as n, f as i, e as B, c as d, B as s } from "./chunks/data-grid.B-kBw540.js";
+import { g as e, d as o, a as r, b as n, f as i, e as B, c as d, B as s } from "./chunks/data-grid.BhwTkhfk.js";
 export {
   e as BentoColumnOverflow,
   o as BentoDataGrid,

package/dist/date-range-picker.js

@@ -1,9 +1,10 @@
-import { B as t, a as n } from "./chunks/date-range-picker.BtPxkPN0.js";
-import { C as o, a as i } from "./chunks/calendar.Fm_dfQC5.js";
+import { B as t } from "./chunks/date-range-picker.CmKA76Yu.js";
+import { B as n } from "./chunks/date-range-picker.types.Ckt7zxGy.js";
+import { C as i, a as B } from "./chunks/calendar.Fm_dfQC5.js";
 export {
   t as BentoDateRangePicker,
   n as BentoDateRangePickerEvent,
-  o as BentoDateRangePickerFirstDayOfWeek,
-  i as BentoDateRangePickerVariant
+  i as BentoDateRangePickerFirstDayOfWeek,
+  B as BentoDateRangePickerVariant
 };
 //# sourceMappingURL=date-range-picker.js.map

package/dist/date-range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"date-range-picker.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/filter-bar.js

@@ -1,4 +1,4 @@
-import { a, B as r, c as B, b as n, d as o } from "./chunks/filter-bar.BLnSnOlj.js";
+import { a, B as r, c as B, b as n, d as o } from "./chunks/filter-bar.Bj4LgjzJ.js";
 export {
   a as BentoBaseFilter,
   r as BentoFilterBar,

package/dist/header-with-views.js

@@ -1,4 +1,4 @@
-import { h as r } from "./chunks/header-with-views.C6Y7mAkq.js";
+import { h as r } from "./chunks/header-with-views.D6JUlnEf.js";
 export {
   r as BentoHeaderWithViews
 };