@adyen/bento-vue3 1.40.0 → 1.41.0

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

@@ -1,392 +0,0 @@
-import { defineComponent as W, useSlots as X, computed as r, inject as le, ref as R, openBlock as n, createElementBlock as M, normalizeClass as f, createElementVNode as V, unref as l, renderSlot as m, createCommentVNode as v, withModifiers as te, createBlock as d, withCtx as s, createTextVNode as T, toDisplayString as q, createVNode as oe, watch as re, provide as ne, Fragment as ie, renderList as de, mergeProps as x, createSlots as se } from "vue";
-import { B as S } from "./typography.DNzU41ah.js";
-import { u as ce } from "./aria-label.CaUURpnB.js";
-import { g as w } from "./generate-uid.D-HFI38h.js";
-import { u as ue } from "./use-has-slot.B7eQSabc.js";
-import { a as fe } from "./radio-input.DtvlM-mr.js";
-import { a as be } from "./checkbox-input.D8ZUqd4m.js";
-import { _ as Z } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { C as ye } from "./controls-group.RL8WrYdy.js";
-import { E as ve } from "./error-message.CmMyB-k9.js";
-import "../assets/selection-card-group.css";
-var E = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.READONLY = "readonly", e.ERROR = "error", e))(E || {});
-const ee = Symbol("selection card radio input injection key"), me = {
-  key: 0,
-  class: "b-selection-card__icon",
-  role: "presentation"
-}, pe = ["for"], he = {
-  name: "bento-selection-card"
-}, ge = /* @__PURE__ */ W({
-  ...he,
-  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: B }) {
-    const a = e, p = B, _ = X(), c = ue(_), h = w("selection-card-input-id"), b = w("selection-card-description"), I = r(
-      () => a.modelValue
-    ), g = r(
-      () => a.modelValue
-    ), $ = r(() => ({
-      "b-selection-card--checked": Y.value,
-      "b-selection-card--fully-clickable": a.fullyClickable
-    })), A = r(() => ({
-      [`b-selection-card--${E.DISABLED}`]: a.disabled,
-      [`b-selection-card--${E.ERROR}`]: a.hasError,
-      [`b-selection-card--${E.READONLY}`]: a.readonly,
-      "b-selection-card--center-aligned": N.value
-    })), i = r(() => ({
-      "b-selection-card__checkbox-container--center-aligned": N.value
-    })), G = r(() => ({
-      "b-selection-card__checkbox-container-text--center-aligned": N.value
-    })), o = r(() => ({
-      "b-selection-card__slot--with-icon": c("icon")
-    })), z = ce({
-      ariaLabel: a.title,
-      label: a.value
-    }), U = r(() => Array.isArray(a.modelValue)), Y = r(() => L.value ? a.value === a.modelValue : U.value ? a.modelValue.some((t) => t === a.value) : a.modelValue), L = le(ee, R(!1)), N = r(() => !a.subtitle && !a.description), y = R(null), D = R(null), O = R(null), j = (t) => {
-      var u, C, H, J, K, Q;
-      if (y.value.$refs.inputRef === t.target) {
-        const ae = P();
-        F(ae);
-        return;
-      }
-      if (a.disabled && a.readonly || !a.fullyClickable && (D.value && ((C = (u = D.value) == null ? void 0 : u.$el) != null && C.contains(t.target)) || O.value && ((J = (H = O.value) == null ? void 0 : H.$el) != null && J.contains(t.target)) || y.value && ((Q = (K = y.value) == null ? void 0 : K.$el) != null && Q.contains(t.target))))
-        return;
-      const k = P();
-      F(k);
-    }, P = () => {
-      var k;
-      const t = ((k = y.value) == null ? void 0 : k.$refs.inputRef).checked;
-      if (U.value) {
-        const u = [...a.modelValue], C = u.indexOf(a.value);
-        return C === -1 ? u.push(a.value) : u.splice(C, 1), u;
-      }
-      return L.value ? a.value : t;
-    }, F = (t) => {
-      !a.disabled && !a.readonly && (p("update:model-value", t), p("input", t));
-    };
-    return (t, k) => (n(), M("div", {
-      class: f(["b-selection-card", $.value]),
-      onClick: j
-    }, [
-      V("div", {
-        class: f(["b-selection-card__container", A.value])
-      }, [
-        V("div", {
-          class: f(["b-selection-card__checkbox-container", i.value])
-        }, [
-          V("div", {
-            class: f(["b-selection-card__checkbox-container-text", G.value])
-          }, [
-            l(c)("icon") ? (n(), M("div", me, [
-              m(t.$slots, "icon", {}, void 0, !0)
-            ])) : v("", !0),
-            V("label", {
-              for: l(h),
-              class: "b-selection-card__text",
-              onClick: te(j, ["stop", "prevent"])
-            }, [
-              e.subtitle ? (n(), d(l(S), {
-                key: 0,
-                class: "b-selection-card__description",
-                el: "span",
-                variant: "caption"
-              }, {
-                default: s(() => [
-                  T(q(e.subtitle), 1)
-                ]),
-                _: 1
-              })) : v("", !0),
-              oe(l(S), {
-                el: "span",
-                variant: "title"
-              }, {
-                default: s(() => [
-                  T(q(e.title), 1)
-                ]),
-                _: 1
-              }),
-              e.description ? (n(), d(l(S), {
-                key: 1,
-                id: "descriptionId",
-                class: "b-selection-card__description",
-                el: "span",
-                variant: "body"
-              }, {
-                default: s(() => [
-                  T(q(e.description), 1)
-                ]),
-                _: 1
-              })) : v("", !0)
-            ], 8, pe)
-          ], 2),
-          l(L) ? (n(), d(l(fe), {
-            key: 0,
-            id: l(h),
-            ref_key: "inputRef",
-            ref: y,
-            "aria-label": l(z),
-            "aria-describedby": e.description ? l(b) : void 0,
-            disabled: e.disabled,
-            "has-error": e.hasError,
-            "aria-readonly": e.readonly ?? void 0,
-            value: e.value,
-            readonly: e.readonly,
-            "model-value": I.value
-          }, null, 8, ["id", "aria-label", "aria-describedby", "disabled", "has-error", "aria-readonly", "value", "readonly", "model-value"])) : (n(), d(l(be), {
-            key: 1,
-            id: l(h),
-            ref_key: "inputRef",
-            ref: y,
-            "aria-label": l(z),
-            "aria-describedby": e.description ? l(b) : void 0,
-            disabled: e.disabled,
-            "has-error": e.hasError,
-            "aria-readonly": e.readonly ?? void 0,
-            value: e.value,
-            readonly: e.readonly,
-            "model-value": g.value
-          }, null, 8, ["id", "aria-label", "aria-describedby", "disabled", "has-error", "aria-readonly", "value", "readonly", "model-value"]))
-        ], 2),
-        l(c)("content") ? (n(), d(l(S), {
-          key: 0,
-          ref_key: "slotRef",
-          ref: D,
-          el: "div",
-          class: f(["b-selection-card__slot", o.value])
-        }, {
-          default: s(() => [
-            m(t.$slots, "content", {}, void 0, !0)
-          ]),
-          _: 3
-        }, 8, ["class"])) : v("", !0),
-        l(c)("dynamicContent") && Y.value ? (n(), d(l(S), {
-          key: 1,
-          ref_key: "dynamicSlotRef",
-          ref: O,
-          el: "div",
-          class: f(["b-selection-card__slot", o.value])
-        }, {
-          default: s(() => [
-            m(t.$slots, "dynamicContent", {}, void 0, !0)
-          ]),
-          _: 3
-        }, 8, ["class"])) : v("", !0)
-      ], 2)
-    ], 2));
-  }
-}), ke = /* @__PURE__ */ Z(ge, [["__scopeId", "data-v-582a885b"]]), Ce = {}, Se = /* @__PURE__ */ W({
-  ...Ce,
-  __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
-    },
-    /**
-     * 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: B }) {
-    const a = e, p = B, _ = X(), c = (i) => !!_[i], h = r(() => ({
-      "b-selection-card-group__items--horizontal": a.layout === "horizontal"
-    })), b = R(a.modelValue);
-    re(
-      () => a.modelValue,
-      () => {
-        b.value = a.modelValue;
-      }
-    );
-    const I = w("error"), g = r(() => !a.disabled && !a.readonly && !!a.errorMessage), $ = (i) => {
-      b.value = i, p("update:model-value", i), p("input", i);
-    }, A = r(() => a.variant === "radio");
-    return ne(ee, A), (i, G) => (n(), d(l(ye), {
-      "aria-describedby": g.value ? l(I) : 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: s(() => [
-        V("div", {
-          class: f(["b-selection-card-group__items", h.value])
-        }, [
-          (n(!0), M(ie, null, de(e.items, (o) => (n(), d(ke, x({
-            key: `selection-card-${o.value}`,
-            class: "b-selection-card-group__item",
-            ref_for: !0
-          }, o, {
-            "model-value": b.value,
-            readonly: e.readonly || o.readonly,
-            "has-error": g.value,
-            disabled: e.disabled || o.disabled,
-            "onUpdate:modelValue": $
-          }), se({ _: 2 }, [
-            c("icon") && o.icon ? {
-              name: "icon",
-              fn: s(() => [
-                m(i.$slots, "icon", x({ ref_for: !0 }, o), void 0, !0)
-              ]),
-              key: "0"
-            } : void 0,
-            c("content") && o.content ? {
-              name: "content",
-              fn: s(() => [
-                m(i.$slots, "content", x({ ref_for: !0 }, o), void 0, !0)
-              ]),
-              key: "1"
-            } : void 0,
-            c("dynamicContent") && o.dynamicContent ? {
-              name: "dynamicContent",
-              fn: s(() => [
-                m(i.$slots, "dynamicContent", x({ ref_for: !0 }, o), void 0, !0)
-              ]),
-              key: "2"
-            } : void 0
-          ]), 1040, ["model-value", "readonly", "has-error", "disabled"]))), 128))
-        ], 2),
-        g.value ? (n(), d(l(ve), {
-          key: 0,
-          id: l(I),
-          "error-message": e.errorMessage,
-          class: "b-selection-card-group__error-message"
-        }, null, 8, ["id", "error-message"])) : v("", !0)
-      ]),
-      _: 3
-    }, 8, ["aria-describedby", "label", "hide-label", "description", "disabled", "tooltip-text", "readonly", "required", "optional"]));
-  }
-}), Ne = /* @__PURE__ */ Z(Se, [["__scopeId", "data-v-79b250a4"]]);
-export {
-  ke as B,
-  E as a,
-  Ne as s
-};
-//# sourceMappingURL=selection-card-group.DkSYInMF.js.map

package/dist/chunks/selection-card-group.DkSYInMF.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"selection-card-group.DkSYInMF.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 { RadioInputValue } from '@/components/internal/radio-input';\nimport { BentoCheckboxType } from '@/core/components/checkbox/checkbox.types';\nimport { VueNodeElement } from '@/types';\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 { BentoCheckboxType, BentoMultiCheckboxType, CheckboxInput } from '../internal/checkbox-input';\n    import { RadioInput, RadioInputValue } from '../internal/radio-input';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { generateUid } from '@/core/utils/ts';\n    import { computed, ComputedRef, inject, PropType, 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        :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 class=\"b-selection-card-group__items\" :class=\"conditionalItemsClasses\">\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        <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, PropType, provide, ref, useSlots, watch } from 'vue';\n    import { BentoSelectionCardGroupLayout, BentoSelectionCardGroupVariant } from './selection-card-group.types';\n    import BentoSelectionCard from '../../selection-card.vue';\n    import { ControlsGroup, ErrorMessage } from '../../../internal';\n    import { BentoSelectionCardItem, 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        /**\n         * Descriptive supporting text visbile underneath the label.\n         */\n        description: { type: String, default: null },\n\n        /**\n         * If set to true, renders all cards in the group in a disabled state.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Renders all cards in an error state with an error message.\n         */\n        errorMessage: { type: String, default: null },\n\n        /**\n         * The form id the selection card group is associated with. Defaults to null, as a selection card group can also be used standalone.\n         */\n        formId: { type: String, default: null },\n\n        /**\n         * Shows/hides the group label.\n         */\n        hideLabel: { type: Boolean, default: null },\n\n        /**\n         * Label of the group. Required for accessibility purposes, even if it's not shown\n         */\n        label: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * The selection card group's layout. It can be vertical or horizontal. Defaults to vertical.\n         * @values horizontal, vertical\n         */\n        layout: {\n            type: String as PropType<BentoSelectionCardGroupLayout>,\n            default: 'vertical',\n        },\n\n        /**\n         * The selection card group's items.\n         */\n        items: {\n            type: Array as PropType<BentoSelectionCardItem[]>,\n            required: true,\n        },\n        /**\n         * Determines the initially selected value of the group. Corresponds to the BentoSelectionCardItem's value.\n         * Defaults to no value selected.\n         */\n        modelValue: {\n            type: [Array, String, Number] as PropType<BentoSelectionCardModelValue>,\n            default: null,\n        },\n\n        /**\n         * Indicates the field is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * Indicates the field is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\n        /**\n         * If set to true, renders all cards in the group in a readonly state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Renders the cards with a checkbox or a radio input. Selection logic will also apply in accordance.\n         * @values checkbox, radio\n         */\n        variant: { type: String as PropType<BentoSelectionCardGroupVariant>, default: 'checkbox' },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the selection card is clicked. Enables Vue2 \"v-model\"\n         */\n        (e: 'input', value: BentoSelectionCardModelValue);\n        /**\n         * Emitted when the selection card is clicked. Enables Vue3 \"v-model\"\n         */\n        (e: 'update:model-value', value: BentoSelectionCardModelValue);\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    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</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","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","_b","_a","_d","_c","_f","_e","newValue","currentValue","newCheckedList","index","__default__","name","conditionalItemsClasses","inputValue","watch","errorMessageId","shouldShowGroupError","onInput","value","isRadioVariant","provide"],"mappings":"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"}

package/dist/chunks/structured-list-item.BhNJlDub.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"structured-list-item.BhNJlDub.js","sources":["../../../vue2/src/components/structured-list/structured-list.keys.ts","../../../vue2/src/components/structured-list/structured-list.types.ts","../../../vue2/src/components/structured-list/structured-list.vue","../../../vue2/src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\nexport const STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY = Symbol('structured list labels width injection key');\n","export type BentoStructuredListLayoutOptions = '25-75' | '33-66' | '42-58' | '50-50';\nexport const BentoStructuredListLayoutOptions = ['25-75', '33-66', '42-58', '50-50'];\n","<template>\n    <dl class=\"b-structured-list\">\n        <slot />\n    </dl>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, provide } from 'vue';\n    import {\n        STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n        STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n    } from '@/components/structured-list/structured-list.keys';\n    import { BentoStructuredListLayoutOptions } from './structured-list.types';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Width of the labels container, in pixels. Overrides layout prop.\n             */\n            labelsWidth?: number;\n            /**\n             * The layout of the label value pair in percentage.\n             * If labelsWidth is set, layout will be overriden by the static pixel value.\n             *\n             * If the value entered is not listed in the example\n             * list below '33-66' will be applied\n             * @example\n             * '25-75'\n             * '33-66'\n             * '42-58'\n             * '50-50'\n             */\n            layout?: BentoStructuredListLayoutOptions;\n        }>(),\n        {\n            labelsWidth: null,\n            layout: '33-66',\n        }\n    );\n\n    const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n    const computedLayout = computed(() =>\n        BentoStructuredListLayoutOptions.includes(props.layout) ? props.layout : '33-66'\n    );\n\n    const computedLabelsWidth = computed(() => {\n        if (isCondensed) {\n            return '130px';\n        }\n\n        if (props.labelsWidth) {\n            return `${props.labelsWidth}px`;\n        }\n\n        return `${computedLayout.value.split('-')[0]}%`;\n    });\n\n    provide(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, computedLabelsWidth);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This is a list used to display pairs of information in a clear and organized manner.\n     * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n     *\n     * @example\n     * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredList, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Payment\">\n     *               <bento-payment-method label=\"Klarna\" type=\"Klarna\"  />\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\">\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","<template>\n    <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n        <dt class=\"b-structured-list-item__label\" :style=\"computedLabelStyle\">\n            <bento-typography :variant=\"labelTypographyVariant\">{{ label }}</bento-typography>\n            <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n        </dt>\n        <dd class=\"b-structured-list-item__value\" :class=\"valueConditionalClasses\">\n            <slot />\n            <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" />\n            <bento-button\n                v-if=\"search\"\n                v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : t('search')\"\n                class=\"b-structured-list-item__icon\"\n                variant=\"tertiary\"\n                @click=\"search\"\n            >\n                <template #iconLeft>\n                    <search-icon :svg-title=\"t('search')\" />\n                </template>\n            </bento-button>\n        </dd>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, Ref } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography } from '@/components/typography';\n    import Copy from '@/components/internal/copy/copy.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n    // Utils\n    import { useI18n } from '@/utils/ts/i18n';\n\n    // Directives\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n    // Keys\n    import {\n        STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n        STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n    } from '../../structured-list.keys';\n\n    import messages from '../../messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const DEFAULT_LABELS_WIDTH = '33%';\n\n    const props = defineProps<{\n        /**\n         * Label to display for the value\n         */\n        label: string;\n        /**\n         * Text to display in info icon tooltip in the label to display for the value\n         */\n        labelInfo?: string;\n        /**\n         * Text to copy when the user clicks `Copy` icon\n         */\n        copy?: string;\n        /**\n         * Function to trigger when user clicks `Search` icon\n         */\n        search?: (event: Event) => void;\n        /**\n         * Text to display when the user hovers over `Search` icon\n         */\n        searchTooltip?: string;\n        /**\n         * Truncates the value of the item\n         */\n        truncate?: boolean;\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n    const labelsWidth = inject<Ref<string>>(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, ref(DEFAULT_LABELS_WIDTH));\n    const computedLabelStyle = computed(() => `flex-basis:${labelsWidth.value}`);\n    const conditionalClasses = computed(() => ({\n        'b-structured-list-item--condensed': isCondensed,\n    }));\n\n    const valueConditionalClasses = computed(() => ({\n        'b-structured-list-item__value--truncate': props.truncate,\n    }));\n\n    const labelTypographyVariant = computed(() => (isCondensed ? 'caption' : 'body'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This is an item of the `BentoStructuredList` meant to be used only with that component.\n     * It consists of a label/value pair, and also the optional copy and search modifiers.\n     *\n     * @example\n     * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredListItem, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n     *               <bento-typography>\n     *                  143442642\n     *               </bento-status>\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\" copy='123456'>\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["STRUCTURED_LIST_CONDENSED_INJECTION_KEY","STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY","BentoStructuredListLayoutOptions","__default__$1","props","__props","isCondensed","inject","computedLayout","computed","computedLabelsWidth","provide","__default__","messages","DEFAULT_LABELS_WIDTH","t","useI18n","labelsWidth","ref","computedLabelStyle","conditionalClasses","valueConditionalClasses","labelTypographyVariant"],"mappings":";;;;;;;;;;;AAAa,MAAAA,IAAA,OAAA,+CAAA,GACAC,IAAA,OAAA,4CAAA,GCANC,IAAA,CAAA,SAAA,SAAA,SAAA,OAAA,uCCoFHC,IAAA,CAAA;;;;;;;;AAvEA,UAAAC,IAAAC,GA0BAC,IAAAC,EAAAP,GAAA,EAAA,GAEAQ,IAAAC;AAAA,MAAuB,MAAAP,EAAA,SAAAE,EAAA,MAAA,IAAAA,EAAA,SAAA;AAAA,IACsD,GAG7EM,IAAAD,EAAA,MACIH,IACI,UAGJF,EAAA,cACI,GAAAA,EAAA,WAAA,OAGJ,GAAAI,EAAA,MAAA,MAAA,GAAA,EAAA,CAAA,CAAA,GAA4C;AAGhD,WAAAG,EAAAV,GAAAS,CAAA;;;;;;;;;;;;;;GC8DAE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;AAxEA,UAAAC,IAAA,OAEAV,IAAAC,GA2BA,EAAA,GAAAU,EAAA,IAAAC,EAAA,EAAA,UAAAH,EAAA,CAAA,GACAP,IAAAC,EAAAP,GAAA,EAAA,GACAiB,IAAAV,EAAAN,GAAAiB,EAAAJ,CAAA,CAAA,GACAK,IAAAV,EAAA,MAAA,cAAAQ,EAAA,KAAA,EAAA,GACAG,IAAAX,EAAA,OAAA;AAAA,MAA2C,qCAAAH;AAAA,IACF,EAAA,GAGzCe,IAAAZ,EAAA,OAAA;AAAA,MAAgD,2CAAAL,EAAA;AAAA,IACK,EAAA,GAGrDkB,IAAAb,EAAA,MAAAH,IAAA,YAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}