@adyen/bento-vue2 1.89.2 → 1.90.0

package/dist/chunks/card.WWUfBkqf.js

@@ -0,0 +1,165 @@
+import { defineComponent as D, useSlots as L, ref as C, watch as _, computed as o } from "vue";
+import { B as M, d as H } from "./typography.C8lPlsbD.js";
+import { C as O } from "./chevron-down.eYtgv5ly.js";
+import { C as U } from "./chevron-up.d8cwIlA_.js";
+import { u as z } from "./use-expandable-content-height.GkjjbmPy.js";
+import { u as R } from "./use-has-slot.C9lQZ6nz.js";
+import { g as N } from "./generate-uid.NJ8tVoha.js";
+import { u as F } from "./index.B6WW_F-J.js";
+import { o as W } from "./resize.Bqks3WUm.js";
+import { B as K } from "./button-actions.types.BptAXjD8.js";
+import { B as P } from "./button-actions.BmU1DngD.js";
+import { n as Y } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/card.css";
+var f = /* @__PURE__ */ ((s) => (s.PRIMARY = "primary", s.SECONDARY = "secondary", s))(f || {}), c = /* @__PURE__ */ ((s) => (s.DEFAULT = "default", s.SMALL = "small", s))(c || {});
+const j = {
+  "de-DE": {
+    hideContent: "Inhalt ausblenden",
+    showContent: "Inhalt anzeigen"
+  },
+  "en-GB": {
+    hideContent: "Hide content",
+    showContent: "Show content"
+  },
+  "en-US": {
+    hideContent: "Hide content",
+    showContent: "Show content"
+  },
+  "es-ES": {
+    hideContent: "Ocultar contenido",
+    showContent: "Mostrar contenido"
+  },
+  "es-MX": {
+    hideContent: "Ocultar contenido",
+    showContent: "Mostrar contenido"
+  },
+  "fr-FR": {
+    hideContent: "Masquer le contenu",
+    showContent: "Afficher le contenu"
+  },
+  "it-IT": {
+    hideContent: "Nascondi contenuto",
+    showContent: "Mostra contenuto"
+  },
+  "ja-JP": {
+    hideContent: "コンテンツを非表示",
+    showContent: "コンテンツを表示"
+  },
+  "pt-BR": {
+    hideContent: "Ocultar conteúdo",
+    showContent: "Mostrar conteúdo"
+  },
+  "zh-CN": {
+    hideContent: "隐藏内容",
+    showContent: "显示内容"
+  }
+}, q = {
+  i18n: { messages: j },
+  name: "bento-card"
+}, G = /* @__PURE__ */ D({
+  ...q,
+  props: {
+    actions: { default: null },
+    actionsLayout: { default: K.BUTTONS_END },
+    background: { default: f.PRIMARY },
+    clickable: { type: Boolean, default: !1 },
+    closed: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    expandable: { type: Boolean, default: !1 },
+    titleSize: { default: c.DEFAULT }
+  },
+  emits: ["click", "expanded"],
+  setup(s, { emit: a }) {
+    const e = s, { t } = F(), n = L(), l = R(n), i = C(null), y = N("card"), r = C(!e.closed);
+    _(
+      () => e.closed,
+      (d) => {
+        r.value = !d;
+      }
+    );
+    const p = o(() => l("default") || l("description") || l("header")), x = o(() => l("default") || l("header")), h = o(
+      () => {
+        var d;
+        return (l("content") || ((d = e.actions) == null ? void 0 : d.length)) && (!e.expandable || e.expandable && r.value);
+      }
+    ), g = o(() => e.clickable && !e.disabled ? 0 : -1), m = o(() => e.expandable && !e.disabled ? 0 : -1), w = o(() => ({
+      [`b-card--${e.background}`]: e.background,
+      "b-card--clickable": e.clickable,
+      "b-card--expandable": e.expandable,
+      "b-card--disabled": (e.clickable || e.expandable) && e.disabled
+    })), v = o(() => ({
+      "b-card__header--expandable": e.expandable,
+      "b-card__header--without-body": !e.expandable && !h.value
+    })), k = o(() => ({
+      "b-card__toggle--small-text": e.titleSize === c.SMALL
+    })), S = o(() => ({
+      "b-card__body--expandable": e.expandable && l("content"),
+      "b-card__body--without-header": !e.expandable && !p.value
+    })), B = o(() => ({
+      "b-card__content--without-header": !e.expandable && !p.value,
+      "b-card__content--expandable": e.expandable
+    })), E = o(() => {
+      const d = !e.expandable && e.actions && !l("content");
+      return {
+        "b-card__actions--without-content": d,
+        "b-card__actions--without-content-and-with-header": d && p.value
+      };
+    }), I = o(() => ({
+      "b-card__title-wrapper--truncated": l("header")
+    })), T = o(
+      () => ({
+        el: "div",
+        variant: e.titleSize === c.DEFAULT ? "title" : "body",
+        strongest: e.titleSize === c.SMALL,
+        wide: e.titleSize === c.SMALL
+      })
+    ), { updateContentHeight: u, contentHeight: b } = z(i, r), A = o(
+      () => e.expandable && b.value ? { "max-height": b.value } : {}
+    );
+    return _(
+      () => i.value,
+      () => {
+        let d = null;
+        !d && i.value && (d = W(i.value, () => {
+          i.value && u();
+        }));
+      }
+    ), { __sfc: !0, t, slots: n, hasSlot: l, props: e, emit: a, contentDiv: i, cardId: y, showContent: r, showHeader: p, showTitleWrapper: x, showCardBody: h, tabIndex: g, headerTabIndex: m, cardConditionalClasses: w, cardHeaderConditionalClasses: v, cardToggleConditionalClasses: k, cardBodyConditionalClasses: S, cardContentConditionalClasses: B, cardActionsConditionalClasses: E, cardTitleWrapperConditionalClasses: I, typography: T, updateContentHeight: u, contentHeight: b, contentMaxHeight: A, toggleExpansion: () => {
+      !e.disabled && e.expandable && (r.value = !r.value, a("expanded", r.value), u());
+    }, onClick: () => {
+      e.disabled || (a("click"), e.clickable || H(
+        'BentoCard "@click" property',
+        'Use the BentoCard "@click" with the "clickable" property to enable accessible styles.',
+        "2.0.0"
+      ));
+    }, onKeyDown: () => {
+      e.clickable && !e.disabled && a("click");
+    }, BentoTypography: M, BentoButtonActions: P, ChevronDownIcon: O, ChevronUpIcon: U };
+  }
+});
+var J = function() {
+  var a = this, e = a._self._c, t = a._self._setupProxy;
+  return e("div", { staticClass: "b-card", class: t.cardConditionalClasses, attrs: { tabindex: t.tabIndex, "data-testid": "card" }, on: { click: t.onClick, keydown: [function(n) {
+    return !n.type.indexOf("key") && a._k(n.keyCode, "enter", 13, n.key, "Enter") ? null : t.onKeyDown.apply(null, arguments);
+  }, function(n) {
+    return !n.type.indexOf("key") && a._k(n.keyCode, "space", 32, n.key, [" ", "Spacebar"]) ? null : t.onKeyDown.apply(null, arguments);
+  }] } }, [t.hasSlot("image") ? e("div", { staticClass: "b-card__image" }, [a._t("image")], 2) : a._e(), t.showHeader ? e("div", { staticClass: "b-card__header", class: t.cardHeaderConditionalClasses, attrs: { tabindex: t.headerTabIndex, "aria-controls": a.expandable && t.showCardBody ? t.cardId : null, "aria-expanded": a.expandable ? `${t.showContent}` : null, role: a.expandable ? "button" : null }, on: { click: t.toggleExpansion, keypress: [function(n) {
+    return !n.type.indexOf("key") && a._k(n.keyCode, "enter", 13, n.key, "Enter") ? null : t.toggleExpansion.apply(null, arguments);
+  }, function(n) {
+    return !n.type.indexOf("key") && a._k(n.keyCode, "space", 32, n.key, [" ", "Spacebar"]) ? null : t.toggleExpansion.apply(null, arguments);
+  }] } }, [e("div", { staticClass: "b-card__header-wrapper" }, [t.showTitleWrapper ? e("div", { staticClass: "b-card__header-slot-wrapper" }, [e("div", { staticClass: "b-card__title-wrapper", class: t.cardTitleWrapperConditionalClasses }, [a.expandable ? e("div", { staticClass: "b-card__toggle", class: t.cardToggleConditionalClasses }, [t.showContent ? e(t.ChevronUpIcon, { attrs: { "svg-title": t.t("hideContent"), "aria-hidden": "true" } }) : e(t.ChevronDownIcon, { attrs: { "svg-title": t.t("showContent"), "aria-hidden": "true" } })], 1) : a._e(), t.hasSlot("default") ? e(t.BentoTypography, a._b({ staticClass: "b-card__title" }, "bento-typography", t.typography, !1), [a._t("default")], 2) : a._e()], 1), t.hasSlot("header") ? [a._t("header")] : a._e()], 2) : a._e(), t.hasSlot("description") ? e(t.BentoTypography, { staticClass: "b-card__description", attrs: { el: "div", variant: "body" } }, [a._t("description")], 2) : a._e()], 1)]) : a._e(), e("Transition", { attrs: { name: "b-card__animation" } }, [t.showCardBody ? e("div", { staticClass: "b-card__wrapper", style: t.contentMaxHeight }, [e("div", { ref: "contentDiv", staticClass: "b-card__body", class: t.cardBodyConditionalClasses, attrs: { id: a.expandable ? t.cardId : null } }, [t.hasSlot("content") ? e("div", { staticClass: "b-card__content", class: t.cardContentConditionalClasses }, [a._t("content")], 2) : a._e(), a.actions ? e("div", { staticClass: "b-card__actions", class: t.cardActionsConditionalClasses }, [e(t.BentoButtonActions, { attrs: { actions: a.actions, layout: a.actionsLayout } })], 1) : a._e()])]) : a._e()])], 1);
+}, X = [], Q = /* @__PURE__ */ Y(
+  G,
+  J,
+  X,
+  !1,
+  null,
+  "3b2961e0"
+);
+const ue = Q.exports;
+export {
+  f as B,
+  c as a,
+  ue as c
+};
+//# sourceMappingURL=card.WWUfBkqf.js.map

package/dist/chunks/{card.GjhsXOT0.js.map → card.WWUfBkqf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"card.GjhsXOT0.js","sources":["../../src/components/card/card.types.ts","../../src/components/card/card.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardTitleSize {\n    DEFAULT = 'default',\n    SMALL = 'small',\n}\n","<template>\n    <div\n        class=\"b-card\"\n        :class=\"cardConditionalClasses\"\n        :tabindex=\"tabIndex\"\n        data-testid=\"card\"\n        @click=\"onClick\"\n        @keydown.enter=\"onKeyDown\"\n        @keydown.space=\"onKeyDown\"\n    >\n        <div v-if=\"hasSlot('image')\" class=\"b-card__image\">\n            <slot name=\"image\"></slot>\n        </div>\n        <div\n            v-if=\"showHeader\"\n            class=\"b-card__header\"\n            :class=\"cardHeaderConditionalClasses\"\n            :tabindex=\"headerTabIndex\"\n            :aria-controls=\"expandable && showCardBody ? cardId : null\"\n            :aria-expanded=\"expandable ? `${showContent}` : null\"\n            :role=\"expandable ? 'button' : null\"\n            @click=\"toggleExpansion\"\n            @keypress.enter=\"toggleExpansion\"\n            @keypress.space=\"toggleExpansion\"\n        >\n            <div class=\"b-card__header-wrapper\">\n                <div v-if=\"showTitleWrapper\" class=\"b-card__header-slot-wrapper\">\n                    <div class=\"b-card__title-wrapper\" :class=\"cardTitleWrapperConditionalClasses\">\n                        <div v-if=\"expandable\" class=\"b-card__toggle\" :class=\"cardToggleConditionalClasses\">\n                            <chevron-up-icon v-if=\"showContent\" :svg-title=\"t('hideContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showContent')\" aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography v-if=\"hasSlot('default')\" class=\"b-card__title\" v-bind=\"typography\">\n                            <slot />\n                        </bento-typography>\n                    </div>\n\n                    <template v-if=\"hasSlot('header')\">\n                        <slot name=\"header\"></slot>\n                    </template>\n                </div>\n\n                <bento-typography v-if=\"hasSlot('description')\" class=\"b-card__description\" el=\"div\" variant=\"body\">\n                    <slot name=\"description\" />\n                </bento-typography>\n            </div>\n        </div>\n\n        <Transition name=\"b-card__animation\">\n            <div v-if=\"showCardBody\" class=\"b-card__wrapper\" :style=\"contentMaxHeight\">\n                <div\n                    :id=\"expandable ? cardId : null\"\n                    ref=\"contentDiv\"\n                    class=\"b-card__body\"\n                    :class=\"cardBodyConditionalClasses\"\n                >\n                    <div v-if=\"hasSlot('content')\" class=\"b-card__content\" :class=\"cardContentConditionalClasses\">\n                        <slot name=\"content\" />\n                    </div>\n\n                    <div v-if=\"actions\" class=\"b-card__actions\" :class=\"cardActionsConditionalClasses\">\n                        <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, useSlots, watch } from 'vue';\n\n    // Components\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButtonActions, BentoButtonActionsLayout, type BentoButtonActionsList } from '@/components/button';\n    import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    // Composables\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import messages from './messages.json';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n  actions: { default: null },\n  actionsLayout: { default: BentoButtonActionsLayout.BUTTONS_END },\n  background: { default: BentoCardBackground.PRIMARY },\n  clickable: { type: Boolean, default: false },\n  closed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  expandable: { type: Boolean, default: false },\n  titleSize: { default: BentoCardTitleSize.DEFAULT }\n});\n\n    const emit = defineEmits([\"click\", \"expanded\"]);\n\n    const contentDiv = ref<HTMLDivElement>(null);\n\n    const cardId = generateUid('card');\n    const showContent = ref(!props.closed);\n    watch(\n        () => props.closed,\n        value => {\n            showContent.value = !value;\n        }\n    );\n    const showHeader = computed(() => hasSlot('default') || hasSlot('description') || hasSlot('header'));\n    const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header'));\n    const showCardBody = computed(\n        () =>\n            (hasSlot('content') || props.actions?.length) &&\n            (!props.expandable || (props.expandable && showContent.value))\n    );\n    const tabIndex = computed(() => (props.clickable && !props.disabled ? 0 : -1));\n    const headerTabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1));\n\n    const cardConditionalClasses = computed(() => ({\n        [`b-card--${props.background}`]: props.background,\n        'b-card--clickable': props.clickable,\n        'b-card--expandable': props.expandable,\n        'b-card--disabled': (props.clickable || props.expandable) && props.disabled,\n    }));\n\n    const cardHeaderConditionalClasses = computed(() => ({\n        'b-card__header--expandable': props.expandable,\n        'b-card__header--without-body': !props.expandable && !showCardBody.value,\n    }));\n\n    const cardToggleConditionalClasses = computed(() => ({\n        'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL,\n    }));\n\n    const cardBodyConditionalClasses = computed(() => ({\n        'b-card__body--expandable': props.expandable && hasSlot('content'),\n        'b-card__body--without-header': !props.expandable && !showHeader.value,\n    }));\n\n    const cardContentConditionalClasses = computed(() => ({\n        'b-card__content--without-header': !props.expandable && !showHeader.value,\n        'b-card__content--expandable': props.expandable,\n    }));\n\n    const cardActionsConditionalClasses = computed(() => {\n        const isNotExpandableWithoutContent = !props.expandable && props.actions && !hasSlot('content');\n\n        return {\n            'b-card__actions--without-content': isNotExpandableWithoutContent,\n            'b-card__actions--without-content-and-with-header': isNotExpandableWithoutContent && showHeader.value,\n        };\n    });\n\n    const cardTitleWrapperConditionalClasses = computed(() => ({\n        'b-card__title-wrapper--truncated': hasSlot('header'),\n    }));\n\n    const typography = computed(\n        () =>\n            ({\n                el: 'div',\n                variant: props.titleSize === BentoCardTitleSize.DEFAULT ? 'title' : 'body',\n                strongest: props.titleSize === BentoCardTitleSize.SMALL,\n                wide: props.titleSize === BentoCardTitleSize.SMALL,\n            }) as InstanceType<typeof BentoTypography>['$props']\n    );\n\n    // Toggle open and close logic and animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, showContent);\n\n    const contentMaxHeight = computed(() =>\n        props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {}\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    const toggleExpansion = () => {\n        if (!props.disabled && props.expandable) {\n            showContent.value = !showContent.value;\n            emit('expanded', showContent.value);\n            updateContentHeight();\n        }\n    };\n\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('click');\n\n            if (!props.clickable) {\n                deprecate(\n                    'BentoCard \"@click\" property',\n                    `Use the BentoCard \"@click\" with the \"clickable\" property to enable accessible styles.`,\n                    '2.0.0'\n                );\n            }\n        }\n    };\n\n    const onKeyDown = () => {\n        if (props.clickable && !props.disabled) {\n            emit('click');\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A card is a flexible and composable container.\n     * Use cards to represent a single object or to visually group certain content, like legal information within company settings.\n     *\n     * @example\n     * import { BentoCard } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCard },\n     *     template: `\n     *         <bento-card>\n     *             Title of the Card\n     *         </bento-card>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-card',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","__default__","messages","t","useI18n","slots","useSlots","hasSlot","useHasSlot","contentDiv","ref","cardId","generateUid","showContent","props","watch","value","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","headerTabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","observer","observeSizeOfElement","emit","deprecate"],"mappings":"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"}
+{"version":3,"file":"card.WWUfBkqf.js","sources":["../../src/components/card/card.types.ts","../../src/components/card/card.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardTitleSize {\n    DEFAULT = 'default',\n    SMALL = 'small',\n}\n","<template>\n    <div\n        class=\"b-card\"\n        :class=\"cardConditionalClasses\"\n        :tabindex=\"tabIndex\"\n        data-testid=\"card\"\n        @click=\"onClick\"\n        @keydown.enter=\"onKeyDown\"\n        @keydown.space=\"onKeyDown\"\n    >\n        <div v-if=\"hasSlot('image')\" class=\"b-card__image\">\n            <slot name=\"image\"></slot>\n        </div>\n        <div\n            v-if=\"showHeader\"\n            class=\"b-card__header\"\n            :class=\"cardHeaderConditionalClasses\"\n            :tabindex=\"headerTabIndex\"\n            :aria-controls=\"expandable && showCardBody ? cardId : null\"\n            :aria-expanded=\"expandable ? `${showContent}` : null\"\n            :role=\"expandable ? 'button' : null\"\n            @click=\"toggleExpansion\"\n            @keypress.enter=\"toggleExpansion\"\n            @keypress.space=\"toggleExpansion\"\n        >\n            <div class=\"b-card__header-wrapper\">\n                <div v-if=\"showTitleWrapper\" class=\"b-card__header-slot-wrapper\">\n                    <div class=\"b-card__title-wrapper\" :class=\"cardTitleWrapperConditionalClasses\">\n                        <div v-if=\"expandable\" class=\"b-card__toggle\" :class=\"cardToggleConditionalClasses\">\n                            <chevron-up-icon v-if=\"showContent\" :svg-title=\"t('hideContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showContent')\" aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography v-if=\"hasSlot('default')\" class=\"b-card__title\" v-bind=\"typography\">\n                            <slot />\n                        </bento-typography>\n                    </div>\n\n                    <template v-if=\"hasSlot('header')\">\n                        <slot name=\"header\"></slot>\n                    </template>\n                </div>\n\n                <bento-typography v-if=\"hasSlot('description')\" class=\"b-card__description\" el=\"div\" variant=\"body\">\n                    <slot name=\"description\" />\n                </bento-typography>\n            </div>\n        </div>\n\n        <Transition name=\"b-card__animation\">\n            <div v-if=\"showCardBody\" class=\"b-card__wrapper\" :style=\"contentMaxHeight\">\n                <div\n                    :id=\"expandable ? cardId : null\"\n                    ref=\"contentDiv\"\n                    class=\"b-card__body\"\n                    :class=\"cardBodyConditionalClasses\"\n                >\n                    <div v-if=\"hasSlot('content')\" class=\"b-card__content\" :class=\"cardContentConditionalClasses\">\n                        <slot name=\"content\" />\n                    </div>\n\n                    <div v-if=\"actions\" class=\"b-card__actions\" :class=\"cardActionsConditionalClasses\">\n                        <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, useSlots, watch } from 'vue';\n\n    // Components\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButtonActions, BentoButtonActionsLayout, type BentoButtonActionsList } from '@/components/button';\n    import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    // Composables\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import messages from './messages.json';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n  actions: { default: null },\n  actionsLayout: { default: BentoButtonActionsLayout.BUTTONS_END },\n  background: { default: BentoCardBackground.PRIMARY },\n  clickable: { type: Boolean, default: false },\n  closed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  expandable: { type: Boolean, default: false },\n  titleSize: { default: BentoCardTitleSize.DEFAULT }\n});\n\n    const emit = defineEmits([\"click\", \"expanded\"]);\n\n    const contentDiv = ref<HTMLDivElement>(null);\n\n    const cardId = generateUid('card');\n    const showContent = ref(!props.closed);\n    watch(\n        () => props.closed,\n        value => {\n            showContent.value = !value;\n        }\n    );\n    const showHeader = computed(() => hasSlot('default') || hasSlot('description') || hasSlot('header'));\n    const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header'));\n    const showCardBody = computed(\n        () =>\n            (hasSlot('content') || props.actions?.length) &&\n            (!props.expandable || (props.expandable && showContent.value))\n    );\n    const tabIndex = computed(() => (props.clickable && !props.disabled ? 0 : -1));\n    const headerTabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1));\n\n    const cardConditionalClasses = computed(() => ({\n        [`b-card--${props.background}`]: props.background,\n        'b-card--clickable': props.clickable,\n        'b-card--expandable': props.expandable,\n        'b-card--disabled': (props.clickable || props.expandable) && props.disabled,\n    }));\n\n    const cardHeaderConditionalClasses = computed(() => ({\n        'b-card__header--expandable': props.expandable,\n        'b-card__header--without-body': !props.expandable && !showCardBody.value,\n    }));\n\n    const cardToggleConditionalClasses = computed(() => ({\n        'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL,\n    }));\n\n    const cardBodyConditionalClasses = computed(() => ({\n        'b-card__body--expandable': props.expandable && hasSlot('content'),\n        'b-card__body--without-header': !props.expandable && !showHeader.value,\n    }));\n\n    const cardContentConditionalClasses = computed(() => ({\n        'b-card__content--without-header': !props.expandable && !showHeader.value,\n        'b-card__content--expandable': props.expandable,\n    }));\n\n    const cardActionsConditionalClasses = computed(() => {\n        const isNotExpandableWithoutContent = !props.expandable && props.actions && !hasSlot('content');\n\n        return {\n            'b-card__actions--without-content': isNotExpandableWithoutContent,\n            'b-card__actions--without-content-and-with-header': isNotExpandableWithoutContent && showHeader.value,\n        };\n    });\n\n    const cardTitleWrapperConditionalClasses = computed(() => ({\n        'b-card__title-wrapper--truncated': hasSlot('header'),\n    }));\n\n    const typography = computed(\n        () =>\n            ({\n                el: 'div',\n                variant: props.titleSize === BentoCardTitleSize.DEFAULT ? 'title' : 'body',\n                strongest: props.titleSize === BentoCardTitleSize.SMALL,\n                wide: props.titleSize === BentoCardTitleSize.SMALL,\n            }) as InstanceType<typeof BentoTypography>['$props']\n    );\n\n    // Toggle open and close logic and animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, showContent);\n\n    const contentMaxHeight = computed(() =>\n        props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {}\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    const toggleExpansion = () => {\n        if (!props.disabled && props.expandable) {\n            showContent.value = !showContent.value;\n            emit('expanded', showContent.value);\n            updateContentHeight();\n        }\n    };\n\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('click');\n\n            if (!props.clickable) {\n                deprecate(\n                    'BentoCard \"@click\" property',\n                    `Use the BentoCard \"@click\" with the \"clickable\" property to enable accessible styles.`,\n                    '2.0.0'\n                );\n            }\n        }\n    };\n\n    const onKeyDown = () => {\n        if (props.clickable && !props.disabled) {\n            emit('click');\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A card is a flexible and composable container.\n     * Use cards to represent a single object or to visually group certain content, like legal information within company settings.\n     *\n     * @example\n     * import { BentoCard } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCard },\n     *     template: `\n     *         <bento-card>\n     *             Title of the Card\n     *         </bento-card>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-card',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","__default__","messages","useI18n","slots","useSlots","hasSlot","useHasSlot","contentDiv","ref","cardId","generateUid","showContent","props","watch","value","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","headerTabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","observer","observeSizeOfElement","emit","deprecate"],"mappings":"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"}

package/dist/chunks/{checkbox-group.B2BjU3ZN.js → checkbox-group.CI0xDnql.js}

@@ -1,11 +1,11 @@
 import { defineComponent as y, useSlots as v, toRef as x, computed as l, watch as f, ref as E, onMounted as C } from "vue";
-import { B as k } from "./checkbox.CIv8WgGp.js";
+import { B as k } from "./checkbox.TsWA6O3Z.js";
 import { g as S } from "./generate-uid.NJ8tVoha.js";
 import { d as M } from "./typography.C8lPlsbD.js";
 import { u as B } from "./use-form-layout-loading.CWbjZiwP.js";
 import { u as w } from "./form-field.D_2g7vaP.js";
-import { E as V } from "./error-message.RxdStT3S.js";
-import { C as G } from "./controls-group.CqotnNEF.js";
+import { E as V } from "./error-message.BUNKRa_w.js";
+import { C as G } from "./controls-group.D_KE99mg.js";
 import { n as I } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/checkbox-group.css";
 var n = /* @__PURE__ */ ((a) => (a.HORIZONTAL = "horizontal", a.VERTICAL = "vertical", a))(n || {});
@@ -139,4 +139,4 @@ export {
   D as B,
   n as a
 };
-//# sourceMappingURL=checkbox-group.B2BjU3ZN.js.map
+//# sourceMappingURL=checkbox-group.CI0xDnql.js.map

package/dist/chunks/{checkbox-group.B2BjU3ZN.js.map → checkbox-group.CI0xDnql.js.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.B2BjU3ZN.js","sources":["../../src/components/checkbox/components/checkbox-group/checkbox-group.types.ts","../../src/components/checkbox/components/checkbox-group/checkbox-group.vue"],"sourcesContent":["import { type FormFieldEmits } from '../../../../types/form-field';\nimport type { BentoCheckboxTag } from '../../checkbox.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCheckboxGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport interface BentoCheckboxGroupItem {\n    value: string | number;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n    tag?: BentoCheckboxTag;\n}\n\nexport type BentoCheckboxGroupItems = Array<BentoCheckboxGroupItem>;\n\nexport type BentoCheckboxGroupEmits = FormFieldEmits<any>;\n","<template>\n    <div class=\"b-checkbox-group\">\n        <controls-group\n            class=\"b-checkbox-group__checkboxes\"\n            :aria-describedby=\"shouldShowGroupErrorMessage ? errorId : ''\"\n            :aria-required=\"required\"\n            component-name=\"bento-checkbox-group\"\n            :class=\"conditionalClasses\"\n            :description=\"description\"\n            :disabled=\"disabled\"\n            :form=\"formId\"\n            :hide-label=\"hideLabel\"\n            :label=\"label\"\n            :optional=\"optional\"\n            :required=\"required\"\n            :tooltip-text=\"tooltipText\"\n        >\n            <bento-checkbox\n                v-for=\"item in items\"\n                :key=\"item.value\"\n                :model-value=\"inputValue\"\n                :value=\"item.value\"\n                :disabled=\"disabled || item.disabled\"\n                :has-error=\"shouldShowGroupError || item.hasError\"\n                :error-message=\"shouldShowGroupError ? null : item.errorMessage\"\n                :readonly=\"isReadOnly || item.readonly\"\n                :tag=\"item.tag\"\n                @update:model-value=\"onModelValueUpdate\"\n            >\n                <template #default>{{ item.label }}</template>\n                <template v-if=\"item.description\" #description>{{ item.description }}</template>\n                <template v-if=\"hasContentSlot('content')\" #content>\n                    <slot name=\"content\" v-bind=\"item\"></slot>\n                </template>\n            </bento-checkbox>\n        </controls-group>\n        <error-message\n            v-if=\"shouldShowGroupErrorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-checkbox-group__error-message\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, type PropType, ref, toRef, useSlots, watch } from 'vue';\n    import { ControlsGroup } from '@/components/internal/controls-group';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import {\n        type BentoCheckboxGroupEmits,\n        type BentoCheckboxGroupItems,\n        BentoCheckboxGroupVariant,\n    } from './checkbox-group.types';\n    import BentoCheckbox from '@/components/checkbox/checkbox.vue';\n    import { generateUid } from '@/core/utils/ts';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n        /**\n         * Descriptive supporting text visbile underneath the label.\n         */\n        description: { type: String, default: null },\n\n        /**\n         * If set to true, renders all checkboxes in the group in a disabled state.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Renders all checkboxes in an error state with an error message.\n         */\n        errorMessage: { type: String, default: null },\n\n        /**\n         * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.\n         */\n        formId: { type: String, default: null },\n\n        /**\n         * If set to true, renders all checkboxes in the group in an error state.\n         *\n         * @deprecated Use \"errorMessage\" prop instead\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * Shows/hides the group label.\n         */\n        hideLabel: { type: Boolean, default: null },\n\n        /**\n         * The checkbox group's items.\n         */\n        items: { type: Array as PropType<BentoCheckboxGroupItems>, required: true },\n\n        /**\n         * The name associated with the group. Required for accessibility purposes.\n         */\n        label: { type: String, required: true },\n\n        /**\n         * Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.\n         * Defaults to no value selected.\n         */\n        modelValue: { type: Array as PropType<Array<number | string | null>>, default: () => [] },\n\n        /**\n         * Indicates the field is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * If set to true, renders all checkboxes in the group in a readonly state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Indicates the field is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\n        /**\n         * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.\n         */\n        variant: {\n            type: String as PropType<BentoCheckboxGroupVariant | `${BentoCheckboxGroupVariant}`>,\n            default: BentoCheckboxGroupVariant.VERTICAL,\n            validator: (value: BentoCheckboxGroupVariant) => Object.values(BentoCheckboxGroupVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"update:model-value\", \"input\"]);\n\n    const slots = useSlots();\n\n    const errorId = generateUid('error');\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n    const { emitValue } = useFormFieldEmits(emit);\n\n    const shouldShowGroupError = computed(\n        () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError)\n    );\n    const shouldShowGroupErrorMessage = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage);\n\n    const conditionalClasses = computed(() => ({\n        'b-checkbox-group__checkboxes--horizontal': props.variant === BentoCheckboxGroupVariant.HORIZONTAL,\n    }));\n\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for\n    // vue3 named scoped slots\n    const hasContentSlot = (name: string) => !!slots[name];\n    const shouldShowSlotsError = computed(() => hasContentSlot('content') && props.variant !== 'vertical');\n\n    watch(\n        shouldShowSlotsError,\n        newValue => {\n            if (newValue) {\n                throw new Error('The content slot is only available for the vertical checkbox group layout');\n            }\n        },\n        { immediate: true }\n    );\n\n    const inputValue = ref(props.modelValue);\n    watch(\n        () => props.modelValue,\n        () => {\n            inputValue.value = props.modelValue;\n        }\n    );\n\n    const onModelValueUpdate = (value: any) => {\n        inputValue.value = value;\n        emitValue(value);\n    };\n\n    onMounted(() => {\n        if (props.hasError) {\n            deprecate(\n                'BentoCheckboxGroup \"hasError\" property',\n                `Use the BentoCheckboxGroup \"errorMessage\" property instead to indicate that there is a modifier error.\n            Having the field as \"undefined\" will hide/remove the error.\n            <bento-checkbox-group errorMessage=\"Error message text\" />`,\n                '2.0.0'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    const COMPONENT_NAME = 'bento-checkbox-group';\n    /**\n     * A checkbox group component should be used whenever it is necessary to group a set of checkboxes that are related together\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * import { BentoCheckboxGroup } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { BentoCheckboxGroup },\n     *     template: `\n     *             <bento-checkbox-group\n     *                label=\"Your group label\"\n     *                :items=\"[\n     *                    { value: 1, label: 'Your label' },\n     *                    { value: 2, label: 'Another label', description: 'Your sub label' },\n     *                 ]\"\n     *              />\n     *     `\n     * };\n     */\n    export default {\n        name: COMPONENT_NAME,\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-group.scss\" />\n"],"names":["BentoCheckboxGroupVariant","BentoCheckboxGroupVariant2","COMPONENT_NAME","__default__","slots","useSlots","errorId","generateUid","isReadOnly","useFormLayoutFieldLoading","toRef","props","emitValue","useFormFieldEmits","emit","shouldShowGroupError","computed","shouldShowGroupErrorMessage","conditionalClasses","hasContentSlot","name","shouldShowSlotsError","watch","newValue","inputValue","ref","onModelValueUpdate","value","onMounted","deprecate"],"mappings":";;;;;;;;;;AAMO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;ACiMR,MAAAE,IAAA,wBAoBAC,IAAA;AAAA,EAAe,MAAAD;AAAA,EACL,OAAA,EAAA,MAAA,aAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAjFAE,IAAAC,EAAA,GAEAC,IAAAC,EAAA,OAAA,GACA,EAAA,YAAAC,EAAA,IAAAC,EAAAC,EAAAC,GAAA,UAAA,CAAA,GACA,EAAA,WAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC;AAAA,MAA6B,MAAA,CAAAL,EAAA,YAAA,CAAAH,EAAA,UAAA,CAAA,CAAAG,EAAA,gBAAAA,EAAA;AAAA,IACoD,GAEjFM,IAAAD,EAAA,MAAA,CAAAL,EAAA,YAAA,CAAAH,EAAA,SAAA,CAAA,CAAAG,EAAA,YAAA,GAEAO,IAAAF,EAAA,OAAA;AAAA,MAA2C,4CAAAL,EAAA,YAAAX,EAAA;AAAA,IACiD,EAAA,GAM5FmB,IAAA,CAAAC,MAAA,CAAA,CAAAhB,EAAAgB,CAAA,GACAC,IAAAL,EAAA,MAAAG,EAAA,SAAA,KAAAR,EAAA,YAAA,UAAA;AAEA,IAAAW;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA,MAAA,2EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAC,IAAAC,EAAAd,EAAA,UAAA;AACA,IAAAW;AAAA,MAAA,MAAAX,EAAA;AAAA,MACgB,MAAA;AAER,QAAAa,EAAA,QAAAb,EAAA;AAAA,MAAyB;AAAA,IAC7B;AAGJ,UAAAe,IAAA,CAAAC,MAAA;AACI,MAAAH,EAAA,QAAAG,GACAf,EAAAe,CAAA;AAAA,IAAe;AAGnB,WAAAC,EAAA,MAAA;AACI,MAAAjB,EAAA,YACIkB;AAAA,QAAA;AAAA,QACI;AAAA;AAAA;AAAA,QACA;AAAA,MAGA;AAAA,IAER,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"checkbox-group.CI0xDnql.js","sources":["../../src/components/checkbox/components/checkbox-group/checkbox-group.types.ts","../../src/components/checkbox/components/checkbox-group/checkbox-group.vue"],"sourcesContent":["import { type FormFieldEmits } from '../../../../types/form-field';\nimport type { BentoCheckboxTag } from '../../checkbox.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCheckboxGroupVariant {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport interface BentoCheckboxGroupItem {\n    value: string | number;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n    tag?: BentoCheckboxTag;\n}\n\nexport type BentoCheckboxGroupItems = Array<BentoCheckboxGroupItem>;\n\nexport type BentoCheckboxGroupEmits = FormFieldEmits<any>;\n","<template>\n    <div class=\"b-checkbox-group\">\n        <controls-group\n            class=\"b-checkbox-group__checkboxes\"\n            :aria-describedby=\"shouldShowGroupErrorMessage ? errorId : ''\"\n            :aria-required=\"required\"\n            component-name=\"bento-checkbox-group\"\n            :class=\"conditionalClasses\"\n            :description=\"description\"\n            :disabled=\"disabled\"\n            :form=\"formId\"\n            :hide-label=\"hideLabel\"\n            :label=\"label\"\n            :optional=\"optional\"\n            :required=\"required\"\n            :tooltip-text=\"tooltipText\"\n        >\n            <bento-checkbox\n                v-for=\"item in items\"\n                :key=\"item.value\"\n                :model-value=\"inputValue\"\n                :value=\"item.value\"\n                :disabled=\"disabled || item.disabled\"\n                :has-error=\"shouldShowGroupError || item.hasError\"\n                :error-message=\"shouldShowGroupError ? null : item.errorMessage\"\n                :readonly=\"isReadOnly || item.readonly\"\n                :tag=\"item.tag\"\n                @update:model-value=\"onModelValueUpdate\"\n            >\n                <template #default>{{ item.label }}</template>\n                <template v-if=\"item.description\" #description>{{ item.description }}</template>\n                <template v-if=\"hasContentSlot('content')\" #content>\n                    <slot name=\"content\" v-bind=\"item\"></slot>\n                </template>\n            </bento-checkbox>\n        </controls-group>\n        <error-message\n            v-if=\"shouldShowGroupErrorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-checkbox-group__error-message\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, type PropType, ref, toRef, useSlots, watch } from 'vue';\n    import { ControlsGroup } from '@/components/internal/controls-group';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import {\n        type BentoCheckboxGroupEmits,\n        type BentoCheckboxGroupItems,\n        BentoCheckboxGroupVariant,\n    } from './checkbox-group.types';\n    import BentoCheckbox from '@/components/checkbox/checkbox.vue';\n    import { generateUid } from '@/core/utils/ts';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n        /**\n         * Descriptive supporting text visbile underneath the label.\n         */\n        description: { type: String, default: null },\n\n        /**\n         * If set to true, renders all checkboxes in the group in a disabled state.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Renders all checkboxes in an error state with an error message.\n         */\n        errorMessage: { type: String, default: null },\n\n        /**\n         * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.\n         */\n        formId: { type: String, default: null },\n\n        /**\n         * If set to true, renders all checkboxes in the group in an error state.\n         *\n         * @deprecated Use \"errorMessage\" prop instead\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * Shows/hides the group label.\n         */\n        hideLabel: { type: Boolean, default: null },\n\n        /**\n         * The checkbox group's items.\n         */\n        items: { type: Array as PropType<BentoCheckboxGroupItems>, required: true },\n\n        /**\n         * The name associated with the group. Required for accessibility purposes.\n         */\n        label: { type: String, required: true },\n\n        /**\n         * Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.\n         * Defaults to no value selected.\n         */\n        modelValue: { type: Array as PropType<Array<number | string | null>>, default: () => [] },\n\n        /**\n         * Indicates the field is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * If set to true, renders all checkboxes in the group in a readonly state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Indicates the field is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\n        /**\n         * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.\n         */\n        variant: {\n            type: String as PropType<BentoCheckboxGroupVariant | `${BentoCheckboxGroupVariant}`>,\n            default: BentoCheckboxGroupVariant.VERTICAL,\n            validator: (value: BentoCheckboxGroupVariant) => Object.values(BentoCheckboxGroupVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"update:model-value\", \"input\"]);\n\n    const slots = useSlots();\n\n    const errorId = generateUid('error');\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n    const { emitValue } = useFormFieldEmits(emit);\n\n    const shouldShowGroupError = computed(\n        () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError)\n    );\n    const shouldShowGroupErrorMessage = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage);\n\n    const conditionalClasses = computed(() => ({\n        'b-checkbox-group__checkboxes--horizontal': props.variant === BentoCheckboxGroupVariant.HORIZONTAL,\n    }));\n\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for\n    // vue3 named scoped slots\n    const hasContentSlot = (name: string) => !!slots[name];\n    const shouldShowSlotsError = computed(() => hasContentSlot('content') && props.variant !== 'vertical');\n\n    watch(\n        shouldShowSlotsError,\n        newValue => {\n            if (newValue) {\n                throw new Error('The content slot is only available for the vertical checkbox group layout');\n            }\n        },\n        { immediate: true }\n    );\n\n    const inputValue = ref(props.modelValue);\n    watch(\n        () => props.modelValue,\n        () => {\n            inputValue.value = props.modelValue;\n        }\n    );\n\n    const onModelValueUpdate = (value: any) => {\n        inputValue.value = value;\n        emitValue(value);\n    };\n\n    onMounted(() => {\n        if (props.hasError) {\n            deprecate(\n                'BentoCheckboxGroup \"hasError\" property',\n                `Use the BentoCheckboxGroup \"errorMessage\" property instead to indicate that there is a modifier error.\n            Having the field as \"undefined\" will hide/remove the error.\n            <bento-checkbox-group errorMessage=\"Error message text\" />`,\n                '2.0.0'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    const COMPONENT_NAME = 'bento-checkbox-group';\n    /**\n     * A checkbox group component should be used whenever it is necessary to group a set of checkboxes that are related together\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * import { BentoCheckboxGroup } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { BentoCheckboxGroup },\n     *     template: `\n     *             <bento-checkbox-group\n     *                label=\"Your group label\"\n     *                :items=\"[\n     *                    { value: 1, label: 'Your label' },\n     *                    { value: 2, label: 'Another label', description: 'Your sub label' },\n     *                 ]\"\n     *              />\n     *     `\n     * };\n     */\n    export default {\n        name: COMPONENT_NAME,\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-group.scss\" />\n"],"names":["BentoCheckboxGroupVariant","BentoCheckboxGroupVariant2","COMPONENT_NAME","__default__","slots","useSlots","errorId","generateUid","isReadOnly","useFormLayoutFieldLoading","toRef","props","emitValue","useFormFieldEmits","emit","shouldShowGroupError","computed","shouldShowGroupErrorMessage","conditionalClasses","hasContentSlot","name","shouldShowSlotsError","watch","newValue","inputValue","ref","onModelValueUpdate","value","onMounted","deprecate"],"mappings":";;;;;;;;;;AAMO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;ACiMR,MAAAE,IAAA,wBAoBAC,IAAA;AAAA,EAAe,MAAAD;AAAA,EACL,OAAA,EAAA,MAAA,aAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAjFAE,IAAAC,EAAA,GAEAC,IAAAC,EAAA,OAAA,GACA,EAAA,YAAAC,EAAA,IAAAC,EAAAC,EAAAC,GAAA,UAAA,CAAA,GACA,EAAA,WAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC;AAAA,MAA6B,MAAA,CAAAL,EAAA,YAAA,CAAAH,EAAA,UAAA,CAAA,CAAAG,EAAA,gBAAAA,EAAA;AAAA,IACoD,GAEjFM,IAAAD,EAAA,MAAA,CAAAL,EAAA,YAAA,CAAAH,EAAA,SAAA,CAAA,CAAAG,EAAA,YAAA,GAEAO,IAAAF,EAAA,OAAA;AAAA,MAA2C,4CAAAL,EAAA,YAAAX,EAAA;AAAA,IACiD,EAAA,GAM5FmB,IAAA,CAAAC,MAAA,CAAA,CAAAhB,EAAAgB,CAAA,GACAC,IAAAL,EAAA,MAAAG,EAAA,SAAA,KAAAR,EAAA,YAAA,UAAA;AAEA,IAAAW;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA,MAAA,2EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAC,IAAAC,EAAAd,EAAA,UAAA;AACA,IAAAW;AAAA,MAAA,MAAAX,EAAA;AAAA,MACgB,MAAA;AAER,QAAAa,EAAA,QAAAb,EAAA;AAAA,MAAyB;AAAA,IAC7B;AAGJ,UAAAe,IAAA,CAAAC,MAAA;AACI,MAAAH,EAAA,QAAAG,GACAf,EAAAe,CAAA;AAAA,IAAe;AAGnB,WAAAC,EAAA,MAAA;AACI,MAAAjB,EAAA,YACIkB;AAAA,QAAA;AAAA,QACI;AAAA;AAAA;AAAA,QACA;AAAA,MAGA;AAAA,IAER,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{checkbox.CIv8WgGp.js → checkbox.TsWA6O3Z.js}

@@ -1,30 +1,67 @@
-import { defineComponent as R, toRefs as k, computed as o, ref as A, onMounted as H, useAttrs as j } from "vue";
-import { B as F } from "./typography.C8lPlsbD.js";
-import { C as O } from "./checkbox-input.08E9BNeF.js";
-import { C } from "./minus-small.DJacLGTw.js";
-import { u as z } from "./use-default-slot-validator.BDn0wkYP.js";
+import { defineComponent as w, toRefs as S, computed as t, ref as C, onMounted as z, useAttrs as F } from "vue";
+import { B as H } from "./typography.C8lPlsbD.js";
+import { u as j } from "./use-default-slot-validator.BDn0wkYP.js";
 import { u as J } from "./use-has-slot.C9lQZ6nz.js";
-import { g as B } from "./generate-uid.NJ8tVoha.js";
+import { g as A } from "./generate-uid.NJ8tVoha.js";
 import { g as f } from "./get-slot-text.Bjb9dTSV.js";
-import { u as Y } from "./index.B6WW_F-J.js";
-import { u as K } from "./aria-label.CaUURpnB.js";
-import { B as Q } from "./tag.CocLKztJ.js";
-import { E as W } from "./error-message.RxdStT3S.js";
-import { n as X } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { u as K } from "./index.B6WW_F-J.js";
+import { u as O } from "./aria-label.CaUURpnB.js";
+import { B as X } from "./tag.D2xagTJv.js";
+import { E as Y } from "./error-message.BUNKRa_w.js";
+import { C as G } from "./checkbox-input.08E9BNeF.js";
+import { C as B } from "./minus-small.DJacLGTw.js";
+import { n as Q } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/checkbox.css";
 var s = /* @__PURE__ */ ((a) => (a.UPDATE = "update:model-value", a.INPUT = "input", a))(s || {});
-const Z = {
-  "en-US": { checkbox: "Checkbox", optional: "optional" },
-  "ja-JP": { checkbox: "チェックボックス", optional: "任意" },
-  "pt-BR": { checkbox: "Caixa de seleção", optional: "Opcional" }
-}, G = R({
+const W = {
+  "de-DE": {
+    checkbox: "Kontrollkästchen",
+    optional: "optional"
+  },
+  "en-GB": {
+    checkbox: "Tick box",
+    optional: "optional"
+  },
+  "en-US": {
+    checkbox: "Checkbox",
+    optional: "optional"
+  },
+  "es-ES": {
+    checkbox: "Casilla de verificación",
+    optional: "opcional"
+  },
+  "es-MX": {
+    checkbox: "Casilla de verificación",
+    optional: "opcional"
+  },
+  "fr-FR": {
+    checkbox: "Case à cocher",
+    optional: "facultatif"
+  },
+  "it-IT": {
+    checkbox: "Casella",
+    optional: "opzionale"
+  },
+  "ja-JP": {
+    checkbox: "チェックボックス",
+    optional: "オプション"
+  },
+  "pt-BR": {
+    checkbox: "Caixa de seleção",
+    optional: "opcional"
+  },
+  "zh-CN": {
+    checkbox: "复选框",
+    optional: "可选"
+  }
+}, Z = w({
   name: "bento-checkbox",
-  i18n: { messages: Z },
+  i18n: { messages: W },
   components: {
-    BentoTag: Q,
-    BentoTypography: F,
-    CheckboxInput: O,
-    ErrorMessage: W
+    BentoTag: X,
+    BentoTypography: H,
+    CheckboxInput: G,
+    ErrorMessage: Y
   },
   inheritAttrs: !1,
   model: { prop: "modelValue" },
@@ -92,75 +129,75 @@ const Z = {
     value: { type: [String, Number], default: null }
   },
   emits: [s.UPDATE, s.INPUT],
-  setup(a, { attrs: e, emit: t, slots: l }) {
-    const { t: m } = Y(), h = B("description"), _ = B("error"), d = J(l), { disabled: y, indeterminate: E, modelValue: u, readonly: I, value: T } = k(a), v = f(l)("default"), g = f(l)("description");
-    z("bento-checkbox", l.default, l.description);
-    const n = o(() => Array.isArray(u.value)), b = o(() => n.value ? u.value.some((r) => r === T.value) : u.value), i = o(() => E.value), D = o(
+  setup(a, { attrs: e, emit: o, slots: r }) {
+    const { t: h } = K(), m = A("description"), _ = A("error"), d = J(r), { disabled: y, indeterminate: E, modelValue: u, readonly: T, value: I } = S(a), v = f(r)("default"), g = f(r)("description");
+    j("bento-checkbox", r.default, r.description);
+    const n = t(() => Array.isArray(u.value)), b = t(() => n.value ? u.value.some((l) => l === I.value) : u.value), i = t(() => E.value), D = t(
       () => !a.disabled && !a.readonly && (a.hasError || !!a.errorMessage)
-    ), x = o(() => !a.disabled && !a.readonly && !!a.errorMessage), c = o(() => d("content")), p = o(() => (i == null ? void 0 : i.value) || (b == null ? void 0 : b.value)), L = o(
+    ), x = t(() => !a.disabled && !a.readonly && !!a.errorMessage), c = t(() => d("content")), p = t(() => (i == null ? void 0 : i.value) || (b == null ? void 0 : b.value)), M = t(
       () => (c == null ? void 0 : c.value) && (n == null ? void 0 : n.value) && (p == null ? void 0 : p.value)
-    ), M = o(
-      () => `${x.value ? _ : ""} ${v && g ? h : ""}`.trim() || null
-    ), P = A(e["aria-label"]), { ariaLabel: U } = k(a), S = A();
-    H(() => {
-      S.value = m("checkbox");
+    ), L = t(
+      () => `${x.value ? _ : ""} ${v && g ? m : ""}`.trim() || null
+    ), P = C(e["aria-label"]), { ariaLabel: U } = S(a), k = C();
+    z(() => {
+      k.value = h("checkbox");
     });
-    const q = o(
-      () => K({
+    const q = t(
+      () => O({
         ariaLabel: P.value,
         // TODO: take this line away when the aria-label props is removed
         label: U,
-        defaultFallback: d("default") ? f(l)("default") : S.value
+        defaultFallback: d("default") ? f(r)("default") : k.value
       }).value
-    ), V = (r) => r == null ? void 0 : r["aria-hidden"], $ = o(() => {
-      const { style: r, class: w } = j();
+    ), N = (l) => l == null ? void 0 : l["aria-hidden"], V = t(() => {
+      const { style: l, class: R } = F();
       return {
-        class: w,
-        style: r
+        class: R,
+        style: l
       };
-    }), N = o(() => ({
-      [`b-checkbox--${C.DISABLED}`]: y.value,
-      [`b-checkbox--${C.READONLY}`]: I.value
+    }), $ = t(() => ({
+      [`b-checkbox--${B.DISABLED}`]: y.value,
+      [`b-checkbox--${B.READONLY}`]: T.value
     }));
     return {
       // Values
-      descriptionId: h,
+      descriptionId: m,
       errorId: _,
-      ariaDescribedBy: M,
+      ariaDescribedBy: L,
       computedAriaLabel: q,
-      conditionalClass: N,
+      conditionalClass: $,
       defaultSlotValue: v,
       descriptionSlotValue: g,
       isIndeterminate: i,
       shouldShowError: D,
       shouldShowErrorMessage: x,
-      contentSlotAvailable: L,
+      contentSlotAvailable: M,
       hasContentSlot: c,
-      styleAttrs: $,
+      styleAttrs: V,
       // Methods
       hasSlot: d,
-      onChange: (r) => {
-        y.value || (t(s.UPDATE, r), t(s.INPUT, r));
+      onChange: (l) => {
+        y.value || (o(s.UPDATE, l), o(s.INPUT, l));
       },
-      getAriaHidden: V,
-      t: m
+      getAriaHidden: N,
+      t: h
     };
   }
 });
 var ee = function() {
-  var e = this, t = e._self._c;
-  return e._self._setupProxy, t("label", e._b({ staticClass: "b-checkbox", class: e.conditionalClass, attrs: { "aria-hidden": e.getAriaHidden(e.$attrs) } }, "label", e.styleAttrs, !1), [t("checkbox-input", e._b({ ref: "input", attrs: { "aria-label": e.computedAriaLabel, "aria-describedby": e.ariaDescribedBy, "aria-required": e.required, disabled: e.disabled, "has-error": e.shouldShowError, indeterminate: e.isIndeterminate, value: e.value, "model-value": e.modelValue, readonly: e.readonly }, on: { "update:model-value": e.onChange } }, "checkbox-input", e.$attrs, !1)), e.hasSlot("default") || e.shouldShowErrorMessage ? t("span", { staticClass: "b-checkbox__text" }, [e.hasSlot("default") ? t("bento-typography", { staticClass: "b-checkbox__label", attrs: { el: "span", variant: "body" } }, [t("span", [e._t("default")], 2), e.optional ? t("bento-typography", { staticClass: "b-checkbox__label-requirement", attrs: { el: "span" } }, [e._v("(" + e._s(e.t("optional")) + ")")]) : e.required ? t("bento-typography", { staticClass: "b-checkbox__label-requirement", attrs: { el: "span" } }, [e._v("*")]) : e._e(), e.tag ? t("bento-tag", e._b({ staticClass: "b-checkbox__label-tag" }, "bento-tag", e.tag, !1)) : e._e()], 1) : e._e(), e.hasSlot("default") && e.hasSlot("description") ? t("bento-typography", { staticClass: "b-checkbox__description", attrs: { id: e.descriptionId, el: "span", variant: "body" } }, [e._t("description")], 2) : e._e(), e.shouldShowErrorMessage ? t("error-message", { attrs: { id: e.errorId, "error-message": e.errorMessage } }) : e._e(), e.contentSlotAvailable ? t("bento-typography", { staticClass: "b-checkbox__content", attrs: { el: "span", variant: "body" } }, [e._t("content")], 2) : e._e()], 1) : e._e()], 1);
-}, ae = [], te = /* @__PURE__ */ X(
-  G,
+  var e = this, o = e._self._c;
+  return e._self._setupProxy, o("label", e._b({ staticClass: "b-checkbox", class: e.conditionalClass, attrs: { "aria-hidden": e.getAriaHidden(e.$attrs) } }, "label", e.styleAttrs, !1), [o("checkbox-input", e._b({ ref: "input", attrs: { "aria-label": e.computedAriaLabel, "aria-describedby": e.ariaDescribedBy, "aria-required": e.required, disabled: e.disabled, "has-error": e.shouldShowError, indeterminate: e.isIndeterminate, value: e.value, "model-value": e.modelValue, readonly: e.readonly }, on: { "update:model-value": e.onChange } }, "checkbox-input", e.$attrs, !1)), e.hasSlot("default") || e.shouldShowErrorMessage ? o("span", { staticClass: "b-checkbox__text" }, [e.hasSlot("default") ? o("bento-typography", { staticClass: "b-checkbox__label", attrs: { el: "span", variant: "body" } }, [o("span", [e._t("default")], 2), e.optional ? o("bento-typography", { staticClass: "b-checkbox__label-requirement", attrs: { el: "span" } }, [e._v("(" + e._s(e.t("optional")) + ")")]) : e.required ? o("bento-typography", { staticClass: "b-checkbox__label-requirement", attrs: { el: "span" } }, [e._v("*")]) : e._e(), e.tag ? o("bento-tag", e._b({ staticClass: "b-checkbox__label-tag" }, "bento-tag", e.tag, !1)) : e._e()], 1) : e._e(), e.hasSlot("default") && e.hasSlot("description") ? o("bento-typography", { staticClass: "b-checkbox__description", attrs: { id: e.descriptionId, el: "span", variant: "body" } }, [e._t("description")], 2) : e._e(), e.shouldShowErrorMessage ? o("error-message", { attrs: { id: e.errorId, "error-message": e.errorMessage } }) : e._e(), e.contentSlotAvailable ? o("bento-typography", { staticClass: "b-checkbox__content", attrs: { el: "span", variant: "body" } }, [e._t("content")], 2) : e._e()], 1) : e._e()], 1);
+}, ae = [], oe = /* @__PURE__ */ Q(
+  Z,
   ee,
   ae,
   !1,
   null,
   "209ebadb"
 );
-const _e = te.exports;
+const _e = oe.exports;
 export {
   _e as B,
   s as a
 };
-//# sourceMappingURL=checkbox.CIv8WgGp.js.map
+//# sourceMappingURL=checkbox.TsWA6O3Z.js.map