@keenmate/web-multiselect 1.0.0-rc08 → 1.0.0-rc11
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 +18 -4
- package/dist/multiselect.js +617 -556
- package/dist/multiselect.umd.js +28 -14
- package/dist/style.css +1 -1
- package/package.json +1 -2
- package/src/scss/_css-variables.scss +10 -0
- package/src/scss/_options.scss +4 -0
- package/src/scss/_pills-display.scss +22 -12
- package/src/scss/_tooltips-popover.scss +25 -0
- package/src/scss/_variables.scss +11 -0
package/dist/multiselect.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var u = (i, e, t) =>
|
|
4
|
-
const ae = Math.min, B = Math.max, ce = Math.round,
|
|
1
|
+
var ct = Object.defineProperty;
|
|
2
|
+
var dt = (i, e, t) => e in i ? ct(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
|
|
3
|
+
var u = (i, e, t) => dt(i, typeof e != "symbol" ? e + "" : e, t);
|
|
4
|
+
const ae = Math.min, B = Math.max, ce = Math.round, le = Math.floor, M = (i) => ({
|
|
5
5
|
x: i,
|
|
6
6
|
y: i
|
|
7
|
-
}),
|
|
7
|
+
}), pt = {
|
|
8
8
|
left: "right",
|
|
9
9
|
right: "left",
|
|
10
10
|
bottom: "top",
|
|
11
11
|
top: "bottom"
|
|
12
|
-
},
|
|
12
|
+
}, ht = {
|
|
13
13
|
start: "end",
|
|
14
14
|
end: "start"
|
|
15
15
|
};
|
|
16
|
-
function
|
|
16
|
+
function Ee(i, e, t) {
|
|
17
17
|
return B(i, ae(e, t));
|
|
18
18
|
}
|
|
19
19
|
function me(i, e) {
|
|
@@ -25,54 +25,54 @@ function W(i) {
|
|
|
25
25
|
function ue(i) {
|
|
26
26
|
return i.split("-")[1];
|
|
27
27
|
}
|
|
28
|
-
function
|
|
28
|
+
function je(i) {
|
|
29
29
|
return i === "x" ? "y" : "x";
|
|
30
30
|
}
|
|
31
|
-
function
|
|
31
|
+
function Ge(i) {
|
|
32
32
|
return i === "y" ? "height" : "width";
|
|
33
33
|
}
|
|
34
|
-
const
|
|
34
|
+
const mt = /* @__PURE__ */ new Set(["top", "bottom"]);
|
|
35
35
|
function z(i) {
|
|
36
|
-
return
|
|
36
|
+
return mt.has(W(i)) ? "y" : "x";
|
|
37
37
|
}
|
|
38
|
-
function
|
|
39
|
-
return
|
|
38
|
+
function Ue(i) {
|
|
39
|
+
return je(z(i));
|
|
40
40
|
}
|
|
41
|
-
function
|
|
41
|
+
function ut(i, e, t) {
|
|
42
42
|
t === void 0 && (t = !1);
|
|
43
|
-
const
|
|
44
|
-
let n =
|
|
43
|
+
const l = ue(i), o = Ue(i), s = Ge(o);
|
|
44
|
+
let n = o === "x" ? l === (t ? "end" : "start") ? "right" : "left" : l === "start" ? "bottom" : "top";
|
|
45
45
|
return e.reference[s] > e.floating[s] && (n = de(n)), [n, de(n)];
|
|
46
46
|
}
|
|
47
|
-
function
|
|
47
|
+
function ft(i) {
|
|
48
48
|
const e = de(i);
|
|
49
49
|
return [Ce(i), e, Ce(e)];
|
|
50
50
|
}
|
|
51
51
|
function Ce(i) {
|
|
52
|
-
return i.replace(/start|end/g, (e) =>
|
|
52
|
+
return i.replace(/start|end/g, (e) => ht[e]);
|
|
53
53
|
}
|
|
54
|
-
const $e = ["left", "right"], ze = ["right", "left"],
|
|
55
|
-
function
|
|
54
|
+
const $e = ["left", "right"], ze = ["right", "left"], gt = ["top", "bottom"], bt = ["bottom", "top"];
|
|
55
|
+
function vt(i, e, t) {
|
|
56
56
|
switch (i) {
|
|
57
57
|
case "top":
|
|
58
58
|
case "bottom":
|
|
59
59
|
return t ? e ? ze : $e : e ? $e : ze;
|
|
60
60
|
case "left":
|
|
61
61
|
case "right":
|
|
62
|
-
return e ?
|
|
62
|
+
return e ? gt : bt;
|
|
63
63
|
default:
|
|
64
64
|
return [];
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
|
-
function
|
|
68
|
-
const
|
|
69
|
-
let s =
|
|
70
|
-
return
|
|
67
|
+
function wt(i, e, t, l) {
|
|
68
|
+
const o = ue(i);
|
|
69
|
+
let s = vt(W(i), t === "start", l);
|
|
70
|
+
return o && (s = s.map((n) => n + "-" + o), e && (s = s.concat(s.map(Ce)))), s;
|
|
71
71
|
}
|
|
72
72
|
function de(i) {
|
|
73
|
-
return i.replace(/left|right|bottom|top/g, (e) =>
|
|
73
|
+
return i.replace(/left|right|bottom|top/g, (e) => pt[e]);
|
|
74
74
|
}
|
|
75
|
-
function
|
|
75
|
+
function _t(i) {
|
|
76
76
|
return {
|
|
77
77
|
top: 0,
|
|
78
78
|
right: 0,
|
|
@@ -82,7 +82,7 @@ function wt(i) {
|
|
|
82
82
|
};
|
|
83
83
|
}
|
|
84
84
|
function yt(i) {
|
|
85
|
-
return typeof i != "number" ?
|
|
85
|
+
return typeof i != "number" ? _t(i) : {
|
|
86
86
|
top: i,
|
|
87
87
|
right: i,
|
|
88
88
|
bottom: i,
|
|
@@ -93,56 +93,56 @@ function pe(i) {
|
|
|
93
93
|
const {
|
|
94
94
|
x: e,
|
|
95
95
|
y: t,
|
|
96
|
-
width:
|
|
97
|
-
height:
|
|
96
|
+
width: l,
|
|
97
|
+
height: o
|
|
98
98
|
} = i;
|
|
99
99
|
return {
|
|
100
|
-
width:
|
|
101
|
-
height:
|
|
100
|
+
width: l,
|
|
101
|
+
height: o,
|
|
102
102
|
top: t,
|
|
103
103
|
left: e,
|
|
104
|
-
right: e +
|
|
105
|
-
bottom: t +
|
|
104
|
+
right: e + l,
|
|
105
|
+
bottom: t + o,
|
|
106
106
|
x: e,
|
|
107
107
|
y: t
|
|
108
108
|
};
|
|
109
109
|
}
|
|
110
110
|
function De(i, e, t) {
|
|
111
111
|
let {
|
|
112
|
-
reference:
|
|
113
|
-
floating:
|
|
112
|
+
reference: l,
|
|
113
|
+
floating: o
|
|
114
114
|
} = i;
|
|
115
|
-
const s = z(e), n =
|
|
115
|
+
const s = z(e), n = Ue(e), r = Ge(n), a = W(e), d = s === "y", c = l.x + l.width / 2 - o.width / 2, m = l.y + l.height / 2 - o.height / 2, p = l[r] / 2 - o[r] / 2;
|
|
116
116
|
let h;
|
|
117
117
|
switch (a) {
|
|
118
118
|
case "top":
|
|
119
119
|
h = {
|
|
120
120
|
x: c,
|
|
121
|
-
y:
|
|
121
|
+
y: l.y - o.height
|
|
122
122
|
};
|
|
123
123
|
break;
|
|
124
124
|
case "bottom":
|
|
125
125
|
h = {
|
|
126
126
|
x: c,
|
|
127
|
-
y:
|
|
127
|
+
y: l.y + l.height
|
|
128
128
|
};
|
|
129
129
|
break;
|
|
130
130
|
case "right":
|
|
131
131
|
h = {
|
|
132
|
-
x:
|
|
132
|
+
x: l.x + l.width,
|
|
133
133
|
y: m
|
|
134
134
|
};
|
|
135
135
|
break;
|
|
136
136
|
case "left":
|
|
137
137
|
h = {
|
|
138
|
-
x:
|
|
138
|
+
x: l.x - o.width,
|
|
139
139
|
y: m
|
|
140
140
|
};
|
|
141
141
|
break;
|
|
142
142
|
default:
|
|
143
143
|
h = {
|
|
144
|
-
x:
|
|
145
|
-
y:
|
|
144
|
+
x: l.x,
|
|
145
|
+
y: l.y
|
|
146
146
|
};
|
|
147
147
|
}
|
|
148
148
|
switch (ue(e)) {
|
|
@@ -155,36 +155,36 @@ function De(i, e, t) {
|
|
|
155
155
|
}
|
|
156
156
|
return h;
|
|
157
157
|
}
|
|
158
|
-
const
|
|
158
|
+
const xt = async (i, e, t) => {
|
|
159
159
|
const {
|
|
160
|
-
placement:
|
|
161
|
-
strategy:
|
|
160
|
+
placement: l = "bottom",
|
|
161
|
+
strategy: o = "absolute",
|
|
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
165
|
let d = await n.getElementRects({
|
|
166
166
|
reference: i,
|
|
167
167
|
floating: e,
|
|
168
|
-
strategy:
|
|
168
|
+
strategy: o
|
|
169
169
|
}), {
|
|
170
170
|
x: c,
|
|
171
171
|
y: m
|
|
172
|
-
} = De(d,
|
|
172
|
+
} = De(d, l, a), p = l, h = {}, f = 0;
|
|
173
173
|
for (let w = 0; w < r.length; w++) {
|
|
174
174
|
const {
|
|
175
175
|
name: g,
|
|
176
176
|
fn: b
|
|
177
177
|
} = r[w], {
|
|
178
|
-
x:
|
|
178
|
+
x: _,
|
|
179
179
|
y: x,
|
|
180
180
|
data: A,
|
|
181
181
|
reset: S
|
|
182
182
|
} = await b({
|
|
183
183
|
x: c,
|
|
184
184
|
y: m,
|
|
185
|
-
initialPlacement:
|
|
185
|
+
initialPlacement: l,
|
|
186
186
|
placement: p,
|
|
187
|
-
strategy:
|
|
187
|
+
strategy: o,
|
|
188
188
|
middlewareData: h,
|
|
189
189
|
rects: d,
|
|
190
190
|
platform: n,
|
|
@@ -193,7 +193,7 @@ const _t = async (i, e, t) => {
|
|
|
193
193
|
floating: e
|
|
194
194
|
}
|
|
195
195
|
});
|
|
196
|
-
c =
|
|
196
|
+
c = _ ?? c, m = x ?? m, h = {
|
|
197
197
|
...h,
|
|
198
198
|
[g]: {
|
|
199
199
|
...h[g],
|
|
@@ -202,7 +202,7 @@ const _t = async (i, e, t) => {
|
|
|
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
|
-
strategy:
|
|
205
|
+
strategy: o
|
|
206
206
|
}) : S.rects), {
|
|
207
207
|
x: c,
|
|
208
208
|
y: m
|
|
@@ -212,16 +212,16 @@ const _t = async (i, e, t) => {
|
|
|
212
212
|
x: c,
|
|
213
213
|
y: m,
|
|
214
214
|
placement: p,
|
|
215
|
-
strategy:
|
|
215
|
+
strategy: o,
|
|
216
216
|
middlewareData: h
|
|
217
217
|
};
|
|
218
218
|
};
|
|
219
|
-
async function
|
|
219
|
+
async function Ke(i, e) {
|
|
220
220
|
var t;
|
|
221
221
|
e === void 0 && (e = {});
|
|
222
222
|
const {
|
|
223
|
-
x:
|
|
224
|
-
y:
|
|
223
|
+
x: l,
|
|
224
|
+
y: o,
|
|
225
225
|
platform: s,
|
|
226
226
|
rects: n,
|
|
227
227
|
elements: r,
|
|
@@ -237,9 +237,9 @@ async function Ue(i, e) {
|
|
|
237
237
|
boundary: d,
|
|
238
238
|
rootBoundary: c,
|
|
239
239
|
strategy: a
|
|
240
|
-
})),
|
|
241
|
-
x:
|
|
242
|
-
y:
|
|
240
|
+
})), _ = m === "floating" ? {
|
|
241
|
+
x: l,
|
|
242
|
+
y: o,
|
|
243
243
|
width: n.floating.width,
|
|
244
244
|
height: n.floating.height
|
|
245
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)) || {
|
|
@@ -250,10 +250,10 @@ async function Ue(i, e) {
|
|
|
250
250
|
y: 1
|
|
251
251
|
}, S = pe(s.convertOffsetParentRelativeRectToViewportRelativeRect ? await s.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
252
252
|
elements: r,
|
|
253
|
-
rect:
|
|
253
|
+
rect: _,
|
|
254
254
|
offsetParent: x,
|
|
255
255
|
strategy: a
|
|
256
|
-
}) :
|
|
256
|
+
}) : _);
|
|
257
257
|
return {
|
|
258
258
|
top: (b.top - S.top + f.top) / A.y,
|
|
259
259
|
bottom: (S.bottom - b.bottom + f.bottom) / A.y,
|
|
@@ -261,14 +261,14 @@ async function Ue(i, e) {
|
|
|
261
261
|
right: (S.right - b.right + f.right) / A.x
|
|
262
262
|
};
|
|
263
263
|
}
|
|
264
|
-
const
|
|
264
|
+
const Ct = function(i) {
|
|
265
265
|
return i === void 0 && (i = {}), {
|
|
266
266
|
name: "flip",
|
|
267
267
|
options: i,
|
|
268
268
|
async fn(e) {
|
|
269
|
-
var t,
|
|
269
|
+
var t, l;
|
|
270
270
|
const {
|
|
271
|
-
placement:
|
|
271
|
+
placement: o,
|
|
272
272
|
middlewareData: s,
|
|
273
273
|
rects: n,
|
|
274
274
|
initialPlacement: r,
|
|
@@ -285,70 +285,70 @@ const xt = function(i) {
|
|
|
285
285
|
} = me(i, e);
|
|
286
286
|
if ((t = s.arrow) != null && t.alignmentOffset)
|
|
287
287
|
return {};
|
|
288
|
-
const b = W(
|
|
289
|
-
!p &&
|
|
290
|
-
const G = [r, ...S], we = await
|
|
291
|
-
let U = ((
|
|
288
|
+
const b = W(o), _ = z(r), x = W(r) === r, A = await (a.isRTL == null ? void 0 : a.isRTL(d.floating)), S = p || (x || !w ? [de(r)] : ft(r)), J = f !== "none";
|
|
289
|
+
!p && J && S.push(...wt(r, w, f, A));
|
|
290
|
+
const G = [r, ...S], we = await Ke(e, g), ie = [];
|
|
291
|
+
let U = ((l = s.flip) == null ? void 0 : l.overflows) || [];
|
|
292
292
|
if (c && ie.push(we[b]), m) {
|
|
293
|
-
const R =
|
|
293
|
+
const R = ut(o, n, A);
|
|
294
294
|
ie.push(we[R[0]], we[R[1]]);
|
|
295
295
|
}
|
|
296
296
|
if (U = [...U, {
|
|
297
|
-
placement:
|
|
297
|
+
placement: o,
|
|
298
298
|
overflows: ie
|
|
299
299
|
}], !ie.every((R) => R <= 0)) {
|
|
300
|
-
var
|
|
301
|
-
const R = (((
|
|
302
|
-
if (
|
|
300
|
+
var Le, Me;
|
|
301
|
+
const R = (((Le = s.flip) == null ? void 0 : Le.index) || 0) + 1, _e = G[R];
|
|
302
|
+
if (_e && (!(m === "alignment" ? _ !== z(_e) : !1) || // We leave the current main axis only if every placement on that axis
|
|
303
303
|
// overflows the main axis.
|
|
304
|
-
U.every((I) => z(I.placement) ===
|
|
304
|
+
U.every((I) => z(I.placement) === _ ? I.overflows[0] > 0 : !0)))
|
|
305
305
|
return {
|
|
306
306
|
data: {
|
|
307
307
|
index: R,
|
|
308
308
|
overflows: U
|
|
309
309
|
},
|
|
310
310
|
reset: {
|
|
311
|
-
placement:
|
|
311
|
+
placement: _e
|
|
312
312
|
}
|
|
313
313
|
};
|
|
314
|
-
let
|
|
315
|
-
if (!
|
|
314
|
+
let X = (Me = U.filter((F) => F.overflows[0] <= 0).sort((F, I) => F.overflows[1] - I.overflows[1])[0]) == null ? void 0 : Me.placement;
|
|
315
|
+
if (!X)
|
|
316
316
|
switch (h) {
|
|
317
317
|
case "bestFit": {
|
|
318
|
-
var
|
|
319
|
-
const F = (
|
|
320
|
-
if (
|
|
318
|
+
var Ve;
|
|
319
|
+
const F = (Ve = U.filter((I) => {
|
|
320
|
+
if (J) {
|
|
321
321
|
const $ = z(I.placement);
|
|
322
|
-
return $ ===
|
|
322
|
+
return $ === _ || // 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((I) => [I.placement, I.overflows.filter(($) => $ > 0).reduce(($,
|
|
328
|
-
F && (
|
|
327
|
+
}).map((I) => [I.placement, I.overflows.filter(($) => $ > 0).reduce(($, at) => $ + at, 0)]).sort((I, $) => I[1] - $[1])[0]) == null ? void 0 : Ve[0];
|
|
328
|
+
F && (X = F);
|
|
329
329
|
break;
|
|
330
330
|
}
|
|
331
331
|
case "initialPlacement":
|
|
332
|
-
|
|
332
|
+
X = r;
|
|
333
333
|
break;
|
|
334
334
|
}
|
|
335
|
-
if (
|
|
335
|
+
if (o !== X)
|
|
336
336
|
return {
|
|
337
337
|
reset: {
|
|
338
|
-
placement:
|
|
338
|
+
placement: X
|
|
339
339
|
}
|
|
340
340
|
};
|
|
341
341
|
}
|
|
342
342
|
return {};
|
|
343
343
|
}
|
|
344
344
|
};
|
|
345
|
-
},
|
|
346
|
-
async function
|
|
345
|
+
}, kt = /* @__PURE__ */ new Set(["left", "top"]);
|
|
346
|
+
async function St(i, e) {
|
|
347
347
|
const {
|
|
348
348
|
placement: t,
|
|
349
|
-
platform:
|
|
350
|
-
elements:
|
|
351
|
-
} = i, s = await (
|
|
349
|
+
platform: l,
|
|
350
|
+
elements: o
|
|
351
|
+
} = i, s = await (l.isRTL == null ? void 0 : l.isRTL(o.floating)), n = W(t), r = ue(t), a = z(t) === "y", d = kt.has(n) ? -1 : 1, c = s && a ? -1 : 1, m = me(e, i);
|
|
352
352
|
let {
|
|
353
353
|
mainAxis: p,
|
|
354
354
|
crossAxis: h,
|
|
@@ -370,20 +370,20 @@ async function kt(i, e) {
|
|
|
370
370
|
y: h * c
|
|
371
371
|
};
|
|
372
372
|
}
|
|
373
|
-
const
|
|
373
|
+
const At = function(i) {
|
|
374
374
|
return i === void 0 && (i = 0), {
|
|
375
375
|
name: "offset",
|
|
376
376
|
options: i,
|
|
377
377
|
async fn(e) {
|
|
378
|
-
var t,
|
|
378
|
+
var t, l;
|
|
379
379
|
const {
|
|
380
|
-
x:
|
|
380
|
+
x: o,
|
|
381
381
|
y: s,
|
|
382
382
|
placement: n,
|
|
383
383
|
middlewareData: r
|
|
384
|
-
} = e, a = await
|
|
385
|
-
return n === ((t = r.offset) == null ? void 0 : t.placement) && (
|
|
386
|
-
x:
|
|
384
|
+
} = e, a = await St(e, i);
|
|
385
|
+
return n === ((t = r.offset) == null ? void 0 : t.placement) && (l = r.arrow) != null && l.alignmentOffset ? {} : {
|
|
386
|
+
x: o + a.x,
|
|
387
387
|
y: s + a.y,
|
|
388
388
|
data: {
|
|
389
389
|
...a,
|
|
@@ -392,15 +392,15 @@ const St = function(i) {
|
|
|
392
392
|
};
|
|
393
393
|
}
|
|
394
394
|
};
|
|
395
|
-
},
|
|
395
|
+
}, Pt = function(i) {
|
|
396
396
|
return i === void 0 && (i = {}), {
|
|
397
397
|
name: "shift",
|
|
398
398
|
options: i,
|
|
399
399
|
async fn(e) {
|
|
400
400
|
const {
|
|
401
401
|
x: t,
|
|
402
|
-
y:
|
|
403
|
-
placement:
|
|
402
|
+
y: l,
|
|
403
|
+
placement: o
|
|
404
404
|
} = e, {
|
|
405
405
|
mainAxis: s = !0,
|
|
406
406
|
crossAxis: n = !1,
|
|
@@ -408,27 +408,27 @@ const St = function(i) {
|
|
|
408
408
|
fn: (g) => {
|
|
409
409
|
let {
|
|
410
410
|
x: b,
|
|
411
|
-
y
|
|
411
|
+
y: _
|
|
412
412
|
} = g;
|
|
413
413
|
return {
|
|
414
414
|
x: b,
|
|
415
|
-
y
|
|
415
|
+
y: _
|
|
416
416
|
};
|
|
417
417
|
}
|
|
418
418
|
},
|
|
419
419
|
...a
|
|
420
420
|
} = me(i, e), d = {
|
|
421
421
|
x: t,
|
|
422
|
-
y:
|
|
423
|
-
}, c = await
|
|
422
|
+
y: l
|
|
423
|
+
}, c = await Ke(e, a), m = z(W(o)), p = je(m);
|
|
424
424
|
let h = d[p], f = d[m];
|
|
425
425
|
if (s) {
|
|
426
|
-
const g = p === "y" ? "top" : "left", b = p === "y" ? "bottom" : "right",
|
|
427
|
-
h =
|
|
426
|
+
const g = p === "y" ? "top" : "left", b = p === "y" ? "bottom" : "right", _ = h + c[g], x = h - c[b];
|
|
427
|
+
h = Ee(_, h, x);
|
|
428
428
|
}
|
|
429
429
|
if (n) {
|
|
430
|
-
const g = m === "y" ? "top" : "left", b = m === "y" ? "bottom" : "right",
|
|
431
|
-
f =
|
|
430
|
+
const g = m === "y" ? "top" : "left", b = m === "y" ? "bottom" : "right", _ = f + c[g], x = f - c[b];
|
|
431
|
+
f = Ee(_, f, x);
|
|
432
432
|
}
|
|
433
433
|
const w = r.fn({
|
|
434
434
|
...e,
|
|
@@ -439,7 +439,7 @@ const St = function(i) {
|
|
|
439
439
|
...w,
|
|
440
440
|
data: {
|
|
441
441
|
x: w.x - t,
|
|
442
|
-
y: w.y -
|
|
442
|
+
y: w.y - l,
|
|
443
443
|
enabled: {
|
|
444
444
|
[p]: s,
|
|
445
445
|
[m]: n
|
|
@@ -452,46 +452,46 @@ const St = function(i) {
|
|
|
452
452
|
function fe() {
|
|
453
453
|
return typeof window < "u";
|
|
454
454
|
}
|
|
455
|
-
function
|
|
456
|
-
return
|
|
455
|
+
function q(i) {
|
|
456
|
+
return Ye(i) ? (i.nodeName || "").toLowerCase() : "#document";
|
|
457
457
|
}
|
|
458
|
-
function
|
|
458
|
+
function P(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 E(i) {
|
|
463
463
|
var e;
|
|
464
|
-
return (e = (
|
|
464
|
+
return (e = (Ye(i) ? i.ownerDocument : i.document) || window.document) == null ? void 0 : e.documentElement;
|
|
465
465
|
}
|
|
466
|
-
function
|
|
467
|
-
return fe() ? i instanceof Node || i instanceof
|
|
466
|
+
function Ye(i) {
|
|
467
|
+
return fe() ? i instanceof Node || i instanceof P(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 P(i).Element : !1;
|
|
471
471
|
}
|
|
472
|
-
function
|
|
473
|
-
return fe() ? i instanceof HTMLElement || i instanceof
|
|
472
|
+
function V(i) {
|
|
473
|
+
return fe() ? i instanceof HTMLElement || i instanceof P(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 P(i).ShadowRoot;
|
|
477
477
|
}
|
|
478
|
-
const
|
|
478
|
+
const It = /* @__PURE__ */ new Set(["inline", "contents"]);
|
|
479
479
|
function te(i) {
|
|
480
480
|
const {
|
|
481
481
|
overflow: e,
|
|
482
482
|
overflowX: t,
|
|
483
|
-
overflowY:
|
|
484
|
-
display:
|
|
485
|
-
} =
|
|
486
|
-
return /auto|scroll|overlay|hidden|clip/.test(e +
|
|
483
|
+
overflowY: l,
|
|
484
|
+
display: o
|
|
485
|
+
} = L(i);
|
|
486
|
+
return /auto|scroll|overlay|hidden|clip/.test(e + l + t) && !It.has(o);
|
|
487
487
|
}
|
|
488
|
-
const
|
|
489
|
-
function
|
|
490
|
-
return
|
|
488
|
+
const Ot = /* @__PURE__ */ new Set(["table", "td", "th"]);
|
|
489
|
+
function Tt(i) {
|
|
490
|
+
return Ot.has(q(i));
|
|
491
491
|
}
|
|
492
|
-
const
|
|
492
|
+
const Lt = [":popover-open", ":modal"];
|
|
493
493
|
function ge(i) {
|
|
494
|
-
return
|
|
494
|
+
return Lt.some((e) => {
|
|
495
495
|
try {
|
|
496
496
|
return i.matches(e);
|
|
497
497
|
} catch {
|
|
@@ -499,15 +499,15 @@ function ge(i) {
|
|
|
499
499
|
}
|
|
500
500
|
});
|
|
501
501
|
}
|
|
502
|
-
const
|
|
503
|
-
function
|
|
504
|
-
const e = Ie(), t = T(i) ?
|
|
505
|
-
return
|
|
502
|
+
const Mt = ["transform", "translate", "scale", "rotate", "perspective"], Vt = ["transform", "translate", "scale", "rotate", "perspective", "filter"], Et = ["paint", "layout", "strict", "content"];
|
|
503
|
+
function Pe(i) {
|
|
504
|
+
const e = Ie(), t = T(i) ? L(i) : i;
|
|
505
|
+
return Mt.some((l) => t[l] ? t[l] !== "none" : !1) || (t.containerType ? t.containerType !== "normal" : !1) || !e && (t.backdropFilter ? t.backdropFilter !== "none" : !1) || !e && (t.filter ? t.filter !== "none" : !1) || Vt.some((l) => (t.willChange || "").includes(l)) || Et.some((l) => (t.contain || "").includes(l));
|
|
506
506
|
}
|
|
507
|
-
function
|
|
507
|
+
function $t(i) {
|
|
508
508
|
let e = D(i);
|
|
509
|
-
for (;
|
|
510
|
-
if (
|
|
509
|
+
for (; V(e) && !Y(e); ) {
|
|
510
|
+
if (Pe(e))
|
|
511
511
|
return e;
|
|
512
512
|
if (ge(e))
|
|
513
513
|
return null;
|
|
@@ -518,12 +518,12 @@ function Vt(i) {
|
|
|
518
518
|
function Ie() {
|
|
519
519
|
return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
|
|
520
520
|
}
|
|
521
|
-
const
|
|
521
|
+
const zt = /* @__PURE__ */ new Set(["html", "body", "#document"]);
|
|
522
522
|
function Y(i) {
|
|
523
|
-
return
|
|
523
|
+
return zt.has(q(i));
|
|
524
524
|
}
|
|
525
|
-
function
|
|
526
|
-
return
|
|
525
|
+
function L(i) {
|
|
526
|
+
return P(i).getComputedStyle(i);
|
|
527
527
|
}
|
|
528
528
|
function be(i) {
|
|
529
529
|
return T(i) ? {
|
|
@@ -535,86 +535,86 @@ function be(i) {
|
|
|
535
535
|
};
|
|
536
536
|
}
|
|
537
537
|
function D(i) {
|
|
538
|
-
if (
|
|
538
|
+
if (q(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
|
+
E(i)
|
|
546
546
|
);
|
|
547
547
|
return Re(e) ? e.host : e;
|
|
548
548
|
}
|
|
549
|
-
function
|
|
549
|
+
function qe(i) {
|
|
550
550
|
const e = D(i);
|
|
551
|
-
return Y(e) ? i.ownerDocument ? i.ownerDocument.body : i.body :
|
|
551
|
+
return Y(e) ? i.ownerDocument ? i.ownerDocument.body : i.body : V(e) && te(e) ? e : qe(e);
|
|
552
552
|
}
|
|
553
553
|
function Q(i, e, t) {
|
|
554
|
-
var
|
|
554
|
+
var l;
|
|
555
555
|
e === void 0 && (e = []), t === void 0 && (t = !0);
|
|
556
|
-
const
|
|
556
|
+
const o = qe(i), s = o === ((l = i.ownerDocument) == null ? void 0 : l.body), n = P(o);
|
|
557
557
|
if (s) {
|
|
558
558
|
const r = ke(n);
|
|
559
|
-
return e.concat(n, n.visualViewport || [], te(
|
|
559
|
+
return e.concat(n, n.visualViewport || [], te(o) ? o : [], r && t ? Q(r) : []);
|
|
560
560
|
}
|
|
561
|
-
return e.concat(
|
|
561
|
+
return e.concat(o, Q(o, [], t));
|
|
562
562
|
}
|
|
563
563
|
function ke(i) {
|
|
564
564
|
return i.parent && Object.getPrototypeOf(i.parent) ? i.frameElement : null;
|
|
565
565
|
}
|
|
566
566
|
function Je(i) {
|
|
567
|
-
const e =
|
|
568
|
-
let t = parseFloat(e.width) || 0,
|
|
569
|
-
const
|
|
570
|
-
return r && (t = s,
|
|
567
|
+
const e = L(i);
|
|
568
|
+
let t = parseFloat(e.width) || 0, l = parseFloat(e.height) || 0;
|
|
569
|
+
const o = V(i), s = o ? i.offsetWidth : t, n = o ? i.offsetHeight : l, r = ce(t) !== s || ce(l) !== n;
|
|
570
|
+
return r && (t = s, l = n), {
|
|
571
571
|
width: t,
|
|
572
|
-
height:
|
|
572
|
+
height: l,
|
|
573
573
|
$: r
|
|
574
574
|
};
|
|
575
575
|
}
|
|
576
|
-
function
|
|
576
|
+
function Oe(i) {
|
|
577
577
|
return T(i) ? i : i.contextElement;
|
|
578
578
|
}
|
|
579
579
|
function K(i) {
|
|
580
|
-
const e =
|
|
581
|
-
if (!
|
|
580
|
+
const e = Oe(i);
|
|
581
|
+
if (!V(e))
|
|
582
582
|
return M(1);
|
|
583
583
|
const t = e.getBoundingClientRect(), {
|
|
584
|
-
width:
|
|
585
|
-
height:
|
|
584
|
+
width: l,
|
|
585
|
+
height: o,
|
|
586
586
|
$: s
|
|
587
587
|
} = Je(e);
|
|
588
|
-
let n = (s ? ce(t.width) : t.width) /
|
|
588
|
+
let n = (s ? ce(t.width) : t.width) / l, r = (s ? ce(t.height) : t.height) / o;
|
|
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
|
|
594
|
+
const Dt = /* @__PURE__ */ M(0);
|
|
595
595
|
function Xe(i) {
|
|
596
|
-
const e =
|
|
597
|
-
return !Ie() || !e.visualViewport ?
|
|
596
|
+
const e = P(i);
|
|
597
|
+
return !Ie() || !e.visualViewport ? Dt : {
|
|
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 Rt(i, e, t) {
|
|
603
|
+
return e === void 0 && (e = !1), !t || e && t !== P(i) ? !1 : e;
|
|
604
604
|
}
|
|
605
|
-
function j(i, e, t,
|
|
605
|
+
function j(i, e, t, l) {
|
|
606
606
|
e === void 0 && (e = !1), t === void 0 && (t = !1);
|
|
607
|
-
const
|
|
607
|
+
const o = i.getBoundingClientRect(), s = Oe(i);
|
|
608
608
|
let n = M(1);
|
|
609
|
-
e && (
|
|
610
|
-
const r =
|
|
611
|
-
let a = (
|
|
609
|
+
e && (l ? T(l) && (n = K(l)) : n = K(i));
|
|
610
|
+
const r = Rt(s, t, l) ? Xe(s) : M(0);
|
|
611
|
+
let a = (o.left + r.x) / n.x, d = (o.top + r.y) / n.y, c = o.width / n.x, m = o.height / n.y;
|
|
612
612
|
if (s) {
|
|
613
|
-
const p =
|
|
613
|
+
const p = P(s), h = l && T(l) ? P(l) : l;
|
|
614
614
|
let f = p, w = ke(f);
|
|
615
|
-
for (; w &&
|
|
616
|
-
const g = K(w), b = w.getBoundingClientRect(),
|
|
617
|
-
a *= g.x, d *= g.y, c *= g.x, m *= g.y, a += x, d += A, f =
|
|
615
|
+
for (; w && l && h !== f; ) {
|
|
616
|
+
const g = K(w), b = w.getBoundingClientRect(), _ = L(w), x = b.left + (w.clientLeft + parseFloat(_.paddingLeft)) * g.x, A = b.top + (w.clientTop + parseFloat(_.paddingTop)) * g.y;
|
|
617
|
+
a *= g.x, d *= g.y, c *= g.x, m *= g.y, a += x, d += A, f = P(w), w = ke(f);
|
|
618
618
|
}
|
|
619
619
|
}
|
|
620
620
|
return pe({
|
|
@@ -626,35 +626,35 @@ function j(i, e, t, o) {
|
|
|
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(E(i)).left + t;
|
|
630
630
|
}
|
|
631
|
-
function
|
|
632
|
-
const t = i.getBoundingClientRect(),
|
|
631
|
+
function Ze(i, e) {
|
|
632
|
+
const t = i.getBoundingClientRect(), l = t.left + e.scrollLeft - ve(i, t), o = t.top + e.scrollTop;
|
|
633
633
|
return {
|
|
634
|
-
x:
|
|
635
|
-
y:
|
|
634
|
+
x: l,
|
|
635
|
+
y: o
|
|
636
636
|
};
|
|
637
637
|
}
|
|
638
|
-
function
|
|
638
|
+
function Ft(i) {
|
|
639
639
|
let {
|
|
640
640
|
elements: e,
|
|
641
641
|
rect: t,
|
|
642
|
-
offsetParent:
|
|
643
|
-
strategy:
|
|
642
|
+
offsetParent: l,
|
|
643
|
+
strategy: o
|
|
644
644
|
} = i;
|
|
645
|
-
const s =
|
|
646
|
-
if (
|
|
645
|
+
const s = o === "fixed", n = E(l), r = e ? ge(e.floating) : !1;
|
|
646
|
+
if (l === n || r && s)
|
|
647
647
|
return t;
|
|
648
648
|
let a = {
|
|
649
649
|
scrollLeft: 0,
|
|
650
650
|
scrollTop: 0
|
|
651
651
|
}, d = M(1);
|
|
652
|
-
const c = M(0), m =
|
|
653
|
-
if ((m || !m && !s) && ((
|
|
654
|
-
const h = j(
|
|
655
|
-
d = K(
|
|
652
|
+
const c = M(0), m = V(l);
|
|
653
|
+
if ((m || !m && !s) && ((q(l) !== "body" || te(n)) && (a = be(l)), V(l))) {
|
|
654
|
+
const h = j(l);
|
|
655
|
+
d = K(l), c.x = h.x + l.clientLeft, c.y = h.y + l.clientTop;
|
|
656
656
|
}
|
|
657
|
-
const p = n && !m && !s ?
|
|
657
|
+
const p = n && !m && !s ? Ze(n, a) : M(0);
|
|
658
658
|
return {
|
|
659
659
|
width: t.width * d.x,
|
|
660
660
|
height: t.height * d.y,
|
|
@@ -662,32 +662,32 @@ function Rt(i) {
|
|
|
662
662
|
y: t.y * d.y - a.scrollTop * d.y + c.y + p.y
|
|
663
663
|
};
|
|
664
664
|
}
|
|
665
|
-
function
|
|
665
|
+
function Nt(i) {
|
|
666
666
|
return Array.from(i.getClientRects());
|
|
667
667
|
}
|
|
668
|
-
function
|
|
669
|
-
const e =
|
|
668
|
+
function Ht(i) {
|
|
669
|
+
const e = E(i), t = be(i), l = i.ownerDocument.body, o = B(e.scrollWidth, e.clientWidth, l.scrollWidth, l.clientWidth), s = B(e.scrollHeight, e.clientHeight, l.scrollHeight, l.clientHeight);
|
|
670
670
|
let n = -t.scrollLeft + ve(i);
|
|
671
671
|
const r = -t.scrollTop;
|
|
672
|
-
return
|
|
673
|
-
width:
|
|
672
|
+
return L(l).direction === "rtl" && (n += B(e.clientWidth, l.clientWidth) - o), {
|
|
673
|
+
width: o,
|
|
674
674
|
height: s,
|
|
675
675
|
x: n,
|
|
676
676
|
y: r
|
|
677
677
|
};
|
|
678
678
|
}
|
|
679
679
|
const Fe = 25;
|
|
680
|
-
function
|
|
681
|
-
const t =
|
|
682
|
-
let s =
|
|
683
|
-
if (
|
|
684
|
-
s =
|
|
680
|
+
function Bt(i, e) {
|
|
681
|
+
const t = P(i), l = E(i), o = t.visualViewport;
|
|
682
|
+
let s = l.clientWidth, n = l.clientHeight, r = 0, a = 0;
|
|
683
|
+
if (o) {
|
|
684
|
+
s = o.width, n = o.height;
|
|
685
685
|
const c = Ie();
|
|
686
|
-
(!c || c && e === "fixed") && (r =
|
|
686
|
+
(!c || c && e === "fixed") && (r = o.offsetLeft, a = o.offsetTop);
|
|
687
687
|
}
|
|
688
|
-
const d = ve(
|
|
688
|
+
const d = ve(l);
|
|
689
689
|
if (d <= 0) {
|
|
690
|
-
const c =
|
|
690
|
+
const c = l.ownerDocument, m = c.body, p = getComputedStyle(m), h = c.compatMode === "CSS1Compat" && parseFloat(p.marginLeft) + parseFloat(p.marginRight) || 0, f = Math.abs(l.clientWidth - m.clientWidth - h);
|
|
691
691
|
f <= Fe && (s -= f);
|
|
692
692
|
} else d <= Fe && (s += d);
|
|
693
693
|
return {
|
|
@@ -697,9 +697,9 @@ function Ht(i, e) {
|
|
|
697
697
|
y: a
|
|
698
698
|
};
|
|
699
699
|
}
|
|
700
|
-
const
|
|
701
|
-
function
|
|
702
|
-
const t = j(i, !0, e === "fixed"),
|
|
700
|
+
const Wt = /* @__PURE__ */ new Set(["absolute", "fixed"]);
|
|
701
|
+
function jt(i, e) {
|
|
702
|
+
const t = j(i, !0, e === "fixed"), l = t.top + i.clientTop, o = t.left + i.clientLeft, s = V(i) ? K(i) : M(1), n = i.clientWidth * s.x, r = i.clientHeight * s.y, a = o * s.x, d = l * s.y;
|
|
703
703
|
return {
|
|
704
704
|
width: n,
|
|
705
705
|
height: r,
|
|
@@ -708,52 +708,52 @@ function Wt(i, e) {
|
|
|
708
708
|
};
|
|
709
709
|
}
|
|
710
710
|
function Ne(i, e, t) {
|
|
711
|
-
let
|
|
711
|
+
let l;
|
|
712
712
|
if (e === "viewport")
|
|
713
|
-
|
|
713
|
+
l = Bt(i, t);
|
|
714
714
|
else if (e === "document")
|
|
715
|
-
|
|
715
|
+
l = Ht(E(i));
|
|
716
716
|
else if (T(e))
|
|
717
|
-
|
|
717
|
+
l = jt(e, t);
|
|
718
718
|
else {
|
|
719
|
-
const
|
|
720
|
-
|
|
721
|
-
x: e.x -
|
|
722
|
-
y: e.y -
|
|
719
|
+
const o = Xe(i);
|
|
720
|
+
l = {
|
|
721
|
+
x: e.x - o.x,
|
|
722
|
+
y: e.y - o.y,
|
|
723
723
|
width: e.width,
|
|
724
724
|
height: e.height
|
|
725
725
|
};
|
|
726
726
|
}
|
|
727
|
-
return pe(
|
|
727
|
+
return pe(l);
|
|
728
728
|
}
|
|
729
|
-
function
|
|
729
|
+
function Qe(i, e) {
|
|
730
730
|
const t = D(i);
|
|
731
|
-
return t === e || !T(t) || Y(t) ? !1 :
|
|
731
|
+
return t === e || !T(t) || Y(t) ? !1 : L(t).position === "fixed" || Qe(t, e);
|
|
732
732
|
}
|
|
733
|
-
function
|
|
733
|
+
function Gt(i, e) {
|
|
734
734
|
const t = e.get(i);
|
|
735
735
|
if (t)
|
|
736
736
|
return t;
|
|
737
|
-
let
|
|
738
|
-
const s =
|
|
737
|
+
let l = Q(i, [], !1).filter((r) => T(r) && q(r) !== "body"), o = null;
|
|
738
|
+
const s = L(i).position === "fixed";
|
|
739
739
|
let n = s ? D(i) : i;
|
|
740
740
|
for (; T(n) && !Y(n); ) {
|
|
741
|
-
const r =
|
|
742
|
-
!a && r.position === "fixed" && (
|
|
741
|
+
const r = L(n), a = Pe(n);
|
|
742
|
+
!a && r.position === "fixed" && (o = null), (s ? !a && !o : !a && r.position === "static" && !!o && Wt.has(o.position) || te(n) && !a && Qe(i, n)) ? l = l.filter((c) => c !== n) : o = r, n = D(n);
|
|
743
743
|
}
|
|
744
|
-
return e.set(i,
|
|
744
|
+
return e.set(i, l), l;
|
|
745
745
|
}
|
|
746
|
-
function
|
|
746
|
+
function Ut(i) {
|
|
747
747
|
let {
|
|
748
748
|
element: e,
|
|
749
749
|
boundary: t,
|
|
750
|
-
rootBoundary:
|
|
751
|
-
strategy:
|
|
750
|
+
rootBoundary: l,
|
|
751
|
+
strategy: o
|
|
752
752
|
} = i;
|
|
753
|
-
const n = [...t === "clippingAncestors" ? ge(e) ? [] :
|
|
754
|
-
const m = Ne(e, c,
|
|
753
|
+
const n = [...t === "clippingAncestors" ? ge(e) ? [] : Gt(e, this._c) : [].concat(t), l], r = n[0], a = n.reduce((d, c) => {
|
|
754
|
+
const m = Ne(e, c, o);
|
|
755
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
|
-
}, Ne(e, r,
|
|
756
|
+
}, Ne(e, r, o));
|
|
757
757
|
return {
|
|
758
758
|
width: a.right - a.left,
|
|
759
759
|
height: a.bottom - a.top,
|
|
@@ -761,7 +761,7 @@ function Gt(i) {
|
|
|
761
761
|
y: a.top
|
|
762
762
|
};
|
|
763
763
|
}
|
|
764
|
-
function
|
|
764
|
+
function Kt(i) {
|
|
765
765
|
const {
|
|
766
766
|
width: e,
|
|
767
767
|
height: t
|
|
@@ -771,23 +771,23 @@ function Ut(i) {
|
|
|
771
771
|
height: t
|
|
772
772
|
};
|
|
773
773
|
}
|
|
774
|
-
function
|
|
775
|
-
const
|
|
774
|
+
function Yt(i, e, t) {
|
|
775
|
+
const l = V(e), o = E(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
780
|
const a = M(0);
|
|
781
781
|
function d() {
|
|
782
|
-
a.x = ve(
|
|
782
|
+
a.x = ve(o);
|
|
783
783
|
}
|
|
784
|
-
if (
|
|
785
|
-
if ((
|
|
784
|
+
if (l || !l && !s)
|
|
785
|
+
if ((q(e) !== "body" || te(o)) && (r = be(e)), l) {
|
|
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
|
|
789
|
-
s && !
|
|
790
|
-
const c =
|
|
788
|
+
} else o && d();
|
|
789
|
+
s && !l && o && d();
|
|
790
|
+
const c = o && !l && !s ? Ze(o, 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
792
|
x: m,
|
|
793
793
|
y: p,
|
|
@@ -795,71 +795,71 @@ function Kt(i, e, t) {
|
|
|
795
795
|
height: n.height
|
|
796
796
|
};
|
|
797
797
|
}
|
|
798
|
-
function
|
|
799
|
-
return
|
|
798
|
+
function ye(i) {
|
|
799
|
+
return L(i).position === "static";
|
|
800
800
|
}
|
|
801
801
|
function He(i, e) {
|
|
802
|
-
if (!
|
|
802
|
+
if (!V(i) || L(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 E(i) === t && (t = t.ownerDocument.body), t;
|
|
808
808
|
}
|
|
809
|
-
function
|
|
810
|
-
const t =
|
|
809
|
+
function et(i, e) {
|
|
810
|
+
const t = P(i);
|
|
811
811
|
if (ge(i))
|
|
812
812
|
return t;
|
|
813
|
-
if (!
|
|
814
|
-
let
|
|
815
|
-
for (;
|
|
816
|
-
if (T(
|
|
817
|
-
return
|
|
818
|
-
|
|
813
|
+
if (!V(i)) {
|
|
814
|
+
let o = D(i);
|
|
815
|
+
for (; o && !Y(o); ) {
|
|
816
|
+
if (T(o) && !ye(o))
|
|
817
|
+
return o;
|
|
818
|
+
o = D(o);
|
|
819
819
|
}
|
|
820
820
|
return t;
|
|
821
821
|
}
|
|
822
|
-
let
|
|
823
|
-
for (;
|
|
824
|
-
|
|
825
|
-
return
|
|
822
|
+
let l = He(i, e);
|
|
823
|
+
for (; l && Tt(l) && ye(l); )
|
|
824
|
+
l = He(l, e);
|
|
825
|
+
return l && Y(l) && ye(l) && !Pe(l) ? t : l || $t(i) || t;
|
|
826
826
|
}
|
|
827
|
-
const
|
|
828
|
-
const e = this.getOffsetParent ||
|
|
827
|
+
const qt = async function(i) {
|
|
828
|
+
const e = this.getOffsetParent || et, t = this.getDimensions, l = await t(i.floating);
|
|
829
829
|
return {
|
|
830
|
-
reference:
|
|
830
|
+
reference: Yt(i.reference, await e(i.floating), i.strategy),
|
|
831
831
|
floating: {
|
|
832
832
|
x: 0,
|
|
833
833
|
y: 0,
|
|
834
|
-
width:
|
|
835
|
-
height:
|
|
834
|
+
width: l.width,
|
|
835
|
+
height: l.height
|
|
836
836
|
}
|
|
837
837
|
};
|
|
838
838
|
};
|
|
839
839
|
function Jt(i) {
|
|
840
|
-
return
|
|
840
|
+
return L(i).direction === "rtl";
|
|
841
841
|
}
|
|
842
842
|
const Xt = {
|
|
843
|
-
convertOffsetParentRelativeRectToViewportRelativeRect:
|
|
844
|
-
getDocumentElement:
|
|
845
|
-
getClippingRect:
|
|
846
|
-
getOffsetParent:
|
|
847
|
-
getElementRects:
|
|
848
|
-
getClientRects:
|
|
849
|
-
getDimensions:
|
|
843
|
+
convertOffsetParentRelativeRectToViewportRelativeRect: Ft,
|
|
844
|
+
getDocumentElement: E,
|
|
845
|
+
getClippingRect: Ut,
|
|
846
|
+
getOffsetParent: et,
|
|
847
|
+
getElementRects: qt,
|
|
848
|
+
getClientRects: Nt,
|
|
849
|
+
getDimensions: Kt,
|
|
850
850
|
getScale: K,
|
|
851
851
|
isElement: T,
|
|
852
852
|
isRTL: Jt
|
|
853
853
|
};
|
|
854
|
-
function
|
|
854
|
+
function tt(i, e) {
|
|
855
855
|
return i.x === e.x && i.y === e.y && i.width === e.width && i.height === e.height;
|
|
856
856
|
}
|
|
857
|
-
function
|
|
858
|
-
let t = null,
|
|
859
|
-
const
|
|
857
|
+
function Zt(i, e) {
|
|
858
|
+
let t = null, l;
|
|
859
|
+
const o = E(i);
|
|
860
860
|
function s() {
|
|
861
861
|
var r;
|
|
862
|
-
clearTimeout(
|
|
862
|
+
clearTimeout(l), (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();
|
|
@@ -871,27 +871,27 @@ function qt(i, e) {
|
|
|
871
871
|
} = d;
|
|
872
872
|
if (r || e(), !p || !h)
|
|
873
873
|
return;
|
|
874
|
-
const f =
|
|
874
|
+
const f = le(m), w = le(o.clientWidth - (c + p)), g = le(o.clientHeight - (m + h)), b = le(c), x = {
|
|
875
875
|
rootMargin: -f + "px " + -w + "px " + -g + "px " + -b + "px",
|
|
876
876
|
threshold: B(0, ae(1, a)) || 1
|
|
877
877
|
};
|
|
878
878
|
let A = !0;
|
|
879
|
-
function S(
|
|
880
|
-
const G =
|
|
879
|
+
function S(J) {
|
|
880
|
+
const G = J[0].intersectionRatio;
|
|
881
881
|
if (G !== a) {
|
|
882
882
|
if (!A)
|
|
883
883
|
return n();
|
|
884
|
-
G ? n(!1, G) :
|
|
884
|
+
G ? n(!1, G) : l = setTimeout(() => {
|
|
885
885
|
n(!1, 1e-7);
|
|
886
886
|
}, 1e3);
|
|
887
887
|
}
|
|
888
|
-
G === 1 && !
|
|
888
|
+
G === 1 && !tt(d, i.getBoundingClientRect()) && n(), A = !1;
|
|
889
889
|
}
|
|
890
890
|
try {
|
|
891
891
|
t = new IntersectionObserver(S, {
|
|
892
892
|
...x,
|
|
893
893
|
// Handle <iframe>s
|
|
894
|
-
root:
|
|
894
|
+
root: o.ownerDocument
|
|
895
895
|
});
|
|
896
896
|
} catch {
|
|
897
897
|
t = new IntersectionObserver(S, x);
|
|
@@ -900,25 +900,25 @@ function qt(i, e) {
|
|
|
900
900
|
}
|
|
901
901
|
return n(!0), s;
|
|
902
902
|
}
|
|
903
|
-
function
|
|
904
|
-
|
|
903
|
+
function oe(i, e, t, l) {
|
|
904
|
+
l === void 0 && (l = {});
|
|
905
905
|
const {
|
|
906
|
-
ancestorScroll:
|
|
906
|
+
ancestorScroll: o = !0,
|
|
907
907
|
ancestorResize: s = !0,
|
|
908
908
|
elementResize: n = typeof ResizeObserver == "function",
|
|
909
909
|
layoutShift: r = typeof IntersectionObserver == "function",
|
|
910
910
|
animationFrame: a = !1
|
|
911
|
-
} =
|
|
911
|
+
} = l, d = Oe(i), c = o || s ? [...d ? Q(d) : [], ...Q(e)] : [];
|
|
912
912
|
c.forEach((b) => {
|
|
913
|
-
|
|
913
|
+
o && b.addEventListener("scroll", t, {
|
|
914
914
|
passive: !0
|
|
915
915
|
}), s && b.addEventListener("resize", t);
|
|
916
916
|
});
|
|
917
|
-
const m = d && r ?
|
|
917
|
+
const m = d && r ? Zt(d, t) : null;
|
|
918
918
|
let p = -1, h = null;
|
|
919
919
|
n && (h = new ResizeObserver((b) => {
|
|
920
|
-
let [
|
|
921
|
-
|
|
920
|
+
let [_] = b;
|
|
921
|
+
_ && _.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();
|
|
@@ -927,36 +927,36 @@ function le(i, e, t, o) {
|
|
|
927
927
|
a && g();
|
|
928
928
|
function g() {
|
|
929
929
|
const b = j(i);
|
|
930
|
-
w && !
|
|
930
|
+
w && !tt(w, b) && t(), w = b, f = requestAnimationFrame(g);
|
|
931
931
|
}
|
|
932
932
|
return t(), () => {
|
|
933
933
|
var b;
|
|
934
|
-
c.forEach((
|
|
935
|
-
|
|
934
|
+
c.forEach((_) => {
|
|
935
|
+
o && _.removeEventListener("scroll", t), s && _.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 =
|
|
940
|
-
const
|
|
939
|
+
const se = At, ne = Pt, xe = Ct, re = (i, e, t) => {
|
|
940
|
+
const l = /* @__PURE__ */ new Map(), o = {
|
|
941
941
|
platform: Xt,
|
|
942
942
|
...t
|
|
943
943
|
}, s = {
|
|
944
|
-
...
|
|
945
|
-
_c:
|
|
944
|
+
...o.platform,
|
|
945
|
+
_c: l
|
|
946
946
|
};
|
|
947
|
-
return
|
|
948
|
-
...
|
|
947
|
+
return xt(i, e, {
|
|
948
|
+
...o,
|
|
949
949
|
platform: s
|
|
950
950
|
});
|
|
951
951
|
};
|
|
952
|
-
var
|
|
953
|
-
},
|
|
952
|
+
var it = function() {
|
|
953
|
+
}, O = "undefined", Qt = typeof window !== O && typeof window.navigator !== O && /Trident\/|MSIE /.test(window.navigator.userAgent), Se = [
|
|
954
954
|
"trace",
|
|
955
955
|
"debug",
|
|
956
956
|
"info",
|
|
957
957
|
"warn",
|
|
958
958
|
"error"
|
|
959
|
-
], ee = {},
|
|
959
|
+
], ee = {}, y = null;
|
|
960
960
|
function Be(i, e) {
|
|
961
961
|
var t = i[e];
|
|
962
962
|
if (typeof t.bind == "function")
|
|
@@ -969,34 +969,34 @@ function Be(i, e) {
|
|
|
969
969
|
};
|
|
970
970
|
}
|
|
971
971
|
}
|
|
972
|
-
function
|
|
972
|
+
function ei() {
|
|
973
973
|
console.log && (console.log.apply ? console.log.apply(console, arguments) : Function.prototype.apply.apply(console.log, [console, arguments])), console.trace && console.trace();
|
|
974
974
|
}
|
|
975
|
-
function
|
|
976
|
-
return i === "debug" && (i = "log"), typeof console ===
|
|
975
|
+
function ti(i) {
|
|
976
|
+
return i === "debug" && (i = "log"), typeof console === O ? !1 : i === "trace" && Qt ? ei : console[i] !== void 0 ? Be(console, i) : console.log !== void 0 ? Be(console, "log") : it;
|
|
977
977
|
}
|
|
978
978
|
function Z() {
|
|
979
979
|
for (var i = this.getLevel(), e = 0; e < Se.length; e++) {
|
|
980
980
|
var t = Se[e];
|
|
981
|
-
this[t] = e < i ?
|
|
981
|
+
this[t] = e < i ? it : this.methodFactory(t, i, this.name);
|
|
982
982
|
}
|
|
983
|
-
if (this.log = this.debug, typeof console ===
|
|
983
|
+
if (this.log = this.debug, typeof console === O && i < this.levels.SILENT)
|
|
984
984
|
return "No console available for logging";
|
|
985
985
|
}
|
|
986
|
-
function
|
|
986
|
+
function ii(i) {
|
|
987
987
|
return function() {
|
|
988
|
-
typeof console !==
|
|
988
|
+
typeof console !== O && (Z.call(this), this[i].apply(this, arguments));
|
|
989
989
|
};
|
|
990
990
|
}
|
|
991
|
-
function
|
|
992
|
-
return
|
|
991
|
+
function li(i, e, t) {
|
|
992
|
+
return ti(i) || ii.apply(this, arguments);
|
|
993
993
|
}
|
|
994
|
-
function
|
|
995
|
-
var t = this,
|
|
994
|
+
function lt(i, e) {
|
|
995
|
+
var t = this, l, o, s, n = "loglevel";
|
|
996
996
|
typeof i == "string" ? n += ":" + i : typeof i == "symbol" && (n = void 0);
|
|
997
997
|
function r(p) {
|
|
998
998
|
var h = (Se[p] || "silent").toUpperCase();
|
|
999
|
-
if (!(typeof window ===
|
|
999
|
+
if (!(typeof window === O || !n)) {
|
|
1000
1000
|
try {
|
|
1001
1001
|
window.localStorage[n] = h;
|
|
1002
1002
|
return;
|
|
@@ -1010,12 +1010,12 @@ function it(i, e) {
|
|
|
1010
1010
|
}
|
|
1011
1011
|
function a() {
|
|
1012
1012
|
var p;
|
|
1013
|
-
if (!(typeof window ===
|
|
1013
|
+
if (!(typeof window === O || !n)) {
|
|
1014
1014
|
try {
|
|
1015
1015
|
p = window.localStorage[n];
|
|
1016
1016
|
} catch {
|
|
1017
1017
|
}
|
|
1018
|
-
if (typeof p ===
|
|
1018
|
+
if (typeof p === O)
|
|
1019
1019
|
try {
|
|
1020
1020
|
var h = window.document.cookie, f = encodeURIComponent(n), w = h.indexOf(f + "=");
|
|
1021
1021
|
w !== -1 && (p = /^([^;]+)/.exec(
|
|
@@ -1027,7 +1027,7 @@ function it(i, e) {
|
|
|
1027
1027
|
}
|
|
1028
1028
|
}
|
|
1029
1029
|
function d() {
|
|
1030
|
-
if (!(typeof window ===
|
|
1030
|
+
if (!(typeof window === O || !n)) {
|
|
1031
1031
|
try {
|
|
1032
1032
|
window.localStorage.removeItem(n);
|
|
1033
1033
|
} catch {
|
|
@@ -1051,12 +1051,12 @@ function it(i, e) {
|
|
|
1051
1051
|
WARN: 3,
|
|
1052
1052
|
ERROR: 4,
|
|
1053
1053
|
SILENT: 5
|
|
1054
|
-
}, t.methodFactory = e ||
|
|
1055
|
-
return s ??
|
|
1054
|
+
}, t.methodFactory = e || li, t.getLevel = function() {
|
|
1055
|
+
return s ?? o ?? l;
|
|
1056
1056
|
}, t.setLevel = function(p, h) {
|
|
1057
1057
|
return s = c(p), h !== !1 && r(s), Z.call(t);
|
|
1058
1058
|
}, t.setDefaultLevel = function(p) {
|
|
1059
|
-
|
|
1059
|
+
o = c(p), a() || t.setLevel(p, !1);
|
|
1060
1060
|
}, t.resetLevel = function() {
|
|
1061
1061
|
s = null, d(), Z.call(t);
|
|
1062
1062
|
}, t.enableAll = function(p) {
|
|
@@ -1064,39 +1064,39 @@ function it(i, e) {
|
|
|
1064
1064
|
}, t.disableAll = function(p) {
|
|
1065
1065
|
t.setLevel(t.levels.SILENT, p);
|
|
1066
1066
|
}, t.rebuild = function() {
|
|
1067
|
-
if (
|
|
1067
|
+
if (y !== t && (l = c(y.getLevel())), Z.call(t), y === t)
|
|
1068
1068
|
for (var p in ee)
|
|
1069
1069
|
ee[p].rebuild();
|
|
1070
|
-
},
|
|
1071
|
-
|
|
1070
|
+
}, l = c(
|
|
1071
|
+
y ? y.getLevel() : "WARN"
|
|
1072
1072
|
);
|
|
1073
1073
|
var m = a();
|
|
1074
1074
|
m != null && (s = c(m)), Z.call(t);
|
|
1075
1075
|
}
|
|
1076
|
-
|
|
1077
|
-
|
|
1076
|
+
y = new lt();
|
|
1077
|
+
y.getLogger = function(e) {
|
|
1078
1078
|
if (typeof e != "symbol" && typeof e != "string" || e === "")
|
|
1079
1079
|
throw new TypeError("You must supply a name when creating a logger.");
|
|
1080
1080
|
var t = ee[e];
|
|
1081
|
-
return t || (t = ee[e] = new
|
|
1081
|
+
return t || (t = ee[e] = new lt(
|
|
1082
1082
|
e,
|
|
1083
|
-
|
|
1083
|
+
y.methodFactory
|
|
1084
1084
|
)), t;
|
|
1085
1085
|
};
|
|
1086
|
-
var oi = typeof window !==
|
|
1087
|
-
|
|
1088
|
-
return typeof window !==
|
|
1086
|
+
var oi = typeof window !== O ? window.log : void 0;
|
|
1087
|
+
y.noConflict = function() {
|
|
1088
|
+
return typeof window !== O && window.log === y && (window.log = oi), y;
|
|
1089
1089
|
};
|
|
1090
|
-
|
|
1090
|
+
y.getLoggers = function() {
|
|
1091
1091
|
return ee;
|
|
1092
1092
|
};
|
|
1093
|
-
|
|
1094
|
-
var
|
|
1095
|
-
for (var e = 1, t = arguments.length,
|
|
1096
|
-
for (
|
|
1097
|
-
Object.prototype.hasOwnProperty.call(arguments[e],
|
|
1093
|
+
y.default = y;
|
|
1094
|
+
var si = function(i) {
|
|
1095
|
+
for (var e = 1, t = arguments.length, l; e < t; e++)
|
|
1096
|
+
for (l in arguments[e])
|
|
1097
|
+
Object.prototype.hasOwnProperty.call(arguments[e], l) && (i[l] = arguments[e][l]);
|
|
1098
1098
|
return i;
|
|
1099
|
-
},
|
|
1099
|
+
}, ni = {
|
|
1100
1100
|
template: "[%t] %l:",
|
|
1101
1101
|
levelFormatter: function(i) {
|
|
1102
1102
|
return i.toUpperCase();
|
|
@@ -1108,32 +1108,32 @@ var li = function(i) {
|
|
|
1108
1108
|
return i.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
|
|
1109
1109
|
},
|
|
1110
1110
|
format: void 0
|
|
1111
|
-
}, ot, N = {},
|
|
1111
|
+
}, ot, N = {}, ri = function(i) {
|
|
1112
1112
|
if (!i || !i.getLogger)
|
|
1113
1113
|
throw new TypeError("Argument is not a root logger");
|
|
1114
1114
|
ot = i;
|
|
1115
|
-
},
|
|
1115
|
+
}, ai = function(i, e) {
|
|
1116
1116
|
if (!i || !i.setLevel)
|
|
1117
1117
|
throw new TypeError("Argument is not a logger");
|
|
1118
|
-
var t = i.methodFactory,
|
|
1118
|
+
var t = i.methodFactory, l = i.name || "", o = N[l] || N[""] || ni;
|
|
1119
1119
|
function s(n, r, a) {
|
|
1120
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
|
-
if (
|
|
1125
|
-
var
|
|
1126
|
-
c.format ? f += c.format(x, A,
|
|
1124
|
+
if (l || !N[a]) {
|
|
1125
|
+
var _ = c.timestampFormatter(/* @__PURE__ */ new Date()), x = c.levelFormatter(n), A = c.nameFormatter(a);
|
|
1126
|
+
c.format ? f += c.format(x, A, _) : (f += c.template, m && (f = f.replace(/%t/, _)), 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
|
-
return N[
|
|
1131
|
+
return N[l] || (i.methodFactory = s), e = e || {}, e.template && (e.format = void 0), N[l] = si({}, o, e), i.setLevel(i.getLevel()), ot || i.warn(
|
|
1132
1132
|
"It is necessary to call the function reg() of loglevel-plugin-prefix before calling apply. From the next release, it will throw an error. See more: https://github.com/kutuluk/loglevel-plugin-prefix/blob/master/README.md"
|
|
1133
1133
|
), i;
|
|
1134
1134
|
}, Te = {
|
|
1135
|
-
reg:
|
|
1136
|
-
apply:
|
|
1135
|
+
reg: ri,
|
|
1136
|
+
apply: ai
|
|
1137
1137
|
};
|
|
1138
1138
|
const he = {
|
|
1139
1139
|
debug: "#0ea5e9",
|
|
@@ -1145,8 +1145,8 @@ const he = {
|
|
|
1145
1145
|
error: "#ef4444"
|
|
1146
1146
|
// Red
|
|
1147
1147
|
};
|
|
1148
|
-
Te.reg(
|
|
1149
|
-
Te.apply(
|
|
1148
|
+
Te.reg(y);
|
|
1149
|
+
Te.apply(y, {
|
|
1150
1150
|
format(i, e, t) {
|
|
1151
1151
|
return he[i.toLowerCase()], `%c[${t}]%c %c[${i}]%c ${e ? `%c[${e}]%c ` : ""}`;
|
|
1152
1152
|
},
|
|
@@ -1154,13 +1154,13 @@ Te.apply(_, {
|
|
|
1154
1154
|
return i.toTimeString().split(" ")[0] + "." + i.getMilliseconds().toString().padStart(3, "0");
|
|
1155
1155
|
}
|
|
1156
1156
|
});
|
|
1157
|
-
const
|
|
1158
|
-
|
|
1159
|
-
const
|
|
1160
|
-
return function(...
|
|
1161
|
-
if (
|
|
1157
|
+
const ci = y.methodFactory;
|
|
1158
|
+
y.methodFactory = function(i, e, t) {
|
|
1159
|
+
const l = ci(i, e, t);
|
|
1160
|
+
return function(...o) {
|
|
1161
|
+
if (o.length > 0 && typeof o[0] == "string" && o[0].includes("%c")) {
|
|
1162
1162
|
const s = he[i] || "#666", n = [
|
|
1163
|
-
|
|
1163
|
+
o[0],
|
|
1164
1164
|
`color: ${s}; font-weight: bold;`,
|
|
1165
1165
|
// timestamp color
|
|
1166
1166
|
"color: inherit;",
|
|
@@ -1175,27 +1175,27 @@ _.methodFactory = function(i, e, t) {
|
|
|
1175
1175
|
"color: inherit;"
|
|
1176
1176
|
// reset
|
|
1177
1177
|
] : [],
|
|
1178
|
-
...
|
|
1178
|
+
...o.slice(1)
|
|
1179
1179
|
];
|
|
1180
|
-
|
|
1180
|
+
l(...n);
|
|
1181
1181
|
} else
|
|
1182
|
-
|
|
1182
|
+
l(...o);
|
|
1183
1183
|
};
|
|
1184
1184
|
};
|
|
1185
|
-
|
|
1186
|
-
const H =
|
|
1185
|
+
y.setLevel("silent");
|
|
1186
|
+
const H = y.getLogger("INIT"), C = y.getLogger("DATA"), v = y.getLogger("UI"), k = y.getLogger("INTERACTION");
|
|
1187
1187
|
[H, C, v, k].forEach((i) => {
|
|
1188
1188
|
Te.apply(i, {
|
|
1189
|
-
format(t,
|
|
1190
|
-
return he[t.toLowerCase()], `%c[${
|
|
1189
|
+
format(t, l, o) {
|
|
1190
|
+
return he[t.toLowerCase()], `%c[${o}]%c %c[${t}]%c %c[${l}]%c `;
|
|
1191
1191
|
},
|
|
1192
1192
|
timestampFormatter(t) {
|
|
1193
1193
|
return t.toTimeString().split(" ")[0] + "." + t.getMilliseconds().toString().padStart(3, "0");
|
|
1194
1194
|
}
|
|
1195
1195
|
});
|
|
1196
1196
|
const e = i.methodFactory;
|
|
1197
|
-
i.methodFactory = function(t,
|
|
1198
|
-
const s = e(t,
|
|
1197
|
+
i.methodFactory = function(t, l, o) {
|
|
1198
|
+
const s = e(t, l, o);
|
|
1199
1199
|
return function(...n) {
|
|
1200
1200
|
if (n.length > 0 && typeof n[0] == "string" && n[0].includes("%c")) {
|
|
1201
1201
|
const r = he[t] || "#666", a = [
|
|
@@ -1217,12 +1217,12 @@ const H = _.getLogger("INIT"), C = _.getLogger("DATA"), v = _.getLogger("UI"), k
|
|
|
1217
1217
|
};
|
|
1218
1218
|
}, i.setLevel("silent");
|
|
1219
1219
|
});
|
|
1220
|
-
const
|
|
1221
|
-
|
|
1220
|
+
const st = (i) => {
|
|
1221
|
+
y.setLevel(i), H.setLevel(i), C.setLevel(i), v.setLevel(i), k.setLevel(i);
|
|
1222
1222
|
}, ui = () => {
|
|
1223
|
-
|
|
1223
|
+
st("debug");
|
|
1224
1224
|
}, fi = () => {
|
|
1225
|
-
|
|
1225
|
+
st("silent");
|
|
1226
1226
|
}, gi = (i, e = "debug") => {
|
|
1227
1227
|
({
|
|
1228
1228
|
INIT: H,
|
|
@@ -1231,7 +1231,7 @@ const lt = (i) => {
|
|
|
1231
1231
|
INTERACTION: k
|
|
1232
1232
|
})[i].setLevel(e);
|
|
1233
1233
|
};
|
|
1234
|
-
class
|
|
1234
|
+
class We {
|
|
1235
1235
|
constructor(e) {
|
|
1236
1236
|
u(this, "container");
|
|
1237
1237
|
u(this, "wrapper");
|
|
@@ -1280,8 +1280,8 @@ class ci {
|
|
|
1280
1280
|
* Calculate visible range based on scroll position
|
|
1281
1281
|
*/
|
|
1282
1282
|
calculateVisibleRange() {
|
|
1283
|
-
const e = Math.floor(this.scrollTop / this.itemHeight), t = Math.ceil((this.scrollTop + this.viewportHeight) / this.itemHeight),
|
|
1284
|
-
return { start:
|
|
1283
|
+
const e = Math.floor(this.scrollTop / this.itemHeight), t = Math.ceil((this.scrollTop + this.viewportHeight) / this.itemHeight), l = Math.max(0, e - this.bufferSize), o = Math.min(this.items.length, t + this.bufferSize);
|
|
1284
|
+
return { start: l, end: o };
|
|
1285
1285
|
}
|
|
1286
1286
|
/**
|
|
1287
1287
|
* Render visible items
|
|
@@ -1291,12 +1291,12 @@ class ci {
|
|
|
1291
1291
|
if (e === this.visibleStart && t === this.visibleEnd)
|
|
1292
1292
|
return;
|
|
1293
1293
|
this.visibleStart = e, this.visibleEnd = t, this.onVisibleRangeChange && this.onVisibleRangeChange(e, t);
|
|
1294
|
-
let
|
|
1295
|
-
for (let
|
|
1296
|
-
const s = this.items[
|
|
1297
|
-
|
|
1294
|
+
let l = "";
|
|
1295
|
+
for (let o = e; o < t; o++) {
|
|
1296
|
+
const s = this.items[o], n = this.renderItem(s, o), r = o * this.itemHeight;
|
|
1297
|
+
l += `<div class="ml__virtual-item" style="position: absolute; top: ${r}px; left: 0; right: 0; height: ${this.itemHeight}px;" data-index="${o}">`, l += n, l += "</div>";
|
|
1298
1298
|
}
|
|
1299
|
-
this.viewport.innerHTML =
|
|
1299
|
+
this.viewport.innerHTML = l;
|
|
1300
1300
|
}
|
|
1301
1301
|
/**
|
|
1302
1302
|
* Update items and re-render
|
|
@@ -1381,6 +1381,8 @@ class di {
|
|
|
1381
1381
|
// Virtual scroll instance
|
|
1382
1382
|
u(this, "virtualScroll", null);
|
|
1383
1383
|
u(this, "optionsContainer", null);
|
|
1384
|
+
u(this, "selectedPopoverVirtualScroll", null);
|
|
1385
|
+
u(this, "selectedPopoverContainer", null);
|
|
1384
1386
|
// DOM elements
|
|
1385
1387
|
u(this, "input");
|
|
1386
1388
|
u(this, "dropdown");
|
|
@@ -1517,12 +1519,12 @@ class di {
|
|
|
1517
1519
|
this.filteredOptions = [...this.allOptions];
|
|
1518
1520
|
}
|
|
1519
1521
|
buildHTML() {
|
|
1520
|
-
const e = this.options.container || document.body, t = this.element.getRootNode(),
|
|
1521
|
-
this.isRTL =
|
|
1522
|
+
const e = this.options.container || document.body, t = this.element.getRootNode(), l = t instanceof ShadowRoot ? t.host : this.element, o = l.getAttribute("dir") === "rtl", s = l.closest('[dir="rtl"]') !== null;
|
|
1523
|
+
this.isRTL = o || s, H.debug(`[${this.instanceId}] RTL Debug:`, {
|
|
1522
1524
|
isShadowRoot: t instanceof ShadowRoot,
|
|
1523
|
-
hostElement:
|
|
1524
|
-
elementDir:
|
|
1525
|
-
hasElementDir:
|
|
1525
|
+
hostElement: l,
|
|
1526
|
+
elementDir: l.getAttribute("dir"),
|
|
1527
|
+
hasElementDir: o,
|
|
1526
1528
|
hasAncestorDir: s,
|
|
1527
1529
|
isRTL: this.isRTL
|
|
1528
1530
|
}), 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");
|
|
@@ -1569,14 +1571,14 @@ class di {
|
|
|
1569
1571
|
e += `<div class="ml__empty">${this.options.emptyMessage}</div>`;
|
|
1570
1572
|
else if (this.options.isGroupsAllowed) {
|
|
1571
1573
|
const t = this.groupOptions(this.filteredOptions);
|
|
1572
|
-
Object.keys(t).forEach((
|
|
1573
|
-
e += '<div class="ml__group">',
|
|
1574
|
-
e += this.renderOption(
|
|
1574
|
+
Object.keys(t).forEach((l) => {
|
|
1575
|
+
e += '<div class="ml__group">', l !== "__ungrouped__" && (e += `<div class="ml__group-label">${l}</div>`), t[l].forEach((o, s) => {
|
|
1576
|
+
e += this.renderOption(o, s);
|
|
1575
1577
|
}), e += "</div>";
|
|
1576
1578
|
});
|
|
1577
1579
|
} else
|
|
1578
|
-
this.filteredOptions.forEach((t,
|
|
1579
|
-
e += this.renderOption(t,
|
|
1580
|
+
this.filteredOptions.forEach((t, l) => {
|
|
1581
|
+
e += this.renderOption(t, l);
|
|
1580
1582
|
});
|
|
1581
1583
|
e += "</div>", this.dropdown.innerHTML = e;
|
|
1582
1584
|
}
|
|
@@ -1585,13 +1587,13 @@ class di {
|
|
|
1585
1587
|
*/
|
|
1586
1588
|
renderDropdownVirtual() {
|
|
1587
1589
|
if (!this.virtualScroll) {
|
|
1588
|
-
let
|
|
1590
|
+
let l = "";
|
|
1589
1591
|
if (this.options.isMultipleEnabled && (this.options.isSelectAllAllowed || this.options.isClearAllAllowed)) {
|
|
1590
1592
|
const s = this.options.isActionsSticky ? " ml__actions--sticky" : "";
|
|
1591
|
-
|
|
1593
|
+
l += `<div class="ml__actions${s}">`, this.options.isSelectAllAllowed && (l += '<button type="button" class="ml__action-btn" data-action="select-all">Select All</button>'), this.options.isClearAllAllowed && (l += '<button type="button" class="ml__action-btn" data-action="clear-all">Clear All</button>'), l += "</div>";
|
|
1592
1594
|
}
|
|
1593
|
-
const
|
|
1594
|
-
|
|
1595
|
+
const o = this.options.maxHeight || "20rem";
|
|
1596
|
+
l += `<div class="ml__options ml__options--virtual" style="height: ${o}; max-height: ${o}; overflow-y: auto; position: relative;"></div>`, this.dropdown.innerHTML = l, this.optionsContainer = this.dropdown.querySelector(".ml__options");
|
|
1595
1597
|
}
|
|
1596
1598
|
if (this.filteredOptions.length === 0) {
|
|
1597
1599
|
this.optionsContainer.innerHTML = `<div class="ml__empty">${this.options.emptyMessage}</div>`;
|
|
@@ -1599,31 +1601,31 @@ class di {
|
|
|
1599
1601
|
}
|
|
1600
1602
|
const e = this.options.optionHeight ?? 50, t = this.options.virtualScrollBuffer ?? 10;
|
|
1601
1603
|
requestAnimationFrame(() => {
|
|
1602
|
-
this.optionsContainer && (this.virtualScroll ? this.virtualScroll.setItems(this.filteredOptions) : this.virtualScroll = new
|
|
1604
|
+
this.optionsContainer && (this.virtualScroll ? this.virtualScroll.setItems(this.filteredOptions) : this.virtualScroll = new We({
|
|
1603
1605
|
container: this.optionsContainer,
|
|
1604
1606
|
itemHeight: e,
|
|
1605
1607
|
items: this.filteredOptions,
|
|
1606
|
-
renderItem: (
|
|
1608
|
+
renderItem: (l, o) => this.renderOption(l, o),
|
|
1607
1609
|
bufferSize: t
|
|
1608
1610
|
}));
|
|
1609
1611
|
});
|
|
1610
1612
|
}
|
|
1611
1613
|
renderOption(e, t) {
|
|
1612
|
-
const
|
|
1614
|
+
const l = this.getItemValue(e), o = this.getItemDisplayValue(e), s = this.getItemIcon(e), n = this.getItemSubtitle(e), r = this.getItemDisabled(e), a = this.selectedValues.has(String(l)), d = t === this.focusedIndex, c = this.matchingIndices.has(t), m = ["ml__option"];
|
|
1613
1615
|
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="${
|
|
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(
|
|
1616
|
+
let p = `<div class="${m.join(" ")}" data-value="${l}" data-index="${t}">`;
|
|
1617
|
+
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(o, this.searchTerm)}</div>`, n && (p += `<div class="ml__option-subtitle">${n}</div>`), p += "</div>", p += "</div>", p += "</div>", p;
|
|
1616
1618
|
}
|
|
1617
1619
|
highlightMatch(e, t) {
|
|
1618
1620
|
if (!t) return e;
|
|
1619
|
-
const
|
|
1620
|
-
return e.replace(
|
|
1621
|
+
const l = new RegExp(`(${t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
|
|
1622
|
+
return e.replace(l, "<mark>$1</mark>");
|
|
1621
1623
|
}
|
|
1622
1624
|
groupOptions(e) {
|
|
1623
1625
|
const t = {};
|
|
1624
|
-
return e.forEach((
|
|
1625
|
-
const
|
|
1626
|
-
t[
|
|
1626
|
+
return e.forEach((l) => {
|
|
1627
|
+
const o = this.getItemGroup(l) || "__ungrouped__";
|
|
1628
|
+
t[o] || (t[o] = []), t[o].push(l);
|
|
1627
1629
|
}), t;
|
|
1628
1630
|
}
|
|
1629
1631
|
renderPills() {
|
|
@@ -1641,14 +1643,18 @@ class di {
|
|
|
1641
1643
|
}), !this.isOpen && t > 0 && e.length > 0 ? (v.info(`[${this.instanceId}] ✅ SETTING input.value = "${s}"`), this.input.value = s, v.info(`[${this.instanceId}] 🔍 VERIFY input.value = "${this.input.value}"`)) : this.isOpen ? v.info(`[${this.instanceId}] ⏭️ SKIPPING input update (dropdown is open)`) : (v.info(`[${this.instanceId}] ❌ CLEARING input.value (no selection)`), this.input.value = "");
|
|
1642
1644
|
return;
|
|
1643
1645
|
}
|
|
1644
|
-
let
|
|
1645
|
-
if (this.options.pillsThreshold !== null && t > this.options.pillsThreshold && (
|
|
1646
|
-
if (t > 0 &&
|
|
1646
|
+
let l = this.options.pillsDisplayMode;
|
|
1647
|
+
if (this.options.pillsThreshold !== null && t > this.options.pillsThreshold && l !== "none" && (l = this.options.pillsThresholdMode || "count"), !this.isOpen)
|
|
1648
|
+
if (t > 0 && l === "count") {
|
|
1647
1649
|
const s = this.options.getCountPillCallback ? this.options.getCountPillCallback(t) : `${t} selected`;
|
|
1648
1650
|
this.input.placeholder = s;
|
|
1649
1651
|
} else
|
|
1650
1652
|
this.input.placeholder = this.options.searchPlaceholder;
|
|
1651
|
-
if (this.options.isCountBadgeShown && t > 0 ? (this.countBadge.textContent = `[${t}]`, this.countBadge.style.display = "") : this.countBadge.style.display = "none",
|
|
1653
|
+
if (this.options.isCountBadgeShown && t > 0 ? (this.countBadge.textContent = `[${t}]`, this.countBadge.style.display = "") : this.countBadge.style.display = "none", l === "none") {
|
|
1654
|
+
this.pillsContainer.innerHTML = "";
|
|
1655
|
+
return;
|
|
1656
|
+
}
|
|
1657
|
+
if (l === "pills")
|
|
1652
1658
|
this.pillsContainer.className = `ml__pills ml__pills--${this.effectivePillsPosition}`, this.pillsContainer.innerHTML = e.map((s) => {
|
|
1653
1659
|
const n = this.getItemValue(s), r = this.getItemPillDisplayValue(s);
|
|
1654
1660
|
return `
|
|
@@ -1658,7 +1664,7 @@ class di {
|
|
|
1658
1664
|
</div>
|
|
1659
1665
|
`;
|
|
1660
1666
|
}).join("");
|
|
1661
|
-
else if (
|
|
1667
|
+
else if (l === "partial") {
|
|
1662
1668
|
this.pillsContainer.className = `ml__pills ml__pills--${this.effectivePillsPosition}`;
|
|
1663
1669
|
const s = this.options.pillsMaxVisible || 3, n = e.slice(0, s), r = t - s, a = n.map((c) => {
|
|
1664
1670
|
const m = this.getItemValue(c), p = this.getItemPillDisplayValue(c);
|
|
@@ -1671,19 +1677,33 @@ class di {
|
|
|
1671
1677
|
}).join("");
|
|
1672
1678
|
let d = "";
|
|
1673
1679
|
r > 0 && (d = `
|
|
1674
|
-
<div class="ml__pill ml__pill--more" data-action="show-selected">
|
|
1680
|
+
<div class="ml__pill ml__pill--indicator ml__pill--more" data-action="show-selected">
|
|
1675
1681
|
<span class="ml__pill-text">${this.options.getCountPillCallback ? this.options.getCountPillCallback(t, r) : `+${r} more`}</span>
|
|
1676
1682
|
<button type="button" class="ml__pill-remove" data-action="remove-hidden" aria-label="Remove ${r} hidden items"></button>
|
|
1677
1683
|
</div>
|
|
1678
1684
|
`), this.pillsContainer.innerHTML = a + d;
|
|
1679
|
-
} else if (
|
|
1685
|
+
} else if (l === "compact")
|
|
1686
|
+
if (this.pillsContainer.className = `ml__pills ml__pills--${this.effectivePillsPosition}`, t > 0) {
|
|
1687
|
+
const s = e[0], n = this.getItemPillDisplayValue(s), r = t - 1;
|
|
1688
|
+
let a = n;
|
|
1689
|
+
if (r > 0) {
|
|
1690
|
+
const d = this.options.getCountPillCallback ? this.options.getCountPillCallback(t, r) : `+${r} more`;
|
|
1691
|
+
a = `${n} (${d})`;
|
|
1692
|
+
}
|
|
1693
|
+
this.pillsContainer.innerHTML = `
|
|
1694
|
+
<div class="ml__pill ml__pill--indicator" data-action="show-selected">
|
|
1695
|
+
<span class="ml__pill-text">${a}</span>
|
|
1696
|
+
<button type="button" class="ml__pill-remove" data-action="clear-count" aria-label="Clear all selections"></button>
|
|
1697
|
+
</div>
|
|
1698
|
+
`;
|
|
1699
|
+
} else
|
|
1700
|
+
this.pillsContainer.innerHTML = "";
|
|
1701
|
+
else if (this.pillsContainer.className = `ml__pills ml__pills--${this.effectivePillsPosition}`, t > 0) {
|
|
1680
1702
|
const s = this.options.getCountPillCallback ? this.options.getCountPillCallback(t) : `${t} selected`;
|
|
1681
1703
|
this.pillsContainer.innerHTML = `
|
|
1682
|
-
<div class="
|
|
1683
|
-
<
|
|
1684
|
-
|
|
1685
|
-
</button>
|
|
1686
|
-
<button type="button" class="ml__count-clear" data-action="clear-count" aria-label="Clear all selections"></button>
|
|
1704
|
+
<div class="ml__pill ml__pill--indicator" data-action="show-selected">
|
|
1705
|
+
<span class="ml__pill-text">${s}</span>
|
|
1706
|
+
<button type="button" class="ml__pill-remove" data-action="clear-count" aria-label="Clear all selections"></button>
|
|
1687
1707
|
</div>
|
|
1688
1708
|
`;
|
|
1689
1709
|
} else
|
|
@@ -1705,10 +1725,10 @@ class di {
|
|
|
1705
1725
|
}, 0), this.dropdown.addEventListener("click", (e) => this.handleDropdownClick(e)), this.dropdown.addEventListener("wheel", (e) => {
|
|
1706
1726
|
if (this.virtualScroll)
|
|
1707
1727
|
return;
|
|
1708
|
-
const t = e.currentTarget,
|
|
1709
|
-
(e.deltaY < 0 &&
|
|
1728
|
+
const t = e.currentTarget, l = t.scrollTop === 0, o = t.scrollTop + t.clientHeight >= t.scrollHeight;
|
|
1729
|
+
(e.deltaY < 0 && l || e.deltaY > 0 && o) && e.preventDefault(), e.stopPropagation();
|
|
1710
1730
|
}, { passive: !1 }), this.pillsContainer.addEventListener("mousedown", (e) => {
|
|
1711
|
-
e.target.closest("
|
|
1731
|
+
e.target.closest('[data-action="show-selected"]') && !this.showSelectedPopover && e.stopPropagation();
|
|
1712
1732
|
}), this.pillsContainer.addEventListener("click", (e) => this.handlePillClick(e)), this.countBadge.addEventListener("mousedown", (e) => {
|
|
1713
1733
|
this.showSelectedPopover || e.stopPropagation();
|
|
1714
1734
|
}), this.countBadge.addEventListener("click", (e) => {
|
|
@@ -1720,12 +1740,12 @@ class di {
|
|
|
1720
1740
|
return;
|
|
1721
1741
|
let t = e;
|
|
1722
1742
|
if (this.options.beforeSearchCallback) {
|
|
1723
|
-
const
|
|
1724
|
-
if (
|
|
1743
|
+
const l = this.options.beforeSearchCallback(e);
|
|
1744
|
+
if (l === null) {
|
|
1725
1745
|
C.debug(`[${this.instanceId}] beforeSearchCallback blocked search for term:`, e), this.filteredOptions = [...this.allOptions], this.matchingIndices.clear(), this.renderDropdown();
|
|
1726
1746
|
return;
|
|
1727
1747
|
}
|
|
1728
|
-
t =
|
|
1748
|
+
t = l, t !== e && C.debug(`[${this.instanceId}] beforeSearchCallback transformed: "${e}" -> "${t}"`);
|
|
1729
1749
|
}
|
|
1730
1750
|
if (this.options.searchCallback) {
|
|
1731
1751
|
if (t.length < this.options.minSearchLength) {
|
|
@@ -1734,26 +1754,26 @@ class di {
|
|
|
1734
1754
|
}
|
|
1735
1755
|
this.isLoading = !0, this.renderDropdown(), C.debug(`[${this.instanceId}] Loading data for search term:`, t);
|
|
1736
1756
|
try {
|
|
1737
|
-
const
|
|
1757
|
+
const l = await this.options.searchCallback(t);
|
|
1738
1758
|
if (this.searchTerm === e) {
|
|
1739
|
-
const
|
|
1740
|
-
this.filteredOptions = [...
|
|
1759
|
+
const o = l || [];
|
|
1760
|
+
this.filteredOptions = [...o], this.isLoading = !1, this.matchingIndices.clear(), this.focusedIndex = this.options.isSearchEnabled && this.filteredOptions.length > 0 ? 0 : -1, this.renderDropdown(), C.debug(`[${this.instanceId}] Loaded ${o.length} results`);
|
|
1741
1761
|
}
|
|
1742
|
-
} catch (
|
|
1743
|
-
C.error(`[${this.instanceId}] Error loading data:`,
|
|
1762
|
+
} catch (l) {
|
|
1763
|
+
C.error(`[${this.instanceId}] Error loading data:`, l), this.isLoading = !1, this.options.isKeepOptionsOnSearch ? this.filteredOptions = [...this.allOptions] : this.filteredOptions = [], this.matchingIndices.clear(), this.renderDropdown();
|
|
1744
1764
|
}
|
|
1745
1765
|
} else {
|
|
1746
1766
|
if (!t)
|
|
1747
1767
|
this.filteredOptions = [...this.allOptions], this.matchingIndices.clear(), this.focusedIndex = this.filteredOptions.length > 0 ? 0 : -1;
|
|
1748
1768
|
else {
|
|
1749
|
-
const
|
|
1750
|
-
if (
|
|
1751
|
-
this.filteredOptions = this.allOptions.filter((s) => this.getItemSearchValue(s).toLowerCase().includes(
|
|
1769
|
+
const l = this.options.searchMode || "filter", o = t.toLowerCase();
|
|
1770
|
+
if (l === "filter")
|
|
1771
|
+
this.filteredOptions = this.allOptions.filter((s) => this.getItemSearchValue(s).toLowerCase().includes(o)), this.matchingIndices.clear(), this.focusedIndex = this.filteredOptions.length > 0 ? 0 : -1, C.debug(`[${this.instanceId}] Filter mode: ${this.filteredOptions.length} matches for "${t}"`);
|
|
1752
1772
|
else {
|
|
1753
1773
|
this.filteredOptions = [...this.allOptions], this.matchingIndices.clear();
|
|
1754
1774
|
let s = -1;
|
|
1755
1775
|
this.allOptions.forEach((n, r) => {
|
|
1756
|
-
this.getItemSearchValue(n).toLowerCase().includes(
|
|
1776
|
+
this.getItemSearchValue(n).toLowerCase().includes(o) && (this.matchingIndices.add(r), s === -1 && (s = r));
|
|
1757
1777
|
}), 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`);
|
|
1758
1778
|
}
|
|
1759
1779
|
}
|
|
@@ -1766,8 +1786,8 @@ class di {
|
|
|
1766
1786
|
return;
|
|
1767
1787
|
}
|
|
1768
1788
|
if (!this.options.isSearchEnabled) {
|
|
1769
|
-
const t = e.key.length === 1 || e.key === "Backspace" || e.key === "Delete",
|
|
1770
|
-
if (t && !
|
|
1789
|
+
const t = e.key.length === 1 || e.key === "Backspace" || e.key === "Delete", l = ["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", "Enter", "Escape", "Tab"].includes(e.key);
|
|
1790
|
+
if (t && !l) {
|
|
1771
1791
|
e.preventDefault();
|
|
1772
1792
|
return;
|
|
1773
1793
|
}
|
|
@@ -1807,39 +1827,39 @@ class di {
|
|
|
1807
1827
|
const t = e.target.closest("[data-action]");
|
|
1808
1828
|
if (t) {
|
|
1809
1829
|
e.preventDefault();
|
|
1810
|
-
const
|
|
1811
|
-
k.debug(`[${this.instanceId}] Action button clicked:`,
|
|
1830
|
+
const o = t.dataset.action;
|
|
1831
|
+
k.debug(`[${this.instanceId}] Action button clicked:`, o), o === "select-all" ? this.selectAll() : o === "clear-all" && this.clearAll();
|
|
1812
1832
|
return;
|
|
1813
1833
|
}
|
|
1814
|
-
const
|
|
1815
|
-
if (
|
|
1834
|
+
const l = e.target.closest(".ml__option");
|
|
1835
|
+
if (l && !l.classList.contains("ml__option--disabled")) {
|
|
1816
1836
|
e.preventDefault();
|
|
1817
|
-
const
|
|
1837
|
+
const o = l.dataset.value, s = this.filteredOptions.find((n) => String(this.getItemValue(n)) === o);
|
|
1818
1838
|
k.debug(`[${this.instanceId}] Option clicked:`, {
|
|
1819
|
-
value:
|
|
1839
|
+
value: o,
|
|
1820
1840
|
closeOnSelect: this.options.isCloseOnSelect,
|
|
1821
1841
|
placeholder: this.options.searchPlaceholder
|
|
1822
1842
|
}), s && this.toggleOption(s);
|
|
1823
1843
|
}
|
|
1824
1844
|
}
|
|
1825
1845
|
handlePillClick(e) {
|
|
1826
|
-
if (e.target.closest("
|
|
1827
|
-
e.preventDefault(), e.stopPropagation(), k.debug(`[${this.instanceId}]
|
|
1846
|
+
if (e.target.closest('[data-action="clear-count"]')) {
|
|
1847
|
+
e.preventDefault(), e.stopPropagation(), k.debug(`[${this.instanceId}] Clear count button clicked`), this.clearAll();
|
|
1828
1848
|
return;
|
|
1829
1849
|
}
|
|
1830
|
-
if (e.target.closest("
|
|
1850
|
+
if (e.target.closest('[data-action="show-selected"]')) {
|
|
1831
1851
|
e.preventDefault(), e.stopPropagation(), this.toggleSelectedPopover();
|
|
1832
1852
|
return;
|
|
1833
1853
|
}
|
|
1834
|
-
const
|
|
1835
|
-
if (
|
|
1836
|
-
if (e.preventDefault(), e.stopPropagation(),
|
|
1854
|
+
const o = e.target.closest(".ml__pill-remove");
|
|
1855
|
+
if (o) {
|
|
1856
|
+
if (e.preventDefault(), e.stopPropagation(), o.dataset.action === "remove-hidden") {
|
|
1837
1857
|
k.debug(`[${this.instanceId}] Remove hidden items button clicked`);
|
|
1838
1858
|
const a = this.options.pillsMaxVisible || 3;
|
|
1839
1859
|
Array.from(this.selectedOptions.values()).slice(a).forEach((m) => this.deselectOption(m));
|
|
1840
1860
|
return;
|
|
1841
1861
|
}
|
|
1842
|
-
const n =
|
|
1862
|
+
const n = o.dataset.value, r = this.selectedOptions.get(n);
|
|
1843
1863
|
r && this.deselectOption(r);
|
|
1844
1864
|
return;
|
|
1845
1865
|
}
|
|
@@ -1849,28 +1869,28 @@ class di {
|
|
|
1849
1869
|
}
|
|
1850
1870
|
}
|
|
1851
1871
|
handleClickOutside(e) {
|
|
1852
|
-
var
|
|
1872
|
+
var o;
|
|
1853
1873
|
const t = e.composedPath();
|
|
1854
1874
|
if (this.showSelectedPopover && !t.some(
|
|
1855
|
-
(n) => n instanceof Node && (this.selectedPopover.contains(n) || this.countBadge.contains(n) || n.closest && n.closest("
|
|
1875
|
+
(n) => n instanceof Node && (this.selectedPopover.contains(n) || this.countBadge.contains(n) || n.closest && n.closest('[data-action="show-selected"]'))
|
|
1856
1876
|
)) {
|
|
1857
1877
|
v.debug(`[${this.instanceId}] Closing selected popover due to click outside`), this.hideSelectedPopover();
|
|
1858
1878
|
return;
|
|
1859
1879
|
}
|
|
1860
1880
|
if (!this.isOpen) return;
|
|
1861
|
-
const
|
|
1881
|
+
const l = t.some(
|
|
1862
1882
|
(s) => s instanceof Node && (this.element.contains(s) || this.dropdown.contains(s) || this.hint && this.hint.contains(s))
|
|
1863
1883
|
);
|
|
1864
1884
|
k.debug(`[${this.instanceId}] handleClickOutside`, {
|
|
1865
1885
|
target: e.target.className,
|
|
1866
1886
|
targetTag: e.target.tagName,
|
|
1867
|
-
clickedInside:
|
|
1887
|
+
clickedInside: l,
|
|
1868
1888
|
pathLength: t.length,
|
|
1869
|
-
firstInPath: (
|
|
1889
|
+
firstInPath: (o = t[0]) == null ? void 0 : o.tagName,
|
|
1870
1890
|
elementContains: t.some((s) => s instanceof Node && this.element.contains(s)),
|
|
1871
1891
|
dropdownContains: t.some((s) => s instanceof Node && this.dropdown.contains(s)),
|
|
1872
1892
|
isConnected: this.dropdown.isConnected
|
|
1873
|
-
}),
|
|
1893
|
+
}), l || (k.warn(`[${this.instanceId}] Closing dropdown due to click outside`), this.close());
|
|
1874
1894
|
}
|
|
1875
1895
|
focusNext() {
|
|
1876
1896
|
this.filteredOptions.length !== 0 && (this.focusedIndex = Math.min(this.filteredOptions.length - 1, this.focusedIndex + 1), this.renderDropdown(), this.scrollToFocused());
|
|
@@ -1886,13 +1906,13 @@ class di {
|
|
|
1886
1906
|
}
|
|
1887
1907
|
focusNextMatch() {
|
|
1888
1908
|
if (this.matchingIndices.size === 0) return;
|
|
1889
|
-
const e = Array.from(this.matchingIndices).sort((
|
|
1890
|
-
this.focusedIndex = e[
|
|
1909
|
+
const e = Array.from(this.matchingIndices).sort((o, s) => o - s), t = e.findIndex((o) => o === this.focusedIndex), l = (t + 1) % e.length;
|
|
1910
|
+
this.focusedIndex = e[l], this.renderDropdown(), this.scrollToFocused(), k.debug(`[${this.instanceId}] Jumped to next match: index ${this.focusedIndex} (${t + 1} of ${e.length})`);
|
|
1891
1911
|
}
|
|
1892
1912
|
focusPreviousMatch() {
|
|
1893
1913
|
if (this.matchingIndices.size === 0) return;
|
|
1894
|
-
const e = Array.from(this.matchingIndices).sort((
|
|
1895
|
-
this.focusedIndex = e[
|
|
1914
|
+
const e = Array.from(this.matchingIndices).sort((o, s) => o - s), t = e.findIndex((o) => o === this.focusedIndex), l = t <= 0 ? e.length - 1 : t - 1;
|
|
1915
|
+
this.focusedIndex = e[l], this.renderDropdown(), this.scrollToFocused(), k.debug(`[${this.instanceId}] Jumped to previous match: index ${this.focusedIndex} (${t + 1} of ${e.length})`);
|
|
1896
1916
|
}
|
|
1897
1917
|
focusPageUp() {
|
|
1898
1918
|
this.filteredOptions.length !== 0 && (this.focusedIndex = Math.max(0, this.focusedIndex - 10), this.renderDropdown(), this.scrollToFocused());
|
|
@@ -1909,12 +1929,12 @@ class di {
|
|
|
1909
1929
|
}
|
|
1910
1930
|
}
|
|
1911
1931
|
toggleOption(e) {
|
|
1912
|
-
const t = this.getItemValue(e),
|
|
1932
|
+
const t = this.getItemValue(e), l = String(t);
|
|
1913
1933
|
if (k.debug(`[${this.instanceId}] toggleOption called`, { value: t, multiple: this.options.isMultipleEnabled }), !this.options.isMultipleEnabled) {
|
|
1914
|
-
this.selectedValues.has(
|
|
1934
|
+
this.selectedValues.has(l) ? (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();
|
|
1915
1935
|
return;
|
|
1916
1936
|
}
|
|
1917
|
-
this.selectedValues.has(
|
|
1937
|
+
this.selectedValues.has(l) ? (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`, {
|
|
1918
1938
|
closeOnSelect: this.options.isCloseOnSelect,
|
|
1919
1939
|
willClose: this.options.isCloseOnSelect === !0,
|
|
1920
1940
|
placeholder: this.options.searchPlaceholder
|
|
@@ -1931,18 +1951,18 @@ class di {
|
|
|
1931
1951
|
}
|
|
1932
1952
|
}
|
|
1933
1953
|
selectOption(e) {
|
|
1934
|
-
const t = this.getItemValue(e),
|
|
1935
|
-
this.selectedValues.add(
|
|
1954
|
+
const t = this.getItemValue(e), l = String(t);
|
|
1955
|
+
this.selectedValues.add(l), this.selectedOptions.set(l, e), this.renderDropdown(), this.renderPills(), this.updateHiddenInput(), this.options.selectCallback && this.options.selectCallback(e), this.options.changeCallback && this.options.changeCallback(this.getSelected());
|
|
1936
1956
|
}
|
|
1937
1957
|
deselectOption(e) {
|
|
1938
|
-
const t = this.getItemValue(e),
|
|
1939
|
-
this.selectedValues.delete(
|
|
1958
|
+
const t = this.getItemValue(e), l = String(t);
|
|
1959
|
+
this.selectedValues.delete(l), this.selectedOptions.delete(l), this.renderDropdown(), this.renderPills(), this.updateHiddenInput(), this.options.deselectCallback && this.options.deselectCallback(e), this.options.changeCallback && this.options.changeCallback(this.getSelected());
|
|
1940
1960
|
}
|
|
1941
1961
|
selectAll() {
|
|
1942
1962
|
this.filteredOptions.forEach((e) => {
|
|
1943
1963
|
if (!this.getItemDisabled(e)) {
|
|
1944
|
-
const t = this.getItemValue(e),
|
|
1945
|
-
this.selectedValues.add(
|
|
1964
|
+
const t = this.getItemValue(e), l = String(t);
|
|
1965
|
+
this.selectedValues.add(l), this.selectedOptions.set(l, e);
|
|
1946
1966
|
}
|
|
1947
1967
|
}), this.renderDropdown(), this.renderPills(), this.updateHiddenInput(), this.options.changeCallback && this.options.changeCallback(this.getSelected());
|
|
1948
1968
|
}
|
|
@@ -1964,7 +1984,7 @@ class di {
|
|
|
1964
1984
|
}), e ? (v.info(`[${this.instanceId}] 🧹 close() CLEARING input.value`), this.input.value = "") : v.info(`[${this.instanceId}] 🔒 close() KEEPING input.value = "${this.input.value}"`), this.filteredOptions = [...this.allOptions], this.focusedIndex = -1, v.info(`[${this.instanceId}] 📞 close() CALLING renderPills()`), this.renderPills(), v.info(`[${this.instanceId}] ✅ close() AFTER renderPills(), input.value = "${this.input.value}"`), this.dropdownCleanup && (this.dropdownCleanup(), this.dropdownCleanup = null), this.hintCleanup && (this.hintCleanup(), this.hintCleanup = null), this.dropdownPlacement = null, v.info(`[${this.instanceId}] Dropdown closed. Stack trace:`), v.trace();
|
|
1965
1985
|
}
|
|
1966
1986
|
positionDropdown() {
|
|
1967
|
-
this.dropdownCleanup =
|
|
1987
|
+
this.dropdownCleanup = oe(
|
|
1968
1988
|
this.input,
|
|
1969
1989
|
this.dropdown,
|
|
1970
1990
|
() => {
|
|
@@ -1976,11 +1996,11 @@ class di {
|
|
|
1976
1996
|
re(this.input, this.dropdown, {
|
|
1977
1997
|
placement: e,
|
|
1978
1998
|
middleware: t
|
|
1979
|
-
}).then(({ x:
|
|
1999
|
+
}).then(({ x: l, y: o, placement: s }) => {
|
|
1980
2000
|
this.options.isPlacementLocked && !this.dropdownPlacement && (this.dropdownPlacement = s, v.debug(`[${this.instanceId}] Locked dropdown placement:`, s));
|
|
1981
2001
|
const n = {
|
|
1982
|
-
left: `${
|
|
1983
|
-
top: `${
|
|
2002
|
+
left: `${l}px`,
|
|
2003
|
+
top: `${o}px`,
|
|
1984
2004
|
width: `${this.input.offsetWidth}px`
|
|
1985
2005
|
};
|
|
1986
2006
|
this.options.dropdownMinWidth && (n.minWidth = this.options.dropdownMinWidth), Object.assign(this.dropdown.style, n), this.hint && this.isOpen && this.positionHint();
|
|
@@ -1989,7 +2009,7 @@ class di {
|
|
|
1989
2009
|
);
|
|
1990
2010
|
}
|
|
1991
2011
|
positionHint() {
|
|
1992
|
-
this.hint && (this.hintCleanup && this.hintCleanup(), this.hintCleanup =
|
|
2012
|
+
this.hint && (this.hintCleanup && this.hintCleanup(), this.hintCleanup = oe(
|
|
1993
2013
|
this.input,
|
|
1994
2014
|
this.hint,
|
|
1995
2015
|
() => {
|
|
@@ -2001,10 +2021,10 @@ class di {
|
|
|
2001
2021
|
// Don't use flip() - we want hint to stay opposite of dropdown
|
|
2002
2022
|
ne({ padding: 8 })
|
|
2003
2023
|
]
|
|
2004
|
-
}).then(({ x: t, y:
|
|
2024
|
+
}).then(({ x: t, y: l }) => {
|
|
2005
2025
|
Object.assign(this.hint.style, {
|
|
2006
2026
|
left: `${t}px`,
|
|
2007
|
-
top: `${
|
|
2027
|
+
top: `${l}px`
|
|
2008
2028
|
});
|
|
2009
2029
|
});
|
|
2010
2030
|
}
|
|
@@ -2014,11 +2034,11 @@ class di {
|
|
|
2014
2034
|
const e = this.element.dataset.initialValues;
|
|
2015
2035
|
if (e)
|
|
2016
2036
|
try {
|
|
2017
|
-
JSON.parse(e).forEach((
|
|
2018
|
-
const
|
|
2019
|
-
this.selectedValues.add(
|
|
2020
|
-
const s = this.allOptions.find((n) => String(this.getItemValue(n)) ===
|
|
2021
|
-
s && this.selectedOptions.set(
|
|
2037
|
+
JSON.parse(e).forEach((l) => {
|
|
2038
|
+
const o = String(l);
|
|
2039
|
+
this.selectedValues.add(o);
|
|
2040
|
+
const s = this.allOptions.find((n) => String(this.getItemValue(n)) === o);
|
|
2041
|
+
s && this.selectedOptions.set(o, s);
|
|
2022
2042
|
}), this.renderPills();
|
|
2023
2043
|
} catch (t) {
|
|
2024
2044
|
C.error(`[${this.instanceId}] Failed to parse initial values:`, t);
|
|
@@ -2028,13 +2048,17 @@ class di {
|
|
|
2028
2048
|
this.showSelectedPopover ? this.hideSelectedPopover() : this.showPopover();
|
|
2029
2049
|
}
|
|
2030
2050
|
showPopover() {
|
|
2031
|
-
v.debug(`[${this.instanceId}] showPopover() called`), this.isOpen && this.close(), this.showSelectedPopover = !0, this.renderSelectedPopover(), this.selectedPopover.classList.add("ml__selected-popover--visible"), this.positionSelectedPopover();
|
|
2051
|
+
v.debug(`[${this.instanceId}] showPopover() called`), this.isOpen && this.close(), this.showSelectedPopover = !0, this.renderSelectedPopover(), this.selectedPopover.classList.add("ml__selected-popover--visible"), this.selectedValues.size >= 100 && this.selectedPopover.classList.add("ml__selected-popover--virtual"), this.positionSelectedPopover();
|
|
2032
2052
|
}
|
|
2033
2053
|
hideSelectedPopover() {
|
|
2034
|
-
v.debug(`[${this.instanceId}] hideSelectedPopover() called`), this.showSelectedPopover = !1, this.selectedPopover.classList.remove("ml__selected-popover--visible"), this.selectedPopoverPlacement = null, this.selectedPopoverCleanup && (this.selectedPopoverCleanup(), this.selectedPopoverCleanup = null);
|
|
2054
|
+
v.debug(`[${this.instanceId}] hideSelectedPopover() called`), this.showSelectedPopover = !1, this.selectedPopover.classList.remove("ml__selected-popover--visible"), this.selectedPopover.classList.remove("ml__selected-popover--virtual"), this.selectedPopoverPlacement = null, this.selectedPopoverVirtualScroll && (this.selectedPopoverVirtualScroll.destroy(), this.selectedPopoverVirtualScroll = null, this.selectedPopoverContainer = null), this.selectedPopoverCleanup && (this.selectedPopoverCleanup(), this.selectedPopoverCleanup = null);
|
|
2035
2055
|
}
|
|
2036
2056
|
renderSelectedPopover() {
|
|
2037
2057
|
const e = Array.from(this.selectedOptions.values()), t = this.selectedValues.size;
|
|
2058
|
+
if (t >= 100) {
|
|
2059
|
+
this.renderSelectedPopoverVirtual(e, t);
|
|
2060
|
+
return;
|
|
2061
|
+
}
|
|
2038
2062
|
this.selectedPopover.innerHTML = `
|
|
2039
2063
|
<div class="ml__selected-popover-header">
|
|
2040
2064
|
<span>Selected Items (${t})</span>
|
|
@@ -2042,31 +2066,66 @@ class di {
|
|
|
2042
2066
|
</div>
|
|
2043
2067
|
<div class="ml__selected-popover-body">
|
|
2044
2068
|
${e.map((o) => {
|
|
2045
|
-
const
|
|
2069
|
+
const s = this.getItemValue(o), n = this.getItemPillDisplayValue(o);
|
|
2046
2070
|
return `
|
|
2047
2071
|
<div class="ml__pill">
|
|
2048
|
-
<span class="ml__pill-text">${
|
|
2049
|
-
<button type="button" class="ml__pill-remove" data-value="${
|
|
2072
|
+
<span class="ml__pill-text">${n}</span>
|
|
2073
|
+
<button type="button" class="ml__pill-remove" data-value="${s}" aria-label="Remove ${n}"></button>
|
|
2050
2074
|
</div>
|
|
2051
2075
|
`;
|
|
2052
2076
|
}).join("")}
|
|
2053
2077
|
</div>
|
|
2054
2078
|
`;
|
|
2055
2079
|
}
|
|
2080
|
+
renderSelectedPopoverVirtual(e, t) {
|
|
2081
|
+
if (this.selectedPopoverVirtualScroll) {
|
|
2082
|
+
const r = this.selectedPopover.querySelector(".ml__selected-popover-header span");
|
|
2083
|
+
r && (r.textContent = `Selected Items (${t})`);
|
|
2084
|
+
} else {
|
|
2085
|
+
const r = `
|
|
2086
|
+
<div class="ml__selected-popover-header">
|
|
2087
|
+
<span>Selected Items (${t})</span>
|
|
2088
|
+
<button type="button" class="ml__selected-popover-close" aria-label="Close">×</button>
|
|
2089
|
+
</div>
|
|
2090
|
+
<div class="ml__selected-popover-body ml__selected-popover-body--virtual" style="height: 18rem; overflow-y: auto; position: relative;"></div>
|
|
2091
|
+
`;
|
|
2092
|
+
this.selectedPopover.innerHTML = r, this.selectedPopoverContainer = this.selectedPopover.querySelector(".ml__selected-popover-body");
|
|
2093
|
+
}
|
|
2094
|
+
if (!this.selectedPopoverContainer) return;
|
|
2095
|
+
const s = (this.options.pillHeight ?? 36) + 4, n = this.options.virtualScrollBuffer ?? 10;
|
|
2096
|
+
requestAnimationFrame(() => {
|
|
2097
|
+
this.selectedPopoverContainer && (this.selectedPopoverVirtualScroll ? this.selectedPopoverVirtualScroll.setItems(e) : this.selectedPopoverVirtualScroll = new We({
|
|
2098
|
+
container: this.selectedPopoverContainer,
|
|
2099
|
+
itemHeight: s,
|
|
2100
|
+
items: e,
|
|
2101
|
+
renderItem: (r) => this.renderPillForPopover(r),
|
|
2102
|
+
bufferSize: n
|
|
2103
|
+
}));
|
|
2104
|
+
});
|
|
2105
|
+
}
|
|
2106
|
+
renderPillForPopover(e) {
|
|
2107
|
+
const t = this.getItemValue(e), l = this.getItemPillDisplayValue(e);
|
|
2108
|
+
return `
|
|
2109
|
+
<div class="ml__pill">
|
|
2110
|
+
<span class="ml__pill-text">${l}</span>
|
|
2111
|
+
<button type="button" class="ml__pill-remove" data-value="${t}" aria-label="Remove ${l}"></button>
|
|
2112
|
+
</div>
|
|
2113
|
+
`;
|
|
2114
|
+
}
|
|
2056
2115
|
handleSelectedPopoverClick(e) {
|
|
2057
2116
|
if (e.stopPropagation(), e.target.closest(".ml__selected-popover-close")) {
|
|
2058
2117
|
e.preventDefault(), this.hideSelectedPopover();
|
|
2059
2118
|
return;
|
|
2060
2119
|
}
|
|
2061
|
-
const
|
|
2062
|
-
if (
|
|
2120
|
+
const l = e.target.closest(".ml__pill-remove");
|
|
2121
|
+
if (l) {
|
|
2063
2122
|
e.preventDefault();
|
|
2064
|
-
const
|
|
2123
|
+
const o = l.dataset.value, s = this.selectedOptions.get(o);
|
|
2065
2124
|
s && (this.deselectOption(s), this.renderSelectedPopover(), this.selectedValues.size === 0 && this.hideSelectedPopover());
|
|
2066
2125
|
}
|
|
2067
2126
|
}
|
|
2068
2127
|
positionSelectedPopover() {
|
|
2069
|
-
this.selectedPopoverCleanup =
|
|
2128
|
+
this.selectedPopoverCleanup = oe(
|
|
2070
2129
|
this.input,
|
|
2071
2130
|
this.selectedPopover,
|
|
2072
2131
|
() => {
|
|
@@ -2078,11 +2137,11 @@ class di {
|
|
|
2078
2137
|
...this.selectedPopoverPlacement ? [] : [xe()],
|
|
2079
2138
|
ne({ padding: 8 })
|
|
2080
2139
|
]
|
|
2081
|
-
}).then(({ x: t, y:
|
|
2082
|
-
this.selectedPopoverPlacement || (this.selectedPopoverPlacement =
|
|
2140
|
+
}).then(({ x: t, y: l, placement: o }) => {
|
|
2141
|
+
this.selectedPopoverPlacement || (this.selectedPopoverPlacement = o, v.debug(`[${this.instanceId}] Locked popover placement:`, o));
|
|
2083
2142
|
const s = {
|
|
2084
2143
|
left: `${t}px`,
|
|
2085
|
-
top: `${
|
|
2144
|
+
top: `${l}px`,
|
|
2086
2145
|
width: `${this.input.offsetWidth}px`
|
|
2087
2146
|
};
|
|
2088
2147
|
this.options.dropdownMinWidth && (s.minWidth = this.options.dropdownMinWidth), Object.assign(this.selectedPopover.style, s);
|
|
@@ -2095,20 +2154,20 @@ class di {
|
|
|
2095
2154
|
// ========================================================================
|
|
2096
2155
|
updateHiddenInput() {
|
|
2097
2156
|
if (!this.options.formFieldId) return;
|
|
2098
|
-
this.hiddenInputs.forEach((
|
|
2099
|
-
const e = this.options.valueFormat || "json", t = Array.from(this.selectedOptions.values()).map((
|
|
2157
|
+
this.hiddenInputs.forEach((o) => o.remove()), this.hiddenInputs = [];
|
|
2158
|
+
const e = this.options.valueFormat || "json", t = Array.from(this.selectedOptions.values()).map((o) => this.getItemValue(o)), l = this.options.hostElement || this.element;
|
|
2100
2159
|
if (e === "array")
|
|
2101
|
-
t.forEach((
|
|
2160
|
+
t.forEach((o) => {
|
|
2102
2161
|
const s = document.createElement("input");
|
|
2103
|
-
s.type = "hidden", s.name = `${this.options.formFieldId}[]`, s.value = String(
|
|
2162
|
+
s.type = "hidden", s.name = `${this.options.formFieldId}[]`, s.value = String(o), l.appendChild(s), this.hiddenInputs.push(s);
|
|
2104
2163
|
});
|
|
2105
2164
|
else {
|
|
2106
|
-
const
|
|
2107
|
-
|
|
2165
|
+
const o = document.createElement("input");
|
|
2166
|
+
o.type = "hidden", o.name = this.options.formFieldId, o.id = this.options.formFieldId, o.value = this.getFormValue(), l.appendChild(o), this.hiddenInputs.push(o);
|
|
2108
2167
|
}
|
|
2109
2168
|
}
|
|
2110
2169
|
getFormValue() {
|
|
2111
|
-
const e = Array.from(this.selectedOptions.values()).map((
|
|
2170
|
+
const e = Array.from(this.selectedOptions.values()).map((l) => this.getItemValue(l));
|
|
2112
2171
|
return this.options.getValueFormatCallback ? this.options.getValueFormatCallback(e) : (this.options.valueFormat || "json") === "csv" ? e.join(",") : JSON.stringify(e);
|
|
2113
2172
|
}
|
|
2114
2173
|
// ========================================================================
|
|
@@ -2119,8 +2178,8 @@ class di {
|
|
|
2119
2178
|
}
|
|
2120
2179
|
setSelected(e) {
|
|
2121
2180
|
this.selectedValues = new Set(e.map((t) => String(t))), this.selectedOptions.clear(), e.forEach((t) => {
|
|
2122
|
-
const
|
|
2123
|
-
|
|
2181
|
+
const l = String(t), o = this.allOptions.find((s) => String(this.getItemValue(s)) === l);
|
|
2182
|
+
o && this.selectedOptions.set(l, o);
|
|
2124
2183
|
}), this.renderDropdown(), this.renderPills(), this.updateHiddenInput();
|
|
2125
2184
|
}
|
|
2126
2185
|
get selectedItem() {
|
|
@@ -2149,28 +2208,28 @@ class di {
|
|
|
2149
2208
|
return;
|
|
2150
2209
|
}
|
|
2151
2210
|
const e = this.pillsContainer.querySelectorAll(".ml__pill:not(.ml__pill--more)");
|
|
2152
|
-
v.debug(`[${this.instanceId}] Found ${e.length} pills to attach tooltips to`), e.forEach((
|
|
2153
|
-
const
|
|
2211
|
+
v.debug(`[${this.instanceId}] Found ${e.length} pills to attach tooltips to`), e.forEach((l) => {
|
|
2212
|
+
const o = l, s = o.querySelector(".ml__pill-remove");
|
|
2154
2213
|
if (!s) return;
|
|
2155
2214
|
const n = s.dataset.value, r = this.selectedOptions.get(n);
|
|
2156
2215
|
if (!r) return;
|
|
2157
|
-
const a =
|
|
2216
|
+
const a = o.querySelector(".ml__pill-text");
|
|
2158
2217
|
a && this.createTooltipForElement(a, r, n);
|
|
2159
2218
|
const d = this.getItemPillDisplayValue(r);
|
|
2160
2219
|
this.createRemoveButtonTooltip(s, d, n);
|
|
2161
2220
|
});
|
|
2162
2221
|
const t = this.pillsContainer.querySelector(".ml__pill--more");
|
|
2163
2222
|
if (t) {
|
|
2164
|
-
const
|
|
2165
|
-
if (
|
|
2166
|
-
const
|
|
2167
|
-
this.createRemoveButtonTooltip(
|
|
2223
|
+
const l = t.querySelector(".ml__pill-remove");
|
|
2224
|
+
if (l && l.dataset.action === "remove-hidden") {
|
|
2225
|
+
const o = this.options.pillsMaxVisible || 3, n = Array.from(this.selectedOptions.values()).length - o;
|
|
2226
|
+
this.createRemoveButtonTooltip(l, `${n} hidden items`, "more-badge-remove");
|
|
2168
2227
|
}
|
|
2169
2228
|
}
|
|
2170
2229
|
}
|
|
2171
|
-
createTooltipForElement(e, t,
|
|
2172
|
-
const
|
|
2173
|
-
|
|
2230
|
+
createTooltipForElement(e, t, l) {
|
|
2231
|
+
const o = document.createElement("div");
|
|
2232
|
+
o.className = "ml__pill-tooltip";
|
|
2174
2233
|
let s;
|
|
2175
2234
|
if (this.options.getPillTooltipCallback)
|
|
2176
2235
|
s = this.options.getPillTooltipCallback(t), v.debug(`[${this.instanceId}] Using custom callback for tooltip content`);
|
|
@@ -2179,40 +2238,40 @@ class di {
|
|
|
2179
2238
|
s = p ? `${m}
|
|
2180
2239
|
${p}` : m, v.debug(`[${this.instanceId}] Using default content: "${s}"`);
|
|
2181
2240
|
}
|
|
2182
|
-
typeof s == "string" ?
|
|
2241
|
+
typeof s == "string" ? o.textContent = s : o.appendChild(s), (this.options.container || document.body).appendChild(o), v.debug(`[${this.instanceId}] Tooltip element created and appended for "${l}"`), this.pillTooltips.set(l, o);
|
|
2183
2242
|
let r, a;
|
|
2184
2243
|
const d = () => {
|
|
2185
|
-
clearTimeout(a), v.debug(`[${this.instanceId}] Mouse entered pill "${
|
|
2186
|
-
v.debug(`[${this.instanceId}] Showing tooltip for "${
|
|
2244
|
+
clearTimeout(a), v.debug(`[${this.instanceId}] Mouse entered pill "${l}", will show tooltip in ${this.options.pillTooltipDelay || 300}ms`), r = window.setTimeout(() => {
|
|
2245
|
+
v.debug(`[${this.instanceId}] Showing tooltip for "${l}"`), o.classList.add("ml__pill-tooltip--visible"), this.positionPillTooltip(e, o, l);
|
|
2187
2246
|
}, this.options.pillTooltipDelay || 300);
|
|
2188
2247
|
}, c = () => {
|
|
2189
2248
|
clearTimeout(r), a = window.setTimeout(() => {
|
|
2190
|
-
|
|
2249
|
+
o.classList.remove("ml__pill-tooltip--visible"), this.cleanupPillTooltip(l);
|
|
2191
2250
|
}, 100);
|
|
2192
2251
|
};
|
|
2193
2252
|
e.addEventListener("mouseenter", d), e.addEventListener("mouseleave", c);
|
|
2194
2253
|
}
|
|
2195
|
-
createRemoveButtonTooltip(e, t,
|
|
2196
|
-
const
|
|
2197
|
-
|
|
2198
|
-
const n = `${
|
|
2199
|
-
this.pillTooltips.set(n,
|
|
2254
|
+
createRemoveButtonTooltip(e, t, l) {
|
|
2255
|
+
const o = document.createElement("div");
|
|
2256
|
+
o.className = "ml__pill-tooltip", o.textContent = `Remove ${t}`, (this.options.container || document.body).appendChild(o);
|
|
2257
|
+
const n = `${l}-remove`;
|
|
2258
|
+
this.pillTooltips.set(n, o);
|
|
2200
2259
|
let r, a;
|
|
2201
2260
|
const d = () => {
|
|
2202
2261
|
clearTimeout(a);
|
|
2203
|
-
const m = this.pillTooltips.get(
|
|
2262
|
+
const m = this.pillTooltips.get(l);
|
|
2204
2263
|
m && m.classList.remove("ml__pill-tooltip--visible"), r = window.setTimeout(() => {
|
|
2205
|
-
|
|
2264
|
+
o.classList.add("ml__pill-tooltip--visible"), this.positionPillTooltip(e, o, n);
|
|
2206
2265
|
}, this.options.pillTooltipDelay || 300);
|
|
2207
2266
|
}, c = () => {
|
|
2208
2267
|
clearTimeout(r), a = window.setTimeout(() => {
|
|
2209
|
-
|
|
2268
|
+
o.classList.remove("ml__pill-tooltip--visible"), this.cleanupPillTooltip(n);
|
|
2210
2269
|
}, 100);
|
|
2211
2270
|
};
|
|
2212
2271
|
e.addEventListener("mouseenter", d), e.addEventListener("mouseleave", c);
|
|
2213
2272
|
}
|
|
2214
|
-
positionPillTooltip(e, t,
|
|
2215
|
-
const
|
|
2273
|
+
positionPillTooltip(e, t, l) {
|
|
2274
|
+
const o = oe(e, t, () => {
|
|
2216
2275
|
re(e, t, {
|
|
2217
2276
|
placement: this.options.pillTooltipPlacement || "top",
|
|
2218
2277
|
strategy: "fixed",
|
|
@@ -2225,7 +2284,7 @@ ${p}` : m, v.debug(`[${this.instanceId}] Using default content: "${s}"`);
|
|
|
2225
2284
|
Object.assign(t.style, {
|
|
2226
2285
|
left: `${s}px`,
|
|
2227
2286
|
top: `${n}px`
|
|
2228
|
-
}), v.debug(`[${this.instanceId}] Positioned tooltip "${
|
|
2287
|
+
}), v.debug(`[${this.instanceId}] Positioned tooltip "${l}" at x:${s}, y:${n}`, {
|
|
2229
2288
|
placement: this.options.pillTooltipPlacement || "top",
|
|
2230
2289
|
tooltipClasses: t.className,
|
|
2231
2290
|
tooltipDisplay: window.getComputedStyle(t).display,
|
|
@@ -2236,7 +2295,7 @@ ${p}` : m, v.debug(`[${this.instanceId}] Using default content: "${s}"`);
|
|
|
2236
2295
|
});
|
|
2237
2296
|
});
|
|
2238
2297
|
});
|
|
2239
|
-
this.pillTooltipCleanups.set(
|
|
2298
|
+
this.pillTooltipCleanups.set(l, o);
|
|
2240
2299
|
}
|
|
2241
2300
|
cleanupPillTooltip(e) {
|
|
2242
2301
|
const t = this.pillTooltipCleanups.get(e);
|
|
@@ -2252,12 +2311,12 @@ ${p}` : m, v.debug(`[${this.instanceId}] Using default content: "${s}"`);
|
|
|
2252
2311
|
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`);
|
|
2253
2312
|
}
|
|
2254
2313
|
}
|
|
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 {
|
|
2314
|
+
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-pill-indicator-bg: transparent;--ml-pill-indicator-border: 1px solid #e5e7eb;--ml-pill-indicator-border-radius: .25rem;--ml-pill-indicator-text-color: #6b7280;--ml-pill-indicator-text-bg: #d1d5db;--ml-pill-indicator-remove-bg: #6b7280;--ml-pill-indicator-remove-color: #ffffff;--ml-pill-indicator-remove-bg-hover: #111827;--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--selected:hover{background:var(--ml-option-bg-selected-hover, 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--indicator{border:var(--ml-pill-indicator-border, 1px solid #e5e7eb)}.ml__pill--indicator .ml__pill-text{background:var(--ml-pill-indicator-text-bg, #d1d5db);color:var(--ml-pill-indicator-text-color, #6b7280)}.ml__pill--indicator .ml__pill-remove{background:var(--ml-pill-indicator-remove-bg, #6b7280);color:var(--ml-pill-indicator-remove-color, #ffffff)}.ml__pill--indicator .ml__pill-remove:hover{background:var(--ml-pill-indicator-remove-bg-hover, #111827)}.ml__pill--more{cursor:pointer}.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--virtual{display:block;overflow:visible;max-height:none}.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__selected-popover-body--virtual{display:block;max-height:none;padding:0}.ml__selected-popover-body--virtual .ml__pill{height:var(--ml-pill-height-virtual, 36px);min-height:var(--ml-pill-height-virtual, 36px);max-height:var(--ml-pill-height-virtual, 36px);margin-bottom:var(--ml-selected-popover-body-gap, .25rem);overflow:hidden;box-sizing:border-box}.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
2315
|
}, Ae = /* @__PURE__ */ new Set();
|
|
2257
|
-
function
|
|
2316
|
+
function nt() {
|
|
2258
2317
|
return Array.from(Ae);
|
|
2259
2318
|
}
|
|
2260
|
-
class
|
|
2319
|
+
class rt extends hi {
|
|
2261
2320
|
constructor() {
|
|
2262
2321
|
super();
|
|
2263
2322
|
u(this, "picker");
|
|
@@ -2335,6 +2394,7 @@ class nt extends hi {
|
|
|
2335
2394
|
"enable-virtual-scroll",
|
|
2336
2395
|
"virtual-scroll-threshold",
|
|
2337
2396
|
"option-height",
|
|
2397
|
+
"pill-height",
|
|
2338
2398
|
"virtual-scroll-buffer",
|
|
2339
2399
|
// New member properties
|
|
2340
2400
|
"value-member",
|
|
@@ -2362,8 +2422,8 @@ class nt extends hi {
|
|
|
2362
2422
|
disconnectedCallback() {
|
|
2363
2423
|
Ae.delete(this), this.picker && this.picker.destroy();
|
|
2364
2424
|
}
|
|
2365
|
-
attributeChangedCallback(t,
|
|
2366
|
-
|
|
2425
|
+
attributeChangedCallback(t, l, o) {
|
|
2426
|
+
l !== o && this.picker && t !== "initial-values" && (this.picker.destroy(), this.initializePicker());
|
|
2367
2427
|
}
|
|
2368
2428
|
render() {
|
|
2369
2429
|
this.containerElement = document.createElement("div"), this.containerElement.setAttribute("data-multiselect", ""), this.className && (this.containerElement.className = this.className), this.shadow.appendChild(this.containerElement), this.getAttribute("show-debug-info") === "true" && this.renderDebugInfo();
|
|
@@ -2371,21 +2431,21 @@ class nt extends hi {
|
|
|
2371
2431
|
renderDebugInfo() {
|
|
2372
2432
|
const t = this.shadow.querySelector(".ml-debug-info");
|
|
2373
2433
|
t && t.remove();
|
|
2374
|
-
const
|
|
2375
|
-
|
|
2376
|
-
const
|
|
2434
|
+
const l = document.createElement("div");
|
|
2435
|
+
l.className = "ml-debug-info";
|
|
2436
|
+
const o = document.createElement("details"), s = document.createElement("summary");
|
|
2377
2437
|
s.textContent = "Debug Info";
|
|
2378
2438
|
const n = document.createElement("div");
|
|
2379
|
-
n.className = "ml-debug-stats",
|
|
2439
|
+
n.className = "ml-debug-stats", o.appendChild(s), o.appendChild(n), l.appendChild(o), this.shadow.appendChild(l), this.updateDebugInfo();
|
|
2380
2440
|
}
|
|
2381
2441
|
updateDebugInfo() {
|
|
2382
2442
|
var h, f;
|
|
2383
2443
|
const t = this.shadow.querySelector(".ml-debug-stats");
|
|
2384
2444
|
if (!t || !this.picker) return;
|
|
2385
|
-
const
|
|
2445
|
+
const l = "1.0.0-rc11", o = nt().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;
|
|
2386
2446
|
t.innerHTML = `
|
|
2387
|
-
<span>Version: ${
|
|
2388
|
-
<span>Total Instances: ${
|
|
2447
|
+
<span>Version: ${l}</span>
|
|
2448
|
+
<span>Total Instances: ${o}</span>
|
|
2389
2449
|
<span>Options: ${r}</span>
|
|
2390
2450
|
<span>Filtered: ${p}</span>
|
|
2391
2451
|
<span>Selected: ${n}</span>
|
|
@@ -2402,17 +2462,17 @@ class nt extends hi {
|
|
|
2402
2462
|
*/
|
|
2403
2463
|
parseDeclarativeOptions() {
|
|
2404
2464
|
var s, n, r, a;
|
|
2405
|
-
const t = [],
|
|
2406
|
-
if (
|
|
2465
|
+
const t = [], l = Array.from(this.children);
|
|
2466
|
+
if (l.length === 0)
|
|
2407
2467
|
return null;
|
|
2408
|
-
let
|
|
2409
|
-
for (const d of
|
|
2468
|
+
let o = !1;
|
|
2469
|
+
for (const d of l)
|
|
2410
2470
|
if (d.tagName === "OPTION") {
|
|
2411
2471
|
const c = d, m = {
|
|
2412
2472
|
value: c.value || ((s = c.textContent) == null ? void 0 : s.trim()) || "",
|
|
2413
2473
|
label: ((n = c.textContent) == null ? void 0 : n.trim()) || c.value || ""
|
|
2414
2474
|
};
|
|
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),
|
|
2475
|
+
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), o = !0;
|
|
2416
2476
|
} else if (d.tagName === "OPTGROUP") {
|
|
2417
2477
|
const c = d, m = c.label || c.getAttribute("label") || "Group", p = Array.from(c.querySelectorAll("option"));
|
|
2418
2478
|
for (const h of p) {
|
|
@@ -2421,10 +2481,10 @@ class nt extends hi {
|
|
|
2421
2481
|
label: ((a = h.textContent) == null ? void 0 : a.trim()) || h.value || "",
|
|
2422
2482
|
group: m
|
|
2423
2483
|
};
|
|
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),
|
|
2484
|
+
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), o = !0;
|
|
2425
2485
|
}
|
|
2426
2486
|
}
|
|
2427
|
-
return
|
|
2487
|
+
return o ? (C.debug(`[MultiSelectElement] Parsed ${t.length} declarative options from Light DOM`), l.forEach((d) => {
|
|
2428
2488
|
(d.tagName === "OPTION" || d.tagName === "OPTGROUP") && d.remove();
|
|
2429
2489
|
}), t) : null;
|
|
2430
2490
|
}
|
|
@@ -2434,15 +2494,15 @@ class nt extends hi {
|
|
|
2434
2494
|
if (this._declarativeSelectedValues && this._declarativeSelectedValues.length > 0)
|
|
2435
2495
|
t = this._declarativeSelectedValues, C.debug(`[MultiSelectElement] Using ${t.length} declaratively selected values`);
|
|
2436
2496
|
else {
|
|
2437
|
-
const
|
|
2438
|
-
if (
|
|
2497
|
+
const o = this.getAttribute("initial-values");
|
|
2498
|
+
if (o)
|
|
2439
2499
|
try {
|
|
2440
|
-
t = JSON.parse(
|
|
2500
|
+
t = JSON.parse(o);
|
|
2441
2501
|
} catch (s) {
|
|
2442
2502
|
C.error("[MultiSelectElement] Failed to parse initial-values:", s);
|
|
2443
2503
|
}
|
|
2444
2504
|
}
|
|
2445
|
-
const
|
|
2505
|
+
const l = {
|
|
2446
2506
|
// String options
|
|
2447
2507
|
searchHint: this.getAttribute("search-hint") || void 0,
|
|
2448
2508
|
searchPlaceholder: this.getAttribute("search-placeholder") || "Search...",
|
|
@@ -2476,6 +2536,7 @@ class nt extends hi {
|
|
|
2476
2536
|
// Virtual scroll options
|
|
2477
2537
|
virtualScrollThreshold: this.getAttribute("virtual-scroll-threshold") ? parseInt(this.getAttribute("virtual-scroll-threshold")) : 100,
|
|
2478
2538
|
optionHeight: this.getAttribute("option-height") ? parseInt(this.getAttribute("option-height")) : 50,
|
|
2539
|
+
pillHeight: this.getAttribute("pill-height") ? parseInt(this.getAttribute("pill-height")) : 36,
|
|
2479
2540
|
virtualScrollBuffer: this.getAttribute("virtual-scroll-buffer") ? parseInt(this.getAttribute("virtual-scroll-buffer")) : 10,
|
|
2480
2541
|
// Member properties
|
|
2481
2542
|
valueMember: this.getAttribute("value-member") || this._valueMember,
|
|
@@ -2505,37 +2566,37 @@ class nt extends hi {
|
|
|
2505
2566
|
pillTooltipDelay: parseInt(this.getAttribute("pill-tooltip-delay") || "300"),
|
|
2506
2567
|
pillTooltipOffset: parseInt(this.getAttribute("pill-tooltip-offset") || "8"),
|
|
2507
2568
|
// Count pill callback
|
|
2508
|
-
getCountPillCallback: this._getCountPillCallback || ((
|
|
2569
|
+
getCountPillCallback: this._getCountPillCallback || ((o, s) => s !== void 0 ? `+${s} more` : `${o} selected`),
|
|
2509
2570
|
// Data and callbacks
|
|
2510
2571
|
options: this._options,
|
|
2511
2572
|
beforeSearchCallback: this._beforeSearchCallback,
|
|
2512
2573
|
searchCallback: this._searchCallback,
|
|
2513
2574
|
addNewCallback: this._addNewCallback,
|
|
2514
|
-
selectCallback: (
|
|
2575
|
+
selectCallback: (o) => {
|
|
2515
2576
|
var s, n;
|
|
2516
|
-
this._selectCallback && this._selectCallback(
|
|
2577
|
+
this._selectCallback && this._selectCallback(o), this.dispatchEvent(new CustomEvent("select", {
|
|
2517
2578
|
detail: {
|
|
2518
|
-
option:
|
|
2579
|
+
option: o,
|
|
2519
2580
|
selectedOptions: (s = this.picker) == null ? void 0 : s.getSelected(),
|
|
2520
2581
|
selectedValues: Array.from(((n = this.picker) == null ? void 0 : n.getValue()) || [])
|
|
2521
2582
|
}
|
|
2522
2583
|
}));
|
|
2523
2584
|
},
|
|
2524
|
-
deselectCallback: (
|
|
2585
|
+
deselectCallback: (o) => {
|
|
2525
2586
|
var s, n;
|
|
2526
|
-
this._deselectCallback && this._deselectCallback(
|
|
2587
|
+
this._deselectCallback && this._deselectCallback(o), this.dispatchEvent(new CustomEvent("deselect", {
|
|
2527
2588
|
detail: {
|
|
2528
|
-
option:
|
|
2589
|
+
option: o,
|
|
2529
2590
|
selectedOptions: (s = this.picker) == null ? void 0 : s.getSelected(),
|
|
2530
2591
|
selectedValues: Array.from(((n = this.picker) == null ? void 0 : n.getValue()) || [])
|
|
2531
2592
|
}
|
|
2532
2593
|
}));
|
|
2533
2594
|
},
|
|
2534
|
-
changeCallback: (
|
|
2595
|
+
changeCallback: (o) => {
|
|
2535
2596
|
var s;
|
|
2536
|
-
this._changeCallback && this._changeCallback(
|
|
2597
|
+
this._changeCallback && this._changeCallback(o), this.dispatchEvent(new CustomEvent("change", {
|
|
2537
2598
|
detail: {
|
|
2538
|
-
selectedOptions:
|
|
2599
|
+
selectedOptions: o,
|
|
2539
2600
|
selectedValues: Array.from(((s = this.picker) == null ? void 0 : s.getValue()) || [])
|
|
2540
2601
|
}
|
|
2541
2602
|
}));
|
|
@@ -2545,7 +2606,7 @@ class nt extends hi {
|
|
|
2545
2606
|
// Pass host element (this) for hidden inputs in light DOM
|
|
2546
2607
|
hostElement: this
|
|
2547
2608
|
};
|
|
2548
|
-
t && (this.containerElement.dataset.initialValues = JSON.stringify(t)), this.picker = new di(this.containerElement,
|
|
2609
|
+
t && (this.containerElement.dataset.initialValues = JSON.stringify(t)), this.picker = new di(this.containerElement, l);
|
|
2549
2610
|
}
|
|
2550
2611
|
reinitialize() {
|
|
2551
2612
|
this.picker && (this.picker.destroy(), this.initializePicker());
|
|
@@ -2772,24 +2833,24 @@ class nt extends hi {
|
|
|
2772
2833
|
this.picker && this.picker.destroy();
|
|
2773
2834
|
}
|
|
2774
2835
|
}
|
|
2775
|
-
typeof window < "u" && typeof customElements < "u" && (customElements.get("web-multiselect") || customElements.define("web-multiselect",
|
|
2836
|
+
typeof window < "u" && typeof customElements < "u" && (customElements.get("web-multiselect") || customElements.define("web-multiselect", rt));
|
|
2776
2837
|
typeof window < "u" && (window.keenmate = window.keenmate || {}, window.keenmate.multiselect = {
|
|
2777
|
-
version: () => "1.0.0-
|
|
2838
|
+
version: () => "1.0.0-rc11",
|
|
2778
2839
|
config: {
|
|
2779
2840
|
name: "@keenmate/web-multiselect",
|
|
2780
|
-
version: "1.0.0-
|
|
2841
|
+
version: "1.0.0-rc11",
|
|
2781
2842
|
author: "Keenmate",
|
|
2782
2843
|
license: "MIT",
|
|
2783
2844
|
repository: "git+https://github.com/keenmate/web-multiselect.git",
|
|
2784
2845
|
homepage: "https://github.com/keenmate/web-multiselect#readme"
|
|
2785
2846
|
},
|
|
2786
2847
|
register: () => {
|
|
2787
|
-
typeof customElements < "u" && !customElements.get("web-multiselect") && customElements.define("web-multiselect",
|
|
2848
|
+
typeof customElements < "u" && !customElements.get("web-multiselect") && customElements.define("web-multiselect", rt);
|
|
2788
2849
|
},
|
|
2789
|
-
getInstances: () =>
|
|
2850
|
+
getInstances: () => nt()
|
|
2790
2851
|
});
|
|
2791
2852
|
export {
|
|
2792
|
-
|
|
2853
|
+
rt as MultiSelectElement,
|
|
2793
2854
|
di as PureMultiSelect,
|
|
2794
2855
|
C as dataLogger,
|
|
2795
2856
|
fi as disableLogging,
|
|
@@ -2797,6 +2858,6 @@ export {
|
|
|
2797
2858
|
ui as enableLogging,
|
|
2798
2859
|
H as initLogger,
|
|
2799
2860
|
k as interactionLogger,
|
|
2800
|
-
|
|
2861
|
+
st as setLogLevel,
|
|
2801
2862
|
v as uiLogger
|
|
2802
2863
|
};
|