@adyen/bento-vue2 1.108.2 → 1.108.3

package/dist/chunks/{input-time.DDYaCY3r.js → input-time.D4GB-OBv.js}

@@ -1,14 +1,14 @@
 import { defineComponent as S, provide as g, useSlots as y, ref as D, computed as d, watch as h } from "vue";
 import { f as H, B as I } from "./input-field.BwGCbmk0.js";
-import { g as b } from "./dropdown.DGUdfiro.js";
-import { u as E } from "./index.CPOlyau9.js";
+import { g as E } from "./dropdown.DGUdfiro.js";
+import { u as b } from "./index.CPOlyau9.js";
 import { u as B } from "./use-has-slot.C9lQZ6nz.js";
 import { u as V } from "./use-touch-device.DTqFAbXh.js";
-import { n as w } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { n as k } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/input-time.css";
-const x = /[\d]/, N = /^\d{2}$/, k = /^\d{2}:\d{2}$/, v = (o) => /^(?:[01]\d|2[0-4]):(?:[0-5]\d):(?:[0-5]\d)$/.test(o), A = 8, $ = (o) => {
-  const { selectionStart: e, value: i = "" } = o.target, s = ["Backspace", "Tab", "ArrowLeft", "ArrowRight"].includes(o.key), p = x.test(o.key) || s, r = [1, 2, 4, 5].includes(e) && o.key === ":", u = i.length >= A;
-  (!p && !r || u && !s) && o.preventDefault();
+const w = /[\d]/, x = /^\d{2}$/, N = /^\d{2}:\d{2}$/, v = (o) => /^(?:[01]\d|2[0-4]):(?:[0-5]\d):(?:[0-5]\d)$/.test(o), $ = 8, A = (o) => {
+  const { selectionStart: e, value: i = "" } = o.target, l = ["Backspace", "Tab", "ArrowLeft", "ArrowRight"].includes(o.key), p = w.test(o.key) || l, r = [1, 2, 4, 5].includes(e) && o.key === ":", u = i.length >= $;
+  (!p && !r || u && !l) && o.preventDefault();
 }, C = (o) => {
   if (!o)
     return o;
@@ -16,7 +16,7 @@ const x = /[\d]/, N = /^\d{2}$/, k = /^\d{2}:\d{2}$/, v = (o) => /^(?:[01]\d|2[0
   if (e.length === 1 && parseInt(o, 10) > 2)
     return `0${e}:`;
   const [i, t] = e.slice(-2);
-  return [2, 5].includes(e.length) && t === ":" && (e = `${e.slice(0, e.length - 2)}0${i}`), (N.test(e) || k.test(e)) && (e += ":"), e;
+  return [2, 5].includes(e.length) && t === ":" && (e = `${e.slice(0, e.length - 2)}0${i}`), (x.test(e) || N.test(e)) && (e += ":"), e;
 }, K = {
   "de-DE": { invalidTimeFormat: "Ungültiges Zeitformat", timeFormatDescription: "HH:MM:SS" },
   "en-GB": { invalidTimeFormat: "Invalid time format", timeFormatDescription: "HH:MM:SS" },
@@ -49,25 +49,25 @@ const x = /[\d]/, N = /^\d{2}$/, k = /^\d{2}:\d{2}$/, v = (o) => /^(?:[01]\d|2[0
     condensed: { type: Boolean, default: !1 },
     modelValue: { default: void 0 }
   },
-  emits: ["update:model-value", "keydown", "input:valid", "input:error"],
+  emits: ["click", "update:model-value", "keydown", "input:valid", "input:error"],
   setup(o, { emit: e }) {
     const i = o, t = 300;
     g(H, "bento-input-time");
-    const s = y(), p = B(s), { isTouchDevice: r } = V(), { t: u } = E(), l = D(!1), m = d(() => i.errorMessage ? i.errorMessage : l.value ? u("invalidTimeFormat") : null), _ = d(() => r.value ? i.errorMessage : m.value), T = d(() => r.value ? "time" : void 0), M = d(() => i.modelValue), F = d(() => r ? void 0 : i.placeholder), c = (n) => {
+    const l = y(), p = B(l), { isTouchDevice: r } = V(), { t: u } = b(), s = D(!1), m = d(() => i.errorMessage ? i.errorMessage : s.value ? u("invalidTimeFormat") : null), _ = d(() => r.value ? i.errorMessage : m.value), T = d(() => r.value ? "time" : void 0), M = d(() => i.modelValue), F = d(() => r ? void 0 : i.placeholder), c = (n) => {
       if (!n) {
-        l.value = !1;
+        s.value = !1;
         return;
       }
       const a = v(n);
-      l.value = !a, e(a ? "input:valid" : "input:error");
-    }, f = b(c, t);
+      s.value = !a, e(a ? "input:valid" : "input:error");
+    }, f = E(c, t);
     return h(
       () => i.modelValue,
       (n) => {
         const a = String(n ?? "");
-        a.length === 8 && v(a) && (l.value = !1);
+        a.length === 8 && v(a) && (s.value = !1);
       }
-    ), { __sfc: !0, VALIDATION_DEBOUNCE_TIME: t, slots: s, hasSlot: p, isTouchDevice: r, t: u, props: i, emit: e, internalError: l, computedErrorMessage: m, inputErrorMessage: _, inputType: T, inputModelValue: M, computedPlaceholder: F, validateTime: c, validateTimeWithDebounce: f, onInput: (n) => {
+    ), { __sfc: !0, VALIDATION_DEBOUNCE_TIME: t, slots: l, hasSlot: p, isTouchDevice: r, t: u, props: i, emit: e, internalError: s, computedErrorMessage: m, inputErrorMessage: _, inputType: T, inputModelValue: M, computedPlaceholder: F, validateTime: c, validateTimeWithDebounce: f, onInput: (n) => {
       if (!(i.disabled || i.readonly))
         if (r.value)
           e("update:model-value", String(n ?? "")), e("input:valid");
@@ -76,30 +76,32 @@ const x = /[\d]/, N = /^\d{2}$/, k = /^\d{2}:\d{2}$/, v = (o) => /^(?:[01]\d|2[0
           e("update:model-value", a), f(a);
         }
     }, onKeyDown: (n) => {
-      r.value || $(n), e("keydown", n);
+      r.value || A(n), e("keydown", n);
     }, BentoInputField: I };
   }
 });
 var L = function() {
   var e = this, i = e._self._c, t = e._self._setupProxy;
-  return i(t.BentoInputField, e._b({ staticClass: "b-input-time", attrs: { type: t.inputType, step: t.isTouchDevice ? 1 : void 0, condensed: t.props.condensed, disabled: t.props.disabled, "error-message": t.inputErrorMessage, label: t.props.label, "model-value": t.inputModelValue, optional: t.props.optional, placeholder: t.computedPlaceholder, readonly: t.props.readonly, required: t.props.required, "tooltip-text": t.props.tooltipText }, on: { "update:model-value": t.onInput, keydown: t.onKeyDown }, scopedSlots: e._u([t.hasSlot("default") ? { key: "default", fn: function() {
+  return i(t.BentoInputField, e._b({ staticClass: "b-input-time", attrs: { type: t.inputType, step: t.isTouchDevice ? 1 : void 0, condensed: t.props.condensed, disabled: t.props.disabled, "error-message": t.inputErrorMessage, label: t.props.label, "model-value": t.inputModelValue, optional: t.props.optional, placeholder: t.computedPlaceholder, readonly: t.props.readonly, required: t.props.required, "tooltip-text": t.props.tooltipText }, on: { click: function(l) {
+    return e.$emit("click");
+  }, "update:model-value": t.onInput, keydown: t.onKeyDown }, scopedSlots: e._u([t.hasSlot("default") ? { key: "default", fn: function() {
     return [e._t("default")];
   }, proxy: !0 } : null, t.isTouchDevice ? null : { key: "description", fn: function() {
     return [e._t("description", function() {
       return [e._v(e._s(t.props.description ? `${t.props.description} ${t.t("timeFormatDescription")}` : t.t("timeFormatDescription")))];
     })];
   }, proxy: !0 }], null, !0) }, "bento-input-field", e.$attrs, !1));
-}, O = [], U = /* @__PURE__ */ w(
+}, O = [], U = /* @__PURE__ */ k(
   R,
   L,
   O,
   !1,
   null,
-  "a2b489fa"
+  "748af542"
 );
 const Q = U.exports;
 export {
   Q as B,
   v as i
 };
-//# sourceMappingURL=input-time.DDYaCY3r.js.map
+//# sourceMappingURL=input-time.D4GB-OBv.js.map

package/dist/chunks/input-time.D4GB-OBv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-time.D4GB-OBv.js","sources":["../../src/utils/ts/time-input.ts","../../src/components/input-time/input-time.vue"],"sourcesContent":["const validDigitRegex = /[\\d]/;\n\nconst hourRegex = /^\\d{2}$/;\nconst minuteRegex = /^\\d{2}:\\d{2}$/;\n\n/**\n * Validates a complete time string in HH:MM:SS format.\n * Hours: 00-24, Minutes: 00-59, Seconds: 00-59\n * @param timeText The time string to validate\n * @returns True if the time string is valid, false otherwise\n */\nexport const isValidTimeString = (timeText: string): boolean =>\n    /^(?:[01]\\d|2[0-4]):(?:[0-5]\\d):(?:[0-5]\\d)$/.test(timeText);\n\nconst MAX_TIME_INPUT_LENGTH = 8;\n\nexport const validateTimeInput = (event: KeyboardEvent) => {\n    const { selectionStart, value = '' } = event.target as HTMLInputElement;\n\n    const allowedKeys = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight'];\n    const isAllowedKey = allowedKeys.includes(event.key);\n    const isValidKey = validDigitRegex.test(event.key) || isAllowedKey;\n    const isValidColon = [1, 2, 4, 5].includes(selectionStart) && event.key === ':';\n    const isAtMaxLength = value.length >= MAX_TIME_INPUT_LENGTH;\n\n    if ((!isValidKey && !isValidColon) || (isAtMaxLength && !isAllowedKey)) {\n        event.preventDefault();\n    }\n};\n\nexport const formatTimeInputValue = (value: string) => {\n    if (!value) {\n        return value;\n    }\n\n    let formattedValue = value;\n\n    // Format if the first value is bigger than 2, because it can't be bigger than 24 hours\n    if (formattedValue.length === 1 && parseInt(value, 10) > 2) {\n        return `0${formattedValue}:`;\n    }\n\n    const [secondToLastDigit, lastDigit] = formattedValue.slice(-2);\n    if ([2, 5].includes(formattedValue.length) && lastDigit === ':') {\n        formattedValue = `${formattedValue.slice(0, formattedValue.length - 2)}0${secondToLastDigit}`;\n    }\n\n    // Add `:` after hour/minute\n    if (hourRegex.test(formattedValue) || minuteRegex.test(formattedValue)) {\n        formattedValue += ':';\n    }\n    return formattedValue;\n};\n","<template>\n    <bento-input-field\n        class=\"b-input-time\"\n        :type=\"inputType\"\n        :step=\"isTouchDevice ? 1 : undefined\"\n        :condensed=\"props.condensed\"\n        :disabled=\"props.disabled\"\n        :error-message=\"inputErrorMessage\"\n        :label=\"props.label\"\n        :model-value=\"inputModelValue\"\n        :optional=\"props.optional\"\n        :placeholder=\"computedPlaceholder\"\n        :readonly=\"props.readonly\"\n        :required=\"props.required\"\n        :tooltip-text=\"props.tooltipText\"\n        v-bind=\"$attrs\"\n        @click=\"$emit('click')\"\n        @update:model-value=\"onInput\"\n        @keydown=\"onKeyDown\"\n    >\n        <template v-if=\"hasSlot('default')\" #default>\n            <slot name=\"default\"></slot>\n        </template>\n        <template v-if=\"!isTouchDevice\" #description>\n            <slot name=\"description\">{{\n                props.description ? `${props.description} ${t('timeFormatDescription')}` : t('timeFormatDescription')\n            }}</slot>\n        </template>\n    </bento-input-field>\n</template>\n\n<script setup lang=\"ts\">\n    // Components\n    import { BentoInputField } from '@/components/input-field';\n    import { INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n\n    // Utils\n    import { debounce } from '@/utils/ts/debounce';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { formatTimeInputValue, isValidTimeString, validateTimeInput } from '@/utils/ts/time-input';\n\n    // Types\n    import type { BentoInputFieldValue } from '@/components/input-field/input-field.types';\n    import { type BentoInputTimeProps } from './input-time.types';\n\n    // Localization\n    import messages from './messages.json';\n\n    import { computed, provide, ref, useSlots, watch } from 'vue';\n    import { useHasSlot, useTouchDevice } from '@/composables';\n\n    const VALIDATION_DEBOUNCE_TIME = 300;\n\n    provide(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, 'bento-input-time');\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { isTouchDevice } = useTouchDevice();\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  description: { default: undefined },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: '' },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  condensed: { type: Boolean, default: false },\n  modelValue: { default: undefined }\n});\n\n    const emit = defineEmits([\"click\", \"update:model-value\", \"keydown\", \"input:valid\", \"input:error\"]);\n\n    const internalError = ref(false);\n    const computedErrorMessage = computed(() => {\n        if (props.errorMessage) {\n            return props.errorMessage;\n        }\n        return internalError.value ? t('invalidTimeFormat') : null;\n    });\n    const inputErrorMessage = computed(() => (isTouchDevice.value ? props.errorMessage : computedErrorMessage.value));\n    const inputType = computed(() => (isTouchDevice.value ? 'time' : undefined));\n    const inputModelValue = computed(() => props.modelValue);\n    const computedPlaceholder = computed(() => (isTouchDevice ? undefined : props.placeholder));\n\n    const validateTime = (timeText: string) => {\n        if (!timeText) {\n            internalError.value = false;\n            return;\n        }\n\n        const isValid = isValidTimeString(timeText);\n        internalError.value = !isValid;\n\n        if (isValid) {\n            emit('input:valid');\n        } else {\n            emit('input:error');\n        }\n    };\n    const validateTimeWithDebounce = debounce(validateTime, VALIDATION_DEBOUNCE_TIME);\n\n    // Watch for external modelValue changes (e.g., when parent resets the value)\n    watch(\n        () => props.modelValue,\n        newValue => {\n            const timeText = String(newValue ?? '');\n            // Clear the error only when the new value is a complete, valid time string\n            if (timeText.length === 8 && isValidTimeString(timeText)) {\n                internalError.value = false;\n            }\n        }\n    );\n\n    const onInput = (value: BentoInputFieldValue) => {\n        if (props.disabled || props.readonly) {\n            return;\n        }\n\n        if (isTouchDevice.value) {\n            emit('update:model-value', String(value ?? ''));\n            emit('input:valid');\n        } else {\n            const formatted = formatTimeInputValue(String(value ?? ''));\n            emit('update:model-value', formatted);\n            validateTimeWithDebounce(formatted);\n        }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n        if (!isTouchDevice.value) {\n            validateTimeInput(event);\n        }\n        emit('keydown', event);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Input time component for entering time values in HH:MM:SS format.\n     * This is an extension of the `bento-input-field` component with built-in\n     * time formatting and validation logic.\n     *\n     * @usage\n     * import { BentoInputTime } from '@adyen/bento-vue2';\n     *\n     * const timeValue = ref('');\n     *\n     * export default {\n     *     components: { BentoInputTime },\n     *     template: `\n     *         <bento-input-time\n     *             label=\"Start time\"\n     *             :model-value=\"timeValue\"\n     *             @update:model-value=\"newValue => timeValue.value = newValue\"\n     *         />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-input-time',\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-time.scss\" />\n"],"names":["validDigitRegex","hourRegex","minuteRegex","isValidTimeString","timeText","MAX_TIME_INPUT_LENGTH","validateTimeInput","event","selectionStart","value","isAllowedKey","isValidKey","isValidColon","isAtMaxLength","formatTimeInputValue","formattedValue","secondToLastDigit","lastDigit","__default__","messages","VALIDATION_DEBOUNCE_TIME","provide","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","slots","useSlots","hasSlot","useHasSlot","isTouchDevice","useTouchDevice","t","useI18n","internalError","ref","computedErrorMessage","computed","props","inputErrorMessage","inputType","inputModelValue","computedPlaceholder","validateTime","isValid","emit","validateTimeWithDebounce","debounce","watch","newValue","formatted"],"mappings":"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"}

package/dist/chunks/{selection-card-group.CGUEcVTZ.js → selection-card-group.mAC1hrzJ.js}

@@ -1,5 +1,5 @@
-import { defineComponent as $, useSlots as L, computed as l, inject as G, ref as v, watch as A, provide as O, onMounted as D } from "vue";
-import { h as N } from "./index.CL3TXc0a.js";
+import { defineComponent as $, useSlots as L, computed as l, inject as G, ref as v, watch as A, provide as N, onMounted as O } from "vue";
+import { h as D } from "./index.CL3TXc0a.js";
 import { a as q, B as z } from "./es6.Cu3DYUPA.js";
 import { B as F } from "./typography.D1OZJbEa.js";
 import { C as j } from "./checkbox-input.C8gCpme1.js";
@@ -79,7 +79,7 @@ const P = /* @__PURE__ */ Symbol("selection card radio input injection key"), X
   },
   emits: ["input", "update:model-value"],
   setup(i, { emit: e }) {
-    const t = i, o = L(), a = Y(o), h = M("selection-card-input-id"), r = M("selection-card-description"), d = l(
+    const t = i, o = L(), a = Y(o), h = M("selection-card-input-id"), n = M("selection-card-description"), p = l(
       () => t.modelValue
     ), w = l(
       () => t.modelValue
@@ -90,37 +90,37 @@ const P = /* @__PURE__ */ Symbol("selection card radio input injection key"), X
       [`b-selection-card--${S.DISABLED}`]: t.disabled,
       [`b-selection-card--${S.ERROR}`]: t.hasError,
       [`b-selection-card--${S.READONLY}`]: t.readonly,
-      "b-selection-card--center-aligned": m.value
-    })), f = l(() => ({
-      "b-selection-card__checkbox-container--center-aligned": m.value
+      "b-selection-card--center-aligned": _.value
+    })), m = l(() => ({
+      "b-selection-card__checkbox-container--center-aligned": _.value
     })), C = l(() => ({
-      "b-selection-card__checkbox-container-text--center-aligned": m.value
+      "b-selection-card__checkbox-container-text--center-aligned": _.value
     })), k = l(() => ({
       "b-selection-card__slot--with-icon": a("icon")
     })), R = W({
       ariaLabel: t.title,
       label: t.value
-    }), u = l(() => Array.isArray(t.modelValue)), x = l(() => c.value ? t.value === t.modelValue : u.value ? t.modelValue.some((s) => s === t.value) : t.modelValue), c = G(P, v(!1)), m = l(() => !t.subtitle && !t.description), p = v(null), _ = v(null), n = v(null), y = (s) => {
-      if (p.value.$refs.inputRef === s.target) {
+    }), u = l(() => Array.isArray(t.modelValue)), x = l(() => d.value ? t.value === t.modelValue : u.value ? t.modelValue.some((s) => s === t.value) : t.modelValue), d = G(P, v(!1)), _ = l(() => !t.subtitle && !t.description), f = v(null), b = v(null), r = v(null), c = (s) => {
+      if (f.value.$refs.inputRef === s.target) {
         const I = E();
         V(I);
         return;
       }
-      if (t.disabled && t.readonly || !t.fullyClickable && (_.value && _.value?.$el?.contains(s.target) || n.value && n.value?.$el?.contains(s.target) || p.value && p.value?.$el?.contains(s.target)))
+      if (t.disabled && t.readonly || !t.fullyClickable && (b.value && b.value?.$el?.contains(s.target) || r.value && r.value?.$el?.contains(s.target) || f.value && f.value?.$el?.contains(s.target)))
         return;
-      const b = E();
-      V(b);
+      const y = E();
+      V(y);
     }, E = () => {
-      const s = (p.value?.$refs.inputRef).checked;
+      const s = (f.value?.$refs.inputRef).checked;
       if (u.value) {
-        const b = [...t.modelValue], I = b.indexOf(t.value);
-        return I === -1 ? b.push(t.value) : b.splice(I, 1), b;
+        const y = [...t.modelValue], I = y.indexOf(t.value);
+        return I === -1 ? y.push(t.value) : y.splice(I, 1), y;
       }
-      return c.value ? t.value : s;
+      return d.value ? t.value : s;
     }, V = (s) => {
       !t.disabled && !t.readonly && (e("update:model-value", s), e("input", s));
     };
-    return { __sfc: !0, props: t, emit: e, slots: o, hasSlot: a, inputId: h, descriptionId: r, computedRadioInputModelValue: d, computedCheckboxInputModelValue: w, conditionalClasses: B, containerConditionalClasses: g, checkboxContainerConditionalClasses: f, checkboxContainerTextConditionalClasses: C, slotConditionalClasses: k, ariaLabel: R, isCheckboxGroup: u, isChecked: x, isRadioInput: c, isTitleOnly: m, inputRef: p, slotRef: _, dynamicSlotRef: n, handleCardClick: y, toggleInput: E, onChange: V, BentoTypography: F, CheckboxInput: j, RadioInput: Q };
+    return { __sfc: !0, props: t, emit: e, slots: o, hasSlot: a, inputId: h, descriptionId: n, computedRadioInputModelValue: p, computedCheckboxInputModelValue: w, conditionalClasses: B, containerConditionalClasses: g, checkboxContainerConditionalClasses: m, checkboxContainerTextConditionalClasses: C, slotConditionalClasses: k, ariaLabel: R, isCheckboxGroup: u, isChecked: x, isRadioInput: d, isTitleOnly: _, inputRef: f, slotRef: b, dynamicSlotRef: r, handleCardClick: c, toggleInput: E, onChange: V, BentoTypography: F, CheckboxInput: j, RadioInput: Q };
   }
 });
 var ee = function() {
@@ -161,38 +161,39 @@ const ae = oe.exports, le = {
   },
   emits: ["update:model-value", "input"],
   setup(i, { emit: e }) {
-    const t = i, { emitValue: o } = U(e), a = L(), h = (n) => !!a[n], r = l(() => ({
+    const t = i, { emitValue: o } = U(e), a = L(), h = (r) => !!a[r], n = l(() => ({
       "b-selection-card-group__items--horizontal": t.layout === "horizontal"
-    })), d = v(t.modelValue);
+    })), p = v(t.modelValue);
     A(
       () => t.modelValue,
       () => {
-        d.value = t.modelValue;
+        p.value = t.modelValue;
       }
     );
-    const w = M("error"), B = l(() => !t.disabled && !t.readonly && !!t.errorMessage), g = v(null), { width: f } = N(g), C = l(() => q.split("px")[0]), k = l(() => z.split("px")[0]), R = l(() => f.value < C.value ? "small" : f.value >= C.value && f.value < k.value ? "medium" : "large"), u = l(() => t.itemsPerRow?.[R?.value] || t.items.length), x = l(() => {
+    const w = M("error"), B = l(() => !t.disabled && !t.readonly && !!t.errorMessage), g = v(null), { width: m } = D(g), C = l(() => q.split("px")[0]), k = l(() => z.split("px")[0]), R = l(() => m.value < C.value ? "small" : m.value >= C.value && m.value < k.value ? "medium" : "large"), u = l(() => t.itemsPerRow?.[R?.value] || t.items.length), x = l(() => {
       if (!t.itemsPerRow)
         return [];
-      const n = [];
-      for (let y = 0; y < t.items.length; y += u?.value)
-        n.push(t.items.slice(y, y + u?.value));
-      return n;
-    }), c = l(() => 12 / u?.value), m = l(() => u?.value ? new Array(u?.value).fill({
+      const r = [];
+      for (let c = 0; c < t.items.length; c += u?.value)
+        r.push(t.items.slice(c, c + u?.value));
+      return r;
+    }), d = l(() => 12 / u?.value), _ = l(() => u?.value ? new Array(u?.value).fill({
       // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy
-      small: c.value,
-      medium: c.value,
-      large: c.value
-    }) : []), p = (n) => {
-      d.value = n, o(n);
-    }, _ = l(() => t.variant === "radio");
-    return O(P, _), D(() => {
-      t.itemsPerRow && Object.values(t.itemsPerRow).forEach((n) => {
-        if (n && (n < 2 || n > 6))
+      small: d.value,
+      medium: d.value,
+      large: d.value
+    }) : []), f = (r) => {
+      p.value = r, o(r);
+    }, b = l(() => t.variant === "radio");
+    return N(P, b), O(() => {
+      t.itemsPerRow && Object.values(t.itemsPerRow).forEach((r) => {
+        const c = Number(r);
+        if (!Number.isInteger(c) || c < 1 || c > 6)
           throw new Error(
-            "itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information."
+            "itemsPerRow values must have a value between 1 and 6 items per row. Read the documentation for more information."
           );
       });
-    }), { __sfc: !0, props: t, emit: e, emitValue: o, slots: a, hasSlot: h, conditionalItemsClasses: r, inputValue: d, errorMessageId: w, shouldShowGroupError: B, containerRef: g, width: f, smallBreakpoint: C, mediumBreakpoint: k, currentBreakpoint: R, computedItemsPerRow: u, computedRows: x, itemColumnWidth: c, computedColumnWidth: m, onInput: p, isRadioVariant: _, BentoSelectionCard: ae, ControlsGroup: K, ErrorMessage: J, GridLayout: H };
+    }), { __sfc: !0, props: t, emit: e, emitValue: o, slots: a, hasSlot: h, conditionalItemsClasses: n, inputValue: p, errorMessageId: w, shouldShowGroupError: B, containerRef: g, width: m, smallBreakpoint: C, mediumBreakpoint: k, currentBreakpoint: R, computedItemsPerRow: u, computedRows: x, itemColumnWidth: d, computedColumnWidth: _, onInput: f, isRadioVariant: b, BentoSelectionCard: ae, ControlsGroup: K, ErrorMessage: J, GridLayout: H };
   }
 });
 var re = function() {
@@ -206,15 +207,15 @@ var re = function() {
       return [e._t("dynamicContent", null, null, a)];
     }, proxy: !0 } : null], null, !0) }, "bento-selection-card", a, !1));
   }), 1) : [t("div", { key: `selection-card-group-layout-breakpoint-${o.currentBreakpoint}` }, e._l(o.computedRows, function(a, h) {
-    return t(o.GridLayout, { key: `selection-card-group-row-${h}-cols-${o.computedItemsPerRow}`, staticClass: "b-selection-card-group__items--wrap", attrs: { "column-width": o.computedColumnWidth }, scopedSlots: e._u([e._l(a, function(r, d) {
-      return { key: `col-${Number(d) + 1}`, fn: function() {
-        return [t(o.BentoSelectionCard, e._b({ key: `selection-card-${r.value}`, staticClass: "b-selection-card-group__item b-selection-card-group__item--full-height", attrs: { "model-value": o.inputValue, readonly: e.readonly || r.readonly, "has-error": o.shouldShowGroupError, disabled: e.disabled || r.disabled }, on: { "update:model-value": o.onInput }, scopedSlots: e._u([o.hasSlot("icon") && r.icon ? { key: "icon", fn: function() {
-          return [e._t("icon", null, null, r)];
-        }, proxy: !0 } : null, o.hasSlot("content") && r.content ? { key: "content", fn: function() {
-          return [e._t("content", null, null, r)];
-        }, proxy: !0 } : null, o.hasSlot("dynamicContent") && r.dynamicContent ? { key: "dynamicContent", fn: function() {
-          return [e._t("dynamicContent", null, null, r)];
-        }, proxy: !0 } : null], null, !0) }, "bento-selection-card", r, !1))];
+    return t(o.GridLayout, { key: `selection-card-group-row-${h}-cols-${o.computedItemsPerRow}`, staticClass: "b-selection-card-group__items--wrap", attrs: { "column-width": o.computedColumnWidth }, scopedSlots: e._u([e._l(a, function(n, p) {
+      return { key: `col-${Number(p) + 1}`, fn: function() {
+        return [t(o.BentoSelectionCard, e._b({ key: `selection-card-${n.value}`, staticClass: "b-selection-card-group__item b-selection-card-group__item--full-height", attrs: { "model-value": o.inputValue, readonly: e.readonly || n.readonly, "has-error": o.shouldShowGroupError, disabled: e.disabled || n.disabled }, on: { "update:model-value": o.onInput }, scopedSlots: e._u([o.hasSlot("icon") && n.icon ? { key: "icon", fn: function() {
+          return [e._t("icon", null, null, n)];
+        }, proxy: !0 } : null, o.hasSlot("content") && n.content ? { key: "content", fn: function() {
+          return [e._t("content", null, null, n)];
+        }, proxy: !0 } : null, o.hasSlot("dynamicContent") && n.dynamicContent ? { key: "dynamicContent", fn: function() {
+          return [e._t("dynamicContent", null, null, n)];
+        }, proxy: !0 } : null], null, !0) }, "bento-selection-card", n, !1))];
       }, proxy: !0 };
     })], null, !0) });
   }), 1)], o.shouldShowGroupError ? t(o.ErrorMessage, { staticClass: "b-selection-card-group__error-message", attrs: { id: o.errorMessageId, "error-message": e.errorMessage } }) : e._e()], 2);
@@ -224,7 +225,7 @@ var re = function() {
   se,
   !1,
   null,
-  "f5ed58f5"
+  "c8bc60ad"
 );
 const Re = ie.exports;
 export {
@@ -232,4 +233,4 @@ export {
   S as a,
   Re as s
 };
-//# sourceMappingURL=selection-card-group.CGUEcVTZ.js.map
+//# sourceMappingURL=selection-card-group.mAC1hrzJ.js.map

package/dist/chunks/{selection-card-group.CGUEcVTZ.js.map → selection-card-group.mAC1hrzJ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"selection-card-group.CGUEcVTZ.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 { type RadioInputValue } from '@/components/internal/radio-input';\nimport { type BentoCheckboxType } from '@/types/checkbox';\nimport { type VueNodeElement } from '@/types/elements';\n\nexport enum BentoSelectionCardState {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n}\n\nexport type BentoSelectionCardValue = string | number;\n\nexport type BentoSelectionCardModelValue = BentoCheckboxType | RadioInputValue;\n\nexport interface BentoSelectionCardItem {\n    content?: string | object;\n    description?: string;\n    disabled?: boolean;\n    dynamicContent?: string | object;\n    fullyClickable?: boolean;\n    hasError?: boolean;\n    icon?: VueNodeElement;\n    readonly?: boolean;\n    subtitle?: string;\n    title: string;\n    value: BentoSelectionCardValue;\n}\n","export const SELECTION_CARD_RADIO_INPUT_INJECTION_KEY = Symbol('selection card radio input injection key');\n","<template>\n    <div class=\"b-selection-card\" :class=\"conditionalClasses\" @click=\"handleCardClick\">\n        <div class=\"b-selection-card__container\" :class=\"containerConditionalClasses\">\n            <div class=\"b-selection-card__checkbox-container\" :class=\"checkboxContainerConditionalClasses\">\n                <div class=\"b-selection-card__checkbox-container-text\" :class=\"checkboxContainerTextConditionalClasses\">\n                    <div v-if=\"hasSlot('icon')\" class=\"b-selection-card__icon\" role=\"presentation\" aria-hidden=\"true\">\n                        <slot name=\"icon\" />\n                    </div>\n                    <label :for=\"inputId\" class=\"b-selection-card__text\" @click.stop.prevent=\"handleCardClick\">\n                        <bento-typography\n                            v-if=\"subtitle\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"caption\"\n                        >\n                            {{ subtitle }}\n                        </bento-typography>\n                        <bento-typography el=\"span\" variant=\"title\">{{ title }}</bento-typography>\n                        <bento-typography\n                            v-if=\"description\"\n                            id=\"descriptionId\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"body\"\n                        >\n                            {{ description }}\n                        </bento-typography>\n                    </label>\n                </div>\n                <radio-input\n                    v-if=\"isRadioInput\"\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedRadioInputModelValue\"\n                />\n                <checkbox-input\n                    v-else\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedCheckboxInputModelValue\"\n                />\n            </div>\n            <bento-typography\n                v-if=\"hasSlot('content')\"\n                ref=\"slotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"content\" />\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('dynamicContent') && isChecked\"\n                ref=\"dynamicSlotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"dynamicContent\" />\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { CheckboxInput } from '../internal/checkbox-input';\n    import { RadioInput, type RadioInputValue } from '../internal/radio-input';\n    import { type BentoCheckboxType, type BentoMultiCheckboxType } from '@/types/checkbox';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { generateUid } from '@/core/utils/ts';\n    import { computed, type ComputedRef, inject, type PropType, type Ref, ref, useSlots } from 'vue';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSelectionCardModelValue, BentoSelectionCardValue } from './selection-card.types';\n    import { BentoSelectionCardState } from './selection-card.types';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from './selection-card.keys';\n\n    const props = defineProps({\n        /**\n         * The description of the selection card\n         */\n        description: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Disables the selection card\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Makes the entire selection card clickable. Clicking over interactive elements inside the card with this prop enabled will not be possible.\n         */\n        fullyClickable: { type: Boolean, default: false },\n\n        /**\n         * Shows the selection card in error state\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * This property should not be used directly.\n         * It will be used by v-model directive on selection card component.\n         *\n         * When handling a single input, use a string or a number.\n         *\n         * When handling multiple inputs, use an array of keys.\n         * These keys exist as a set \"value\" prop for each input.\n         */\n        modelValue: {\n            type: [Boolean, String, Array] as PropType<BentoSelectionCardModelValue>,\n            default: null,\n        },\n\n        /**\n         * Sets the selection card to readonly\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The subtitle of the selection card\n         */\n        subtitle: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * The title of the selection card\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * Indicates the value of the input that will be returned when it's checked.\n         */\n        value: {\n            type: [String, Number] as PropType<BentoSelectionCardValue>,\n            required: true,\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const inputId = generateUid('selection-card-input-id');\n    const descriptionId = generateUid('selection-card-description');\n\n    const computedRadioInputModelValue: ComputedRef<RadioInputValue> = computed(\n        () => props.modelValue as RadioInputValue\n    );\n    const computedCheckboxInputModelValue: ComputedRef<BentoCheckboxType> = computed(\n        () => props.modelValue as BentoCheckboxType\n    );\n\n    const conditionalClasses = computed(() => ({\n        'b-selection-card--checked': isChecked.value,\n        'b-selection-card--fully-clickable': props.fullyClickable,\n    }));\n\n    const containerConditionalClasses = computed(() => ({\n        [`b-selection-card--${BentoSelectionCardState.DISABLED}`]: props.disabled,\n        [`b-selection-card--${BentoSelectionCardState.ERROR}`]: props.hasError,\n        [`b-selection-card--${BentoSelectionCardState.READONLY}`]: props.readonly,\n        'b-selection-card--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerTextConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container-text--center-aligned': isTitleOnly.value,\n    }));\n\n    const slotConditionalClasses = computed(() => ({\n        'b-selection-card__slot--with-icon': hasSlot('icon'),\n    }));\n\n    const ariaLabel = useAriaLabel({\n        ariaLabel: props.title,\n        label: props.value as string,\n    });\n\n    const isCheckboxGroup = computed(() => Array.isArray(props.modelValue));\n\n    const isChecked: ComputedRef<boolean> = computed(() => {\n        if (isRadioInput.value) {\n            return props.value === props.modelValue;\n        }\n        if (!isCheckboxGroup.value) {\n            return props.modelValue as boolean;\n        }\n\n        return (props.modelValue as BentoMultiCheckboxType).some(item => item === props.value);\n    });\n\n    const isRadioInput: Ref<boolean> = inject(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, ref(false));\n\n    const isTitleOnly = computed(() => !props.subtitle && !props.description);\n\n    const inputRef = ref<InstanceType<typeof RadioInput> | InstanceType<typeof CheckboxInput>>(null);\n    const slotRef = ref(null);\n    const dynamicSlotRef = ref(null);\n\n    // Handle click on the whole card area\n    const handleCardClick = (event: Event) => {\n        if (inputRef.value.$refs.inputRef === event.target) {\n            const newValue = toggleInput();\n            onChange(newValue);\n            return;\n        }\n\n        // Do nothing if disabled or readonly\n        if (props.disabled && props.readonly) {\n            return;\n        }\n\n        // If it's not fully clickable prevent selecting the card if the click\n        // originated in a slot\n        if (!props.fullyClickable) {\n            // Check if the click originated from the slot - in that case, do nothng\n            if (slotRef.value && slotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the dynamic slot - in that case, do nothng\n            if (dynamicSlotRef.value && dynamicSlotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the input - in that case do nothing, as the input will emit the event already\n            if (inputRef.value && inputRef.value?.$el?.contains(event.target as Node)) {\n                return;\n            }\n        }\n\n        // If the click originated outside of these two areas, emit the change event\n        const newValue = toggleInput();\n\n        onChange(newValue);\n    };\n\n    const toggleInput = (): BentoSelectionCardModelValue => {\n        const currentValue: boolean = (inputRef.value?.$refs.inputRef as HTMLInputElement).checked;\n\n        if (isCheckboxGroup.value) {\n            const newCheckedList = [...(props.modelValue as BentoMultiCheckboxType)];\n            const index = newCheckedList.indexOf(props.value);\n\n            if (index === -1) {\n                newCheckedList.push(props.value);\n            } else {\n                newCheckedList.splice(index, 1);\n            }\n            return newCheckedList;\n        }\n\n        if (isRadioInput.value) {\n            return props.value;\n        }\n        return currentValue;\n    };\n\n    const onChange = newValue => {\n        if (!props.disabled && !props.readonly) {\n            emit('update:model-value', newValue);\n            emit('input', newValue);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Selection card component. If used standalone, only the checkbox variant can be used. If the checkbox variant is needed, please use the bento-selection-card-group component.\n     *\n     * @example\n     * import { BentoSelectionCard } from '@adyen/bento-vue2';\n     * import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy';\n     *\n     * export default {\n     *     components: { BentoSelectionCard, EmoticonHappyIcon },\n     *     template: `\n     *          <bento-selection-card title=\"Card title\" :model-value.sync=\"yourModelValue\">\n     *              <template #icon>\n     *                  <emoticon-happy-icon />\n     *              </template>\n     *          </bento-selection-card>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-selection-card',\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./selection-card.scss\" />\n","<template>\n    <controls-group\n        ref=\"containerRef\"\n        :aria-describedby=\"shouldShowGroupError ? errorMessageId : null\"\n        :aria-required=\"required\"\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\n            v-if=\"!itemsPerRow || layout === 'vertical'\"\n            class=\"b-selection-card-group__items\"\n            :class=\"conditionalItemsClasses\"\n        >\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        <template v-else>\n            <div :key=\"`selection-card-group-layout-breakpoint-${currentBreakpoint}`\">\n                <grid-layout\n                    v-for=\"(row, rowIndex) in computedRows\"\n                    :key=\"`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`\"\n                    class=\"b-selection-card-group__items--wrap\"\n                    :column-width=\"computedColumnWidth\"\n                >\n                    <template v-for=\"(item, columnIndex) in row\" #[`col-${Number(columnIndex)+1}`]>\n                        <bento-selection-card\n                            :key=\"`selection-card-${item.value}`\"\n                            class=\"b-selection-card-group__item b-selection-card-group__item--full-height\"\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                    </template>\n                </grid-layout>\n            </div>\n        </template>\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, onMounted, provide, ref, useSlots, watch } from 'vue';\n    import { useElementSize } from '@vueuse/core';\n    import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n    import { type BentoSelectionCardGroupEmits, type BentoSelectionCardGroupProps } from './selection-card-group.types';\n    import BentoSelectionCard from '../../selection-card.vue';\n    import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys';\n    import { generateUid } from '@/core/utils/ts';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n  description: { default: null },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: null },\n  optional: { type: Boolean, default: false },\n  placeholder: null,\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  formId: { default: null },\n  hideLabel: { type: Boolean, default: null },\n  layout: { default: 'vertical' },\n  items: null,\n  itemsPerRow: { default: undefined },\n  modelValue: { default: null },\n  variant: { default: 'checkbox' }\n});\n\n    const emit = defineEmits([\"update:model-value\", \"input\"]);\n\n    const { emitValue } = useFormFieldEmits(emit);\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    // itemsPerRow logic\n    const containerRef = ref<HTMLElement | null>(null);\n    const { width } = useElementSize(containerRef);\n\n    const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]);\n    const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]);\n\n    const currentBreakpoint = computed(() => {\n        if (width.value < smallBreakpoint.value) {\n            return 'small';\n        }\n        if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) {\n            return 'medium';\n        }\n        return 'large';\n    });\n\n    const computedItemsPerRow = computed(() => {\n        return (props.itemsPerRow?.[currentBreakpoint?.value] as number) || props.items.length;\n    });\n\n    const computedRows = computed(() => {\n        if (!props.itemsPerRow) {\n            return [];\n        }\n        const rows = [];\n        for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) {\n            rows.push(props.items.slice(i, i + computedItemsPerRow?.value));\n        }\n        return rows;\n    });\n\n    // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic\n    const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value);\n\n    /**\n     * Filling the columnWidth array with the same parameters per item to pass\n     * to the `grid-layout` layout so the each card can have\n     * the same width according to the screen size.\n     */\n    const computedColumnWidth = computed(() => {\n        return computedItemsPerRow?.value\n            ? new Array(computedItemsPerRow?.value).fill({\n                  // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy\n                  small: itemColumnWidth.value,\n                  medium: itemColumnWidth.value,\n                  large: itemColumnWidth.value,\n              })\n            : [];\n    });\n\n    const onInput = value => {\n        inputValue.value = value;\n        emitValue(value);\n    };\n\n    const isRadioVariant = computed(() => props.variant === 'radio');\n\n    provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant);\n\n    onMounted(() => {\n        if (props.itemsPerRow) {\n            Object.values(props.itemsPerRow).forEach(el => {\n                if (el && (el < 2 || el > 6)) {\n                    throw new Error(\n                        'itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information.'\n                    );\n                }\n            });\n        }\n    });\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        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./selection-card-group.scss\" />\n"],"names":["BentoSelectionCardState","BentoSelectionCardState2","SELECTION_CARD_RADIO_INPUT_INJECTION_KEY","__default__$1","slots","useSlots","hasSlot","useHasSlot","inputId","generateUid","descriptionId","computedRadioInputModelValue","computed","props","computedCheckboxInputModelValue","conditionalClasses","isChecked","containerConditionalClasses","isTitleOnly","checkboxContainerConditionalClasses","checkboxContainerTextConditionalClasses","slotConditionalClasses","ariaLabel","useAriaLabel","isCheckboxGroup","isRadioInput","item","inject","ref","inputRef","slotRef","dynamicSlotRef","handleCardClick","event","newValue2","toggleInput","onChange","newValue","currentValue","newCheckedList","index","emit","__default__","emitValue","useFormFieldEmits","name","conditionalItemsClasses","inputValue","watch","errorMessageId","shouldShowGroupError","containerRef","width","useElementSize","smallBreakpoint","BMediaQuerySMax","mediumBreakpoint","BMediaQueryMMax","currentBreakpoint","computedItemsPerRow","computedRows","rows","i","itemColumnWidth","computedColumnWidth","onInput","value","isRadioVariant","provide","onMounted","el"],"mappings":"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"}
+{"version":3,"file":"selection-card-group.mAC1hrzJ.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 { type RadioInputValue } from '@/components/internal/radio-input';\nimport { type BentoCheckboxType } from '@/types/checkbox';\nimport { type VueNodeElement } from '@/types/elements';\n\nexport enum BentoSelectionCardState {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n}\n\nexport type BentoSelectionCardValue = string | number;\n\nexport type BentoSelectionCardModelValue = BentoCheckboxType | RadioInputValue;\n\nexport interface BentoSelectionCardItem {\n    content?: string | object;\n    description?: string;\n    disabled?: boolean;\n    dynamicContent?: string | object;\n    fullyClickable?: boolean;\n    hasError?: boolean;\n    icon?: VueNodeElement;\n    readonly?: boolean;\n    subtitle?: string;\n    title: string;\n    value: BentoSelectionCardValue;\n}\n","export const SELECTION_CARD_RADIO_INPUT_INJECTION_KEY = Symbol('selection card radio input injection key');\n","<template>\n    <div class=\"b-selection-card\" :class=\"conditionalClasses\" @click=\"handleCardClick\">\n        <div class=\"b-selection-card__container\" :class=\"containerConditionalClasses\">\n            <div class=\"b-selection-card__checkbox-container\" :class=\"checkboxContainerConditionalClasses\">\n                <div class=\"b-selection-card__checkbox-container-text\" :class=\"checkboxContainerTextConditionalClasses\">\n                    <div v-if=\"hasSlot('icon')\" class=\"b-selection-card__icon\" role=\"presentation\" aria-hidden=\"true\">\n                        <slot name=\"icon\" />\n                    </div>\n                    <label :for=\"inputId\" class=\"b-selection-card__text\" @click.stop.prevent=\"handleCardClick\">\n                        <bento-typography\n                            v-if=\"subtitle\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"caption\"\n                        >\n                            {{ subtitle }}\n                        </bento-typography>\n                        <bento-typography el=\"span\" variant=\"title\">{{ title }}</bento-typography>\n                        <bento-typography\n                            v-if=\"description\"\n                            id=\"descriptionId\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"body\"\n                        >\n                            {{ description }}\n                        </bento-typography>\n                    </label>\n                </div>\n                <radio-input\n                    v-if=\"isRadioInput\"\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedRadioInputModelValue\"\n                />\n                <checkbox-input\n                    v-else\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedCheckboxInputModelValue\"\n                />\n            </div>\n            <bento-typography\n                v-if=\"hasSlot('content')\"\n                ref=\"slotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"content\" />\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('dynamicContent') && isChecked\"\n                ref=\"dynamicSlotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"dynamicContent\" />\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { CheckboxInput } from '../internal/checkbox-input';\n    import { RadioInput, type RadioInputValue } from '../internal/radio-input';\n    import { type BentoCheckboxType, type BentoMultiCheckboxType } from '@/types/checkbox';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { generateUid } from '@/core/utils/ts';\n    import { computed, type ComputedRef, inject, type PropType, type Ref, ref, useSlots } from 'vue';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSelectionCardModelValue, BentoSelectionCardValue } from './selection-card.types';\n    import { BentoSelectionCardState } from './selection-card.types';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from './selection-card.keys';\n\n    const props = defineProps({\n        /**\n         * The description of the selection card\n         */\n        description: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Disables the selection card\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Makes the entire selection card clickable. Clicking over interactive elements inside the card with this prop enabled will not be possible.\n         */\n        fullyClickable: { type: Boolean, default: false },\n\n        /**\n         * Shows the selection card in error state\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * This property should not be used directly.\n         * It will be used by v-model directive on selection card component.\n         *\n         * When handling a single input, use a string or a number.\n         *\n         * When handling multiple inputs, use an array of keys.\n         * These keys exist as a set \"value\" prop for each input.\n         */\n        modelValue: {\n            type: [Boolean, String, Array] as PropType<BentoSelectionCardModelValue>,\n            default: null,\n        },\n\n        /**\n         * Sets the selection card to readonly\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The subtitle of the selection card\n         */\n        subtitle: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * The title of the selection card\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * Indicates the value of the input that will be returned when it's checked.\n         */\n        value: {\n            type: [String, Number] as PropType<BentoSelectionCardValue>,\n            required: true,\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const inputId = generateUid('selection-card-input-id');\n    const descriptionId = generateUid('selection-card-description');\n\n    const computedRadioInputModelValue: ComputedRef<RadioInputValue> = computed(\n        () => props.modelValue as RadioInputValue\n    );\n    const computedCheckboxInputModelValue: ComputedRef<BentoCheckboxType> = computed(\n        () => props.modelValue as BentoCheckboxType\n    );\n\n    const conditionalClasses = computed(() => ({\n        'b-selection-card--checked': isChecked.value,\n        'b-selection-card--fully-clickable': props.fullyClickable,\n    }));\n\n    const containerConditionalClasses = computed(() => ({\n        [`b-selection-card--${BentoSelectionCardState.DISABLED}`]: props.disabled,\n        [`b-selection-card--${BentoSelectionCardState.ERROR}`]: props.hasError,\n        [`b-selection-card--${BentoSelectionCardState.READONLY}`]: props.readonly,\n        'b-selection-card--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerTextConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container-text--center-aligned': isTitleOnly.value,\n    }));\n\n    const slotConditionalClasses = computed(() => ({\n        'b-selection-card__slot--with-icon': hasSlot('icon'),\n    }));\n\n    const ariaLabel = useAriaLabel({\n        ariaLabel: props.title,\n        label: props.value as string,\n    });\n\n    const isCheckboxGroup = computed(() => Array.isArray(props.modelValue));\n\n    const isChecked: ComputedRef<boolean> = computed(() => {\n        if (isRadioInput.value) {\n            return props.value === props.modelValue;\n        }\n        if (!isCheckboxGroup.value) {\n            return props.modelValue as boolean;\n        }\n\n        return (props.modelValue as BentoMultiCheckboxType).some(item => item === props.value);\n    });\n\n    const isRadioInput: Ref<boolean> = inject(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, ref(false));\n\n    const isTitleOnly = computed(() => !props.subtitle && !props.description);\n\n    const inputRef = ref<InstanceType<typeof RadioInput> | InstanceType<typeof CheckboxInput>>(null);\n    const slotRef = ref(null);\n    const dynamicSlotRef = ref(null);\n\n    // Handle click on the whole card area\n    const handleCardClick = (event: Event) => {\n        if (inputRef.value.$refs.inputRef === event.target) {\n            const newValue = toggleInput();\n            onChange(newValue);\n            return;\n        }\n\n        // Do nothing if disabled or readonly\n        if (props.disabled && props.readonly) {\n            return;\n        }\n\n        // If it's not fully clickable prevent selecting the card if the click\n        // originated in a slot\n        if (!props.fullyClickable) {\n            // Check if the click originated from the slot - in that case, do nothng\n            if (slotRef.value && slotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the dynamic slot - in that case, do nothng\n            if (dynamicSlotRef.value && dynamicSlotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the input - in that case do nothing, as the input will emit the event already\n            if (inputRef.value && inputRef.value?.$el?.contains(event.target as Node)) {\n                return;\n            }\n        }\n\n        // If the click originated outside of these two areas, emit the change event\n        const newValue = toggleInput();\n\n        onChange(newValue);\n    };\n\n    const toggleInput = (): BentoSelectionCardModelValue => {\n        const currentValue: boolean = (inputRef.value?.$refs.inputRef as HTMLInputElement).checked;\n\n        if (isCheckboxGroup.value) {\n            const newCheckedList = [...(props.modelValue as BentoMultiCheckboxType)];\n            const index = newCheckedList.indexOf(props.value);\n\n            if (index === -1) {\n                newCheckedList.push(props.value);\n            } else {\n                newCheckedList.splice(index, 1);\n            }\n            return newCheckedList;\n        }\n\n        if (isRadioInput.value) {\n            return props.value;\n        }\n        return currentValue;\n    };\n\n    const onChange = newValue => {\n        if (!props.disabled && !props.readonly) {\n            emit('update:model-value', newValue);\n            emit('input', newValue);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Selection card component. If used standalone, only the checkbox variant can be used. If the checkbox variant is needed, please use the bento-selection-card-group component.\n     *\n     * @example\n     * import { BentoSelectionCard } from '@adyen/bento-vue2';\n     * import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy';\n     *\n     * export default {\n     *     components: { BentoSelectionCard, EmoticonHappyIcon },\n     *     template: `\n     *          <bento-selection-card title=\"Card title\" :model-value.sync=\"yourModelValue\">\n     *              <template #icon>\n     *                  <emoticon-happy-icon />\n     *              </template>\n     *          </bento-selection-card>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-selection-card',\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./selection-card.scss\" />\n","<template>\n    <controls-group\n        ref=\"containerRef\"\n        :aria-describedby=\"shouldShowGroupError ? errorMessageId : null\"\n        :aria-required=\"required\"\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\n            v-if=\"!itemsPerRow || layout === 'vertical'\"\n            class=\"b-selection-card-group__items\"\n            :class=\"conditionalItemsClasses\"\n        >\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        <template v-else>\n            <div :key=\"`selection-card-group-layout-breakpoint-${currentBreakpoint}`\">\n                <grid-layout\n                    v-for=\"(row, rowIndex) in computedRows\"\n                    :key=\"`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`\"\n                    class=\"b-selection-card-group__items--wrap\"\n                    :column-width=\"computedColumnWidth\"\n                >\n                    <template v-for=\"(item, columnIndex) in row\" #[`col-${Number(columnIndex)+1}`]>\n                        <bento-selection-card\n                            :key=\"`selection-card-${item.value}`\"\n                            class=\"b-selection-card-group__item b-selection-card-group__item--full-height\"\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                    </template>\n                </grid-layout>\n            </div>\n        </template>\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, onMounted, provide, ref, useSlots, watch } from 'vue';\n    import { useElementSize } from '@vueuse/core';\n    import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n    import { type BentoSelectionCardGroupEmits, type BentoSelectionCardGroupProps } from './selection-card-group.types';\n    import BentoSelectionCard from '../../selection-card.vue';\n    import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys';\n    import { generateUid } from '@/core/utils/ts';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n  description: { default: null },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: null },\n  optional: { type: Boolean, default: false },\n  placeholder: null,\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  formId: { default: null },\n  hideLabel: { type: Boolean, default: null },\n  layout: { default: 'vertical' },\n  items: null,\n  itemsPerRow: { default: undefined },\n  modelValue: { default: null },\n  variant: { default: 'checkbox' }\n});\n\n    const emit = defineEmits([\"update:model-value\", \"input\"]);\n\n    const { emitValue } = useFormFieldEmits(emit);\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    // itemsPerRow logic\n    const containerRef = ref<HTMLElement | null>(null);\n    const { width } = useElementSize(containerRef);\n\n    const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]);\n    const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]);\n\n    const currentBreakpoint = computed(() => {\n        if (width.value < smallBreakpoint.value) {\n            return 'small';\n        }\n        if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) {\n            return 'medium';\n        }\n        return 'large';\n    });\n\n    const computedItemsPerRow = computed(() => {\n        return (props.itemsPerRow?.[currentBreakpoint?.value] as number) || props.items.length;\n    });\n\n    const computedRows = computed(() => {\n        if (!props.itemsPerRow) {\n            return [];\n        }\n        const rows = [];\n        for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) {\n            rows.push(props.items.slice(i, i + computedItemsPerRow?.value));\n        }\n        return rows;\n    });\n\n    // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic\n    const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value);\n\n    /**\n     * Filling the columnWidth array with the same parameters per item to pass\n     * to the `grid-layout` layout so the each card can have\n     * the same width according to the screen size.\n     */\n    const computedColumnWidth = computed(() => {\n        return computedItemsPerRow?.value\n            ? new Array(computedItemsPerRow?.value).fill({\n                  // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy\n                  small: itemColumnWidth.value,\n                  medium: itemColumnWidth.value,\n                  large: itemColumnWidth.value,\n              })\n            : [];\n    });\n\n    const onInput = value => {\n        inputValue.value = value;\n        emitValue(value);\n    };\n\n    const isRadioVariant = computed(() => props.variant === 'radio');\n\n    provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant);\n\n    onMounted(() => {\n        if (props.itemsPerRow) {\n            Object.values(props.itemsPerRow).forEach(value => {\n                const numericValue = Number(value);\n                if (!Number.isInteger(numericValue) || numericValue < 1 || numericValue > 6) {\n                    throw new Error(\n                        'itemsPerRow values must have a value between 1 and 6 items per row. Read the documentation for more information.'\n                    );\n                }\n            });\n        }\n    });\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        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./selection-card-group.scss\" />\n"],"names":["BentoSelectionCardState","BentoSelectionCardState2","SELECTION_CARD_RADIO_INPUT_INJECTION_KEY","__default__$1","slots","useSlots","hasSlot","useHasSlot","inputId","generateUid","descriptionId","computedRadioInputModelValue","computed","props","computedCheckboxInputModelValue","conditionalClasses","isChecked","containerConditionalClasses","isTitleOnly","checkboxContainerConditionalClasses","checkboxContainerTextConditionalClasses","slotConditionalClasses","ariaLabel","useAriaLabel","isCheckboxGroup","isRadioInput","item","inject","ref","inputRef","slotRef","dynamicSlotRef","handleCardClick","event","newValue2","toggleInput","onChange","newValue","currentValue","newCheckedList","index","emit","__default__","emitValue","useFormFieldEmits","name","conditionalItemsClasses","inputValue","watch","errorMessageId","shouldShowGroupError","containerRef","width","useElementSize","smallBreakpoint","BMediaQuerySMax","mediumBreakpoint","BMediaQueryMMax","currentBreakpoint","computedItemsPerRow","computedRows","rows","i","itemColumnWidth","computedColumnWidth","onInput","value","isRadioVariant","provide","onMounted","numericValue"],"mappings":";;;;;;;;;;;;;;;AAIO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,WAAA,YACAA,EAAA,WAAA,YACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA;ACJL,MAAAE,IAAA,uBAAA,0CAAA,GCoTHC,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBArJAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,yBAAA,GACAC,IAAAD,EAAA,4BAAA,GAEAE,IAAAC;AAAA,MAAmE,MAAAC,EAAA;AAAA,IACnD,GAEhBC,IAAAF;AAAA,MAAwE,MAAAC,EAAA;AAAA,IACxD,GAGhBE,IAAAH,EAAA,OAAA;AAAA,MAA2C,6BAAAI,EAAA;AAAA,MACA,qCAAAH,EAAA;AAAA,IACI,EAAA,GAG/CI,IAAAL,EAAA,OAAA;AAAA,MAAoD,CAAA,qBAAAZ,EAAA,QAAA,EAAA,GAAAa,EAAA;AAAA,MACiB,CAAA,qBAAAb,EAAA,KAAA,EAAA,GAAAa,EAAA;AAAA,MACH,CAAA,qBAAAb,EAAA,QAAA,EAAA,GAAAa,EAAA;AAAA,MACG,oCAAAK,EAAA;AAAA,IACjB,EAAA,GAGpDC,IAAAP,EAAA,OAAA;AAAA,MAA4D,wDAAAM,EAAA;AAAA,IACY,EAAA,GAGxEE,IAAAR,EAAA,OAAA;AAAA,MAAgE,6DAAAM,EAAA;AAAA,IACa,EAAA,GAG7EG,IAAAT,EAAA,OAAA;AAAA,MAA+C,qCAAAN,EAAA,MAAA;AAAA,IACQ,EAAA,GAGvDgB,IAAAC,EAAA;AAAA,MAA+B,WAAAV,EAAA;AAAA,MACV,OAAAA,EAAA;AAAA,IACJ,CAAA,GAGjBW,IAAAZ,EAAA,MAAA,MAAA,QAAAC,EAAA,UAAA,CAAA,GAEAG,IAAAJ,EAAA,MACIa,EAAA,QACIZ,EAAA,UAAAA,EAAA,aAEJW,EAAA,QAIAX,EAAA,WAAA,KAAA,CAAAa,MAAAA,MAAAb,EAAA,KAAA,IAHIA,EAAA,UAGiF,GAGzFY,IAAAE,EAAAzB,GAAA0B,EAAA,EAAA,CAAA,GAEAV,IAAAN,EAAA,MAAA,CAAAC,EAAA,YAAA,CAAAA,EAAA,WAAA,GAEAgB,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GAGAI,IAAA,CAAAC,MAAA;AACI,UAAAJ,EAAA,MAAA,MAAA,aAAAI,EAAA,QAAA;AACI,cAAAC,IAAAC,EAAA;AACA,QAAAC,EAAAF,CAAA;AACA;AAAA,MAAA;AAUJ,UANArB,EAAA,YAAAA,EAAA,YAMA,CAAAA,EAAA,mBAEIiB,EAAA,SAAAA,EAAA,OAAA,KAAA,SAAAG,EAAA,MAAA,KAIAF,EAAA,SAAAA,EAAA,OAAA,KAAA,SAAAE,EAAA,MAAA,KAIAJ,EAAA,SAAAA,EAAA,OAAA,KAAA,SAAAI,EAAA,MAAA;AACI;AAKR,YAAAI,IAAAF,EAAA;AAEA,MAAAC,EAAAC,CAAA;AAAA,IAAiB,GAGrBF,IAAA,MAAA;AACI,YAAAG,KAAAT,EAAA,OAAA,MAAA,UAAA;AAEA,UAAAL,EAAA,OAAA;AACI,cAAAe,IAAA,CAAA,GAAA1B,EAAA,UAAA,GACA2B,IAAAD,EAAA,QAAA1B,EAAA,KAAA;AAEA,eAAA2B,MAAA,KACID,EAAA,KAAA1B,EAAA,KAAA,IAEA0B,EAAA,OAAAC,GAAA,CAAA,GAEJD;AAAA,MAAO;AAGX,aAAAd,EAAA,QACIZ,EAAA,QAEJyB;AAAA,IAAO,GAGXF,IAAA,CAAAC,MAAA;AACI,MAAA,CAAAxB,EAAA,YAAA,CAAAA,EAAA,aACI4B,EAAA,sBAAAJ,CAAA,GACAI,EAAA,SAAAJ,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;uBClCJK,KAAA;AAAA,EAAe,OAAA,EAAA,MAAA,aAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;iBAxIA,EAAA,WAAAC,EAAA,IAAAC,EAAAH,CAAA,GAEArC,IAAAC,EAAA,GAIAC,IAAA,CAAAuC,MAAA,CAAA,CAAAzC,EAAAyC,CAAA,GAEAC,IAAAlC,EAAA,OAAA;AAAA,MAAgD,6CAAAC,EAAA,WAAA;AAAA,IACkB,EAAA,GAGlEkC,IAAAnB,EAAAf,EAAA,UAAA;AACA,IAAAmC;AAAA,MAAA,MAAAnC,EAAA;AAAA,MACgB,MAAA;AAER,QAAAkC,EAAA,QAAAlC,EAAA;AAAA,MAAyB;AAAA,IAC7B;AAIJ,UAAAoC,IAAAxC,EAAA,OAAA,GACAyC,IAAAtC,EAAA,MAAA,CAAAC,EAAA,YAAA,CAAAA,EAAA,YAAA,CAAA,CAAAA,EAAA,YAAA,GAGAsC,IAAAvB,EAAA,IAAA,GACA,EAAA,OAAAwB,EAAA,IAAAC,EAAAF,CAAA,GAEAG,IAAA1C,EAAA,MAAA2C,EAAA,MAAA,IAAA,EAAA,CAAA,CAAA,GACAC,IAAA5C,EAAA,MAAA6C,EAAA,MAAA,IAAA,EAAA,CAAA,CAAA,GAEAC,IAAA9C,EAAA,MACIwC,EAAA,QAAAE,EAAA,QACI,UAEJF,EAAA,SAAAE,EAAA,SAAAF,EAAA,QAAAI,EAAA,QACI,WAEJ,OAAO,GAGXG,IAAA/C,EAAA,MACIC,EAAA,cAAA6C,GAAA,KAAA,KAAA7C,EAAA,MAAA,MAAgF,GAGpF+C,IAAAhD,EAAA,MAAA;AACI,UAAA,CAAAC,EAAA;AACI,eAAA,CAAA;AAEJ,YAAAgD,IAAA,CAAA;AACA,eAAAC,IAAA,GAAAA,IAAAjD,EAAA,MAAA,QAAAiD,KAAAH,GAAA;AACI,QAAAE,EAAA,KAAAhD,EAAA,MAAA,MAAAiD,GAAAA,IAAAH,GAAA,KAAA,CAAA;AAEJ,aAAAE;AAAA,IAAO,CAAA,GAIXE,IAAAnD,EAAA,MAAA,KAAA+C,GAAA,KAAA,GAOAK,IAAApD,EAAA,MACI+C,GAAA,QAAA,IAAA,MAAAA,GAAA,KAAA,EAAA,KAAA;AAAA;AAAA,MACiD,OAAAI,EAAA;AAAA,MAEhB,QAAAA,EAAA;AAAA,MACC,OAAAA,EAAA;AAAA,IACD,CAAA,IAAA,CAAA,CAE1B,GAGXE,IAAA,CAAAC,MAAA;AACI,MAAAnB,EAAA,QAAAmB,GACAvB,EAAAuB,CAAA;AAAA,IAAe,GAGnBC,IAAAvD,EAAA,MAAAC,EAAA,YAAA,OAAA;AAEA,WAAAuD,EAAAlE,GAAAiE,CAAA,GAEAE,EAAA,MAAA;AACI,MAAAxD,EAAA,eACI,OAAA,OAAAA,EAAA,WAAA,EAAA,QAAA,CAAAqD,MAAA;AACI,cAAAI,IAAA,OAAAJ,CAAA;AACA,YAAA,CAAA,OAAA,UAAAI,CAAA,KAAAA,IAAA,KAAAA,IAAA;AACI,gBAAA,IAAA;AAAA,YAAU;AAAA,UACN;AAAA,MAER,CAAA;AAAA,IAER,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{textarea.ec4ubFuL.js → textarea.DmEgZbGe.js}

@@ -55,7 +55,7 @@ const Ee = {
     const e = r, o = se(), { height: f } = P(e), H = fe("textarea"), l = u(null), _ = u(null), n = u(e.modelValue || e.value), d = 44, x = u(e.height || `${d}px`), C = u(0), g = u("100%"), h = u(!1);
     let L = null, E = null;
     const { t: I, n: T } = be(), { isReadOnly: b } = ve(ne(e, "readonly")), { emitValue: B } = ye(a), W = i(() => `${T(n?.value?.length ?? 0)} / ${T(e.characterLimit)}`), m = i(() => !f.value), A = i(
-      () => e.characterLimit && n.value.length > e.characterLimit
+      () => e.characterLimit && (n.value?.length ?? 0) > e.characterLimit
     ), y = () => {
       if (l.value) {
         const s = Math.max(
@@ -167,10 +167,10 @@ var Ae = function() {
   Re,
   !1,
   null,
-  "a10ed22b"
+  "7585ceb1"
 );
 const Ke = Me.exports;
 export {
   Ke as B
 };
-//# sourceMappingURL=textarea.ec4ubFuL.js.map
+//# sourceMappingURL=textarea.DmEgZbGe.js.map

package/dist/chunks/textarea.DmEgZbGe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.DmEgZbGe.js","sources":["../../src/components/textarea/textarea.types.ts","../../src/components/textarea/textarea.vue"],"sourcesContent":["import type { FormField } from '../../types/form-field';\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoTextareaResizeOption {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n    BOTH = 'both',\n    NONE = 'none',\n}\n\nexport enum BentoTextareaStateClass {\n    CLEARABLE = 'clearable',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n}\n\nexport enum BentoTextareaEvent {\n    BLUR = 'blur',\n    CHANGE = 'change',\n    CLEAR = 'clear',\n    ESCAPE_PRESSED = 'escape-pressed',\n    FOCUS = 'focus',\n    INPUT = 'input',\n    UPDATE_MODEL_VALUE = 'update:model-value',\n    KEYDOWN = 'keydown',\n    KEYUP = 'keyup',\n}\n\nexport interface BentoTextareaProps extends FormField {\n    /**\n     * Text that labels the input element\n     * @default undefined\n     */\n    ariaLabel?: string;\n\n    /**\n     * Text that shows number of characters in textarea\n     * @default undefined\n     */\n    characterLimit?: number;\n\n    /**\n     * If set to true, shows a button to clear all the text\n     * @default false\n     */\n    clearable?: boolean;\n\n    /**\n     * Sets the height of the textarea, e.g 200px OR 20vh\n     * @default null\n     */\n    height?: string | null;\n\n    /**\n     * Indicates the possibility of resize the textarea.\n     * Accepts the Enum or the string literal version.\n     * @default BentoTextareaResizeOption.BOTH\n     */\n    resizable?: BentoTextareaResizeOption | `${BentoTextareaResizeOption}`;\n\n    /**\n     * Text displayed as the value of the textarea\n     * @deprecated Since v2.0.0. Use `v-model` or `model-value` instead.\n     */\n    value?: string;\n\n    /**\n     * Text displayed as the value of the textarea\n     */\n    modelValue?: string;\n}\n","<template>\n    <div ref=\"textareaComponent\" class=\"b-textarea\" :class=\"conditionalClasses\">\n        <div :style=\"{ width: textareaWrapperWidth }\">\n            <div class=\"b-textarea__label-box\" :class=\"conditionalClassesLabelBox\">\n                <field-label\n                    v-if=\"label\"\n                    :for=\"textareaId\"\n                    :label=\"label\"\n                    :tooltip-text=\"tooltipText\"\n                    :optional=\"optional\"\n                    :required=\"required\"\n                />\n                <bento-typography\n                    v-if=\"characterLimit\"\n                    el=\"span\"\n                    class=\"b-textarea__label-item\"\n                    :class=\"conditionalClassesLabelItem\"\n                >\n                    {{ counter }}\n                </bento-typography>\n            </div>\n            <bento-typography el=\"div\" class=\"b-textarea__input-box\" :aria-disabled=\"disabled\">\n                <textarea\n                    :id=\"textareaId\"\n                    ref=\"textareaElement\"\n                    :value=\"textareaValue\"\n                    class=\"b-textarea__input\"\n                    :class=\"conditionalClassesInput\"\n                    :aria-label=\"computedAriaLabel\"\n                    :aria-invalid=\"invalidInput\"\n                    :readonly=\"isReadOnly\"\n                    :required=\"required\"\n                    :aria-required=\"required\"\n                    :disabled=\"disabled\"\n                    :placeholder=\"placeholder\"\n                    :style=\"{ resize: resizable, height: textareaHeight }\"\n                    @blur=\"onBlur\"\n                    @change=\"onChange\"\n                    @focus=\"onFocus\"\n                    @input=\"onInput\"\n                    @keydown.esc=\"onPressEscape\"\n                    @keydown=\"onKeyDown\"\n                    @keyup=\"onKeyUp\"\n                    @mousedown=\"onMouseDown\"\n                    @mouseup=\"onMouseUp\"\n                >\n                </textarea>\n\n                <div v-if=\"showClearButton\" class=\"b-textarea__clear-button\">\n                    <bento-button\n                        variant=\"tertiary\"\n                        :disabled=\"disabled\"\n                        @click=\"onClear\"\n                        @keypress.enter=\"onClear\"\n                        @keyup.space=\"onClear\"\n                    >\n                        <template #iconLeft>\n                            <cross-circle-fill-small-icon :svg-title=\"t('clearText')\" />\n                        </template>\n                    </bento-button>\n                </div>\n            </bento-typography>\n\n            <error-message v-if=\"isOverCharacterLimit\" :error-message=\"counterErrorText\" />\n\n            <error-message v-if=\"errorMessage\" :error-message=\"errorMessage\" />\n\n            <bento-typography v-if=\"description\" class=\"b-textarea__description\" el=\"span\">\n                {{ description }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, onMounted, onUnmounted, ref, toRef, toRefs, useAttrs, watch } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n    import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small';\n\n    // Utils\n    import { generateUid } from '@/core/utils/ts';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    // Composables\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    // Constants\n    import { BBorderWidthAttention } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    // Types\n    import { BentoTextareaEvent, type BentoTextareaProps, BentoTextareaStateClass } from './textarea.types';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const attrs = useAttrs();\n\n    const props = defineProps({\n  description: { default: '' },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: '' },\n  label: { default: '' },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  ariaLabel: { default: undefined },\n  characterLimit: { default: undefined },\n  clearable: { type: Boolean, default: false },\n  height: { default: null },\n  resizable: { default: 'both' },\n  value: { default: '' },\n  modelValue: { default: '' }\n});\n\n    const emit = defineEmits([]);\n\n    const { height } = toRefs(props);\n\n    const textareaId = generateUid('textarea');\n    const textareaElement = ref<HTMLTextAreaElement>(null);\n    const textareaComponent = ref<HTMLDivElement>(null);\n    const textareaValue = ref(props.modelValue || props.value);\n    const defaultTextareaHeight = 44;\n    const textareaHeight = ref(props.height || `${defaultTextareaHeight}px`);\n    const userSetHeight = ref<number>(0);\n    const textareaWrapperWidth = ref('100%'); // The width set to the wrapper of the label, textarea and description\n    const isUserResizing = ref(false);\n    let textareaElementObserver: ResizeObserver | null = null;\n    let textareaComponentObserver: ResizeObserver | null = null;\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n    const { emitValue } = useFormFieldEmits<string>(emit);\n\n    const counter = computed(() => `${n(textareaValue?.value?.length ?? 0)} / ${n(props.characterLimit)}`);\n    const isDynamicHeight = computed(() => !height.value);\n    const isOverCharacterLimit = computed(\n        () => props.characterLimit && (textareaValue.value?.length ?? 0) > props.characterLimit\n    );\n\n    /**\n     * Calculates and sets the height of the textarea.\n     * The height is determined by the maximum of the following values:\n     *\n     * 1. The content's scroll height (with a minimum of `defaultTextareaHeight`) + the border width.\n     * 2. The height set by the user manually resizing the textarea (`userSetHeight`).\n     * 3. The default minimum height (`defaultTextareaHeight`).\n     *\n     * This ensures the textarea grows with content, shrinks when content is removed,\n     * but never goes below the manually set height or the default height.\n     */\n    const calculateHeight = () => {\n        if (textareaElement.value) {\n            const newHeight = Math.max(\n                textareaElement.value.scrollHeight <= defaultTextareaHeight\n                    ? defaultTextareaHeight\n                    : textareaElement.value.scrollHeight + TEXTAREA_BORDER_WIDTH * 2,\n                userSetHeight.value,\n                defaultTextareaHeight\n            );\n            textareaHeight.value = `${newHeight}px`;\n        }\n    };\n\n    watch(height, () => {\n        if (isDynamicHeight.value) {\n            calculateHeight();\n        } else {\n            textareaHeight.value = height.value;\n        }\n    });\n\n    watch(\n        () => [props.value, props.modelValue],\n        () => {\n            textareaValue.value = props.modelValue || props.value;\n        },\n        { immediate: true }\n    );\n\n    watch(\n        () => textareaValue.value,\n        async () => {\n            if (isDynamicHeight.value) {\n                // Hack to make the textarea calculate its height properly\n                // Set the textarea back to the original value before calculating the height\n                textareaHeight.value = `${defaultTextareaHeight}px`;\n                if (!textareaValue.value) {\n                    return;\n                }\n\n                await nextTick();\n                calculateHeight();\n            }\n        },\n        { immediate: true }\n    );\n\n    const invalidInput = computed(() => !!props.errorMessage || isOverCharacterLimit.value);\n\n    const conditionalClasses = computed(() => ({\n        [`b-textarea--${BentoTextareaStateClass.DISABLED}`]: props.disabled,\n    }));\n\n    const conditionalClassesInput = computed(() => ({\n        [`b-textarea__input--${BentoTextareaStateClass.CLEARABLE}`]: props.clearable,\n        [`b-textarea__input--${BentoTextareaStateClass.READONLY}`]: isReadOnly.value,\n        [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value,\n        [`b-textarea__input--dynamic-height`]: isDynamicHeight.value,\n    }));\n\n    const conditionalClassesLabelBox = computed(() => ({\n        [`b-textarea__label-box--no-label`]: !props.label,\n    }));\n\n    const conditionalClassesLabelItem = computed(() => ({\n        [`b-textarea__label-item--${BentoTextareaStateClass.ERROR}`]: isOverCharacterLimit.value,\n    }));\n\n    const counterErrorText = computed(() => t('yourTextCanBenAtMost', { characterLimit: props.characterLimit }));\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel, label } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: label,\n    });\n\n    const showClearButton = computed(\n        () => props.clearable && textareaValue.value && !props.disabled && !isReadOnly.value\n    );\n\n    const onClear = () => {\n        textareaValue.value = '';\n        emit(BentoTextareaEvent.CLEAR);\n        emitValue('');\n    };\n\n    const onInput = (event: InputEvent) => {\n        event.stopImmediatePropagation();\n\n        if (!props.disabled && !isReadOnly.value) {\n            textareaValue.value = (event.target as HTMLInputElement).value;\n            /**\n             * Triggered when input value is changed\n             *\n             * @event input\n             * @property {String} inputValue - the updated textarea value\n             */\n            emitValue(textareaValue.value);\n        }\n    };\n\n    const onBlur = () => {\n        textareaElement.value.scrollTop = 0;\n        emit(BentoTextareaEvent.BLUR);\n    };\n\n    const onFocus = () => {\n        textareaElement.value.focus();\n        emit(BentoTextareaEvent.FOCUS);\n    };\n\n    const onChange = () => {\n        emit(BentoTextareaEvent.CHANGE);\n    };\n\n    const onPressEscape = () => {\n        emit(BentoTextareaEvent.ESCAPE_PRESSED);\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        emit(BentoTextareaEvent.KEYDOWN, event);\n    };\n\n    const onKeyUp = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        emit(BentoTextareaEvent.KEYUP, event);\n    };\n\n    const onMouseDown = () => {\n        isUserResizing.value = true;\n    };\n\n    const onMouseUp = () => {\n        isUserResizing.value = false;\n    };\n\n    /**\n     * Updates the textarea width depending if the container or the user update its size.\n     * @param isTextareaElement - sets to true if the element being observed is the textarea HTML element.\n     */\n    const resizeTextareaWrapper = (isTextareaElement = false) => {\n        // Width assigned by the browser whenever the textarea is manually resized. String of the format `<value>px`.\n        const textareaStyleWidth = textareaElement.value.style.width;\n\n        // Make sure the tracked textareaHeight is always in sync with the height size in case we manually resize the textarea\n        if (textareaElement.value.style.height) {\n            if (isUserResizing.value) {\n                userSetHeight.value = parseInt(textareaElement.value.style.height, 10);\n            }\n            textareaHeight.value = textareaElement.value.style.height;\n        }\n\n        // If the textarea element observer is being triggered, but there's no textareaStyleWidth, we want to ignore it, as no manual resize as happened yet\n        // The component wrapper will handle the resizing logic instead\n        if (isTextareaElement && !textareaStyleWidth) {\n            return;\n        }\n\n        // Width of the whole bento-textarea component\n        const textareaComponentWidth = textareaComponent?.value?.offsetWidth;\n\n        // If there is no textareaStyleWidth or the textareaStyleWidth is larger than the component container, the wrapper should be 100% of the container\n        if (!textareaStyleWidth || parseInt(textareaStyleWidth, 10) > textareaComponentWidth) {\n            textareaWrapperWidth.value = '100%';\n        } else {\n            // Else the wrapper should always be as wide as the textarea element itself\n            textareaWrapperWidth.value = textareaStyleWidth;\n        }\n    };\n\n    const focus = () => {\n        textareaElement.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n\n    onMounted(() => {\n        textareaElementObserver = observeSizeOfElement(textareaElement.value, () => {\n            resizeTextareaWrapper(true);\n        });\n\n        textareaComponentObserver = observeSizeOfElement(textareaComponent.value, () => {\n            resizeTextareaWrapper();\n        });\n\n        if (isDynamicHeight.value) {\n            calculateHeight();\n        }\n\n        if (props.value) {\n            deprecate(\n                'BentoTextarea \"value\" property',\n                `The use of \"value\" prop in \"BentoTextarea\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n                '2.0.0'\n            );\n        }\n    });\n\n    onUnmounted(() => {\n        textareaElementObserver?.disconnect();\n        textareaComponentObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    const TEXTAREA_BORDER_WIDTH = parseFloat(BBorderWidthAttention);\n\n    export default {\n        i18n: { messages },\n        name: 'bento-textarea',\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./textarea.scss\" />\n"],"names":["BentoTextareaStateClass","BentoTextareaStateClass2","BentoTextareaEvent","BentoTextareaEvent2","TEXTAREA_BORDER_WIDTH","BBorderWidthAttention","__default__","messages","attrs","useAttrs","height","toRefs","props","textareaId","generateUid","textareaElement","ref","textareaComponent","textareaValue","defaultTextareaHeight","textareaHeight","userSetHeight","textareaWrapperWidth","isUserResizing","textareaElementObserver","textareaComponentObserver","t","n","useI18n","isReadOnly","useFormLayoutFieldLoading","toRef","emitValue","useFormFieldEmits","emit","counter","computed","isDynamicHeight","isOverCharacterLimit","calculateHeight","newHeight","watch","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","ariaLabelAttribute","ariaLabel","label","computedAriaLabel","useAriaLabel","showClearButton","onClear","onInput","event","onBlur","onFocus","onChange","onPressEscape","onKeyDown","onKeyUp","onMouseDown","onMouseUp","resizeTextareaWrapper","isTextareaElement","textareaStyleWidth","textareaComponentWidth","focus","expose","onMounted","observeSizeOfElement","deprecate","onUnmounted"],"mappings":"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"}

package/dist/chunks/{timeline-item.BoaJTmzW.js → timeline-item.BLHykoIV.js}

@@ -1,6 +1,6 @@
 import { defineComponent as S, computed as o, ref as N, toRefs as W, watch as X, provide as A, nextTick as Z, useSlots as Q, inject as O, onUnmounted as ee } from "vue";
 import { B as P } from "./button.C4kKejsg.js";
-import { B as te } from "./textarea.ec4ubFuL.js";
+import { B as te } from "./textarea.DmEgZbGe.js";
 import { u as H } from "./index.CPOlyau9.js";
 import { B as se } from "./button-actions.DDLh7iWK.js";
 import { n as R } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -249,4 +249,4 @@ export {
   we as d,
   tt as t
 };
-//# sourceMappingURL=timeline-item.BoaJTmzW.js.map
+//# sourceMappingURL=timeline-item.BLHykoIV.js.map