@keenmate/web-multiselect 1.0.0-rc06 → 1.0.0-rc10
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 +323 -53
- package/dist/multiselect.js +1036 -711
- package/dist/multiselect.umd.js +36 -18
- package/dist/style.css +1 -1
- package/package.json +1 -2
- package/src/scss/_css-variables.scss +2 -0
- package/src/scss/_input-dropdown.scss +9 -0
- package/src/scss/_options.scss +22 -0
- package/src/scss/_tooltips-popover.scss +25 -0
- package/src/scss/_variables.scss +2 -0
package/dist/multiselect.js
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var u = (i, e, t) =>
|
|
4
|
-
const ae = Math.min,
|
|
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
|
|
17
|
-
return
|
|
16
|
+
function Ee(i, e, t) {
|
|
17
|
+
return B(i, ae(e, t));
|
|
18
18
|
}
|
|
19
|
-
function
|
|
19
|
+
function me(i, e) {
|
|
20
20
|
return typeof i == "function" ? i(e) : i;
|
|
21
21
|
}
|
|
22
22
|
function W(i) {
|
|
@@ -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
34
|
const mt = /* @__PURE__ */ new Set(["top", "bottom"]);
|
|
35
|
-
function
|
|
35
|
+
function z(i) {
|
|
36
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
|
|
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
|
-
return t ? e ?
|
|
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,280 +93,280 @@ 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
|
-
function
|
|
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 =
|
|
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:
|
|
133
|
-
y:
|
|
132
|
+
x: l.x + l.width,
|
|
133
|
+
y: m
|
|
134
134
|
};
|
|
135
135
|
break;
|
|
136
136
|
case "left":
|
|
137
137
|
h = {
|
|
138
|
-
x:
|
|
139
|
-
y:
|
|
138
|
+
x: l.x - o.width,
|
|
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)) {
|
|
149
149
|
case "start":
|
|
150
|
-
h[n] -=
|
|
150
|
+
h[n] -= p * (t && d ? -1 : 1);
|
|
151
151
|
break;
|
|
152
152
|
case "end":
|
|
153
|
-
h[n] +=
|
|
153
|
+
h[n] += p * (t && d ? -1 : 1);
|
|
154
154
|
break;
|
|
155
155
|
}
|
|
156
156
|
return h;
|
|
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
|
-
let
|
|
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
|
-
y:
|
|
172
|
-
} =
|
|
171
|
+
y: m
|
|
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
|
-
data:
|
|
181
|
-
reset:
|
|
180
|
+
data: A,
|
|
181
|
+
reset: S
|
|
182
182
|
} = await b({
|
|
183
183
|
x: c,
|
|
184
|
-
y:
|
|
185
|
-
initialPlacement:
|
|
186
|
-
placement:
|
|
187
|
-
strategy:
|
|
184
|
+
y: m,
|
|
185
|
+
initialPlacement: l,
|
|
186
|
+
placement: p,
|
|
187
|
+
strategy: o,
|
|
188
188
|
middlewareData: h,
|
|
189
|
-
rects:
|
|
189
|
+
rects: d,
|
|
190
190
|
platform: n,
|
|
191
191
|
elements: {
|
|
192
192
|
reference: i,
|
|
193
193
|
floating: e
|
|
194
194
|
}
|
|
195
195
|
});
|
|
196
|
-
c =
|
|
196
|
+
c = _ ?? c, m = x ?? m, h = {
|
|
197
197
|
...h,
|
|
198
198
|
[g]: {
|
|
199
199
|
...h[g],
|
|
200
|
-
...
|
|
200
|
+
...A
|
|
201
201
|
}
|
|
202
|
-
},
|
|
202
|
+
}, S && f <= 50 && (f++, typeof S == "object" && (S.placement && (p = S.placement), S.rects && (d = S.rects === !0 ? await n.getElementRects({
|
|
203
203
|
reference: i,
|
|
204
204
|
floating: e,
|
|
205
|
-
strategy:
|
|
206
|
-
}) :
|
|
205
|
+
strategy: o
|
|
206
|
+
}) : S.rects), {
|
|
207
207
|
x: c,
|
|
208
|
-
y:
|
|
209
|
-
} =
|
|
208
|
+
y: m
|
|
209
|
+
} = De(d, p, a)), w = -1);
|
|
210
210
|
}
|
|
211
211
|
return {
|
|
212
212
|
x: c,
|
|
213
|
-
y:
|
|
214
|
-
placement:
|
|
215
|
-
strategy:
|
|
213
|
+
y: m,
|
|
214
|
+
placement: p,
|
|
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,
|
|
228
228
|
strategy: a
|
|
229
229
|
} = i, {
|
|
230
|
-
boundary:
|
|
230
|
+
boundary: d = "clippingAncestors",
|
|
231
231
|
rootBoundary: c = "viewport",
|
|
232
|
-
elementContext:
|
|
233
|
-
altBoundary:
|
|
232
|
+
elementContext: m = "floating",
|
|
233
|
+
altBoundary: p = !1,
|
|
234
234
|
padding: h = 0
|
|
235
|
-
} =
|
|
235
|
+
} = me(e, i), f = yt(h), g = r[p ? m === "floating" ? "reference" : "floating" : m], b = pe(await s.getClippingRect({
|
|
236
236
|
element: (t = await (s.isElement == null ? void 0 : s.isElement(g))) == null || t ? g : g.contextElement || await (s.getDocumentElement == null ? void 0 : s.getDocumentElement(r.floating)),
|
|
237
|
-
boundary:
|
|
237
|
+
boundary: d,
|
|
238
238
|
rootBoundary: c,
|
|
239
239
|
strategy: a
|
|
240
|
-
})),
|
|
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
|
-
} : n.reference, x = await (s.getOffsetParent == null ? void 0 : s.getOffsetParent(r.floating)),
|
|
245
|
+
} : n.reference, x = await (s.getOffsetParent == null ? void 0 : s.getOffsetParent(r.floating)), A = await (s.isElement == null ? void 0 : s.isElement(x)) ? await (s.getScale == null ? void 0 : s.getScale(x)) || {
|
|
246
246
|
x: 1,
|
|
247
247
|
y: 1
|
|
248
248
|
} : {
|
|
249
249
|
x: 1,
|
|
250
250
|
y: 1
|
|
251
|
-
},
|
|
251
|
+
}, S = pe(s.convertOffsetParentRelativeRectToViewportRelativeRect ? await s.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
252
252
|
elements: r,
|
|
253
|
-
rect:
|
|
253
|
+
rect: _,
|
|
254
254
|
offsetParent: x,
|
|
255
255
|
strategy: a
|
|
256
|
-
}) :
|
|
256
|
+
}) : _);
|
|
257
257
|
return {
|
|
258
|
-
top: (b.top -
|
|
259
|
-
bottom: (
|
|
260
|
-
left: (b.left -
|
|
261
|
-
right: (
|
|
258
|
+
top: (b.top - S.top + f.top) / A.y,
|
|
259
|
+
bottom: (S.bottom - b.bottom + f.bottom) / A.y,
|
|
260
|
+
left: (b.left - S.left + f.left) / A.x,
|
|
261
|
+
right: (S.right - b.right + f.right) / A.x
|
|
262
262
|
};
|
|
263
263
|
}
|
|
264
|
-
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,
|
|
275
275
|
platform: a,
|
|
276
|
-
elements:
|
|
276
|
+
elements: d
|
|
277
277
|
} = e, {
|
|
278
278
|
mainAxis: c = !0,
|
|
279
|
-
crossAxis:
|
|
280
|
-
fallbackPlacements:
|
|
279
|
+
crossAxis: m = !0,
|
|
280
|
+
fallbackPlacements: p,
|
|
281
281
|
fallbackStrategy: h = "bestFit",
|
|
282
282
|
fallbackAxisSideDirection: f = "none",
|
|
283
283
|
flipAlignment: w = !0,
|
|
284
284
|
...g
|
|
285
|
-
} =
|
|
285
|
+
} = me(i, e);
|
|
286
286
|
if ((t = s.arrow) != null && t.alignmentOffset)
|
|
287
287
|
return {};
|
|
288
|
-
const b = W(
|
|
289
|
-
!
|
|
290
|
-
const G = [r, ...
|
|
291
|
-
let U = ((
|
|
292
|
-
if (c && ie.push(we[b]),
|
|
293
|
-
const R =
|
|
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
|
+
if (c && ie.push(we[b]), m) {
|
|
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 Le,
|
|
301
|
-
const R = (((Le = s.flip) == null ? void 0 : Le.index) || 0) + 1,
|
|
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((
|
|
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 = (
|
|
318
|
+
var Ve;
|
|
319
|
+
const F = (Ve = U.filter((I) => {
|
|
320
320
|
if (J) {
|
|
321
|
-
const
|
|
322
|
-
return
|
|
321
|
+
const $ = z(I.placement);
|
|
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((
|
|
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
|
-
mainAxis:
|
|
353
|
+
mainAxis: p,
|
|
354
354
|
crossAxis: h,
|
|
355
355
|
alignmentAxis: f
|
|
356
|
-
} = typeof
|
|
357
|
-
mainAxis:
|
|
356
|
+
} = typeof m == "number" ? {
|
|
357
|
+
mainAxis: m,
|
|
358
358
|
crossAxis: 0,
|
|
359
359
|
alignmentAxis: null
|
|
360
360
|
} : {
|
|
361
|
-
mainAxis:
|
|
362
|
-
crossAxis:
|
|
363
|
-
alignmentAxis:
|
|
361
|
+
mainAxis: m.mainAxis || 0,
|
|
362
|
+
crossAxis: m.crossAxis || 0,
|
|
363
|
+
alignmentAxis: m.alignmentAxis
|
|
364
364
|
};
|
|
365
365
|
return r && typeof f == "number" && (h = r === "end" ? f * -1 : f), a ? {
|
|
366
366
|
x: h * c,
|
|
367
|
-
y:
|
|
367
|
+
y: p * d
|
|
368
368
|
} : {
|
|
369
|
-
x:
|
|
369
|
+
x: p * d,
|
|
370
370
|
y: h * c
|
|
371
371
|
};
|
|
372
372
|
}
|
|
@@ -375,15 +375,15 @@ const At = function(i) {
|
|
|
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 At = 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,41 +408,41 @@ const At = 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
|
|
424
|
-
let h = p
|
|
422
|
+
y: l
|
|
423
|
+
}, c = await Ke(e, a), m = z(W(o)), p = je(m);
|
|
424
|
+
let h = d[p], f = d[m];
|
|
425
425
|
if (s) {
|
|
426
|
-
const g =
|
|
427
|
-
h =
|
|
426
|
+
const g = p === "y" ? "top" : "left", b = p === "y" ? "bottom" : "right", _ = h + c[g], x = h - c[b];
|
|
427
|
+
h = Ee(_, h, x);
|
|
428
428
|
}
|
|
429
429
|
if (n) {
|
|
430
|
-
const g =
|
|
431
|
-
f =
|
|
430
|
+
const g = m === "y" ? "top" : "left", b = m === "y" ? "bottom" : "right", _ = f + c[g], x = f - c[b];
|
|
431
|
+
f = Ee(_, f, x);
|
|
432
432
|
}
|
|
433
433
|
const w = r.fn({
|
|
434
434
|
...e,
|
|
435
|
-
[
|
|
436
|
-
[
|
|
435
|
+
[p]: h,
|
|
436
|
+
[m]: f
|
|
437
437
|
});
|
|
438
438
|
return {
|
|
439
439
|
...w,
|
|
440
440
|
data: {
|
|
441
441
|
x: w.x - t,
|
|
442
|
-
y: w.y -
|
|
442
|
+
y: w.y - l,
|
|
443
443
|
enabled: {
|
|
444
|
-
[
|
|
445
|
-
[
|
|
444
|
+
[p]: s,
|
|
445
|
+
[m]: n
|
|
446
446
|
}
|
|
447
447
|
}
|
|
448
448
|
};
|
|
@@ -452,46 +452,46 @@ const At = 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
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
|
|
466
|
+
function Ye(i) {
|
|
467
467
|
return fe() ? i instanceof Node || i instanceof P(i).Node : !1;
|
|
468
468
|
}
|
|
469
469
|
function T(i) {
|
|
470
470
|
return fe() ? i instanceof Element || i instanceof P(i).Element : !1;
|
|
471
471
|
}
|
|
472
|
-
function
|
|
472
|
+
function V(i) {
|
|
473
473
|
return fe() ? i instanceof HTMLElement || i instanceof P(i).HTMLElement : !1;
|
|
474
474
|
}
|
|
475
475
|
function Re(i) {
|
|
476
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:
|
|
483
|
+
overflowY: l,
|
|
484
|
+
display: o
|
|
485
485
|
} = L(i);
|
|
486
|
-
return /auto|scroll|overlay|hidden|clip/.test(e +
|
|
486
|
+
return /auto|scroll|overlay|hidden|clip/.test(e + l + t) && !It.has(o);
|
|
487
487
|
}
|
|
488
488
|
const Ot = /* @__PURE__ */ new Set(["table", "td", "th"]);
|
|
489
|
-
function
|
|
490
|
-
return Ot.has(
|
|
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,28 +499,28 @@ function ge(i) {
|
|
|
499
499
|
}
|
|
500
500
|
});
|
|
501
501
|
}
|
|
502
|
-
const
|
|
502
|
+
const Mt = ["transform", "translate", "scale", "rotate", "perspective"], Vt = ["transform", "translate", "scale", "rotate", "perspective", "filter"], Et = ["paint", "layout", "strict", "content"];
|
|
503
503
|
function Pe(i) {
|
|
504
|
-
const e =
|
|
505
|
-
return
|
|
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
507
|
function $t(i) {
|
|
508
|
-
let e =
|
|
509
|
-
for (;
|
|
508
|
+
let e = D(i);
|
|
509
|
+
for (; V(e) && !Y(e); ) {
|
|
510
510
|
if (Pe(e))
|
|
511
511
|
return e;
|
|
512
512
|
if (ge(e))
|
|
513
513
|
return null;
|
|
514
|
-
e =
|
|
514
|
+
e = D(e);
|
|
515
515
|
}
|
|
516
516
|
return null;
|
|
517
517
|
}
|
|
518
|
-
function
|
|
518
|
+
function Ie() {
|
|
519
519
|
return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
|
|
520
520
|
}
|
|
521
|
-
const
|
|
521
|
+
const zt = /* @__PURE__ */ new Set(["html", "body", "#document"]);
|
|
522
522
|
function Y(i) {
|
|
523
|
-
return
|
|
523
|
+
return zt.has(q(i));
|
|
524
524
|
}
|
|
525
525
|
function L(i) {
|
|
526
526
|
return P(i).getComputedStyle(i);
|
|
@@ -534,143 +534,143 @@ function be(i) {
|
|
|
534
534
|
scrollTop: i.scrollY
|
|
535
535
|
};
|
|
536
536
|
}
|
|
537
|
-
function
|
|
538
|
-
if (
|
|
537
|
+
function D(i) {
|
|
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
|
|
550
|
-
const e =
|
|
551
|
-
return Y(e) ? i.ownerDocument ? i.ownerDocument.body : i.body :
|
|
549
|
+
function qe(i) {
|
|
550
|
+
const e = D(i);
|
|
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
|
-
function
|
|
566
|
+
function Je(i) {
|
|
567
567
|
const e = L(i);
|
|
568
|
-
let t = parseFloat(e.width) || 0,
|
|
569
|
-
const
|
|
570
|
-
return r && (t = s,
|
|
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 (!
|
|
582
|
-
return
|
|
580
|
+
const e = Oe(i);
|
|
581
|
+
if (!V(e))
|
|
582
|
+
return M(1);
|
|
583
583
|
const t = e.getBoundingClientRect(), {
|
|
584
|
-
width:
|
|
585
|
-
height:
|
|
584
|
+
width: l,
|
|
585
|
+
height: o,
|
|
586
586
|
$: s
|
|
587
|
-
} =
|
|
588
|
-
let n = (s ? ce(t.width) : t.width) /
|
|
587
|
+
} = Je(e);
|
|
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 Dt = /* @__PURE__ */
|
|
595
|
-
function
|
|
594
|
+
const Dt = /* @__PURE__ */ M(0);
|
|
595
|
+
function Xe(i) {
|
|
596
596
|
const e = P(i);
|
|
597
|
-
return !
|
|
597
|
+
return !Ie() || !e.visualViewport ? Dt : {
|
|
598
598
|
x: e.visualViewport.offsetLeft,
|
|
599
599
|
y: e.visualViewport.offsetTop
|
|
600
600
|
};
|
|
601
601
|
}
|
|
602
|
-
function
|
|
602
|
+
function Rt(i, e, t) {
|
|
603
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
|
|
608
|
-
let n =
|
|
609
|
-
e && (
|
|
610
|
-
const r =
|
|
611
|
-
let a = (
|
|
607
|
+
const o = i.getBoundingClientRect(), s = Oe(i);
|
|
608
|
+
let n = M(1);
|
|
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
|
|
614
|
-
let f =
|
|
615
|
-
for (; w &&
|
|
616
|
-
const g = K(w), b = w.getBoundingClientRect(),
|
|
617
|
-
a *= g.x,
|
|
613
|
+
const p = P(s), h = l && T(l) ? P(l) : l;
|
|
614
|
+
let f = p, w = ke(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({
|
|
621
621
|
width: c,
|
|
622
|
-
height:
|
|
622
|
+
height: m,
|
|
623
623
|
x: a,
|
|
624
|
-
y:
|
|
624
|
+
y: d
|
|
625
625
|
});
|
|
626
626
|
}
|
|
627
627
|
function ve(i, e) {
|
|
628
628
|
const t = be(i).scrollLeft;
|
|
629
|
-
return e ? e.left + t : j(
|
|
629
|
+
return e ? e.left + t : j(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
|
-
},
|
|
652
|
-
const c =
|
|
653
|
-
if ((
|
|
654
|
-
const h = j(
|
|
655
|
-
|
|
651
|
+
}, d = M(1);
|
|
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
|
|
657
|
+
const p = n && !m && !s ? Ze(n, a) : M(0);
|
|
658
658
|
return {
|
|
659
|
-
width: t.width *
|
|
660
|
-
height: t.height *
|
|
661
|
-
x: t.x *
|
|
662
|
-
y: t.y *
|
|
659
|
+
width: t.width * d.x,
|
|
660
|
+
height: t.height * d.y,
|
|
661
|
+
x: t.x * d.x - a.scrollLeft * d.x + c.x + p.x,
|
|
662
|
+
y: t.y * d.y - a.scrollTop * d.y + c.y + p.y
|
|
663
663
|
};
|
|
664
664
|
}
|
|
665
|
-
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 L(
|
|
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
|
|
@@ -678,18 +678,18 @@ function Nt(i) {
|
|
|
678
678
|
}
|
|
679
679
|
const Fe = 25;
|
|
680
680
|
function Bt(i, e) {
|
|
681
|
-
const t = P(i),
|
|
682
|
-
let s =
|
|
683
|
-
if (
|
|
684
|
-
s =
|
|
685
|
-
const c =
|
|
686
|
-
(!c || c && e === "fixed") && (r =
|
|
687
|
-
}
|
|
688
|
-
const
|
|
689
|
-
if (
|
|
690
|
-
const c =
|
|
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
|
+
const c = Ie();
|
|
686
|
+
(!c || c && e === "fixed") && (r = o.offsetLeft, a = o.offsetTop);
|
|
687
|
+
}
|
|
688
|
+
const d = ve(l);
|
|
689
|
+
if (d <= 0) {
|
|
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
|
-
} else
|
|
692
|
+
} else d <= Fe && (s += d);
|
|
693
693
|
return {
|
|
694
694
|
width: s,
|
|
695
695
|
height: n,
|
|
@@ -697,63 +697,63 @@ function Bt(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,
|
|
706
706
|
x: a,
|
|
707
|
-
y:
|
|
707
|
+
y: d
|
|
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
|
|
730
|
-
const t =
|
|
731
|
-
return t === e || !T(t) || Y(t) ? !1 : L(t).position === "fixed" ||
|
|
729
|
+
function Qe(i, e) {
|
|
730
|
+
const t = D(i);
|
|
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
|
|
737
|
+
let l = Q(i, [], !1).filter((r) => T(r) && q(r) !== "body"), o = null;
|
|
738
738
|
const s = L(i).position === "fixed";
|
|
739
|
-
let n = s ?
|
|
739
|
+
let n = s ? D(i) : i;
|
|
740
740
|
for (; T(n) && !Y(n); ) {
|
|
741
741
|
const r = L(n), a = Pe(n);
|
|
742
|
-
!a && r.position === "fixed" && (
|
|
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
|
|
755
|
-
return
|
|
756
|
-
}, Ne(e, r,
|
|
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
|
+
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, o));
|
|
757
757
|
return {
|
|
758
758
|
width: a.right - a.left,
|
|
759
759
|
height: a.bottom - a.top,
|
|
@@ -761,203 +761,203 @@ 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
|
|
768
|
-
} =
|
|
768
|
+
} = Je(i);
|
|
769
769
|
return {
|
|
770
770
|
width: e,
|
|
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
|
-
const a =
|
|
781
|
-
function
|
|
782
|
-
a.x = ve(
|
|
780
|
+
const a = M(0);
|
|
781
|
+
function d() {
|
|
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
|
-
x:
|
|
793
|
-
y:
|
|
792
|
+
x: m,
|
|
793
|
+
y: p,
|
|
794
794
|
width: n.width,
|
|
795
795
|
height: n.height
|
|
796
796
|
};
|
|
797
797
|
}
|
|
798
|
-
function
|
|
798
|
+
function ye(i) {
|
|
799
799
|
return L(i).position === "static";
|
|
800
800
|
}
|
|
801
|
-
function
|
|
802
|
-
if (!
|
|
801
|
+
function He(i, e) {
|
|
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
|
|
809
|
+
function et(i, e) {
|
|
810
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
|
-
function
|
|
839
|
+
function Jt(i) {
|
|
840
840
|
return L(i).direction === "rtl";
|
|
841
841
|
}
|
|
842
|
-
const
|
|
843
|
-
convertOffsetParentRelativeRectToViewportRelativeRect:
|
|
844
|
-
getDocumentElement:
|
|
845
|
-
getClippingRect:
|
|
846
|
-
getOffsetParent:
|
|
847
|
-
getElementRects:
|
|
848
|
-
getClientRects:
|
|
849
|
-
getDimensions:
|
|
842
|
+
const Xt = {
|
|
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
|
-
isRTL:
|
|
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();
|
|
866
|
-
const
|
|
866
|
+
const d = i.getBoundingClientRect(), {
|
|
867
867
|
left: c,
|
|
868
|
-
top:
|
|
869
|
-
width:
|
|
868
|
+
top: m,
|
|
869
|
+
width: p,
|
|
870
870
|
height: h
|
|
871
|
-
} =
|
|
872
|
-
if (r || e(), !
|
|
871
|
+
} = d;
|
|
872
|
+
if (r || e(), !p || !h)
|
|
873
873
|
return;
|
|
874
|
-
const f =
|
|
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
|
-
threshold:
|
|
876
|
+
threshold: B(0, ae(1, a)) || 1
|
|
877
877
|
};
|
|
878
|
-
let
|
|
879
|
-
function
|
|
878
|
+
let A = !0;
|
|
879
|
+
function S(J) {
|
|
880
880
|
const G = J[0].intersectionRatio;
|
|
881
881
|
if (G !== a) {
|
|
882
|
-
if (!
|
|
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
|
-
t = new IntersectionObserver(
|
|
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
|
-
t = new IntersectionObserver(
|
|
897
|
+
t = new IntersectionObserver(S, x);
|
|
898
898
|
}
|
|
899
899
|
t.observe(i);
|
|
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
|
|
918
|
-
let
|
|
917
|
+
const m = d && r ? Zt(d, t) : null;
|
|
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();
|
|
925
|
-
}),
|
|
925
|
+
}), d && !a && h.observe(d), h.observe(e));
|
|
926
926
|
let f, w = a ? j(i) : null;
|
|
927
927
|
a && g();
|
|
928
928
|
function g() {
|
|
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
|
-
|
|
936
|
-
}),
|
|
934
|
+
c.forEach((_) => {
|
|
935
|
+
o && _.removeEventListener("scroll", t), s && _.removeEventListener("resize", t);
|
|
936
|
+
}), m == null || m(), (b = h) == null || b.disconnect(), h = null, a && cancelAnimationFrame(f);
|
|
937
937
|
};
|
|
938
938
|
}
|
|
939
|
-
const se = At, ne =
|
|
940
|
-
const
|
|
941
|
-
platform:
|
|
939
|
+
const se = At, ne = Pt, xe = Ct, re = (i, e, t) => {
|
|
940
|
+
const l = /* @__PURE__ */ new Map(), o = {
|
|
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 = {},
|
|
960
|
-
function
|
|
959
|
+
], ee = {}, y = null;
|
|
960
|
+
function Be(i, e) {
|
|
961
961
|
var t = i[e];
|
|
962
962
|
if (typeof t.bind == "function")
|
|
963
963
|
return t.bind(i);
|
|
@@ -969,34 +969,34 @@ function He(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
|
-
for (var i = this.getLevel(), e = 0; e <
|
|
980
|
-
var t =
|
|
981
|
-
this[t] = e < i ?
|
|
979
|
+
for (var i = this.getLevel(), e = 0; e < Se.length; e++) {
|
|
980
|
+
var t = Se[e];
|
|
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
|
-
function r(
|
|
998
|
-
var h = (
|
|
999
|
-
if (!(typeof window ===
|
|
997
|
+
function r(p) {
|
|
998
|
+
var h = (Se[p] || "silent").toUpperCase();
|
|
999
|
+
if (!(typeof window === O || !n)) {
|
|
1000
1000
|
try {
|
|
1001
1001
|
window.localStorage[n] = h;
|
|
1002
1002
|
return;
|
|
@@ -1009,25 +1009,25 @@ function it(i, e) {
|
|
|
1009
1009
|
}
|
|
1010
1010
|
}
|
|
1011
1011
|
function a() {
|
|
1012
|
-
var
|
|
1013
|
-
if (!(typeof window ===
|
|
1012
|
+
var p;
|
|
1013
|
+
if (!(typeof window === O || !n)) {
|
|
1014
1014
|
try {
|
|
1015
|
-
|
|
1015
|
+
p = window.localStorage[n];
|
|
1016
1016
|
} catch {
|
|
1017
1017
|
}
|
|
1018
|
-
if (typeof
|
|
1018
|
+
if (typeof p === O)
|
|
1019
1019
|
try {
|
|
1020
1020
|
var h = window.document.cookie, f = encodeURIComponent(n), w = h.indexOf(f + "=");
|
|
1021
|
-
w !== -1 && (
|
|
1021
|
+
w !== -1 && (p = /^([^;]+)/.exec(
|
|
1022
1022
|
h.slice(w + f.length + 1)
|
|
1023
1023
|
)[1]);
|
|
1024
1024
|
} catch {
|
|
1025
1025
|
}
|
|
1026
|
-
return t.levels[
|
|
1026
|
+
return t.levels[p] === void 0 && (p = void 0), p;
|
|
1027
1027
|
}
|
|
1028
1028
|
}
|
|
1029
|
-
function
|
|
1030
|
-
if (!(typeof window ===
|
|
1029
|
+
function d() {
|
|
1030
|
+
if (!(typeof window === O || !n)) {
|
|
1031
1031
|
try {
|
|
1032
1032
|
window.localStorage.removeItem(n);
|
|
1033
1033
|
} catch {
|
|
@@ -1038,11 +1038,11 @@ function it(i, e) {
|
|
|
1038
1038
|
}
|
|
1039
1039
|
}
|
|
1040
1040
|
}
|
|
1041
|
-
function c(
|
|
1042
|
-
var h =
|
|
1041
|
+
function c(p) {
|
|
1042
|
+
var h = p;
|
|
1043
1043
|
if (typeof h == "string" && t.levels[h.toUpperCase()] !== void 0 && (h = t.levels[h.toUpperCase()]), typeof h == "number" && h >= 0 && h <= t.levels.SILENT)
|
|
1044
1044
|
return h;
|
|
1045
|
-
throw new TypeError("log.setLevel() called with invalid level: " +
|
|
1045
|
+
throw new TypeError("log.setLevel() called with invalid level: " + p);
|
|
1046
1046
|
}
|
|
1047
1047
|
t.name = i, t.levels = {
|
|
1048
1048
|
TRACE: 0,
|
|
@@ -1051,52 +1051,52 @@ function it(i, e) {
|
|
|
1051
1051
|
WARN: 3,
|
|
1052
1052
|
ERROR: 4,
|
|
1053
1053
|
SILENT: 5
|
|
1054
|
-
}, t.methodFactory = e ||
|
|
1055
|
-
return s ??
|
|
1056
|
-
}, t.setLevel = function(
|
|
1057
|
-
return s = c(
|
|
1058
|
-
}, t.setDefaultLevel = function(
|
|
1059
|
-
|
|
1054
|
+
}, t.methodFactory = e || li, t.getLevel = function() {
|
|
1055
|
+
return s ?? o ?? l;
|
|
1056
|
+
}, t.setLevel = function(p, h) {
|
|
1057
|
+
return s = c(p), h !== !1 && r(s), Z.call(t);
|
|
1058
|
+
}, t.setDefaultLevel = function(p) {
|
|
1059
|
+
o = c(p), a() || t.setLevel(p, !1);
|
|
1060
1060
|
}, t.resetLevel = function() {
|
|
1061
|
-
s = null,
|
|
1062
|
-
}, t.enableAll = function(
|
|
1063
|
-
t.setLevel(t.levels.TRACE,
|
|
1064
|
-
}, t.disableAll = function(
|
|
1065
|
-
t.setLevel(t.levels.SILENT,
|
|
1061
|
+
s = null, d(), Z.call(t);
|
|
1062
|
+
}, t.enableAll = function(p) {
|
|
1063
|
+
t.setLevel(t.levels.TRACE, p);
|
|
1064
|
+
}, t.disableAll = function(p) {
|
|
1065
|
+
t.setLevel(t.levels.SILENT, p);
|
|
1066
1066
|
}, t.rebuild = function() {
|
|
1067
|
-
if (
|
|
1068
|
-
for (var
|
|
1069
|
-
ee[
|
|
1070
|
-
},
|
|
1071
|
-
|
|
1067
|
+
if (y !== t && (l = c(y.getLevel())), Z.call(t), y === t)
|
|
1068
|
+
for (var p in ee)
|
|
1069
|
+
ee[p].rebuild();
|
|
1070
|
+
}, l = c(
|
|
1071
|
+
y ? y.getLevel() : "WARN"
|
|
1072
1072
|
);
|
|
1073
|
-
var
|
|
1074
|
-
|
|
1073
|
+
var m = a();
|
|
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,34 +1108,34 @@ 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
|
-
var
|
|
1120
|
+
var d = t(n, r, a), c = N[a] || N[""], m = c.template.indexOf("%t") !== -1, p = c.template.indexOf("%l") !== -1, h = c.template.indexOf("%n") !== -1;
|
|
1121
1121
|
return function() {
|
|
1122
1122
|
for (var f = "", w = arguments.length, g = Array(w), b = 0; b < w; b++)
|
|
1123
1123
|
g[b] = arguments[b];
|
|
1124
|
-
if (
|
|
1125
|
-
var
|
|
1126
|
-
c.format ? f += c.format(x,
|
|
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
|
-
const
|
|
1138
|
+
const he = {
|
|
1139
1139
|
debug: "#0ea5e9",
|
|
1140
1140
|
// Blue
|
|
1141
1141
|
info: "#10b981",
|
|
@@ -1145,22 +1145,22 @@ const me = {
|
|
|
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
|
-
return
|
|
1151
|
+
return he[i.toLowerCase()], `%c[${t}]%c %c[${i}]%c ${e ? `%c[${e}]%c ` : ""}`;
|
|
1152
1152
|
},
|
|
1153
1153
|
timestampFormatter(i) {
|
|
1154
1154
|
return i.toTimeString().split(" ")[0] + "." + i.getMilliseconds().toString().padStart(3, "0");
|
|
1155
1155
|
}
|
|
1156
1156
|
});
|
|
1157
|
-
const
|
|
1158
|
-
|
|
1159
|
-
const
|
|
1160
|
-
return function(...
|
|
1161
|
-
if (
|
|
1162
|
-
const s =
|
|
1163
|
-
|
|
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
|
+
const s = he[i] || "#666", n = [
|
|
1163
|
+
o[0],
|
|
1164
1164
|
`color: ${s}; font-weight: bold;`,
|
|
1165
1165
|
// timestamp color
|
|
1166
1166
|
"color: inherit;",
|
|
@@ -1175,30 +1175,30 @@ _.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
|
|
1187
|
-
[
|
|
1185
|
+
y.setLevel("silent");
|
|
1186
|
+
const H = y.getLogger("INIT"), C = y.getLogger("DATA"), v = y.getLogger("UI"), k = y.getLogger("INTERACTION");
|
|
1187
|
+
[H, C, v, k].forEach((i) => {
|
|
1188
1188
|
Te.apply(i, {
|
|
1189
|
-
format(t,
|
|
1190
|
-
return
|
|
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
|
-
const r =
|
|
1201
|
+
const r = he[t] || "#666", a = [
|
|
1202
1202
|
n[0],
|
|
1203
1203
|
`color: ${r}; font-weight: bold;`,
|
|
1204
1204
|
// timestamp
|
|
@@ -1217,21 +1217,140 @@ const B = _.getLogger("INIT"), S = _.getLogger("DATA"), v = _.getLogger("UI"), A
|
|
|
1217
1217
|
};
|
|
1218
1218
|
}, i.setLevel("silent");
|
|
1219
1219
|
});
|
|
1220
|
-
const
|
|
1221
|
-
|
|
1222
|
-
}, hi = () => {
|
|
1223
|
-
lt("debug");
|
|
1220
|
+
const st = (i) => {
|
|
1221
|
+
y.setLevel(i), H.setLevel(i), C.setLevel(i), v.setLevel(i), k.setLevel(i);
|
|
1224
1222
|
}, ui = () => {
|
|
1225
|
-
|
|
1226
|
-
}, fi = (
|
|
1223
|
+
st("debug");
|
|
1224
|
+
}, fi = () => {
|
|
1225
|
+
st("silent");
|
|
1226
|
+
}, gi = (i, e = "debug") => {
|
|
1227
1227
|
({
|
|
1228
|
-
INIT:
|
|
1229
|
-
DATA:
|
|
1228
|
+
INIT: H,
|
|
1229
|
+
DATA: C,
|
|
1230
1230
|
UI: v,
|
|
1231
|
-
INTERACTION:
|
|
1231
|
+
INTERACTION: k
|
|
1232
1232
|
})[i].setLevel(e);
|
|
1233
1233
|
};
|
|
1234
|
-
class
|
|
1234
|
+
class We {
|
|
1235
|
+
constructor(e) {
|
|
1236
|
+
u(this, "container");
|
|
1237
|
+
u(this, "wrapper");
|
|
1238
|
+
u(this, "viewport");
|
|
1239
|
+
u(this, "itemHeight");
|
|
1240
|
+
u(this, "items");
|
|
1241
|
+
u(this, "renderItem");
|
|
1242
|
+
u(this, "bufferSize");
|
|
1243
|
+
u(this, "onVisibleRangeChange");
|
|
1244
|
+
u(this, "onScroll");
|
|
1245
|
+
u(this, "scrollTop", 0);
|
|
1246
|
+
u(this, "viewportHeight", 0);
|
|
1247
|
+
u(this, "visibleStart", 0);
|
|
1248
|
+
u(this, "visibleEnd", 0);
|
|
1249
|
+
u(this, "scrollHandler");
|
|
1250
|
+
u(this, "resizeObserver");
|
|
1251
|
+
this.container = e.container, this.itemHeight = e.itemHeight, this.items = e.items, this.renderItem = e.renderItem, this.bufferSize = e.bufferSize ?? 10, this.onVisibleRangeChange = e.onVisibleRangeChange, this.onScroll = e.onScroll, this.scrollHandler = this.handleScroll.bind(this), this.init();
|
|
1252
|
+
}
|
|
1253
|
+
/**
|
|
1254
|
+
* Initialize virtual scroll DOM structure
|
|
1255
|
+
*
|
|
1256
|
+
* Structure:
|
|
1257
|
+
* container (overflow-y: auto)
|
|
1258
|
+
* └─ wrapper (height: totalItems * itemHeight)
|
|
1259
|
+
* └─ viewport (position: absolute, top: 0)
|
|
1260
|
+
* └─ items (position: absolute, top: index * itemHeight)
|
|
1261
|
+
*/
|
|
1262
|
+
init() {
|
|
1263
|
+
this.container.innerHTML = "", this.wrapper = document.createElement("div"), this.wrapper.style.position = "relative", this.wrapper.style.width = "100%", this.wrapper.style.height = `${this.items.length * this.itemHeight}px`, this.wrapper.className = "ml__virtual-scroll-wrapper", this.viewport = document.createElement("div"), this.viewport.style.position = "absolute", this.viewport.style.top = "0", this.viewport.style.left = "0", this.viewport.style.right = "0", this.viewport.style.width = "100%", this.viewport.className = "ml__virtual-scroll-viewport", this.wrapper.appendChild(this.viewport), this.container.appendChild(this.wrapper), this.container.addEventListener("scroll", this.scrollHandler), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => {
|
|
1264
|
+
this.updateViewportHeight(), this.render();
|
|
1265
|
+
}), this.resizeObserver.observe(this.container)), this.updateViewportHeight(), this.render();
|
|
1266
|
+
}
|
|
1267
|
+
/**
|
|
1268
|
+
* Update viewport height (visible area)
|
|
1269
|
+
*/
|
|
1270
|
+
updateViewportHeight() {
|
|
1271
|
+
this.viewportHeight = this.container.clientHeight;
|
|
1272
|
+
}
|
|
1273
|
+
/**
|
|
1274
|
+
* Handle scroll event
|
|
1275
|
+
*/
|
|
1276
|
+
handleScroll() {
|
|
1277
|
+
this.scrollTop = this.container.scrollTop, this.onScroll && this.onScroll(this.scrollTop), this.render();
|
|
1278
|
+
}
|
|
1279
|
+
/**
|
|
1280
|
+
* Calculate visible range based on scroll position
|
|
1281
|
+
*/
|
|
1282
|
+
calculateVisibleRange() {
|
|
1283
|
+
const e = Math.floor(this.scrollTop / this.itemHeight), t = Math.ceil((this.scrollTop + this.viewportHeight) / this.itemHeight), l = Math.max(0, e - this.bufferSize), o = Math.min(this.items.length, t + this.bufferSize);
|
|
1284
|
+
return { start: l, end: o };
|
|
1285
|
+
}
|
|
1286
|
+
/**
|
|
1287
|
+
* Render visible items
|
|
1288
|
+
*/
|
|
1289
|
+
render() {
|
|
1290
|
+
const { start: e, end: t } = this.calculateVisibleRange();
|
|
1291
|
+
if (e === this.visibleStart && t === this.visibleEnd)
|
|
1292
|
+
return;
|
|
1293
|
+
this.visibleStart = e, this.visibleEnd = t, this.onVisibleRangeChange && this.onVisibleRangeChange(e, t);
|
|
1294
|
+
let 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
|
+
}
|
|
1299
|
+
this.viewport.innerHTML = l;
|
|
1300
|
+
}
|
|
1301
|
+
/**
|
|
1302
|
+
* Update items and re-render
|
|
1303
|
+
*/
|
|
1304
|
+
setItems(e) {
|
|
1305
|
+
this.items = e, this.wrapper.style.height = `${e.length * this.itemHeight}px`, this.updateViewportHeight(), this.visibleStart = -1, this.visibleEnd = -1, this.render();
|
|
1306
|
+
}
|
|
1307
|
+
/**
|
|
1308
|
+
* Scroll to specific item index
|
|
1309
|
+
*/
|
|
1310
|
+
scrollToIndex(e) {
|
|
1311
|
+
if (e < 0 || e >= this.items.length)
|
|
1312
|
+
return;
|
|
1313
|
+
const t = e * this.itemHeight;
|
|
1314
|
+
this.container.scrollTop = t;
|
|
1315
|
+
}
|
|
1316
|
+
/**
|
|
1317
|
+
* Get currently visible range
|
|
1318
|
+
*/
|
|
1319
|
+
getVisibleRange() {
|
|
1320
|
+
return { start: this.visibleStart, end: this.visibleEnd };
|
|
1321
|
+
}
|
|
1322
|
+
/**
|
|
1323
|
+
* Get total number of items
|
|
1324
|
+
*/
|
|
1325
|
+
getItemCount() {
|
|
1326
|
+
return this.items.length;
|
|
1327
|
+
}
|
|
1328
|
+
/**
|
|
1329
|
+
* Update item height and re-render
|
|
1330
|
+
*/
|
|
1331
|
+
setItemHeight(e) {
|
|
1332
|
+
this.itemHeight = e, this.wrapper.style.height = `${this.items.length * e}px`, this.visibleStart = -1, this.visibleEnd = -1, this.render();
|
|
1333
|
+
}
|
|
1334
|
+
/**
|
|
1335
|
+
* Update buffer size
|
|
1336
|
+
*/
|
|
1337
|
+
setBufferSize(e) {
|
|
1338
|
+
this.bufferSize = e, this.visibleStart = -1, this.visibleEnd = -1, this.render();
|
|
1339
|
+
}
|
|
1340
|
+
/**
|
|
1341
|
+
* Refresh/force re-render
|
|
1342
|
+
*/
|
|
1343
|
+
refresh() {
|
|
1344
|
+
this.visibleStart = -1, this.visibleEnd = -1, this.render();
|
|
1345
|
+
}
|
|
1346
|
+
/**
|
|
1347
|
+
* Cleanup and remove event listeners
|
|
1348
|
+
*/
|
|
1349
|
+
destroy() {
|
|
1350
|
+
this.container.removeEventListener("scroll", this.scrollHandler), this.resizeObserver && this.resizeObserver.disconnect(), this.container.innerHTML = "";
|
|
1351
|
+
}
|
|
1352
|
+
}
|
|
1353
|
+
class di {
|
|
1235
1354
|
constructor(e, t = {}) {
|
|
1236
1355
|
u(this, "element");
|
|
1237
1356
|
u(this, "instanceId");
|
|
@@ -1243,6 +1362,7 @@ class ci {
|
|
|
1243
1362
|
u(this, "filteredOptions", []);
|
|
1244
1363
|
u(this, "hiddenInputs", []);
|
|
1245
1364
|
u(this, "focusedIndex", -1);
|
|
1365
|
+
u(this, "matchingIndices", /* @__PURE__ */ new Set());
|
|
1246
1366
|
u(this, "searchTerm", "");
|
|
1247
1367
|
u(this, "isLoading", !1);
|
|
1248
1368
|
u(this, "showSelectedPopover", !1);
|
|
@@ -1258,6 +1378,11 @@ class ci {
|
|
|
1258
1378
|
// Pill tooltip storage
|
|
1259
1379
|
u(this, "pillTooltips", /* @__PURE__ */ new Map());
|
|
1260
1380
|
u(this, "pillTooltipCleanups", /* @__PURE__ */ new Map());
|
|
1381
|
+
// Virtual scroll instance
|
|
1382
|
+
u(this, "virtualScroll", null);
|
|
1383
|
+
u(this, "optionsContainer", null);
|
|
1384
|
+
u(this, "selectedPopoverVirtualScroll", null);
|
|
1385
|
+
u(this, "selectedPopoverContainer", null);
|
|
1261
1386
|
// DOM elements
|
|
1262
1387
|
u(this, "input");
|
|
1263
1388
|
u(this, "dropdown");
|
|
@@ -1277,6 +1402,7 @@ class ci {
|
|
|
1277
1402
|
emptyMessage: e.dataset.emptyMessage || "No results found",
|
|
1278
1403
|
loadingMessage: e.dataset.loadingMessage || "Loading...",
|
|
1279
1404
|
searchInputMode: e.dataset.searchInputMode || "normal",
|
|
1405
|
+
searchMode: e.dataset.searchMode || "filter",
|
|
1280
1406
|
// Number options
|
|
1281
1407
|
pillsThreshold: e.dataset.pillsThreshold ? parseInt(e.dataset.pillsThreshold) : void 0,
|
|
1282
1408
|
minSearchLength: parseInt(e.dataset.minSearchLength || "0") || 0,
|
|
@@ -1372,7 +1498,7 @@ class ci {
|
|
|
1372
1498
|
return Array.isArray(e) ? !1 : this.options.disabledMember && e[this.options.disabledMember] !== void 0 ? !!e[this.options.disabledMember] : this.options.getDisabledCallback ? this.options.getDisabledCallback(e) : !1;
|
|
1373
1499
|
}
|
|
1374
1500
|
init() {
|
|
1375
|
-
this.parseOptions(), this.buildHTML(), this.attachEvents(), this.parseInitialSelection(),
|
|
1501
|
+
this.parseOptions(), this.buildHTML(), this.attachEvents(), this.parseInitialSelection(), H.debug(`Initialized [${this.instanceId}] with options:`, {
|
|
1376
1502
|
placeholder: this.options.searchPlaceholder,
|
|
1377
1503
|
totalOptions: this.allOptions.length,
|
|
1378
1504
|
isCloseOnSelect: this.options.isCloseOnSelect,
|
|
@@ -1387,21 +1513,21 @@ class ci {
|
|
|
1387
1513
|
try {
|
|
1388
1514
|
this.allOptions = JSON.parse(e);
|
|
1389
1515
|
} catch (t) {
|
|
1390
|
-
|
|
1516
|
+
C.error(`[${this.instanceId}] Failed to parse data-options:`, t), this.allOptions = [];
|
|
1391
1517
|
}
|
|
1392
1518
|
else this.options.options && (this.allOptions = this.options.options);
|
|
1393
1519
|
this.filteredOptions = [...this.allOptions];
|
|
1394
1520
|
}
|
|
1395
1521
|
buildHTML() {
|
|
1396
|
-
const e = this.options.container || document.body, t = this.element.getRootNode(),
|
|
1397
|
-
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:`, {
|
|
1398
1524
|
isShadowRoot: t instanceof ShadowRoot,
|
|
1399
|
-
hostElement:
|
|
1400
|
-
elementDir:
|
|
1401
|
-
hasElementDir:
|
|
1525
|
+
hostElement: l,
|
|
1526
|
+
elementDir: l.getAttribute("dir"),
|
|
1527
|
+
hasElementDir: o,
|
|
1402
1528
|
hasAncestorDir: s,
|
|
1403
1529
|
isRTL: this.isRTL
|
|
1404
|
-
}), this.effectivePillsPosition = this.options.pillsPosition || "bottom", this.isRTL && (this.effectivePillsPosition === "left" ? this.effectivePillsPosition = "right" : this.effectivePillsPosition === "right" && (this.effectivePillsPosition = "left")), this.element.classList.add("ml"), this.isRTL && (this.element.classList.add("ml--rtl"),
|
|
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");
|
|
1405
1531
|
const n = document.createElement("div");
|
|
1406
1532
|
n.className = "ml__input-wrapper", this.input = document.createElement("input"), this.input.type = "text", this.input.className = "ml__input", this.input.placeholder = this.options.searchPlaceholder, this.input.autocomplete = "off", this.options.searchInputMode === "readonly" ? this.input.readOnly = !0 : this.options.searchInputMode === "hidden" && (this.input.style.display = "none");
|
|
1407
1533
|
const r = document.createElement("span");
|
|
@@ -1409,7 +1535,29 @@ class ci {
|
|
|
1409
1535
|
const a = document.createElement("div");
|
|
1410
1536
|
a.className = "ml-wrapper", (this.effectivePillsPosition === "left" || this.effectivePillsPosition === "right") && a.classList.add("ml-wrapper--inline"), a.appendChild(n), a.appendChild(this.pillsContainer), this.element.appendChild(a), this.dropdown = document.createElement("div"), this.dropdown.className = "ml__dropdown", e.appendChild(this.dropdown), this.options.searchHint && (this.hint = document.createElement("div"), this.hint.className = "ml__hint", this.hint.textContent = this.options.searchHint, e.appendChild(this.hint)), this.selectedPopover = document.createElement("div"), this.selectedPopover.className = "ml__selected-popover", e.appendChild(this.selectedPopover), this.renderDropdown();
|
|
1411
1537
|
}
|
|
1538
|
+
/**
|
|
1539
|
+
* Check if virtual scroll should be used
|
|
1540
|
+
*/
|
|
1541
|
+
shouldUseVirtualScroll() {
|
|
1542
|
+
if (!this.options.isVirtualScrollEnabled || this.options.isGroupsAllowed && this.hasGroups()) return !1;
|
|
1543
|
+
const e = this.options.virtualScrollThreshold ?? 100;
|
|
1544
|
+
return this.filteredOptions.length >= e;
|
|
1545
|
+
}
|
|
1546
|
+
/**
|
|
1547
|
+
* Check if any options have groups
|
|
1548
|
+
*/
|
|
1549
|
+
hasGroups() {
|
|
1550
|
+
return this.filteredOptions.some((e) => {
|
|
1551
|
+
const t = this.getItemGroup(e);
|
|
1552
|
+
return t && t.trim() !== "";
|
|
1553
|
+
});
|
|
1554
|
+
}
|
|
1412
1555
|
renderDropdown() {
|
|
1556
|
+
if (this.shouldUseVirtualScroll()) {
|
|
1557
|
+
this.dropdown.classList.add("ml__dropdown--virtual"), this.renderDropdownVirtual();
|
|
1558
|
+
return;
|
|
1559
|
+
}
|
|
1560
|
+
this.dropdown.classList.remove("ml__dropdown--virtual");
|
|
1413
1561
|
let e = "";
|
|
1414
1562
|
if (this.isLoading) {
|
|
1415
1563
|
e += '<div class="ml__loader">', e += '<div class="pa-loader pa-loader--sm"></div>', e += `<div class="ml__loading-text">${this.options.loadingMessage}</div>`, e += "</div>", this.dropdown.innerHTML = e;
|
|
@@ -1423,33 +1571,61 @@ class ci {
|
|
|
1423
1571
|
e += `<div class="ml__empty">${this.options.emptyMessage}</div>`;
|
|
1424
1572
|
else if (this.options.isGroupsAllowed) {
|
|
1425
1573
|
const t = this.groupOptions(this.filteredOptions);
|
|
1426
|
-
Object.keys(t).forEach((
|
|
1427
|
-
e += '<div class="ml__group">',
|
|
1428
|
-
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);
|
|
1429
1577
|
}), e += "</div>";
|
|
1430
1578
|
});
|
|
1431
1579
|
} else
|
|
1432
|
-
this.filteredOptions.forEach((t,
|
|
1433
|
-
e += this.renderOption(t,
|
|
1580
|
+
this.filteredOptions.forEach((t, l) => {
|
|
1581
|
+
e += this.renderOption(t, l);
|
|
1434
1582
|
});
|
|
1435
1583
|
e += "</div>", this.dropdown.innerHTML = e;
|
|
1436
1584
|
}
|
|
1585
|
+
/**
|
|
1586
|
+
* Render dropdown with virtual scrolling
|
|
1587
|
+
*/
|
|
1588
|
+
renderDropdownVirtual() {
|
|
1589
|
+
if (!this.virtualScroll) {
|
|
1590
|
+
let l = "";
|
|
1591
|
+
if (this.options.isMultipleEnabled && (this.options.isSelectAllAllowed || this.options.isClearAllAllowed)) {
|
|
1592
|
+
const s = this.options.isActionsSticky ? " ml__actions--sticky" : "";
|
|
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>";
|
|
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");
|
|
1597
|
+
}
|
|
1598
|
+
if (this.filteredOptions.length === 0) {
|
|
1599
|
+
this.optionsContainer.innerHTML = `<div class="ml__empty">${this.options.emptyMessage}</div>`;
|
|
1600
|
+
return;
|
|
1601
|
+
}
|
|
1602
|
+
const e = this.options.optionHeight ?? 50, t = this.options.virtualScrollBuffer ?? 10;
|
|
1603
|
+
requestAnimationFrame(() => {
|
|
1604
|
+
this.optionsContainer && (this.virtualScroll ? this.virtualScroll.setItems(this.filteredOptions) : this.virtualScroll = new We({
|
|
1605
|
+
container: this.optionsContainer,
|
|
1606
|
+
itemHeight: e,
|
|
1607
|
+
items: this.filteredOptions,
|
|
1608
|
+
renderItem: (l, o) => this.renderOption(l, o),
|
|
1609
|
+
bufferSize: t
|
|
1610
|
+
}));
|
|
1611
|
+
});
|
|
1612
|
+
}
|
|
1437
1613
|
renderOption(e, t) {
|
|
1438
|
-
const
|
|
1439
|
-
a &&
|
|
1440
|
-
let
|
|
1441
|
-
return this.options.isCheckboxesShown && this.options.isMultipleEnabled && (
|
|
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"];
|
|
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");
|
|
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;
|
|
1442
1618
|
}
|
|
1443
1619
|
highlightMatch(e, t) {
|
|
1444
1620
|
if (!t) return e;
|
|
1445
|
-
const
|
|
1446
|
-
return e.replace(
|
|
1621
|
+
const l = new RegExp(`(${t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
|
|
1622
|
+
return e.replace(l, "<mark>$1</mark>");
|
|
1447
1623
|
}
|
|
1448
1624
|
groupOptions(e) {
|
|
1449
1625
|
const t = {};
|
|
1450
|
-
return e.forEach((
|
|
1451
|
-
const
|
|
1452
|
-
t[
|
|
1626
|
+
return e.forEach((l) => {
|
|
1627
|
+
const o = this.getItemGroup(l) || "__ungrouped__";
|
|
1628
|
+
t[o] || (t[o] = []), t[o].push(l);
|
|
1453
1629
|
}), t;
|
|
1454
1630
|
}
|
|
1455
1631
|
renderPills() {
|
|
@@ -1467,14 +1643,18 @@ class ci {
|
|
|
1467
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 = "");
|
|
1468
1644
|
return;
|
|
1469
1645
|
}
|
|
1470
|
-
let
|
|
1471
|
-
if (this.options.pillsThreshold !== null && t > this.options.pillsThreshold && (
|
|
1472
|
-
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") {
|
|
1473
1649
|
const s = this.options.getCountPillCallback ? this.options.getCountPillCallback(t) : `${t} selected`;
|
|
1474
1650
|
this.input.placeholder = s;
|
|
1475
1651
|
} else
|
|
1476
1652
|
this.input.placeholder = this.options.searchPlaceholder;
|
|
1477
|
-
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")
|
|
1478
1658
|
this.pillsContainer.className = `ml__pills ml__pills--${this.effectivePillsPosition}`, this.pillsContainer.innerHTML = e.map((s) => {
|
|
1479
1659
|
const n = this.getItemValue(s), r = this.getItemPillDisplayValue(s);
|
|
1480
1660
|
return `
|
|
@@ -1484,25 +1664,43 @@ class ci {
|
|
|
1484
1664
|
</div>
|
|
1485
1665
|
`;
|
|
1486
1666
|
}).join("");
|
|
1487
|
-
else if (
|
|
1667
|
+
else if (l === "partial") {
|
|
1488
1668
|
this.pillsContainer.className = `ml__pills ml__pills--${this.effectivePillsPosition}`;
|
|
1489
1669
|
const s = this.options.pillsMaxVisible || 3, n = e.slice(0, s), r = t - s, a = n.map((c) => {
|
|
1490
|
-
const
|
|
1670
|
+
const m = this.getItemValue(c), p = this.getItemPillDisplayValue(c);
|
|
1491
1671
|
return `
|
|
1492
1672
|
<div class="ml__pill">
|
|
1493
|
-
<span class="ml__pill-text">${
|
|
1494
|
-
<button type="button" class="ml__pill-remove" data-value="${
|
|
1673
|
+
<span class="ml__pill-text">${p}</span>
|
|
1674
|
+
<button type="button" class="ml__pill-remove" data-value="${m}" aria-label="Remove ${p}"></button>
|
|
1495
1675
|
</div>
|
|
1496
1676
|
`;
|
|
1497
1677
|
}).join("");
|
|
1498
|
-
let
|
|
1499
|
-
r > 0 && (
|
|
1678
|
+
let d = "";
|
|
1679
|
+
r > 0 && (d = `
|
|
1500
1680
|
<div class="ml__pill ml__pill--more" data-action="show-selected">
|
|
1501
1681
|
<span class="ml__pill-text">${this.options.getCountPillCallback ? this.options.getCountPillCallback(t, r) : `+${r} more`}</span>
|
|
1502
1682
|
<button type="button" class="ml__pill-remove" data-action="remove-hidden" aria-label="Remove ${r} hidden items"></button>
|
|
1503
1683
|
</div>
|
|
1504
|
-
`), this.pillsContainer.innerHTML = a +
|
|
1505
|
-
} else if (
|
|
1684
|
+
`), this.pillsContainer.innerHTML = a + d;
|
|
1685
|
+
} else if (l === "compact")
|
|
1686
|
+
if (this.pillsContainer.className = `ml__count-display ml__count-display--${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__count-badge-wrapper">
|
|
1695
|
+
<button type="button" class="ml__count-text" data-action="show-selected">
|
|
1696
|
+
${a}
|
|
1697
|
+
</button>
|
|
1698
|
+
<button type="button" class="ml__count-clear" data-action="clear-count" aria-label="Clear all selections"></button>
|
|
1699
|
+
</div>
|
|
1700
|
+
`;
|
|
1701
|
+
} else
|
|
1702
|
+
this.pillsContainer.innerHTML = "";
|
|
1703
|
+
else if (this.pillsContainer.className = `ml__count-display ml__count-display--${this.effectivePillsPosition}`, t > 0) {
|
|
1506
1704
|
const s = this.options.getCountPillCallback ? this.options.getCountPillCallback(t) : `${t} selected`;
|
|
1507
1705
|
this.pillsContainer.innerHTML = `
|
|
1508
1706
|
<div class="ml__count-badge-wrapper">
|
|
@@ -1528,7 +1726,12 @@ class ci {
|
|
|
1528
1726
|
this.options.isSearchEnabled && !this.isOpen && this.open(), this.handleSearch(t);
|
|
1529
1727
|
}), this.input.addEventListener("keydown", (e) => this.handleKeydown(e)), setTimeout(() => {
|
|
1530
1728
|
document.addEventListener("click", (e) => this.handleClickOutside(e));
|
|
1531
|
-
}, 0), this.dropdown.addEventListener("click", (e) => this.handleDropdownClick(e)), this.
|
|
1729
|
+
}, 0), this.dropdown.addEventListener("click", (e) => this.handleDropdownClick(e)), this.dropdown.addEventListener("wheel", (e) => {
|
|
1730
|
+
if (this.virtualScroll)
|
|
1731
|
+
return;
|
|
1732
|
+
const t = e.currentTarget, l = t.scrollTop === 0, o = t.scrollTop + t.clientHeight >= t.scrollHeight;
|
|
1733
|
+
(e.deltaY < 0 && l || e.deltaY > 0 && o) && e.preventDefault(), e.stopPropagation();
|
|
1734
|
+
}, { passive: !1 }), this.pillsContainer.addEventListener("mousedown", (e) => {
|
|
1532
1735
|
e.target.closest(".ml__count-text") && !this.showSelectedPopover && e.stopPropagation();
|
|
1533
1736
|
}), this.pillsContainer.addEventListener("click", (e) => this.handlePillClick(e)), this.countBadge.addEventListener("mousedown", (e) => {
|
|
1534
1737
|
this.showSelectedPopover || e.stopPropagation();
|
|
@@ -1537,33 +1740,49 @@ class ci {
|
|
|
1537
1740
|
}), this.selectedPopover.addEventListener("click", (e) => this.handleSelectedPopoverClick(e));
|
|
1538
1741
|
}
|
|
1539
1742
|
async handleSearch(e) {
|
|
1540
|
-
if (this.searchTerm = e,
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1743
|
+
if (this.searchTerm = e, !this.options.isSearchEnabled)
|
|
1744
|
+
return;
|
|
1745
|
+
let t = e;
|
|
1746
|
+
if (this.options.beforeSearchCallback) {
|
|
1747
|
+
const l = this.options.beforeSearchCallback(e);
|
|
1748
|
+
if (l === null) {
|
|
1749
|
+
C.debug(`[${this.instanceId}] beforeSearchCallback blocked search for term:`, e), this.filteredOptions = [...this.allOptions], this.matchingIndices.clear(), this.renderDropdown();
|
|
1750
|
+
return;
|
|
1751
|
+
}
|
|
1752
|
+
t = l, t !== e && C.debug(`[${this.instanceId}] beforeSearchCallback transformed: "${e}" -> "${t}"`);
|
|
1753
|
+
}
|
|
1754
|
+
if (this.options.searchCallback) {
|
|
1755
|
+
if (t.length < this.options.minSearchLength) {
|
|
1756
|
+
this.isLoading = !1, this.options.isKeepOptionsOnSearch ? (this.filteredOptions = [...this.allOptions], C.debug(`[${this.instanceId}] Search term below minimum, showing ${this.allOptions.length} initial options`)) : this.filteredOptions = [], this.matchingIndices.clear(), this.renderDropdown();
|
|
1757
|
+
return;
|
|
1758
|
+
}
|
|
1759
|
+
this.isLoading = !0, this.renderDropdown(), C.debug(`[${this.instanceId}] Loading data for search term:`, t);
|
|
1760
|
+
try {
|
|
1761
|
+
const l = await this.options.searchCallback(t);
|
|
1762
|
+
if (this.searchTerm === e) {
|
|
1763
|
+
const o = l || [];
|
|
1764
|
+
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`);
|
|
1554
1765
|
}
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1766
|
+
} catch (l) {
|
|
1767
|
+
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();
|
|
1768
|
+
}
|
|
1769
|
+
} else {
|
|
1770
|
+
if (!t)
|
|
1771
|
+
this.filteredOptions = [...this.allOptions], this.matchingIndices.clear(), this.focusedIndex = this.filteredOptions.length > 0 ? 0 : -1;
|
|
1772
|
+
else {
|
|
1773
|
+
const l = this.options.searchMode || "filter", o = t.toLowerCase();
|
|
1774
|
+
if (l === "filter")
|
|
1775
|
+
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}"`);
|
|
1776
|
+
else {
|
|
1777
|
+
this.filteredOptions = [...this.allOptions], this.matchingIndices.clear();
|
|
1778
|
+
let s = -1;
|
|
1779
|
+
this.allOptions.forEach((n, r) => {
|
|
1780
|
+
this.getItemSearchValue(n).toLowerCase().includes(o) && (this.matchingIndices.add(r), s === -1 && (s = r));
|
|
1781
|
+
}), s >= 0 ? (this.focusedIndex = s, C.debug(`[${this.instanceId}] Navigate mode: ${this.matchingIndices.size} matches, jumped to index ${s}`)) : C.debug(`[${this.instanceId}] Navigate mode: No matches found, keeping previous focus`);
|
|
1564
1782
|
}
|
|
1565
|
-
}
|
|
1566
|
-
|
|
1783
|
+
}
|
|
1784
|
+
this.renderDropdown(), this.options.searchMode === "navigate" && this.focusedIndex >= 0 && this.scrollToFocused();
|
|
1785
|
+
}
|
|
1567
1786
|
}
|
|
1568
1787
|
handleKeydown(e) {
|
|
1569
1788
|
if (!this.isOpen) {
|
|
@@ -1571,18 +1790,18 @@ class ci {
|
|
|
1571
1790
|
return;
|
|
1572
1791
|
}
|
|
1573
1792
|
if (!this.options.isSearchEnabled) {
|
|
1574
|
-
const t = e.key.length === 1 || e.key === "Backspace" || e.key === "Delete",
|
|
1575
|
-
if (t && !
|
|
1793
|
+
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);
|
|
1794
|
+
if (t && !l) {
|
|
1576
1795
|
e.preventDefault();
|
|
1577
1796
|
return;
|
|
1578
1797
|
}
|
|
1579
1798
|
}
|
|
1580
1799
|
switch (e.key) {
|
|
1581
1800
|
case "ArrowDown":
|
|
1582
|
-
e.preventDefault(), this.focusNext();
|
|
1801
|
+
e.preventDefault(), e.ctrlKey || e.metaKey ? this.focusNextMatch() : this.focusNext();
|
|
1583
1802
|
break;
|
|
1584
1803
|
case "ArrowUp":
|
|
1585
|
-
e.preventDefault(), this.focusPrevious();
|
|
1804
|
+
e.preventDefault(), e.ctrlKey || e.metaKey ? this.focusPreviousMatch() : this.focusPrevious();
|
|
1586
1805
|
break;
|
|
1587
1806
|
case "Enter":
|
|
1588
1807
|
e.preventDefault(), this.focusedIndex >= 0 ? this.toggleOption(this.filteredOptions[this.focusedIndex]) : this.options.isAddNewAllowed && this.options.addNewCallback && this.input.value.trim() && this.handleAddNew(this.input.value.trim());
|
|
@@ -1608,20 +1827,20 @@ class ci {
|
|
|
1608
1827
|
}
|
|
1609
1828
|
}
|
|
1610
1829
|
handleDropdownClick(e) {
|
|
1611
|
-
|
|
1830
|
+
k.debug(`[${this.instanceId}] Dropdown clicked`, { target: e.target.className }), e.stopPropagation();
|
|
1612
1831
|
const t = e.target.closest("[data-action]");
|
|
1613
1832
|
if (t) {
|
|
1614
1833
|
e.preventDefault();
|
|
1615
|
-
const
|
|
1616
|
-
|
|
1834
|
+
const o = t.dataset.action;
|
|
1835
|
+
k.debug(`[${this.instanceId}] Action button clicked:`, o), o === "select-all" ? this.selectAll() : o === "clear-all" && this.clearAll();
|
|
1617
1836
|
return;
|
|
1618
1837
|
}
|
|
1619
|
-
const
|
|
1620
|
-
if (
|
|
1838
|
+
const l = e.target.closest(".ml__option");
|
|
1839
|
+
if (l && !l.classList.contains("ml__option--disabled")) {
|
|
1621
1840
|
e.preventDefault();
|
|
1622
|
-
const
|
|
1623
|
-
|
|
1624
|
-
value:
|
|
1841
|
+
const o = l.dataset.value, s = this.filteredOptions.find((n) => String(this.getItemValue(n)) === o);
|
|
1842
|
+
k.debug(`[${this.instanceId}] Option clicked:`, {
|
|
1843
|
+
value: o,
|
|
1625
1844
|
closeOnSelect: this.options.isCloseOnSelect,
|
|
1626
1845
|
placeholder: this.options.searchPlaceholder
|
|
1627
1846
|
}), s && this.toggleOption(s);
|
|
@@ -1629,32 +1848,32 @@ class ci {
|
|
|
1629
1848
|
}
|
|
1630
1849
|
handlePillClick(e) {
|
|
1631
1850
|
if (e.target.closest(".ml__count-clear")) {
|
|
1632
|
-
e.preventDefault(), e.stopPropagation(),
|
|
1851
|
+
e.preventDefault(), e.stopPropagation(), k.debug(`[${this.instanceId}] Count clear button clicked`), this.clearAll();
|
|
1633
1852
|
return;
|
|
1634
1853
|
}
|
|
1635
1854
|
if (e.target.closest(".ml__count-text")) {
|
|
1636
1855
|
e.preventDefault(), e.stopPropagation(), this.toggleSelectedPopover();
|
|
1637
1856
|
return;
|
|
1638
1857
|
}
|
|
1639
|
-
const
|
|
1640
|
-
if (
|
|
1641
|
-
if (e.preventDefault(), e.stopPropagation(),
|
|
1642
|
-
|
|
1858
|
+
const o = e.target.closest(".ml__pill-remove");
|
|
1859
|
+
if (o) {
|
|
1860
|
+
if (e.preventDefault(), e.stopPropagation(), o.dataset.action === "remove-hidden") {
|
|
1861
|
+
k.debug(`[${this.instanceId}] Remove hidden items button clicked`);
|
|
1643
1862
|
const a = this.options.pillsMaxVisible || 3;
|
|
1644
|
-
Array.from(this.selectedOptions.values()).slice(a).forEach((
|
|
1863
|
+
Array.from(this.selectedOptions.values()).slice(a).forEach((m) => this.deselectOption(m));
|
|
1645
1864
|
return;
|
|
1646
1865
|
}
|
|
1647
|
-
const n =
|
|
1866
|
+
const n = o.dataset.value, r = this.selectedOptions.get(n);
|
|
1648
1867
|
r && this.deselectOption(r);
|
|
1649
1868
|
return;
|
|
1650
1869
|
}
|
|
1651
1870
|
if (e.target.closest(".ml__pill--more") && !e.target.closest(".ml__pill-remove")) {
|
|
1652
|
-
e.preventDefault(), e.stopPropagation(),
|
|
1871
|
+
e.preventDefault(), e.stopPropagation(), k.debug(`[${this.instanceId}] '+X more' badge clicked, showing popover`), this.toggleSelectedPopover();
|
|
1653
1872
|
return;
|
|
1654
1873
|
}
|
|
1655
1874
|
}
|
|
1656
1875
|
handleClickOutside(e) {
|
|
1657
|
-
var
|
|
1876
|
+
var o;
|
|
1658
1877
|
const t = e.composedPath();
|
|
1659
1878
|
if (this.showSelectedPopover && !t.some(
|
|
1660
1879
|
(n) => n instanceof Node && (this.selectedPopover.contains(n) || this.countBadge.contains(n) || n.closest && n.closest(".ml__count-text"))
|
|
@@ -1663,22 +1882,22 @@ class ci {
|
|
|
1663
1882
|
return;
|
|
1664
1883
|
}
|
|
1665
1884
|
if (!this.isOpen) return;
|
|
1666
|
-
const
|
|
1885
|
+
const l = t.some(
|
|
1667
1886
|
(s) => s instanceof Node && (this.element.contains(s) || this.dropdown.contains(s) || this.hint && this.hint.contains(s))
|
|
1668
1887
|
);
|
|
1669
|
-
|
|
1888
|
+
k.debug(`[${this.instanceId}] handleClickOutside`, {
|
|
1670
1889
|
target: e.target.className,
|
|
1671
1890
|
targetTag: e.target.tagName,
|
|
1672
|
-
clickedInside:
|
|
1891
|
+
clickedInside: l,
|
|
1673
1892
|
pathLength: t.length,
|
|
1674
|
-
firstInPath: (
|
|
1893
|
+
firstInPath: (o = t[0]) == null ? void 0 : o.tagName,
|
|
1675
1894
|
elementContains: t.some((s) => s instanceof Node && this.element.contains(s)),
|
|
1676
1895
|
dropdownContains: t.some((s) => s instanceof Node && this.dropdown.contains(s)),
|
|
1677
1896
|
isConnected: this.dropdown.isConnected
|
|
1678
|
-
}),
|
|
1897
|
+
}), l || (k.warn(`[${this.instanceId}] Closing dropdown due to click outside`), this.close());
|
|
1679
1898
|
}
|
|
1680
1899
|
focusNext() {
|
|
1681
|
-
this.filteredOptions.length !== 0 && (this.focusedIndex = (this.focusedIndex + 1)
|
|
1900
|
+
this.filteredOptions.length !== 0 && (this.focusedIndex = Math.min(this.filteredOptions.length - 1, this.focusedIndex + 1), this.renderDropdown(), this.scrollToFocused());
|
|
1682
1901
|
}
|
|
1683
1902
|
focusPrevious() {
|
|
1684
1903
|
this.filteredOptions.length !== 0 && (this.focusedIndex = this.focusedIndex <= 0 ? this.filteredOptions.length - 1 : this.focusedIndex - 1, this.renderDropdown(), this.scrollToFocused());
|
|
@@ -1689,6 +1908,16 @@ class ci {
|
|
|
1689
1908
|
focusLast() {
|
|
1690
1909
|
this.filteredOptions.length !== 0 && (this.focusedIndex = this.filteredOptions.length - 1, this.renderDropdown(), this.scrollToFocused());
|
|
1691
1910
|
}
|
|
1911
|
+
focusNextMatch() {
|
|
1912
|
+
if (this.matchingIndices.size === 0) return;
|
|
1913
|
+
const e = Array.from(this.matchingIndices).sort((o, s) => o - s), t = e.findIndex((o) => o === this.focusedIndex), l = (t + 1) % e.length;
|
|
1914
|
+
this.focusedIndex = e[l], this.renderDropdown(), this.scrollToFocused(), k.debug(`[${this.instanceId}] Jumped to next match: index ${this.focusedIndex} (${t + 1} of ${e.length})`);
|
|
1915
|
+
}
|
|
1916
|
+
focusPreviousMatch() {
|
|
1917
|
+
if (this.matchingIndices.size === 0) return;
|
|
1918
|
+
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;
|
|
1919
|
+
this.focusedIndex = e[l], this.renderDropdown(), this.scrollToFocused(), k.debug(`[${this.instanceId}] Jumped to previous match: index ${this.focusedIndex} (${t + 1} of ${e.length})`);
|
|
1920
|
+
}
|
|
1692
1921
|
focusPageUp() {
|
|
1693
1922
|
this.filteredOptions.length !== 0 && (this.focusedIndex = Math.max(0, this.focusedIndex - 10), this.renderDropdown(), this.scrollToFocused());
|
|
1694
1923
|
}
|
|
@@ -1696,16 +1925,20 @@ class ci {
|
|
|
1696
1925
|
this.filteredOptions.length !== 0 && (this.focusedIndex = Math.min(this.filteredOptions.length - 1, this.focusedIndex + 10), this.renderDropdown(), this.scrollToFocused());
|
|
1697
1926
|
}
|
|
1698
1927
|
scrollToFocused() {
|
|
1699
|
-
|
|
1700
|
-
|
|
1928
|
+
if (this.virtualScroll && this.focusedIndex >= 0)
|
|
1929
|
+
this.virtualScroll.scrollToIndex(this.focusedIndex);
|
|
1930
|
+
else {
|
|
1931
|
+
const e = this.dropdown.querySelector(".ml__option--focused");
|
|
1932
|
+
e && e.scrollIntoView({ block: "nearest", behavior: "smooth" });
|
|
1933
|
+
}
|
|
1701
1934
|
}
|
|
1702
1935
|
toggleOption(e) {
|
|
1703
|
-
const t = this.getItemValue(e),
|
|
1704
|
-
if (
|
|
1705
|
-
this.selectedValues.has(
|
|
1936
|
+
const t = this.getItemValue(e), l = String(t);
|
|
1937
|
+
if (k.debug(`[${this.instanceId}] toggleOption called`, { value: t, multiple: this.options.isMultipleEnabled }), !this.options.isMultipleEnabled) {
|
|
1938
|
+
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();
|
|
1706
1939
|
return;
|
|
1707
1940
|
}
|
|
1708
|
-
this.selectedValues.has(
|
|
1941
|
+
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`, {
|
|
1709
1942
|
closeOnSelect: this.options.isCloseOnSelect,
|
|
1710
1943
|
willClose: this.options.isCloseOnSelect === !0,
|
|
1711
1944
|
placeholder: this.options.searchPlaceholder
|
|
@@ -1714,26 +1947,26 @@ class ci {
|
|
|
1714
1947
|
async handleAddNew(e) {
|
|
1715
1948
|
if (this.options.addNewCallback)
|
|
1716
1949
|
try {
|
|
1717
|
-
|
|
1950
|
+
C.debug(`[${this.instanceId}] Adding new option:`, e);
|
|
1718
1951
|
const t = await this.options.addNewCallback(e);
|
|
1719
1952
|
this.allOptions.push(t), this.filteredOptions.push(t), this.selectOption(t), this.input.value = "", this.renderDropdown(), this.renderPills(), this.options.isCloseOnSelect && this.close();
|
|
1720
1953
|
} catch (t) {
|
|
1721
|
-
|
|
1954
|
+
C.error(`[${this.instanceId}] Error adding new option:`, t);
|
|
1722
1955
|
}
|
|
1723
1956
|
}
|
|
1724
1957
|
selectOption(e) {
|
|
1725
|
-
const t = this.getItemValue(e),
|
|
1726
|
-
this.selectedValues.add(
|
|
1958
|
+
const t = this.getItemValue(e), l = String(t);
|
|
1959
|
+
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());
|
|
1727
1960
|
}
|
|
1728
1961
|
deselectOption(e) {
|
|
1729
|
-
const t = this.getItemValue(e),
|
|
1730
|
-
this.selectedValues.delete(
|
|
1962
|
+
const t = this.getItemValue(e), l = String(t);
|
|
1963
|
+
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());
|
|
1731
1964
|
}
|
|
1732
1965
|
selectAll() {
|
|
1733
1966
|
this.filteredOptions.forEach((e) => {
|
|
1734
1967
|
if (!this.getItemDisabled(e)) {
|
|
1735
|
-
const t = this.getItemValue(e),
|
|
1736
|
-
this.selectedValues.add(
|
|
1968
|
+
const t = this.getItemValue(e), l = String(t);
|
|
1969
|
+
this.selectedValues.add(l), this.selectedOptions.set(l, e);
|
|
1737
1970
|
}
|
|
1738
1971
|
}), this.renderDropdown(), this.renderPills(), this.updateHiddenInput(), this.options.changeCallback && this.options.changeCallback(this.getSelected());
|
|
1739
1972
|
}
|
|
@@ -1755,7 +1988,7 @@ class ci {
|
|
|
1755
1988
|
}), 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();
|
|
1756
1989
|
}
|
|
1757
1990
|
positionDropdown() {
|
|
1758
|
-
this.dropdownCleanup =
|
|
1991
|
+
this.dropdownCleanup = oe(
|
|
1759
1992
|
this.input,
|
|
1760
1993
|
this.dropdown,
|
|
1761
1994
|
() => {
|
|
@@ -1767,11 +2000,11 @@ class ci {
|
|
|
1767
2000
|
re(this.input, this.dropdown, {
|
|
1768
2001
|
placement: e,
|
|
1769
2002
|
middleware: t
|
|
1770
|
-
}).then(({ x:
|
|
2003
|
+
}).then(({ x: l, y: o, placement: s }) => {
|
|
1771
2004
|
this.options.isPlacementLocked && !this.dropdownPlacement && (this.dropdownPlacement = s, v.debug(`[${this.instanceId}] Locked dropdown placement:`, s));
|
|
1772
2005
|
const n = {
|
|
1773
|
-
left: `${
|
|
1774
|
-
top: `${
|
|
2006
|
+
left: `${l}px`,
|
|
2007
|
+
top: `${o}px`,
|
|
1775
2008
|
width: `${this.input.offsetWidth}px`
|
|
1776
2009
|
};
|
|
1777
2010
|
this.options.dropdownMinWidth && (n.minWidth = this.options.dropdownMinWidth), Object.assign(this.dropdown.style, n), this.hint && this.isOpen && this.positionHint();
|
|
@@ -1780,7 +2013,7 @@ class ci {
|
|
|
1780
2013
|
);
|
|
1781
2014
|
}
|
|
1782
2015
|
positionHint() {
|
|
1783
|
-
this.hint && (this.hintCleanup && this.hintCleanup(), this.hintCleanup =
|
|
2016
|
+
this.hint && (this.hintCleanup && this.hintCleanup(), this.hintCleanup = oe(
|
|
1784
2017
|
this.input,
|
|
1785
2018
|
this.hint,
|
|
1786
2019
|
() => {
|
|
@@ -1792,10 +2025,10 @@ class ci {
|
|
|
1792
2025
|
// Don't use flip() - we want hint to stay opposite of dropdown
|
|
1793
2026
|
ne({ padding: 8 })
|
|
1794
2027
|
]
|
|
1795
|
-
}).then(({ x: t, y:
|
|
2028
|
+
}).then(({ x: t, y: l }) => {
|
|
1796
2029
|
Object.assign(this.hint.style, {
|
|
1797
2030
|
left: `${t}px`,
|
|
1798
|
-
top: `${
|
|
2031
|
+
top: `${l}px`
|
|
1799
2032
|
});
|
|
1800
2033
|
});
|
|
1801
2034
|
}
|
|
@@ -1805,27 +2038,31 @@ class ci {
|
|
|
1805
2038
|
const e = this.element.dataset.initialValues;
|
|
1806
2039
|
if (e)
|
|
1807
2040
|
try {
|
|
1808
|
-
JSON.parse(e).forEach((
|
|
1809
|
-
const
|
|
1810
|
-
this.selectedValues.add(
|
|
1811
|
-
const s = this.allOptions.find((n) => String(this.getItemValue(n)) ===
|
|
1812
|
-
s && this.selectedOptions.set(
|
|
2041
|
+
JSON.parse(e).forEach((l) => {
|
|
2042
|
+
const o = String(l);
|
|
2043
|
+
this.selectedValues.add(o);
|
|
2044
|
+
const s = this.allOptions.find((n) => String(this.getItemValue(n)) === o);
|
|
2045
|
+
s && this.selectedOptions.set(o, s);
|
|
1813
2046
|
}), this.renderPills();
|
|
1814
2047
|
} catch (t) {
|
|
1815
|
-
|
|
2048
|
+
C.error(`[${this.instanceId}] Failed to parse initial values:`, t);
|
|
1816
2049
|
}
|
|
1817
2050
|
}
|
|
1818
2051
|
toggleSelectedPopover() {
|
|
1819
2052
|
this.showSelectedPopover ? this.hideSelectedPopover() : this.showPopover();
|
|
1820
2053
|
}
|
|
1821
2054
|
showPopover() {
|
|
1822
|
-
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();
|
|
2055
|
+
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();
|
|
1823
2056
|
}
|
|
1824
2057
|
hideSelectedPopover() {
|
|
1825
|
-
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);
|
|
2058
|
+
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);
|
|
1826
2059
|
}
|
|
1827
2060
|
renderSelectedPopover() {
|
|
1828
2061
|
const e = Array.from(this.selectedOptions.values()), t = this.selectedValues.size;
|
|
2062
|
+
if (t >= 100) {
|
|
2063
|
+
this.renderSelectedPopoverVirtual(e, t);
|
|
2064
|
+
return;
|
|
2065
|
+
}
|
|
1829
2066
|
this.selectedPopover.innerHTML = `
|
|
1830
2067
|
<div class="ml__selected-popover-header">
|
|
1831
2068
|
<span>Selected Items (${t})</span>
|
|
@@ -1833,31 +2070,66 @@ class ci {
|
|
|
1833
2070
|
</div>
|
|
1834
2071
|
<div class="ml__selected-popover-body">
|
|
1835
2072
|
${e.map((o) => {
|
|
1836
|
-
const
|
|
2073
|
+
const s = this.getItemValue(o), n = this.getItemPillDisplayValue(o);
|
|
1837
2074
|
return `
|
|
1838
2075
|
<div class="ml__pill">
|
|
1839
|
-
<span class="ml__pill-text">${
|
|
1840
|
-
<button type="button" class="ml__pill-remove" data-value="${
|
|
2076
|
+
<span class="ml__pill-text">${n}</span>
|
|
2077
|
+
<button type="button" class="ml__pill-remove" data-value="${s}" aria-label="Remove ${n}"></button>
|
|
1841
2078
|
</div>
|
|
1842
2079
|
`;
|
|
1843
2080
|
}).join("")}
|
|
1844
2081
|
</div>
|
|
1845
2082
|
`;
|
|
1846
2083
|
}
|
|
2084
|
+
renderSelectedPopoverVirtual(e, t) {
|
|
2085
|
+
if (this.selectedPopoverVirtualScroll) {
|
|
2086
|
+
const r = this.selectedPopover.querySelector(".ml__selected-popover-header span");
|
|
2087
|
+
r && (r.textContent = `Selected Items (${t})`);
|
|
2088
|
+
} else {
|
|
2089
|
+
const r = `
|
|
2090
|
+
<div class="ml__selected-popover-header">
|
|
2091
|
+
<span>Selected Items (${t})</span>
|
|
2092
|
+
<button type="button" class="ml__selected-popover-close" aria-label="Close">×</button>
|
|
2093
|
+
</div>
|
|
2094
|
+
<div class="ml__selected-popover-body ml__selected-popover-body--virtual" style="height: 18rem; overflow-y: auto; position: relative;"></div>
|
|
2095
|
+
`;
|
|
2096
|
+
this.selectedPopover.innerHTML = r, this.selectedPopoverContainer = this.selectedPopover.querySelector(".ml__selected-popover-body");
|
|
2097
|
+
}
|
|
2098
|
+
if (!this.selectedPopoverContainer) return;
|
|
2099
|
+
const s = (this.options.pillHeight ?? 36) + 4, n = this.options.virtualScrollBuffer ?? 10;
|
|
2100
|
+
requestAnimationFrame(() => {
|
|
2101
|
+
this.selectedPopoverContainer && (this.selectedPopoverVirtualScroll ? this.selectedPopoverVirtualScroll.setItems(e) : this.selectedPopoverVirtualScroll = new We({
|
|
2102
|
+
container: this.selectedPopoverContainer,
|
|
2103
|
+
itemHeight: s,
|
|
2104
|
+
items: e,
|
|
2105
|
+
renderItem: (r) => this.renderPillForPopover(r),
|
|
2106
|
+
bufferSize: n
|
|
2107
|
+
}));
|
|
2108
|
+
});
|
|
2109
|
+
}
|
|
2110
|
+
renderPillForPopover(e) {
|
|
2111
|
+
const t = this.getItemValue(e), l = this.getItemPillDisplayValue(e);
|
|
2112
|
+
return `
|
|
2113
|
+
<div class="ml__pill">
|
|
2114
|
+
<span class="ml__pill-text">${l}</span>
|
|
2115
|
+
<button type="button" class="ml__pill-remove" data-value="${t}" aria-label="Remove ${l}"></button>
|
|
2116
|
+
</div>
|
|
2117
|
+
`;
|
|
2118
|
+
}
|
|
1847
2119
|
handleSelectedPopoverClick(e) {
|
|
1848
2120
|
if (e.stopPropagation(), e.target.closest(".ml__selected-popover-close")) {
|
|
1849
2121
|
e.preventDefault(), this.hideSelectedPopover();
|
|
1850
2122
|
return;
|
|
1851
2123
|
}
|
|
1852
|
-
const
|
|
1853
|
-
if (
|
|
2124
|
+
const l = e.target.closest(".ml__pill-remove");
|
|
2125
|
+
if (l) {
|
|
1854
2126
|
e.preventDefault();
|
|
1855
|
-
const
|
|
2127
|
+
const o = l.dataset.value, s = this.selectedOptions.get(o);
|
|
1856
2128
|
s && (this.deselectOption(s), this.renderSelectedPopover(), this.selectedValues.size === 0 && this.hideSelectedPopover());
|
|
1857
2129
|
}
|
|
1858
2130
|
}
|
|
1859
2131
|
positionSelectedPopover() {
|
|
1860
|
-
this.selectedPopoverCleanup =
|
|
2132
|
+
this.selectedPopoverCleanup = oe(
|
|
1861
2133
|
this.input,
|
|
1862
2134
|
this.selectedPopover,
|
|
1863
2135
|
() => {
|
|
@@ -1869,11 +2141,11 @@ class ci {
|
|
|
1869
2141
|
...this.selectedPopoverPlacement ? [] : [xe()],
|
|
1870
2142
|
ne({ padding: 8 })
|
|
1871
2143
|
]
|
|
1872
|
-
}).then(({ x: t, y:
|
|
1873
|
-
this.selectedPopoverPlacement || (this.selectedPopoverPlacement =
|
|
2144
|
+
}).then(({ x: t, y: l, placement: o }) => {
|
|
2145
|
+
this.selectedPopoverPlacement || (this.selectedPopoverPlacement = o, v.debug(`[${this.instanceId}] Locked popover placement:`, o));
|
|
1874
2146
|
const s = {
|
|
1875
2147
|
left: `${t}px`,
|
|
1876
|
-
top: `${
|
|
2148
|
+
top: `${l}px`,
|
|
1877
2149
|
width: `${this.input.offsetWidth}px`
|
|
1878
2150
|
};
|
|
1879
2151
|
this.options.dropdownMinWidth && (s.minWidth = this.options.dropdownMinWidth), Object.assign(this.selectedPopover.style, s);
|
|
@@ -1886,20 +2158,20 @@ class ci {
|
|
|
1886
2158
|
// ========================================================================
|
|
1887
2159
|
updateHiddenInput() {
|
|
1888
2160
|
if (!this.options.formFieldId) return;
|
|
1889
|
-
this.hiddenInputs.forEach((
|
|
1890
|
-
const e = this.options.valueFormat || "json", t = Array.from(this.selectedOptions.values()).map((
|
|
2161
|
+
this.hiddenInputs.forEach((o) => o.remove()), this.hiddenInputs = [];
|
|
2162
|
+
const e = this.options.valueFormat || "json", t = Array.from(this.selectedOptions.values()).map((o) => this.getItemValue(o)), l = this.options.hostElement || this.element;
|
|
1891
2163
|
if (e === "array")
|
|
1892
|
-
t.forEach((
|
|
2164
|
+
t.forEach((o) => {
|
|
1893
2165
|
const s = document.createElement("input");
|
|
1894
|
-
s.type = "hidden", s.name = `${this.options.formFieldId}[]`, s.value = String(
|
|
2166
|
+
s.type = "hidden", s.name = `${this.options.formFieldId}[]`, s.value = String(o), l.appendChild(s), this.hiddenInputs.push(s);
|
|
1895
2167
|
});
|
|
1896
2168
|
else {
|
|
1897
|
-
const
|
|
1898
|
-
|
|
2169
|
+
const o = document.createElement("input");
|
|
2170
|
+
o.type = "hidden", o.name = this.options.formFieldId, o.id = this.options.formFieldId, o.value = this.getFormValue(), l.appendChild(o), this.hiddenInputs.push(o);
|
|
1899
2171
|
}
|
|
1900
2172
|
}
|
|
1901
2173
|
getFormValue() {
|
|
1902
|
-
const e = Array.from(this.selectedOptions.values()).map((
|
|
2174
|
+
const e = Array.from(this.selectedOptions.values()).map((l) => this.getItemValue(l));
|
|
1903
2175
|
return this.options.getValueFormatCallback ? this.options.getValueFormatCallback(e) : (this.options.valueFormat || "json") === "csv" ? e.join(",") : JSON.stringify(e);
|
|
1904
2176
|
}
|
|
1905
2177
|
// ========================================================================
|
|
@@ -1910,8 +2182,8 @@ class ci {
|
|
|
1910
2182
|
}
|
|
1911
2183
|
setSelected(e) {
|
|
1912
2184
|
this.selectedValues = new Set(e.map((t) => String(t))), this.selectedOptions.clear(), e.forEach((t) => {
|
|
1913
|
-
const
|
|
1914
|
-
|
|
2185
|
+
const l = String(t), o = this.allOptions.find((s) => String(this.getItemValue(s)) === l);
|
|
2186
|
+
o && this.selectedOptions.set(l, o);
|
|
1915
2187
|
}), this.renderDropdown(), this.renderPills(), this.updateHiddenInput();
|
|
1916
2188
|
}
|
|
1917
2189
|
get selectedItem() {
|
|
@@ -1940,70 +2212,70 @@ class ci {
|
|
|
1940
2212
|
return;
|
|
1941
2213
|
}
|
|
1942
2214
|
const e = this.pillsContainer.querySelectorAll(".ml__pill:not(.ml__pill--more)");
|
|
1943
|
-
v.debug(`[${this.instanceId}] Found ${e.length} pills to attach tooltips to`), e.forEach((
|
|
1944
|
-
const
|
|
2215
|
+
v.debug(`[${this.instanceId}] Found ${e.length} pills to attach tooltips to`), e.forEach((l) => {
|
|
2216
|
+
const o = l, s = o.querySelector(".ml__pill-remove");
|
|
1945
2217
|
if (!s) return;
|
|
1946
2218
|
const n = s.dataset.value, r = this.selectedOptions.get(n);
|
|
1947
2219
|
if (!r) return;
|
|
1948
|
-
const a =
|
|
2220
|
+
const a = o.querySelector(".ml__pill-text");
|
|
1949
2221
|
a && this.createTooltipForElement(a, r, n);
|
|
1950
|
-
const
|
|
1951
|
-
this.createRemoveButtonTooltip(s,
|
|
2222
|
+
const d = this.getItemPillDisplayValue(r);
|
|
2223
|
+
this.createRemoveButtonTooltip(s, d, n);
|
|
1952
2224
|
});
|
|
1953
2225
|
const t = this.pillsContainer.querySelector(".ml__pill--more");
|
|
1954
2226
|
if (t) {
|
|
1955
|
-
const
|
|
1956
|
-
if (
|
|
1957
|
-
const
|
|
1958
|
-
this.createRemoveButtonTooltip(
|
|
2227
|
+
const l = t.querySelector(".ml__pill-remove");
|
|
2228
|
+
if (l && l.dataset.action === "remove-hidden") {
|
|
2229
|
+
const o = this.options.pillsMaxVisible || 3, n = Array.from(this.selectedOptions.values()).length - o;
|
|
2230
|
+
this.createRemoveButtonTooltip(l, `${n} hidden items`, "more-badge-remove");
|
|
1959
2231
|
}
|
|
1960
2232
|
}
|
|
1961
2233
|
}
|
|
1962
|
-
createTooltipForElement(e, t,
|
|
1963
|
-
const
|
|
1964
|
-
|
|
2234
|
+
createTooltipForElement(e, t, l) {
|
|
2235
|
+
const o = document.createElement("div");
|
|
2236
|
+
o.className = "ml__pill-tooltip";
|
|
1965
2237
|
let s;
|
|
1966
2238
|
if (this.options.getPillTooltipCallback)
|
|
1967
2239
|
s = this.options.getPillTooltipCallback(t), v.debug(`[${this.instanceId}] Using custom callback for tooltip content`);
|
|
1968
2240
|
else {
|
|
1969
|
-
const
|
|
1970
|
-
s =
|
|
1971
|
-
${
|
|
2241
|
+
const m = this.getItemPillDisplayValue(t), p = this.getItemSubtitle(t);
|
|
2242
|
+
s = p ? `${m}
|
|
2243
|
+
${p}` : m, v.debug(`[${this.instanceId}] Using default content: "${s}"`);
|
|
1972
2244
|
}
|
|
1973
|
-
typeof s == "string" ?
|
|
2245
|
+
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);
|
|
1974
2246
|
let r, a;
|
|
1975
|
-
const
|
|
1976
|
-
clearTimeout(a), v.debug(`[${this.instanceId}] Mouse entered pill "${
|
|
1977
|
-
v.debug(`[${this.instanceId}] Showing tooltip for "${
|
|
2247
|
+
const d = () => {
|
|
2248
|
+
clearTimeout(a), v.debug(`[${this.instanceId}] Mouse entered pill "${l}", will show tooltip in ${this.options.pillTooltipDelay || 300}ms`), r = window.setTimeout(() => {
|
|
2249
|
+
v.debug(`[${this.instanceId}] Showing tooltip for "${l}"`), o.classList.add("ml__pill-tooltip--visible"), this.positionPillTooltip(e, o, l);
|
|
1978
2250
|
}, this.options.pillTooltipDelay || 300);
|
|
1979
2251
|
}, c = () => {
|
|
1980
2252
|
clearTimeout(r), a = window.setTimeout(() => {
|
|
1981
|
-
|
|
2253
|
+
o.classList.remove("ml__pill-tooltip--visible"), this.cleanupPillTooltip(l);
|
|
1982
2254
|
}, 100);
|
|
1983
2255
|
};
|
|
1984
|
-
e.addEventListener("mouseenter",
|
|
2256
|
+
e.addEventListener("mouseenter", d), e.addEventListener("mouseleave", c);
|
|
1985
2257
|
}
|
|
1986
|
-
createRemoveButtonTooltip(e, t,
|
|
1987
|
-
const
|
|
1988
|
-
|
|
1989
|
-
const n = `${
|
|
1990
|
-
this.pillTooltips.set(n,
|
|
2258
|
+
createRemoveButtonTooltip(e, t, l) {
|
|
2259
|
+
const o = document.createElement("div");
|
|
2260
|
+
o.className = "ml__pill-tooltip", o.textContent = `Remove ${t}`, (this.options.container || document.body).appendChild(o);
|
|
2261
|
+
const n = `${l}-remove`;
|
|
2262
|
+
this.pillTooltips.set(n, o);
|
|
1991
2263
|
let r, a;
|
|
1992
|
-
const
|
|
2264
|
+
const d = () => {
|
|
1993
2265
|
clearTimeout(a);
|
|
1994
|
-
const
|
|
1995
|
-
|
|
1996
|
-
|
|
2266
|
+
const m = this.pillTooltips.get(l);
|
|
2267
|
+
m && m.classList.remove("ml__pill-tooltip--visible"), r = window.setTimeout(() => {
|
|
2268
|
+
o.classList.add("ml__pill-tooltip--visible"), this.positionPillTooltip(e, o, n);
|
|
1997
2269
|
}, this.options.pillTooltipDelay || 300);
|
|
1998
2270
|
}, c = () => {
|
|
1999
2271
|
clearTimeout(r), a = window.setTimeout(() => {
|
|
2000
|
-
|
|
2272
|
+
o.classList.remove("ml__pill-tooltip--visible"), this.cleanupPillTooltip(n);
|
|
2001
2273
|
}, 100);
|
|
2002
2274
|
};
|
|
2003
|
-
e.addEventListener("mouseenter",
|
|
2275
|
+
e.addEventListener("mouseenter", d), e.addEventListener("mouseleave", c);
|
|
2004
2276
|
}
|
|
2005
|
-
positionPillTooltip(e, t,
|
|
2006
|
-
const
|
|
2277
|
+
positionPillTooltip(e, t, l) {
|
|
2278
|
+
const o = oe(e, t, () => {
|
|
2007
2279
|
re(e, t, {
|
|
2008
2280
|
placement: this.options.pillTooltipPlacement || "top",
|
|
2009
2281
|
strategy: "fixed",
|
|
@@ -2016,7 +2288,7 @@ ${m}` : d, v.debug(`[${this.instanceId}] Using default content: "${s}"`);
|
|
|
2016
2288
|
Object.assign(t.style, {
|
|
2017
2289
|
left: `${s}px`,
|
|
2018
2290
|
top: `${n}px`
|
|
2019
|
-
}), v.debug(`[${this.instanceId}] Positioned tooltip "${
|
|
2291
|
+
}), v.debug(`[${this.instanceId}] Positioned tooltip "${l}" at x:${s}, y:${n}`, {
|
|
2020
2292
|
placement: this.options.pillTooltipPlacement || "top",
|
|
2021
2293
|
tooltipClasses: t.className,
|
|
2022
2294
|
tooltipDisplay: window.getComputedStyle(t).display,
|
|
@@ -2027,7 +2299,7 @@ ${m}` : d, v.debug(`[${this.instanceId}] Using default content: "${s}"`);
|
|
|
2027
2299
|
});
|
|
2028
2300
|
});
|
|
2029
2301
|
});
|
|
2030
|
-
this.pillTooltipCleanups.set(
|
|
2302
|
+
this.pillTooltipCleanups.set(l, o);
|
|
2031
2303
|
}
|
|
2032
2304
|
cleanupPillTooltip(e) {
|
|
2033
2305
|
const t = this.pillTooltipCleanups.get(e);
|
|
@@ -2040,15 +2312,15 @@ ${m}` : d, v.debug(`[${this.instanceId}] Using default content: "${s}"`);
|
|
|
2040
2312
|
// PUBLIC API
|
|
2041
2313
|
// ========================================================================
|
|
2042
2314
|
destroy() {
|
|
2043
|
-
this.destroyAllPillTooltips(), this.dropdownCleanup && this.dropdownCleanup(), this.hintCleanup && this.hintCleanup(), this.selectedPopoverCleanup && this.selectedPopoverCleanup(), this.dropdown && this.dropdown.remove(), this.hint && this.hint.remove(), this.selectedPopover && this.selectedPopover.remove(), this.element.innerHTML = "", this.element.classList.remove("ml", "ml--open", "ml--no-checkboxes"),
|
|
2315
|
+
this.destroyAllPillTooltips(), this.dropdownCleanup && this.dropdownCleanup(), this.hintCleanup && this.hintCleanup(), this.selectedPopoverCleanup && this.selectedPopoverCleanup(), this.virtualScroll && (this.virtualScroll.destroy(), this.virtualScroll = null), this.dropdown && this.dropdown.remove(), this.hint && this.hint.remove(), this.selectedPopover && this.selectedPopover.remove(), this.element.innerHTML = "", this.element.classList.remove("ml", "ml--open", "ml--no-checkboxes"), H.info(`[${this.instanceId}] Component destroyed`);
|
|
2044
2316
|
}
|
|
2045
2317
|
}
|
|
2046
|
-
const di = '@charset "UTF-8";:host{--ml-accent-color: #3b82f6;--ml-accent-color-hover: #2563eb;--ml-accent-color-active: #1d4ed8;--ml-text-primary: #111827;--ml-text-secondary: #6b7280;--ml-text-white: #ffffff;--ml-primary-bg: #f3f4f6;--ml-primary-bg-hover: #e5e7eb;--ml-border-color: #e5e7eb;--ml-input-padding: .5rem .75rem;--ml-input-padding-right: 2.5rem;--ml-input-font-size: .875rem;--ml-input-border-style: 1px solid #d1d5db;--ml-input-border-radius: .375rem;--ml-input-bg: #ffffff;--ml-input-text: #111827;--ml-input-focus-border-color: #3b82f6;--ml-input-placeholder-color: #6b7280;--ml-input-bg-disabled: rgba(107, 114, 128, .05);--ml-toggle-right: .75rem;--ml-toggle-color: #6b7280;--ml-transform-center-y: translateY(-50%);--ml-transform-rotate-180: 180deg;--ml-count-badge-offset: 2rem;--ml-count-badge-padding: .125rem .25rem;--ml-count-badge-bg: #3b82f6;--ml-count-badge-color: #ffffff;--ml-count-badge-font-size: .75rem;--ml-count-badge-font-weight: 600;--ml-count-badge-border-radius: .25rem;--ml-count-badge-bg-hover: #2563eb;--ml-transform-scale-hover: 1.1;--ml-hint-padding: .5rem .75rem;--ml-hint-bg: #ffffff;--ml-hint-border: 1px solid #e5e7eb;--ml-hint-border-radius: .375rem;--ml-hint-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--ml-hint-font-size: .75rem;--ml-hint-color: #6b7280;--ml-line-height-relaxed: 1.4;--ml-dropdown-bg: #ffffff;--ml-dropdown-border: 1px solid #e5e7eb;--ml-dropdown-border-radius: .375rem;--ml-dropdown-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-dropdown-max-height: 20rem;--ml-dropdown-color: #111827;--ml-z-index-dropdown: 9999;--ml-z-index-sticky: 1;--ml-actions-gap: .25rem;--ml-actions-padding: .5rem;--ml-actions-border-bottom: 1px solid #e5e7eb;--ml-actions-bg: #ffffff;--ml-action-btn-padding: .25rem .5rem;--ml-action-btn-font-size: .75rem;--ml-action-btn-border: 1px solid #e5e7eb;--ml-action-btn-border-radius: .25rem;--ml-action-btn-bg: transparent;--ml-action-btn-color: inherit;--ml-action-btn-bg-hover: #f3f4f6;--ml-action-btn-border-color-hover: #3b82f6;--ml-transform-scale-active: .98;--ml-options-padding: .25rem 0;--ml-group-border-top: 1px solid #e5e7eb;--ml-group-margin-top: .25rem;--ml-group-padding-top: .25rem;--ml-group-label-padding: .25rem .75rem;--ml-group-label-font-size: .75rem;--ml-group-label-font-weight: 600;--ml-group-label-color: #6b7280;--ml-group-label-transform: uppercase;--ml-group-label-letter-spacing: .05em;--ml-option-gap: .5rem;--ml-option-padding: .5rem .75rem;--ml-option-padding-h: .75rem;--ml-option-bg: transparent;--ml-option-bg-hover: #f9fafb;--ml-option-bg-focused: #f9fafb;--ml-option-outline-focused: 2px solid #3b82f6;--ml-option-focus-outline-offset: -2px;--ml-option-bg-selected: rgba(59, 130, 246, .1);--ml-disabled-opacity: .5;--ml-option-content-gap: .5rem;--ml-option-icon-size: 1.25rem;--ml-option-icon-font-size: 1rem;--ml-option-title-font-size: .875rem;--ml-option-title-color: inherit;--ml-option-mark-bg: rgba(59, 130, 246, .2);--ml-option-mark-color: inherit;--ml-option-mark-font-weight: 600;--ml-option-subtitle-margin-top: .25rem;--ml-option-subtitle-font-size: .75rem;--ml-option-subtitle-color: #6b7280;--ml-option-subtitle-line-height: 1.3;--ml-checkbox-margin-top: .125rem;--ml-empty-padding: 1rem .75rem;--ml-empty-font-size: .875rem;--ml-empty-color: #6b7280;--ml-loader-padding: 1rem;--ml-loader-gap: .5rem;--ml-loading-text-font-size: .875rem;--ml-loading-text-color: #6b7280;--ml-pills-gap: .5rem;--ml-pills-margin-bottom: .5rem;--ml-pills-margin-top: .5rem;--ml-pills-margin-left: .25rem;--ml-pills-margin-right: .25rem;--ml-pill-gap: .5rem;--ml-pill-height: 1.5rem;--ml-pill-font-size: .75rem;--ml-pill-font-weight: 600;--ml-pill-border-radius: .375rem;--ml-pill-bg: #eff6ff;--ml-pill-bg-hover: #ffffff;--ml-pill-bg-active: #e0f2fe;--ml-order-first: -1;--ml-pill-text-padding: 0 .5rem;--ml-pill-text-bg: #eff6ff;--ml-pill-text-color: #3b82f6;--ml-pill-remove-width: 1.5rem;--ml-pill-remove-bg: #3b82f6;--ml-pill-remove-color: #ffffff;--ml-pill-remove-border: none;--ml-pill-remove-font-size: .75rem;--ml-pill-remove-bg-hover: #2563eb;--ml-pill-remove-box-shadow-focus: 0 0 0 2px rgba(59, 130, 246, .5);--ml-icon-remove: "×";--ml-more-badge-bg: #eff6ff;--ml-more-badge-hover-bg: #ffffff;--ml-more-badge-active-bg: #e0f2fe;--ml-count-display-margin-bottom: .5rem;--ml-count-display-margin-top: .5rem;--ml-count-display-margin-left: .5rem;--ml-count-display-margin-right: .5rem;--ml-count-badge-wrapper-bg: transparent;--ml-count-badge-wrapper-border: 1px solid #e5e7eb;--ml-count-badge-wrapper-border-radius: .25rem;--ml-count-badge-wrapper-padding: .25rem .5rem;--ml-count-badge-wrapper-gap: .25rem;--ml-count-badge-wrapper-bg-hover: #f9fafb;--ml-count-badge-wrapper-border-color-hover: #3b82f6;--ml-count-text-bg: transparent;--ml-count-text-border: none;--ml-count-text-font-size: .875rem;--ml-count-text-color: #111827;--ml-count-clear-size: 1rem;--ml-count-clear-bg: transparent;--ml-count-clear-color: #6b7280;--ml-count-clear-font-size: 1.125rem;--ml-count-clear-border-radius: 50%;--ml-count-clear-bg-hover: rgba(59, 130, 246, .2);--ml-count-clear-color-hover: #3b82f6;--ml-icon-clear: "×";--ml-tooltip-bg: #333;--ml-tooltip-color: #fff;--ml-tooltip-padding: .5rem .75rem;--ml-tooltip-border-radius: .375rem;--ml-tooltip-font-size: .875rem;--ml-tooltip-max-width: 20rem;--ml-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ml-tooltip-z-index: 10000;--ml-z-index-popover: 10000;--ml-selected-popover-width: 20rem;--ml-selected-popover-max-height: 20rem;--ml-selected-popover-bg: #ffffff;--ml-selected-popover-border: 1px solid #e5e7eb;--ml-selected-popover-border-radius: .375rem;--ml-selected-popover-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-selected-popover-header-padding: .5rem .75rem;--ml-selected-popover-header-bg: rgba(59, 130, 246, .1);--ml-selected-popover-header-border-bottom: 1px solid #e5e7eb;--ml-selected-popover-header-font-size: .875rem;--ml-selected-popover-header-font-weight: 600;--ml-selected-popover-header-color: #111827;--ml-popover-close-size: 1.5rem;--ml-selected-popover-close-bg: transparent;--ml-selected-popover-close-color: #6b7280;--ml-selected-popover-close-font-size: 1.25rem;--ml-selected-popover-close-border-radius: 50%;--ml-selected-popover-close-bg-hover: rgba(59, 130, 246, .2);--ml-selected-popover-close-color-hover: #3b82f6;--ml-selected-popover-body-gap: .25rem;--ml-selected-popover-body-padding: .5rem;--ml-selected-popover-body-max-height: 18rem;--ml-font-size-2xs: .625rem;--ml-font-size-xs: .75rem;--ml-font-size-sm: .875rem;--ml-font-size-base: 1rem;--ml-font-size-lg: 1.125rem;--ml-font-weight-medium: 500;--ml-font-weight-semibold: 600;--ml-line-height-none: 1;--ml-spacing-xs: .25rem;--ml-spacing-sm: .5rem;--ml-spacing-md: .75rem;--ml-spacing-lg: 1rem;--ml-transition-fast: .15s;--ml-transition-normal: .2s;--ml-easing-snappy: cubic-bezier(.4, 0, .2, 1);--ml-placeholder-opacity: .6;--ml-disabled-input-opacity: .6}multi-select:not(:defined){display:block;min-height:2.5rem;color:transparent!important;background:transparent}.ml-wrapper{display:flex;flex-direction:column;align-items:stretch}.ml-wrapper--inline{flex-direction:row;align-items:flex-start}.ml{position:relative;width:100%}.ml__input-wrapper{position:relative;display:flex;align-items:center}.ml__input{width:100%;padding:var(--ml-input-padding, .5rem .75rem);padding-right:var(--ml-input-padding-right, 2.5rem);font-size:var(--ml-input-font-size, .875rem);border:var(--ml-input-border-style, 1px solid #d1d5db);border-radius:var(--ml-input-border-radius, .375rem);background:var(--ml-input-bg, #ffffff);color:var(--ml-input-text, #111827);cursor:pointer;transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__count-badge{position:absolute;right:var(--ml-count-badge-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-count-badge-padding, .125rem .25rem);background:var(--ml-count-badge-bg, #3b82f6);color:var(--ml-count-badge-color, #ffffff);font-size:var(--ml-count-badge-font-size, .75rem);font-weight:var(--ml-count-badge-font-weight, 600);border-radius:var(--ml-count-badge-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge:hover{background:var(--ml-count-badge-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-dropdown-max-height, 20rem);overflow-y:auto;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.ml__actions{display:flex;gap:var(--ml-actions-gap, .25rem);padding:var(--ml-actions-padding, .5rem);border-bottom:var(--ml-actions-border-bottom, 1px solid #e5e7eb)}.ml__actions--sticky{position:sticky;top:0;z-index:var(--ml-z-index-sticky, 1);background:var(--ml-actions-bg, #ffffff)}.ml__action-btn{flex:1;padding:var(--ml-action-btn-padding, .25rem .5rem);font-size:var(--ml-action-btn-font-size, .75rem);border:var(--ml-action-btn-border, 1px solid #e5e7eb);border-radius:var(--ml-action-btn-border-radius, .25rem);background:var(--ml-action-btn-bg, transparent);color:var(--ml-action-btn-color, inherit);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__action-btn:hover{background:var(--ml-action-btn-bg-hover, #f3f4f6);border-color:var(--ml-action-btn-border-color-hover, #3b82f6)}.ml__action-btn:active{transform:scale(var(--ml-transform-scale-active, .98))}.ml__options{padding:var(--ml-options-padding, .25rem 0)}.ml__group+.ml__group{border-top:var(--ml-group-border-top, 1px solid #e5e7eb);margin-top:var(--ml-group-margin-top, .25rem);padding-top:var(--ml-group-padding-top, .25rem)}.ml__group-label{padding:var(--ml-group-label-padding, .25rem .75rem);font-size:var(--ml-group-label-font-size, .75rem);font-weight:var(--ml-group-label-font-weight, 600);color:var(--ml-group-label-color, #6b7280);text-transform:var(--ml-group-label-transform, uppercase);letter-spacing:var(--ml-group-label-letter-spacing, .05em)}.ml__option{display:flex;align-items:flex-start;gap:var(--ml-option-gap, .5rem);padding:var(--ml-option-padding, .5rem .75rem);cursor:pointer;transition:background-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__option:hover{background:var(--ml-option-bg-hover, #f9fafb)}.ml__option--focused{background:var(--ml-option-bg-focused, #f9fafb);outline:var(--ml-option-outline-focused, 2px solid #3b82f6);outline-offset:var(--ml-option-focus-outline-offset, -2px)}.ml__option--selected{background:var(--ml-option-bg-selected, rgba(59, 130, 246, .1))}.ml__option--disabled{opacity:var(--ml-disabled-opacity, .5);cursor:not-allowed}.ml__option--disabled:hover{background:var(--ml-option-bg, transparent)}.ml__checkbox{flex-shrink:0;margin-top:var(--ml-checkbox-margin-top, .125rem);cursor:pointer}.ml__option--disabled .ml__checkbox{cursor:not-allowed}.ml__option-content{flex:1;display:flex;align-items:flex-start;gap:var(--ml-option-content-gap, .5rem);min-width:0}.ml__option-icon{flex-shrink:0;width:var(--ml-option-icon-size, 1.25rem);height:var(--ml-option-icon-size, 1.25rem);display:flex;align-items:center;justify-content:center;font-size:var(--ml-option-icon-font-size, 1rem)}.ml__option-icon svg{width:100%;height:100%;fill:currentColor}.ml__option-text{flex:1;min-width:0}.ml__option-title{font-size:var(--ml-option-title-font-size, .875rem);color:var(--ml-option-title-color, inherit);line-height:var(--ml-line-height-relaxed, 1.4)}.ml__option-title mark{background:var(--ml-option-mark-bg, rgba(59, 130, 246, .2));color:var(--ml-option-mark-color, inherit);font-weight:var(--ml-option-mark-font-weight, 600)}.ml__option-subtitle{margin-top:var(--ml-option-subtitle-margin-top, .25rem);font-size:var(--ml-option-subtitle-font-size, .75rem);color:var(--ml-option-subtitle-color, #6b7280);line-height:var(--ml-option-subtitle-line-height, 1.3)}.ml__empty{padding:var(--ml-empty-padding, 1rem .75rem);text-align:center;font-size:var(--ml-empty-font-size, .875rem);color:var(--ml-empty-color, #6b7280)}.ml__loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ml-loader-padding, 1rem);gap:var(--ml-loader-gap, .5rem)}.ml__loading-text{font-size:var(--ml-loading-text-font-size, .875rem);color:var(--ml-loading-text-color, #6b7280)}.ml__pills{display:flex;flex-wrap:wrap;gap:var(--ml-pills-gap, .5rem);padding:0}.ml__pills:empty{display:none}.ml__pills--bottom{margin-top:var(--ml-pills-margin-bottom, .5rem)}.ml__pills--top{margin-bottom:var(--ml-pills-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__pills--left{order:var(--ml-order-first, -1);margin-right:var(--ml-pills-margin-left, .25rem);justify-content:flex-end}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .25rem);justify-content:flex-start}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__count-badge-wrapper{display:inline-flex;align-items:center;gap:var(--ml-count-badge-wrapper-gap, .25rem);background:var(--ml-count-badge-wrapper-bg, transparent);border:var(--ml-count-badge-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-count-badge-wrapper-border-radius, .25rem);padding:var(--ml-count-badge-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge-wrapper:hover{background:var(--ml-count-badge-wrapper-bg-hover, #f9fafb);border-color:var(--ml-count-badge-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__pill{display:inline-flex;align-items:center;height:var(--ml-pill-height, 1.5rem);font-size:var(--ml-pill-font-size, .75rem);font-weight:var(--ml-pill-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-pill-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__pill-text{display:flex;align-items:center;height:100%;padding:var(--ml-pill-text-padding, 0 .5rem);background:var(--ml-pill-text-bg, #eff6ff);color:var(--ml-pill-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__pill-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-pill-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-pill-remove-bg, #3b82f6);color:var(--ml-pill-remove-color, #ffffff);border:var(--ml-pill-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-pill-remove-font-size, .75rem)}.ml__pill-remove:hover{background:var(--ml-pill-remove-bg-hover, #2563eb)}.ml__pill-remove:focus{outline:none;box-shadow:var(--ml-pill-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__pill-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__pill--more{cursor:pointer}.ml__pill--more .ml__pill-text{background:var(--ml-more-badge-bg, #eff6ff);font-weight:var(--ml-pill-font-weight, 600)}.ml__pill--more:hover .ml__pill-text{background:var(--ml-more-badge-hover-bg, #ffffff)}.ml__pill--more:active .ml__pill-text{background:var(--ml-more-badge-active-bg, #e0f2fe)}.ml__pill-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__pill-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ml-selected-popover-header-padding, .5rem .75rem);background:var(--ml-selected-popover-header-bg, rgba(59, 130, 246, .1));border-bottom:var(--ml-selected-popover-header-border-bottom, 1px solid #e5e7eb);font-size:var(--ml-selected-popover-header-font-size, .875rem);font-weight:var(--ml-selected-popover-header-font-weight, 600);color:var(--ml-selected-popover-header-color, #111827)}.ml__selected-popover-close{display:flex;align-items:center;justify-content:center;width:var(--ml-popover-close-size, 1.5rem);height:var(--ml-popover-close-size, 1.5rem);padding:0;border:none;background:var(--ml-selected-popover-close-bg, transparent);color:var(--ml-selected-popover-close-color, #6b7280);font-size:var(--ml-selected-popover-close-font-size, 1.25rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-selected-popover-close-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__selected-popover-close:hover{background:var(--ml-selected-popover-close-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-selected-popover-close-color-hover, #3b82f6)}.ml__selected-popover-body{display:flex;flex-direction:column;gap:var(--ml-selected-popover-body-gap, .25rem);padding:var(--ml-selected-popover-body-padding, .5rem);overflow-y:auto;max-height:var(--ml-selected-popover-body-max-height, 18rem)}.ml__selected-popover-body .ml__pill{width:100%}.ml__selected-popover-body .ml__pill-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ml--rtl .ml__input-wrapper{direction:rtl}.ml--rtl .ml__input{text-align:right;padding-left:var(--ml-input-padding-right, 2.5rem);padding-right:var(--ml-input-padding-h, .75rem)}.ml--rtl .ml__toggle{left:var(--ml-toggle-right, .75rem)!important;right:auto!important}.ml--rtl .ml__count-badge{left:var(--ml-count-badge-offset, 2rem)!important;right:auto!important}.ml--rtl .ml__dropdown{direction:rtl;text-align:right}.ml--rtl .ml__option{flex-direction:row-reverse}.ml--rtl .ml__checkbox{margin-left:var(--ml-spacing-sm, .5rem);margin-right:0}.ml--rtl .ml__option-content{text-align:right}.ml--rtl .ml__option-icon{margin-left:var(--ml-spacing-xs, .25rem);margin-right:0}.ml--rtl .ml__pills{direction:rtl}.ml--rtl .ml__pill{flex-direction:row-reverse}.ml--rtl .ml__pill-remove{border-radius:var(--ml-pill-remove-border-radius-rtl, .375rem) 0 0 var(--ml-pill-remove-border-radius-rtl, .375rem);border-left:var(--ml-pill-remove-border, none);border-right:none}.ml--rtl .ml__pill-text{border-radius:0 var(--ml-pill-text-border-radius-rtl, .375rem) var(--ml-pill-text-border-radius-rtl, .375rem) 0}.ml--rtl .ml__count-display{direction:rtl}.ml--rtl .ml__count-badge-wrapper{flex-direction:row-reverse}.ml--rtl .ml__selected-popover{direction:rtl;text-align:right}.ml--rtl .ml__actions{direction:rtl}.ml--rtl .ml__group-label,.ml--rtl .ml__empty{text-align:right}.ml--rtl .ml__hint{direction:rtl;text-align:right}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__pill{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__pill{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__pill{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}', pi = typeof HTMLElement < "u" ? HTMLElement : class {
|
|
2047
|
-
},
|
|
2048
|
-
function
|
|
2049
|
-
return Array.from(
|
|
2318
|
+
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--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--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--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 {
|
|
2319
|
+
}, Ae = /* @__PURE__ */ new Set();
|
|
2320
|
+
function nt() {
|
|
2321
|
+
return Array.from(Ae);
|
|
2050
2322
|
}
|
|
2051
|
-
class
|
|
2323
|
+
class rt extends hi {
|
|
2052
2324
|
constructor() {
|
|
2053
2325
|
super();
|
|
2054
2326
|
u(this, "picker");
|
|
@@ -2085,9 +2357,10 @@ class nt extends pi {
|
|
|
2085
2357
|
u(this, "_selectCallback");
|
|
2086
2358
|
u(this, "_deselectCallback");
|
|
2087
2359
|
u(this, "_changeCallback");
|
|
2360
|
+
u(this, "_declarativeSelectedValues");
|
|
2088
2361
|
this.shadow = this.attachShadow({ mode: "open" });
|
|
2089
2362
|
const t = document.createElement("style");
|
|
2090
|
-
t.textContent =
|
|
2363
|
+
t.textContent = pi, this.shadow.appendChild(t), requestAnimationFrame(() => {
|
|
2091
2364
|
this.setAttribute("data-ready", "");
|
|
2092
2365
|
});
|
|
2093
2366
|
}
|
|
@@ -2118,8 +2391,15 @@ class nt extends pi {
|
|
|
2118
2391
|
"min-search-length",
|
|
2119
2392
|
"enable-search",
|
|
2120
2393
|
"search-input-mode",
|
|
2394
|
+
"search-mode",
|
|
2121
2395
|
"allow-add-new",
|
|
2122
2396
|
"initial-values",
|
|
2397
|
+
// Virtual scroll options
|
|
2398
|
+
"enable-virtual-scroll",
|
|
2399
|
+
"virtual-scroll-threshold",
|
|
2400
|
+
"option-height",
|
|
2401
|
+
"pill-height",
|
|
2402
|
+
"virtual-scroll-buffer",
|
|
2123
2403
|
// New member properties
|
|
2124
2404
|
"value-member",
|
|
2125
2405
|
"display-value-member",
|
|
@@ -2139,13 +2419,15 @@ class nt extends pi {
|
|
|
2139
2419
|
];
|
|
2140
2420
|
}
|
|
2141
2421
|
connectedCallback() {
|
|
2142
|
-
|
|
2422
|
+
Ae.add(this), this.render();
|
|
2423
|
+
const t = this.parseDeclarativeOptions();
|
|
2424
|
+
t && (this._options && this._options.length > 0 && C.warn("[MultiSelectElement] Both declarative <option> elements and programmatic .options detected. Using declarative options."), this._options = t), this.initializePicker();
|
|
2143
2425
|
}
|
|
2144
2426
|
disconnectedCallback() {
|
|
2145
|
-
|
|
2427
|
+
Ae.delete(this), this.picker && this.picker.destroy();
|
|
2146
2428
|
}
|
|
2147
|
-
attributeChangedCallback(t,
|
|
2148
|
-
|
|
2429
|
+
attributeChangedCallback(t, l, o) {
|
|
2430
|
+
l !== o && this.picker && t !== "initial-values" && (this.picker.destroy(), this.initializePicker());
|
|
2149
2431
|
}
|
|
2150
2432
|
render() {
|
|
2151
2433
|
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();
|
|
@@ -2153,41 +2435,77 @@ class nt extends pi {
|
|
|
2153
2435
|
renderDebugInfo() {
|
|
2154
2436
|
const t = this.shadow.querySelector(".ml-debug-info");
|
|
2155
2437
|
t && t.remove();
|
|
2156
|
-
const
|
|
2157
|
-
|
|
2158
|
-
const
|
|
2438
|
+
const l = document.createElement("div");
|
|
2439
|
+
l.className = "ml-debug-info";
|
|
2440
|
+
const o = document.createElement("details"), s = document.createElement("summary");
|
|
2159
2441
|
s.textContent = "Debug Info";
|
|
2160
2442
|
const n = document.createElement("div");
|
|
2161
|
-
n.className = "ml-debug-stats",
|
|
2443
|
+
n.className = "ml-debug-stats", o.appendChild(s), o.appendChild(n), l.appendChild(o), this.shadow.appendChild(l), this.updateDebugInfo();
|
|
2162
2444
|
}
|
|
2163
2445
|
updateDebugInfo() {
|
|
2164
2446
|
var h, f;
|
|
2165
2447
|
const t = this.shadow.querySelector(".ml-debug-stats");
|
|
2166
2448
|
if (!t || !this.picker) return;
|
|
2167
|
-
const
|
|
2449
|
+
const l = "1.0.0-rc10", 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;
|
|
2168
2450
|
t.innerHTML = `
|
|
2169
|
-
<span>Version: ${
|
|
2170
|
-
<span>Total Instances: ${
|
|
2451
|
+
<span>Version: ${l}</span>
|
|
2452
|
+
<span>Total Instances: ${o}</span>
|
|
2171
2453
|
<span>Options: ${r}</span>
|
|
2172
|
-
<span>Filtered: ${
|
|
2454
|
+
<span>Filtered: ${p}</span>
|
|
2173
2455
|
<span>Selected: ${n}</span>
|
|
2174
|
-
<span>Dropdown: ${
|
|
2456
|
+
<span>Dropdown: ${d ? "Open" : "Closed"}</span>
|
|
2175
2457
|
<span>Search: ${c || "none"}</span>
|
|
2176
|
-
<span>Loading: ${
|
|
2458
|
+
<span>Loading: ${m ? "Yes" : "No"}</span>
|
|
2177
2459
|
`, setTimeout(() => {
|
|
2178
2460
|
this.getAttribute("show-debug-info") === "true" && this.updateDebugInfo();
|
|
2179
2461
|
}, 500);
|
|
2180
2462
|
}
|
|
2463
|
+
/**
|
|
2464
|
+
* Parse declarative <option> and <optgroup> elements from Light DOM
|
|
2465
|
+
* Returns array of options in the format expected by the picker
|
|
2466
|
+
*/
|
|
2467
|
+
parseDeclarativeOptions() {
|
|
2468
|
+
var s, n, r, a;
|
|
2469
|
+
const t = [], l = Array.from(this.children);
|
|
2470
|
+
if (l.length === 0)
|
|
2471
|
+
return null;
|
|
2472
|
+
let o = !1;
|
|
2473
|
+
for (const d of l)
|
|
2474
|
+
if (d.tagName === "OPTION") {
|
|
2475
|
+
const c = d, m = {
|
|
2476
|
+
value: c.value || ((s = c.textContent) == null ? void 0 : s.trim()) || "",
|
|
2477
|
+
label: ((n = c.textContent) == null ? void 0 : n.trim()) || c.value || ""
|
|
2478
|
+
};
|
|
2479
|
+
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;
|
|
2480
|
+
} else if (d.tagName === "OPTGROUP") {
|
|
2481
|
+
const c = d, m = c.label || c.getAttribute("label") || "Group", p = Array.from(c.querySelectorAll("option"));
|
|
2482
|
+
for (const h of p) {
|
|
2483
|
+
const f = {
|
|
2484
|
+
value: h.value || ((r = h.textContent) == null ? void 0 : r.trim()) || "",
|
|
2485
|
+
label: ((a = h.textContent) == null ? void 0 : a.trim()) || h.value || "",
|
|
2486
|
+
group: m
|
|
2487
|
+
};
|
|
2488
|
+
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;
|
|
2489
|
+
}
|
|
2490
|
+
}
|
|
2491
|
+
return o ? (C.debug(`[MultiSelectElement] Parsed ${t.length} declarative options from Light DOM`), l.forEach((d) => {
|
|
2492
|
+
(d.tagName === "OPTION" || d.tagName === "OPTGROUP") && d.remove();
|
|
2493
|
+
}), t) : null;
|
|
2494
|
+
}
|
|
2181
2495
|
initializePicker() {
|
|
2182
2496
|
if (!this.containerElement) return;
|
|
2183
2497
|
let t;
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2498
|
+
if (this._declarativeSelectedValues && this._declarativeSelectedValues.length > 0)
|
|
2499
|
+
t = this._declarativeSelectedValues, C.debug(`[MultiSelectElement] Using ${t.length} declaratively selected values`);
|
|
2500
|
+
else {
|
|
2501
|
+
const o = this.getAttribute("initial-values");
|
|
2502
|
+
if (o)
|
|
2503
|
+
try {
|
|
2504
|
+
t = JSON.parse(o);
|
|
2505
|
+
} catch (s) {
|
|
2506
|
+
C.error("[MultiSelectElement] Failed to parse initial-values:", s);
|
|
2507
|
+
}
|
|
2508
|
+
}
|
|
2191
2509
|
const l = {
|
|
2192
2510
|
// String options
|
|
2193
2511
|
searchHint: this.getAttribute("search-hint") || void 0,
|
|
@@ -2200,6 +2518,7 @@ class nt extends pi {
|
|
|
2200
2518
|
emptyMessage: this.getAttribute("empty-message") || "No results found",
|
|
2201
2519
|
loadingMessage: this.getAttribute("loading-message") || "Loading...",
|
|
2202
2520
|
searchInputMode: this.getAttribute("search-input-mode") || "normal",
|
|
2521
|
+
searchMode: this.getAttribute("search-mode") || "filter",
|
|
2203
2522
|
// Number options
|
|
2204
2523
|
pillsThreshold: this.getAttribute("pills-threshold") ? parseInt(this.getAttribute("pills-threshold")) : void 0,
|
|
2205
2524
|
pillsMaxVisible: this.getAttribute("pills-max-visible") ? parseInt(this.getAttribute("pills-max-visible")) : void 0,
|
|
@@ -2217,6 +2536,12 @@ class nt extends pi {
|
|
|
2217
2536
|
isAddNewAllowed: this.getAttribute("allow-add-new") === "true",
|
|
2218
2537
|
isCountBadgeShown: this.getAttribute("show-count-badge") === "true",
|
|
2219
2538
|
isKeepOptionsOnSearch: this.getAttribute("keep-options-on-search") !== "false",
|
|
2539
|
+
isVirtualScrollEnabled: this.getAttribute("enable-virtual-scroll") === "true",
|
|
2540
|
+
// Virtual scroll options
|
|
2541
|
+
virtualScrollThreshold: this.getAttribute("virtual-scroll-threshold") ? parseInt(this.getAttribute("virtual-scroll-threshold")) : 100,
|
|
2542
|
+
optionHeight: this.getAttribute("option-height") ? parseInt(this.getAttribute("option-height")) : 50,
|
|
2543
|
+
pillHeight: this.getAttribute("pill-height") ? parseInt(this.getAttribute("pill-height")) : 36,
|
|
2544
|
+
virtualScrollBuffer: this.getAttribute("virtual-scroll-buffer") ? parseInt(this.getAttribute("virtual-scroll-buffer")) : 10,
|
|
2220
2545
|
// Member properties
|
|
2221
2546
|
valueMember: this.getAttribute("value-member") || this._valueMember,
|
|
2222
2547
|
displayValueMember: this.getAttribute("display-value-member") || this._displayValueMember,
|
|
@@ -2245,38 +2570,38 @@ class nt extends pi {
|
|
|
2245
2570
|
pillTooltipDelay: parseInt(this.getAttribute("pill-tooltip-delay") || "300"),
|
|
2246
2571
|
pillTooltipOffset: parseInt(this.getAttribute("pill-tooltip-offset") || "8"),
|
|
2247
2572
|
// Count pill callback
|
|
2248
|
-
getCountPillCallback: this._getCountPillCallback || ((
|
|
2573
|
+
getCountPillCallback: this._getCountPillCallback || ((o, s) => s !== void 0 ? `+${s} more` : `${o} selected`),
|
|
2249
2574
|
// Data and callbacks
|
|
2250
2575
|
options: this._options,
|
|
2251
2576
|
beforeSearchCallback: this._beforeSearchCallback,
|
|
2252
2577
|
searchCallback: this._searchCallback,
|
|
2253
2578
|
addNewCallback: this._addNewCallback,
|
|
2254
|
-
selectCallback: (
|
|
2255
|
-
var
|
|
2256
|
-
this._selectCallback && this._selectCallback(
|
|
2579
|
+
selectCallback: (o) => {
|
|
2580
|
+
var s, n;
|
|
2581
|
+
this._selectCallback && this._selectCallback(o), this.dispatchEvent(new CustomEvent("select", {
|
|
2257
2582
|
detail: {
|
|
2258
|
-
option:
|
|
2259
|
-
selectedOptions: (
|
|
2260
|
-
selectedValues: Array.from(((
|
|
2583
|
+
option: o,
|
|
2584
|
+
selectedOptions: (s = this.picker) == null ? void 0 : s.getSelected(),
|
|
2585
|
+
selectedValues: Array.from(((n = this.picker) == null ? void 0 : n.getValue()) || [])
|
|
2261
2586
|
}
|
|
2262
2587
|
}));
|
|
2263
2588
|
},
|
|
2264
|
-
deselectCallback: (
|
|
2265
|
-
var
|
|
2266
|
-
this._deselectCallback && this._deselectCallback(
|
|
2589
|
+
deselectCallback: (o) => {
|
|
2590
|
+
var s, n;
|
|
2591
|
+
this._deselectCallback && this._deselectCallback(o), this.dispatchEvent(new CustomEvent("deselect", {
|
|
2267
2592
|
detail: {
|
|
2268
|
-
option:
|
|
2269
|
-
selectedOptions: (
|
|
2270
|
-
selectedValues: Array.from(((
|
|
2593
|
+
option: o,
|
|
2594
|
+
selectedOptions: (s = this.picker) == null ? void 0 : s.getSelected(),
|
|
2595
|
+
selectedValues: Array.from(((n = this.picker) == null ? void 0 : n.getValue()) || [])
|
|
2271
2596
|
}
|
|
2272
2597
|
}));
|
|
2273
2598
|
},
|
|
2274
|
-
changeCallback: (
|
|
2275
|
-
var
|
|
2276
|
-
this._changeCallback && this._changeCallback(
|
|
2599
|
+
changeCallback: (o) => {
|
|
2600
|
+
var s;
|
|
2601
|
+
this._changeCallback && this._changeCallback(o), this.dispatchEvent(new CustomEvent("change", {
|
|
2277
2602
|
detail: {
|
|
2278
|
-
selectedOptions:
|
|
2279
|
-
selectedValues: Array.from(((
|
|
2603
|
+
selectedOptions: o,
|
|
2604
|
+
selectedValues: Array.from(((s = this.picker) == null ? void 0 : s.getValue()) || [])
|
|
2280
2605
|
}
|
|
2281
2606
|
}));
|
|
2282
2607
|
},
|
|
@@ -2285,7 +2610,7 @@ class nt extends pi {
|
|
|
2285
2610
|
// Pass host element (this) for hidden inputs in light DOM
|
|
2286
2611
|
hostElement: this
|
|
2287
2612
|
};
|
|
2288
|
-
t && (this.containerElement.dataset.initialValues = JSON.stringify(t)), this.picker = new
|
|
2613
|
+
t && (this.containerElement.dataset.initialValues = JSON.stringify(t)), this.picker = new di(this.containerElement, l);
|
|
2289
2614
|
}
|
|
2290
2615
|
reinitialize() {
|
|
2291
2616
|
this.picker && (this.picker.destroy(), this.initializePicker());
|
|
@@ -2512,31 +2837,31 @@ class nt extends pi {
|
|
|
2512
2837
|
this.picker && this.picker.destroy();
|
|
2513
2838
|
}
|
|
2514
2839
|
}
|
|
2515
|
-
typeof window < "u" && typeof customElements < "u" && (customElements.get("
|
|
2840
|
+
typeof window < "u" && typeof customElements < "u" && (customElements.get("web-multiselect") || customElements.define("web-multiselect", rt));
|
|
2516
2841
|
typeof window < "u" && (window.keenmate = window.keenmate || {}, window.keenmate.multiselect = {
|
|
2517
|
-
version: () => "1.0.0-
|
|
2842
|
+
version: () => "1.0.0-rc10",
|
|
2518
2843
|
config: {
|
|
2519
2844
|
name: "@keenmate/web-multiselect",
|
|
2520
|
-
version: "1.0.0-
|
|
2845
|
+
version: "1.0.0-rc10",
|
|
2521
2846
|
author: "Keenmate",
|
|
2522
2847
|
license: "MIT",
|
|
2523
2848
|
repository: "git+https://github.com/keenmate/web-multiselect.git",
|
|
2524
2849
|
homepage: "https://github.com/keenmate/web-multiselect#readme"
|
|
2525
2850
|
},
|
|
2526
2851
|
register: () => {
|
|
2527
|
-
typeof customElements < "u" && !customElements.get("
|
|
2852
|
+
typeof customElements < "u" && !customElements.get("web-multiselect") && customElements.define("web-multiselect", rt);
|
|
2528
2853
|
},
|
|
2529
|
-
getInstances: () =>
|
|
2854
|
+
getInstances: () => nt()
|
|
2530
2855
|
});
|
|
2531
2856
|
export {
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
|
|
2539
|
-
|
|
2540
|
-
|
|
2857
|
+
rt as MultiSelectElement,
|
|
2858
|
+
di as PureMultiSelect,
|
|
2859
|
+
C as dataLogger,
|
|
2860
|
+
fi as disableLogging,
|
|
2861
|
+
gi as enableCategory,
|
|
2862
|
+
ui as enableLogging,
|
|
2863
|
+
H as initLogger,
|
|
2864
|
+
k as interactionLogger,
|
|
2865
|
+
st as setLogLevel,
|
|
2541
2866
|
v as uiLogger
|
|
2542
2867
|
};
|