@adyen/bento-vue2 1.27.0 → 1.28.0

package/dist/chunks/card.70Xvba2C.js

@@ -0,0 +1,115 @@
+import { defineComponent as T, useSlots as I, ref as C, watch as h, computed as n } from "vue";
+import { B as H } from "./typography.Bjtu3Gca.js";
+import { C as D, a as M } from "./chevron-up.B2uWhZf7.js";
+import { u as U } from "./use-expandable-content-height.GkjjbmPy.js";
+import { u as z } from "./use-has-slot.C9lQZ6nz.js";
+import { g as R } from "./unique-id.XFfoKuc2.js";
+import { u as O } from "./i18n.BQkEbtPM.js";
+import { o as W } from "./resize.Bqks3WUm.js";
+import { c as F, B as N } from "./button-actions.Bg9ey0p6.js";
+import { n as P } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/card.css";
+var f = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o))(f || {}), c = /* @__PURE__ */ ((o) => (o.DEFAULT = "default", o.SMALL = "small", o))(c || {});
+const Y = {
+  "en-US": {
+    showCardContent: "Show card content",
+    hideCardContent: "Hide card content"
+  }
+}, j = {
+  i18n: { messages: Y },
+  name: "bento-card"
+}, q = /* @__PURE__ */ T({
+  ...j,
+  props: {
+    actions: { default: null },
+    actionsLayout: { default: F.BUTTONS_END },
+    background: { default: f.PRIMARY },
+    closed: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    expandable: { type: Boolean, default: !1 },
+    titleSize: { default: c.DEFAULT }
+  },
+  emits: ["click", "expanded"],
+  setup(o, { emit: t }) {
+    const a = o, { t: e } = O(), s = I(), d = z(s), i = C(null), x = R("card"), r = C(!a.closed);
+    h(
+      () => a.closed,
+      (l) => {
+        r.value = !l;
+      }
+    );
+    const p = n(() => d("default") || d("description") || d("header")), g = n(() => d("default") || d("header")), b = n(
+      () => {
+        var l;
+        return (d("content") || ((l = a.actions) == null ? void 0 : l.length)) && (!a.expandable || a.expandable && r.value);
+      }
+    ), y = n(() => a.expandable && !a.disabled ? 0 : -1), v = n(() => ({
+      [`b-card--${a.background}`]: a.background,
+      "b-card--expandable": a.expandable,
+      "b-card--disabled": a.expandable && a.disabled
+    })), m = n(() => ({
+      "b-card__header--expandable": a.expandable,
+      "b-card__header--without-body": !a.expandable && !b.value
+    })), w = n(() => ({
+      "b-card__toggle--small-text": a.titleSize === c.SMALL
+    })), S = n(() => ({
+      "b-card__body--expandable": a.expandable && d("content"),
+      "b-card__body--without-header": !a.expandable && !p.value
+    })), k = n(() => ({
+      "b-card__content--without-header": !a.expandable && !p.value,
+      "b-card__content--expandable": a.expandable
+    })), B = n(() => {
+      const l = !a.expandable && a.actions && !d("content");
+      return {
+        "b-card__actions--without-content": l,
+        "b-card__actions--without-content-and-with-header": l && p.value
+      };
+    }), A = n(() => ({
+      "b-card__title-wrapper--truncated": d("header")
+    })), E = n(
+      () => ({
+        el: "div",
+        variant: a.titleSize === c.DEFAULT ? "title" : "body",
+        strongest: a.titleSize === c.SMALL,
+        wide: a.titleSize === c.SMALL
+      })
+    ), { updateContentHeight: _, contentHeight: u } = U(i, r), L = n(
+      () => a.expandable && u.value ? { "max-height": u.value } : {}
+    );
+    return h(
+      () => i.value,
+      () => {
+        let l = null;
+        !l && i.value && (l = W(i.value, () => {
+          i.value && _();
+        }));
+      }
+    ), { __sfc: !0, t: e, slots: s, hasSlot: d, props: a, emit: t, contentDiv: i, cardId: x, showContent: r, showHeader: p, showTitleWrapper: g, showCardBody: b, tabIndex: y, cardConditionalClasses: v, cardHeaderConditionalClasses: m, cardToggleConditionalClasses: w, cardBodyConditionalClasses: S, cardContentConditionalClasses: k, cardActionsConditionalClasses: B, cardTitleWrapperConditionalClasses: A, typography: E, updateContentHeight: _, contentHeight: u, contentMaxHeight: L, toggleExpansion: () => {
+      !a.disabled && a.expandable && (r.value = !r.value, t("expanded", r.value), _());
+    }, onClick: () => {
+      a.disabled || t("click");
+    }, BentoTypography: H, BentoButtonActions: N, ChevronDownIcon: D, ChevronUpIcon: M };
+  }
+});
+var G = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return a("div", { staticClass: "b-card", class: e.cardConditionalClasses, attrs: { "data-testid": "card" }, on: { click: e.onClick } }, [e.hasSlot("image") ? a("div", { staticClass: "b-card__image" }, [t._t("image")], 2) : t._e(), e.showHeader ? a("div", { staticClass: "b-card__header", class: e.cardHeaderConditionalClasses, attrs: { tabindex: e.tabIndex, "aria-controls": t.expandable ? e.cardId : null, "aria-expanded": t.expandable ? `${e.showContent}` : null, role: t.expandable ? "button" : null }, on: { click: e.toggleExpansion, keypress: [function(s) {
+    return !s.type.indexOf("key") && t._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : e.toggleExpansion.apply(null, arguments);
+  }, function(s) {
+    return !s.type.indexOf("key") && t._k(s.keyCode, "space", 32, s.key, [" ", "Spacebar"]) ? null : e.toggleExpansion.apply(null, arguments);
+  }] } }, [a("div", { staticClass: "b-card__header-wrapper" }, [e.showTitleWrapper ? a("div", { staticClass: "b-card__header-slot-wrapper" }, [a("div", { staticClass: "b-card__title-wrapper", class: e.cardTitleWrapperConditionalClasses }, [t.expandable ? a("div", { staticClass: "b-card__toggle", class: e.cardToggleConditionalClasses }, [e.showContent ? a(e.ChevronUpIcon, { attrs: { "svg-title": e.t("hideCardContent"), "aria-hidden": "true" } }) : a(e.ChevronDownIcon, { attrs: { "svg-title": e.t("showCardContent"), "aria-hidden": "true" } })], 1) : t._e(), e.hasSlot("default") ? a(e.BentoTypography, t._b({ staticClass: "b-card__title" }, "bento-typography", e.typography, !1), [t._t("default")], 2) : t._e()], 1), e.hasSlot("header") ? [t._t("header")] : t._e()], 2) : t._e(), e.hasSlot("description") ? a(e.BentoTypography, { staticClass: "b-card__description", attrs: { el: "div", variant: "body" } }, [t._t("description")], 2) : t._e()], 1)]) : t._e(), a("Transition", { attrs: { name: "b-card__animation" } }, [e.showCardBody ? a("div", { staticClass: "b-card__wrapper", style: e.contentMaxHeight }, [a("div", { ref: "contentDiv", staticClass: "b-card__body", class: e.cardBodyConditionalClasses, attrs: { id: t.expandable ? e.cardId : null } }, [e.hasSlot("content") ? a("div", { staticClass: "b-card__content", class: e.cardContentConditionalClasses }, [t._t("content")], 2) : t._e(), t.actions ? a("div", { staticClass: "b-card__actions", class: e.cardActionsConditionalClasses }, [a(e.BentoButtonActions, { attrs: { actions: t.actions, layout: t.actionsLayout } })], 1) : t._e()])]) : t._e()])], 1);
+}, J = [], K = /* @__PURE__ */ P(
+  q,
+  G,
+  J,
+  !1,
+  null,
+  "d9419ec6"
+);
+const la = K.exports;
+export {
+  f as B,
+  c as a,
+  la as c
+};
+//# sourceMappingURL=card.70Xvba2C.js.map

package/dist/chunks/card.70Xvba2C.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.70Xvba2C.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 class=\"b-card\" :class=\"cardConditionalClasses\" data-testid=\"card\" @click=\"onClick\">\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=\"tabIndex\"\n            :aria-controls=\"expandable ? 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('hideCardContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showCardContent')\" 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, 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 '@/utils/ts/unique-id';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\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 slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             * }]\n             * ```\n             */\n            actions?: BentoButtonActionsList;\n\n            /**\n             * Defines the layout in which the button actions is presented.\n             * It can be one of:\n             *\n             * @values BUTTONS_START\n             * @values BUTTONS_END\n             * @values FILL_CONTAINER\n             * @values SPACE_BETWEEN\n             * @values VERTICAL_STACK\n             */\n            actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;\n\n            /**\n             * Defines the color of card background\n             */\n            background?: BentoCardBackground | `${BentoCardBackground}`;\n\n            /**\n             * Sets the expandable card in a closed state\n             */\n            closed?: boolean;\n\n            /**\n             * Disables the expandable card\n             */\n            disabled?: boolean;\n\n            /**\n             * The whole content of the card will be expandable in accordion manner\n             */\n            expandable?: boolean;\n\n            /**\n             * Defines the title size of the card header\n             */\n            titleSize?: BentoCardTitleSize | `${BentoCardTitleSize}`;\n        }>(),\n        {\n            actions: null,\n            actionsLayout: BentoButtonActionsLayout.BUTTONS_END,\n            background: BentoCardBackground.PRIMARY,\n            closed: false,\n            disabled: false,\n            expandable: false,\n            titleSize: BentoCardTitleSize.DEFAULT,\n        }\n    );\n\n    const emit = defineEmits<{\n        (e: 'click');\n        (e: 'expanded', isExpanded: boolean);\n    }>();\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.expandable && !props.disabled ? 0 : -1));\n\n    const cardConditionalClasses = computed(() => ({\n        [`b-card--${props.background}`]: props.background,\n        'b-card--expandable': props.expandable,\n        'b-card--disabled': 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    };\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","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","observer","observeSizeOfElement","emit"],"mappings":"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"}

package/dist/chunks/checkbox-group.B-KdeRXC.js

@@ -0,0 +1,152 @@
+import { defineComponent as y, toRef as _, computed as l, watch as c, ref as v } from "vue";
+import { B as E, a as n } from "./checkbox.Bi2RDBEZ.js";
+import { g as x } from "./unique-id.XFfoKuc2.js";
+import { d as k } from "./typography.Bjtu3Gca.js";
+import { u as C } from "./use-form-layout-loading.D3lALhtC.js";
+import { C as S } from "./controls-group.cSRFiEVO.js";
+import { E as M } from "./error-message.BSxUoE3_.js";
+import { n as I } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/checkbox-group.css";
+var s = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r))(s || {});
+const p = "bento-checkbox-group", T = y({
+  name: p,
+  components: { BentoCheckbox: E, ControlsGroup: S, ErrorMessage: M },
+  model: { prop: "modelValue" },
+  props: {
+    /**
+     * Descriptive supporting text visbile underneath the label.
+     */
+    description: { type: String, default: null },
+    /**
+     * If set to true, renders all checkboxes in the group in a disabled state.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Renders all checkboxes in an error state with an error message.
+     */
+    errorMessage: { type: String, default: null },
+    /**
+     * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.
+     */
+    formId: { type: String, default: null },
+    /**
+     * If set to true, renders all checkboxes in the group in an error state.
+     *
+     * @deprecated Use "errorMessage" prop instead
+     */
+    hasError: { type: Boolean, default: !1 },
+    /**
+     * Shows/hides the group label.
+     */
+    hideLabel: { type: Boolean, default: null },
+    /**
+     * The checkbox group's items.
+     */
+    items: { type: Array, required: !0 },
+    /**
+     * The name associated with the group. Required for accessibility purposes.
+     */
+    label: { type: String, required: !0 },
+    /**
+     * Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.
+     * Defaults to no value selected.
+     */
+    modelValue: { type: Array, default: () => [] },
+    /**
+     * Indicates the field is optional.
+     */
+    optional: { type: Boolean, default: !1 },
+    /**
+     * If set to true, renders all checkboxes in the group in a readonly state.
+     */
+    readonly: { type: Boolean, default: !1 },
+    /**
+     * Indicates the field is required.
+     */
+    required: { type: Boolean, default: !1 },
+    /**
+     * Tooltip message.
+     */
+    tooltipText: { type: String, default: null },
+    /**
+     * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.
+     */
+    variant: {
+      type: String,
+      default: s.VERTICAL,
+      validator: (r) => Object.values(s).includes(r)
+    }
+  },
+  emits: [n.UPDATE, n.INPUT],
+  setup(r, { emit: e, slots: a }) {
+    const o = x("error"), { isReadOnly: u } = C(_(r, "readonly")), f = l(
+      () => !r.disabled && !u.value && (!!r.errorMessage || r.hasError)
+    ), h = l(
+      () => !r.disabled && !u.value && !!r.errorMessage
+    ), m = l(() => ({
+      "b-checkbox-group__checkboxes--horizontal": r.variant === s.HORIZONTAL
+    })), i = (t) => !!a[t], b = l(() => i("content") && r.variant !== "vertical");
+    c(
+      b,
+      (t) => {
+        if (t)
+          throw new Error("The content slot is only available for the vertical checkbox group layout");
+      },
+      { immediate: !0 }
+    );
+    const d = v(r.modelValue);
+    c(
+      () => r.modelValue,
+      () => {
+        d.value = r.modelValue;
+      }
+    );
+    const g = (t) => {
+      d.value = t, e(n.UPDATE, t), e(n.INPUT, t);
+    };
+    return r.hasError && k(
+      'BentoCheckboxGroup "hasError" property',
+      `Use the BentoCheckboxGroup "errorMessage" property instead to indicate that there is a modifier error.
+                    Having the field as "undefined" will hide/remove the error.
+                    <bento-checkbox-group errorMessage="Error message text" />`,
+      "2.0.0"
+    ), {
+      // Values
+      COMPONENT_NAME: p,
+      errorId: o,
+      isReadOnly: u,
+      shouldShowGroupError: f,
+      shouldShowGroupErrorMessage: h,
+      conditionalClasses: m,
+      inputValue: d,
+      hasContentSlot: i,
+      // Methods
+      onInput: g
+    };
+  }
+});
+var w = function() {
+  var e = this, a = e._self._c;
+  return e._self._setupProxy, a("div", { staticClass: "b-checkbox-group" }, [a("controls-group", { staticClass: "b-checkbox-group__checkboxes", class: e.conditionalClasses, attrs: { "aria-describedby": e.shouldShowGroupErrorMessage ? e.errorId : "", "component-name": e.COMPONENT_NAME, description: e.description, disabled: e.disabled, form: e.formId, "hide-label": e.hideLabel, label: e.label, optional: e.optional, required: e.required, "tooltip-text": e.tooltipText } }, e._l(e.items, function(o) {
+    return a("bento-checkbox", { key: o.value, attrs: { "model-value": e.inputValue, value: o.value, disabled: e.disabled || o.disabled, "has-error": e.shouldShowGroupError || o.hasError, "error-message": e.shouldShowGroupError ? null : o.errorMessage, readonly: e.isReadOnly || o.readonly, tag: o.tag }, on: { "update:model-value": e.onInput }, scopedSlots: e._u([{ key: "default", fn: function() {
+      return [e._v(e._s(o.label))];
+    }, proxy: !0 }, o.description ? { key: "description", fn: function() {
+      return [e._v(e._s(o.description))];
+    }, proxy: !0 } : null, e.hasContentSlot("content") ? { key: "content", fn: function() {
+      return [e._t("content", null, null, o)];
+    }, proxy: !0 } : null], null, !0) });
+  }), 1), e.shouldShowGroupErrorMessage ? a("error-message", { staticClass: "b-checkbox-group__error-message", attrs: { id: e.errorId, "error-message": e.errorMessage } }) : e._e()], 1);
+}, B = [], O = /* @__PURE__ */ I(
+  T,
+  w,
+  B,
+  !1,
+  null,
+  "9e93a4d5"
+);
+const q = O.exports;
+export {
+  s as B,
+  q as c
+};
+//# sourceMappingURL=checkbox-group.B-KdeRXC.js.map

package/dist/chunks/checkbox-group.B-KdeRXC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.B-KdeRXC.js","sources":["../../src/components/checkbox/components/checkbox-group/checkbox-group.types.ts","../../src/components/checkbox/components/checkbox-group/checkbox-group.vue"],"sourcesContent":["import type { BentoCheckboxTag } from '@/components/checkbox';\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\ninterface 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","<template>\n    <div class=\"b-checkbox-group\">\n        <controls-group\n            class=\"b-checkbox-group__checkboxes\"\n            :aria-describedby=\"shouldShowGroupErrorMessage ? errorId : ''\"\n            :component-name=\"COMPONENT_NAME\"\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=\"onInput\"\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 lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue';\n    import { ControlsGroup } from '@/components/internal/controls-group';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import { BentoCheckboxGroupItems, BentoCheckboxGroupVariant } from './checkbox-group.types';\n    import BentoCheckbox from '@/components/checkbox/checkbox.vue';\n    import { BentoCheckboxEvent } from '../../checkbox.types';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { deprecate } from '@/utils/ts/deprecate';\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-checkbox-group';\n\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 defineComponent({\n        name: COMPONENT_NAME,\n        components: { BentoCheckbox, ControlsGroup, ErrorMessage },\n        model: { prop: 'modelValue' },\n        props: {\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<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) =>\n                    Object.values(BentoCheckboxGroupVariant).includes(value),\n            },\n        },\n        emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT],\n        setup(props, { emit, slots }) {\n            const errorId = generateUid('error');\n            const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n            const shouldShowGroupError = computed(\n                () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError)\n            );\n            const shouldShowGroupErrorMessage = computed(\n                () => !props.disabled && !isReadOnly.value && !!props.errorMessage\n            );\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 => !!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 onInput = value => {\n                inputValue.value = value;\n                emit(BentoCheckboxEvent.UPDATE, value);\n                emit(BentoCheckboxEvent.INPUT, value);\n            };\n\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            return {\n                // Values\n                COMPONENT_NAME,\n                errorId,\n                isReadOnly,\n                shouldShowGroupError,\n                shouldShowGroupErrorMessage,\n                conditionalClasses,\n                inputValue,\n                hasContentSlot,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-group.scss\" />\n"],"names":["BentoCheckboxGroupVariant","BentoCheckboxGroupVariant2","COMPONENT_NAME","_sfc_main","defineComponent","BentoCheckbox","ControlsGroup","ErrorMessage","value","BentoCheckboxEvent","props","emit","slots","errorId","generateUid","isReadOnly","useFormLayoutFieldLoading","toRef","shouldShowGroupError","computed","shouldShowGroupErrorMessage","conditionalClasses","hasContentSlot","name","shouldShowSlotsError","watch","newValue","inputValue","ref","onInput","deprecate"],"mappings":"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"}

package/dist/chunks/{checkbox-input.1c3cc8ed.js → checkbox-input.DwDwI2BD.js}

@@ -1,8 +1,8 @@
 import { defineComponent as g, toRefs as x, computed as r } from "vue";
-import { C as E } from "./checkmark-small.520f01b1.js";
-import { n as h } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { C as E } from "./checkmark-small.BtF8b2gE.js";
+import { n as h } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/checkbox-input.css";
-var l = /* @__PURE__ */ ((n) => (n.UNCHECKED = "unchecked", n.DISABLED = "disabled", n.ERROR = "error", n.READONLY = "readonly", n))(l || {}), d = /* @__PURE__ */ ((n) => (n.UPDATE = "update:model-value", n))(d || {});
+var s = /* @__PURE__ */ ((n) => (n.UNCHECKED = "unchecked", n.DISABLED = "disabled", n.ERROR = "error", n.READONLY = "readonly", n))(s || {}), u = /* @__PURE__ */ ((n) => (n.UPDATE = "update:model-value", n))(u || {});
 let v = 0;
 const D = {
   beforeCreate() {
@@ -18,15 +18,13 @@ var R = function() {
   A,
   !1,
   null,
-  null,
-  null,
   null
 );
-const S = $.exports, L = {
+const L = $.exports, N = {
   name: "checkbox-input",
   inheritAttrs: !1
-}, w = /* @__PURE__ */ g({
-  ...L,
+}, S = /* @__PURE__ */ g({
+  ...N,
   props: {
     /**
      * The aria label associated to the input checkbox.
@@ -80,44 +78,43 @@ const S = $.exports, L = {
   },
   emits: ["update:model-value"],
   setup(n, { emit: e }) {
-    const a = n, { disabled: t, indeterminate: m, modelValue: s, readonly: _, value: o } = x(a), b = r(() => ({
-      [`b-checkbox-input--${l.DISABLED}`]: a.disabled,
-      [`b-checkbox-input--${l.READONLY}`]: a.readonly
+    const a = n, { disabled: t, indeterminate: b, modelValue: l, readonly: _, value: o } = x(a), m = r(() => ({
+      [`b-checkbox-input--${s.DISABLED}`]: a.disabled,
+      [`b-checkbox-input--${s.READONLY}`]: a.readonly
     })), C = r(() => ({
-      [`b-checkbox-input__outline--${l.UNCHECKED}`]: !p.value && !a.indeterminate,
-      [`b-checkbox-input__outline--${l.ERROR}`]: a.hasError,
-      [`b-checkbox-input__outline--${l.READONLY}`]: a.readonly
-    })), u = r(() => Array.isArray(s.value)), p = r(() => u.value ? s.value.some((i) => i === o.value) : s.value), k = r(() => a.hasError && !a.disabled && !a.readonly);
-    return { __sfc: !0, props: a, emit: e, disabled: t, indeterminate: m, modelValue: s, readonly: _, value: o, conditionalClasses: b, outlineConditionalClasses: C, isCheckboxGroup: u, isChecked: p, ariaInvalid: k, onClick: (i) => {
+      [`b-checkbox-input__outline--${s.UNCHECKED}`]: !f.value && !a.indeterminate,
+      [`b-checkbox-input__outline--${s.ERROR}`]: a.hasError,
+      [`b-checkbox-input__outline--${s.READONLY}`]: a.readonly
+    })), d = r(() => Array.isArray(l.value)), f = r(() => d.value ? l.value.some((i) => i === o.value) : l.value), k = r(() => a.hasError && !a.disabled && !a.readonly);
+    return { __sfc: !0, props: a, emit: e, disabled: t, indeterminate: b, modelValue: l, readonly: _, value: o, conditionalClasses: m, outlineConditionalClasses: C, isCheckboxGroup: d, isChecked: f, ariaInvalid: k, onClick: (i) => {
       _.value && i.preventDefault();
     }, onChange: (i) => {
       if (t.value)
         return;
       const y = i.target.checked;
-      if (u.value) {
-        const c = [...s.value], f = c.indexOf(o.value);
-        f === -1 ? c.push(o.value) : c.splice(f, 1), e(d.UPDATE, c);
+      if (d.value) {
+        const c = [...l.value], p = c.indexOf(o.value);
+        p === -1 ? c.push(o.value) : c.splice(p, 1), e(u.UPDATE, c);
       } else
-        e(d.UPDATE, y);
-    }, CheckmarkSmallIcon: E, MinusSmallIcon: S };
+        e(u.UPDATE, y);
+    }, CheckmarkSmallIcon: E, MinusSmallIcon: L };
   }
 });
-var B = function() {
+var w = function() {
   var e = this, a = e._self._c, t = e._self._setupProxy;
   return a("div", { staticClass: "b-checkbox-input", class: t.conditionalClasses }, [t.indeterminate ? a(t.MinusSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "intermediate" } }) : t.isChecked ? a(t.CheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "checked" } }) : e._e(), a("input", { ref: "inputRef", staticClass: "b-checkbox-input__outline", class: t.outlineConditionalClasses, attrs: { id: e.id, role: "checkbox", type: "checkbox", "aria-label": e.ariaLabel, "aria-checked": t.isChecked, "aria-describedby": e.ariaDescribedby, "aria-invalid": t.ariaInvalid, disabled: t.disabled, "aria-readonly": t.readonly }, domProps: { checked: t.isChecked, indeterminate: t.indeterminate, value: t.value }, on: { click: t.onClick, change: t.onChange } })], 1);
-}, I = [], N = /* @__PURE__ */ h(
+}, B = [], I = /* @__PURE__ */ h(
+  S,
   w,
   B,
-  I,
   !1,
   null,
-  "af982a96",
-  null,
-  null
+  "af982a96"
 );
-const M = N.exports;
+const M = I.exports;
 export {
-  l as C,
+  s as C,
+  L as N,
   M as a
 };
-//# sourceMappingURL=checkbox-input.1c3cc8ed.js.map
+//# sourceMappingURL=checkbox-input.DwDwI2BD.js.map

package/dist/chunks/{checkbox-input.1c3cc8ed.js.map → checkbox-input.DwDwI2BD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox-input.1c3cc8ed.js","sources":["../../src/components/internal/checkbox-input/checkbox-input.types.ts","../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/minus-small.vue","../../src/components/internal/checkbox-input/checkbox-input.vue"],"sourcesContent":["export type MultiCheckboxInputType = Array<string | number>;\nexport type CheckboxInputType = boolean | MultiCheckboxInputType;\n\nexport enum CheckboxInputState {\n    UNCHECKED = 'unchecked',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n}\n\nexport enum CheckboxInputEvent {\n    UPDATE = 'update:model-value',\n}\n\ninterface CheckboxInputGroupItem {\n    value: string | number;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n}\n\nexport type CheckboxInputGroupItems = Array<CheckboxInputGroupItem>;\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M4.25 7.25H11.75V8.75H4.25V7.25Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <div class=\"b-checkbox-input\" :class=\"conditionalClasses\">\n        <!-- Don't change order because it matters for CSS. Icons first -->\n        <minus-small-icon v-if=\"indeterminate\" class=\"b-checkbox-input__icon\" svg-title=\"intermediate\" />\n        <checkmark-small-icon v-else-if=\"isChecked\" class=\"b-checkbox-input__icon\" svg-title=\"checked\" />\n        <input\n            :id=\"id\"\n            ref=\"inputRef\"\n            role=\"checkbox\"\n            type=\"checkbox\"\n            class=\"b-checkbox-input__outline\"\n            :class=\"outlineConditionalClasses\"\n            :aria-label=\"ariaLabel\"\n            :aria-checked=\"isChecked\"\n            :aria-describedby=\"ariaDescribedby\"\n            :aria-invalid=\"ariaInvalid\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :indeterminate.prop=\"indeterminate\"\n            :value=\"value\"\n            :aria-readonly=\"readonly\"\n            @click=\"onClick\"\n            @change=\"onChange\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, toRefs } from 'vue';\n    import {\n        CheckboxInputEvent,\n        CheckboxInputGroupItems,\n        CheckboxInputState,\n        CheckboxInputType,\n        MultiCheckboxInputType,\n    } from './checkbox-input.types';\n    import CheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import MinusSmallIcon from '@adyen/ui-assets-icons-16/vue/minus-small';\n\n    const props = defineProps({\n        /**\n         * The aria label associated to the input checkbox.\n         */\n        ariaLabel: { type: String, default: '' },\n\n        /**\n         * An additional string that serves as description for the input checkbox (useful if the component shows a description).\n         */\n        ariaDescribedby: { type: String, default: '' },\n\n        /**\n         * Setting this property to true will disable the checkbox in your form.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Setting this property to true will show the checkbox in error state.\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * Sets the id of the checkbox. Required for accessibility purposes\n         */\n        id: { type: String, default: null },\n\n        /**\n         * The :indeterminate CSS pseudo-class represents any form element\n         * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\n         * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,\n         * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\n         * This property lets you control the input.indeterminate native property.\n         */\n        indeterminate: { type: Boolean, default: false },\n\n        /**\n         * When handling a single checkbox with a singular state, use a boolean.\n         *\n         * When handling multiple checkboxes, use an array of keys.\n         * These keys exist as a set \"value\" prop for each checkbox.\n         */\n        modelValue: {\n            type: [Boolean, Array] as PropType<CheckboxInputType | CheckboxInputGroupItems>,\n            default: false,\n        },\n\n        /**\n         * Setting this property to true will set the checkbox to read only state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The value of the component. The DOM API casts this to a string.\n         * The browser uses \"on\" as the default value.\n         *\n         * In the case of multiple checkboxes this value is used as a unique key.\n         */\n        value: { type: [String, Number], default: null },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emit that emits the input value\n         */\n        (e: 'update:model-value', value: boolean | Array<string | number>): void;\n    }>();\n\n    const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props);\n\n    const conditionalClasses = computed(() => ({\n        [`b-checkbox-input--${CheckboxInputState.DISABLED}`]: props.disabled,\n        [`b-checkbox-input--${CheckboxInputState.READONLY}`]: props.readonly,\n    }));\n\n    const outlineConditionalClasses = computed(() => ({\n        [`b-checkbox-input__outline--${CheckboxInputState.UNCHECKED}`]: !isChecked.value && !props.indeterminate,\n        [`b-checkbox-input__outline--${CheckboxInputState.ERROR}`]: props.hasError,\n        [`b-checkbox-input__outline--${CheckboxInputState.READONLY}`]: props.readonly,\n    }));\n\n    const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n\n    const isChecked = computed(() => {\n        if (!isCheckboxGroup.value) {\n            return modelValue.value as boolean;\n        }\n\n        return (modelValue.value as MultiCheckboxInputType).some(item => item === value.value);\n    });\n\n    const ariaInvalid = computed(() => props.hasError && !props.disabled && !props.readonly);\n\n    // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n    const onClick = (event: Event) => {\n        if (readonly.value) {\n            event.preventDefault();\n        }\n    };\n    const onChange = (event: Event) => {\n        if (disabled.value) {\n            return;\n        }\n\n        const newValue: boolean = (event.target as HTMLInputElement).checked;\n\n        if (isCheckboxGroup.value) {\n            const newCheckedList = [...(modelValue.value as MultiCheckboxInputType)];\n            const index = newCheckedList.indexOf(value.value);\n\n            if (index === -1) {\n                newCheckedList.push(value.value);\n            } else {\n                newCheckedList.splice(index, 1);\n            }\n            emit(CheckboxInputEvent.UPDATE, newCheckedList);\n        } else {\n            emit(CheckboxInputEvent.UPDATE, newValue);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component that renders a checkbox input (without label)\n     *\n     * @example\n     * import { BentoCheckboxInput } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCheckboxInput },\n     *     template: `\n     *      <label for=\"checkbox-id\">Your label</label>\n     *      <span id=\"description-id\">Description</span>\n     *      <bento-checkbox-input id=\"checkbox-id\" aria=label=\"Your label\" aria-describedby=\"description-id\" />\n     *     `\n     * }\n     */\n    export default {\n        name: 'checkbox-input',\n        inheritAttrs: false,\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-input.scss\" />\n"],"names":["CheckboxInputState","CheckboxInputState2","CheckboxInputEvent","CheckboxInputEvent2","uuid","_sfc_main$1","__default__","disabled","indeterminate","modelValue","readonly","value","toRefs","props","conditionalClasses","computed","outlineConditionalClasses","isChecked","isCheckboxGroup","item","ariaInvalid","event","newValue","newCheckedList","index","emit"],"mappings":";;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,YAAA,aACAA,EAAA,WAAA,YACAA,EAAA,QAAA,SACAA,EAAA,WAAA,YAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,SAAA,sBADQA,IAAAD,KAAA,CAAA,CAAA;ACLZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;qBCoKIE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,cAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAzEA,EAAA,UAAAC,GAAA,eAAAC,GAAA,YAAAC,GAAA,UAAAC,GAAA,OAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAf,EAAA,UAAA,GAAAa,EAAA;AAAA,MACqB,CAAA,qBAAAb,EAAA,UAAA,GAAAa,EAAA;AAAA,IACA,EAAA,GAGhEG,IAAAD,EAAA,OAAA;AAAA,MAAkD,CAAA,8BAAAf,EAAA,WAAA,GAAA,CAAAiB,EAAA,SAAA,CAAAJ,EAAA;AAAA,MAC6C,CAAA,8BAAAb,EAAA,OAAA,GAAAa,EAAA;AAAA,MACzB,CAAA,8BAAAb,EAAA,UAAA,GAAAa,EAAA;AAAA,IACG,EAAA,GAGzEK,IAAAH,EAAA,MAAA,MAAA,QAAAN,EAAA,KAAA,CAAA,GAEAQ,IAAAF,EAAA,MACIG,EAAA,QAIAT,EAAA,MAAA,KAAA,CAAAU,MAAAA,MAAAR,EAAA,KAAA,IAHIF,EAAA,KAGiF,GAGzFW,IAAAL,EAAA,MAAAF,EAAA,YAAA,CAAAA,EAAA,YAAA,CAAAA,EAAA,QAAA;gOAGA,CAAAQ,MAAA;AACI,MAAAX,EAAA,SACIW,EAAA,eAAA;AAAA,IACJ,aAEJ,CAAAA,MAAA;AACI,UAAAd,EAAA;AACI;AAGJ,YAAAe,IAAAD,EAAA,OAAA;AAEA,UAAAH,EAAA,OAAA;AACI,cAAAK,IAAA,CAAA,GAAAd,EAAA,KAAA,GACAe,IAAAD,EAAA,QAAAZ,EAAA,KAAA;AAEA,QAAAa,MAAA,KACID,EAAA,KAAAZ,EAAA,KAAA,IAEAY,EAAA,OAAAC,GAAA,CAAA,GAEJC,EAAAvB,EAAA,QAAAqB,CAAA;AAAA;AAEA,QAAAE,EAAAvB,EAAA,QAAAoB,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
+{"version":3,"file":"checkbox-input.DwDwI2BD.js","sources":["../../src/components/internal/checkbox-input/checkbox-input.types.ts","../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/minus-small.vue","../../src/components/internal/checkbox-input/checkbox-input.vue"],"sourcesContent":["export type MultiCheckboxInputType = Array<string | number>;\nexport type CheckboxInputType = boolean | MultiCheckboxInputType;\n\nexport enum CheckboxInputState {\n    UNCHECKED = 'unchecked',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n}\n\nexport enum CheckboxInputEvent {\n    UPDATE = 'update:model-value',\n}\n\ninterface CheckboxInputGroupItem {\n    value: string | number;\n    disabled?: boolean;\n    hasError?: boolean;\n    errorMessage?: string;\n    readonly?: boolean;\n}\n\nexport type CheckboxInputGroupItems = Array<CheckboxInputGroupItem>;\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M4.25 7.25H11.75V8.75H4.25V7.25Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <div class=\"b-checkbox-input\" :class=\"conditionalClasses\">\n        <!-- Don't change order because it matters for CSS. Icons first -->\n        <minus-small-icon v-if=\"indeterminate\" class=\"b-checkbox-input__icon\" svg-title=\"intermediate\" />\n        <checkmark-small-icon v-else-if=\"isChecked\" class=\"b-checkbox-input__icon\" svg-title=\"checked\" />\n        <input\n            :id=\"id\"\n            ref=\"inputRef\"\n            role=\"checkbox\"\n            type=\"checkbox\"\n            class=\"b-checkbox-input__outline\"\n            :class=\"outlineConditionalClasses\"\n            :aria-label=\"ariaLabel\"\n            :aria-checked=\"isChecked\"\n            :aria-describedby=\"ariaDescribedby\"\n            :aria-invalid=\"ariaInvalid\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :indeterminate.prop=\"indeterminate\"\n            :value=\"value\"\n            :aria-readonly=\"readonly\"\n            @click=\"onClick\"\n            @change=\"onChange\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, toRefs } from 'vue';\n    import {\n        CheckboxInputEvent,\n        CheckboxInputGroupItems,\n        CheckboxInputState,\n        CheckboxInputType,\n        MultiCheckboxInputType,\n    } from './checkbox-input.types';\n    import CheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import MinusSmallIcon from '@adyen/ui-assets-icons-16/vue/minus-small';\n\n    const props = defineProps({\n        /**\n         * The aria label associated to the input checkbox.\n         */\n        ariaLabel: { type: String, default: '' },\n\n        /**\n         * An additional string that serves as description for the input checkbox (useful if the component shows a description).\n         */\n        ariaDescribedby: { type: String, default: '' },\n\n        /**\n         * Setting this property to true will disable the checkbox in your form.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Setting this property to true will show the checkbox in error state.\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * Sets the id of the checkbox. Required for accessibility purposes\n         */\n        id: { type: String, default: null },\n\n        /**\n         * The :indeterminate CSS pseudo-class represents any form element\n         * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\n         * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,\n         * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\n         * This property lets you control the input.indeterminate native property.\n         */\n        indeterminate: { type: Boolean, default: false },\n\n        /**\n         * When handling a single checkbox with a singular state, use a boolean.\n         *\n         * When handling multiple checkboxes, use an array of keys.\n         * These keys exist as a set \"value\" prop for each checkbox.\n         */\n        modelValue: {\n            type: [Boolean, Array] as PropType<CheckboxInputType | CheckboxInputGroupItems>,\n            default: false,\n        },\n\n        /**\n         * Setting this property to true will set the checkbox to read only state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The value of the component. The DOM API casts this to a string.\n         * The browser uses \"on\" as the default value.\n         *\n         * In the case of multiple checkboxes this value is used as a unique key.\n         */\n        value: { type: [String, Number], default: null },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emit that emits the input value\n         */\n        (e: 'update:model-value', value: boolean | Array<string | number>): void;\n    }>();\n\n    const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props);\n\n    const conditionalClasses = computed(() => ({\n        [`b-checkbox-input--${CheckboxInputState.DISABLED}`]: props.disabled,\n        [`b-checkbox-input--${CheckboxInputState.READONLY}`]: props.readonly,\n    }));\n\n    const outlineConditionalClasses = computed(() => ({\n        [`b-checkbox-input__outline--${CheckboxInputState.UNCHECKED}`]: !isChecked.value && !props.indeterminate,\n        [`b-checkbox-input__outline--${CheckboxInputState.ERROR}`]: props.hasError,\n        [`b-checkbox-input__outline--${CheckboxInputState.READONLY}`]: props.readonly,\n    }));\n\n    const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n\n    const isChecked = computed(() => {\n        if (!isCheckboxGroup.value) {\n            return modelValue.value as boolean;\n        }\n\n        return (modelValue.value as MultiCheckboxInputType).some(item => item === value.value);\n    });\n\n    const ariaInvalid = computed(() => props.hasError && !props.disabled && !props.readonly);\n\n    // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n    const onClick = (event: Event) => {\n        if (readonly.value) {\n            event.preventDefault();\n        }\n    };\n    const onChange = (event: Event) => {\n        if (disabled.value) {\n            return;\n        }\n\n        const newValue: boolean = (event.target as HTMLInputElement).checked;\n\n        if (isCheckboxGroup.value) {\n            const newCheckedList = [...(modelValue.value as MultiCheckboxInputType)];\n            const index = newCheckedList.indexOf(value.value);\n\n            if (index === -1) {\n                newCheckedList.push(value.value);\n            } else {\n                newCheckedList.splice(index, 1);\n            }\n            emit(CheckboxInputEvent.UPDATE, newCheckedList);\n        } else {\n            emit(CheckboxInputEvent.UPDATE, newValue);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component that renders a checkbox input (without label)\n     *\n     * @example\n     * import { BentoCheckboxInput } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCheckboxInput },\n     *     template: `\n     *      <label for=\"checkbox-id\">Your label</label>\n     *      <span id=\"description-id\">Description</span>\n     *      <bento-checkbox-input id=\"checkbox-id\" aria=label=\"Your label\" aria-describedby=\"description-id\" />\n     *     `\n     * }\n     */\n    export default {\n        name: 'checkbox-input',\n        inheritAttrs: false,\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox-input.scss\" />\n"],"names":["CheckboxInputState","CheckboxInputState2","CheckboxInputEvent","CheckboxInputEvent2","uuid","_sfc_main$1","__default__","disabled","indeterminate","modelValue","readonly","value","toRefs","props","conditionalClasses","computed","outlineConditionalClasses","isChecked","isCheckboxGroup","item","ariaInvalid","event","newValue","newCheckedList","index","emit"],"mappings":";;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,YAAA,aACAA,EAAA,WAAA,YACAA,EAAA,QAAA,SACAA,EAAA,WAAA,YAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,SAAA,sBADQA,IAAAD,KAAA,CAAA,CAAA;ACLZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;qBCoKIE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,cAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAzEA,EAAA,UAAAC,GAAA,eAAAC,GAAA,YAAAC,GAAA,UAAAC,GAAA,OAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAf,EAAA,QAAA,EAAA,GAAAa,EAAA;AAAA,MACqB,CAAA,qBAAAb,EAAA,QAAA,EAAA,GAAAa,EAAA;AAAA,IACA,EAAA,GAGhEG,IAAAD,EAAA,OAAA;AAAA,MAAkD,CAAA,8BAAAf,EAAA,SAAA,EAAA,GAAA,CAAAiB,EAAA,SAAA,CAAAJ,EAAA;AAAA,MAC6C,CAAA,8BAAAb,EAAA,KAAA,EAAA,GAAAa,EAAA;AAAA,MACzB,CAAA,8BAAAb,EAAA,QAAA,EAAA,GAAAa,EAAA;AAAA,IACG,EAAA,GAGzEK,IAAAH,EAAA,MAAA,MAAA,QAAAN,EAAA,KAAA,CAAA,GAEAQ,IAAAF,EAAA,MACIG,EAAA,QAIAT,EAAA,MAAA,KAAA,CAAAU,MAAAA,MAAAR,EAAA,KAAA,IAHIF,EAAA,KAGiF,GAGzFW,IAAAL,EAAA,MAAAF,EAAA,YAAA,CAAAA,EAAA,YAAA,CAAAA,EAAA,QAAA;gOAGA,CAAAQ,MAAA;AACI,MAAAX,EAAA,SACIW,EAAA,eAAA;AAAA,IACJ,aAEJ,CAAAA,MAAA;AACI,UAAAd,EAAA;AACI;AAGJ,YAAAe,IAAAD,EAAA,OAAA;AAEA,UAAAH,EAAA,OAAA;AACI,cAAAK,IAAA,CAAA,GAAAd,EAAA,KAAA,GACAe,IAAAD,EAAA,QAAAZ,EAAA,KAAA;AAEA,QAAAa,MAAA,KACID,EAAA,KAAAZ,EAAA,KAAA,IAEAY,EAAA,OAAAC,GAAA,CAAA,GAEJC,EAAAvB,EAAA,QAAAqB,CAAA;AAAA,MAA8C;AAE9C,QAAAE,EAAAvB,EAAA,QAAAoB,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}

package/dist/chunks/{checkbox.9f9c978a.js → checkbox.Bi2RDBEZ.js}

@@ -1,15 +1,15 @@
 import { defineComponent as $, toRefs as k, computed as o, ref as N } from "vue";
-import { B as w } from "./index.e29a6907.js";
-import { u as F } from "./use-default-slot-validator.b9bff4c6.js";
-import { u as R } from "./use-has-slot.fbeb19ec.js";
-import { g as C } from "./unique-id.a2a2b458.js";
-import { g as f } from "./get-slot-text.99c3d860.js";
-import { u as j } from "./i18n.eb5b985b.js";
-import { u as z } from "./aria-label.ac9651a5.js";
-import { BentoTag as H } from "../tag.js";
-import { a as O, C as A } from "./checkbox-input.1c3cc8ed.js";
-import { E as Y } from "./error-message.bdcc1020.js";
-import { n as J } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { B as w } from "./typography.Bjtu3Gca.js";
+import { u as F } from "./use-default-slot-validator.BDn0wkYP.js";
+import { u as R } from "./use-has-slot.C9lQZ6nz.js";
+import { g as C } from "./unique-id.XFfoKuc2.js";
+import { g as f } from "./get-slot-text.Cgn-E48s.js";
+import { u as j } from "./i18n.BQkEbtPM.js";
+import { u as z } from "./aria-label.CaUURpnB.js";
+import { B as H } from "./tag.bhKrZHTU.js";
+import { a as O, C as B } from "./checkbox-input.DwDwI2BD.js";
+import { E as Y } from "./error-message.BSxUoE3_.js";
+import { n as J } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/checkbox.css";
 var i = /* @__PURE__ */ ((a) => (a.UPDATE = "update:model-value", a.INPUT = "input", a))(i || {});
 const K = {
@@ -93,28 +93,28 @@ const K = {
   },
   emits: [i.UPDATE, i.INPUT],
   setup(a, { attrs: e, emit: t, slots: r }) {
-    const { t: _ } = j(), m = C("description"), h = C("error"), d = R(r), { disabled: v, indeterminate: B, modelValue: b, readonly: E, value: I } = k(a), y = f(r)("default"), g = f(r)("description");
+    const { t: m } = j(), _ = C("description"), h = C("error"), d = R(r), { disabled: v, indeterminate: A, modelValue: b, readonly: E, value: I } = k(a), y = f(r)("default"), g = f(r)("description");
     F("bento-checkbox", r.default, r.description);
-    const l = o(() => Array.isArray(b.value)), s = o(() => l.value ? b.value.some((u) => u === I.value) : b.value), n = o(() => B.value), x = o(
+    const l = o(() => Array.isArray(b.value)), s = o(() => l.value ? b.value.some((u) => u === I.value) : b.value), n = o(() => A.value), x = o(
       () => !a.disabled && !a.readonly && (a.hasError || !!a.errorMessage)
     ), S = o(() => !a.disabled && !a.readonly && !!a.errorMessage), c = o(() => d("content")), p = o(() => (n == null ? void 0 : n.value) || (s == null ? void 0 : s.value)), L = o(
       () => (c == null ? void 0 : c.value) && (l == null ? void 0 : l.value) && (p == null ? void 0 : p.value)
     ), D = o(
       () => n.value ? "mixed" : `${!!s.value}`
     ), T = o(
-      () => `${S.value ? h : ""} ${y && g ? m : ""}`.trim() || null
+      () => `${S.value ? h : ""} ${y && g ? _ : ""}`.trim() || null
     ), M = N(e["aria-label"]), { ariaLabel: U } = k(a), q = z({
       ariaLabel: M.value,
       // TODO: take this line away when the aria-label props is removed
       label: U,
-      defaultFallback: d("default") ? f(r)("default") : _("ariaLabelFallback")
+      defaultFallback: d("default") ? f(r)("default") : m("ariaLabelFallback")
     }), P = o(() => x.value), V = o(() => ({
-      [`b-checkbox--${A.DISABLED}`]: v.value,
-      [`b-checkbox--${A.READONLY}`]: E.value
+      [`b-checkbox--${B.DISABLED}`]: v.value,
+      [`b-checkbox--${B.READONLY}`]: E.value
     }));
     return {
       // Values
-      descriptionId: m,
+      descriptionId: _,
       errorId: h,
       ariaChecked: D,
       ariaDescribedBy: T,
@@ -135,7 +135,7 @@ const K = {
       onChange: (u) => {
         v.value || (t(i.UPDATE, u), t(i.INPUT, u));
       },
-      t: _
+      t: m
     };
   }
 });
@@ -148,13 +148,11 @@ var W = function() {
   X,
   !1,
   null,
-  "e400ef17",
-  null,
-  null
+  "e400ef17"
 );
 const be = Z.exports;
 export {
   be as B,
   i as a
 };
-//# sourceMappingURL=checkbox.9f9c978a.js.map
+//# sourceMappingURL=checkbox.Bi2RDBEZ.js.map