@adyen/bento-vue2 1.40.0 → 1.41.0

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

@@ -1,255 +0,0 @@
-import { defineComponent as A, useSlots as M, computed as l, inject as z, ref as p, watch as Y, provide as j } from "vue";
-import { B as F } from "./typography.Bu_WAKdf.js";
-import { a as U } from "./checkbox-input.Bo4NxNOh.js";
-import { u as H } from "./aria-label.CaUURpnB.js";
-import { g as E } from "./generate-uid.D-HFI38h.js";
-import { u as J } from "./use-has-slot.C9lQZ6nz.js";
-import { a as K } from "./radio-input.q980f8Uf.js";
-import { n as D } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { C as Q } from "./controls-group.Sni8leS5.js";
-import { E as W } from "./error-message.Bk2maRF8.js";
-import "../assets/selection-card-group.css";
-var b = /* @__PURE__ */ ((r) => (r.DISABLED = "disabled", r.READONLY = "readonly", r.ERROR = "error", r))(b || {});
-const O = Symbol("selection card radio input injection key"), X = {
-  name: "bento-selection-card"
-}, Z = /* @__PURE__ */ A({
-  ...X,
-  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(r, { emit: e }) {
-    const t = r, a = M(), o = J(a), C = E("selection-card-input-id"), c = E("selection-card-description"), m = l(
-      () => t.modelValue
-    ), v = l(
-      () => t.modelValue
-    ), h = l(() => ({
-      "b-selection-card--checked": V.value,
-      "b-selection-card--fully-clickable": t.fullyClickable
-    })), _ = l(() => ({
-      [`b-selection-card--${b.DISABLED}`]: t.disabled,
-      [`b-selection-card--${b.ERROR}`]: t.hasError,
-      [`b-selection-card--${b.READONLY}`]: t.readonly,
-      "b-selection-card--center-aligned": f.value
-    })), s = l(() => ({
-      "b-selection-card__checkbox-container--center-aligned": f.value
-    })), w = l(() => ({
-      "b-selection-card__checkbox-container-text--center-aligned": f.value
-    })), G = l(() => ({
-      "b-selection-card__slot--with-icon": o("icon")
-    })), N = H({
-      ariaLabel: t.title,
-      label: t.value
-    }), g = l(() => Array.isArray(t.modelValue)), V = l(() => I.value ? t.value === t.modelValue : g.value ? t.modelValue.some((n) => n === t.value) : t.modelValue), I = z(O, p(!1)), f = l(() => !t.subtitle && !t.description), d = p(null), k = p(null), x = p(null), q = (n) => {
-      var i, u, B, T, L, $;
-      if (d.value.$refs.inputRef === n.target) {
-        const P = S();
-        R(P);
-        return;
-      }
-      if (t.disabled && t.readonly || !t.fullyClickable && (k.value && ((u = (i = k.value) == null ? void 0 : i.$el) != null && u.contains(n.target)) || x.value && ((T = (B = x.value) == null ? void 0 : B.$el) != null && T.contains(n.target)) || d.value && (($ = (L = d.value) == null ? void 0 : L.$el) != null && $.contains(n.target))))
-        return;
-      const y = S();
-      R(y);
-    }, S = () => {
-      var y;
-      const n = ((y = d.value) == null ? void 0 : y.$refs.inputRef).checked;
-      if (g.value) {
-        const i = [...t.modelValue], u = i.indexOf(t.value);
-        return u === -1 ? i.push(t.value) : i.splice(u, 1), i;
-      }
-      return I.value ? t.value : n;
-    }, R = (n) => {
-      !t.disabled && !t.readonly && (e("update:model-value", n), e("input", n));
-    };
-    return { __sfc: !0, props: t, emit: e, slots: a, hasSlot: o, inputId: C, descriptionId: c, computedRadioInputModelValue: m, computedCheckboxInputModelValue: v, conditionalClasses: h, containerConditionalClasses: _, checkboxContainerConditionalClasses: s, checkboxContainerTextConditionalClasses: w, slotConditionalClasses: G, ariaLabel: N, isCheckboxGroup: g, isChecked: V, isRadioInput: I, isTitleOnly: f, inputRef: d, slotRef: k, dynamicSlotRef: x, handleCardClick: q, toggleInput: S, onChange: R, BentoTypography: F, CheckboxInput: U, RadioInput: K };
-  }
-});
-var ee = function() {
-  var e = this, t = e._self._c, a = e._self._setupProxy;
-  return t("div", { staticClass: "b-selection-card", class: a.conditionalClasses, on: { click: a.handleCardClick } }, [t("div", { staticClass: "b-selection-card__container", class: a.containerConditionalClasses }, [t("div", { staticClass: "b-selection-card__checkbox-container", class: a.checkboxContainerConditionalClasses }, [t("div", { staticClass: "b-selection-card__checkbox-container-text", class: a.checkboxContainerTextConditionalClasses }, [a.hasSlot("icon") ? t("div", { staticClass: "b-selection-card__icon", attrs: { role: "presentation" } }, [e._t("icon")], 2) : e._e(), t("label", { staticClass: "b-selection-card__text", attrs: { for: a.inputId }, on: { click: function(o) {
-    return o.stopPropagation(), o.preventDefault(), a.handleCardClick.apply(null, arguments);
-  } } }, [e.subtitle ? t(a.BentoTypography, { staticClass: "b-selection-card__description", attrs: { el: "span", variant: "caption" } }, [e._v(" " + e._s(e.subtitle) + " ")]) : e._e(), t(a.BentoTypography, { attrs: { el: "span", variant: "title" } }, [e._v(e._s(e.title))]), e.description ? t(a.BentoTypography, { staticClass: "b-selection-card__description", attrs: { id: "descriptionId", el: "span", variant: "body" } }, [e._v(" " + e._s(e.description) + " ")]) : e._e()], 1)]), a.isRadioInput ? t(a.RadioInput, { ref: "inputRef", attrs: { id: a.inputId, "aria-label": a.ariaLabel, "aria-describedby": e.description ? a.descriptionId : void 0, disabled: e.disabled, "has-error": e.hasError, "aria-readonly": e.readonly ?? void 0, value: e.value, readonly: e.readonly, "model-value": a.computedRadioInputModelValue } }) : t(a.CheckboxInput, { ref: "inputRef", attrs: { id: a.inputId, "aria-label": a.ariaLabel, "aria-describedby": e.description ? a.descriptionId : void 0, disabled: e.disabled, "has-error": e.hasError, "aria-readonly": e.readonly ?? void 0, value: e.value, readonly: e.readonly, "model-value": a.computedCheckboxInputModelValue } })], 1), a.hasSlot("content") ? t(a.BentoTypography, { ref: "slotRef", staticClass: "b-selection-card__slot", class: a.slotConditionalClasses, attrs: { el: "div" } }, [e._t("content")], 2) : e._e(), a.hasSlot("dynamicContent") && a.isChecked ? t(a.BentoTypography, { ref: "dynamicSlotRef", staticClass: "b-selection-card__slot", class: a.slotConditionalClasses, attrs: { el: "div" } }, [e._t("dynamicContent")], 2) : e._e()], 1)]);
-}, te = [], ae = /* @__PURE__ */ D(
-  Z,
-  ee,
-  te,
-  !1,
-  null,
-  "308f55e6"
-);
-const oe = ae.exports, le = {}, ne = /* @__PURE__ */ A({
-  ...le,
-  __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(r, { emit: e }) {
-    const t = r, a = M(), o = (s) => !!a[s], C = l(() => ({
-      "b-selection-card-group__items--horizontal": t.layout === "horizontal"
-    })), c = p(t.modelValue);
-    Y(
-      () => t.modelValue,
-      () => {
-        c.value = t.modelValue;
-      }
-    );
-    const m = E("error"), v = l(() => !t.disabled && !t.readonly && !!t.errorMessage), h = (s) => {
-      c.value = s, e("update:model-value", s), e("input", s);
-    }, _ = l(() => t.variant === "radio");
-    return j(O, _), { __sfc: !0, props: t, emit: e, slots: a, hasSlot: o, conditionalItemsClasses: C, inputValue: c, errorMessageId: m, shouldShowGroupError: v, onInput: h, isRadioVariant: _, BentoSelectionCard: oe, ControlsGroup: Q, ErrorMessage: W };
-  }
-});
-var re = function() {
-  var e = this, t = e._self._c, a = e._self._setupProxy;
-  return t(a.ControlsGroup, { staticClass: "b-selection-card-group", attrs: { "aria-describedby": a.shouldShowGroupError ? a.errorMessageId : null, label: e.label, "hide-label": e.hideLabel, description: e.description, disabled: e.disabled, "tooltip-text": e.tooltipText, readonly: e.readonly, required: e.required, optional: e.optional, "component-name": "selection-card-group" } }, [t("div", { staticClass: "b-selection-card-group__items", class: a.conditionalItemsClasses }, e._l(e.items, function(o) {
-    return t(a.BentoSelectionCard, e._b({ key: `selection-card-${o.value}`, staticClass: "b-selection-card-group__item", attrs: { "model-value": a.inputValue, readonly: e.readonly || o.readonly, "has-error": a.shouldShowGroupError, disabled: e.disabled || o.disabled }, on: { "update:model-value": a.onInput }, scopedSlots: e._u([a.hasSlot("icon") && o.icon ? { key: "icon", fn: function() {
-      return [e._t("icon", null, null, o)];
-    }, proxy: !0 } : null, a.hasSlot("content") && o.content ? { key: "content", fn: function() {
-      return [e._t("content", null, null, o)];
-    }, proxy: !0 } : null, a.hasSlot("dynamicContent") && o.dynamicContent ? { key: "dynamicContent", fn: function() {
-      return [e._t("dynamicContent", null, null, o)];
-    }, proxy: !0 } : null], null, !0) }, "bento-selection-card", o, !1));
-  }), 1), a.shouldShowGroupError ? t(a.ErrorMessage, { staticClass: "b-selection-card-group__error-message", attrs: { id: a.errorMessageId, "error-message": e.errorMessage } }) : e._e()], 1);
-}, se = [], ie = /* @__PURE__ */ D(
-  ne,
-  re,
-  se,
-  !1,
-  null,
-  "7cd98116"
-);
-const ve = ie.exports;
-export {
-  oe as B,
-  b as a,
-  ve as s
-};
-//# sourceMappingURL=selection-card-group.CW7c72r2.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"selection-card-group.CW7c72r2.js","sources":["../../src/components/selection-card/selection-card.types.ts","../../src/components/selection-card/selection-card.keys.ts","../../src/components/selection-card/selection-card.vue","../../src/components/selection-card/components/selection-card-group/selection-card-group.vue"],"sourcesContent":["import { 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([\"input\", \"update:model-value\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const inputId = generateUid('selection-card-input-id');\n    const descriptionId = generateUid('selection-card-description');\n\n    const computedRadioInputModelValue: ComputedRef<RadioInputValue> = computed(\n        () => props.modelValue as RadioInputValue\n    );\n    const computedCheckboxInputModelValue: ComputedRef<BentoCheckboxType> = computed(\n        () => props.modelValue as BentoCheckboxType\n    );\n\n    const conditionalClasses = computed(() => ({\n        'b-selection-card--checked': isChecked.value,\n        'b-selection-card--fully-clickable': props.fullyClickable,\n    }));\n\n    const containerConditionalClasses = computed(() => ({\n        [`b-selection-card--${BentoSelectionCardState.DISABLED}`]: props.disabled,\n        [`b-selection-card--${BentoSelectionCardState.ERROR}`]: props.hasError,\n        [`b-selection-card--${BentoSelectionCardState.READONLY}`]: props.readonly,\n        'b-selection-card--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerTextConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container-text--center-aligned': isTitleOnly.value,\n    }));\n\n    const slotConditionalClasses = computed(() => ({\n        'b-selection-card__slot--with-icon': hasSlot('icon'),\n    }));\n\n    const ariaLabel = useAriaLabel({\n        ariaLabel: props.title,\n        label: props.value as string,\n    });\n\n    const isCheckboxGroup = computed(() => Array.isArray(props.modelValue));\n\n    const isChecked: ComputedRef<boolean> = computed(() => {\n        if (isRadioInput.value) {\n            return props.value === props.modelValue;\n        }\n        if (!isCheckboxGroup.value) {\n            return props.modelValue as boolean;\n        }\n\n        return (props.modelValue as BentoMultiCheckboxType).some(item => item === props.value);\n    });\n\n    const isRadioInput: Ref<boolean> = inject(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, ref(false));\n\n    const isTitleOnly = computed(() => !props.subtitle && !props.description);\n\n    const inputRef = ref<InstanceType<typeof RadioInput> | InstanceType<typeof CheckboxInput>>(null);\n    const slotRef = ref(null);\n    const dynamicSlotRef = ref(null);\n\n    // Handle click on the whole card area\n    const handleCardClick = (event: Event) => {\n        if (inputRef.value.$refs.inputRef === event.target) {\n            const newValue = toggleInput();\n            onChange(newValue);\n            return;\n        }\n\n        // Do nothing if disabled or readonly\n        if (props.disabled && props.readonly) {\n            return;\n        }\n\n        // If it's not fully clickable prevent selecting the card if the click\n        // originated in a slot\n        if (!props.fullyClickable) {\n            // Check if the click originated from the slot - in that case, do nothng\n            if (slotRef.value && slotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the dynamic slot - in that case, do nothng\n            if (dynamicSlotRef.value && dynamicSlotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the input - in that case do nothing, as the input will emit the event already\n            if (inputRef.value && inputRef.value?.$el?.contains(event.target as Node)) {\n                return;\n            }\n        }\n\n        // If the click originated outside of these two areas, emit the change event\n        const newValue = toggleInput();\n\n        onChange(newValue);\n    };\n\n    const toggleInput = (): BentoSelectionCardModelValue => {\n        const currentValue: boolean = (inputRef.value?.$refs.inputRef as HTMLInputElement).checked;\n\n        if (isCheckboxGroup.value) {\n            const newCheckedList = [...(props.modelValue as BentoMultiCheckboxType)];\n            const index = newCheckedList.indexOf(props.value);\n\n            if (index === -1) {\n                newCheckedList.push(props.value);\n            } else {\n                newCheckedList.splice(index, 1);\n            }\n            return newCheckedList;\n        }\n\n        if (isRadioInput.value) {\n            return props.value;\n        }\n        return currentValue;\n    };\n\n    const onChange = newValue => {\n        if (!props.disabled && !props.readonly) {\n            emit('update:model-value', newValue);\n            emit('input', newValue);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Selection card component. If used standalone, only the checkbox variant can be used. If the checkbox variant is needed, please use the bento-selection-card-group component.\n     *\n     * @example\n     * import { BentoSelectionCard } from '@adyen/bento-vue2';\n     * import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy';\n     *\n     * export default {\n     *     components: { BentoSelectionCard, EmoticonHappyIcon },\n     *     template: `\n     *          <bento-selection-card title=\"Card title\" :model-value.sync=\"yourModelValue\">\n     *              <template #icon>\n     *                  <emoticon-happy-icon />\n     *              </template>\n     *          </bento-selection-card>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-selection-card',\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./selection-card.scss\" />\n","<template>\n    <controls-group\n        :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([\"input\", \"update:model-value\"]);\n    const slots = useSlots();\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots\n    // We do the same in bento-checkbox-group\n    const hasSlot = name => !!slots[name];\n\n    const conditionalItemsClasses = computed(() => ({\n        'b-selection-card-group__items--horizontal': props.layout === 'horizontal',\n    }));\n\n    const inputValue = ref(props.modelValue);\n    watch(\n        () => props.modelValue,\n        () => {\n            inputValue.value = props.modelValue;\n        }\n    );\n\n    // Error message logic\n    const errorMessageId = generateUid('error');\n    const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n    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","slots","useSlots","hasSlot","useHasSlot","inputId","generateUid","descriptionId","computedRadioInputModelValue","computed","props","computedCheckboxInputModelValue","conditionalClasses","isChecked","containerConditionalClasses","isTitleOnly","checkboxContainerConditionalClasses","checkboxContainerTextConditionalClasses","slotConditionalClasses","ariaLabel","useAriaLabel","isCheckboxGroup","isRadioInput","item","inject","ref","inputRef","slotRef","dynamicSlotRef","handleCardClick","event","newValue2","toggleInput","onChange","_b","_a","_d","_c","_f","_e","newValue","currentValue","newCheckedList","index","emit","__default__","name","conditionalItemsClasses","inputValue","watch","errorMessageId","shouldShowGroupError","onInput","value","isRadioVariant","provide"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"structured-list-item.C4gxvOkq.js","sources":["../../src/components/structured-list/structured-list.keys.ts","../../src/components/structured-list/structured-list.types.ts","../../src/components/structured-list/structured-list.vue","../../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 = defineProps({\n  labelsWidth: { default: null },\n  layout: { default: '33-66' }\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  label: null,\n  labelInfo: null,\n  copy: null,\n  search: { type: Function },\n  searchTooltip: null,\n  truncate: { type: 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","isCondensed","inject","computedLayout","computed","props","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,GC+DHC,IAAA,CAAA;;;;;;;;iBA7CAC,IAAAC,EAAAL,GAAA,EAAA,GAEAM,IAAAC;AAAA,MAAuB,MAAAL,EAAA,SAAAM,EAAA,MAAA,IAAAA,EAAA,SAAA;AAAA,IACsD,GAG7EC,IAAAF,EAAA,MACIH,IACI,UAGJI,EAAA,cACI,GAAAA,EAAA,WAAA,OAGJ,GAAAF,EAAA,MAAA,MAAA,GAAA,EAAA,CAAA,CAAA,GAA4C;AAGhD,WAAAI,EAAAT,GAAAQ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GCiEAE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;iBAtDAC,IAAA,OAWA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAX,IAAAC,EAAAL,GAAA,EAAA,GACAgB,IAAAX,EAAAJ,GAAAgB,EAAAJ,CAAA,CAAA,GACAK,IAAAX,EAAA,MAAA,cAAAS,EAAA,KAAA,EAAA,GACAG,IAAAZ,EAAA,OAAA;AAAA,MAA2C,qCAAAH;AAAA,IACF,EAAA,GAGzCgB,IAAAb,EAAA,OAAA;AAAA,MAAgD,2CAAAC,EAAA;AAAA,IACK,EAAA,GAGrDa,IAAAd,EAAA,MAAAH,IAAA,YAAA,MAAA;;;;;;;;;;;;;;;;;;"}