@adyen/bento-vue2 1.26.0 → 1.28.0

package/dist/search-bar.js

@@ -1,93 +1,9 @@
-import { defineComponent as p, ref as c, watch as d } from "vue";
-import { d as _ } from "./chunks/debounce.b5ef6acf.js";
-import { u as f } from "./chunks/i18n.eb5b985b.js";
-import { BentoInputField as m } from "./input-field.js";
-import { S as h } from "./chunks/search.471270fe.js";
-import { C as y } from "./chunks/cross-circle-fill.27580c4b.js";
-import { n as b } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { u as w } from "./chunks/dropdown.10c034aa.js";
-import "./assets/index47.css";
-var o = /* @__PURE__ */ ((t) => (t.CLEAR = "clear", t.ESCAPE = "escape-pressed", t.INPUT = "input", t.UPDATE = "update:search-term", t))(o || {}), C = /* @__PURE__ */ ((t) => (t.CLEAR = "search-clear", t.INPUT = "search-input", t.UPDATE = "update:search-term", t))(C || {});
-const v = {
-  "en-US": {
-    search: "Search",
-    clearSearch: "Clear search"
-  }
-}, S = {
-  i18n: { messages: v }
-}, k = /* @__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
-     */
-    debounceTime: { type: Number, default: 300 },
-    /**
-     * Text displayed as the placeholder of the input-field
-     */
-    placeholder: { type: String, default: "" },
-    /**
-     * Text displayed as the value being searched
-     */
-    value: { type: String, default: void 0 }
-  },
-  emits: ["input", "clear", "escape-pressed"],
-  setup(t, { emit: a }) {
-    const n = t, { t: e } = f(), r = c(n.value), l = c();
-    d(
-      () => n.value,
-      () => {
-        r.value = n.value;
-      },
-      { immediate: !0 }
-    );
-    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 I = 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: "iconBefore", fn: function() {
-    return [n(e.SearchIcon, { attrs: { "svg-title": e.t("search"), "aria-hidden": "true" } })];
-  }, proxy: !0 }, e.searchTerm ? { key: "iconAfter", fn: function() {
-    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);
-}, x = [], F = /* @__PURE__ */ b(
-  k,
-  I,
-  x,
-  !1,
-  null,
-  "433ba33d",
-  null,
-  null
-);
-const R = F.exports;
+import { B as r, b as t, a as B } from "./chunks/search-bar.CsAgO-t5.js";
+import { u as o } from "./chunks/dropdown.yhhQCKve.js";
 export {
-  R as BentoSearchBar,
-  C as BentoSearchBarEvent,
-  o as BentoSearchBarInternalEvent,
-  w as useSearchBarFilter
+  r as BentoSearchBar,
+  t as BentoSearchBarEvent,
+  B as BentoSearchBarInternalEvent,
+  o 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=\"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 #iconBefore>\n                <search-icon :svg-title=\"t('search')\" aria-hidden=\"true\" />\n            </template>\n\n            <template v-if=\"searchTerm\" #iconAfter>\n                <div\n                    class=\"b-search-bar__clear-search\"\n                    tabindex=\"0\"\n                    data-testid=\"b-search-bar-clear-search-button\"\n                    @click=\"onClearSearch\"\n                    @keypress.enter=\"onClearSearch\"\n                    @keyup.space=\"onClearSearch\"\n                >\n                    <cross-circle-fill-icon :svg-title=\"t('clearSearch')\" />\n                </div>\n            </template>\n        </bento-input-field>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { ref, watch } from 'vue';\n    import { debounce } from '@/utils/ts/debounce';\n    import { BentoSearchBarInternalEvent } from './search-bar.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import BentoInputField from '@/components/input-field/input-field.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n        /**\n         * Text that labels an the search bar input element\n         */\n        inputFieldAriaLabel: { type: String, required: true },\n\n        /**\n         * Reduces height of the search bar\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Custom debounce time. Default: 300\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Text displayed as the placeholder of the input-field\n         */\n        placeholder: { type: String, default: '' },\n\n        /**\n         * Text displayed as the value being searched\n         */\n        value: { type: String, default: undefined },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the input value changes by typing a search. Debounced by the `debounceTime` property\n         */\n        (e: 'input', inputValue: string): void;\n\n        /**\n         * Emitted when the \"clear search\" button is clicked\n         */\n        (e: 'clear'): void;\n\n        /**\n         * Emitted when the \"ESC\" key is pressed inside the Search Bar input\n         */\n        (e: 'escape-pressed'): void;\n    }>();\n\n    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;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"search-bar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/secondary-nav.js

@@ -1,103 +1,5 @@
-import { defineComponent as r, inject as d, computed as p, ref as y, readonly as f, watch as m, provide as b } from "vue";
-import { B as o } from "./chunks/index.dd30e538.js";
-import { n as c } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index48.css";
-const u = Symbol("secondary nav state"), C = {}, g = /* @__PURE__ */ r({
-  ...C,
-  __name: "secondary-nav-item",
-  props: {
-    label: null,
-    value: null
-  },
-  emits: ["click"],
-  setup(n, { emit: e }) {
-    const a = n, { activeItemValue: s, updateActiveItemValue: t } = d(u), l = p(() => ({
-      "b-secondary-nav-item--active": s.value === a.value
-    }));
-    return { __sfc: !0, activeItemValue: s, updateActiveItemValue: t, props: a, conditionalClasses: l, emit: e, onClick: (i) => {
-      e("click", i), t(a.value);
-    }, BentoTypography: o };
-  }
-});
-var N = function() {
-  var e = this, a = e._self._c, s = e._self._setupProxy;
-  return a("button", { staticClass: "b-secondary-nav-item", class: s.conditionalClasses, on: { click: s.onClick } }, [a(s.BentoTypography, { staticClass: "b-secondary-nav-item__title", attrs: { variant: "body", stronger: "" } }, [e._v(" " + e._s(e.label) + " ")])], 1);
-}, h = [], x = /* @__PURE__ */ c(
-  g,
-  N,
-  h,
-  !1,
-  null,
-  "88034e97",
-  null,
-  null
-);
-const v = x.exports, $ = {}, I = /* @__PURE__ */ r({
-  ...$,
-  __name: "secondary-nav-category",
-  props: {
-    label: null,
-    items: null
-  },
-  setup(n) {
-    return { __sfc: !0, BentoTypography: o, SecondaryNavItem: v };
-  }
-});
-var S = function() {
-  var e = this, a = e._self._c, s = e._self._setupProxy;
-  return a("section", { staticClass: "b-secondary-nav-category", attrs: { "aria-label": e.label } }, [a(s.BentoTypography, { staticClass: "b-secondary-nav-category__label", attrs: { el: "h1", variant: "caption", stronger: "" } }, [e._v(e._s(e.label))]), a("ul", { staticClass: "b-secondary-nav__list" }, e._l(e.items, function(t) {
-    return a("li", { key: t.value }, [a(s.SecondaryNavItem, { attrs: { label: t.label, value: t.value } })], 1);
-  }), 0)], 1);
-}, k = [], V = /* @__PURE__ */ c(
-  I,
-  S,
-  k,
-  !1,
-  null,
-  "e84d58de",
-  null,
-  null
-);
-const A = V.exports, B = {}, T = /* @__PURE__ */ r({
-  ...B,
-  __name: "secondary-nav",
-  props: {
-    items: null,
-    value: null
-  },
-  emits: ["change"],
-  setup(n, { emit: e }) {
-    const a = n, s = y(a.value), t = (_) => {
-      s.value = _, e("change", _);
-    }, l = {
-      activeItemValue: f(s),
-      updateActiveItemValue: t
-    };
-    return m(
-      () => a.value,
-      (_) => {
-        s.value = _;
-      }
-    ), b(u, l), { __sfc: !0, props: a, emit: e, activeItemValue: s, updateActiveItemValue: t, state: l, SecondaryNavItem: v, SecondaryNavCategory: A };
-  }
-});
-var R = function() {
-  var e = this, a = e._self._c, s = e._self._setupProxy;
-  return a("nav", { staticClass: "b-secondary-nav" }, [a("ul", { staticClass: "b-secondary-nav__list" }, e._l(e.items, function(t) {
-    return a("li", { key: t.label }, ["items" in t ? a(s.SecondaryNavCategory, { attrs: { label: t.label, items: t.items } }) : a(s.SecondaryNavItem, { attrs: { label: t.label, value: t.value } })], 1);
-  }), 0)]);
-}, F = [], P = /* @__PURE__ */ c(
-  T,
-  R,
-  F,
-  !1,
-  null,
-  "59f72588",
-  null,
-  null
-);
-const z = P.exports;
+import { s as e } from "./chunks/secondary-nav.CNgpPxUU.js";
 export {
-  z as BentoSecondaryNav
+  e as BentoSecondaryNav
 };
 //# sourceMappingURL=secondary-nav.js.map

package/dist/secondary-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"secondary-nav.js","sources":["../src/components/secondary-nav/secondary-nav.keys.ts","../src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../src/components/secondary-nav/secondary-nav.vue"],"sourcesContent":["import { InjectionKey } from 'vue';\nimport { BentoSecondaryNavState } from './secondary-nav.types';\n\nexport const SECONDARY_NAV_STATE = Symbol('secondary nav state') as InjectionKey<BentoSecondaryNavState>;\n","<template>\n    <button class=\"b-secondary-nav-item\" :class=\"conditionalClasses\" @click=\"onClick\">\n        <bento-typography class=\"b-secondary-nav-item__title\" variant=\"body\" stronger>\n            {{ label }}\n        </bento-typography>\n    </button>\n</template>\n\n<script lang=\"ts\" setup>\n    import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys';\n    import { BentoTypography } from '@/components/typography';\n    import { computed, inject } from 'vue';\n\n    const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE);\n\n    const props = defineProps<{\n        /**\n         * The display name of the navigation item\n         */\n        label: string;\n        /**\n         * The value of this item.\n         */\n        value: string;\n    }>();\n\n    const conditionalClasses = computed(() => ({\n        'b-secondary-nav-item--active': activeItemValue.value === props.value,\n    }));\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when this element is clicked\n         */\n        (e: 'click', clickEvent: MouseEvent): void;\n    }>();\n\n    const onClick = (e: MouseEvent) => {\n        emit('click', e);\n        updateActiveItemValue(props.value);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-item.scss\" />\n","<template>\n    <section class=\"b-secondary-nav-category\" :aria-label=\"label\">\n        <bento-typography el=\"h1\" class=\"b-secondary-nav-category__label\" variant=\"caption\" stronger>{{\n            label\n        }}</bento-typography>\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.value\">\n                <secondary-nav-item :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </section>\n</template>\n\n<script lang=\"ts\" setup>\n    import { BentoTypography } from '@/components/typography';\n    import { SecondaryNavItem } from '../secondary-nav-item';\n    import { BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n\n    defineProps<{\n        /**\n         * The display name of the category\n         */\n        label: string;\n        /**\n         * A list of {@see BentoSecondaryNavItemsItem} that belongs to this category\n         */\n        items: BentoSecondaryNavItemsItem[];\n    }>();\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-category.scss\" />\n","<template>\n    <nav class=\"b-secondary-nav\">\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.label\">\n                <secondary-nav-category v-if=\"'items' in item\" :label=\"item.label\" :items=\"item.items\" />\n                <secondary-nav-item v-else :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { provide, readonly, ref, watch } from 'vue';\n    import { SecondaryNavItem } from './components/secondary-nav-item';\n    import { SecondaryNavCategory } from './components/secondary-nav-category';\n    import { SECONDARY_NAV_STATE } from './secondary-nav.keys';\n    import { BentoSecondaryNavItems, BentoSecondaryNavState } from './secondary-nav.types';\n\n    const props = defineProps<{\n        /**\n         * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },\n         * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.\n         */\n        items: BentoSecondaryNavItems;\n        /**\n         * The value of the selected item.\n         */\n        value?: string;\n    }>();\n\n    const emit = defineEmits<{\n        /**\n         * Emmited when the current selected item changes\n         */\n        (e: 'change', category: string): void;\n    }>();\n\n    const activeItemValue = ref(props.value);\n    const updateActiveItemValue = (value: string) => {\n        activeItemValue.value = value;\n        emit('change', value);\n    };\n\n    // The component's state is inject on `secondary-nav-item` to determine the\n    // current active item and to change its value\n    const state: BentoSecondaryNavState = {\n        activeItemValue: readonly(activeItemValue),\n        updateActiveItemValue,\n    };\n\n    watch(\n        () => props.value,\n        value => {\n            activeItemValue.value = value;\n        }\n    );\n\n    provide(SECONDARY_NAV_STATE, state);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Secondary Nav offers users a structured way to access information.\n     * It also provides a clear hierarchy for users to understand and navigate through various information.\n     *\n     * @example\n     * import { BentoSecondaryNav } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSecondaryNav },\n     *     template: `\n     *          <bento-secondary-nav :value=\"value\" :items=\"items\" />\n     *     `,\n     *     setup() {\n     *         const value = ref(2) // Active item value\n     *         const items: BentoSecondaryNavItemInfo[] = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { items, value };\n     *     }\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav.scss\" />\n"],"names":["SECONDARY_NAV_STATE","__default__$2","activeItemValue","updateActiveItemValue","inject","conditionalClasses","computed","props","e","emit","__default__$1","__default__","ref","value","state","readonly","watch","provide"],"mappings":";;;;AAGa,MAAAA,IAAA,OAAA,qBAAA,GC4CTC,IAAA,CAAA;;;;;;;;;iBAlCA,EAAA,iBAAAC,GAAA,uBAAAC,EAAA,IAAAC,EAAAJ,CAAA,GAaAK,IAAAC,EAAA,OAAA;AAAA,MAA2C,gCAAAJ,EAAA,UAAAK,EAAA;AAAA,IACyB,EAAA;yHAUpE,CAAAC,MAAA;AACI,MAAAC,EAAA,SAAAD,CAAA,GACAL,EAAAI,EAAA,KAAA;AAAA,IAAiC;;;;;;;;;;;;;;;;qBCLrCG,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;qBCiDAC,IAAA,CAAA;;;;;;;;;iBA9CAT,IAAAU,EAAAL,EAAA,KAAA,GACAJ,IAAA,CAAAU,MAAA;AACI,MAAAX,EAAA,QAAAW,GACAJ,EAAA,UAAAI,CAAA;AAAA,IAAoB,GAKxBC,IAAA;AAAA,MAAsC,iBAAAC,EAAAb,CAAA;AAAA,MACO,uBAAAC;AAAA,IACzC;AAGJ,WAAAa;AAAA,MAAA,MAAAT,EAAA;AAAA,MACgB,CAAAM,MAAA;AAER,QAAAX,EAAA,QAAAW;AAAA,MAAwB;AAAA,IAC5B,GAGJI,EAAAjB,GAAAc,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"secondary-nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/segmented-control.js

@@ -1,218 +1,7 @@
-import { defineComponent as g, ref as r, computed as s, toRef as k, toRefs as w, onMounted as L } from "vue";
-import { B as x } from "./chunks/index.dd30e538.js";
-import { g as I } from "./chunks/unique-id.a2a2b458.js";
-import { C as S } from "./chunks/checkmark.a6ed8f47.js";
-import { n as v } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { u as $ } from "./chunks/i18n.eb5b985b.js";
-import { u as W } from "./chunks/aria-label.ac9651a5.js";
-import { o as T } from "./chunks/resize.a041304d.js";
-import { b as A } from "./chunks/tooltip.58ef3f4a.js";
-import "./assets/index46.css";
-const F = g({
-  name: "bento-segmented-control-button",
-  components: { BentoTypography: x, CheckmarkIcon: S },
-  props: {
-    /**
-     * The string the button will showcase
-     */
-    label: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Indicates the value of the input that will be returned when it's selected
-     */
-    value: {
-      type: [String, Number],
-      required: !0
-    },
-    /**
-     * This property should not be used directly.
-     * It will be used by v-model directive on the segmented control component
-     */
-    modelValue: {
-      type: [String, Number],
-      default: null
-    },
-    /**
-     * Disable the radio button (optional)
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Renders the button with a 100% width
-     */
-    fullWidth: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Renders the button with a truncated text if the space is not enough to render the whole content
-     */
-    truncate: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Renders the button with centered text in case the text has to wrap multiple lines
-     */
-    wrap: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: ["update:model-value"],
-  setup(t, { emit: e }) {
-    const n = r(), o = I("segmented-control-button"), a = s(() => t.value === t.modelValue), i = s(() => ({
-      "b-segmented-control-button--hug-content": !t.fullWidth,
-      "b-segmented-control-button--full-width": t.fullWidth,
-      "b-segmented-control-button--truncate": t.truncate,
-      "b-segmented-control-button--wrap": t.wrap && !t.truncate
-    }));
-    return {
-      // Values
-      segmentedControlButtonLabel: n,
-      segmentedControlButtonId: o,
-      isChecked: a,
-      conditionalClasses: i,
-      // Methods
-      onClick: () => {
-        t.disabled || e("update:model-value", t.value);
-      }
-    };
-  }
-});
-var P = 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", { ref: "segmentedControlButtonLabel", staticClass: "b-segmented-control-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(e.label) + " ")])], 1) : e._e()]);
-}, R = [], V = /* @__PURE__ */ v(
-  F,
-  P,
-  R,
-  !1,
-  null,
-  "eb54027d",
-  null,
-  null
-);
-const U = V.exports;
-var f = /* @__PURE__ */ ((t) => (t.UPDATE = "update:model-value", t))(f || {});
-const q = {
-  "en-US": {
-    ariaLabelFallback: "Segmented control"
-  }
-}, D = g({
-  name: "bento-segmented-control",
-  i18n: { messages: q },
-  components: { SegmentedControlButton: U },
-  directives: { BentoTooltipDirective: A },
-  props: {
-    /**
-     * Items that will populate the segmented control.
-     */
-    items: {
-      type: Array,
-      required: !0,
-      validator: (t) => t.length <= 5
-    },
-    /**
-     * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.
-     */
-    modelValue: {
-      type: [Number, String, null],
-      required: !0
-    },
-    /**
-     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
-     */
-    /**
-     * Accessible name describing the segmented control.
-     */
-    ariaLabel: {
-      type: String,
-      default: null
-    },
-    /**
-     * If set to true, renders the component full width.
-     */
-    fullWidth: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.
-     */
-    wrap: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [f.UPDATE],
-  setup(t, { attrs: e, emit: n }) {
-    const { t: o } = $(), a = k(t, "modelValue"), i = r(e["aria-label"]), { ariaLabel: _ } = w(t), C = W({
-      ariaLabel: i.value,
-      // TODO: take this line away when the aria-label props is removed
-      label: _,
-      defaultFallback: o("ariaLabelFallback")
-    }), m = r(), d = r(), u = r(), b = s(() => !t.wrap);
-    L(() => {
-      T(m.value, () => {
-        var l;
-        m.value && (u.value = (l = d == null ? void 0 : d.value) == null ? void 0 : l.map(
-          (c) => c.$refs.segmentedControlButtonLabel.$el.offsetWidth < c.$refs.segmentedControlButtonLabel.$el.scrollWidth
-        ));
-      });
-    });
-    const h = s(
-      () => t.items.map((l, c) => {
-        var p;
-        return {
-          ...l,
-          tooltipText: b.value && ((p = u == null ? void 0 : u.value) != null && p[c]) ? l.label : void 0
-        };
-      })
-    ), y = (l) => {
-      n(f.UPDATE, l);
-    }, B = s(() => ({
-      "b-segmented-control--hug": !t.fullWidth,
-      "b-segmented-control--full-width": t.fullWidth,
-      "b-segmented-control--truncate": b.value,
-      "b-segmented-control--wrap": t.wrap
-    }));
-    return {
-      // Values
-      computedAriaLabel: C,
-      inputValue: a,
-      segmentedControlRef: m,
-      segmentedControlButtonRef: d,
-      computedItems: h,
-      truncate: b,
-      conditionalClasses: B,
-      // Methods
-      onInput: y
-    };
-  }
-});
-var N = function() {
-  var e = this, n = e._self._c;
-  return e._self._setupProxy, n("div", { ref: "segmentedControlRef", staticClass: "b-segmented-control", class: e.conditionalClasses, attrs: { role: "group" } }, e._l(e.computedItems, function(o, a) {
-    return n("segmented-control-button", { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive", value: o.tooltipText, expression: "item.tooltipText" }], key: `segmented-control-item-${a}-${o.label}`, ref: "segmentedControlButtonRef", refInFor: !0, staticClass: "b-segmented-control__item", attrs: { label: o.label, value: o.value, disabled: o.disabled, truncate: e.truncate, wrap: e.wrap, "full-width": e.fullWidth, "model-value": e.inputValue }, on: { "update:model-value": e.onInput } });
-  }), 1);
-}, E = [], z = /* @__PURE__ */ v(
-  D,
-  N,
-  E,
-  !1,
-  null,
-  "da20e96f",
-  null,
-  null
-);
-const Y = z.exports;
+import { B as t } from "./chunks/segmented-control.DGjIC7Ab.js";
+import { B as r } from "./chunks/segmented-control.types.BHRLV8KU.js";
 export {
-  Y as BentoSegmentedControl,
-  f as BentoSegmentedControlEvent
+  t as BentoSegmentedControl,
+  r 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                ref=\"segmentedControlButtonLabel\"\n                class=\"b-segmented-control-button__label\"\n                el=\"span\"\n                variant=\"body\"\n                stronger\n            >\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, ref } 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             * Renders the button with a truncated text if the space is not enough to render the whole content\n             */\n            truncate: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Renders the button with centered text in case the text has to wrap multiple lines\n             */\n            wrap: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: ['update:model-value'],\n        setup(props, { emit }) {\n            const segmentedControlButtonLabel = ref();\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                'b-segmented-control-button--truncate': props.truncate,\n                'b-segmented-control-button--wrap': props.wrap && !props.truncate,\n            }));\n            const onClick = () => {\n                if (!props.disabled) {\n                    emit('update:model-value', props.value);\n                }\n            };\n            return {\n                // Values\n                segmentedControlButtonLabel,\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 ref=\"segmentedControlRef\" role=\"group\" class=\"b-segmented-control\" :class=\"conditionalClasses\">\n        <segmented-control-button\n            v-for=\"(item, index) in computedItems\"\n            ref=\"segmentedControlButtonRef\"\n            :key=\"`segmented-control-item-${index}-${item.label}`\"\n            v-bento-tooltip-directive=\"item.tooltipText\"\n            class=\"b-segmented-control__item\"\n            :label=\"item.label\"\n            :value=\"item.value\"\n            :disabled=\"item.disabled\"\n            :truncate=\"truncate\"\n            :wrap=\"wrap\"\n            :full-width=\"fullWidth\"\n            :model-value=\"inputValue\"\n            @update:model-value=\"onInput\"\n        ></segmented-control-button>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, 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 { BentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import messages from './messages.json';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\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: { SegmentedControlButton },\n        directives: { BentoTooltipDirective },\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                default: null,\n            },\n            /**\n             * If set to true, renders the component full width.\n             */\n            fullWidth: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.\n             */\n            wrap: {\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\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 segmentedControlRef = ref();\n            const segmentedControlButtonRef = ref();\n            const hasEllipsis = ref();\n\n            const truncate = computed(() => !props.wrap);\n\n            onMounted(() => {\n                observeSizeOfElement(segmentedControlRef.value, () => {\n                    if (segmentedControlRef.value) {\n                        hasEllipsis.value = segmentedControlButtonRef?.value?.map(\n                            el =>\n                                el.$refs.segmentedControlButtonLabel.$el.offsetWidth <\n                                el.$refs.segmentedControlButtonLabel.$el.scrollWidth\n                        );\n                    }\n                });\n            });\n\n            const computedItems = computed(() =>\n                props.items.map((el, index) => ({\n                    ...el,\n                    tooltipText: truncate.value && hasEllipsis?.value?.[index] ? el.label : undefined,\n                }))\n            );\n\n            const onInput = value => {\n                emit(BentoSegmentedControlEvent.UPDATE, value);\n            };\n\n            const conditionalClasses = computed(() => ({\n                'b-segmented-control--hug': !props.fullWidth,\n                'b-segmented-control--full-width': props.fullWidth,\n                'b-segmented-control--truncate': truncate.value,\n                'b-segmented-control--wrap': props.wrap,\n            }));\n\n            return {\n                // Values\n                computedAriaLabel,\n                inputValue,\n                segmentedControlRef,\n                segmentedControlButtonRef,\n                computedItems,\n                truncate,\n                conditionalClasses,\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","segmentedControlButtonLabel","ref","segmentedControlButtonId","generateUid","isChecked","computed","conditionalClasses","BentoSegmentedControlEvent","BentoSegmentedControlEvent2","_sfc_main","messages","SegmentedControlButton","BentoTooltipDirective","arr","attrs","t","useI18n","inputValue","toRef","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","segmentedControlRef","segmentedControlButtonRef","hasEllipsis","truncate","onMounted","observeSizeOfElement","_a","el","computedItems","index","onInput","value"],"mappings":"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"}
+{"version":3,"file":"segmented-control.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}