@adyen/bento-vue2 1.28.0 → 1.29.0

package/dist/search-bar.js

@@ -1,9 +1,104 @@
-import { B as r, b as t, a as B } from "./chunks/search-bar.CsAgO-t5.js";
-import { u as o } from "./chunks/dropdown.yhhQCKve.js";
+import { defineComponent as _, ref as l, watch as m } from "vue";
+import { d as h } from "./chunks/debounce.b5ef6acf.js";
+import { u as b } from "./chunks/i18n.eb5b985b.js";
+import { BentoInputField as y } from "./input-field.js";
+import { S as v } from "./chunks/search.83bba8e3.js";
+import { C } from "./chunks/cross-circle-fill.dd300d4c.js";
+import { n as S } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { u as j } from "./chunks/dropdown.9bee6e1d.js";
+import "./assets/index19.css";
+var i = /* @__PURE__ */ ((r) => (r.CLEAR = "clear", r.ESCAPE = "escape-pressed", r.INPUT = "input", r.UPDATE = "update:search-term", r))(i || {}), k = /* @__PURE__ */ ((r) => (r.CLEAR = "search-clear", r.INPUT = "search-input", r.UPDATE = "update:search-term", r))(k || {});
+const I = {
+  "en-US": {
+    search: "Search",
+    clearSearch: "Clear search"
+  }
+}, x = {
+  i18n: { messages: I }
+}, F = /* @__PURE__ */ _({
+  ...x,
+  __name: "search-bar",
+  props: {
+    /**
+     * Text that labels an the search bar input element
+     */
+    inputFieldAriaLabel: { type: String, required: !0 },
+    /**
+     * Reduces height of the search bar
+     */
+    condensed: { type: Boolean, default: !1 },
+    /**
+     * Custom debounce time. Default: 300
+     */
+    debounceTime: { type: Number, default: 300 },
+    /**
+     * Text displayed as the placeholder of the input-field
+     */
+    placeholder: { type: String, default: "" },
+    /**
+     * Text displayed as the value being searched
+     */
+    value: { type: String, default: void 0 }
+  },
+  emits: ["input", "clear", "escape-pressed", "blur", "focus"],
+  setup(r, { expose: n, emit: a }) {
+    const e = r, { t } = b(), s = l(e.value), c = l();
+    m(
+      () => e.value,
+      () => {
+        s.value = e.value;
+      },
+      { immediate: !0 }
+    );
+    const p = () => {
+      s.value = "", a("clear"), a("input", "");
+    }, u = h(() => {
+      a("input", s.value);
+    }, e.debounceTime), d = (f) => {
+      s.value = f, u();
+    }, o = () => {
+      c.value.focusInput();
+    };
+    return n({
+      /**
+       * Focus on the input field when called.
+       */
+      focus: o
+    }), { __sfc: !0, t, props: e, emit: a, searchTerm: s, bentoInputField: c, onClearSearch: p, debouncedEmit: u, onInputEvent: d, focus: o, BentoSearchBarInternalEvent: i, BentoInputField: y, SearchIcon: v, CrossCircleFillIcon: C };
+  }
+});
+var g = function() {
+  var n = this, a = n._self._c, e = n._self._setupProxy;
+  return a("div", { staticClass: "b-search-bar" }, [a(e.BentoInputField, { ref: "bentoInputField", attrs: { value: e.searchTerm, type: "search", condensed: n.condensed, "aria-label": n.inputFieldAriaLabel, "aria-hidden": !1, placeholder: n.placeholder }, on: { input: e.onInputEvent, focus: function(t) {
+    return e.emit("focus");
+  }, blur: function(t) {
+    return e.emit("blur");
+  }, "escape-pressed": function(t) {
+    return e.emit(e.BentoSearchBarInternalEvent.ESCAPE);
+  } }, scopedSlots: n._u([{ key: "iconBefore", fn: function() {
+    return [a(e.SearchIcon, { attrs: { "svg-title": e.t("search"), "aria-hidden": "true" } })];
+  }, proxy: !0 }, e.searchTerm ? { key: "iconAfter", fn: function() {
+    return [a("div", { staticClass: "b-search-bar__clear-search", attrs: { tabindex: "0", "data-testid": "b-search-bar-clear-search-button" }, on: { click: e.onClearSearch, keypress: function(t) {
+      return !t.type.indexOf("key") && n._k(t.keyCode, "enter", 13, t.key, "Enter") ? null : e.onClearSearch.apply(null, arguments);
+    }, keyup: function(t) {
+      return !t.type.indexOf("key") && n._k(t.keyCode, "space", 32, t.key, [" ", "Spacebar"]) ? null : e.onClearSearch.apply(null, arguments);
+    } } }, [a(e.CrossCircleFillIcon, { attrs: { "svg-title": e.t("clearSearch") } })], 1)];
+  }, proxy: !0 } : null], null, !0) })], 1);
+}, A = [], T = /* @__PURE__ */ S(
+  F,
+  g,
+  A,
+  !1,
+  null,
+  "bc596f08",
+  null,
+  null
+);
+const O = T.exports;
 export {
-  r as BentoSearchBar,
-  t as BentoSearchBarEvent,
-  B as BentoSearchBarInternalEvent,
-  o as useSearchBarFilter
+  O as BentoSearchBar,
+  k as BentoSearchBarEvent,
+  i as BentoSearchBarInternalEvent,
+  j as useSearchBarFilter
 };
 //# sourceMappingURL=search-bar.js.map

package/dist/search-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-bar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"search-bar.js","sources":["../src/components/search-bar/search-bar.types.ts","../src/components/search-bar/search-bar.vue"],"sourcesContent":["export enum BentoSearchBarInternalEvent {\n    CLEAR = 'clear',\n    ESCAPE = 'escape-pressed',\n    INPUT = 'input',\n    UPDATE = 'update:search-term',\n}\n\nexport enum BentoSearchBarEvent {\n    CLEAR = 'search-clear',\n    INPUT = 'search-input',\n    UPDATE = 'update:search-term',\n}\n\nexport interface BentoSearchBarItem {\n    label: string;\n    items?: Array<BentoSearchBarItem>;\n}\n\nexport type BentoSearchBarData = Array<BentoSearchBarItem>;\n","<template>\n    <div class=\"b-search-bar\">\n        <bento-input-field\n            ref=\"bentoInputField\"\n            :value=\"searchTerm\"\n            type=\"search\"\n            :condensed=\"condensed\"\n            :aria-label=\"inputFieldAriaLabel\"\n            :aria-hidden=\"false\"\n            :placeholder=\"placeholder\"\n            @input=\"onInputEvent\"\n            @focus=\"emit('focus')\"\n            @blur=\"emit('blur')\"\n            @escape-pressed=\"emit(BentoSearchBarInternalEvent.ESCAPE)\"\n        >\n            <template #iconBefore>\n                <search-icon :svg-title=\"t('search')\" aria-hidden=\"true\" />\n            </template>\n\n            <template v-if=\"searchTerm\" #iconAfter>\n                <div\n                    class=\"b-search-bar__clear-search\"\n                    tabindex=\"0\"\n                    data-testid=\"b-search-bar-clear-search-button\"\n                    @click=\"onClearSearch\"\n                    @keypress.enter=\"onClearSearch\"\n                    @keyup.space=\"onClearSearch\"\n                >\n                    <cross-circle-fill-icon :svg-title=\"t('clearSearch')\" />\n                </div>\n            </template>\n        </bento-input-field>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { ref, watch } from 'vue';\n    import { debounce } from '@/utils/ts/debounce';\n    import { BentoSearchBarInternalEvent } from './search-bar.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import BentoInputField from '@/components/input-field/input-field.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n        /**\n         * Text that labels an the search bar input element\n         */\n        inputFieldAriaLabel: { type: String, required: true },\n\n        /**\n         * Reduces height of the search bar\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Custom debounce time. Default: 300\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Text displayed as the placeholder of the input-field\n         */\n        placeholder: { type: String, default: '' },\n\n        /**\n         * Text displayed as the value being searched\n         */\n        value: { type: String, default: undefined },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the input value changes by typing a search. Debounced by the `debounceTime` property\n         */\n        (e: 'input', inputValue: string): void;\n\n        /**\n         * Emitted when the \"clear search\" button is clicked\n         */\n        (e: 'clear'): void;\n\n        /**\n         * Emitted when the \"ESC\" key is pressed inside the Search Bar input\n         */\n        (e: 'escape-pressed'): void;\n\n        /**\n         * Emitted when the element has lost focus\n         */\n        (e: 'blur'): void;\n\n        /**\n         * Emitted when the element has received focus\n         */\n        (e: 'focus'): void;\n    }>();\n\n    const searchTerm = ref(props.value);\n    const bentoInputField = ref<InstanceType<typeof BentoInputField> | null>();\n\n    watch(\n        () => props.value,\n        () => {\n            searchTerm.value = props.value;\n        },\n        { immediate: true }\n    );\n\n    const onClearSearch = () => {\n        searchTerm.value = '';\n        emit('clear');\n        emit('input', '');\n    };\n\n    const debouncedEmit = debounce(() => {\n        emit('input', searchTerm.value);\n    }, props.debounceTime);\n\n    const onInputEvent = (value: string) => {\n        searchTerm.value = value;\n        debouncedEmit();\n    };\n\n    const focus = () => {\n        bentoInputField.value.focusInput();\n    };\n\n    // Expose method so that it can be used to focus on the input from outside the component\n    defineExpose({\n        /**\n         * Focus on the input field when called.\n         */\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Search functionality to help users find the desired data quicker.\n     * When a user starts typing, the data is dynamically filtered to\n     * only show the relevant results.\n     *\n     * Clearing the search field displays the entire list again.\n     *\n     * @example\n     * import {\n     *     BentoSearchBar,\n     *     BentoSearchBarData,\n     *     useSearchBarFilter\n     * } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSearchBar },\n     *     template: `\n     *          <bento-search-bar\n     *              input-field-aria-label=\"Search bar\"\n     *              v-model=\"searchTerm\"\n     *              @input=\"onInput\"\n     *              @clear=\"onClearSearch\"\n     *          />\n     *          // Render the filtered data\n     *          {{ filteredData }}\n     *     `,\n     *     setup() {\n     *         const searchTerm = ref('');\n     *         const data = ref<BentoSearchBarData>([]);\n     *         const filteredData = useSearchBarFilter(searchTerm, data);\n     *\n     *         consdt onInput = () => {}\n     *         consdt onClearSearch = () => {}\n     *\n     *         return {\n     *             searchTerm,\n     *             filteredData,\n     *             onInput,\n     *             onClearSearch,\n     *         };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./search-bar.scss\" />\n"],"names":["BentoSearchBarInternalEvent","BentoSearchBarInternalEvent2","BentoSearchBarEvent","BentoSearchBarEvent2","__default__","messages","useI18n","searchTerm","ref","props","bentoInputField","watch","onClearSearch","emit","debouncedEmit","debounce","onInputEvent","value","focus","expose"],"mappings":";;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,SAAA,kBACAA,EAAA,QAAA,SACAA,EAAA,SAAA,sBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,QAAA,gBACAA,EAAA,QAAA,gBACAA,EAAA,SAAA,sBAHQA,IAAAD,KAAA,CAAA,CAAA;;;;;;GCmLRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA7IA,EAAA,EAAA,IAAAC,EAAA,GAwDAC,IAAAC,EAAAC,EAAA,KAAA,GACAC,IAAAF,EAAA;AAEA,IAAAG;AAAA,MAAA,MAAAF,EAAA;AAAA,MACgB,MAAA;AAER,QAAAF,EAAA,QAAAE,EAAA;AAAA,MAAyB;AAAA,MAC7B,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAG,IAAA,MAAA;AACI,MAAAL,EAAA,QAAA,IACAM,EAAA,OAAA,GACAA,EAAA,SAAA,EAAA;AAAA,IAAgB,GAGpBC,IAAAC,EAAA,MAAA;AACI,MAAAF,EAAA,SAAAN,EAAA,KAAA;AAAA,IAA8B,GAAAE,EAAA,YAAA,GAGlCO,IAAA,CAAAC,MAAA;AACI,MAAAV,EAAA,QAAAU,GACAH,EAAA;AAAA,IAAc,GAGlBI,IAAA,MAAA;AACI,MAAAR,EAAA,MAAA,WAAA;AAAA,IAAiC;AAIrC,WAAAS,EAAA;AAAA;AAAA;AAAA;AAAA,MAAa,OAAAD;AAAA,IAIT,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/secondary-nav.js

@@ -1,5 +1,118 @@
-import { s as e } from "./chunks/secondary-nav.CNgpPxUU.js";
+import { defineComponent as i, inject as g, computed as c, ref as C, readonly as I, watch as h, provide as N } from "vue";
+import { B as k } from "./chunks/dropdown.9bee6e1d.js";
+import { a as x } from "./chunks/index.6584f75e.js";
+import { u as S } from "./chunks/i18n.eb5b985b.js";
+import { d as w } from "./chunks/es6.cf6b43e9.js";
+import { B as y } from "./chunks/index.e29a6907.js";
+import { n as u } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index21.css";
+const f = Symbol("secondary nav state"), B = {}, $ = /* @__PURE__ */ i({
+  ...B,
+  __name: "secondary-nav-item",
+  props: {
+    label: null,
+    value: null
+  },
+  emits: ["click"],
+  setup(o, { emit: e }) {
+    const a = o, { activeItemValue: s, updateActiveItemValue: t } = g(f), _ = c(() => ({
+      "b-secondary-nav-item--active": s.value === a.value
+    }));
+    return { __sfc: !0, activeItemValue: s, updateActiveItemValue: t, props: a, conditionalClasses: _, emit: e, onClick: (r) => {
+      e("click", r), t(a.value);
+    }, BentoTypography: y };
+  }
+});
+var V = function() {
+  var e = this, a = e._self._c, s = e._self._setupProxy;
+  return a("button", { staticClass: "b-secondary-nav-item", class: s.conditionalClasses, on: { click: s.onClick } }, [a(s.BentoTypography, { staticClass: "b-secondary-nav-item__title", attrs: { variant: "body", stronger: "" } }, [e._v(" " + e._s(e.label) + " ")])], 1);
+}, A = [], D = /* @__PURE__ */ u(
+  $,
+  V,
+  A,
+  !1,
+  null,
+  "88034e97",
+  null,
+  null
+);
+const b = D.exports, T = {}, F = /* @__PURE__ */ i({
+  ...T,
+  __name: "secondary-nav-category",
+  props: {
+    label: null,
+    items: null
+  },
+  setup(o) {
+    return { __sfc: !0, BentoTypography: y, SecondaryNavItem: b };
+  }
+});
+var M = function() {
+  var e = this, a = e._self._c, s = e._self._setupProxy;
+  return a("section", { staticClass: "b-secondary-nav-category", attrs: { "aria-label": e.label } }, [a(s.BentoTypography, { staticClass: "b-secondary-nav-category__label", attrs: { el: "h1", variant: "caption", stronger: "" } }, [e._v(e._s(e.label))]), a("ul", { staticClass: "b-secondary-nav__list" }, e._l(e.items, function(t) {
+    return a("li", { key: t.value }, [a(s.SecondaryNavItem, { attrs: { label: t.label, value: t.value } })], 1);
+  }), 0)], 1);
+}, O = [], R = /* @__PURE__ */ u(
+  F,
+  M,
+  O,
+  !1,
+  null,
+  "e84d58de",
+  null,
+  null
+);
+const E = R.exports, P = {
+  "en-US": {
+    mobileDropdownAriaLabel: "Navigation options dropdown"
+  }
+}, j = {
+  i18n: { messages: P }
+}, L = /* @__PURE__ */ i({
+  ...j,
+  __name: "secondary-nav",
+  props: {
+    items: null,
+    value: null
+  },
+  emits: ["change"],
+  setup(o, { emit: e }) {
+    const a = o, { t: s } = S(), t = x({
+      s: w
+    }), _ = t.smallerOrEqual("s"), v = c(() => a.items.some((n) => Object.hasOwn(n, "items"))), r = c(() => a.items), d = c(() => {
+      const n = r.value[0];
+      return "items" in n ? n.items[0].value : n.value;
+    }), l = C(a.value ?? d.value), p = (n) => {
+      l.value = n, e("change", n);
+    }, m = {
+      activeItemValue: I(l),
+      updateActiveItemValue: p
+    };
+    return h(
+      () => a.value,
+      (n) => {
+        l.value = n;
+      }
+    ), N(f, m), { __sfc: !0, t: s, breakpoints: t, isMobile: _, props: a, emit: e, hasCategories: v, dropdownItems: r, activeItemValueFallback: d, activeItemValue: l, updateActiveItemValue: p, state: m, SecondaryNavItem: b, SecondaryNavCategory: E, BentoDropdown: k };
+  }
+});
+var q = function() {
+  var e = this, a = e._self._c, s = e._self._setupProxy;
+  return a("nav", { staticClass: "b-secondary-nav" }, [s.isMobile ? a(s.BentoDropdown, { attrs: { "aria-label": s.t("mobileDropdownAriaLabel"), items: s.dropdownItems, "static-categories": s.hasCategories, value: s.activeItemValue }, on: { input: s.updateActiveItemValue } }) : a("ul", { staticClass: "b-secondary-nav__list" }, e._l(e.items, function(t) {
+    return a("li", { key: t.label }, ["items" in t ? a(s.SecondaryNavCategory, { attrs: { label: t.label, items: t.items } }) : a(s.SecondaryNavItem, { attrs: { label: t.label, value: t.value } })], 1);
+  }), 0)], 1);
+}, z = [], Q = /* @__PURE__ */ u(
+  L,
+  q,
+  z,
+  !1,
+  null,
+  "b5af32ec",
+  null,
+  null
+);
+const X = Q.exports;
 export {
-  e as BentoSecondaryNav
+  X as BentoSecondaryNav
 };
 //# sourceMappingURL=secondary-nav.js.map

package/dist/secondary-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"secondary-nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"secondary-nav.js","sources":["../src/components/secondary-nav/secondary-nav.keys.ts","../src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../src/components/secondary-nav/secondary-nav.vue"],"sourcesContent":["import { InjectionKey } from 'vue';\nimport { BentoSecondaryNavState } from './secondary-nav.types';\n\nexport const SECONDARY_NAV_STATE = Symbol('secondary nav state') as InjectionKey<BentoSecondaryNavState>;\n","<template>\n    <button class=\"b-secondary-nav-item\" :class=\"conditionalClasses\" @click=\"onClick\">\n        <bento-typography class=\"b-secondary-nav-item__title\" variant=\"body\" stronger>\n            {{ label }}\n        </bento-typography>\n    </button>\n</template>\n\n<script lang=\"ts\" setup>\n    import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys';\n    import { BentoTypography } from '@/components/typography';\n    import { computed, inject } from 'vue';\n\n    const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE);\n\n    const props = defineProps<{\n        /**\n         * The display name of the navigation item\n         */\n        label: string;\n        /**\n         * The value of this item.\n         */\n        value: string;\n    }>();\n\n    const conditionalClasses = computed(() => ({\n        'b-secondary-nav-item--active': activeItemValue.value === props.value,\n    }));\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when this element is clicked\n         */\n        (e: 'click', clickEvent: MouseEvent): void;\n    }>();\n\n    const onClick = (e: MouseEvent) => {\n        emit('click', e);\n        updateActiveItemValue(props.value);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-item.scss\" />\n","<template>\n    <section class=\"b-secondary-nav-category\" :aria-label=\"label\">\n        <bento-typography el=\"h1\" class=\"b-secondary-nav-category__label\" variant=\"caption\" stronger>{{\n            label\n        }}</bento-typography>\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.value\">\n                <secondary-nav-item :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </section>\n</template>\n\n<script lang=\"ts\" setup>\n    import { BentoTypography } from '@/components/typography';\n    import { SecondaryNavItem } from '../secondary-nav-item';\n    import { BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n\n    defineProps<{\n        /**\n         * The display name of the category\n         */\n        label: string;\n        /**\n         * A list of {@see BentoSecondaryNavItemsItem} that belongs to this category\n         */\n        items: BentoSecondaryNavItemsItem[];\n    }>();\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-category.scss\" />\n","<template>\n    <nav class=\"b-secondary-nav\">\n        <bento-dropdown\n            v-if=\"isMobile\"\n            :aria-label=\"t('mobileDropdownAriaLabel')\"\n            :items=\"dropdownItems\"\n            :static-categories=\"hasCategories\"\n            :value=\"activeItemValue\"\n            @input=\"updateActiveItemValue\"\n        />\n        <ul v-else class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.label\">\n                <secondary-nav-category v-if=\"'items' in item\" :label=\"item.label\" :items=\"item.items\" />\n                <secondary-nav-item v-else :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, readonly, ref, watch } from 'vue';\n    import { SecondaryNavItem } from './components/secondary-nav-item';\n    import { SecondaryNavCategory } from './components/secondary-nav-category';\n    import { SECONDARY_NAV_STATE } from './secondary-nav.keys';\n    import { BentoSecondaryNavItems, BentoSecondaryNavState } from './secondary-nav.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoListboxOptions } from '@/types';\n    import { BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\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 breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n    });\n\n    const isMobile = breakpoints.smallerOrEqual('s');\n    const props = defineProps<{\n        /**\n         * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },\n         * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.\n         */\n        items: BentoSecondaryNavItems;\n        /**\n         * The value of the selected item.\n         * If nothing is passed, it defaults to the first item value in items.\n         */\n        value?: string;\n    }>();\n\n    const emit = defineEmits<{\n        /**\n         * Emmited when the current selected item changes\n         */\n        (e: 'change', category: string): void;\n    }>();\n\n    const hasCategories = computed(() => props.items.some(item => Object.hasOwn(item, 'items')));\n    const dropdownItems = computed(() => props.items as BentoListboxOptions);\n\n    const activeItemValueFallback = computed(() => {\n        const firstDropdownItem = (dropdownItems.value as BentoSecondaryNavItems)[0];\n\n        if ('items' in firstDropdownItem) {\n            return firstDropdownItem.items[0].value;\n        } else {\n            return firstDropdownItem.value;\n        }\n    });\n    const activeItemValue = ref(props.value ?? activeItemValueFallback.value);\n    const updateActiveItemValue = (value: string) => {\n        activeItemValue.value = value;\n        emit('change', value);\n    };\n\n    // The component's state is inject on `secondary-nav-item` to determine the\n    // current active item and to change its value\n    const state: BentoSecondaryNavState = {\n        activeItemValue: readonly(activeItemValue),\n        updateActiveItemValue,\n    };\n\n    watch(\n        () => props.value,\n        value => {\n            activeItemValue.value = value;\n        }\n    );\n\n    provide(SECONDARY_NAV_STATE, state);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Secondary Nav offers users a structured way to access information.\n     * It also provides a clear hierarchy for users to understand and navigate through various information.\n     *\n     * @example\n     * import { BentoSecondaryNav } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSecondaryNav },\n     *     template: `\n     *          <bento-secondary-nav :value=\"value\" :items=\"items\" />\n     *     `,\n     *     setup() {\n     *         const value = ref(2) // Active item value\n     *         const items: BentoSecondaryNavItemInfo[] = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { items, value };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav.scss\" />\n"],"names":["SECONDARY_NAV_STATE","__default__$2","activeItemValue","updateActiveItemValue","inject","conditionalClasses","computed","props","e","emit","__default__$1","__default__","messages","t","useI18n","breakpoints","useBreakpoints","BMediaQuerySMax","isMobile","hasCategories","item","dropdownItems","activeItemValueFallback","firstDropdownItem","ref","value","state","readonly","watch","provide"],"mappings":";;;;;;;;AAGa,MAAAA,IAAA,OAAA,qBAAA,GC4CTC,IAAA,CAAA;;;;;;;;;iBAlCA,EAAA,iBAAAC,GAAA,uBAAAC,EAAA,IAAAC,EAAAJ,CAAA,GAaAK,IAAAC,EAAA,OAAA;AAAA,MAA2C,gCAAAJ,EAAA,UAAAK,EAAA;AAAA,IACyB,EAAA;yHAUpE,CAAAC,MAAA;AACI,MAAAC,EAAA,SAAAD,CAAA,GACAL,EAAAI,EAAA,KAAA;AAAA,IAAiC;;;;;;;;;;;;;;;;qBCLrCG,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCsFAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;iBAvFA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA;AAAA,MAAmC,GAAAC;AAAA,IAC5B,CAAA,GAGPC,IAAAH,EAAA,eAAA,GAAA,GAqBAI,IAAAb,EAAA,MAAAC,EAAA,MAAA,KAAA,CAAAa,MAAA,OAAA,OAAAA,GAAA,OAAA,CAAA,CAAA,GACAC,IAAAf,EAAA,MAAAC,EAAA,KAAA,GAEAe,IAAAhB,EAAA,MAAA;AACI,YAAAiB,IAAAF,EAAA,MAAA,CAAA;AAEA,aAAA,WAAAE,IACIA,EAAA,MAAA,CAAA,EAAA,QAEAA,EAAA;AAAA,IACJ,CAAA,GAEJrB,IAAAsB,EAAAjB,EAAA,SAAAe,EAAA,KAAA,GACAnB,IAAA,CAAAsB,MAAA;AACI,MAAAvB,EAAA,QAAAuB,GACAhB,EAAA,UAAAgB,CAAA;AAAA,IAAoB,GAKxBC,IAAA;AAAA,MAAsC,iBAAAC,EAAAzB,CAAA;AAAA,MACO,uBAAAC;AAAA,IACzC;AAGJ,WAAAyB;AAAA,MAAA,MAAArB,EAAA;AAAA,MACgB,CAAAkB,MAAA;AAER,QAAAvB,EAAA,QAAAuB;AAAA,MAAwB;AAAA,IAC5B,GAGJI,EAAA7B,GAAA0B,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/segmented-control.js

@@ -1,7 +1,7 @@
-import { B as t } from "./chunks/segmented-control.DGjIC7Ab.js";
-import { B as r } from "./chunks/segmented-control.types.BHRLV8KU.js";
+import { B as a } from "./chunks/segmented-control.9f657859.js";
+var o = /* @__PURE__ */ ((e) => (e.UPDATE = "update:model-value", e))(o || {});
 export {
-  t as BentoSegmentedControl,
-  r as BentoSegmentedControlEvent
+  a as BentoSegmentedControl,
+  o as BentoSegmentedControlEvent
 };
 //# sourceMappingURL=segmented-control.js.map

package/dist/segmented-control.js.map

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

package/dist/selection-card.js

@@ -1,7 +1,251 @@
-import { B as t, s as a, a as n } from "./chunks/selection-card-group.DlOs8BkR.js";
+import { defineComponent as A, useSlots as M, computed as n, inject as P, ref as p, watch as z, provide as Y } from "vue";
+import { B as j } from "./chunks/index.e29a6907.js";
+import { u as F } from "./chunks/aria-label.ac9651a5.js";
+import { g as k } from "./chunks/unique-id.a2a2b458.js";
+import { u as U } from "./chunks/use-has-slot.fbeb19ec.js";
+import { a as H } from "./chunks/checkbox-input.5ab6ebe7.js";
+import { a as J } from "./chunks/radio-input.e34c0fa8.js";
+import { n as $ } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { C as K } from "./chunks/controls-group.6b05fbb4.js";
+import { E as Q } from "./chunks/error-message.af88c25f.js";
+import "./assets/index22.css";
+var b = /* @__PURE__ */ ((l) => (l.DISABLED = "disabled", l.READONLY = "readonly", l.ERROR = "error", l))(b || {});
+const G = Symbol("selection card radio input injection key"), W = {
+  name: "bento-selection-card"
+}, X = /* @__PURE__ */ A({
+  ...W,
+  props: {
+    /**
+     * The description of the selection card
+     */
+    description: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Disables the selection card
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Shows the selection card in error state
+     */
+    hasError: { type: Boolean, default: !1 },
+    /**
+     * This property should not be used directly.
+     * It will be used by v-model directive on selection card component.
+     *
+     * When handling a single input, use a string or a number.
+     *
+     * When handling multiple inputs, use an array of keys.
+     * These keys exist as a set "value" prop for each input.
+     */
+    modelValue: {
+      type: [Boolean, String, Array],
+      default: null
+    },
+    /**
+     * Sets the selection card to readonly
+     */
+    readonly: { type: Boolean, default: !1 },
+    /**
+     * The subtitle of the selection card
+     */
+    subtitle: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The title of the selection card
+     */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Indicates the value of the input that will be returned when it's checked.
+     */
+    value: {
+      type: [String, Number],
+      required: !0
+    }
+  },
+  emits: ["input", "update:model-value"],
+  setup(l, { emit: e }) {
+    const t = l, o = M(), a = U(o), C = k("selection-card-input-id"), d = k("selection-card-description"), m = n(
+      () => t.modelValue
+    ), v = n(
+      () => t.modelValue
+    ), h = n(() => ({
+      "b-selection-card--checked": R.value
+    })), _ = n(() => ({
+      [`b-selection-card--${b.DISABLED}`]: t.disabled,
+      [`b-selection-card--${b.ERROR}`]: t.hasError,
+      [`b-selection-card--${b.READONLY}`]: t.readonly,
+      "b-selection-card--center-aligned": f.value
+    })), s = n(() => ({
+      "b-selection-card__checkbox-container--center-aligned": f.value
+    })), D = n(() => ({
+      "b-selection-card__checkbox-container-text--center-aligned": f.value
+    })), O = n(() => ({
+      "b-selection-card__slot--with-icon": a("icon")
+    })), N = F({
+      ariaLabel: t.title,
+      label: t.value
+    }), g = n(() => Array.isArray(t.modelValue)), R = n(() => x.value ? t.value === t.modelValue : g.value ? t.modelValue.some((r) => r === t.value) : t.modelValue), x = P(G, p(!1)), f = n(() => !t.subtitle && !t.description), y = p(null), I = p(null), S = p(null), q = (r) => {
+      var c, i, u, B, T, L;
+      if (!t.disabled && !t.readonly) {
+        if (I.value && ((i = (c = I.value) == null ? void 0 : c.$el) != null && i.contains(r.target)) || S.value && ((B = (u = S.value) == null ? void 0 : u.$el) != null && B.contains(r.target)) || y.value && ((L = (T = y.value) == null ? void 0 : T.$el) != null && L.contains(r.target)))
+          return;
+        const w = E();
+        V(w);
+      }
+    }, E = () => {
+      var c;
+      const r = ((c = y.value) == null ? void 0 : c.$refs.inputRef).checked;
+      if (g.value) {
+        const i = [...t.modelValue], u = i.indexOf(t.value);
+        return u === -1 ? i.push(t.value) : i.splice(u, 1), i;
+      }
+      return x.value ? t.value : !r;
+    }, V = (r) => {
+      !t.disabled && !t.readonly && (e("update:model-value", r), e("input", r));
+    };
+    return { __sfc: !0, props: t, emit: e, slots: o, hasSlot: a, inputId: C, descriptionId: d, computedRadioInputModelValue: m, computedCheckboxInputModelValue: v, conditionalClasses: h, containerConditionalClasses: _, checkboxContainerConditionalClasses: s, checkboxContainerTextConditionalClasses: D, slotConditionalClasses: O, ariaLabel: N, isCheckboxGroup: g, isChecked: R, isRadioInput: x, isTitleOnly: f, inputRef: y, slotRef: I, dynamicSlotRef: S, handleCardClick: q, toggleInput: E, onChange: V, BentoTypography: j, CheckboxInput: H, RadioInput: J };
+  }
+});
+var Z = function() {
+  var e = this, t = e._self._c, o = e._self._setupProxy;
+  return t("div", { staticClass: "b-selection-card", class: o.conditionalClasses, on: { click: o.handleCardClick } }, [t("div", { staticClass: "b-selection-card__container", class: o.containerConditionalClasses }, [t("div", { staticClass: "b-selection-card__checkbox-container", class: o.checkboxContainerConditionalClasses }, [t("div", { staticClass: "b-selection-card__checkbox-container-text", class: o.checkboxContainerTextConditionalClasses }, [o.hasSlot("icon") ? t("div", { staticClass: "b-selection-card__icon", attrs: { role: "presentation" } }, [e._t("icon")], 2) : e._e(), t("label", { staticClass: "b-selection-card__text", attrs: { for: o.inputId }, on: { click: function(a) {
+    return a.stopPropagation(), a.preventDefault(), o.handleCardClick.apply(null, arguments);
+  } } }, [e.subtitle ? t(o.BentoTypography, { staticClass: "b-selection-card__description", attrs: { el: "span", variant: "caption" } }, [e._v(e._s(e.subtitle))]) : e._e(), t(o.BentoTypography, { attrs: { el: "span", variant: "title" } }, [e._v(e._s(e.title))]), e.description ? t(o.BentoTypography, { staticClass: "b-selection-card__description", attrs: { id: "descriptionId", el: "span", variant: "body" } }, [e._v(" " + e._s(e.description) + " ")]) : e._e()], 1)]), o.isRadioInput ? t(o.RadioInput, { ref: "inputRef", attrs: { id: o.inputId, "aria-label": o.ariaLabel, "aria-describedby": e.description ? o.descriptionId : void 0, disabled: e.disabled, "has-error": e.hasError, "aria-readonly": e.readonly ?? void 0, value: e.value, readonly: e.readonly, "model-value": o.computedRadioInputModelValue }, on: { "update:model-value": o.onChange } }) : t(o.CheckboxInput, { ref: "inputRef", attrs: { id: o.inputId, "aria-label": o.ariaLabel, "aria-describedby": e.description ? o.descriptionId : void 0, disabled: e.disabled, "has-error": e.hasError, "aria-readonly": e.readonly ?? void 0, value: e.value, readonly: e.readonly, "model-value": o.computedCheckboxInputModelValue }, on: { "update:model-value": o.onChange } })], 1), o.hasSlot("content") ? t(o.BentoTypography, { ref: "slotRef", staticClass: "b-selection-card__slot", class: o.slotConditionalClasses, attrs: { el: "div" } }, [e._t("content")], 2) : e._e(), o.hasSlot("dynamicContent") && o.isChecked ? t(o.BentoTypography, { ref: "dynamicSlotRef", staticClass: "b-selection-card__slot", class: o.slotConditionalClasses, attrs: { el: "div" } }, [e._t("dynamicContent")], 2) : e._e()], 1)]);
+}, ee = [], te = /* @__PURE__ */ $(
+  X,
+  Z,
+  ee,
+  !1,
+  null,
+  "ab05c459",
+  null,
+  null
+);
+const oe = te.exports, ae = {}, ne = /* @__PURE__ */ A({
+  ...ae,
+  __name: "selection-card-group",
+  props: {
+    /**
+     * Descriptive supporting text visbile underneath the label.
+     */
+    description: { type: String, default: null },
+    /**
+     * If set to true, renders all cards in the group in a disabled state.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Renders all cards in an error state with an error message.
+     */
+    errorMessage: { type: String, default: null },
+    /**
+     * The form id the selection card group is associated with. Defaults to null, as a selection card group can also be used standalone.
+     */
+    formId: { type: String, default: null },
+    /**
+     * Shows/hides the group label.
+     */
+    hideLabel: { type: Boolean, default: null },
+    /**
+     * Label of the group. Required for accessibility purposes, even if it's not shown
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The selection card group's layout. It can be vertical or horizontal. Defaults to vertical.
+     * @values horizontal, vertical
+     */
+    layout: {
+      type: String,
+      default: "vertical"
+    },
+    /**
+     * The selection card group's items.
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Determines the initially selected value of the group. Corresponds to the BentoSelectionCardItem's value.
+     * Defaults to no value selected.
+     */
+    modelValue: {
+      type: [Array, String, Number],
+      default: null
+    },
+    /**
+     * Indicates the field is optional.
+     */
+    optional: { type: Boolean, default: !1 },
+    /**
+     * Indicates the field is required.
+     */
+    required: { type: Boolean, default: !1 },
+    /**
+     * Tooltip message.
+     */
+    tooltipText: { type: String, default: null },
+    /**
+     * If set to true, renders all cards in the group in a readonly state.
+     */
+    readonly: { type: Boolean, default: !1 },
+    /**
+     * Renders the cards with a checkbox or a radio input. Selection logic will also apply in accordance.
+     * @values checkbox, radio
+     */
+    variant: { type: String, default: "checkbox" }
+  },
+  emits: ["input", "update:model-value"],
+  setup(l, { emit: e }) {
+    const t = l, o = M(), a = (s) => !!o[s], C = n(() => ({
+      "b-selection-card-group__items--horizontal": t.layout === "horizontal"
+    })), d = p(t.modelValue);
+    z(
+      () => t.modelValue,
+      () => {
+        d.value = t.modelValue;
+      }
+    );
+    const m = k("error"), v = n(() => !t.disabled && !t.readonly && !!t.errorMessage), h = (s) => {
+      d.value = s, e("update:model-value", s), e("input", s);
+    }, _ = n(() => t.variant === "radio");
+    return Y(G, _), { __sfc: !0, props: t, emit: e, slots: o, hasSlot: a, conditionalItemsClasses: C, inputValue: d, errorMessageId: m, shouldShowGroupError: v, onInput: h, isRadioVariant: _, BentoSelectionCard: oe, ControlsGroup: K, ErrorMessage: Q };
+  }
+});
+var le = function() {
+  var e = this, t = e._self._c, o = e._self._setupProxy;
+  return t(o.ControlsGroup, { staticClass: "b-selection-card-group", attrs: { "aria-describedby": o.shouldShowGroupError ? o.errorMessageId : null, label: e.label, "hide-label": e.hideLabel, description: e.description, disabled: e.disabled, "tooltip-text": e.tooltipText, readonly: e.readonly, required: e.required, optional: e.optional, "component-name": "selection-card-group" } }, [t("div", { staticClass: "b-selection-card-group__items", class: o.conditionalItemsClasses }, e._l(e.items, function(a) {
+    return t(o.BentoSelectionCard, e._b({ key: `selection-card-${a.value}`, staticClass: "b-selection-card-group__item", attrs: { "model-value": o.inputValue, readonly: e.readonly || a.readonly, "has-error": o.shouldShowGroupError, disabled: e.disabled || a.disabled }, on: { "update:model-value": o.onInput }, scopedSlots: e._u([o.hasSlot("icon") && a.icon ? { key: "icon", fn: function() {
+      return [e._t("icon", null, null, a)];
+    }, proxy: !0 } : null, o.hasSlot("content") && a.content ? { key: "content", fn: function() {
+      return [e._t("content", null, null, a)];
+    }, proxy: !0 } : null, o.hasSlot("dynamicContent") && a.dynamicContent ? { key: "dynamicContent", fn: function() {
+      return [e._t("dynamicContent", null, null, a)];
+    }, proxy: !0 } : null], null, !0) }, "bento-selection-card", a, !1));
+  }), 1), o.shouldShowGroupError ? t(o.ErrorMessage, { staticClass: "b-selection-card-group__error-message", attrs: { id: o.errorMessageId, "error-message": e.errorMessage } }) : e._e()], 1);
+}, re = [], se = /* @__PURE__ */ $(
+  ne,
+  le,
+  re,
+  !1,
+  null,
+  "eda15615",
+  null,
+  null
+);
+const me = se.exports;
 export {
-  t as BentoSelectionCard,
-  a as BentoSelectionCardGroup,
-  n as BentoSelectionCardState
+  oe as BentoSelectionCard,
+  me as BentoSelectionCardGroup,
+  b as BentoSelectionCardState
 };
 //# sourceMappingURL=selection-card.js.map

package/dist/selection-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection-card.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"selection-card.js","sources":["../src/components/selection-card/selection-card.types.ts","../src/components/selection-card/selection-card.keys.ts","../src/components/selection-card/selection-card.vue","../src/components/selection-card/components/selection-card-group/selection-card-group.vue"],"sourcesContent":["import { RadioInputValue } from '../internal/radio-input';\nimport { BentoCheckboxType } from '../checkbox';\nimport { VueNodeElement } from '@/types';\n\nexport enum BentoSelectionCardState {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n}\n\nexport type BentoSelectionCardValue = string | number;\n\nexport type BentoSelectionCardModelValue = BentoCheckboxType | RadioInputValue;\n\nexport interface BentoSelectionCardItem {\n    content?: string | object;\n    description?: string;\n    disabled?: boolean;\n    dynamicContent?: string | object;\n    hasError?: boolean;\n    icon?: VueNodeElement;\n    readonly?: boolean;\n    subtitle?: string;\n    title: string;\n    value: BentoSelectionCardValue;\n}\n","export const SELECTION_CARD_RADIO_INPUT_INJECTION_KEY = Symbol('selection card radio input injection key');\n","<template>\n    <div class=\"b-selection-card\" :class=\"conditionalClasses\" @click=\"handleCardClick\">\n        <div class=\"b-selection-card__container\" :class=\"containerConditionalClasses\">\n            <div class=\"b-selection-card__checkbox-container\" :class=\"checkboxContainerConditionalClasses\">\n                <div class=\"b-selection-card__checkbox-container-text\" :class=\"checkboxContainerTextConditionalClasses\">\n                    <div v-if=\"hasSlot('icon')\" class=\"b-selection-card__icon\" role=\"presentation\">\n                        <slot name=\"icon\" />\n                    </div>\n                    <label :for=\"inputId\" class=\"b-selection-card__text\" @click.stop.prevent=\"handleCardClick\">\n                        <bento-typography\n                            v-if=\"subtitle\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"caption\"\n                            >{{ subtitle }}</bento-typography\n                        >\n                        <bento-typography el=\"span\" variant=\"title\">{{ title }}</bento-typography>\n                        <bento-typography\n                            v-if=\"description\"\n                            id=\"descriptionId\"\n                            class=\"b-selection-card__description\"\n                            el=\"span\"\n                            variant=\"body\"\n                        >\n                            {{ description }}\n                        </bento-typography>\n                    </label>\n                </div>\n                <radio-input\n                    v-if=\"isRadioInput\"\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedRadioInputModelValue\"\n                    @update:model-value=\"onChange\"\n                />\n                <checkbox-input\n                    v-else\n                    :id=\"inputId\"\n                    ref=\"inputRef\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-describedby=\"description ? descriptionId : undefined\"\n                    :disabled=\"disabled\"\n                    :has-error=\"hasError\"\n                    :aria-readonly=\"readonly ?? undefined\"\n                    :value=\"value\"\n                    :readonly=\"readonly\"\n                    :model-value=\"computedCheckboxInputModelValue\"\n                    @update:model-value=\"onChange\"\n                />\n            </div>\n            <bento-typography\n                v-if=\"hasSlot('content')\"\n                ref=\"slotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"content\" />\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('dynamicContent') && isChecked\"\n                ref=\"dynamicSlotRef\"\n                el=\"div\"\n                class=\"b-selection-card__slot\"\n                :class=\"slotConditionalClasses\"\n            >\n                <slot name=\"dynamicContent\" />\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { BentoCheckboxType, BentoMultiCheckboxType, CheckboxInput } from '../internal/checkbox-input';\n    import { RadioInput, RadioInputValue } from '../internal/radio-input';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { computed, ComputedRef, inject, PropType, Ref, ref, useSlots } from 'vue';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSelectionCardModelValue, BentoSelectionCardValue } from './selection-card.types';\n    import { BentoSelectionCardState } from './selection-card.types';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from './selection-card.keys';\n\n    const props = defineProps({\n        /**\n         * The description of the selection card\n         */\n        description: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Disables the selection card\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Shows the selection card in error state\n         */\n        hasError: { type: Boolean, default: false },\n\n        /**\n         * This property should not be used directly.\n         * It will be used by v-model directive on selection card component.\n         *\n         * When handling a single input, use a string or a number.\n         *\n         * When handling multiple inputs, use an array of keys.\n         * These keys exist as a set \"value\" prop for each input.\n         */\n        modelValue: {\n            type: [Boolean, String, Array] as PropType<BentoSelectionCardModelValue>,\n            default: null,\n        },\n\n        /**\n         * Sets the selection card to readonly\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The subtitle of the selection card\n         */\n        subtitle: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * The title of the selection card\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * Indicates the value of the input that will be returned when it's checked.\n         */\n        value: {\n            type: [String, Number] as PropType<BentoSelectionCardValue>,\n            required: true,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the selection card is clicked. Enables Vue2 \"v-model\"\n         */\n        (e: 'input', value: BentoSelectionCardValue);\n        /**\n         * Emitted when the selection card is clicked. Enables Vue3 \"v-model\"\n         */\n        (e: 'update:model-value', value: BentoSelectionCardValue);\n    }>();\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const inputId = generateUid('selection-card-input-id');\n    const descriptionId = generateUid('selection-card-description');\n\n    const computedRadioInputModelValue: ComputedRef<RadioInputValue> = computed(\n        () => props.modelValue as RadioInputValue\n    );\n    const computedCheckboxInputModelValue: ComputedRef<BentoCheckboxType> = computed(\n        () => props.modelValue as BentoCheckboxType\n    );\n\n    const conditionalClasses = computed(() => ({\n        'b-selection-card--checked': isChecked.value,\n    }));\n\n    const containerConditionalClasses = computed(() => ({\n        [`b-selection-card--${BentoSelectionCardState.DISABLED}`]: props.disabled,\n        [`b-selection-card--${BentoSelectionCardState.ERROR}`]: props.hasError,\n        [`b-selection-card--${BentoSelectionCardState.READONLY}`]: props.readonly,\n        'b-selection-card--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container--center-aligned': isTitleOnly.value,\n    }));\n\n    const checkboxContainerTextConditionalClasses = computed(() => ({\n        'b-selection-card__checkbox-container-text--center-aligned': isTitleOnly.value,\n    }));\n\n    const slotConditionalClasses = computed(() => ({\n        'b-selection-card__slot--with-icon': hasSlot('icon'),\n    }));\n\n    const ariaLabel = useAriaLabel({\n        ariaLabel: props.title,\n        label: props.value as string,\n    });\n\n    const isCheckboxGroup = computed(() => Array.isArray(props.modelValue));\n\n    const isChecked: ComputedRef<boolean> = computed(() => {\n        if (isRadioInput.value) {\n            return props.value === props.modelValue;\n        }\n        if (!isCheckboxGroup.value) {\n            return props.modelValue as boolean;\n        }\n\n        return (props.modelValue as BentoMultiCheckboxType).some(item => item === props.value);\n    });\n\n    const isRadioInput: Ref<boolean> = inject(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, ref(false));\n\n    const isTitleOnly = computed(() => !props.subtitle && !props.description);\n\n    const inputRef = ref<InstanceType<typeof RadioInput> | InstanceType<typeof CheckboxInput>>(null);\n    const slotRef = ref(null);\n    const dynamicSlotRef = ref(null);\n    // Handle click on the whole card area\n    const handleCardClick = event => {\n        if (!props.disabled && !props.readonly) {\n            // Check if the click originated from the slot - in that case, do nothng\n            if (slotRef.value && slotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the dynamic slot - in that case, do nothng\n            if (dynamicSlotRef.value && dynamicSlotRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n            // Check if the click originated from the input - in that case do nothing, as the input will emit the event already\n            if (inputRef.value && inputRef.value?.$el?.contains(event.target)) {\n                return;\n            }\n\n            // If the click originated outside of these two areas, emit the change event\n            const newValue = toggleInput();\n\n            onChange(newValue);\n        }\n    };\n\n    const toggleInput = (): BentoSelectionCardModelValue => {\n        const currentValue: boolean = (inputRef.value?.$refs.inputRef as HTMLInputElement).checked;\n\n        if (isCheckboxGroup.value) {\n            const newCheckedList = [...(props.modelValue as BentoMultiCheckboxType)];\n            const index = newCheckedList.indexOf(props.value);\n\n            if (index === -1) {\n                newCheckedList.push(props.value);\n            } else {\n                newCheckedList.splice(index, 1);\n            }\n            return newCheckedList;\n        }\n\n        if (isRadioInput.value) {\n            return props.value;\n        }\n        return !currentValue;\n    };\n\n    const onChange = newValue => {\n        if (!props.disabled && !props.readonly) {\n            emit('update:model-value', newValue);\n            emit('input', newValue);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Selection card component. If used standalone, only the checkbox variant can be used. If the checkbox variant is needed, please use the bento-selection-card-group component.\n     *\n     * @example\n     * import { BentoSelectionCard } from '@adyen/bento-vue2';\n     * import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy';\n     *\n     * export default {\n     *     components: { BentoSelectionCard, EmoticonHappyIcon },\n     *     template: `\n     *          <bento-selection-card title=\"Card title\" :model-value.sync=\"yourModelValue\">\n     *              <template #icon>\n     *                  <emoticon-happy-icon />\n     *              </template>\n     *          </bento-selection-card>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-selection-card',\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./selection-card.scss\" />\n","<template>\n    <controls-group\n        :aria-describedby=\"shouldShowGroupError ? errorMessageId : null\"\n        :label=\"label\"\n        :hide-label=\"hideLabel\"\n        :description=\"description\"\n        :disabled=\"disabled\"\n        :tooltip-text=\"tooltipText\"\n        :readonly=\"readonly\"\n        :required=\"required\"\n        :optional=\"optional\"\n        class=\"b-selection-card-group\"\n        component-name=\"selection-card-group\"\n    >\n        <div class=\"b-selection-card-group__items\" :class=\"conditionalItemsClasses\">\n            <bento-selection-card\n                v-for=\"item in items\"\n                :key=\"`selection-card-${item.value}`\"\n                class=\"b-selection-card-group__item\"\n                v-bind=\"item\"\n                :model-value=\"inputValue\"\n                :readonly=\"readonly || item.readonly\"\n                :has-error=\"shouldShowGroupError\"\n                :disabled=\"disabled || item.disabled\"\n                @update:model-value=\"onInput\"\n            >\n                <template v-if=\"hasSlot('icon') && item.icon\" #icon>\n                    <slot name=\"icon\" v-bind=\"item\"></slot>\n                </template>\n                <template v-if=\"hasSlot('content') && item.content\" #content>\n                    <slot name=\"content\" v-bind=\"item\"></slot>\n                </template>\n                <template v-if=\"hasSlot('dynamicContent') && item.dynamicContent\" #dynamicContent>\n                    <slot name=\"dynamicContent\" v-bind=\"item\"></slot>\n                </template>\n            </bento-selection-card>\n        </div>\n        <error-message\n            v-if=\"shouldShowGroupError\"\n            :id=\"errorMessageId\"\n            :error-message=\"errorMessage\"\n            class=\"b-selection-card-group__error-message\"\n        />\n    </controls-group>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, ref, useSlots, watch } from 'vue';\n    import { BentoSelectionCardGroupLayout, BentoSelectionCardGroupVariant } from './selection-card-group.types';\n    import BentoSelectionCard from '../../selection-card.vue';\n    import { ControlsGroup, ErrorMessage } from '../../../internal';\n    import { BentoSelectionCardItem, BentoSelectionCardModelValue } from '../../selection-card.types';\n    import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys';\n    import { generateUid } from '@/utils/ts/unique-id';\n\n    const props = defineProps({\n        /**\n         * Descriptive supporting text visbile underneath the label.\n         */\n        description: { type: String, default: null },\n\n        /**\n         * If set to true, renders all cards in the group in a disabled state.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Renders all cards in an error state with an error message.\n         */\n        errorMessage: { type: String, default: null },\n\n        /**\n         * The form id the selection card group is associated with. Defaults to null, as a selection card group can also be used standalone.\n         */\n        formId: { type: String, default: null },\n\n        /**\n         * Shows/hides the group label.\n         */\n        hideLabel: { type: Boolean, default: null },\n\n        /**\n         * Label of the group. Required for accessibility purposes, even if it's not shown\n         */\n        label: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * The selection card group's layout. It can be vertical or horizontal. Defaults to vertical.\n         * @values horizontal, vertical\n         */\n        layout: {\n            type: String as PropType<BentoSelectionCardGroupLayout>,\n            default: 'vertical',\n        },\n\n        /**\n         * The selection card group's items.\n         */\n        items: {\n            type: Array as PropType<BentoSelectionCardItem[]>,\n            required: true,\n        },\n        /**\n         * Determines the initially selected value of the group. Corresponds to the BentoSelectionCardItem's value.\n         * Defaults to no value selected.\n         */\n        modelValue: {\n            type: [Array, String, Number] as PropType<BentoSelectionCardModelValue>,\n            default: null,\n        },\n\n        /**\n         * Indicates the field is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * Indicates the field is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\n        /**\n         * If set to true, renders all cards in the group in a readonly state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Renders the cards with a checkbox or a radio input. Selection logic will also apply in accordance.\n         * @values checkbox, radio\n         */\n        variant: { type: String as PropType<BentoSelectionCardGroupVariant>, default: 'checkbox' },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the selection card is clicked. Enables Vue2 \"v-model\"\n         */\n        (e: 'input', value: BentoSelectionCardModelValue);\n        /**\n         * Emitted when the selection card is clicked. Enables Vue3 \"v-model\"\n         */\n        (e: 'update:model-value', value: BentoSelectionCardModelValue);\n    }>();\n    const slots = useSlots();\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots\n    // We do the same in bento-checkbox-group\n    const hasSlot = name => !!slots[name];\n\n    const conditionalItemsClasses = computed(() => ({\n        'b-selection-card-group__items--horizontal': props.layout === 'horizontal',\n    }));\n\n    const inputValue = ref(props.modelValue);\n    watch(\n        () => props.modelValue,\n        () => {\n            inputValue.value = props.modelValue;\n        }\n    );\n\n    // Error message logic\n    const errorMessageId = generateUid('error');\n    const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n    const onInput = value => {\n        inputValue.value = value;\n        emit('update:model-value', value);\n        emit('input', value);\n    };\n\n    const isRadioVariant = computed(() => props.variant === 'radio');\n\n    provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Group of bento-selection-cards.\n     *\n     * @example\n     * import { BentoSelectionCardGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSelectionCardGroup },\n     *     template: `\n     *          <bento-selection-card-group\n     *              :items=\"[\n     *                    {\n     *                        title: 'Card 1',\n     *                        value: 'card-1',\n     *                        content: 'Slot content 1',\n     *                        icon: RetailIcon,\n     *                    },\n     *                    {\n     *                        title: 'Card 2',\n     *                        value: 'card-2',\n     *                        content: 'Slot content 2',\n     *                        icon: LeafIcon,\n     *                    },\n     *                ]\"\n     *          >\n     *             <template #icon=\"{ icon }\">\n     *                 <component :is=\"icon\"/>\n     *              </template>\n     *              <template #content=\"{ content }\">\n     *                  <div>{{ content }}</div>\n     *               </template>\n     *          </bento-selection-card-group>\n     *     `,\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./selection-card-group.scss\" />\n"],"names":["BentoSelectionCardState","BentoSelectionCardState2","SELECTION_CARD_RADIO_INPUT_INJECTION_KEY","__default__$1","slots","useSlots","hasSlot","useHasSlot","inputId","generateUid","descriptionId","computedRadioInputModelValue","computed","props","computedCheckboxInputModelValue","conditionalClasses","isChecked","containerConditionalClasses","isTitleOnly","checkboxContainerConditionalClasses","checkboxContainerTextConditionalClasses","slotConditionalClasses","ariaLabel","useAriaLabel","isCheckboxGroup","isRadioInput","item","inject","ref","inputRef","slotRef","dynamicSlotRef","handleCardClick","event","_b","_a","_d","_c","_f","_e","newValue","toggleInput","onChange","currentValue","newCheckedList","index","emit","__default__","name","conditionalItemsClasses","inputValue","watch","errorMessageId","shouldShowGroupError","onInput","value","isRadioVariant","provide"],"mappings":"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"}