@adyen/bento-vue2 0.10.0 → 0.10.1-2

package/dist/chunks/listbox.152dab0a.js

@@ -0,0 +1,485 @@
+import "../assets/listbox.css";
+import { computed as r, defineComponent as b, ref as T, watch as L } from "vue";
+import { BentoTypography as f, BentoTypographyElement as m } from "../typography.js";
+import { n as p } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { B as k } from "./checkbox.fab16cce.js";
+import { u as w } from "./i18n.8934ef6c.js";
+const E = (s, e, t, l) => {
+  const c = r(() => {
+    var u;
+    return ((u = s.value) == null ? void 0 : u.length) === e.value.length;
+  }), n = r(() => {
+    var u;
+    return s.value == null || s.value.length === 0 ? !1 : ((u = s.value) == null ? void 0 : u.length) !== e.value.length;
+  });
+  return {
+    isAllSelected: c,
+    isIndeterminate: n,
+    toggleSelectAll: (u) => {
+      u ? t() : l();
+    }
+  };
+}, R = b({
+  name: "bento-listbox-option",
+  props: {
+    /**
+     * Setting this property to true will disable the option.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Indicates if the value is selected. Only one element can be selected at a time.
+     */
+    selected: { type: Boolean, default: !1 }
+  },
+  emits: ["click", "enter-pressed", "escape-pressed"],
+  setup(s, { emit: e }) {
+    return {
+      // Values
+      conditionalClasses: r(() => ({
+        "b-listbox-option--disabled": s.disabled,
+        "b-listbox-option--selected": s.selected
+      })),
+      // Events
+      onClick: (c) => e("click", c)
+    };
+  }
+});
+var N = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, t("label", e._b({ staticClass: "b-listbox-option", class: e.conditionalClasses, attrs: { role: "option" }, on: { click: e.onClick, keydown: [function(l) {
+    return !l.type.indexOf("key") && e._k(l.keyCode, "enter", 13, l.key, "Enter") || l.target !== l.currentTarget ? null : e.$emit("enter-pressed");
+  }, function(l) {
+    return !l.type.indexOf("key") && e._k(l.keyCode, "escape", void 0, l.key, void 0) || l.target !== l.currentTarget ? null : e.$emit("escape-pressed");
+  }] } }, "label", { ...e.$attrs, ...e.$props }, !1), [e._t("default")], 2);
+}, F = [], V = /* @__PURE__ */ p(
+  R,
+  N,
+  F,
+  !1,
+  null,
+  "962d938e",
+  null,
+  null
+);
+const g = V.exports;
+let y = 0;
+const M = {
+  beforeCreate() {
+    this.uuid = y.toString(), y += 1;
+  }
+};
+var q = function() {
+  var e = this, t = e._self._c;
+  return t("svg", e._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? t("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), t("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M14.5303 4.53033C14.8232 4.23744 14.8232 3.76256 14.5303 3.46967C14.2374 3.17678 13.7626 3.17678 13.4697 3.46967L6 10.9393L2.53033 7.46967C2.23744 7.17678 1.76256 7.17678 1.46967 7.46967C1.17678 7.76256 1.17678 8.23744 1.46967 8.53033L5.46967 12.5303C5.50628 12.5669 5.54574 12.599 5.58732 12.6264C5.87844 12.8186 6.27405 12.7866 6.53033 12.5303L14.5303 4.53033Z", "clip-rule": "evenodd" } })]);
+}, U = [], j = /* @__PURE__ */ p(
+  M,
+  q,
+  U,
+  !1,
+  null,
+  "4687fbd0",
+  null,
+  null
+);
+const z = j.exports, Z = b({
+  name: "bento-listbox-single-select-option",
+  components: {
+    BentoListboxOption: g,
+    BentoTypography: f,
+    CheckmarkIcon: z
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Setting this property to true will disable the option.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * The option item that contains all the option item's data.
+     * @type {BentoListboxOptionItem}
+     */
+    option: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * Indicates if the value is selected. Only one element can be selected at a time.
+     */
+    selected: { type: Boolean, default: !1 }
+  },
+  emits: ["select", "escape-pressed"],
+  setup(s, { emit: e }) {
+    const t = () => {
+      s.disabled || e("select", s.option.value);
+    }, l = r(() => s.disabled ? !0 : null), c = r(() => s.selected ? !0 : null), n = r(() => s.disabled ? -1 : 0);
+    return {
+      // Values
+      ariaDisabled: l,
+      ariaSelected: c,
+      tabIndex: n,
+      // Enums
+      BentoTypographyElement: m,
+      // Events
+      onOptionSelected: t
+    };
+  }
+});
+var G = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, t("bento-listbox-option", { staticClass: "b-listbox-single-select-option", attrs: { disabled: e.disabled, selected: e.selected, "aria-selected": e.ariaSelected, "aria-disabled": e.ariaDisabled, tabindex: e.tabIndex }, on: { click: e.onOptionSelected, "enter-pressed": e.onOptionSelected, "escape-pressed": function(l) {
+    return e.$emit("escape-pressed");
+  } } }, [e._t("default", function() {
+    return [t("span", { staticClass: "b-listbox-single-select-option__text" }, [t("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(e._s(e.option.label))]), e.option.description ? t("bento-typography", { staticClass: "b-listbox-single-select-option__description", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.option.description) + " ")]) : e._e()], 1)];
+  }, null, e.option), t("span", { staticClass: "b-listbox-single-select-option__check-icon" }, [t("checkmark-icon", { directives: [{ name: "show", rawName: "v-show", value: e.selected, expression: "selected" }], attrs: { "svg-title": "selected" } })], 1)], 2);
+}, H = [], J = /* @__PURE__ */ p(
+  Z,
+  G,
+  H,
+  !1,
+  null,
+  "96a27d78",
+  null,
+  null
+);
+const K = J.exports, Q = b({
+  name: "bento-listbox-multi-select-option",
+  components: {
+    BentoCheckbox: k,
+    BentoListboxOption: g,
+    BentoTypography: f
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: Function,
+      default: () => !1
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @property {string} value.label - Text to be displayed in the option
+     * @property {string,number} value.value - Value of the option
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    selectedItemsList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["select", "toggle-checkbox-selection"],
+  setup(s, { emit: e }) {
+    return {
+      // Methods
+      toggleCheckboxSelection: (l) => e("toggle-checkbox-selection", l),
+      // Enums
+      BentoTypographyElement: m
+    };
+  }
+});
+var W = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, t("div", e._l(e.items, function(l) {
+    return t("bento-listbox-option", { key: `selected-${l.value}`, staticClass: "b-listbox-multi-select-option", attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null } }, [t("bento-checkbox", { attrs: { "model-value": e.selectedItemsList, "aria-label": l.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, value: l.value }, on: { input: function(c) {
+      return e.toggleCheckboxSelection(l.value);
+    } } }), e._t("default", function() {
+      return [t("span", { staticClass: "b-listbox-multi-select__option-text" }, [t("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(e._s(l.label))]), l.description ? t("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(l.description) + " ")]) : e._e()], 1)];
+    }, null, l)], 2);
+  }), 1);
+}, X = [], Y = /* @__PURE__ */ p(
+  Q,
+  W,
+  X,
+  !1,
+  null,
+  "1f8f90e2",
+  null,
+  null
+);
+const ee = Y.exports, h = {
+  "en-US": {
+    allSelected: "All selected ({total})",
+    numberOfTotalSelected: "{number} of {total} selected",
+    selectAll: "Select all ({total})"
+  }
+}, te = b({
+  i18n: { messages: h },
+  name: "bento-listbox-multi-select",
+  components: {
+    BentoCheckbox: k,
+    BentoListboxOption: g,
+    BentoListboxMultiSelectOptions: ee,
+    BentoTypography: f
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: Function,
+      default: () => !1
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @property {string} value.label - Text to be displayed in the option
+     * @property {string,number} value.value - Value of the option
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Flag that indicates that an external search it's being made
+     * to filter out the items inside the the multi-select listbox
+     *
+     * If enabled, hides the "Select all" checkbox in "multiple" mode.
+     */
+    searching: { type: Boolean, default: !1 },
+    /**
+     * The `input` value.
+     * Providing an empty array will select no options.
+     */
+    selectedValues: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["select"],
+  setup(s, { emit: e }) {
+    const { t } = w({ messages: h }), l = (i) => {
+      var d;
+      const a = s.isOptionDisabled(i), o = ((d = s.selectedValues) == null ? void 0 : d.includes(i.value)) || !1;
+      return { isDisabled: a, isPreSelected: o };
+    }, c = r(
+      () => s.items.filter((i) => {
+        const { isDisabled: a, isPreSelected: o } = l(i);
+        return a && o || !a;
+      })
+    ), n = T(s.selectedValues || []);
+    L(
+      () => s.selectedValues,
+      () => {
+        n.value = s.selectedValues || [];
+      }
+    );
+    const _ = r(
+      () => {
+        var i;
+        return (i = c.value) == null ? void 0 : i.filter(
+          ({ value: a }) => {
+            var o;
+            return (o = n.value) == null ? void 0 : o.includes(a);
+          }
+        );
+      }
+    ), u = r(() => {
+      var o;
+      const i = s.items.length, a = ((o = _.value) == null ? void 0 : o.length) || 0;
+      return a === 0 ? t("selectAll", { total: i }) : a === i ? t("allSelected", { total: i }) : t("numberOfTotalSelected", { number: a, total: i });
+    }), C = () => {
+      const i = (o) => {
+        const { isDisabled: d, isPreSelected: v } = l(o);
+        return d && v || !d;
+      }, a = s.items.filter(i).filter((o) => !n.value.includes(o.value)).map(({ value: o }) => o);
+      n.value = [...n.value, ...a], e("select", n.value);
+    }, A = () => {
+      const i = (o) => {
+        const { isDisabled: d, isPreSelected: v } = l(o);
+        return !(d && v);
+      }, a = s.items.filter(i).map(({ value: o }) => o);
+      n.value = n.value.filter((o) => !(a != null && a.includes(o))), e("select", n.value);
+    }, { isAllSelected: O, isIndeterminate: $, toggleSelectAll: D } = E(
+      _,
+      c,
+      C,
+      A
+    ), B = (i) => {
+      let a = !1;
+      n.value = n.value.filter((o) => i === o ? (a = !0, !1) : !0), a || n.value.push(i), e("select", n.value);
+    }, x = r(
+      () => {
+        var i;
+        return (i = s.items) == null ? void 0 : i.filter((a) => {
+          var o;
+          return (o = n.value) == null ? void 0 : o.includes(a.value);
+        });
+      }
+    ), I = r(() => {
+      var i;
+      return ((i = x.value) == null ? void 0 : i.length) > 0;
+    }), P = r(
+      () => {
+        var i, a;
+        return ((i = _.value) == null ? void 0 : i.length) === ((a = s.items) == null ? void 0 : a.length);
+      }
+    );
+    return {
+      // Values
+      isAllSelected: O,
+      isAllItemsIncludingDisabled: P,
+      isAnOptionSelected: I,
+      isIndeterminate: $,
+      selectedItemsList: n,
+      selectAllCheckboxText: u,
+      selectedOptions: x,
+      // Enums
+      BentoTypographyElement: m,
+      // Methods
+      toggleCheckboxSelection: B,
+      toggleSelectAll: D
+    };
+  }
+});
+var le = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, t("div", { staticClass: "b-listbox-multi-select" }, [t("bento-listbox-option", { staticClass: "b-listbox-multi-select__option" }, [t("bento-checkbox", { attrs: { "aria-label": e.selectAllCheckboxText, "model-value": e.isAllSelected, indeterminate: e.isIndeterminate }, on: { input: e.toggleSelectAll } }), t("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.selectAllCheckboxText) + " ")])], 1), e.isAnOptionSelected ? t("div", [t("hr", { staticClass: "b-listbox-multi-select__divider" }), t("bento-listbox-multi-select-options", { attrs: { items: e.selectedOptions, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList }, on: { "toggle-checkbox-selection": e.toggleCheckboxSelection }, scopedSlots: e._u([e._l(e.$scopedSlots || e.$slots, function(l, c) {
+    return { key: c, fn: function(n) {
+      return [e._t(c, null, null, n)];
+    } };
+  })], null, !0) })], 1) : e._e(), t("div", { directives: [{ name: "show", rawName: "v-show", value: !e.isAllItemsIncludingDisabled, expression: "!isAllItemsIncludingDisabled" }] }, [t("hr", { staticClass: "b-listbox-multi-select__divider" }), t("bento-listbox-multi-select-options", { attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList }, on: { "toggle-checkbox-selection": e.toggleCheckboxSelection }, scopedSlots: e._u([e._l(e.$scopedSlots || e.$slots, function(l, c) {
+    return { key: c, fn: function(n) {
+      return [e._t(c, null, null, n)];
+    } };
+  })], null, !0) })], 1)], 1);
+}, se = [], ne = /* @__PURE__ */ p(
+  te,
+  le,
+  se,
+  !1,
+  null,
+  "64b4d895",
+  null,
+  null
+);
+const S = ne.exports, ie = b({
+  name: "bento-listbox",
+  components: {
+    BentoListboxSingleSelectOption: K,
+    BentoListboxMultiSelect: S,
+    BentoTypography: f
+  },
+  props: {
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    ariaLabel: { type: String, default: null },
+    /**
+     *  Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set.
+     */
+    id: { type: String, required: !0 },
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - Listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: Function,
+      default: void 0
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }
+     *  * @property {string} value.label - Text to be displayed in the option
+     *  * @property {string,number} value.value - Value of the option
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * If enabled, the user will be able to select multiple items.
+     */
+    multiple: { type: Boolean, default: !1 },
+    /**
+     * Messaged displayed when no items are listed in the listbox
+     */
+    noResultsMessage: { type: String, required: !0 },
+    /**
+     * Flag that indicates that an external search it's being made
+     * to filter out the items inside the the multi-select listbox
+     *
+     * If enabled, hides the "Select all" checkbox in "multiple" mode.
+     */
+    searching: S.props.searching,
+    /**
+     * The `input` value.
+     * Providing an empty string or empty array will select no options.
+     * Set to an empty string `''` if you don't want any of the available options to be selected for single select
+     */
+    selectedValue: {
+      type: [String, Number, Array],
+      default: void 0
+    }
+  },
+  emits: ["select"],
+  setup(s, { emit: e }) {
+    const t = (c) => {
+      e("select", c);
+    };
+    return {
+      // Values
+      isSearchResultEmpty: r(() => {
+        var c;
+        return s.searching && ((c = s.items) == null ? void 0 : c.length) === 0;
+      }),
+      // Methods
+      onOptionSelected: t,
+      // Enums
+      BentoTypographyElement: m
+    };
+  }
+});
+var oe = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, t("div", { staticClass: "b-listbox", attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-label": e.ariaLabel } }, [e.isSearchResultEmpty ? t("div", { staticClass: "b-listbox__empty-search-message" }, [t("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [t("bento-listbox-multi-select", { attrs: { items: e.items, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, on: { select: e.onOptionSelected }, scopedSlots: e._u([e._l(e.$scopedSlots || e.$slots, function(l, c) {
+    return { key: c, fn: function(n) {
+      return [e._t(c, null, null, n)];
+    } };
+  })], null, !0) })] : e._l(e.items, function(l) {
+    return t("bento-listbox-single-select-option", { key: l.value, attrs: { role: "option", option: l, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, selected: l.value === e.selectedValue }, on: { select: e.onOptionSelected }, scopedSlots: e._u([e._l(e.$scopedSlots || e.$slots, function(c, n) {
+      return { key: n, fn: function(_) {
+        return [e._t(n, null, null, _)];
+      } };
+    })], null, !0) });
+  })]], 2);
+}, ce = [], ae = /* @__PURE__ */ p(
+  ie,
+  oe,
+  ce,
+  !1,
+  null,
+  "b513c0c3",
+  null,
+  null
+);
+const fe = ae.exports;
+export {
+  fe as B,
+  z as C
+};
+//# sourceMappingURL=listbox.152dab0a.js.map

package/dist/chunks/listbox.152dab0a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.152dab0a.js","sources":["../../src/composables/use-checkbox-select-all/use-checkbox-select-all.ts","../../src/components/internal/listbox/components/listbox-option/listbox-option.vue","../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/checkmark.vue","../../src/components/internal/listbox/components/listbox-single-select-option/listbox-single-select-option.vue","../../src/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options.vue","../../src/components/internal/listbox/components/listbox-multi-select/listbox-multi-select.vue","../../src/components/internal/listbox/listbox.vue"],"sourcesContent":["import { computed } from 'vue';\nimport type { ComputedRef } from 'vue';\nimport type { BentoListboxMultiSelectValue, Fn } from '@/types';\nimport { BentoListboxOptions } from '@/types';\n\n/**\n * Callback function that alllows to select all the items when called\n * @callback selectAllCallback\n */\n\n/**\n * Callback function that alllows to select all the items when called\n * @callback unselectAllCallback\n */\n\n/**\n * @typedef {Object} UseCheckboxSelectAll\n * @property {Ref<boolean>} isAllSelected - Indicates if all values are selected. Pass this to the :value property.\n * @property {Ref<boolean>} isIndeterminate - Indicates if it is in an indeterminated state (not all values are selected nor unselected). Pass this to the :indeterminate property.\n * @property {(selectedValue: boolean) => void} toggleSelectAll - Handles the select all flow, selects or unselects all and nullifies the indeterminated state. Pass this to the @input method.\n */\n\n/**\n * Composable to handle a 3 way checkbox state that allows to manage\n * a \"select all\", \"unselect all\" and an intermediate state where\n * not all are selected.\n *\n * @example\n * const checkboxVModelRef = ref<number[]>([]);\n *\n * const { isAllSelected, isIndeterminate, toggleSelectAll, updateIndeterminate } = useCheckboxSelectAll(\n *    checkboxVModelRef,\n *    () => { checkboxVModelRef.value = [...] // select all logic },\n *    () => { checkboxVModelRef.value = [] // unselect all logic },\n * );\n * toggleSelectAll(true|false); // Hook this to the @input method\n * updateIndeterminate(totalOfAvailableItems);\n *\n *\n * @param {ComputedRef<BentoListboxMultiSelectValue>} selectedItemsList - Reference to the list of selected values\n * @param {ComputedRef<BentoListboxOptions>} items - Reference to the list of all available items in the dropdown\n * @param {selectAllCallback} selectAll - Callback function that alllows to select all the items when called\n * @param {unselectAllCallback} unselectAll - Callback function that alllows to select all the items when called\n * @returns {UseCheckboxSelectAll} Values to be set to the bento-checkbox value and indeterminate props, as well as functions to update them accordingly\n *\n */\nexport const useCheckboxSelectAll = (\n    selectedItemsList: ComputedRef<BentoListboxMultiSelectValue>,\n    items: ComputedRef<BentoListboxOptions>,\n    selectAll: Fn,\n    unselectAll: Fn\n) => {\n    const isAllSelected = computed(() => selectedItemsList.value?.length === items.value.length);\n    const isIndeterminate = computed(() => {\n        // eslint-disable-next-line eqeqeq\n        if (selectedItemsList.value == undefined || selectedItemsList.value.length === 0) {\n            return false;\n        }\n\n        return selectedItemsList.value?.length !== items.value.length;\n    });\n\n    const toggleSelectAll = (selectedValue: boolean) => {\n        if (selectedValue) {\n            selectAll();\n        } else {\n            unselectAll();\n        }\n    };\n\n    return {\n        isAllSelected,\n        isIndeterminate,\n\n        toggleSelectAll,\n    };\n};\n","<template>\n    <label\n        class=\"b-listbox-option\"\n        role=\"option\"\n        :class=\"conditionalClasses\"\n        v-bind=\"{ ...$attrs, ...$props }\"\n        @click=\"onClick\"\n        @keydown.enter.self=\"$emit('enter-pressed')\"\n        @keydown.escape.self=\"$emit('escape-pressed')\"\n    >\n        <slot></slot>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n\n    /**\n     * listbox option wrapper.\n     * Contains only styles and allows the Multi-Select and Single-Select DRY the styles.\n     *\n     * Options and Attributes are inherited (`inheritAttrs: true`)\n     *\n     * @example\n     * <bento-listbox-option\n     *    ...props\n     *    ...attrs\n     * />\n     */\n    export default defineComponent({\n        name: 'bento-listbox-option',\n        props: {\n            /**\n             * Setting this property to true will disable the option.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Indicates if the value is selected. Only one element can be selected at a time.\n             */\n            selected: { type: Boolean, default: false },\n        },\n        emits: ['click', 'enter-pressed', 'escape-pressed'],\n        setup(props, { emit }) {\n            const conditionalClasses = computed(() => ({\n                'b-listbox-option--disabled': props.disabled,\n                'b-listbox-option--selected': props.selected,\n            }));\n\n            const onClick = (e: Event) => emit('click', e);\n\n            return {\n                // Values\n                conditionalClasses,\n\n                // Events\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-option.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" fill-rule=\"evenodd\" d=\"M14.5303 4.53033C14.8232 4.23744 14.8232 3.76256 14.5303 3.46967C14.2374 3.17678 13.7626 3.17678 13.4697 3.46967L6 10.9393L2.53033 7.46967C2.23744 7.17678 1.76256 7.17678 1.46967 7.46967C1.17678 7.76256 1.17678 8.23744 1.46967 8.53033L5.46967 12.5303C5.50628 12.5669 5.54574 12.599 5.58732 12.6264C5.87844 12.8186 6.27405 12.7866 6.53033 12.5303L14.5303 4.53033Z\" clip-rule=\"evenodd\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style scoped lang=\"scss\">\n    svg {\n        display: inline-flex;\n        flex-shrink: 0;\n    }\n    \n    svg,\n    svg * {\n        fill: currentcolor;\n    }\n</style>\n","<template>\n    <bento-listbox-option\n        class=\"b-listbox-single-select-option\"\n        :disabled=\"disabled\"\n        :selected=\"selected\"\n        :aria-selected=\"ariaSelected\"\n        :aria-disabled=\"ariaDisabled\"\n        :tabindex=\"tabIndex\"\n        @click=\"onOptionSelected\"\n        @enter-pressed=\"onOptionSelected\"\n        @escape-pressed=\"$emit('escape-pressed')\"\n    >\n        <slot v-bind=\"option\">\n            <span class=\"b-listbox-single-select-option__text\">\n                <bento-typography :el=\"BentoTypographyElement.SPAN\">{{ option.label }}</bento-typography>\n                <bento-typography\n                    v-if=\"option.description\"\n                    class=\"b-listbox-single-select-option__description\"\n                    :el=\"BentoTypographyElement.SPAN\"\n                >\n                    {{ option.description }}\n                </bento-typography>\n            </span>\n        </slot>\n        <span class=\"b-listbox-single-select-option__check-icon\">\n            <checkmark-icon v-show=\"selected\" svg-title=\"selected\" />\n        </span>\n    </bento-listbox-option>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n    import { BentoListboxOption } from '../listbox-option';\n    import type { BentoListboxOptionItem } from '@/types';\n    import CheckmarkIcon from '@adyen/ui-assets-icons-16/vue/checkmark';\n\n    /**\n     * Listbox option element.\n     *\n     * @example\n     * <bento-listbox-single-select-option\n     *      v-for=\"option in options\"\n     *      :key=\"option.value\"\n     *      :option=\"option\"\n     *      :selected=\"option.selected\"\n     *      @select=\"onOptionSelected\"\n     * />\n     */\n    export default defineComponent({\n        name: 'bento-listbox-single-select-option',\n        components: {\n            BentoListboxOption,\n            BentoTypography,\n            CheckmarkIcon,\n        },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Setting this property to true will disable the option.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * The option item that contains all the option item's data.\n             * @type {BentoListboxOptionItem}\n             */\n            option: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n\n            /**\n             * Indicates if the value is selected. Only one element can be selected at a time.\n             */\n            selected: { type: Boolean, default: false },\n        },\n        emits: ['select', 'escape-pressed'],\n        setup(props, { emit }) {\n            const onOptionSelected = () => {\n                if (props.disabled) {\n                    return;\n                }\n\n                /**\n                 * Trigerred when an option is clicked.\n                 * Indicates which option was selected.\n                 *\n                 * @event select\n                 * @property {number} selectedValue - Selected option's value\n                 */\n                emit('select', props.option.value);\n            };\n\n            const ariaDisabled = computed(() => (props.disabled ? true : null));\n            const ariaSelected = computed(() => (props.selected ? true : null));\n            const tabIndex = computed(() => (props.disabled ? -1 : 0));\n\n            return {\n                // Values\n                ariaDisabled,\n                ariaSelected,\n                tabIndex,\n\n                // Enums\n                BentoTypographyElement,\n\n                // Events\n                onOptionSelected,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-single-select-option.scss\" />\n","<template>\n    <div>\n        <bento-listbox-option\n            v-for=\"option in items\"\n            :key=\"`selected-${option.value}`\"\n            class=\"b-listbox-multi-select-option\"\n            :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n        >\n            <bento-checkbox\n                :model-value=\"selectedItemsList\"\n                :aria-label=\"option.label\"\n                :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n                :value=\"option.value\"\n                @input=\"toggleCheckboxSelection(option.value)\"\n            />\n            <slot v-bind=\"option\">\n                <span class=\"b-listbox-multi-select__option-text\">\n                    <bento-typography :el=\"BentoTypographyElement.SPAN\">{{ option.label }}</bento-typography>\n                    <bento-typography\n                        v-if=\"option.description\"\n                        class=\"b-listbox-multi-select__option-description\"\n                        :el=\"BentoTypographyElement.SPAN\"\n                    >\n                        {{ option.description }}\n                    </bento-typography>\n                </span>\n            </slot>\n        </bento-listbox-option>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import { BentoCheckbox } from '@/components/checkbox';\n    import { BentoListboxOption } from '../../listbox-option';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n    import { BentoListboxIsOptionDisabled, BentoListboxOptions, BentoListboxValue } from '@/types';\n\n    /**\n     * Listbox multi-select options list\n     *\n     * @example\n     * import { BentoListboxMultiSelect } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoListboxMultiSelect },\n     *     template: `\n     *          <bento-listbox-multi-select\n     *              :items=\"[{ label: 'Option 1', value: 'option-1' }]\"\n     *              :selected-values=\"['option-1']\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-listbox-multi-select-option',\n        components: {\n            BentoCheckbox,\n            BentoListboxOption,\n            BentoTypography,\n        },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Function that allows the options to be disabled\n             *\n             * @type {BentoListboxIsOptionDisabled}\n             * @param {BentoListboxOptionItem} option - listbox option object\n             * @param {string} option.label - Option's label text\n             * @param {string|number} option.value - Option's value\n             * @param {unknown} option.data - Option's extra data to be passed to the default slot\n             */\n            isOptionDisabled: {\n                type: Function as PropType<BentoListboxIsOptionDisabled>,\n                default: () => false,\n            },\n\n            /**\n             * The option elements to populate the listbox with.\n             * It must be an array of {@see BentoListboxOptionItem }.\n             *\n             * @property {string} value.label - Text to be displayed in the option\n             * @property {string,number} value.value - Value of the option\n             */\n            items: {\n                type: Array as PropType<BentoListboxOptions>,\n                required: true,\n            },\n\n            selectedItemsList: {\n                type: Array as PropType<BentoListboxValue[]>,\n                default: () => [],\n            },\n        },\n        emits: ['select', 'toggle-checkbox-selection'],\n        setup(_props, { emit }) {\n            const toggleCheckboxSelection = (value: BentoListboxValue) => emit('toggle-checkbox-selection', value);\n\n            return {\n                // Methods\n                toggleCheckboxSelection,\n\n                // Enums\n                BentoTypographyElement,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-multi-select-options.scss\" />\n","<template>\n    <div class=\"b-listbox-multi-select\">\n        <bento-listbox-option class=\"b-listbox-multi-select__option\">\n            <bento-checkbox\n                :aria-label=\"selectAllCheckboxText\"\n                :model-value=\"isAllSelected\"\n                :indeterminate=\"isIndeterminate\"\n                @input=\"toggleSelectAll\"\n            />\n            <bento-typography :el=\"BentoTypographyElement.SPAN\">\n                {{ selectAllCheckboxText }}\n            </bento-typography>\n        </bento-listbox-option>\n\n        <div v-if=\"isAnOptionSelected\">\n            <hr class=\"b-listbox-multi-select__divider\" />\n\n            <bento-listbox-multi-select-options\n                :items=\"selectedOptions\"\n                :is-option-disabled=\"isOptionDisabled\"\n                :selected-items-list=\"selectedItemsList\"\n                @toggle-checkbox-selection=\"toggleCheckboxSelection\"\n            >\n                <template v-for=\"(_, slot) of $scopedSlots || $slots\" #[slot]=\"scope\">\n                    <slot :name=\"slot\" v-bind=\"scope\" />\n                </template>\n            </bento-listbox-multi-select-options>\n        </div>\n\n        <div v-show=\"!isAllItemsIncludingDisabled\">\n            <hr class=\"b-listbox-multi-select__divider\" />\n\n            <bento-listbox-multi-select-options\n                :items=\"items\"\n                :is-option-disabled=\"isOptionDisabled\"\n                :selected-items-list=\"selectedItemsList\"\n                @toggle-checkbox-selection=\"toggleCheckboxSelection\"\n            >\n                <template v-for=\"(_, slot) of $scopedSlots || $slots\" #[slot]=\"scope\">\n                    <slot :name=\"slot\" v-bind=\"scope\" />\n                </template>\n            </bento-listbox-multi-select-options>\n        </div>\n    </div>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, watch } from 'vue';\n    import { BentoCheckbox } from '@/components/checkbox';\n    import { BentoListboxOption } from '../listbox-option';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n    import { useCheckboxSelectAll } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import {\n        BentoListboxIsOptionDisabled,\n        BentoListboxMultiSelectValue,\n        BentoListboxOptionItem,\n        BentoListboxOptions,\n        BentoListboxSelectedValue,\n        BentoListboxValue,\n    } from '@/types';\n    import BentoListboxMultiSelectOptions from './components/listbox-multi-select-options.vue';\n\n    import messages from './messages.json';\n\n    /**\n     * Listbox multi-select options list\n     *\n     * @example\n     * import { BentoListboxMultiSelect } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoListboxMultiSelect },\n     *     template: `\n     *          <bento-listbox-multi-select\n     *              :items=\"[{ label: 'Option 1', value: 'option-1' }]\"\n     *              :selected-values=\"['option-1']\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-listbox-multi-select',\n        components: {\n            BentoCheckbox,\n            BentoListboxOption,\n            BentoListboxMultiSelectOptions,\n            BentoTypography,\n        },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Function that allows the options to be disabled\n             *\n             * @type {BentoListboxIsOptionDisabled}\n             * @param {BentoListboxOptionItem} option - listbox option object\n             * @param {string} option.label - Option's label text\n             * @param {string|number} option.value - Option's value\n             * @param {unknown} option.data - Option's extra data to be passed to the default slot\n             */\n            isOptionDisabled: {\n                type: Function as PropType<BentoListboxIsOptionDisabled>,\n                default: () => false,\n            },\n\n            /**\n             * The option elements to populate the listbox with.\n             * It must be an array of {@see BentoListboxOptionItem }.\n             *\n             * @property {string} value.label - Text to be displayed in the option\n             * @property {string,number} value.value - Value of the option\n             */\n            items: {\n                type: Array as PropType<BentoListboxOptions>,\n                required: true,\n            },\n\n            /**\n             * Flag that indicates that an external search it's being made\n             * to filter out the items inside the the multi-select listbox\n             *\n             * If enabled, hides the \"Select all\" checkbox in \"multiple\" mode.\n             */\n            searching: { type: Boolean, default: false },\n\n            /**\n             * The `input` value.\n             * Providing an empty array will select no options.\n             */\n            selectedValues: {\n                type: Array as PropType<BentoListboxSelectedValue>,\n                default: () => [] as BentoListboxSelectedValue,\n            },\n        },\n        emits: ['select'],\n        setup(props, { emit }) {\n            const { t } = useI18n({ messages });\n            const optionStates = (option: BentoListboxOptionItem) => {\n                const isDisabled = props.isOptionDisabled(option);\n                const isPreSelected =\n                    (props.selectedValues as BentoListboxMultiSelectValue)?.includes(option.value) || false;\n                return { isDisabled, isPreSelected };\n            };\n            // Items that are not disabled and pre-selected disabled items\n            const enabledItems = computed(() =>\n                props.items.filter(option => {\n                    const { isDisabled, isPreSelected } = optionStates(option);\n                    return (isDisabled && isPreSelected) || !isDisabled;\n                })\n            );\n\n            const selectedItemsList = ref((props.selectedValues || []) as BentoListboxMultiSelectValue);\n            watch(\n                () => props.selectedValues,\n                () => {\n                    selectedItemsList.value = (props.selectedValues || []) as BentoListboxMultiSelectValue;\n                }\n            );\n\n            const visibleSelectedList = computed(\n                () =>\n                    enabledItems.value?.filter(({ value }) =>\n                        selectedItemsList.value?.includes(value)\n                    ) as unknown as BentoListboxMultiSelectValue\n            );\n\n            const selectAllCheckboxText = computed(() => {\n                const total = props.items.length;\n                const amountSelectedValues = visibleSelectedList.value?.length || 0;\n\n                if (amountSelectedValues === 0) {\n                    return t('selectAll', { total });\n                }\n\n                return amountSelectedValues === total\n                    ? t('allSelected', { total })\n                    : t('numberOfTotalSelected', { number: amountSelectedValues, total });\n            });\n\n            const selectAll = () => {\n                const filterOutDisabledAndNotPreselectedOptions = option => {\n                    const { isDisabled, isPreSelected } = optionStates(option);\n                    return (isDisabled && isPreSelected) || !isDisabled;\n                };\n\n                // Adding or removing this list of values\n                const addOrRemoveList = props.items\n                    .filter(filterOutDisabledAndNotPreselectedOptions)\n                    .filter(item => !selectedItemsList.value.includes(item.value)) // MAKE SURE NOT TO ADD DUPLICATES\n                    .map(({ value }) => value);\n\n                selectedItemsList.value = [...selectedItemsList.value, ...addOrRemoveList];\n                emit('select', selectedItemsList.value);\n            };\n\n            const unselectAll = () => {\n                const findEnabledUnselectedItems = option => {\n                    const { isDisabled, isPreSelected } = optionStates(option);\n                    return !(isDisabled && isPreSelected);\n                };\n\n                const unselectedItemsList = props.items.filter(findEnabledUnselectedItems).map(({ value }) => value);\n                selectedItemsList.value = selectedItemsList.value.filter(item => !unselectedItemsList?.includes(item));\n                emit('select', selectedItemsList.value);\n            };\n\n            const { isAllSelected, isIndeterminate, toggleSelectAll } = useCheckboxSelectAll(\n                visibleSelectedList,\n                enabledItems,\n                selectAll,\n                unselectAll\n            );\n\n            const toggleCheckboxSelection = (value: BentoListboxValue) => {\n                let exists = false;\n                selectedItemsList.value = selectedItemsList.value.filter(option => {\n                    if (value === option) {\n                        exists = true;\n                        return false;\n                    }\n\n                    return true;\n                });\n\n                if (!exists) {\n                    selectedItemsList.value.push(value);\n                }\n\n                emit('select', selectedItemsList.value);\n            };\n\n            const selectedOptions = computed(() =>\n                props.items?.filter(item => selectedItemsList.value?.includes(item.value))\n            );\n\n            const isAnOptionSelected = computed(() => selectedOptions.value?.length > 0);\n\n            const isAllItemsIncludingDisabled = computed(\n                () => visibleSelectedList.value?.length === props.items?.length\n            );\n\n            return {\n                // Values\n                isAllSelected,\n                isAllItemsIncludingDisabled,\n                isAnOptionSelected,\n                isIndeterminate,\n                selectedItemsList,\n                selectAllCheckboxText,\n                selectedOptions,\n\n                // Enums\n                BentoTypographyElement,\n\n                // Methods\n                toggleCheckboxSelection,\n                toggleSelectAll,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-multi-select.scss\" />\n","<template>\n    <div :id=\"id\" class=\"b-listbox\" role=\"listbox\" tabindex=\"-1\" :aria-label=\"ariaLabel\">\n        <!-- Empty search message -->\n        <div v-if=\"isSearchResultEmpty\" class=\"b-listbox__empty-search-message\">\n            <bento-typography :el=\"BentoTypographyElement.SPAN\">{{ noResultsMessage }}</bento-typography>\n        </div>\n\n        <template v-else>\n            <!-- Multi select -->\n            <template v-if=\"multiple\">\n                <bento-listbox-multi-select\n                    :items=\"items\"\n                    :selected-values=\"selectedValue\"\n                    :searching=\"searching\"\n                    :is-option-disabled=\"isOptionDisabled\"\n                    @select=\"onOptionSelected\"\n                >\n                    <template v-for=\"(_, slot) of $scopedSlots || $slots\" #[slot]=\"scope\">\n                        <slot :name=\"slot\" v-bind=\"scope\" />\n                    </template>\n                </bento-listbox-multi-select>\n            </template>\n\n            <!-- Single select -->\n            <template v-else>\n                <bento-listbox-single-select-option\n                    v-for=\"option in items\"\n                    :key=\"option.value\"\n                    role=\"option\"\n                    :option=\"option\"\n                    :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n                    :selected=\"option.value === selectedValue\"\n                    @select=\"onOptionSelected\"\n                >\n                    <template v-for=\"(_, slot) of $scopedSlots || $slots\" #[slot]=\"scope\">\n                        <slot :name=\"slot\" v-bind=\"scope\" />\n                    </template>\n                </bento-listbox-single-select-option>\n            </template>\n        </template>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoListboxIsOptionDisabled, BentoListboxOptions, BentoListboxSelectedValue } from '@/types';\n    import { BentoListboxSingleSelectOption } from './components/listbox-single-select-option';\n    import { BentoListboxMultiSelect } from './components/listbox-multi-select';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n\n    /**\n     * Listbox container.\n     * It lists all the available options.\n     *\n     * @example\n     * <bento-listbox\n     *      v-slot=\"{label, value}\"\n     *      :id=\"listboxOptionsContainerId\"\n     *      :aria-label=\"ariaLabel\"\n     *      :disabled=\"disabled\"\n     *      :multiple=\"multiple\"\n     *      :selected=\"value\"\n     *      :isOptionDisabled=\"option => option.value === 2\"\n     *      :items=\"[{\n     *         { label: 'Option 1', value: 1 },\n     *         { label: 'Option 2', value: 2 },\n     *      }]\"\n     *      @select=\"onOptionSelected\"\n     * >\n     * </bento-listbox>\n     */\n    export default defineComponent({\n        name: 'bento-listbox',\n        components: {\n            BentoListboxSingleSelectOption,\n            BentoListboxMultiSelect,\n            BentoTypography,\n        },\n        props: {\n            /**\n             * Defines a string value that labels an interactive element.\n             */\n            ariaLabel: { type: String, default: null },\n\n            /**\n             *  Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set.\n             */\n            id: { type: String, required: true },\n\n            /**\n             * Function that allows the options to be disabled\n             *\n             * @type {BentoListboxIsOptionDisabled}\n             * @param {BentoListboxOptionItem} option - Listbox option object\n             * @param {string} option.label - Option's label text\n             * @param {string|number} option.value - Option's value\n             * @param {unknown} option.data - Option's extra data to be passed to the default slot\n             */\n            isOptionDisabled: {\n                type: Function as PropType<BentoListboxIsOptionDisabled>,\n                default: undefined,\n            },\n\n            /**\n             * The option elements to populate the listbox with.\n             * It must be an array of {@see BentoListboxOptionItem }\n             *  * @property {string} value.label - Text to be displayed in the option\n             *  * @property {string,number} value.value - Value of the option\n             */\n            items: {\n                type: Array as PropType<BentoListboxOptions>,\n                required: true,\n            },\n\n            /**\n             * If enabled, the user will be able to select multiple items.\n             */\n            multiple: { type: Boolean, default: false },\n\n            /**\n             * Messaged displayed when no items are listed in the listbox\n             */\n            noResultsMessage: { type: String, required: true },\n\n            /**\n             * Flag that indicates that an external search it's being made\n             * to filter out the items inside the the multi-select listbox\n             *\n             * If enabled, hides the \"Select all\" checkbox in \"multiple\" mode.\n             */\n            searching: BentoListboxMultiSelect.props.searching,\n\n            /**\n             * The `input` value.\n             * Providing an empty string or empty array will select no options.\n             * Set to an empty string `''` if you don't want any of the available options to be selected for single select\n             */\n            selectedValue: {\n                type: [String, Number, Array] as PropType<BentoListboxSelectedValue>,\n                default: undefined,\n            },\n        },\n        emits: ['select'],\n        setup(props, { emit }) {\n            const onOptionSelected = (selectedValue: BentoListboxSelectedValue) => {\n                emit('select', selectedValue);\n            };\n\n            const isSearchResultEmpty = computed(() => props.searching && props.items?.length === 0);\n\n            return {\n                // Values\n                isSearchResultEmpty,\n\n                // Methods\n                onOptionSelected,\n\n                // Enums\n                BentoTypographyElement,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox.scss\" />\n"],"names":["useCheckboxSelectAll","selectedItemsList","items","selectAll","unselectAll","isAllSelected","computed","_a","isIndeterminate","selectedValue","_sfc_main$5","defineComponent","props","emit","e","uuid","_sfc_main$4","_sfc_main$3","BentoListboxOption","BentoTypography","CheckmarkIcon","onOptionSelected","ariaDisabled","ariaSelected","tabIndex","BentoTypographyElement","_sfc_main$2","BentoCheckbox","_props","value","_sfc_main$1","messages","BentoListboxMultiSelectOptions","useI18n","optionStates","option","isDisabled","isPreSelected","enabledItems","ref","watch","visibleSelectedList","selectAllCheckboxText","total","amountSelectedValues","filterOutDisabledAndNotPreselectedOptions","addOrRemoveList","item","findEnabledUnselectedItems","unselectedItemsList","toggleSelectAll","toggleCheckboxSelection","exists","selectedOptions","isAnOptionSelected","isAllItemsIncludingDisabled","_b","_sfc_main","BentoListboxSingleSelectOption","BentoListboxMultiSelect"],"mappings":"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","x_google_ignoreList":[2]}

package/dist/chunks/on-click-outside.3e0c3e2a.js

@@ -0,0 +1,91 @@
+import { unref as k, watch as I } from "vue";
+const E = typeof window < "u", g = E ? window : void 0;
+var A;
+const S = E && ((A = window == null ? void 0 : window.navigator) == null ? void 0 : A.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+function v(n) {
+  return typeof n == "function" ? n() : k(n);
+}
+function d(n) {
+  const r = v(n);
+  return (r == null ? void 0 : r.$el) ?? r;
+}
+const L = () => {
+}, W = (n) => typeof n == "string";
+function h(...n) {
+  let r, i, o, a;
+  if (W(n[0]) || Array.isArray(n[0]) ? ([i, o, a] = n, r = g) : [r, i, o, a] = n, !r)
+    return L;
+  Array.isArray(i) || (i = [i]), Array.isArray(o) || (o = [o]);
+  const f = [], p = () => {
+    f.forEach((s) => s()), f.length = 0;
+  }, c = (s, l, t, e) => (s.addEventListener(l, t, e), () => s.removeEventListener(l, t, e)), m = I(
+    () => [d(r), v(a)],
+    ([s, l]) => {
+      p(), s && f.push(
+        ...i.flatMap(
+          (t) => o.map(
+            (e) => c(
+              s,
+              t,
+              e,
+              l
+            )
+          )
+        )
+      );
+    },
+    { immediate: !0, flush: "post" }
+  );
+  return () => {
+    m(), p();
+  };
+}
+let w = !1;
+function C(n, r, i = {}) {
+  const { window: o = g, ignore: a = [], capture: f = !0, detectIframe: p = !1 } = i;
+  if (!o)
+    return;
+  S && !w && (w = !0, Array.from(o.document.body.children).forEach((t) => t.addEventListener("click", L)));
+  let c = !0;
+  const m = (t) => (
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    a.some((e) => {
+      if (typeof e == "string")
+        return Array.from(o.document.querySelectorAll(e)).some(
+          (y) => y === t.target || t.composedPath().includes(y)
+        );
+      const u = d(e);
+      return u && (t.target === u || t.composedPath().includes(u));
+    })
+  ), s = [
+    h(o, "click", (t) => {
+      const e = d(n);
+      if (!(!e || e === t.target || t.composedPath().includes(e))) {
+        if (t.detail === 0 && (c = !m(t)), !c) {
+          c = !0;
+          return;
+        }
+        r(t);
+      }
+    }, { passive: !0, capture: f }),
+    h(
+      o,
+      "pointerdown",
+      (t) => {
+        const e = d(n);
+        e && (c = !t.composedPath().includes(e) && !m(t));
+      },
+      { passive: !0 }
+    ),
+    p && h(o, "blur", (t) => {
+      var u;
+      const e = d(n);
+      ((u = o.document.activeElement) == null ? void 0 : u.tagName) === "IFRAME" && !(e != null && e.contains(o.document.activeElement)) && r(t);
+    })
+  ].filter(Boolean);
+  return () => s.forEach((t) => t());
+}
+export {
+  C as o
+};
+//# sourceMappingURL=on-click-outside.3e0c3e2a.js.map