@adyen/bento-vue3 1.74.0 → 1.76.0

package/dist/chunks/selection-card-group._RgLiMyQ.js

@@ -1,474 +0,0 @@
-import { defineComponent as ae, useSlots as le, computed as o, inject as re, ref as V, createElementBlock as E, openBlock as i, normalizeClass as k, createElementVNode as q, createBlock as f, createCommentVNode as $, unref as t, renderSlot as y, withModifiers as ie, createVNode as de, withCtx as u, createTextVNode as Y, toDisplayString as Q, watch as se, provide as ue, onMounted as ce, Fragment as Z, renderList as W, mergeProps as m, createSlots as F } from "vue";
-import { b as fe } from "./index.E60QniEu.js";
-import { a as ve, b as ye } from "./es6.MoTTyETW.js";
-import { B as I } from "./typography.yBEME_Gu.js";
-import { C as be } from "./checkbox-input.BXNGT9U0.js";
-import { u as me } from "./aria-label.CaUURpnB.js";
-import { g as H } from "./generate-uid.NJ8tVoha.js";
-import { u as pe } from "./use-has-slot.B7eQSabc.js";
-import { a as he } from "./radio-input.CBNE-AkM.js";
-import { _ as te } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { C as ge } from "./controls-group.cbGiHr7n.js";
-import { G as ke } from "./grid-layout.DDaRNz4-.js";
-import { E as Ce } from "./field-label.C97CrBI_.js";
-import "../assets/selection-card-group.css";
-var G = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.READONLY = "readonly", e.ERROR = "error", e))(G || {});
-const oe = Symbol("selection card radio input injection key"), Se = {
-  key: 0,
-  class: "b-selection-card__icon",
-  role: "presentation"
-}, Re = ["for"], $e = {
-  name: "bento-selection-card"
-}, Ve = /* @__PURE__ */ ae({
-  ...$e,
-  props: {
-    /**
-     * The description of the selection card
-     */
-    description: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Disables the selection card
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Makes the entire selection card clickable. Clicking over interactive elements inside the card with this prop enabled will not be possible.
-     */
-    fullyClickable: { type: Boolean, default: !1 },
-    /**
-     * Shows the selection card in error state
-     */
-    hasError: { type: Boolean, default: !1 },
-    /**
-     * This property should not be used directly.
-     * It will be used by v-model directive on selection card component.
-     *
-     * When handling a single input, use a string or a number.
-     *
-     * When handling multiple inputs, use an array of keys.
-     * These keys exist as a set "value" prop for each input.
-     */
-    modelValue: {
-      type: [Boolean, String, Array],
-      default: null
-    },
-    /**
-     * Sets the selection card to readonly
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * The subtitle of the selection card
-     */
-    subtitle: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * The title of the selection card
-     */
-    title: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Indicates the value of the input that will be returned when it's checked.
-     */
-    value: {
-      type: [String, Number],
-      required: !0
-    }
-  },
-  emits: ["input", "update:model-value"],
-  setup(e, { emit: j }) {
-    const a = e, x = j, z = le(), c = pe(z), B = H("selection-card-input-id"), p = H("selection-card-description"), L = o(
-      () => a.modelValue
-    ), C = o(
-      () => a.modelValue
-    ), N = o(() => ({
-      "b-selection-card--checked": S.value,
-      "b-selection-card--fully-clickable": a.fullyClickable
-    })), _ = o(() => ({
-      [`b-selection-card--${G.DISABLED}`]: a.disabled,
-      [`b-selection-card--${G.ERROR}`]: a.hasError,
-      [`b-selection-card--${G.READONLY}`]: a.readonly,
-      "b-selection-card--center-aligned": R.value
-    })), O = o(() => ({
-      "b-selection-card__checkbox-container--center-aligned": R.value
-    })), U = o(() => ({
-      "b-selection-card__checkbox-container-text--center-aligned": R.value
-    })), h = o(() => ({
-      "b-selection-card__slot--with-icon": c("icon")
-    })), n = me({
-      ariaLabel: a.title,
-      label: a.value
-    }), D = o(() => Array.isArray(a.modelValue)), S = o(() => w.value ? a.value === a.modelValue : D.value ? a.modelValue.some((r) => r === a.value) : a.modelValue), w = re(oe, V(!1)), R = o(() => !a.subtitle && !a.description), b = V(null), l = V(null), v = V(null), d = (r) => {
-      var g, A, J, K, P, X;
-      if (b.value.$refs.inputRef === r.target) {
-        const ne = T();
-        s(ne);
-        return;
-      }
-      if (a.disabled && a.readonly || !a.fullyClickable && (l.value && ((A = (g = l.value) == null ? void 0 : g.$el) != null && A.contains(r.target)) || v.value && ((K = (J = v.value) == null ? void 0 : J.$el) != null && K.contains(r.target)) || b.value && ((X = (P = b.value) == null ? void 0 : P.$el) != null && X.contains(r.target))))
-        return;
-      const M = T();
-      s(M);
-    }, T = () => {
-      var M;
-      const r = ((M = b.value) == null ? void 0 : M.$refs.inputRef).checked;
-      if (D.value) {
-        const g = [...a.modelValue], A = g.indexOf(a.value);
-        return A === -1 ? g.push(a.value) : g.splice(A, 1), g;
-      }
-      return w.value ? a.value : r;
-    }, s = (r) => {
-      !a.disabled && !a.readonly && (x("update:model-value", r), x("input", r));
-    };
-    return (r, M) => (i(), E("div", {
-      class: k(["b-selection-card", N.value]),
-      onClick: d
-    }, [
-      q("div", {
-        class: k(["b-selection-card__container", _.value])
-      }, [
-        q("div", {
-          class: k(["b-selection-card__checkbox-container", O.value])
-        }, [
-          q("div", {
-            class: k(["b-selection-card__checkbox-container-text", U.value])
-          }, [
-            t(c)("icon") ? (i(), E("div", Se, [
-              y(r.$slots, "icon", {}, void 0, !0)
-            ])) : $("", !0),
-            q("label", {
-              for: t(B),
-              class: "b-selection-card__text",
-              onClick: ie(d, ["stop", "prevent"])
-            }, [
-              e.subtitle ? (i(), f(t(I), {
-                key: 0,
-                class: "b-selection-card__description",
-                el: "span",
-                variant: "caption"
-              }, {
-                default: u(() => [
-                  Y(Q(e.subtitle), 1)
-                ]),
-                _: 1
-              })) : $("", !0),
-              de(t(I), {
-                el: "span",
-                variant: "title"
-              }, {
-                default: u(() => [
-                  Y(Q(e.title), 1)
-                ]),
-                _: 1
-              }),
-              e.description ? (i(), f(t(I), {
-                key: 1,
-                id: "descriptionId",
-                class: "b-selection-card__description",
-                el: "span",
-                variant: "body"
-              }, {
-                default: u(() => [
-                  Y(Q(e.description), 1)
-                ]),
-                _: 1
-              })) : $("", !0)
-            ], 8, Re)
-          ], 2),
-          t(w) ? (i(), f(t(he), {
-            key: 0,
-            id: t(B),
-            ref_key: "inputRef",
-            ref: b,
-            "aria-label": t(n),
-            "aria-describedby": e.description ? t(p) : void 0,
-            disabled: e.disabled,
-            "has-error": e.hasError,
-            "aria-readonly": e.readonly ?? void 0,
-            value: e.value,
-            readonly: e.readonly,
-            "model-value": L.value
-          }, null, 8, ["id", "aria-label", "aria-describedby", "disabled", "has-error", "aria-readonly", "value", "readonly", "model-value"])) : (i(), f(t(be), {
-            key: 1,
-            id: t(B),
-            ref_key: "inputRef",
-            ref: b,
-            "aria-label": t(n),
-            "aria-describedby": e.description ? t(p) : void 0,
-            disabled: e.disabled,
-            "has-error": e.hasError,
-            "aria-readonly": e.readonly ?? void 0,
-            value: e.value,
-            readonly: e.readonly,
-            "model-value": C.value
-          }, null, 8, ["id", "aria-label", "aria-describedby", "disabled", "has-error", "aria-readonly", "value", "readonly", "model-value"]))
-        ], 2),
-        t(c)("content") ? (i(), f(t(I), {
-          key: 0,
-          ref_key: "slotRef",
-          ref: l,
-          el: "div",
-          class: k(["b-selection-card__slot", h.value])
-        }, {
-          default: u(() => [
-            y(r.$slots, "content", {}, void 0, !0)
-          ]),
-          _: 3
-        }, 8, ["class"])) : $("", !0),
-        t(c)("dynamicContent") && S.value ? (i(), f(t(I), {
-          key: 1,
-          ref_key: "dynamicSlotRef",
-          ref: v,
-          el: "div",
-          class: k(["b-selection-card__slot", h.value])
-        }, {
-          default: u(() => [
-            y(r.$slots, "dynamicContent", {}, void 0, !0)
-          ]),
-          _: 3
-        }, 8, ["class"])) : $("", !0)
-      ], 2)
-    ], 2));
-  }
-}), ee = /* @__PURE__ */ te(Ve, [["__scopeId", "data-v-925457bd"]]), Ee = {}, xe = /* @__PURE__ */ ae({
-  ...Ee,
-  __name: "selection-card-group",
-  props: {
-    /**
-     * Descriptive supporting text visbile underneath the label.
-     */
-    description: { type: String, default: null },
-    /**
-     * If set to true, renders all cards in the group in a disabled state.
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Renders all cards in an error state with an error message.
-     */
-    errorMessage: { type: String, default: null },
-    /**
-     * The form id the selection card group is associated with. Defaults to null, as a selection card group can also be used standalone.
-     */
-    formId: { type: String, default: null },
-    /**
-     * Shows/hides the group label.
-     */
-    hideLabel: { type: Boolean, default: null },
-    /**
-     * Label of the group. Required for accessibility purposes, even if it's not shown
-     */
-    label: {
-      type: String,
-      required: !0
-    },
-    /**
-     * The selection card group's layout. It can be vertical or horizontal. Defaults to vertical.
-     * @values horizontal, vertical
-     */
-    layout: {
-      type: String,
-      default: "vertical"
-    },
-    /**
-     * The selection card group's items.
-     */
-    items: {
-      type: Array,
-      required: !0
-    },
-    /**
-     * Sets the responsive number of items rendered in each row.
-     */
-    itemsPerRow: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Determines the initially selected value of the group. Corresponds to the BentoSelectionCardItem's value.
-     * Defaults to no value selected.
-     */
-    modelValue: {
-      type: [Array, String, Number],
-      default: null
-    },
-    /**
-     * Indicates the field is optional.
-     */
-    optional: { type: Boolean, default: !1 },
-    /**
-     * Indicates the field is required.
-     */
-    required: { type: Boolean, default: !1 },
-    /**
-     * Tooltip message.
-     */
-    tooltipText: { type: String, default: null },
-    /**
-     * If set to true, renders all cards in the group in a readonly state.
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * Renders the cards with a checkbox or a radio input. Selection logic will also apply in accordance.
-     * @values checkbox, radio
-     */
-    variant: { type: String, default: "checkbox" }
-  },
-  emits: ["input", "update:model-value"],
-  setup(e, { emit: j }) {
-    const a = e, x = j, z = le(), c = (l) => !!z[l], B = o(() => ({
-      "b-selection-card-group__items--horizontal": a.layout === "horizontal"
-    })), p = V(a.modelValue);
-    se(
-      () => a.modelValue,
-      () => {
-        p.value = a.modelValue;
-      }
-    );
-    const L = H("error"), C = o(() => !a.disabled && !a.readonly && !!a.errorMessage), N = V(null), { width: _ } = fe(N), O = o(() => ve.split("px")[0]), U = o(() => ye.split("px")[0]), h = o(() => _.value < O.value ? "small" : _.value >= O.value && _.value < U.value ? "medium" : "large"), n = o(() => {
-      var l;
-      return ((l = a.itemsPerRow) == null ? void 0 : l[h == null ? void 0 : h.value]) || a.items.length;
-    }), D = o(() => {
-      if (!a.itemsPerRow)
-        return [];
-      const l = [];
-      for (let v = 0; v < a.items.length; v += n == null ? void 0 : n.value)
-        l.push(a.items.slice(v, v + (n == null ? void 0 : n.value)));
-      return l;
-    }), S = o(() => 12 / (n == null ? void 0 : n.value)), w = o(() => n != null && n.value ? new Array(n == null ? void 0 : n.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: S.value,
-      medium: S.value,
-      large: S.value
-    }) : []), R = (l) => {
-      p.value = l, x("update:model-value", l), x("input", l);
-    }, b = o(() => a.variant === "radio");
-    return ue(oe, b), ce(() => {
-      a.itemsPerRow && Object.values(a.itemsPerRow).forEach((l) => {
-        if (l && (l < 2 || l > 6))
-          throw new Error(
-            "itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information."
-          );
-      });
-    }), (l, v) => (i(), f(t(ge), {
-      ref_key: "containerRef",
-      ref: N,
-      "aria-describedby": C.value ? t(L) : 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,
-      class: "b-selection-card-group",
-      "component-name": "selection-card-group"
-    }, {
-      default: u(() => [
-        !e.itemsPerRow || e.layout === "vertical" ? (i(), E("div", {
-          key: 0,
-          class: k(["b-selection-card-group__items", B.value])
-        }, [
-          (i(!0), E(Z, null, W(e.items, (d) => (i(), f(ee, m({
-            key: `selection-card-${d.value}`,
-            class: "b-selection-card-group__item",
-            ref_for: !0
-          }, d, {
-            "model-value": p.value,
-            readonly: e.readonly || d.readonly,
-            "has-error": C.value,
-            disabled: e.disabled || d.disabled,
-            "onUpdate:modelValue": R
-          }), F({ _: 2 }, [
-            c("icon") && d.icon ? {
-              name: "icon",
-              fn: u(() => [
-                y(l.$slots, "icon", m({ ref_for: !0 }, d), void 0, !0)
-              ]),
-              key: "0"
-            } : void 0,
-            c("content") && d.content ? {
-              name: "content",
-              fn: u(() => [
-                y(l.$slots, "content", m({ ref_for: !0 }, d), void 0, !0)
-              ]),
-              key: "1"
-            } : void 0,
-            c("dynamicContent") && d.dynamicContent ? {
-              name: "dynamicContent",
-              fn: u(() => [
-                y(l.$slots, "dynamicContent", m({ ref_for: !0 }, d), void 0, !0)
-              ]),
-              key: "2"
-            } : void 0
-          ]), 1040, ["model-value", "readonly", "has-error", "disabled"]))), 128))
-        ], 2)) : (i(), E("div", {
-          key: `selection-card-group-layout-breakpoint-${h.value}`
-        }, [
-          (i(!0), E(Z, null, W(D.value, (d, T) => (i(), f(t(ke), {
-            key: `selection-card-group-row-${T}-cols-${n.value}`,
-            class: "b-selection-card-group__items--wrap",
-            "column-width": w.value
-          }, F({ _: 2 }, [
-            W(d, (s, r) => ({
-              name: `col-${r + 1}`,
-              fn: u(() => [
-                (i(), f(ee, m({
-                  key: `selection-card-${s.value}`,
-                  class: "b-selection-card-group__item b-selection-card-group__item--full-height",
-                  ref_for: !0
-                }, s, {
-                  "model-value": p.value,
-                  readonly: e.readonly || s.readonly,
-                  "has-error": C.value,
-                  disabled: e.disabled || s.disabled,
-                  "onUpdate:modelValue": R
-                }), F({ _: 2 }, [
-                  c("icon") && s.icon ? {
-                    name: "icon",
-                    fn: u(() => [
-                      y(l.$slots, "icon", m({ ref_for: !0 }, s), void 0, !0)
-                    ]),
-                    key: "0"
-                  } : void 0,
-                  c("content") && s.content ? {
-                    name: "content",
-                    fn: u(() => [
-                      y(l.$slots, "content", m({ ref_for: !0 }, s), void 0, !0)
-                    ]),
-                    key: "1"
-                  } : void 0,
-                  c("dynamicContent") && s.dynamicContent ? {
-                    name: "dynamicContent",
-                    fn: u(() => [
-                      y(l.$slots, "dynamicContent", m({ ref_for: !0 }, s), void 0, !0)
-                    ]),
-                    key: "2"
-                  } : void 0
-                ]), 1040, ["model-value", "readonly", "has-error", "disabled"]))
-              ])
-            }))
-          ]), 1032, ["column-width"]))), 128))
-        ])),
-        C.value ? (i(), f(t(Ce), {
-          key: 2,
-          id: t(L),
-          "error-message": e.errorMessage,
-          class: "b-selection-card-group__error-message"
-        }, null, 8, ["id", "error-message"])) : $("", !0)
-      ]),
-      _: 3
-    }, 8, ["aria-describedby", "label", "hide-label", "description", "disabled", "tooltip-text", "readonly", "required", "optional"]));
-  }
-}), je = /* @__PURE__ */ te(xe, [["__scopeId", "data-v-e9577916"]]);
-export {
-  ee as B,
-  G as a,
-  je as s
-};
-//# sourceMappingURL=selection-card-group._RgLiMyQ.js.map