@adyen/bento-vue2 1.108.2 → 2.0.0-rc.0

package/dist/chunks/progress-bar.DfL-XZEb.js

@@ -0,0 +1,101 @@
+import { defineComponent as w, useSlots as S, computed as t, ref as _, watch as x } from "vue";
+import { B as T } from "./typography.D1OZJbEa.js";
+import { u as E } from "./use-has-slot.C9lQZ6nz.js";
+import { g as p } from "./generate-uid.DBWe4g6T.js";
+import { u as F } from "./index.CPOlyau9.js";
+import { F as P } from "./field-label.DQRpoDXR.js";
+import { E as V } from "./error-message.BEHBfjmn.js";
+import { n as $ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/progress-bar.css";
+const z = {
+  "de-DE": { progressComplete: "Vorgang abgeschlossen" },
+  "en-GB": { progressComplete: "Progress complete" },
+  "en-US": { progressComplete: "Progress complete" },
+  "es-419": { progressComplete: "Progreso completado" },
+  "es-ES": { progressComplete: "Progreso completado" },
+  "fr-FR": { progressComplete: "Progression terminée" },
+  "it-IT": { progressComplete: "Avanzamento completato" },
+  "ja-JP": { progressComplete: "完了しました" },
+  "pt-BR": { progressComplete: "Progresso concluído" },
+  "zh-CN": { progressComplete: "进度已完成" }
+}, D = {
+  name: "bento-progress-bar",
+  i18n: { messages: z }
+}, R = /* @__PURE__ */ w({
+  ...D,
+  props: {
+    staticAnimation: { type: Boolean, default: !0 },
+    completionAnnouncement: { default: void 0 },
+    description: { default: void 0 },
+    direction: { default: "default" },
+    errorMessage: { default: void 0 },
+    height: { default: "default" },
+    shimmer: { type: Boolean, default: !0 },
+    stopIndicator: { type: Boolean, default: !0 },
+    successFlash: { type: Boolean, default: !0 },
+    valueVisible: { type: Boolean, default: !0 },
+    label: { default: void 0 },
+    tooltipText: { default: void 0 },
+    type: { default: "default" },
+    value: { default: void 0 },
+    variant: { default: "determinate" }
+  },
+  setup(u) {
+    const e = u, { t: s } = F(), r = S(), c = E(r), m = p("progress-bar-label"), v = p("progress-bar-description"), b = p("progress-bar-error"), i = t(() => e.value === void 0 ? 0 : Math.min(Math.max(e.value, 0), 100)), f = t(() => `${i.value}%`), l = _(!1), g = _("");
+    x(i, (n, A) => {
+      e.variant !== "determinate" || A >= 100 || n < 100 || (e.successFlash && (l.value = !0), g.value = e.completionAnnouncement ?? s("progressComplete"));
+    });
+    const a = t(() => e.valueVisible && e.value === void 0 && !c("value") ? "indeterminate" : e.variant), o = t(() => a.value === "indeterminate"), h = t(
+      () => e.valueVisible && !o.value && (c("value") || e.value !== void 0)
+    ), d = t(() => !!e.errorMessage), C = t(() => o.value ? void 0 : { width: e.direction === "default" ? `${i.value}%` : `${100 - i.value}%` }), y = t(() => {
+      const n = [e.description ? v : null, e.errorMessage ? b : null].filter(Boolean).join(" ") || void 0;
+      return {
+        "aria-labelledby": e.label ? m : void 0,
+        "aria-describedby": n,
+        "aria-busy": o.value || void 0,
+        "aria-valuemin": o.value ? void 0 : 0,
+        "aria-valuemax": o.value ? void 0 : 100,
+        "aria-valuenow": o.value ? void 0 : i.value
+      };
+    }), k = t(() => ({
+      [`b-progress-bar--${e.height}`]: e.height !== "default",
+      [`b-progress-bar--${e.type}`]: e.type !== "default",
+      "b-progress-bar--error": d.value
+    })), I = t(() => ({
+      "b-progress-bar__track--reverse": e.direction === "reverse",
+      "b-progress-bar__track--with-stop-indicator": e.stopIndicator && a.value === "determinate",
+      "b-progress-bar__track--with-success-flash": l.value && a.value === "determinate"
+    })), B = t(() => ({
+      "b-progress-bar__track-indicator--indeterminate": o.value,
+      "b-progress-bar__track-indicator--static": a.value === "static",
+      "b-progress-bar__track-indicator--static-animated": e.staticAnimation && a.value === "static",
+      "b-progress-bar__track-indicator--with-shimmer": e.shimmer && !e.errorMessage && a.value === "determinate",
+      "b-progress-bar__track-indicator--with-success-flash": l.value && a.value === "determinate",
+      [`b-progress-bar__track-indicator--${e.type}`]: e.type !== "default",
+      "b-progress-bar__track-indicator--error": d.value
+    })), M = t(() => ({
+      "b-progress-bar__description--error": !!e.errorMessage
+    }));
+    return { __sfc: !0, t: s, props: e, slots: r, hasSlot: c, labelId: m, descriptionId: v, errorId: b, clampedValue: i, valueText: f, isSuccessFlashing: l, completionMessage: g, effectiveVariant: a, isIndeterminate: o, shouldShowValue: h, shouldShowError: d, indicatorStyle: C, trackA11yAttrs: y, conditionalClasses: k, conditionalTrackClasses: I, conditionalIndicatorClasses: B, conditionalDescriptionClasses: M, onIndicatorAnimationEnd: (n) => {
+      n.animationName?.includes("success-flash") && (l.value = !1);
+    }, BentoTypography: T, ErrorMessage: V, FieldLabel: P };
+  }
+});
+var j = function() {
+  var e = this, s = e._self._c, r = e._self._setupProxy;
+  return s("div", { staticClass: "b-progress-bar", class: r.conditionalClasses }, [s("div", { staticClass: "b-progress-bar__header" }, [e.label ? s(r.FieldLabel, { staticClass: "b-progress-bar__label", attrs: { id: r.labelId, label: e.label, "tooltip-text": e.tooltipText } }) : e._e(), r.shouldShowValue ? s("div", { staticClass: "b-progress-bar__value" }, [e._t("value", function() {
+    return [s(r.BentoTypography, { attrs: { el: "span", stronger: "" } }, [e._v(e._s(r.valueText))])];
+  })], 2) : e._e()], 1), s("div", e._b({ staticClass: "b-progress-bar__track", class: r.conditionalTrackClasses, attrs: { role: "progressbar" } }, "div", r.trackA11yAttrs, !1), [s("div", { staticClass: "b-progress-bar__track-indicator", class: r.conditionalIndicatorClasses, style: r.indicatorStyle, on: { animationend: r.onIndicatorAnimationEnd } })]), e.errorMessage ? s(r.ErrorMessage, { staticClass: "b-progress-bar__error-message", attrs: { id: r.errorId, "error-message": e.errorMessage } }) : e._e(), e.description ? s(r.BentoTypography, { staticClass: "b-progress-bar__description", class: r.conditionalDescriptionClasses, attrs: { id: r.descriptionId, el: "span" } }, [e._v(" " + e._s(e.description) + " ")]) : e._e(), s("div", { staticClass: "b-progress-bar__announcement", attrs: { role: "status", "aria-live": "polite" } }, [e._v(" " + e._s(r.completionMessage) + " ")])], 1);
+}, L = [], N = /* @__PURE__ */ $(
+  R,
+  j,
+  L,
+  !1,
+  null,
+  "1b1e58e0"
+);
+const X = N.exports;
+export {
+  X as p
+};
+//# sourceMappingURL=progress-bar.DfL-XZEb.js.map

package/dist/chunks/{progress-bar.lpxCsonl.js.map → progress-bar.DfL-XZEb.js.map}

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.lpxCsonl.js","sources":["../../src/components/progress-bar/progress-bar.vue"],"sourcesContent":["<template>\n    <div class=\"b-progress-bar\" :class=\"conditionalClasses\">\n        <div class=\"b-progress-bar__header\">\n            <field-label\n                v-if=\"label\"\n                :id=\"labelId\"\n                class=\"b-progress-bar__label\"\n                :label=\"label\"\n                :tooltip-text=\"tooltipText\"\n            />\n\n            <div v-if=\"shouldShowValue\" class=\"b-progress-bar__value\">\n                <slot name=\"value\">\n                    <bento-typography el=\"span\" stronger>{{ valueText }}</bento-typography>\n                </slot>\n            </div>\n        </div>\n\n        <div class=\"b-progress-bar__track\" :class=\"conditionalTrackClasses\" role=\"progressbar\" v-bind=\"trackA11yAttrs\">\n            <div\n                class=\"b-progress-bar__track-indicator\"\n                :class=\"conditionalIndicatorClasses\"\n                :style=\"indicatorStyle\"\n                @animationend=\"onIndicatorAnimationEnd\"\n            ></div>\n        </div>\n\n        <error-message\n            v-if=\"!!errorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-progress-bar__error-message\"\n        />\n\n        <bento-typography\n            v-if=\"description\"\n            :id=\"descriptionId\"\n            el=\"span\"\n            class=\"b-progress-bar__description\"\n            :class=\"conditionalDescriptionClasses\"\n        >\n            {{ description }}\n        </bento-typography>\n\n        <div class=\"b-progress-bar__announcement\" role=\"status\" aria-live=\"polite\">\n            {{ completionMessage }}\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { type BentoProgressBarProps } from './progress-bar.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  staticAnimation: { type: Boolean, default: true },\n  completionAnnouncement: { default: undefined },\n  description: { default: undefined },\n  direction: { default: 'default' },\n  errorMessage: { default: undefined },\n  height: { default: 'default' },\n  shimmer: { type: Boolean, default: true },\n  stopIndicator: { type: Boolean, default: true },\n  successFlash: { type: Boolean, default: true },\n  valueVisible: { type: Boolean, default: true },\n  label: { default: undefined },\n  tooltipText: { default: undefined },\n  type: { default: 'default' },\n  value: { default: undefined },\n  variant: { default: 'determinate' }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const labelId = generateUid('progress-bar-label');\n    const descriptionId = generateUid('progress-bar-description');\n    const errorId = generateUid('progress-bar-error');\n\n    // Value\n    const clampedValue = computed(() => {\n        if (props.value === undefined) {\n            return 0;\n        }\n        return Math.min(Math.max(props.value, 0), 100);\n    });\n\n    const valueText = computed(() => `${clampedValue.value}%`);\n\n    // Success flash, triggered once when the value crosses into 100\n    const isSuccessFlashing = ref(false);\n\n    // Screen readers do not reliably announce progressbar value changes, so completion is announced\n    // through a polite live region when the value crosses into 100.\n    const completionMessage = ref('');\n\n    watch(clampedValue, (value, previousValue) => {\n        if (props.variant !== 'determinate' || previousValue >= 100 || value < 100) {\n            return;\n        }\n\n        if (props.successFlash) {\n            isSuccessFlashing.value = true;\n        }\n\n        completionMessage.value = props.completionAnnouncement ?? t('progressComplete');\n    });\n\n    // Variant state\n    const effectiveVariant = computed(() => {\n        if (props.valueVisible && props.value === undefined && !hasSlot('value')) {\n            return 'indeterminate';\n        }\n\n        return props.variant;\n    });\n\n    const isIndeterminate = computed(() => effectiveVariant.value === 'indeterminate');\n\n    // Display flags\n    const shouldShowValue = computed(\n        () => props.valueVisible && !isIndeterminate.value && (hasSlot('value') || props.value !== undefined)\n    );\n\n    const shouldShowError = computed(() => !!props.errorMessage);\n\n    // Indicator styling\n    const indicatorStyle = computed(() => {\n        if (isIndeterminate.value) {\n            return undefined;\n        }\n\n        const width = props.direction === 'default' ? `${clampedValue.value}%` : `${100 - clampedValue.value}%`;\n\n        return { width };\n    });\n\n    // Accessibility\n    const trackA11yAttrs = computed(() => {\n        const describedBy =\n            [props.description ? descriptionId : null, props.errorMessage ? errorId : null].filter(Boolean).join(' ') ||\n            undefined;\n\n        return {\n            'aria-labelledby': props.label ? labelId : undefined,\n            'aria-describedby': describedBy,\n            'aria-busy': isIndeterminate.value || undefined,\n            'aria-valuemin': isIndeterminate.value ? undefined : 0,\n            'aria-valuemax': isIndeterminate.value ? undefined : 100,\n            'aria-valuenow': isIndeterminate.value ? undefined : clampedValue.value,\n        };\n    });\n\n    // Conditional classes\n    const conditionalClasses = computed(() => ({\n        [`b-progress-bar--${props.height}`]: props.height !== 'default',\n        [`b-progress-bar--${props.type}`]: props.type !== 'default',\n        'b-progress-bar--error': shouldShowError.value,\n    }));\n\n    const conditionalTrackClasses = computed(() => ({\n        'b-progress-bar__track--reverse': props.direction === 'reverse',\n        'b-progress-bar__track--with-stop-indicator': props.stopIndicator && effectiveVariant.value === 'determinate',\n        'b-progress-bar__track--with-success-flash':\n            isSuccessFlashing.value && effectiveVariant.value === 'determinate',\n    }));\n\n    const conditionalIndicatorClasses = computed(() => ({\n        'b-progress-bar__track-indicator--indeterminate': isIndeterminate.value,\n        'b-progress-bar__track-indicator--static': effectiveVariant.value === 'static',\n        'b-progress-bar__track-indicator--static-animated':\n            props.staticAnimation && effectiveVariant.value === 'static',\n        'b-progress-bar__track-indicator--with-shimmer':\n            props.shimmer && !props.errorMessage && effectiveVariant.value === 'determinate',\n        'b-progress-bar__track-indicator--with-success-flash':\n            isSuccessFlashing.value && effectiveVariant.value === 'determinate',\n        [`b-progress-bar__track-indicator--${props.type}`]: props.type !== 'default',\n        'b-progress-bar__track-indicator--error': shouldShowError.value,\n    }));\n\n    const conditionalDescriptionClasses = computed(() => ({\n        'b-progress-bar__description--error': !!props.errorMessage,\n    }));\n\n    const onIndicatorAnimationEnd = (event: AnimationEvent) => {\n        if (event.animationName?.includes('success-flash')) {\n            isSuccessFlashing.value = false;\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A progress bar communicates the completion status of a task or process.\n     *\n     * @usage\n     * import { BentoProgressBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoProgressBar },\n     *     template: `\n     *         <bento-progress-bar :value=\"40\" label=\"Uploading files\" />\n     *     `\n     * };\n     */\n    export default {\n        name: 'bento-progress-bar',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./progress-bar.scss\" />\n"],"names":["__default__","messages","t","useI18n","slots","useSlots","hasSlot","useHasSlot","labelId","generateUid","descriptionId","errorId","clampedValue","computed","props","valueText","isSuccessFlashing","ref","completionMessage","watch","value","previousValue","effectiveVariant","isIndeterminate","shouldShowValue","shouldShowError","indicatorStyle","trackA11yAttrs","describedBy","conditionalClasses","conditionalTrackClasses","conditionalIndicatorClasses","conditionalDescriptionClasses","event"],"mappings":"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"}
+{"version":3,"file":"progress-bar.DfL-XZEb.js","sources":["../../src/components/progress-bar/progress-bar.vue"],"sourcesContent":["<template>\n    <div class=\"b-progress-bar\" :class=\"conditionalClasses\">\n        <div class=\"b-progress-bar__header\">\n            <field-label\n                v-if=\"label\"\n                :id=\"labelId\"\n                class=\"b-progress-bar__label\"\n                :label=\"label\"\n                :tooltip-text=\"tooltipText\"\n            />\n\n            <div v-if=\"shouldShowValue\" class=\"b-progress-bar__value\">\n                <slot name=\"value\">\n                    <bento-typography el=\"span\" stronger>{{ valueText }}</bento-typography>\n                </slot>\n            </div>\n        </div>\n\n        <div class=\"b-progress-bar__track\" :class=\"conditionalTrackClasses\" role=\"progressbar\" v-bind=\"trackA11yAttrs\">\n            <div\n                class=\"b-progress-bar__track-indicator\"\n                :class=\"conditionalIndicatorClasses\"\n                :style=\"indicatorStyle\"\n                @animationend=\"onIndicatorAnimationEnd\"\n            ></div>\n        </div>\n\n        <error-message\n            v-if=\"!!errorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-progress-bar__error-message\"\n        />\n\n        <bento-typography\n            v-if=\"description\"\n            :id=\"descriptionId\"\n            el=\"span\"\n            class=\"b-progress-bar__description\"\n            :class=\"conditionalDescriptionClasses\"\n        >\n            {{ description }}\n        </bento-typography>\n\n        <div class=\"b-progress-bar__announcement\" role=\"status\" aria-live=\"polite\">\n            {{ completionMessage }}\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { type BentoProgressBarProps } from './progress-bar.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  staticAnimation: { type: Boolean, default: true },\n  completionAnnouncement: { default: undefined },\n  description: { default: undefined },\n  direction: { default: 'default' },\n  errorMessage: { default: undefined },\n  height: { default: 'default' },\n  shimmer: { type: Boolean, default: true },\n  stopIndicator: { type: Boolean, default: true },\n  successFlash: { type: Boolean, default: true },\n  valueVisible: { type: Boolean, default: true },\n  label: { default: undefined },\n  tooltipText: { default: undefined },\n  type: { default: 'default' },\n  value: { default: undefined },\n  variant: { default: 'determinate' }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const labelId = generateUid('progress-bar-label');\n    const descriptionId = generateUid('progress-bar-description');\n    const errorId = generateUid('progress-bar-error');\n\n    // Value\n    const clampedValue = computed(() => {\n        if (props.value === undefined) {\n            return 0;\n        }\n        return Math.min(Math.max(props.value, 0), 100);\n    });\n\n    const valueText = computed(() => `${clampedValue.value}%`);\n\n    // Success flash, triggered once when the value crosses into 100\n    const isSuccessFlashing = ref(false);\n\n    // Screen readers do not reliably announce progressbar value changes, so completion is announced\n    // through a polite live region when the value crosses into 100.\n    const completionMessage = ref('');\n\n    watch(clampedValue, (value, previousValue) => {\n        if (props.variant !== 'determinate' || previousValue >= 100 || value < 100) {\n            return;\n        }\n\n        if (props.successFlash) {\n            isSuccessFlashing.value = true;\n        }\n\n        completionMessage.value = props.completionAnnouncement ?? t('progressComplete');\n    });\n\n    // Variant state\n    const effectiveVariant = computed(() => {\n        if (props.valueVisible && props.value === undefined && !hasSlot('value')) {\n            return 'indeterminate';\n        }\n\n        return props.variant;\n    });\n\n    const isIndeterminate = computed(() => effectiveVariant.value === 'indeterminate');\n\n    // Display flags\n    const shouldShowValue = computed(\n        () => props.valueVisible && !isIndeterminate.value && (hasSlot('value') || props.value !== undefined)\n    );\n\n    const shouldShowError = computed(() => !!props.errorMessage);\n\n    // Indicator styling\n    const indicatorStyle = computed(() => {\n        if (isIndeterminate.value) {\n            return undefined;\n        }\n\n        const width = props.direction === 'default' ? `${clampedValue.value}%` : `${100 - clampedValue.value}%`;\n\n        return { width };\n    });\n\n    // Accessibility\n    const trackA11yAttrs = computed(() => {\n        const describedBy =\n            [props.description ? descriptionId : null, props.errorMessage ? errorId : null].filter(Boolean).join(' ') ||\n            undefined;\n\n        return {\n            'aria-labelledby': props.label ? labelId : undefined,\n            'aria-describedby': describedBy,\n            'aria-busy': isIndeterminate.value || undefined,\n            'aria-valuemin': isIndeterminate.value ? undefined : 0,\n            'aria-valuemax': isIndeterminate.value ? undefined : 100,\n            'aria-valuenow': isIndeterminate.value ? undefined : clampedValue.value,\n        };\n    });\n\n    // Conditional classes\n    const conditionalClasses = computed(() => ({\n        [`b-progress-bar--${props.height}`]: props.height !== 'default',\n        [`b-progress-bar--${props.type}`]: props.type !== 'default',\n        'b-progress-bar--error': shouldShowError.value,\n    }));\n\n    const conditionalTrackClasses = computed(() => ({\n        'b-progress-bar__track--reverse': props.direction === 'reverse',\n        'b-progress-bar__track--with-stop-indicator': props.stopIndicator && effectiveVariant.value === 'determinate',\n        'b-progress-bar__track--with-success-flash':\n            isSuccessFlashing.value && effectiveVariant.value === 'determinate',\n    }));\n\n    const conditionalIndicatorClasses = computed(() => ({\n        'b-progress-bar__track-indicator--indeterminate': isIndeterminate.value,\n        'b-progress-bar__track-indicator--static': effectiveVariant.value === 'static',\n        'b-progress-bar__track-indicator--static-animated':\n            props.staticAnimation && effectiveVariant.value === 'static',\n        'b-progress-bar__track-indicator--with-shimmer':\n            props.shimmer && !props.errorMessage && effectiveVariant.value === 'determinate',\n        'b-progress-bar__track-indicator--with-success-flash':\n            isSuccessFlashing.value && effectiveVariant.value === 'determinate',\n        [`b-progress-bar__track-indicator--${props.type}`]: props.type !== 'default',\n        'b-progress-bar__track-indicator--error': shouldShowError.value,\n    }));\n\n    const conditionalDescriptionClasses = computed(() => ({\n        'b-progress-bar__description--error': !!props.errorMessage,\n    }));\n\n    const onIndicatorAnimationEnd = (event: AnimationEvent) => {\n        if (event.animationName?.includes('success-flash')) {\n            isSuccessFlashing.value = false;\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A progress bar communicates the completion status of a task or process.\n     *\n     * @usage\n     * import { BentoProgressBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoProgressBar },\n     *     template: `\n     *         <bento-progress-bar :value=\"40\" label=\"Uploading files\" />\n     *     `\n     * };\n     */\n    export default {\n        name: 'bento-progress-bar',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./progress-bar.scss\" />\n"],"names":["__default__","messages","t","useI18n","slots","useSlots","hasSlot","useHasSlot","labelId","generateUid","descriptionId","errorId","clampedValue","computed","props","valueText","isSuccessFlashing","ref","completionMessage","watch","value","previousValue","effectiveVariant","isIndeterminate","shouldShowValue","shouldShowError","indicatorStyle","trackA11yAttrs","describedBy","conditionalClasses","conditionalTrackClasses","conditionalIndicatorClasses","conditionalDescriptionClasses","event"],"mappings":"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"}

package/dist/chunks/{radio-group.Zgjq5kR5.js → radio-group.CAPwU2rG.js}

@@ -1,22 +1,22 @@
-import { defineComponent as E, useSlots as I, toRefs as x, ref as R, computed as s, toRef as B, watch as L } from "vue";
+import { defineComponent as S, useSlots as I, toRefs as L, ref as E, computed as l, toRef as C, watch as x } from "vue";
 import { u as O } from "./use-form-layout-loading.CWbjZiwP.js";
-import { u as M } from "./use-has-slot.C9lQZ6nz.js";
-import { g as h } from "./generate-uid.DBWe4g6T.js";
-import { B as N, d as w } from "./typography.D1OZJbEa.js";
-import { u as k } from "./form-field.D_2g7vaP.js";
-import { B as A } from "./tag.CdCMUsbF.js";
-import { u as F } from "./aria-label.CaUURpnB.js";
-import { u as $ } from "./use-default-slot-validator.BDn0wkYP.js";
-import { g as q } from "./get-slot-text.DM_NdrUC.js";
-import { R as S, a as D } from "./radio-input.CLlYadKI.js";
+import { u as R } from "./use-has-slot.C9lQZ6nz.js";
+import { g as y } from "./generate-uid.DBWe4g6T.js";
+import { u as M } from "./form-field.D_2g7vaP.js";
+import { B as N } from "./tag.Bm-widp9.js";
+import { B as k } from "./typography.D1OZJbEa.js";
+import { u as A } from "./aria-label.CaUURpnB.js";
+import { u as w } from "./use-default-slot-validator.BDn0wkYP.js";
+import { g as F } from "./get-slot-text.DM_NdrUC.js";
+import { R as B, a as $ } from "./radio-input.CLlYadKI.js";
 import { n as T } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { C as G } from "./controls-group.3qiHltDT.js";
-import { E as H } from "./error-message.BEHBfjmn.js";
+import { C as q } from "./controls-group.7s42YJEB.js";
+import { E as D } from "./error-message.BEHBfjmn.js";
 import "../assets/radio-group.css";
 const P = {
   name: "bento-radio-button",
   model: { prop: "modelValue" }
-}, U = /* @__PURE__ */ E({
+}, z = /* @__PURE__ */ S({
   ...P,
   props: {
     /**
@@ -62,42 +62,42 @@ const P = {
   },
   emits: ["input", "update:model-value"],
   setup(r, { expose: o, emit: t }) {
-    const e = r, a = I(), d = M(a), { value: n } = x(e), c = h("bento-radio-button"), f = h("description"), l = R(null);
-    $("bento-radio-button", a.default, a.description);
-    const i = s(() => ({
-      [`b-radio-button--${S.DISABLED}`]: e.disabled,
-      [`b-radio-button--${S.READONLY}`]: e.readonly
-    })), u = F({
-      ariaLabel: q(a)("default"),
+    const e = r, a = I(), i = R(a), { value: n } = L(e), p = y("bento-radio-button"), f = y("description"), s = E(null);
+    w("bento-radio-button", a.default, a.description);
+    const u = l(() => ({
+      [`b-radio-button--${B.DISABLED}`]: e.disabled,
+      [`b-radio-button--${B.READONLY}`]: e.readonly
+    })), c = A({
+      ariaLabel: F(a)("default"),
       label: n.value
-    }), _ = s(() => e.value === e.modelValue), b = () => {
+    }), _ = l(() => e.value === e.modelValue), b = () => {
       !e.disabled && !e.readonly && (t("update:model-value", e.value), t("input", e.value));
-    }, p = () => {
-      l.value.focus();
+    }, d = () => {
+      s.value.focus();
     };
     return o({
-      focus: p
-    }), { __sfc: !0, slots: a, hasSlot: d, props: e, emit: t, value: n, radioButtonId: c, descriptionId: f, radioInputRef: l, conditionalClassContainer: i, ariaLabel: u, isChecked: _, onChange: b, focus: p, BentoTag: A, BentoTypography: N, RadioInput: D };
+      focus: d
+    }), { __sfc: !0, slots: a, hasSlot: i, props: e, emit: t, value: n, radioButtonId: p, descriptionId: f, radioInputRef: s, conditionalClassContainer: u, ariaLabel: c, isChecked: _, onChange: b, focus: d, BentoTag: N, BentoTypography: k, RadioInput: $ };
   }
 });
-var z = function() {
+var H = function() {
   var o = this, t = o._self._c, e = o._self._setupProxy;
   return t("div", { staticClass: "b-radio-button", class: e.conditionalClassContainer, attrs: { "data-testid": "radio-button-container" } }, [t(e.RadioInput, { ref: "radioInputRef", attrs: { id: e.radioButtonId, "aria-label": e.ariaLabel, "aria-describedby": e.hasSlot("description") ? e.descriptionId : "", checked: e.isChecked, disabled: o.disabled, readonly: o.readonly, "has-error": o.hasError, value: e.value, "model-value": o.modelValue, name: o.name }, on: { "update:model-value": e.onChange } }), t("div", [e.hasSlot("default") ? t("label", { staticClass: "b-radio-button__label-container", attrs: { for: e.radioButtonId } }, [e.hasSlot("default") ? t("span", { staticClass: "b-radio-button__primary-label" }, [t(e.BentoTypography, { staticClass: "b-radio-button__label", attrs: { el: "span", variant: "body" } }, [o._t("default")], 2), o.tag ? t(e.BentoTag, o._b({ staticClass: "b-radio-button__label-tag" }, "bento-tag", o.tag, !1)) : o._e()], 1) : o._e(), e.hasSlot("default") && e.hasSlot("description") ? t(e.BentoTypography, { staticClass: "b-radio-button__description", attrs: { id: e.descriptionId, el: "span", variant: "body" } }, [o._t("description")], 2) : o._e()], 1) : o._e(), e.hasSlot("content") && e.isChecked ? t(e.BentoTypography, { staticClass: "b-radio-button__content", attrs: { el: "div" } }, [o._t("content")], 2) : o._e()], 1)], 1);
-}, Z = [], j = /* @__PURE__ */ T(
-  U,
+}, U = [], G = /* @__PURE__ */ T(
   z,
-  Z,
+  H,
+  U,
   !1,
   null,
   "0cfaad5f"
 );
-const Y = j.exports;
-var y = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r))(y || {});
-const J = {
+const Z = G.exports;
+var v = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r))(v || {});
+const j = {
   name: "bento-radio-group",
   model: { prop: "modelValue" }
-}, K = /* @__PURE__ */ E({
-  ...J,
+}, Y = /* @__PURE__ */ S({
+  ...j,
   props: {
     description: { default: null },
     disabled: { type: Boolean, default: !1 },
@@ -109,29 +109,20 @@ const J = {
     required: { type: Boolean, default: !1 },
     tooltipText: { default: null },
     formId: { default: null },
-    hasError: { type: Boolean, default: !1 },
     hideLabel: { type: Boolean, default: null },
     items: null,
     modelValue: { default: null },
-    variant: { default: y.VERTICAL }
+    variant: { default: v.VERTICAL }
   },
   emits: ["update:model-value", "input"],
   setup(r, { expose: o, emit: t }) {
-    const e = r, a = "bento-radio-group", d = I(), n = M(d), c = B(e, "modelValue"), f = h("error"), { isReadOnly: l } = O(B(e, "readonly")), { emitValue: i } = k(t), u = R(null), _ = s(
-      () => !e.disabled && !l.value && (!!e.errorMessage || e.hasError)
-    ), b = s(() => !e.disabled && !l.value && !!e.errorMessage), p = s(() => ({
-      "b-radio-group__buttons--horizontal": e.variant === y.HORIZONTAL
-    })), v = s(() => e.variant === "vertical"), g = s(() => n("content") && !v?.value), V = (m) => {
-      i(m);
+    const e = r, a = "bento-radio-group", i = I(), n = R(i), p = C(e, "modelValue"), f = y("error"), { isReadOnly: s } = O(C(e, "readonly")), { emitValue: u } = M(t), c = E(null), _ = l(() => !e.disabled && !s.value && !!e.errorMessage), b = l(() => ({
+      "b-radio-group__buttons--horizontal": e.variant === v.HORIZONTAL
+    })), d = l(() => e.variant === "vertical"), h = l(() => n("content") && !d?.value), V = (m) => {
+      u(m);
     };
-    e.hasError && w(
-      'BentoRadioGroup "hasError" property',
-      `Use the BentoRadioGroup "errorMessage" property instead to indicate that there is a modifier error.
-                    Having the field as "undefined" will hide/remove the error.
-                    <bento-radio-group errorMessage="Error message text" />`,
-      "2.0.0"
-    ), L(
-      g,
+    x(
+      h,
       (m) => {
         if (m)
           throw new Error("The content slot is only available for the vertical radio group layout");
@@ -140,17 +131,17 @@ const J = {
         immediate: !0
       }
     );
-    const C = () => {
-      u.value[0].focus();
+    const g = () => {
+      c.value[0].focus();
     };
     return o({
-      focus: C
-    }), { __sfc: !0, COMPONENT_NAME: a, slots: d, hasSlot: n, emit: t, props: e, inputValue: c, errorId: f, isReadOnly: l, emitValue: i, radioButton: u, shouldShowError: _, shouldShowErrorMessage: b, conditionalClasses: p, isVertical: v, shouldShowSlotError: g, onUpdateModelValue: V, focus: C, ControlsGroup: G, ErrorMessage: H, BentoRadioButton: Y };
+      focus: g
+    }), { __sfc: !0, COMPONENT_NAME: a, slots: i, hasSlot: n, emit: t, props: e, inputValue: p, errorId: f, isReadOnly: s, emitValue: u, radioButton: c, shouldShowError: _, conditionalClasses: b, isVertical: d, shouldShowSlotError: h, onUpdateModelValue: V, focus: g, ControlsGroup: q, ErrorMessage: D, BentoRadioButton: Z };
   }
 });
-var Q = function() {
+var J = function() {
   var o = this, t = o._self._c, e = o._self._setupProxy;
-  return t("div", { staticClass: "b-radio-group" }, [t(e.ControlsGroup, { staticClass: "b-radio-group__buttons", class: e.conditionalClasses, attrs: { "aria-describedby": e.shouldShowErrorMessage ? e.errorId : "", "aria-required": o.required, "component-name": e.COMPONENT_NAME, description: o.description, disabled: o.disabled, form: o.formId, label: o.label, optional: o.optional, required: o.required, "hide-label": o.hideLabel, "tooltip-text": o.tooltipText, role: "radiogroup", "aria-readonly": e.isReadOnly }, scopedSlots: o._u([e.hasSlot("description") ? { key: "description", fn: function() {
+  return t("div", { staticClass: "b-radio-group" }, [t(e.ControlsGroup, { staticClass: "b-radio-group__buttons", class: e.conditionalClasses, attrs: { "aria-describedby": e.shouldShowError ? e.errorId : "", "aria-required": o.required, "component-name": e.COMPONENT_NAME, description: o.description, disabled: o.disabled, form: o.formId, label: o.label, optional: o.optional, required: o.required, "hide-label": o.hideLabel, "tooltip-text": o.tooltipText, role: "radiogroup", "aria-readonly": e.isReadOnly }, scopedSlots: o._u([e.hasSlot("description") ? { key: "description", fn: function() {
     return [o._t("description")];
   }, proxy: !0 } : null], null, !0) }, o._l(o.items, function(a) {
     return t(e.BentoRadioButton, { key: a.value, ref: "radioButton", refInFor: !0, attrs: { "model-value": e.inputValue, value: a.value, disabled: o.disabled || a.disabled, readonly: e.isReadOnly || a.readonly, "has-error": e.shouldShowError || a.hasError, tag: a.tag, name: o.formId || o.label }, on: { "update:model-value": e.onUpdateModelValue }, scopedSlots: o._u([{ key: "default", fn: function() {
@@ -160,19 +151,19 @@ var Q = function() {
     }, proxy: !0 } : null, e.hasSlot("content") && e.isVertical ? { key: "content", fn: function() {
       return [o._t("content")];
     }, proxy: !0 } : null], null, !0) });
-  }), 1), e.shouldShowErrorMessage ? t(e.ErrorMessage, { staticClass: "b-radio-group__error-message", attrs: { id: e.errorId, "error-message": o.errorMessage } }) : o._e()], 1);
-}, W = [], X = /* @__PURE__ */ T(
+  }), 1), e.shouldShowError ? t(e.ErrorMessage, { staticClass: "b-radio-group__error-message", attrs: { id: e.errorId, "error-message": o.errorMessage } }) : o._e()], 1);
+}, K = [], Q = /* @__PURE__ */ T(
+  Y,
+  J,
   K,
-  Q,
-  W,
   !1,
   null,
-  "185a1113"
+  "22069449"
 );
-const _e = X.exports;
+const pe = Q.exports;
 export {
-  Y as B,
-  _e as a,
-  y as b
+  Z as B,
+  pe as a,
+  v as b
 };
-//# sourceMappingURL=radio-group.Zgjq5kR5.js.map
+//# sourceMappingURL=radio-group.CAPwU2rG.js.map

package/dist/chunks/radio-group.CAPwU2rG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.CAPwU2rG.js","sources":["../../src/components/radio-group/components/radio-button/radio-button.vue","../../src/components/radio-group/radio-group.types.ts","../../src/components/radio-group/radio-group.vue"],"sourcesContent":["<template>\n    <div class=\"b-radio-button\" data-testid=\"radio-button-container\" :class=\"conditionalClassContainer\">\n        <radio-input\n            :id=\"radioButtonId\"\n            ref=\"radioInputRef\"\n            :aria-label=\"ariaLabel\"\n            :aria-describedby=\"hasSlot('description') ? descriptionId : ''\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :readonly=\"readonly\"\n            :has-error=\"hasError\"\n            :value=\"value\"\n            :model-value=\"modelValue\"\n            :name=\"name\"\n            @update:model-value=\"onChange\"\n        />\n        <div>\n            <label v-if=\"hasSlot('default')\" :for=\"radioButtonId\" class=\"b-radio-button__label-container\">\n                <span v-if=\"hasSlot('default')\" class=\"b-radio-button__primary-label\">\n                    <bento-typography class=\"b-radio-button__label\" el=\"span\" variant=\"body\"><slot /></bento-typography>\n                    <bento-tag v-if=\"tag\" class=\"b-radio-button__label-tag\" v-bind=\"tag\" />\n                </span>\n                <bento-typography\n                    v-if=\"hasSlot('default') && hasSlot('description')\"\n                    :id=\"descriptionId\"\n                    class=\"b-radio-button__description\"\n                    el=\"span\"\n                    variant=\"body\"\n                >\n                    <slot name=\"description\"></slot>\n                </bento-typography>\n            </label>\n            <bento-typography v-if=\"hasSlot('content') && isChecked\" class=\"b-radio-button__content\" el=\"div\">\n                <slot name=\"content\"></slot>\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n    import { RadioInput } from '../../../internal/radio-input';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { generateUid } from '@/core/utils/ts';\n    import { computed, type ComputedRef, type PropType, ref, toRefs, useSlots } from 'vue';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { BentoRadioButtonStateClass, type BentoRadioButtonTag, type BentoRadioButtonValue } from './radio-button.types';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const props = defineProps({\n        /**\n         * Disable the radio button (optional)\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Shows bento-radio-button in error state (optional)\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 radio component.\n         */\n        modelValue: {\n            type: [String, Number] as PropType<BentoRadioButtonValue>,\n            default: null,\n        },\n\n        /**\n         * Sets the radio button to readonly (optional)\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Sets the properties of the BentoTag component that is placed next to the label.\n         * {@see BentoTag}\n         */\n        tag: { type: Object as PropType<BentoRadioButtonTag>, default: undefined },\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<BentoRadioButtonValue>,\n            required: true,\n        },\n\n        /**\n         * Sets the name of the radio input.\n         * Used for differentiating radio groups or accessing input via form submission.\n         */\n        name: {\n            type: String,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\"]);\n\n    const { value } = toRefs(props);\n    const radioButtonId = generateUid('bento-radio-button');\n    const descriptionId = generateUid('description');\n    const radioInputRef = ref(null);\n\n    useDefaultSlotValidator('bento-radio-button', slots.default, slots.description);\n\n    const conditionalClassContainer = computed(() => ({\n        [`b-radio-button--${BentoRadioButtonStateClass.DISABLED}`]: props.disabled,\n        [`b-radio-button--${BentoRadioButtonStateClass.READONLY}`]: props.readonly,\n    }));\n\n    const ariaLabel = useAriaLabel({\n        ariaLabel: getSlotText(slots)('default'),\n        label: value.value as string,\n    });\n\n    const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n\n    const onChange = () => {\n        if (!props.disabled && !props.readonly) {\n            emit('update:model-value', props.value);\n            emit('input', props.value);\n        }\n    };\n\n    const focus = () => {\n        radioInputRef.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Radio buttons are used when two or more options are mutually exclusive,\n     * the user can only select a single option from a list of pre-defined options.\n     * The label tag area is also clickable.\n     * Only to be used internally.\n     *\n     * @example\n     * import { BentoRadioButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoRadioButton },\n     *     template: `\n     *         <bento-radio-button\n     *             disabled\n     *             value=\"inputRadio\"\n     *             model-value.sync=\"modelValue\"\n     *         >\n     *             Label text\n     *             <template #description>Description text below label</template>\n     *             <template #content>Content shown when checked</template>\n     *         </bento-radio-button>\n     *     `,\n     *     setup() {\n     *         const modelValue = ref('anyValue')\n     *         const value = 'option-value'\n     *\n     *         return {\n     *             modelValue,\n     *             value,\n     *         }\n     *     }\n     * }\n     */\n    export default {\n        name: 'bento-radio-button',\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./radio-button.scss\" />\n","import type { FormField, FormFieldEmits } from '../../types/form-field';\nimport type { BentoRadioButtonTag, BentoRadioButtonValue } from './components/radio-button';\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoRadioGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport type BentoRadioGroupValue = BentoRadioButtonValue;\n\nexport interface BentoRadioGroupItem {\n    value: BentoRadioGroupValue;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    readonly?: boolean;\n    hasError?: boolean;\n    tag?: BentoRadioButtonTag;\n}\n\nexport type BentoRadioGroupItems = Array<BentoRadioGroupItem>;\n\nexport type BentoRadioGroupEmits = FormFieldEmits<BentoRadioGroupValue>;\n\nexport interface BentoRadioGroupProps extends FormField {\n    /**\n     * The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone.\n     * @default null\n     */\n    formId?: string | null;\n\n    /**\n     * Shows/hides the group label.\n     * @default null\n     */\n    hideLabel?: boolean | null;\n\n    /**\n     * The radio group's items.\n     * Required.\n     */\n    items: BentoRadioGroupItems;\n\n    /**\n     * The name associated with the group. Required for accessibility purposes.\n     * Required.\n     */\n    label: string;\n\n    /**\n     * Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.\n     * Defaults to no value selected.\n     * @default null\n     */\n    modelValue?: BentoRadioGroupValue | null;\n\n    /**\n     * The radio group's layout. It can be vertical or horizontal. Defaults to vertical.\n     * @default BentoRadioGroupVariant.VERTICAL\n     */\n    variant?: BentoRadioGroupVariant | `${BentoRadioGroupVariant}`;\n}\n","<template>\n    <div class=\"b-radio-group\">\n        <controls-group\n            class=\"b-radio-group__buttons\"\n            :aria-describedby=\"shouldShowError ? errorId : ''\"\n            :aria-required=\"required\"\n            :component-name=\"COMPONENT_NAME\"\n            :class=\"conditionalClasses\"\n            :description=\"description\"\n            :disabled=\"disabled\"\n            :form=\"formId\"\n            :label=\"label\"\n            :optional=\"optional\"\n            :required=\"required\"\n            :hide-label=\"hideLabel\"\n            :tooltip-text=\"tooltipText\"\n            role=\"radiogroup\"\n            :aria-readonly=\"isReadOnly\"\n        >\n            <bento-radio-button\n                v-for=\"item in items\"\n                ref=\"radioButton\"\n                :key=\"item.value\"\n                :model-value=\"inputValue\"\n                :value=\"item.value\"\n                :disabled=\"disabled || item.disabled\"\n                :readonly=\"isReadOnly || item.readonly\"\n                :has-error=\"shouldShowError || item.hasError\"\n                :tag=\"item.tag\"\n                :name=\"formId || label\"\n                @update:model-value=\"onUpdateModelValue\"\n            >\n                <template #default>{{ item.label }}</template>\n                <template v-if=\"item.description\" #description>{{ item.description }}</template>\n                <template v-if=\"hasSlot('content') && isVertical\" #content>\n                    <slot name=\"content\"></slot>\n                </template>\n            </bento-radio-button>\n            <template v-if=\"hasSlot('description')\" #description>\n                <slot name=\"description\" />\n            </template>\n        </controls-group>\n        <error-message\n            v-if=\"shouldShowError\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-radio-group__error-message\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRef, useSlots, watch } from 'vue';\n    import { ControlsGroup, ErrorMessage } from '@/components/internal';\n    import { BentoRadioButton } from './components/radio-button';\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/core/utils/ts';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { type BentoRadioGroupEmits, type BentoRadioGroupProps, BentoRadioGroupVariant } from './radio-group.types';\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    /**\n     * The name of the component to be used in the Vue devtools and console warnings.\n     */\n    const COMPONENT_NAME = 'bento-radio-group';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"update:model-value\", \"input\"]);\n\n    const props = defineProps({\n  description: { default: null },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: 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  items: null,\n  modelValue: { default: null },\n  variant: { default: BentoRadioGroupVariant.VERTICAL }\n});\n\n    const inputValue = toRef(props, 'modelValue');\n    const errorId = generateUid('error');\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n    const { emitValue } = useFormFieldEmits(emit);\n    const radioButton = ref(null);\n\n    const shouldShowError = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage);\n\n    const conditionalClasses = computed(() => ({\n        'b-radio-group__buttons--horizontal': props.variant === BentoRadioGroupVariant.HORIZONTAL,\n    }));\n\n    // Content slot logic\n    const isVertical = computed(() => props.variant === 'vertical');\n    const shouldShowSlotError = computed(() => hasSlot('content') && !isVertical?.value);\n\n    const onUpdateModelValue = value => {\n        emitValue(value);\n    };\n\n    watch(\n        shouldShowSlotError,\n        newVal => {\n            if (newVal) {\n                throw new Error('The content slot is only available for the vertical radio group layout');\n            }\n        },\n        {\n            immediate: true,\n        }\n    );\n\n    const focus = () => {\n        radioButton.value[0].focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A radio group component should be used whenever it is necessary to use a set of radio buttons\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * import { BentoRadioGroup } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { BentoRadioGroup },\n     *     template: `\n     *             <bento-radio-group\n     *                label=\"Your group label\"\n     *                :items=\"[\n     *                    { value: 1, label: 'Your label' },\n     *                    { value: 2, label: 'Another label', description: 'Your descriptive sub label' },\n     *                 ]\"\n     *                 variant=\"horizontal\"\n     *              />\n     *     `\n     * };\n     */\n    export default {\n        name: 'bento-radio-group',\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./radio-group.scss\" />\n"],"names":["__default__$1","slots","useSlots","hasSlot","useHasSlot","value","toRefs","props","radioButtonId","generateUid","descriptionId","radioInputRef","ref","useDefaultSlotValidator","conditionalClassContainer","computed","RadioInputStateClass","ariaLabel","useAriaLabel","getSlotText","isChecked","onChange","emit","focus","expose","BentoRadioGroupVariant","BentoRadioGroupVariant2","__default__","COMPONENT_NAME","inputValue","toRef","errorId","isReadOnly","useFormLayoutFieldLoading","emitValue","useFormFieldEmits","radioButton","shouldShowError","conditionalClasses","isVertical","shouldShowSlotError","onUpdateModelValue","watch","newVal"],"mappings":";;;;;;;;;;;;;;;AA4KI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,OAAA,EAAA,MAAA,aAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA7HAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAoDA,EAAA,OAAAI,EAAA,IAAAC,EAAAC,CAAA,GACAC,IAAAC,EAAA,oBAAA,GACAC,IAAAD,EAAA,aAAA,GACAE,IAAAC,EAAA,IAAA;AAEA,IAAAC,EAAA,sBAAAZ,EAAA,SAAAA,EAAA,WAAA;AAEA,UAAAa,IAAAC,EAAA,OAAA;AAAA,MAAkD,CAAA,mBAAAC,EAAA,QAAA,EAAA,GAAAT,EAAA;AAAA,MACoB,CAAA,mBAAAS,EAAA,QAAA,EAAA,GAAAT,EAAA;AAAA,IACA,EAAA,GAGtEU,IAAAC,EAAA;AAAA,MAA+B,WAAAC,EAAAlB,CAAA,EAAA,SAAA;AAAA,MACY,OAAAI,EAAA;AAAA,IAC1B,CAAA,GAGjBe,IAAAL,EAAA,MAAAR,EAAA,UAAAA,EAAA,UAAA,GAEAc,IAAA,MAAA;AACI,MAAA,CAAAd,EAAA,YAAA,CAAAA,EAAA,aACIe,EAAA,sBAAAf,EAAA,KAAA,GACAe,EAAA,SAAAf,EAAA,KAAA;AAAA,IACJ,GAGJgB,IAAA,MAAA;AACI,MAAAZ,EAAA,MAAA,MAAA;AAAA,IAA0B;AAG9B,WAAAa,EAAA;AAAA,MAAa,OAAAD;AAAA,IACT,CAAA;;;;;;;;;;;;;;;AChID,IAAAE,IAAA,kBAAAC,OACHA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;ACgJR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,OAAA,EAAA,MAAA,aAAA;AAEV;;;;;;;;;;;;;;;;;;;;iBAzFAC,IAAA,qBAEA3B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAqBA4B,IAAAC,EAAAvB,GAAA,YAAA,GACAwB,IAAAtB,EAAA,OAAA,GACA,EAAA,YAAAuB,EAAA,IAAAC,EAAAH,EAAAvB,GAAA,UAAA,CAAA,GACA,EAAA,WAAA2B,EAAA,IAAAC,EAAAb,CAAA,GACAc,IAAAxB,EAAA,IAAA,GAEAyB,IAAAtB,EAAA,MAAA,CAAAR,EAAA,YAAA,CAAAyB,EAAA,SAAA,CAAA,CAAAzB,EAAA,YAAA,GAEA+B,IAAAvB,EAAA,OAAA;AAAA,MAA2C,sCAAAR,EAAA,YAAAkB,EAAA;AAAA,IACwC,EAAA,GAInFc,IAAAxB,EAAA,MAAAR,EAAA,YAAA,UAAA,GACAiC,IAAAzB,EAAA,MAAAZ,EAAA,SAAA,KAAA,CAAAoC,GAAA,KAAA,GAEAE,IAAA,CAAApC,MAAA;AACI,MAAA6B,EAAA7B,CAAA;AAAA,IAAe;AAGnB,IAAAqC;AAAA,MAAAF;AAAA,MACI,CAAAG,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA,MAAA,wEAAA;AAAA,MACJ;AAAA,MACJ;AAAA,QACA,WAAA;AAAA,MACe;AAAA,IACf;AAGJ,UAAApB,IAAA,MAAA;AACI,MAAAa,EAAA,MAAA,CAAA,EAAA,MAAA;AAAA,IAA2B;AAG/B,WAAAZ,EAAA;AAAA,MAAa,OAAAD;AAAA,IACT,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{rich-text-editor.CuoSeYYT.js → rich-text-editor.entC5huo.js}

@@ -1,15 +1,15 @@
 import { defineComponent as At, ref as xt, onMounted as Nn, watch as le, computed as dt, h as Q, useAttrs as Un } from "vue";
 import { B as Wn } from "./typography.D1OZJbEa.js";
-import { B as Qn } from "./segmented-control.F0Y-i9DQ.js";
+import { B as Qn } from "./segmented-control.DtJZzQDG.js";
 import { B as Zn } from "./alert.Dj57zB88.js";
 import { n as yt } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "./index.Cl4_42j5.js";
 import { B as Gn } from "./link.CscSbaXa.js";
-import { B as Yn } from "./checkbox.C8TzLP6y.js";
+import { B as Yn } from "./checkbox.eSrg44CP.js";
 import { u as Jn } from "./index.CPOlyau9.js";
 import { u as Xn } from "./aria-label.CaUURpnB.js";
 import { g as _e } from "./generate-uid.DBWe4g6T.js";
-import { F as Kn } from "./field-label.BSWtn7ew.js";
+import { F as Kn } from "./field-label.DQRpoDXR.js";
 import { E as tr } from "./error-message.BEHBfjmn.js";
 import "../assets/rich-text-editor.css";
 const er = /* @__PURE__ */ At({
@@ -6199,4 +6199,4 @@ const Ao = fo.exports;
 export {
   Ao as r
 };
-//# sourceMappingURL=rich-text-editor.CuoSeYYT.js.map
+//# sourceMappingURL=rich-text-editor.entC5huo.js.map