npm - @adyen/bento-vue3 - Versions diffs - 2.0.1 → 2.1.0 - Mend

@adyen/bento-vue3 2.0.1 → 2.1.0

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

Files changed (325) hide show

package/dist/chunks/{selection-card-group.DHXtJpoB.js → selection-card-group.CQsS8-H9.js} RENAMED Viewed

@@ -1,20 +1,20 @@
-import { defineComponent as J, useSlots as K, computed as r, inject as ee, ref as _, openBlock as n, createElementBlock as w, normalizeClass as h, createElementVNode as T, unref as t, renderSlot as v, createCommentVNode as R, withModifiers as ae, createBlock as d, withCtx as s, createTextVNode as U, toDisplayString as j, createVNode as oe, watch as le, provide as te, onMounted as re, Fragment as W, renderList as F, mergeProps as y, createSlots as Y } from "vue";
+import { defineComponent as J, useSlots as K, computed as r, inject as ee, ref as _, openBlock as n, createElementBlock as w, normalizeClass as h, createElementVNode as T, unref as t, renderSlot as b, createCommentVNode as R, withModifiers as ae, createBlock as u, withCtx as s, createTextVNode as U, toDisplayString as j, createVNode as le, watch as oe, provide as te, onMounted as re, Fragment as W, renderList as F, mergeProps as p, createSlots as Y } from "vue";
 import { h as ne } from "./index.DCpihRYV.js";
 import { a as ie, B as se } from "./es6.yPcTMnSH.js";
-import { B as I } from "./typography.wIM07Hbl.js";
-import { u as de } from "./aria-label.CaUURpnB.js";
+import { B as E } from "./typography.B6elnWpr.js";
+import { C as de } from "./checkbox-input.Bv_GjPU8.js";
+import { u as ue } from "./aria-label.CaUURpnB.js";
 import { g as Q } from "./generate-uid.DBWe4g6T.js";
-import { u as ue } from "./use-has-slot.CyMiImRQ.js";
-import { a as ce } from "./radio-input.FC4PVCHr.js";
-import { C as fe } from "./checkbox-input.Bv_GjPU8.js";
+import { u as ce } from "./use-has-slot.CyMiImRQ.js";
+import { a as me } from "./radio-input.FC4PVCHr.js";
 import { _ as X } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { u as me } from "./form-field.B60VsF8d.js";
-import { C as ve } from "./controls-group.KarFHKUT.js";
-import { G as pe } from "./grid-layout.CCWNscU_.js";
-import { E as ye } from "./error-message.Bt0CznQM.js";
+import { u as fe } from "./form-field.B60VsF8d.js";
+import { C as ve } from "./controls-group.CC3yZiTT.js";
+import { G as be } from "./grid-layout.CCWNscU_.js";
+import { E as pe } from "./error-message.DJ5l0EUH.js";
 import "../assets/selection-card-group.css";
-var G = /* @__PURE__ */ ((l) => (l.DISABLED = "disabled", l.READONLY = "readonly", l.ERROR = "error", l))(G || {});
-const Z = /* @__PURE__ */ Symbol("selection card radio input injection key"), be = {
+var G = /* @__PURE__ */ ((o) => (o.DISABLED = "disabled", o.READONLY = "readonly", o.ERROR = "error", o))(G || {});
+const Z = /* @__PURE__ */ Symbol("selection card radio input injection key"), ye = {
   key: 0,
   class: "b-selection-card__icon",
   role: "presentation",
@@ -83,15 +83,15 @@ const Z = /* @__PURE__ */ Symbol("selection card radio input injection key"), be
     }
   },
   emits: ["input", "update:model-value"],
-  setup(l, { emit: x }) {
-    const e = l, S = x, z = K(), k = ue(z), u = Q("selection-card-input-id"), M = Q("selection-card-description"), g = r(
+  setup(o, { emit: x }) {
+    const e = o, S = x, z = K(), k = ce(z), c = Q("selection-card-input-id"), N = Q("selection-card-description"), g = r(
       () => e.modelValue
-    ), L = r(
+    ), M = r(
       () => e.modelValue
     ), C = r(() => ({
       "b-selection-card--checked": P.value,
       "b-selection-card--fully-clickable": e.fullyClickable
-    })), N = r(() => ({
+    })), L = r(() => ({
       [`b-selection-card--${G.DISABLED}`]: e.disabled,
       [`b-selection-card--${G.ERROR}`]: e.hasError,
       [`b-selection-card--${G.READONLY}`]: e.readonly,
@@ -102,35 +102,35 @@ const Z = /* @__PURE__ */ Symbol("selection card radio input injection key"), be
       "b-selection-card__checkbox-container-text--center-aligned": B.value
     })), O = r(() => ({
       "b-selection-card__slot--with-icon": k("icon")
-    })), $ = de({
+    })), $ = ue({
       ariaLabel: e.title,
       label: e.value
-    }), c = r(() => Array.isArray(e.modelValue)), P = r(() => b.value ? e.value === e.modelValue : c.value ? e.modelValue.some((o) => o === e.value) : e.modelValue), b = ee(Z, _(!1)), B = r(() => !e.subtitle && !e.description), f = _(null), E = _(null), a = _(null), p = (o) => {
-      if (f.value.$refs.inputRef === o.target) {
+    }), m = r(() => Array.isArray(e.modelValue)), P = r(() => y.value ? e.value === e.modelValue : m.value ? e.modelValue.some((l) => l === e.value) : e.modelValue), y = ee(Z, _(!1)), B = r(() => !e.subtitle && !e.description), f = _(null), I = _(null), a = _(null), d = (l) => {
+      if (f.value.$refs.inputRef === l.target) {
         const D = i();
         q(D);
         return;
       }
-      if (e.disabled && e.readonly || !e.fullyClickable && (E.value && E.value?.$el?.contains(o.target) || a.value && a.value?.$el?.contains(o.target) || f.value && f.value?.$el?.contains(o.target)))
+      if (e.disabled && e.readonly || !e.fullyClickable && (I.value && I.value?.$el?.contains(l.target) || a.value && a.value?.$el?.contains(l.target) || f.value && f.value?.$el?.contains(l.target)))
         return;
-      const m = i();
-      q(m);
+      const v = i();
+      q(v);
     }, i = () => {
-      const o = (f.value?.$refs.inputRef).checked;
-      if (c.value) {
-        const m = [...e.modelValue], D = m.indexOf(e.value);
-        return D === -1 ? m.push(e.value) : m.splice(D, 1), m;
+      const l = (f.value?.$refs.inputRef).checked;
+      if (m.value) {
+        const v = [...e.modelValue], D = v.indexOf(e.value);
+        return D === -1 ? v.push(e.value) : v.splice(D, 1), v;
       }
-      return b.value ? e.value : o;
-    }, q = (o) => {
-      !e.disabled && !e.readonly && (S("update:model-value", o), S("input", o));
+      return y.value ? e.value : l;
+    }, q = (l) => {
+      !e.disabled && !e.readonly && (S("update:model-value", l), S("input", l));
     };
-    return (o, m) => (n(), w("div", {
+    return (l, v) => (n(), w("div", {
       class: h(["b-selection-card", C.value]),
-      onClick: p
+      onClick: d
     }, [
       T("div", {
-        class: h(["b-selection-card__container", N.value])
+        class: h(["b-selection-card__container", L.value])
       }, [
         T("div", {
           class: h(["b-selection-card__checkbox-container", V.value])
@@ -138,35 +138,35 @@ const Z = /* @__PURE__ */ Symbol("selection card radio input injection key"), be
           T("div", {
             class: h(["b-selection-card__checkbox-container-text", A.value])
           }, [
-            t(k)("icon") ? (n(), w("div", be, [
-              v(o.$slots, "icon", {}, void 0, !0)
+            t(k)("icon") ? (n(), w("div", ye, [
+              b(l.$slots, "icon", {}, void 0, !0)
             ])) : R("", !0),
             T("label", {
-              for: t(u),
+              for: t(c),
               class: "b-selection-card__text",
-              onClick: ae(p, ["stop", "prevent"])
+              onClick: ae(d, ["stop", "prevent"])
             }, [
-              l.subtitle ? (n(), d(t(I), {
+              o.subtitle ? (n(), u(t(E), {
                 key: 0,
                 class: "b-selection-card__description",
                 el: "span",
                 variant: "caption"
               }, {
                 default: s(() => [
-                  U(j(l.subtitle), 1)
+                  U(j(o.subtitle), 1)
                 ]),
                 _: 1
               })) : R("", !0),
-              oe(t(I), {
+              le(t(E), {
                 el: "span",
                 variant: "title"
               }, {
                 default: s(() => [
-                  U(j(l.title), 1)
+                  U(j(o.title), 1)
                 ]),
                 _: 1
               }),
-              l.description ? (n(), d(t(I), {
+              o.description ? (n(), u(t(E), {
                 key: 1,
                 id: "descriptionId",
                 class: "b-selection-card__description",
@@ -174,53 +174,53 @@ const Z = /* @__PURE__ */ Symbol("selection card radio input injection key"), be
                 variant: "body"
               }, {
                 default: s(() => [
-                  U(j(l.description), 1)
+                  U(j(o.description), 1)
                 ]),
                 _: 1
               })) : R("", !0)
             ], 8, he)
           ], 2),
-          t(b) ? (n(), d(t(ce), {
+          t(y) ? (n(), u(t(me), {
             key: 0,
-            id: t(u),
+            id: t(c),
             ref_key: "inputRef",
             ref: f,
             "aria-label": t($),
-            "aria-describedby": l.description ? t(M) : void 0,
-            disabled: l.disabled,
-            "has-error": l.hasError,
-            "aria-readonly": l.readonly ?? void 0,
-            value: l.value,
-            readonly: l.readonly,
+            "aria-describedby": o.description ? t(N) : void 0,
+            disabled: o.disabled,
+            "has-error": o.hasError,
+            "aria-readonly": o.readonly ?? void 0,
+            value: o.value,
+            readonly: o.readonly,
             "model-value": g.value
-          }, null, 8, ["id", "aria-label", "aria-describedby", "disabled", "has-error", "aria-readonly", "value", "readonly", "model-value"])) : (n(), d(t(fe), {
+          }, null, 8, ["id", "aria-label", "aria-describedby", "disabled", "has-error", "aria-readonly", "value", "readonly", "model-value"])) : (n(), u(t(de), {
             key: 1,
-            id: t(u),
+            id: t(c),
             ref_key: "inputRef",
             ref: f,
             "aria-label": t($),
-            "aria-describedby": l.description ? t(M) : void 0,
-            disabled: l.disabled,
-            "has-error": l.hasError,
-            "aria-readonly": l.readonly ?? void 0,
-            value: l.value,
-            readonly: l.readonly,
-            "model-value": L.value
+            "aria-describedby": o.description ? t(N) : void 0,
+            disabled: o.disabled,
+            "has-error": o.hasError,
+            "aria-readonly": o.readonly ?? void 0,
+            value: o.value,
+            readonly: o.readonly,
+            "model-value": M.value
           }, null, 8, ["id", "aria-label", "aria-describedby", "disabled", "has-error", "aria-readonly", "value", "readonly", "model-value"]))
         ], 2),
-        t(k)("content") ? (n(), d(t(I), {
+        t(k)("content") ? (n(), u(t(E), {
           key: 0,
           ref_key: "slotRef",
-          ref: E,
+          ref: I,
           el: "div",
           class: h(["b-selection-card__slot", O.value])
         }, {
           default: s(() => [
-            v(o.$slots, "content", {}, void 0, !0)
+            b(l.$slots, "content", {}, void 0, !0)
           ]),
           _: 3
         }, 8, ["class"])) : R("", !0),
-        t(k)("dynamicContent") && P.value ? (n(), d(t(I), {
+        t(k)("dynamicContent") && P.value ? (n(), u(t(E), {
           key: 1,
           ref_key: "dynamicSlotRef",
           ref: a,
@@ -228,7 +228,7 @@ const Z = /* @__PURE__ */ Symbol("selection card radio input injection key"), be
           class: h(["b-selection-card__slot", O.value])
         }, {
           default: s(() => [
-            v(o.$slots, "dynamicContent", {}, void 0, !0)
+            b(l.$slots, "dynamicContent", {}, void 0, !0)
           ]),
           _: 3
         }, 8, ["class"])) : R("", !0)
@@ -259,42 +259,43 @@ const Z = /* @__PURE__ */ Symbol("selection card radio input injection key"), be
     tooltipText: { default: null }
   },
   emits: ["update:model-value"],
-  setup(l, { emit: x }) {
-    const e = l, S = x, { emitValue: z } = me(S), k = K(), u = (a) => !!k[a], M = r(() => ({
+  setup(o, { emit: x }) {
+    const e = o, S = x, { emitValue: z } = fe(S), k = K(), c = (a) => !!k[a], N = r(() => ({
       "b-selection-card-group__items--horizontal": e.layout === "horizontal"
     })), g = _(e.modelValue);
-    le(
+    oe(
       () => e.modelValue,
       () => {
         g.value = e.modelValue;
       }
     );
-    const L = Q("error"), C = r(() => !e.disabled && !e.readonly && !!e.errorMessage), N = _(null), { width: V } = ne(N), A = r(() => ie.split("px")[0]), O = r(() => se.split("px")[0]), $ = r(() => V.value < A.value ? "small" : V.value >= A.value && V.value < O.value ? "medium" : "large"), c = r(() => e.itemsPerRow?.[$?.value] || e.items.length), P = r(() => {
+    const M = Q("error"), C = r(() => !e.disabled && !e.readonly && !!e.errorMessage), L = _(null), { width: V } = ne(L), A = r(() => ie.split("px")[0]), O = r(() => se.split("px")[0]), $ = r(() => V.value < A.value ? "small" : V.value >= A.value && V.value < O.value ? "medium" : "large"), m = r(() => e.itemsPerRow?.[$?.value] || e.items.length), P = r(() => {
       if (!e.itemsPerRow)
         return [];
       const a = [];
-      for (let p = 0; p < e.items.length; p += c?.value)
-        a.push(e.items.slice(p, p + c?.value));
+      for (let d = 0; d < e.items.length; d += m?.value)
+        a.push(e.items.slice(d, d + m?.value));
       return a;
-    }), b = r(() => 12 / c?.value), B = r(() => c?.value ? new Array(c?.value).fill({
+    }), y = r(() => 12 / m?.value), B = r(() => m?.value ? new Array(m?.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: b.value,
-      medium: b.value,
-      large: b.value
+      small: y.value,
+      medium: y.value,
+      large: y.value
     }) : []), f = (a) => {
       g.value = a, z(a);
-    }, E = r(() => e.variant === "radio");
-    return te(Z, E), re(() => {
+    }, I = r(() => e.variant === "radio");
+    return te(Z, I), re(() => {
       e.itemsPerRow && Object.values(e.itemsPerRow).forEach((a) => {
-        if (a && (a < 2 || a > 6))
+        const d = Number(a);
+        if (!Number.isInteger(d) || d < 1 || d > 6)
           throw new Error(
-            "itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information."
+            "itemsPerRow values must have a value between 1 and 6 items per row. Read the documentation for more information."
           );
       });
-    }), (a, p) => (n(), d(t(ve), {
+    }), (a, d) => (n(), u(t(ve), {
       ref_key: "containerRef",
-      ref: N,
-      "aria-describedby": C.value ? t(L) : null,
+      ref: L,
+      "aria-describedby": C.value ? t(M) : null,
       "aria-required": a.required,
       label: a.label,
       "hide-label": a.hideLabel,
@@ -310,9 +311,9 @@ const Z = /* @__PURE__ */ Symbol("selection card radio input injection key"), be
       default: s(() => [
         !a.itemsPerRow || a.layout === "vertical" ? (n(), w("div", {
           key: 0,
-          class: h(["b-selection-card-group__items", M.value])
+          class: h(["b-selection-card-group__items", N.value])
         }, [
-          (n(!0), w(W, null, F(a.items, (i) => (n(), d(H, y({
+          (n(!0), w(W, null, F(a.items, (i) => (n(), u(H, p({
             key: `selection-card-${i.value}`,
             class: "b-selection-card-group__item",
             ref_for: !0
@@ -323,24 +324,24 @@ const Z = /* @__PURE__ */ Symbol("selection card radio input injection key"), be
             disabled: a.disabled || i.disabled,
             "onUpdate:modelValue": f
           }), Y({ _: 2 }, [
-            u("icon") && i.icon ? {
+            c("icon") && i.icon ? {
               name: "icon",
               fn: s(() => [
-                v(a.$slots, "icon", y({ ref_for: !0 }, i), void 0, !0)
+                b(a.$slots, "icon", p({ ref_for: !0 }, i), void 0, !0)
               ]),
               key: "0"
             } : void 0,
-            u("content") && i.content ? {
+            c("content") && i.content ? {
               name: "content",
               fn: s(() => [
-                v(a.$slots, "content", y({ ref_for: !0 }, i), void 0, !0)
+                b(a.$slots, "content", p({ ref_for: !0 }, i), void 0, !0)
               ]),
               key: "1"
             } : void 0,
-            u("dynamicContent") && i.dynamicContent ? {
+            c("dynamicContent") && i.dynamicContent ? {
               name: "dynamicContent",
               fn: s(() => [
-                v(a.$slots, "dynamicContent", y({ ref_for: !0 }, i), void 0, !0)
+                b(a.$slots, "dynamicContent", p({ ref_for: !0 }, i), void 0, !0)
               ]),
               key: "2"
             } : void 0
@@ -348,43 +349,43 @@ const Z = /* @__PURE__ */ Symbol("selection card radio input injection key"), be
         ], 2)) : (n(), w("div", {
           key: `selection-card-group-layout-breakpoint-${$.value}`
         }, [
-          (n(!0), w(W, null, F(P.value, (i, q) => (n(), d(t(pe), {
-            key: `selection-card-group-row-${q}-cols-${c.value}`,
+          (n(!0), w(W, null, F(P.value, (i, q) => (n(), u(t(be), {
+            key: `selection-card-group-row-${q}-cols-${m.value}`,
             class: "b-selection-card-group__items--wrap",
             "column-width": B.value
           }, Y({ _: 2 }, [
-            F(i, (o, m) => ({
-              name: `col-${Number(m) + 1}`,
+            F(i, (l, v) => ({
+              name: `col-${Number(v) + 1}`,
               fn: s(() => [
-                (n(), d(H, y({
-                  key: `selection-card-${o.value}`,
+                (n(), u(H, p({
+                  key: `selection-card-${l.value}`,
                   class: "b-selection-card-group__item b-selection-card-group__item--full-height",
                   ref_for: !0
-                }, o, {
+                }, l, {
                   "model-value": g.value,
-                  readonly: a.readonly || o.readonly,
+                  readonly: a.readonly || l.readonly,
                   "has-error": C.value,
-                  disabled: a.disabled || o.disabled,
+                  disabled: a.disabled || l.disabled,
                   "onUpdate:modelValue": f
                 }), Y({ _: 2 }, [
-                  u("icon") && o.icon ? {
+                  c("icon") && l.icon ? {
                     name: "icon",
                     fn: s(() => [
-                      v(a.$slots, "icon", y({ ref_for: !0 }, o), void 0, !0)
+                      b(a.$slots, "icon", p({ ref_for: !0 }, l), void 0, !0)
                     ]),
                     key: "0"
                   } : void 0,
-                  u("content") && o.content ? {
+                  c("content") && l.content ? {
                     name: "content",
                     fn: s(() => [
-                      v(a.$slots, "content", y({ ref_for: !0 }, o), void 0, !0)
+                      b(a.$slots, "content", p({ ref_for: !0 }, l), void 0, !0)
                     ]),
                     key: "1"
                   } : void 0,
-                  u("dynamicContent") && o.dynamicContent ? {
+                  c("dynamicContent") && l.dynamicContent ? {
                     name: "dynamicContent",
                     fn: s(() => [
-                      v(a.$slots, "dynamicContent", y({ ref_for: !0 }, o), void 0, !0)
+                      b(a.$slots, "dynamicContent", p({ ref_for: !0 }, l), void 0, !0)
                     ]),
                     key: "2"
                   } : void 0
@@ -393,9 +394,9 @@ const Z = /* @__PURE__ */ Symbol("selection card radio input injection key"), be
             }))
           ]), 1032, ["column-width"]))), 128))
         ])),
-        C.value ? (n(), d(t(ye), {
+        C.value ? (n(), u(t(pe), {
           key: 2,
-          id: t(L),
+          id: t(M),
           "error-message": a.errorMessage,
           class: "b-selection-card-group__error-message"
         }, null, 8, ["id", "error-message"])) : R("", !0)
@@ -403,10 +404,10 @@ const Z = /* @__PURE__ */ Symbol("selection card radio input injection key"), be
       _: 3
     }, 8, ["aria-describedby", "aria-required", "label", "hide-label", "description", "disabled", "tooltip-text", "readonly", "required", "optional"]));
   }
-}), qe = /* @__PURE__ */ X(Re, [["__scopeId", "data-v-a7792b89"]]);
+}), qe = /* @__PURE__ */ X(Re, [["__scopeId", "data-v-78394b17"]]);
 export {
   H as B,
   G as a,
   qe as s
 };
-//# sourceMappingURL=selection-card-group.DHXtJpoB.js.map
+//# sourceMappingURL=selection-card-group.CQsS8-H9.js.map

package/dist/chunks/{selection-card-group.DHXtJpoB.js.map → selection-card-group.CQsS8-H9.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"selection-card-group.DHXtJpoB.js","sources":["../../../vue2/src/components/selection-card/selection-card.types.ts","../../../vue2/src/components/selection-card/selection-card.keys.ts","../../../vue2/src/components/selection-card/selection-card.vue","../../../vue2/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 '@/types/checkbox';\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\" aria-hidden=\"true\">\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 { CheckboxInput } from '../internal/checkbox-input';\n import { RadioInput, type RadioInputValue } from '../internal/radio-input';\n import { type BentoCheckboxType, type BentoMultiCheckboxType } from '@/types/checkbox';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { generateUid } from '@/utils/ts/generate-uid';\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<{\n /\n Emitted when the selection card is clicked. Enables Vue2 \"v-model\"\n /\n (e: 'input', value: BentoSelectionCardValue);\n /\n Emitted when the selection card is clicked. Enables Vue3 \"v-model\"\n /\n (e: 'update:model-value', value: BentoSelectionCardValue);\n }>();\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 :aria-required=\"required\"\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-${Number(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 '@/utils/ts/generate-uid';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n const props = withDefaults(defineProps<BentoSelectionCardGroupProps>(), {\n description: null,\n disabled: false,\n errorMessage: null,\n formId: null,\n hideLabel: null,\n label: null,\n layout: 'vertical',\n itemsPerRow: undefined,\n modelValue: null,\n optional: false,\n required: false,\n tooltipText: null,\n readonly: false,\n variant: 'checkbox',\n });\n\n const emit = defineEmits<BentoSelectionCardGroupEmits>();\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', event: 'update:model-value' },\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","props","__props","emit","__emit","slots","useSlots","hasSlot","useHasSlot","inputId","generateUid","descriptionId","computedRadioInputModelValue","computed","computedCheckboxInputModelValue","conditionalClasses","isChecked","containerConditionalClasses","isTitleOnly","checkboxContainerConditionalClasses","checkboxContainerTextConditionalClasses","slotConditionalClasses","ariaLabel","useAriaLabel","isCheckboxGroup","isRadioInput","item","inject","ref","inputRef","slotRef","dynamicSlotRef","handleCardClick","event","newValue2","toggleInput","onChange","newValue","currentValue","newCheckedList","index","__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":";;;;;;;;;;;;;;;AAIO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,WAAA,YACAA,EAAA,WAAA,YACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA;ACJL,MAAAE,IAAA,uBAAA,0CAAA;;;;;iBC6THC,KAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AApOA,UAAAC,IAAAC,GAoEAC,IAAAC,GAWAC,IAAAC,EAAA,GACAC,IAAAC,GAAAH,CAAA,GAEAI,IAAAC,EAAA,yBAAA,GACAC,IAAAD,EAAA,4BAAA,GAEAE,IAAAC;AAAA,MAAmE,MAAAZ,EAAA;AAAA,IACnD,GAEhBa,IAAAD;AAAA,MAAwE,MAAAZ,EAAA;AAAA,IACxD,GAGhBc,IAAAF,EAAA,OAAA;AAAA,MAA2C,6BAAAG,EAAA;AAAA,MACA,qCAAAf,EAAA;AAAA,IACI,EAAA,GAG/CgB,IAAAJ,EAAA,OAAA;AAAA,MAAoD,CAAA,qBAAAhB,EAAA,QAAA,EAAA,GAAAI,EAAA;AAAA,MACiB,CAAA,qBAAAJ,EAAA,KAAA,EAAA,GAAAI,EAAA;AAAA,MACH,CAAA,qBAAAJ,EAAA,QAAA,EAAA,GAAAI,EAAA;AAAA,MACG,oCAAAiB,EAAA;AAAA,IACjB,EAAA,GAGpDC,IAAAN,EAAA,OAAA;AAAA,MAA4D,wDAAAK,EAAA;AAAA,IACY,EAAA,GAGxEE,IAAAP,EAAA,OAAA;AAAA,MAAgE,6DAAAK,EAAA;AAAA,IACa,EAAA,GAG7EG,IAAAR,EAAA,OAAA;AAAA,MAA+C,qCAAAN,EAAA,MAAA;AAAA,IACQ,EAAA,GAGvDe,IAAAC,GAAA;AAAA,MAA+B,WAAAtB,EAAA;AAAA,MACV,OAAAA,EAAA;AAAA,IACJ,CAAA,GAGjBuB,IAAAX,EAAA,MAAA,MAAA,QAAAZ,EAAA,UAAA,CAAA,GAEAe,IAAAH,EAAA,MACIY,EAAA,QACIxB,EAAA,UAAAA,EAAA,aAEJuB,EAAA,QAIAvB,EAAA,WAAA,KAAA,CAAAyB,MAAAA,MAAAzB,EAAA,KAAA,IAHIA,EAAA,UAGiF,GAGzFwB,IAAAE,GAAA5B,GAAA6B,EAAA,EAAA,CAAA,GAEAV,IAAAL,EAAA,MAAA,CAAAZ,EAAA,YAAA,CAAAA,EAAA,WAAA,GAEA4B,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GAGAI,IAAA,CAAAC,MAAA;AACI,UAAAJ,EAAA,MAAA,MAAA,aAAAI,EAAA,QAAA;AACI,cAAAC,IAAAC,EAAA;AACA,QAAAC,EAAAF,CAAA;AACA;AAAA,MAAA;AAUJ,UANAjC,EAAA,YAAAA,EAAA,YAMA,CAAAA,EAAA,mBAEI6B,EAAA,SAAAA,EAAA,OAAA,KAAA,SAAAG,EAAA,MAAA,KAIAF,EAAA,SAAAA,EAAA,OAAA,KAAA,SAAAE,EAAA,MAAA,KAIAJ,EAAA,SAAAA,EAAA,OAAA,KAAA,SAAAI,EAAA,MAAA;AACI;AAKR,YAAAI,IAAAF,EAAA;AAEA,MAAAC,EAAAC,CAAA;AAAA,IAAiB,GAGrBF,IAAA,MAAA;AACI,YAAAG,KAAAT,EAAA,OAAA,MAAA,UAAA;AAEA,UAAAL,EAAA,OAAA;AACI,cAAAe,IAAA,CAAA,GAAAtC,EAAA,UAAA,GACAuC,IAAAD,EAAA,QAAAtC,EAAA,KAAA;AAEA,eAAAuC,MAAA,KACID,EAAA,KAAAtC,EAAA,KAAA,IAEAsC,EAAA,OAAAC,GAAA,CAAA,GAEJD;AAAA,MAAO;AAGX,aAAAd,EAAA,QACIxB,EAAA,QAEJqC;AAAA,IAAO,GAGXF,IAAA,CAAAC,MAAA;AACI,MAAA,CAAApC,EAAA,YAAA,CAAAA,EAAA,aACIE,EAAA,sBAAAkC,CAAA,GACAlC,EAAA,SAAAkC,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mEC9CJI,KAAA;AAAA,EAAe,OAAA,EAAA,MAAA,cAAA,OAAA,qBAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;AA1JA,UAAAxC,IAAAC,GAiBAC,IAAAC,GAEA,EAAA,WAAAsC,EAAA,IAAAC,GAAAxC,CAAA,GAEAE,IAAAC,EAAA,GAIAC,IAAA,CAAAqC,MAAA,CAAA,CAAAvC,EAAAuC,CAAA,GAEAC,IAAAhC,EAAA,OAAA;AAAA,MAAgD,6CAAAZ,EAAA,WAAA;AAAA,IACkB,EAAA,GAGlE6C,IAAAlB,EAAA3B,EAAA,UAAA;AACA,IAAA8C;AAAA,MAAA,MAAA9C,EAAA;AAAA,MACgB,MAAA;AAER,QAAA6C,EAAA,QAAA7C,EAAA;AAAA,MAAyB;AAAA,IAC7B;AAIJ,UAAA+C,IAAAtC,EAAA,OAAA,GACAuC,IAAApC,EAAA,MAAA,CAAAZ,EAAA,YAAA,CAAAA,EAAA,YAAA,CAAA,CAAAA,EAAA,YAAA,GAGAiD,IAAAtB,EAAA,IAAA,GACA,EAAA,OAAAuB,EAAA,IAAAC,GAAAF,CAAA,GAEAG,IAAAxC,EAAA,MAAAyC,GAAA,MAAA,IAAA,EAAA,CAAA,CAAA,GACAC,IAAA1C,EAAA,MAAA2C,GAAA,MAAA,IAAA,EAAA,CAAA,CAAA,GAEAC,IAAA5C,EAAA,MACIsC,EAAA,QAAAE,EAAA,QACI,UAEJF,EAAA,SAAAE,EAAA,SAAAF,EAAA,QAAAI,EAAA,QACI,WAEJ,OAAO,GAGXG,IAAA7C,EAAA,MACIZ,EAAA,cAAAwD,GAAA,KAAA,KAAAxD,EAAA,MAAA,MAAgF,GAGpF0D,IAAA9C,EAAA,MAAA;AACI,UAAA,CAAAZ,EAAA;AACI,eAAA,CAAA;AAEJ,YAAA2D,IAAA,CAAA;AACA,eAAAC,IAAA,GAAAA,IAAA5D,EAAA,MAAA,QAAA4D,KAAAH,GAAA;AACI,QAAAE,EAAA,KAAA3D,EAAA,MAAA,MAAA4D,GAAAA,IAAAH,GAAA,KAAA,CAAA;AAEJ,aAAAE;AAAA,IAAO,CAAA,GAIXE,IAAAjD,EAAA,MAAA,KAAA6C,GAAA,KAAA,GAOAK,IAAAlD,EAAA,MACI6C,GAAA,QAAA,IAAA,MAAAA,GAAA,KAAA,EAAA,KAAA;AAAA;AAAA,MACiD,OAAAI,EAAA;AAAA,MAEhB,QAAAA,EAAA;AAAA,MACC,OAAAA,EAAA;AAAA,IACD,CAAA,IAAA,CAAA,CAE1B,GAGXE,IAAA,CAAAC,MAAA;AACI,MAAAnB,EAAA,QAAAmB,GACAvB,EAAAuB,CAAA;AAAA,IAAe,GAGnBC,IAAArD,EAAA,MAAAZ,EAAA,YAAA,OAAA;AAEA,WAAAkE,GAAApE,GAAAmE,CAAA,GAEAE,GAAA,MAAA;AACI,MAAAnE,EAAA,eACI,OAAA,OAAAA,EAAA,WAAA,EAAA,QAAA,CAAAoE,MAAA;AACI,YAAAA,MAAAA,IAAA,KAAAA,IAAA;AACI,gBAAA,IAAA;AAAA,YAAU;AAAA,UACN;AAAA,MAER,CAAA;AAAA,IAER,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"selection-card-group.CQsS8-H9.js","sources":["../../../vue2/src/components/selection-card/selection-card.types.ts","../../../vue2/src/components/selection-card/selection-card.keys.ts","../../../vue2/src/components/selection-card/selection-card.vue","../../../vue2/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 '@/types/checkbox';\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\" aria-hidden=\"true\">\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 { CheckboxInput } from '../internal/checkbox-input';\n import { RadioInput, type RadioInputValue } from '../internal/radio-input';\n import { type BentoCheckboxType, type BentoMultiCheckboxType } from '@/types/checkbox';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { generateUid } from '@/utils/ts/generate-uid';\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<{\n /\n Emitted when the selection card is clicked. Enables Vue2 \"v-model\"\n /\n (e: 'input', value: BentoSelectionCardValue);\n /\n Emitted when the selection card is clicked. Enables Vue3 \"v-model\"\n /\n (e: 'update:model-value', value: BentoSelectionCardValue);\n }>();\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 :aria-required=\"required\"\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-${Number(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 '@/utils/ts/generate-uid';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n const props = withDefaults(defineProps<BentoSelectionCardGroupProps>(), {\n description: null,\n disabled: false,\n errorMessage: null,\n formId: null,\n hideLabel: null,\n label: null,\n layout: 'vertical',\n itemsPerRow: undefined,\n modelValue: null,\n optional: false,\n required: false,\n tooltipText: null,\n readonly: false,\n variant: 'checkbox',\n });\n\n const emit = defineEmits<BentoSelectionCardGroupEmits>();\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(value => {\n const numericValue = Number(value);\n if (!Number.isInteger(numericValue) \|\| numericValue < 1 \|\| numericValue > 6) {\n throw new Error(\n 'itemsPerRow values must have a value between 1 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', event: 'update:model-value' },\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","props","__props","emit","__emit","slots","useSlots","hasSlot","useHasSlot","inputId","generateUid","descriptionId","computedRadioInputModelValue","computed","computedCheckboxInputModelValue","conditionalClasses","isChecked","containerConditionalClasses","isTitleOnly","checkboxContainerConditionalClasses","checkboxContainerTextConditionalClasses","slotConditionalClasses","ariaLabel","useAriaLabel","isCheckboxGroup","isRadioInput","item","inject","ref","inputRef","slotRef","dynamicSlotRef","handleCardClick","event","newValue2","toggleInput","onChange","newValue","currentValue","newCheckedList","index","__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","numericValue"],"mappings":"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"}