@adyen/bento-vue3 1.3.0 → 1.4.0

package/dist/search-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-bar.js","sources":["../../vue2/src/components/search-bar/search-bar.types.ts","../../vue2/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=\"BentoInputFieldType.SEARCH\"\n            :aria-label=\"inputFieldAriaLabel\"\n            :aria-hidden=\"false\"\n            :placeholder=\"placeholder\"\n            @input=\"onInputEvent\"\n            @escape-pressed=\"$emit(BentoSearchBarInternalEvent.ESCAPE)\"\n        >\n            <template #defaultIconBefore>\n                <search-icon :svg-title=\"$t('search')\" />\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 lang=\"ts\">\n    import { defineComponent, ref, watch } from 'vue';\n    import { BentoInputFieldType } from '@/components/input-field/input-field.types';\n    import { debounce } from '@/utils/ts/debounce';\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 { BentoSearchBarInternalEvent } from './search-bar.types';\n    import messages from './messages.json';\n\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-search=\"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 defineComponent({\n        name: 'bento-search-bar',\n        i18n: { messages },\n        components: {\n            CrossCircleFillIcon,\n            BentoInputField,\n            SearchIcon,\n        },\n        props: {\n            /**\n             * Text that labels an the search bar input element\n             */\n            inputFieldAriaLabel: { type: String, required: true },\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        emits: [\n            BentoSearchBarInternalEvent.INPUT,\n            BentoSearchBarInternalEvent.CLEAR,\n            BentoSearchBarInternalEvent.ESCAPE,\n        ],\n        setup(props, { emit }) {\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(BentoSearchBarInternalEvent.CLEAR);\n                emit(BentoSearchBarInternalEvent.INPUT, '');\n            };\n\n            const debouncedEmit = debounce(() => {\n                emit(BentoSearchBarInternalEvent.INPUT, searchTerm.value);\n            }, props.debounceTime);\n\n            const onInputEvent = (value: string) => {\n                searchTerm.value = value;\n                debouncedEmit();\n            };\n\n            return {\n                // Values\n                searchTerm,\n                bentoInputField,\n\n                // Emits\n                onClearSearch,\n                onInputEvent,\n\n                // Enums\n                BentoInputFieldType,\n                BentoSearchBarInternalEvent,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./search-bar.scss\" />\n"],"names":["BentoSearchBarInternalEvent","BentoSearchBarInternalEvent2","BentoSearchBarEvent","BentoSearchBarEvent2","_sfc_main","defineComponent","messages","CrossCircleIcon","BentoInputField","SearchIcon","props","emit","searchTerm","ref","bentoInputField","watch","onClearSearch","debouncedEmit","debounce","value","BentoInputFieldType","openBlock","createElementBlock","_hoisted_1","createVNode","_component_bento_input_field","_ctx","_cache","$event","createSlots","withCtx","_component_search_icon","createElementVNode","args","withKeys"],"mappings":"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"}
+{"version":3,"file":"search-bar.js","sources":["../../vue2/src/components/search-bar/search-bar.types.ts","../../vue2/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            @escape-pressed=\"emit(BentoSearchBarInternalEvent.ESCAPE)\"\n        >\n            <template #defaultIconBefore>\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 { defineProps, 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    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</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","t","useI18n","searchTerm","ref","props","bentoInputField","watch","onClearSearch","emit","debouncedEmit","debounce","onInputEvent","value"],"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;;;;;;iEC2JRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAvHA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GA8CAG,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/segmented-control.js

@@ -1,13 +1,15 @@
-import { defineComponent as C, computed as u, resolveComponent as c, openBlock as a, createElementBlock as m, normalizeClass as y, createElementVNode as k, createBlock as b, createCommentVNode as g, createVNode as I, withCtx as S, createTextVNode as $, toDisplayString as w, toRef as T, ref as v, onMounted as N, onUnmounted as E, Fragment as U, renderList as D } from "vue";
-import { B as W, a as q, b as A } from "./chunks/index.222d29b0.js";
-import { g as B } from "./chunks/unique-id.a2a2b458.js";
-import { C as P } from "./chunks/listbox.0c7c4e5e.js";
+import { defineComponent as y, computed as c, resolveComponent as m, openBlock as l, createElementBlock as b, normalizeClass as I, createElementVNode as B, createBlock as _, createCommentVNode as h, createVNode as A, withCtx as U, createTextVNode as N, toDisplayString as W, toRef as q, ref as f, onMounted as D, onUnmounted as E, toRefs as T, Fragment as F, renderList as R } from "vue";
+import { B as H } from "./chunks/index.89b00b94.js";
+import { g as S } from "./chunks/unique-id.a2a2b458.js";
+import { C as P } from "./chunks/listbox.6b52af1a.js";
 import { _ as V } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as H } from "./chunks/dropdown.8b415aac.js";
-import "./assets/index6.css";
-const L = C({
+import { B as M } from "./chunks/dropdown.b798a82e.js";
+import { u as z } from "./chunks/i18n.6c402773.js";
+import { u as O } from "./chunks/aria-label.ac9651a5.js";
+import "./assets/index34.css";
+const j = y({
   name: "bento-segmented-control-button",
-  components: { BentoTypography: W, CheckmarkIcon: P },
+  components: { BentoTypography: H, CheckmarkIcon: P },
   props: {
     /**
      * The string the button will showcase
@@ -47,33 +49,30 @@ const L = C({
     }
   },
   emits: ["update:model-value"],
-  setup(e, { emit: t }) {
-    const s = B("segmented-control-button"), i = u(() => e.value === e.modelValue), d = u(() => ({
+  setup(e, { emit: n }) {
+    const d = S("segmented-control-button"), r = c(() => e.value === e.modelValue), s = c(() => ({
       "b-segmented-control-button--hug-content": !e.fullWidth,
       "b-segmented-control-button--full-width": e.fullWidth
     }));
     return {
-      // Enums
-      BentoTypographyElement: q,
-      BentoTypographyVariant: A,
       // Values
-      segmentedControlButtonId: s,
-      isChecked: i,
-      conditionalClasses: d,
+      segmentedControlButtonId: d,
+      isChecked: r,
+      conditionalClasses: s,
       // Methods
       onClick: () => {
-        e.disabled || t("update:model-value", e.value);
+        e.disabled || n("update:model-value", e.value);
       }
     };
   }
 });
-const R = ["id", "aria-checked", "aria-label", "checked", "disabled", "value"], M = ["for"];
-function O(e, t, s, i, d, n) {
-  const l = c("checkmark-icon"), r = c("bento-typography");
-  return a(), m("div", {
-    class: y(["b-segmented-control-button", e.conditionalClasses])
+const G = ["id", "aria-checked", "aria-label", "checked", "disabled", "value"], J = ["for"];
+function K(e, n, d, r, s, i) {
+  const a = m("checkmark-icon"), o = m("bento-typography");
+  return l(), b("div", {
+    class: I(["b-segmented-control-button", e.conditionalClasses])
   }, [
-    k("input", {
+    B("input", {
       id: e.segmentedControlButtonId,
       "aria-checked": e.isChecked,
       "aria-label": e.label,
@@ -83,37 +82,42 @@ function O(e, t, s, i, d, n) {
       type: "radio",
       class: "b-segmented-control-button__input",
       role: "radio",
-      onChange: t[0] || (t[0] = (...o) => e.onClick && e.onClick(...o))
-    }, null, 40, R),
-    e.label ? (a(), m("label", {
+      onChange: n[0] || (n[0] = (...t) => e.onClick && e.onClick(...t))
+    }, null, 40, G),
+    e.label ? (l(), b("label", {
       key: 0,
       for: e.segmentedControlButtonId,
       class: "b-segmented-control-button__label-container"
     }, [
-      e.isChecked ? (a(), b(l, {
+      e.isChecked ? (l(), _(a, {
         key: 0,
         "aria-hidden": "true",
         class: "b-segmented-control-button__icon"
-      })) : g("", !0),
-      I(r, {
+      })) : h("", !0),
+      A(o, {
         class: "b-segmented-control-button__label",
-        el: e.BentoTypographyElement.SPAN,
-        variant: e.BentoTypographyVariant.BODY,
+        el: "span",
+        variant: "body",
         stronger: ""
       }, {
-        default: S(() => [
-          $(w(e.label), 1)
+        default: U(() => [
+          N(W(e.label), 1)
         ]),
         _: 1
-      }, 8, ["el", "variant"])
-    ], 8, M)) : g("", !0)
+      })
+    ], 8, J)) : h("", !0)
   ], 2);
 }
-const z = /* @__PURE__ */ V(L, [["render", O], ["__scopeId", "data-v-7babee70"]]);
-var f = /* @__PURE__ */ ((e) => (e.UPDATE = "update:model-value", e))(f || {});
-const F = C({
+const Q = /* @__PURE__ */ V(j, [["render", K], ["__scopeId", "data-v-92fc438f"]]);
+var v = /* @__PURE__ */ ((e) => (e.UPDATE = "update:model-value", e))(v || {});
+const k = {
+  "en-US": {
+    ariaLabelFallback: "Segmented control"
+  }
+}, X = y({
   name: "bento-segmented-control",
-  components: { BentoDropdown: H, SegmentedControlButton: z },
+  i18n: { messages: k },
+  components: { BentoDropdown: M, SegmentedControlButton: Q },
   props: {
     /**
      * Items that will populate the segmented control.
@@ -130,6 +134,9 @@ const F = C({
       type: [Number, String, null],
       required: !0
     },
+    /**
+     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+     */
     /**
      * Accessible name describing the segmented control.
      */
@@ -145,77 +152,83 @@ const F = C({
       default: !1
     }
   },
-  emits: [f.UPDATE],
-  setup(e, { emit: t }) {
-    const s = T(e, "modelValue"), i = B("segmented-control-dropdown"), d = v(null), n = v(!0);
-    let l;
-    N(() => {
-      const p = {
+  emits: [v.UPDATE],
+  setup(e, { attrs: n, emit: d }) {
+    const { t: r } = z({ messages: k }), s = q(e, "modelValue"), i = S("segmented-control-dropdown"), a = f(null), o = f(!0);
+    let t;
+    D(() => {
+      const g = {
         root: null,
         // To prevent the observer from triggering on vertical intersection
         rootMargin: "100% 0% 100% 0%",
         threshold: 1
       };
-      l = new IntersectionObserver((h) => {
-        h && (h[0].isIntersecting ? n.value = !0 : n.value = !1);
-      }, p), l.observe(d.value);
+      t = new IntersectionObserver((u) => {
+        u && u.length && (u[u.length - 1].isIntersecting ? o.value = !0 : o.value = !1);
+      }, g), t.observe(a.value);
     }), E(() => {
-      l.disconnect();
+      t.disconnect();
     });
-    const r = u(() => n.value === !1), o = u(() => ({
-      "b-segmented-control--hidden": r.value,
+    const p = f(n["aria-label"]), { ariaLabel: $ } = T(e), w = O({
+      ariaLabel: p.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: $,
+      defaultFallback: r("ariaLabelFallback")
+    }), C = c(() => o.value === !1), L = c(() => ({
+      "b-segmented-control--hidden": C.value,
       "b-segmented-control--full-width": e.fullWidth
     }));
     return {
       // Values
+      computedAriaLabel: w,
       inputValue: s,
       dropdownId: i,
-      segmentedControlRef: d,
-      conditionalClasses: o,
-      isSegmentedControlVisible: n,
-      isSegmentedControlHidden: r,
+      segmentedControlRef: a,
+      conditionalClasses: L,
+      isSegmentedControlVisible: o,
+      isSegmentedControlHidden: C,
       // Methods
-      onInput: (p) => {
-        t(f.UPDATE, p);
+      onInput: (g) => {
+        d(v.UPDATE, g);
       }
     };
   }
 });
-const Y = { class: "b-segmented-control__wrapper" }, j = ["aria-hidden"];
-function G(e, t, s, i, d, n) {
-  const l = c("bento-dropdown"), r = c("segmented-control-button");
-  return a(), m("div", Y, [
-    e.isSegmentedControlHidden ? (a(), b(l, {
+const Y = { class: "b-segmented-control__wrapper" }, Z = ["aria-hidden"];
+function x(e, n, d, r, s, i) {
+  const a = m("bento-dropdown"), o = m("segmented-control-button");
+  return l(), b("div", Y, [
+    e.isSegmentedControlHidden ? (l(), _(a, {
       key: 0,
       id: e.dropdownId,
       "aria-hidden": e.isSegmentedControlVisible,
       value: e.modelValue,
       items: e.items,
-      "aria-label": e.ariaLabel,
+      "aria-label": e.computedAriaLabel,
       onInput: e.onInput
-    }, null, 8, ["id", "aria-hidden", "value", "items", "aria-label", "onInput"])) : g("", !0),
-    k("fieldset", {
+    }, null, 8, ["id", "aria-hidden", "value", "items", "aria-label", "onInput"])) : h("", !0),
+    B("fieldset", {
       ref: "segmentedControlRef",
       role: "group",
-      class: y(["b-segmented-control", e.conditionalClasses]),
+      class: I(["b-segmented-control", e.conditionalClasses]),
       "aria-hidden": e.isSegmentedControlHidden
     }, [
-      (a(!0), m(U, null, D(e.items, (o, _) => (a(), b(r, {
-        key: `segmented-control-item-${_}-${o.label}`,
+      (l(!0), b(F, null, R(e.items, (t, p) => (l(), _(o, {
+        key: `segmented-control-item-${p}-${t.label}`,
         class: "b-segmented-control__item",
-        label: o.label,
-        value: o.value,
-        disabled: o.disabled,
+        label: t.label,
+        value: t.value,
+        disabled: t.disabled,
         "full-width": e.fullWidth,
         "model-value": e.inputValue,
         "onUpdate:modelValue": e.onInput
       }, null, 8, ["label", "value", "disabled", "full-width", "model-value", "onUpdate:modelValue"]))), 128))
-    ], 10, j)
+    ], 10, Z)
   ]);
 }
-const ee = /* @__PURE__ */ V(F, [["render", G], ["__scopeId", "data-v-cc139468"]]);
+const ie = /* @__PURE__ */ V(X, [["render", x], ["__scopeId", "data-v-5d49b087"]]);
 export {
-  ee as BentoSegmentedControl,
-  f as BentoSegmentedControlEvent
+  ie as BentoSegmentedControl,
+  v as BentoSegmentedControlEvent
 };
 //# sourceMappingURL=segmented-control.js.map

package/dist/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","sources":["../../vue2/src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue","../../vue2/src/components/segmented-control/segmented-control.types.ts","../../vue2/src/components/segmented-control/segmented-control.vue"],"sourcesContent":["<template>\n    <div class=\"b-segmented-control-button\" :class=\"conditionalClasses\">\n        <input\n            :id=\"segmentedControlButtonId\"\n            :aria-checked=\"isChecked\"\n            :aria-label=\"label\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :value=\"value\"\n            type=\"radio\"\n            class=\"b-segmented-control-button__input\"\n            role=\"radio\"\n            @change=\"onClick\"\n        />\n        <label v-if=\"label\" :for=\"segmentedControlButtonId\" class=\"b-segmented-control-button__label-container\">\n            <checkmark-icon v-if=\"isChecked\" aria-hidden=\"true\" class=\"b-segmented-control-button__icon\" />\n            <bento-typography\n                class=\"b-segmented-control-button__label\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n                stronger\n            >\n                {{ label }}\n            </bento-typography>\n        </label>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { computed, ComputedRef, defineComponent } from 'vue';\n    import CheckmarkIcon from '@adyen/ui-assets-icons-16/vue/checkmark';\n    /**\n     * Internal component to be used within the BentoSegmentedControl component only\n     */\n    export default defineComponent({\n        name: 'bento-segmented-control-button',\n        components: { BentoTypography, CheckmarkIcon },\n        props: {\n            /**\n             * The string the button will showcase\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Indicates the value of the input that will be returned when it's selected\n             */\n            value: {\n                type: [String, Number],\n                required: true,\n            },\n            /**\n             * This property should not be used directly.\n             * It will be used by v-model directive on the segmented control component\n             */\n            modelValue: {\n                type: [String, Number],\n                default: null,\n            },\n            /**\n             * Disable the radio button (optional)\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Renders the button with a 100% width\n             */\n            fullWidth: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: ['update:model-value'],\n        setup(props, { emit }) {\n            const segmentedControlButtonId = generateUid('segmented-control-button');\n            const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n            const conditionalClasses = computed(() => ({\n                'b-segmented-control-button--hug-content': !props.fullWidth,\n                'b-segmented-control-button--full-width': props.fullWidth,\n            }));\n            const onClick = () => {\n                if (!props.disabled) {\n                    emit('update:model-value', props.value);\n                }\n            };\n            return {\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n                // Values\n                segmentedControlButtonId,\n                isChecked,\n                conditionalClasses,\n                // Methods\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control-button.scss\" />\n","export interface BentoSegmentedControlItem {\n    label: string;\n    value: string | number;\n    disabled?: boolean;\n}\n\nexport enum BentoSegmentedControlEvent {\n    UPDATE = 'update:model-value',\n}\n","<template>\n    <div class=\"b-segmented-control__wrapper\">\n        <bento-dropdown\n            v-if=\"isSegmentedControlHidden\"\n            :id=\"dropdownId\"\n            :aria-hidden=\"isSegmentedControlVisible\"\n            :value=\"modelValue\"\n            :items=\"items\"\n            :aria-label=\"ariaLabel\"\n            @input=\"onInput\"\n        />\n        <fieldset\n            ref=\"segmentedControlRef\"\n            role=\"group\"\n            class=\"b-segmented-control\"\n            :class=\"conditionalClasses\"\n            :aria-hidden=\"isSegmentedControlHidden\"\n        >\n            <segmented-control-button\n                v-for=\"(item, index) in items\"\n                :key=\"`segmented-control-item-${index}-${item.label}`\"\n                class=\"b-segmented-control__item\"\n                :label=\"item.label\"\n                :value=\"item.value\"\n                :disabled=\"item.disabled\"\n                :full-width=\"fullWidth\"\n                :model-value=\"inputValue\"\n                @update:model-value=\"onInput\"\n            ></segmented-control-button>\n        </fieldset>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, toRef } from 'vue';\n    import SegmentedControlButton from './components/segmented-control-button/segmented-control-button.vue';\n    import { BentoSegmentedControlEvent, BentoSegmentedControlItem } from './segmented-control.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { generateUid } from '@/utils/ts/unique-id';\n\n    /**\n     * @example\n     * import { BentoSegmentedControl } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSegmentedControl },\n     *     template: `\n     *          <bento-segmented-control\n     *              :items=\"[{ label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3, disabled: true }]\"\n     *              :model-value=\"1\"\n     *              :update:model-value=\"yourUpdateHandler\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-segmented-control',\n        components: { BentoDropdown, SegmentedControlButton },\n        props: {\n            /**\n             * Items that will populate the segmented control.\n             */\n            items: {\n                type: Array as PropType<BentoSegmentedControlItem[]>,\n                required: true,\n                validator: (arr: Array<BentoSegmentedControlItem[]>) => arr.length <= 5,\n            },\n            /**\n             * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.\n             */\n            modelValue: {\n                type: [Number, String, null],\n                required: true,\n            },\n            /**\n             * Accessible name describing the segmented control.\n             */\n            ariaLabel: {\n                type: String,\n                required: true,\n            },\n            /**\n             * If set to true, renders the component full width.\n             */\n            fullWidth: {\n                type: Boolean,\n                default: false,\n            },\n        },\n\n        emits: [BentoSegmentedControlEvent.UPDATE],\n        setup(props, { emit }) {\n            const inputValue = toRef(props, 'modelValue');\n            const dropdownId = generateUid('segmented-control-dropdown');\n            const segmentedControlRef = ref(null);\n            const isSegmentedControlVisible = ref(true);\n            let observer: IntersectionObserver;\n\n            onMounted(() => {\n                const config = {\n                    root: null,\n                    // To prevent the observer from triggering on vertical intersection\n                    rootMargin: '100% 0% 100% 0%',\n                    threshold: 1,\n                };\n                observer = new IntersectionObserver(entries => {\n                    if (entries) {\n                        if (entries[0].isIntersecting) {\n                            // The segmented control is still visible within the viewport\n                            isSegmentedControlVisible.value = true;\n                        } else {\n                            // The segmented control is not fully visible anymore in the viewport\n                            isSegmentedControlVisible.value = false;\n                        }\n                    }\n                }, config);\n                observer.observe(segmentedControlRef.value);\n            });\n\n            onUnmounted(() => {\n                observer.disconnect();\n            });\n\n            const isSegmentedControlHidden = computed(() => isSegmentedControlVisible.value === false);\n\n            const conditionalClasses = computed(() => ({\n                'b-segmented-control--hidden': isSegmentedControlHidden.value,\n                'b-segmented-control--full-width': props.fullWidth,\n            }));\n\n            const onInput = value => {\n                emit(BentoSegmentedControlEvent.UPDATE, value);\n            };\n\n            return {\n                // Values\n                inputValue,\n                dropdownId,\n                segmentedControlRef,\n                conditionalClasses,\n                isSegmentedControlVisible,\n                isSegmentedControlHidden,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control.scss\" />\n"],"names":["_sfc_main$1","defineComponent","BentoTypography","CheckmarkIcon","props","emit","segmentedControlButtonId","generateUid","isChecked","computed","conditionalClasses","BentoTypographyElement","BentoTypographyVariant","createElementVNode","_ctx","_hoisted_1$1","openBlock","createElementBlock","createBlock","_component_checkmark_icon","createCommentVNode","createVNode","_component_bento_typography","BentoSegmentedControlEvent","BentoSegmentedControlEvent2","_sfc_main","BentoDropdown","SegmentedControlButton","arr","inputValue","toRef","dropdownId","segmentedControlRef","ref","isSegmentedControlVisible","observer","onMounted","config","entries","onUnmounted","isSegmentedControlHidden","value","_component_segmented_control_button","resolveComponent","_component_bento_dropdown","normalizeClass","Fragment","renderList","item","index"],"mappings":"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"}
+{"version":3,"file":"segmented-control.js","sources":["../../vue2/src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue","../../vue2/src/components/segmented-control/segmented-control.types.ts","../../vue2/src/components/segmented-control/segmented-control.vue"],"sourcesContent":["<template>\n    <div class=\"b-segmented-control-button\" :class=\"conditionalClasses\">\n        <input\n            :id=\"segmentedControlButtonId\"\n            :aria-checked=\"isChecked\"\n            :aria-label=\"label\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :value=\"value\"\n            type=\"radio\"\n            class=\"b-segmented-control-button__input\"\n            role=\"radio\"\n            @change=\"onClick\"\n        />\n        <label v-if=\"label\" :for=\"segmentedControlButtonId\" class=\"b-segmented-control-button__label-container\">\n            <checkmark-icon v-if=\"isChecked\" aria-hidden=\"true\" class=\"b-segmented-control-button__icon\" />\n            <bento-typography class=\"b-segmented-control-button__label\" el=\"span\" variant=\"body\" stronger>\n                {{ label }}\n            </bento-typography>\n        </label>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { computed, ComputedRef, defineComponent } from 'vue';\n    import CheckmarkIcon from '@adyen/ui-assets-icons-16/vue/checkmark';\n    /**\n     * Internal component to be used within the BentoSegmentedControl component only\n     */\n    export default defineComponent({\n        name: 'bento-segmented-control-button',\n        components: { BentoTypography, CheckmarkIcon },\n        props: {\n            /**\n             * The string the button will showcase\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Indicates the value of the input that will be returned when it's selected\n             */\n            value: {\n                type: [String, Number],\n                required: true,\n            },\n            /**\n             * This property should not be used directly.\n             * It will be used by v-model directive on the segmented control component\n             */\n            modelValue: {\n                type: [String, Number],\n                default: null,\n            },\n            /**\n             * Disable the radio button (optional)\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Renders the button with a 100% width\n             */\n            fullWidth: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: ['update:model-value'],\n        setup(props, { emit }) {\n            const segmentedControlButtonId = generateUid('segmented-control-button');\n            const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n            const conditionalClasses = computed(() => ({\n                'b-segmented-control-button--hug-content': !props.fullWidth,\n                'b-segmented-control-button--full-width': props.fullWidth,\n            }));\n            const onClick = () => {\n                if (!props.disabled) {\n                    emit('update:model-value', props.value);\n                }\n            };\n            return {\n                // Values\n                segmentedControlButtonId,\n                isChecked,\n                conditionalClasses,\n                // Methods\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control-button.scss\" />\n","export interface BentoSegmentedControlItem {\n    label: string;\n    value: string | number;\n    disabled?: boolean;\n}\n\nexport enum BentoSegmentedControlEvent {\n    UPDATE = 'update:model-value',\n}\n","<template>\n    <div class=\"b-segmented-control__wrapper\">\n        <bento-dropdown\n            v-if=\"isSegmentedControlHidden\"\n            :id=\"dropdownId\"\n            :aria-hidden=\"isSegmentedControlVisible\"\n            :value=\"modelValue\"\n            :items=\"items\"\n            :aria-label=\"computedAriaLabel\"\n            @input=\"onInput\"\n        />\n        <fieldset\n            ref=\"segmentedControlRef\"\n            role=\"group\"\n            class=\"b-segmented-control\"\n            :class=\"conditionalClasses\"\n            :aria-hidden=\"isSegmentedControlHidden\"\n        >\n            <segmented-control-button\n                v-for=\"(item, index) in items\"\n                :key=\"`segmented-control-item-${index}-${item.label}`\"\n                class=\"b-segmented-control__item\"\n                :label=\"item.label\"\n                :value=\"item.value\"\n                :disabled=\"item.disabled\"\n                :full-width=\"fullWidth\"\n                :model-value=\"inputValue\"\n                @update:model-value=\"onInput\"\n            ></segmented-control-button>\n        </fieldset>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, toRef, toRefs } from 'vue';\n    import SegmentedControlButton from './components/segmented-control-button/segmented-control-button.vue';\n    import { BentoSegmentedControlEvent, BentoSegmentedControlItem } from './segmented-control.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * @example\n     * import { BentoSegmentedControl } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSegmentedControl },\n     *     template: `\n     *          <bento-segmented-control\n     *              :items=\"[{ label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3, disabled: true }]\"\n     *              :model-value=\"1\"\n     *              :update:model-value=\"yourUpdateHandler\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-segmented-control',\n        i18n: { messages },\n        components: { BentoDropdown, SegmentedControlButton },\n        props: {\n            /**\n             * Items that will populate the segmented control.\n             */\n            items: {\n                type: Array as PropType<BentoSegmentedControlItem[]>,\n                required: true,\n                validator: (arr: Array<BentoSegmentedControlItem[]>) => arr.length <= 5,\n            },\n            /**\n             * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.\n             */\n            modelValue: {\n                type: [Number, String, null],\n                required: true,\n            },\n            /**\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            /**\n             * Accessible name describing the segmented control.\n             */\n            ariaLabel: {\n                type: String,\n                required: true,\n            },\n            /**\n             * If set to true, renders the component full width.\n             */\n            fullWidth: {\n                type: Boolean,\n                default: false,\n            },\n        },\n\n        emits: [BentoSegmentedControlEvent.UPDATE],\n        setup(props, { attrs, emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const inputValue = toRef(props, 'modelValue');\n            const dropdownId = generateUid('segmented-control-dropdown');\n            const segmentedControlRef = ref(null);\n            const isSegmentedControlVisible = ref(true);\n            let observer: IntersectionObserver;\n\n            onMounted(() => {\n                const config = {\n                    root: null,\n                    // To prevent the observer from triggering on vertical intersection\n                    rootMargin: '100% 0% 100% 0%',\n                    threshold: 1,\n                };\n                observer = new IntersectionObserver(entries => {\n                    if (entries && entries.length) {\n                        if (entries[entries.length - 1].isIntersecting) {\n                            // The segmented control is still visible within the viewport\n                            isSegmentedControlVisible.value = true;\n                        } else {\n                            // The segmented control is not fully visible anymore in the viewport\n                            isSegmentedControlVisible.value = false;\n                        }\n                    }\n                }, config);\n                observer.observe(segmentedControlRef.value);\n            });\n\n            onUnmounted(() => {\n                observer.disconnect();\n            });\n\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel: ariaLabelAttribute.value as string,\n                // TODO: take this line away when the aria-label props is removed\n                label: ariaLabel,\n                defaultFallback: t('ariaLabelFallback'),\n            });\n\n            const isSegmentedControlHidden = computed(() => isSegmentedControlVisible.value === false);\n\n            const conditionalClasses = computed(() => ({\n                'b-segmented-control--hidden': isSegmentedControlHidden.value,\n                'b-segmented-control--full-width': props.fullWidth,\n            }));\n\n            const onInput = value => {\n                emit(BentoSegmentedControlEvent.UPDATE, value);\n            };\n\n            return {\n                // Values\n                computedAriaLabel,\n                inputValue,\n                dropdownId,\n                segmentedControlRef,\n                conditionalClasses,\n                isSegmentedControlVisible,\n                isSegmentedControlHidden,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control.scss\" />\n"],"names":["_sfc_main$1","defineComponent","BentoTypography","CheckmarkIcon","props","emit","segmentedControlButtonId","generateUid","isChecked","computed","conditionalClasses","createElementVNode","_ctx","_hoisted_1$1","openBlock","createElementBlock","createBlock","_component_checkmark_icon","createCommentVNode","createVNode","_component_bento_typography","BentoSegmentedControlEvent","BentoSegmentedControlEvent2","_sfc_main","messages","BentoDropdown","SegmentedControlButton","arr","attrs","t","useI18n","inputValue","toRef","dropdownId","segmentedControlRef","ref","isSegmentedControlVisible","observer","onMounted","config","entries","onUnmounted","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","isSegmentedControlHidden","value","_component_segmented_control_button","resolveComponent","_component_bento_dropdown","normalizeClass","Fragment","renderList","item","index"],"mappings":"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"}