@adyen/bento-vue2 1.26.0 → 1.28.0

package/dist/chunks/segmented-control.DGjIC7Ab.js

@@ -0,0 +1,111 @@
+import { defineComponent as p, ref as i, computed as d, toRef as g, watch as C, onMounted as h } from "vue";
+import { B, p as y } from "./typography.Bjtu3Gca.js";
+import { g as w } from "./unique-id.XFfoKuc2.js";
+import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { o as $ } from "./resize.Bqks3WUm.js";
+import { B as W } from "./tooltip.DR8rbIYw.js";
+import "../assets/segmented-control.css";
+const k = {
+  name: "bento-segmented-control-button"
+}, x = /* @__PURE__ */ p({
+  ...k,
+  props: {
+    disabled: { type: Boolean, default: !1 },
+    fullWidth: { type: Boolean, default: !1 },
+    label: null,
+    modelValue: { default: null },
+    truncate: { type: Boolean, default: !1 },
+    value: null,
+    wrap: { type: Boolean, default: !1 }
+  },
+  emits: ["update:model-value"],
+  setup(r, { emit: t }) {
+    const e = r, o = i(), n = w("segmented-control-button"), l = d(() => e.value === e.modelValue), a = d(() => ({
+      "b-segmented-control-button--hug-content": !e.fullWidth,
+      "b-segmented-control-button--full-width": e.fullWidth,
+      "b-segmented-control-button--truncate": e.truncate,
+      "b-segmented-control-button--wrap": e.wrap && !e.truncate
+    }));
+    return { __sfc: !0, props: e, emit: t, segmentedControlButtonLabel: o, segmentedControlButtonId: n, isChecked: l, conditionalClasses: a, onClick: () => {
+      e.disabled || t("update:model-value", e.value);
+    }, BentoTypography: B };
+  }
+});
+var I = function() {
+  var t = this, e = t._self._c, o = t._self._setupProxy;
+  return e("div", { staticClass: "b-segmented-control-button", class: o.conditionalClasses }, [e("input", { staticClass: "b-segmented-control-button__input", attrs: { id: o.segmentedControlButtonId, "aria-checked": o.isChecked, "aria-label": t.label, disabled: t.disabled, type: "radio", role: "radio" }, domProps: { checked: o.isChecked, value: t.value }, on: { change: o.onClick } }), t.label ? e("label", { staticClass: "b-segmented-control-button__label-container", attrs: { for: o.segmentedControlButtonId } }, [e(o.BentoTypography, { ref: "segmentedControlButtonLabel", staticClass: "b-segmented-control-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [t._v(" " + t._s(t.label) + " ")])], 1) : t._e()]);
+}, T = [], V = /* @__PURE__ */ f(
+  x,
+  I,
+  T,
+  !1,
+  null,
+  "bef754d8"
+);
+const L = V.exports, R = {
+  name: "bento-segmented-control"
+}, D = /* @__PURE__ */ p({
+  ...R,
+  props: {
+    ariaLabel: { default: null },
+    fullWidth: { type: Boolean, default: !1 },
+    items: null,
+    modelValue: null,
+    wrap: { type: Boolean, default: !1 }
+  },
+  emits: ["update:model-value"],
+  setup(r, { emit: t }) {
+    const e = r, o = g(e, "modelValue"), n = i(), l = i(), a = i(), u = d(() => !e.wrap);
+    C(
+      () => e.items,
+      () => {
+        e.items.length > 5 && y(
+          "Do not use when you need to provide more than 5 segments at a time. If you need to provide more options, use a dropdown component."
+        );
+      },
+      { immediate: !0 }
+    ), h(() => {
+      $(n.value, () => {
+        var s;
+        n.value && (a.value = (s = l == null ? void 0 : l.value) == null ? void 0 : s.map(
+          (c) => c.$refs.segmentedControlButtonLabel.$el.offsetWidth < c.$refs.segmentedControlButtonLabel.$el.scrollWidth
+        ));
+      });
+    });
+    const _ = d(
+      () => e.items.map((s, c) => {
+        var m;
+        return {
+          ...s,
+          tooltipText: u.value && ((m = a == null ? void 0 : a.value) != null && m[c]) ? s.label : void 0
+        };
+      })
+    ), b = (s) => {
+      t("update:model-value", s);
+    }, v = d(() => ({
+      "b-segmented-control--hug": !e.fullWidth,
+      "b-segmented-control--full-width": e.fullWidth,
+      "b-segmented-control--truncate": u.value,
+      "b-segmented-control--wrap": e.wrap
+    }));
+    return { __sfc: !0, emit: t, props: e, inputValue: o, segmentedControlRef: n, segmentedControlButtonRef: l, hasEllipsis: a, truncate: u, computedItems: _, onInput: b, conditionalClasses: v, SegmentedControlButton: L, vBentoTooltipDirective: W };
+  }
+});
+var S = function() {
+  var t = this, e = t._self._c, o = t._self._setupProxy;
+  return e("div", { ref: "segmentedControlRef", staticClass: "b-segmented-control", class: o.conditionalClasses, attrs: { role: "group" } }, t._l(o.computedItems, function(n, l) {
+    return e(o.SegmentedControlButton, { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive", value: n.tooltipText, expression: "item.tooltipText" }], key: `segmented-control-item-${l}-${n.label}`, ref: "segmentedControlButtonRef", refInFor: !0, staticClass: "b-segmented-control__item", attrs: { label: n.label, value: n.value, disabled: n.disabled, truncate: o.truncate, wrap: t.wrap, "full-width": t.fullWidth, "model-value": o.inputValue }, on: { "update:model-value": o.onInput } });
+  }), 1);
+}, F = [], P = /* @__PURE__ */ f(
+  D,
+  S,
+  F,
+  !1,
+  null,
+  "c074d9c3"
+);
+const q = P.exports;
+export {
+  q as B
+};
+//# sourceMappingURL=segmented-control.DGjIC7Ab.js.map

package/dist/chunks/segmented-control.DGjIC7Ab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.DGjIC7Ab.js","sources":["../../src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue","../../src/components/segmented-control/segmented-control.vue"],"sourcesContent":["<template>\n    <div class=\"b-segmented-control-button\" :class=\"conditionalClasses\">\n        <input\n            :id=\"segmentedControlButtonId\"\n            :aria-checked=\"isChecked\"\n            :aria-label=\"label\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :value=\"value\"\n            type=\"radio\"\n            class=\"b-segmented-control-button__input\"\n            role=\"radio\"\n            @change=\"onClick\"\n        />\n        <label v-if=\"label\" :for=\"segmentedControlButtonId\" class=\"b-segmented-control-button__label-container\">\n            <bento-typography\n                ref=\"segmentedControlButtonLabel\"\n                class=\"b-segmented-control-button__label\"\n                el=\"span\"\n                variant=\"body\"\n                stronger\n            >\n                {{ label }}\n            </bento-typography>\n        </label>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { computed, ComputedRef, ref } from 'vue';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Disable the radio button (optional)\n             */\n            disabled?: boolean;\n\n            /**\n             * Renders the button with a 100% width\n             */\n            fullWidth?: boolean;\n\n            /**\n             * The string the button will showcase\n             */\n            label: string;\n\n            /**\n             * This property should not be used directly.\n             * It will be used by v-model directive on the segmented control component\n             */\n            modelValue?: string | number;\n\n            /**\n             * Renders the button with a truncated text if the space is not enough to render the whole content\n             */\n            truncate?: boolean;\n\n            /**\n             * Indicates the value of the input that will be returned when it's selected\n             */\n            value: string | number;\n\n            /**\n             * Renders the button with centered text in case the text has to wrap multiple lines\n             */\n            wrap?: boolean;\n        }>(),\n        {\n            disabled: false,\n            fullWidth: false,\n            modelValue: null,\n            truncate: false,\n            wrap: false,\n        }\n    );\n\n    const emit = defineEmits<{\n        /**\n         * Emitted every time the segmented control internal value is changed\n         */\n        (e: 'update:model-value', value: string | number);\n    }>();\n\n    const segmentedControlButtonLabel = ref();\n    const segmentedControlButtonId = generateUid('segmented-control-button');\n    const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n    const conditionalClasses = computed(() => ({\n        'b-segmented-control-button--hug-content': !props.fullWidth,\n        'b-segmented-control-button--full-width': props.fullWidth,\n        'b-segmented-control-button--truncate': props.truncate,\n        'b-segmented-control-button--wrap': props.wrap && !props.truncate,\n    }));\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('update:model-value', props.value);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component to be used within the BentoSegmentedControl component only\n     */\n    export default {\n        name: 'bento-segmented-control-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control-button.scss\" />\n","<template>\n    <div ref=\"segmentedControlRef\" role=\"group\" class=\"b-segmented-control\" :class=\"conditionalClasses\">\n        <segmented-control-button\n            v-for=\"(item, index) in computedItems\"\n            ref=\"segmentedControlButtonRef\"\n            :key=\"`segmented-control-item-${index}-${item.label}`\"\n            v-bento-tooltip-directive=\"item.tooltipText\"\n            class=\"b-segmented-control__item\"\n            :label=\"item.label\"\n            :value=\"item.value\"\n            :disabled=\"item.disabled\"\n            :truncate=\"truncate\"\n            :wrap=\"wrap\"\n            :full-width=\"fullWidth\"\n            :model-value=\"inputValue\"\n            @update:model-value=\"onInput\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, ref, toRef, watch } from 'vue';\n    import SegmentedControlButton from './components/segmented-control-button/segmented-control-button.vue';\n    import { BentoSegmentedControlItem } from './segmented-control.types';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n    const emit = defineEmits<{\n        /**\n         * Emitted every time the segmented control internal value is changed\n         */\n        (e: 'update:model-value', value: string | number);\n    }>();\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Accessible name describing the segmented control.\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            ariaLabel?: string;\n\n            /**\n             * If set to true, renders the component full width.\n             */\n            fullWidth?: boolean;\n\n            /**\n             * Items that will populate the segmented control.\n             */\n            items: BentoSegmentedControlItem[];\n\n            /**\n             * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.\n             */\n            modelValue: string | number;\n\n            /**\n             * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.\n             */\n            wrap?: boolean;\n        }>(),\n        {\n            ariaLabel: null,\n            fullWidth: false,\n            wrap: false,\n        }\n    );\n\n    const inputValue = toRef(props, 'modelValue');\n\n    const segmentedControlRef = ref();\n    const segmentedControlButtonRef = ref();\n    const hasEllipsis = ref();\n\n    const truncate = computed(() => !props.wrap);\n\n    watch(\n        () => props.items,\n        () => {\n            if (props.items.length > 5) {\n                printDevelopmentWarning(\n                    'Do not use when you need to provide more than 5 segments at a time. If you need to provide more options, use a dropdown component.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n\n    onMounted(() => {\n        observeSizeOfElement(segmentedControlRef.value, () => {\n            if (segmentedControlRef.value) {\n                hasEllipsis.value = segmentedControlButtonRef?.value?.map(\n                    el =>\n                        el.$refs.segmentedControlButtonLabel.$el.offsetWidth <\n                        el.$refs.segmentedControlButtonLabel.$el.scrollWidth\n                );\n            }\n        });\n    });\n\n    const computedItems = computed(() =>\n        props.items.map((el, index) => ({\n            ...el,\n            tooltipText: truncate.value && hasEllipsis?.value?.[index] ? el.label : undefined,\n        }))\n    );\n\n    const onInput = value => {\n        emit('update:model-value', value);\n    };\n\n    const conditionalClasses = computed(() => ({\n        'b-segmented-control--hug': !props.fullWidth,\n        'b-segmented-control--full-width': props.fullWidth,\n        'b-segmented-control--truncate': truncate.value,\n        'b-segmented-control--wrap': props.wrap,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * @example\n     * import { BentoSegmentedControl } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSegmentedControl },\n     *     template: `\n     *          <bento-segmented-control\n     *              :items=\"[{ label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3, disabled: true }]\"\n     *              :model-value=\"1\"\n     *              @update:model-value=\"yourUpdateHandler\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-segmented-control',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control.scss\" />\n"],"names":["__default__$1","segmentedControlButtonLabel","ref","segmentedControlButtonId","generateUid","isChecked","computed","props","conditionalClasses","emit","__default__","inputValue","toRef","segmentedControlRef","segmentedControlButtonRef","hasEllipsis","truncate","watch","printDevelopmentWarning","onMounted","observeSizeOfElement","_a","el","computedItems","index","onInput","value"],"mappings":";;;;;;;AA2GI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;iBAtBAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,0BAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,UAAAA,EAAA,UAAA,GACAC,IAAAF,EAAA,OAAA;AAAA,MAA2C,2CAAA,CAAAC,EAAA;AAAA,MACW,0CAAAA,EAAA;AAAA,MACF,wCAAAA,EAAA;AAAA,MACF,oCAAAA,EAAA,QAAA,CAAAA,EAAA;AAAA,IACW,EAAA;sJAE7D,MAAA;AACI,MAAAA,EAAA,YACIE,EAAA,sBAAAF,EAAA,KAAA;AAAA,IACJ;;;;;;;;;;;;;;qBCsCJG,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;iBArEAC,IAAAC,EAAAL,GAAA,YAAA,GAEAM,IAAAX,EAAA,GACAY,IAAAZ,EAAA,GACAa,IAAAb,EAAA,GAEAc,IAAAV,EAAA,MAAA,CAAAC,EAAA,IAAA;AAEA,IAAAU;AAAA,MAAA,MAAAV,EAAA;AAAA,MACgB,MAAA;AAER,QAAAA,EAAA,MAAA,SAAA,KACIW;AAAA,UAAA;AAAA,QACI;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB,GAGtBC,EAAA,MAAA;AACI,MAAAC,EAAAP,EAAA,OAAA,MAAA;;AACI,QAAAA,EAAA,UACIE,EAAA,SAAAM,IAAAP,KAAA,gBAAAA,EAAA,UAAA,gBAAAO,EAAA;AAAA,UAAsD,CAAAC,MAAAA,EAAA,MAAA,4BAAA,IAAA,cAAAA,EAAA,MAAA,4BAAA,IAAA;AAAA;AAAA,MAK1D,CAAA;AAAA,IACH,CAAA;AAGL,UAAAC,IAAAjB;AAAA,MAAsB,MAAAC,EAAA,MAAA,IAAA,CAAAe,GAAAE,MAAA;;AAAA;AAAA,UACc,GAAAF;AAAA,UACzB,aAAAN,EAAA,WAAAK,IAAAN,KAAA,gBAAAA,EAAA,UAAA,QAAAM,EAAAG,MAAAF,EAAA,QAAA;AAAA,QACqE;AAAA,OAAA;AAAA,IAC1E,GAGNG,IAAA,CAAAC,MAAA;AACI,MAAAjB,EAAA,sBAAAiB,CAAA;AAAA,IAAgC,GAGpClB,IAAAF,EAAA,OAAA;AAAA,MAA2C,4BAAA,CAAAC,EAAA;AAAA,MACJ,mCAAAA,EAAA;AAAA,MACM,iCAAAS,EAAA;AAAA,MACC,6BAAAT,EAAA;AAAA,IACP,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/segmented-control.types.BHRLV8KU.js

@@ -0,0 +1,5 @@
+var a = /* @__PURE__ */ ((e) => (e.UPDATE = "update:model-value", e))(a || {});
+export {
+  a as B
+};
+//# sourceMappingURL=segmented-control.types.BHRLV8KU.js.map

package/dist/chunks/segmented-control.types.BHRLV8KU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.types.BHRLV8KU.js","sources":["../../src/components/segmented-control/segmented-control.types.ts"],"sourcesContent":["export interface BentoSegmentedControlItem {\n    label: string;\n    value: string | number;\n    disabled?: boolean;\n}\n\n/**\n * @deprecated from version 2.0.0. Use \"@update:model-value\" or \"v-model\" instead\n */\nexport enum BentoSegmentedControlEvent {\n    UPDATE = 'update:model-value',\n}\n"],"names":["BentoSegmentedControlEvent"],"mappings":"AASY,IAAAA,sBAAAA,OACRA,EAAA,SAAS,sBADDA,IAAAA,KAAA,CAAA,CAAA;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"selection-card-group.DlOs8BkR.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 '../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.BBjm2QvZ.js

@@ -0,0 +1,187 @@
+import { defineComponent as C, toRefs as B, ref as l, computed as h, watch as k, nextTick as N, provide as v } from "vue";
+import { B as G } from "./typography.Bjtu3Gca.js";
+import { F as x } from "./footer-actions.DqMRmlV_.js";
+import { D as L, B as F, b as R, a as U } from "./dialog-page.DAh0M4mT.js";
+import { n as I } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as w } from "./button.DhAUh5JA.js";
+import { B as V } from "./focus-trap.DSkLNO_i.js";
+import { C as J } from "./cross.CsUPDmaA.js";
+import { S as K } from "./sidepanel.keys.R0DKQuYx.js";
+import { u as Y } from "./i18n.BQkEbtPM.js";
+import { g as $ } from "./unique-id.XFfoKuc2.js";
+import "../assets/sidepanel.css";
+const z = {}, M = /* @__PURE__ */ C({
+  ...z,
+  __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(i) {
+    return { __sfc: !0, BentoTypography: G, FooterActions: x, DialogPage: L };
+  }
+});
+var j = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s(t.DialogPage, { staticClass: "b-sidepanel-page", attrs: { "page-id": e.pageId, "previous-page": e.previousPage }, scopedSlots: e._u([{ key: "header", fn: function() {
+    return [s("div", { staticClass: "b-sidepanel-page__header" }, [s(t.BentoTypography, { staticClass: "b-sidepanel-page__title", attrs: { el: "h2", variant: "title" } }, [e._v(" " + e._s(e.title) + " ")])], 1)];
+  }, proxy: !0 }, { key: "content", fn: function() {
+    return [s("div", { staticClass: "b-sidepanel-page__content" }, [s(t.BentoTypography, { attrs: { el: "div", variant: "body" } }, [e._t("default")], 2)], 1)];
+  }, proxy: !0 }, e.actions && e.actions.length > 0 ? { key: "footer", fn: function() {
+    return [s("div", { staticClass: "b-sidepanel-page__actions" }, [s(t.FooterActions, { attrs: { actions: e.actions, "actions-label": e.actionsLabel, "destructive-actions": e.destructiveActions } })], 1)];
+  }, proxy: !0 } : null], null, !0) });
+}, q = [], H = /* @__PURE__ */ I(
+  M,
+  j,
+  q,
+  !1,
+  null,
+  "4e6c994b"
+);
+const de = H.exports;
+var _ = /* @__PURE__ */ ((i) => (i.UPDATE_ACTIVE_PAGE = "update:active-page", i.UPDATE_IS_OPEN = "update:is-open", i))(_ || {});
+const Q = {
+  "en-US": {
+    close: "Close"
+  }
+}, W = {
+  i18n: { messages: Q }
+}, X = /* @__PURE__ */ C({
+  ...W,
+  __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(i, { emit: e }) {
+    const s = i, { activePage: t, isOpen: a } = B(s), { t: D } = Y(), r = l(null), p = l([]), o = l([]), m = l(F.TRANSITION_LEVEL_DEEPER), c = l(!1), g = $("sidepanel"), u = l(!1), d = l(!1), b = h(() => ({
+      "b-sidepanel--hide": c.value,
+      "b-sidepanel--animation": d.value
+    })), O = () => {
+      c.value && (r.value.close(), o.value[0] && e(_.UPDATE_ACTIVE_PAGE, o.value[0]), o.value = [], c.value = !1, u.value = !1, e(_.UPDATE_IS_OPEN, !1));
+    }, f = () => {
+      r.value.open && (c.value = !0);
+    }, T = ({ target: n }) => {
+      n && n.tagName === "DIALOG" && f();
+    };
+    k(
+      () => a.value,
+      async () => {
+        await N(), r.value && (a.value ? (u.value = !0, r.value.showModal(), o.value.length || o.value.push(t.value)) : r.value.open && f());
+      },
+      { immediate: !0 }
+    );
+    const A = (n) => e(_.UPDATE_ACTIVE_PAGE, n), y = (n) => () => {
+      var P;
+      p.value = (P = p.value) == null ? void 0 : P.filter((S) => S !== n);
+    }, E = (n) => (p.value.push(n), { unregisterPage: y(n) });
+    return v(R, {
+      activePage: t,
+      animation: m,
+      isAnimationActive: d,
+      isOpen: u,
+      pages: p,
+      previousPages: o,
+      updatePage: A
+    }), v(U, E), v(K, g), { __sfc: !0, props: s, emit: e, activePage: t, isOpen: a, t: D, sidepanel: r, pages: p, previousPages: o, animation: m, isClosing: c, sidepanelId: g, internalIsOpen: u, isAnimationActive: d, conditionalClasses: b, closeSidepanelAfterAnimation: O, startCloseSidepanelAnimation: f, closeSidepanelOnClickOutside: T, updatePage: A, unregisterPage: y, registerPage: E, BentoButton: w, BentoFocusTrap: V, CrossIcon: J };
+  }
+});
+var Z = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s("dialog", { ref: "sidepanel", staticClass: "b-sidepanel", class: t.conditionalClasses, attrs: { id: t.sidepanelId }, on: { animationend: t.closeSidepanelAfterAnimation, click: function(a) {
+    e.isDismissible && t.closeSidepanelOnClickOutside(a);
+  }, keydown: function(a) {
+    if (!a.type.indexOf("key") && e._k(a.keyCode, "esc", 27, a.key, ["Esc", "Escape"])) return null;
+    a.preventDefault(), e.isDismissible && t.startCloseSidepanelAnimation;
+  } } }, [s(t.BentoFocusTrap, [e.isDismissible ? s("div", { staticClass: "b-sidepanel__close-button" }, [s(t.BentoButton, { attrs: { variant: "tertiary" }, on: { click: t.startCloseSidepanelAnimation } }, [s(t.CrossIcon, { attrs: { "svg-title": t.t("close") } })], 1)], 1) : e._e(), e._t("default")], 2)], 1);
+}, ee = [], te = /* @__PURE__ */ I(
+  X,
+  Z,
+  ee,
+  !1,
+  null,
+  "11e634f1"
+);
+const fe = te.exports;
+export {
+  _ as B,
+  fe as a,
+  de as s
+};
+//# sourceMappingURL=sidepanel.BBjm2QvZ.js.map