@adyen/bento-vue3 1.27.0 → 1.28.0

package/dist/chunks/selection-card-group.C-YLePO4.js

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

package/dist/chunks/selection-card-group.C-YLePO4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-card-group.C-YLePO4.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 '../internal/radio-input';\nimport { BentoCheckboxType } from '../checkbox';\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    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                            >{{ subtitle }}</bento-typography\n                        >\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                    @update:model-value=\"onChange\"\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                    @update:model-value=\"onChange\"\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 '@/utils/ts/unique-id';\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         * 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    }));\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    // Handle click on the whole card area\n    const handleCardClick = event => {\n        if (!props.disabled && !props.readonly) {\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)) {\n                return;\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\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 '@/utils/ts/unique-id';\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","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","_b","_a","_d","_c","_f","_e","newValue","toggleInput","onChange","currentValue","newCheckedList","index","emit","__default__","name","conditionalItemsClasses","inputValue","watch","errorMessageId","shouldShowGroupError","onInput","value","isRadioVariant","provide"],"mappings":"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"}

package/dist/chunks/sidepanel.B-LtA15e.js

@@ -0,0 +1,230 @@
+import { defineComponent as T, openBlock as E, createBlock as $, unref as a, createSlots as x, withCtx as n, createElementVNode as m, createVNode as r, createTextVNode as K, toDisplayString as R, renderSlot as h, toRefs as F, ref as i, computed as J, watch as Y, nextTick as M, provide as g, createElementBlock as C, normalizeClass as z, withKeys as j, withModifiers as q, createCommentVNode as H } from "vue";
+import { B as D } from "./typography.D7onlQ9v.js";
+import { F as Q } from "./footer-actions.D9nQFagi.js";
+import { D as W, B as X, b as Z, a as ee } from "./dialog-page.BLqqR73w.js";
+import { _ as N } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as te } from "./button.DoqHEvPh.js";
+import { B as ae } from "./focus-trap.CwkbHfT8.js";
+import { C as se } from "./cross.BlL0FyHo.js";
+import { S as ie } from "./sidepanel.keys.R0DKQuYx.js";
+import { u as ne } from "./i18n.DY5YXG5f.js";
+import { g as oe } from "./unique-id.XFfoKuc2.js";
+import "../assets/sidepanel.css";
+const le = { class: "b-sidepanel-page__header" }, re = { class: "b-sidepanel-page__content" }, ce = { class: "b-sidepanel-page__actions" }, de = {}, ue = /* @__PURE__ */ T({
+  ...de,
+  __name: "sidepanel-page",
+  props: {
+    /**
+     * List of actions that will be used to render the buttons.
+     * First element in the list will be rendered as "primary".
+     * All elements after the first will be rendered as "secondary".
+     *
+     * ```
+     * [{
+     *   title: 'Primary',
+     *   event: () => { ... },
+     *   icon: FourPeopleIcon
+     * }, {
+     *   title: 'Secondary',
+     *   event: () => { ... }
+     * }]
+     * ```
+     */
+    actions: {
+      type: Array,
+      default: null
+    },
+    /**
+     * Text label that is displayed left to the action buttons
+     */
+    actionsLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * If passed - sets first button color to red
+     */
+    destructiveActions: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Identifier of the page, used with activePage prop to handle sidepanel navigation
+     */
+    pageId: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior
+     * Used when the back button should not take the user to the natural previous page
+     * Set to `null` to hide back button in the page
+     */
+    previousPage: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Title of the sidepanel page
+     */
+    title: {
+      type: String,
+      default: null
+    }
+  },
+  setup(e) {
+    return (c, A) => (E(), $(a(W), {
+      class: "b-sidepanel-page",
+      "page-id": e.pageId,
+      "previous-page": e.previousPage
+    }, x({
+      header: n(() => [
+        m("div", le, [
+          r(a(D), {
+            class: "b-sidepanel-page__title",
+            el: "h2",
+            variant: "title"
+          }, {
+            default: n(() => [
+              K(R(e.title), 1)
+            ]),
+            _: 1
+          })
+        ])
+      ]),
+      content: n(() => [
+        m("div", re, [
+          r(a(D), {
+            el: "div",
+            variant: "body"
+          }, {
+            default: n(() => [
+              h(c.$slots, "default", {}, void 0, !0)
+            ]),
+            _: 3
+          })
+        ])
+      ]),
+      _: 2
+    }, [
+      e.actions && e.actions.length > 0 ? {
+        name: "footer",
+        fn: n(() => [
+          m("div", ce, [
+            r(a(Q), {
+              actions: e.actions,
+              "actions-label": e.actionsLabel,
+              "destructive-actions": e.destructiveActions
+            }, null, 8, ["actions", "actions-label", "destructive-actions"])
+          ])
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["page-id", "previous-page"]));
+  }
+}), he = /* @__PURE__ */ N(ue, [["__scopeId", "data-v-b0fa716c"]]);
+var v = /* @__PURE__ */ ((e) => (e.UPDATE_ACTIVE_PAGE = "update:active-page", e.UPDATE_IS_OPEN = "update:is-open", e))(v || {});
+const O = {
+  "en-US": {
+    close: "Close"
+  }
+}, pe = ["id"], fe = {
+  key: 0,
+  class: "b-sidepanel__close-button"
+}, ve = {
+  i18n: { messages: O }
+}, _e = /* @__PURE__ */ T({
+  ...ve,
+  __name: "sidepanel",
+  props: {
+    /**
+     * The id of the current active page
+     * Should be the same id as the BentoSidepanelPage to be displayed
+     * If the component only has one page, it can be left null/undefined.
+     */
+    activePage: {
+      type: String,
+      default: null
+    },
+    /**
+     * If set to true, it allows the sidepanel to be closed
+     */
+    isDismissible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel
+     */
+    isOpen: {
+      type: Boolean,
+      default: null
+    }
+  },
+  setup(e, { emit: c }) {
+    const A = e, { activePage: I, isOpen: P } = F(A), { t: S } = ne({ messages: O }), o = i(null), d = i([]), l = i([]), B = i(X.TRANSITION_LEVEL_DEEPER), u = i(!1), b = oe("sidepanel"), _ = i(!1), y = i(!1), G = J(() => ({
+      "b-sidepanel--hide": u.value,
+      "b-sidepanel--animation": y.value
+    })), k = () => {
+      u.value && (o.value.close(), l.value[0] && c(v.UPDATE_ACTIVE_PAGE, l.value[0]), l.value = [], u.value = !1, _.value = !1, c(v.UPDATE_IS_OPEN, !1));
+    }, p = () => {
+      o.value.open && (u.value = !0);
+    }, L = ({ target: t }) => {
+      t && t.tagName === "DIALOG" && p();
+    };
+    Y(
+      () => P.value,
+      async () => {
+        await M(), o.value && (P.value ? (_.value = !0, o.value.showModal(), l.value.length || l.value.push(I.value)) : o.value.open && p());
+      },
+      { immediate: !0 }
+    );
+    const V = (t) => c(v.UPDATE_ACTIVE_PAGE, t), w = (t) => () => {
+      var s;
+      d.value = (s = d.value) == null ? void 0 : s.filter((f) => f !== t);
+    }, U = (t) => (d.value.push(t), { unregisterPage: w(t) });
+    return g(Z, {
+      activePage: I,
+      animation: B,
+      isAnimationActive: y,
+      isOpen: _,
+      pages: d,
+      previousPages: l,
+      updatePage: V
+    }), g(ee, U), g(ie, b), (t, s) => (E(), C("dialog", {
+      id: a(b),
+      ref_key: "sidepanel",
+      ref: o,
+      class: z(["b-sidepanel", a(G)]),
+      onAnimationend: k,
+      onClick: s[0] || (s[0] = (f) => e.isDismissible && L(f)),
+      onKeydown: s[1] || (s[1] = j(q((f) => e.isDismissible && p, ["prevent"]), ["esc"]))
+    }, [
+      r(a(ae), null, {
+        default: n(() => [
+          e.isDismissible ? (E(), C("div", fe, [
+            r(a(te), {
+              variant: "tertiary",
+              onClick: p
+            }, {
+              default: n(() => [
+                r(a(se), {
+                  "svg-title": a(S)("close")
+                }, null, 8, ["svg-title"])
+              ]),
+              _: 1
+            })
+          ])) : H("", !0),
+          h(t.$slots, "default", {}, void 0, !0)
+        ]),
+        _: 3
+      })
+    ], 42, pe));
+  }
+}), Ne = /* @__PURE__ */ N(_e, [["__scopeId", "data-v-2df3d3b5"]]);
+export {
+  v as B,
+  Ne as a,
+  he as s
+};
+//# sourceMappingURL=sidepanel.B-LtA15e.js.map