@adyen/bento-vue2 1.96.1 → 1.97.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (178) hide show
  1. package/dist/@types/index.d.ts +162 -127
  2. package/dist/action-bar.js +1 -1
  3. package/dist/ai-tag.js +1 -1
  4. package/dist/alert.js +1 -1
  5. package/dist/assets/accordion-item.css +1 -1
  6. package/dist/assets/action-bar.css +1 -1
  7. package/dist/assets/alert.css +1 -1
  8. package/dist/assets/base-modal.css +1 -1
  9. package/dist/assets/button-actions.css +1 -1
  10. package/dist/assets/calendar.css +1 -1
  11. package/dist/assets/card.css +1 -1
  12. package/dist/assets/country.css +1 -1
  13. package/dist/assets/data-grid.css +1 -1
  14. package/dist/assets/date-picker.css +1 -1
  15. package/dist/assets/date-range-picker.css +1 -1
  16. package/dist/assets/date-time-picker.css +1 -1
  17. package/dist/assets/dialog-page.css +1 -1
  18. package/dist/assets/dropdown.css +1 -1
  19. package/dist/assets/file-uploader.css +1 -1
  20. package/dist/assets/filter-bar.css +1 -1
  21. package/dist/assets/inspector.css +1 -1
  22. package/dist/assets/modal-fullscreen.css +1 -1
  23. package/dist/assets/navigation-menu-group.css +1 -1
  24. package/dist/assets/secondary-nav.css +1 -1
  25. package/dist/assets/sidepanel.css +1 -1
  26. package/dist/assets/summary-grid.css +1 -1
  27. package/dist/assets/textarea.css +1 -1
  28. package/dist/button.js +1 -1
  29. package/dist/card.js +1 -1
  30. package/dist/checkbox.js +2 -2
  31. package/dist/chunks/{action-bar.Chu-0oVy.js → action-bar.B890LCTe.js} +3 -3
  32. package/dist/chunks/{action-bar.Chu-0oVy.js.map → action-bar.B890LCTe.js.map} +1 -1
  33. package/dist/chunks/{ai-tag.DVmvni7U.js → ai-tag.C8RxACNj.js} +2 -2
  34. package/dist/chunks/{ai-tag.DVmvni7U.js.map → ai-tag.C8RxACNj.js.map} +1 -1
  35. package/dist/chunks/{alert.B4bHCE8V.js → alert.BDkEbdf4.js} +10 -10
  36. package/dist/chunks/{alert.B4bHCE8V.js.map → alert.BDkEbdf4.js.map} +1 -1
  37. package/dist/chunks/{base-modal.CC7gm9fc.js → base-modal.CDMoF3b_.js} +3 -3
  38. package/dist/chunks/{base-modal.CC7gm9fc.js.map → base-modal.CDMoF3b_.js.map} +1 -1
  39. package/dist/chunks/{button-actions-with-menu.BlOBDvdL.js → button-actions-with-menu.DqDQ_gVX.js} +2 -2
  40. package/dist/chunks/{button-actions-with-menu.BlOBDvdL.js.map → button-actions-with-menu.DqDQ_gVX.js.map} +1 -1
  41. package/dist/chunks/{button-actions.D1jRC1fs.js → button-actions.DKc63aCb.js} +122 -110
  42. package/dist/chunks/{button-actions.D1jRC1fs.js.map → button-actions.DKc63aCb.js.map} +1 -1
  43. package/dist/chunks/calendar.BckAv9N_.js +1235 -0
  44. package/dist/chunks/calendar.BckAv9N_.js.map +1 -0
  45. package/dist/chunks/{card.ErZLKN0q.js → card.ChBURa5R.js} +2 -2
  46. package/dist/chunks/{card.ErZLKN0q.js.map → card.ChBURa5R.js.map} +1 -1
  47. package/dist/chunks/{checkbox-group.CNTMMwQr.js → checkbox-group.BAjvgXlc.js} +2 -2
  48. package/dist/chunks/{checkbox-group.CNTMMwQr.js.map → checkbox-group.BAjvgXlc.js.map} +1 -1
  49. package/dist/chunks/{checkbox.BIzqX_eH.js → checkbox.BAQDBNL6.js} +18 -18
  50. package/dist/chunks/{checkbox.BIzqX_eH.js.map → checkbox.BAQDBNL6.js.map} +1 -1
  51. package/dist/chunks/{code-snippet.lcQRsLdZ.js → code-snippet.nUo9bjhC.js} +3 -3
  52. package/dist/chunks/{code-snippet.lcQRsLdZ.js.map → code-snippet.nUo9bjhC.js.map} +1 -1
  53. package/dist/chunks/{country.BEwW8TQo.js → country.nGZJwp_A.js} +2 -2
  54. package/dist/chunks/country.nGZJwp_A.js.map +1 -0
  55. package/dist/chunks/{dashboard-section.DiGQXS9L.js → dashboard-section.BDDVJpxY.js} +2 -2
  56. package/dist/chunks/{dashboard-section.DiGQXS9L.js.map → dashboard-section.BDDVJpxY.js.map} +1 -1
  57. package/dist/chunks/{dashed-underline.Cl07OQID.js → dashed-underline.CfEmbgOv.js} +2 -2
  58. package/dist/chunks/{dashed-underline.Cl07OQID.js.map → dashed-underline.CfEmbgOv.js.map} +1 -1
  59. package/dist/chunks/{data-grid-template.BVppx9kZ.js → data-grid-template.BUlLHTYe.js} +2 -2
  60. package/dist/chunks/{data-grid-template.BVppx9kZ.js.map → data-grid-template.BUlLHTYe.js.map} +1 -1
  61. package/dist/chunks/{data-grid.DQwAkw4U.js → data-grid.0OiCQjFc.js} +28 -29
  62. package/dist/chunks/{data-grid.DQwAkw4U.js.map → data-grid.0OiCQjFc.js.map} +1 -1
  63. package/dist/chunks/date-picker.CsFSskqf.js +245 -0
  64. package/dist/chunks/date-picker.CsFSskqf.js.map +1 -0
  65. package/dist/chunks/date-picker.types.Ckt7zxGy.js.map +1 -1
  66. package/dist/chunks/date-range-picker.Bczgdu5X.js +1250 -0
  67. package/dist/chunks/date-range-picker.Bczgdu5X.js.map +1 -0
  68. package/dist/chunks/date-range-picker.types.Ckt7zxGy.js.map +1 -1
  69. package/dist/chunks/date-time-picker.DT54TiG4.js +177 -0
  70. package/dist/chunks/date-time-picker.DT54TiG4.js.map +1 -0
  71. package/dist/chunks/{draggable-handle.DIhHtHG9.js → draggable-handle.DwJBaf5y.js} +2 -2
  72. package/dist/chunks/{draggable-handle.DIhHtHG9.js.map → draggable-handle.DwJBaf5y.js.map} +1 -1
  73. package/dist/chunks/{dropdown-tag.CuDxdSfb.js → dropdown-tag.BqSrkuwj.js} +2 -2
  74. package/dist/chunks/{dropdown-tag.CuDxdSfb.js.map → dropdown-tag.BqSrkuwj.js.map} +1 -1
  75. package/dist/chunks/dropdown.CIEm6MBB.js +2660 -0
  76. package/dist/chunks/dropdown.CIEm6MBB.js.map +1 -0
  77. package/dist/chunks/{file-uploader.CO2MeHwl.js → file-uploader.DOvQMUHC.js} +2 -2
  78. package/dist/chunks/{file-uploader.CO2MeHwl.js.map → file-uploader.DOvQMUHC.js.map} +1 -1
  79. package/dist/chunks/{filter-bar.DQ9fJXq1.js → filter-bar.DVRPM9tf.js} +318 -319
  80. package/dist/chunks/filter-bar.DVRPM9tf.js.map +1 -0
  81. package/dist/chunks/{footer-actions.CZE9dcmA.js → footer-actions.C1sXd7ti.js} +2 -2
  82. package/dist/chunks/{footer-actions.CZE9dcmA.js.map → footer-actions.C1sXd7ti.js.map} +1 -1
  83. package/dist/chunks/{form-layout-title.CXXdsiK5.js → form-layout-title.xrix5vY3.js} +2 -2
  84. package/dist/chunks/{form-layout-title.CXXdsiK5.js.map → form-layout-title.xrix5vY3.js.map} +1 -1
  85. package/dist/chunks/{header-meta.6rZdOgXD.js → header-meta.D1eb37QJ.js} +2 -2
  86. package/dist/chunks/{header-meta.6rZdOgXD.js.map → header-meta.D1eb37QJ.js.map} +1 -1
  87. package/dist/chunks/{header-with-views.4VNHbNk0.js → header-with-views.Bk6ly102.js} +8 -8
  88. package/dist/chunks/{header-with-views.4VNHbNk0.js.map → header-with-views.Bk6ly102.js.map} +1 -1
  89. package/dist/chunks/{header.BsroOD5b.js → header.CszOmM16.js} +3 -3
  90. package/dist/chunks/{header.BsroOD5b.js.map → header.CszOmM16.js.map} +1 -1
  91. package/dist/chunks/{input-field-password.CRqYWZGS.js → input-field-password.C4Wxsl16.js} +3 -3
  92. package/dist/chunks/{input-field-password.CRqYWZGS.js.map → input-field-password.C4Wxsl16.js.map} +1 -1
  93. package/dist/chunks/{input-field-phone-number.DHiuL0cF.js → input-field-phone-number.BhYTU628.js} +2 -2
  94. package/dist/chunks/{input-field-phone-number.DHiuL0cF.js.map → input-field-phone-number.BhYTU628.js.map} +1 -1
  95. package/dist/chunks/{input-field.BkQZ6Qzl.js → input-field.3tzX7t2y.js} +2 -2
  96. package/dist/chunks/{input-field.BkQZ6Qzl.js.map → input-field.3tzX7t2y.js.map} +1 -1
  97. package/dist/chunks/{input-time.BiOHvUEA.js → input-time.Bf-ZrCPX.js} +34 -34
  98. package/dist/chunks/{input-time.BiOHvUEA.js.map → input-time.Bf-ZrCPX.js.map} +1 -1
  99. package/dist/chunks/{modal-fullscreen.OS6KhVdg.js → modal-fullscreen.Dg1Hi3jB.js} +2 -2
  100. package/dist/chunks/{modal-fullscreen.OS6KhVdg.js.map → modal-fullscreen.Dg1Hi3jB.js.map} +1 -1
  101. package/dist/chunks/{modal.DHL3TGHv.js → modal.DZTEFM_E.js} +4 -4
  102. package/dist/chunks/{modal.DHL3TGHv.js.map → modal.DZTEFM_E.js.map} +1 -1
  103. package/dist/chunks/{pagination.DItyAwy1.js → pagination.C6HIPq58.js} +2 -2
  104. package/dist/chunks/{pagination.DItyAwy1.js.map → pagination.C6HIPq58.js.map} +1 -1
  105. package/dist/chunks/{rich-text-editor.D5URbwnM.js → rich-text-editor.-B96ibAd.js} +3 -3
  106. package/dist/chunks/{rich-text-editor.D5URbwnM.js.map → rich-text-editor.-B96ibAd.js.map} +1 -1
  107. package/dist/chunks/{search-bar.D-WK8eMQ.js → search-bar.DunTxVmZ.js} +5 -5
  108. package/dist/chunks/{search-bar.D-WK8eMQ.js.map → search-bar.DunTxVmZ.js.map} +1 -1
  109. package/dist/chunks/{secondary-nav.C7lEDaoj.js → secondary-nav.CGGPkYpc.js} +2 -2
  110. package/dist/chunks/{secondary-nav.C7lEDaoj.js.map → secondary-nav.CGGPkYpc.js.map} +1 -1
  111. package/dist/chunks/{selection-card-group.CiFW4AZR.js → selection-card-group.ZZ_qF1L1.js} +8 -8
  112. package/dist/chunks/{selection-card-group.CiFW4AZR.js.map → selection-card-group.ZZ_qF1L1.js.map} +1 -1
  113. package/dist/chunks/{sidepanel.B8zQp_MJ.js → sidepanel.ChuW63J7.js} +3 -3
  114. package/dist/chunks/{sidepanel.B8zQp_MJ.js.map → sidepanel.ChuW63J7.js.map} +1 -1
  115. package/dist/chunks/{summary-grid.types.CkqRXOKv.js → summary-grid.types.BnEhhDQz.js} +3 -3
  116. package/dist/chunks/summary-grid.types.BnEhhDQz.js.map +1 -0
  117. package/dist/chunks/{timeline-item.sdxvTjmS.js → timeline-item.DzMh520x.js} +3 -3
  118. package/dist/chunks/{timeline-item.sdxvTjmS.js.map → timeline-item.DzMh520x.js.map} +1 -1
  119. package/dist/chunks/{tutorial.Ba9dqb2j.js → tutorial.CkeL_7Je.js} +2 -2
  120. package/dist/chunks/{tutorial.Ba9dqb2j.js.map → tutorial.CkeL_7Je.js.map} +1 -1
  121. package/dist/chunks/use-bento-delayed-hover.D4rfUUOr.js.map +1 -1
  122. package/dist/chunks/{use-date-input-formatter.B5GQd3s2.js → use-date-input-formatter.Dq9C0nc9.js} +2 -2
  123. package/dist/chunks/{use-date-input-formatter.B5GQd3s2.js.map → use-date-input-formatter.Dq9C0nc9.js.map} +1 -1
  124. package/dist/code-snippet.js +1 -1
  125. package/dist/country.js +1 -1
  126. package/dist/dashboard-template.js +1 -1
  127. package/dist/dashed-underline.js +1 -1
  128. package/dist/data-grid-template.js +1 -1
  129. package/dist/data-grid.js +1 -1
  130. package/dist/date-picker.js +2 -2
  131. package/dist/date-range-picker.js +2 -2
  132. package/dist/date-time-picker.js +1 -1
  133. package/dist/draggable.js +1 -1
  134. package/dist/dropdown.js +10 -11
  135. package/dist/dropdown.js.map +1 -1
  136. package/dist/file-uploader.js +1 -1
  137. package/dist/filter-bar.js +1 -1
  138. package/dist/form-layout.js +1 -1
  139. package/dist/header-with-views.js +1 -1
  140. package/dist/header.js +1 -1
  141. package/dist/index.js +269 -270
  142. package/dist/index.js.map +1 -1
  143. package/dist/input-field-password.js +1 -1
  144. package/dist/input-field-phone-number.js +1 -1
  145. package/dist/input-field.js +1 -1
  146. package/dist/input-time.js +1 -1
  147. package/dist/internal.js +13 -13
  148. package/dist/menu.js +1 -1
  149. package/dist/modal-fullscreen.js +1 -1
  150. package/dist/modal.js +2 -2
  151. package/dist/pagination.js +1 -1
  152. package/dist/popover.js +1 -1
  153. package/dist/rich-text-editor.js +1 -1
  154. package/dist/search-bar.js +2 -2
  155. package/dist/secondary-nav.js +1 -1
  156. package/dist/selection-card.js +1 -1
  157. package/dist/sidepanel.js +1 -1
  158. package/dist/summary-grid.js +1 -1
  159. package/dist/timeline.js +1 -1
  160. package/dist/tutorial.js +1 -1
  161. package/dist/web-types.json +205 -2
  162. package/package.json +3 -3
  163. package/dist/assets/use-cached-selected-values.css +0 -1
  164. package/dist/chunks/calendar.D0JIbmoS.js +0 -1151
  165. package/dist/chunks/calendar.D0JIbmoS.js.map +0 -1
  166. package/dist/chunks/country.BEwW8TQo.js.map +0 -1
  167. package/dist/chunks/date-picker.BWxvyK5J.js +0 -245
  168. package/dist/chunks/date-picker.BWxvyK5J.js.map +0 -1
  169. package/dist/chunks/date-range-picker.gfRJmzXn.js +0 -1114
  170. package/dist/chunks/date-range-picker.gfRJmzXn.js.map +0 -1
  171. package/dist/chunks/date-time-picker.BIl9kFLh.js +0 -129
  172. package/dist/chunks/date-time-picker.BIl9kFLh.js.map +0 -1
  173. package/dist/chunks/dropdown.C70AlvOT.js +0 -1155
  174. package/dist/chunks/dropdown.C70AlvOT.js.map +0 -1
  175. package/dist/chunks/filter-bar.DQ9fJXq1.js.map +0 -1
  176. package/dist/chunks/summary-grid.types.CkqRXOKv.js.map +0 -1
  177. package/dist/chunks/use-cached-selected-values.D0s14AxT.js +0 -1520
  178. package/dist/chunks/use-cached-selected-values.D0s14AxT.js.map +0 -1
@@ -1,1520 +0,0 @@
1
- import { computed as n, ref as T, onMounted as $e, onUnmounted as Ne, watch as H, defineComponent as F, nextTick as ae, toRef as j, useSlots as Ge, useAttrs as Pe } from "vue";
2
- import { B as $, a as ne } from "./keyboard-navigation.DWmhelVv.js";
3
- import { B as q } from "./typography.C8lPlsbD.js";
4
- import { B as Fe } from "./loading-indicator.PxbRzshH.js";
5
- import { B as Ye } from "./empty-state.Dttc-ZO_.js";
6
- import { u as ie } from "./index.B6WW_F-J.js";
7
- import { o as ze } from "./resize.Bqks3WUm.js";
8
- import "./index.Cl4_42j5.js";
9
- import { C as Q, N as Ue } from "./minus-small.DJacLGTw.js";
10
- import { C as Ve } from "./checkmark-small.DVDtD4HQ.js";
11
- /* empty css */
12
- import { n as N } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
13
- import { B as We } from "./chip.BFY_-VCz.js";
14
- import { C as Ke } from "./chevron-down.eYtgv5ly.js";
15
- import { C as je } from "./chevron-up.d8cwIlA_.js";
16
- import { g as _e } from "./generate-uid.NJ8tVoha.js";
17
- import { a as qe, b as pe } from "./button-actions.D1jRC1fs.js";
18
- import "../assets/use-cached-selected-values.css";
19
- const Ce = (l, e, s, t) => {
20
- const o = n(
21
- () => {
22
- var f, L;
23
- return !!((f = l.value) != null && f.length) && ((L = l.value) == null ? void 0 : L.length) === e.value.length;
24
- }
25
- ), a = n(() => {
26
- var f;
27
- return l.value == null || l.value.length === 0 ? !1 : ((f = l.value) == null ? void 0 : f.length) !== e.value.length;
28
- });
29
- return {
30
- isAllSelected: o,
31
- isIndeterminate: a,
32
- toggleSelectAll: (f) => {
33
- f ? s() : t();
34
- }
35
- };
36
- };
37
- function Xe(l, { disabled: e, itemHeight: s, overscan: t = 5, prefixHeight: o }) {
38
- const a = T(null), c = T([]), f = T(0), L = T(0), m = T(0);
39
- let d;
40
- const A = n(() => {
41
- const h = typeof s == "number" ? l.value.length * s : l.value.reduce((E, C, O) => E + s(O), 0), x = typeof s == "number" ? f.value * s : l.value.slice(0, f.value).reduce((E, C, O) => E + s(O), 0);
42
- return {
43
- style: {
44
- marginTop: `${x}px`,
45
- height: `${h - x}px`
46
- }
47
- };
48
- }), k = () => {
49
- const h = (o == null ? void 0 : o.value) ?? 0, x = Math.max(a.value.scrollTop - h, 0);
50
- if (typeof s == "number")
51
- return Math.floor(x / s);
52
- let E = 0, C = 0;
53
- for (let O = 0; O < l.value.length; O += 1) {
54
- const D = s(O);
55
- if (E += D, E >= x) {
56
- C = O;
57
- break;
58
- }
59
- }
60
- return C;
61
- }, v = () => {
62
- if (m.value = a.value.clientHeight, typeof s == "number")
63
- return Math.ceil(m.value / s);
64
- const h = f.value ?? 0;
65
- let x = 0, E = 0;
66
- for (let C = h; C < l.value.length; C += 1) {
67
- const O = s(C);
68
- if (x += O, E = C, x > m.value)
69
- break;
70
- }
71
- return E - h;
72
- }, p = () => {
73
- if (a.value) {
74
- const h = v();
75
- f.value = k(), L.value = Math.min(f.value + h + t, l.value.length), c.value = l.value.slice(f.value, L.value);
76
- }
77
- }, R = () => {
78
- p();
79
- };
80
- e || ($e(() => {
81
- a.value && (m.value = a.value.clientHeight, d = ze(a.value, ({ clientHeight: h }) => {
82
- m.value = h, p();
83
- }), p());
84
- }), Ne(() => {
85
- d == null || d.disconnect();
86
- }), H(
87
- () => l.value,
88
- () => {
89
- p();
90
- }
91
- ));
92
- const M = {
93
- ref: a,
94
- style: { overflowY: "auto" }
95
- }, G = (h) => {
96
- if (!a.value)
97
- return;
98
- const x = typeof s == "number" ? h * s : l.value.slice(0, h).reduce((_, I, B) => _ + s(B), 0), E = typeof s == "number" ? s : s(h), C = x + E, { scrollTop: O, clientHeight: D } = a.value, r = O + D;
99
- C > r ? a.value.scrollTop = D > 0 ? C - D : x : x < O && (a.value.scrollTop = x), p();
100
- };
101
- return e ? {
102
- containerRef: a,
103
- containerProps: M,
104
- // eslint-disable-next-line @typescript-eslint/no-empty-function
105
- onScroll: () => {
106
- },
107
- list: l,
108
- // eslint-disable-next-line @typescript-eslint/no-empty-function
109
- scrollToIndex: () => {
110
- },
111
- startIndex: T(0)
112
- } : {
113
- containerRef: a,
114
- containerProps: M,
115
- onScroll: R,
116
- list: c,
117
- wrapperProps: A,
118
- scrollToIndex: G,
119
- startIndex: f
120
- };
121
- }
122
- var u = /* @__PURE__ */ ((l) => (l.SELECT = "select", l.SHOW_MORE = "show-more", l.ESCAPE = "escape-pressed", l.CLICK = "click", l.ENTER = "enter-pressed", l.SPACE = "space-pressed", l.TAB = "tab-pressed", l.CLOSE_DROPDOWN = "close-dropdown", l))(u || {}), K = /* @__PURE__ */ ((l) => (l.AUTOMATIC = "automatic", l.BUTTON = "button", l.NONE = "none", l))(K || {});
123
- const He = F({
124
- name: "bento-listbox-static-category",
125
- components: {
126
- BentoTypography: q
127
- },
128
- props: {
129
- /**
130
- * Category label text
131
- */
132
- categoryLabel: {
133
- type: String,
134
- required: !0
135
- }
136
- }
137
- });
138
- var Je = function() {
139
- var e = this, s = e._self._c;
140
- return e._self._setupProxy, s("div", { staticClass: "b-listbox-single-select-category", attrs: { role: "group", "aria-label": e.categoryLabel } }, [s("bento-typography", { staticClass: "b-listbox-single-select-category__label-text", attrs: { variant: "caption", el: "span", "aria-hidden": "true" } }, [e._v(" " + e._s(e.categoryLabel) + " ")]), s("div", [e._t("default")], 2)], 1);
141
- }, Ze = [], Qe = /* @__PURE__ */ N(
142
- He,
143
- Je,
144
- Ze,
145
- !1,
146
- null,
147
- "bfbc1649"
148
- );
149
- const et = Qe.exports, tt = F({
150
- name: "bento-listbox-option",
151
- props: {
152
- /**
153
- * Setting this property to true will disable the option.
154
- */
155
- disabled: { type: Boolean, default: !1 },
156
- /**
157
- * Indicates if the value is selected. Only one element can be selected at a time.
158
- */
159
- selected: { type: Boolean, default: !1 }
160
- },
161
- emits: [u.CLICK, u.ENTER, u.SPACE, u.TAB],
162
- setup(l, { emit: e }) {
163
- const s = n(() => ({
164
- "b-listbox-option--disabled": l.disabled,
165
- "b-listbox-option--selected": l.selected
166
- }));
167
- return {
168
- // Enums
169
- BentoKeyboardNavigationKeyDownEvent: $,
170
- BentoListboxEvent: u,
171
- // Values
172
- conditionalClasses: s,
173
- // Events
174
- onClick: (a) => {
175
- e(u.CLICK, a);
176
- },
177
- onOptionSelected: (a, c) => {
178
- e(a, c);
179
- }
180
- };
181
- }
182
- });
183
- var lt = function() {
184
- var e = this, s = e._self._c;
185
- return e._self._setupProxy, s("div", e._b({ staticClass: "b-listbox-option", class: e.conditionalClasses, attrs: { role: "option" }, on: { click: e.onClick, keydown: [function(t) {
186
- return !t.type.indexOf("key") && e._k(t.keyCode, "enter", 13, t.key, "Enter") ? null : e.onOptionSelected(e.BentoListboxEvent.ENTER, t);
187
- }, function(t) {
188
- return !t.type.indexOf("key") && e._k(t.keyCode, "space", 32, t.key, [" ", "Spacebar"]) ? null : e.onOptionSelected(e.BentoListboxEvent.SPACE, t);
189
- }, function(t) {
190
- return !t.type.indexOf("key") && e._k(t.keyCode, "tab", 9, t.key, "Tab") ? null : e.onOptionSelected(e.BentoListboxEvent.TAB, t);
191
- }] } }, "div", e.$attrs, !1), [e._t("default")], 2);
192
- }, st = [], ot = /* @__PURE__ */ N(
193
- tt,
194
- lt,
195
- st,
196
- !1,
197
- null,
198
- "c345b6c0"
199
- );
200
- const ee = ot.exports;
201
- let ye = 0;
202
- const at = {
203
- beforeCreate() {
204
- this.uuid = ye.toString(), ye += 1;
205
- }
206
- };
207
- var nt = function() {
208
- var e = this, s = e._self._c;
209
- return s("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? s("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), s("path", { attrs: { fill: "#001222", d: "M15.0608 4.00011L14.0001 2.93945L6.00011 10.9395L2.00011 6.93945L0.939453 8.00011L6.00011 13.0608L15.0608 4.00011Z" } })]);
210
- }, it = [], ct = /* @__PURE__ */ N(
211
- at,
212
- nt,
213
- it,
214
- !1,
215
- null,
216
- null
217
- );
218
- const rt = ct.exports, ut = F({
219
- name: "bento-listbox-single-select-option",
220
- components: {
221
- BentoListboxOption: ee,
222
- BentoTypography: q,
223
- CheckmarkIcon: rt
224
- },
225
- props: {
226
- /**
227
- * Setting this property to true will disable the option.
228
- */
229
- disabled: { type: Boolean, default: !1 },
230
- /**
231
- * The option item that contains all the option item's data.
232
- * @type {BentoListboxOptionItem}
233
- */
234
- option: {
235
- type: Object,
236
- required: !0
237
- },
238
- /**
239
- * Indicates if the value is selected. Only one element can be selected at a time.
240
- */
241
- selected: { type: Boolean, default: !1 }
242
- },
243
- emits: [u.ENTER, u.SELECT, u.SPACE, u.TAB],
244
- setup(l, { emit: e }) {
245
- const s = (c) => {
246
- l.disabled || e(c, l.option);
247
- }, t = n(() => l.disabled ? !0 : null), o = n(() => l.selected ? !0 : null), a = n(() => l.disabled ? -1 : 0);
248
- return {
249
- // Values
250
- ariaDisabled: t,
251
- ariaSelected: o,
252
- tabIndex: a,
253
- // Enums
254
- BentoListboxEvent: u,
255
- // Events
256
- onOptionSelected: s
257
- };
258
- }
259
- });
260
- var dt = function() {
261
- var e = this, s = e._self._c;
262
- return e._self._setupProxy, s("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: function(t) {
263
- return e.onOptionSelected(e.BentoListboxEvent.SELECT);
264
- }, "enter-pressed": function(t) {
265
- return e.onOptionSelected(e.BentoListboxEvent.ENTER);
266
- }, "space-pressed": function(t) {
267
- return t.preventDefault(), e.onOptionSelected(e.BentoListboxEvent.SPACE);
268
- }, "tab-pressed": function(t) {
269
- return e.onOptionSelected(e.BentoListboxEvent.TAB);
270
- } } }, [e._t("default", function() {
271
- return [s("span", { staticClass: "b-listbox-single-select-option__text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.option.label))]), e.option.description ? s("bento-typography", { staticClass: "b-listbox-single-select-option__description", attrs: { el: "span" } }, [e._v(" " + e._s(e.option.description) + " ")]) : e._e()], 1)];
272
- }, null, e.option), s("span", { staticClass: "b-listbox-single-select-option__check-icon" }, [s("checkmark-icon", { directives: [{ name: "show", rawName: "v-show", value: e.selected, expression: "selected" }], attrs: { "svg-title": "selected" } })], 1)], 2);
273
- }, bt = [], ft = /* @__PURE__ */ N(
274
- ut,
275
- dt,
276
- bt,
277
- !1,
278
- null,
279
- "bb14d75a"
280
- );
281
- const mt = ft.exports, xe = ({ items: l, totalItemCount: e }, s) => {
282
- const t = n(() => e != null && e.value ? e.value - 1 : l.value.length - 1), o = T(0), a = (v) => {
283
- switch (v) {
284
- case "increase":
285
- o.value += 1;
286
- break;
287
- case "decrease":
288
- o.value -= 1;
289
- break;
290
- }
291
- }, c = ({ edgeCaseItem: v }, p) => {
292
- o.value !== v && (a(p), s(o.value));
293
- }, f = (v) => {
294
- k(v), c(
295
- {
296
- edgeCaseItem: t.value
297
- },
298
- "increase"
299
- /* INCREASE */
300
- );
301
- }, L = (v) => {
302
- k(v), c(
303
- {
304
- edgeCaseItem: 0
305
- },
306
- "decrease"
307
- /* DECREASE */
308
- );
309
- }, m = () => {
310
- o.value = 0, s(o.value);
311
- }, d = () => {
312
- o.value = t.value, s(o.value);
313
- }, A = (v) => {
314
- o.value = v;
315
- }, k = (v) => {
316
- var p;
317
- (p = v == null ? void 0 : v.detail) == null || p.preventDefault();
318
- };
319
- return {
320
- moveToFirstElement: m,
321
- moveToLastElement: d,
322
- moveToNextElement: f,
323
- moveToPreviousElement: L,
324
- setListboxFocusedIndex: A,
325
- preventDefault: k,
326
- focusedIndex: o
327
- };
328
- }, Oe = (l, e, s = T("option"), t = !0) => {
329
- const o = T([]), a = async () => {
330
- if (!l.value || l.value.nodeType === Node.COMMENT_NODE)
331
- return;
332
- const c = Array.from(l.value.querySelectorAll(`[role="${s.value}"]`));
333
- o.value = t ? c.filter((f) => f.checkVisibility()) : c;
334
- };
335
- return H(
336
- e,
337
- () => {
338
- ae(() => {
339
- a();
340
- });
341
- },
342
- { immediate: !0 }
343
- ), {
344
- visibleDomOptions: o,
345
- updateVisibleDomOptions: a
346
- };
347
- }, vt = F({
348
- name: "bento-listbox-single-select",
349
- components: {
350
- BentoListboxSingleSelectCategory: et,
351
- BentoListboxSingleSelectOption: mt
352
- },
353
- directives: { BentoKeyboardNavigationDirective: ne },
354
- inheritAttrs: !1,
355
- props: {
356
- /**
357
- * Function that allows the options to be disabled
358
- *
359
- * @type {BentoListboxIsOptionDisabled}
360
- * @param {BentoListboxOptionItem} option - listbox option object
361
- * @param {string} option.label - Option's label text
362
- * @param {string|number} option.value - Option's value
363
- * @param {unknown} option.data - Option's extra data to be passed to the default slot
364
- */
365
- isOptionDisabled: {
366
- type: Function,
367
- default: () => !1
368
- },
369
- /**
370
- * The option elements to populate the listbox with.
371
- * It must be an array of {@see BentoListboxOptionItem }.
372
- *
373
- * @property {string} value.label - Text to be displayed in the option
374
- * @property {string,number} value.value - Value of the option
375
- */
376
- items: {
377
- type: Array,
378
- required: !0
379
- },
380
- /**
381
- * The `input` value.
382
- * Providing an empty string will select no options.
383
- * Set to an empty string `''` if you don't want any of the available options to be selected
384
- */
385
- selectedValue: {
386
- type: Array,
387
- default: void 0
388
- },
389
- /**
390
- * If enabled, dropdown will display non-selectable, static categories
391
- */
392
- staticCategories: { type: Boolean, default: !1 },
393
- /**
394
- * Total number of items in the full list (used for virtual scroll keyboard navigation).
395
- * When greater than 0, virtual scroll keyboard navigation is enabled.
396
- */
397
- totalItemCount: { type: Number, default: 0 },
398
- /**
399
- * Function to scroll the virtual list container to a given item index.
400
- */
401
- scrollToIndex: { type: Function, default: void 0 },
402
- /**
403
- * The start index of the currently rendered virtual scroll slice.
404
- */
405
- virtualScrollStartIndex: { type: Number, default: 0 }
406
- },
407
- emits: [u.SELECT, u.ENTER, u.SPACE, u.TAB],
408
- setup(l, { emit: e, expose: s, slots: t, attrs: o }) {
409
- const a = T(null), c = T([]), f = n(() => {
410
- var r;
411
- return !!((r = l.selectedValue) != null && r.length) && l.selectedValue.at(0);
412
- }), L = n(
413
- () => {
414
- var r, _, I, B;
415
- return {
416
- "aria-label": (r = o["aria-label"]) == null ? void 0 : r.toString(),
417
- "aria-busy": (_ = o["aria-busy"]) == null ? void 0 : _.toString(),
418
- "aria-atomic": (I = o["aria-atomic"]) == null ? void 0 : I.toString(),
419
- "aria-live": (B = o["aria-live"]) == null ? void 0 : B.toString()
420
- };
421
- }
422
- ), m = n(() => !!l.items.some(({ items: r }) => !!r)), d = (r) => (_) => {
423
- e(r, [_]);
424
- }, { visibleDomOptions: A, updateVisibleDomOptions: k } = Oe(
425
- a,
426
- j(l, "items"),
427
- T("option"),
428
- !1
429
- ), v = n(() => l.totalItemCount > 0), p = (r) => {
430
- if (!v.value)
431
- return;
432
- const _ = r.target;
433
- if (_ === a.value || (_ == null ? void 0 : _.getAttribute("role")) !== "option")
434
- return;
435
- const I = A.value.indexOf(_);
436
- if (I !== -1) {
437
- const B = I + l.virtualScrollStartIndex;
438
- C(B);
439
- }
440
- }, R = async (r) => {
441
- var _, I;
442
- if (v.value && l.scrollToIndex) {
443
- l.scrollToIndex(r), await ae(), await k();
444
- const B = r - l.virtualScrollStartIndex;
445
- (_ = A.value[B]) == null || _.focus();
446
- } else
447
- (I = A.value[r]) == null || I.focus();
448
- }, M = async (r) => {
449
- C(r), await R(r);
450
- }, {
451
- moveToNextElement: G,
452
- moveToPreviousElement: h,
453
- moveToFirstElement: x,
454
- moveToLastElement: E,
455
- setListboxFocusedIndex: C
456
- } = xe(
457
- {
458
- items: A,
459
- totalItemCount: j(l, "totalItemCount")
460
- },
461
- R
462
- ), O = {
463
- [$.ARROW_UP]: h,
464
- [$.ARROW_DOWN]: G,
465
- [$.HOME]: x,
466
- [$.END]: E
467
- }, D = {
468
- [u.SELECT]: d(u.SELECT),
469
- [u.SPACE]: d(u.SPACE),
470
- [u.TAB]: d(u.TAB),
471
- [u.ENTER]: d(u.ENTER)
472
- };
473
- return s({
474
- /**
475
- * Reference for a single listbox item.
476
- * Required for keyboard navigation in dropdown as $children is removed in vue@3
477
- */
478
- listboxItemRef: c,
479
- /**
480
- * Method to set the index of the item to be focused on
481
- * Used for focus management to be kept in-sync with parent e.g. dropdowns
482
- */
483
- setListboxFocusedIndex: C,
484
- /**
485
- * Navigates to an item by global index, handling virtual scroll if enabled.
486
- * Scrolls the virtual list and focuses the item.
487
- */
488
- navigateToItem: M
489
- }), {
490
- // Enums
491
- BentoListboxEvent: u,
492
- // Values
493
- listboxRef: a,
494
- listboxItemRef: c,
495
- selectedItem: f,
496
- slots: t,
497
- ariaAttributes: L,
498
- // Computed
499
- hasCategories: m,
500
- // Methods
501
- onOptionSelected: d,
502
- // Keyboard navigation
503
- listboxListeners: O,
504
- listboxOptionListeners: D,
505
- // Virtual scroll focus management
506
- handleVirtualScrollingFocus: p
507
- };
508
- }
509
- });
510
- var gt = function() {
511
- var e = this, s = e._self._c;
512
- return e._self._setupProxy, s("div", e._g(e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", attrs: { role: "listbox" }, on: { focusin: e.handleVirtualScrollingFocus } }, "div", e.ariaAttributes, !1), e.listboxListeners), [e.hasCategories && e.staticCategories ? [e._l(e.items, function(t) {
513
- return [t.items && t.items.length > 0 ? s("bento-listbox-single-select-category", { key: `category-${t.value}`, attrs: { "category-label": t.label } }, e._l(t.items, function(o) {
514
- return s("bento-listbox-single-select-option", e._g({ key: o.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: o, disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null, selected: o.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(a, c) {
515
- return { key: c, fn: function(f) {
516
- return [e._t(c, null, null, f)];
517
- } };
518
- })], null, !0) }, e.listboxOptionListeners));
519
- }), 1) : s("bento-listbox-single-select-option", e._g({ key: `option-${t.value}`, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: t, disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, selected: t.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
520
- return { key: a, fn: function(c) {
521
- return [e._t(a, null, null, c)];
522
- } };
523
- })], null, !0) }, e.listboxOptionListeners))];
524
- })] : e._l(e.items, function(t) {
525
- return s("bento-listbox-single-select-option", e._g({ key: t.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: t, disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, selected: t.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
526
- return { key: a, fn: function(c) {
527
- return [e._t(a, null, null, c)];
528
- } };
529
- })], null, !0) }, e.listboxOptionListeners));
530
- })], 2);
531
- }, _t = [], pt = /* @__PURE__ */ N(
532
- vt,
533
- gt,
534
- _t,
535
- !1,
536
- null,
537
- null
538
- );
539
- const yt = pt.exports;
540
- let he = 0;
541
- const ht = {
542
- beforeCreate() {
543
- this.uuid = he.toString(), he += 1;
544
- }
545
- };
546
- var St = function() {
547
- var e = this, s = e._self._c;
548
- return s("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? s("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), s("path", { attrs: { fill: "#001222", d: "M9.69043 5.75L4.62988 10.8105L1.56934 7.75L2.62988 6.68945L4.62988 8.68945L8.62988 4.68945L9.69043 5.75Z" } }), s("path", { attrs: { fill: "#001222", d: "M13.9307 5.75L8.87012 10.8105L7.80957 9.75L12.8701 4.68945L13.9307 5.75Z" } })]);
549
- }, Ct = [], xt = /* @__PURE__ */ N(
550
- ht,
551
- St,
552
- Ct,
553
- !1,
554
- null,
555
- null
556
- );
557
- const Ot = xt.exports, Et = {}, Tt = /* @__PURE__ */ F({
558
- ...Et,
559
- __name: "decorative-checkbox",
560
- props: {
561
- disabled: { type: Boolean, default: !1 },
562
- indeterminate: { type: Boolean, default: !1 },
563
- checked: { type: Boolean, default: !1 },
564
- allSelected: { type: Boolean, default: !1 }
565
- },
566
- setup(l) {
567
- const e = l, s = n(() => ({
568
- [`b-checkbox-input--${Q.DISABLED}`]: e.disabled
569
- })), t = n(() => ({
570
- [`b-checkbox-input__outline--${Q.UNCHECKED}`]: !e.checked && !e.indeterminate && !e.allSelected,
571
- [`b-checkbox-input__outline--${Q.CHECKED}`]: (e.checked || e.allSelected) && !e.indeterminate,
572
- [`b-checkbox-input__outline--${Q.INDETERMINATE}`]: e.indeterminate
573
- }));
574
- return { __sfc: !0, props: e, conditionalClasses: s, outlineConditionalClasses: t, CheckmarkSmallIcon: Ve, MinusSmallIcon: Ue, DoubleCheckmarkSmallIcon: Ot };
575
- }
576
- });
577
- var It = function() {
578
- var e = this, s = e._self._c, t = e._self._setupProxy;
579
- return s("div", { staticClass: "b-checkbox-input", class: t.conditionalClasses, attrs: { role: "presentation" } }, [e.indeterminate ? s(t.MinusSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : e.allSelected ? s(t.DoubleCheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true", "data-testid": "decorative-checkbox-double-checkmark-icon" } }) : e.checked ? s(t.CheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : e._e(), s("div", { staticClass: "b-checkbox-input__outline", class: t.outlineConditionalClasses })], 1);
580
- }, At = [], Lt = /* @__PURE__ */ N(
581
- Tt,
582
- It,
583
- At,
584
- !1,
585
- null,
586
- "b87bbaf9"
587
- );
588
- const ce = Lt.exports;
589
- var Ee = /* @__PURE__ */ ((l) => (l.DISABLED = "disabled", l.STATIC_CATEGORY = "static-category", l))(Ee || {}), V = /* @__PURE__ */ ((l) => (l.SELECT_CATEGORY = "select-category", l.UNSELECT_CATEGORY = "unselect-category", l.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", l))(V || {});
590
- const kt = {
591
- "de-DE": {
592
- categoryClosed: "{category} geschlossen",
593
- categoryOpened: "{category} geöffnet"
594
- },
595
- "en-GB": {
596
- categoryClosed: "{category} closed",
597
- categoryOpened: "{category} opened"
598
- },
599
- "en-US": {
600
- categoryClosed: "{category} closed",
601
- categoryOpened: "{category} opened"
602
- },
603
- "es-ES": {
604
- categoryClosed: "{category} cerrado",
605
- categoryOpened: "{category} abierto"
606
- },
607
- "es-MX": {
608
- categoryClosed: "{category} cerrado",
609
- categoryOpened: "{category} abierto"
610
- },
611
- "fr-FR": {
612
- categoryClosed: "{category} fermée",
613
- categoryOpened: "{category} ouverte"
614
- },
615
- "it-IT": {
616
- categoryClosed: "{category} chiuso",
617
- categoryOpened: "{category} aperto"
618
- },
619
- "ja-JP": {
620
- categoryClosed: "{category}を閉じました",
621
- categoryOpened: "{category}を開きました"
622
- },
623
- "pt-BR": {
624
- categoryClosed: "{category} fechada",
625
- categoryOpened: "{categoria} aberta"
626
- },
627
- "zh-CN": {
628
- categoryClosed: "{category} 已关闭",
629
- categoryOpened: "{category} 已打开"
630
- }
631
- }, Dt = F({
632
- i18n: { messages: kt },
633
- name: "bento-listbox-multi-select-category",
634
- components: {
635
- BentoTypography: q,
636
- BentoListboxOption: ee,
637
- ChevronDownIcon: Ke,
638
- ChevronUpIcon: je,
639
- DecorativeCheckbox: ce
640
- },
641
- props: {
642
- /**
643
- * The option elements to populate the listbox with.
644
- * It must be an array of {@see BentoListboxOptionItem }.
645
- *
646
- * @property {string} value.label - Text to be displayed in the option
647
- * @property {string,number} value.value - Value of the option
648
- * @property {BentoListboxOptionItem} value.items - Category items list
649
- */
650
- category: {
651
- type: Object,
652
- required: !0
653
- },
654
- /**
655
- * Function that allows the options to be disabled
656
- *
657
- * @type {BentoListboxIsOptionDisabled}
658
- * @param {BentoListboxOptionItem} option - listbox option object
659
- * @param {string} option.label - Option's label text
660
- * @param {string|number} option.value - Option's value
661
- * @param {unknown} option.data - Option's extra data to be passed to the default slot
662
- */
663
- isOptionDisabled: {
664
- type: [Function],
665
- default: () => !1
666
- },
667
- /**
668
- * The `input` value.
669
- * Providing an empty array will select no options.
670
- */
671
- selectedItemsList: {
672
- type: Array,
673
- default: () => []
674
- },
675
- /**
676
- * If enabled, dropdown will display non-selectable, static categories
677
- */
678
- staticCategories: { type: Boolean, default: !1 },
679
- /**
680
- * Category's tabindex
681
- */
682
- tabindex: { type: Number, default: -1 }
683
- },
684
- emits: [
685
- V.SELECT_CATEGORY,
686
- V.UNSELECT_CATEGORY,
687
- V.TOGGLE_CATEGORY_VISIBILITY
688
- ],
689
- setup(l, { emit: e }) {
690
- const s = T(!1), { t } = ie(), o = _e("category-group"), a = _e("category-name"), c = (r) => l.isOptionDisabled ? l.isOptionDisabled(r) : !1, f = n(
691
- () => l.category.items.every((r) => c(r))
692
- ), L = j(l, "staticCategories"), m = n(() => s.value || l.staticCategories), d = n(() => ({
693
- [`b-listbox-multi-select-category--${Ee.DISABLED}`]: f.value
694
- })), A = (r, _) => {
695
- r.preventDefault(), s.value = _ !== void 0 ? _ : !s.value, e(V.TOGGLE_CATEGORY_VISIBILITY, l.category.value);
696
- }, k = (r) => {
697
- var B;
698
- const _ = c(r), I = ((B = l.selectedItemsList) == null ? void 0 : B.includes(r.value)) || !1;
699
- return { isDisabled: _, isPreSelected: I };
700
- }, v = n(
701
- () => l.category.items.filter((r) => {
702
- const { isDisabled: _, isPreSelected: I } = k(r);
703
- return _ && I || !_;
704
- })
705
- ), p = n(
706
- () => {
707
- var r;
708
- return (r = v.value) == null ? void 0 : r.filter(
709
- ({ value: _ }) => {
710
- var I;
711
- return (I = l.selectedItemsList) == null ? void 0 : I.includes(_);
712
- }
713
- );
714
- }
715
- ), R = n(() => {
716
- const r = s.value ? "categoryOpened" : "categoryClosed";
717
- return t(r, { category: l.category.label });
718
- }), M = () => {
719
- e(V.SELECT_CATEGORY);
720
- }, G = () => {
721
- e(V.UNSELECT_CATEGORY);
722
- }, { isAllSelected: h, isIndeterminate: x, toggleSelectAll: E } = Ce(
723
- p,
724
- v,
725
- M,
726
- G
727
- ), C = n(() => x.value ? "mixed" : `${h.value}`), O = T(h.value), D = () => {
728
- O.value = !O.value, E(O.value);
729
- };
730
- return H(h, () => {
731
- O.value = h.value;
732
- }), {
733
- // Values
734
- chevronTitle: R,
735
- conditionalClass: d,
736
- hasAllPropsDisabled: f,
737
- isOpen: s,
738
- isAllSelected: h,
739
- isIndeterminate: x,
740
- isStaticCategory: L,
741
- categoryGroupId: o,
742
- categoryNameId: a,
743
- // Computed
744
- showItemChildren: m,
745
- ariaCheckedComputed: C,
746
- // Methods
747
- handleSelectAll: D,
748
- toggleOpen: A,
749
- toggleSelectAll: E
750
- };
751
- }
752
- });
753
- var Rt = function() {
754
- var e = this, s = e._self._c;
755
- return e._self._setupProxy, s("div", [e.isStaticCategory ? s("div", { staticClass: "b-listbox-multi-select-category b-listbox-multi-select-category--static-category", attrs: { "aria-hidden": "true" } }, [s("span", { staticClass: "b-listbox-multi-select-category__label" }, [s("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { el: "span", variant: "caption" } }, [e._v(" " + e._s(e.category.label) + " ")])], 1)]) : s("bento-listbox-option", { staticClass: "b-listbox-multi-select-category__option", class: e.conditionalClass, attrs: { tabindex: e.tabindex, "aria-selected": e.ariaCheckedComputed !== "false", "aria-checked": e.ariaCheckedComputed, "aria-disabled": e.hasAllPropsDisabled, "aria-expanded": `${e.isOpen}`, role: "treeitem", "aria-owns": e.categoryGroupId, "aria-labelledby": e.categoryNameId }, on: { click: e.handleSelectAll, "enter-pressed": e.handleSelectAll, "space-pressed": function(t) {
756
- return t.preventDefault(), e.handleSelectAll.apply(null, arguments);
757
- } }, nativeOn: { keydown: [function(t) {
758
- return !t.type.indexOf("key") && e._k(t.keyCode, "arrow-left", void 0, t.key, void 0) ? null : e.toggleOpen(t, !1);
759
- }, function(t) {
760
- return !t.type.indexOf("key") && e._k(t.keyCode, "arrow-right", void 0, t.key, void 0) ? null : e.toggleOpen(t, !0);
761
- }] } }, [s("decorative-checkbox", { attrs: { indeterminate: e.isIndeterminate, disabled: e.hasAllPropsDisabled, checked: e.isAllSelected } }), s("span", { staticClass: "b-listbox-multi-select-category__label" }, [s("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { id: e.categoryNameId, el: "span" } }, [e._v(" " + e._s(e.category.label) + " ")]), s("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "aria-hidden": "true", "data-testid": "toggle-listbox" }, on: { "!click": function(t) {
762
- return t.stopPropagation(), e.toggleOpen.apply(null, arguments);
763
- } } }, [e.isOpen ? s("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : s("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), s("div", { directives: [{ name: "show", rawName: "v-show", value: e.showItemChildren, expression: "showItemChildren" }], attrs: { id: e.categoryGroupId, role: "group", "aria-label": e.category.label } }, [e._t("default")], 2)], 1);
764
- }, Bt = [], wt = /* @__PURE__ */ N(
765
- Dt,
766
- Rt,
767
- Bt,
768
- !1,
769
- null,
770
- "00ccd708"
771
- );
772
- const Mt = wt.exports;
773
- var P = /* @__PURE__ */ ((l) => (l.SELECT_CATEGORY = "select-category", l.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", l.UNSELECT_CATEGORY = "unselect-category", l.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", l))(P || {});
774
- const $t = F({
775
- name: "listbox-multi-select-options",
776
- components: {
777
- BentoListboxOption: ee,
778
- BentoTypography: q,
779
- ListboxMultiSelectCategory: Mt,
780
- DecorativeCheckbox: ce
781
- },
782
- inheritAttrs: !1,
783
- props: {
784
- /**
785
- * Indicates if the items listed are inside a category
786
- * so they can be padded to right by one level in recursion.
787
- * Items of categories are automatically defined as "categoryItems"
788
- */
789
- categoryItems: { type: Boolean, default: !1 },
790
- /**
791
- * Current focused option index
792
- */
793
- focusedIndex: { type: Number, default: 0 },
794
- /**
795
- * Function that allows the options to be disabled
796
- *
797
- * @type {BentoListboxIsOptionDisabled}
798
- * @param {BentoListboxOptionItem} option - listbox option object
799
- * @param {string} option.label - Option's label text
800
- * @param {string|number} option.value - Option's value
801
- * @param {unknown} option.data - Option's extra data to be passed to the default slot
802
- */
803
- isOptionDisabled: {
804
- type: Function,
805
- default: () => !1
806
- },
807
- /**
808
- * The option elements to populate the listbox with.
809
- * It must be an array of {@see BentoListboxOptionItem }.
810
- *
811
- * @property {string} value.label - Text to be displayed in the option
812
- * @property {string,number} value.value - Value of the option
813
- */
814
- items: {
815
- type: Array,
816
- required: !0
817
- },
818
- /**
819
- * Indicates if the elements options are inside a multi-level category
820
- */
821
- isMultiLevel: { type: Boolean, default: !1 },
822
- /**
823
- * Flag that indicates that an external search it's being made
824
- * to filter out the items inside the the multi-select listbox
825
- *
826
- * If enabled, hides the "Select all" checkbox in "multiple" mode.
827
- */
828
- searching: { type: Boolean, default: !1 },
829
- /**
830
- * List of selected items.
831
- * Providing an empty array will select no options.
832
- */
833
- selectedItemsList: {
834
- type: Array,
835
- default: () => []
836
- },
837
- /**
838
- * If enabled, dropdown will display non-selectable, static categories
839
- */
840
- staticCategories: { type: Boolean, default: !1 },
841
- /**
842
- * Object with the index of each item.
843
- */
844
- itemsIndex: {
845
- type: Object,
846
- default: () => ({})
847
- }
848
- },
849
- emits: [
850
- P.TOGGLE_CHECKBOX_SELECTION,
851
- P.SELECT_CATEGORY,
852
- P.UNSELECT_CATEGORY,
853
- P.TOGGLE_CATEGORY_VISIBILITY
854
- ],
855
- setup(l, { emit: e }) {
856
- const s = (m) => {
857
- l.isOptionDisabled(m) || e(P.TOGGLE_CHECKBOX_SELECTION, m);
858
- }, t = (m) => !!m.items, o = (m) => {
859
- const d = l.isMultiLevel && l.searching;
860
- return m.description && (!l.isMultiLevel || d);
861
- }, a = (m) => m.items ? !!m.items.find((d) => l.selectedItemsList.includes(d.value)) : l.selectedItemsList.includes(m.value), c = (m) => {
862
- if (t(m)) {
863
- const d = a(m) ? P.UNSELECT_CATEGORY : P.SELECT_CATEGORY;
864
- e(d, m);
865
- } else
866
- s(m);
867
- };
868
- return {
869
- // Values
870
- conditionalClasses: n(() => ({
871
- "b-listbox-multi-select-options__static-category-option": l.staticCategories,
872
- "b-listbox-multi-select-options__category-option": l.categoryItems
873
- })),
874
- // Methods
875
- isOptionSelected: a,
876
- shouldShowDescription: o,
877
- toggleCheckboxSelection: s,
878
- toggleSearchOption: c,
879
- computedTabindex: (m) => l.itemsIndex[m] === l.focusedIndex ? 0 : -1,
880
- // Enums
881
- BentoListboxEvent: u,
882
- ListboxMultiSelectOptionsEvent: P
883
- };
884
- }
885
- });
886
- var Nt = function() {
887
- var e = this, s = e._self._c;
888
- return e._self._setupProxy, s("div", e._l(e.items, function(t) {
889
- return s("div", { key: `selected-${t.value}` }, [e.searching && e.isMultiLevel ? [s("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, tabindex: e.computedTabindex(t.value), "aria-selected": `${e.isOptionSelected(t)}`, "aria-checked": `${e.isOptionSelected(t)}`, "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(t) : null, role: e.$attrs.role || "option" }, on: { click: function(o) {
890
- return e.toggleSearchOption(t);
891
- }, "enter-pressed": function(o) {
892
- return e.toggleSearchOption(t);
893
- }, "space-pressed": function(o) {
894
- return o.preventDefault(), e.toggleSearchOption(t);
895
- } } }, [s("decorative-checkbox", { attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, checked: e.isOptionSelected(t) } }), e._t("default", function() {
896
- return [s("span", { staticClass: "b-listbox-multi-select__option-text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(t.label))]), e.shouldShowDescription(t) ? s("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(t.description) + " ")]) : e._e()], 1)];
897
- }, null, t)], 2)] : [t.items ? [s("listbox-multi-select-category", { attrs: { category: t, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList, tabindex: e.computedTabindex(t.value) }, on: { "select-category": function(o) {
898
- return e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, t);
899
- }, "unselect-category": function(o) {
900
- return e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, t);
901
- }, "toggle-category-visibility": function(o) {
902
- return e.$emit(e.ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY, o);
903
- } } }, [s("listbox-multi-select-options", { attrs: { "category-items": "", items: t.items, "is-option-disabled": e.isOptionDisabled, "items-index": e.itemsIndex, "focused-index": e.focusedIndex, "is-multi-level": e.isMultiLevel, "static-categories": e.staticCategories, "selected-items-list": e.selectedItemsList, searching: e.searching, role: e.$attrs.role || "option" }, on: { "toggle-checkbox-selection": (o) => e.toggleCheckboxSelection(o) } })], 1)] : s("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, tabindex: e.computedTabindex(t.value), "aria-selected": `${e.isOptionSelected(t)}`, "aria-checked": `${e.isOptionSelected(t)}`, "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(t) : null, role: e.$attrs.role || "option" }, on: { click: function(o) {
904
- return e.toggleCheckboxSelection(t);
905
- }, "enter-pressed": function(o) {
906
- return e.toggleCheckboxSelection(t);
907
- }, "space-pressed": function(o) {
908
- return o.preventDefault(), e.toggleCheckboxSelection(t);
909
- } } }, [s("decorative-checkbox", { attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, checked: e.isOptionSelected(t) } }), e._t("default", function() {
910
- return [s("span", { staticClass: "b-listbox-multi-select__option-text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(t.label))]), e.shouldShowDescription(t) ? s("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(t.description) + " ")]) : e._e()], 1)];
911
- }, null, t)], 2)]], 2);
912
- }), 0);
913
- }, Gt = [], Pt = /* @__PURE__ */ N(
914
- $t,
915
- Nt,
916
- Gt,
917
- !1,
918
- null,
919
- "0985e0a4"
920
- );
921
- const Ft = Pt.exports, Yt = (l) => {
922
- const e = n(() => {
923
- var t;
924
- return !!((t = l.value) != null && t.find(({ items: o }) => !!o));
925
- }), s = n(() => {
926
- var t;
927
- return e.value ? (t = l.value) == null ? void 0 : t.reduce((o, a) => (a.items ? o.push(...a.items.flat()) : o.push(a), o), []) : l.value;
928
- });
929
- return {
930
- isMultiLevelSelect: e,
931
- flattenedItemsList: s
932
- };
933
- }, zt = {
934
- "de-DE": {
935
- allSelected: "Alle ausgewählt ({total})",
936
- numberOfTotalSelected: "{number} von {total} ausgewählt",
937
- numbersSelected: "{number} ausgewählt",
938
- selectAll: "Alle auswählen ({total})"
939
- },
940
- "en-GB": {
941
- allSelected: "All selected ({total})",
942
- numberOfTotalSelected: "{number} of {total} selected",
943
- numbersSelected: "{number} selected",
944
- selectAll: "Select all ({total})"
945
- },
946
- "en-US": {
947
- allSelected: "All selected ({total})",
948
- numberOfTotalSelected: "{number} of {total} selected",
949
- numbersSelected: "{number} selected",
950
- selectAll: "Select all ({total})"
951
- },
952
- "es-ES": {
953
- allSelected: "Todos seleccionados ({total})",
954
- numberOfTotalSelected: "{number} de {total} seleccionados",
955
- numbersSelected: "{number} seleccionado",
956
- selectAll: "Seleccionar todo ({total})"
957
- },
958
- "es-MX": {
959
- allSelected: "Todos seleccionados ({total})",
960
- numberOfTotalSelected: "{number} de {total} seleccionados",
961
- numbersSelected: "{número} seleccionado",
962
- selectAll: "Seleccionar todo ({total})"
963
- },
964
- "fr-FR": {
965
- allSelected: "Tous sélectionnés ({total})",
966
- numberOfTotalSelected: "{number} sélectionné(s) sur {total}",
967
- numbersSelected: "{number} sélectionné(s)",
968
- selectAll: "Tout sélectionner ({total})"
969
- },
970
- "it-IT": {
971
- allSelected: "Tutti i selezionati ({total})",
972
- numberOfTotalSelected: "{numero} su {totale} selezionati",
973
- numbersSelected: "{numero} selezionati",
974
- selectAll: "Seleziona tutto ({total})"
975
- },
976
- "ja-JP": {
977
- allSelected: "すべて選択 ({total})",
978
- numberOfTotalSelected: "{total}件中{number}件を選択済み",
979
- numbersSelected: "{number}件選択済み",
980
- selectAll: "すべて選択 ({total})"
981
- },
982
- "pt-BR": {
983
- allSelected: "Todos os selecionados ({total})",
984
- numberOfTotalSelected: "{number} de {total} selecionados",
985
- numbersSelected: "{number} selecionados",
986
- selectAll: "Selecionar tudo ({total})"
987
- },
988
- "zh-CN": {
989
- allSelected: "全部已选 ({total})",
990
- numberOfTotalSelected: "已选择 {number} 个,共 {total} 个",
991
- numbersSelected: "已选择 {number} 个",
992
- selectAll: "选择全部({total})个"
993
- }
994
- }, Ut = { i18n: { messages: zt } }, Vt = /* @__PURE__ */ F({
995
- ...Ut,
996
- __name: "listbox-multi-select",
997
- props: {
998
- hasMoreItems: { type: Boolean, default: !1 },
999
- isOptionDisabled: { default: () => () => !1 },
1000
- items: null,
1001
- lazyLoadType: { default: "none" },
1002
- searching: { type: Boolean, default: !1 },
1003
- selectedValues: null,
1004
- staticCategories: { type: Boolean, default: !1 }
1005
- },
1006
- emits: ["select"],
1007
- setup(l, { expose: e, emit: s }) {
1008
- const t = l, { t: o, n: a } = ie(), c = Ge(), f = Pe(), L = n(
1009
- () => {
1010
- var i, b, g, S;
1011
- return {
1012
- "aria-label": (i = f["aria-label"]) == null ? void 0 : i.toString(),
1013
- "aria-busy": (b = f["aria-busy"]) == null ? void 0 : b.toString(),
1014
- "aria-atomic": (g = f["aria-atomic"]) == null ? void 0 : g.toString(),
1015
- "aria-live": (S = f["aria-live"]) == null ? void 0 : S.toString(),
1016
- "aria-multiselectable": !0
1017
- };
1018
- }
1019
- ), m = T(null), d = T(null), A = T(null), k = T(null), v = n(() => t.selectedValues.map(({ value: i }) => i)), { isMultiLevelSelect: p, flattenedItemsList: R } = Yt(j(t, "items")), M = n(() => p.value && !t.staticCategories), G = n(() => M.value ? "tree" : "listbox"), h = n(() => M.value ? "treeitem" : "option"), x = (i) => {
1020
- var S;
1021
- const b = t.isOptionDisabled(i), g = ((S = v.value) == null ? void 0 : S.includes(i.value)) || !1;
1022
- return { isDisabled: b, isPreSelected: g };
1023
- }, E = n(() => {
1024
- if (t.searching && p)
1025
- return t.items;
1026
- const i = R.value.filter((b) => {
1027
- const { isDisabled: g, isPreSelected: S } = x(b);
1028
- return g && S || !g;
1029
- });
1030
- return t.selectedValues.forEach((b) => {
1031
- i.find((g) => g.value === b.value) || i.push(b);
1032
- }), i;
1033
- }), C = n(
1034
- () => {
1035
- var i;
1036
- return (i = E.value) == null ? void 0 : i.filter((b) => {
1037
- var g;
1038
- return b.items && p.value && t.searching ? b.items.filter(
1039
- (y) => (t.selectedValues ?? []).includes(y.value)
1040
- ).length === b.items.length : (g = v.value) == null ? void 0 : g.includes(b.value);
1041
- });
1042
- }
1043
- ), O = () => p.value && !t.searching ? R.value.length : t.items.length, D = n(() => {
1044
- var S;
1045
- const i = E.value.length, b = O(), g = ((S = C.value) == null ? void 0 : S.length) || 0;
1046
- return g === 0 ? o("selectAll", { total: a(i) }) : g === b ? o("allSelected", { total: a(b) }) : g <= b ? o("numberOfTotalSelected", { number: a(g), total: a(b) }) : o("numbersSelected", { number: a(g) });
1047
- }), r = (i) => {
1048
- const b = (S) => {
1049
- const { isDisabled: y, isPreSelected: Y } = x(S);
1050
- return y && Y || !y;
1051
- }, g = i.filter(b).filter((S) => !v.value.includes(S.value));
1052
- s("select", [...t.selectedValues, ...g]);
1053
- }, _ = (i) => {
1054
- const b = (y) => {
1055
- const { isDisabled: Y, isPreSelected: Me } = x(y);
1056
- return !(Y && Me);
1057
- }, g = i.filter(b).map(({ value: y }) => y), S = t.selectedValues.filter((y) => !(g != null && g.includes(y.value)));
1058
- s("select", S);
1059
- }, I = () => {
1060
- r(R.value);
1061
- }, B = () => {
1062
- _(R.value);
1063
- }, { isAllSelected: z, isIndeterminate: J, toggleSelectAll: Z } = Ce(
1064
- C,
1065
- E,
1066
- I,
1067
- B
1068
- ), te = n(() => J.value ? "mixed" : `${z.value}`), U = T(z.value), w = () => {
1069
- U.value = !U.value, Z(U.value);
1070
- };
1071
- H(z, () => {
1072
- U.value = z.value;
1073
- });
1074
- const X = (i) => {
1075
- r(i.items);
1076
- }, Te = (i) => {
1077
- _(i.items);
1078
- }, Ie = (i, b) => {
1079
- let g = !1;
1080
- const S = t.selectedValues.filter(({ value: y }) => b.value === y ? (g = !0, !1) : !0);
1081
- g || S.push(b), s(i, S);
1082
- }, Ae = n(() => {
1083
- if (!p.value)
1084
- return t.selectedValues;
1085
- const i = (y) => v.value.includes(y.value), b = (y) => !t.staticCategories && y.every((Y) => i(Y));
1086
- return t.items.flatMap(
1087
- (y) => y.items && !b(y.items) ? y.items : y
1088
- ).filter((y) => y.items ? !0 : i(y));
1089
- }), Le = n(() => {
1090
- var g, S, y, Y;
1091
- const i = ["automatic", "button"].includes(t.lazyLoadType), b = ((g = t.selectedValues) == null ? void 0 : g.length) > 0 && ((S = C.value) == null ? void 0 : S.length) !== ((y = R.value) == null ? void 0 : y.length);
1092
- return i && t.hasMoreItems ? !!((Y = t.selectedValues) != null && Y.length) : b;
1093
- }), re = n(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), W = T([]), { visibleDomOptions: le, updateVisibleDomOptions: ue } = Oe(
1094
- m,
1095
- j(t, "items"),
1096
- h
1097
- ), ke = (i) => {
1098
- W.value.includes(i) ? W.value = W.value.filter((b) => b !== i) : W.value.push(i), ae(() => {
1099
- ue();
1100
- });
1101
- }, de = (i) => {
1102
- var b;
1103
- (b = le.value[i]) == null || b.focus();
1104
- }, {
1105
- moveToNextElement: be,
1106
- moveToPreviousElement: fe,
1107
- moveToFirstElement: me,
1108
- moveToLastElement: ve,
1109
- preventDefault: se,
1110
- focusedIndex: De,
1111
- setListboxFocusedIndex: ge
1112
- } = xe(
1113
- {
1114
- items: le
1115
- },
1116
- de
1117
- ), Re = {
1118
- [$.ARROW_UP]: (i) => fe(i),
1119
- [$.ARROW_DOWN]: (i) => be(i),
1120
- [$.HOME]: me,
1121
- [$.END]: ve
1122
- };
1123
- e({
1124
- /**
1125
- * Method to set the index of the item to be focused on
1126
- * Used for focus management to be kept in-sync with parent e.g. dropdowns
1127
- */
1128
- setListboxFocusedIndex: ge
1129
- });
1130
- const Be = {
1131
- [$.ARROW_UP]: se,
1132
- [$.ARROW_DOWN]: se
1133
- }, we = n(() => {
1134
- let i = re.value ? 1 : 0;
1135
- const b = {};
1136
- return t.items.forEach((g) => {
1137
- let S = W.value.includes(g.value);
1138
- g.items ? (t.staticCategories ? S = !0 : b[g.value] = i++, S && g.items.forEach((y) => b[y.value] = i++)) : b[g.value] = i++;
1139
- }), b;
1140
- });
1141
- return { __sfc: !0, props: t, emit: s, t: o, n: a, slots: c, attrs: f, ariaAttributes: L, listboxRef: m, selectAllListboxItemsRef: d, selectedListboxItemsRef: A, listboxItemsRef: k, selectedItemsList: v, isMultiLevelSelect: p, flattenedItemsList: R, isTreePattern: M, computedRole: G, computedOptionRole: h, optionStates: x, enabledItems: E, visibleSelectedList: C, calculateTotalItems: O, selectAllCheckboxText: D, selectAll: r, unselectAll: _, selectAllItems: I, unselectAllItems: B, isAllSelected: z, isIndeterminate: J, toggleSelectAll: Z, ariaCheckedComputed: te, isSelectAllOn: U, handleSelectAll: w, selectAllCategory: X, unselectAllCategory: Te, toggleCheckboxSelection: Ie, selectedOptions: Ae, showSelectedItems: Le, showSelectAllCheckbox: re, expandedCategories: W, visibleDomOptions: le, updateVisibleDomOptions: ue, toggleCategoryVisibility: ke, focusItem: de, moveToNextElement: be, moveToPreviousElement: fe, moveToFirstElement: me, moveToLastElement: ve, preventDefault: se, focusedIndex: De, setListboxFocusedIndex: ge, listboxListeners: Re, chipsSectionListeners: Be, computedItemsIndex: we, DecorativeCheckbox: ce, BentoTypography: q, BentoChip: We, BentoListboxOption: ee, ListboxMultiSelectOptions: Ft, vBentoKeyboardNavigationDirective: ne, BentoListboxEvent: u };
1142
- }
1143
- });
1144
- var Wt = function() {
1145
- var e = this, s = e._self._c, t = e._self._setupProxy;
1146
- return s("div", { ref: "listboxRef", staticClass: "b-listbox-multi-select" }, [t.showSelectedItems ? s("div", [s("ul", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select__chips" }, t.chipsSectionListeners), e._l(t.selectedOptions, function(o) {
1147
- return s("li", { key: o.value }, [s(t.BentoChip, { ref: "selectedListboxItemsRef", refInFor: !0, attrs: { disabled: e.isOptionDisabled(o), label: o.label, condensed: "" }, on: { click: function(a) {
1148
- o.items ? t.unselectAllCategory(o) : t.toggleCheckboxSelection("select", o);
1149
- } } })], 1);
1150
- }), 0), s("hr", { staticClass: "b-listbox-multi-select__divider", attrs: { "aria-hidden": "true" } })]) : e._e(), s("div", e._g(e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], attrs: { role: t.computedRole } }, "div", t.ariaAttributes, !1), t.listboxListeners), [t.showSelectAllCheckbox ? s(t.BentoListboxOption, { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option", attrs: { tabindex: t.focusedIndex === 0 ? 0 : -1, "aria-selected": t.ariaCheckedComputed !== "false", "aria-checked": t.ariaCheckedComputed, role: t.computedOptionRole }, on: { click: t.handleSelectAll, "enter-pressed": t.handleSelectAll, "space-pressed": function(o) {
1151
- return o.preventDefault(), t.handleSelectAll.apply(null, arguments);
1152
- } } }, [s(t.DecorativeCheckbox, { attrs: { checked: t.isAllSelected, indeterminate: t.isIndeterminate } }), s(t.BentoTypography, { attrs: { el: "span" } }, [e._v(" " + e._s(t.selectAllCheckboxText) + " ")])], 1) : e._e(), t.showSelectAllCheckbox ? s("hr", { staticClass: "b-listbox-multi-select__divider", attrs: { "aria-hidden": "true" } }) : e._e(), s(t.ListboxMultiSelectOptions, { ref: "listboxItemsRef", attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": t.isMultiLevelSelect, "static-categories": e.staticCategories, searching: e.searching, "selected-items-list": t.selectedItemsList, "focused-index": t.focusedIndex, "items-index": t.computedItemsIndex, role: t.computedOptionRole }, on: { "toggle-checkbox-selection": function(o) {
1153
- return t.toggleCheckboxSelection("select", o);
1154
- }, "select-category": t.selectAllCategory, "unselect-category": t.unselectAllCategory, "toggle-category-visibility": t.toggleCategoryVisibility, "space-pressed": function(o) {
1155
- return t.toggleCheckboxSelection(t.BentoListboxEvent.SPACE, o);
1156
- }, "tab-pressed": function(o) {
1157
- return t.toggleCheckboxSelection(t.BentoListboxEvent.TAB, o);
1158
- }, "enter-pressed": function(o) {
1159
- return t.toggleCheckboxSelection(t.BentoListboxEvent.ENTER, o);
1160
- } }, scopedSlots: e._u([e._l(t.slots, function(o, a) {
1161
- return { key: a, fn: function(c) {
1162
- return [e._t(a, null, null, c)];
1163
- } };
1164
- })], null, !0) })], 1)]);
1165
- }, Kt = [], jt = /* @__PURE__ */ N(
1166
- Vt,
1167
- Wt,
1168
- Kt,
1169
- !1,
1170
- null,
1171
- "b81d7402"
1172
- );
1173
- const Se = jt.exports, qt = (l, e = 300) => {
1174
- let s;
1175
- return (...o) => {
1176
- s && clearTimeout(s), s = setTimeout(() => l(...o), e);
1177
- };
1178
- }, Xt = {
1179
- "de-DE": {
1180
- loading: "Laden",
1181
- showMore: "Mehr anzeigen"
1182
- },
1183
- "en-GB": {
1184
- loading: "Loading",
1185
- showMore: "Show more"
1186
- },
1187
- "en-US": {
1188
- loading: "Loading",
1189
- showMore: "Show more"
1190
- },
1191
- "es-ES": {
1192
- loading: "Cargando",
1193
- showMore: "Mostrar más"
1194
- },
1195
- "es-MX": {
1196
- loading: "Cargando",
1197
- showMore: "Mostrar más"
1198
- },
1199
- "fr-FR": {
1200
- loading: "Chargement",
1201
- showMore: "Afficher plus"
1202
- },
1203
- "it-IT": {
1204
- loading: "Caricamento",
1205
- showMore: "Mostra di più"
1206
- },
1207
- "ja-JP": {
1208
- loading: "読み込み中",
1209
- showMore: "さらに表示"
1210
- },
1211
- "pt-BR": {
1212
- loading: "Carregando",
1213
- showMore: "Mostrar mais"
1214
- },
1215
- "zh-CN": {
1216
- loading: "正在加载",
1217
- showMore: "显示更多"
1218
- }
1219
- }, Ht = 36, Jt = F({
1220
- name: "bento-listbox",
1221
- components: {
1222
- BentoEmptyState: Ye,
1223
- BentoListboxSingleSelect: yt,
1224
- BentoListboxMultiSelect: Se,
1225
- BentoTypography: q,
1226
- BentoLoadingIndicator: Fe,
1227
- BentoLoadingButton: qe
1228
- },
1229
- directives: { BentoKeyboardNavigationDirective: ne },
1230
- i18n: { messages: Xt },
1231
- props: {
1232
- /**
1233
- * Defines a string value that labels an interactive element.
1234
- */
1235
- ariaLabel: { type: String, default: null },
1236
- /**
1237
- * Empty state props that will be used with the inner empty state component to be displayed when no search results are found.
1238
- */
1239
- emptyState: {
1240
- type: Object,
1241
- default: void 0
1242
- },
1243
- /**
1244
- * Indicates whether there are more items to load
1245
- */
1246
- hasMoreItems: { type: Boolean, default: !1 },
1247
- /**
1248
- * Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set.
1249
- */
1250
- id: { type: String, required: !0 },
1251
- /**
1252
- * Function that allows the options to be disabled
1253
- *
1254
- * @type {BentoListboxIsOptionDisabled}
1255
- * @param {BentoListboxOptionItem} option - Listbox option object
1256
- * @param {string} option.label - Option's label text
1257
- * @param {string|number} option.value - Option's value
1258
- * @param {unknown} option.data - Option's extra data to be passed to the default slot
1259
- */
1260
- isOptionDisabled: {
1261
- type: Function,
1262
- default: () => {
1263
- }
1264
- },
1265
- /**
1266
- * The option elements to populate the listbox with.
1267
- * It must be an array of {@see BentoListboxOptionItem }
1268
- * * @property {string} value.label - Text to be displayed in the option
1269
- * * @property {string,number} value.value - Value of the option
1270
- */
1271
- items: {
1272
- type: Array,
1273
- required: !0
1274
- },
1275
- /**
1276
- * Indicates if new options are lazy loading.
1277
- */
1278
- loading: { type: Boolean, default: !1 },
1279
- /**
1280
- * The type of `Lazy Load`.
1281
- * Type "automatic" will enable infinite scrolling
1282
- * Type "button" will enable lazy loading with "Show more" button
1283
- */
1284
- lazyLoadType: {
1285
- type: String,
1286
- default: K.NONE,
1287
- validator: (l) => Object.values(K).includes(l)
1288
- },
1289
- /**
1290
- * Indicates the listbox is loading filtered items.
1291
- */
1292
- componentLoading: { type: Boolean, default: !1 },
1293
- /**
1294
- * If enabled, the user will be able to select multiple items.
1295
- */
1296
- multiple: { type: Boolean, default: !1 },
1297
- /**
1298
- * If enabled, dropdown will display non-selectable, static categories
1299
- */
1300
- staticCategories: { type: Boolean, default: !1 },
1301
- /**
1302
- * Messaged displayed when no items are listed in the listbox
1303
- */
1304
- noResultsMessage: { type: String, required: !0 },
1305
- /**
1306
- * Flag that indicates that an external search it's being made
1307
- * to filter out the items inside the the multi-select listbox
1308
- *
1309
- * If enabled, hides the "Select all" checkbox in "multiple" mode.
1310
- */
1311
- searching: Se.props.searching,
1312
- /**
1313
- * The `input` value.
1314
- * Providing an empty string or empty array will select no options.
1315
- * Set to an empty string `''` if you don't want any of the available options to be selected for single select
1316
- */
1317
- selectedValue: {
1318
- type: Array,
1319
- default: () => []
1320
- },
1321
- /**
1322
- * Enables virtual scrolling if set to true or by providing an object with itemHeight function.
1323
- * The itemHeight function is used to calculate the height of rendered item given it's index.
1324
- */
1325
- virtualScroll: {
1326
- type: [Boolean, Object],
1327
- default: !1
1328
- }
1329
- },
1330
- emits: [
1331
- u.SELECT,
1332
- u.SPACE,
1333
- u.SHOW_MORE,
1334
- u.ENTER,
1335
- u.ESCAPE,
1336
- u.TAB
1337
- ],
1338
- setup(l, { emit: e, slots: s }) {
1339
- const t = T([]), o = j(l, "items"), { t: a } = ie(), c = n(() => l.lazyLoadType !== K.AUTOMATIC), f = n(() => l.lazyLoadType === K.AUTOMATIC), L = () => {
1340
- var w;
1341
- return typeof (l == null ? void 0 : l.virtualScroll) == "object" && ((w = l == null ? void 0 : l.virtualScroll) != null && w.itemHeight) ? l.virtualScroll.itemHeight : Ht;
1342
- }, m = !(l != null && l.multiple) && (l == null ? void 0 : l.virtualScroll) !== !1 && (l == null ? void 0 : l.lazyLoadType) === "none", {
1343
- containerRef: d,
1344
- containerProps: A,
1345
- onScroll: k,
1346
- list: v,
1347
- wrapperProps: p,
1348
- scrollToIndex: R,
1349
- startIndex: M
1350
- } = Xe(o, {
1351
- itemHeight: L(),
1352
- // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
1353
- disabled: !m
1354
- }), G = n(() => m ? o.value.length : 0), h = n(
1355
- () => l.componentLoading !== void 0 || c.value ? "true" : void 0
1356
- ), x = n(
1357
- () => c.value && l.loading || l.componentLoading ? "true" : "false"
1358
- ), E = n(
1359
- () => c.value || l.componentLoading !== void 0 ? "polite" : void 0
1360
- ), C = n(
1361
- () => ({
1362
- "aria-label": l.ariaLabel,
1363
- "aria-busy": x.value,
1364
- "aria-atomic": h.value,
1365
- "aria-live": E.value
1366
- })
1367
- ), O = n(
1368
- () => l.componentLoading ? {
1369
- ...C.value,
1370
- role: "alert"
1371
- } : {}
1372
- ), D = (w) => (X) => {
1373
- e(w, X);
1374
- }, r = () => {
1375
- e(u.SHOW_MORE);
1376
- }, _ = qt(() => {
1377
- const w = d.value;
1378
- if (!w)
1379
- return;
1380
- const X = Math.round(w.scrollTop) + w.clientHeight >= w.scrollHeight;
1381
- l.hasMoreItems && X && !l.loading && r();
1382
- }), I = () => {
1383
- f.value ? _() : k();
1384
- }, B = n(() => {
1385
- var w;
1386
- return ((w = l.items) == null ? void 0 : w.length) === 0;
1387
- }), z = n(
1388
- () => l.lazyLoadType === K.BUTTON && l.hasMoreItems
1389
- ), J = n(
1390
- () => l.loading ? pe.LOADING : pe.START
1391
- ), Z = n(() => l.loading ? a("loading") : a("showMore")), te = n(() => ({
1392
- ...l.emptyState,
1393
- variant: "condensed"
1394
- })), U = {
1395
- [u.SELECT]: D(u.SELECT),
1396
- [u.SPACE]: D(u.SPACE),
1397
- [u.TAB]: D(u.TAB),
1398
- [u.ENTER]: D(u.ENTER)
1399
- };
1400
- return {
1401
- // Refs
1402
- listboxRef: d,
1403
- listboxItemRef: t,
1404
- // a11y
1405
- ariaAttributes: C,
1406
- listboxContainerAttributes: O,
1407
- // Values
1408
- containerProps: A,
1409
- isSearchResultEmpty: B,
1410
- limitedEmptyStateProps: te,
1411
- loadingButtonState: J,
1412
- slots: s,
1413
- shouldDisplayShowMoreButton: z,
1414
- showMoreButtonText: Z,
1415
- virtualisedItems: v,
1416
- wrapperProps: p,
1417
- // Virtual scroll
1418
- totalItemCount: G,
1419
- scrollToIndex: R,
1420
- virtualScrollStartIndex: M,
1421
- // Enums
1422
- BentoKeyboardNavigationKeyDownEvent: $,
1423
- BentoListboxEvent: u,
1424
- // Methods
1425
- onListboxContainerScroll: I,
1426
- onOptionSelected: D,
1427
- emitShowMore: r,
1428
- listboxListeners: U
1429
- };
1430
- }
1431
- });
1432
- var Zt = function() {
1433
- var t;
1434
- var e = this, s = e._self._c;
1435
- return e._self._setupProxy, s("div", e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", staticClass: "b-listbox", style: (t = e.containerProps) == null ? void 0 : t.style, attrs: { id: e.id, tabindex: "-1", "data-testid": "listbox-container" }, on: { scroll: e.onListboxContainerScroll } }, "div", e.listboxContainerAttributes, !1), [s("div", e._b({}, "div", e.wrapperProps, !1), [e.componentLoading ? s("div", { staticClass: "b-listbox__loading-filtered-items" }, [s("bento-loading-indicator")], 1) : e.isSearchResultEmpty ? s("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? s("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [s("bento-listbox-multi-select", e._g(e._b({ ref: "listboxItemRef", attrs: { "has-more-items": e.hasMoreItems, items: e.items, "lazy-load-type": e.lazyLoadType, "static-categories": e.staticCategories, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
1436
- return { key: a, fn: function(c) {
1437
- return [e._t(a, null, null, c)];
1438
- } };
1439
- })], null, !0) }, "bento-listbox-multi-select", e.ariaAttributes, !1), e.listboxListeners))] : [s("bento-listbox-single-select", e._g(e._b({ ref: "listboxItemRef", attrs: { items: e.virtualisedItems, "total-item-count": e.totalItemCount, "scroll-to-index": e.scrollToIndex, "virtual-scroll-start-index": e.virtualScrollStartIndex, "selected-value": e.selectedValue, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
1440
- return { key: a, fn: function(c) {
1441
- return [e._t(a, null, null, c)];
1442
- } };
1443
- })], null, !0) }, "bento-listbox-single-select", e.ariaAttributes, !1), e.listboxListeners))], e.shouldDisplayShowMoreButton ? s("div", { staticClass: "b-listbox__lazy-load" }, [s("bento-loading-button", { attrs: { state: e.loadingButtonState, variant: "secondary" }, on: { "!click": function(o) {
1444
- return e.emitShowMore.apply(null, arguments);
1445
- } } }, [e._v(" " + e._s(e.showMoreButtonText) + " ")])], 1) : e.loading ? s("div", { staticClass: "b-listbox__lazy-load" }, [s("bento-loading-indicator")], 1) : e._e()]], 2)]);
1446
- }, Qt = [], el = /* @__PURE__ */ N(
1447
- Jt,
1448
- Zt,
1449
- Qt,
1450
- !1,
1451
- null,
1452
- "7819d7a2"
1453
- );
1454
- const yl = el.exports, oe = (l, e) => {
1455
- for (const s of l) {
1456
- if (s.value === e)
1457
- return s;
1458
- if (s.items) {
1459
- const t = oe(s.items, e);
1460
- if (t)
1461
- return t;
1462
- }
1463
- }
1464
- return null;
1465
- }, tl = (l) => typeof l == "object" && l !== null && "value" in l && "label" in l, hl = (l, e, s, t) => {
1466
- const o = T([]), a = T(), c = (d) => {
1467
- s.value ? a.value = d.map(({ value: A }) => A) : a.value = d.length > 0 ? d[0].value : null;
1468
- }, f = (d) => {
1469
- s.value ? a.value = d.map(({ value: A, label: k }) => ({ value: A, label: k })) : a.value = d.length > 0 ? { value: d[0].value, label: d[0].label } : null;
1470
- }, L = (d) => {
1471
- o.value = d, t != null && t.value ? f(d) : c(d);
1472
- }, m = () => {
1473
- o.value = [], a.value = null;
1474
- };
1475
- return H(
1476
- () => e.value,
1477
- () => {
1478
- if (!e.value && e.value !== 0) {
1479
- m();
1480
- return;
1481
- }
1482
- const d = !Array.isArray(e.value), A = [...o.value];
1483
- m();
1484
- const k = (v) => {
1485
- if (tl(v))
1486
- o.value.push(v);
1487
- else {
1488
- let p = oe(l.value, v);
1489
- p || (p = oe(A, v)), p || (p = { value: v, label: v.toString() }), o.value.push(p);
1490
- }
1491
- };
1492
- if (d) {
1493
- const v = e.value;
1494
- k(v), t != null && t.value ? f(o.value) : c(o.value);
1495
- return;
1496
- }
1497
- e.value.forEach(k), t != null && t.value ? f(o.value) : c(o.value);
1498
- },
1499
- { immediate: !0 }
1500
- ), {
1501
- // Values
1502
- cachedSelectedListboxOptions: o,
1503
- cachedListboxSelectedValues: a,
1504
- // Methods
1505
- resetCache: m,
1506
- setCachedValues: L
1507
- };
1508
- };
1509
- export {
1510
- u as B,
1511
- rt as C,
1512
- ce as D,
1513
- K as a,
1514
- yl as b,
1515
- Yt as c,
1516
- qt as d,
1517
- Oe as e,
1518
- hl as u
1519
- };
1520
- //# sourceMappingURL=use-cached-selected-values.D0s14AxT.js.map