@keenmate/web-multiselect 1.0.0-rc06 → 1.0.0-rc08
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 +305 -49
- package/dist/multiselect.js +667 -407
- package/dist/multiselect.umd.js +17 -17
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/scss/_css-variables.scss +2 -0
- package/src/scss/_input-dropdown.scss +9 -0
- package/src/scss/_options.scss +18 -0
- package/src/scss/_variables.scss +2 -0
package/dist/multiselect.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var at = Object.defineProperty;
|
|
2
2
|
var ct = (i, e, t) => e in i ? at(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
|
|
3
3
|
var u = (i, e, t) => ct(i, typeof e != "symbol" ? e + "" : e, t);
|
|
4
|
-
const ae = Math.min,
|
|
4
|
+
const ae = Math.min, B = Math.max, ce = Math.round, oe = Math.floor, M = (i) => ({
|
|
5
5
|
x: i,
|
|
6
6
|
y: i
|
|
7
7
|
}), dt = {
|
|
@@ -13,10 +13,10 @@ const ae = Math.min, H = Math.max, ce = Math.round, oe = Math.floor, E = (i) =>
|
|
|
13
13
|
start: "end",
|
|
14
14
|
end: "start"
|
|
15
15
|
};
|
|
16
|
-
function
|
|
17
|
-
return
|
|
16
|
+
function Ve(i, e, t) {
|
|
17
|
+
return B(i, ae(e, t));
|
|
18
18
|
}
|
|
19
|
-
function
|
|
19
|
+
function me(i, e) {
|
|
20
20
|
return typeof i == "function" ? i(e) : i;
|
|
21
21
|
}
|
|
22
22
|
function W(i) {
|
|
@@ -31,14 +31,14 @@ function We(i) {
|
|
|
31
31
|
function je(i) {
|
|
32
32
|
return i === "y" ? "height" : "width";
|
|
33
33
|
}
|
|
34
|
-
const
|
|
35
|
-
function
|
|
36
|
-
return
|
|
34
|
+
const ht = /* @__PURE__ */ new Set(["top", "bottom"]);
|
|
35
|
+
function z(i) {
|
|
36
|
+
return ht.has(W(i)) ? "y" : "x";
|
|
37
37
|
}
|
|
38
38
|
function Ge(i) {
|
|
39
|
-
return We(
|
|
39
|
+
return We(z(i));
|
|
40
40
|
}
|
|
41
|
-
function
|
|
41
|
+
function mt(i, e, t) {
|
|
42
42
|
t === void 0 && (t = !1);
|
|
43
43
|
const o = ue(i), l = Ge(i), s = je(l);
|
|
44
44
|
let n = l === "x" ? o === (t ? "end" : "start") ? "right" : "left" : o === "start" ? "bottom" : "top";
|
|
@@ -51,12 +51,12 @@ function ut(i) {
|
|
|
51
51
|
function Ce(i) {
|
|
52
52
|
return i.replace(/start|end/g, (e) => pt[e]);
|
|
53
53
|
}
|
|
54
|
-
const
|
|
54
|
+
const $e = ["left", "right"], ze = ["right", "left"], ft = ["top", "bottom"], gt = ["bottom", "top"];
|
|
55
55
|
function bt(i, e, t) {
|
|
56
56
|
switch (i) {
|
|
57
57
|
case "top":
|
|
58
58
|
case "bottom":
|
|
59
|
-
return t ? e ?
|
|
59
|
+
return t ? e ? ze : $e : e ? $e : ze;
|
|
60
60
|
case "left":
|
|
61
61
|
case "right":
|
|
62
62
|
return e ? ft : gt;
|
|
@@ -107,12 +107,12 @@ function pe(i) {
|
|
|
107
107
|
y: t
|
|
108
108
|
};
|
|
109
109
|
}
|
|
110
|
-
function
|
|
110
|
+
function De(i, e, t) {
|
|
111
111
|
let {
|
|
112
112
|
reference: o,
|
|
113
113
|
floating: l
|
|
114
114
|
} = i;
|
|
115
|
-
const s =
|
|
115
|
+
const s = z(e), n = Ge(e), r = je(n), a = W(e), d = s === "y", c = o.x + o.width / 2 - l.width / 2, m = o.y + o.height / 2 - l.height / 2, p = o[r] / 2 - l[r] / 2;
|
|
116
116
|
let h;
|
|
117
117
|
switch (a) {
|
|
118
118
|
case "top":
|
|
@@ -130,13 +130,13 @@ function ze(i, e, t) {
|
|
|
130
130
|
case "right":
|
|
131
131
|
h = {
|
|
132
132
|
x: o.x + o.width,
|
|
133
|
-
y:
|
|
133
|
+
y: m
|
|
134
134
|
};
|
|
135
135
|
break;
|
|
136
136
|
case "left":
|
|
137
137
|
h = {
|
|
138
138
|
x: o.x - l.width,
|
|
139
|
-
y:
|
|
139
|
+
y: m
|
|
140
140
|
};
|
|
141
141
|
break;
|
|
142
142
|
default:
|
|
@@ -147,10 +147,10 @@ function ze(i, e, t) {
|
|
|
147
147
|
}
|
|
148
148
|
switch (ue(e)) {
|
|
149
149
|
case "start":
|
|
150
|
-
h[n] -=
|
|
150
|
+
h[n] -= p * (t && d ? -1 : 1);
|
|
151
151
|
break;
|
|
152
152
|
case "end":
|
|
153
|
-
h[n] +=
|
|
153
|
+
h[n] += p * (t && d ? -1 : 1);
|
|
154
154
|
break;
|
|
155
155
|
}
|
|
156
156
|
return h;
|
|
@@ -162,14 +162,14 @@ const _t = async (i, e, t) => {
|
|
|
162
162
|
middleware: s = [],
|
|
163
163
|
platform: n
|
|
164
164
|
} = t, r = s.filter(Boolean), a = await (n.isRTL == null ? void 0 : n.isRTL(e));
|
|
165
|
-
let
|
|
165
|
+
let d = await n.getElementRects({
|
|
166
166
|
reference: i,
|
|
167
167
|
floating: e,
|
|
168
168
|
strategy: l
|
|
169
169
|
}), {
|
|
170
170
|
x: c,
|
|
171
|
-
y:
|
|
172
|
-
} =
|
|
171
|
+
y: m
|
|
172
|
+
} = De(d, o, a), p = o, h = {}, f = 0;
|
|
173
173
|
for (let w = 0; w < r.length; w++) {
|
|
174
174
|
const {
|
|
175
175
|
name: g,
|
|
@@ -177,41 +177,41 @@ const _t = async (i, e, t) => {
|
|
|
177
177
|
} = r[w], {
|
|
178
178
|
x: y,
|
|
179
179
|
y: x,
|
|
180
|
-
data:
|
|
181
|
-
reset:
|
|
180
|
+
data: A,
|
|
181
|
+
reset: S
|
|
182
182
|
} = await b({
|
|
183
183
|
x: c,
|
|
184
|
-
y:
|
|
184
|
+
y: m,
|
|
185
185
|
initialPlacement: o,
|
|
186
|
-
placement:
|
|
186
|
+
placement: p,
|
|
187
187
|
strategy: l,
|
|
188
188
|
middlewareData: h,
|
|
189
|
-
rects:
|
|
189
|
+
rects: d,
|
|
190
190
|
platform: n,
|
|
191
191
|
elements: {
|
|
192
192
|
reference: i,
|
|
193
193
|
floating: e
|
|
194
194
|
}
|
|
195
195
|
});
|
|
196
|
-
c = y ?? c,
|
|
196
|
+
c = y ?? c, m = x ?? m, h = {
|
|
197
197
|
...h,
|
|
198
198
|
[g]: {
|
|
199
199
|
...h[g],
|
|
200
|
-
...
|
|
200
|
+
...A
|
|
201
201
|
}
|
|
202
|
-
},
|
|
202
|
+
}, S && f <= 50 && (f++, typeof S == "object" && (S.placement && (p = S.placement), S.rects && (d = S.rects === !0 ? await n.getElementRects({
|
|
203
203
|
reference: i,
|
|
204
204
|
floating: e,
|
|
205
205
|
strategy: l
|
|
206
|
-
}) :
|
|
206
|
+
}) : S.rects), {
|
|
207
207
|
x: c,
|
|
208
|
-
y:
|
|
209
|
-
} =
|
|
208
|
+
y: m
|
|
209
|
+
} = De(d, p, a)), w = -1);
|
|
210
210
|
}
|
|
211
211
|
return {
|
|
212
212
|
x: c,
|
|
213
|
-
y:
|
|
214
|
-
placement:
|
|
213
|
+
y: m,
|
|
214
|
+
placement: p,
|
|
215
215
|
strategy: l,
|
|
216
216
|
middlewareData: h
|
|
217
217
|
};
|
|
@@ -227,38 +227,38 @@ async function Ue(i, e) {
|
|
|
227
227
|
elements: r,
|
|
228
228
|
strategy: a
|
|
229
229
|
} = i, {
|
|
230
|
-
boundary:
|
|
230
|
+
boundary: d = "clippingAncestors",
|
|
231
231
|
rootBoundary: c = "viewport",
|
|
232
|
-
elementContext:
|
|
233
|
-
altBoundary:
|
|
232
|
+
elementContext: m = "floating",
|
|
233
|
+
altBoundary: p = !1,
|
|
234
234
|
padding: h = 0
|
|
235
|
-
} =
|
|
235
|
+
} = me(e, i), f = yt(h), g = r[p ? m === "floating" ? "reference" : "floating" : m], b = pe(await s.getClippingRect({
|
|
236
236
|
element: (t = await (s.isElement == null ? void 0 : s.isElement(g))) == null || t ? g : g.contextElement || await (s.getDocumentElement == null ? void 0 : s.getDocumentElement(r.floating)),
|
|
237
|
-
boundary:
|
|
237
|
+
boundary: d,
|
|
238
238
|
rootBoundary: c,
|
|
239
239
|
strategy: a
|
|
240
|
-
})), y =
|
|
240
|
+
})), y = m === "floating" ? {
|
|
241
241
|
x: o,
|
|
242
242
|
y: l,
|
|
243
243
|
width: n.floating.width,
|
|
244
244
|
height: n.floating.height
|
|
245
|
-
} : n.reference, x = await (s.getOffsetParent == null ? void 0 : s.getOffsetParent(r.floating)),
|
|
245
|
+
} : n.reference, x = await (s.getOffsetParent == null ? void 0 : s.getOffsetParent(r.floating)), A = await (s.isElement == null ? void 0 : s.isElement(x)) ? await (s.getScale == null ? void 0 : s.getScale(x)) || {
|
|
246
246
|
x: 1,
|
|
247
247
|
y: 1
|
|
248
248
|
} : {
|
|
249
249
|
x: 1,
|
|
250
250
|
y: 1
|
|
251
|
-
},
|
|
251
|
+
}, S = pe(s.convertOffsetParentRelativeRectToViewportRelativeRect ? await s.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
252
252
|
elements: r,
|
|
253
253
|
rect: y,
|
|
254
254
|
offsetParent: x,
|
|
255
255
|
strategy: a
|
|
256
256
|
}) : y);
|
|
257
257
|
return {
|
|
258
|
-
top: (b.top -
|
|
259
|
-
bottom: (
|
|
260
|
-
left: (b.left -
|
|
261
|
-
right: (
|
|
258
|
+
top: (b.top - S.top + f.top) / A.y,
|
|
259
|
+
bottom: (S.bottom - b.bottom + f.bottom) / A.y,
|
|
260
|
+
left: (b.left - S.left + f.left) / A.x,
|
|
261
|
+
right: (S.right - b.right + f.right) / A.x
|
|
262
262
|
};
|
|
263
263
|
}
|
|
264
264
|
const xt = function(i) {
|
|
@@ -273,35 +273,35 @@ const xt = function(i) {
|
|
|
273
273
|
rects: n,
|
|
274
274
|
initialPlacement: r,
|
|
275
275
|
platform: a,
|
|
276
|
-
elements:
|
|
276
|
+
elements: d
|
|
277
277
|
} = e, {
|
|
278
278
|
mainAxis: c = !0,
|
|
279
|
-
crossAxis:
|
|
280
|
-
fallbackPlacements:
|
|
279
|
+
crossAxis: m = !0,
|
|
280
|
+
fallbackPlacements: p,
|
|
281
281
|
fallbackStrategy: h = "bestFit",
|
|
282
282
|
fallbackAxisSideDirection: f = "none",
|
|
283
283
|
flipAlignment: w = !0,
|
|
284
284
|
...g
|
|
285
|
-
} =
|
|
285
|
+
} = me(i, e);
|
|
286
286
|
if ((t = s.arrow) != null && t.alignmentOffset)
|
|
287
287
|
return {};
|
|
288
|
-
const b = W(l), y =
|
|
289
|
-
!
|
|
290
|
-
const G = [r, ...
|
|
288
|
+
const b = W(l), y = z(r), x = W(r) === r, A = await (a.isRTL == null ? void 0 : a.isRTL(d.floating)), S = p || (x || !w ? [de(r)] : ut(r)), X = f !== "none";
|
|
289
|
+
!p && X && S.push(...vt(r, w, f, A));
|
|
290
|
+
const G = [r, ...S], we = await Ue(e, g), ie = [];
|
|
291
291
|
let U = ((o = s.flip) == null ? void 0 : o.overflows) || [];
|
|
292
|
-
if (c && ie.push(we[b]),
|
|
293
|
-
const R =
|
|
292
|
+
if (c && ie.push(we[b]), m) {
|
|
293
|
+
const R = mt(l, n, A);
|
|
294
294
|
ie.push(we[R[0]], we[R[1]]);
|
|
295
295
|
}
|
|
296
296
|
if (U = [...U, {
|
|
297
297
|
placement: l,
|
|
298
298
|
overflows: ie
|
|
299
299
|
}], !ie.every((R) => R <= 0)) {
|
|
300
|
-
var
|
|
301
|
-
const R = (((
|
|
302
|
-
if (ye && (!(
|
|
300
|
+
var Ee, Me;
|
|
301
|
+
const R = (((Ee = s.flip) == null ? void 0 : Ee.index) || 0) + 1, ye = G[R];
|
|
302
|
+
if (ye && (!(m === "alignment" ? y !== z(ye) : !1) || // We leave the current main axis only if every placement on that axis
|
|
303
303
|
// overflows the main axis.
|
|
304
|
-
U.every((
|
|
304
|
+
U.every((I) => z(I.placement) === y ? I.overflows[0] > 0 : !0)))
|
|
305
305
|
return {
|
|
306
306
|
data: {
|
|
307
307
|
index: R,
|
|
@@ -311,20 +311,20 @@ const xt = function(i) {
|
|
|
311
311
|
placement: ye
|
|
312
312
|
}
|
|
313
313
|
};
|
|
314
|
-
let q = (
|
|
314
|
+
let q = (Me = U.filter((F) => F.overflows[0] <= 0).sort((F, I) => F.overflows[1] - I.overflows[1])[0]) == null ? void 0 : Me.placement;
|
|
315
315
|
if (!q)
|
|
316
316
|
switch (h) {
|
|
317
317
|
case "bestFit": {
|
|
318
|
-
var
|
|
319
|
-
const F = (
|
|
320
|
-
if (
|
|
321
|
-
const
|
|
322
|
-
return
|
|
318
|
+
var Le;
|
|
319
|
+
const F = (Le = U.filter((I) => {
|
|
320
|
+
if (X) {
|
|
321
|
+
const $ = z(I.placement);
|
|
322
|
+
return $ === y || // Create a bias to the `y` side axis due to horizontal
|
|
323
323
|
// reading directions favoring greater width.
|
|
324
|
-
|
|
324
|
+
$ === "y";
|
|
325
325
|
}
|
|
326
326
|
return !0;
|
|
327
|
-
}).map((
|
|
327
|
+
}).map((I) => [I.placement, I.overflows.filter(($) => $ > 0).reduce(($, rt) => $ + rt, 0)]).sort((I, $) => I[1] - $[1])[0]) == null ? void 0 : Le[0];
|
|
328
328
|
F && (q = F);
|
|
329
329
|
break;
|
|
330
330
|
}
|
|
@@ -348,29 +348,29 @@ async function kt(i, e) {
|
|
|
348
348
|
placement: t,
|
|
349
349
|
platform: o,
|
|
350
350
|
elements: l
|
|
351
|
-
} = i, s = await (o.isRTL == null ? void 0 : o.isRTL(l.floating)), n = W(t), r = ue(t), a =
|
|
351
|
+
} = i, s = await (o.isRTL == null ? void 0 : o.isRTL(l.floating)), n = W(t), r = ue(t), a = z(t) === "y", d = Ct.has(n) ? -1 : 1, c = s && a ? -1 : 1, m = me(e, i);
|
|
352
352
|
let {
|
|
353
|
-
mainAxis:
|
|
353
|
+
mainAxis: p,
|
|
354
354
|
crossAxis: h,
|
|
355
355
|
alignmentAxis: f
|
|
356
|
-
} = typeof
|
|
357
|
-
mainAxis:
|
|
356
|
+
} = typeof m == "number" ? {
|
|
357
|
+
mainAxis: m,
|
|
358
358
|
crossAxis: 0,
|
|
359
359
|
alignmentAxis: null
|
|
360
360
|
} : {
|
|
361
|
-
mainAxis:
|
|
362
|
-
crossAxis:
|
|
363
|
-
alignmentAxis:
|
|
361
|
+
mainAxis: m.mainAxis || 0,
|
|
362
|
+
crossAxis: m.crossAxis || 0,
|
|
363
|
+
alignmentAxis: m.alignmentAxis
|
|
364
364
|
};
|
|
365
365
|
return r && typeof f == "number" && (h = r === "end" ? f * -1 : f), a ? {
|
|
366
366
|
x: h * c,
|
|
367
|
-
y:
|
|
367
|
+
y: p * d
|
|
368
368
|
} : {
|
|
369
|
-
x:
|
|
369
|
+
x: p * d,
|
|
370
370
|
y: h * c
|
|
371
371
|
};
|
|
372
372
|
}
|
|
373
|
-
const
|
|
373
|
+
const St = function(i) {
|
|
374
374
|
return i === void 0 && (i = 0), {
|
|
375
375
|
name: "offset",
|
|
376
376
|
options: i,
|
|
@@ -392,7 +392,7 @@ const At = function(i) {
|
|
|
392
392
|
};
|
|
393
393
|
}
|
|
394
394
|
};
|
|
395
|
-
},
|
|
395
|
+
}, At = function(i) {
|
|
396
396
|
return i === void 0 && (i = {}), {
|
|
397
397
|
name: "shift",
|
|
398
398
|
options: i,
|
|
@@ -417,23 +417,23 @@ const At = function(i) {
|
|
|
417
417
|
}
|
|
418
418
|
},
|
|
419
419
|
...a
|
|
420
|
-
} =
|
|
420
|
+
} = me(i, e), d = {
|
|
421
421
|
x: t,
|
|
422
422
|
y: o
|
|
423
|
-
}, c = await Ue(e, a),
|
|
424
|
-
let h = p
|
|
423
|
+
}, c = await Ue(e, a), m = z(W(l)), p = We(m);
|
|
424
|
+
let h = d[p], f = d[m];
|
|
425
425
|
if (s) {
|
|
426
|
-
const g =
|
|
427
|
-
h =
|
|
426
|
+
const g = p === "y" ? "top" : "left", b = p === "y" ? "bottom" : "right", y = h + c[g], x = h - c[b];
|
|
427
|
+
h = Ve(y, h, x);
|
|
428
428
|
}
|
|
429
429
|
if (n) {
|
|
430
|
-
const g =
|
|
431
|
-
f =
|
|
430
|
+
const g = m === "y" ? "top" : "left", b = m === "y" ? "bottom" : "right", y = f + c[g], x = f - c[b];
|
|
431
|
+
f = Ve(y, f, x);
|
|
432
432
|
}
|
|
433
433
|
const w = r.fn({
|
|
434
434
|
...e,
|
|
435
|
-
[
|
|
436
|
-
[
|
|
435
|
+
[p]: h,
|
|
436
|
+
[m]: f
|
|
437
437
|
});
|
|
438
438
|
return {
|
|
439
439
|
...w,
|
|
@@ -441,8 +441,8 @@ const At = function(i) {
|
|
|
441
441
|
x: w.x - t,
|
|
442
442
|
y: w.y - o,
|
|
443
443
|
enabled: {
|
|
444
|
-
[
|
|
445
|
-
[
|
|
444
|
+
[p]: s,
|
|
445
|
+
[m]: n
|
|
446
446
|
}
|
|
447
447
|
}
|
|
448
448
|
};
|
|
@@ -452,42 +452,42 @@ const At = function(i) {
|
|
|
452
452
|
function fe() {
|
|
453
453
|
return typeof window < "u";
|
|
454
454
|
}
|
|
455
|
-
function
|
|
455
|
+
function J(i) {
|
|
456
456
|
return Ke(i) ? (i.nodeName || "").toLowerCase() : "#document";
|
|
457
457
|
}
|
|
458
|
-
function
|
|
458
|
+
function O(i) {
|
|
459
459
|
var e;
|
|
460
460
|
return (i == null || (e = i.ownerDocument) == null ? void 0 : e.defaultView) || window;
|
|
461
461
|
}
|
|
462
|
-
function
|
|
462
|
+
function V(i) {
|
|
463
463
|
var e;
|
|
464
464
|
return (e = (Ke(i) ? i.ownerDocument : i.document) || window.document) == null ? void 0 : e.documentElement;
|
|
465
465
|
}
|
|
466
466
|
function Ke(i) {
|
|
467
|
-
return fe() ? i instanceof Node || i instanceof
|
|
467
|
+
return fe() ? i instanceof Node || i instanceof O(i).Node : !1;
|
|
468
468
|
}
|
|
469
469
|
function T(i) {
|
|
470
|
-
return fe() ? i instanceof Element || i instanceof
|
|
470
|
+
return fe() ? i instanceof Element || i instanceof O(i).Element : !1;
|
|
471
471
|
}
|
|
472
|
-
function
|
|
473
|
-
return fe() ? i instanceof HTMLElement || i instanceof
|
|
472
|
+
function L(i) {
|
|
473
|
+
return fe() ? i instanceof HTMLElement || i instanceof O(i).HTMLElement : !1;
|
|
474
474
|
}
|
|
475
475
|
function Re(i) {
|
|
476
|
-
return !fe() || typeof ShadowRoot > "u" ? !1 : i instanceof ShadowRoot || i instanceof
|
|
476
|
+
return !fe() || typeof ShadowRoot > "u" ? !1 : i instanceof ShadowRoot || i instanceof O(i).ShadowRoot;
|
|
477
477
|
}
|
|
478
|
-
const
|
|
478
|
+
const Ot = /* @__PURE__ */ new Set(["inline", "contents"]);
|
|
479
479
|
function te(i) {
|
|
480
480
|
const {
|
|
481
481
|
overflow: e,
|
|
482
482
|
overflowX: t,
|
|
483
483
|
overflowY: o,
|
|
484
484
|
display: l
|
|
485
|
-
} =
|
|
486
|
-
return /auto|scroll|overlay|hidden|clip/.test(e + o + t) && !
|
|
485
|
+
} = E(i);
|
|
486
|
+
return /auto|scroll|overlay|hidden|clip/.test(e + o + t) && !Ot.has(l);
|
|
487
487
|
}
|
|
488
|
-
const
|
|
489
|
-
function
|
|
490
|
-
return
|
|
488
|
+
const It = /* @__PURE__ */ new Set(["table", "td", "th"]);
|
|
489
|
+
function Pt(i) {
|
|
490
|
+
return It.has(J(i));
|
|
491
491
|
}
|
|
492
492
|
const Tt = [":popover-open", ":modal"];
|
|
493
493
|
function ge(i) {
|
|
@@ -499,31 +499,31 @@ function ge(i) {
|
|
|
499
499
|
}
|
|
500
500
|
});
|
|
501
501
|
}
|
|
502
|
-
const
|
|
503
|
-
function
|
|
504
|
-
const e =
|
|
505
|
-
return
|
|
502
|
+
const Et = ["transform", "translate", "scale", "rotate", "perspective"], Mt = ["transform", "translate", "scale", "rotate", "perspective", "filter"], Lt = ["paint", "layout", "strict", "content"];
|
|
503
|
+
function Oe(i) {
|
|
504
|
+
const e = Ie(), t = T(i) ? E(i) : i;
|
|
505
|
+
return Et.some((o) => t[o] ? t[o] !== "none" : !1) || (t.containerType ? t.containerType !== "normal" : !1) || !e && (t.backdropFilter ? t.backdropFilter !== "none" : !1) || !e && (t.filter ? t.filter !== "none" : !1) || Mt.some((o) => (t.willChange || "").includes(o)) || Lt.some((o) => (t.contain || "").includes(o));
|
|
506
506
|
}
|
|
507
|
-
function
|
|
508
|
-
let e =
|
|
509
|
-
for (;
|
|
510
|
-
if (
|
|
507
|
+
function Vt(i) {
|
|
508
|
+
let e = D(i);
|
|
509
|
+
for (; L(e) && !Y(e); ) {
|
|
510
|
+
if (Oe(e))
|
|
511
511
|
return e;
|
|
512
512
|
if (ge(e))
|
|
513
513
|
return null;
|
|
514
|
-
e =
|
|
514
|
+
e = D(e);
|
|
515
515
|
}
|
|
516
516
|
return null;
|
|
517
517
|
}
|
|
518
|
-
function
|
|
518
|
+
function Ie() {
|
|
519
519
|
return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
|
|
520
520
|
}
|
|
521
|
-
const
|
|
521
|
+
const $t = /* @__PURE__ */ new Set(["html", "body", "#document"]);
|
|
522
522
|
function Y(i) {
|
|
523
|
-
return
|
|
523
|
+
return $t.has(J(i));
|
|
524
524
|
}
|
|
525
|
-
function
|
|
526
|
-
return
|
|
525
|
+
function E(i) {
|
|
526
|
+
return O(i).getComputedStyle(i);
|
|
527
527
|
}
|
|
528
528
|
function be(i) {
|
|
529
529
|
return T(i) ? {
|
|
@@ -534,26 +534,26 @@ function be(i) {
|
|
|
534
534
|
scrollTop: i.scrollY
|
|
535
535
|
};
|
|
536
536
|
}
|
|
537
|
-
function
|
|
538
|
-
if (
|
|
537
|
+
function D(i) {
|
|
538
|
+
if (J(i) === "html")
|
|
539
539
|
return i;
|
|
540
540
|
const e = (
|
|
541
541
|
// Step into the shadow DOM of the parent of a slotted node.
|
|
542
542
|
i.assignedSlot || // DOM Element detected.
|
|
543
543
|
i.parentNode || // ShadowRoot detected.
|
|
544
544
|
Re(i) && i.host || // Fallback.
|
|
545
|
-
|
|
545
|
+
V(i)
|
|
546
546
|
);
|
|
547
547
|
return Re(e) ? e.host : e;
|
|
548
548
|
}
|
|
549
549
|
function Ye(i) {
|
|
550
|
-
const e =
|
|
551
|
-
return Y(e) ? i.ownerDocument ? i.ownerDocument.body : i.body :
|
|
550
|
+
const e = D(i);
|
|
551
|
+
return Y(e) ? i.ownerDocument ? i.ownerDocument.body : i.body : L(e) && te(e) ? e : Ye(e);
|
|
552
552
|
}
|
|
553
553
|
function Q(i, e, t) {
|
|
554
554
|
var o;
|
|
555
555
|
e === void 0 && (e = []), t === void 0 && (t = !0);
|
|
556
|
-
const l = Ye(i), s = l === ((o = i.ownerDocument) == null ? void 0 : o.body), n =
|
|
556
|
+
const l = Ye(i), s = l === ((o = i.ownerDocument) == null ? void 0 : o.body), n = O(l);
|
|
557
557
|
if (s) {
|
|
558
558
|
const r = ke(n);
|
|
559
559
|
return e.concat(n, n.visualViewport || [], te(l) ? l : [], r && t ? Q(r) : []);
|
|
@@ -563,70 +563,70 @@ function Q(i, e, t) {
|
|
|
563
563
|
function ke(i) {
|
|
564
564
|
return i.parent && Object.getPrototypeOf(i.parent) ? i.frameElement : null;
|
|
565
565
|
}
|
|
566
|
-
function
|
|
567
|
-
const e =
|
|
566
|
+
function Je(i) {
|
|
567
|
+
const e = E(i);
|
|
568
568
|
let t = parseFloat(e.width) || 0, o = parseFloat(e.height) || 0;
|
|
569
|
-
const l =
|
|
569
|
+
const l = L(i), s = l ? i.offsetWidth : t, n = l ? i.offsetHeight : o, r = ce(t) !== s || ce(o) !== n;
|
|
570
570
|
return r && (t = s, o = n), {
|
|
571
571
|
width: t,
|
|
572
572
|
height: o,
|
|
573
573
|
$: r
|
|
574
574
|
};
|
|
575
575
|
}
|
|
576
|
-
function
|
|
576
|
+
function Pe(i) {
|
|
577
577
|
return T(i) ? i : i.contextElement;
|
|
578
578
|
}
|
|
579
579
|
function K(i) {
|
|
580
|
-
const e =
|
|
581
|
-
if (!
|
|
582
|
-
return
|
|
580
|
+
const e = Pe(i);
|
|
581
|
+
if (!L(e))
|
|
582
|
+
return M(1);
|
|
583
583
|
const t = e.getBoundingClientRect(), {
|
|
584
584
|
width: o,
|
|
585
585
|
height: l,
|
|
586
586
|
$: s
|
|
587
|
-
} =
|
|
587
|
+
} = Je(e);
|
|
588
588
|
let n = (s ? ce(t.width) : t.width) / o, r = (s ? ce(t.height) : t.height) / l;
|
|
589
589
|
return (!n || !Number.isFinite(n)) && (n = 1), (!r || !Number.isFinite(r)) && (r = 1), {
|
|
590
590
|
x: n,
|
|
591
591
|
y: r
|
|
592
592
|
};
|
|
593
593
|
}
|
|
594
|
-
const
|
|
595
|
-
function
|
|
596
|
-
const e =
|
|
597
|
-
return !
|
|
594
|
+
const zt = /* @__PURE__ */ M(0);
|
|
595
|
+
function Xe(i) {
|
|
596
|
+
const e = O(i);
|
|
597
|
+
return !Ie() || !e.visualViewport ? zt : {
|
|
598
598
|
x: e.visualViewport.offsetLeft,
|
|
599
599
|
y: e.visualViewport.offsetTop
|
|
600
600
|
};
|
|
601
601
|
}
|
|
602
|
-
function
|
|
603
|
-
return e === void 0 && (e = !1), !t || e && t !==
|
|
602
|
+
function Dt(i, e, t) {
|
|
603
|
+
return e === void 0 && (e = !1), !t || e && t !== O(i) ? !1 : e;
|
|
604
604
|
}
|
|
605
605
|
function j(i, e, t, o) {
|
|
606
606
|
e === void 0 && (e = !1), t === void 0 && (t = !1);
|
|
607
|
-
const l = i.getBoundingClientRect(), s =
|
|
608
|
-
let n =
|
|
607
|
+
const l = i.getBoundingClientRect(), s = Pe(i);
|
|
608
|
+
let n = M(1);
|
|
609
609
|
e && (o ? T(o) && (n = K(o)) : n = K(i));
|
|
610
|
-
const r =
|
|
611
|
-
let a = (l.left + r.x) / n.x,
|
|
610
|
+
const r = Dt(s, t, o) ? Xe(s) : M(0);
|
|
611
|
+
let a = (l.left + r.x) / n.x, d = (l.top + r.y) / n.y, c = l.width / n.x, m = l.height / n.y;
|
|
612
612
|
if (s) {
|
|
613
|
-
const
|
|
614
|
-
let f =
|
|
613
|
+
const p = O(s), h = o && T(o) ? O(o) : o;
|
|
614
|
+
let f = p, w = ke(f);
|
|
615
615
|
for (; w && o && h !== f; ) {
|
|
616
|
-
const g = K(w), b = w.getBoundingClientRect(), y =
|
|
617
|
-
a *= g.x,
|
|
616
|
+
const g = K(w), b = w.getBoundingClientRect(), y = E(w), x = b.left + (w.clientLeft + parseFloat(y.paddingLeft)) * g.x, A = b.top + (w.clientTop + parseFloat(y.paddingTop)) * g.y;
|
|
617
|
+
a *= g.x, d *= g.y, c *= g.x, m *= g.y, a += x, d += A, f = O(w), w = ke(f);
|
|
618
618
|
}
|
|
619
619
|
}
|
|
620
620
|
return pe({
|
|
621
621
|
width: c,
|
|
622
|
-
height:
|
|
622
|
+
height: m,
|
|
623
623
|
x: a,
|
|
624
|
-
y:
|
|
624
|
+
y: d
|
|
625
625
|
});
|
|
626
626
|
}
|
|
627
627
|
function ve(i, e) {
|
|
628
628
|
const t = be(i).scrollLeft;
|
|
629
|
-
return e ? e.left + t : j(
|
|
629
|
+
return e ? e.left + t : j(V(i)).left + t;
|
|
630
630
|
}
|
|
631
631
|
function qe(i, e) {
|
|
632
632
|
const t = i.getBoundingClientRect(), o = t.left + e.scrollLeft - ve(i, t), l = t.top + e.scrollTop;
|
|
@@ -642,34 +642,34 @@ function Rt(i) {
|
|
|
642
642
|
offsetParent: o,
|
|
643
643
|
strategy: l
|
|
644
644
|
} = i;
|
|
645
|
-
const s = l === "fixed", n =
|
|
645
|
+
const s = l === "fixed", n = V(o), r = e ? ge(e.floating) : !1;
|
|
646
646
|
if (o === n || r && s)
|
|
647
647
|
return t;
|
|
648
648
|
let a = {
|
|
649
649
|
scrollLeft: 0,
|
|
650
650
|
scrollTop: 0
|
|
651
|
-
},
|
|
652
|
-
const c =
|
|
653
|
-
if ((
|
|
651
|
+
}, d = M(1);
|
|
652
|
+
const c = M(0), m = L(o);
|
|
653
|
+
if ((m || !m && !s) && ((J(o) !== "body" || te(n)) && (a = be(o)), L(o))) {
|
|
654
654
|
const h = j(o);
|
|
655
|
-
|
|
655
|
+
d = K(o), c.x = h.x + o.clientLeft, c.y = h.y + o.clientTop;
|
|
656
656
|
}
|
|
657
|
-
const
|
|
657
|
+
const p = n && !m && !s ? qe(n, a) : M(0);
|
|
658
658
|
return {
|
|
659
|
-
width: t.width *
|
|
660
|
-
height: t.height *
|
|
661
|
-
x: t.x *
|
|
662
|
-
y: t.y *
|
|
659
|
+
width: t.width * d.x,
|
|
660
|
+
height: t.height * d.y,
|
|
661
|
+
x: t.x * d.x - a.scrollLeft * d.x + c.x + p.x,
|
|
662
|
+
y: t.y * d.y - a.scrollTop * d.y + c.y + p.y
|
|
663
663
|
};
|
|
664
664
|
}
|
|
665
665
|
function Ft(i) {
|
|
666
666
|
return Array.from(i.getClientRects());
|
|
667
667
|
}
|
|
668
668
|
function Nt(i) {
|
|
669
|
-
const e =
|
|
669
|
+
const e = V(i), t = be(i), o = i.ownerDocument.body, l = B(e.scrollWidth, e.clientWidth, o.scrollWidth, o.clientWidth), s = B(e.scrollHeight, e.clientHeight, o.scrollHeight, o.clientHeight);
|
|
670
670
|
let n = -t.scrollLeft + ve(i);
|
|
671
671
|
const r = -t.scrollTop;
|
|
672
|
-
return
|
|
672
|
+
return E(o).direction === "rtl" && (n += B(e.clientWidth, o.clientWidth) - l), {
|
|
673
673
|
width: l,
|
|
674
674
|
height: s,
|
|
675
675
|
x: n,
|
|
@@ -677,19 +677,19 @@ function Nt(i) {
|
|
|
677
677
|
};
|
|
678
678
|
}
|
|
679
679
|
const Fe = 25;
|
|
680
|
-
function
|
|
681
|
-
const t =
|
|
680
|
+
function Ht(i, e) {
|
|
681
|
+
const t = O(i), o = V(i), l = t.visualViewport;
|
|
682
682
|
let s = o.clientWidth, n = o.clientHeight, r = 0, a = 0;
|
|
683
683
|
if (l) {
|
|
684
684
|
s = l.width, n = l.height;
|
|
685
|
-
const c =
|
|
685
|
+
const c = Ie();
|
|
686
686
|
(!c || c && e === "fixed") && (r = l.offsetLeft, a = l.offsetTop);
|
|
687
687
|
}
|
|
688
|
-
const
|
|
689
|
-
if (
|
|
690
|
-
const c = o.ownerDocument,
|
|
688
|
+
const d = ve(o);
|
|
689
|
+
if (d <= 0) {
|
|
690
|
+
const c = o.ownerDocument, m = c.body, p = getComputedStyle(m), h = c.compatMode === "CSS1Compat" && parseFloat(p.marginLeft) + parseFloat(p.marginRight) || 0, f = Math.abs(o.clientWidth - m.clientWidth - h);
|
|
691
691
|
f <= Fe && (s -= f);
|
|
692
|
-
} else
|
|
692
|
+
} else d <= Fe && (s += d);
|
|
693
693
|
return {
|
|
694
694
|
width: s,
|
|
695
695
|
height: n,
|
|
@@ -697,26 +697,26 @@ function Bt(i, e) {
|
|
|
697
697
|
y: a
|
|
698
698
|
};
|
|
699
699
|
}
|
|
700
|
-
const
|
|
700
|
+
const Bt = /* @__PURE__ */ new Set(["absolute", "fixed"]);
|
|
701
701
|
function Wt(i, e) {
|
|
702
|
-
const t = j(i, !0, e === "fixed"), o = t.top + i.clientTop, l = t.left + i.clientLeft, s =
|
|
702
|
+
const t = j(i, !0, e === "fixed"), o = t.top + i.clientTop, l = t.left + i.clientLeft, s = L(i) ? K(i) : M(1), n = i.clientWidth * s.x, r = i.clientHeight * s.y, a = l * s.x, d = o * s.y;
|
|
703
703
|
return {
|
|
704
704
|
width: n,
|
|
705
705
|
height: r,
|
|
706
706
|
x: a,
|
|
707
|
-
y:
|
|
707
|
+
y: d
|
|
708
708
|
};
|
|
709
709
|
}
|
|
710
710
|
function Ne(i, e, t) {
|
|
711
711
|
let o;
|
|
712
712
|
if (e === "viewport")
|
|
713
|
-
o =
|
|
713
|
+
o = Ht(i, t);
|
|
714
714
|
else if (e === "document")
|
|
715
|
-
o = Nt(
|
|
715
|
+
o = Nt(V(i));
|
|
716
716
|
else if (T(e))
|
|
717
717
|
o = Wt(e, t);
|
|
718
718
|
else {
|
|
719
|
-
const l =
|
|
719
|
+
const l = Xe(i);
|
|
720
720
|
o = {
|
|
721
721
|
x: e.x - l.x,
|
|
722
722
|
y: e.y - l.y,
|
|
@@ -727,19 +727,19 @@ function Ne(i, e, t) {
|
|
|
727
727
|
return pe(o);
|
|
728
728
|
}
|
|
729
729
|
function Ze(i, e) {
|
|
730
|
-
const t =
|
|
731
|
-
return t === e || !T(t) || Y(t) ? !1 :
|
|
730
|
+
const t = D(i);
|
|
731
|
+
return t === e || !T(t) || Y(t) ? !1 : E(t).position === "fixed" || Ze(t, e);
|
|
732
732
|
}
|
|
733
733
|
function jt(i, e) {
|
|
734
734
|
const t = e.get(i);
|
|
735
735
|
if (t)
|
|
736
736
|
return t;
|
|
737
|
-
let o = Q(i, [], !1).filter((r) => T(r) &&
|
|
738
|
-
const s =
|
|
739
|
-
let n = s ?
|
|
737
|
+
let o = Q(i, [], !1).filter((r) => T(r) && J(r) !== "body"), l = null;
|
|
738
|
+
const s = E(i).position === "fixed";
|
|
739
|
+
let n = s ? D(i) : i;
|
|
740
740
|
for (; T(n) && !Y(n); ) {
|
|
741
|
-
const r =
|
|
742
|
-
!a && r.position === "fixed" && (l = null), (s ? !a && !l : !a && r.position === "static" && !!l &&
|
|
741
|
+
const r = E(n), a = Oe(n);
|
|
742
|
+
!a && r.position === "fixed" && (l = null), (s ? !a && !l : !a && r.position === "static" && !!l && Bt.has(l.position) || te(n) && !a && Ze(i, n)) ? o = o.filter((c) => c !== n) : l = r, n = D(n);
|
|
743
743
|
}
|
|
744
744
|
return e.set(i, o), o;
|
|
745
745
|
}
|
|
@@ -750,9 +750,9 @@ function Gt(i) {
|
|
|
750
750
|
rootBoundary: o,
|
|
751
751
|
strategy: l
|
|
752
752
|
} = i;
|
|
753
|
-
const n = [...t === "clippingAncestors" ? ge(e) ? [] : jt(e, this._c) : [].concat(t), o], r = n[0], a = n.reduce((
|
|
754
|
-
const
|
|
755
|
-
return
|
|
753
|
+
const n = [...t === "clippingAncestors" ? ge(e) ? [] : jt(e, this._c) : [].concat(t), o], r = n[0], a = n.reduce((d, c) => {
|
|
754
|
+
const m = Ne(e, c, l);
|
|
755
|
+
return d.top = B(m.top, d.top), d.right = ae(m.right, d.right), d.bottom = ae(m.bottom, d.bottom), d.left = B(m.left, d.left), d;
|
|
756
756
|
}, Ne(e, r, l));
|
|
757
757
|
return {
|
|
758
758
|
width: a.right - a.left,
|
|
@@ -765,64 +765,64 @@ function Ut(i) {
|
|
|
765
765
|
const {
|
|
766
766
|
width: e,
|
|
767
767
|
height: t
|
|
768
|
-
} =
|
|
768
|
+
} = Je(i);
|
|
769
769
|
return {
|
|
770
770
|
width: e,
|
|
771
771
|
height: t
|
|
772
772
|
};
|
|
773
773
|
}
|
|
774
774
|
function Kt(i, e, t) {
|
|
775
|
-
const o =
|
|
775
|
+
const o = L(e), l = V(e), s = t === "fixed", n = j(i, !0, s, e);
|
|
776
776
|
let r = {
|
|
777
777
|
scrollLeft: 0,
|
|
778
778
|
scrollTop: 0
|
|
779
779
|
};
|
|
780
|
-
const a =
|
|
781
|
-
function
|
|
780
|
+
const a = M(0);
|
|
781
|
+
function d() {
|
|
782
782
|
a.x = ve(l);
|
|
783
783
|
}
|
|
784
784
|
if (o || !o && !s)
|
|
785
|
-
if ((
|
|
785
|
+
if ((J(e) !== "body" || te(l)) && (r = be(e)), o) {
|
|
786
786
|
const h = j(e, !0, s, e);
|
|
787
787
|
a.x = h.x + e.clientLeft, a.y = h.y + e.clientTop;
|
|
788
|
-
} else l &&
|
|
789
|
-
s && !o && l &&
|
|
790
|
-
const c = l && !o && !s ? qe(l, r) :
|
|
788
|
+
} else l && d();
|
|
789
|
+
s && !o && l && d();
|
|
790
|
+
const c = l && !o && !s ? qe(l, r) : M(0), m = n.left + r.scrollLeft - a.x - c.x, p = n.top + r.scrollTop - a.y - c.y;
|
|
791
791
|
return {
|
|
792
|
-
x:
|
|
793
|
-
y:
|
|
792
|
+
x: m,
|
|
793
|
+
y: p,
|
|
794
794
|
width: n.width,
|
|
795
795
|
height: n.height
|
|
796
796
|
};
|
|
797
797
|
}
|
|
798
798
|
function _e(i) {
|
|
799
|
-
return
|
|
799
|
+
return E(i).position === "static";
|
|
800
800
|
}
|
|
801
|
-
function
|
|
802
|
-
if (!
|
|
801
|
+
function He(i, e) {
|
|
802
|
+
if (!L(i) || E(i).position === "fixed")
|
|
803
803
|
return null;
|
|
804
804
|
if (e)
|
|
805
805
|
return e(i);
|
|
806
806
|
let t = i.offsetParent;
|
|
807
|
-
return
|
|
807
|
+
return V(i) === t && (t = t.ownerDocument.body), t;
|
|
808
808
|
}
|
|
809
809
|
function Qe(i, e) {
|
|
810
|
-
const t =
|
|
810
|
+
const t = O(i);
|
|
811
811
|
if (ge(i))
|
|
812
812
|
return t;
|
|
813
|
-
if (!
|
|
814
|
-
let l =
|
|
813
|
+
if (!L(i)) {
|
|
814
|
+
let l = D(i);
|
|
815
815
|
for (; l && !Y(l); ) {
|
|
816
816
|
if (T(l) && !_e(l))
|
|
817
817
|
return l;
|
|
818
|
-
l =
|
|
818
|
+
l = D(l);
|
|
819
819
|
}
|
|
820
820
|
return t;
|
|
821
821
|
}
|
|
822
|
-
let o =
|
|
823
|
-
for (; o &&
|
|
824
|
-
o =
|
|
825
|
-
return o && Y(o) && _e(o) && !
|
|
822
|
+
let o = He(i, e);
|
|
823
|
+
for (; o && Pt(o) && _e(o); )
|
|
824
|
+
o = He(o, e);
|
|
825
|
+
return o && Y(o) && _e(o) && !Oe(o) ? t : o || Vt(i) || t;
|
|
826
826
|
}
|
|
827
827
|
const Yt = async function(i) {
|
|
828
828
|
const e = this.getOffsetParent || Qe, t = this.getDimensions, o = await t(i.floating);
|
|
@@ -836,12 +836,12 @@ const Yt = async function(i) {
|
|
|
836
836
|
}
|
|
837
837
|
};
|
|
838
838
|
};
|
|
839
|
-
function
|
|
840
|
-
return
|
|
839
|
+
function Jt(i) {
|
|
840
|
+
return E(i).direction === "rtl";
|
|
841
841
|
}
|
|
842
|
-
const
|
|
842
|
+
const Xt = {
|
|
843
843
|
convertOffsetParentRelativeRectToViewportRelativeRect: Rt,
|
|
844
|
-
getDocumentElement:
|
|
844
|
+
getDocumentElement: V,
|
|
845
845
|
getClippingRect: Gt,
|
|
846
846
|
getOffsetParent: Qe,
|
|
847
847
|
getElementRects: Yt,
|
|
@@ -849,52 +849,52 @@ const Jt = {
|
|
|
849
849
|
getDimensions: Ut,
|
|
850
850
|
getScale: K,
|
|
851
851
|
isElement: T,
|
|
852
|
-
isRTL:
|
|
852
|
+
isRTL: Jt
|
|
853
853
|
};
|
|
854
854
|
function et(i, e) {
|
|
855
855
|
return i.x === e.x && i.y === e.y && i.width === e.width && i.height === e.height;
|
|
856
856
|
}
|
|
857
857
|
function qt(i, e) {
|
|
858
858
|
let t = null, o;
|
|
859
|
-
const l =
|
|
859
|
+
const l = V(i);
|
|
860
860
|
function s() {
|
|
861
861
|
var r;
|
|
862
862
|
clearTimeout(o), (r = t) == null || r.disconnect(), t = null;
|
|
863
863
|
}
|
|
864
864
|
function n(r, a) {
|
|
865
865
|
r === void 0 && (r = !1), a === void 0 && (a = 1), s();
|
|
866
|
-
const
|
|
866
|
+
const d = i.getBoundingClientRect(), {
|
|
867
867
|
left: c,
|
|
868
|
-
top:
|
|
869
|
-
width:
|
|
868
|
+
top: m,
|
|
869
|
+
width: p,
|
|
870
870
|
height: h
|
|
871
|
-
} =
|
|
872
|
-
if (r || e(), !
|
|
871
|
+
} = d;
|
|
872
|
+
if (r || e(), !p || !h)
|
|
873
873
|
return;
|
|
874
|
-
const f = oe(
|
|
874
|
+
const f = oe(m), w = oe(l.clientWidth - (c + p)), g = oe(l.clientHeight - (m + h)), b = oe(c), x = {
|
|
875
875
|
rootMargin: -f + "px " + -w + "px " + -g + "px " + -b + "px",
|
|
876
|
-
threshold:
|
|
876
|
+
threshold: B(0, ae(1, a)) || 1
|
|
877
877
|
};
|
|
878
|
-
let
|
|
879
|
-
function
|
|
880
|
-
const G =
|
|
878
|
+
let A = !0;
|
|
879
|
+
function S(X) {
|
|
880
|
+
const G = X[0].intersectionRatio;
|
|
881
881
|
if (G !== a) {
|
|
882
|
-
if (!
|
|
882
|
+
if (!A)
|
|
883
883
|
return n();
|
|
884
884
|
G ? n(!1, G) : o = setTimeout(() => {
|
|
885
885
|
n(!1, 1e-7);
|
|
886
886
|
}, 1e3);
|
|
887
887
|
}
|
|
888
|
-
G === 1 && !et(
|
|
888
|
+
G === 1 && !et(d, i.getBoundingClientRect()) && n(), A = !1;
|
|
889
889
|
}
|
|
890
890
|
try {
|
|
891
|
-
t = new IntersectionObserver(
|
|
891
|
+
t = new IntersectionObserver(S, {
|
|
892
892
|
...x,
|
|
893
893
|
// Handle <iframe>s
|
|
894
894
|
root: l.ownerDocument
|
|
895
895
|
});
|
|
896
896
|
} catch {
|
|
897
|
-
t = new IntersectionObserver(
|
|
897
|
+
t = new IntersectionObserver(S, x);
|
|
898
898
|
}
|
|
899
899
|
t.observe(i);
|
|
900
900
|
}
|
|
@@ -908,21 +908,21 @@ function le(i, e, t, o) {
|
|
|
908
908
|
elementResize: n = typeof ResizeObserver == "function",
|
|
909
909
|
layoutShift: r = typeof IntersectionObserver == "function",
|
|
910
910
|
animationFrame: a = !1
|
|
911
|
-
} = o,
|
|
911
|
+
} = o, d = Pe(i), c = l || s ? [...d ? Q(d) : [], ...Q(e)] : [];
|
|
912
912
|
c.forEach((b) => {
|
|
913
913
|
l && b.addEventListener("scroll", t, {
|
|
914
914
|
passive: !0
|
|
915
915
|
}), s && b.addEventListener("resize", t);
|
|
916
916
|
});
|
|
917
|
-
const
|
|
918
|
-
let
|
|
917
|
+
const m = d && r ? qt(d, t) : null;
|
|
918
|
+
let p = -1, h = null;
|
|
919
919
|
n && (h = new ResizeObserver((b) => {
|
|
920
920
|
let [y] = b;
|
|
921
|
-
y && y.target ===
|
|
921
|
+
y && y.target === d && h && (h.unobserve(e), cancelAnimationFrame(p), p = requestAnimationFrame(() => {
|
|
922
922
|
var x;
|
|
923
923
|
(x = h) == null || x.observe(e);
|
|
924
924
|
})), t();
|
|
925
|
-
}),
|
|
925
|
+
}), d && !a && h.observe(d), h.observe(e));
|
|
926
926
|
let f, w = a ? j(i) : null;
|
|
927
927
|
a && g();
|
|
928
928
|
function g() {
|
|
@@ -933,12 +933,12 @@ function le(i, e, t, o) {
|
|
|
933
933
|
var b;
|
|
934
934
|
c.forEach((y) => {
|
|
935
935
|
l && y.removeEventListener("scroll", t), s && y.removeEventListener("resize", t);
|
|
936
|
-
}),
|
|
936
|
+
}), m == null || m(), (b = h) == null || b.disconnect(), h = null, a && cancelAnimationFrame(f);
|
|
937
937
|
};
|
|
938
938
|
}
|
|
939
|
-
const se =
|
|
939
|
+
const se = St, ne = At, xe = xt, re = (i, e, t) => {
|
|
940
940
|
const o = /* @__PURE__ */ new Map(), l = {
|
|
941
|
-
platform:
|
|
941
|
+
platform: Xt,
|
|
942
942
|
...t
|
|
943
943
|
}, s = {
|
|
944
944
|
...l.platform,
|
|
@@ -950,14 +950,14 @@ const se = At, ne = St, xe = xt, re = (i, e, t) => {
|
|
|
950
950
|
});
|
|
951
951
|
};
|
|
952
952
|
var tt = function() {
|
|
953
|
-
},
|
|
953
|
+
}, P = "undefined", Zt = typeof window !== P && typeof window.navigator !== P && /Trident\/|MSIE /.test(window.navigator.userAgent), Se = [
|
|
954
954
|
"trace",
|
|
955
955
|
"debug",
|
|
956
956
|
"info",
|
|
957
957
|
"warn",
|
|
958
958
|
"error"
|
|
959
959
|
], ee = {}, _ = null;
|
|
960
|
-
function
|
|
960
|
+
function Be(i, e) {
|
|
961
961
|
var t = i[e];
|
|
962
962
|
if (typeof t.bind == "function")
|
|
963
963
|
return t.bind(i);
|
|
@@ -973,19 +973,19 @@ function Qt() {
|
|
|
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
975
|
function ei(i) {
|
|
976
|
-
return i === "debug" && (i = "log"), typeof console ===
|
|
976
|
+
return i === "debug" && (i = "log"), typeof console === P ? !1 : i === "trace" && Zt ? Qt : console[i] !== void 0 ? Be(console, i) : console.log !== void 0 ? Be(console, "log") : tt;
|
|
977
977
|
}
|
|
978
978
|
function Z() {
|
|
979
|
-
for (var i = this.getLevel(), e = 0; e <
|
|
980
|
-
var t =
|
|
979
|
+
for (var i = this.getLevel(), e = 0; e < Se.length; e++) {
|
|
980
|
+
var t = Se[e];
|
|
981
981
|
this[t] = e < i ? tt : this.methodFactory(t, i, this.name);
|
|
982
982
|
}
|
|
983
|
-
if (this.log = this.debug, typeof console ===
|
|
983
|
+
if (this.log = this.debug, typeof console === P && i < this.levels.SILENT)
|
|
984
984
|
return "No console available for logging";
|
|
985
985
|
}
|
|
986
986
|
function ti(i) {
|
|
987
987
|
return function() {
|
|
988
|
-
typeof console !==
|
|
988
|
+
typeof console !== P && (Z.call(this), this[i].apply(this, arguments));
|
|
989
989
|
};
|
|
990
990
|
}
|
|
991
991
|
function ii(i, e, t) {
|
|
@@ -994,9 +994,9 @@ function ii(i, e, t) {
|
|
|
994
994
|
function it(i, e) {
|
|
995
995
|
var t = this, o, l, s, n = "loglevel";
|
|
996
996
|
typeof i == "string" ? n += ":" + i : typeof i == "symbol" && (n = void 0);
|
|
997
|
-
function r(
|
|
998
|
-
var h = (
|
|
999
|
-
if (!(typeof window ===
|
|
997
|
+
function r(p) {
|
|
998
|
+
var h = (Se[p] || "silent").toUpperCase();
|
|
999
|
+
if (!(typeof window === P || !n)) {
|
|
1000
1000
|
try {
|
|
1001
1001
|
window.localStorage[n] = h;
|
|
1002
1002
|
return;
|
|
@@ -1009,25 +1009,25 @@ function it(i, e) {
|
|
|
1009
1009
|
}
|
|
1010
1010
|
}
|
|
1011
1011
|
function a() {
|
|
1012
|
-
var
|
|
1013
|
-
if (!(typeof window ===
|
|
1012
|
+
var p;
|
|
1013
|
+
if (!(typeof window === P || !n)) {
|
|
1014
1014
|
try {
|
|
1015
|
-
|
|
1015
|
+
p = window.localStorage[n];
|
|
1016
1016
|
} catch {
|
|
1017
1017
|
}
|
|
1018
|
-
if (typeof
|
|
1018
|
+
if (typeof p === P)
|
|
1019
1019
|
try {
|
|
1020
1020
|
var h = window.document.cookie, f = encodeURIComponent(n), w = h.indexOf(f + "=");
|
|
1021
|
-
w !== -1 && (
|
|
1021
|
+
w !== -1 && (p = /^([^;]+)/.exec(
|
|
1022
1022
|
h.slice(w + f.length + 1)
|
|
1023
1023
|
)[1]);
|
|
1024
1024
|
} catch {
|
|
1025
1025
|
}
|
|
1026
|
-
return t.levels[
|
|
1026
|
+
return t.levels[p] === void 0 && (p = void 0), p;
|
|
1027
1027
|
}
|
|
1028
1028
|
}
|
|
1029
|
-
function
|
|
1030
|
-
if (!(typeof window ===
|
|
1029
|
+
function d() {
|
|
1030
|
+
if (!(typeof window === P || !n)) {
|
|
1031
1031
|
try {
|
|
1032
1032
|
window.localStorage.removeItem(n);
|
|
1033
1033
|
} catch {
|
|
@@ -1038,11 +1038,11 @@ function it(i, e) {
|
|
|
1038
1038
|
}
|
|
1039
1039
|
}
|
|
1040
1040
|
}
|
|
1041
|
-
function c(
|
|
1042
|
-
var h =
|
|
1041
|
+
function c(p) {
|
|
1042
|
+
var h = p;
|
|
1043
1043
|
if (typeof h == "string" && t.levels[h.toUpperCase()] !== void 0 && (h = t.levels[h.toUpperCase()]), typeof h == "number" && h >= 0 && h <= t.levels.SILENT)
|
|
1044
1044
|
return h;
|
|
1045
|
-
throw new TypeError("log.setLevel() called with invalid level: " +
|
|
1045
|
+
throw new TypeError("log.setLevel() called with invalid level: " + p);
|
|
1046
1046
|
}
|
|
1047
1047
|
t.name = i, t.levels = {
|
|
1048
1048
|
TRACE: 0,
|
|
@@ -1053,25 +1053,25 @@ function it(i, e) {
|
|
|
1053
1053
|
SILENT: 5
|
|
1054
1054
|
}, t.methodFactory = e || ii, t.getLevel = function() {
|
|
1055
1055
|
return s ?? l ?? o;
|
|
1056
|
-
}, t.setLevel = function(
|
|
1057
|
-
return s = c(
|
|
1058
|
-
}, t.setDefaultLevel = function(
|
|
1059
|
-
l = c(
|
|
1056
|
+
}, t.setLevel = function(p, h) {
|
|
1057
|
+
return s = c(p), h !== !1 && r(s), Z.call(t);
|
|
1058
|
+
}, t.setDefaultLevel = function(p) {
|
|
1059
|
+
l = c(p), a() || t.setLevel(p, !1);
|
|
1060
1060
|
}, t.resetLevel = function() {
|
|
1061
|
-
s = null,
|
|
1062
|
-
}, t.enableAll = function(
|
|
1063
|
-
t.setLevel(t.levels.TRACE,
|
|
1064
|
-
}, t.disableAll = function(
|
|
1065
|
-
t.setLevel(t.levels.SILENT,
|
|
1061
|
+
s = null, d(), Z.call(t);
|
|
1062
|
+
}, t.enableAll = function(p) {
|
|
1063
|
+
t.setLevel(t.levels.TRACE, p);
|
|
1064
|
+
}, t.disableAll = function(p) {
|
|
1065
|
+
t.setLevel(t.levels.SILENT, p);
|
|
1066
1066
|
}, t.rebuild = function() {
|
|
1067
1067
|
if (_ !== t && (o = c(_.getLevel())), Z.call(t), _ === t)
|
|
1068
|
-
for (var
|
|
1069
|
-
ee[
|
|
1068
|
+
for (var p in ee)
|
|
1069
|
+
ee[p].rebuild();
|
|
1070
1070
|
}, o = c(
|
|
1071
1071
|
_ ? _.getLevel() : "WARN"
|
|
1072
1072
|
);
|
|
1073
|
-
var
|
|
1074
|
-
|
|
1073
|
+
var m = a();
|
|
1074
|
+
m != null && (s = c(m)), Z.call(t);
|
|
1075
1075
|
}
|
|
1076
1076
|
_ = new it();
|
|
1077
1077
|
_.getLogger = function(e) {
|
|
@@ -1083,9 +1083,9 @@ _.getLogger = function(e) {
|
|
|
1083
1083
|
_.methodFactory
|
|
1084
1084
|
)), t;
|
|
1085
1085
|
};
|
|
1086
|
-
var oi = typeof window !==
|
|
1086
|
+
var oi = typeof window !== P ? window.log : void 0;
|
|
1087
1087
|
_.noConflict = function() {
|
|
1088
|
-
return typeof window !==
|
|
1088
|
+
return typeof window !== P && window.log === _ && (window.log = oi), _;
|
|
1089
1089
|
};
|
|
1090
1090
|
_.getLoggers = function() {
|
|
1091
1091
|
return ee;
|
|
@@ -1117,15 +1117,15 @@ var li = function(i) {
|
|
|
1117
1117
|
throw new TypeError("Argument is not a logger");
|
|
1118
1118
|
var t = i.methodFactory, o = i.name || "", l = N[o] || N[""] || si;
|
|
1119
1119
|
function s(n, r, a) {
|
|
1120
|
-
var
|
|
1120
|
+
var d = t(n, r, a), c = N[a] || N[""], m = c.template.indexOf("%t") !== -1, p = c.template.indexOf("%l") !== -1, h = c.template.indexOf("%n") !== -1;
|
|
1121
1121
|
return function() {
|
|
1122
1122
|
for (var f = "", w = arguments.length, g = Array(w), b = 0; b < w; b++)
|
|
1123
1123
|
g[b] = arguments[b];
|
|
1124
1124
|
if (o || !N[a]) {
|
|
1125
|
-
var y = c.timestampFormatter(/* @__PURE__ */ new Date()), x = c.levelFormatter(n),
|
|
1126
|
-
c.format ? f += c.format(x,
|
|
1125
|
+
var y = c.timestampFormatter(/* @__PURE__ */ new Date()), x = c.levelFormatter(n), A = c.nameFormatter(a);
|
|
1126
|
+
c.format ? f += c.format(x, A, y) : (f += c.template, m && (f = f.replace(/%t/, y)), p && (f = f.replace(/%l/, x)), h && (f = f.replace(/%n/, A))), g.length && typeof g[0] == "string" ? g[0] = f + " " + g[0] : g.unshift(f);
|
|
1127
1127
|
}
|
|
1128
|
-
|
|
1128
|
+
d.apply(void 0, g);
|
|
1129
1129
|
};
|
|
1130
1130
|
}
|
|
1131
1131
|
return N[o] || (i.methodFactory = s), e = e || {}, e.template && (e.format = void 0), N[o] = li({}, l, e), i.setLevel(i.getLevel()), ot || i.warn(
|
|
@@ -1135,7 +1135,7 @@ var li = function(i) {
|
|
|
1135
1135
|
reg: ni,
|
|
1136
1136
|
apply: ri
|
|
1137
1137
|
};
|
|
1138
|
-
const
|
|
1138
|
+
const he = {
|
|
1139
1139
|
debug: "#0ea5e9",
|
|
1140
1140
|
// Blue
|
|
1141
1141
|
info: "#10b981",
|
|
@@ -1148,7 +1148,7 @@ const me = {
|
|
|
1148
1148
|
Te.reg(_);
|
|
1149
1149
|
Te.apply(_, {
|
|
1150
1150
|
format(i, e, t) {
|
|
1151
|
-
return
|
|
1151
|
+
return he[i.toLowerCase()], `%c[${t}]%c %c[${i}]%c ${e ? `%c[${e}]%c ` : ""}`;
|
|
1152
1152
|
},
|
|
1153
1153
|
timestampFormatter(i) {
|
|
1154
1154
|
return i.toTimeString().split(" ")[0] + "." + i.getMilliseconds().toString().padStart(3, "0");
|
|
@@ -1159,7 +1159,7 @@ _.methodFactory = function(i, e, t) {
|
|
|
1159
1159
|
const o = ai(i, e, t);
|
|
1160
1160
|
return function(...l) {
|
|
1161
1161
|
if (l.length > 0 && typeof l[0] == "string" && l[0].includes("%c")) {
|
|
1162
|
-
const s =
|
|
1162
|
+
const s = he[i] || "#666", n = [
|
|
1163
1163
|
l[0],
|
|
1164
1164
|
`color: ${s}; font-weight: bold;`,
|
|
1165
1165
|
// timestamp color
|
|
@@ -1183,11 +1183,11 @@ _.methodFactory = function(i, e, t) {
|
|
|
1183
1183
|
};
|
|
1184
1184
|
};
|
|
1185
1185
|
_.setLevel("silent");
|
|
1186
|
-
const
|
|
1187
|
-
[
|
|
1186
|
+
const H = _.getLogger("INIT"), C = _.getLogger("DATA"), v = _.getLogger("UI"), k = _.getLogger("INTERACTION");
|
|
1187
|
+
[H, C, v, k].forEach((i) => {
|
|
1188
1188
|
Te.apply(i, {
|
|
1189
1189
|
format(t, o, l) {
|
|
1190
|
-
return
|
|
1190
|
+
return he[t.toLowerCase()], `%c[${l}]%c %c[${t}]%c %c[${o}]%c `;
|
|
1191
1191
|
},
|
|
1192
1192
|
timestampFormatter(t) {
|
|
1193
1193
|
return t.toTimeString().split(" ")[0] + "." + t.getMilliseconds().toString().padStart(3, "0");
|
|
@@ -1198,7 +1198,7 @@ const B = _.getLogger("INIT"), S = _.getLogger("DATA"), v = _.getLogger("UI"), A
|
|
|
1198
1198
|
const s = e(t, o, l);
|
|
1199
1199
|
return function(...n) {
|
|
1200
1200
|
if (n.length > 0 && typeof n[0] == "string" && n[0].includes("%c")) {
|
|
1201
|
-
const r =
|
|
1201
|
+
const r = he[t] || "#666", a = [
|
|
1202
1202
|
n[0],
|
|
1203
1203
|
`color: ${r}; font-weight: bold;`,
|
|
1204
1204
|
// timestamp
|
|
@@ -1218,20 +1218,139 @@ const B = _.getLogger("INIT"), S = _.getLogger("DATA"), v = _.getLogger("UI"), A
|
|
|
1218
1218
|
}, i.setLevel("silent");
|
|
1219
1219
|
});
|
|
1220
1220
|
const lt = (i) => {
|
|
1221
|
-
_.setLevel(i),
|
|
1222
|
-
}, hi = () => {
|
|
1223
|
-
lt("debug");
|
|
1221
|
+
_.setLevel(i), H.setLevel(i), C.setLevel(i), v.setLevel(i), k.setLevel(i);
|
|
1224
1222
|
}, ui = () => {
|
|
1223
|
+
lt("debug");
|
|
1224
|
+
}, fi = () => {
|
|
1225
1225
|
lt("silent");
|
|
1226
|
-
},
|
|
1226
|
+
}, gi = (i, e = "debug") => {
|
|
1227
1227
|
({
|
|
1228
|
-
INIT:
|
|
1229
|
-
DATA:
|
|
1228
|
+
INIT: H,
|
|
1229
|
+
DATA: C,
|
|
1230
1230
|
UI: v,
|
|
1231
|
-
INTERACTION:
|
|
1231
|
+
INTERACTION: k
|
|
1232
1232
|
})[i].setLevel(e);
|
|
1233
1233
|
};
|
|
1234
1234
|
class ci {
|
|
1235
|
+
constructor(e) {
|
|
1236
|
+
u(this, "container");
|
|
1237
|
+
u(this, "wrapper");
|
|
1238
|
+
u(this, "viewport");
|
|
1239
|
+
u(this, "itemHeight");
|
|
1240
|
+
u(this, "items");
|
|
1241
|
+
u(this, "renderItem");
|
|
1242
|
+
u(this, "bufferSize");
|
|
1243
|
+
u(this, "onVisibleRangeChange");
|
|
1244
|
+
u(this, "onScroll");
|
|
1245
|
+
u(this, "scrollTop", 0);
|
|
1246
|
+
u(this, "viewportHeight", 0);
|
|
1247
|
+
u(this, "visibleStart", 0);
|
|
1248
|
+
u(this, "visibleEnd", 0);
|
|
1249
|
+
u(this, "scrollHandler");
|
|
1250
|
+
u(this, "resizeObserver");
|
|
1251
|
+
this.container = e.container, this.itemHeight = e.itemHeight, this.items = e.items, this.renderItem = e.renderItem, this.bufferSize = e.bufferSize ?? 10, this.onVisibleRangeChange = e.onVisibleRangeChange, this.onScroll = e.onScroll, this.scrollHandler = this.handleScroll.bind(this), this.init();
|
|
1252
|
+
}
|
|
1253
|
+
/**
|
|
1254
|
+
* Initialize virtual scroll DOM structure
|
|
1255
|
+
*
|
|
1256
|
+
* Structure:
|
|
1257
|
+
* container (overflow-y: auto)
|
|
1258
|
+
* └─ wrapper (height: totalItems * itemHeight)
|
|
1259
|
+
* └─ viewport (position: absolute, top: 0)
|
|
1260
|
+
* └─ items (position: absolute, top: index * itemHeight)
|
|
1261
|
+
*/
|
|
1262
|
+
init() {
|
|
1263
|
+
this.container.innerHTML = "", this.wrapper = document.createElement("div"), this.wrapper.style.position = "relative", this.wrapper.style.width = "100%", this.wrapper.style.height = `${this.items.length * this.itemHeight}px`, this.wrapper.className = "ml__virtual-scroll-wrapper", this.viewport = document.createElement("div"), this.viewport.style.position = "absolute", this.viewport.style.top = "0", this.viewport.style.left = "0", this.viewport.style.right = "0", this.viewport.style.width = "100%", this.viewport.className = "ml__virtual-scroll-viewport", this.wrapper.appendChild(this.viewport), this.container.appendChild(this.wrapper), this.container.addEventListener("scroll", this.scrollHandler), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => {
|
|
1264
|
+
this.updateViewportHeight(), this.render();
|
|
1265
|
+
}), this.resizeObserver.observe(this.container)), this.updateViewportHeight(), this.render();
|
|
1266
|
+
}
|
|
1267
|
+
/**
|
|
1268
|
+
* Update viewport height (visible area)
|
|
1269
|
+
*/
|
|
1270
|
+
updateViewportHeight() {
|
|
1271
|
+
this.viewportHeight = this.container.clientHeight;
|
|
1272
|
+
}
|
|
1273
|
+
/**
|
|
1274
|
+
* Handle scroll event
|
|
1275
|
+
*/
|
|
1276
|
+
handleScroll() {
|
|
1277
|
+
this.scrollTop = this.container.scrollTop, this.onScroll && this.onScroll(this.scrollTop), this.render();
|
|
1278
|
+
}
|
|
1279
|
+
/**
|
|
1280
|
+
* Calculate visible range based on scroll position
|
|
1281
|
+
*/
|
|
1282
|
+
calculateVisibleRange() {
|
|
1283
|
+
const e = Math.floor(this.scrollTop / this.itemHeight), t = Math.ceil((this.scrollTop + this.viewportHeight) / this.itemHeight), o = Math.max(0, e - this.bufferSize), l = Math.min(this.items.length, t + this.bufferSize);
|
|
1284
|
+
return { start: o, end: l };
|
|
1285
|
+
}
|
|
1286
|
+
/**
|
|
1287
|
+
* Render visible items
|
|
1288
|
+
*/
|
|
1289
|
+
render() {
|
|
1290
|
+
const { start: e, end: t } = this.calculateVisibleRange();
|
|
1291
|
+
if (e === this.visibleStart && t === this.visibleEnd)
|
|
1292
|
+
return;
|
|
1293
|
+
this.visibleStart = e, this.visibleEnd = t, this.onVisibleRangeChange && this.onVisibleRangeChange(e, t);
|
|
1294
|
+
let o = "";
|
|
1295
|
+
for (let l = e; l < t; l++) {
|
|
1296
|
+
const s = this.items[l], n = this.renderItem(s, l), r = l * this.itemHeight;
|
|
1297
|
+
o += `<div class="ml__virtual-item" style="position: absolute; top: ${r}px; left: 0; right: 0; height: ${this.itemHeight}px;" data-index="${l}">`, o += n, o += "</div>";
|
|
1298
|
+
}
|
|
1299
|
+
this.viewport.innerHTML = o;
|
|
1300
|
+
}
|
|
1301
|
+
/**
|
|
1302
|
+
* Update items and re-render
|
|
1303
|
+
*/
|
|
1304
|
+
setItems(e) {
|
|
1305
|
+
this.items = e, this.wrapper.style.height = `${e.length * this.itemHeight}px`, this.updateViewportHeight(), this.visibleStart = -1, this.visibleEnd = -1, this.render();
|
|
1306
|
+
}
|
|
1307
|
+
/**
|
|
1308
|
+
* Scroll to specific item index
|
|
1309
|
+
*/
|
|
1310
|
+
scrollToIndex(e) {
|
|
1311
|
+
if (e < 0 || e >= this.items.length)
|
|
1312
|
+
return;
|
|
1313
|
+
const t = e * this.itemHeight;
|
|
1314
|
+
this.container.scrollTop = t;
|
|
1315
|
+
}
|
|
1316
|
+
/**
|
|
1317
|
+
* Get currently visible range
|
|
1318
|
+
*/
|
|
1319
|
+
getVisibleRange() {
|
|
1320
|
+
return { start: this.visibleStart, end: this.visibleEnd };
|
|
1321
|
+
}
|
|
1322
|
+
/**
|
|
1323
|
+
* Get total number of items
|
|
1324
|
+
*/
|
|
1325
|
+
getItemCount() {
|
|
1326
|
+
return this.items.length;
|
|
1327
|
+
}
|
|
1328
|
+
/**
|
|
1329
|
+
* Update item height and re-render
|
|
1330
|
+
*/
|
|
1331
|
+
setItemHeight(e) {
|
|
1332
|
+
this.itemHeight = e, this.wrapper.style.height = `${this.items.length * e}px`, this.visibleStart = -1, this.visibleEnd = -1, this.render();
|
|
1333
|
+
}
|
|
1334
|
+
/**
|
|
1335
|
+
* Update buffer size
|
|
1336
|
+
*/
|
|
1337
|
+
setBufferSize(e) {
|
|
1338
|
+
this.bufferSize = e, this.visibleStart = -1, this.visibleEnd = -1, this.render();
|
|
1339
|
+
}
|
|
1340
|
+
/**
|
|
1341
|
+
* Refresh/force re-render
|
|
1342
|
+
*/
|
|
1343
|
+
refresh() {
|
|
1344
|
+
this.visibleStart = -1, this.visibleEnd = -1, this.render();
|
|
1345
|
+
}
|
|
1346
|
+
/**
|
|
1347
|
+
* Cleanup and remove event listeners
|
|
1348
|
+
*/
|
|
1349
|
+
destroy() {
|
|
1350
|
+
this.container.removeEventListener("scroll", this.scrollHandler), this.resizeObserver && this.resizeObserver.disconnect(), this.container.innerHTML = "";
|
|
1351
|
+
}
|
|
1352
|
+
}
|
|
1353
|
+
class di {
|
|
1235
1354
|
constructor(e, t = {}) {
|
|
1236
1355
|
u(this, "element");
|
|
1237
1356
|
u(this, "instanceId");
|
|
@@ -1243,6 +1362,7 @@ class ci {
|
|
|
1243
1362
|
u(this, "filteredOptions", []);
|
|
1244
1363
|
u(this, "hiddenInputs", []);
|
|
1245
1364
|
u(this, "focusedIndex", -1);
|
|
1365
|
+
u(this, "matchingIndices", /* @__PURE__ */ new Set());
|
|
1246
1366
|
u(this, "searchTerm", "");
|
|
1247
1367
|
u(this, "isLoading", !1);
|
|
1248
1368
|
u(this, "showSelectedPopover", !1);
|
|
@@ -1258,6 +1378,9 @@ class ci {
|
|
|
1258
1378
|
// Pill tooltip storage
|
|
1259
1379
|
u(this, "pillTooltips", /* @__PURE__ */ new Map());
|
|
1260
1380
|
u(this, "pillTooltipCleanups", /* @__PURE__ */ new Map());
|
|
1381
|
+
// Virtual scroll instance
|
|
1382
|
+
u(this, "virtualScroll", null);
|
|
1383
|
+
u(this, "optionsContainer", null);
|
|
1261
1384
|
// DOM elements
|
|
1262
1385
|
u(this, "input");
|
|
1263
1386
|
u(this, "dropdown");
|
|
@@ -1277,6 +1400,7 @@ class ci {
|
|
|
1277
1400
|
emptyMessage: e.dataset.emptyMessage || "No results found",
|
|
1278
1401
|
loadingMessage: e.dataset.loadingMessage || "Loading...",
|
|
1279
1402
|
searchInputMode: e.dataset.searchInputMode || "normal",
|
|
1403
|
+
searchMode: e.dataset.searchMode || "filter",
|
|
1280
1404
|
// Number options
|
|
1281
1405
|
pillsThreshold: e.dataset.pillsThreshold ? parseInt(e.dataset.pillsThreshold) : void 0,
|
|
1282
1406
|
minSearchLength: parseInt(e.dataset.minSearchLength || "0") || 0,
|
|
@@ -1372,7 +1496,7 @@ class ci {
|
|
|
1372
1496
|
return Array.isArray(e) ? !1 : this.options.disabledMember && e[this.options.disabledMember] !== void 0 ? !!e[this.options.disabledMember] : this.options.getDisabledCallback ? this.options.getDisabledCallback(e) : !1;
|
|
1373
1497
|
}
|
|
1374
1498
|
init() {
|
|
1375
|
-
this.parseOptions(), this.buildHTML(), this.attachEvents(), this.parseInitialSelection(),
|
|
1499
|
+
this.parseOptions(), this.buildHTML(), this.attachEvents(), this.parseInitialSelection(), H.debug(`Initialized [${this.instanceId}] with options:`, {
|
|
1376
1500
|
placeholder: this.options.searchPlaceholder,
|
|
1377
1501
|
totalOptions: this.allOptions.length,
|
|
1378
1502
|
isCloseOnSelect: this.options.isCloseOnSelect,
|
|
@@ -1387,21 +1511,21 @@ class ci {
|
|
|
1387
1511
|
try {
|
|
1388
1512
|
this.allOptions = JSON.parse(e);
|
|
1389
1513
|
} catch (t) {
|
|
1390
|
-
|
|
1514
|
+
C.error(`[${this.instanceId}] Failed to parse data-options:`, t), this.allOptions = [];
|
|
1391
1515
|
}
|
|
1392
1516
|
else this.options.options && (this.allOptions = this.options.options);
|
|
1393
1517
|
this.filteredOptions = [...this.allOptions];
|
|
1394
1518
|
}
|
|
1395
1519
|
buildHTML() {
|
|
1396
1520
|
const e = this.options.container || document.body, t = this.element.getRootNode(), o = t instanceof ShadowRoot ? t.host : this.element, l = o.getAttribute("dir") === "rtl", s = o.closest('[dir="rtl"]') !== null;
|
|
1397
|
-
this.isRTL = l || s,
|
|
1521
|
+
this.isRTL = l || s, H.debug(`[${this.instanceId}] RTL Debug:`, {
|
|
1398
1522
|
isShadowRoot: t instanceof ShadowRoot,
|
|
1399
1523
|
hostElement: o,
|
|
1400
1524
|
elementDir: o.getAttribute("dir"),
|
|
1401
1525
|
hasElementDir: l,
|
|
1402
1526
|
hasAncestorDir: s,
|
|
1403
1527
|
isRTL: this.isRTL
|
|
1404
|
-
}), this.effectivePillsPosition = this.options.pillsPosition || "bottom", this.isRTL && (this.effectivePillsPosition === "left" ? this.effectivePillsPosition = "right" : this.effectivePillsPosition === "right" && (this.effectivePillsPosition = "left")), this.element.classList.add("ml"), this.isRTL && (this.element.classList.add("ml--rtl"),
|
|
1528
|
+
}), this.effectivePillsPosition = this.options.pillsPosition || "bottom", this.isRTL && (this.effectivePillsPosition === "left" ? this.effectivePillsPosition = "right" : this.effectivePillsPosition === "right" && (this.effectivePillsPosition = "left")), this.element.classList.add("ml"), this.isRTL && (this.element.classList.add("ml--rtl"), H.debug(`[${this.instanceId}] Added ml--rtl class to element`)), (!this.options.isCheckboxesShown || !this.options.isMultipleEnabled) && this.element.classList.add("ml--no-checkboxes");
|
|
1405
1529
|
const n = document.createElement("div");
|
|
1406
1530
|
n.className = "ml__input-wrapper", this.input = document.createElement("input"), this.input.type = "text", this.input.className = "ml__input", this.input.placeholder = this.options.searchPlaceholder, this.input.autocomplete = "off", this.options.searchInputMode === "readonly" ? this.input.readOnly = !0 : this.options.searchInputMode === "hidden" && (this.input.style.display = "none");
|
|
1407
1531
|
const r = document.createElement("span");
|
|
@@ -1409,7 +1533,29 @@ class ci {
|
|
|
1409
1533
|
const a = document.createElement("div");
|
|
1410
1534
|
a.className = "ml-wrapper", (this.effectivePillsPosition === "left" || this.effectivePillsPosition === "right") && a.classList.add("ml-wrapper--inline"), a.appendChild(n), a.appendChild(this.pillsContainer), this.element.appendChild(a), this.dropdown = document.createElement("div"), this.dropdown.className = "ml__dropdown", e.appendChild(this.dropdown), this.options.searchHint && (this.hint = document.createElement("div"), this.hint.className = "ml__hint", this.hint.textContent = this.options.searchHint, e.appendChild(this.hint)), this.selectedPopover = document.createElement("div"), this.selectedPopover.className = "ml__selected-popover", e.appendChild(this.selectedPopover), this.renderDropdown();
|
|
1411
1535
|
}
|
|
1536
|
+
/**
|
|
1537
|
+
* Check if virtual scroll should be used
|
|
1538
|
+
*/
|
|
1539
|
+
shouldUseVirtualScroll() {
|
|
1540
|
+
if (!this.options.isVirtualScrollEnabled || this.options.isGroupsAllowed && this.hasGroups()) return !1;
|
|
1541
|
+
const e = this.options.virtualScrollThreshold ?? 100;
|
|
1542
|
+
return this.filteredOptions.length >= e;
|
|
1543
|
+
}
|
|
1544
|
+
/**
|
|
1545
|
+
* Check if any options have groups
|
|
1546
|
+
*/
|
|
1547
|
+
hasGroups() {
|
|
1548
|
+
return this.filteredOptions.some((e) => {
|
|
1549
|
+
const t = this.getItemGroup(e);
|
|
1550
|
+
return t && t.trim() !== "";
|
|
1551
|
+
});
|
|
1552
|
+
}
|
|
1412
1553
|
renderDropdown() {
|
|
1554
|
+
if (this.shouldUseVirtualScroll()) {
|
|
1555
|
+
this.dropdown.classList.add("ml__dropdown--virtual"), this.renderDropdownVirtual();
|
|
1556
|
+
return;
|
|
1557
|
+
}
|
|
1558
|
+
this.dropdown.classList.remove("ml__dropdown--virtual");
|
|
1413
1559
|
let e = "";
|
|
1414
1560
|
if (this.isLoading) {
|
|
1415
1561
|
e += '<div class="ml__loader">', e += '<div class="pa-loader pa-loader--sm"></div>', e += `<div class="ml__loading-text">${this.options.loadingMessage}</div>`, e += "</div>", this.dropdown.innerHTML = e;
|
|
@@ -1434,11 +1580,39 @@ class ci {
|
|
|
1434
1580
|
});
|
|
1435
1581
|
e += "</div>", this.dropdown.innerHTML = e;
|
|
1436
1582
|
}
|
|
1583
|
+
/**
|
|
1584
|
+
* Render dropdown with virtual scrolling
|
|
1585
|
+
*/
|
|
1586
|
+
renderDropdownVirtual() {
|
|
1587
|
+
if (!this.virtualScroll) {
|
|
1588
|
+
let o = "";
|
|
1589
|
+
if (this.options.isMultipleEnabled && (this.options.isSelectAllAllowed || this.options.isClearAllAllowed)) {
|
|
1590
|
+
const s = this.options.isActionsSticky ? " ml__actions--sticky" : "";
|
|
1591
|
+
o += `<div class="ml__actions${s}">`, this.options.isSelectAllAllowed && (o += '<button type="button" class="ml__action-btn" data-action="select-all">Select All</button>'), this.options.isClearAllAllowed && (o += '<button type="button" class="ml__action-btn" data-action="clear-all">Clear All</button>'), o += "</div>";
|
|
1592
|
+
}
|
|
1593
|
+
const l = this.options.maxHeight || "20rem";
|
|
1594
|
+
o += `<div class="ml__options ml__options--virtual" style="height: ${l}; max-height: ${l}; overflow-y: auto; position: relative;"></div>`, this.dropdown.innerHTML = o, this.optionsContainer = this.dropdown.querySelector(".ml__options");
|
|
1595
|
+
}
|
|
1596
|
+
if (this.filteredOptions.length === 0) {
|
|
1597
|
+
this.optionsContainer.innerHTML = `<div class="ml__empty">${this.options.emptyMessage}</div>`;
|
|
1598
|
+
return;
|
|
1599
|
+
}
|
|
1600
|
+
const e = this.options.optionHeight ?? 50, t = this.options.virtualScrollBuffer ?? 10;
|
|
1601
|
+
requestAnimationFrame(() => {
|
|
1602
|
+
this.optionsContainer && (this.virtualScroll ? this.virtualScroll.setItems(this.filteredOptions) : this.virtualScroll = new ci({
|
|
1603
|
+
container: this.optionsContainer,
|
|
1604
|
+
itemHeight: e,
|
|
1605
|
+
items: this.filteredOptions,
|
|
1606
|
+
renderItem: (o, l) => this.renderOption(o, l),
|
|
1607
|
+
bufferSize: t
|
|
1608
|
+
}));
|
|
1609
|
+
});
|
|
1610
|
+
}
|
|
1437
1611
|
renderOption(e, t) {
|
|
1438
|
-
const o = this.getItemValue(e), l = this.getItemDisplayValue(e), s = this.getItemIcon(e), n = this.getItemSubtitle(e), r = this.getItemDisabled(e), a = this.selectedValues.has(String(o)),
|
|
1439
|
-
a &&
|
|
1440
|
-
let
|
|
1441
|
-
return this.options.isCheckboxesShown && this.options.isMultipleEnabled && (
|
|
1612
|
+
const o = this.getItemValue(e), l = this.getItemDisplayValue(e), s = this.getItemIcon(e), n = this.getItemSubtitle(e), r = this.getItemDisabled(e), a = this.selectedValues.has(String(o)), d = t === this.focusedIndex, c = this.matchingIndices.has(t), m = ["ml__option"];
|
|
1613
|
+
a && m.push("ml__option--selected"), d && m.push("ml__option--focused"), c && m.push("ml__option--matched"), r && m.push("ml__option--disabled");
|
|
1614
|
+
let p = `<div class="${m.join(" ")}" data-value="${o}" data-index="${t}">`;
|
|
1615
|
+
return this.options.isCheckboxesShown && this.options.isMultipleEnabled && (p += `<input type="checkbox" class="ml__checkbox" ${a ? "checked" : ""} ${r ? "disabled" : ""}>`), p += '<div class="ml__option-content">', s && (p += `<span class="ml__option-icon">${s}</span>`), p += '<div class="ml__option-text">', p += `<div class="ml__option-title">${this.highlightMatch(l, this.searchTerm)}</div>`, n && (p += `<div class="ml__option-subtitle">${n}</div>`), p += "</div>", p += "</div>", p += "</div>", p;
|
|
1442
1616
|
}
|
|
1443
1617
|
highlightMatch(e, t) {
|
|
1444
1618
|
if (!t) return e;
|
|
@@ -1487,21 +1661,21 @@ class ci {
|
|
|
1487
1661
|
else if (o === "partial") {
|
|
1488
1662
|
this.pillsContainer.className = `ml__pills ml__pills--${this.effectivePillsPosition}`;
|
|
1489
1663
|
const s = this.options.pillsMaxVisible || 3, n = e.slice(0, s), r = t - s, a = n.map((c) => {
|
|
1490
|
-
const
|
|
1664
|
+
const m = this.getItemValue(c), p = this.getItemPillDisplayValue(c);
|
|
1491
1665
|
return `
|
|
1492
1666
|
<div class="ml__pill">
|
|
1493
|
-
<span class="ml__pill-text">${
|
|
1494
|
-
<button type="button" class="ml__pill-remove" data-value="${
|
|
1667
|
+
<span class="ml__pill-text">${p}</span>
|
|
1668
|
+
<button type="button" class="ml__pill-remove" data-value="${m}" aria-label="Remove ${p}"></button>
|
|
1495
1669
|
</div>
|
|
1496
1670
|
`;
|
|
1497
1671
|
}).join("");
|
|
1498
|
-
let
|
|
1499
|
-
r > 0 && (
|
|
1672
|
+
let d = "";
|
|
1673
|
+
r > 0 && (d = `
|
|
1500
1674
|
<div class="ml__pill ml__pill--more" data-action="show-selected">
|
|
1501
1675
|
<span class="ml__pill-text">${this.options.getCountPillCallback ? this.options.getCountPillCallback(t, r) : `+${r} more`}</span>
|
|
1502
1676
|
<button type="button" class="ml__pill-remove" data-action="remove-hidden" aria-label="Remove ${r} hidden items"></button>
|
|
1503
1677
|
</div>
|
|
1504
|
-
`), this.pillsContainer.innerHTML = a +
|
|
1678
|
+
`), this.pillsContainer.innerHTML = a + d;
|
|
1505
1679
|
} else if (this.pillsContainer.className = `ml__count-display ml__count-display--${this.effectivePillsPosition}`, t > 0) {
|
|
1506
1680
|
const s = this.options.getCountPillCallback ? this.options.getCountPillCallback(t) : `${t} selected`;
|
|
1507
1681
|
this.pillsContainer.innerHTML = `
|
|
@@ -1528,7 +1702,12 @@ class ci {
|
|
|
1528
1702
|
this.options.isSearchEnabled && !this.isOpen && this.open(), this.handleSearch(t);
|
|
1529
1703
|
}), this.input.addEventListener("keydown", (e) => this.handleKeydown(e)), setTimeout(() => {
|
|
1530
1704
|
document.addEventListener("click", (e) => this.handleClickOutside(e));
|
|
1531
|
-
}, 0), this.dropdown.addEventListener("click", (e) => this.handleDropdownClick(e)), this.
|
|
1705
|
+
}, 0), this.dropdown.addEventListener("click", (e) => this.handleDropdownClick(e)), this.dropdown.addEventListener("wheel", (e) => {
|
|
1706
|
+
if (this.virtualScroll)
|
|
1707
|
+
return;
|
|
1708
|
+
const t = e.currentTarget, o = t.scrollTop === 0, l = t.scrollTop + t.clientHeight >= t.scrollHeight;
|
|
1709
|
+
(e.deltaY < 0 && o || e.deltaY > 0 && l) && e.preventDefault(), e.stopPropagation();
|
|
1710
|
+
}, { passive: !1 }), this.pillsContainer.addEventListener("mousedown", (e) => {
|
|
1532
1711
|
e.target.closest(".ml__count-text") && !this.showSelectedPopover && e.stopPropagation();
|
|
1533
1712
|
}), this.pillsContainer.addEventListener("click", (e) => this.handlePillClick(e)), this.countBadge.addEventListener("mousedown", (e) => {
|
|
1534
1713
|
this.showSelectedPopover || e.stopPropagation();
|
|
@@ -1537,33 +1716,49 @@ class ci {
|
|
|
1537
1716
|
}), this.selectedPopover.addEventListener("click", (e) => this.handleSelectedPopoverClick(e));
|
|
1538
1717
|
}
|
|
1539
1718
|
async handleSearch(e) {
|
|
1540
|
-
if (this.searchTerm = e,
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1719
|
+
if (this.searchTerm = e, !this.options.isSearchEnabled)
|
|
1720
|
+
return;
|
|
1721
|
+
let t = e;
|
|
1722
|
+
if (this.options.beforeSearchCallback) {
|
|
1723
|
+
const o = this.options.beforeSearchCallback(e);
|
|
1724
|
+
if (o === null) {
|
|
1725
|
+
C.debug(`[${this.instanceId}] beforeSearchCallback blocked search for term:`, e), this.filteredOptions = [...this.allOptions], this.matchingIndices.clear(), this.renderDropdown();
|
|
1726
|
+
return;
|
|
1727
|
+
}
|
|
1728
|
+
t = o, t !== e && C.debug(`[${this.instanceId}] beforeSearchCallback transformed: "${e}" -> "${t}"`);
|
|
1729
|
+
}
|
|
1730
|
+
if (this.options.searchCallback) {
|
|
1731
|
+
if (t.length < this.options.minSearchLength) {
|
|
1732
|
+
this.isLoading = !1, this.options.isKeepOptionsOnSearch ? (this.filteredOptions = [...this.allOptions], C.debug(`[${this.instanceId}] Search term below minimum, showing ${this.allOptions.length} initial options`)) : this.filteredOptions = [], this.matchingIndices.clear(), this.renderDropdown();
|
|
1733
|
+
return;
|
|
1734
|
+
}
|
|
1735
|
+
this.isLoading = !0, this.renderDropdown(), C.debug(`[${this.instanceId}] Loading data for search term:`, t);
|
|
1736
|
+
try {
|
|
1737
|
+
const o = await this.options.searchCallback(t);
|
|
1738
|
+
if (this.searchTerm === e) {
|
|
1739
|
+
const l = o || [];
|
|
1740
|
+
this.filteredOptions = [...l], this.isLoading = !1, this.matchingIndices.clear(), this.focusedIndex = this.options.isSearchEnabled && this.filteredOptions.length > 0 ? 0 : -1, this.renderDropdown(), C.debug(`[${this.instanceId}] Loaded ${l.length} results`);
|
|
1554
1741
|
}
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1742
|
+
} catch (o) {
|
|
1743
|
+
C.error(`[${this.instanceId}] Error loading data:`, o), this.isLoading = !1, this.options.isKeepOptionsOnSearch ? this.filteredOptions = [...this.allOptions] : this.filteredOptions = [], this.matchingIndices.clear(), this.renderDropdown();
|
|
1744
|
+
}
|
|
1745
|
+
} else {
|
|
1746
|
+
if (!t)
|
|
1747
|
+
this.filteredOptions = [...this.allOptions], this.matchingIndices.clear(), this.focusedIndex = this.filteredOptions.length > 0 ? 0 : -1;
|
|
1748
|
+
else {
|
|
1749
|
+
const o = this.options.searchMode || "filter", l = t.toLowerCase();
|
|
1750
|
+
if (o === "filter")
|
|
1751
|
+
this.filteredOptions = this.allOptions.filter((s) => this.getItemSearchValue(s).toLowerCase().includes(l)), this.matchingIndices.clear(), this.focusedIndex = this.filteredOptions.length > 0 ? 0 : -1, C.debug(`[${this.instanceId}] Filter mode: ${this.filteredOptions.length} matches for "${t}"`);
|
|
1752
|
+
else {
|
|
1753
|
+
this.filteredOptions = [...this.allOptions], this.matchingIndices.clear();
|
|
1754
|
+
let s = -1;
|
|
1755
|
+
this.allOptions.forEach((n, r) => {
|
|
1756
|
+
this.getItemSearchValue(n).toLowerCase().includes(l) && (this.matchingIndices.add(r), s === -1 && (s = r));
|
|
1757
|
+
}), s >= 0 ? (this.focusedIndex = s, C.debug(`[${this.instanceId}] Navigate mode: ${this.matchingIndices.size} matches, jumped to index ${s}`)) : C.debug(`[${this.instanceId}] Navigate mode: No matches found, keeping previous focus`);
|
|
1564
1758
|
}
|
|
1565
|
-
}
|
|
1566
|
-
|
|
1759
|
+
}
|
|
1760
|
+
this.renderDropdown(), this.options.searchMode === "navigate" && this.focusedIndex >= 0 && this.scrollToFocused();
|
|
1761
|
+
}
|
|
1567
1762
|
}
|
|
1568
1763
|
handleKeydown(e) {
|
|
1569
1764
|
if (!this.isOpen) {
|
|
@@ -1579,10 +1774,10 @@ class ci {
|
|
|
1579
1774
|
}
|
|
1580
1775
|
switch (e.key) {
|
|
1581
1776
|
case "ArrowDown":
|
|
1582
|
-
e.preventDefault(), this.focusNext();
|
|
1777
|
+
e.preventDefault(), e.ctrlKey || e.metaKey ? this.focusNextMatch() : this.focusNext();
|
|
1583
1778
|
break;
|
|
1584
1779
|
case "ArrowUp":
|
|
1585
|
-
e.preventDefault(), this.focusPrevious();
|
|
1780
|
+
e.preventDefault(), e.ctrlKey || e.metaKey ? this.focusPreviousMatch() : this.focusPrevious();
|
|
1586
1781
|
break;
|
|
1587
1782
|
case "Enter":
|
|
1588
1783
|
e.preventDefault(), this.focusedIndex >= 0 ? this.toggleOption(this.filteredOptions[this.focusedIndex]) : this.options.isAddNewAllowed && this.options.addNewCallback && this.input.value.trim() && this.handleAddNew(this.input.value.trim());
|
|
@@ -1608,19 +1803,19 @@ class ci {
|
|
|
1608
1803
|
}
|
|
1609
1804
|
}
|
|
1610
1805
|
handleDropdownClick(e) {
|
|
1611
|
-
|
|
1806
|
+
k.debug(`[${this.instanceId}] Dropdown clicked`, { target: e.target.className }), e.stopPropagation();
|
|
1612
1807
|
const t = e.target.closest("[data-action]");
|
|
1613
1808
|
if (t) {
|
|
1614
1809
|
e.preventDefault();
|
|
1615
1810
|
const l = t.dataset.action;
|
|
1616
|
-
|
|
1811
|
+
k.debug(`[${this.instanceId}] Action button clicked:`, l), l === "select-all" ? this.selectAll() : l === "clear-all" && this.clearAll();
|
|
1617
1812
|
return;
|
|
1618
1813
|
}
|
|
1619
1814
|
const o = e.target.closest(".ml__option");
|
|
1620
1815
|
if (o && !o.classList.contains("ml__option--disabled")) {
|
|
1621
1816
|
e.preventDefault();
|
|
1622
1817
|
const l = o.dataset.value, s = this.filteredOptions.find((n) => String(this.getItemValue(n)) === l);
|
|
1623
|
-
|
|
1818
|
+
k.debug(`[${this.instanceId}] Option clicked:`, {
|
|
1624
1819
|
value: l,
|
|
1625
1820
|
closeOnSelect: this.options.isCloseOnSelect,
|
|
1626
1821
|
placeholder: this.options.searchPlaceholder
|
|
@@ -1629,7 +1824,7 @@ class ci {
|
|
|
1629
1824
|
}
|
|
1630
1825
|
handlePillClick(e) {
|
|
1631
1826
|
if (e.target.closest(".ml__count-clear")) {
|
|
1632
|
-
e.preventDefault(), e.stopPropagation(),
|
|
1827
|
+
e.preventDefault(), e.stopPropagation(), k.debug(`[${this.instanceId}] Count clear button clicked`), this.clearAll();
|
|
1633
1828
|
return;
|
|
1634
1829
|
}
|
|
1635
1830
|
if (e.target.closest(".ml__count-text")) {
|
|
@@ -1639,9 +1834,9 @@ class ci {
|
|
|
1639
1834
|
const l = e.target.closest(".ml__pill-remove");
|
|
1640
1835
|
if (l) {
|
|
1641
1836
|
if (e.preventDefault(), e.stopPropagation(), l.dataset.action === "remove-hidden") {
|
|
1642
|
-
|
|
1837
|
+
k.debug(`[${this.instanceId}] Remove hidden items button clicked`);
|
|
1643
1838
|
const a = this.options.pillsMaxVisible || 3;
|
|
1644
|
-
Array.from(this.selectedOptions.values()).slice(a).forEach((
|
|
1839
|
+
Array.from(this.selectedOptions.values()).slice(a).forEach((m) => this.deselectOption(m));
|
|
1645
1840
|
return;
|
|
1646
1841
|
}
|
|
1647
1842
|
const n = l.dataset.value, r = this.selectedOptions.get(n);
|
|
@@ -1649,7 +1844,7 @@ class ci {
|
|
|
1649
1844
|
return;
|
|
1650
1845
|
}
|
|
1651
1846
|
if (e.target.closest(".ml__pill--more") && !e.target.closest(".ml__pill-remove")) {
|
|
1652
|
-
e.preventDefault(), e.stopPropagation(),
|
|
1847
|
+
e.preventDefault(), e.stopPropagation(), k.debug(`[${this.instanceId}] '+X more' badge clicked, showing popover`), this.toggleSelectedPopover();
|
|
1653
1848
|
return;
|
|
1654
1849
|
}
|
|
1655
1850
|
}
|
|
@@ -1666,7 +1861,7 @@ class ci {
|
|
|
1666
1861
|
const o = t.some(
|
|
1667
1862
|
(s) => s instanceof Node && (this.element.contains(s) || this.dropdown.contains(s) || this.hint && this.hint.contains(s))
|
|
1668
1863
|
);
|
|
1669
|
-
|
|
1864
|
+
k.debug(`[${this.instanceId}] handleClickOutside`, {
|
|
1670
1865
|
target: e.target.className,
|
|
1671
1866
|
targetTag: e.target.tagName,
|
|
1672
1867
|
clickedInside: o,
|
|
@@ -1675,10 +1870,10 @@ class ci {
|
|
|
1675
1870
|
elementContains: t.some((s) => s instanceof Node && this.element.contains(s)),
|
|
1676
1871
|
dropdownContains: t.some((s) => s instanceof Node && this.dropdown.contains(s)),
|
|
1677
1872
|
isConnected: this.dropdown.isConnected
|
|
1678
|
-
}), o || (
|
|
1873
|
+
}), o || (k.warn(`[${this.instanceId}] Closing dropdown due to click outside`), this.close());
|
|
1679
1874
|
}
|
|
1680
1875
|
focusNext() {
|
|
1681
|
-
this.filteredOptions.length !== 0 && (this.focusedIndex = (this.focusedIndex + 1)
|
|
1876
|
+
this.filteredOptions.length !== 0 && (this.focusedIndex = Math.min(this.filteredOptions.length - 1, this.focusedIndex + 1), this.renderDropdown(), this.scrollToFocused());
|
|
1682
1877
|
}
|
|
1683
1878
|
focusPrevious() {
|
|
1684
1879
|
this.filteredOptions.length !== 0 && (this.focusedIndex = this.focusedIndex <= 0 ? this.filteredOptions.length - 1 : this.focusedIndex - 1, this.renderDropdown(), this.scrollToFocused());
|
|
@@ -1689,6 +1884,16 @@ class ci {
|
|
|
1689
1884
|
focusLast() {
|
|
1690
1885
|
this.filteredOptions.length !== 0 && (this.focusedIndex = this.filteredOptions.length - 1, this.renderDropdown(), this.scrollToFocused());
|
|
1691
1886
|
}
|
|
1887
|
+
focusNextMatch() {
|
|
1888
|
+
if (this.matchingIndices.size === 0) return;
|
|
1889
|
+
const e = Array.from(this.matchingIndices).sort((l, s) => l - s), t = e.findIndex((l) => l === this.focusedIndex), o = (t + 1) % e.length;
|
|
1890
|
+
this.focusedIndex = e[o], this.renderDropdown(), this.scrollToFocused(), k.debug(`[${this.instanceId}] Jumped to next match: index ${this.focusedIndex} (${t + 1} of ${e.length})`);
|
|
1891
|
+
}
|
|
1892
|
+
focusPreviousMatch() {
|
|
1893
|
+
if (this.matchingIndices.size === 0) return;
|
|
1894
|
+
const e = Array.from(this.matchingIndices).sort((l, s) => l - s), t = e.findIndex((l) => l === this.focusedIndex), o = t <= 0 ? e.length - 1 : t - 1;
|
|
1895
|
+
this.focusedIndex = e[o], this.renderDropdown(), this.scrollToFocused(), k.debug(`[${this.instanceId}] Jumped to previous match: index ${this.focusedIndex} (${t + 1} of ${e.length})`);
|
|
1896
|
+
}
|
|
1692
1897
|
focusPageUp() {
|
|
1693
1898
|
this.filteredOptions.length !== 0 && (this.focusedIndex = Math.max(0, this.focusedIndex - 10), this.renderDropdown(), this.scrollToFocused());
|
|
1694
1899
|
}
|
|
@@ -1696,16 +1901,20 @@ class ci {
|
|
|
1696
1901
|
this.filteredOptions.length !== 0 && (this.focusedIndex = Math.min(this.filteredOptions.length - 1, this.focusedIndex + 10), this.renderDropdown(), this.scrollToFocused());
|
|
1697
1902
|
}
|
|
1698
1903
|
scrollToFocused() {
|
|
1699
|
-
|
|
1700
|
-
|
|
1904
|
+
if (this.virtualScroll && this.focusedIndex >= 0)
|
|
1905
|
+
this.virtualScroll.scrollToIndex(this.focusedIndex);
|
|
1906
|
+
else {
|
|
1907
|
+
const e = this.dropdown.querySelector(".ml__option--focused");
|
|
1908
|
+
e && e.scrollIntoView({ block: "nearest", behavior: "smooth" });
|
|
1909
|
+
}
|
|
1701
1910
|
}
|
|
1702
1911
|
toggleOption(e) {
|
|
1703
1912
|
const t = this.getItemValue(e), o = String(t);
|
|
1704
|
-
if (
|
|
1705
|
-
this.selectedValues.has(o) ? (
|
|
1913
|
+
if (k.debug(`[${this.instanceId}] toggleOption called`, { value: t, multiple: this.options.isMultipleEnabled }), !this.options.isMultipleEnabled) {
|
|
1914
|
+
this.selectedValues.has(o) ? (k.debug(`[${this.instanceId}] Deselecting option in single-select mode`, { value: t }), this.deselectOption(e)) : (k.debug(`[${this.instanceId}] Clearing previous selections and selecting new option`, { value: t }), this.selectedValues.clear(), this.selectedOptions.clear(), this.selectOption(e)), v.info(`[${this.instanceId}] ❌ Closing dropdown (single-select mode)`), this.close();
|
|
1706
1915
|
return;
|
|
1707
1916
|
}
|
|
1708
|
-
this.selectedValues.has(o) ? (
|
|
1917
|
+
this.selectedValues.has(o) ? (k.debug(`[${this.instanceId}] Deselecting option`, { value: t }), this.deselectOption(e)) : (k.debug(`[${this.instanceId}] Selecting option`, { value: t }), this.selectOption(e)), k.debug(`[${this.instanceId}] Checking closeOnSelect`, {
|
|
1709
1918
|
closeOnSelect: this.options.isCloseOnSelect,
|
|
1710
1919
|
willClose: this.options.isCloseOnSelect === !0,
|
|
1711
1920
|
placeholder: this.options.searchPlaceholder
|
|
@@ -1714,11 +1923,11 @@ class ci {
|
|
|
1714
1923
|
async handleAddNew(e) {
|
|
1715
1924
|
if (this.options.addNewCallback)
|
|
1716
1925
|
try {
|
|
1717
|
-
|
|
1926
|
+
C.debug(`[${this.instanceId}] Adding new option:`, e);
|
|
1718
1927
|
const t = await this.options.addNewCallback(e);
|
|
1719
1928
|
this.allOptions.push(t), this.filteredOptions.push(t), this.selectOption(t), this.input.value = "", this.renderDropdown(), this.renderPills(), this.options.isCloseOnSelect && this.close();
|
|
1720
1929
|
} catch (t) {
|
|
1721
|
-
|
|
1930
|
+
C.error(`[${this.instanceId}] Error adding new option:`, t);
|
|
1722
1931
|
}
|
|
1723
1932
|
}
|
|
1724
1933
|
selectOption(e) {
|
|
@@ -1812,7 +2021,7 @@ class ci {
|
|
|
1812
2021
|
s && this.selectedOptions.set(l, s);
|
|
1813
2022
|
}), this.renderPills();
|
|
1814
2023
|
} catch (t) {
|
|
1815
|
-
|
|
2024
|
+
C.error(`[${this.instanceId}] Failed to parse initial values:`, t);
|
|
1816
2025
|
}
|
|
1817
2026
|
}
|
|
1818
2027
|
toggleSelectedPopover() {
|
|
@@ -1947,8 +2156,8 @@ class ci {
|
|
|
1947
2156
|
if (!r) return;
|
|
1948
2157
|
const a = l.querySelector(".ml__pill-text");
|
|
1949
2158
|
a && this.createTooltipForElement(a, r, n);
|
|
1950
|
-
const
|
|
1951
|
-
this.createRemoveButtonTooltip(s,
|
|
2159
|
+
const d = this.getItemPillDisplayValue(r);
|
|
2160
|
+
this.createRemoveButtonTooltip(s, d, n);
|
|
1952
2161
|
});
|
|
1953
2162
|
const t = this.pillsContainer.querySelector(".ml__pill--more");
|
|
1954
2163
|
if (t) {
|
|
@@ -1966,13 +2175,13 @@ class ci {
|
|
|
1966
2175
|
if (this.options.getPillTooltipCallback)
|
|
1967
2176
|
s = this.options.getPillTooltipCallback(t), v.debug(`[${this.instanceId}] Using custom callback for tooltip content`);
|
|
1968
2177
|
else {
|
|
1969
|
-
const
|
|
1970
|
-
s =
|
|
1971
|
-
${
|
|
2178
|
+
const m = this.getItemPillDisplayValue(t), p = this.getItemSubtitle(t);
|
|
2179
|
+
s = p ? `${m}
|
|
2180
|
+
${p}` : m, v.debug(`[${this.instanceId}] Using default content: "${s}"`);
|
|
1972
2181
|
}
|
|
1973
2182
|
typeof s == "string" ? l.textContent = s : l.appendChild(s), (this.options.container || document.body).appendChild(l), v.debug(`[${this.instanceId}] Tooltip element created and appended for "${o}"`), this.pillTooltips.set(o, l);
|
|
1974
2183
|
let r, a;
|
|
1975
|
-
const
|
|
2184
|
+
const d = () => {
|
|
1976
2185
|
clearTimeout(a), v.debug(`[${this.instanceId}] Mouse entered pill "${o}", will show tooltip in ${this.options.pillTooltipDelay || 300}ms`), r = window.setTimeout(() => {
|
|
1977
2186
|
v.debug(`[${this.instanceId}] Showing tooltip for "${o}"`), l.classList.add("ml__pill-tooltip--visible"), this.positionPillTooltip(e, l, o);
|
|
1978
2187
|
}, this.options.pillTooltipDelay || 300);
|
|
@@ -1981,7 +2190,7 @@ ${m}` : d, v.debug(`[${this.instanceId}] Using default content: "${s}"`);
|
|
|
1981
2190
|
l.classList.remove("ml__pill-tooltip--visible"), this.cleanupPillTooltip(o);
|
|
1982
2191
|
}, 100);
|
|
1983
2192
|
};
|
|
1984
|
-
e.addEventListener("mouseenter",
|
|
2193
|
+
e.addEventListener("mouseenter", d), e.addEventListener("mouseleave", c);
|
|
1985
2194
|
}
|
|
1986
2195
|
createRemoveButtonTooltip(e, t, o) {
|
|
1987
2196
|
const l = document.createElement("div");
|
|
@@ -1989,10 +2198,10 @@ ${m}` : d, v.debug(`[${this.instanceId}] Using default content: "${s}"`);
|
|
|
1989
2198
|
const n = `${o}-remove`;
|
|
1990
2199
|
this.pillTooltips.set(n, l);
|
|
1991
2200
|
let r, a;
|
|
1992
|
-
const
|
|
2201
|
+
const d = () => {
|
|
1993
2202
|
clearTimeout(a);
|
|
1994
|
-
const
|
|
1995
|
-
|
|
2203
|
+
const m = this.pillTooltips.get(o);
|
|
2204
|
+
m && m.classList.remove("ml__pill-tooltip--visible"), r = window.setTimeout(() => {
|
|
1996
2205
|
l.classList.add("ml__pill-tooltip--visible"), this.positionPillTooltip(e, l, n);
|
|
1997
2206
|
}, this.options.pillTooltipDelay || 300);
|
|
1998
2207
|
}, c = () => {
|
|
@@ -2000,7 +2209,7 @@ ${m}` : d, v.debug(`[${this.instanceId}] Using default content: "${s}"`);
|
|
|
2000
2209
|
l.classList.remove("ml__pill-tooltip--visible"), this.cleanupPillTooltip(n);
|
|
2001
2210
|
}, 100);
|
|
2002
2211
|
};
|
|
2003
|
-
e.addEventListener("mouseenter",
|
|
2212
|
+
e.addEventListener("mouseenter", d), e.addEventListener("mouseleave", c);
|
|
2004
2213
|
}
|
|
2005
2214
|
positionPillTooltip(e, t, o) {
|
|
2006
2215
|
const l = le(e, t, () => {
|
|
@@ -2040,15 +2249,15 @@ ${m}` : d, v.debug(`[${this.instanceId}] Using default content: "${s}"`);
|
|
|
2040
2249
|
// PUBLIC API
|
|
2041
2250
|
// ========================================================================
|
|
2042
2251
|
destroy() {
|
|
2043
|
-
this.destroyAllPillTooltips(), this.dropdownCleanup && this.dropdownCleanup(), this.hintCleanup && this.hintCleanup(), this.selectedPopoverCleanup && this.selectedPopoverCleanup(), this.dropdown && this.dropdown.remove(), this.hint && this.hint.remove(), this.selectedPopover && this.selectedPopover.remove(), this.element.innerHTML = "", this.element.classList.remove("ml", "ml--open", "ml--no-checkboxes"),
|
|
2252
|
+
this.destroyAllPillTooltips(), this.dropdownCleanup && this.dropdownCleanup(), this.hintCleanup && this.hintCleanup(), this.selectedPopoverCleanup && this.selectedPopoverCleanup(), 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("ml", "ml--open", "ml--no-checkboxes"), H.info(`[${this.instanceId}] Component destroyed`);
|
|
2044
2253
|
}
|
|
2045
2254
|
}
|
|
2046
|
-
const di = '@charset "UTF-8";:host{--ml-accent-color: #3b82f6;--ml-accent-color-hover: #2563eb;--ml-accent-color-active: #1d4ed8;--ml-text-primary: #111827;--ml-text-secondary: #6b7280;--ml-text-white: #ffffff;--ml-primary-bg: #f3f4f6;--ml-primary-bg-hover: #e5e7eb;--ml-border-color: #e5e7eb;--ml-input-padding: .5rem .75rem;--ml-input-padding-right: 2.5rem;--ml-input-font-size: .875rem;--ml-input-border-style: 1px solid #d1d5db;--ml-input-border-radius: .375rem;--ml-input-bg: #ffffff;--ml-input-text: #111827;--ml-input-focus-border-color: #3b82f6;--ml-input-placeholder-color: #6b7280;--ml-input-bg-disabled: rgba(107, 114, 128, .05);--ml-toggle-right: .75rem;--ml-toggle-color: #6b7280;--ml-transform-center-y: translateY(-50%);--ml-transform-rotate-180: 180deg;--ml-count-badge-offset: 2rem;--ml-count-badge-padding: .125rem .25rem;--ml-count-badge-bg: #3b82f6;--ml-count-badge-color: #ffffff;--ml-count-badge-font-size: .75rem;--ml-count-badge-font-weight: 600;--ml-count-badge-border-radius: .25rem;--ml-count-badge-bg-hover: #2563eb;--ml-transform-scale-hover: 1.1;--ml-hint-padding: .5rem .75rem;--ml-hint-bg: #ffffff;--ml-hint-border: 1px solid #e5e7eb;--ml-hint-border-radius: .375rem;--ml-hint-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--ml-hint-font-size: .75rem;--ml-hint-color: #6b7280;--ml-line-height-relaxed: 1.4;--ml-dropdown-bg: #ffffff;--ml-dropdown-border: 1px solid #e5e7eb;--ml-dropdown-border-radius: .375rem;--ml-dropdown-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-dropdown-max-height: 20rem;--ml-dropdown-color: #111827;--ml-z-index-dropdown: 9999;--ml-z-index-sticky: 1;--ml-actions-gap: .25rem;--ml-actions-padding: .5rem;--ml-actions-border-bottom: 1px solid #e5e7eb;--ml-actions-bg: #ffffff;--ml-action-btn-padding: .25rem .5rem;--ml-action-btn-font-size: .75rem;--ml-action-btn-border: 1px solid #e5e7eb;--ml-action-btn-border-radius: .25rem;--ml-action-btn-bg: transparent;--ml-action-btn-color: inherit;--ml-action-btn-bg-hover: #f3f4f6;--ml-action-btn-border-color-hover: #3b82f6;--ml-transform-scale-active: .98;--ml-options-padding: .25rem 0;--ml-group-border-top: 1px solid #e5e7eb;--ml-group-margin-top: .25rem;--ml-group-padding-top: .25rem;--ml-group-label-padding: .25rem .75rem;--ml-group-label-font-size: .75rem;--ml-group-label-font-weight: 600;--ml-group-label-color: #6b7280;--ml-group-label-transform: uppercase;--ml-group-label-letter-spacing: .05em;--ml-option-gap: .5rem;--ml-option-padding: .5rem .75rem;--ml-option-padding-h: .75rem;--ml-option-bg: transparent;--ml-option-bg-hover: #f9fafb;--ml-option-bg-focused: #f9fafb;--ml-option-outline-focused: 2px solid #3b82f6;--ml-option-focus-outline-offset: -2px;--ml-option-bg-selected: rgba(59, 130, 246, .1);--ml-disabled-opacity: .5;--ml-option-content-gap: .5rem;--ml-option-icon-size: 1.25rem;--ml-option-icon-font-size: 1rem;--ml-option-title-font-size: .875rem;--ml-option-title-color: inherit;--ml-option-mark-bg: rgba(59, 130, 246, .2);--ml-option-mark-color: inherit;--ml-option-mark-font-weight: 600;--ml-option-subtitle-margin-top: .25rem;--ml-option-subtitle-font-size: .75rem;--ml-option-subtitle-color: #6b7280;--ml-option-subtitle-line-height: 1.3;--ml-checkbox-margin-top: .125rem;--ml-empty-padding: 1rem .75rem;--ml-empty-font-size: .875rem;--ml-empty-color: #6b7280;--ml-loader-padding: 1rem;--ml-loader-gap: .5rem;--ml-loading-text-font-size: .875rem;--ml-loading-text-color: #6b7280;--ml-pills-gap: .5rem;--ml-pills-margin-bottom: .5rem;--ml-pills-margin-top: .5rem;--ml-pills-margin-left: .25rem;--ml-pills-margin-right: .25rem;--ml-pill-gap: .5rem;--ml-pill-height: 1.5rem;--ml-pill-font-size: .75rem;--ml-pill-font-weight: 600;--ml-pill-border-radius: .375rem;--ml-pill-bg: #eff6ff;--ml-pill-bg-hover: #ffffff;--ml-pill-bg-active: #e0f2fe;--ml-order-first: -1;--ml-pill-text-padding: 0 .5rem;--ml-pill-text-bg: #eff6ff;--ml-pill-text-color: #3b82f6;--ml-pill-remove-width: 1.5rem;--ml-pill-remove-bg: #3b82f6;--ml-pill-remove-color: #ffffff;--ml-pill-remove-border: none;--ml-pill-remove-font-size: .75rem;--ml-pill-remove-bg-hover: #2563eb;--ml-pill-remove-box-shadow-focus: 0 0 0 2px rgba(59, 130, 246, .5);--ml-icon-remove: "×";--ml-more-badge-bg: #eff6ff;--ml-more-badge-hover-bg: #ffffff;--ml-more-badge-active-bg: #e0f2fe;--ml-count-display-margin-bottom: .5rem;--ml-count-display-margin-top: .5rem;--ml-count-display-margin-left: .5rem;--ml-count-display-margin-right: .5rem;--ml-count-badge-wrapper-bg: transparent;--ml-count-badge-wrapper-border: 1px solid #e5e7eb;--ml-count-badge-wrapper-border-radius: .25rem;--ml-count-badge-wrapper-padding: .25rem .5rem;--ml-count-badge-wrapper-gap: .25rem;--ml-count-badge-wrapper-bg-hover: #f9fafb;--ml-count-badge-wrapper-border-color-hover: #3b82f6;--ml-count-text-bg: transparent;--ml-count-text-border: none;--ml-count-text-font-size: .875rem;--ml-count-text-color: #111827;--ml-count-clear-size: 1rem;--ml-count-clear-bg: transparent;--ml-count-clear-color: #6b7280;--ml-count-clear-font-size: 1.125rem;--ml-count-clear-border-radius: 50%;--ml-count-clear-bg-hover: rgba(59, 130, 246, .2);--ml-count-clear-color-hover: #3b82f6;--ml-icon-clear: "×";--ml-tooltip-bg: #333;--ml-tooltip-color: #fff;--ml-tooltip-padding: .5rem .75rem;--ml-tooltip-border-radius: .375rem;--ml-tooltip-font-size: .875rem;--ml-tooltip-max-width: 20rem;--ml-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ml-tooltip-z-index: 10000;--ml-z-index-popover: 10000;--ml-selected-popover-width: 20rem;--ml-selected-popover-max-height: 20rem;--ml-selected-popover-bg: #ffffff;--ml-selected-popover-border: 1px solid #e5e7eb;--ml-selected-popover-border-radius: .375rem;--ml-selected-popover-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-selected-popover-header-padding: .5rem .75rem;--ml-selected-popover-header-bg: rgba(59, 130, 246, .1);--ml-selected-popover-header-border-bottom: 1px solid #e5e7eb;--ml-selected-popover-header-font-size: .875rem;--ml-selected-popover-header-font-weight: 600;--ml-selected-popover-header-color: #111827;--ml-popover-close-size: 1.5rem;--ml-selected-popover-close-bg: transparent;--ml-selected-popover-close-color: #6b7280;--ml-selected-popover-close-font-size: 1.25rem;--ml-selected-popover-close-border-radius: 50%;--ml-selected-popover-close-bg-hover: rgba(59, 130, 246, .2);--ml-selected-popover-close-color-hover: #3b82f6;--ml-selected-popover-body-gap: .25rem;--ml-selected-popover-body-padding: .5rem;--ml-selected-popover-body-max-height: 18rem;--ml-font-size-2xs: .625rem;--ml-font-size-xs: .75rem;--ml-font-size-sm: .875rem;--ml-font-size-base: 1rem;--ml-font-size-lg: 1.125rem;--ml-font-weight-medium: 500;--ml-font-weight-semibold: 600;--ml-line-height-none: 1;--ml-spacing-xs: .25rem;--ml-spacing-sm: .5rem;--ml-spacing-md: .75rem;--ml-spacing-lg: 1rem;--ml-transition-fast: .15s;--ml-transition-normal: .2s;--ml-easing-snappy: cubic-bezier(.4, 0, .2, 1);--ml-placeholder-opacity: .6;--ml-disabled-input-opacity: .6}multi-select:not(:defined){display:block;min-height:2.5rem;color:transparent!important;background:transparent}.ml-wrapper{display:flex;flex-direction:column;align-items:stretch}.ml-wrapper--inline{flex-direction:row;align-items:flex-start}.ml{position:relative;width:100%}.ml__input-wrapper{position:relative;display:flex;align-items:center}.ml__input{width:100%;padding:var(--ml-input-padding, .5rem .75rem);padding-right:var(--ml-input-padding-right, 2.5rem);font-size:var(--ml-input-font-size, .875rem);border:var(--ml-input-border-style, 1px solid #d1d5db);border-radius:var(--ml-input-border-radius, .375rem);background:var(--ml-input-bg, #ffffff);color:var(--ml-input-text, #111827);cursor:pointer;transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__count-badge{position:absolute;right:var(--ml-count-badge-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-count-badge-padding, .125rem .25rem);background:var(--ml-count-badge-bg, #3b82f6);color:var(--ml-count-badge-color, #ffffff);font-size:var(--ml-count-badge-font-size, .75rem);font-weight:var(--ml-count-badge-font-weight, 600);border-radius:var(--ml-count-badge-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge:hover{background:var(--ml-count-badge-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-dropdown-max-height, 20rem);overflow-y:auto;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.ml__actions{display:flex;gap:var(--ml-actions-gap, .25rem);padding:var(--ml-actions-padding, .5rem);border-bottom:var(--ml-actions-border-bottom, 1px solid #e5e7eb)}.ml__actions--sticky{position:sticky;top:0;z-index:var(--ml-z-index-sticky, 1);background:var(--ml-actions-bg, #ffffff)}.ml__action-btn{flex:1;padding:var(--ml-action-btn-padding, .25rem .5rem);font-size:var(--ml-action-btn-font-size, .75rem);border:var(--ml-action-btn-border, 1px solid #e5e7eb);border-radius:var(--ml-action-btn-border-radius, .25rem);background:var(--ml-action-btn-bg, transparent);color:var(--ml-action-btn-color, inherit);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__action-btn:hover{background:var(--ml-action-btn-bg-hover, #f3f4f6);border-color:var(--ml-action-btn-border-color-hover, #3b82f6)}.ml__action-btn:active{transform:scale(var(--ml-transform-scale-active, .98))}.ml__options{padding:var(--ml-options-padding, .25rem 0)}.ml__group+.ml__group{border-top:var(--ml-group-border-top, 1px solid #e5e7eb);margin-top:var(--ml-group-margin-top, .25rem);padding-top:var(--ml-group-padding-top, .25rem)}.ml__group-label{padding:var(--ml-group-label-padding, .25rem .75rem);font-size:var(--ml-group-label-font-size, .75rem);font-weight:var(--ml-group-label-font-weight, 600);color:var(--ml-group-label-color, #6b7280);text-transform:var(--ml-group-label-transform, uppercase);letter-spacing:var(--ml-group-label-letter-spacing, .05em)}.ml__option{display:flex;align-items:flex-start;gap:var(--ml-option-gap, .5rem);padding:var(--ml-option-padding, .5rem .75rem);cursor:pointer;transition:background-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__option:hover{background:var(--ml-option-bg-hover, #f9fafb)}.ml__option--focused{background:var(--ml-option-bg-focused, #f9fafb);outline:var(--ml-option-outline-focused, 2px solid #3b82f6);outline-offset:var(--ml-option-focus-outline-offset, -2px)}.ml__option--selected{background:var(--ml-option-bg-selected, rgba(59, 130, 246, .1))}.ml__option--disabled{opacity:var(--ml-disabled-opacity, .5);cursor:not-allowed}.ml__option--disabled:hover{background:var(--ml-option-bg, transparent)}.ml__checkbox{flex-shrink:0;margin-top:var(--ml-checkbox-margin-top, .125rem);cursor:pointer}.ml__option--disabled .ml__checkbox{cursor:not-allowed}.ml__option-content{flex:1;display:flex;align-items:flex-start;gap:var(--ml-option-content-gap, .5rem);min-width:0}.ml__option-icon{flex-shrink:0;width:var(--ml-option-icon-size, 1.25rem);height:var(--ml-option-icon-size, 1.25rem);display:flex;align-items:center;justify-content:center;font-size:var(--ml-option-icon-font-size, 1rem)}.ml__option-icon svg{width:100%;height:100%;fill:currentColor}.ml__option-text{flex:1;min-width:0}.ml__option-title{font-size:var(--ml-option-title-font-size, .875rem);color:var(--ml-option-title-color, inherit);line-height:var(--ml-line-height-relaxed, 1.4)}.ml__option-title mark{background:var(--ml-option-mark-bg, rgba(59, 130, 246, .2));color:var(--ml-option-mark-color, inherit);font-weight:var(--ml-option-mark-font-weight, 600)}.ml__option-subtitle{margin-top:var(--ml-option-subtitle-margin-top, .25rem);font-size:var(--ml-option-subtitle-font-size, .75rem);color:var(--ml-option-subtitle-color, #6b7280);line-height:var(--ml-option-subtitle-line-height, 1.3)}.ml__empty{padding:var(--ml-empty-padding, 1rem .75rem);text-align:center;font-size:var(--ml-empty-font-size, .875rem);color:var(--ml-empty-color, #6b7280)}.ml__loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ml-loader-padding, 1rem);gap:var(--ml-loader-gap, .5rem)}.ml__loading-text{font-size:var(--ml-loading-text-font-size, .875rem);color:var(--ml-loading-text-color, #6b7280)}.ml__pills{display:flex;flex-wrap:wrap;gap:var(--ml-pills-gap, .5rem);padding:0}.ml__pills:empty{display:none}.ml__pills--bottom{margin-top:var(--ml-pills-margin-bottom, .5rem)}.ml__pills--top{margin-bottom:var(--ml-pills-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__pills--left{order:var(--ml-order-first, -1);margin-right:var(--ml-pills-margin-left, .25rem);justify-content:flex-end}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .25rem);justify-content:flex-start}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__count-badge-wrapper{display:inline-flex;align-items:center;gap:var(--ml-count-badge-wrapper-gap, .25rem);background:var(--ml-count-badge-wrapper-bg, transparent);border:var(--ml-count-badge-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-count-badge-wrapper-border-radius, .25rem);padding:var(--ml-count-badge-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge-wrapper:hover{background:var(--ml-count-badge-wrapper-bg-hover, #f9fafb);border-color:var(--ml-count-badge-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__pill{display:inline-flex;align-items:center;height:var(--ml-pill-height, 1.5rem);font-size:var(--ml-pill-font-size, .75rem);font-weight:var(--ml-pill-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-pill-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__pill-text{display:flex;align-items:center;height:100%;padding:var(--ml-pill-text-padding, 0 .5rem);background:var(--ml-pill-text-bg, #eff6ff);color:var(--ml-pill-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__pill-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-pill-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-pill-remove-bg, #3b82f6);color:var(--ml-pill-remove-color, #ffffff);border:var(--ml-pill-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-pill-remove-font-size, .75rem)}.ml__pill-remove:hover{background:var(--ml-pill-remove-bg-hover, #2563eb)}.ml__pill-remove:focus{outline:none;box-shadow:var(--ml-pill-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__pill-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__pill--more{cursor:pointer}.ml__pill--more .ml__pill-text{background:var(--ml-more-badge-bg, #eff6ff);font-weight:var(--ml-pill-font-weight, 600)}.ml__pill--more:hover .ml__pill-text{background:var(--ml-more-badge-hover-bg, #ffffff)}.ml__pill--more:active .ml__pill-text{background:var(--ml-more-badge-active-bg, #e0f2fe)}.ml__pill-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__pill-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ml-selected-popover-header-padding, .5rem .75rem);background:var(--ml-selected-popover-header-bg, rgba(59, 130, 246, .1));border-bottom:var(--ml-selected-popover-header-border-bottom, 1px solid #e5e7eb);font-size:var(--ml-selected-popover-header-font-size, .875rem);font-weight:var(--ml-selected-popover-header-font-weight, 600);color:var(--ml-selected-popover-header-color, #111827)}.ml__selected-popover-close{display:flex;align-items:center;justify-content:center;width:var(--ml-popover-close-size, 1.5rem);height:var(--ml-popover-close-size, 1.5rem);padding:0;border:none;background:var(--ml-selected-popover-close-bg, transparent);color:var(--ml-selected-popover-close-color, #6b7280);font-size:var(--ml-selected-popover-close-font-size, 1.25rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-selected-popover-close-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__selected-popover-close:hover{background:var(--ml-selected-popover-close-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-selected-popover-close-color-hover, #3b82f6)}.ml__selected-popover-body{display:flex;flex-direction:column;gap:var(--ml-selected-popover-body-gap, .25rem);padding:var(--ml-selected-popover-body-padding, .5rem);overflow-y:auto;max-height:var(--ml-selected-popover-body-max-height, 18rem)}.ml__selected-popover-body .ml__pill{width:100%}.ml__selected-popover-body .ml__pill-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ml--rtl .ml__input-wrapper{direction:rtl}.ml--rtl .ml__input{text-align:right;padding-left:var(--ml-input-padding-right, 2.5rem);padding-right:var(--ml-input-padding-h, .75rem)}.ml--rtl .ml__toggle{left:var(--ml-toggle-right, .75rem)!important;right:auto!important}.ml--rtl .ml__count-badge{left:var(--ml-count-badge-offset, 2rem)!important;right:auto!important}.ml--rtl .ml__dropdown{direction:rtl;text-align:right}.ml--rtl .ml__option{flex-direction:row-reverse}.ml--rtl .ml__checkbox{margin-left:var(--ml-spacing-sm, .5rem);margin-right:0}.ml--rtl .ml__option-content{text-align:right}.ml--rtl .ml__option-icon{margin-left:var(--ml-spacing-xs, .25rem);margin-right:0}.ml--rtl .ml__pills{direction:rtl}.ml--rtl .ml__pill{flex-direction:row-reverse}.ml--rtl .ml__pill-remove{border-radius:var(--ml-pill-remove-border-radius-rtl, .375rem) 0 0 var(--ml-pill-remove-border-radius-rtl, .375rem);border-left:var(--ml-pill-remove-border, none);border-right:none}.ml--rtl .ml__pill-text{border-radius:0 var(--ml-pill-text-border-radius-rtl, .375rem) var(--ml-pill-text-border-radius-rtl, .375rem) 0}.ml--rtl .ml__count-display{direction:rtl}.ml--rtl .ml__count-badge-wrapper{flex-direction:row-reverse}.ml--rtl .ml__selected-popover{direction:rtl;text-align:right}.ml--rtl .ml__actions{direction:rtl}.ml--rtl .ml__group-label,.ml--rtl .ml__empty{text-align:right}.ml--rtl .ml__hint{direction:rtl;text-align:right}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__pill{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__pill{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__pill{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}', pi = typeof HTMLElement < "u" ? HTMLElement : class {
|
|
2047
|
-
},
|
|
2255
|
+
const pi = '@charset "UTF-8";:host{--ml-accent-color: #3b82f6;--ml-accent-color-hover: #2563eb;--ml-accent-color-active: #1d4ed8;--ml-text-primary: #111827;--ml-text-secondary: #6b7280;--ml-text-white: #ffffff;--ml-primary-bg: #f3f4f6;--ml-primary-bg-hover: #e5e7eb;--ml-border-color: #e5e7eb;--ml-input-padding: .5rem .75rem;--ml-input-padding-right: 2.5rem;--ml-input-font-size: .875rem;--ml-input-border-style: 1px solid #d1d5db;--ml-input-border-radius: .375rem;--ml-input-bg: #ffffff;--ml-input-text: #111827;--ml-input-focus-border-color: #3b82f6;--ml-input-placeholder-color: #6b7280;--ml-input-bg-disabled: rgba(107, 114, 128, .05);--ml-toggle-right: .75rem;--ml-toggle-color: #6b7280;--ml-transform-center-y: translateY(-50%);--ml-transform-rotate-180: 180deg;--ml-count-badge-offset: 2rem;--ml-count-badge-padding: .125rem .25rem;--ml-count-badge-bg: #3b82f6;--ml-count-badge-color: #ffffff;--ml-count-badge-font-size: .75rem;--ml-count-badge-font-weight: 600;--ml-count-badge-border-radius: .25rem;--ml-count-badge-bg-hover: #2563eb;--ml-transform-scale-hover: 1.1;--ml-hint-padding: .5rem .75rem;--ml-hint-bg: #ffffff;--ml-hint-border: 1px solid #e5e7eb;--ml-hint-border-radius: .375rem;--ml-hint-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--ml-hint-font-size: .75rem;--ml-hint-color: #6b7280;--ml-line-height-relaxed: 1.4;--ml-dropdown-bg: #ffffff;--ml-dropdown-border: 1px solid #e5e7eb;--ml-dropdown-border-radius: .375rem;--ml-dropdown-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-dropdown-max-height: 20rem;--ml-dropdown-color: #111827;--ml-z-index-dropdown: 9999;--ml-z-index-sticky: 1;--ml-actions-gap: .25rem;--ml-actions-padding: .5rem;--ml-actions-border-bottom: 1px solid #e5e7eb;--ml-actions-bg: #ffffff;--ml-action-btn-padding: .25rem .5rem;--ml-action-btn-font-size: .75rem;--ml-action-btn-border: 1px solid #e5e7eb;--ml-action-btn-border-radius: .25rem;--ml-action-btn-bg: transparent;--ml-action-btn-color: inherit;--ml-action-btn-bg-hover: #f3f4f6;--ml-action-btn-border-color-hover: #3b82f6;--ml-transform-scale-active: .98;--ml-options-padding: .25rem 0;--ml-group-border-top: 1px solid #e5e7eb;--ml-group-margin-top: .25rem;--ml-group-padding-top: .25rem;--ml-group-label-padding: .25rem .75rem;--ml-group-label-font-size: .75rem;--ml-group-label-font-weight: 600;--ml-group-label-color: #6b7280;--ml-group-label-transform: uppercase;--ml-group-label-letter-spacing: .05em;--ml-option-gap: .5rem;--ml-option-padding: .5rem .75rem;--ml-option-padding-h: .75rem;--ml-option-bg: transparent;--ml-option-bg-hover: #f9fafb;--ml-option-bg-focused: #f9fafb;--ml-option-outline-focused: 2px solid #3b82f6;--ml-option-focus-outline-offset: -2px;--ml-option-bg-matched: rgba(59, 130, 246, .08);--ml-option-border-matched: 3px solid rgba(59, 130, 246, .4);--ml-option-bg-selected: rgba(59, 130, 246, .1);--ml-disabled-opacity: .5;--ml-option-content-gap: .5rem;--ml-option-icon-size: 1.25rem;--ml-option-icon-font-size: 1rem;--ml-option-title-font-size: .875rem;--ml-option-title-color: inherit;--ml-option-mark-bg: rgba(59, 130, 246, .2);--ml-option-mark-color: inherit;--ml-option-mark-font-weight: 600;--ml-option-subtitle-margin-top: .25rem;--ml-option-subtitle-font-size: .75rem;--ml-option-subtitle-color: #6b7280;--ml-option-subtitle-line-height: 1.3;--ml-checkbox-margin-top: .125rem;--ml-empty-padding: 1rem .75rem;--ml-empty-font-size: .875rem;--ml-empty-color: #6b7280;--ml-loader-padding: 1rem;--ml-loader-gap: .5rem;--ml-loading-text-font-size: .875rem;--ml-loading-text-color: #6b7280;--ml-pills-gap: .5rem;--ml-pills-margin-bottom: .5rem;--ml-pills-margin-top: .5rem;--ml-pills-margin-left: .25rem;--ml-pills-margin-right: .25rem;--ml-pill-gap: .5rem;--ml-pill-height: 1.5rem;--ml-pill-font-size: .75rem;--ml-pill-font-weight: 600;--ml-pill-border-radius: .375rem;--ml-pill-bg: #eff6ff;--ml-pill-bg-hover: #ffffff;--ml-pill-bg-active: #e0f2fe;--ml-order-first: -1;--ml-pill-text-padding: 0 .5rem;--ml-pill-text-bg: #eff6ff;--ml-pill-text-color: #3b82f6;--ml-pill-remove-width: 1.5rem;--ml-pill-remove-bg: #3b82f6;--ml-pill-remove-color: #ffffff;--ml-pill-remove-border: none;--ml-pill-remove-font-size: .75rem;--ml-pill-remove-bg-hover: #2563eb;--ml-pill-remove-box-shadow-focus: 0 0 0 2px rgba(59, 130, 246, .5);--ml-icon-remove: "×";--ml-more-badge-bg: #eff6ff;--ml-more-badge-hover-bg: #ffffff;--ml-more-badge-active-bg: #e0f2fe;--ml-count-display-margin-bottom: .5rem;--ml-count-display-margin-top: .5rem;--ml-count-display-margin-left: .5rem;--ml-count-display-margin-right: .5rem;--ml-count-badge-wrapper-bg: transparent;--ml-count-badge-wrapper-border: 1px solid #e5e7eb;--ml-count-badge-wrapper-border-radius: .25rem;--ml-count-badge-wrapper-padding: .25rem .5rem;--ml-count-badge-wrapper-gap: .25rem;--ml-count-badge-wrapper-bg-hover: #f9fafb;--ml-count-badge-wrapper-border-color-hover: #3b82f6;--ml-count-text-bg: transparent;--ml-count-text-border: none;--ml-count-text-font-size: .875rem;--ml-count-text-color: #111827;--ml-count-clear-size: 1rem;--ml-count-clear-bg: transparent;--ml-count-clear-color: #6b7280;--ml-count-clear-font-size: 1.125rem;--ml-count-clear-border-radius: 50%;--ml-count-clear-bg-hover: rgba(59, 130, 246, .2);--ml-count-clear-color-hover: #3b82f6;--ml-icon-clear: "×";--ml-tooltip-bg: #333;--ml-tooltip-color: #fff;--ml-tooltip-padding: .5rem .75rem;--ml-tooltip-border-radius: .375rem;--ml-tooltip-font-size: .875rem;--ml-tooltip-max-width: 20rem;--ml-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ml-tooltip-z-index: 10000;--ml-z-index-popover: 10000;--ml-selected-popover-width: 20rem;--ml-selected-popover-max-height: 20rem;--ml-selected-popover-bg: #ffffff;--ml-selected-popover-border: 1px solid #e5e7eb;--ml-selected-popover-border-radius: .375rem;--ml-selected-popover-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-selected-popover-header-padding: .5rem .75rem;--ml-selected-popover-header-bg: rgba(59, 130, 246, .1);--ml-selected-popover-header-border-bottom: 1px solid #e5e7eb;--ml-selected-popover-header-font-size: .875rem;--ml-selected-popover-header-font-weight: 600;--ml-selected-popover-header-color: #111827;--ml-popover-close-size: 1.5rem;--ml-selected-popover-close-bg: transparent;--ml-selected-popover-close-color: #6b7280;--ml-selected-popover-close-font-size: 1.25rem;--ml-selected-popover-close-border-radius: 50%;--ml-selected-popover-close-bg-hover: rgba(59, 130, 246, .2);--ml-selected-popover-close-color-hover: #3b82f6;--ml-selected-popover-body-gap: .25rem;--ml-selected-popover-body-padding: .5rem;--ml-selected-popover-body-max-height: 18rem;--ml-font-size-2xs: .625rem;--ml-font-size-xs: .75rem;--ml-font-size-sm: .875rem;--ml-font-size-base: 1rem;--ml-font-size-lg: 1.125rem;--ml-font-weight-medium: 500;--ml-font-weight-semibold: 600;--ml-line-height-none: 1;--ml-spacing-xs: .25rem;--ml-spacing-sm: .5rem;--ml-spacing-md: .75rem;--ml-spacing-lg: 1rem;--ml-transition-fast: .15s;--ml-transition-normal: .2s;--ml-easing-snappy: cubic-bezier(.4, 0, .2, 1);--ml-placeholder-opacity: .6;--ml-disabled-input-opacity: .6}multi-select:not(:defined){display:block;min-height:2.5rem;color:transparent!important;background:transparent}.ml-wrapper{display:flex;flex-direction:column;align-items:stretch}.ml-wrapper--inline{flex-direction:row;align-items:flex-start}.ml{position:relative;width:100%}.ml__input-wrapper{position:relative;display:flex;align-items:center}.ml__input{width:100%;padding:var(--ml-input-padding, .5rem .75rem);padding-right:var(--ml-input-padding-right, 2.5rem);font-size:var(--ml-input-font-size, .875rem);border:var(--ml-input-border-style, 1px solid #d1d5db);border-radius:var(--ml-input-border-radius, .375rem);background:var(--ml-input-bg, #ffffff);color:var(--ml-input-text, #111827);cursor:pointer;transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__count-badge{position:absolute;right:var(--ml-count-badge-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-count-badge-padding, .125rem .25rem);background:var(--ml-count-badge-bg, #3b82f6);color:var(--ml-count-badge-color, #ffffff);font-size:var(--ml-count-badge-font-size, .75rem);font-weight:var(--ml-count-badge-font-weight, 600);border-radius:var(--ml-count-badge-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge:hover{background:var(--ml-count-badge-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-dropdown-max-height, 20rem);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.ml__dropdown--virtual{overflow-y:visible;max-height:none}.ml__actions{display:flex;gap:var(--ml-actions-gap, .25rem);padding:var(--ml-actions-padding, .5rem);border-bottom:var(--ml-actions-border-bottom, 1px solid #e5e7eb)}.ml__actions--sticky{position:sticky;top:0;z-index:var(--ml-z-index-sticky, 1);background:var(--ml-actions-bg, #ffffff)}.ml__action-btn{flex:1;padding:var(--ml-action-btn-padding, .25rem .5rem);font-size:var(--ml-action-btn-font-size, .75rem);border:var(--ml-action-btn-border, 1px solid #e5e7eb);border-radius:var(--ml-action-btn-border-radius, .25rem);background:var(--ml-action-btn-bg, transparent);color:var(--ml-action-btn-color, inherit);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__action-btn:hover{background:var(--ml-action-btn-bg-hover, #f3f4f6);border-color:var(--ml-action-btn-border-color-hover, #3b82f6)}.ml__action-btn:active{transform:scale(var(--ml-transform-scale-active, .98))}.ml__options{padding:var(--ml-options-padding, .25rem 0)}.ml__options--virtual .ml__option{height:var(--ml-option-height, 50px);min-height:var(--ml-option-height, 50px);max-height:var(--ml-option-height, 50px);overflow:hidden;box-sizing:border-box}.ml__group+.ml__group{border-top:var(--ml-group-border-top, 1px solid #e5e7eb);margin-top:var(--ml-group-margin-top, .25rem);padding-top:var(--ml-group-padding-top, .25rem)}.ml__group-label{padding:var(--ml-group-label-padding, .25rem .75rem);font-size:var(--ml-group-label-font-size, .75rem);font-weight:var(--ml-group-label-font-weight, 600);color:var(--ml-group-label-color, #6b7280);text-transform:var(--ml-group-label-transform, uppercase);letter-spacing:var(--ml-group-label-letter-spacing, .05em)}.ml__option{display:flex;align-items:flex-start;gap:var(--ml-option-gap, .5rem);padding:var(--ml-option-padding, .5rem .75rem);cursor:pointer;transition:background-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__option:hover{background:var(--ml-option-bg-hover, #f9fafb)}.ml__option--focused{background:var(--ml-option-bg-focused, #f9fafb);outline:var(--ml-option-outline-focused, 2px solid #3b82f6);outline-offset:var(--ml-option-focus-outline-offset, -2px)}.ml__option--matched{background:var(--ml-option-bg-matched, rgba(59, 130, 246, .08));border-left:var(--ml-option-border-matched, 3px solid rgba(59, 130, 246, .4))}.ml__option--selected{background:var(--ml-option-bg-selected, rgba(59, 130, 246, .1))}.ml__option--disabled{opacity:var(--ml-disabled-opacity, .5);cursor:not-allowed}.ml__option--disabled:hover{background:var(--ml-option-bg, transparent)}.ml__checkbox{flex-shrink:0;margin-top:var(--ml-checkbox-margin-top, .125rem);cursor:pointer}.ml__option--disabled .ml__checkbox{cursor:not-allowed}.ml__option-content{flex:1;display:flex;align-items:flex-start;gap:var(--ml-option-content-gap, .5rem);min-width:0}.ml__option-icon{flex-shrink:0;width:var(--ml-option-icon-size, 1.25rem);height:var(--ml-option-icon-size, 1.25rem);display:flex;align-items:center;justify-content:center;font-size:var(--ml-option-icon-font-size, 1rem)}.ml__option-icon svg{width:100%;height:100%;fill:currentColor}.ml__option-text{flex:1;min-width:0}.ml__option-title{font-size:var(--ml-option-title-font-size, .875rem);color:var(--ml-option-title-color, inherit);line-height:var(--ml-line-height-relaxed, 1.4)}.ml__option-title mark{background:var(--ml-option-mark-bg, rgba(59, 130, 246, .2));color:var(--ml-option-mark-color, inherit);font-weight:var(--ml-option-mark-font-weight, 600)}.ml__option-subtitle{margin-top:var(--ml-option-subtitle-margin-top, .25rem);font-size:var(--ml-option-subtitle-font-size, .75rem);color:var(--ml-option-subtitle-color, #6b7280);line-height:var(--ml-option-subtitle-line-height, 1.3)}.ml__empty{padding:var(--ml-empty-padding, 1rem .75rem);text-align:center;font-size:var(--ml-empty-font-size, .875rem);color:var(--ml-empty-color, #6b7280)}.ml__loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ml-loader-padding, 1rem);gap:var(--ml-loader-gap, .5rem)}.ml__loading-text{font-size:var(--ml-loading-text-font-size, .875rem);color:var(--ml-loading-text-color, #6b7280)}.ml__pills{display:flex;flex-wrap:wrap;gap:var(--ml-pills-gap, .5rem);padding:0}.ml__pills:empty{display:none}.ml__pills--bottom{margin-top:var(--ml-pills-margin-bottom, .5rem)}.ml__pills--top{margin-bottom:var(--ml-pills-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__pills--left{order:var(--ml-order-first, -1);margin-right:var(--ml-pills-margin-left, .25rem);justify-content:flex-end}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .25rem);justify-content:flex-start}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__count-badge-wrapper{display:inline-flex;align-items:center;gap:var(--ml-count-badge-wrapper-gap, .25rem);background:var(--ml-count-badge-wrapper-bg, transparent);border:var(--ml-count-badge-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-count-badge-wrapper-border-radius, .25rem);padding:var(--ml-count-badge-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge-wrapper:hover{background:var(--ml-count-badge-wrapper-bg-hover, #f9fafb);border-color:var(--ml-count-badge-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__pill{display:inline-flex;align-items:center;height:var(--ml-pill-height, 1.5rem);font-size:var(--ml-pill-font-size, .75rem);font-weight:var(--ml-pill-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-pill-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__pill-text{display:flex;align-items:center;height:100%;padding:var(--ml-pill-text-padding, 0 .5rem);background:var(--ml-pill-text-bg, #eff6ff);color:var(--ml-pill-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__pill-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-pill-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-pill-remove-bg, #3b82f6);color:var(--ml-pill-remove-color, #ffffff);border:var(--ml-pill-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-pill-remove-font-size, .75rem)}.ml__pill-remove:hover{background:var(--ml-pill-remove-bg-hover, #2563eb)}.ml__pill-remove:focus{outline:none;box-shadow:var(--ml-pill-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__pill-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__pill--more{cursor:pointer}.ml__pill--more .ml__pill-text{background:var(--ml-more-badge-bg, #eff6ff);font-weight:var(--ml-pill-font-weight, 600)}.ml__pill--more:hover .ml__pill-text{background:var(--ml-more-badge-hover-bg, #ffffff)}.ml__pill--more:active .ml__pill-text{background:var(--ml-more-badge-active-bg, #e0f2fe)}.ml__pill-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__pill-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ml-selected-popover-header-padding, .5rem .75rem);background:var(--ml-selected-popover-header-bg, rgba(59, 130, 246, .1));border-bottom:var(--ml-selected-popover-header-border-bottom, 1px solid #e5e7eb);font-size:var(--ml-selected-popover-header-font-size, .875rem);font-weight:var(--ml-selected-popover-header-font-weight, 600);color:var(--ml-selected-popover-header-color, #111827)}.ml__selected-popover-close{display:flex;align-items:center;justify-content:center;width:var(--ml-popover-close-size, 1.5rem);height:var(--ml-popover-close-size, 1.5rem);padding:0;border:none;background:var(--ml-selected-popover-close-bg, transparent);color:var(--ml-selected-popover-close-color, #6b7280);font-size:var(--ml-selected-popover-close-font-size, 1.25rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-selected-popover-close-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__selected-popover-close:hover{background:var(--ml-selected-popover-close-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-selected-popover-close-color-hover, #3b82f6)}.ml__selected-popover-body{display:flex;flex-direction:column;gap:var(--ml-selected-popover-body-gap, .25rem);padding:var(--ml-selected-popover-body-padding, .5rem);overflow-y:auto;max-height:var(--ml-selected-popover-body-max-height, 18rem)}.ml__selected-popover-body .ml__pill{width:100%}.ml__selected-popover-body .ml__pill-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ml--rtl .ml__input-wrapper{direction:rtl}.ml--rtl .ml__input{text-align:right;padding-left:var(--ml-input-padding-right, 2.5rem);padding-right:var(--ml-input-padding-h, .75rem)}.ml--rtl .ml__toggle{left:var(--ml-toggle-right, .75rem)!important;right:auto!important}.ml--rtl .ml__count-badge{left:var(--ml-count-badge-offset, 2rem)!important;right:auto!important}.ml--rtl .ml__dropdown{direction:rtl;text-align:right}.ml--rtl .ml__option{flex-direction:row-reverse}.ml--rtl .ml__checkbox{margin-left:var(--ml-spacing-sm, .5rem);margin-right:0}.ml--rtl .ml__option-content{text-align:right}.ml--rtl .ml__option-icon{margin-left:var(--ml-spacing-xs, .25rem);margin-right:0}.ml--rtl .ml__pills{direction:rtl}.ml--rtl .ml__pill{flex-direction:row-reverse}.ml--rtl .ml__pill-remove{border-radius:var(--ml-pill-remove-border-radius-rtl, .375rem) 0 0 var(--ml-pill-remove-border-radius-rtl, .375rem);border-left:var(--ml-pill-remove-border, none);border-right:none}.ml--rtl .ml__pill-text{border-radius:0 var(--ml-pill-text-border-radius-rtl, .375rem) var(--ml-pill-text-border-radius-rtl, .375rem) 0}.ml--rtl .ml__count-display{direction:rtl}.ml--rtl .ml__count-badge-wrapper{flex-direction:row-reverse}.ml--rtl .ml__selected-popover{direction:rtl;text-align:right}.ml--rtl .ml__actions{direction:rtl}.ml--rtl .ml__group-label,.ml--rtl .ml__empty{text-align:right}.ml--rtl .ml__hint{direction:rtl;text-align:right}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__pill{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__pill{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__pill{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}', hi = typeof HTMLElement < "u" ? HTMLElement : class {
|
|
2256
|
+
}, Ae = /* @__PURE__ */ new Set();
|
|
2048
2257
|
function st() {
|
|
2049
|
-
return Array.from(
|
|
2258
|
+
return Array.from(Ae);
|
|
2050
2259
|
}
|
|
2051
|
-
class nt extends
|
|
2260
|
+
class nt extends hi {
|
|
2052
2261
|
constructor() {
|
|
2053
2262
|
super();
|
|
2054
2263
|
u(this, "picker");
|
|
@@ -2085,9 +2294,10 @@ class nt extends pi {
|
|
|
2085
2294
|
u(this, "_selectCallback");
|
|
2086
2295
|
u(this, "_deselectCallback");
|
|
2087
2296
|
u(this, "_changeCallback");
|
|
2297
|
+
u(this, "_declarativeSelectedValues");
|
|
2088
2298
|
this.shadow = this.attachShadow({ mode: "open" });
|
|
2089
2299
|
const t = document.createElement("style");
|
|
2090
|
-
t.textContent =
|
|
2300
|
+
t.textContent = pi, this.shadow.appendChild(t), requestAnimationFrame(() => {
|
|
2091
2301
|
this.setAttribute("data-ready", "");
|
|
2092
2302
|
});
|
|
2093
2303
|
}
|
|
@@ -2118,8 +2328,14 @@ class nt extends pi {
|
|
|
2118
2328
|
"min-search-length",
|
|
2119
2329
|
"enable-search",
|
|
2120
2330
|
"search-input-mode",
|
|
2331
|
+
"search-mode",
|
|
2121
2332
|
"allow-add-new",
|
|
2122
2333
|
"initial-values",
|
|
2334
|
+
// Virtual scroll options
|
|
2335
|
+
"enable-virtual-scroll",
|
|
2336
|
+
"virtual-scroll-threshold",
|
|
2337
|
+
"option-height",
|
|
2338
|
+
"virtual-scroll-buffer",
|
|
2123
2339
|
// New member properties
|
|
2124
2340
|
"value-member",
|
|
2125
2341
|
"display-value-member",
|
|
@@ -2139,10 +2355,12 @@ class nt extends pi {
|
|
|
2139
2355
|
];
|
|
2140
2356
|
}
|
|
2141
2357
|
connectedCallback() {
|
|
2142
|
-
|
|
2358
|
+
Ae.add(this), this.render();
|
|
2359
|
+
const t = this.parseDeclarativeOptions();
|
|
2360
|
+
t && (this._options && this._options.length > 0 && C.warn("[MultiSelectElement] Both declarative <option> elements and programmatic .options detected. Using declarative options."), this._options = t), this.initializePicker();
|
|
2143
2361
|
}
|
|
2144
2362
|
disconnectedCallback() {
|
|
2145
|
-
|
|
2363
|
+
Ae.delete(this), this.picker && this.picker.destroy();
|
|
2146
2364
|
}
|
|
2147
2365
|
attributeChangedCallback(t, o, l) {
|
|
2148
2366
|
o !== l && this.picker && t !== "initial-values" && (this.picker.destroy(), this.initializePicker());
|
|
@@ -2164,31 +2382,67 @@ class nt extends pi {
|
|
|
2164
2382
|
var h, f;
|
|
2165
2383
|
const t = this.shadow.querySelector(".ml-debug-stats");
|
|
2166
2384
|
if (!t || !this.picker) return;
|
|
2167
|
-
const o = "1.0.0-
|
|
2385
|
+
const o = "1.0.0-rc08", l = st().length, n = this.picker.getSelected().length, r = ((h = this._options) == null ? void 0 : h.length) || 0, a = this.picker, d = a.isOpen || !1, c = a.searchTerm || "", m = a.isLoading || !1, p = ((f = a.filteredOptions) == null ? void 0 : f.length) || 0;
|
|
2168
2386
|
t.innerHTML = `
|
|
2169
2387
|
<span>Version: ${o}</span>
|
|
2170
2388
|
<span>Total Instances: ${l}</span>
|
|
2171
2389
|
<span>Options: ${r}</span>
|
|
2172
|
-
<span>Filtered: ${
|
|
2390
|
+
<span>Filtered: ${p}</span>
|
|
2173
2391
|
<span>Selected: ${n}</span>
|
|
2174
|
-
<span>Dropdown: ${
|
|
2392
|
+
<span>Dropdown: ${d ? "Open" : "Closed"}</span>
|
|
2175
2393
|
<span>Search: ${c || "none"}</span>
|
|
2176
|
-
<span>Loading: ${
|
|
2394
|
+
<span>Loading: ${m ? "Yes" : "No"}</span>
|
|
2177
2395
|
`, setTimeout(() => {
|
|
2178
2396
|
this.getAttribute("show-debug-info") === "true" && this.updateDebugInfo();
|
|
2179
2397
|
}, 500);
|
|
2180
2398
|
}
|
|
2399
|
+
/**
|
|
2400
|
+
* Parse declarative <option> and <optgroup> elements from Light DOM
|
|
2401
|
+
* Returns array of options in the format expected by the picker
|
|
2402
|
+
*/
|
|
2403
|
+
parseDeclarativeOptions() {
|
|
2404
|
+
var s, n, r, a;
|
|
2405
|
+
const t = [], o = Array.from(this.children);
|
|
2406
|
+
if (o.length === 0)
|
|
2407
|
+
return null;
|
|
2408
|
+
let l = !1;
|
|
2409
|
+
for (const d of o)
|
|
2410
|
+
if (d.tagName === "OPTION") {
|
|
2411
|
+
const c = d, m = {
|
|
2412
|
+
value: c.value || ((s = c.textContent) == null ? void 0 : s.trim()) || "",
|
|
2413
|
+
label: ((n = c.textContent) == null ? void 0 : n.trim()) || c.value || ""
|
|
2414
|
+
};
|
|
2415
|
+
c.hasAttribute("selected") && (this._declarativeSelectedValues || (this._declarativeSelectedValues = []), this._declarativeSelectedValues.push(m.value)), c.hasAttribute("disabled") && (m.disabled = !0), c.hasAttribute("data-icon") && (m.icon = c.getAttribute("data-icon")), c.hasAttribute("data-subtitle") && (m.subtitle = c.getAttribute("data-subtitle")), t.push(m), l = !0;
|
|
2416
|
+
} else if (d.tagName === "OPTGROUP") {
|
|
2417
|
+
const c = d, m = c.label || c.getAttribute("label") || "Group", p = Array.from(c.querySelectorAll("option"));
|
|
2418
|
+
for (const h of p) {
|
|
2419
|
+
const f = {
|
|
2420
|
+
value: h.value || ((r = h.textContent) == null ? void 0 : r.trim()) || "",
|
|
2421
|
+
label: ((a = h.textContent) == null ? void 0 : a.trim()) || h.value || "",
|
|
2422
|
+
group: m
|
|
2423
|
+
};
|
|
2424
|
+
h.hasAttribute("selected") && (this._declarativeSelectedValues || (this._declarativeSelectedValues = []), this._declarativeSelectedValues.push(f.value)), h.hasAttribute("disabled") && (f.disabled = !0), h.hasAttribute("data-icon") && (f.icon = h.getAttribute("data-icon")), h.hasAttribute("data-subtitle") && (f.subtitle = h.getAttribute("data-subtitle")), t.push(f), l = !0;
|
|
2425
|
+
}
|
|
2426
|
+
}
|
|
2427
|
+
return l ? (C.debug(`[MultiSelectElement] Parsed ${t.length} declarative options from Light DOM`), o.forEach((d) => {
|
|
2428
|
+
(d.tagName === "OPTION" || d.tagName === "OPTGROUP") && d.remove();
|
|
2429
|
+
}), t) : null;
|
|
2430
|
+
}
|
|
2181
2431
|
initializePicker() {
|
|
2182
2432
|
if (!this.containerElement) return;
|
|
2183
2433
|
let t;
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
|
|
2434
|
+
if (this._declarativeSelectedValues && this._declarativeSelectedValues.length > 0)
|
|
2435
|
+
t = this._declarativeSelectedValues, C.debug(`[MultiSelectElement] Using ${t.length} declaratively selected values`);
|
|
2436
|
+
else {
|
|
2437
|
+
const l = this.getAttribute("initial-values");
|
|
2438
|
+
if (l)
|
|
2439
|
+
try {
|
|
2440
|
+
t = JSON.parse(l);
|
|
2441
|
+
} catch (s) {
|
|
2442
|
+
C.error("[MultiSelectElement] Failed to parse initial-values:", s);
|
|
2443
|
+
}
|
|
2444
|
+
}
|
|
2445
|
+
const o = {
|
|
2192
2446
|
// String options
|
|
2193
2447
|
searchHint: this.getAttribute("search-hint") || void 0,
|
|
2194
2448
|
searchPlaceholder: this.getAttribute("search-placeholder") || "Search...",
|
|
@@ -2200,6 +2454,7 @@ class nt extends pi {
|
|
|
2200
2454
|
emptyMessage: this.getAttribute("empty-message") || "No results found",
|
|
2201
2455
|
loadingMessage: this.getAttribute("loading-message") || "Loading...",
|
|
2202
2456
|
searchInputMode: this.getAttribute("search-input-mode") || "normal",
|
|
2457
|
+
searchMode: this.getAttribute("search-mode") || "filter",
|
|
2203
2458
|
// Number options
|
|
2204
2459
|
pillsThreshold: this.getAttribute("pills-threshold") ? parseInt(this.getAttribute("pills-threshold")) : void 0,
|
|
2205
2460
|
pillsMaxVisible: this.getAttribute("pills-max-visible") ? parseInt(this.getAttribute("pills-max-visible")) : void 0,
|
|
@@ -2217,6 +2472,11 @@ class nt extends pi {
|
|
|
2217
2472
|
isAddNewAllowed: this.getAttribute("allow-add-new") === "true",
|
|
2218
2473
|
isCountBadgeShown: this.getAttribute("show-count-badge") === "true",
|
|
2219
2474
|
isKeepOptionsOnSearch: this.getAttribute("keep-options-on-search") !== "false",
|
|
2475
|
+
isVirtualScrollEnabled: this.getAttribute("enable-virtual-scroll") === "true",
|
|
2476
|
+
// Virtual scroll options
|
|
2477
|
+
virtualScrollThreshold: this.getAttribute("virtual-scroll-threshold") ? parseInt(this.getAttribute("virtual-scroll-threshold")) : 100,
|
|
2478
|
+
optionHeight: this.getAttribute("option-height") ? parseInt(this.getAttribute("option-height")) : 50,
|
|
2479
|
+
virtualScrollBuffer: this.getAttribute("virtual-scroll-buffer") ? parseInt(this.getAttribute("virtual-scroll-buffer")) : 10,
|
|
2220
2480
|
// Member properties
|
|
2221
2481
|
valueMember: this.getAttribute("value-member") || this._valueMember,
|
|
2222
2482
|
displayValueMember: this.getAttribute("display-value-member") || this._displayValueMember,
|
|
@@ -2245,38 +2505,38 @@ class nt extends pi {
|
|
|
2245
2505
|
pillTooltipDelay: parseInt(this.getAttribute("pill-tooltip-delay") || "300"),
|
|
2246
2506
|
pillTooltipOffset: parseInt(this.getAttribute("pill-tooltip-offset") || "8"),
|
|
2247
2507
|
// Count pill callback
|
|
2248
|
-
getCountPillCallback: this._getCountPillCallback || ((
|
|
2508
|
+
getCountPillCallback: this._getCountPillCallback || ((l, s) => s !== void 0 ? `+${s} more` : `${l} selected`),
|
|
2249
2509
|
// Data and callbacks
|
|
2250
2510
|
options: this._options,
|
|
2251
2511
|
beforeSearchCallback: this._beforeSearchCallback,
|
|
2252
2512
|
searchCallback: this._searchCallback,
|
|
2253
2513
|
addNewCallback: this._addNewCallback,
|
|
2254
|
-
selectCallback: (
|
|
2255
|
-
var
|
|
2256
|
-
this._selectCallback && this._selectCallback(
|
|
2514
|
+
selectCallback: (l) => {
|
|
2515
|
+
var s, n;
|
|
2516
|
+
this._selectCallback && this._selectCallback(l), this.dispatchEvent(new CustomEvent("select", {
|
|
2257
2517
|
detail: {
|
|
2258
|
-
option:
|
|
2259
|
-
selectedOptions: (
|
|
2260
|
-
selectedValues: Array.from(((
|
|
2518
|
+
option: l,
|
|
2519
|
+
selectedOptions: (s = this.picker) == null ? void 0 : s.getSelected(),
|
|
2520
|
+
selectedValues: Array.from(((n = this.picker) == null ? void 0 : n.getValue()) || [])
|
|
2261
2521
|
}
|
|
2262
2522
|
}));
|
|
2263
2523
|
},
|
|
2264
|
-
deselectCallback: (
|
|
2265
|
-
var
|
|
2266
|
-
this._deselectCallback && this._deselectCallback(
|
|
2524
|
+
deselectCallback: (l) => {
|
|
2525
|
+
var s, n;
|
|
2526
|
+
this._deselectCallback && this._deselectCallback(l), this.dispatchEvent(new CustomEvent("deselect", {
|
|
2267
2527
|
detail: {
|
|
2268
|
-
option:
|
|
2269
|
-
selectedOptions: (
|
|
2270
|
-
selectedValues: Array.from(((
|
|
2528
|
+
option: l,
|
|
2529
|
+
selectedOptions: (s = this.picker) == null ? void 0 : s.getSelected(),
|
|
2530
|
+
selectedValues: Array.from(((n = this.picker) == null ? void 0 : n.getValue()) || [])
|
|
2271
2531
|
}
|
|
2272
2532
|
}));
|
|
2273
2533
|
},
|
|
2274
|
-
changeCallback: (
|
|
2275
|
-
var
|
|
2276
|
-
this._changeCallback && this._changeCallback(
|
|
2534
|
+
changeCallback: (l) => {
|
|
2535
|
+
var s;
|
|
2536
|
+
this._changeCallback && this._changeCallback(l), this.dispatchEvent(new CustomEvent("change", {
|
|
2277
2537
|
detail: {
|
|
2278
|
-
selectedOptions:
|
|
2279
|
-
selectedValues: Array.from(((
|
|
2538
|
+
selectedOptions: l,
|
|
2539
|
+
selectedValues: Array.from(((s = this.picker) == null ? void 0 : s.getValue()) || [])
|
|
2280
2540
|
}
|
|
2281
2541
|
}));
|
|
2282
2542
|
},
|
|
@@ -2285,7 +2545,7 @@ class nt extends pi {
|
|
|
2285
2545
|
// Pass host element (this) for hidden inputs in light DOM
|
|
2286
2546
|
hostElement: this
|
|
2287
2547
|
};
|
|
2288
|
-
t && (this.containerElement.dataset.initialValues = JSON.stringify(t)), this.picker = new
|
|
2548
|
+
t && (this.containerElement.dataset.initialValues = JSON.stringify(t)), this.picker = new di(this.containerElement, o);
|
|
2289
2549
|
}
|
|
2290
2550
|
reinitialize() {
|
|
2291
2551
|
this.picker && (this.picker.destroy(), this.initializePicker());
|
|
@@ -2512,31 +2772,31 @@ class nt extends pi {
|
|
|
2512
2772
|
this.picker && this.picker.destroy();
|
|
2513
2773
|
}
|
|
2514
2774
|
}
|
|
2515
|
-
typeof window < "u" && typeof customElements < "u" && (customElements.get("
|
|
2775
|
+
typeof window < "u" && typeof customElements < "u" && (customElements.get("web-multiselect") || customElements.define("web-multiselect", nt));
|
|
2516
2776
|
typeof window < "u" && (window.keenmate = window.keenmate || {}, window.keenmate.multiselect = {
|
|
2517
|
-
version: () => "1.0.0-
|
|
2777
|
+
version: () => "1.0.0-rc08",
|
|
2518
2778
|
config: {
|
|
2519
2779
|
name: "@keenmate/web-multiselect",
|
|
2520
|
-
version: "1.0.0-
|
|
2780
|
+
version: "1.0.0-rc08",
|
|
2521
2781
|
author: "Keenmate",
|
|
2522
2782
|
license: "MIT",
|
|
2523
2783
|
repository: "git+https://github.com/keenmate/web-multiselect.git",
|
|
2524
2784
|
homepage: "https://github.com/keenmate/web-multiselect#readme"
|
|
2525
2785
|
},
|
|
2526
2786
|
register: () => {
|
|
2527
|
-
typeof customElements < "u" && !customElements.get("
|
|
2787
|
+
typeof customElements < "u" && !customElements.get("web-multiselect") && customElements.define("web-multiselect", nt);
|
|
2528
2788
|
},
|
|
2529
2789
|
getInstances: () => st()
|
|
2530
2790
|
});
|
|
2531
2791
|
export {
|
|
2532
2792
|
nt as MultiSelectElement,
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
|
|
2539
|
-
|
|
2793
|
+
di as PureMultiSelect,
|
|
2794
|
+
C as dataLogger,
|
|
2795
|
+
fi as disableLogging,
|
|
2796
|
+
gi as enableCategory,
|
|
2797
|
+
ui as enableLogging,
|
|
2798
|
+
H as initLogger,
|
|
2799
|
+
k as interactionLogger,
|
|
2540
2800
|
lt as setLogLevel,
|
|
2541
2801
|
v as uiLogger
|
|
2542
2802
|
};
|