@adyen/bento-vue3 1.68.2 → 1.70.0

package/dist/chunks/dropdown-tag.DlFpUeXa.js

@@ -0,0 +1,296 @@
+import { defineComponent as r, computed as w, createElementBlock as v, openBlock as b, createVNode as d, mergeProps as _, withCtx as y, unref as m, toRefs as C, createTextVNode as $, toDisplayString as M, ref as f, watch as T, createBlock as L } from "vue";
+import { B as O } from "./avatar.Dq59yj6m.js";
+import { B, u as x } from "./dropdown.agfzvJZE.js";
+import { d as z, B as D } from "./typography.yBEME_Gu.js";
+import { u as V } from "./use-country-items.D_kamcYy.js";
+import { B as I } from "./country.types.C0Q_hhgJ.js";
+import { L as S } from "./listbox-option-tag.CDIkX7nh.js";
+import { B as P } from "./payment-method.CDnn1bjo.js";
+import { _ as j } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/dropdown-tag.css";
+const F = r({
+  name: "bento-dropdown-avatar"
+}), Y = /* @__PURE__ */ r({
+  ...F,
+  props: {
+    items: { default: () => [] },
+    ariaLabel: {},
+    condensed: { type: Boolean },
+    emptyState: {},
+    disabled: { type: Boolean },
+    dynamicFiltering: { type: Boolean },
+    error: { type: Boolean },
+    errorMessage: {},
+    description: {},
+    hasMoreItems: { type: Boolean },
+    isOptionDisabled: {},
+    label: {},
+    loading: { type: Boolean },
+    componentLoading: { type: Boolean },
+    lazyLoadType: {},
+    multiple: { type: Boolean },
+    optional: { type: Boolean },
+    placeholder: {},
+    readonly: { type: Boolean },
+    required: { type: Boolean },
+    search: {},
+    showSlotContentInMultiple: { type: Boolean },
+    size: {},
+    staticCategories: { type: Boolean },
+    tooltipText: {},
+    value: {},
+    virtualScroll: { type: [Boolean, Object] },
+    enableValueLabelPair: { type: Boolean }
+  },
+  emits: ["input"],
+  setup(s, { emit: i }) {
+    const o = s, c = i, l = (e) => c("input", e), p = w(() => o.items.map(({ value: e, label: a, src: t }) => ({ value: e, label: a, data: t })));
+    return (e, a) => (b(), v("div", null, [
+      d(B, _(e.$props, {
+        items: p.value,
+        onInput: l
+      }), {
+        default: y(({ label: t, data: n }) => [
+          d(m(O), {
+            username: t,
+            src: n
+          }, null, 8, ["username", "src"])
+        ]),
+        _: 1
+      }, 16, ["items"])
+    ]));
+  }
+}), k = r({
+  name: "b-dropdown-country"
+}), Z = /* @__PURE__ */ r({
+  ...k,
+  props: {
+    ...B.props,
+    /**
+     * The option elements to populate the country dropdown with.
+     * It must be an array of {@see BentoCountryListboxOptions }
+     *  * @deprecated {string} value.label - Use BentoDropdown instead of custom labels
+     *  * @property {BentoCountryCode | string} value.value - Country code of the option
+     */
+    items: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Which label variant to display.
+     * @values iso, name, phone_code, capital
+     */
+    variant: {
+      type: String,
+      default: I.CUSTOM,
+      validator: (s) => Object.values(I).includes(s)
+    }
+  },
+  emits: ["input"],
+  setup(s, { emit: i }) {
+    const o = s, c = i, l = (t) => c("input", t), { variant: p, items: e } = C(o), a = V(p, e);
+    return (p.value === "custom" || e.value.some((t) => t.label)) && z(
+      'BentoDropdownCountry "custom" variant and "items" prop "label" key',
+      "Use any of the other BentoDropdownCountry variants instead OR use BentoDropdown component for custom labels",
+      "2.0.0"
+    ), (t, n) => (b(), v("div", null, [
+      d(B, _(t.$props, {
+        items: m(a),
+        onInput: l
+      }), {
+        default: y(({ label: h }) => [
+          d(m(D), { el: "span" }, {
+            default: y(() => [
+              $(M(h), 1)
+            ]),
+            _: 2
+          }, 1024)
+        ]),
+        _: 1
+      }, 16, ["items"])
+    ]));
+  }
+}), q = r({
+  name: "b-dropdown-currency"
+}), ee = /* @__PURE__ */ r({
+  ...q,
+  props: {
+    items: { default: () => [] },
+    ariaLabel: {},
+    condensed: { type: Boolean },
+    emptyState: {},
+    disabled: { type: Boolean },
+    dynamicFiltering: { type: Boolean },
+    error: { type: Boolean },
+    errorMessage: {},
+    description: {},
+    hasMoreItems: { type: Boolean },
+    isOptionDisabled: {},
+    label: {},
+    loading: { type: Boolean },
+    componentLoading: { type: Boolean },
+    lazyLoadType: {},
+    multiple: { type: Boolean },
+    optional: { type: Boolean },
+    placeholder: {},
+    readonly: { type: Boolean },
+    required: { type: Boolean },
+    search: {},
+    showSlotContentInMultiple: { type: Boolean },
+    size: {},
+    staticCategories: { type: Boolean },
+    tooltipText: {},
+    value: {},
+    virtualScroll: { type: [Boolean, Object] },
+    enableValueLabelPair: { type: Boolean }
+  },
+  emits: ["input"],
+  setup(s, { emit: i }) {
+    const o = s, c = i, l = (a) => c("input", a), p = f([]);
+    T(
+      () => o.items,
+      () => p.value = o.items,
+      { immediate: !0 }
+    );
+    const e = o.search ? o.search : {
+      debounceTime: 500,
+      searchEvent: async (a) => {
+        var g;
+        const t = o.items.map((u) => ({
+          ...u,
+          label: `${u.value} ${u.label}`
+        })), n = x(
+          f(a),
+          f(t),
+          (g = o == null ? void 0 : o.search) == null ? void 0 : g.searchEvent,
+          f(!1)
+        ).value, h = n == null ? void 0 : n.map((u) => ({
+          ...u,
+          label: u.label.substring(u.value.length + 1)
+        }));
+        p.value = h;
+      }
+    };
+    return (a, t) => (b(), L(B, _(a.$props, {
+      search: m(e),
+      items: p.value,
+      onInput: l
+    }), {
+      default: y((n) => [
+        d(m(S), { option: n }, null, 8, ["option"])
+      ]),
+      _: 1
+    }, 16, ["search", "items"]));
+  }
+}), E = r({
+  name: "bento-dropdown-payment-method"
+}), oe = /* @__PURE__ */ r({
+  ...E,
+  props: {
+    items: { default: () => [] },
+    ariaLabel: {},
+    condensed: { type: Boolean },
+    emptyState: {},
+    disabled: { type: Boolean },
+    dynamicFiltering: { type: Boolean },
+    error: { type: Boolean },
+    errorMessage: {},
+    description: {},
+    hasMoreItems: { type: Boolean },
+    isOptionDisabled: {},
+    label: {},
+    loading: { type: Boolean },
+    componentLoading: { type: Boolean },
+    lazyLoadType: {},
+    multiple: { type: Boolean },
+    optional: { type: Boolean },
+    placeholder: {},
+    readonly: { type: Boolean },
+    required: { type: Boolean },
+    search: {},
+    showSlotContentInMultiple: { type: Boolean },
+    size: {},
+    staticCategories: { type: Boolean },
+    tooltipText: {},
+    value: {},
+    virtualScroll: { type: [Boolean, Object] },
+    enableValueLabelPair: { type: Boolean }
+  },
+  emits: ["input"],
+  setup(s, { emit: i }) {
+    const o = i, c = (l) => o("input", l);
+    return (l, p) => (b(), v("div", null, [
+      d(B, _(l.$props, { onInput: c }), {
+        default: y(({ value: e, label: a }) => [
+          d(m(P), {
+            type: e,
+            label: a
+          }, null, 8, ["type", "label"])
+        ]),
+        _: 1
+      }, 16)
+    ]));
+  }
+}), A = r({
+  name: "bento-dropdown-tag"
+}), N = /* @__PURE__ */ r({
+  ...A,
+  props: {
+    items: { default: () => [] },
+    ariaLabel: {},
+    condensed: { type: Boolean },
+    emptyState: {},
+    disabled: { type: Boolean },
+    dynamicFiltering: { type: Boolean },
+    error: { type: Boolean },
+    errorMessage: {},
+    description: {},
+    hasMoreItems: { type: Boolean },
+    isOptionDisabled: {},
+    label: {},
+    loading: { type: Boolean },
+    componentLoading: { type: Boolean },
+    lazyLoadType: {},
+    multiple: { type: Boolean },
+    optional: { type: Boolean },
+    placeholder: {},
+    readonly: { type: Boolean },
+    required: { type: Boolean },
+    search: {},
+    showSlotContentInMultiple: { type: Boolean },
+    size: {},
+    staticCategories: { type: Boolean },
+    tooltipText: {},
+    value: {},
+    virtualScroll: { type: [Boolean, Object] },
+    enableValueLabelPair: { type: Boolean }
+  },
+  emits: ["input"],
+  setup(s, { emit: i }) {
+    const o = s, c = i, l = (e) => c("input", e), p = w(() => {
+      var e;
+      return (e = o.items) == null ? void 0 : e.map(({ label: a, value: t, variant: n }) => ({ label: a, value: t, data: n }));
+    });
+    return (e, a) => (b(), L(B, _(e.$props, {
+      class: "b-dropdown-tag",
+      items: p.value,
+      "show-slot-content-in-multiple": "",
+      onInput: l
+    }), {
+      default: y(({ label: t, data: n }) => [
+        d(m(S), {
+          option: { value: t, data: n, label: "" }
+        }, null, 8, ["option"])
+      ]),
+      _: 1
+    }, 16, ["items"]));
+  }
+}), te = /* @__PURE__ */ j(N, [["__scopeId", "data-v-ad159485"]]);
+export {
+  Y as _,
+  Z as a,
+  ee as b,
+  oe as c,
+  te as d
+};
+//# sourceMappingURL=dropdown-tag.DlFpUeXa.js.map

package/dist/chunks/dropdown-tag.DlFpUeXa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-tag.DlFpUeXa.js","sources":["../../../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue"],"sourcesContent":["<template>\n    <div>\n        <bento-dropdown v-slot=\"{ label, data }\" v-bind=\"$props\" :items=\"dropdownItems\" @input=\"onInput\">\n            <bento-avatar :username=\"label\" :src=\"data\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import { type BentoListboxSelectedValue } from '@/types';\n    import { type BentoDropdownAvatarProps } from './dropdown-avatar.types';\n    import { BentoAvatar } from '@/components/avatar';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    const props = withDefaults(defineProps<BentoDropdownAvatarProps>(), {\n        items: () => [],\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an item is selected\n         */\n        (e: 'input', selectedValue: BentoListboxSelectedValue);\n    }>();\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n    const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Avatar Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownAvatar } from '@adyen/bento-vue2';\n     * import type { BentoAvatarListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownAvatar },\n     *     template: `\n     *          <bento-dropdown-avatar\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('user-id-1') // Default value\n     *         const options: BentoAvatarListboxOptions = [\n     *              { label: 'User 1', value: 'user-id-1' },\n     *              { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-avatar',\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown v-slot=\"{ label }\" v-bind=\"$props\" :items=\"countryItems\" @input=\"onInput\">\n            <bento-typography el=\"span\">{{ label }}</bento-typography>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, toRefs } from 'vue';\n    import { type BentoCountryListboxOptions } from './dropdown-country.types';\n    import { type BentoListboxSelectedValue } from '@/types';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryItems } from './composables/use-country-items';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { BentoCountryVariant } from '@/components/country';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the country dropdown with.\n         * It must be an array of {@see BentoCountryListboxOptions }\n         *  * @deprecated {string} value.label - Use BentoDropdown instead of custom labels\n         *  * @property {BentoCountryCode | string} value.value - Country code of the option\n         */\n        items: {\n            type: Array as PropType<BentoCountryListboxOptions>,\n            default: () => [],\n        },\n\n        /**\n         * Which label variant to display.\n         * @values iso, name, phone_code, capital\n         */\n        variant: {\n            type: String as PropType<BentoCountryVariant | `${BentoCountryVariant}`>,\n            default: BentoCountryVariant.CUSTOM,\n            validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an item is selected\n         */\n        (e: 'input', selectedValue: BentoListboxSelectedValue);\n    }>();\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n    const { variant, items } = toRefs(props);\n    const countryItems = useCountryItems(variant, items);\n\n    if (variant.value === 'custom' || items.value.some(item => item.label)) {\n        deprecate(\n            'BentoDropdownCountry \"custom\" variant and \"items\" prop \"label\" key',\n            'Use any of the other BentoDropdownCountry variants instead OR use BentoDropdown component for custom labels',\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Country Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-country\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-country',\n    });\n</script>\n","<template>\n    <bento-dropdown v-slot=\"slotProps\" v-bind=\"$props\" :search=\"search\" :items=\"filteredItems\" @input=\"onInput\">\n        <listbox-option-tag :option=\"slotProps\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, ref, watch } from 'vue';\n    import type { BentoCurrencyListboxOptions, BentoDropdownCurrencyProps } from './dropdown-currency.types';\n    import type { BentoListboxSelectedValue } from '@/types';\n    import { ListboxOptionTag } from '@/internal';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useSearchBarFilter } from '@/components/search-bar';\n\n    const props = withDefaults(defineProps<BentoDropdownCurrencyProps>(), {\n        items: () => [],\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an item is selected\n         */\n        (e: 'input', selectedValue: BentoListboxSelectedValue);\n    }>();\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n    const filteredItems = ref<BentoCurrencyListboxOptions>([]);\n\n    watch(\n        () => props.items,\n        () => (filteredItems.value = props.items),\n        { immediate: true }\n    );\n\n    const search = props.search\n        ? props.search\n        : {\n              debounceTime: 500,\n              searchEvent: async (searchTerm: string) => {\n                  // Combine value and label to be able to search by the currency code\n                  const searchableItems = props.items.map(item => ({\n                      ...item,\n                      label: `${item.value} ${item.label}`,\n                  }));\n\n                  const searchResults = useSearchBarFilter(\n                      ref(searchTerm),\n                      ref<BentoCurrencyListboxOptions>(searchableItems),\n                      props?.search?.searchEvent,\n                      ref(false)\n                  ).value;\n\n                  // Restore original labels by removing the prepended value\n                  const normalizedResults = searchResults?.map(result => ({\n                      ...result,\n                      label: result.label.substring(result.value.length + 1),\n                  }));\n\n                  filteredItems.value = normalizedResults;\n              },\n          };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Currency Dropdown showing a selectable list of currencies.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-currency\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-currency',\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown v-slot=\"{ value, label }\" v-bind=\"$props\" @input=\"onInput\">\n            <bento-payment-method :type=\"value\" :label=\"label\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent } from 'vue';\n    import { type BentoDropdownPaymentMethodProps } from './dropdown-payment-method.types';\n    import { type BentoListboxSelectedValue } from '@/types';\n    import { BentoPaymentMethod } from '@/components/payment-method';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    withDefaults(defineProps<BentoDropdownPaymentMethodProps>(), {\n        items: () => [],\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an item is selected\n         */\n        (e: 'input', selectedValue: BentoListboxSelectedValue);\n    }>();\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Payment method Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownPaymentMethod } from '@adyen/bento-vue2';\n     * import type { BentoPaymentMethodListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownPaymentMethod },\n     *     template: `\n     *          <bento-dropdown-payment-method\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 'Visa'\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('ideal') // Default value\n     *         const options: BentoPaymentMethodListboxOptions = [\n     *              { label: 'Option 1', value: 'ideal' },\n     *              { label: 'Option 2', value: 'visa' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-payment-method',\n    });\n</script>\n","<template>\n    <bento-dropdown\n        v-slot=\"{ label, data }\"\n        v-bind=\"$props\"\n        class=\"b-dropdown-tag\"\n        :items=\"tagItems\"\n        show-slot-content-in-multiple\n        @input=\"onInput\"\n    >\n        <listbox-option-tag :option=\"{ value: label, data, label: '' }\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import type { BentoDropdownTagProps } from './dropdown-tag.types';\n    import type { BentoListboxSelectedValue } from '../../../../../types';\n    import { ListboxOptionTag } from '../../../../internal';\n    import BentoDropdown from '../../../dropdown.vue';\n\n    const props = withDefaults(defineProps<BentoDropdownTagProps>(), {\n        items: () => [],\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an item is selected\n         */\n        (e: 'input', selectedValue: BentoListboxSelectedValue);\n    }>();\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n    const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Tag Dropdown showing a selectable list of tags.\n     *\n     * @example\n     * import { BentoDropdownTag } from '@adyen/bento-vue2';\n     * import type { BentoTagListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownTag },\n     *     template: `\n     *          <bento-dropdown-tag\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('unique-id-1') // Default value\n     *         const options: BentoTagListboxOptions = [\n     *              { label: 'Offline', value: 'unique-id-1', variant: 'red' },\n     *              { label: 'Online', value: 'unique-id-2', variant: 'green' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-tag',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","props","__props","emit","__emit","onInput","selectedValue","dropdownItems","computed","value","label","src","__default__$3","variant","items","toRefs","countryItems","useCountryItems","item","deprecate","__default__$2","filteredItems","ref","watch","search","searchTerm","searchableItems","searchResults","useSearchBarFilter","_a","normalizedResults","result","__default__$1","__default__","tagItems"],"mappings":";;;;;;;;;;AA4DI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/CA,UAAAC,IAAAC,GAIAC,IAAAC,GAOAC,IAAA,CAAAC,MAAAH,EAAA,SAAAG,CAAA,GAEAC,IAAAC,EAAA,MAAAP,EAAA,MAAA,IAAA,CAAA,EAAA,OAAAQ,GAAA,OAAAC,GAAA,KAAAC,EAAA,OAAA,EAAA,OAAAF,GAAA,OAAAC,GAAA,MAAAC,EAAA,EAAA,CAAA;;;;;;;;;;;;;;;;ICgEAC,IAAAZ,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;AA5EA,UAAAC,IAAAC,GAwBAC,IAAAC,GAOAC,IAAA,CAAAC,MAAAH,EAAA,SAAAG,CAAA,GAEA,EAAA,SAAAO,GAAA,OAAAC,EAAA,IAAAC,EAAAd,CAAA,GACAe,IAAAC,EAAAJ,GAAAC,CAAA;AAEA,YAAAD,EAAA,UAAA,YAAAC,EAAA,MAAA,KAAA,CAAAI,MAAAA,EAAA,KAAA,MACIC;AAAA,MAAA;AAAA,MACI;AAAA,MACA;AAAA,IACA;;;;;;;;;;;;;;;;;ICkCRC,IAAApB,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAhFA,UAAAC,IAAAC,GAIAC,IAAAC,GAOAC,IAAA,CAAAC,MAAAH,EAAA,SAAAG,CAAA,GACAe,IAAAC,EAAA,CAAA,CAAA;AAEA,IAAAC;AAAA,MAAA,MAAAtB,EAAA;AAAA,MACgB,MAAAoB,EAAA,QAAApB,EAAA;AAAA,MACuB,EAAA,WAAA,GAAA;AAAA,IACjB;AAGtB,UAAAuB,IAAAvB,EAAA,SAAAA,EAAA,SAAA;AAAA,MAEM,cAAA;AAAA,MACkB,aAAA,OAAAwB,MAAA;;AAGV,cAAAC,IAAAzB,EAAA,MAAA,IAAA,CAAAiB,OAAA;AAAA,UAAiD,GAAAA;AAAA,UAC1C,OAAA,GAAAA,EAAA,KAAA,IAAAA,EAAA,KAAA;AAAA,QAC+B,EAAA,GAGtCS,IAAAC;AAAA,UAAsBN,EAAAG,CAAA;AAAA,UACJH,EAAAI,CAAA;AAAA,WACkCG,IAAA5B,KAAA,gBAAAA,EAAA,WAAA,gBAAA4B,EAAA;AAAA,UACjCP,EAAA,EAAA;AAAA,QACN,EAAA,OAIbQ,IAAAH,KAAA,gBAAAA,EAAA,IAAA,CAAAI,OAAA;AAAA,UAAwD,GAAAA;AAAA,UACjD,OAAAA,EAAA,MAAA,UAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,QACkD;AAGzD,QAAAV,EAAA,QAAAS;AAAA,MAAsB;AAAA,IAC1B;;;;;;;;;;;;ICDVE,IAAAhC,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAzCA,UAAAG,IAAAC,GAOAC,IAAA,CAAAC,MAAAH,EAAA,SAAAG,CAAA;;;;;;;;;;;;;ICqCA2B,IAAAjC,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7CA,UAAAC,IAAAC,GAIAC,IAAAC,GAOAC,IAAA,CAAAC,MAAAH,EAAA,SAAAG,CAAA,GAEA4B,IAAA1B,EAAA,MAAA;;AAAA,cAAAqB,IAAA5B,EAAA,UAAA,gBAAA4B,EAAA,IAAA,CAAA,EAAA,OAAAnB,GAAA,OAAAD,GAAA,SAAAI,EAAA,OAAA,EAAA,OAAAH,GAAA,OAAAD,GAAA,MAAAI,EAAA;AAAA,KAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{dropdown.CMOYmQLB.js → dropdown.agfzvJZE.js}

@@ -1,21 +1,20 @@
-import { ref as C, watch as Ie, computed as d, defineComponent as z, useSlots as Ne, toRefs as $e, createBlock as _, openBlock as S, resolveDynamicComponent as Ae, mergeProps as R, withCtx as F, createElementVNode as oe, withKeys as tt, unref as s, createVNode as X, toHandlers as te, createSlots as ce, renderList as pe, renderSlot as G, normalizeProps as fe, guardReactiveProps as me, createElementBlock as P, createCommentVNode as K, toDisplayString as be, normalizeClass as ve, withDirectives as ae, vShow as Ce, nextTick as I, useAttrs as at, toRef as B, inject as ot, createTextVNode as lt } from "vue";
-import { d as Oe, B as nt } from "./typography.DN5eC5ch.js";
-import { a as de, b as H, c as st, B as ee, D as it } from "./dropdown-default-textbox.Ce5D3ipi.js";
+import { ref as C, watch as xe, computed as d, defineComponent as z, useSlots as Ne, toRefs as $e, createBlock as _, openBlock as S, resolveDynamicComponent as Ae, mergeProps as R, withCtx as F, createElementVNode as oe, withKeys as tt, unref as s, createVNode as X, toHandlers as te, createSlots as ce, renderList as pe, renderSlot as G, normalizeProps as fe, guardReactiveProps as me, createElementBlock as P, createCommentVNode as K, toDisplayString as be, normalizeClass as ve, withDirectives as ae, vShow as Ce, nextTick as x, useAttrs as at, toRef as B, inject as ot, createTextVNode as lt } from "vue";
+import { d as Oe, B as nt } from "./typography.yBEME_Gu.js";
+import { a as de, b as H, c as st, B as ee, D as it } from "./dropdown-default-textbox.CGsOngY1.js";
 /* empty css              */
 import { _ as Y } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { s as ue } from "./events.FNmSWp_P.js";
+import { s as ue } from "./events.CMzGybJJ.js";
 import { g as J } from "./generate-uid.NJ8tVoha.js";
 import { u as rt } from "./aria-label.CaUURpnB.js";
 import { u as ge } from "./i18n.B6g5VX0q.js";
-import { a as f, b as ye, B as Be, c as dt, u as ut, d as ct } from "./use-cached-selected-values.Dyoz6cUK.js";
+import { a as f, b as ye, B as Be, c as dt, u as ut, d as ct } from "./use-cached-selected-values.CELe-MsT.js";
 import { u as pt } from "./use-form-layout-loading.D3lALhtC.js";
 import { B as ft } from "./directive.Cbdox5VL.js";
-import { B as A, a as mt } from "./keyboard-navigation.CqgGzfZQ.js";
+import { B as A, a as mt } from "./keyboard-navigation.pB8weElW.js";
 import { u as vt } from "./use-has-slot.B7eQSabc.js";
-import { F as yt, E as bt } from "./error-message.DHMHq9bR.js";
-import { P as De } from "./popper-container.b5h4zYgT.js";
-import "./popper-container.types.BCZMbVFD.js";
-import { B as gt } from "./popover.DYgCCUCJ.js";
+import { F as yt, E as bt } from "./error-message.B1P5ictH.js";
+import { P as De } from "./popper-container.CgJzEQ7N.js";
+import { h as gt } from "./toggle-button.CQl9HneO.js";
 import "../assets/dropdown.css";
 const he = {
   "en-US": {
@@ -33,7 +32,7 @@ const he = {
   }
 }, ht = (t, r, i, a) => {
   const n = C(t.value), { t: l } = ge({ messages: he });
-  Ie(t, () => {
+  xe(t, () => {
     n.value = t.value;
   });
   const e = d(
@@ -276,7 +275,7 @@ const he = {
       _: 3
     }, 16, ["class"]));
   }
-}), wt = /* @__PURE__ */ Y(St, [["__scopeId", "data-v-aa806d62"]]);
+}), wt = /* @__PURE__ */ Y(St, [["__scopeId", "data-v-83c3a61b"]]);
 let Te = 0;
 const Et = {
   beforeCreate() {
@@ -299,13 +298,13 @@ function Ot(t, r, i, a, n, l) {
   ], 16);
 }
 const Bt = /* @__PURE__ */ Y(Et, [["render", Ot]]);
-let xe = 0;
+let Ie = 0;
 const Dt = {
   beforeCreate() {
-    this.uuid = xe.toString(), xe += 1;
+    this.uuid = Ie.toString(), Ie += 1;
   }
 }, Tt = { key: 0 };
-function xt(t, r, i, a, n, l) {
+function It(t, r, i, a, n, l) {
   return S(), P("svg", R({ role: "img" }, t.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
@@ -320,7 +319,7 @@ function xt(t, r, i, a, n, l) {
     }, null, -1))
   ], 16);
 }
-const It = /* @__PURE__ */ Y(Dt, [["render", xt]]), Nt = { class: "b-dropdown-small-textbox__chevron" }, $t = z({
+const xt = /* @__PURE__ */ Y(Dt, [["render", It]]), Nt = { class: "b-dropdown-small-textbox__chevron" }, $t = z({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
 }), At = /* @__PURE__ */ z({
@@ -422,7 +421,7 @@ const It = /* @__PURE__ */ Y(Dt, [["render", xt]]), Nt = { class: "b-dropdown-sm
       }, te(w)), {
         icon: F(() => [
           oe("div", Nt, [
-            ae(X(s(It), { "svg-title": "opened" }, null, 512), [
+            ae(X(s(xt), { "svg-title": "opened" }, null, 512), [
               [Ce, u.value]
             ]),
             ae(X(s(Bt), { "svg-title": "closed" }, null, 512), [
@@ -434,7 +433,7 @@ const It = /* @__PURE__ */ Y(Dt, [["render", xt]]), Nt = { class: "b-dropdown-sm
       }, 16, ["size"])
     ], 2));
   }
-}), Mt = /* @__PURE__ */ Y(At, [["__scopeId", "data-v-66b5eaa5"]]), Rt = (t, r) => r.value.reduce((i, a) => {
+}), Mt = /* @__PURE__ */ Y(At, [["__scopeId", "data-v-7702d745"]]), Rt = (t, r) => r.value.reduce((i, a) => {
   if (a.items) {
     const n = a.items.filter(
       (e) => t.value.find((u) => u.value === e.value)
@@ -464,11 +463,11 @@ const It = /* @__PURE__ */ Y(Dt, [["render", xt]]), Nt = { class: "b-dropdown-sm
 }, u, v, b) => {
   const c = async (y) => {
     var L;
-    n.value && await I(), (L = l.value[y]) == null || L.focus();
+    n.value && await x(), (L = l.value[y]) == null || L.focus();
   }, g = async (y) => {
-    var U, Z;
-    n.value && await I();
-    const L = (U = r.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : U.$el.querySelectorAll(
+    var q, Z;
+    n.value && await x();
+    const L = (q = r.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : q.$el.querySelectorAll(
       "button"
     );
     L.length ? (Z = L[y]) == null || Z.focus() : c(y);
@@ -478,11 +477,11 @@ const It = /* @__PURE__ */ Y(Dt, [["render", xt]]), Nt = { class: "b-dropdown-sm
       y
     );
   }, w = () => {
-    a.value || v(), I(() => {
+    a.value || v(), x(() => {
       p(0), c(0);
     });
   }, O = () => {
-    a.value || v(), I(() => {
+    a.value || v(), x(() => {
       p(l.value.length - 1), c(l.value.length - 1);
     });
   }, m = ({ detail: y }) => {
@@ -494,11 +493,11 @@ const It = /* @__PURE__ */ Y(Dt, [["render", xt]]), Nt = { class: "b-dropdown-sm
   }, h = () => {
     O();
   }, V = ({ detail: y }) => {
-    y.preventDefault(), u(), a.value && I(() => {
+    y.preventDefault(), u(), a.value && x(() => {
       e ? g(0) : (p(i.value), c(i.value));
     });
   }, W = ({ detail: y }) => {
-    y.preventDefault(), u(), a.value && I(() => {
+    y.preventDefault(), u(), a.value && x(() => {
       e ? g(0) : (p(i.value), c(i.value));
     });
   }, N = () => {
@@ -518,7 +517,7 @@ const It = /* @__PURE__ */ Y(Dt, [["render", xt]]), Nt = { class: "b-dropdown-sm
   }));
 }, _t = ({ inputContainerRef: t, isDropdownOpen: r }, i) => {
   const a = () => {
-    r.value && i(), I(() => {
+    r.value && i(), x(() => {
       Me(t);
     });
   };
@@ -531,7 +530,7 @@ const It = /* @__PURE__ */ Y(Dt, [["render", xt]]), Nt = { class: "b-dropdown-sm
 };
 function Kt(t, r, i, a) {
   const n = C(t), l = C(r), e = (v, b = []) => b.flatMap((c) => c.label.toLocaleLowerCase().includes(v) ? a != null && a.value && c.items ? [...e(v, c.items)] : [c, ...e(v, c.items)] : c.items ? [...e(v, c.items)] : []);
-  return Ie(n, () => {
+  return xe(n, () => {
     i !== void 0 && i(n.value);
   }), d(() => {
     if (!n.value || i !== void 0)
@@ -554,7 +553,7 @@ const Re = {
     all: "Todos",
     clearFilter: "Limpar filtro"
   }
-}, Ft = Symbol("input field component injection key"), ra = Symbol("input field hint injection key"), da = Symbol("input field parent component injection key"), zt = z({
+}, Ft = Symbol("input field component injection key"), ia = Symbol("input field hint injection key"), ra = Symbol("input field parent component injection key"), zt = z({
   i18n: { messages: Re },
   name: "b-dropdown",
   components: {
@@ -606,7 +605,7 @@ const Re = {
       ariaLabel: T.value || N,
       label: $,
       defaultFallback: y
-    }), U = e.size === ee.SMALL || ot(Ft, !1), Z = d(() => U ? ee.SMALL : ee.DEFAULT), Pe = d(() => ({
+    }), q = e.size === ee.SMALL || ot(Ft, !1), Z = d(() => q ? ee.SMALL : ee.DEFAULT), Pe = d(() => ({
       "b-dropdown--condensed": e.condensed
     })), ke = d(() => ({
       "b-dropdown__description--error": !!e.errorMessage
@@ -622,37 +621,37 @@ const Re = {
         );
       if (!e.multiple && e.staticCategories) {
         const o = e.items.find(
-          (k) => k.items.some((j) => j.value === e.value)
+          (k) => k.items.some((U) => U.value === e.value)
         );
         return o ? o.items.find((k) => k.value === e.value) : null;
       }
       return e.items.find(({ value: o }) => o === (e == null ? void 0 : e.value));
     }), Fe = d(() => {
-      const o = le.value.findIndex(({ value: x }) => e.enableValueLabelPair ? e.value.value === x : e.value === x);
+      const o = le.value.findIndex(({ value: I }) => e.enableValueLabelPair ? e.value.value === I : e.value === I);
       return o > -1 ? o : 0;
-    }), { isMultiLevelSelect: Se, flattenedItemsList: ze } = ut(Q), Ve = d(() => Se.value && !e.staticCategories), We = d(() => Ve.value ? "treeitem" : "option"), Ue = d(() => {
+    }), { isMultiLevelSelect: Se, flattenedItemsList: ze } = ut(Q), Ve = d(() => Se.value && !e.staticCategories), We = d(() => Ve.value ? "treeitem" : "option"), qe = d(() => {
       if (e.multiple) {
-        const o = Array.isArray(e.value) ? e.value.length : 0, x = Se.value ? ze.value.length : Q.value.length;
-        return o === 0 ? null : !e.hasMoreItems && x > 0 && x === o ? v("all") : o;
+        const o = Array.isArray(e.value) ? e.value.length : 0, I = Se.value ? ze.value.length : Q.value.length;
+        return o === 0 ? null : !e.hasMoreItems && I > 0 && I === o ? v("all") : o;
       }
       return null;
-    }), je = d(
+    }), Ue = d(
       () => `${e.description ? m : ""} ${e.errorMessage ? D : ""}`.trim() || null
-    ), qe = d(() => {
+    ), je = d(() => {
       var o;
       return (o = g.value) == null ? void 0 : o.$el;
     }), { visibleDomOptions: He, updateVisibleDomOptions: we } = ct(
-      qe,
+      je,
       le,
       We
     ), Je = () => {
-      E.value || (p.value = !0, I(() => {
+      E.value || (p.value = !0, x(() => {
         we();
       }));
     }, se = () => {
       p.value = !1;
     }, ie = () => {
-      E.value || (p.value = !p.value, I(() => {
+      E.value || (p.value = !p.value, x(() => {
         we();
       }), ne.value && (M.value = ""));
     }, Ye = () => {
@@ -689,14 +688,14 @@ const Re = {
     return e.error && Oe(
       'BentoDropdown "error" property',
       `Use the BentoDropdown "errorMessage" property instead to indicate that there is a modifier error.
-                        Having the field as "undefined" will hide/remove the error.
-                        <bento-dropdown errorMessage="Error message text" />`,
+                            Having the field as "undefined" will hide/remove the error.
+                            <bento-dropdown errorMessage="Error message text" />`,
       "2.0.0"
     ), e.size && Oe('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), r({
       focus: () => {
         b.value.focus();
       }
-    }), (o, x) => {
+    }), (o, I) => {
       var k;
       return ae((S(), P("div", {
         class: ve(["b-dropdown", Pe.value])
@@ -719,33 +718,34 @@ const Re = {
             ref: b,
             condensed: o.condensed,
             value: M.value,
-            "additional-items-selected": Ue.value,
+            "additional-items-selected": qe.value,
             "aria-controls": s(w),
             ariaExpanded: p.value,
             "aria-labelledby": s($) ? s(O) : null,
-            "aria-describedby": je.value,
+            "aria-describedby": Ue.value,
             "aria-label": s(L),
             "aria-readonly": s(E),
             readonly: s(E),
+            required: o.required,
             disabled: o.disabled,
             "display-value": s(_e),
             "dynamic-filtering": o.dynamicFiltering,
             "is-invalid": !!o.errorMessage || o.error,
             multiple: o.multiple,
             open: p.value,
-            "selected-value-item": s(U) ? void 0 : Ke.value,
+            "selected-value-item": s(q) ? void 0 : Ke.value,
             "show-slot-content-in-multiple": o.showSlotContentInMultiple,
-            onInput: x[0] || (x[0] = (j) => M.value = j),
+            onInput: I[0] || (I[0] = (U) => M.value = U),
             onOpen: ie,
             onClose: ie
           }, ce({ _: 2 }, [
-            pe(s(n), (j, q) => ({
-              name: q,
+            pe(s(n), (U, j) => ({
+              name: j,
               fn: F((re) => [
-                G(o.$slots, q, fe(me(re)), void 0, !0)
+                G(o.$slots, j, fe(me(re)), void 0, !0)
               ])
             }))
-          ]), 1064, ["condensed", "value", "additional-items-selected", "aria-controls", "ariaExpanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-readonly", "readonly", "disabled", "display-value", "dynamic-filtering", "is-invalid", "multiple", "open", "selected-value-item", "show-slot-content-in-multiple"]))
+          ]), 1064, ["condensed", "value", "additional-items-selected", "aria-controls", "ariaExpanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-readonly", "readonly", "required", "disabled", "display-value", "dynamic-filtering", "is-invalid", "multiple", "open", "selected-value-item", "show-slot-content-in-multiple"]))
         ], 16)), [
           [s(mt)]
         ]),
@@ -772,10 +772,10 @@ const Re = {
           "lazy-load-type": o.lazyLoadType,
           "virtual-scroll": o.virtualScroll
         }, te(et)), ce({ _: 2 }, [
-          pe(s(n), (j, q) => ({
-            name: q,
+          pe(s(n), (U, j) => ({
+            name: j,
             fn: F((re) => [
-              G(o.$slots, q, fe(me(re)), void 0, !0)
+              G(o.$slots, j, fe(me(re)), void 0, !0)
             ])
           }))
         ]), 1040, ["id", "aria-label", "component-loading", "empty-state", "debounce-time", "disabled", "is-option-disabled", "items", "multiple", "static-categories", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type", "virtual-scroll"])) : K("", !0),
@@ -803,12 +803,12 @@ const Re = {
       ]);
     };
   }
-}), ua = /* @__PURE__ */ Y(Vt, [["__scopeId", "data-v-377e31c9"]]);
+}), da = /* @__PURE__ */ Y(Vt, [["__scopeId", "data-v-d801c4da"]]);
 export {
-  ua as B,
-  ra as I,
+  da as B,
+  ia as I,
   Ft as a,
-  da as b,
+  ra as b,
   Kt as u
 };
-//# sourceMappingURL=dropdown.CMOYmQLB.js.map
+//# sourceMappingURL=dropdown.agfzvJZE.js.map