@adyen/bento-vue2 1.3.0 → 1.4.0

package/dist/search-bar.js

@@ -1,30 +1,32 @@
-import { defineComponent as u, ref as s, watch as i } from "vue";
-import { BentoInputField as p, BentoInputFieldType as d } from "./input-field.js";
-import { d as f } from "./chunks/debounce.f8d92e44.js";
-import { S as m } from "./chunks/search.a8055e95.js";
-import { C as _ } from "./chunks/cross-circle-fill.d5e9ae44.js";
-import { n as h } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { u as R } from "./chunks/dropdown.c05678d0.js";
-import "./assets/index31.css";
-var a = /* @__PURE__ */ ((r) => (r.CLEAR = "clear", r.ESCAPE = "escape-pressed", r.INPUT = "input", r.UPDATE = "update:search-term", r))(a || {}), b = /* @__PURE__ */ ((r) => (r.CLEAR = "search-clear", r.INPUT = "search-input", r.UPDATE = "update:search-term", r))(b || {});
-const y = {
+import { defineComponent as p, ref as c, watch as d } from "vue";
+import { d as _ } from "./chunks/debounce.f8d92e44.js";
+import { u as f } from "./chunks/i18n.155748d6.js";
+import { BentoInputField as m } from "./input-field.js";
+import { S as h } from "./chunks/search.a8055e95.js";
+import { C as y } from "./chunks/cross-circle-fill.d5e9ae44.js";
+import { n as C } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { u as w } from "./chunks/dropdown.fd93f0ce.js";
+import "./assets/index29.css";
+var o = /* @__PURE__ */ ((t) => (t.CLEAR = "clear", t.ESCAPE = "escape-pressed", t.INPUT = "input", t.UPDATE = "update:search-term", t))(o || {}), b = /* @__PURE__ */ ((t) => (t.CLEAR = "search-clear", t.INPUT = "search-input", t.UPDATE = "update:search-term", t))(b || {});
+const v = {
   "en-US": {
     search: "Search",
     clearSearch: "Clear search"
   }
-}, C = u({
-  name: "bento-search-bar",
-  i18n: { messages: y },
-  components: {
-    CrossCircleFillIcon: _,
-    BentoInputField: p,
-    SearchIcon: m
-  },
+}, S = {
+  i18n: { messages: v }
+}, I = /* @__PURE__ */ p({
+  ...S,
+  __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
      */
@@ -38,68 +40,54 @@ const y = {
      */
     value: { type: String, default: void 0 }
   },
-  emits: [
-    a.INPUT,
-    a.CLEAR,
-    a.ESCAPE
-  ],
-  setup(r, { emit: e }) {
-    const t = s(r.value), n = s();
-    i(
-      () => r.value,
+  emits: ["input", "clear", "escape-pressed"],
+  setup(t, { emit: a }) {
+    const n = t, { t: e } = f(), r = c(n.value), l = c();
+    d(
+      () => n.value,
       () => {
-        t.value = r.value;
+        r.value = n.value;
       },
       { immediate: !0 }
     );
-    const c = () => {
-      t.value = "", e(a.CLEAR), e(a.INPUT, "");
-    }, l = f(() => {
-      e(a.INPUT, t.value);
-    }, r.debounceTime);
-    return {
-      // Values
-      searchTerm: t,
-      bentoInputField: n,
-      // Emits
-      onClearSearch: c,
-      onInputEvent: (o) => {
-        t.value = o, l();
-      },
-      // Enums
-      BentoInputFieldType: d,
-      BentoSearchBarInternalEvent: a
-    };
+    const u = () => {
+      r.value = "", a("clear"), a("input", "");
+    }, s = _(() => {
+      a("input", r.value);
+    }, n.debounceTime);
+    return { __sfc: !0, t: e, props: n, emit: a, searchTerm: r, bentoInputField: l, onClearSearch: u, debouncedEmit: s, onInputEvent: (i) => {
+      r.value = i, s();
+    }, BentoSearchBarInternalEvent: o, BentoInputField: m, SearchIcon: h, CrossCircleFillIcon: y };
   }
 });
-var v = function() {
-  var e = this, t = e._self._c;
-  return e._self._setupProxy, t("div", { staticClass: "b-search-bar" }, [t("bento-input-field", { ref: "bentoInputField", attrs: { value: e.searchTerm, type: e.BentoInputFieldType.SEARCH, "aria-label": e.inputFieldAriaLabel, "aria-hidden": !1, placeholder: e.placeholder }, on: { input: e.onInputEvent, "escape-pressed": function(n) {
-    return e.$emit(e.BentoSearchBarInternalEvent.ESCAPE);
-  } }, scopedSlots: e._u([{ key: "defaultIconBefore", fn: function() {
-    return [t("search-icon", { attrs: { "svg-title": e.$t("search") } })];
+var k = function() {
+  var a = this, n = a._self._c, e = a._self._setupProxy;
+  return n("div", { staticClass: "b-search-bar" }, [n(e.BentoInputField, { ref: "bentoInputField", attrs: { value: e.searchTerm, type: "search", condensed: a.condensed, "aria-label": a.inputFieldAriaLabel, "aria-hidden": !1, placeholder: a.placeholder }, on: { input: e.onInputEvent, "escape-pressed": function(r) {
+    return e.emit(e.BentoSearchBarInternalEvent.ESCAPE);
+  } }, scopedSlots: a._u([{ key: "defaultIconBefore", fn: function() {
+    return [n(e.SearchIcon, { attrs: { "svg-title": e.t("search"), "aria-hidden": "true" } })];
   }, proxy: !0 }, e.searchTerm ? { key: "iconAfter", fn: function() {
-    return [t("div", { staticClass: "b-search-bar__clear-search", attrs: { tabindex: "0", "data-testid": "b-search-bar-clear-search-button" }, on: { click: e.onClearSearch, keypress: function(n) {
-      return !n.type.indexOf("key") && e._k(n.keyCode, "enter", 13, n.key, "Enter") ? null : e.onClearSearch.apply(null, arguments);
-    }, keyup: function(n) {
-      return !n.type.indexOf("key") && e._k(n.keyCode, "space", 32, n.key, [" ", "Spacebar"]) ? null : e.onClearSearch.apply(null, arguments);
-    } } }, [t("cross-circle-fill-icon", { attrs: { "svg-title": e.$t("clearSearch") } })], 1)];
+    return [n("div", { staticClass: "b-search-bar__clear-search", attrs: { tabindex: "0", "data-testid": "b-search-bar-clear-search-button" }, on: { click: e.onClearSearch, keypress: function(r) {
+      return !r.type.indexOf("key") && a._k(r.keyCode, "enter", 13, r.key, "Enter") ? null : e.onClearSearch.apply(null, arguments);
+    }, keyup: function(r) {
+      return !r.type.indexOf("key") && a._k(r.keyCode, "space", 32, r.key, [" ", "Spacebar"]) ? null : e.onClearSearch.apply(null, arguments);
+    } } }, [n(e.CrossCircleFillIcon, { attrs: { "svg-title": e.t("clearSearch") } })], 1)];
   }, proxy: !0 } : null], null, !0) })], 1);
-}, S = [], I = /* @__PURE__ */ h(
-  C,
-  v,
-  S,
+}, x = [], F = /* @__PURE__ */ C(
+  I,
+  k,
+  x,
   !1,
   null,
-  "f0b8db06",
+  "449aa431",
   null,
   null
 );
-const g = I.exports;
+const R = F.exports;
 export {
-  g as BentoSearchBar,
+  R as BentoSearchBar,
   b as BentoSearchBarEvent,
-  a as BentoSearchBarInternalEvent,
-  R as useSearchBarFilter
+  o as BentoSearchBarInternalEvent,
+  w as useSearchBarFilter
 };
 //# sourceMappingURL=search-bar.js.map

package/dist/search-bar.js.map

@@ -1 +1 @@
-{"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=\"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"],"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;;;;;;GC8EZE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,YAAA;AAAA,IACA,qBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,qBAAA,EAAA,MAAA,QAAA,UAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,cAAA,EAAA,MAAA,QAAA,SAAA,IAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA,EAAA,MAAA,QAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA,EAAA,MAAA,QAAA,SAAA,OAAA;AAAA,EAKA;AAAA,EACA,OAAA;AAAA,IACAT,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAU,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAAH,EAAA,KAAA,GACAI,IAAAD,EAAA;AAEA,IAAAE;AAAA,MAAA,MAAAL,EAAA;AAAA,MACA,MAAA;AAEA,QAAAE,EAAA,QAAAF,EAAA;AAAA,MAAA;AAAA,MACA,EAAA,WAAA,GAAA;AAAA,IACA;AAGA,UAAAM,IAAA,MAAA;AACA,MAAAJ,EAAA,QAAA,IACAD,EAAAX,EAAA,KAAA,GACAW,EAAAX,EAAA,OAAA,EAAA;AAAA,IAAA,GAGAiB,IAAAC,EAAA,MAAA;AACA,MAAAP,EAAAX,EAAA,OAAAY,EAAA,KAAA;AAAA,IAAA,GAAAF,EAAA,YAAA;AAQA,WAAA;AAAA;AAAA,MAAA,YAAAE;AAAA,MAEA,iBAAAE;AAAA;AAAA,MACA,eAAAE;AAAA,MAGA,cAXA,CAAAG,MAAA;AACA,QAAAP,EAAA,QAAAO,GACAF,EAAA;AAAA,MAAA;AAAA;AAAA,MAUA,qBAAAG;AAAA,MAGA,6BAAApB;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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            @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","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;;;;;;GC2JRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAvHA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GA8CAC,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;sIAGlC,CAAAO,MAAA;AACI,MAAAT,EAAA,QAAAS,GACAF,EAAA;AAAA,IAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/segmented-control.js

@@ -1,13 +1,15 @@
-import { defineComponent as _, computed as a, toRef as f, ref as m, onMounted as v, onUnmounted as C } from "vue";
-import { B as h, a as y, b as B } from "./chunks/index.56858f4e.js";
-import { g as p } from "./chunks/unique-id.a2a2b458.js";
-import { C as k } from "./chunks/listbox.116ed0c1.js";
-import { n as b } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as S } from "./chunks/dropdown.c05678d0.js";
-import "./assets/index33.css";
-const I = _({
+import { defineComponent as f, computed as r, toRef as k, ref as u, onMounted as S, onUnmounted as B, toRefs as I } from "vue";
+import { B as w } from "./chunks/index.45295dd3.js";
+import { g } from "./chunks/unique-id.a2a2b458.js";
+import { C as L } from "./chunks/listbox.e792d2d6.js";
+import { n as p } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as V } from "./chunks/dropdown.fd93f0ce.js";
+import { u as A } from "./chunks/i18n.155748d6.js";
+import { u as x } from "./chunks/aria-label.ac9651a5.js";
+import "./assets/index30.css";
+const P = f({
   name: "bento-segmented-control-button",
-  components: { BentoTypography: h, CheckmarkIcon: k },
+  components: { BentoTypography: w, CheckmarkIcon: L },
   props: {
     /**
      * The string the button will showcase
@@ -48,14 +50,11 @@ const I = _({
   },
   emits: ["update:model-value"],
   setup(t, { emit: e }) {
-    const n = p("segmented-control-button"), o = a(() => t.value === t.modelValue), l = a(() => ({
+    const n = g("segmented-control-button"), o = r(() => t.value === t.modelValue), l = r(() => ({
       "b-segmented-control-button--hug-content": !t.fullWidth,
       "b-segmented-control-button--full-width": t.fullWidth
     }));
     return {
-      // Enums
-      BentoTypographyElement: y,
-      BentoTypographyVariant: B,
       // Values
       segmentedControlButtonId: n,
       isChecked: o,
@@ -67,24 +66,29 @@ const I = _({
     };
   }
 });
-var V = function() {
+var R = function() {
   var e = this, n = e._self._c;
-  return e._self._setupProxy, n("div", { staticClass: "b-segmented-control-button", class: e.conditionalClasses }, [n("input", { staticClass: "b-segmented-control-button__input", attrs: { id: e.segmentedControlButtonId, "aria-checked": e.isChecked, "aria-label": e.label, disabled: e.disabled, type: "radio", role: "radio" }, domProps: { checked: e.isChecked, value: e.value }, on: { change: e.onClick } }), e.label ? n("label", { staticClass: "b-segmented-control-button__label-container", attrs: { for: e.segmentedControlButtonId } }, [e.isChecked ? n("checkmark-icon", { staticClass: "b-segmented-control-button__icon", attrs: { "aria-hidden": "true" } }) : e._e(), n("bento-typography", { staticClass: "b-segmented-control-button__label", attrs: { el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.BODY, stronger: "" } }, [e._v(" " + e._s(e.label) + " ")])], 1) : e._e()]);
-}, w = [], T = /* @__PURE__ */ b(
-  I,
-  V,
-  w,
+  return e._self._setupProxy, n("div", { staticClass: "b-segmented-control-button", class: e.conditionalClasses }, [n("input", { staticClass: "b-segmented-control-button__input", attrs: { id: e.segmentedControlButtonId, "aria-checked": e.isChecked, "aria-label": e.label, disabled: e.disabled, type: "radio", role: "radio" }, domProps: { checked: e.isChecked, value: e.value }, on: { change: e.onClick } }), e.label ? n("label", { staticClass: "b-segmented-control-button__label-container", attrs: { for: e.segmentedControlButtonId } }, [e.isChecked ? n("checkmark-icon", { staticClass: "b-segmented-control-button__icon", attrs: { "aria-hidden": "true" } }) : e._e(), n("bento-typography", { staticClass: "b-segmented-control-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(e.label) + " ")])], 1) : e._e()]);
+}, U = [], W = /* @__PURE__ */ p(
+  P,
+  R,
+  U,
   !1,
   null,
-  "c3123330",
+  "c60f1624",
   null,
   null
 );
-const x = T.exports;
-var i = /* @__PURE__ */ ((t) => (t.UPDATE = "update:model-value", t))(i || {});
-const P = _({
+const $ = W.exports;
+var c = /* @__PURE__ */ ((t) => (t.UPDATE = "update:model-value", t))(c || {});
+const q = {
+  "en-US": {
+    ariaLabelFallback: "Segmented control"
+  }
+}, F = f({
   name: "bento-segmented-control",
-  components: { BentoDropdown: S, SegmentedControlButton: x },
+  i18n: { messages: q },
+  components: { BentoDropdown: V, SegmentedControlButton: $ },
   props: {
     /**
      * Items that will populate the segmented control.
@@ -101,6 +105,9 @@ const P = _({
       type: [Number, String, null],
       required: !0
     },
+    /**
+     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+     */
     /**
      * Accessible name describing the segmented control.
      */
@@ -116,60 +123,66 @@ const P = _({
       default: !1
     }
   },
-  emits: [i.UPDATE],
-  setup(t, { emit: e }) {
-    const n = f(t, "modelValue"), o = p("segmented-control-dropdown"), l = m(null), s = m(!0);
-    let r;
-    v(() => {
-      const d = {
+  emits: [c.UPDATE],
+  setup(t, { attrs: e, emit: n }) {
+    const { t: o } = A(), l = k(t, "modelValue"), m = g("segmented-control-dropdown"), _ = u(null), a = u(!0);
+    let d;
+    S(() => {
+      const i = {
         root: null,
         // To prevent the observer from triggering on vertical intersection
         rootMargin: "100% 0% 100% 0%",
         threshold: 1
       };
-      r = new IntersectionObserver((c) => {
-        c && (c[0].isIntersecting ? s.value = !0 : s.value = !1);
-      }, d), r.observe(l.value);
-    }), C(() => {
-      r.disconnect();
+      d = new IntersectionObserver((s) => {
+        s && s.length && (s[s.length - 1].isIntersecting ? a.value = !0 : a.value = !1);
+      }, i), d.observe(_.value);
+    }), B(() => {
+      d.disconnect();
     });
-    const u = a(() => s.value === !1), g = a(() => ({
-      "b-segmented-control--hidden": u.value,
+    const v = u(e["aria-label"]), { ariaLabel: C } = I(t), h = x({
+      ariaLabel: v.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: C,
+      defaultFallback: o("ariaLabelFallback")
+    }), b = r(() => a.value === !1), y = r(() => ({
+      "b-segmented-control--hidden": b.value,
       "b-segmented-control--full-width": t.fullWidth
     }));
     return {
       // Values
-      inputValue: n,
-      dropdownId: o,
-      segmentedControlRef: l,
-      conditionalClasses: g,
-      isSegmentedControlVisible: s,
-      isSegmentedControlHidden: u,
+      computedAriaLabel: h,
+      inputValue: l,
+      dropdownId: m,
+      segmentedControlRef: _,
+      conditionalClasses: y,
+      isSegmentedControlVisible: a,
+      isSegmentedControlHidden: b,
       // Methods
-      onInput: (d) => {
-        e(i.UPDATE, d);
+      onInput: (i) => {
+        n(c.UPDATE, i);
       }
     };
   }
 });
-var W = function() {
+var D = function() {
   var e = this, n = e._self._c;
-  return e._self._setupProxy, n("div", { staticClass: "b-segmented-control__wrapper" }, [e.isSegmentedControlHidden ? n("bento-dropdown", { attrs: { id: e.dropdownId, "aria-hidden": e.isSegmentedControlVisible, value: e.modelValue, items: e.items, "aria-label": e.ariaLabel }, on: { input: e.onInput } }) : e._e(), n("fieldset", { ref: "segmentedControlRef", staticClass: "b-segmented-control", class: e.conditionalClasses, attrs: { role: "group", "aria-hidden": e.isSegmentedControlHidden } }, e._l(e.items, function(o, l) {
+  return e._self._setupProxy, n("div", { staticClass: "b-segmented-control__wrapper" }, [e.isSegmentedControlHidden ? n("bento-dropdown", { attrs: { id: e.dropdownId, "aria-hidden": e.isSegmentedControlVisible, value: e.modelValue, items: e.items, "aria-label": e.computedAriaLabel }, on: { input: e.onInput } }) : e._e(), n("fieldset", { ref: "segmentedControlRef", staticClass: "b-segmented-control", class: e.conditionalClasses, attrs: { role: "group", "aria-hidden": e.isSegmentedControlHidden } }, e._l(e.items, function(o, l) {
     return n("segmented-control-button", { key: `segmented-control-item-${l}-${o.label}`, staticClass: "b-segmented-control__item", attrs: { label: o.label, value: o.value, disabled: o.disabled, "full-width": e.fullWidth, "model-value": e.inputValue }, on: { "update:model-value": e.onInput } });
   }), 1)], 1);
-}, $ = [], q = /* @__PURE__ */ b(
-  P,
-  W,
-  $,
+}, T = [], E = /* @__PURE__ */ p(
+  F,
+  D,
+  T,
   !1,
   null,
-  "2054ab47",
+  "b3ee5204",
   null,
   null
 );
-const F = q.exports;
+const Q = E.exports;
 export {
-  F as BentoSegmentedControl,
-  i as BentoSegmentedControlEvent
+  Q as BentoSegmentedControl,
+  c as BentoSegmentedControlEvent
 };
 //# sourceMappingURL=segmented-control.js.map

package/dist/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","sources":["../src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue","../src/components/segmented-control/segmented-control.types.ts","../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","BentoSegmentedControlEvent","BentoSegmentedControlEvent2","_sfc_main","BentoDropdown","SegmentedControlButton","arr","inputValue","toRef","dropdownId","segmentedControlRef","ref","isSegmentedControlVisible","observer","onMounted","config","entries","onUnmounted","isSegmentedControlHidden","value"],"mappings":"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"}
+{"version":3,"file":"segmented-control.js","sources":["../src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue","../src/components/segmented-control/segmented-control.types.ts","../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","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"],"mappings":";;;;;;;;;AA+BA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,GAAA,eAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,YAAA;AAAA,MAKA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,oBAAA;AAAA,EACA,MAAAC,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,0BAAA,GACAC,IAAAC,EAAA,MAAAL,EAAA,UAAAA,EAAA,UAAA,GACAM,IAAAD,EAAA,OAAA;AAAA,MAAA,2CAAA,CAAAL,EAAA;AAAA,MACA,0CAAAA,EAAA;AAAA,IACA,EAAA;AAOA,WAAA;AAAA;AAAA,MAAA,0BAAAE;AAAA,MAEA,WAAAE;AAAA,MACA,oBAAAE;AAAA;AAAA,MACA,SATA,MAAA;AACA,QAAAN,EAAA,YACAC,EAAA,sBAAAD,EAAA,KAAA;AAAA,MACA;AAAA,IAQA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;ACxFY,IAAAO,IAAA,kBAAAC,OACRA,EAAA,SAAA,sBADQA,IAAAD,KAAA,CAAA,CAAA;;;;;GCsDZE,IAAAZ,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,MAAA,EAAA,UAAAa,EAAA;AAAA,EACA,YAAA,EAAA,eAAAC,GAAA,wBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAC,MAAAA,EAAA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,YAAA;AAAA,MAIA,MAAA,CAAA,QAAA,QAAA,IAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAOA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAAN,EAAA,MAAA;AAAA,EAEA,MAAAP,GAAA,EAAA,OAAAc,GAAA,MAAAb,EAAA,GAAA;AAEA,UAAA,EAAA,GAAAc,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAlB,GAAA,YAAA,GACAmB,IAAAhB,EAAA,4BAAA,GACAiB,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA;AACA,QAAAE;AAEA,IAAAC,EAAA,MAAA;AACA,YAAAC,IAAA;AAAA,QAAA,MAAA;AAAA;AAAA,QACA,YAAA;AAAA,QAEA,WAAA;AAAA,MACA;AAEA,MAAAF,IAAA,IAAA,qBAAA,CAAAG,MAAA;AACA,QAAAA,KAAAA,EAAA,WACAA,EAAAA,EAAA,SAAA,CAAA,EAAA,iBAEAJ,EAAA,QAAA,KAGAA,EAAA,QAAA;AAAA,MAEA,GAAAG,CAAA,GAEAF,EAAA,QAAAH,EAAA,KAAA;AAAA,IAAA,CAAA,GAGAO,EAAA,MAAA;AACA,MAAAJ,EAAA,WAAA;AAAA,IAAA,CAAA;AAGA,UAAAK,IAAAP,EAAAP,EAAA,YAAA,CAAA,GACA,EAAA,WAAAe,EAAA,IAAAC,EAAA9B,CAAA,GACA+B,IAAAC,EAAA;AAAA,MAAA,WAAAJ,EAAA;AAAA;AAAA,MACA,OAAAC;AAAA,MAEA,iBAAAd,EAAA,mBAAA;AAAA,IACA,CAAA,GAGAkB,IAAA5B,EAAA,MAAAiB,EAAA,UAAA,EAAA,GAEAhB,IAAAD,EAAA,OAAA;AAAA,MAAA,+BAAA4B,EAAA;AAAA,MACA,mCAAAjC,EAAA;AAAA,IACA,EAAA;AAOA,WAAA;AAAA;AAAA,MAAA,mBAAA+B;AAAA,MAEA,YAAAd;AAAA,MACA,YAAAE;AAAA,MACA,qBAAAC;AAAA,MACA,oBAAAd;AAAA,MACA,2BAAAgB;AAAA,MACA,0BAAAW;AAAA;AAAA,MACA,SAZA,CAAAC,MAAA;AACA,QAAAjC,EAAAM,EAAA,QAAA2B,CAAA;AAAA,MAAA;AAAA,IAcA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;"}