@keenmate/web-multiselect 1.12.0-rc02 → 1.12.0-rc04
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.
- package/README.md +14 -3
- package/dist/index.d.ts +72 -6
- package/dist/multiselect.js +959 -842
- package/dist/multiselect.umd.js +15 -15
- package/docs/accessibility.md +84 -0
- package/docs/examples.md +1186 -0
- package/docs/theming.md +388 -0
- package/docs/usage.md +311 -0
- package/package.json +11 -2
package/dist/multiselect.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var d = (
|
|
4
|
-
const ie = Math.min, F = Math.max, re = Math.round, se = Math.floor, M = (
|
|
5
|
-
x:
|
|
6
|
-
y:
|
|
1
|
+
var ht = Object.defineProperty;
|
|
2
|
+
var mt = (o, e, t) => e in o ? ht(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
|
|
3
|
+
var d = (o, e, t) => mt(o, typeof e != "symbol" ? e + "" : e, t);
|
|
4
|
+
const ie = Math.min, F = Math.max, re = Math.round, se = Math.floor, M = (o) => ({
|
|
5
|
+
x: o,
|
|
6
|
+
y: o
|
|
7
7
|
}), pt = {
|
|
8
8
|
left: "right",
|
|
9
9
|
right: "left",
|
|
@@ -13,50 +13,50 @@ const ie = Math.min, F = Math.max, re = Math.round, se = Math.floor, M = (s) =>
|
|
|
13
13
|
start: "end",
|
|
14
14
|
end: "start"
|
|
15
15
|
};
|
|
16
|
-
function ze(
|
|
17
|
-
return F(
|
|
16
|
+
function ze(o, e, t) {
|
|
17
|
+
return F(o, ie(e, t));
|
|
18
18
|
}
|
|
19
|
-
function le(
|
|
20
|
-
return typeof
|
|
19
|
+
function le(o, e) {
|
|
20
|
+
return typeof o == "function" ? o(e) : o;
|
|
21
21
|
}
|
|
22
|
-
function N(
|
|
23
|
-
return
|
|
22
|
+
function N(o) {
|
|
23
|
+
return o.split("-")[0];
|
|
24
24
|
}
|
|
25
|
-
function ce(
|
|
26
|
-
return
|
|
25
|
+
function ce(o) {
|
|
26
|
+
return o.split("-")[1];
|
|
27
27
|
}
|
|
28
|
-
function
|
|
29
|
-
return
|
|
28
|
+
function Ge(o) {
|
|
29
|
+
return o === "x" ? "y" : "x";
|
|
30
30
|
}
|
|
31
|
-
function Ke(
|
|
32
|
-
return
|
|
31
|
+
function Ke(o) {
|
|
32
|
+
return o === "y" ? "height" : "width";
|
|
33
33
|
}
|
|
34
|
-
const
|
|
35
|
-
function
|
|
36
|
-
return
|
|
34
|
+
const bt = /* @__PURE__ */ new Set(["top", "bottom"]);
|
|
35
|
+
function D(o) {
|
|
36
|
+
return bt.has(N(o)) ? "y" : "x";
|
|
37
37
|
}
|
|
38
|
-
function qe(
|
|
39
|
-
return
|
|
38
|
+
function qe(o) {
|
|
39
|
+
return Ge(D(o));
|
|
40
40
|
}
|
|
41
|
-
function
|
|
41
|
+
function gt(o, e, t) {
|
|
42
42
|
t === void 0 && (t = !1);
|
|
43
|
-
const
|
|
44
|
-
let
|
|
45
|
-
return e.reference[r] > e.floating[r] && (
|
|
43
|
+
const s = ce(o), i = qe(o), r = Ke(i);
|
|
44
|
+
let a = i === "x" ? s === (t ? "end" : "start") ? "right" : "left" : s === "start" ? "bottom" : "top";
|
|
45
|
+
return e.reference[r] > e.floating[r] && (a = ae(a)), [a, ae(a)];
|
|
46
46
|
}
|
|
47
|
-
function ft(
|
|
48
|
-
const e =
|
|
49
|
-
return [fe(
|
|
47
|
+
function ft(o) {
|
|
48
|
+
const e = ae(o);
|
|
49
|
+
return [fe(o), e, fe(e)];
|
|
50
50
|
}
|
|
51
|
-
function fe(
|
|
52
|
-
return
|
|
51
|
+
function fe(o) {
|
|
52
|
+
return o.replace(/start|end/g, (e) => ut[e]);
|
|
53
53
|
}
|
|
54
|
-
const Ve = ["left", "right"],
|
|
55
|
-
function
|
|
56
|
-
switch (
|
|
54
|
+
const Ve = ["left", "right"], De = ["right", "left"], vt = ["top", "bottom"], _t = ["bottom", "top"];
|
|
55
|
+
function kt(o, e, t) {
|
|
56
|
+
switch (o) {
|
|
57
57
|
case "top":
|
|
58
58
|
case "bottom":
|
|
59
|
-
return t ? e ?
|
|
59
|
+
return t ? e ? De : Ve : e ? Ve : De;
|
|
60
60
|
case "left":
|
|
61
61
|
case "right":
|
|
62
62
|
return e ? vt : _t;
|
|
@@ -64,262 +64,262 @@ function wt(s, e, t) {
|
|
|
64
64
|
return [];
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
|
-
function
|
|
68
|
-
const i = ce(
|
|
69
|
-
let r =
|
|
70
|
-
return i && (r = r.map((
|
|
67
|
+
function yt(o, e, t, s) {
|
|
68
|
+
const i = ce(o);
|
|
69
|
+
let r = kt(N(o), t === "start", s);
|
|
70
|
+
return i && (r = r.map((a) => a + "-" + i), e && (r = r.concat(r.map(fe)))), r;
|
|
71
71
|
}
|
|
72
|
-
function
|
|
73
|
-
return
|
|
72
|
+
function ae(o) {
|
|
73
|
+
return o.replace(/left|right|bottom|top/g, (e) => pt[e]);
|
|
74
74
|
}
|
|
75
|
-
function
|
|
75
|
+
function wt(o) {
|
|
76
76
|
return {
|
|
77
77
|
top: 0,
|
|
78
78
|
right: 0,
|
|
79
79
|
bottom: 0,
|
|
80
80
|
left: 0,
|
|
81
|
-
...
|
|
81
|
+
...o
|
|
82
82
|
};
|
|
83
83
|
}
|
|
84
|
-
function xt(
|
|
85
|
-
return typeof
|
|
86
|
-
top:
|
|
87
|
-
right:
|
|
88
|
-
bottom:
|
|
89
|
-
left:
|
|
84
|
+
function xt(o) {
|
|
85
|
+
return typeof o != "number" ? wt(o) : {
|
|
86
|
+
top: o,
|
|
87
|
+
right: o,
|
|
88
|
+
bottom: o,
|
|
89
|
+
left: o
|
|
90
90
|
};
|
|
91
91
|
}
|
|
92
|
-
function
|
|
92
|
+
function ne(o) {
|
|
93
93
|
const {
|
|
94
94
|
x: e,
|
|
95
95
|
y: t,
|
|
96
|
-
width:
|
|
96
|
+
width: s,
|
|
97
97
|
height: i
|
|
98
|
-
} =
|
|
98
|
+
} = o;
|
|
99
99
|
return {
|
|
100
|
-
width:
|
|
100
|
+
width: s,
|
|
101
101
|
height: i,
|
|
102
102
|
top: t,
|
|
103
103
|
left: e,
|
|
104
|
-
right: e +
|
|
104
|
+
right: e + s,
|
|
105
105
|
bottom: t + i,
|
|
106
106
|
x: e,
|
|
107
107
|
y: t
|
|
108
108
|
};
|
|
109
109
|
}
|
|
110
|
-
function
|
|
110
|
+
function Be(o, e, t) {
|
|
111
111
|
let {
|
|
112
|
-
reference:
|
|
112
|
+
reference: s,
|
|
113
113
|
floating: i
|
|
114
|
-
} =
|
|
115
|
-
const r =
|
|
116
|
-
let
|
|
114
|
+
} = o;
|
|
115
|
+
const r = D(e), a = qe(e), n = Ke(a), l = N(e), c = r === "y", h = s.x + s.width / 2 - i.width / 2, p = s.y + s.height / 2 - i.height / 2, u = s[n] / 2 - i[n] / 2;
|
|
116
|
+
let m;
|
|
117
117
|
switch (l) {
|
|
118
118
|
case "top":
|
|
119
|
-
|
|
120
|
-
x:
|
|
121
|
-
y:
|
|
119
|
+
m = {
|
|
120
|
+
x: h,
|
|
121
|
+
y: s.y - i.height
|
|
122
122
|
};
|
|
123
123
|
break;
|
|
124
124
|
case "bottom":
|
|
125
|
-
|
|
126
|
-
x:
|
|
127
|
-
y:
|
|
125
|
+
m = {
|
|
126
|
+
x: h,
|
|
127
|
+
y: s.y + s.height
|
|
128
128
|
};
|
|
129
129
|
break;
|
|
130
130
|
case "right":
|
|
131
|
-
|
|
132
|
-
x:
|
|
131
|
+
m = {
|
|
132
|
+
x: s.x + s.width,
|
|
133
133
|
y: p
|
|
134
134
|
};
|
|
135
135
|
break;
|
|
136
136
|
case "left":
|
|
137
|
-
|
|
138
|
-
x:
|
|
137
|
+
m = {
|
|
138
|
+
x: s.x - i.width,
|
|
139
139
|
y: p
|
|
140
140
|
};
|
|
141
141
|
break;
|
|
142
142
|
default:
|
|
143
|
-
|
|
144
|
-
x:
|
|
145
|
-
y:
|
|
143
|
+
m = {
|
|
144
|
+
x: s.x,
|
|
145
|
+
y: s.y
|
|
146
146
|
};
|
|
147
147
|
}
|
|
148
148
|
switch (ce(e)) {
|
|
149
149
|
case "start":
|
|
150
|
-
|
|
150
|
+
m[a] -= u * (t && c ? -1 : 1);
|
|
151
151
|
break;
|
|
152
152
|
case "end":
|
|
153
|
-
|
|
153
|
+
m[a] += u * (t && c ? -1 : 1);
|
|
154
154
|
break;
|
|
155
155
|
}
|
|
156
|
-
return
|
|
156
|
+
return m;
|
|
157
157
|
}
|
|
158
|
-
const Ct = async (
|
|
158
|
+
const Ct = async (o, e, t) => {
|
|
159
159
|
const {
|
|
160
|
-
placement:
|
|
160
|
+
placement: s = "bottom",
|
|
161
161
|
strategy: i = "absolute",
|
|
162
162
|
middleware: r = [],
|
|
163
|
-
platform:
|
|
164
|
-
} = t,
|
|
165
|
-
let c = await
|
|
166
|
-
reference:
|
|
163
|
+
platform: a
|
|
164
|
+
} = t, n = r.filter(Boolean), l = await (a.isRTL == null ? void 0 : a.isRTL(e));
|
|
165
|
+
let c = await a.getElementRects({
|
|
166
|
+
reference: o,
|
|
167
167
|
floating: e,
|
|
168
168
|
strategy: i
|
|
169
169
|
}), {
|
|
170
|
-
x:
|
|
170
|
+
x: h,
|
|
171
171
|
y: p
|
|
172
|
-
} =
|
|
173
|
-
for (let
|
|
172
|
+
} = Be(c, s, l), u = s, m = {}, b = 0;
|
|
173
|
+
for (let g = 0; g < n.length; g++) {
|
|
174
174
|
const {
|
|
175
175
|
name: f,
|
|
176
176
|
fn: v
|
|
177
|
-
} =
|
|
178
|
-
x:
|
|
179
|
-
y
|
|
177
|
+
} = n[g], {
|
|
178
|
+
x: k,
|
|
179
|
+
y,
|
|
180
180
|
data: C,
|
|
181
|
-
reset:
|
|
181
|
+
reset: w
|
|
182
182
|
} = await v({
|
|
183
|
-
x:
|
|
183
|
+
x: h,
|
|
184
184
|
y: p,
|
|
185
|
-
initialPlacement:
|
|
185
|
+
initialPlacement: s,
|
|
186
186
|
placement: u,
|
|
187
187
|
strategy: i,
|
|
188
|
-
middlewareData:
|
|
188
|
+
middlewareData: m,
|
|
189
189
|
rects: c,
|
|
190
|
-
platform:
|
|
190
|
+
platform: a,
|
|
191
191
|
elements: {
|
|
192
|
-
reference:
|
|
192
|
+
reference: o,
|
|
193
193
|
floating: e
|
|
194
194
|
}
|
|
195
195
|
});
|
|
196
|
-
|
|
197
|
-
...
|
|
196
|
+
h = k ?? h, p = y ?? p, m = {
|
|
197
|
+
...m,
|
|
198
198
|
[f]: {
|
|
199
|
-
...
|
|
199
|
+
...m[f],
|
|
200
200
|
...C
|
|
201
201
|
}
|
|
202
|
-
},
|
|
203
|
-
reference:
|
|
202
|
+
}, w && b <= 50 && (b++, typeof w == "object" && (w.placement && (u = w.placement), w.rects && (c = w.rects === !0 ? await a.getElementRects({
|
|
203
|
+
reference: o,
|
|
204
204
|
floating: e,
|
|
205
205
|
strategy: i
|
|
206
|
-
}) :
|
|
207
|
-
x:
|
|
206
|
+
}) : w.rects), {
|
|
207
|
+
x: h,
|
|
208
208
|
y: p
|
|
209
|
-
} =
|
|
209
|
+
} = Be(c, u, l)), g = -1);
|
|
210
210
|
}
|
|
211
211
|
return {
|
|
212
|
-
x:
|
|
212
|
+
x: h,
|
|
213
213
|
y: p,
|
|
214
214
|
placement: u,
|
|
215
215
|
strategy: i,
|
|
216
|
-
middlewareData:
|
|
216
|
+
middlewareData: m
|
|
217
217
|
};
|
|
218
218
|
};
|
|
219
|
-
async function Ye(
|
|
219
|
+
async function Ye(o, e) {
|
|
220
220
|
var t;
|
|
221
221
|
e === void 0 && (e = {});
|
|
222
222
|
const {
|
|
223
|
-
x:
|
|
223
|
+
x: s,
|
|
224
224
|
y: i,
|
|
225
225
|
platform: r,
|
|
226
|
-
rects:
|
|
227
|
-
elements:
|
|
226
|
+
rects: a,
|
|
227
|
+
elements: n,
|
|
228
228
|
strategy: l
|
|
229
|
-
} =
|
|
229
|
+
} = o, {
|
|
230
230
|
boundary: c = "clippingAncestors",
|
|
231
|
-
rootBoundary:
|
|
231
|
+
rootBoundary: h = "viewport",
|
|
232
232
|
elementContext: p = "floating",
|
|
233
233
|
altBoundary: u = !1,
|
|
234
|
-
padding:
|
|
235
|
-
} = le(e,
|
|
236
|
-
element: (t = await (r.isElement == null ? void 0 : r.isElement(f))) == null || t ? f : f.contextElement || await (r.getDocumentElement == null ? void 0 : r.getDocumentElement(
|
|
234
|
+
padding: m = 0
|
|
235
|
+
} = le(e, o), b = xt(m), f = n[u ? p === "floating" ? "reference" : "floating" : p], v = ne(await r.getClippingRect({
|
|
236
|
+
element: (t = await (r.isElement == null ? void 0 : r.isElement(f))) == null || t ? f : f.contextElement || await (r.getDocumentElement == null ? void 0 : r.getDocumentElement(n.floating)),
|
|
237
237
|
boundary: c,
|
|
238
|
-
rootBoundary:
|
|
238
|
+
rootBoundary: h,
|
|
239
239
|
strategy: l
|
|
240
|
-
})),
|
|
241
|
-
x:
|
|
240
|
+
})), k = p === "floating" ? {
|
|
241
|
+
x: s,
|
|
242
242
|
y: i,
|
|
243
|
-
width:
|
|
244
|
-
height:
|
|
245
|
-
} :
|
|
243
|
+
width: a.floating.width,
|
|
244
|
+
height: a.floating.height
|
|
245
|
+
} : a.reference, y = await (r.getOffsetParent == null ? void 0 : r.getOffsetParent(n.floating)), C = await (r.isElement == null ? void 0 : r.isElement(y)) ? await (r.getScale == null ? void 0 : r.getScale(y)) || {
|
|
246
246
|
x: 1,
|
|
247
247
|
y: 1
|
|
248
248
|
} : {
|
|
249
249
|
x: 1,
|
|
250
250
|
y: 1
|
|
251
|
-
},
|
|
252
|
-
elements:
|
|
253
|
-
rect:
|
|
254
|
-
offsetParent:
|
|
251
|
+
}, w = ne(r.convertOffsetParentRelativeRectToViewportRelativeRect ? await r.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
252
|
+
elements: n,
|
|
253
|
+
rect: k,
|
|
254
|
+
offsetParent: y,
|
|
255
255
|
strategy: l
|
|
256
|
-
}) :
|
|
256
|
+
}) : k);
|
|
257
257
|
return {
|
|
258
|
-
top: (v.top -
|
|
259
|
-
bottom: (
|
|
260
|
-
left: (v.left -
|
|
261
|
-
right: (
|
|
258
|
+
top: (v.top - w.top + b.top) / C.y,
|
|
259
|
+
bottom: (w.bottom - v.bottom + b.bottom) / C.y,
|
|
260
|
+
left: (v.left - w.left + b.left) / C.x,
|
|
261
|
+
right: (w.right - v.right + b.right) / C.x
|
|
262
262
|
};
|
|
263
263
|
}
|
|
264
|
-
const St = function(
|
|
265
|
-
return
|
|
264
|
+
const St = function(o) {
|
|
265
|
+
return o === void 0 && (o = {}), {
|
|
266
266
|
name: "flip",
|
|
267
|
-
options:
|
|
267
|
+
options: o,
|
|
268
268
|
async fn(e) {
|
|
269
|
-
var t,
|
|
269
|
+
var t, s;
|
|
270
270
|
const {
|
|
271
271
|
placement: i,
|
|
272
272
|
middlewareData: r,
|
|
273
|
-
rects:
|
|
274
|
-
initialPlacement:
|
|
273
|
+
rects: a,
|
|
274
|
+
initialPlacement: n,
|
|
275
275
|
platform: l,
|
|
276
276
|
elements: c
|
|
277
277
|
} = e, {
|
|
278
|
-
mainAxis:
|
|
278
|
+
mainAxis: h = !0,
|
|
279
279
|
crossAxis: p = !0,
|
|
280
280
|
fallbackPlacements: u,
|
|
281
|
-
fallbackStrategy:
|
|
282
|
-
fallbackAxisSideDirection:
|
|
283
|
-
flipAlignment:
|
|
281
|
+
fallbackStrategy: m = "bestFit",
|
|
282
|
+
fallbackAxisSideDirection: b = "none",
|
|
283
|
+
flipAlignment: g = !0,
|
|
284
284
|
...f
|
|
285
|
-
} = le(
|
|
285
|
+
} = le(o, e);
|
|
286
286
|
if ((t = r.arrow) != null && t.alignmentOffset)
|
|
287
287
|
return {};
|
|
288
|
-
const v = N(i),
|
|
289
|
-
!u && Y &&
|
|
290
|
-
const j = [
|
|
291
|
-
let
|
|
292
|
-
if (
|
|
293
|
-
const $ =
|
|
288
|
+
const v = N(i), k = D(n), y = N(n) === n, C = await (l.isRTL == null ? void 0 : l.isRTL(c.floating)), w = u || (y || !g ? [ae(n)] : ft(n)), Y = b !== "none";
|
|
289
|
+
!u && Y && w.push(...yt(n, g, b, C));
|
|
290
|
+
const j = [n, ...w], ue = await Ye(e, f), te = [];
|
|
291
|
+
let U = ((s = r.flip) == null ? void 0 : s.overflows) || [];
|
|
292
|
+
if (h && te.push(ue[v]), p) {
|
|
293
|
+
const $ = gt(i, a, C);
|
|
294
294
|
te.push(ue[$[0]], ue[$[1]]);
|
|
295
295
|
}
|
|
296
|
-
if (
|
|
296
|
+
if (U = [...U, {
|
|
297
297
|
placement: i,
|
|
298
298
|
overflows: te
|
|
299
299
|
}], !te.every(($) => $ <= 0)) {
|
|
300
300
|
var Pe, Me;
|
|
301
|
-
const $ = (((Pe = r.flip) == null ? void 0 : Pe.index) || 0) + 1,
|
|
302
|
-
if (
|
|
301
|
+
const $ = (((Pe = r.flip) == null ? void 0 : Pe.index) || 0) + 1, be = j[$];
|
|
302
|
+
if (be && (!(p === "alignment" ? k !== D(be) : !1) || // We leave the current main axis only if every placement on that axis
|
|
303
303
|
// overflows the main axis.
|
|
304
|
-
|
|
304
|
+
U.every((I) => D(I.placement) === k ? I.overflows[0] > 0 : !0)))
|
|
305
305
|
return {
|
|
306
306
|
data: {
|
|
307
307
|
index: $,
|
|
308
|
-
overflows:
|
|
308
|
+
overflows: U
|
|
309
309
|
},
|
|
310
310
|
reset: {
|
|
311
|
-
placement:
|
|
311
|
+
placement: be
|
|
312
312
|
}
|
|
313
313
|
};
|
|
314
|
-
let J = (Me =
|
|
314
|
+
let J = (Me = U.filter((R) => R.overflows[0] <= 0).sort((R, I) => R.overflows[1] - I.overflows[1])[0]) == null ? void 0 : Me.placement;
|
|
315
315
|
if (!J)
|
|
316
|
-
switch (
|
|
316
|
+
switch (m) {
|
|
317
317
|
case "bestFit": {
|
|
318
318
|
var Ee;
|
|
319
|
-
const R = (Ee =
|
|
319
|
+
const R = (Ee = U.filter((I) => {
|
|
320
320
|
if (Y) {
|
|
321
|
-
const V =
|
|
322
|
-
return V ===
|
|
321
|
+
const V = D(I.placement);
|
|
322
|
+
return V === k || // Create a bias to the `y` side axis due to horizontal
|
|
323
323
|
// reading directions favoring greater width.
|
|
324
324
|
V === "y";
|
|
325
325
|
}
|
|
@@ -329,7 +329,7 @@ const St = function(s) {
|
|
|
329
329
|
break;
|
|
330
330
|
}
|
|
331
331
|
case "initialPlacement":
|
|
332
|
-
J =
|
|
332
|
+
J = n;
|
|
333
333
|
break;
|
|
334
334
|
}
|
|
335
335
|
if (i !== J)
|
|
@@ -343,16 +343,16 @@ const St = function(s) {
|
|
|
343
343
|
}
|
|
344
344
|
};
|
|
345
345
|
}, Tt = /* @__PURE__ */ new Set(["left", "top"]);
|
|
346
|
-
async function It(
|
|
346
|
+
async function It(o, e) {
|
|
347
347
|
const {
|
|
348
348
|
placement: t,
|
|
349
|
-
platform:
|
|
349
|
+
platform: s,
|
|
350
350
|
elements: i
|
|
351
|
-
} =
|
|
351
|
+
} = o, r = await (s.isRTL == null ? void 0 : s.isRTL(i.floating)), a = N(t), n = ce(t), l = D(t) === "y", c = Tt.has(a) ? -1 : 1, h = r && l ? -1 : 1, p = le(e, o);
|
|
352
352
|
let {
|
|
353
353
|
mainAxis: u,
|
|
354
|
-
crossAxis:
|
|
355
|
-
alignmentAxis:
|
|
354
|
+
crossAxis: m,
|
|
355
|
+
alignmentAxis: b
|
|
356
356
|
} = typeof p == "number" ? {
|
|
357
357
|
mainAxis: p,
|
|
358
358
|
crossAxis: 0,
|
|
@@ -362,87 +362,87 @@ async function It(s, e) {
|
|
|
362
362
|
crossAxis: p.crossAxis || 0,
|
|
363
363
|
alignmentAxis: p.alignmentAxis
|
|
364
364
|
};
|
|
365
|
-
return
|
|
366
|
-
x:
|
|
365
|
+
return n && typeof b == "number" && (m = n === "end" ? b * -1 : b), l ? {
|
|
366
|
+
x: m * h,
|
|
367
367
|
y: u * c
|
|
368
368
|
} : {
|
|
369
369
|
x: u * c,
|
|
370
|
-
y:
|
|
370
|
+
y: m * h
|
|
371
371
|
};
|
|
372
372
|
}
|
|
373
|
-
const Ot = function(
|
|
374
|
-
return
|
|
373
|
+
const Ot = function(o) {
|
|
374
|
+
return o === void 0 && (o = 0), {
|
|
375
375
|
name: "offset",
|
|
376
|
-
options:
|
|
376
|
+
options: o,
|
|
377
377
|
async fn(e) {
|
|
378
|
-
var t,
|
|
378
|
+
var t, s;
|
|
379
379
|
const {
|
|
380
380
|
x: i,
|
|
381
381
|
y: r,
|
|
382
|
-
placement:
|
|
383
|
-
middlewareData:
|
|
384
|
-
} = e, l = await It(e,
|
|
385
|
-
return
|
|
382
|
+
placement: a,
|
|
383
|
+
middlewareData: n
|
|
384
|
+
} = e, l = await It(e, o);
|
|
385
|
+
return a === ((t = n.offset) == null ? void 0 : t.placement) && (s = n.arrow) != null && s.alignmentOffset ? {} : {
|
|
386
386
|
x: i + l.x,
|
|
387
387
|
y: r + l.y,
|
|
388
388
|
data: {
|
|
389
389
|
...l,
|
|
390
|
-
placement:
|
|
390
|
+
placement: a
|
|
391
391
|
}
|
|
392
392
|
};
|
|
393
393
|
}
|
|
394
394
|
};
|
|
395
|
-
},
|
|
396
|
-
return
|
|
395
|
+
}, At = function(o) {
|
|
396
|
+
return o === void 0 && (o = {}), {
|
|
397
397
|
name: "shift",
|
|
398
|
-
options:
|
|
398
|
+
options: o,
|
|
399
399
|
async fn(e) {
|
|
400
400
|
const {
|
|
401
401
|
x: t,
|
|
402
|
-
y:
|
|
402
|
+
y: s,
|
|
403
403
|
placement: i
|
|
404
404
|
} = e, {
|
|
405
405
|
mainAxis: r = !0,
|
|
406
|
-
crossAxis:
|
|
407
|
-
limiter:
|
|
406
|
+
crossAxis: a = !1,
|
|
407
|
+
limiter: n = {
|
|
408
408
|
fn: (f) => {
|
|
409
409
|
let {
|
|
410
410
|
x: v,
|
|
411
|
-
y:
|
|
411
|
+
y: k
|
|
412
412
|
} = f;
|
|
413
413
|
return {
|
|
414
414
|
x: v,
|
|
415
|
-
y:
|
|
415
|
+
y: k
|
|
416
416
|
};
|
|
417
417
|
}
|
|
418
418
|
},
|
|
419
419
|
...l
|
|
420
|
-
} = le(
|
|
420
|
+
} = le(o, e), c = {
|
|
421
421
|
x: t,
|
|
422
|
-
y:
|
|
423
|
-
},
|
|
424
|
-
let
|
|
422
|
+
y: s
|
|
423
|
+
}, h = await Ye(e, l), p = D(N(i)), u = Ge(p);
|
|
424
|
+
let m = c[u], b = c[p];
|
|
425
425
|
if (r) {
|
|
426
|
-
const f = u === "y" ? "top" : "left", v = u === "y" ? "bottom" : "right",
|
|
427
|
-
|
|
426
|
+
const f = u === "y" ? "top" : "left", v = u === "y" ? "bottom" : "right", k = m + h[f], y = m - h[v];
|
|
427
|
+
m = ze(k, m, y);
|
|
428
428
|
}
|
|
429
|
-
if (
|
|
430
|
-
const f = p === "y" ? "top" : "left", v = p === "y" ? "bottom" : "right",
|
|
431
|
-
|
|
429
|
+
if (a) {
|
|
430
|
+
const f = p === "y" ? "top" : "left", v = p === "y" ? "bottom" : "right", k = b + h[f], y = b - h[v];
|
|
431
|
+
b = ze(k, b, y);
|
|
432
432
|
}
|
|
433
|
-
const
|
|
433
|
+
const g = n.fn({
|
|
434
434
|
...e,
|
|
435
|
-
[u]:
|
|
436
|
-
[p]:
|
|
435
|
+
[u]: m,
|
|
436
|
+
[p]: b
|
|
437
437
|
});
|
|
438
438
|
return {
|
|
439
|
-
...
|
|
439
|
+
...g,
|
|
440
440
|
data: {
|
|
441
|
-
x:
|
|
442
|
-
y:
|
|
441
|
+
x: g.x - t,
|
|
442
|
+
y: g.y - s,
|
|
443
443
|
enabled: {
|
|
444
444
|
[u]: r,
|
|
445
|
-
[p]:
|
|
445
|
+
[p]: a
|
|
446
446
|
}
|
|
447
447
|
}
|
|
448
448
|
};
|
|
@@ -452,66 +452,66 @@ const Ot = function(s) {
|
|
|
452
452
|
function de() {
|
|
453
453
|
return typeof window < "u";
|
|
454
454
|
}
|
|
455
|
-
function q(
|
|
456
|
-
return Je(
|
|
455
|
+
function q(o) {
|
|
456
|
+
return Je(o) ? (o.nodeName || "").toLowerCase() : "#document";
|
|
457
457
|
}
|
|
458
|
-
function T(
|
|
458
|
+
function T(o) {
|
|
459
459
|
var e;
|
|
460
|
-
return (
|
|
460
|
+
return (o == null || (e = o.ownerDocument) == null ? void 0 : e.defaultView) || window;
|
|
461
461
|
}
|
|
462
|
-
function z(
|
|
462
|
+
function z(o) {
|
|
463
463
|
var e;
|
|
464
|
-
return (e = (Je(
|
|
464
|
+
return (e = (Je(o) ? o.ownerDocument : o.document) || window.document) == null ? void 0 : e.documentElement;
|
|
465
465
|
}
|
|
466
|
-
function Je(
|
|
467
|
-
return de() ?
|
|
466
|
+
function Je(o) {
|
|
467
|
+
return de() ? o instanceof Node || o instanceof T(o).Node : !1;
|
|
468
468
|
}
|
|
469
|
-
function
|
|
470
|
-
return de() ?
|
|
469
|
+
function A(o) {
|
|
470
|
+
return de() ? o instanceof Element || o instanceof T(o).Element : !1;
|
|
471
471
|
}
|
|
472
|
-
function E(
|
|
473
|
-
return de() ?
|
|
472
|
+
function E(o) {
|
|
473
|
+
return de() ? o instanceof HTMLElement || o instanceof T(o).HTMLElement : !1;
|
|
474
474
|
}
|
|
475
|
-
function $e(
|
|
476
|
-
return !de() || typeof ShadowRoot > "u" ? !1 :
|
|
475
|
+
function $e(o) {
|
|
476
|
+
return !de() || typeof ShadowRoot > "u" ? !1 : o instanceof ShadowRoot || o instanceof T(o).ShadowRoot;
|
|
477
477
|
}
|
|
478
|
-
const
|
|
479
|
-
function ee(
|
|
478
|
+
const Lt = /* @__PURE__ */ new Set(["inline", "contents"]);
|
|
479
|
+
function ee(o) {
|
|
480
480
|
const {
|
|
481
481
|
overflow: e,
|
|
482
482
|
overflowX: t,
|
|
483
|
-
overflowY:
|
|
483
|
+
overflowY: s,
|
|
484
484
|
display: i
|
|
485
|
-
} =
|
|
486
|
-
return /auto|scroll|overlay|hidden|clip/.test(e +
|
|
485
|
+
} = L(o);
|
|
486
|
+
return /auto|scroll|overlay|hidden|clip/.test(e + s + t) && !Lt.has(i);
|
|
487
487
|
}
|
|
488
488
|
const Pt = /* @__PURE__ */ new Set(["table", "td", "th"]);
|
|
489
|
-
function Mt(
|
|
490
|
-
return Pt.has(q(
|
|
489
|
+
function Mt(o) {
|
|
490
|
+
return Pt.has(q(o));
|
|
491
491
|
}
|
|
492
492
|
const Et = [":popover-open", ":modal"];
|
|
493
|
-
function
|
|
493
|
+
function he(o) {
|
|
494
494
|
return Et.some((e) => {
|
|
495
495
|
try {
|
|
496
|
-
return
|
|
496
|
+
return o.matches(e);
|
|
497
497
|
} catch {
|
|
498
498
|
return !1;
|
|
499
499
|
}
|
|
500
500
|
});
|
|
501
501
|
}
|
|
502
|
-
const zt = ["transform", "translate", "scale", "rotate", "perspective"], Vt = ["transform", "translate", "scale", "rotate", "perspective", "filter"],
|
|
503
|
-
function Te(
|
|
504
|
-
const e = Ie(), t =
|
|
505
|
-
return zt.some((
|
|
502
|
+
const zt = ["transform", "translate", "scale", "rotate", "perspective"], Vt = ["transform", "translate", "scale", "rotate", "perspective", "filter"], Dt = ["paint", "layout", "strict", "content"];
|
|
503
|
+
function Te(o) {
|
|
504
|
+
const e = Ie(), t = A(o) ? L(o) : o;
|
|
505
|
+
return zt.some((s) => t[s] ? t[s] !== "none" : !1) || (t.containerType ? t.containerType !== "normal" : !1) || !e && (t.backdropFilter ? t.backdropFilter !== "none" : !1) || !e && (t.filter ? t.filter !== "none" : !1) || Vt.some((s) => (t.willChange || "").includes(s)) || Dt.some((s) => (t.contain || "").includes(s));
|
|
506
506
|
}
|
|
507
|
-
function
|
|
508
|
-
let e =
|
|
507
|
+
function Bt(o) {
|
|
508
|
+
let e = B(o);
|
|
509
509
|
for (; E(e) && !K(e); ) {
|
|
510
510
|
if (Te(e))
|
|
511
511
|
return e;
|
|
512
|
-
if (
|
|
512
|
+
if (he(e))
|
|
513
513
|
return null;
|
|
514
|
-
e =
|
|
514
|
+
e = B(e);
|
|
515
515
|
}
|
|
516
516
|
return null;
|
|
517
517
|
}
|
|
@@ -519,241 +519,241 @@ function Ie() {
|
|
|
519
519
|
return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
|
|
520
520
|
}
|
|
521
521
|
const $t = /* @__PURE__ */ new Set(["html", "body", "#document"]);
|
|
522
|
-
function K(
|
|
523
|
-
return $t.has(q(
|
|
522
|
+
function K(o) {
|
|
523
|
+
return $t.has(q(o));
|
|
524
524
|
}
|
|
525
|
-
function
|
|
526
|
-
return T(
|
|
525
|
+
function L(o) {
|
|
526
|
+
return T(o).getComputedStyle(o);
|
|
527
527
|
}
|
|
528
|
-
function
|
|
529
|
-
return
|
|
530
|
-
scrollLeft:
|
|
531
|
-
scrollTop:
|
|
528
|
+
function me(o) {
|
|
529
|
+
return A(o) ? {
|
|
530
|
+
scrollLeft: o.scrollLeft,
|
|
531
|
+
scrollTop: o.scrollTop
|
|
532
532
|
} : {
|
|
533
|
-
scrollLeft:
|
|
534
|
-
scrollTop:
|
|
533
|
+
scrollLeft: o.scrollX,
|
|
534
|
+
scrollTop: o.scrollY
|
|
535
535
|
};
|
|
536
536
|
}
|
|
537
|
-
function
|
|
538
|
-
if (q(
|
|
539
|
-
return
|
|
537
|
+
function B(o) {
|
|
538
|
+
if (q(o) === "html")
|
|
539
|
+
return o;
|
|
540
540
|
const e = (
|
|
541
541
|
// Step into the shadow DOM of the parent of a slotted node.
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
$e(
|
|
545
|
-
z(
|
|
542
|
+
o.assignedSlot || // DOM Element detected.
|
|
543
|
+
o.parentNode || // ShadowRoot detected.
|
|
544
|
+
$e(o) && o.host || // Fallback.
|
|
545
|
+
z(o)
|
|
546
546
|
);
|
|
547
547
|
return $e(e) ? e.host : e;
|
|
548
548
|
}
|
|
549
|
-
function Xe(
|
|
550
|
-
const e =
|
|
551
|
-
return K(e) ?
|
|
549
|
+
function Xe(o) {
|
|
550
|
+
const e = B(o);
|
|
551
|
+
return K(e) ? o.ownerDocument ? o.ownerDocument.body : o.body : E(e) && ee(e) ? e : Xe(e);
|
|
552
552
|
}
|
|
553
|
-
function Z(
|
|
554
|
-
var
|
|
553
|
+
function Z(o, e, t) {
|
|
554
|
+
var s;
|
|
555
555
|
e === void 0 && (e = []), t === void 0 && (t = !0);
|
|
556
|
-
const i = Xe(
|
|
556
|
+
const i = Xe(o), r = i === ((s = o.ownerDocument) == null ? void 0 : s.body), a = T(i);
|
|
557
557
|
if (r) {
|
|
558
|
-
const
|
|
559
|
-
return e.concat(
|
|
558
|
+
const n = ve(a);
|
|
559
|
+
return e.concat(a, a.visualViewport || [], ee(i) ? i : [], n && t ? Z(n) : []);
|
|
560
560
|
}
|
|
561
561
|
return e.concat(i, Z(i, [], t));
|
|
562
562
|
}
|
|
563
|
-
function ve(
|
|
564
|
-
return
|
|
563
|
+
function ve(o) {
|
|
564
|
+
return o.parent && Object.getPrototypeOf(o.parent) ? o.frameElement : null;
|
|
565
565
|
}
|
|
566
|
-
function Ze(
|
|
567
|
-
const e =
|
|
568
|
-
let t = parseFloat(e.width) || 0,
|
|
569
|
-
const i = E(
|
|
570
|
-
return
|
|
566
|
+
function Ze(o) {
|
|
567
|
+
const e = L(o);
|
|
568
|
+
let t = parseFloat(e.width) || 0, s = parseFloat(e.height) || 0;
|
|
569
|
+
const i = E(o), r = i ? o.offsetWidth : t, a = i ? o.offsetHeight : s, n = re(t) !== r || re(s) !== a;
|
|
570
|
+
return n && (t = r, s = a), {
|
|
571
571
|
width: t,
|
|
572
|
-
height:
|
|
573
|
-
$:
|
|
572
|
+
height: s,
|
|
573
|
+
$: n
|
|
574
574
|
};
|
|
575
575
|
}
|
|
576
|
-
function Oe(
|
|
577
|
-
return
|
|
576
|
+
function Oe(o) {
|
|
577
|
+
return A(o) ? o : o.contextElement;
|
|
578
578
|
}
|
|
579
|
-
function
|
|
580
|
-
const e = Oe(
|
|
579
|
+
function G(o) {
|
|
580
|
+
const e = Oe(o);
|
|
581
581
|
if (!E(e))
|
|
582
582
|
return M(1);
|
|
583
583
|
const t = e.getBoundingClientRect(), {
|
|
584
|
-
width:
|
|
584
|
+
width: s,
|
|
585
585
|
height: i,
|
|
586
586
|
$: r
|
|
587
587
|
} = Ze(e);
|
|
588
|
-
let
|
|
589
|
-
return (!
|
|
590
|
-
x:
|
|
591
|
-
y:
|
|
588
|
+
let a = (r ? re(t.width) : t.width) / s, n = (r ? re(t.height) : t.height) / i;
|
|
589
|
+
return (!a || !Number.isFinite(a)) && (a = 1), (!n || !Number.isFinite(n)) && (n = 1), {
|
|
590
|
+
x: a,
|
|
591
|
+
y: n
|
|
592
592
|
};
|
|
593
593
|
}
|
|
594
594
|
const Rt = /* @__PURE__ */ M(0);
|
|
595
|
-
function Qe(
|
|
596
|
-
const e = T(
|
|
595
|
+
function Qe(o) {
|
|
596
|
+
const e = T(o);
|
|
597
597
|
return !Ie() || !e.visualViewport ? Rt : {
|
|
598
598
|
x: e.visualViewport.offsetLeft,
|
|
599
599
|
y: e.visualViewport.offsetTop
|
|
600
600
|
};
|
|
601
601
|
}
|
|
602
|
-
function Ht(
|
|
603
|
-
return e === void 0 && (e = !1), !t || e && t !== T(
|
|
602
|
+
function Ht(o, e, t) {
|
|
603
|
+
return e === void 0 && (e = !1), !t || e && t !== T(o) ? !1 : e;
|
|
604
604
|
}
|
|
605
|
-
function W(
|
|
605
|
+
function W(o, e, t, s) {
|
|
606
606
|
e === void 0 && (e = !1), t === void 0 && (t = !1);
|
|
607
|
-
const i =
|
|
608
|
-
let
|
|
609
|
-
e && (
|
|
610
|
-
const
|
|
611
|
-
let l = (i.left +
|
|
607
|
+
const i = o.getBoundingClientRect(), r = Oe(o);
|
|
608
|
+
let a = M(1);
|
|
609
|
+
e && (s ? A(s) && (a = G(s)) : a = G(o));
|
|
610
|
+
const n = Ht(r, t, s) ? Qe(r) : M(0);
|
|
611
|
+
let l = (i.left + n.x) / a.x, c = (i.top + n.y) / a.y, h = i.width / a.x, p = i.height / a.y;
|
|
612
612
|
if (r) {
|
|
613
|
-
const u = T(r),
|
|
614
|
-
let
|
|
615
|
-
for (;
|
|
616
|
-
const f =
|
|
617
|
-
l *= f.x, c *= f.y,
|
|
613
|
+
const u = T(r), m = s && A(s) ? T(s) : s;
|
|
614
|
+
let b = u, g = ve(b);
|
|
615
|
+
for (; g && s && m !== b; ) {
|
|
616
|
+
const f = G(g), v = g.getBoundingClientRect(), k = L(g), y = v.left + (g.clientLeft + parseFloat(k.paddingLeft)) * f.x, C = v.top + (g.clientTop + parseFloat(k.paddingTop)) * f.y;
|
|
617
|
+
l *= f.x, c *= f.y, h *= f.x, p *= f.y, l += y, c += C, b = T(g), g = ve(b);
|
|
618
618
|
}
|
|
619
619
|
}
|
|
620
|
-
return
|
|
621
|
-
width:
|
|
620
|
+
return ne({
|
|
621
|
+
width: h,
|
|
622
622
|
height: p,
|
|
623
623
|
x: l,
|
|
624
624
|
y: c
|
|
625
625
|
});
|
|
626
626
|
}
|
|
627
|
-
function pe(
|
|
628
|
-
const t =
|
|
629
|
-
return e ? e.left + t : W(z(
|
|
627
|
+
function pe(o, e) {
|
|
628
|
+
const t = me(o).scrollLeft;
|
|
629
|
+
return e ? e.left + t : W(z(o)).left + t;
|
|
630
630
|
}
|
|
631
|
-
function et(
|
|
632
|
-
const t =
|
|
631
|
+
function et(o, e) {
|
|
632
|
+
const t = o.getBoundingClientRect(), s = t.left + e.scrollLeft - pe(o, t), i = t.top + e.scrollTop;
|
|
633
633
|
return {
|
|
634
|
-
x:
|
|
634
|
+
x: s,
|
|
635
635
|
y: i
|
|
636
636
|
};
|
|
637
637
|
}
|
|
638
|
-
function Ft(
|
|
638
|
+
function Ft(o) {
|
|
639
639
|
let {
|
|
640
640
|
elements: e,
|
|
641
641
|
rect: t,
|
|
642
|
-
offsetParent:
|
|
642
|
+
offsetParent: s,
|
|
643
643
|
strategy: i
|
|
644
|
-
} =
|
|
645
|
-
const r = i === "fixed",
|
|
646
|
-
if (
|
|
644
|
+
} = o;
|
|
645
|
+
const r = i === "fixed", a = z(s), n = e ? he(e.floating) : !1;
|
|
646
|
+
if (s === a || n && r)
|
|
647
647
|
return t;
|
|
648
648
|
let l = {
|
|
649
649
|
scrollLeft: 0,
|
|
650
650
|
scrollTop: 0
|
|
651
651
|
}, c = M(1);
|
|
652
|
-
const
|
|
653
|
-
if ((p || !p && !r) && ((q(
|
|
654
|
-
const
|
|
655
|
-
c =
|
|
652
|
+
const h = M(0), p = E(s);
|
|
653
|
+
if ((p || !p && !r) && ((q(s) !== "body" || ee(a)) && (l = me(s)), E(s))) {
|
|
654
|
+
const m = W(s);
|
|
655
|
+
c = G(s), h.x = m.x + s.clientLeft, h.y = m.y + s.clientTop;
|
|
656
656
|
}
|
|
657
|
-
const u =
|
|
657
|
+
const u = a && !p && !r ? et(a, l) : M(0);
|
|
658
658
|
return {
|
|
659
659
|
width: t.width * c.x,
|
|
660
660
|
height: t.height * c.y,
|
|
661
|
-
x: t.x * c.x - l.scrollLeft * c.x +
|
|
662
|
-
y: t.y * c.y - l.scrollTop * c.y +
|
|
661
|
+
x: t.x * c.x - l.scrollLeft * c.x + h.x + u.x,
|
|
662
|
+
y: t.y * c.y - l.scrollTop * c.y + h.y + u.y
|
|
663
663
|
};
|
|
664
664
|
}
|
|
665
|
-
function Nt(
|
|
666
|
-
return Array.from(
|
|
665
|
+
function Nt(o) {
|
|
666
|
+
return Array.from(o.getClientRects());
|
|
667
667
|
}
|
|
668
|
-
function Wt(
|
|
669
|
-
const e = z(
|
|
670
|
-
let
|
|
671
|
-
const
|
|
672
|
-
return
|
|
668
|
+
function Wt(o) {
|
|
669
|
+
const e = z(o), t = me(o), s = o.ownerDocument.body, i = F(e.scrollWidth, e.clientWidth, s.scrollWidth, s.clientWidth), r = F(e.scrollHeight, e.clientHeight, s.scrollHeight, s.clientHeight);
|
|
670
|
+
let a = -t.scrollLeft + pe(o);
|
|
671
|
+
const n = -t.scrollTop;
|
|
672
|
+
return L(s).direction === "rtl" && (a += F(e.clientWidth, s.clientWidth) - i), {
|
|
673
673
|
width: i,
|
|
674
674
|
height: r,
|
|
675
|
-
x:
|
|
676
|
-
y:
|
|
675
|
+
x: a,
|
|
676
|
+
y: n
|
|
677
677
|
};
|
|
678
678
|
}
|
|
679
679
|
const Re = 25;
|
|
680
|
-
function jt(
|
|
681
|
-
const t = T(
|
|
682
|
-
let r =
|
|
680
|
+
function jt(o, e) {
|
|
681
|
+
const t = T(o), s = z(o), i = t.visualViewport;
|
|
682
|
+
let r = s.clientWidth, a = s.clientHeight, n = 0, l = 0;
|
|
683
683
|
if (i) {
|
|
684
|
-
r = i.width,
|
|
685
|
-
const
|
|
686
|
-
(!
|
|
684
|
+
r = i.width, a = i.height;
|
|
685
|
+
const h = Ie();
|
|
686
|
+
(!h || h && e === "fixed") && (n = i.offsetLeft, l = i.offsetTop);
|
|
687
687
|
}
|
|
688
|
-
const c = pe(
|
|
688
|
+
const c = pe(s);
|
|
689
689
|
if (c <= 0) {
|
|
690
|
-
const
|
|
691
|
-
|
|
690
|
+
const h = s.ownerDocument, p = h.body, u = getComputedStyle(p), m = h.compatMode === "CSS1Compat" && parseFloat(u.marginLeft) + parseFloat(u.marginRight) || 0, b = Math.abs(s.clientWidth - p.clientWidth - m);
|
|
691
|
+
b <= Re && (r -= b);
|
|
692
692
|
} else c <= Re && (r += c);
|
|
693
693
|
return {
|
|
694
694
|
width: r,
|
|
695
|
-
height:
|
|
696
|
-
x:
|
|
695
|
+
height: a,
|
|
696
|
+
x: n,
|
|
697
697
|
y: l
|
|
698
698
|
};
|
|
699
699
|
}
|
|
700
|
-
const
|
|
701
|
-
function
|
|
702
|
-
const t = W(
|
|
700
|
+
const Ut = /* @__PURE__ */ new Set(["absolute", "fixed"]);
|
|
701
|
+
function Gt(o, e) {
|
|
702
|
+
const t = W(o, !0, e === "fixed"), s = t.top + o.clientTop, i = t.left + o.clientLeft, r = E(o) ? G(o) : M(1), a = o.clientWidth * r.x, n = o.clientHeight * r.y, l = i * r.x, c = s * r.y;
|
|
703
703
|
return {
|
|
704
|
-
width:
|
|
705
|
-
height:
|
|
704
|
+
width: a,
|
|
705
|
+
height: n,
|
|
706
706
|
x: l,
|
|
707
707
|
y: c
|
|
708
708
|
};
|
|
709
709
|
}
|
|
710
|
-
function He(
|
|
711
|
-
let
|
|
710
|
+
function He(o, e, t) {
|
|
711
|
+
let s;
|
|
712
712
|
if (e === "viewport")
|
|
713
|
-
|
|
713
|
+
s = jt(o, t);
|
|
714
714
|
else if (e === "document")
|
|
715
|
-
|
|
716
|
-
else if (
|
|
717
|
-
|
|
715
|
+
s = Wt(z(o));
|
|
716
|
+
else if (A(e))
|
|
717
|
+
s = Gt(e, t);
|
|
718
718
|
else {
|
|
719
|
-
const i = Qe(
|
|
720
|
-
|
|
719
|
+
const i = Qe(o);
|
|
720
|
+
s = {
|
|
721
721
|
x: e.x - i.x,
|
|
722
722
|
y: e.y - i.y,
|
|
723
723
|
width: e.width,
|
|
724
724
|
height: e.height
|
|
725
725
|
};
|
|
726
726
|
}
|
|
727
|
-
return
|
|
727
|
+
return ne(s);
|
|
728
728
|
}
|
|
729
|
-
function tt(
|
|
730
|
-
const t =
|
|
731
|
-
return t === e || !
|
|
729
|
+
function tt(o, e) {
|
|
730
|
+
const t = B(o);
|
|
731
|
+
return t === e || !A(t) || K(t) ? !1 : L(t).position === "fixed" || tt(t, e);
|
|
732
732
|
}
|
|
733
|
-
function Kt(
|
|
734
|
-
const t = e.get(
|
|
733
|
+
function Kt(o, e) {
|
|
734
|
+
const t = e.get(o);
|
|
735
735
|
if (t)
|
|
736
736
|
return t;
|
|
737
|
-
let
|
|
738
|
-
const r =
|
|
739
|
-
let
|
|
740
|
-
for (;
|
|
741
|
-
const
|
|
742
|
-
!l &&
|
|
737
|
+
let s = Z(o, [], !1).filter((n) => A(n) && q(n) !== "body"), i = null;
|
|
738
|
+
const r = L(o).position === "fixed";
|
|
739
|
+
let a = r ? B(o) : o;
|
|
740
|
+
for (; A(a) && !K(a); ) {
|
|
741
|
+
const n = L(a), l = Te(a);
|
|
742
|
+
!l && n.position === "fixed" && (i = null), (r ? !l && !i : !l && n.position === "static" && !!i && Ut.has(i.position) || ee(a) && !l && tt(o, a)) ? s = s.filter((h) => h !== a) : i = n, a = B(a);
|
|
743
743
|
}
|
|
744
|
-
return e.set(
|
|
744
|
+
return e.set(o, s), s;
|
|
745
745
|
}
|
|
746
|
-
function qt(
|
|
746
|
+
function qt(o) {
|
|
747
747
|
let {
|
|
748
748
|
element: e,
|
|
749
749
|
boundary: t,
|
|
750
|
-
rootBoundary:
|
|
750
|
+
rootBoundary: s,
|
|
751
751
|
strategy: i
|
|
752
|
-
} =
|
|
753
|
-
const
|
|
754
|
-
const p = He(e,
|
|
752
|
+
} = o;
|
|
753
|
+
const a = [...t === "clippingAncestors" ? he(e) ? [] : Kt(e, this._c) : [].concat(t), s], n = a[0], l = a.reduce((c, h) => {
|
|
754
|
+
const p = He(e, h, i);
|
|
755
755
|
return c.top = F(p.top, c.top), c.right = ie(p.right, c.right), c.bottom = ie(p.bottom, c.bottom), c.left = F(p.left, c.left), c;
|
|
756
|
-
}, He(e,
|
|
756
|
+
}, He(e, n, i));
|
|
757
757
|
return {
|
|
758
758
|
width: l.right - l.left,
|
|
759
759
|
height: l.bottom - l.top,
|
|
@@ -761,19 +761,19 @@ function qt(s) {
|
|
|
761
761
|
y: l.top
|
|
762
762
|
};
|
|
763
763
|
}
|
|
764
|
-
function Yt(
|
|
764
|
+
function Yt(o) {
|
|
765
765
|
const {
|
|
766
766
|
width: e,
|
|
767
767
|
height: t
|
|
768
|
-
} = Ze(
|
|
768
|
+
} = Ze(o);
|
|
769
769
|
return {
|
|
770
770
|
width: e,
|
|
771
771
|
height: t
|
|
772
772
|
};
|
|
773
773
|
}
|
|
774
|
-
function Jt(
|
|
775
|
-
const
|
|
776
|
-
let
|
|
774
|
+
function Jt(o, e, t) {
|
|
775
|
+
const s = E(e), i = z(e), r = t === "fixed", a = W(o, !0, r, e);
|
|
776
|
+
let n = {
|
|
777
777
|
scrollLeft: 0,
|
|
778
778
|
scrollTop: 0
|
|
779
779
|
};
|
|
@@ -781,63 +781,63 @@ function Jt(s, e, t) {
|
|
|
781
781
|
function c() {
|
|
782
782
|
l.x = pe(i);
|
|
783
783
|
}
|
|
784
|
-
if (
|
|
785
|
-
if ((q(e) !== "body" || ee(i)) && (
|
|
786
|
-
const
|
|
787
|
-
l.x =
|
|
784
|
+
if (s || !s && !r)
|
|
785
|
+
if ((q(e) !== "body" || ee(i)) && (n = me(e)), s) {
|
|
786
|
+
const m = W(e, !0, r, e);
|
|
787
|
+
l.x = m.x + e.clientLeft, l.y = m.y + e.clientTop;
|
|
788
788
|
} else i && c();
|
|
789
|
-
r && !
|
|
790
|
-
const
|
|
789
|
+
r && !s && i && c();
|
|
790
|
+
const h = i && !s && !r ? et(i, n) : M(0), p = a.left + n.scrollLeft - l.x - h.x, u = a.top + n.scrollTop - l.y - h.y;
|
|
791
791
|
return {
|
|
792
792
|
x: p,
|
|
793
793
|
y: u,
|
|
794
|
-
width:
|
|
795
|
-
height:
|
|
794
|
+
width: a.width,
|
|
795
|
+
height: a.height
|
|
796
796
|
};
|
|
797
797
|
}
|
|
798
|
-
function
|
|
799
|
-
return
|
|
798
|
+
function ge(o) {
|
|
799
|
+
return L(o).position === "static";
|
|
800
800
|
}
|
|
801
|
-
function Fe(
|
|
802
|
-
if (!E(
|
|
801
|
+
function Fe(o, e) {
|
|
802
|
+
if (!E(o) || L(o).position === "fixed")
|
|
803
803
|
return null;
|
|
804
804
|
if (e)
|
|
805
|
-
return e(
|
|
806
|
-
let t =
|
|
807
|
-
return z(
|
|
805
|
+
return e(o);
|
|
806
|
+
let t = o.offsetParent;
|
|
807
|
+
return z(o) === t && (t = t.ownerDocument.body), t;
|
|
808
808
|
}
|
|
809
|
-
function st(
|
|
810
|
-
const t = T(
|
|
811
|
-
if (
|
|
809
|
+
function st(o, e) {
|
|
810
|
+
const t = T(o);
|
|
811
|
+
if (he(o))
|
|
812
812
|
return t;
|
|
813
|
-
if (!E(
|
|
814
|
-
let i =
|
|
813
|
+
if (!E(o)) {
|
|
814
|
+
let i = B(o);
|
|
815
815
|
for (; i && !K(i); ) {
|
|
816
|
-
if (
|
|
816
|
+
if (A(i) && !ge(i))
|
|
817
817
|
return i;
|
|
818
|
-
i =
|
|
818
|
+
i = B(i);
|
|
819
819
|
}
|
|
820
820
|
return t;
|
|
821
821
|
}
|
|
822
|
-
let
|
|
823
|
-
for (;
|
|
824
|
-
|
|
825
|
-
return
|
|
822
|
+
let s = Fe(o, e);
|
|
823
|
+
for (; s && Mt(s) && ge(s); )
|
|
824
|
+
s = Fe(s, e);
|
|
825
|
+
return s && K(s) && ge(s) && !Te(s) ? t : s || Bt(o) || t;
|
|
826
826
|
}
|
|
827
|
-
const Xt = async function(
|
|
828
|
-
const e = this.getOffsetParent || st, t = this.getDimensions,
|
|
827
|
+
const Xt = async function(o) {
|
|
828
|
+
const e = this.getOffsetParent || st, t = this.getDimensions, s = await t(o.floating);
|
|
829
829
|
return {
|
|
830
|
-
reference: Jt(
|
|
830
|
+
reference: Jt(o.reference, await e(o.floating), o.strategy),
|
|
831
831
|
floating: {
|
|
832
832
|
x: 0,
|
|
833
833
|
y: 0,
|
|
834
|
-
width:
|
|
835
|
-
height:
|
|
834
|
+
width: s.width,
|
|
835
|
+
height: s.height
|
|
836
836
|
}
|
|
837
837
|
};
|
|
838
838
|
};
|
|
839
|
-
function Zt(
|
|
840
|
-
return
|
|
839
|
+
function Zt(o) {
|
|
840
|
+
return L(o).direction === "rtl";
|
|
841
841
|
}
|
|
842
842
|
const ot = {
|
|
843
843
|
convertOffsetParentRelativeRectToViewportRelativeRect: Ft,
|
|
@@ -847,109 +847,109 @@ const ot = {
|
|
|
847
847
|
getElementRects: Xt,
|
|
848
848
|
getClientRects: Nt,
|
|
849
849
|
getDimensions: Yt,
|
|
850
|
-
getScale:
|
|
851
|
-
isElement:
|
|
850
|
+
getScale: G,
|
|
851
|
+
isElement: A,
|
|
852
852
|
isRTL: Zt
|
|
853
853
|
};
|
|
854
|
-
function it(
|
|
855
|
-
return
|
|
854
|
+
function it(o, e) {
|
|
855
|
+
return o.x === e.x && o.y === e.y && o.width === e.width && o.height === e.height;
|
|
856
856
|
}
|
|
857
|
-
function Qt(
|
|
858
|
-
let t = null,
|
|
859
|
-
const i = z(
|
|
857
|
+
function Qt(o, e) {
|
|
858
|
+
let t = null, s;
|
|
859
|
+
const i = z(o);
|
|
860
860
|
function r() {
|
|
861
|
-
var
|
|
862
|
-
clearTimeout(
|
|
861
|
+
var n;
|
|
862
|
+
clearTimeout(s), (n = t) == null || n.disconnect(), t = null;
|
|
863
863
|
}
|
|
864
|
-
function n
|
|
865
|
-
|
|
866
|
-
const c =
|
|
867
|
-
left:
|
|
864
|
+
function a(n, l) {
|
|
865
|
+
n === void 0 && (n = !1), l === void 0 && (l = 1), r();
|
|
866
|
+
const c = o.getBoundingClientRect(), {
|
|
867
|
+
left: h,
|
|
868
868
|
top: p,
|
|
869
869
|
width: u,
|
|
870
|
-
height:
|
|
870
|
+
height: m
|
|
871
871
|
} = c;
|
|
872
|
-
if (
|
|
872
|
+
if (n || e(), !u || !m)
|
|
873
873
|
return;
|
|
874
|
-
const
|
|
875
|
-
rootMargin: -
|
|
874
|
+
const b = se(p), g = se(i.clientWidth - (h + u)), f = se(i.clientHeight - (p + m)), v = se(h), y = {
|
|
875
|
+
rootMargin: -b + "px " + -g + "px " + -f + "px " + -v + "px",
|
|
876
876
|
threshold: F(0, ie(1, l)) || 1
|
|
877
877
|
};
|
|
878
878
|
let C = !0;
|
|
879
|
-
function
|
|
879
|
+
function w(Y) {
|
|
880
880
|
const j = Y[0].intersectionRatio;
|
|
881
881
|
if (j !== l) {
|
|
882
882
|
if (!C)
|
|
883
|
-
return
|
|
884
|
-
j ?
|
|
885
|
-
|
|
883
|
+
return a();
|
|
884
|
+
j ? a(!1, j) : s = setTimeout(() => {
|
|
885
|
+
a(!1, 1e-7);
|
|
886
886
|
}, 1e3);
|
|
887
887
|
}
|
|
888
|
-
j === 1 && !it(c,
|
|
888
|
+
j === 1 && !it(c, o.getBoundingClientRect()) && a(), C = !1;
|
|
889
889
|
}
|
|
890
890
|
try {
|
|
891
|
-
t = new IntersectionObserver(
|
|
892
|
-
...
|
|
891
|
+
t = new IntersectionObserver(w, {
|
|
892
|
+
...y,
|
|
893
893
|
// Handle <iframe>s
|
|
894
894
|
root: i.ownerDocument
|
|
895
895
|
});
|
|
896
896
|
} catch {
|
|
897
|
-
t = new IntersectionObserver(
|
|
897
|
+
t = new IntersectionObserver(w, y);
|
|
898
898
|
}
|
|
899
|
-
t.observe(
|
|
899
|
+
t.observe(o);
|
|
900
900
|
}
|
|
901
|
-
return
|
|
901
|
+
return a(!0), r;
|
|
902
902
|
}
|
|
903
|
-
function _e(
|
|
904
|
-
|
|
903
|
+
function _e(o, e, t, s) {
|
|
904
|
+
s === void 0 && (s = {});
|
|
905
905
|
const {
|
|
906
906
|
ancestorScroll: i = !0,
|
|
907
907
|
ancestorResize: r = !0,
|
|
908
|
-
elementResize:
|
|
909
|
-
layoutShift:
|
|
908
|
+
elementResize: a = typeof ResizeObserver == "function",
|
|
909
|
+
layoutShift: n = typeof IntersectionObserver == "function",
|
|
910
910
|
animationFrame: l = !1
|
|
911
|
-
} =
|
|
912
|
-
|
|
911
|
+
} = s, c = Oe(o), h = i || r ? [...c ? Z(c) : [], ...Z(e)] : [];
|
|
912
|
+
h.forEach((v) => {
|
|
913
913
|
i && v.addEventListener("scroll", t, {
|
|
914
914
|
passive: !0
|
|
915
915
|
}), r && v.addEventListener("resize", t);
|
|
916
916
|
});
|
|
917
|
-
const p = c &&
|
|
918
|
-
let u = -1,
|
|
919
|
-
|
|
920
|
-
let [
|
|
921
|
-
|
|
922
|
-
var
|
|
923
|
-
(
|
|
917
|
+
const p = c && n ? Qt(c, t) : null;
|
|
918
|
+
let u = -1, m = null;
|
|
919
|
+
a && (m = new ResizeObserver((v) => {
|
|
920
|
+
let [k] = v;
|
|
921
|
+
k && k.target === c && m && (m.unobserve(e), cancelAnimationFrame(u), u = requestAnimationFrame(() => {
|
|
922
|
+
var y;
|
|
923
|
+
(y = m) == null || y.observe(e);
|
|
924
924
|
})), t();
|
|
925
|
-
}), c && !l &&
|
|
926
|
-
let
|
|
925
|
+
}), c && !l && m.observe(c), m.observe(e));
|
|
926
|
+
let b, g = l ? W(o) : null;
|
|
927
927
|
l && f();
|
|
928
928
|
function f() {
|
|
929
|
-
const v = W(
|
|
930
|
-
|
|
929
|
+
const v = W(o);
|
|
930
|
+
g && !it(g, v) && t(), g = v, b = requestAnimationFrame(f);
|
|
931
931
|
}
|
|
932
932
|
return t(), () => {
|
|
933
933
|
var v;
|
|
934
|
-
|
|
935
|
-
i &&
|
|
936
|
-
}), p == null || p(), (v =
|
|
934
|
+
h.forEach((k) => {
|
|
935
|
+
i && k.removeEventListener("scroll", t), r && k.removeEventListener("resize", t);
|
|
936
|
+
}), p == null || p(), (v = m) == null || v.disconnect(), m = null, l && cancelAnimationFrame(b);
|
|
937
937
|
};
|
|
938
938
|
}
|
|
939
|
-
const
|
|
940
|
-
const
|
|
939
|
+
const ke = Ot, ye = At, rt = St, we = (o, e, t) => {
|
|
940
|
+
const s = /* @__PURE__ */ new Map(), i = {
|
|
941
941
|
platform: ot,
|
|
942
942
|
...t
|
|
943
943
|
}, r = {
|
|
944
944
|
...i.platform,
|
|
945
|
-
_c:
|
|
945
|
+
_c: s
|
|
946
946
|
};
|
|
947
|
-
return Ct(
|
|
947
|
+
return Ct(o, e, {
|
|
948
948
|
...i,
|
|
949
949
|
platform: r
|
|
950
950
|
});
|
|
951
951
|
};
|
|
952
|
-
var
|
|
952
|
+
var at = function() {
|
|
953
953
|
}, O = "undefined", es = typeof window !== O && typeof window.navigator !== O && /Trident\/|MSIE /.test(window.navigator.userAgent), xe = [
|
|
954
954
|
"trace",
|
|
955
955
|
"debug",
|
|
@@ -957,69 +957,69 @@ var nt = function() {
|
|
|
957
957
|
"warn",
|
|
958
958
|
"error"
|
|
959
959
|
], Q = {}, _ = null;
|
|
960
|
-
function Ne(
|
|
961
|
-
var t =
|
|
960
|
+
function Ne(o, e) {
|
|
961
|
+
var t = o[e];
|
|
962
962
|
if (typeof t.bind == "function")
|
|
963
|
-
return t.bind(
|
|
963
|
+
return t.bind(o);
|
|
964
964
|
try {
|
|
965
|
-
return Function.prototype.bind.call(t,
|
|
965
|
+
return Function.prototype.bind.call(t, o);
|
|
966
966
|
} catch {
|
|
967
967
|
return function() {
|
|
968
|
-
return Function.prototype.apply.apply(t, [
|
|
968
|
+
return Function.prototype.apply.apply(t, [o, arguments]);
|
|
969
969
|
};
|
|
970
970
|
}
|
|
971
971
|
}
|
|
972
972
|
function ts() {
|
|
973
973
|
console.log && (console.log.apply ? console.log.apply(console, arguments) : Function.prototype.apply.apply(console.log, [console, arguments])), console.trace && console.trace();
|
|
974
974
|
}
|
|
975
|
-
function ss(
|
|
976
|
-
return
|
|
975
|
+
function ss(o) {
|
|
976
|
+
return o === "debug" && (o = "log"), typeof console === O ? !1 : o === "trace" && es ? ts : console[o] !== void 0 ? Ne(console, o) : console.log !== void 0 ? Ne(console, "log") : at;
|
|
977
977
|
}
|
|
978
978
|
function X() {
|
|
979
|
-
for (var
|
|
979
|
+
for (var o = this.getLevel(), e = 0; e < xe.length; e++) {
|
|
980
980
|
var t = xe[e];
|
|
981
|
-
this[t] = e <
|
|
981
|
+
this[t] = e < o ? at : this.methodFactory(t, o, this.name);
|
|
982
982
|
}
|
|
983
|
-
if (this.log = this.debug, typeof console === O &&
|
|
983
|
+
if (this.log = this.debug, typeof console === O && o < this.levels.SILENT)
|
|
984
984
|
return "No console available for logging";
|
|
985
985
|
}
|
|
986
|
-
function os(
|
|
986
|
+
function os(o) {
|
|
987
987
|
return function() {
|
|
988
|
-
typeof console !== O && (X.call(this), this[
|
|
988
|
+
typeof console !== O && (X.call(this), this[o].apply(this, arguments));
|
|
989
989
|
};
|
|
990
990
|
}
|
|
991
|
-
function is(
|
|
992
|
-
return ss(
|
|
991
|
+
function is(o, e, t) {
|
|
992
|
+
return ss(o) || os.apply(this, arguments);
|
|
993
993
|
}
|
|
994
|
-
function
|
|
995
|
-
var t = this,
|
|
996
|
-
typeof
|
|
997
|
-
function
|
|
998
|
-
var
|
|
999
|
-
if (!(typeof window === O || !
|
|
994
|
+
function nt(o, e) {
|
|
995
|
+
var t = this, s, i, r, a = "loglevel";
|
|
996
|
+
typeof o == "string" ? a += ":" + o : typeof o == "symbol" && (a = void 0);
|
|
997
|
+
function n(u) {
|
|
998
|
+
var m = (xe[u] || "silent").toUpperCase();
|
|
999
|
+
if (!(typeof window === O || !a)) {
|
|
1000
1000
|
try {
|
|
1001
|
-
window.localStorage[
|
|
1001
|
+
window.localStorage[a] = m;
|
|
1002
1002
|
return;
|
|
1003
1003
|
} catch {
|
|
1004
1004
|
}
|
|
1005
1005
|
try {
|
|
1006
|
-
window.document.cookie = encodeURIComponent(
|
|
1006
|
+
window.document.cookie = encodeURIComponent(a) + "=" + m + ";";
|
|
1007
1007
|
} catch {
|
|
1008
1008
|
}
|
|
1009
1009
|
}
|
|
1010
1010
|
}
|
|
1011
1011
|
function l() {
|
|
1012
1012
|
var u;
|
|
1013
|
-
if (!(typeof window === O || !
|
|
1013
|
+
if (!(typeof window === O || !a)) {
|
|
1014
1014
|
try {
|
|
1015
|
-
u = window.localStorage[
|
|
1015
|
+
u = window.localStorage[a];
|
|
1016
1016
|
} catch {
|
|
1017
1017
|
}
|
|
1018
1018
|
if (typeof u === O)
|
|
1019
1019
|
try {
|
|
1020
|
-
var
|
|
1021
|
-
|
|
1022
|
-
|
|
1020
|
+
var m = window.document.cookie, b = encodeURIComponent(a), g = m.indexOf(b + "=");
|
|
1021
|
+
g !== -1 && (u = /^([^;]+)/.exec(
|
|
1022
|
+
m.slice(g + b.length + 1)
|
|
1023
1023
|
)[1]);
|
|
1024
1024
|
} catch {
|
|
1025
1025
|
}
|
|
@@ -1027,24 +1027,24 @@ function at(s, e) {
|
|
|
1027
1027
|
}
|
|
1028
1028
|
}
|
|
1029
1029
|
function c() {
|
|
1030
|
-
if (!(typeof window === O || !
|
|
1030
|
+
if (!(typeof window === O || !a)) {
|
|
1031
1031
|
try {
|
|
1032
|
-
window.localStorage.removeItem(
|
|
1032
|
+
window.localStorage.removeItem(a);
|
|
1033
1033
|
} catch {
|
|
1034
1034
|
}
|
|
1035
1035
|
try {
|
|
1036
|
-
window.document.cookie = encodeURIComponent(
|
|
1036
|
+
window.document.cookie = encodeURIComponent(a) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
|
|
1037
1037
|
} catch {
|
|
1038
1038
|
}
|
|
1039
1039
|
}
|
|
1040
1040
|
}
|
|
1041
|
-
function
|
|
1042
|
-
var
|
|
1043
|
-
if (typeof
|
|
1044
|
-
return
|
|
1041
|
+
function h(u) {
|
|
1042
|
+
var m = u;
|
|
1043
|
+
if (typeof m == "string" && t.levels[m.toUpperCase()] !== void 0 && (m = t.levels[m.toUpperCase()]), typeof m == "number" && m >= 0 && m <= t.levels.SILENT)
|
|
1044
|
+
return m;
|
|
1045
1045
|
throw new TypeError("log.setLevel() called with invalid level: " + u);
|
|
1046
1046
|
}
|
|
1047
|
-
t.name =
|
|
1047
|
+
t.name = o, t.levels = {
|
|
1048
1048
|
TRACE: 0,
|
|
1049
1049
|
DEBUG: 1,
|
|
1050
1050
|
INFO: 2,
|
|
@@ -1052,11 +1052,11 @@ function at(s, e) {
|
|
|
1052
1052
|
ERROR: 4,
|
|
1053
1053
|
SILENT: 5
|
|
1054
1054
|
}, t.methodFactory = e || is, t.getLevel = function() {
|
|
1055
|
-
return r ?? i ??
|
|
1056
|
-
}, t.setLevel = function(u,
|
|
1057
|
-
return r =
|
|
1055
|
+
return r ?? i ?? s;
|
|
1056
|
+
}, t.setLevel = function(u, m) {
|
|
1057
|
+
return r = h(u), m !== !1 && n(r), X.call(t);
|
|
1058
1058
|
}, t.setDefaultLevel = function(u) {
|
|
1059
|
-
i =
|
|
1059
|
+
i = h(u), l() || t.setLevel(u, !1);
|
|
1060
1060
|
}, t.resetLevel = function() {
|
|
1061
1061
|
r = null, c(), X.call(t);
|
|
1062
1062
|
}, t.enableAll = function(u) {
|
|
@@ -1064,21 +1064,21 @@ function at(s, e) {
|
|
|
1064
1064
|
}, t.disableAll = function(u) {
|
|
1065
1065
|
t.setLevel(t.levels.SILENT, u);
|
|
1066
1066
|
}, t.rebuild = function() {
|
|
1067
|
-
if (_ !== t && (
|
|
1067
|
+
if (_ !== t && (s = h(_.getLevel())), X.call(t), _ === t)
|
|
1068
1068
|
for (var u in Q)
|
|
1069
1069
|
Q[u].rebuild();
|
|
1070
|
-
},
|
|
1070
|
+
}, s = h(
|
|
1071
1071
|
_ ? _.getLevel() : "WARN"
|
|
1072
1072
|
);
|
|
1073
1073
|
var p = l();
|
|
1074
|
-
p != null && (r =
|
|
1074
|
+
p != null && (r = h(p)), X.call(t);
|
|
1075
1075
|
}
|
|
1076
|
-
_ = new
|
|
1076
|
+
_ = new nt();
|
|
1077
1077
|
_.getLogger = function(e) {
|
|
1078
1078
|
if (typeof e != "symbol" && typeof e != "string" || e === "")
|
|
1079
1079
|
throw new TypeError("You must supply a name when creating a logger.");
|
|
1080
1080
|
var t = Q[e];
|
|
1081
|
-
return t || (t = Q[e] = new
|
|
1081
|
+
return t || (t = Q[e] = new nt(
|
|
1082
1082
|
e,
|
|
1083
1083
|
_.methodFactory
|
|
1084
1084
|
)), t;
|
|
@@ -1091,51 +1091,51 @@ _.getLoggers = function() {
|
|
|
1091
1091
|
return Q;
|
|
1092
1092
|
};
|
|
1093
1093
|
_.default = _;
|
|
1094
|
-
var
|
|
1095
|
-
for (var e = 1, t = arguments.length,
|
|
1096
|
-
for (
|
|
1097
|
-
Object.prototype.hasOwnProperty.call(arguments[e],
|
|
1098
|
-
return
|
|
1099
|
-
},
|
|
1094
|
+
var as = function(o) {
|
|
1095
|
+
for (var e = 1, t = arguments.length, s; e < t; e++)
|
|
1096
|
+
for (s in arguments[e])
|
|
1097
|
+
Object.prototype.hasOwnProperty.call(arguments[e], s) && (o[s] = arguments[e][s]);
|
|
1098
|
+
return o;
|
|
1099
|
+
}, ns = {
|
|
1100
1100
|
template: "[%t] %l:",
|
|
1101
|
-
levelFormatter: function(
|
|
1102
|
-
return
|
|
1101
|
+
levelFormatter: function(o) {
|
|
1102
|
+
return o.toUpperCase();
|
|
1103
1103
|
},
|
|
1104
|
-
nameFormatter: function(
|
|
1105
|
-
return
|
|
1104
|
+
nameFormatter: function(o) {
|
|
1105
|
+
return o || "root";
|
|
1106
1106
|
},
|
|
1107
|
-
timestampFormatter: function(
|
|
1108
|
-
return
|
|
1107
|
+
timestampFormatter: function(o) {
|
|
1108
|
+
return o.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
|
|
1109
1109
|
},
|
|
1110
1110
|
format: void 0
|
|
1111
|
-
}, lt, H = {}, ls = function(
|
|
1112
|
-
if (!
|
|
1111
|
+
}, lt, H = {}, ls = function(o) {
|
|
1112
|
+
if (!o || !o.getLogger)
|
|
1113
1113
|
throw new TypeError("Argument is not a root logger");
|
|
1114
|
-
lt =
|
|
1115
|
-
}, cs = function(
|
|
1116
|
-
if (!
|
|
1114
|
+
lt = o;
|
|
1115
|
+
}, cs = function(o, e) {
|
|
1116
|
+
if (!o || !o.setLevel)
|
|
1117
1117
|
throw new TypeError("Argument is not a logger");
|
|
1118
|
-
var t =
|
|
1119
|
-
function r(
|
|
1120
|
-
var c = t(
|
|
1118
|
+
var t = o.methodFactory, s = o.name || "", i = H[s] || H[""] || ns;
|
|
1119
|
+
function r(a, n, l) {
|
|
1120
|
+
var c = t(a, n, l), h = H[l] || H[""], p = h.template.indexOf("%t") !== -1, u = h.template.indexOf("%l") !== -1, m = h.template.indexOf("%n") !== -1;
|
|
1121
1121
|
return function() {
|
|
1122
|
-
for (var
|
|
1122
|
+
for (var b = "", g = arguments.length, f = Array(g), v = 0; v < g; v++)
|
|
1123
1123
|
f[v] = arguments[v];
|
|
1124
|
-
if (
|
|
1125
|
-
var
|
|
1126
|
-
|
|
1124
|
+
if (s || !H[l]) {
|
|
1125
|
+
var k = h.timestampFormatter(/* @__PURE__ */ new Date()), y = h.levelFormatter(a), C = h.nameFormatter(l);
|
|
1126
|
+
h.format ? b += h.format(y, C, k) : (b += h.template, p && (b = b.replace(/%t/, k)), u && (b = b.replace(/%l/, y)), m && (b = b.replace(/%n/, C))), f.length && typeof f[0] == "string" ? f[0] = b + " " + f[0] : f.unshift(b);
|
|
1127
1127
|
}
|
|
1128
1128
|
c.apply(void 0, f);
|
|
1129
1129
|
};
|
|
1130
1130
|
}
|
|
1131
|
-
return H[
|
|
1131
|
+
return H[s] || (o.methodFactory = r), e = e || {}, e.template && (e.format = void 0), H[s] = as({}, i, e), o.setLevel(o.getLevel()), lt || o.warn(
|
|
1132
1132
|
"It is necessary to call the function reg() of loglevel-plugin-prefix before calling apply. From the next release, it will throw an error. See more: https://github.com/kutuluk/loglevel-plugin-prefix/blob/master/README.md"
|
|
1133
|
-
),
|
|
1133
|
+
), o;
|
|
1134
1134
|
}, ds = {
|
|
1135
1135
|
reg: ls,
|
|
1136
1136
|
apply: cs
|
|
1137
1137
|
};
|
|
1138
|
-
const
|
|
1138
|
+
const hs = {
|
|
1139
1139
|
debug: "#0ea5e9",
|
|
1140
1140
|
// Blue
|
|
1141
1141
|
info: "#10b981",
|
|
@@ -1146,12 +1146,12 @@ const ms = {
|
|
|
1146
1146
|
// Red
|
|
1147
1147
|
};
|
|
1148
1148
|
ds.reg(_);
|
|
1149
|
-
const
|
|
1150
|
-
_.methodFactory = function(
|
|
1151
|
-
const
|
|
1152
|
-
return function(...
|
|
1153
|
-
const l =
|
|
1154
|
-
|
|
1149
|
+
const ms = (o) => o.toTimeString().split(" ")[0] + "." + o.getMilliseconds().toString().padStart(3, "0"), ps = _.methodFactory;
|
|
1150
|
+
_.methodFactory = function(o, e, t) {
|
|
1151
|
+
const s = ps(o, e, t), r = `color: ${hs[o] || "#666"}; font-weight: bold;`, a = "color: inherit;";
|
|
1152
|
+
return function(...n) {
|
|
1153
|
+
const l = ms(/* @__PURE__ */ new Date()), c = o.toUpperCase(), h = t ? `%c[${l}]%c %c[${c}]%c %c[${t}]%c` : `%c[${l}]%c %c[${c}]%c`;
|
|
1154
|
+
s(h, ...t ? [r, a, r, a, r, a] : [r, a, r, a], ...n);
|
|
1155
1155
|
};
|
|
1156
1156
|
};
|
|
1157
1157
|
typeof _.setDefaultLevel == "function" ? _.setDefaultLevel("silent") : _.setLevel("silent", !1);
|
|
@@ -1161,20 +1161,20 @@ const oe = _.getLogger("MULTISELECT:INIT"), x = _.getLogger("MULTISELECT:DATA"),
|
|
|
1161
1161
|
"MULTISELECT:UI",
|
|
1162
1162
|
"MULTISELECT:INTERACTION"
|
|
1163
1163
|
];
|
|
1164
|
-
function
|
|
1164
|
+
function Ae() {
|
|
1165
1165
|
typeof _.rebuild == "function" && _.rebuild();
|
|
1166
1166
|
}
|
|
1167
|
-
function gs() {
|
|
1168
|
-
_.setLevel("debug"), Le();
|
|
1169
|
-
}
|
|
1170
1167
|
function bs() {
|
|
1171
|
-
_.setLevel("
|
|
1168
|
+
_.setLevel("debug"), Ae();
|
|
1172
1169
|
}
|
|
1173
|
-
function
|
|
1174
|
-
_.setLevel(
|
|
1170
|
+
function gs() {
|
|
1171
|
+
_.setLevel("silent"), Ae();
|
|
1172
|
+
}
|
|
1173
|
+
function fs(o) {
|
|
1174
|
+
_.setLevel(o), Ae();
|
|
1175
1175
|
}
|
|
1176
|
-
function vs(
|
|
1177
|
-
const t =
|
|
1176
|
+
function vs(o, e) {
|
|
1177
|
+
const t = o.includes(":") ? o : `MULTISELECT:${o}`;
|
|
1178
1178
|
_.getLogger(t).setLevel(e);
|
|
1179
1179
|
}
|
|
1180
1180
|
class We {
|
|
@@ -1227,8 +1227,8 @@ class We {
|
|
|
1227
1227
|
* Calculate visible range based on scroll position
|
|
1228
1228
|
*/
|
|
1229
1229
|
calculateVisibleRange() {
|
|
1230
|
-
const e = Math.floor(this.scrollTop / this.itemHeight), t = Math.ceil((this.scrollTop + this.viewportHeight) / this.itemHeight),
|
|
1231
|
-
return { start:
|
|
1230
|
+
const e = Math.floor(this.scrollTop / this.itemHeight), t = Math.ceil((this.scrollTop + this.viewportHeight) / this.itemHeight), s = Math.max(0, e - this.bufferSize), i = Math.min(this.items.length, t + this.bufferSize);
|
|
1231
|
+
return { start: s, end: i };
|
|
1232
1232
|
}
|
|
1233
1233
|
/**
|
|
1234
1234
|
* Render visible items
|
|
@@ -1238,12 +1238,12 @@ class We {
|
|
|
1238
1238
|
if (e === this.visibleStart && t === this.visibleEnd)
|
|
1239
1239
|
return;
|
|
1240
1240
|
this.visibleStart = e, this.visibleEnd = t, this.onVisibleRangeChange && this.onVisibleRangeChange(e, t);
|
|
1241
|
-
let
|
|
1241
|
+
let s = "";
|
|
1242
1242
|
for (let i = e; i < t; i++) {
|
|
1243
|
-
const r = this.items[i],
|
|
1244
|
-
|
|
1243
|
+
const r = this.items[i], a = this.renderItem(r, i), n = i * this.itemHeight;
|
|
1244
|
+
s += `<div class="ms__virtual-item" style="position: absolute; top: ${n}px; left: 0; right: 0; height: ${this.itemHeight}px;" data-index="${i}">`, s += a, s += "</div>";
|
|
1245
1245
|
}
|
|
1246
|
-
this.viewport.innerHTML =
|
|
1246
|
+
this.viewport.innerHTML = s;
|
|
1247
1247
|
}
|
|
1248
1248
|
/**
|
|
1249
1249
|
* Update items and re-render
|
|
@@ -1259,8 +1259,8 @@ class We {
|
|
|
1259
1259
|
scrollToIndex(e) {
|
|
1260
1260
|
if (e < 0 || e >= this.items.length)
|
|
1261
1261
|
return;
|
|
1262
|
-
const t = e * this.itemHeight,
|
|
1263
|
-
t < i ? this.container.scrollTop = t :
|
|
1262
|
+
const t = e * this.itemHeight, s = t + this.itemHeight, i = this.container.scrollTop, r = i + this.viewportHeight;
|
|
1263
|
+
t < i ? this.container.scrollTop = t : s > r && (this.container.scrollTop = s - this.viewportHeight);
|
|
1264
1264
|
}
|
|
1265
1265
|
/**
|
|
1266
1266
|
* Get currently visible range
|
|
@@ -1330,18 +1330,18 @@ class _s {
|
|
|
1330
1330
|
show() {
|
|
1331
1331
|
var e;
|
|
1332
1332
|
(e = this.onBeforeShow) == null || e.call(this), this.element.classList.add(this.visibleClass), this.positionCleanup && this.positionCleanup(), this.positionCleanup = _e(this.trigger, this.element, () => {
|
|
1333
|
-
|
|
1333
|
+
we(this.trigger, this.element, {
|
|
1334
1334
|
placement: this.placement,
|
|
1335
1335
|
strategy: "fixed",
|
|
1336
1336
|
middleware: [
|
|
1337
|
-
|
|
1337
|
+
ke(this.offsetDistance),
|
|
1338
1338
|
rt(),
|
|
1339
|
-
|
|
1339
|
+
ye({ padding: 8 })
|
|
1340
1340
|
]
|
|
1341
|
-
}).then(({ x: t, y:
|
|
1341
|
+
}).then(({ x: t, y: s }) => {
|
|
1342
1342
|
Object.assign(this.element.style, {
|
|
1343
1343
|
left: `${t}px`,
|
|
1344
|
-
top: `${
|
|
1344
|
+
top: `${s}px`
|
|
1345
1345
|
});
|
|
1346
1346
|
});
|
|
1347
1347
|
});
|
|
@@ -1357,37 +1357,37 @@ class _s {
|
|
|
1357
1357
|
this.showTimer !== null && clearTimeout(this.showTimer), this.hideTimer !== null && clearTimeout(this.hideTimer), this.showTimer = null, this.hideTimer = null, this.positionCleanup && (this.positionCleanup(), this.positionCleanup = null), this.trigger.removeEventListener("mouseenter", this.handleMouseEnter), this.trigger.removeEventListener("mouseleave", this.handleMouseLeave), this.element.remove();
|
|
1358
1358
|
}
|
|
1359
1359
|
}
|
|
1360
|
-
function
|
|
1361
|
-
let e =
|
|
1360
|
+
function ks(o) {
|
|
1361
|
+
let e = o;
|
|
1362
1362
|
for (; e && !(e === document.body || e === document.documentElement); ) {
|
|
1363
1363
|
if (e instanceof Element) {
|
|
1364
|
-
const
|
|
1365
|
-
if (
|
|
1366
|
-
const i =
|
|
1367
|
-
if (i && i !== "none" ||
|
|
1364
|
+
const s = getComputedStyle(e);
|
|
1365
|
+
if (s.transform !== "none" || s.perspective !== "none" || s.filter !== "none") return e;
|
|
1366
|
+
const i = s.backdropFilter;
|
|
1367
|
+
if (i && i !== "none" || s.willChange && /\b(transform|filter|perspective)\b/.test(s.willChange)) return e;
|
|
1368
1368
|
}
|
|
1369
1369
|
const t = e.parentNode;
|
|
1370
1370
|
e = t instanceof ShadowRoot ? t.host : t;
|
|
1371
1371
|
}
|
|
1372
1372
|
return window;
|
|
1373
1373
|
}
|
|
1374
|
-
function
|
|
1375
|
-
let
|
|
1376
|
-
for (;
|
|
1377
|
-
if (
|
|
1378
|
-
const r =
|
|
1379
|
-
if (Math.abs(r.x - e) < 2 && Math.abs(r.y - t) < 2) return
|
|
1374
|
+
function ys(o, e, t) {
|
|
1375
|
+
let s = o;
|
|
1376
|
+
for (; s && !(s === document.body || s === document.documentElement); ) {
|
|
1377
|
+
if (s instanceof Element) {
|
|
1378
|
+
const r = s.getBoundingClientRect();
|
|
1379
|
+
if (Math.abs(r.x - e) < 2 && Math.abs(r.y - t) < 2) return s;
|
|
1380
1380
|
}
|
|
1381
|
-
const i =
|
|
1382
|
-
|
|
1381
|
+
const i = s.parentNode;
|
|
1382
|
+
s = i instanceof ShadowRoot ? i.host : i;
|
|
1383
1383
|
}
|
|
1384
1384
|
return null;
|
|
1385
1385
|
}
|
|
1386
|
-
function
|
|
1387
|
-
const e = getComputedStyle(
|
|
1386
|
+
function ws(o) {
|
|
1387
|
+
const e = getComputedStyle(o), t = [];
|
|
1388
1388
|
e.transform !== "none" && t.push(`transform: ${e.transform}`), e.perspective !== "none" && t.push(`perspective: ${e.perspective}`), e.filter !== "none" && t.push(`filter: ${e.filter}`);
|
|
1389
|
-
const
|
|
1390
|
-
return
|
|
1389
|
+
const s = e.backdropFilter;
|
|
1390
|
+
return s && s !== "none" && t.push(`backdrop-filter: ${s}`), e.willChange && /\b(transform|filter|perspective)\b/.test(e.willChange) && t.push(`will-change: ${e.willChange}`), e.contain && /\b(paint|layout|strict|content)\b/.test(e.contain) && t.push(`contain: ${e.contain}`), e.containerType && e.containerType !== "normal" && t.push(`container-type: ${e.containerType}`), t.join("; ");
|
|
1391
1391
|
}
|
|
1392
1392
|
class xs {
|
|
1393
1393
|
constructor(e, t = {}) {
|
|
@@ -1404,6 +1404,8 @@ class xs {
|
|
|
1404
1404
|
d(this, "matchingIndices", /* @__PURE__ */ new Set());
|
|
1405
1405
|
d(this, "searchTerm", "");
|
|
1406
1406
|
d(this, "isLoading", !1);
|
|
1407
|
+
d(this, "searchDebounceTimer");
|
|
1408
|
+
d(this, "searchAbortController");
|
|
1407
1409
|
d(this, "showSelectedPopover", !1);
|
|
1408
1410
|
d(this, "selectedPopoverPlacement", null);
|
|
1409
1411
|
d(this, "dropdownPlacement", null);
|
|
@@ -1437,6 +1439,8 @@ class xs {
|
|
|
1437
1439
|
// String options
|
|
1438
1440
|
searchHint: e.dataset.searchHint || "",
|
|
1439
1441
|
searchPlaceholder: e.dataset.searchPlaceholder || "Search...",
|
|
1442
|
+
selectPlaceholder: e.dataset.selectPlaceholder || "Pick an option...",
|
|
1443
|
+
noDataPlaceholder: e.dataset.noDataPlaceholder || void 0,
|
|
1440
1444
|
dropdownMinWidth: e.dataset.dropdownMinWidth || void 0,
|
|
1441
1445
|
dropdownMaxWidth: e.dataset.dropdownMaxWidth || void 0,
|
|
1442
1446
|
badgesDisplayMode: e.dataset.badgesDisplayMode || "badges",
|
|
@@ -1450,6 +1454,7 @@ class xs {
|
|
|
1450
1454
|
// Number options
|
|
1451
1455
|
badgesThreshold: e.dataset.badgesThreshold ? parseInt(e.dataset.badgesThreshold) : void 0,
|
|
1452
1456
|
minSearchLength: parseInt(e.dataset.minSearchLength || "0") || 0,
|
|
1457
|
+
searchDebounce: parseInt(e.dataset.searchDebounce || "0") || 0,
|
|
1453
1458
|
// Boolean options (internal names with 'is' prefix)
|
|
1454
1459
|
isMultipleEnabled: e.dataset.multiple !== "false",
|
|
1455
1460
|
isGroupsAllowed: e.dataset.allowGroups !== "false",
|
|
@@ -1589,21 +1594,21 @@ class xs {
|
|
|
1589
1594
|
this.filteredOptions = [...this.allOptions];
|
|
1590
1595
|
}
|
|
1591
1596
|
buildHTML() {
|
|
1592
|
-
const e = this.options.container || document.body, t = this.element.getRootNode(),
|
|
1597
|
+
const e = this.options.container || document.body, t = this.element.getRootNode(), s = t instanceof ShadowRoot ? t.host : this.element, i = s.getAttribute("dir") === "rtl", r = s.closest('[dir="rtl"]') !== null;
|
|
1593
1598
|
this.isRTL = i || r, oe.debug(`[${this.instanceId}] RTL Debug:`, {
|
|
1594
1599
|
isShadowRoot: t instanceof ShadowRoot,
|
|
1595
|
-
hostElement:
|
|
1596
|
-
elementDir:
|
|
1600
|
+
hostElement: s,
|
|
1601
|
+
elementDir: s.getAttribute("dir"),
|
|
1597
1602
|
hasElementDir: i,
|
|
1598
1603
|
hasAncestorDir: r,
|
|
1599
1604
|
isRTL: this.isRTL
|
|
1600
1605
|
}), this.effectiveBadgesPosition = this.options.badgesPosition || "bottom", this.isRTL && (this.effectiveBadgesPosition === "left" ? this.effectiveBadgesPosition = "right" : this.effectiveBadgesPosition === "right" && (this.effectiveBadgesPosition = "left")), this.element.classList.add("ms"), this.isRTL && (this.element.classList.add("ms--rtl"), oe.debug(`[${this.instanceId}] Added ms--rtl class to element`)), (!this.options.isCheckboxesShown || !this.options.isMultipleEnabled) && this.element.classList.add("ms--no-checkboxes");
|
|
1601
|
-
const
|
|
1602
|
-
|
|
1603
|
-
const
|
|
1604
|
-
|
|
1606
|
+
const a = document.createElement("div");
|
|
1607
|
+
a.className = "ms__input-wrapper", this.input = document.createElement("input"), this.input.type = "text", this.input.className = "ms__input", this.input.placeholder = this.getPlaceholderText(), this.input.autocomplete = "off", this.options.searchInputMode === "readonly" ? this.input.readOnly = !0 : this.options.searchInputMode === "hidden" && (this.input.style.display = "none");
|
|
1608
|
+
const n = document.createElement("span");
|
|
1609
|
+
n.className = "ms__toggle", n.innerHTML = "▼", this.counter = document.createElement("span"), this.counter.className = "ms__counter", this.counter.style.display = "none", a.appendChild(this.input), a.appendChild(this.counter), a.appendChild(n), this.badgesContainer = document.createElement("div"), this.badgesContainer.className = "ms__badges";
|
|
1605
1610
|
const l = document.createElement("div");
|
|
1606
|
-
l.className = "ms__wrapper", (this.effectiveBadgesPosition === "left" || this.effectiveBadgesPosition === "right") && l.classList.add("ms__wrapper--inline"), l.appendChild(
|
|
1611
|
+
l.className = "ms__wrapper", (this.effectiveBadgesPosition === "left" || this.effectiveBadgesPosition === "right") && l.classList.add("ms__wrapper--inline"), l.appendChild(a), l.appendChild(this.badgesContainer), this.element.appendChild(l), this.dropdown = document.createElement("div"), this.dropdown.className = "ms__dropdown", this.dropdownInner = document.createElement("div"), this.dropdownInner.className = "ms__dropdown-inner", this.dropdown.appendChild(this.dropdownInner), e.appendChild(this.dropdown), this.options.searchHint && (this.hint = document.createElement("div"), this.hint.className = "ms__hint", this.hint.textContent = this.options.searchHint, e.appendChild(this.hint)), this.selectedPopover = document.createElement("div"), this.selectedPopover.className = "ms__selected-popover", e.appendChild(this.selectedPopover), this.renderDropdown();
|
|
1607
1612
|
}
|
|
1608
1613
|
/**
|
|
1609
1614
|
* Check if virtual scroll should be used
|
|
@@ -1636,25 +1641,25 @@ class xs {
|
|
|
1636
1641
|
if (e += this.renderActionsHTML(), e += '<div class="ms__options">', this.filteredOptions.length === 0)
|
|
1637
1642
|
e += `<div class="ms__empty">${this.options.emptyMessage}</div>`;
|
|
1638
1643
|
else if (this.options.isGroupsAllowed) {
|
|
1639
|
-
const t = this.groupOptions(this.filteredOptions),
|
|
1640
|
-
this.filteredOptions.forEach((i, r) =>
|
|
1644
|
+
const t = this.groupOptions(this.filteredOptions), s = /* @__PURE__ */ new Map();
|
|
1645
|
+
this.filteredOptions.forEach((i, r) => s.set(i, r)), Object.keys(t).forEach((i) => {
|
|
1641
1646
|
if (e += '<div class="ms__group">', i !== "__ungrouped__")
|
|
1642
1647
|
if (this.options.renderGroupLabelContentCallback) {
|
|
1643
1648
|
const r = this.options.renderGroupLabelContentCallback(i);
|
|
1644
1649
|
if (r instanceof HTMLElement) {
|
|
1645
|
-
const
|
|
1646
|
-
|
|
1650
|
+
const a = document.createElement("div");
|
|
1651
|
+
a.className = "ms__group-label", a.appendChild(r), e += a.outerHTML;
|
|
1647
1652
|
} else
|
|
1648
1653
|
e += `<div class="ms__group-label">${r}</div>`;
|
|
1649
1654
|
} else
|
|
1650
1655
|
e += `<div class="ms__group-label">${i}</div>`;
|
|
1651
1656
|
t[i].forEach((r) => {
|
|
1652
|
-
e += this.renderOption(r,
|
|
1657
|
+
e += this.renderOption(r, s.get(r) ?? -1);
|
|
1653
1658
|
}), e += "</div>";
|
|
1654
1659
|
});
|
|
1655
1660
|
} else
|
|
1656
|
-
this.filteredOptions.forEach((t,
|
|
1657
|
-
e += this.renderOption(t,
|
|
1661
|
+
this.filteredOptions.forEach((t, s) => {
|
|
1662
|
+
e += this.renderOption(t, s);
|
|
1658
1663
|
});
|
|
1659
1664
|
e += "</div>", this.dropdownInner.innerHTML = e, this.attachActionButtonTooltips();
|
|
1660
1665
|
}
|
|
@@ -1663,10 +1668,10 @@ class xs {
|
|
|
1663
1668
|
*/
|
|
1664
1669
|
renderDropdownVirtual() {
|
|
1665
1670
|
if (this.destroyAllActionButtonTooltips(), !this.virtualScroll) {
|
|
1666
|
-
let
|
|
1667
|
-
|
|
1671
|
+
let s = "";
|
|
1672
|
+
s += this.renderActionsHTML();
|
|
1668
1673
|
const i = this.options.maxHeight || "20rem", r = this.options.optionHeight ?? 50;
|
|
1669
|
-
|
|
1674
|
+
s += `<div class="ms__options ms__options--virtual" style="height: ${i}; max-height: ${i}; overflow-y: auto; position: relative; --ms-option-height: ${r}px;"></div>`, this.dropdownInner.innerHTML = s, this.optionsContainer = this.dropdownInner.querySelector(".ms__options");
|
|
1670
1675
|
}
|
|
1671
1676
|
if (this.filteredOptions.length === 0) {
|
|
1672
1677
|
this.virtualScroll && (this.virtualScroll.destroy(), this.virtualScroll = null), this.optionsContainer.innerHTML = `<div class="ms__empty">${this.options.emptyMessage}</div>`;
|
|
@@ -1678,7 +1683,7 @@ class xs {
|
|
|
1678
1683
|
container: this.optionsContainer,
|
|
1679
1684
|
itemHeight: e,
|
|
1680
1685
|
items: this.filteredOptions,
|
|
1681
|
-
renderItem: (
|
|
1686
|
+
renderItem: (s, i) => this.renderOption(s, i),
|
|
1682
1687
|
bufferSize: t
|
|
1683
1688
|
}), this.attachActionButtonTooltips());
|
|
1684
1689
|
});
|
|
@@ -1690,48 +1695,60 @@ class xs {
|
|
|
1690
1695
|
renderActionsHTML() {
|
|
1691
1696
|
const e = this.options.actionButtons;
|
|
1692
1697
|
if (!this.options.isMultipleEnabled || !e || e.length === 0) return "";
|
|
1693
|
-
const t = this.options.isActionsSticky ? " ms__actions--sticky" : "",
|
|
1698
|
+
const t = this.options.isActionsSticky ? " ms__actions--sticky" : "", s = this.options.actionsLayout === "wrap" ? " ms__actions--wrap" : "", i = e.map((r, a) => {
|
|
1694
1699
|
if (!(r.isVisibleCallback ? r.isVisibleCallback(this) : r.isVisible ?? !0)) return "";
|
|
1695
|
-
const c = (r.isDisabledCallback ? r.isDisabledCallback(this) : r.isDisabled ?? !1) ? " disabled" : "",
|
|
1700
|
+
const c = (r.isDisabledCallback ? r.isDisabledCallback(this) : r.isDisabled ?? !1) ? " disabled" : "", h = r.getTextCallback ? r.getTextCallback(this) : r.text;
|
|
1696
1701
|
let p = "";
|
|
1697
1702
|
if (r.getClassCallback) {
|
|
1698
1703
|
const u = r.getClassCallback(this);
|
|
1699
1704
|
p = Array.isArray(u) ? ` ${u.join(" ")}` : u ? ` ${u}` : "";
|
|
1700
1705
|
} else r.cssClass && (p = ` ${r.cssClass}`);
|
|
1701
|
-
return `<button type="button"${c} class="ms__action-btn${p}" data-action="${r.action}" data-button-index="${
|
|
1706
|
+
return `<button type="button"${c} class="ms__action-btn${p}" data-action="${r.action}" data-button-index="${a}">${h}</button>`;
|
|
1702
1707
|
}).join("");
|
|
1703
|
-
return `<div class="ms__actions${t}${
|
|
1708
|
+
return `<div class="ms__actions${t}${s}">${i}</div>`;
|
|
1704
1709
|
}
|
|
1705
1710
|
renderOption(e, t) {
|
|
1706
|
-
const
|
|
1707
|
-
l && p.push("ms__option--selected"), c && p.push("ms__option--focused"),
|
|
1711
|
+
const s = this.getItemValue(e), i = this.getItemDisplayValue(e), r = this.getItemIcon(e), a = this.getItemSubtitle(e), n = this.getItemDisabled(e), l = this.selectedValues.has(String(s)), c = t === this.focusedIndex, h = this.matchingIndices.has(t), p = ["ms__option"];
|
|
1712
|
+
l && p.push("ms__option--selected"), c && p.push("ms__option--focused"), h && p.push("ms__option--matched"), n && p.push("ms__option--disabled");
|
|
1708
1713
|
const u = this.options.checkboxAlign && this.options.checkboxAlign !== "center" ? ` data-checkbox-align="${this.options.checkboxAlign}"` : "";
|
|
1709
|
-
let
|
|
1710
|
-
if (this.options.isCheckboxesShown && this.options.isMultipleEnabled && (
|
|
1711
|
-
const
|
|
1714
|
+
let m = `<div class="${p.join(" ")}" data-value="${s}" data-index="${t}"${u}>`;
|
|
1715
|
+
if (this.options.isCheckboxesShown && this.options.isMultipleEnabled && (m += `<input type="checkbox" class="ms__checkbox" ${l ? "checked" : ""} ${n ? "disabled" : ""}>`), m += '<div class="ms__option-content">', this.options.renderOptionContentCallback) {
|
|
1716
|
+
const b = {
|
|
1712
1717
|
index: t,
|
|
1713
1718
|
isSelected: l,
|
|
1714
1719
|
isFocused: c,
|
|
1715
|
-
isMatched:
|
|
1716
|
-
isDisabled:
|
|
1717
|
-
},
|
|
1718
|
-
typeof
|
|
1720
|
+
isMatched: h,
|
|
1721
|
+
isDisabled: n
|
|
1722
|
+
}, g = this.options.renderOptionContentCallback(e, b);
|
|
1723
|
+
typeof g == "string" ? m += g : m += g.outerHTML;
|
|
1719
1724
|
} else
|
|
1720
|
-
r && (
|
|
1721
|
-
return
|
|
1725
|
+
r && (m += `<span class="ms__option-icon">${r}</span>`), m += '<div class="ms__option-text">', m += `<div class="ms__option-title">${this.highlightMatch(i, this.searchTerm)}</div>`, a && (m += `<div class="ms__option-subtitle">${a}</div>`), m += "</div>";
|
|
1726
|
+
return m += "</div>", m += "</div>", m;
|
|
1722
1727
|
}
|
|
1723
1728
|
highlightMatch(e, t) {
|
|
1724
1729
|
if (!t) return e;
|
|
1725
|
-
const
|
|
1726
|
-
return e.replace(
|
|
1730
|
+
const s = new RegExp(`(${t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
|
|
1731
|
+
return e.replace(s, "<mark>$1</mark>");
|
|
1727
1732
|
}
|
|
1728
1733
|
groupOptions(e) {
|
|
1729
1734
|
const t = {};
|
|
1730
|
-
return e.forEach((
|
|
1731
|
-
const i = this.getItemGroup(
|
|
1732
|
-
t[i] || (t[i] = []), t[i].push(
|
|
1735
|
+
return e.forEach((s) => {
|
|
1736
|
+
const i = this.getItemGroup(s) || "__ungrouped__";
|
|
1737
|
+
t[i] || (t[i] = []), t[i].push(s);
|
|
1733
1738
|
}), t;
|
|
1734
1739
|
}
|
|
1740
|
+
/** Whether the input currently functions as a usable search field (drives placeholder wording). */
|
|
1741
|
+
get isSearchUsable() {
|
|
1742
|
+
return !!this.options.isSearchEnabled && this.options.searchInputMode !== "readonly" && this.options.searchInputMode !== "hidden";
|
|
1743
|
+
}
|
|
1744
|
+
/**
|
|
1745
|
+
* Resolve the closed-state input placeholder for the current data/search state.
|
|
1746
|
+
* Priority: explicit no-data placeholder (when the list is empty) → "pick" prompt when
|
|
1747
|
+
* search is unusable → the search placeholder.
|
|
1748
|
+
*/
|
|
1749
|
+
getPlaceholderText() {
|
|
1750
|
+
return this.options.noDataPlaceholder && this.allOptions.length === 0 ? this.options.noDataPlaceholder : this.isSearchUsable ? this.options.searchPlaceholder : this.options.selectPlaceholder || this.options.searchPlaceholder;
|
|
1751
|
+
}
|
|
1735
1752
|
renderBadges() {
|
|
1736
1753
|
this.destroyAllBadgeTooltips();
|
|
1737
1754
|
const e = Array.from(this.selectedOptions.values()), t = this.selectedValues.size;
|
|
@@ -1741,36 +1758,36 @@ class xs {
|
|
|
1741
1758
|
e[0] && (this.options.renderSelectedContentCallback ? r = this.options.renderSelectedContentCallback(e[0]) : r = this.getItemDisplayValue(e[0])), !this.isOpen && t > 0 && e.length > 0 ? this.input.value = r : this.isOpen || (this.input.value = "");
|
|
1742
1759
|
return;
|
|
1743
1760
|
}
|
|
1744
|
-
let
|
|
1745
|
-
if (this.options.badgesThreshold !== null && t > this.options.badgesThreshold &&
|
|
1746
|
-
if (t > 0 &&
|
|
1761
|
+
let s = this.options.badgesDisplayMode;
|
|
1762
|
+
if (this.options.badgesThreshold !== null && t > this.options.badgesThreshold && s !== "none" && (s = this.options.badgesThresholdMode || "count"), !this.isOpen)
|
|
1763
|
+
if (t > 0 && s === "count") {
|
|
1747
1764
|
const r = this.options.getCounterCallback ? this.options.getCounterCallback(t) : `${t} selected`;
|
|
1748
1765
|
this.input.placeholder = r;
|
|
1749
1766
|
} else
|
|
1750
|
-
this.input.placeholder = this.
|
|
1751
|
-
if (this.options.isCounterShown && t > 0 ? (this.counter.textContent = `[${t}]`, this.counter.style.display = "") : this.counter.style.display = "none",
|
|
1767
|
+
this.input.placeholder = this.getPlaceholderText();
|
|
1768
|
+
if (this.options.isCounterShown && t > 0 ? (this.counter.textContent = `[${t}]`, this.counter.style.display = "") : this.counter.style.display = "none", s === "none") {
|
|
1752
1769
|
this.badgesContainer.innerHTML = "";
|
|
1753
1770
|
return;
|
|
1754
1771
|
}
|
|
1755
|
-
if (
|
|
1772
|
+
if (s === "badges")
|
|
1756
1773
|
this.badgesContainer.className = `ms__badges ms__badges--${this.effectiveBadgesPosition}`, this.badgesContainer.innerHTML = e.map((r) => this.renderBadgeHTML(r, { displayMode: "badges", isInPopover: !1 })).join("");
|
|
1757
|
-
else if (
|
|
1774
|
+
else if (s === "partial") {
|
|
1758
1775
|
this.badgesContainer.className = `ms__badges ms__badges--${this.effectiveBadgesPosition}`;
|
|
1759
|
-
const r = this.options.badgesMaxVisible || 3,
|
|
1776
|
+
const r = this.options.badgesMaxVisible || 3, a = e.slice(0, r), n = t - r, l = a.map((h) => this.renderBadgeHTML(h, { displayMode: "partial", isInPopover: !1 })).join("");
|
|
1760
1777
|
let c = "";
|
|
1761
|
-
|
|
1778
|
+
n > 0 && (c = `
|
|
1762
1779
|
<div class="ms__badge ms__badge--counter ms__badge--more" data-action="show-selected">
|
|
1763
|
-
<span class="ms__badge-text">${this.options.getCounterCallback ? this.options.getCounterCallback(t,
|
|
1764
|
-
<button type="button" class="ms__badge-remove" data-action="remove-hidden" aria-label="Remove ${
|
|
1780
|
+
<span class="ms__badge-text">${this.options.getCounterCallback ? this.options.getCounterCallback(t, n) : `+${n} more`}</span>
|
|
1781
|
+
<button type="button" class="ms__badge-remove" data-action="remove-hidden" aria-label="Remove ${n} hidden items"></button>
|
|
1765
1782
|
</div>
|
|
1766
1783
|
`), this.badgesContainer.innerHTML = l + c;
|
|
1767
|
-
} else if (
|
|
1784
|
+
} else if (s === "compact")
|
|
1768
1785
|
if (this.badgesContainer.className = `ms__badges ms__badges--${this.effectiveBadgesPosition}`, t > 0) {
|
|
1769
|
-
const r = e[0],
|
|
1770
|
-
let l =
|
|
1771
|
-
if (
|
|
1772
|
-
const c = this.options.getCounterCallback ? this.options.getCounterCallback(t,
|
|
1773
|
-
l = `${
|
|
1786
|
+
const r = e[0], a = this.getItemBadgeDisplayValue(r), n = t - 1;
|
|
1787
|
+
let l = a;
|
|
1788
|
+
if (n > 0) {
|
|
1789
|
+
const c = this.options.getCounterCallback ? this.options.getCounterCallback(t, n) : `+${n} more`;
|
|
1790
|
+
l = `${a} (${c})`;
|
|
1774
1791
|
}
|
|
1775
1792
|
this.badgesContainer.innerHTML = `
|
|
1776
1793
|
<div class="ms__badge" data-action="show-selected">
|
|
@@ -1809,8 +1826,8 @@ class xs {
|
|
|
1809
1826
|
}, document.addEventListener("keydown", this.documentKeydownHandler), this.dropdown.addEventListener("click", (e) => this.handleDropdownClick(e)), this.dropdownInner.addEventListener("wheel", (e) => {
|
|
1810
1827
|
if (this.virtualScroll)
|
|
1811
1828
|
return;
|
|
1812
|
-
const t = e.currentTarget,
|
|
1813
|
-
(e.deltaY < 0 &&
|
|
1829
|
+
const t = e.currentTarget, s = t.scrollTop === 0, i = t.scrollTop + t.clientHeight >= t.scrollHeight;
|
|
1830
|
+
(e.deltaY < 0 && s || e.deltaY > 0 && i) && e.preventDefault(), e.stopPropagation();
|
|
1814
1831
|
}, { passive: !1 }), this.badgesContainer.addEventListener("mousedown", (e) => {
|
|
1815
1832
|
e.target.closest('[data-action="show-selected"]') && !this.showSelectedPopover && e.stopPropagation();
|
|
1816
1833
|
}), this.badgesContainer.addEventListener("click", (e) => this.handleBadgeClick(e)), this.counter.addEventListener("mousedown", (e) => {
|
|
@@ -1824,54 +1841,80 @@ class xs {
|
|
|
1824
1841
|
return;
|
|
1825
1842
|
let t = e;
|
|
1826
1843
|
if (this.options.beforeSearchCallback) {
|
|
1827
|
-
const
|
|
1828
|
-
if (
|
|
1829
|
-
x.debug(`[${this.instanceId}] beforeSearchCallback blocked search for term:`, e), this.filteredOptions = [...this.allOptions], this.matchingIndices.clear(), this.renderDropdown();
|
|
1844
|
+
const s = this.options.beforeSearchCallback(e);
|
|
1845
|
+
if (s === null) {
|
|
1846
|
+
x.debug(`[${this.instanceId}] beforeSearchCallback blocked search for term:`, e), this.abortInFlightSearch(), this.filteredOptions = [...this.allOptions], this.matchingIndices.clear(), this.renderDropdown();
|
|
1830
1847
|
return;
|
|
1831
1848
|
}
|
|
1832
|
-
t =
|
|
1849
|
+
t = s, t !== e && x.debug(`[${this.instanceId}] beforeSearchCallback transformed: "${e}" -> "${t}"`);
|
|
1833
1850
|
}
|
|
1834
1851
|
if (this.options.searchCallback) {
|
|
1835
1852
|
if (t.length < this.options.minSearchLength) {
|
|
1836
|
-
this.isLoading = !1, this.options.isKeepOptionsOnSearch ? (this.filteredOptions = [...this.allOptions], x.debug(`[${this.instanceId}] Search term below minimum, showing ${this.allOptions.length} initial options`)) : this.filteredOptions = [], this.matchingIndices.clear(), this.renderDropdown();
|
|
1853
|
+
this.abortInFlightSearch(), this.isLoading = !1, this.options.isKeepOptionsOnSearch ? (this.filteredOptions = [...this.allOptions], x.debug(`[${this.instanceId}] Search term below minimum, showing ${this.allOptions.length} initial options`)) : this.filteredOptions = [], this.matchingIndices.clear(), this.renderDropdown();
|
|
1837
1854
|
return;
|
|
1838
1855
|
}
|
|
1839
|
-
this.
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
this.filteredOptions = [...i], this.isLoading = !1, this.matchingIndices.clear(), this.focusedIndex = this.options.isSearchEnabled && this.filteredOptions.length > 0 ? 0 : -1, this.renderDropdown(), x.debug(`[${this.instanceId}] Loaded ${i.length} results`);
|
|
1845
|
-
}
|
|
1846
|
-
} catch (o) {
|
|
1847
|
-
x.error(`[${this.instanceId}] Error loading data:`, o), this.isLoading = !1, this.options.isKeepOptionsOnSearch ? this.filteredOptions = [...this.allOptions] : this.filteredOptions = [], this.matchingIndices.clear(), this.renderDropdown();
|
|
1848
|
-
}
|
|
1856
|
+
this.searchDebounceTimer && (clearTimeout(this.searchDebounceTimer), this.searchDebounceTimer = void 0);
|
|
1857
|
+
const s = this.options.searchDebounce || 0;
|
|
1858
|
+
s > 0 ? this.searchDebounceTimer = setTimeout(() => {
|
|
1859
|
+
this.searchDebounceTimer = void 0, this.searchTerm === e && this.performAsyncSearch(e, t);
|
|
1860
|
+
}, s) : await this.performAsyncSearch(e, t);
|
|
1849
1861
|
} else {
|
|
1850
1862
|
if (!t)
|
|
1851
1863
|
this.filteredOptions = [...this.allOptions], this.matchingIndices.clear(), this.focusedIndex = this.filteredOptions.length > 0 ? 0 : -1;
|
|
1852
1864
|
else {
|
|
1853
|
-
const
|
|
1854
|
-
if (
|
|
1865
|
+
const s = this.options.searchMode || "filter", i = t.toLowerCase();
|
|
1866
|
+
if (s === "filter")
|
|
1855
1867
|
this.filteredOptions = this.allOptions.filter((r) => this.getItemSearchValue(r).toLowerCase().includes(i)), this.matchingIndices.clear(), this.focusedIndex = this.filteredOptions.length > 0 ? 0 : -1, x.debug(`[${this.instanceId}] Filter mode: ${this.filteredOptions.length} matches for "${t}"`);
|
|
1856
1868
|
else {
|
|
1857
1869
|
this.filteredOptions = [...this.allOptions], this.matchingIndices.clear();
|
|
1858
1870
|
let r = -1;
|
|
1859
|
-
this.allOptions.forEach((
|
|
1860
|
-
this.getItemSearchValue(
|
|
1871
|
+
this.allOptions.forEach((a, n) => {
|
|
1872
|
+
this.getItemSearchValue(a).toLowerCase().includes(i) && (this.matchingIndices.add(n), r === -1 && (r = n));
|
|
1861
1873
|
}), r >= 0 ? (this.focusedIndex = r, x.debug(`[${this.instanceId}] Navigate mode: ${this.matchingIndices.size} matches, jumped to index ${r}`)) : x.debug(`[${this.instanceId}] Navigate mode: No matches found, keeping previous focus`);
|
|
1862
1874
|
}
|
|
1863
1875
|
}
|
|
1864
1876
|
this.renderDropdown(), this.options.searchMode === "navigate" && this.focusedIndex >= 0 && this.scrollToFocused();
|
|
1865
1877
|
}
|
|
1866
1878
|
}
|
|
1879
|
+
/** Abort the search request currently in flight, if any. The aborted request's results
|
|
1880
|
+
* are then ignored (and the consumer's `searchCallback` can short-circuit its fetch via
|
|
1881
|
+
* the `AbortSignal` it was handed). */
|
|
1882
|
+
abortInFlightSearch() {
|
|
1883
|
+
this.searchAbortController && (this.searchAbortController.abort(), this.searchAbortController = void 0);
|
|
1884
|
+
}
|
|
1885
|
+
/**
|
|
1886
|
+
* Invoke the async `searchCallback` and apply its results. Split out of `handleSearch`
|
|
1887
|
+
* so it can be called immediately or after the debounce timer.
|
|
1888
|
+
*
|
|
1889
|
+
* Any request still in flight is aborted before a new one starts, so a slow earlier
|
|
1890
|
+
* request can't overwrite a newer one — and consumers that wire the passed `AbortSignal`
|
|
1891
|
+
* into their fetch get the request actually cancelled, not just ignored. The
|
|
1892
|
+
* `aborted` / `searchTerm === value` guards drop superseded or out-of-order responses.
|
|
1893
|
+
*/
|
|
1894
|
+
async performAsyncSearch(e, t) {
|
|
1895
|
+
this.abortInFlightSearch();
|
|
1896
|
+
const s = new AbortController();
|
|
1897
|
+
this.searchAbortController = s, this.isLoading = !0, this.renderDropdown(), x.debug(`[${this.instanceId}] Loading data for search term:`, t);
|
|
1898
|
+
try {
|
|
1899
|
+
const i = await this.options.searchCallback(t, s.signal);
|
|
1900
|
+
if (s.signal.aborted || this.searchTerm !== e) return;
|
|
1901
|
+
const r = i || [];
|
|
1902
|
+
this.filteredOptions = [...r], this.isLoading = !1, this.matchingIndices.clear(), this.focusedIndex = this.options.isSearchEnabled && this.filteredOptions.length > 0 ? 0 : -1, this.renderDropdown(), x.debug(`[${this.instanceId}] Loaded ${r.length} results`);
|
|
1903
|
+
} catch (i) {
|
|
1904
|
+
if (s.signal.aborted) return;
|
|
1905
|
+
x.error(`[${this.instanceId}] Error loading data:`, i), this.isLoading = !1, this.options.isKeepOptionsOnSearch ? this.filteredOptions = [...this.allOptions] : this.filteredOptions = [], this.matchingIndices.clear(), this.renderDropdown();
|
|
1906
|
+
} finally {
|
|
1907
|
+
this.searchAbortController === s && (this.searchAbortController = void 0);
|
|
1908
|
+
}
|
|
1909
|
+
}
|
|
1867
1910
|
handleKeydown(e) {
|
|
1868
1911
|
if (!this.isOpen) {
|
|
1869
1912
|
(e.key === "Enter" || e.key === "ArrowDown") && (e.preventDefault(), this.open());
|
|
1870
1913
|
return;
|
|
1871
1914
|
}
|
|
1872
1915
|
if (!this.options.isSearchEnabled) {
|
|
1873
|
-
const t = e.key.length === 1 || e.key === "Backspace" || e.key === "Delete",
|
|
1874
|
-
if (t && !
|
|
1916
|
+
const t = e.key.length === 1 || e.key === "Backspace" || e.key === "Delete", s = ["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", "Enter", "Escape", "Tab"].includes(e.key);
|
|
1917
|
+
if (t && !s) {
|
|
1875
1918
|
e.preventDefault();
|
|
1876
1919
|
return;
|
|
1877
1920
|
}
|
|
@@ -1918,21 +1961,21 @@ class xs {
|
|
|
1918
1961
|
else if (r === "clear-all")
|
|
1919
1962
|
this.clearAll();
|
|
1920
1963
|
else if (r === "custom") {
|
|
1921
|
-
const
|
|
1922
|
-
|
|
1964
|
+
const a = parseInt(t.dataset.buttonIndex || "-1"), n = (i = this.options.actionButtons) == null ? void 0 : i[a];
|
|
1965
|
+
n != null && n.onClick && n.onClick(this);
|
|
1923
1966
|
}
|
|
1924
1967
|
return;
|
|
1925
1968
|
}
|
|
1926
|
-
const
|
|
1927
|
-
if (
|
|
1969
|
+
const s = e.target.closest(".ms__option");
|
|
1970
|
+
if (s && !s.classList.contains("ms__option--disabled")) {
|
|
1928
1971
|
e.preventDefault();
|
|
1929
|
-
const r =
|
|
1972
|
+
const r = s.dataset.value, a = this.filteredOptions.findIndex((n) => String(this.getItemValue(n)) === r);
|
|
1930
1973
|
S.debug(`[${this.instanceId}] Option clicked:`, {
|
|
1931
1974
|
value: r,
|
|
1932
|
-
optionIndex:
|
|
1975
|
+
optionIndex: a,
|
|
1933
1976
|
closeOnSelect: this.options.isCloseOnSelect,
|
|
1934
1977
|
placeholder: this.options.searchPlaceholder
|
|
1935
|
-
}),
|
|
1978
|
+
}), a >= 0 && (this.focusedIndex = a, this.toggleOption(this.filteredOptions[a]), this.isOpen && this.input.focus());
|
|
1936
1979
|
}
|
|
1937
1980
|
}
|
|
1938
1981
|
handleBadgeClick(e) {
|
|
@@ -1952,8 +1995,8 @@ class xs {
|
|
|
1952
1995
|
Array.from(this.selectedOptions.values()).slice(l).forEach((p) => this.deselectOption(p));
|
|
1953
1996
|
return;
|
|
1954
1997
|
}
|
|
1955
|
-
const
|
|
1956
|
-
|
|
1998
|
+
const a = i.dataset.value, n = this.selectedOptions.get(a);
|
|
1999
|
+
n && this.deselectOption(n);
|
|
1957
2000
|
return;
|
|
1958
2001
|
}
|
|
1959
2002
|
if (e.target.closest(".ms__badge--more") && !e.target.closest(".ms__badge-remove")) {
|
|
@@ -1965,25 +2008,25 @@ class xs {
|
|
|
1965
2008
|
var i;
|
|
1966
2009
|
const t = e.composedPath();
|
|
1967
2010
|
if (this.showSelectedPopover && !t.some(
|
|
1968
|
-
(
|
|
2011
|
+
(a) => a instanceof Node && (this.selectedPopover.contains(a) || this.counter.contains(a) || a.closest && a.closest('[data-action="show-selected"]'))
|
|
1969
2012
|
)) {
|
|
1970
2013
|
P.debug(`[${this.instanceId}] Closing selected popover due to click outside`), this.hideSelectedPopover();
|
|
1971
2014
|
return;
|
|
1972
2015
|
}
|
|
1973
2016
|
if (!this.isOpen) return;
|
|
1974
|
-
const
|
|
2017
|
+
const s = t.some(
|
|
1975
2018
|
(r) => r instanceof Node && (this.element.contains(r) || this.dropdown.contains(r) || this.hint && this.hint.contains(r))
|
|
1976
2019
|
);
|
|
1977
2020
|
S.debug(`[${this.instanceId}] handleClickOutside`, {
|
|
1978
2021
|
target: e.target.className,
|
|
1979
2022
|
targetTag: e.target.tagName,
|
|
1980
|
-
clickedInside:
|
|
2023
|
+
clickedInside: s,
|
|
1981
2024
|
pathLength: t.length,
|
|
1982
2025
|
firstInPath: (i = t[0]) == null ? void 0 : i.tagName,
|
|
1983
2026
|
elementContains: t.some((r) => r instanceof Node && this.element.contains(r)),
|
|
1984
2027
|
dropdownContains: t.some((r) => r instanceof Node && this.dropdown.contains(r)),
|
|
1985
2028
|
isConnected: this.dropdown.isConnected
|
|
1986
|
-
}),
|
|
2029
|
+
}), s || (S.warn(`[${this.instanceId}] Closing dropdown due to click outside`), this.close());
|
|
1987
2030
|
}
|
|
1988
2031
|
/**
|
|
1989
2032
|
* Move focus by computing a new index from (current, total).
|
|
@@ -1992,8 +2035,8 @@ class xs {
|
|
|
1992
2035
|
focusBy(e) {
|
|
1993
2036
|
const t = this.filteredOptions.length;
|
|
1994
2037
|
if (t === 0) return;
|
|
1995
|
-
const
|
|
1996
|
-
|
|
2038
|
+
const s = e(this.focusedIndex, t);
|
|
2039
|
+
s < 0 || (this.focusedIndex = s, this.renderDropdown(), this.scrollToFocused());
|
|
1997
2040
|
}
|
|
1998
2041
|
focusNext() {
|
|
1999
2042
|
this.focusBy((e, t) => Math.min(t - 1, e + 1));
|
|
@@ -2015,13 +2058,13 @@ class xs {
|
|
|
2015
2058
|
}
|
|
2016
2059
|
focusNextMatch() {
|
|
2017
2060
|
if (this.matchingIndices.size === 0) return;
|
|
2018
|
-
const e = Array.from(this.matchingIndices).sort((i, r) => i - r), t = e.findIndex((i) => i === this.focusedIndex),
|
|
2019
|
-
this.focusBy(() => e[
|
|
2061
|
+
const e = Array.from(this.matchingIndices).sort((i, r) => i - r), t = e.findIndex((i) => i === this.focusedIndex), s = (t + 1) % e.length;
|
|
2062
|
+
this.focusBy(() => e[s]), S.debug(`[${this.instanceId}] Jumped to next match: index ${this.focusedIndex} (${t + 1} of ${e.length})`);
|
|
2020
2063
|
}
|
|
2021
2064
|
focusPreviousMatch() {
|
|
2022
2065
|
if (this.matchingIndices.size === 0) return;
|
|
2023
|
-
const e = Array.from(this.matchingIndices).sort((i, r) => i - r), t = e.findIndex((i) => i === this.focusedIndex),
|
|
2024
|
-
this.focusBy(() => e[
|
|
2066
|
+
const e = Array.from(this.matchingIndices).sort((i, r) => i - r), t = e.findIndex((i) => i === this.focusedIndex), s = t <= 0 ? e.length - 1 : t - 1;
|
|
2067
|
+
this.focusBy(() => e[s]), S.debug(`[${this.instanceId}] Jumped to previous match: index ${this.focusedIndex} (${t + 1} of ${e.length})`);
|
|
2025
2068
|
}
|
|
2026
2069
|
scrollToFocused() {
|
|
2027
2070
|
if (this.virtualScroll && this.focusedIndex >= 0)
|
|
@@ -2036,12 +2079,12 @@ class xs {
|
|
|
2036
2079
|
S.debug(`[${this.instanceId}] toggleOption ignored — option is disabled`);
|
|
2037
2080
|
return;
|
|
2038
2081
|
}
|
|
2039
|
-
const t = this.getItemValue(e),
|
|
2082
|
+
const t = this.getItemValue(e), s = String(t);
|
|
2040
2083
|
if (S.debug(`[${this.instanceId}] toggleOption called`, { value: t, multiple: this.options.isMultipleEnabled }), !this.options.isMultipleEnabled) {
|
|
2041
|
-
this.selectedValues.has(
|
|
2084
|
+
this.selectedValues.has(s) ? (S.debug(`[${this.instanceId}] Deselecting option in single-select mode`, { value: t }), this.deselectOption(e)) : (S.debug(`[${this.instanceId}] Clearing previous selections and selecting new option`, { value: t }), this.selectedValues.clear(), this.selectedOptions.clear(), this.selectOption(e)), this.close();
|
|
2042
2085
|
return;
|
|
2043
2086
|
}
|
|
2044
|
-
this.selectedValues.has(
|
|
2087
|
+
this.selectedValues.has(s) ? (S.debug(`[${this.instanceId}] Deselecting option`, { value: t }), this.deselectOption(e)) : (S.debug(`[${this.instanceId}] Selecting option`, { value: t }), this.selectOption(e)), this.options.isCloseOnSelect && this.close();
|
|
2045
2088
|
}
|
|
2046
2089
|
async handleAddNew(e) {
|
|
2047
2090
|
if (this.options.addNewCallback)
|
|
@@ -2054,19 +2097,19 @@ class xs {
|
|
|
2054
2097
|
}
|
|
2055
2098
|
}
|
|
2056
2099
|
selectOption(e) {
|
|
2057
|
-
const t = this.getItemValue(e),
|
|
2058
|
-
this.selectedValues.add(
|
|
2100
|
+
const t = this.getItemValue(e), s = String(t);
|
|
2101
|
+
this.selectedValues.add(s), this.selectedOptions.set(s, e), this.commit({ added: [e] });
|
|
2059
2102
|
}
|
|
2060
2103
|
deselectOption(e) {
|
|
2061
|
-
const t = this.getItemValue(e),
|
|
2062
|
-
this.selectedValues.delete(
|
|
2104
|
+
const t = this.getItemValue(e), s = String(t);
|
|
2105
|
+
this.selectedValues.delete(s), this.selectedOptions.delete(s), this.commit({ removed: [e] });
|
|
2063
2106
|
}
|
|
2064
2107
|
selectAll() {
|
|
2065
2108
|
const e = [];
|
|
2066
2109
|
this.filteredOptions.forEach((t) => {
|
|
2067
2110
|
if (this.getItemDisabled(t)) return;
|
|
2068
|
-
const
|
|
2069
|
-
this.selectedValues.has(
|
|
2111
|
+
const s = String(this.getItemValue(t));
|
|
2112
|
+
this.selectedValues.has(s) || (this.selectedValues.add(s), this.selectedOptions.set(s, t), e.push(t));
|
|
2070
2113
|
}), this.commit({ added: e });
|
|
2071
2114
|
}
|
|
2072
2115
|
clearAll() {
|
|
@@ -2080,11 +2123,11 @@ class xs {
|
|
|
2080
2123
|
*/
|
|
2081
2124
|
commit(e) {
|
|
2082
2125
|
this.renderDropdown(), this.renderBadges(), this.updateHiddenInput();
|
|
2083
|
-
const t = e.added ?? [],
|
|
2084
|
-
this.options.selectCallback && t.forEach((i) => this.options.selectCallback(i)), this.options.deselectCallback &&
|
|
2126
|
+
const t = e.added ?? [], s = e.removed ?? [];
|
|
2127
|
+
this.options.selectCallback && t.forEach((i) => this.options.selectCallback(i)), this.options.deselectCallback && s.forEach((i) => this.options.deselectCallback(i)), (t.length > 0 || s.length > 0) && this.options.changeCallback && this.options.changeCallback(this.getSelected());
|
|
2085
2128
|
}
|
|
2086
2129
|
open() {
|
|
2087
|
-
P.debug(`[${this.instanceId}] open() called`, { isOpen: this.isOpen }), !this.isOpen && (this.isOpen = !0, this.element.classList.add("ms--open"), this.dropdown.classList.add("ms__dropdown--visible"), P.info(`[${this.instanceId}] Dropdown opened`), this.input.placeholder = this.
|
|
2130
|
+
P.debug(`[${this.instanceId}] open() called`, { isOpen: this.isOpen }), !this.isOpen && (this.isOpen = !0, this.element.classList.add("ms--open"), this.dropdown.classList.add("ms__dropdown--visible"), P.info(`[${this.instanceId}] Dropdown opened`), this.input.placeholder = this.getPlaceholderText(), !this.options.isMultipleEnabled && this.options.isSearchEnabled && (this.input.value = ""), this.options.searchCallback && this.options.isKeepOptionsOnSearch && !this.searchTerm && (this.filteredOptions = [...this.allOptions], P.debug(`[${this.instanceId}] Showing ${this.allOptions.length} initial options on open`)), this.renderDropdown(), this.positionDropdown(), this.hint && (this.hint.classList.add("ms__hint--visible"), this.positionHint()));
|
|
2088
2131
|
}
|
|
2089
2132
|
close() {
|
|
2090
2133
|
P.debug(`[${this.instanceId}] close() called`, { isOpen: this.isOpen }), this.isOpen && (this.isOpen = !1, this.element.classList.remove("ms--open"), this.dropdown.classList.remove("ms__dropdown--visible"), this.hint && this.hint.classList.remove("ms__hint--visible"), this.options.shouldKeepSearchOnClose || (this.searchTerm = "", (this.options.isMultipleEnabled || this.options.isSearchEnabled) && (this.input.value = ""), this.filteredOptions = [...this.allOptions]), this.focusedIndex = -1, this.renderBadges(), this.dropdownCleanup && (this.dropdownCleanup(), this.dropdownCleanup = null), this.hintCleanup && (this.hintCleanup(), this.hintCleanup = null), this.dropdownPlacement = null, P.debug(`[${this.instanceId}] Dropdown closed`));
|
|
@@ -2097,25 +2140,25 @@ class xs {
|
|
|
2097
2140
|
* compute then lock the resulting placement, optionally clamp by dropdownMin/MaxWidth.
|
|
2098
2141
|
*/
|
|
2099
2142
|
anchorFloatingPanel(e, t) {
|
|
2100
|
-
const
|
|
2143
|
+
const s = {
|
|
2101
2144
|
...ot,
|
|
2102
|
-
getOffsetParent: () =>
|
|
2145
|
+
getOffsetParent: () => ks(this.input)
|
|
2103
2146
|
};
|
|
2104
2147
|
return _e(this.input, e, () => {
|
|
2105
2148
|
var l;
|
|
2106
2149
|
e.style.width = `${this.input.offsetWidth}px`, this.options.dropdownMinWidth && (e.style.minWidth = this.options.dropdownMinWidth), t.applyMaxWidth && this.options.dropdownMaxWidth && (e.style.maxWidth = this.options.dropdownMaxWidth);
|
|
2107
|
-
const i = ((l = t.isLocked) == null ? void 0 : l.call(t)) ?? !0, r = t.getPlacement(),
|
|
2108
|
-
|
|
2150
|
+
const i = ((l = t.isLocked) == null ? void 0 : l.call(t)) ?? !0, r = t.getPlacement(), a = i && r ? r : "bottom-start", n = [
|
|
2151
|
+
ke(4),
|
|
2109
2152
|
...i && r ? [] : [rt()],
|
|
2110
|
-
|
|
2153
|
+
ye({ padding: 8 })
|
|
2111
2154
|
];
|
|
2112
|
-
|
|
2155
|
+
we(this.input, e, { placement: a, strategy: "fixed", middleware: n, platform: s }).then(({ x: c, y: h, placement: p }) => {
|
|
2113
2156
|
var u;
|
|
2114
2157
|
r || t.setPlacement(p), Object.assign(e.style, {
|
|
2115
2158
|
position: "fixed",
|
|
2116
2159
|
left: `${c}px`,
|
|
2117
|
-
top: `${
|
|
2118
|
-
}), this.verifyPanelLanded(e, c,
|
|
2160
|
+
top: `${h}px`
|
|
2161
|
+
}), this.verifyPanelLanded(e, c, h), (u = t.afterPosition) == null || u.call(t);
|
|
2119
2162
|
});
|
|
2120
2163
|
});
|
|
2121
2164
|
}
|
|
@@ -2130,14 +2173,14 @@ class xs {
|
|
|
2130
2173
|
*
|
|
2131
2174
|
* Fires at most once per multiselect instance to avoid flooding the console during autoUpdate.
|
|
2132
2175
|
*/
|
|
2133
|
-
verifyPanelLanded(e, t,
|
|
2176
|
+
verifyPanelLanded(e, t, s) {
|
|
2134
2177
|
if (this.positioningDriftWarned) return;
|
|
2135
|
-
const i = e.getBoundingClientRect(), r = i.x - t,
|
|
2136
|
-
if (Math.abs(r) < 1 && Math.abs(
|
|
2178
|
+
const i = e.getBoundingClientRect(), r = i.x - t, a = i.y - s;
|
|
2179
|
+
if (Math.abs(r) < 1 && Math.abs(a) < 1) return;
|
|
2137
2180
|
this.positioningDriftWarned = !0;
|
|
2138
|
-
const
|
|
2181
|
+
const n = ys(this.input, r, a), l = n ? `<${n.tagName.toLowerCase()}${n.id ? "#" + n.id : ""}${typeof n.className == "string" && n.className ? "." + n.className.split(/\s+/).filter(Boolean).slice(0, 2).join(".") : ""}>` : "an ancestor element (could not auto-identify)", c = n ? ws(n) : "";
|
|
2139
2182
|
console.warn(
|
|
2140
|
-
`[@keenmate/web-multiselect] Dropdown panel rendered ${r.toFixed(0)}px / ${
|
|
2183
|
+
`[@keenmate/web-multiselect] Dropdown panel rendered ${r.toFixed(0)}px / ${a.toFixed(0)}px away from where the library positioned it. Most likely culprit: ${l}` + (c ? ` (has ${c})` : "") + ".\nAn ancestor of <web-multiselect> establishes a fixed-positioning containing block that the library's heuristic doesn't recognize. Fix on your side: replace the property with `transform: translateZ(0)` on that ancestor, OR move the trigger out of that ancestor's subtree. If neither is acceptable, please file an issue at https://github.com/keenmate/web-multiselect/issues with the ancestor's computed CSS."
|
|
2141
2184
|
);
|
|
2142
2185
|
}
|
|
2143
2186
|
positionDropdown() {
|
|
@@ -2159,19 +2202,19 @@ class xs {
|
|
|
2159
2202
|
this.hint,
|
|
2160
2203
|
() => {
|
|
2161
2204
|
let e = "top-start";
|
|
2162
|
-
this.dropdownPlacement && (this.dropdownPlacement.startsWith("bottom") ? e = this.dropdownPlacement.replace("bottom", "top") : this.dropdownPlacement.startsWith("top") && (e = this.dropdownPlacement.replace("top", "bottom"))),
|
|
2205
|
+
this.dropdownPlacement && (this.dropdownPlacement.startsWith("bottom") ? e = this.dropdownPlacement.replace("bottom", "top") : this.dropdownPlacement.startsWith("top") && (e = this.dropdownPlacement.replace("top", "bottom"))), we(this.input, this.hint, {
|
|
2163
2206
|
placement: e,
|
|
2164
2207
|
strategy: "fixed",
|
|
2165
2208
|
middleware: [
|
|
2166
|
-
|
|
2209
|
+
ke(4),
|
|
2167
2210
|
// Don't use flip() - we want hint to stay opposite of dropdown
|
|
2168
|
-
|
|
2211
|
+
ye({ padding: 8 })
|
|
2169
2212
|
]
|
|
2170
|
-
}).then(({ x: t, y:
|
|
2213
|
+
}).then(({ x: t, y: s }) => {
|
|
2171
2214
|
Object.assign(this.hint.style, {
|
|
2172
2215
|
position: "fixed",
|
|
2173
2216
|
left: `${t}px`,
|
|
2174
|
-
top: `${
|
|
2217
|
+
top: `${s}px`
|
|
2175
2218
|
});
|
|
2176
2219
|
});
|
|
2177
2220
|
}
|
|
@@ -2181,8 +2224,8 @@ class xs {
|
|
|
2181
2224
|
const e = this.element.dataset.initialValues;
|
|
2182
2225
|
if (e)
|
|
2183
2226
|
try {
|
|
2184
|
-
JSON.parse(e).forEach((
|
|
2185
|
-
this.selectedValues.add(String(
|
|
2227
|
+
JSON.parse(e).forEach((s) => {
|
|
2228
|
+
this.selectedValues.add(String(s));
|
|
2186
2229
|
}), this.reconcileSelectedOptions(), this.renderBadges();
|
|
2187
2230
|
} catch (t) {
|
|
2188
2231
|
x.error(`[${this.instanceId}] Failed to parse initial values:`, t);
|
|
@@ -2199,7 +2242,7 @@ class xs {
|
|
|
2199
2242
|
reconcileSelectedOptions() {
|
|
2200
2243
|
this.selectedValues.size === 0 || this.allOptions.length === 0 || this.selectedValues.forEach((e) => {
|
|
2201
2244
|
if (this.selectedOptions.has(e)) return;
|
|
2202
|
-
const t = this.allOptions.find((
|
|
2245
|
+
const t = this.allOptions.find((s) => String(this.getItemValue(s)) === e);
|
|
2203
2246
|
t && this.selectedOptions.set(e, t);
|
|
2204
2247
|
});
|
|
2205
2248
|
}
|
|
@@ -2218,8 +2261,8 @@ class xs {
|
|
|
2218
2261
|
t.startsWith("popover-") && ((e = this.tooltips.get(t)) == null || e.destroy(), this.tooltips.delete(t));
|
|
2219
2262
|
}
|
|
2220
2263
|
renderSelectedPopover() {
|
|
2221
|
-
const e = Array.from(this.selectedOptions.values()), t = this.selectedValues.size,
|
|
2222
|
-
if (t >=
|
|
2264
|
+
const e = Array.from(this.selectedOptions.values()), t = this.selectedValues.size, s = this.options.virtualScrollThreshold ?? 100;
|
|
2265
|
+
if (t >= s) {
|
|
2223
2266
|
this.renderSelectedPopoverVirtual(e, t);
|
|
2224
2267
|
return;
|
|
2225
2268
|
}
|
|
@@ -2235,27 +2278,27 @@ class xs {
|
|
|
2235
2278
|
}
|
|
2236
2279
|
renderSelectedPopoverVirtual(e, t) {
|
|
2237
2280
|
if (this.selectedPopoverVirtualScroll) {
|
|
2238
|
-
const
|
|
2239
|
-
|
|
2281
|
+
const n = this.selectedPopover.querySelector(".ms__selected-popover-header span");
|
|
2282
|
+
n && (n.textContent = `Selected Items (${t})`);
|
|
2240
2283
|
} else {
|
|
2241
|
-
const
|
|
2284
|
+
const n = this.options.badgeHeight ?? 36, l = `
|
|
2242
2285
|
<div class="ms__selected-popover-header">
|
|
2243
2286
|
<span>Selected Items (${t})</span>
|
|
2244
2287
|
<button type="button" class="ms__selected-popover-close" aria-label="Close"></button>
|
|
2245
2288
|
</div>
|
|
2246
|
-
<div class="ms__selected-popover-body ms__selected-popover-body--virtual" style="height: 18rem; overflow-y: auto; position: relative; --ms-badge-height-virtual: ${
|
|
2289
|
+
<div class="ms__selected-popover-body ms__selected-popover-body--virtual" style="height: 18rem; overflow-y: auto; position: relative; --ms-badge-height-virtual: ${n}px;"></div>
|
|
2247
2290
|
`;
|
|
2248
2291
|
this.selectedPopover.innerHTML = l, this.selectedPopoverContainer = this.selectedPopover.querySelector(".ms__selected-popover-body");
|
|
2249
2292
|
}
|
|
2250
2293
|
if (!this.selectedPopoverContainer) return;
|
|
2251
|
-
const r = (this.options.badgeHeight ?? 36) + 4,
|
|
2294
|
+
const r = (this.options.badgeHeight ?? 36) + 4, a = this.options.virtualScrollBuffer ?? 10;
|
|
2252
2295
|
requestAnimationFrame(() => {
|
|
2253
2296
|
this.selectedPopoverContainer && (this.selectedPopoverVirtualScroll ? this.selectedPopoverVirtualScroll.setItems(e) : this.selectedPopoverVirtualScroll = new We({
|
|
2254
2297
|
container: this.selectedPopoverContainer,
|
|
2255
2298
|
itemHeight: r,
|
|
2256
2299
|
items: e,
|
|
2257
|
-
renderItem: (
|
|
2258
|
-
bufferSize:
|
|
2300
|
+
renderItem: (n) => this.renderBadgeHTML(n, { displayMode: this.options.badgesDisplayMode || "badges", isInPopover: !0 }),
|
|
2301
|
+
bufferSize: a,
|
|
2259
2302
|
onVisibleRangeChange: () => {
|
|
2260
2303
|
this.attachBadgeTooltips(this.selectedPopoverContainer);
|
|
2261
2304
|
}
|
|
@@ -2272,7 +2315,7 @@ class xs {
|
|
|
2272
2315
|
* accessible name stay in sync.
|
|
2273
2316
|
*/
|
|
2274
2317
|
renderBadgeHTML(e, t) {
|
|
2275
|
-
const
|
|
2318
|
+
const s = this.getItemValue(e);
|
|
2276
2319
|
let i;
|
|
2277
2320
|
const r = t.isInPopover ? this.options.renderSelectedItemContentCallback : void 0;
|
|
2278
2321
|
if (r) {
|
|
@@ -2283,17 +2326,17 @@ class xs {
|
|
|
2283
2326
|
i = typeof c == "string" ? c : c.outerHTML;
|
|
2284
2327
|
} else
|
|
2285
2328
|
i = this.getItemBadgeDisplayValue(e);
|
|
2286
|
-
const
|
|
2287
|
-
let
|
|
2288
|
-
if (
|
|
2289
|
-
const c =
|
|
2290
|
-
|
|
2329
|
+
const a = t.isInPopover ? this.options.getSelectedItemClassCallback || this.options.getBadgeClassCallback : this.options.getBadgeClassCallback;
|
|
2330
|
+
let n = "ms__badge";
|
|
2331
|
+
if (a) {
|
|
2332
|
+
const c = a(e), h = Array.isArray(c) ? c : [c];
|
|
2333
|
+
n += " " + h.filter((p) => p).join(" ");
|
|
2291
2334
|
}
|
|
2292
2335
|
const l = this.getItemBadgeDisplayValue(e);
|
|
2293
2336
|
return `
|
|
2294
|
-
<div class="${
|
|
2337
|
+
<div class="${n}">
|
|
2295
2338
|
<span class="ms__badge-text">${i}</span>
|
|
2296
|
-
<button type="button" class="ms__badge-remove" data-value="${
|
|
2339
|
+
<button type="button" class="ms__badge-remove" data-value="${s}" aria-label="Remove ${l}"></button>
|
|
2297
2340
|
</div>
|
|
2298
2341
|
`;
|
|
2299
2342
|
}
|
|
@@ -2302,10 +2345,10 @@ class xs {
|
|
|
2302
2345
|
e.preventDefault(), this.hideSelectedPopover();
|
|
2303
2346
|
return;
|
|
2304
2347
|
}
|
|
2305
|
-
const
|
|
2306
|
-
if (
|
|
2348
|
+
const s = e.target.closest(".ms__badge-remove");
|
|
2349
|
+
if (s) {
|
|
2307
2350
|
e.preventDefault();
|
|
2308
|
-
const i =
|
|
2351
|
+
const i = s.dataset.value, r = this.selectedOptions.get(i);
|
|
2309
2352
|
r && (this.deselectOption(r), this.renderSelectedPopover(), this.selectedValues.size === 0 && this.hideSelectedPopover());
|
|
2310
2353
|
}
|
|
2311
2354
|
}
|
|
@@ -2323,19 +2366,19 @@ class xs {
|
|
|
2323
2366
|
updateHiddenInput() {
|
|
2324
2367
|
if (!this.options.formFieldId) return;
|
|
2325
2368
|
this.hiddenInputs.forEach((i) => i.remove()), this.hiddenInputs = [];
|
|
2326
|
-
const e = this.options.valueFormat || "json", t = Array.from(this.selectedOptions.values()).map((i) => this.getItemValue(i)),
|
|
2369
|
+
const e = this.options.valueFormat || "json", t = Array.from(this.selectedOptions.values()).map((i) => this.getItemValue(i)), s = this.options.hostElement || this.element;
|
|
2327
2370
|
if (e === "array")
|
|
2328
2371
|
t.forEach((i) => {
|
|
2329
2372
|
const r = document.createElement("input");
|
|
2330
|
-
r.type = "hidden", r.name = `${this.options.formFieldId}[]`, r.value = String(i),
|
|
2373
|
+
r.type = "hidden", r.name = `${this.options.formFieldId}[]`, r.value = String(i), s.appendChild(r), this.hiddenInputs.push(r);
|
|
2331
2374
|
});
|
|
2332
2375
|
else {
|
|
2333
2376
|
const i = document.createElement("input");
|
|
2334
|
-
i.type = "hidden", i.name = this.options.formFieldId, i.id = this.options.formFieldId, i.value = this.getFormValue(),
|
|
2377
|
+
i.type = "hidden", i.name = this.options.formFieldId, i.id = this.options.formFieldId, i.value = this.getFormValue(), s.appendChild(i), this.hiddenInputs.push(i);
|
|
2335
2378
|
}
|
|
2336
2379
|
}
|
|
2337
2380
|
getFormValue() {
|
|
2338
|
-
const e = Array.from(this.selectedOptions.values()).map((
|
|
2381
|
+
const e = Array.from(this.selectedOptions.values()).map((s) => this.getItemValue(s));
|
|
2339
2382
|
return this.options.getValueFormatCallback ? this.options.getValueFormatCallback(e) : (this.options.valueFormat || "json") === "csv" ? e.join(",") : JSON.stringify(e);
|
|
2340
2383
|
}
|
|
2341
2384
|
// ========================================================================
|
|
@@ -2346,8 +2389,8 @@ class xs {
|
|
|
2346
2389
|
}
|
|
2347
2390
|
setSelected(e) {
|
|
2348
2391
|
this.selectedValues = new Set(e.map((t) => String(t))), this.selectedOptions.clear(), e.forEach((t) => {
|
|
2349
|
-
const
|
|
2350
|
-
i && this.selectedOptions.set(
|
|
2392
|
+
const s = String(t), i = this.allOptions.find((r) => String(this.getItemValue(r)) === s);
|
|
2393
|
+
i && this.selectedOptions.set(s, i);
|
|
2351
2394
|
}), this.renderDropdown(), this.renderBadges(), this.updateHiddenInput();
|
|
2352
2395
|
}
|
|
2353
2396
|
/**
|
|
@@ -2362,8 +2405,8 @@ class xs {
|
|
|
2362
2405
|
* should fall back to destroy + re-init in that case.
|
|
2363
2406
|
*/
|
|
2364
2407
|
updateOptions(e) {
|
|
2365
|
-
const t = !!this.hint,
|
|
2366
|
-
if (t !==
|
|
2408
|
+
const t = !!this.hint, s = "searchHint" in e ? !!e.searchHint : t;
|
|
2409
|
+
if (t !== s) return !1;
|
|
2367
2410
|
if (Object.assign(this.options, e), "options" in e && e.options !== void 0 && (this.allOptions = e.options, this.filteredOptions = this.searchTerm ? this.filteredOptions : [...this.allOptions], this.reconcileSelectedOptions()), this.element.classList.toggle(
|
|
2368
2411
|
"ms--no-checkboxes",
|
|
2369
2412
|
!this.options.isCheckboxesShown || !this.options.isMultipleEnabled
|
|
@@ -2375,7 +2418,7 @@ class xs {
|
|
|
2375
2418
|
this.effectiveBadgesPosition === "left" || this.effectiveBadgesPosition === "right"
|
|
2376
2419
|
);
|
|
2377
2420
|
}
|
|
2378
|
-
return
|
|
2421
|
+
return this.isOpen || (this.input.placeholder = this.getPlaceholderText()), "searchInputMode" in e && (this.input.readOnly = this.options.searchInputMode === "readonly", this.input.style.display = this.options.searchInputMode === "hidden" ? "none" : ""), "searchHint" in e && this.hint && (this.hint.textContent = this.options.searchHint || ""), this.renderDropdown(), this.renderBadges(), this.updateHiddenInput(), !0;
|
|
2379
2422
|
}
|
|
2380
2423
|
get selectedItem() {
|
|
2381
2424
|
return this.selectedOptions.size === 0 ? null : Array.from(this.selectedOptions.values())[0];
|
|
@@ -2404,9 +2447,9 @@ class xs {
|
|
|
2404
2447
|
spawnTooltip(e) {
|
|
2405
2448
|
var r;
|
|
2406
2449
|
(r = this.tooltips.get(e.id)) == null || r.destroy();
|
|
2407
|
-
const t = this.element.getRootNode(),
|
|
2450
|
+
const t = this.element.getRootNode(), s = t instanceof ShadowRoot ? t : null, i = new _s({
|
|
2408
2451
|
trigger: e.trigger,
|
|
2409
|
-
container: this.options.container ??
|
|
2452
|
+
container: this.options.container ?? s ?? document.body,
|
|
2410
2453
|
content: e.content,
|
|
2411
2454
|
placement: this.options.badgeTooltipPlacement || "top",
|
|
2412
2455
|
offsetDistance: this.options.badgeTooltipOffset ?? 8,
|
|
@@ -2421,9 +2464,9 @@ class xs {
|
|
|
2421
2464
|
/** Build the badge-text tooltip content (callback overrides; default = displayValue + optional subtitle on next line). */
|
|
2422
2465
|
buildBadgeTooltipContent(e) {
|
|
2423
2466
|
if (this.options.getBadgeTooltipCallback) return this.options.getBadgeTooltipCallback(e);
|
|
2424
|
-
const t = this.getItemBadgeDisplayValue(e),
|
|
2425
|
-
return
|
|
2426
|
-
${
|
|
2467
|
+
const t = this.getItemBadgeDisplayValue(e), s = this.getItemSubtitle(e);
|
|
2468
|
+
return s ? `${t}
|
|
2469
|
+
${s}` : t;
|
|
2427
2470
|
}
|
|
2428
2471
|
/** Build the remove-button tooltip text (callback > format string with {0} > "Remove {name}"). */
|
|
2429
2472
|
buildRemoveButtonTooltipText(e, t) {
|
|
@@ -2431,36 +2474,36 @@ ${o}` : t;
|
|
|
2431
2474
|
}
|
|
2432
2475
|
attachBadgeTooltips(e) {
|
|
2433
2476
|
if (!this.options.isBadgeTooltipsEnabled) return;
|
|
2434
|
-
const t = !!e,
|
|
2435
|
-
if (
|
|
2436
|
-
const
|
|
2437
|
-
if (!
|
|
2438
|
-
const l =
|
|
2477
|
+
const t = !!e, s = e || this.badgesContainer, i = t ? "popover-" : "";
|
|
2478
|
+
if (s.querySelectorAll(".ms__badge:not(.ms__badge--more)").forEach((a) => {
|
|
2479
|
+
const n = a.querySelector(".ms__badge-remove");
|
|
2480
|
+
if (!n) return;
|
|
2481
|
+
const l = n.dataset.value, c = this.selectedOptions.get(l);
|
|
2439
2482
|
if (!c) return;
|
|
2440
|
-
const
|
|
2483
|
+
const h = `${i}${l}`, p = `${i}${l}-remove`, u = a.querySelector(".ms__badge-text");
|
|
2441
2484
|
u && this.spawnTooltip({
|
|
2442
|
-
id:
|
|
2485
|
+
id: h,
|
|
2443
2486
|
trigger: u,
|
|
2444
2487
|
content: this.buildBadgeTooltipContent(c)
|
|
2445
2488
|
});
|
|
2446
|
-
const
|
|
2489
|
+
const m = this.getItemBadgeDisplayValue(c);
|
|
2447
2490
|
this.spawnTooltip({
|
|
2448
2491
|
id: p,
|
|
2449
|
-
trigger:
|
|
2450
|
-
content: this.buildRemoveButtonTooltipText(
|
|
2492
|
+
trigger: n,
|
|
2493
|
+
content: this.buildRemoveButtonTooltipText(m, c),
|
|
2451
2494
|
// Keep parent badge tooltip from overlapping the remove-button tooltip.
|
|
2452
2495
|
onBeforeShow: () => {
|
|
2453
|
-
var
|
|
2454
|
-
return (
|
|
2496
|
+
var b;
|
|
2497
|
+
return (b = this.tooltips.get(h)) == null ? void 0 : b.hideImmediate();
|
|
2455
2498
|
}
|
|
2456
2499
|
});
|
|
2457
2500
|
}), !t) {
|
|
2458
|
-
const
|
|
2459
|
-
if (
|
|
2501
|
+
const a = this.badgesContainer.querySelector(".ms__badge--more"), n = a == null ? void 0 : a.querySelector(".ms__badge-remove");
|
|
2502
|
+
if (n && n.dataset.action === "remove-hidden") {
|
|
2460
2503
|
const l = this.options.badgesMaxVisible || 3, c = this.selectedOptions.size - l;
|
|
2461
2504
|
this.spawnTooltip({
|
|
2462
2505
|
id: "more-badge-remove",
|
|
2463
|
-
trigger:
|
|
2506
|
+
trigger: n,
|
|
2464
2507
|
content: this.buildRemoveButtonTooltipText(`${c} hidden items`)
|
|
2465
2508
|
});
|
|
2466
2509
|
}
|
|
@@ -2468,15 +2511,15 @@ ${o}` : t;
|
|
|
2468
2511
|
}
|
|
2469
2512
|
attachActionButtonTooltips() {
|
|
2470
2513
|
this.dropdown.querySelectorAll(".ms__action-btn").forEach((t) => {
|
|
2471
|
-
var c,
|
|
2472
|
-
const
|
|
2514
|
+
var c, h;
|
|
2515
|
+
const s = t, i = s.dataset.action;
|
|
2473
2516
|
if (!i) return;
|
|
2474
|
-
const r = parseInt(
|
|
2475
|
-
if (!n) return;
|
|
2476
|
-
const a = n.getTooltipCallback ? n.getTooltipCallback(this) : n.tooltip;
|
|
2517
|
+
const r = parseInt(s.dataset.buttonIndex || "-1"), a = r >= 0 ? (c = this.options.actionButtons) == null ? void 0 : c[r] : (h = this.options.actionButtons) == null ? void 0 : h.find((p) => p.action === i);
|
|
2477
2518
|
if (!a) return;
|
|
2519
|
+
const n = a.getTooltipCallback ? a.getTooltipCallback(this) : a.tooltip;
|
|
2520
|
+
if (!n) return;
|
|
2478
2521
|
const l = `action-${r >= 0 ? r : i}`;
|
|
2479
|
-
this.spawnTooltip({ id: l, trigger:
|
|
2522
|
+
this.spawnTooltip({ id: l, trigger: s, content: n });
|
|
2480
2523
|
});
|
|
2481
2524
|
}
|
|
2482
2525
|
/**
|
|
@@ -2502,7 +2545,7 @@ ${o}` : t;
|
|
|
2502
2545
|
// PUBLIC API
|
|
2503
2546
|
// ========================================================================
|
|
2504
2547
|
destroy() {
|
|
2505
|
-
this.destroyAllTooltips(), this.dropdownCleanup && this.dropdownCleanup(), this.hintCleanup && this.hintCleanup(), this.selectedPopoverCleanup && this.selectedPopoverCleanup(), this.documentClickHandler && (document.removeEventListener("click", this.documentClickHandler), this.documentClickHandler = null), this.documentKeydownHandler && (document.removeEventListener("keydown", this.documentKeydownHandler), this.documentKeydownHandler = null), this.virtualScroll && (this.virtualScroll.destroy(), this.virtualScroll = null), this.dropdown && this.dropdown.remove(), this.hint && this.hint.remove(), this.selectedPopover && this.selectedPopover.remove(), this.element.innerHTML = "", this.element.classList.remove("ms", "ms--open", "ms--no-checkboxes"), oe.info(`[${this.instanceId}] Component destroyed`);
|
|
2548
|
+
this.destroyAllTooltips(), this.searchDebounceTimer && (clearTimeout(this.searchDebounceTimer), this.searchDebounceTimer = void 0), this.abortInFlightSearch(), this.dropdownCleanup && this.dropdownCleanup(), this.hintCleanup && this.hintCleanup(), this.selectedPopoverCleanup && this.selectedPopoverCleanup(), this.documentClickHandler && (document.removeEventListener("click", this.documentClickHandler), this.documentClickHandler = null), this.documentKeydownHandler && (document.removeEventListener("keydown", this.documentKeydownHandler), this.documentKeydownHandler = null), this.virtualScroll && (this.virtualScroll.destroy(), this.virtualScroll = null), this.dropdown && this.dropdown.remove(), this.hint && this.hint.remove(), this.selectedPopover && this.selectedPopover.remove(), this.element.innerHTML = "", this.element.classList.remove("ms", "ms--open", "ms--no-checkboxes"), oe.info(`[${this.instanceId}] Component destroyed`);
|
|
2506
2549
|
}
|
|
2507
2550
|
}
|
|
2508
2551
|
const Cs = `@layer variables,component,overrides;@layer variables{:host{display:block;--ms-rem: 10px;font-family:var(--ms-font-family, var(--base-font-family, inherit));--ms-accent-color: var(--base-accent-color, #3b82f6);--ms-accent-color-hover: var(--base-accent-color-hover, #2563eb);--ms-accent-color-active: var(--base-accent-color-active, #1d4ed8);--ms-accent-color-light: var(--base-accent-color-light, light-dark(#eff6ff, #1e3a5f));--ms-accent-color-light-hover: var(--base-accent-color-light-hover, light-dark(#e0f2fe, #264a73));--ms-text-color-1: var(--base-text-color-1, light-dark(#111827, #f5f5f5));--ms-text-color-2: var(--base-text-color-2, light-dark(#353b47, #d4d4d4));--ms-text-color-3: var(--base-text-color-3, light-dark(#6b7280, #a3a3a3));--ms-text-color-4: var(--base-text-color-4, light-dark(#a0a3a9, #737373));--ms-text-color-on-accent: var(--base-text-color-on-accent, #ffffff);--ms-text-primary: var(--ms-text-color-1);--ms-text-secondary: var(--ms-text-color-3);--ms-primary-bg: var(--base-hover-bg, color-mix(in srgb, var(--ms-text-color-1) 8%, var(--base-main-bg, light-dark(#ffffff, #1a1a1a))));--ms-primary-bg-hover: var(--base-active-bg, color-mix(in srgb, var(--ms-text-color-1) 14%, var(--base-main-bg, light-dark(#ffffff, #1a1a1a))));--ms-border-color: var(--base-border-color, light-dark(#e5e7eb, #3a3a3a));--ms-border: var(--base-border, 1px solid var(--ms-border-color));--ms-input-bg: var(--base-input-bg, light-dark(#ffffff, #1a1a1a));--ms-input-color: var(--base-input-color, var(--ms-text-color-1));--ms-input-border: var(--base-input-border, 1px solid var(--ms-border-color));--ms-input-border-hover: var(--base-input-border-hover, 1px solid var(--ms-accent-color));--ms-input-border-focus: var(--base-input-border-focus, 1px solid var(--ms-accent-color));--ms-input-placeholder-color: var(--base-input-placeholder-color, var(--ms-text-color-4));--ms-input-bg-disabled: var(--base-input-bg-disabled, rgba(107, 114, 128, .05));--ms-toggle-icon-color: var(--ms-text-color-3);--ms-toggle-icon-color-open: var(--ms-text-color-3);--ms-counter-badge-bg: var(--ms-accent-color);--ms-counter-badge-bg-hover: var(--ms-accent-color-hover);--ms-counter-badge-color: var(--ms-text-color-on-accent);--ms-hint-bg: var(--base-main-bg, light-dark(#ffffff, #1a1a1a));--ms-hint-color: var(--ms-text-color-4);--ms-hint-border-color: var(--ms-border-color);--ms-dropdown-bg: var(--base-dropdown-bg, var(--base-elevated-bg, light-dark(#ffffff, #1a1a1a)));--ms-dropdown-text-color: var(--ms-text-color-1);--ms-dropdown-border-color: var(--ms-border-color);--ms-dropdown-box-shadow-semantic: var(--base-dropdown-box-shadow, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));--ms-actions-bg: var(--base-main-bg, light-dark(#ffffff, #1a1a1a));--ms-actions-border-color: var(--ms-border-color);--ms-action-button-bg: transparent;--ms-action-button-bg-hover: var(--ms-primary-bg);--ms-action-button-border-color: var(--ms-border-color);--ms-action-button-border-color-hover: var(--ms-accent-color);--ms-action-button-color: var(--ms-text-color-1);--ms-group-border-color: var(--ms-border-color);--ms-option-text-color: var(--ms-text-color-1);--ms-option-bg: transparent;--ms-option-bg-hover: var(--ms-primary-bg);--ms-option-color-hover: inherit;--ms-option-bg-focused: var(--ms-primary-bg);--ms-option-color-focused: inherit;--ms-option-outline-color-focused: var(--ms-accent-color);--ms-option-bg-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);--ms-option-bg-matched: color-mix(in srgb, var(--ms-accent-color) 8%, transparent);--ms-option-color-matched: inherit;--ms-option-border-matched-color: color-mix(in srgb, var(--ms-accent-color) 40%, transparent);--ms-option-title-color: var(--ms-text-color-1);--ms-option-subtitle-color: var(--ms-text-color-3);--ms-option-mark-bg: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);--ms-option-mark-color: inherit;--ms-loading-color: var(--ms-text-color-3);--ms-badge-bg: var(--ms-accent-color-light);--ms-badge-bg-hover: var(--base-hover-bg, var(--ms-input-bg));--ms-badge-bg-active: var(--ms-accent-color-light-hover);--ms-badge-text-bg-hover: var(--base-hover-bg, var(--ms-input-bg));--ms-badge-text-color-hover: var(--ms-badge-text-color);--ms-badge-counter-border-color: var(--ms-border-color);--ms-badge-counter-text-bg: var(--ms-primary-bg-hover);--ms-badge-counter-text-color: var(--ms-text-color-1);--ms-badge-counter-remove-bg: var(--ms-text-color-3);--ms-badge-counter-remove-bg-hover: var(--ms-text-color-1);--ms-badge-counter-remove-color: var(--ms-text-color-on-accent);--ms-counter-wrapper-border-color: var(--ms-border-color);--ms-count-clear-bg-hover: var(--ms-accent-color);--ms-tooltip-bg: var(--base-tooltip-bg, var(--base-inverse-bg, light-dark(#333333, #f5f5f5)));--ms-tooltip-text-color: var(--base-tooltip-text-color, light-dark(#ffffff, #1a1a1a));--ms-selected-popover-bg: var(--base-dropdown-bg, var(--base-elevated-bg, light-dark(#ffffff, #1a1a1a)));--ms-selected-popover-border-color: var(--ms-border-color);--ms-selected-popover-header-border-color: var(--ms-border-color);--ms-selected-popover-close-bg-hover: var(--ms-accent-color);--ms-input-padding: calc(.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));--ms-input-padding-right: calc(4 * var(--ms-rem));--ms-input-padding-h: calc(1.2 * var(--ms-rem));--ms-input-height: calc(var(--base-input-size-md-height, 3.5) * var(--ms-rem));--ms-input-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));--ms-input-border-width: 1px;--ms-input-border-radius: var(--ms-border-radius-md);--ms-input-text: var(--ms-text-color-1);--ms-input-bg-disabled: rgba(107, 114, 128, .05);--ms-input-size-xs-font: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));--ms-input-size-xs-padding-v: calc(.4 * var(--ms-rem));--ms-input-size-xs-padding-h: calc(.8 * var(--ms-rem));--ms-input-size-xs-height: calc(var(--base-input-size-xs-height, 3.1) * var(--ms-rem));--ms-input-size-sm-font: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));--ms-input-size-sm-padding-v: calc(.5 * var(--ms-rem));--ms-input-size-sm-padding-h: calc(1 * var(--ms-rem));--ms-input-size-sm-height: calc(var(--base-input-size-sm-height, 3.3) * var(--ms-rem));--ms-input-size-md-font: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));--ms-input-size-md-padding-v: calc(.8 * var(--ms-rem));--ms-input-size-md-padding-h: calc(1.2 * var(--ms-rem));--ms-input-size-md-height: calc(var(--base-input-size-md-height, 3.5) * var(--ms-rem));--ms-input-size-lg-font: calc(var(--base-font-size-base, 1.6) * var(--ms-rem));--ms-input-size-lg-padding-v: calc(1 * var(--ms-rem));--ms-input-size-lg-padding-h: calc(1.4 * var(--ms-rem));--ms-input-size-lg-height: calc(var(--base-input-size-lg-height, 3.8) * var(--ms-rem));--ms-input-size-xl-font: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem));--ms-input-size-xl-padding-v: calc(1.2 * var(--ms-rem));--ms-input-size-xl-padding-h: calc(1.6 * var(--ms-rem));--ms-input-size-xl-height: calc(var(--base-input-size-xl-height, 4.1) * var(--ms-rem));--ms-toggle-right: calc(1.2 * var(--ms-rem));--ms-toggle-color: var(--ms-text-color-3);--ms-transform-center-y: translateY(-50%);--ms-transform-rotate-180: 180deg;--ms-counter-offset: calc(3.2 * var(--ms-rem));--ms-counter-padding: calc(.2 * var(--ms-rem)) calc(.4 * var(--ms-rem));--ms-counter-bg: var(--ms-accent-color);--ms-counter-color: var(--ms-text-color-on-accent);--ms-counter-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));--ms-counter-font-weight: var(--base-font-weight-semibold, 600);--ms-counter-border-radius: var(--ms-border-radius-sm);--ms-counter-bg-hover: var(--ms-accent-color-hover);--ms-transform-scale-hover: 1.1;--ms-hint-padding: calc(.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));--ms-hint-border: 1px solid var(--ms-hint-border-color);--ms-hint-border-radius: var(--ms-border-radius-lg);--ms-hint-box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ms-hint-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));--ms-dropdown-border: var(--base-dropdown-border, 1px solid var(--ms-dropdown-border-color));--ms-dropdown-border-radius: var(--ms-border-radius-lg);--ms-dropdown-box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--ms-options-max-height: calc(32 * var(--ms-rem));--ms-option-color: var(--ms-text-color-1);--ms-z-index-dropdown: 9999;--ms-z-index-sticky: 1;--ms-actions-gap: calc(.4 * var(--ms-rem));--ms-actions-padding: calc(.8 * var(--ms-rem));--ms-actions-border-bottom: 1px solid var(--ms-actions-border-color);--ms-action-btn-padding: calc(.4 * var(--ms-rem)) calc(.8 * var(--ms-rem));--ms-action-btn-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));--ms-action-btn-border: var(--ms-border);--ms-action-btn-border-radius: var(--ms-border-radius-sm);--ms-action-btn-bg: transparent;--ms-action-btn-color: inherit;--ms-action-btn-bg-hover: var(--ms-primary-bg);--ms-action-btn-border-color-hover: var(--ms-accent-color);--ms-transform-scale-active: .98;--ms-options-padding: 0;--ms-group-border-top: 1px solid var(--ms-group-border-color);--ms-group-margin-top: calc(.4 * var(--ms-rem));--ms-group-padding-top: calc(.4 * var(--ms-rem));--ms-group-label-padding: calc(.4 * var(--ms-rem)) calc(1.2 * var(--ms-rem));--ms-group-label-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));--ms-group-label-font-weight: var(--base-font-weight-semibold, 600);--ms-group-label-color: var(--ms-text-color-3);--ms-group-label-transform: uppercase;--ms-group-label-letter-spacing: .05em;--ms-option-gap: calc(.8 * var(--ms-rem));--ms-option-padding: calc(.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));--ms-option-padding-h: calc(1.2 * var(--ms-rem));--ms-option-outline-focused: 2px solid var(--ms-option-outline-color-focused);--ms-option-focus-outline-offset: -2px;--ms-option-border-matched: 3px solid var(--ms-option-border-matched-color);--ms-option-bg-focused-hover: var(--ms-primary-bg);--ms-option-bg-matched-hover: color-mix(in srgb, var(--ms-accent-color) 12%, transparent);--ms-option-bg-selected-focused: color-mix(in srgb, var(--ms-accent-color) 15%, transparent);--ms-option-bg-selected-matched: color-mix(in srgb, var(--ms-accent-color) 15%, transparent);--ms-option-disabled-bg: var(--base-disabled-bg, transparent);--ms-option-bg-disabled-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);--ms-disabled-opacity: .5;--ms-option-content-gap: calc(.8 * var(--ms-rem));--ms-option-icon-size: calc(2 * var(--ms-rem));--ms-option-icon-font-size: calc(var(--base-font-size-base, 1.6) * var(--ms-rem));--ms-option-title-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));--ms-option-mark-font-weight: var(--base-font-weight-semibold, 600);--ms-option-subtitle-margin-top: calc(.4 * var(--ms-rem));--ms-option-subtitle-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));--ms-option-subtitle-line-height: var(--base-line-height-tight, 1.25);--ms-checkbox-margin-top: calc(.2 * var(--ms-rem));--ms-checkbox-margin-right: 0;--ms-checkbox-margin-bottom: 0;--ms-checkbox-margin-left: 0;--ms-checkbox-size: calc(1.6 * var(--ms-rem));--ms-checkbox-scale: 1;--ms-checkbox-align: center;--ms-checkbox-bg: var(--ms-input-bg);--ms-checkbox-border: var(--ms-border);--ms-checkbox-border-radius: calc(.3 * var(--ms-rem));--ms-checkbox-checked-bg: var(--ms-accent-color);--ms-checkbox-checked-border: 1px solid var(--ms-accent-color);--ms-checkbox-checkmark-color: var(--ms-text-color-on-accent);--ms-checkbox-hover-border-color: var(--ms-accent-color);--ms-checkbox-disabled-bg: var(--ms-primary-bg);--ms-checkbox-disabled-border: var(--ms-border);--ms-checkbox-checked-bg-hover: var(--ms-accent-color-hover);--ms-checkbox-checked-border-color-hover: var(--ms-accent-color-hover);--ms-empty-padding: calc(1.6 * var(--ms-rem)) calc(1.2 * var(--ms-rem));--ms-empty-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));--ms-empty-color: var(--ms-text-color-3);--ms-loader-padding: calc(1.6 * var(--ms-rem));--ms-loader-gap: calc(.8 * var(--ms-rem));--ms-loading-text-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));--ms-loading-text-color: var(--ms-text-color-3);--ms-badges-gap: calc(.8 * var(--ms-rem));--ms-badges-margin-bottom: calc(.8 * var(--ms-rem));--ms-badges-margin-top: calc(.8 * var(--ms-rem));--ms-badges-margin-left: calc(.4 * var(--ms-rem));--ms-badges-margin-right: calc(.4 * var(--ms-rem));--ms-inline-align: center;--ms-badge-gap: calc(.8 * var(--ms-rem));--ms-badge-height: calc(2.7 * var(--ms-rem));--ms-badge-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));--ms-badge-font-weight: var(--base-font-weight-semibold, 600);--ms-badge-border-radius: var(--ms-border-radius-sm);--ms-order-first: -1;--ms-badge-text-padding: 0 calc(.8 * var(--ms-rem));--ms-badge-text-bg: var(--ms-accent-color-light);--ms-badge-text-color: var(--ms-accent-color);--ms-badge-text-border: none;--ms-badge-remove-width: calc(2.7 * var(--ms-rem));--ms-badge-remove-bg: var(--ms-accent-color);--ms-badge-remove-color: var(--ms-text-color-on-accent);--ms-badge-remove-border: none;--ms-badge-remove-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));--ms-badge-remove-bg-hover: var(--ms-accent-color-hover);--ms-badge-remove-box-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--ms-accent-color) 50%, transparent);--ms-badge-remove-icon-size: calc(1 * var(--ms-rem));--ms-icon-remove: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/></svg>");--ms-badge-counter-bg: transparent;--ms-badge-counter-border: 1px solid var(--ms-badge-counter-border-color);--ms-badge-counter-border-radius: var(--ms-border-radius-sm);--ms-more-badge-bg: var(--ms-accent-color-light);--ms-more-badge-hover-bg: var(--ms-badge-bg-hover);--ms-more-badge-active-bg: var(--ms-accent-color-light-hover);--ms-count-display-margin-bottom: calc(.8 * var(--ms-rem));--ms-count-display-margin-top: calc(.8 * var(--ms-rem));--ms-count-display-margin-left: calc(.8 * var(--ms-rem));--ms-count-display-margin-right: calc(.8 * var(--ms-rem));--ms-counter-wrapper-bg: transparent;--ms-counter-wrapper-border: var(--ms-border);--ms-counter-wrapper-border-radius: var(--ms-border-radius-sm);--ms-counter-wrapper-padding: calc(.4 * var(--ms-rem)) calc(.8 * var(--ms-rem));--ms-counter-wrapper-gap: calc(.4 * var(--ms-rem));--ms-counter-wrapper-bg-hover: var(--ms-primary-bg);--ms-counter-wrapper-border-color-hover: var(--ms-accent-color);--ms-count-text-bg: transparent;--ms-count-text-border: none;--ms-count-text-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));--ms-count-text-color: var(--ms-text-color-1);--ms-count-clear-size: calc(1.6 * var(--ms-rem));--ms-count-clear-bg: transparent;--ms-count-clear-color: var(--ms-text-color-3);--ms-count-clear-font-size: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem));--ms-count-clear-border-radius: var(--ms-border-radius-sm);--ms-count-clear-bg-hover: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);--ms-count-clear-color-hover: var(--ms-accent-color);--ms-count-clear-icon-size: calc(1.4 * var(--ms-rem));--ms-icon-clear: var(--ms-icon-remove);--ms-tooltip-color: var(--ms-tooltip-text-color);--ms-tooltip-padding: calc(.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));--ms-tooltip-border-radius: var(--ms-border-radius-lg);--ms-tooltip-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));--ms-tooltip-max-width: calc(32 * var(--ms-rem));--ms-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ms-tooltip-z-index: 10000;--ms-z-index-popover: 10000;--ms-selected-popover-width: calc(32 * var(--ms-rem));--ms-selected-popover-max-height: calc(32 * var(--ms-rem));--ms-selected-popover-border: 1px solid var(--ms-selected-popover-border-color);--ms-selected-popover-border-radius: var(--ms-border-radius-lg);--ms-selected-popover-box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--ms-selected-popover-header-padding: calc(.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));--ms-selected-popover-header-bg: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);--ms-selected-popover-header-border-bottom: 1px solid var(--ms-selected-popover-header-border-color);--ms-selected-popover-header-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));--ms-selected-popover-header-font-weight: var(--base-font-weight-semibold, 600);--ms-selected-popover-header-color: var(--ms-text-color-1);--ms-popover-close-size: calc(2.4 * var(--ms-rem));--ms-selected-popover-close-bg: transparent;--ms-selected-popover-close-color: var(--ms-text-color-3);--ms-selected-popover-close-font-size: calc(var(--base-font-size-xl, 2) * var(--ms-rem));--ms-selected-popover-close-border-radius: var(--ms-border-radius-sm);--ms-selected-popover-close-bg-hover: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);--ms-selected-popover-close-color-hover: var(--ms-accent-color);--ms-selected-popover-close-icon-size: calc(1.4 * var(--ms-rem));--ms-selected-popover-body-gap: calc(.4 * var(--ms-rem));--ms-selected-popover-body-padding: calc(.8 * var(--ms-rem));--ms-selected-popover-body-max-height: calc(28.8 * var(--ms-rem));--ms-font-size-2xs: calc(var(--base-font-size-2xs, 1) * var(--ms-rem));--ms-font-size-xs: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));--ms-font-size-sm: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));--ms-font-size-base: calc(var(--base-font-size-base, 1.6) * var(--ms-rem));--ms-font-size-lg: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem));--ms-font-weight-normal: var(--base-font-weight-normal, 400);--ms-font-weight-medium: var(--base-font-weight-medium, 500);--ms-font-weight-semibold: var(--base-font-weight-semibold, 600);--ms-line-height-none: 1;--ms-line-height-tight: var(--base-line-height-tight, 1.25);--ms-line-height-normal: var(--base-line-height-normal, 1.5);--ms-line-height-relaxed: var(--base-line-height-relaxed, 1.75);--ms-border-radius-sm: calc(var(--base-border-radius-sm, .4) * var(--ms-rem));--ms-border-radius-md: calc(var(--base-border-radius-md, .6) * var(--ms-rem));--ms-border-radius-lg: calc(var(--base-border-radius-lg, .8) * var(--ms-rem));--ms-border-radius: var(--ms-border-radius-md);--ms-spacing-xs: calc(.4 * var(--ms-rem));--ms-spacing-sm: calc(.8 * var(--ms-rem));--ms-spacing-md: calc(1.2 * var(--ms-rem));--ms-spacing-lg: calc(1.6 * var(--ms-rem));--ms-transition-fast: .15s;--ms-transition-normal: .2s;--ms-easing-snappy: cubic-bezier(.4, 0, .2, 1);--ms-placeholder-opacity: .6;--ms-disabled-input-opacity: .6;--ms-scrollbar-width: 8px;--ms-scrollbar-track-bg: transparent;--ms-scrollbar-thumb-bg: var(--ms-border-color);--ms-scrollbar-thumb-bg-hover: var(--ms-text-color-3);--ms-scrollbar-thumb-border-radius: 4px;--ms-debug-bg: var(--base-elevated-bg, light-dark(#f9fafb, #2b2b2b));--ms-debug-border-color: var(--ms-border-color);--ms-debug-text-color: var(--ms-text-color-1);--ms-debug-border-radius: var(--ms-border-radius-md);--ms-debug-summary-color: var(--ms-accent-color);--ms-debug-summary-bg-hover: var(--ms-primary-bg);--ms-debug-summary-outline-color: var(--ms-accent-color);--ms-debug-summary-border-radius: var(--ms-border-radius-sm);--ms-debug-stats-bg: var(--base-main-bg, light-dark(#ffffff, #1a1a1a));--ms-debug-stats-border-radius: var(--ms-border-radius-sm);--ms-debug-bullet-color: var(--ms-accent-color)}}@layer component{web-multiselect:not(:defined){display:block;min-height:calc(3.5 * var(--ms-rem));color:transparent!important;background:transparent}.ms__wrapper{display:flex;flex-direction:column;align-items:stretch}.ms__wrapper--inline{flex-direction:row;align-items:var(--ms-inline-align, center)}.ms{position:relative;width:100%}}@layer component{.ms__input-wrapper{position:relative;display:flex;align-items:center}.ms__input{box-sizing:border-box;width:100%;font-family:inherit;height:var(--ms-input-height);padding:var(--ms-input-padding);padding-right:var(--ms-input-padding-right);font-size:var(--ms-input-font-size);border:var(--ms-input-border);border-radius:var(--ms-input-border-radius);background:var(--ms-input-bg);color:var(--ms-input-color);cursor:pointer;transition:border var(--ms-transition-fast) var(--ms-easing-snappy)}.ms__input:hover:not(:focus):not(:disabled){border:var(--ms-input-border-hover)}.ms__input:focus{outline:none;border:var(--ms-input-border-focus)}.ms__input::placeholder{color:var(--ms-input-placeholder-color);opacity:0;transition:opacity var(--ms-transition-fast) var(--ms-easing-snappy)}:host([data-ready]) .ms__input::placeholder{opacity:var(--ms-placeholder-opacity)}.ms__input.ms__input--xs{font-size:var(--ms-input-size-xs-font);padding:var(--ms-input-size-xs-padding-v) var(--ms-input-size-xs-padding-h);padding-right:calc(var(--ms-input-size-xs-padding-h) * 2.5);height:var(--ms-input-size-xs-height)}.ms__input.ms__input--sm{font-size:var(--ms-input-size-sm-font);padding:var(--ms-input-size-sm-padding-v) var(--ms-input-size-sm-padding-h);padding-right:calc(var(--ms-input-size-sm-padding-h) * 2.5);height:var(--ms-input-size-sm-height)}.ms__input.ms__input--lg{font-size:var(--ms-input-size-lg-font);padding:var(--ms-input-size-lg-padding-v) var(--ms-input-size-lg-padding-h);padding-right:calc(var(--ms-input-size-lg-padding-h) * 2.5);height:var(--ms-input-size-lg-height)}.ms__input.ms__input--xl{font-size:var(--ms-input-size-xl-font);padding:var(--ms-input-size-xl-padding-v) var(--ms-input-size-xl-padding-h);padding-right:calc(var(--ms-input-size-xl-padding-h) * 2.5);height:var(--ms-input-size-xl-height)}.ms__toggle{position:absolute;right:var(--ms-toggle-right);top:50%;transform:var(--ms-transform-center-y);pointer-events:none;color:var(--ms-toggle-icon-color);transition:transform var(--ms-transition-fast) var(--ms-easing-snappy)}.ms--open .ms__toggle{transform:var(--ms-transform-center-y) rotate(var(--ms-transform-rotate-180));color:var(--ms-toggle-icon-color-open)}.ms__counter{position:absolute;right:var(--ms-counter-offset);top:50%;transform:var(--ms-transform-center-y);padding:var(--ms-counter-padding);background:var(--ms-counter-badge-bg);color:var(--ms-counter-badge-color);font-size:var(--ms-counter-font-size);font-weight:var(--ms-counter-font-weight);border-radius:var(--ms-counter-border-radius);cursor:pointer;transition:all var(--ms-transition-fast) var(--ms-easing-snappy)}.ms__counter:hover{background:var(--ms-counter-badge-bg-hover);transform:var(--ms-transform-center-y) scale(var(--ms-transform-scale-hover))}.ms__actions{display:flex;flex-wrap:nowrap;gap:var(--ms-actions-gap);padding:var(--ms-actions-padding);border-bottom:var(--ms-actions-border-bottom)}.ms__actions--wrap{flex-wrap:wrap}.ms__actions--sticky{position:sticky;top:0;z-index:var(--ms-z-index-sticky);background:var(--ms-actions-bg)}.ms__action-btn{flex:1;font-family:inherit;padding:var(--ms-action-btn-padding);font-size:var(--ms-action-btn-font-size);border:var(--ms-action-btn-border);border-radius:var(--ms-action-btn-border-radius);background:var(--ms-action-button-bg);color:var(--ms-action-button-color);cursor:pointer;transition:all var(--ms-transition-fast) var(--ms-easing-snappy)}.ms__action-btn:hover{background:var(--ms-action-button-bg-hover);border-color:var(--ms-action-button-border-color-hover)}.ms__action-btn:active{transform:scale(var(--ms-transform-scale-active))}.ms__action-btn:disabled,.ms__action-btn[disabled]{opacity:var(--ms-disabled-opacity);cursor:not-allowed;pointer-events:none}}@layer component{.ms__hint{display:none;position:fixed;z-index:var(--ms-z-index-popover);padding:var(--ms-hint-padding);background:var(--ms-hint-bg);border:var(--ms-hint-border);border-radius:var(--ms-hint-border-radius);box-shadow:var(--ms-hint-box-shadow);font-size:var(--ms-hint-font-size);color:var(--ms-hint-color);line-height:var(--ms-line-height-relaxed);max-width:100%}.ms__hint--visible{display:block}.ms__dropdown{display:none;position:fixed;font-family:inherit;z-index:var(--ms-z-index-dropdown);background:var(--ms-dropdown-bg);border:var(--ms-dropdown-border);border-radius:var(--ms-dropdown-border-radius);box-shadow:var(--ms-dropdown-box-shadow);max-height:var(--ms-options-max-height);overflow:hidden;color:var(--ms-dropdown-text-color)}.ms__dropdown--visible{display:flex;flex-direction:column}.ms__dropdown-inner{flex:1;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--ms-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg)}.ms__dropdown-inner::-webkit-scrollbar{width:var(--ms-scrollbar-width)}.ms__dropdown-inner::-webkit-scrollbar-track{background:var(--ms-scrollbar-track-bg)}.ms__dropdown-inner::-webkit-scrollbar-thumb{background:var(--ms-scrollbar-thumb-bg);border-radius:var(--ms-scrollbar-thumb-border-radius)}.ms__dropdown-inner::-webkit-scrollbar-thumb:hover{background:var(--ms-scrollbar-thumb-bg-hover)}.ms__dropdown--virtual{max-height:none}.ms__dropdown--virtual .ms__dropdown-inner{overflow-y:visible}.ms__badge-tooltip{position:fixed;z-index:var(--ms-tooltip-z-index);opacity:0;visibility:hidden;transition:opacity var(--ms-transition-normal) ease,visibility var(--ms-transition-normal) ease;background:var(--ms-tooltip-bg);color:var(--ms-tooltip-text-color);padding:var(--ms-tooltip-padding);border-radius:var(--ms-tooltip-border-radius);font-size:var(--ms-tooltip-font-size);line-height:var(--ms-line-height-relaxed);max-width:var(--ms-tooltip-max-width);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ms-tooltip-shadow);pointer-events:none}.ms__badge-tooltip--visible{opacity:1;visibility:visible}.ms__selected-popover{display:none;position:fixed;z-index:var(--ms-z-index-popover);background:var(--ms-selected-popover-bg);border:var(--ms-selected-popover-border);border-radius:var(--ms-selected-popover-border-radius);box-shadow:var(--ms-selected-popover-box-shadow);width:var(--ms-selected-popover-width);max-height:var(--ms-selected-popover-max-height);overflow:hidden}.ms__selected-popover--visible{display:flex;flex-direction:column}.ms__selected-popover--virtual{display:block;overflow:visible;max-height:none}.ms__selected-popover-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ms-selected-popover-header-padding);background:var(--ms-selected-popover-header-bg);border-bottom:var(--ms-selected-popover-header-border-bottom);font-size:var(--ms-selected-popover-header-font-size);font-weight:var(--ms-selected-popover-header-font-weight);color:var(--ms-selected-popover-header-color)}.ms__selected-popover-close{display:flex;align-items:center;justify-content:center;width:var(--ms-popover-close-size);height:var(--ms-popover-close-size);padding:0;border:none;background:var(--ms-selected-popover-close-bg);color:var(--ms-selected-popover-close-color);font-size:var(--ms-selected-popover-close-font-size);line-height:var(--ms-line-height-none);cursor:pointer;border-radius:var(--ms-selected-popover-close-border-radius);transition:all var(--ms-transition-fast) var(--ms-easing-snappy)}.ms__selected-popover-close:hover{background:var(--ms-selected-popover-close-bg-hover);color:var(--ms-selected-popover-close-color-hover)}.ms__selected-popover-close:before{content:"";display:block;width:var(--ms-selected-popover-close-icon-size);height:var(--ms-selected-popover-close-icon-size);background-color:currentColor;-webkit-mask:var(--ms-icon-remove) center / contain no-repeat;mask:var(--ms-icon-remove) center / contain no-repeat}.ms__selected-popover-body{display:flex;flex-direction:column;gap:var(--ms-selected-popover-body-gap);padding:var(--ms-selected-popover-body-padding);overflow-y:auto;max-height:var(--ms-selected-popover-body-max-height);scrollbar-width:thin;scrollbar-color:var(--ms-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg)}.ms__selected-popover-body::-webkit-scrollbar{width:var(--ms-scrollbar-width)}.ms__selected-popover-body::-webkit-scrollbar-track{background:var(--ms-scrollbar-track-bg)}.ms__selected-popover-body::-webkit-scrollbar-thumb{background:var(--ms-scrollbar-thumb-bg);border-radius:var(--ms-scrollbar-thumb-border-radius)}.ms__selected-popover-body::-webkit-scrollbar-thumb:hover{background:var(--ms-scrollbar-thumb-bg-hover)}.ms__selected-popover-body .ms__badge{width:100%;min-height:fit-content;line-height:var(--ms-line-height-relaxed)}.ms__selected-popover-body .ms__badge-text{flex:1;min-width:0;white-space:normal;word-wrap:break-word}.ms__selected-popover-body--virtual{display:block;max-height:none;padding:0}.ms__selected-popover-body--virtual .ms__badge{height:var(--ms-badge-height-virtual, 36px);min-height:var(--ms-badge-height-virtual, 36px);max-height:var(--ms-badge-height-virtual, 36px);margin-bottom:var(--ms-selected-popover-body-gap);overflow:hidden;box-sizing:border-box}.ms__selected-popover-body--virtual .ms__badge-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer component{.ms--disabled .ms__input{opacity:var(--ms-disabled-input-opacity);cursor:not-allowed;background:var(--ms-input-bg-disabled)}.ms--disabled .ms__toggle{opacity:var(--ms-disabled-input-opacity)}.ms--no-checkboxes .ms__option{gap:0;padding-left:var(--ms-option-padding-h)}.ms--no-checkboxes .ms__option-content{padding-left:0}}@layer component;@layer component{.ms__badges{display:flex;flex-wrap:wrap;gap:var(--ms-badges-gap);padding:0}.ms__badges:empty{display:none}.ms__badges--bottom{margin-top:var(--ms-badges-margin-bottom)}.ms__badges--top{margin-bottom:var(--ms-badges-margin-top);order:var(--ms-order-first)}.ms__badges--left{order:var(--ms-order-first);margin-right:var(--ms-badges-margin-left);justify-content:flex-end}.ms__badges--right{margin-left:var(--ms-badges-margin-right);justify-content:flex-start}.ms__badge{display:inline-flex;align-items:center;height:var(--ms-badge-height);font-size:var(--ms-badge-font-size);font-weight:var(--ms-badge-font-weight);line-height:var(--ms-line-height-none);border-radius:var(--ms-badge-border-radius);overflow:hidden;max-width:100%}.ms__badge-text{display:flex;align-items:center;box-sizing:border-box;height:100%;padding:var(--ms-badge-text-padding);background:var(--ms-badge-text-bg);color:var(--ms-badge-text-color);border:var(--ms-badge-text-border);border-right:none;border-radius:var(--ms-badge-border-radius) 0 0 var(--ms-badge-border-radius);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ms-transition-normal) ease,color var(--ms-transition-normal) ease}.ms__badge:hover .ms__badge-text{background:var(--ms-badge-text-bg-hover, var(--ms-badge-text-bg));color:var(--ms-badge-text-color-hover, var(--ms-badge-text-color))}.ms__badge-remove{display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:inherit;width:var(--ms-badge-remove-width);height:100%;flex-shrink:0;background:var(--ms-badge-remove-bg);color:var(--ms-badge-remove-color);border:var(--ms-badge-remove-border);border-left:none;border-radius:0 var(--ms-badge-border-radius) var(--ms-badge-border-radius) 0;cursor:pointer;transition:background-color var(--ms-transition-normal) ease;font-size:var(--ms-badge-remove-font-size)}.ms__badge-remove:hover{background:var(--ms-badge-remove-bg-hover)}.ms__badge-remove:focus{outline:none}.ms__badge-remove:focus-visible{outline:none;box-shadow:var(--ms-badge-remove-box-shadow-focus)}.ms__badge-remove:before{content:"";display:block;width:var(--ms-badge-remove-icon-size);height:var(--ms-badge-remove-icon-size);background-color:currentColor;-webkit-mask:var(--ms-icon-remove) center / contain no-repeat;mask:var(--ms-icon-remove) center / contain no-repeat}.ms__badge--counter{cursor:pointer}.ms__badge--counter .ms__badge-text{background:var(--ms-badge-counter-text-bg);color:var(--ms-badge-counter-text-color);border:var(--ms-badge-counter-border);border-right:none}.ms__badge--counter .ms__badge-remove{background:var(--ms-badge-counter-remove-bg);color:var(--ms-badge-counter-remove-color);border:var(--ms-badge-counter-border);border-left:none}.ms__badge--counter .ms__badge-remove:hover{background:var(--ms-badge-counter-remove-bg-hover)}.ms__badge--more,.ms__badge[data-action=show-selected]{cursor:pointer}}@layer component{.ms__count-display{display:flex;align-items:center}.ms__count-display:empty{display:none}.ms__count-display--bottom{margin-top:var(--ms-count-display-margin-bottom)}.ms__count-display--top{margin-bottom:var(--ms-count-display-margin-top);order:var(--ms-order-first)}.ms__count-display--left{order:var(--ms-order-first);margin-right:var(--ms-count-display-margin-left);justify-content:flex-start}.ms__count-display--right{margin-left:var(--ms-count-display-margin-right);justify-content:flex-end}.ms__counter-wrapper{display:inline-flex;align-items:center;gap:var(--ms-counter-wrapper-gap);background:var(--ms-counter-wrapper-bg);border:var(--ms-counter-wrapper-border);border-radius:var(--ms-counter-wrapper-border-radius);padding:var(--ms-counter-wrapper-padding);transition:all var(--ms-transition-fast) var(--ms-easing-snappy)}.ms__counter-wrapper:hover{background:var(--ms-counter-wrapper-bg-hover);border-color:var(--ms-counter-wrapper-border-color-hover)}.ms__count-text{display:inline-flex;align-items:center;background:var(--ms-count-text-bg);border:var(--ms-count-text-border);padding:0;font-size:var(--ms-count-text-font-size);color:var(--ms-count-text-color);cursor:pointer;transition:color var(--ms-transition-fast) var(--ms-easing-snappy)}.ms__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ms-count-clear-size);height:var(--ms-count-clear-size);padding:0;border:none;background:var(--ms-count-clear-bg);color:var(--ms-count-clear-color);font-size:var(--ms-count-clear-font-size);line-height:var(--ms-line-height-none);cursor:pointer;border-radius:var(--ms-count-clear-border-radius);transition:all var(--ms-transition-fast) var(--ms-easing-snappy)}.ms__count-clear:hover{background:var(--ms-count-clear-bg-hover);color:var(--ms-count-clear-color-hover)}.ms__count-clear:before{content:"";display:block;width:var(--ms-count-clear-icon-size);height:var(--ms-count-clear-icon-size);background-color:currentColor;-webkit-mask:var(--ms-icon-clear) center / contain no-repeat;mask:var(--ms-icon-clear) center / contain no-repeat}}@layer component{.ms__debug-info{margin-top:calc(.4 * var(--ms-rem));padding:calc(.4 * var(--ms-rem));background-color:var(--ms-debug-bg);border:1px solid var(--ms-debug-border-color);border-radius:var(--ms-debug-border-radius);font-size:calc(1.2 * var(--ms-rem));color:var(--ms-debug-text-color)}.ms__debug-info details summary{cursor:pointer;font-weight:600;color:var(--ms-debug-summary-color);-webkit-user-select:none;user-select:none;padding:calc(.4 * var(--ms-rem));border-radius:var(--ms-debug-summary-border-radius)}.ms__debug-info details summary:hover{background-color:var(--ms-debug-summary-bg-hover)}.ms__debug-info details summary:focus{outline:2px solid var(--ms-debug-summary-outline-color);outline-offset:2px}.ms__debug-info .ms__debug-stats{display:flex;flex-direction:column;gap:calc(.4 * var(--ms-rem));margin-top:calc(.4 * var(--ms-rem));padding:calc(.4 * var(--ms-rem));background-color:var(--ms-debug-stats-bg);border-radius:var(--ms-debug-stats-border-radius)}.ms__debug-info .ms__debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:calc(1 * var(--ms-rem))}.ms__debug-info .ms__debug-stats span:before{content:"•";margin-right:calc(.4 * var(--ms-rem));color:var(--ms-debug-bullet-color)}}@layer component{.ms__options{padding:var(--ms-options-padding);scrollbar-width:thin;scrollbar-color:var(--ms-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg)}.ms__options::-webkit-scrollbar{width:var(--ms-scrollbar-width)}.ms__options::-webkit-scrollbar-track{background:var(--ms-scrollbar-track-bg)}.ms__options::-webkit-scrollbar-thumb{background:var(--ms-scrollbar-thumb-bg);border-radius:var(--ms-scrollbar-thumb-border-radius)}.ms__options::-webkit-scrollbar-thumb:hover{background:var(--ms-scrollbar-thumb-bg-hover)}.ms__options--virtual .ms__option{height:var(--ms-option-height, 50px);min-height:var(--ms-option-height, 50px);max-height:var(--ms-option-height, 50px);overflow:hidden;box-sizing:border-box}.ms__group+.ms__group{border-top:var(--ms-group-border-top);margin-top:var(--ms-group-margin-top);padding-top:var(--ms-group-padding-top)}.ms__group-label{padding:var(--ms-group-label-padding);font-size:var(--ms-group-label-font-size);font-weight:var(--ms-group-label-font-weight);color:var(--ms-group-label-color);text-transform:var(--ms-group-label-transform);letter-spacing:var(--ms-group-label-letter-spacing)}.ms__option{display:flex;align-items:var(--ms-checkbox-align, center);gap:var(--ms-option-gap);padding:var(--ms-option-padding);color:var(--ms-option-text-color);background:var(--ms-option-bg);cursor:pointer}.ms__option:hover{background:var(--ms-option-bg-hover);color:var(--ms-option-color-hover, inherit)}.ms__option--focused{background:var(--ms-option-bg-focused);color:var(--ms-option-color-focused, inherit);outline:var(--ms-option-outline-focused);outline-offset:var(--ms-option-focus-outline-offset)}.ms__option--matched{background:var(--ms-option-bg-matched);color:var(--ms-option-color-matched, inherit);border-left:var(--ms-option-border-matched)}.ms__option--selected{background:var(--ms-option-bg-selected)}.ms__option--selected:hover{background:var(--ms-option-bg-selected-hover, var(--ms-option-bg-selected))}.ms__option--disabled{opacity:var(--ms-disabled-opacity);cursor:not-allowed;background:var(--ms-option-disabled-bg)}.ms__option--disabled:hover{background:var(--ms-option-disabled-bg)}.ms__option--focused:hover{background:var(--ms-option-bg-focused-hover);color:var(--ms-option-color-focused-hover, var(--ms-option-color-focused, var(--ms-option-text-color)))}.ms__option--matched:hover{background:var(--ms-option-bg-matched-hover);color:var(--ms-option-color-matched-hover, var(--ms-option-color-matched, var(--ms-option-text-color)))}.ms__option--selected.ms__option--focused{background:var(--ms-option-bg-selected-focused);outline:var(--ms-option-outline-focused);outline-offset:var(--ms-option-focus-outline-offset)}.ms__option--selected.ms__option--matched{background:var(--ms-option-bg-selected-matched);border-left:var(--ms-option-border-matched)}.ms__option--disabled.ms__option--selected{background:var(--ms-option-bg-disabled-selected)}.ms__option--disabled.ms__option--focused{outline:none}.ms__option[data-checkbox-align=top]{--ms-checkbox-align: flex-start}.ms__option[data-checkbox-align=bottom]{--ms-checkbox-align: flex-end}.ms__checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;flex-shrink:0;position:relative;margin-top:var(--ms-checkbox-margin-top);margin-right:var(--ms-checkbox-margin-right);margin-bottom:var(--ms-checkbox-margin-bottom);margin-left:var(--ms-checkbox-margin-left);width:var(--ms-checkbox-size);height:var(--ms-checkbox-size);transform:scale(var(--ms-checkbox-scale));transform-origin:top left;cursor:pointer;background:var(--ms-checkbox-bg);border:var(--ms-checkbox-border);border-radius:var(--ms-checkbox-border-radius);transition:background-color .15s ease,border-color .15s ease}.ms__checkbox:after{content:"";position:absolute;display:none;left:50%;top:40%;width:30%;height:55%;transform:translate(-50%,-50%) rotate(45deg);border:solid var(--ms-checkbox-checkmark-color);border-width:0 2px 2px 0}.ms__checkbox:hover:not(:disabled){border-color:var(--ms-checkbox-hover-border-color)}.ms__checkbox:checked{background:var(--ms-checkbox-checked-bg);border:var(--ms-checkbox-checked-border)}.ms__checkbox:checked:after{display:block}.ms__checkbox:checked:hover:not(:disabled){background:var(--ms-checkbox-checked-bg-hover);border-color:var(--ms-checkbox-checked-border-color-hover)}.ms__checkbox:focus-visible{outline:2px solid var(--ms-checkbox-checked-bg);outline-offset:2px}.ms__checkbox:disabled{cursor:not-allowed;background:var(--ms-checkbox-disabled-bg);border:var(--ms-checkbox-disabled-border);opacity:.6}.ms__checkbox:disabled:checked{background:var(--ms-checkbox-disabled-bg)}.ms__option--disabled .ms__checkbox{cursor:not-allowed}.ms__option-content{flex:1;display:flex;align-items:center;gap:var(--ms-option-content-gap);min-width:0}.ms__option-icon{flex-shrink:0;width:var(--ms-option-icon-size);height:var(--ms-option-icon-size);display:flex;align-items:center;justify-content:center;font-size:var(--ms-option-icon-font-size)}.ms__option-icon svg{width:100%;height:100%;fill:currentColor}.ms__option-text{flex:1;min-width:0}.ms__option-title{font-size:var(--ms-option-title-font-size);color:var(--ms-option-title-color);line-height:var(--ms-line-height-relaxed)}.ms__option:hover .ms__option-title{color:var(--ms-option-title-color-hover, var(--ms-option-title-color))}.ms__option--selected .ms__option-title{color:var(--ms-option-title-color-selected, var(--ms-option-title-color))}.ms__option--selected:hover .ms__option-title{color:var(--ms-option-title-color-selected-hover, var(--ms-option-title-color-selected, var(--ms-option-title-color)))}.ms__option-title mark{background:var(--ms-option-mark-bg);color:var(--ms-option-mark-color);font-weight:var(--ms-option-mark-font-weight)}.ms__option-subtitle{margin-top:var(--ms-option-subtitle-margin-top);font-size:var(--ms-option-subtitle-font-size);color:var(--ms-option-subtitle-color);line-height:var(--ms-option-subtitle-line-height)}.ms__option:hover .ms__option-subtitle{color:var(--ms-option-subtitle-color-hover, var(--ms-option-subtitle-color))}.ms__option--selected .ms__option-subtitle{color:var(--ms-option-subtitle-color-selected, var(--ms-option-subtitle-color))}.ms__option--selected:hover .ms__option-subtitle{color:var(--ms-option-subtitle-color-selected-hover, var(--ms-option-subtitle-color-selected, var(--ms-option-subtitle-color)))}.ms__empty{padding:var(--ms-empty-padding);text-align:center;font-size:var(--ms-empty-font-size);color:var(--ms-empty-color)}.ms__loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ms-loader-padding);gap:var(--ms-loader-gap)}.ms__loading-text{font-size:var(--ms-loading-text-font-size);color:var(--ms-loading-color)}}@layer component{.ms--rtl .ms__input-wrapper{direction:rtl}.ms--rtl .ms__input{text-align:right;padding-left:var(--ms-input-padding-right);padding-right:var(--ms-input-padding-h)}.ms--rtl .ms__toggle{left:var(--ms-toggle-right)!important;right:auto!important}.ms--rtl .ms__counter{left:var(--ms-counter-offset)!important;right:auto!important}.ms--rtl .ms__dropdown{direction:rtl;text-align:right}.ms--rtl .ms__option{flex-direction:row-reverse}.ms--rtl .ms__checkbox{margin-left:var(--ms-spacing-sm);margin-right:0}.ms--rtl .ms__option-content{text-align:right}.ms--rtl .ms__option-icon{margin-left:var(--ms-spacing-xs);margin-right:0}.ms--rtl .ms__badges{direction:rtl}.ms--rtl .ms__badges--right{margin-left:0;margin-right:var(--ms-badges-margin-right)}.ms--rtl .ms__badges--left{margin-right:0;margin-left:var(--ms-badges-margin-left)}.ms--rtl .ms__badge{flex-direction:row-reverse}.ms--rtl .ms__badge-remove{border-radius:var(--ms-badge-border-radius) 0 0 var(--ms-badge-border-radius);border-left:var(--ms-badge-remove-border);border-right:none}.ms--rtl .ms__badge-text{border-radius:0 var(--ms-badge-border-radius) var(--ms-badge-border-radius) 0;border-right:var(--ms-badge-text-border);border-left:none}.ms--rtl .ms__count-display{direction:rtl}.ms--rtl .ms__count-display--right{margin-left:0;margin-right:var(--ms-count-display-margin-right)}.ms--rtl .ms__count-display--left{margin-right:0;margin-left:var(--ms-count-display-margin-left)}.ms--rtl .ms__counter-wrapper{flex-direction:row-reverse}.ms--rtl .ms__selected-popover{direction:rtl;text-align:right}.ms--rtl .ms__actions{direction:rtl}.ms--rtl .ms__group-label,.ms--rtl .ms__empty{text-align:right}.ms--rtl .ms__hint{direction:rtl;text-align:right}}@layer overrides{:host-context([data-theme="dark"]),:host-context([data-bs-theme="dark"]),:host-context(.dark){color-scheme:dark}:host-context([data-theme="light"]),:host-context([data-bs-theme="light"]),:host-context(.light){color-scheme:light}:host([data-theme="dark"]){color-scheme:dark}:host([data-theme="light"]){color-scheme:light}}`, Ss = typeof HTMLElement < "u" ? HTMLElement : class {
|
|
@@ -2510,6 +2553,8 @@ const Cs = `@layer variables,component,overrides;@layer variables{:host{display:
|
|
|
2510
2553
|
// Strings
|
|
2511
2554
|
{ attr: "search-hint", key: "searchHint", parser: "string-or-undefined" },
|
|
2512
2555
|
{ attr: "search-placeholder", key: "searchPlaceholder", parser: "string", default: "Search..." },
|
|
2556
|
+
{ attr: "select-placeholder", key: "selectPlaceholder", parser: "string", default: "Pick an option..." },
|
|
2557
|
+
{ attr: "no-data-placeholder", key: "noDataPlaceholder", parser: "string-or-undefined" },
|
|
2513
2558
|
{ attr: "dropdown-min-width", key: "dropdownMinWidth", parser: "string-or-undefined" },
|
|
2514
2559
|
{ attr: "dropdown-max-width", key: "dropdownMaxWidth", parser: "string-or-undefined" },
|
|
2515
2560
|
{ attr: "max-height", key: "maxHeight", parser: "string", default: "20rem" },
|
|
@@ -2593,6 +2638,7 @@ const Cs = `@layer variables,component,overrides;@layer variables{:host{display:
|
|
|
2593
2638
|
{ attr: "badges-threshold", key: "badgesThreshold", parser: "int" },
|
|
2594
2639
|
{ attr: "badges-max-visible", key: "badgesMaxVisible", parser: "int" },
|
|
2595
2640
|
{ attr: "min-search-length", key: "minSearchLength", parser: "int", default: 0 },
|
|
2641
|
+
{ attr: "search-debounce", key: "searchDebounce", parser: "int", default: 0 },
|
|
2596
2642
|
{ attr: "virtual-scroll-threshold", key: "virtualScrollThreshold", parser: "int", default: 100 },
|
|
2597
2643
|
{ attr: "option-height", key: "optionHeight", parser: "int", default: 50 },
|
|
2598
2644
|
{ attr: "badge-height", key: "badgeHeight", parser: "int", default: 36 },
|
|
@@ -2614,7 +2660,7 @@ const Cs = `@layer variables,component,overrides;@layer variables{:host{display:
|
|
|
2614
2660
|
{ attr: "show-counter", key: "isCounterShown", parser: "bool-default-false" },
|
|
2615
2661
|
{ attr: "enable-virtual-scroll", key: "isVirtualScrollEnabled", parser: "bool-default-false" },
|
|
2616
2662
|
{ attr: "enable-badge-tooltips", key: "isBadgeTooltipsEnabled", parser: "bool-default-false" }
|
|
2617
|
-
], Ts = new Map(Ce.map((
|
|
2663
|
+
], Ts = new Map(Ce.map((o) => [o.attr, o])), je = [
|
|
2618
2664
|
{ key: "valueMember", field: "_valueMember" },
|
|
2619
2665
|
{ key: "displayValueMember", field: "_displayValueMember" },
|
|
2620
2666
|
{ key: "searchValueMember", field: "_searchValueMember" },
|
|
@@ -2622,26 +2668,33 @@ const Cs = `@layer variables,component,overrides;@layer variables{:host{display:
|
|
|
2622
2668
|
{ key: "subtitleMember", field: "_subtitleMember" },
|
|
2623
2669
|
{ key: "groupMember", field: "_groupMember" },
|
|
2624
2670
|
{ key: "disabledMember", field: "_disabledMember" }
|
|
2671
|
+
], Is = [
|
|
2672
|
+
{ key: "valueMember", member: "value" },
|
|
2673
|
+
{ key: "displayValueMember", member: "label" },
|
|
2674
|
+
{ key: "groupMember", member: "group" },
|
|
2675
|
+
{ key: "iconMember", member: "icon" },
|
|
2676
|
+
{ key: "subtitleMember", member: "subtitle" },
|
|
2677
|
+
{ key: "disabledMember", member: "disabled" }
|
|
2625
2678
|
];
|
|
2626
|
-
function
|
|
2679
|
+
function Ue(o, e) {
|
|
2627
2680
|
if (e === null || e === "")
|
|
2628
|
-
switch (
|
|
2681
|
+
switch (o.parser) {
|
|
2629
2682
|
case "bool-default-true":
|
|
2630
2683
|
return !0;
|
|
2631
2684
|
case "bool-default-false":
|
|
2632
2685
|
return !1;
|
|
2633
2686
|
default:
|
|
2634
|
-
return
|
|
2687
|
+
return o.default;
|
|
2635
2688
|
}
|
|
2636
|
-
switch (
|
|
2689
|
+
switch (o.parser) {
|
|
2637
2690
|
case "string":
|
|
2638
2691
|
case "string-or-undefined":
|
|
2639
2692
|
return e;
|
|
2640
2693
|
case "enum":
|
|
2641
|
-
return
|
|
2694
|
+
return o.enumValues.includes(e) ? e : o.default;
|
|
2642
2695
|
case "int": {
|
|
2643
2696
|
const t = parseInt(e);
|
|
2644
|
-
return isNaN(t) ?
|
|
2697
|
+
return isNaN(t) ? o.default : t;
|
|
2645
2698
|
}
|
|
2646
2699
|
case "bool-default-true":
|
|
2647
2700
|
return e !== "false";
|
|
@@ -2653,7 +2706,7 @@ const Se = /* @__PURE__ */ new Set();
|
|
|
2653
2706
|
function ct() {
|
|
2654
2707
|
return Array.from(Se);
|
|
2655
2708
|
}
|
|
2656
|
-
class
|
|
2709
|
+
class Le extends Ss {
|
|
2657
2710
|
constructor() {
|
|
2658
2711
|
super();
|
|
2659
2712
|
d(this, "picker");
|
|
@@ -2662,6 +2715,7 @@ class Ae extends Ss {
|
|
|
2662
2715
|
d(this, "internals");
|
|
2663
2716
|
// Properties for complex data (not attributes)
|
|
2664
2717
|
d(this, "_options");
|
|
2718
|
+
d(this, "_hasDeclarativeOptions", !1);
|
|
2665
2719
|
// Member/Callback properties
|
|
2666
2720
|
d(this, "_valueMember");
|
|
2667
2721
|
d(this, "_getValueCallback");
|
|
@@ -2696,6 +2750,11 @@ class Ae extends Ss {
|
|
|
2696
2750
|
d(this, "_getCounterCallback");
|
|
2697
2751
|
// Action buttons
|
|
2698
2752
|
d(this, "_actionButtons");
|
|
2753
|
+
// Batch-update state (setAttributes): collects per-attribute changes so a group of
|
|
2754
|
+
// attribute writes applies as a single in-place update instead of one re-render each.
|
|
2755
|
+
d(this, "_batchDepth", 0);
|
|
2756
|
+
d(this, "_batchPartial", {});
|
|
2757
|
+
d(this, "_batchNeedsReinit", !1);
|
|
2699
2758
|
// Event callbacks
|
|
2700
2759
|
d(this, "_beforeSearchCallback");
|
|
2701
2760
|
d(this, "_searchCallback");
|
|
@@ -2736,52 +2795,92 @@ class Ae extends Ss {
|
|
|
2736
2795
|
connectedCallback() {
|
|
2737
2796
|
Se.add(this), this.render();
|
|
2738
2797
|
const t = this.parseDeclarativeOptions();
|
|
2739
|
-
t && (this._options && this._options.length > 0 && x.warn("[MultiSelectElement] Both declarative <option> elements and programmatic .options detected. Using declarative options."), this._options = t), this.initializePicker();
|
|
2798
|
+
t && (this._options && this._options.length > 0 && x.warn("[MultiSelectElement] Both declarative <option> elements and programmatic .options detected. Using declarative options."), this._options = t, this._hasDeclarativeOptions = !0), this.initializePicker();
|
|
2740
2799
|
}
|
|
2741
2800
|
disconnectedCallback() {
|
|
2742
2801
|
Se.delete(this), this.picker && this.picker.destroy();
|
|
2743
2802
|
}
|
|
2744
|
-
attributeChangedCallback(t,
|
|
2745
|
-
var
|
|
2746
|
-
if (
|
|
2803
|
+
attributeChangedCallback(t, s, i) {
|
|
2804
|
+
var a;
|
|
2805
|
+
if (s === i || !this.picker || t === "initial-values") return;
|
|
2747
2806
|
if (t === "show-debug-info") {
|
|
2748
|
-
const
|
|
2749
|
-
|
|
2807
|
+
const n = this.shadow.querySelector(".ms__debug-info");
|
|
2808
|
+
n && n.remove(), i === "true" && this.renderDebugInfo();
|
|
2750
2809
|
return;
|
|
2751
2810
|
}
|
|
2752
2811
|
const r = Ts.get(t);
|
|
2753
2812
|
if (r) {
|
|
2754
|
-
const
|
|
2755
|
-
if (this.
|
|
2813
|
+
const n = Ue(r, i), l = (a = je.find((u) => u.key === r.key)) == null ? void 0 : a.field, c = n === void 0 && l ? this[l] : n;
|
|
2814
|
+
if (this._batchDepth > 0) {
|
|
2815
|
+
this._batchPartial[r.key] = c;
|
|
2816
|
+
return;
|
|
2817
|
+
}
|
|
2818
|
+
const h = { [r.key]: c };
|
|
2819
|
+
if (this.picker.updateOptions(h)) return;
|
|
2820
|
+
}
|
|
2821
|
+
if (this._batchDepth > 0) {
|
|
2822
|
+
this._batchNeedsReinit = !0;
|
|
2823
|
+
return;
|
|
2756
2824
|
}
|
|
2757
2825
|
this.reinitialize();
|
|
2758
2826
|
}
|
|
2827
|
+
/**
|
|
2828
|
+
* Set several attributes in one in-place update — a single re-render instead of one per
|
|
2829
|
+
* attribute (and a single reinit at most if any change is structural). Keys are attribute
|
|
2830
|
+
* names in kebab-case, exactly as `setAttribute`. A value of `null`/`undefined`/`false`
|
|
2831
|
+
* removes the attribute; `true` sets it to an empty string; anything else is stringified.
|
|
2832
|
+
*
|
|
2833
|
+
* @example
|
|
2834
|
+
* el.setAttributes({
|
|
2835
|
+
* 'search-placeholder': t('search'),
|
|
2836
|
+
* 'select-placeholder': t('pick'),
|
|
2837
|
+
* 'no-data-placeholder': t('noData'),
|
|
2838
|
+
* });
|
|
2839
|
+
*/
|
|
2840
|
+
setAttributes(t) {
|
|
2841
|
+
this._batchDepth++;
|
|
2842
|
+
try {
|
|
2843
|
+
for (const [r, a] of Object.entries(t))
|
|
2844
|
+
a == null || a === !1 ? this.removeAttribute(r) : this.setAttribute(r, a === !0 ? "" : String(a));
|
|
2845
|
+
} finally {
|
|
2846
|
+
this._batchDepth--;
|
|
2847
|
+
}
|
|
2848
|
+
if (this._batchDepth > 0) return;
|
|
2849
|
+
const s = this._batchPartial, i = this._batchNeedsReinit;
|
|
2850
|
+
if (this._batchPartial = {}, this._batchNeedsReinit = !1, !!this.picker) {
|
|
2851
|
+
if (i) {
|
|
2852
|
+
this.reinitialize();
|
|
2853
|
+
return;
|
|
2854
|
+
}
|
|
2855
|
+
Object.keys(s).length > 0 && (this.picker.updateOptions(s) || this.reinitialize());
|
|
2856
|
+
}
|
|
2857
|
+
}
|
|
2759
2858
|
render() {
|
|
2760
2859
|
this.containerElement = document.createElement("div"), this.containerElement.setAttribute("data-multiselect", ""), this.className && (this.containerElement.className = this.className), this.shadow.appendChild(this.containerElement), this.getAttribute("show-debug-info") === "true" && this.renderDebugInfo();
|
|
2761
2860
|
}
|
|
2762
2861
|
renderDebugInfo() {
|
|
2763
2862
|
const t = this.shadow.querySelector(".ms__debug-info");
|
|
2764
2863
|
t && t.remove();
|
|
2765
|
-
const
|
|
2766
|
-
|
|
2864
|
+
const s = document.createElement("div");
|
|
2865
|
+
s.className = "ms__debug-info";
|
|
2767
2866
|
const i = document.createElement("details"), r = document.createElement("summary");
|
|
2768
2867
|
r.textContent = "Debug Info";
|
|
2769
|
-
const
|
|
2770
|
-
|
|
2868
|
+
const a = document.createElement("div");
|
|
2869
|
+
a.className = "ms__debug-stats", i.appendChild(r), i.appendChild(a), s.appendChild(i), this.shadow.appendChild(s), this.updateDebugInfo();
|
|
2771
2870
|
}
|
|
2772
2871
|
updateDebugInfo() {
|
|
2773
|
-
var
|
|
2872
|
+
var m, b;
|
|
2774
2873
|
const t = this.shadow.querySelector(".ms__debug-stats");
|
|
2775
2874
|
if (!t || !this.picker) return;
|
|
2776
|
-
const
|
|
2875
|
+
const s = "1.12.0-rc04", i = ct().length, a = this.picker.getSelected().length, n = ((m = this._options) == null ? void 0 : m.length) || 0, l = this.picker, c = l.isOpen || !1, h = l.searchTerm || "", p = l.isLoading || !1, u = ((b = l.filteredOptions) == null ? void 0 : b.length) || 0;
|
|
2777
2876
|
t.innerHTML = `
|
|
2778
|
-
<span>Version: ${
|
|
2877
|
+
<span>Version: ${s}</span>
|
|
2779
2878
|
<span>Total Instances: ${i}</span>
|
|
2780
|
-
<span>Options: ${
|
|
2879
|
+
<span>Options: ${n}</span>
|
|
2781
2880
|
<span>Filtered: ${u}</span>
|
|
2782
|
-
<span>Selected: ${
|
|
2881
|
+
<span>Selected: ${a}</span>
|
|
2783
2882
|
<span>Dropdown: ${c ? "Open" : "Closed"}</span>
|
|
2784
|
-
<span>Search: ${
|
|
2883
|
+
<span>Search: ${h || "none"}</span>
|
|
2785
2884
|
<span>Loading: ${p ? "Yes" : "No"}</span>
|
|
2786
2885
|
`, setTimeout(() => {
|
|
2787
2886
|
this.getAttribute("show-debug-info") === "true" && this.updateDebugInfo();
|
|
@@ -2792,67 +2891,79 @@ class Ae extends Ss {
|
|
|
2792
2891
|
* Returns array of options in the format expected by the picker
|
|
2793
2892
|
*/
|
|
2794
2893
|
parseDeclarativeOptions() {
|
|
2795
|
-
var r,
|
|
2796
|
-
const t = [],
|
|
2797
|
-
if (
|
|
2894
|
+
var r, a, n, l;
|
|
2895
|
+
const t = [], s = Array.from(this.children);
|
|
2896
|
+
if (s.length === 0)
|
|
2798
2897
|
return null;
|
|
2799
2898
|
let i = !1;
|
|
2800
|
-
for (const c of
|
|
2899
|
+
for (const c of s)
|
|
2801
2900
|
if (c.tagName === "OPTION") {
|
|
2802
|
-
const
|
|
2803
|
-
value:
|
|
2804
|
-
label: ((
|
|
2901
|
+
const h = c, p = {
|
|
2902
|
+
value: h.value || ((r = h.textContent) == null ? void 0 : r.trim()) || "",
|
|
2903
|
+
label: ((a = h.textContent) == null ? void 0 : a.trim()) || h.value || ""
|
|
2805
2904
|
};
|
|
2806
|
-
|
|
2905
|
+
h.hasAttribute("selected") && (this._declarativeSelectedValues || (this._declarativeSelectedValues = []), this._declarativeSelectedValues.push(p.value)), h.hasAttribute("disabled") && (p.disabled = !0), h.hasAttribute("data-icon") && (p.icon = h.getAttribute("data-icon")), h.hasAttribute("data-subtitle") && (p.subtitle = h.getAttribute("data-subtitle")), t.push(p), i = !0;
|
|
2807
2906
|
} else if (c.tagName === "OPTGROUP") {
|
|
2808
|
-
const
|
|
2809
|
-
for (const
|
|
2810
|
-
const
|
|
2811
|
-
value:
|
|
2812
|
-
label: ((l =
|
|
2907
|
+
const h = c, p = h.label || h.getAttribute("label") || "Group", u = Array.from(h.querySelectorAll("option"));
|
|
2908
|
+
for (const m of u) {
|
|
2909
|
+
const b = {
|
|
2910
|
+
value: m.value || ((n = m.textContent) == null ? void 0 : n.trim()) || "",
|
|
2911
|
+
label: ((l = m.textContent) == null ? void 0 : l.trim()) || m.value || "",
|
|
2813
2912
|
group: p
|
|
2814
2913
|
};
|
|
2815
|
-
|
|
2914
|
+
m.hasAttribute("selected") && (this._declarativeSelectedValues || (this._declarativeSelectedValues = []), this._declarativeSelectedValues.push(b.value)), m.hasAttribute("disabled") && (b.disabled = !0), m.hasAttribute("data-icon") && (b.icon = m.getAttribute("data-icon")), m.hasAttribute("data-subtitle") && (b.subtitle = m.getAttribute("data-subtitle")), t.push(b), i = !0;
|
|
2816
2915
|
}
|
|
2817
2916
|
}
|
|
2818
|
-
return i ? (x.debug(`[MultiSelectElement] Parsed ${t.length} declarative options from Light DOM`),
|
|
2917
|
+
return i ? (x.debug(`[MultiSelectElement] Parsed ${t.length} declarative options from Light DOM`), s.forEach((c) => {
|
|
2819
2918
|
(c.tagName === "OPTION" || c.tagName === "OPTGROUP") && c.remove();
|
|
2820
2919
|
}), t) : null;
|
|
2821
2920
|
}
|
|
2822
2921
|
/** Parse all observed attributes via ATTRIBUTE_TABLE into a partial config object. */
|
|
2823
2922
|
parseAttributesFromTable() {
|
|
2824
2923
|
const t = {};
|
|
2825
|
-
for (const
|
|
2826
|
-
const i =
|
|
2827
|
-
i !== void 0 && (t[
|
|
2924
|
+
for (const s of Ce) {
|
|
2925
|
+
const i = Ue(s, this.getAttribute(s.attr));
|
|
2926
|
+
i !== void 0 && (t[s.key] = i);
|
|
2828
2927
|
}
|
|
2829
2928
|
return t;
|
|
2830
2929
|
}
|
|
2831
2930
|
initializePicker() {
|
|
2832
2931
|
if (!this.containerElement) return;
|
|
2833
2932
|
let t;
|
|
2834
|
-
const
|
|
2835
|
-
if (
|
|
2933
|
+
const s = this.getAttribute("data-options");
|
|
2934
|
+
if (s && this._options === void 0)
|
|
2836
2935
|
try {
|
|
2837
|
-
t = JSON.parse(
|
|
2838
|
-
} catch (
|
|
2839
|
-
x.error("[MultiSelectElement] Failed to parse data-options:",
|
|
2936
|
+
t = JSON.parse(s);
|
|
2937
|
+
} catch (a) {
|
|
2938
|
+
x.error("[MultiSelectElement] Failed to parse data-options:", a);
|
|
2840
2939
|
}
|
|
2841
2940
|
let i;
|
|
2842
2941
|
if (this._declarativeSelectedValues && this._declarativeSelectedValues.length > 0)
|
|
2843
2942
|
i = this._declarativeSelectedValues, x.debug(`[MultiSelectElement] Using ${i.length} declaratively selected values`);
|
|
2844
2943
|
else {
|
|
2845
|
-
const
|
|
2846
|
-
if (
|
|
2944
|
+
const a = this.getAttribute("initial-values");
|
|
2945
|
+
if (a)
|
|
2847
2946
|
try {
|
|
2848
|
-
i = JSON.parse(
|
|
2849
|
-
} catch (
|
|
2850
|
-
x.error("[MultiSelectElement] Failed to parse initial-values:",
|
|
2947
|
+
i = JSON.parse(a);
|
|
2948
|
+
} catch (n) {
|
|
2949
|
+
x.error("[MultiSelectElement] Failed to parse initial-values:", n);
|
|
2851
2950
|
}
|
|
2852
2951
|
}
|
|
2853
2952
|
const r = this.parseAttributesFromTable();
|
|
2854
|
-
for (const { key:
|
|
2855
|
-
r[
|
|
2953
|
+
for (const { key: a, field: n } of je)
|
|
2954
|
+
r[a] === void 0 && (r[a] = this[n]);
|
|
2955
|
+
if (this._hasDeclarativeOptions) {
|
|
2956
|
+
const a = {
|
|
2957
|
+
valueMember: this._getValueCallback,
|
|
2958
|
+
displayValueMember: this._getDisplayValueCallback,
|
|
2959
|
+
groupMember: this._getGroupCallback,
|
|
2960
|
+
iconMember: this._getIconCallback,
|
|
2961
|
+
subtitleMember: this._getSubtitleCallback,
|
|
2962
|
+
disabledMember: this._getDisabledCallback
|
|
2963
|
+
};
|
|
2964
|
+
for (const { key: n, member: l } of Is)
|
|
2965
|
+
r[n] === void 0 && !a[n] && (r[n] = l);
|
|
2966
|
+
}
|
|
2856
2967
|
if (Object.assign(r, {
|
|
2857
2968
|
actionButtons: this._actionButtons,
|
|
2858
2969
|
getValueCallback: this._getValueCallback,
|
|
@@ -2874,35 +2985,41 @@ class Ae extends Ss {
|
|
|
2874
2985
|
getValueFormatCallback: this._getValueFormatCallback,
|
|
2875
2986
|
getBadgeTooltipCallback: this._getBadgeTooltipCallback,
|
|
2876
2987
|
getRemoveButtonTooltipCallback: this._getRemoveButtonTooltipCallback,
|
|
2877
|
-
getCounterCallback: this._getCounterCallback || ((
|
|
2988
|
+
getCounterCallback: this._getCounterCallback || ((a, n) => n !== void 0 ? `+${n} more` : `${a} selected`),
|
|
2878
2989
|
options: this._options ?? t,
|
|
2879
2990
|
beforeSearchCallback: this._beforeSearchCallback,
|
|
2880
2991
|
searchCallback: this._searchCallback,
|
|
2881
2992
|
addNewCallback: this._addNewCallback,
|
|
2882
|
-
selectCallback: (
|
|
2883
|
-
var
|
|
2884
|
-
this._selectCallback && this._selectCallback(
|
|
2993
|
+
selectCallback: (a) => {
|
|
2994
|
+
var n;
|
|
2995
|
+
this._selectCallback && this._selectCallback(a), this.dispatchEvent(new CustomEvent("select", {
|
|
2996
|
+
bubbles: !0,
|
|
2997
|
+
composed: !0,
|
|
2885
2998
|
detail: {
|
|
2886
|
-
option:
|
|
2887
|
-
selectedOptions: (
|
|
2999
|
+
option: a,
|
|
3000
|
+
selectedOptions: (n = this.picker) == null ? void 0 : n.getSelected(),
|
|
2888
3001
|
selectedValues: this.collectSelectedValues()
|
|
2889
3002
|
}
|
|
2890
3003
|
}));
|
|
2891
3004
|
},
|
|
2892
|
-
deselectCallback: (
|
|
2893
|
-
var
|
|
2894
|
-
this._deselectCallback && this._deselectCallback(
|
|
3005
|
+
deselectCallback: (a) => {
|
|
3006
|
+
var n;
|
|
3007
|
+
this._deselectCallback && this._deselectCallback(a), this.dispatchEvent(new CustomEvent("deselect", {
|
|
3008
|
+
bubbles: !0,
|
|
3009
|
+
composed: !0,
|
|
2895
3010
|
detail: {
|
|
2896
|
-
option:
|
|
2897
|
-
selectedOptions: (
|
|
3011
|
+
option: a,
|
|
3012
|
+
selectedOptions: (n = this.picker) == null ? void 0 : n.getSelected(),
|
|
2898
3013
|
selectedValues: this.collectSelectedValues()
|
|
2899
3014
|
}
|
|
2900
3015
|
}));
|
|
2901
3016
|
},
|
|
2902
|
-
changeCallback: (
|
|
2903
|
-
this._changeCallback && this._changeCallback(
|
|
3017
|
+
changeCallback: (a) => {
|
|
3018
|
+
this._changeCallback && this._changeCallback(a), this.dispatchEvent(new CustomEvent("change", {
|
|
3019
|
+
bubbles: !0,
|
|
3020
|
+
composed: !0,
|
|
2904
3021
|
detail: {
|
|
2905
|
-
selectedOptions:
|
|
3022
|
+
selectedOptions: a,
|
|
2906
3023
|
selectedValues: this.collectSelectedValues()
|
|
2907
3024
|
}
|
|
2908
3025
|
}));
|
|
@@ -2912,10 +3029,10 @@ class Ae extends Ss {
|
|
|
2912
3029
|
// Pass host element (this) for hidden inputs in light DOM
|
|
2913
3030
|
hostElement: this
|
|
2914
3031
|
}), i && (this.containerElement.dataset.initialValues = JSON.stringify(i)), this.picker = new xs(this.containerElement, r), this._customStylesCallback) {
|
|
2915
|
-
const
|
|
2916
|
-
if (
|
|
2917
|
-
const
|
|
2918
|
-
|
|
3032
|
+
const a = this._customStylesCallback();
|
|
3033
|
+
if (a) {
|
|
3034
|
+
const n = document.createElement("style");
|
|
3035
|
+
n.className = "ms-custom-styles", n.textContent = a, this.shadow.insertBefore(n, this.shadow.firstChild);
|
|
2919
3036
|
}
|
|
2920
3037
|
}
|
|
2921
3038
|
}
|
|
@@ -2933,8 +3050,8 @@ class Ae extends Ss {
|
|
|
2933
3050
|
}
|
|
2934
3051
|
/** Normalize the picker's getValue() return into the array form expected by event detail. */
|
|
2935
3052
|
collectSelectedValues() {
|
|
2936
|
-
var
|
|
2937
|
-
const t = (
|
|
3053
|
+
var s;
|
|
3054
|
+
const t = (s = this.picker) == null ? void 0 : s.getValue();
|
|
2938
3055
|
return t == null ? [] : Array.isArray(t) ? t : [t];
|
|
2939
3056
|
}
|
|
2940
3057
|
// ========================================================================
|
|
@@ -3017,12 +3134,12 @@ class Ae extends Ss {
|
|
|
3017
3134
|
}
|
|
3018
3135
|
set customStylesCallback(t) {
|
|
3019
3136
|
if (this._customStylesCallback = t, this.picker && t) {
|
|
3020
|
-
const
|
|
3021
|
-
if (
|
|
3137
|
+
const s = t();
|
|
3138
|
+
if (s) {
|
|
3022
3139
|
const i = this.shadow.querySelector("style.ms-custom-styles");
|
|
3023
3140
|
i && i.remove();
|
|
3024
3141
|
const r = document.createElement("style");
|
|
3025
|
-
r.className = "ms-custom-styles", r.textContent =
|
|
3142
|
+
r.className = "ms-custom-styles", r.textContent = s, this.shadow.appendChild(r), this.picker.renderBadges();
|
|
3026
3143
|
}
|
|
3027
3144
|
}
|
|
3028
3145
|
}
|
|
@@ -3246,37 +3363,37 @@ class Ae extends Ss {
|
|
|
3246
3363
|
// makes `form.reset()`, `form.elements`, and (in the future) constraint
|
|
3247
3364
|
// validation actually do something. Without this flag the element is
|
|
3248
3365
|
// invisible to the form lifecycle even when it has a `name`.
|
|
3249
|
-
d(
|
|
3250
|
-
typeof window < "u" && typeof customElements < "u" && (customElements.get("web-multiselect") || customElements.define("web-multiselect",
|
|
3366
|
+
d(Le, "formAssociated", !0);
|
|
3367
|
+
typeof window < "u" && typeof customElements < "u" && (customElements.get("web-multiselect") || customElements.define("web-multiselect", Le));
|
|
3251
3368
|
typeof window < "u" && (window.components = window.components || {}, window.components["web-multiselect"] = {
|
|
3252
|
-
version: () => "1.12.0-
|
|
3369
|
+
version: () => "1.12.0-rc04",
|
|
3253
3370
|
config: {
|
|
3254
3371
|
name: "@keenmate/web-multiselect",
|
|
3255
|
-
version: "1.12.0-
|
|
3372
|
+
version: "1.12.0-rc04",
|
|
3256
3373
|
author: "Keenmate",
|
|
3257
3374
|
license: "MIT",
|
|
3258
3375
|
repository: "git+https://github.com/keenmate/web-multiselect.git",
|
|
3259
3376
|
homepage: "https://web-multiselect.keenmate.dev"
|
|
3260
3377
|
},
|
|
3261
3378
|
logging: {
|
|
3262
|
-
enableLogging:
|
|
3263
|
-
disableLogging:
|
|
3379
|
+
enableLogging: bs,
|
|
3380
|
+
disableLogging: gs,
|
|
3264
3381
|
setLogLevel: fs,
|
|
3265
3382
|
setCategoryLevel: vs,
|
|
3266
3383
|
getCategories: () => [...us]
|
|
3267
3384
|
},
|
|
3268
3385
|
register: () => {
|
|
3269
|
-
typeof customElements < "u" && !customElements.get("web-multiselect") && customElements.define("web-multiselect",
|
|
3386
|
+
typeof customElements < "u" && !customElements.get("web-multiselect") && customElements.define("web-multiselect", Le);
|
|
3270
3387
|
},
|
|
3271
3388
|
getInstances: () => ct()
|
|
3272
3389
|
});
|
|
3273
3390
|
export {
|
|
3274
3391
|
us as LOGGING_CATEGORIES,
|
|
3275
|
-
|
|
3392
|
+
Le as MultiSelectElement,
|
|
3276
3393
|
xs as WebMultiSelect,
|
|
3277
3394
|
x as dataLogger,
|
|
3278
|
-
|
|
3279
|
-
|
|
3395
|
+
gs as disableLogging,
|
|
3396
|
+
bs as enableLogging,
|
|
3280
3397
|
oe as initLogger,
|
|
3281
3398
|
S as interactionLogger,
|
|
3282
3399
|
vs as setCategoryLevel,
|