@editora/ui-core 0.1.23 → 0.1.24
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/dist/components/ui-sortable.d.ts +209 -12
- package/dist/components/ui-sortable.d.ts.map +1 -1
- package/dist/sortable.cjs.js +504 -369
- package/dist/sortable.d.ts +1 -1
- package/dist/sortable.d.ts.map +1 -1
- package/dist/sortable.esm.js +1758 -1168
- package/package.json +1 -1
package/dist/sortable.cjs.js
CHANGED
|
@@ -1,26 +1,34 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const de=require("./ElementBase-DxbvhLJs.js");function V(u,e,t,i=56,r=18){if(!Number.isFinite(u)||!(t>e))return 0;const s=Math.min(i,(t-e)/2);return s<=0?0:u<e+s?-Math.ceil(r*Math.min(1,(e+s-u)/s)):u>t-s?Math.ceil(r*Math.min(1,(u-(t-s))/s)):0}const ce=new Set(["auto","scroll","overlay"]);function ue(u){let e=u;for(;e;){if(e=e.parentNode instanceof ShadowRoot?e.parentNode.host:e.parentNode,!(e instanceof HTMLElement))continue;if(e===e.ownerDocument.body||e===e.ownerDocument.documentElement)return null;const{overflowY:t}=e.ownerDocument.defaultView?.getComputedStyle(e)??{overflowY:""};if(ce.has(t)&&e.scrollHeight>e.clientHeight)return e}return null}const he=1,X={hintHandle:"Use the handle to drag, or press Space on a focused item to start keyboard reordering.",hintItem:"Drag from anywhere on an item, or press Space on a focused item to start keyboard reordering.",hintCustom:"Use your custom drag handle element, or press Space on a focused item to start keyboard reordering.",hintKeyboard:"Keyboard drag active. Use arrow keys to choose a drop target, Space or Enter to drop, and Escape to cancel.",hintNestGutter:"To nest an item, hold Alt or drop it on the far side of another.",hintNestModifier:"To nest an item, hold Alt while you drop it on another.",hintNestArea:"To nest an item, drop it on the middle of another.",hintPausedSort:"Dragging is paused while alphabetical sorting is active.",hintPausedFilter:"Dragging is paused while the list is filtered.",hintDisabled:"Dragging is currently disabled.",selectedOne:"item selected",selectedMany:"items selected",listReadOnly:"This list is read-only.",listClone:"Dragging from this list creates a copy.",listAccepts:"Accepts drops from: {lists}",listFull:"This list is full ({max} items).",emptyList:"Drop items here.",dropHere:"Drop here",nestHere:"Nest here",badgeSelected:"Selected",badgeClone:"Clone on drag",badgePinned:"Pinned",dropPreview:"Drop preview",copyPreview:"Copy preview",releaseMove:"Release to place this item here.",releaseMoveMany:"Release to place this selection here.",releaseCopy:"Release to add a copy here.",movingOne:"Moving item",movingMany:"Moving {count} items",copyingOne:"Copying item",copyingMany:"Copying {count} items",announceSelectedMany:"{count} items selected.",announceDragDisabled:"Dragging is disabled right now.",announceDragging:"Dragging {label}.",announceDraggingMany:"Dragging {count} items.",announceDraggingCopy:"Dragging {label} as a copy.",announceDraggingCopyMany:"Dragging {count} items as a copy.",announceCancelled:"Drag cancelled.",announceRejected:"That move is not allowed.",announceLifted:"Lifted {label}.",announceLiftedMany:"Lifted {count} items.",announceLiftedHelp:"Use arrow keys to choose a destination.",announceCopiedOne:"Item copied into {list}.",announceCopiedMany:"{count} items copied into {list}.",announceNestedOne:"Item nested in {list}.",announceNestedMany:"{count} items nested in {list}.",announceMovedOne:"Item moved to {list}.",announceMovedMany:"{count} items moved to {list}.",announceReorderedOne:"Item reordered in {list}.",announceReorderedMany:"{count} items reordered in {list}.",targetBefore:"Before {label}",targetInside:"Nest inside {label}",targetEnd:"End of {list}",targetAfterChildren:"After children"},W=44,Q=72,Z=350,pe=10,ge=`
|
|
2
2
|
:host {
|
|
3
3
|
--ui-sortable-accent: var(--ui-color-primary, #2563eb);
|
|
4
4
|
--ui-sortable-surface: var(--ui-color-surface, #ffffff);
|
|
5
|
-
--ui-sortable-surface-muted: color-mix(in srgb, var(--ui-sortable-surface) 92%, #eff6ff);
|
|
6
|
-
--ui-sortable-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
|
|
7
5
|
--ui-sortable-text: var(--ui-color-text, #0f172a);
|
|
8
|
-
--ui-sortable-muted: var(--ui-color-muted, #
|
|
9
|
-
--ui-sortable-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
--ui-sortable-
|
|
13
|
-
--ui-sortable-
|
|
14
|
-
--ui-sortable-
|
|
15
|
-
--ui-sortable-
|
|
16
|
-
--ui-sortable-
|
|
17
|
-
--ui-sortable-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
--ui-sortable-
|
|
21
|
-
--ui-sortable-
|
|
6
|
+
--ui-sortable-muted: var(--ui-color-muted, #5b6778);
|
|
7
|
+
--ui-sortable-lane: color-mix(in srgb, var(--ui-sortable-text) 3.5%, var(--ui-sortable-surface));
|
|
8
|
+
--ui-sortable-card: var(--ui-sortable-surface);
|
|
9
|
+
--ui-sortable-surface-muted: var(--ui-sortable-lane);
|
|
10
|
+
--ui-sortable-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 62%, transparent);
|
|
11
|
+
--ui-sortable-border-strong: color-mix(in srgb, var(--ui-sortable-text) 24%, var(--ui-sortable-surface));
|
|
12
|
+
--ui-sortable-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
13
|
+
--ui-sortable-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
|
|
14
|
+
--ui-sortable-card-shadow-hover: 0 3px 10px rgba(15, 23, 42, 0.1);
|
|
15
|
+
--ui-sortable-lift-shadow:
|
|
16
|
+
0 22px 44px -10px rgba(15, 23, 42, 0.32),
|
|
17
|
+
0 8px 16px rgba(15, 23, 42, 0.14);
|
|
18
|
+
--ui-sortable-radius: 14px;
|
|
19
|
+
--ui-sortable-panel-radius: 14px;
|
|
20
|
+
--ui-sortable-item-radius: 10px;
|
|
21
|
+
--ui-sortable-handle-radius: 6px;
|
|
22
|
+
--ui-sortable-gap: 12px;
|
|
23
|
+
--ui-sortable-list-gap: 6px;
|
|
24
|
+
--ui-sortable-item-gap: 6px;
|
|
25
|
+
--ui-sortable-list-min-size: 260px;
|
|
26
|
+
--ui-sortable-dropzone-size: 0px;
|
|
27
|
+
--ui-sortable-dropzone-hit-size: 7px;
|
|
28
|
+
--ui-sortable-dropzone-inside-size: 0px;
|
|
29
|
+
--ui-sortable-dropzone-container-min-block-size: 56px;
|
|
22
30
|
--ui-sortable-dropzone-container-min-inline-size: 180px;
|
|
23
|
-
--ui-sortable-indent:
|
|
31
|
+
--ui-sortable-indent: 16px;
|
|
24
32
|
display: block;
|
|
25
33
|
min-inline-size: 0;
|
|
26
34
|
color: var(--ui-sortable-text);
|
|
@@ -35,7 +43,7 @@
|
|
|
35
43
|
|
|
36
44
|
.root {
|
|
37
45
|
display: grid;
|
|
38
|
-
gap:
|
|
46
|
+
gap: 10px;
|
|
39
47
|
min-inline-size: 0;
|
|
40
48
|
}
|
|
41
49
|
|
|
@@ -44,13 +52,25 @@
|
|
|
44
52
|
flex-wrap: wrap;
|
|
45
53
|
align-items: center;
|
|
46
54
|
justify-content: space-between;
|
|
47
|
-
gap:
|
|
55
|
+
gap: 6px 16px;
|
|
48
56
|
padding: 0 2px;
|
|
49
57
|
color: var(--ui-sortable-muted);
|
|
50
|
-
font-size:
|
|
58
|
+
font-size: 12px;
|
|
51
59
|
line-height: 1.5;
|
|
52
60
|
}
|
|
53
61
|
|
|
62
|
+
/* hide-toolbar: the hint is still what the lists are described by, so it is hidden from sight only. */
|
|
63
|
+
.toolbar[data-hidden="true"] {
|
|
64
|
+
position: absolute;
|
|
65
|
+
inline-size: 1px;
|
|
66
|
+
block-size: 1px;
|
|
67
|
+
margin: -1px;
|
|
68
|
+
padding: 0;
|
|
69
|
+
overflow: hidden;
|
|
70
|
+
clip: rect(0, 0, 0, 0);
|
|
71
|
+
white-space: nowrap;
|
|
72
|
+
}
|
|
73
|
+
|
|
54
74
|
.helper {
|
|
55
75
|
display: inline-flex;
|
|
56
76
|
align-items: center;
|
|
@@ -58,40 +78,54 @@
|
|
|
58
78
|
min-inline-size: 0;
|
|
59
79
|
}
|
|
60
80
|
|
|
81
|
+
.selection-summary[data-count="0"] {
|
|
82
|
+
display: none;
|
|
83
|
+
}
|
|
84
|
+
|
|
61
85
|
.selection-pill {
|
|
62
86
|
display: inline-flex;
|
|
63
87
|
align-items: center;
|
|
64
88
|
justify-content: center;
|
|
65
|
-
min-inline-size:
|
|
66
|
-
min-block-size:
|
|
67
|
-
padding-inline:
|
|
89
|
+
min-inline-size: 22px;
|
|
90
|
+
min-block-size: 20px;
|
|
91
|
+
padding-inline: 7px;
|
|
68
92
|
border-radius: 999px;
|
|
69
93
|
background: color-mix(in srgb, var(--ui-sortable-accent) 14%, transparent);
|
|
70
94
|
color: color-mix(in srgb, var(--ui-sortable-accent) 84%, var(--ui-sortable-text));
|
|
95
|
+
font-size: 11.5px;
|
|
71
96
|
font-weight: 700;
|
|
72
97
|
}
|
|
73
98
|
|
|
99
|
+
/* Lists sit side by side and scroll sideways when they do not fit (a board), instead of wrapping onto
|
|
100
|
+
rows. One list fills the width. The padding gives card shadows and focus rings room inside the
|
|
101
|
+
scroller; the negative margin hands that room back to the layout. */
|
|
74
102
|
.lists {
|
|
75
103
|
display: grid;
|
|
104
|
+
grid-auto-flow: column;
|
|
105
|
+
grid-auto-columns: minmax(min(var(--ui-sortable-list-min-size), 100%), 1fr);
|
|
76
106
|
gap: var(--ui-sortable-gap);
|
|
77
|
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
78
107
|
min-inline-size: 0;
|
|
108
|
+
padding: 4px;
|
|
109
|
+
margin: -4px;
|
|
110
|
+
overflow: auto hidden;
|
|
111
|
+
overscroll-behavior-x: contain;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.lists,
|
|
115
|
+
.items {
|
|
116
|
+
scrollbar-width: thin;
|
|
117
|
+
scrollbar-color: color-mix(in srgb, var(--ui-sortable-text) 28%, transparent) transparent;
|
|
79
118
|
}
|
|
80
119
|
|
|
81
120
|
.list {
|
|
82
121
|
display: grid;
|
|
83
122
|
grid-template-rows: auto 1fr;
|
|
84
|
-
gap:
|
|
123
|
+
gap: 10px;
|
|
85
124
|
min-inline-size: 0;
|
|
86
|
-
padding:
|
|
125
|
+
padding: 12px;
|
|
87
126
|
border: 1px solid var(--ui-sortable-border);
|
|
88
127
|
border-radius: var(--ui-sortable-radius);
|
|
89
|
-
background:
|
|
90
|
-
linear-gradient(
|
|
91
|
-
180deg,
|
|
92
|
-
color-mix(in srgb, var(--ui-sortable-surface) 96%, transparent),
|
|
93
|
-
color-mix(in srgb, var(--ui-sortable-accent) 4%, var(--ui-sortable-surface))
|
|
94
|
-
);
|
|
128
|
+
background: var(--ui-sortable-lane);
|
|
95
129
|
box-shadow: var(--ui-sortable-shadow);
|
|
96
130
|
}
|
|
97
131
|
|
|
@@ -100,6 +134,7 @@
|
|
|
100
134
|
flex-wrap: nowrap;
|
|
101
135
|
overflow: auto hidden;
|
|
102
136
|
align-items: stretch;
|
|
137
|
+
min-block-size: 0;
|
|
103
138
|
}
|
|
104
139
|
|
|
105
140
|
/* The cards live inside one root .tree wrapper, which is a vertical grid. Without this the
|
|
@@ -109,20 +144,26 @@
|
|
|
109
144
|
flex-wrap: nowrap;
|
|
110
145
|
align-items: stretch;
|
|
111
146
|
min-inline-size: min-content;
|
|
147
|
+
margin-block: 0;
|
|
148
|
+
margin-inline: calc(var(--ui-sortable-list-gap) / -2);
|
|
112
149
|
}
|
|
113
150
|
|
|
114
151
|
.list[data-orientation="horizontal"] .items > .tree > .item-shell {
|
|
115
152
|
flex: 0 0 auto;
|
|
116
153
|
min-inline-size: min(220px, 70vw);
|
|
154
|
+
align-content: start;
|
|
155
|
+
padding-block: 0;
|
|
156
|
+
padding-inline: calc(var(--ui-sortable-list-gap) / 2);
|
|
117
157
|
}
|
|
118
158
|
|
|
119
159
|
.list[data-disabled="true"] {
|
|
120
|
-
opacity: 0.
|
|
160
|
+
opacity: 0.62;
|
|
121
161
|
}
|
|
122
162
|
|
|
123
163
|
.list-header {
|
|
124
164
|
display: grid;
|
|
125
|
-
gap:
|
|
165
|
+
gap: 2px;
|
|
166
|
+
padding: 2px 4px 0;
|
|
126
167
|
}
|
|
127
168
|
|
|
128
169
|
.list-custom-header:empty {
|
|
@@ -145,9 +186,10 @@
|
|
|
145
186
|
}
|
|
146
187
|
|
|
147
188
|
.list-label {
|
|
148
|
-
font-size:
|
|
189
|
+
font-size: 13px;
|
|
149
190
|
line-height: 1.4;
|
|
150
|
-
font-weight:
|
|
191
|
+
font-weight: 650;
|
|
192
|
+
letter-spacing: 0.005em;
|
|
151
193
|
color: var(--ui-sortable-text);
|
|
152
194
|
}
|
|
153
195
|
|
|
@@ -155,36 +197,85 @@
|
|
|
155
197
|
display: inline-flex;
|
|
156
198
|
align-items: center;
|
|
157
199
|
justify-content: center;
|
|
158
|
-
min-inline-size:
|
|
159
|
-
min-block-size:
|
|
160
|
-
padding-inline:
|
|
200
|
+
min-inline-size: 22px;
|
|
201
|
+
min-block-size: 20px;
|
|
202
|
+
padding-inline: 7px;
|
|
161
203
|
border-radius: 999px;
|
|
162
|
-
background: color-mix(in srgb, var(--ui-sortable-
|
|
204
|
+
background: color-mix(in srgb, var(--ui-sortable-text) 7%, transparent);
|
|
163
205
|
color: var(--ui-sortable-muted);
|
|
164
|
-
font-size:
|
|
165
|
-
font-weight:
|
|
206
|
+
font-size: 11.5px;
|
|
207
|
+
font-weight: 650;
|
|
208
|
+
font-variant-numeric: tabular-nums;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* A list at its maxItems takes nothing more: the count turns to a warning colour. */
|
|
212
|
+
.list[data-full="true"] .list-count {
|
|
213
|
+
background: color-mix(in srgb, var(--ui-sortable-warning, #d97706) 16%, transparent);
|
|
214
|
+
color: color-mix(in srgb, var(--ui-sortable-warning, #d97706) 80%, var(--ui-sortable-text));
|
|
166
215
|
}
|
|
167
216
|
|
|
168
217
|
.list-description,
|
|
169
|
-
.list-helper
|
|
170
|
-
.empty {
|
|
218
|
+
.list-helper {
|
|
171
219
|
color: var(--ui-sortable-muted);
|
|
172
220
|
font-size: 12px;
|
|
173
|
-
line-height: 1.
|
|
221
|
+
line-height: 1.5;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.list-helper {
|
|
225
|
+
font-size: 11.5px;
|
|
226
|
+
opacity: 0.85;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.empty {
|
|
230
|
+
display: grid;
|
|
231
|
+
place-items: center;
|
|
232
|
+
min-block-size: 64px;
|
|
233
|
+
margin-block: calc(var(--ui-sortable-list-gap) / 2);
|
|
234
|
+
padding: 14px;
|
|
235
|
+
border: 1px dashed var(--ui-sortable-border-strong);
|
|
236
|
+
border-radius: var(--ui-sortable-item-radius);
|
|
237
|
+
color: var(--ui-sortable-muted);
|
|
238
|
+
font-size: 12.5px;
|
|
239
|
+
line-height: 1.5;
|
|
240
|
+
text-align: center;
|
|
241
|
+
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.empty:has(+ .dropzone[data-active="true"]) {
|
|
245
|
+
border-color: var(--ui-sortable-accent);
|
|
246
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 7%, transparent);
|
|
247
|
+
color: color-mix(in srgb, var(--ui-sortable-accent) 80%, var(--ui-sortable-text));
|
|
174
248
|
}
|
|
175
249
|
|
|
176
250
|
.items {
|
|
177
251
|
display: grid;
|
|
178
252
|
align-content: start;
|
|
179
|
-
gap:
|
|
180
|
-
min-block-size:
|
|
253
|
+
gap: 0;
|
|
254
|
+
min-block-size: 88px;
|
|
181
255
|
min-inline-size: 0;
|
|
182
256
|
}
|
|
183
257
|
|
|
258
|
+
/* A list with a height of its own scrolls by itself. The padding (and the cards' own spacing) gives shadows and
|
|
259
|
+
focus rings room inside the scroller; the negative margin hands that room back to the layout. The wrapper's
|
|
260
|
+
negative margin is dropped here: inside a scroller it would count as overflow, and a list whose cards all fit
|
|
261
|
+
would still scroll by a few pixels. */
|
|
262
|
+
.items[data-scroll="true"] {
|
|
263
|
+
max-block-size: var(--ui-sortable-list-max-block-size);
|
|
264
|
+
overflow-y: auto;
|
|
265
|
+
overscroll-behavior: contain;
|
|
266
|
+
padding: 1px 4px;
|
|
267
|
+
margin: -4px;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.items[data-scroll="true"] > .tree {
|
|
271
|
+
margin-block: 0;
|
|
272
|
+
}
|
|
273
|
+
|
|
184
274
|
.tree {
|
|
185
275
|
display: grid;
|
|
186
|
-
gap:
|
|
276
|
+
gap: 0;
|
|
187
277
|
min-inline-size: 0;
|
|
278
|
+
margin-block: calc(var(--ui-sortable-list-gap) / -2);
|
|
188
279
|
}
|
|
189
280
|
|
|
190
281
|
.list-custom-empty:empty {
|
|
@@ -199,169 +290,235 @@
|
|
|
199
290
|
display: none;
|
|
200
291
|
}
|
|
201
292
|
|
|
293
|
+
/* The cards are spaced by the shell's padding, not by a grid gap: the drop rails between them take
|
|
294
|
+
no height, so the list is as tall as its cards. */
|
|
202
295
|
.item-shell {
|
|
203
296
|
display: grid;
|
|
204
|
-
gap:
|
|
297
|
+
gap: 0;
|
|
205
298
|
min-inline-size: 0;
|
|
299
|
+
padding-block: calc(var(--ui-sortable-list-gap) / 2);
|
|
206
300
|
}
|
|
207
301
|
|
|
208
302
|
.item {
|
|
209
303
|
display: grid;
|
|
210
304
|
grid-template-columns: auto minmax(0, 1fr);
|
|
211
|
-
align-items:
|
|
305
|
+
align-items: center;
|
|
212
306
|
gap: var(--ui-sortable-item-gap);
|
|
213
307
|
min-inline-size: 0;
|
|
214
|
-
padding: 12px;
|
|
215
|
-
border: 1px solid
|
|
308
|
+
padding: 9px 12px 9px 6px;
|
|
309
|
+
border: 1px solid var(--ui-sortable-border);
|
|
216
310
|
border-radius: var(--ui-sortable-item-radius);
|
|
217
|
-
background: var(--ui-sortable-
|
|
218
|
-
box-shadow:
|
|
219
|
-
will-change: transform, opacity, box-shadow, border-color, background;
|
|
311
|
+
background: var(--ui-sortable-card);
|
|
312
|
+
box-shadow: var(--ui-sortable-card-shadow);
|
|
220
313
|
transition:
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
314
|
+
opacity 160ms ease,
|
|
315
|
+
box-shadow 160ms ease,
|
|
316
|
+
border-color 160ms ease,
|
|
317
|
+
background 160ms ease;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.item:hover {
|
|
321
|
+
border-color: var(--ui-sortable-border-strong);
|
|
322
|
+
box-shadow: var(--ui-sortable-card-shadow-hover);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.item:focus {
|
|
326
|
+
outline: none;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.item:focus-visible {
|
|
330
|
+
outline: 2px solid var(--ui-sortable-accent);
|
|
331
|
+
outline-offset: 2px;
|
|
226
332
|
}
|
|
227
333
|
|
|
228
334
|
.item[data-drag-handle-mode="item"],
|
|
229
335
|
.item[data-drag-handle-mode="custom"] {
|
|
230
336
|
grid-template-columns: minmax(0, 1fr);
|
|
337
|
+
padding-inline-start: 12px;
|
|
231
338
|
}
|
|
232
339
|
|
|
233
340
|
.item[data-drag-handle-mode="item"] {
|
|
234
341
|
cursor: grab;
|
|
235
342
|
}
|
|
236
343
|
|
|
344
|
+
/* A card that is dragged by its body is held to lift on touch: no text selection or callout while holding. */
|
|
345
|
+
.item[data-drag-handle-mode="item"],
|
|
346
|
+
.item[data-drag-handle-mode="custom"] {
|
|
347
|
+
-webkit-user-select: none;
|
|
348
|
+
user-select: none;
|
|
349
|
+
-webkit-touch-callout: none;
|
|
350
|
+
}
|
|
351
|
+
|
|
237
352
|
.item[data-drag-handle-mode="item"][data-dragging="true"] {
|
|
238
353
|
cursor: grabbing;
|
|
239
354
|
}
|
|
240
355
|
|
|
241
356
|
.item[data-selected="true"] {
|
|
242
|
-
border-color: color-mix(in srgb, var(--ui-sortable-accent)
|
|
243
|
-
background: color-mix(in srgb, var(--ui-sortable-accent)
|
|
357
|
+
border-color: color-mix(in srgb, var(--ui-sortable-accent) 60%, var(--ui-sortable-border));
|
|
358
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 7%, var(--ui-sortable-card));
|
|
244
359
|
box-shadow:
|
|
245
|
-
0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent)
|
|
246
|
-
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.item[data-focused="true"] {
|
|
250
|
-
border-color: color-mix(in srgb, var(--ui-sortable-accent) 42%, var(--ui-sortable-border));
|
|
251
|
-
box-shadow:
|
|
252
|
-
0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 12%, transparent),
|
|
253
|
-
0 10px 24px rgba(15, 23, 42, 0.08);
|
|
360
|
+
0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 28%, transparent),
|
|
361
|
+
var(--ui-sortable-card-shadow);
|
|
254
362
|
}
|
|
255
363
|
|
|
256
364
|
.item[data-drop-inside-active="true"] {
|
|
257
|
-
border-color:
|
|
258
|
-
background:
|
|
259
|
-
linear-gradient(
|
|
260
|
-
180deg,
|
|
261
|
-
color-mix(in srgb, var(--ui-sortable-accent) 14%, var(--ui-sortable-surface)),
|
|
262
|
-
color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface-muted))
|
|
263
|
-
);
|
|
365
|
+
border-color: var(--ui-sortable-accent);
|
|
366
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-card));
|
|
264
367
|
box-shadow:
|
|
265
|
-
0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent)
|
|
266
|
-
|
|
368
|
+
0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 20%, transparent),
|
|
369
|
+
var(--ui-sortable-card-shadow);
|
|
267
370
|
}
|
|
268
371
|
|
|
372
|
+
/* While a card is being dragged its place in the list stays as an empty slot, so the list does not
|
|
373
|
+
jump; the card itself is the ghost that follows the pointer. */
|
|
269
374
|
.item[data-dragging="true"] {
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
375
|
+
border-style: dashed;
|
|
376
|
+
border-color: color-mix(in srgb, var(--ui-sortable-accent) 45%, var(--ui-sortable-border));
|
|
377
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 5%, var(--ui-sortable-card));
|
|
378
|
+
box-shadow: none;
|
|
273
379
|
}
|
|
274
380
|
|
|
381
|
+
.item[data-dragging="true"] > * {
|
|
382
|
+
visibility: hidden;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
/* The keyboard drag shows the card at its destination as a quiet dashed card. */
|
|
275
386
|
.item.item-placeholder {
|
|
276
387
|
grid-template-columns: 1fr;
|
|
388
|
+
padding-inline-start: 12px;
|
|
277
389
|
border-style: dashed;
|
|
278
|
-
border-color: color-mix(in srgb, var(--ui-sortable-accent)
|
|
279
|
-
background:
|
|
280
|
-
|
|
281
|
-
180deg,
|
|
282
|
-
color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface)),
|
|
283
|
-
color-mix(in srgb, var(--ui-sortable-accent) 6%, var(--ui-sortable-surface-muted))
|
|
284
|
-
);
|
|
285
|
-
box-shadow:
|
|
286
|
-
inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 18%, transparent),
|
|
287
|
-
0 12px 26px rgba(15, 23, 42, 0.08);
|
|
390
|
+
border-color: color-mix(in srgb, var(--ui-sortable-accent) 55%, var(--ui-sortable-border));
|
|
391
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 7%, var(--ui-sortable-card));
|
|
392
|
+
box-shadow: none;
|
|
288
393
|
}
|
|
289
394
|
|
|
290
395
|
.placeholder-content {
|
|
291
396
|
display: grid;
|
|
292
|
-
gap:
|
|
397
|
+
gap: 3px;
|
|
293
398
|
min-inline-size: 0;
|
|
294
399
|
}
|
|
295
400
|
|
|
296
401
|
.placeholder-kicker {
|
|
297
|
-
font-size:
|
|
402
|
+
font-size: 10.5px;
|
|
298
403
|
line-height: 1.4;
|
|
299
404
|
font-weight: 700;
|
|
300
405
|
letter-spacing: 0.08em;
|
|
301
406
|
text-transform: uppercase;
|
|
302
|
-
color: color-mix(in srgb, var(--ui-sortable-accent)
|
|
407
|
+
color: color-mix(in srgb, var(--ui-sortable-accent) 78%, var(--ui-sortable-text));
|
|
303
408
|
}
|
|
304
409
|
|
|
305
410
|
.placeholder-title {
|
|
306
|
-
font-size:
|
|
411
|
+
font-size: 13.5px;
|
|
307
412
|
line-height: 1.4;
|
|
308
|
-
font-weight:
|
|
413
|
+
font-weight: 600;
|
|
309
414
|
color: var(--ui-sortable-text);
|
|
310
415
|
}
|
|
311
416
|
|
|
312
417
|
.placeholder-description {
|
|
313
418
|
color: var(--ui-sortable-muted);
|
|
314
419
|
font-size: 12px;
|
|
315
|
-
line-height: 1.
|
|
420
|
+
line-height: 1.5;
|
|
316
421
|
}
|
|
317
422
|
|
|
318
|
-
.
|
|
423
|
+
/* The card that follows the pointer: a copy of the real card, lifted. */
|
|
424
|
+
.item.item-ghost {
|
|
319
425
|
position: fixed;
|
|
320
|
-
inset:
|
|
321
|
-
|
|
322
|
-
left: -9999px;
|
|
323
|
-
z-index: 2147483646;
|
|
426
|
+
inset: 0 auto auto 0;
|
|
427
|
+
z-index: 2147483647;
|
|
324
428
|
box-sizing: border-box;
|
|
325
|
-
inline-size:
|
|
326
|
-
|
|
327
|
-
border: 1px dashed color-mix(in srgb, var(--ui-sortable-accent) 50%, var(--ui-sortable-border));
|
|
328
|
-
border-radius: var(--ui-sortable-item-radius);
|
|
329
|
-
background:
|
|
330
|
-
linear-gradient(
|
|
331
|
-
180deg,
|
|
332
|
-
color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface)),
|
|
333
|
-
color-mix(in srgb, var(--ui-sortable-accent) 6%, var(--ui-sortable-surface-muted))
|
|
334
|
-
);
|
|
335
|
-
box-shadow:
|
|
336
|
-
inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 18%, transparent),
|
|
337
|
-
0 18px 40px rgba(15, 23, 42, 0.12);
|
|
429
|
+
max-inline-size: calc(100vw - 16px);
|
|
430
|
+
margin: 0;
|
|
338
431
|
pointer-events: none;
|
|
339
|
-
|
|
340
|
-
|
|
432
|
+
cursor: grabbing;
|
|
433
|
+
border-color: color-mix(in srgb, var(--ui-sortable-accent) 55%, var(--ui-sortable-border));
|
|
434
|
+
background: var(--ui-sortable-card);
|
|
435
|
+
box-shadow: var(--ui-sortable-lift-shadow);
|
|
436
|
+
rotate: 1.2deg;
|
|
437
|
+
scale: 1.025;
|
|
438
|
+
transition: none;
|
|
439
|
+
will-change: transform;
|
|
440
|
+
animation: ui-sortable-lift 150ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
.item.item-ghost[data-count="stack"] {
|
|
444
|
+
box-shadow:
|
|
445
|
+
5px 5px 0 -1px var(--ui-sortable-card),
|
|
446
|
+
5px 5px 0 0 var(--ui-sortable-border-strong),
|
|
447
|
+
10px 10px 0 -2px var(--ui-sortable-card),
|
|
448
|
+
10px 10px 0 -1px var(--ui-sortable-border-strong),
|
|
449
|
+
var(--ui-sortable-lift-shadow);
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.item.item-ghost[data-refused] {
|
|
453
|
+
border-color: var(--ui-sortable-danger, #dc2626);
|
|
454
|
+
box-shadow:
|
|
455
|
+
0 0 0 3px color-mix(in srgb, var(--ui-sortable-danger, #dc2626) 22%, transparent),
|
|
456
|
+
var(--ui-sortable-lift-shadow);
|
|
341
457
|
}
|
|
342
458
|
|
|
343
|
-
.
|
|
459
|
+
.item.item-ghost[data-refused] .handle {
|
|
460
|
+
color: var(--ui-sortable-danger, #dc2626);
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
.item.item-ghost .handle {
|
|
344
464
|
opacity: 1;
|
|
465
|
+
color: var(--ui-sortable-accent);
|
|
466
|
+
cursor: grabbing;
|
|
345
467
|
}
|
|
346
468
|
|
|
347
|
-
.
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
469
|
+
.item.item-ghost[data-compact="true"] .item-description,
|
|
470
|
+
.item.item-ghost[data-compact="true"] .item-meta {
|
|
471
|
+
display: none;
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
.ghost-badge {
|
|
475
|
+
position: absolute;
|
|
476
|
+
inset-block-start: -9px;
|
|
477
|
+
inset-inline-end: -9px;
|
|
478
|
+
min-inline-size: 22px;
|
|
479
|
+
block-size: 22px;
|
|
480
|
+
padding-inline: 6px;
|
|
481
|
+
box-sizing: border-box;
|
|
482
|
+
border-radius: 999px;
|
|
483
|
+
background: var(--ui-sortable-accent);
|
|
484
|
+
color: var(--ui-sortable-accent-contrast, #ffffff);
|
|
485
|
+
font-size: 11px;
|
|
486
|
+
font-weight: 700;
|
|
487
|
+
line-height: 22px;
|
|
488
|
+
text-align: center;
|
|
489
|
+
box-shadow: 0 0 0 2px var(--ui-sortable-card);
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
/* Fallback when the dragged card cannot be copied. */
|
|
493
|
+
.drag-pill {
|
|
494
|
+
position: fixed;
|
|
495
|
+
inset: 0 auto auto 0;
|
|
496
|
+
z-index: 2147483647;
|
|
497
|
+
padding: 8px 12px;
|
|
498
|
+
border-radius: 999px;
|
|
499
|
+
background: var(--ui-sortable-text);
|
|
500
|
+
color: var(--ui-sortable-surface);
|
|
501
|
+
font-size: 12px;
|
|
502
|
+
font-weight: 600;
|
|
503
|
+
line-height: 1;
|
|
504
|
+
pointer-events: none;
|
|
505
|
+
box-shadow: var(--ui-sortable-lift-shadow);
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
@keyframes ui-sortable-lift {
|
|
509
|
+
from {
|
|
510
|
+
rotate: 0deg;
|
|
511
|
+
scale: 1;
|
|
512
|
+
}
|
|
356
513
|
}
|
|
357
514
|
|
|
358
515
|
.item[data-disabled="true"] {
|
|
359
|
-
opacity: 0.
|
|
516
|
+
opacity: 0.55;
|
|
360
517
|
}
|
|
361
518
|
|
|
362
519
|
.item-content {
|
|
363
520
|
display: grid;
|
|
364
|
-
gap:
|
|
521
|
+
gap: 2px;
|
|
365
522
|
min-inline-size: 0;
|
|
366
523
|
}
|
|
367
524
|
|
|
@@ -392,9 +549,9 @@
|
|
|
392
549
|
}
|
|
393
550
|
|
|
394
551
|
.item-title {
|
|
395
|
-
font-size:
|
|
552
|
+
font-size: 13.5px;
|
|
396
553
|
line-height: 1.4;
|
|
397
|
-
font-weight:
|
|
554
|
+
font-weight: 600;
|
|
398
555
|
color: var(--ui-sortable-text);
|
|
399
556
|
overflow-wrap: anywhere;
|
|
400
557
|
}
|
|
@@ -402,35 +559,41 @@
|
|
|
402
559
|
.item-description {
|
|
403
560
|
color: var(--ui-sortable-muted);
|
|
404
561
|
font-size: 12px;
|
|
405
|
-
line-height: 1.
|
|
562
|
+
line-height: 1.5;
|
|
406
563
|
overflow-wrap: anywhere;
|
|
407
564
|
}
|
|
408
565
|
|
|
409
566
|
.item-meta {
|
|
410
567
|
display: flex;
|
|
411
568
|
flex-wrap: wrap;
|
|
412
|
-
gap:
|
|
569
|
+
gap: 4px;
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
.item-meta:has(.item-badge:not([hidden]):not(.drop-badge)),
|
|
573
|
+
.item[data-drop-inside-active="true"] .item-meta {
|
|
574
|
+
margin-block-start: 4px;
|
|
413
575
|
}
|
|
414
576
|
|
|
415
577
|
.item-badge {
|
|
416
578
|
display: inline-flex;
|
|
417
579
|
align-items: center;
|
|
418
580
|
gap: 6px;
|
|
419
|
-
padding:
|
|
581
|
+
padding: 1px 7px;
|
|
420
582
|
border-radius: 999px;
|
|
421
|
-
background: color-mix(in srgb, var(--ui-sortable-
|
|
583
|
+
background: color-mix(in srgb, var(--ui-sortable-text) 6%, transparent);
|
|
422
584
|
color: var(--ui-sortable-muted);
|
|
423
|
-
font-size:
|
|
585
|
+
font-size: 10.5px;
|
|
424
586
|
font-weight: 600;
|
|
587
|
+
line-height: 1.6;
|
|
425
588
|
}
|
|
426
589
|
|
|
427
|
-
.item-badge
|
|
428
|
-
|
|
590
|
+
.item-badge.selection-badge {
|
|
591
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 14%, transparent);
|
|
592
|
+
color: color-mix(in srgb, var(--ui-sortable-accent) 82%, var(--ui-sortable-text));
|
|
429
593
|
}
|
|
430
594
|
|
|
431
|
-
.item[
|
|
432
|
-
|
|
433
|
-
color: color-mix(in srgb, var(--ui-sortable-accent) 78%, var(--ui-sortable-text));
|
|
595
|
+
.item-badge[hidden] {
|
|
596
|
+
display: none;
|
|
434
597
|
}
|
|
435
598
|
|
|
436
599
|
.item-badge.drop-badge {
|
|
@@ -439,263 +602,220 @@
|
|
|
439
602
|
|
|
440
603
|
.item[data-drop-inside-active="true"] .item-badge.drop-badge {
|
|
441
604
|
display: inline-flex;
|
|
605
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 18%, var(--ui-sortable-card));
|
|
606
|
+
color: color-mix(in srgb, var(--ui-sortable-accent) 80%, var(--ui-sortable-text));
|
|
442
607
|
}
|
|
443
608
|
|
|
609
|
+
/* A quiet grip: faint until the card is hovered, focused, selected or dragged. */
|
|
444
610
|
.handle {
|
|
445
611
|
display: inline-grid;
|
|
446
612
|
place-items: center;
|
|
447
|
-
inline-size:
|
|
448
|
-
block-size:
|
|
613
|
+
inline-size: 22px;
|
|
614
|
+
block-size: 28px;
|
|
449
615
|
margin: 0;
|
|
450
616
|
padding: 0;
|
|
451
|
-
border:
|
|
617
|
+
border: 0;
|
|
452
618
|
border-radius: var(--ui-sortable-handle-radius);
|
|
453
|
-
background:
|
|
619
|
+
background: transparent;
|
|
454
620
|
color: var(--ui-sortable-muted);
|
|
621
|
+
opacity: 0.4;
|
|
455
622
|
cursor: grab;
|
|
456
623
|
touch-action: none;
|
|
457
624
|
user-select: none;
|
|
458
625
|
-webkit-user-select: none;
|
|
459
626
|
transition:
|
|
460
|
-
|
|
461
|
-
color
|
|
462
|
-
|
|
463
|
-
|
|
627
|
+
opacity 140ms ease,
|
|
628
|
+
color 140ms ease,
|
|
629
|
+
background 140ms ease;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
.item:hover .handle,
|
|
633
|
+
.item:focus-visible .handle,
|
|
634
|
+
.item[data-selected="true"] .handle {
|
|
635
|
+
opacity: 1;
|
|
464
636
|
}
|
|
465
637
|
|
|
466
638
|
.handle:hover {
|
|
467
|
-
color:
|
|
468
|
-
|
|
469
|
-
background: color-mix(in srgb, var(--ui-sortable-accent) 8%, var(--ui-sortable-surface));
|
|
639
|
+
color: var(--ui-sortable-text);
|
|
640
|
+
background: color-mix(in srgb, var(--ui-sortable-text) 8%, transparent);
|
|
470
641
|
}
|
|
471
642
|
|
|
472
643
|
.handle:active {
|
|
473
644
|
cursor: grabbing;
|
|
474
|
-
transform: scale(0.96);
|
|
475
645
|
}
|
|
476
646
|
|
|
477
647
|
.handle[disabled] {
|
|
478
648
|
cursor: not-allowed;
|
|
479
|
-
opacity: 0.
|
|
649
|
+
opacity: 0.25;
|
|
480
650
|
}
|
|
481
651
|
|
|
482
652
|
.handle svg {
|
|
483
|
-
inline-size:
|
|
484
|
-
block-size:
|
|
653
|
+
inline-size: 14px;
|
|
654
|
+
block-size: 14px;
|
|
655
|
+
fill: currentColor;
|
|
485
656
|
}
|
|
486
657
|
|
|
658
|
+
/* Nested cards hang off a guide line under their parent. */
|
|
487
659
|
.children {
|
|
488
660
|
display: grid;
|
|
489
|
-
gap:
|
|
490
|
-
padding-inline-start: var(--ui-sortable-indent);
|
|
661
|
+
gap: 0;
|
|
491
662
|
min-inline-size: 0;
|
|
663
|
+
margin-inline-start: 11px;
|
|
664
|
+
padding-block-start: calc(var(--ui-sortable-list-gap) / 2);
|
|
665
|
+
padding-inline-start: var(--ui-sortable-indent);
|
|
666
|
+
border-inline-start: 1px solid var(--ui-sortable-border-strong);
|
|
492
667
|
}
|
|
493
668
|
|
|
669
|
+
/* Drop rails take no height: they are the thin lines between cards, with an invisible hit area
|
|
670
|
+
around them. The line shows only on the rail the pointer is over. */
|
|
494
671
|
.dropzone {
|
|
495
672
|
position: relative;
|
|
496
673
|
display: block;
|
|
674
|
+
block-size: var(--ui-sortable-dropzone-size);
|
|
497
675
|
min-block-size: var(--ui-sortable-dropzone-size);
|
|
498
676
|
min-inline-size: 0;
|
|
499
|
-
border-radius: 999px;
|
|
500
|
-
will-change: opacity, background;
|
|
501
|
-
transition: opacity 140ms ease, background 140ms ease;
|
|
502
|
-
}
|
|
503
|
-
|
|
504
|
-
.root[data-dropzone-style="container"] .dropzone {
|
|
505
|
-
display: grid;
|
|
506
|
-
place-items: center;
|
|
507
|
-
min-block-size: var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size));
|
|
508
|
-
inline-size: min(100%, var(--ui-sortable-dropzone-match-inline-size, 100%));
|
|
509
|
-
max-inline-size: var(--ui-sortable-dropzone-container-max-inline-size, none);
|
|
510
|
-
padding: 12px;
|
|
511
|
-
border: 1px dashed color-mix(in srgb, var(--ui-sortable-accent) 40%, var(--ui-sortable-border));
|
|
512
|
-
border-radius: var(--ui-sortable-item-radius);
|
|
513
|
-
background:
|
|
514
|
-
linear-gradient(
|
|
515
|
-
180deg,
|
|
516
|
-
color-mix(in srgb, var(--ui-sortable-accent) 9%, var(--ui-sortable-surface)),
|
|
517
|
-
color-mix(in srgb, var(--ui-sortable-accent) 5%, var(--ui-sortable-surface-muted))
|
|
518
|
-
);
|
|
519
|
-
box-shadow:
|
|
520
|
-
inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 12%, transparent),
|
|
521
|
-
0 8px 18px rgba(15, 23, 42, 0.05);
|
|
522
|
-
opacity: 0.82;
|
|
523
|
-
overflow: hidden;
|
|
524
|
-
}
|
|
525
|
-
|
|
526
|
-
.list[data-orientation="horizontal"] .dropzone {
|
|
527
|
-
min-block-size: auto;
|
|
528
|
-
min-inline-size: 16px;
|
|
529
|
-
align-self: stretch;
|
|
530
|
-
}
|
|
531
|
-
|
|
532
|
-
.root[data-dropzone-style="container"] .list[data-orientation="horizontal"] .dropzone {
|
|
533
|
-
min-block-size: var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size));
|
|
534
|
-
min-inline-size: var(--ui-sortable-dropzone-match-inline-size, var(--ui-sortable-dropzone-container-min-inline-size));
|
|
535
|
-
inline-size: auto;
|
|
536
|
-
align-self: stretch;
|
|
537
677
|
}
|
|
538
678
|
|
|
539
679
|
.dropzone::before {
|
|
540
680
|
content: '';
|
|
541
681
|
position: absolute;
|
|
542
|
-
inset-block-start:
|
|
682
|
+
inset-block-start: 0;
|
|
543
683
|
inset-inline: 0;
|
|
544
684
|
block-size: 2px;
|
|
545
|
-
|
|
546
|
-
transform-origin: center;
|
|
685
|
+
margin-block-start: -1px;
|
|
547
686
|
border-radius: 999px;
|
|
548
|
-
background:
|
|
549
|
-
|
|
687
|
+
background: var(--ui-sortable-accent);
|
|
688
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 20%, transparent);
|
|
689
|
+
opacity: 0;
|
|
690
|
+
transform: scaleX(0.35);
|
|
691
|
+
transform-origin: center;
|
|
692
|
+
transition: opacity 120ms ease, transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
550
693
|
}
|
|
551
694
|
|
|
552
|
-
.
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
inset-inline
|
|
556
|
-
|
|
557
|
-
block-size: 100%;
|
|
558
|
-
transform: translateX(-50%) scaleY(0.24);
|
|
695
|
+
.dropzone::after {
|
|
696
|
+
content: '';
|
|
697
|
+
position: absolute;
|
|
698
|
+
inset-inline: 0;
|
|
699
|
+
inset-block: calc(var(--ui-sortable-dropzone-hit-size) * -1);
|
|
559
700
|
}
|
|
560
701
|
|
|
561
|
-
|
|
562
|
-
|
|
702
|
+
/* The last rail of a group only reaches up: below the last card the list body is already a drop area, and a
|
|
703
|
+
hit area hanging out of the bottom would count as overflow in a list that scrolls. */
|
|
704
|
+
.dropzone:last-child::after {
|
|
705
|
+
inset-block-end: 0;
|
|
563
706
|
}
|
|
564
707
|
|
|
565
|
-
.
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
linear-gradient(
|
|
569
|
-
180deg,
|
|
570
|
-
color-mix(in srgb, var(--ui-sortable-accent) 14%, var(--ui-sortable-surface)),
|
|
571
|
-
color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface-muted))
|
|
572
|
-
);
|
|
573
|
-
box-shadow:
|
|
574
|
-
inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 16%, transparent),
|
|
575
|
-
0 12px 24px rgba(15, 23, 42, 0.08);
|
|
708
|
+
.dropzone[data-active="true"]::before {
|
|
709
|
+
opacity: 1;
|
|
710
|
+
transform: scaleX(1);
|
|
576
711
|
}
|
|
577
712
|
|
|
578
|
-
.
|
|
713
|
+
.root[data-drop-indicator-visibility="always"] .dropzone::before {
|
|
579
714
|
opacity: 1;
|
|
715
|
+
transform: scaleX(1);
|
|
716
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 22%, transparent);
|
|
717
|
+
box-shadow: none;
|
|
580
718
|
}
|
|
581
719
|
|
|
582
|
-
.dropzone[data-active="true"]::before {
|
|
583
|
-
|
|
584
|
-
|
|
720
|
+
.root[data-drop-indicator-visibility="always"] .dropzone[data-active="true"]::before {
|
|
721
|
+
background: var(--ui-sortable-accent);
|
|
722
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 20%, transparent);
|
|
585
723
|
}
|
|
586
724
|
|
|
587
|
-
|
|
588
|
-
|
|
725
|
+
/* A card shows "drop inside" by highlighting itself, so its inside rail draws nothing. */
|
|
726
|
+
.root[data-dropzone-style="indicator"] .dropzone[data-mode="inside"]::before,
|
|
727
|
+
.root[data-dropzone-style="indicator"] .dropzone[data-mode="inside"]::after {
|
|
728
|
+
display: none;
|
|
589
729
|
}
|
|
590
730
|
|
|
591
|
-
.
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
731
|
+
.list[data-orientation="horizontal"] .dropzone {
|
|
732
|
+
align-self: stretch;
|
|
733
|
+
block-size: auto;
|
|
734
|
+
min-block-size: 0;
|
|
735
|
+
inline-size: var(--ui-sortable-dropzone-size);
|
|
736
|
+
min-inline-size: var(--ui-sortable-dropzone-size);
|
|
595
737
|
}
|
|
596
738
|
|
|
597
|
-
.
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
739
|
+
.list[data-orientation="horizontal"] .dropzone::before {
|
|
740
|
+
inset-block: 0;
|
|
741
|
+
inset-inline: auto;
|
|
742
|
+
inset-inline-start: 0;
|
|
743
|
+
inline-size: 2px;
|
|
744
|
+
block-size: auto;
|
|
602
745
|
margin-block-start: 0;
|
|
603
|
-
|
|
746
|
+
margin-inline-start: -1px;
|
|
747
|
+
transform: scaleY(0.35);
|
|
604
748
|
}
|
|
605
749
|
|
|
606
|
-
.
|
|
607
|
-
inset-
|
|
608
|
-
inset-inline
|
|
609
|
-
inline-size: 42px;
|
|
750
|
+
.list[data-orientation="horizontal"] .dropzone::after {
|
|
751
|
+
inset-block: 0;
|
|
752
|
+
inset-inline: calc(var(--ui-sortable-dropzone-hit-size) * -1);
|
|
610
753
|
}
|
|
611
754
|
|
|
612
|
-
.dropzone-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
inset-inline-start: 50%;
|
|
616
|
-
inset-inline-end: auto;
|
|
617
|
-
transform: translate(-50%, -50%) scale(0.98);
|
|
618
|
-
padding: 2px 8px;
|
|
619
|
-
border-radius: 999px;
|
|
620
|
-
background: color-mix(in srgb, var(--ui-sortable-surface) 84%, transparent);
|
|
621
|
-
color: var(--ui-sortable-muted);
|
|
622
|
-
font-size: 11px;
|
|
623
|
-
opacity: 0;
|
|
624
|
-
transition: opacity 120ms ease, transform 120ms ease;
|
|
625
|
-
pointer-events: none;
|
|
755
|
+
.list[data-orientation="horizontal"] .dropzone[data-active="true"]::before,
|
|
756
|
+
.root[data-drop-indicator-visibility="always"] .list[data-orientation="horizontal"] .dropzone::before {
|
|
757
|
+
transform: scaleY(1);
|
|
626
758
|
}
|
|
627
759
|
|
|
628
|
-
.
|
|
760
|
+
.dropzone-label {
|
|
629
761
|
display: none;
|
|
630
762
|
}
|
|
631
763
|
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
764
|
+
/* dropzone-style="container": the target is drawn as a whole dashed card in place. */
|
|
765
|
+
.root[data-dropzone-style="container"] .dropzone {
|
|
766
|
+
display: grid;
|
|
767
|
+
place-items: center;
|
|
768
|
+
block-size: auto;
|
|
769
|
+
min-block-size: var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size));
|
|
770
|
+
inline-size: min(100%, var(--ui-sortable-dropzone-match-inline-size, 100%));
|
|
771
|
+
max-inline-size: var(--ui-sortable-dropzone-container-max-inline-size, none);
|
|
772
|
+
padding: 10px;
|
|
773
|
+
border: 1px dashed color-mix(in srgb, var(--ui-sortable-accent) 45%, var(--ui-sortable-border));
|
|
774
|
+
border-radius: var(--ui-sortable-item-radius);
|
|
775
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 5%, var(--ui-sortable-card));
|
|
776
|
+
opacity: 0.85;
|
|
777
|
+
overflow: hidden;
|
|
645
778
|
}
|
|
646
779
|
|
|
647
|
-
.dropzone[data-
|
|
648
|
-
|
|
649
|
-
|
|
780
|
+
.root[data-dropzone-style="container"] .list[data-orientation="horizontal"] .dropzone {
|
|
781
|
+
min-block-size: var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size));
|
|
782
|
+
min-inline-size: var(--ui-sortable-dropzone-match-inline-size, var(--ui-sortable-dropzone-container-min-inline-size));
|
|
783
|
+
inline-size: auto;
|
|
650
784
|
}
|
|
651
785
|
|
|
652
|
-
.root[data-
|
|
653
|
-
|
|
786
|
+
.root[data-dropzone-style="container"] .dropzone::before,
|
|
787
|
+
.root[data-dropzone-style="container"] .dropzone::after {
|
|
788
|
+
display: none;
|
|
654
789
|
}
|
|
655
790
|
|
|
656
|
-
.root[data-dropzone-style="container"][data-
|
|
791
|
+
.root[data-dropzone-style="container"] .dropzone[data-active="true"] {
|
|
657
792
|
opacity: 1;
|
|
793
|
+
border-color: var(--ui-sortable-accent);
|
|
794
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-card));
|
|
658
795
|
}
|
|
659
796
|
|
|
660
|
-
.root[data-
|
|
661
|
-
|
|
797
|
+
.root[data-dropzone-style="container"] .dropzone[data-mode="inside"] {
|
|
798
|
+
min-block-size: max(
|
|
799
|
+
calc(var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size)) * 0.78),
|
|
800
|
+
var(--ui-sortable-dropzone-container-min-block-size)
|
|
801
|
+
);
|
|
802
|
+
}
|
|
803
|
+
|
|
804
|
+
.root[data-dropzone-style="container"] .dropzone-label {
|
|
805
|
+
display: block;
|
|
806
|
+
color: color-mix(in srgb, var(--ui-sortable-accent) 80%, var(--ui-sortable-text));
|
|
807
|
+
font-size: 12px;
|
|
808
|
+
font-weight: 650;
|
|
809
|
+
letter-spacing: 0.02em;
|
|
810
|
+
white-space: nowrap;
|
|
662
811
|
}
|
|
663
812
|
|
|
664
813
|
.root[data-dropzone-style="container"][data-drop-indicator-visibility="active"] .dropzone {
|
|
665
814
|
display: none;
|
|
666
|
-
opacity: 0;
|
|
667
815
|
}
|
|
668
816
|
|
|
669
817
|
.root[data-dropzone-style="container"][data-drop-indicator-visibility="active"] .dropzone[data-active="true"] {
|
|
670
818
|
display: grid;
|
|
671
|
-
opacity: 1;
|
|
672
|
-
}
|
|
673
|
-
|
|
674
|
-
.root[data-drop-indicator-visibility="active"] .dropzone::before {
|
|
675
|
-
background: transparent;
|
|
676
|
-
transform: translateY(-50%) scaleX(0.16);
|
|
677
|
-
}
|
|
678
|
-
|
|
679
|
-
.root[data-drop-indicator-visibility="active"] .list[data-orientation="horizontal"] .dropzone::before {
|
|
680
|
-
transform: translateX(-50%) scaleY(0.16);
|
|
681
|
-
}
|
|
682
|
-
|
|
683
|
-
.root[data-drop-indicator-visibility="active"] .dropzone[data-active="true"] {
|
|
684
|
-
opacity: 1;
|
|
685
|
-
}
|
|
686
|
-
|
|
687
|
-
.root[data-drop-indicator-visibility="active"] .dropzone[data-active="true"]::before {
|
|
688
|
-
transform: translateY(-50%) scaleX(1);
|
|
689
|
-
background: color-mix(in srgb, var(--ui-sortable-accent) 86%, var(--ui-sortable-text));
|
|
690
|
-
}
|
|
691
|
-
|
|
692
|
-
.root[data-drop-indicator-visibility="active"] .list[data-orientation="horizontal"] .dropzone[data-active="true"]::before {
|
|
693
|
-
transform: translateX(-50%) scaleY(1);
|
|
694
|
-
}
|
|
695
|
-
|
|
696
|
-
.root[data-drop-indicator-visibility="active"] .dropzone[data-active="true"] .dropzone-label {
|
|
697
|
-
opacity: 1;
|
|
698
|
-
transform: translate(-50%, -50%) scale(1);
|
|
699
819
|
}
|
|
700
820
|
|
|
701
821
|
.sr-only {
|
|
@@ -710,14 +830,26 @@
|
|
|
710
830
|
border: 0;
|
|
711
831
|
}
|
|
712
832
|
|
|
833
|
+
/* Touch screens have no hover: keep the grip clearly visible. */
|
|
834
|
+
@media (hover: none) {
|
|
835
|
+
.handle {
|
|
836
|
+
opacity: 1;
|
|
837
|
+
}
|
|
838
|
+
}
|
|
839
|
+
|
|
713
840
|
@media (prefers-reduced-motion: reduce) {
|
|
714
841
|
.item,
|
|
715
842
|
.handle,
|
|
716
|
-
.
|
|
717
|
-
.dropzone::before
|
|
718
|
-
.dropzone-label {
|
|
843
|
+
.empty,
|
|
844
|
+
.dropzone::before {
|
|
719
845
|
transition: none;
|
|
720
846
|
}
|
|
847
|
+
|
|
848
|
+
.item.item-ghost {
|
|
849
|
+
animation: none;
|
|
850
|
+
rotate: 0deg;
|
|
851
|
+
scale: 1;
|
|
852
|
+
}
|
|
721
853
|
}
|
|
722
854
|
|
|
723
855
|
@media (forced-colors: active) {
|
|
@@ -730,89 +862,92 @@
|
|
|
730
862
|
border-color: CanvasText;
|
|
731
863
|
}
|
|
732
864
|
|
|
865
|
+
.item[data-selected="true"],
|
|
866
|
+
.item:focus-visible {
|
|
867
|
+
outline: 2px solid Highlight;
|
|
868
|
+
}
|
|
869
|
+
|
|
733
870
|
.dropzone::before {
|
|
734
871
|
background: Highlight;
|
|
872
|
+
box-shadow: none;
|
|
735
873
|
}
|
|
736
874
|
}
|
|
737
|
-
`;function K(l){if(!l)return[];try{const e=JSON.parse(l);return Array.isArray(e)?e:[]}catch{return[]}}function I(l){return l.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function k(l,e){return`${l}::${e??"__root__"}`}function j(l){return l?[l.listId,l.parentId??"",l.beforeId??"",l.mode].join("::"):""}function B(l,e){return j(l)===j(e)}function de(l){if(!l||l==="none")return{x:1,y:1};const e=l.match(/^matrix3d\((.+)\)$/);if(e){const r=e[1].split(",").map(i=>Number.parseFloat(i.trim()));if(r.length===16&&r.every(i=>Number.isFinite(i)))return{x:r[0]||1,y:r[5]||1}}const t=l.match(/^matrix\((.+)\)$/);if(t){const r=t[1].split(",").map(i=>Number.parseFloat(i.trim()));if(r.length===6&&r.every(i=>Number.isFinite(i))){const[i,s,n,a]=r;return{x:Math.sqrt(i*i+s*s)||1,y:Math.sqrt(n*n+a*a)||1}}}return{x:1,y:1}}function ce(l){return l==="item"?"item":"handle"}function P(l){return{...l}}function ue(l,e,t,r,i,s){const n=T(l),a=E(l),d=new Set,o=[],u=g=>{const x=n.get(g);!x||d.has(g)||(d.add(g),o.push(g),(a.get(k(x.listId,g))||[]).forEach(u))};r.forEach(u);const c=l.map(P),h=c.filter(g=>d.has(g.id)),_=i?c.map(P):c.filter(g=>!d.has(g.id)),f=i?h.map(g=>s(g,o)):h.map(P),S=new Map,m=new Map;i&&h.forEach((g,x)=>{S.set(g.id,f[x].id),m.set(f[x].id,g.id)}),f.forEach(g=>{const x=i?m.get(g.id):g.id,M=x?n.get(x):null;M&&(i&&(g.parentId=M.parentId&&S.has(M.parentId)&&S.get(M.parentId)||null),g.listId=t.listId)});const v=r.map(g=>S.get(g)||g),D=[..._,...f],A=E(_),z=k(t.listId,t.parentId),b=[...A.get(z)||[]],y=t.beforeId?b.indexOf(t.beforeId):b.length,R=y>=0?y:b.length;b.splice(R,0,...v),A.set(z,b),E(f).forEach((g,x)=>{const[,M]=x.split("::");(M||"")!=="__root__"&&A.set(x,[...g])});const O=T(D);v.forEach(g=>{const x=O.get(g);x&&(x.parentId=t.parentId,x.listId=t.listId)});const L=[],q=new Set,H=(g,x)=>{(A.get(k(g,x))||[]).forEach((C,G)=>{const p=O.get(C);!p||q.has(C)||(q.add(C),p.listId=g,p.parentId=x,p.order=G,L.push(p),H(g,C))})};return e.forEach(g=>H(g.id,null)),D.forEach(g=>{q.has(g.id)||(g.parentId=null,L.push(g))}),{items:L.map(P),insertedRootIds:v}}function E(l){const e=new Map;return l.forEach(t=>{const r=k(t.listId,t.parentId),i=e.get(r);i?i.push(t.id):e.set(r,[t.id])}),e}function T(l){return new Map(l.map(e=>[e.id,e]))}function Y(l){const e=new Set,t=[];return l.forEach((r,i)=>{const s=typeof r?.id=="string"&&r.id.trim()?r.id.trim():`list-${i+1}`;e.has(s)||(e.add(s),t.push({id:s,label:typeof r?.label=="string"&&r.label.trim()?r.label.trim():`List ${i+1}`,description:typeof r?.description=="string"?r.description:"",emptyLabel:typeof r?.emptyLabel=="string"&&r.emptyLabel.trim()?r.emptyLabel.trim():"Drop items here.",orientation:r?.orientation==="horizontal"?"horizontal":"vertical",disabled:!!r?.disabled,cloneOnDrag:!!r?.cloneOnDrag,accepts:Array.isArray(r?.accepts)?r.accepts.filter(n=>typeof n=="string"&&n.trim().length>0):void 0}))}),t.length?t:[{id:"default",label:"Items",description:"",emptyLabel:"Drop items here.",orientation:"vertical",disabled:!1,cloneOnDrag:!1}]}function U(l,e){const t=new Set(l.map(o=>o.id)),r=[];e.forEach((o,u)=>{const c=typeof o?.id=="string"&&o.id.trim()?o.id.trim():"",h=typeof o?.label=="string"&&o.label.trim()?o.label.trim():"";if(!c||!h)return;const _=typeof o?.listId=="string"&&t.has(o.listId)?o.listId:l[0].id;r.push({id:c,label:h,listId:_,parentId:typeof o?.parentId=="string"&&o.parentId.trim()?o.parentId.trim():null,description:typeof o?.description=="string"?o.description:"",order:Number.isFinite(o?.order)?Number(o.order):u,disabled:!!o?.disabled,dragDisabled:!!o?.dragDisabled,cloneOnDrag:!!o?.cloneOnDrag,hidden:!!o?.hidden})});const i=new Map(r.map(o=>[o.id,o]));r.forEach(o=>{if(!o.parentId)return;const u=i.get(o.parentId);(!u||u.id===o.id||u.listId!==o.listId)&&(o.parentId=null)});const s=new Map;r.forEach(o=>{const u=k(o.listId,o.parentId),c=s.get(u);c?c.push(o):s.set(u,[o])}),s.forEach(o=>o.sort((u,c)=>u.order-c.order||u.label.localeCompare(c.label)));const n=[],a=new Set,d=(o,u)=>{(s.get(k(o,u))||[]).forEach((h,_)=>{a.has(h.id)||(a.add(h.id),h.order=_,n.push(h),d(o,h.id))})};return l.forEach(o=>d(o.id,null)),r.forEach(o=>{a.has(o.id)||(o.parentId=null,n.push(o))}),n.map(P)}function pe(l){return JSON.stringify(l.map(e=>({id:e.id,label:e.label,listId:e.listId,parentId:e.parentId,description:e.description,order:e.order,disabled:e.disabled,dragDisabled:e.dragDisabled,cloneOnDrag:e.cloneOnDrag,hidden:e.hidden})))}function he(l){return JSON.stringify(l.map(e=>({id:e.id,label:e.label,description:e.description,emptyLabel:e.emptyLabel,orientation:e.orientation,disabled:e.disabled,cloneOnDrag:e.cloneOnDrag,accepts:e.accepts})))}function X(l){return JSON.stringify(l)}function J(l){const e=new Map,t=l.map(r=>{const i=k(r.listId,r.parentId),s=e.get(i)??0;return e.set(i,s+1),{id:r.id,listId:r.listId,parentId:r.parentId,index:s}});return{version:oe,records:t}}function W(l,e){return e?`${l.label} ${l.description}`.toLowerCase().includes(e.toLowerCase()):!0}function Q(l,e,t,r,i){const s=T(l),n=E(l),a=new Map,d=(c,h)=>{const _=[...n.get(k(c,h))||[]];return i==="label"&&_.sort((f,S)=>{const m=s.get(f),v=s.get(S);return!m||!v?0:m.label.localeCompare(v.label)}),_},o=(c,h,_)=>{const f=[];return d(c,h).forEach(S=>{const m=s.get(S);if(!m||m.hidden)return;const v=o(c,m.id);!W(m,r)&&v.length===0||(f.push({id:m.id,disabled:m.disabled}),v.length&&f.push(...v))}),f};return Array.from(new Set(l.map(c=>c.listId))).forEach(c=>{a.set(c,o(c,null))}),a}class Z extends te.ElementBase{constructor(){super(),this._lists=Y([]),this._items=[],this._selection=[],this._focusedId=null,this._rangeAnchorId=null,this._dragState=null,this._liveMessage="Sortable list ready.",this._lastListsAttr=null,this._lastItemsAttr=null,this._lastSelectionAttr=null,this._hydratedPersistKey=null,this._cloneSeed=1,this._dragImage=null,this._dragPreviewOverlay=null,this._pendingFocusId=null,this._pointerGesture=null,this._pendingDropTarget=null,this._suppressAttributeRender=!1,this._autoScrollFrame=0,this._autoScrollPoint=null,this._autoScrollTick=()=>{this._autoScrollFrame=0;const e=this._autoScrollPoint;if(!e||!this._dragState||this._dragState.keyboard)return;const t=this.ownerDocument?.defaultView,r=se(this),i=r?r.getBoundingClientRect():null,s=Math.max(0,i?i.top:0),n=Math.min(t?.innerHeight??0,i?i.bottom:1/0),a=re(e.y,s,n);if(a){if(r?r.scrollTop+=a:t?.scrollBy(0,a),!this._dragState.committed){const d=this._dropTargetFromPoint(e.x,e.y),o=d&&this._canDrop(d,this._dragState.movedRootIds)?d:null;this._queueDropTarget(o,performance.now())}this._autoScrollFrame=requestAnimationFrame(this._autoScrollTick)}},this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onDragStart=this._onDragStart.bind(this),this._onDragOver=this._onDragOver.bind(this),this._onDrop=this._onDrop.bind(this),this._onDragEnd=this._onDragEnd.bind(this),this._onPointerDown=this._onPointerDown.bind(this),this._onPointerMove=this._onPointerMove.bind(this),this._onPointerUp=this._onPointerUp.bind(this),this._onPointerCancel=this._onPointerCancel.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onDocumentKeyDown=this._onDocumentKeyDown.bind(this)}static get observedAttributes(){return["lists","items","selection","filter-query","sort","persist-key","allow-filtered-drag","allow-nesting","drop-indicator-visibility","dropzone-style","drag-preview-size","drag-handle-mode","drag-handle-selector","custom-item-rendering","show-selection-badge","disabled"]}shouldRenderOnAttributeChange(e,t,r){return this._suppressAttributeRender?!["lists","items","selection"].includes(e):!0}attributeChangedCallback(e,t,r){if(t!==r&&this.isConnected){if(e==="selection"&&!this._suppressAttributeRender&&this._canSyncInteractiveStateInPlace()){this._syncSelectionFromAttribute(r??null),this._syncSelectionVisualState();return}if(e==="show-selection-badge"&&this._canSyncInteractiveStateInPlace()){this._syncSelectionVisualState();return}super.attributeChangedCallback(e,t,r)}}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.root.addEventListener("dragstart",this._onDragStart),this.root.addEventListener("dragover",this._onDragOver),this.root.addEventListener("drop",this._onDrop),this.root.addEventListener("dragend",this._onDragEnd),this.root.addEventListener("pointerdown",this._onPointerDown),this.root.addEventListener("focusin",this._onFocusIn),this.ownerDocument?.addEventListener("keydown",this._onDocumentKeyDown,!0),this.ownerDocument?.addEventListener("pointermove",this._onPointerMove,!0),this.ownerDocument?.addEventListener("pointerup",this._onPointerUp,!0),this.ownerDocument?.addEventListener("pointercancel",this._onPointerCancel,!0)}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this.root.removeEventListener("dragstart",this._onDragStart),this.root.removeEventListener("dragover",this._onDragOver),this.root.removeEventListener("drop",this._onDrop),this.root.removeEventListener("dragend",this._onDragEnd),this.root.removeEventListener("pointerdown",this._onPointerDown),this.root.removeEventListener("focusin",this._onFocusIn),this.ownerDocument?.removeEventListener("keydown",this._onDocumentKeyDown,!0),this.ownerDocument?.removeEventListener("pointermove",this._onPointerMove,!0),this.ownerDocument?.removeEventListener("pointerup",this._onPointerUp,!0),this.ownerDocument?.removeEventListener("pointercancel",this._onPointerCancel,!0),this._stopAutoScroll(),this._removeDragPreviewOverlay(),this._removeDragImage(),super.disconnectedCallback()}get lists(){return this._lists.map(e=>({...e}))}set lists(e){this.setAttribute("lists",JSON.stringify(e??[]))}get items(){return this._items.map(e=>({...e}))}set items(e){this.setAttribute("items",JSON.stringify(e??[]))}get selection(){return[...this._selection]}set selection(e){this.setAttribute("selection",JSON.stringify(e??[]))}get sort(){return this.getAttribute("sort")==="label"?"label":"manual"}set sort(e){!e||e==="manual"?this.removeAttribute("sort"):this.setAttribute("sort",e)}get filterQuery(){return this.getAttribute("filter-query")||""}set filterQuery(e){e?this.setAttribute("filter-query",e):this.removeAttribute("filter-query")}select(e){this._setSelection(e,"api")}clearSelection(){this._setSelection([],"api")}cancelDrag(){this._cancelDrag(!0)}focusItem(e){this._items.some(t=>t.id===e)&&(this._focusedId=e,this._pendingFocusId=e,!this._applyInteractiveStateInPlace({restoreFocus:!0})&&this.requestRender())}moveSelection(e){this._syncSelectionFromAttribute(this.getAttribute("selection"));const t=this._selectedRootIds();t.length&&this._commitMove({listId:e.targetListId,parentId:e.parentId??null,beforeId:e.beforeId??null,mode:e.mode??(e.parentId?"inside":"before")},t,!!e.clone,e.source??"api")}getPersistenceSnapshot(){return J(this._items)}render(){this._syncStateFromAttributes();const e=this._measureItemShellRects(),t=new Set(this._draggingIds()),r=new Set(this._selection),s=!!this._dragState?.keyboard?this._projectedMoveResult():null,n=s?.items||this._items,a=new Set(s?.insertedRootIds||[]),d=!!this._dragState&&!this._dragState.keyboard&&!!this._dragState.dropTarget,o=Q(n,r,t,this.filterQuery,this.sort),u=this._resolvedFocusedId(o),c=this._isDragLocked(),h=this._selection.length,_=this.getAttribute("allow-nesting")!=="false",f=this.getAttribute("drop-indicator-visibility")==="always"?"always":"active",S=this._dropzoneStyle(),m=this.getAttribute("show-selection-badge")!=="false",v=this._dragHandleMode(),D=this._usesCustomHandleSelector(),A=c?this.sort==="label"?"Dragging is paused while alphabetical sorting is active.":this.filterQuery&&!this.hasAttribute("allow-filtered-drag")?"Dragging is paused while the list is filtered.":"Dragging is currently disabled.":this._dragState?.keyboard?"Keyboard drag active. Use arrow keys to choose a drop target, Space or Enter to drop, and Escape to cancel.":v==="item"?"Drag from anywhere on an item, or press Space on a focused item to start keyboard reordering.":D?"Use your custom drag handle element, or press Space on a focused item to start keyboard reordering.":"Use the handle to drag, or press Space on a focused item to start keyboard reordering.",z=`
|
|
738
|
-
<style>${
|
|
875
|
+
`;function j(u){if(!u)return[];try{const e=JSON.parse(u);return Array.isArray(e)?e:[]}catch{return[]}}function ee(u){if(u===void 0)return"";let e;try{e=JSON.stringify(u)??""}catch{return""}let t=5381;for(let i=0;i<e.length;i+=1)t=(t<<5)+t+e.charCodeAt(i)|0;return(t>>>0).toString(36)}function me(u){if(!u)return{};try{const e=JSON.parse(u);if(!e||typeof e!="object"||Array.isArray(e))return{};const t={};return Object.keys(X).forEach(i=>{typeof e[i]=="string"&&(t[i]=e[i])}),t}catch{return{}}}function oe(u){if(typeof u=="number")return Number.isFinite(u)&&u>0?`${u}px`:void 0;if(typeof u!="string")return;const e=u.trim();return/^(?:\d+\.?\d*|\.\d+)(?:px|rem|em|ch|vh|svh|dvh|vw|%)$/.test(e)?e:void 0}function v(u){return u.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function w(u,e){return`${u}::${e??"__root__"}`}function te(u){return u?[u.listId,u.parentId??"",u.beforeId??"",u.mode].join("::"):""}function H(u,e){return te(u)===te(e)}function fe(u){return u==="item"?"item":"handle"}function A(u){return{...u}}function B(u){if(u==null||typeof u!="object")return u;try{return JSON.parse(JSON.stringify(u))}catch{return u}}function q(u){const e={...u};return u.data!==void 0&&(e.data=B(u.data)),e}function G(u){const e={...u};return u.data!==void 0&&(e.data=B(u.data)),e}function U(u,e,t,i,r,s){const n=T(u),a=M(u),d=new Set,o=[],c=m=>{const S=n.get(m);!S||d.has(m)||(d.add(m),o.push(m),(a.get(w(S.listId,m))||[]).forEach(c))};i.forEach(c);const l=u.map(A),p=l.filter(m=>d.has(m.id)),g=r?l.map(A):l.filter(m=>!d.has(m.id)),b=r?p.map(m=>s(m,o)):p.map(A),y=new Map,h=new Map;r&&p.forEach((m,S)=>{y.set(m.id,b[S].id),h.set(b[S].id,m.id)}),b.forEach(m=>{const S=r?h.get(m.id):m.id,L=S?n.get(S):null;L&&(r&&(m.parentId=L.parentId&&y.has(L.parentId)&&y.get(L.parentId)||null),m.listId=t.listId)});const f=i.map(m=>y.get(m)||m),x=[...g,...b],D=M(g),C=w(t.listId,t.parentId),z=[...D.get(C)||[]],E=t.beforeId?z.indexOf(t.beforeId):z.length,F=E>=0?E:z.length;z.splice(F,0,...f),D.set(C,z),M(b).forEach((m,S)=>{const[,L]=S.split("::");(L||"")!=="__root__"&&D.set(S,[...m])});const I=T(x);f.forEach(m=>{const S=I.get(m);S&&(S.parentId=t.parentId,S.listId=t.listId)});const P=[],k=new Set,R=(m,S)=>{(D.get(w(m,S))||[]).forEach((N,le)=>{const O=I.get(N);!O||k.has(N)||(k.add(N),O.listId=m,O.parentId=S,O.order=le,P.push(O),R(m,N))})};return e.forEach(m=>R(m.id,null)),x.forEach(m=>{k.has(m.id)||(m.parentId=null,P.push(m))}),{items:P.map(A),insertedRootIds:f}}function M(u){const e=new Map;return u.forEach(t=>{const i=w(t.listId,t.parentId),r=e.get(i);r?r.push(t.id):e.set(i,[t.id])}),e}function T(u){return new Map(u.map(e=>[e.id,e]))}function ie(u){const e=new Set,t=[];return u.forEach((i,r)=>{const s=typeof i?.id=="string"&&i.id.trim()?i.id.trim():`list-${r+1}`;e.has(s)||(e.add(s),t.push({id:s,label:typeof i?.label=="string"&&i.label.trim()?i.label.trim():`List ${r+1}`,description:typeof i?.description=="string"?i.description:"",emptyLabel:typeof i?.emptyLabel=="string"&&i.emptyLabel.trim()?i.emptyLabel.trim():"",orientation:i?.orientation==="horizontal"?"horizontal":"vertical",disabled:!!i?.disabled,cloneOnDrag:!!i?.cloneOnDrag,accepts:Array.isArray(i?.accepts)?i.accepts.filter(n=>typeof n=="string"&&n.trim().length>0):void 0,maxItems:Number.isFinite(i?.maxItems)&&Number(i.maxItems)>=0?Math.floor(Number(i.maxItems)):void 0,maxHeight:oe(i?.maxHeight),...i?.data!==void 0?{data:i.data}:{}}))}),t.length?t:[{id:"default",label:"Items",description:"",emptyLabel:"",orientation:"vertical",disabled:!1,cloneOnDrag:!1}]}function J(u,e){const t=new Set(u.map(o=>o.id)),i=[];e.forEach((o,c)=>{const l=typeof o?.id=="string"&&o.id.trim()?o.id.trim():"",p=typeof o?.label=="string"&&o.label.trim()?o.label.trim():"";if(!l||!p)return;const g=typeof o?.listId=="string"&&t.has(o.listId)?o.listId:u[0].id;i.push({id:l,label:p,listId:g,parentId:typeof o?.parentId=="string"&&o.parentId.trim()?o.parentId.trim():null,description:typeof o?.description=="string"?o.description:"",order:Number.isFinite(o?.order)?Number(o.order):c,disabled:!!o?.disabled,dragDisabled:!!o?.dragDisabled,cloneOnDrag:!!o?.cloneOnDrag,hidden:!!o?.hidden,...o?.data!==void 0?{data:o.data}:{}})});const r=new Map(i.map(o=>[o.id,o]));i.forEach(o=>{if(!o.parentId)return;const c=r.get(o.parentId);(!c||c.id===o.id||c.listId!==o.listId)&&(o.parentId=null)});const s=new Map;i.forEach(o=>{const c=w(o.listId,o.parentId),l=s.get(c);l?l.push(o):s.set(c,[o])}),s.forEach(o=>o.sort((c,l)=>c.order-l.order||c.label.localeCompare(l.label)));const n=[],a=new Set,d=(o,c)=>{(s.get(w(o,c))||[]).forEach((p,g)=>{a.has(p.id)||(a.add(p.id),p.order=g,n.push(p),d(o,p.id))})};return u.forEach(o=>d(o.id,null)),i.forEach(o=>{a.has(o.id)||(o.parentId=null,n.push(o))}),n.map(A)}function be(u){return JSON.stringify(u.map(e=>({id:e.id,label:e.label,listId:e.listId,parentId:e.parentId,description:e.description,order:e.order,disabled:e.disabled,dragDisabled:e.dragDisabled,cloneOnDrag:e.cloneOnDrag,hidden:e.hidden,data:e.data})))}function _e(u){return JSON.stringify(u.map(e=>({id:e.id,label:e.label,description:e.description,emptyLabel:e.emptyLabel,orientation:e.orientation,disabled:e.disabled,cloneOnDrag:e.cloneOnDrag,accepts:e.accepts,maxItems:e.maxItems,maxHeight:e.maxHeight,data:e.data})))}function re(u){return JSON.stringify(u)}function Y(u){const e=new Map,t=u.map(i=>{const r=w(i.listId,i.parentId),s=e.get(r)??0;return e.set(r,s+1),{id:i.id,listId:i.listId,parentId:i.parentId,index:s}});return{version:he,records:t}}function se(u){return/class="item[\s"]/.test(u)}function ae(u,e){return e?`${u.label} ${u.description}`.toLowerCase().includes(e.toLowerCase()):!0}function ne(u,e,t,i,r){const s=T(u),n=M(u),a=new Map,d=(l,p)=>{const g=[...n.get(w(l,p))||[]];return r==="label"&&g.sort((b,y)=>{const h=s.get(b),f=s.get(y);return!h||!f?0:h.label.localeCompare(f.label)}),g},o=(l,p,g)=>{const b=[];return d(l,p).forEach(y=>{const h=s.get(y);if(!h||h.hidden)return;const f=o(l,h.id);!ae(h,i)&&f.length===0||(b.push({id:h.id,disabled:h.disabled}),f.length&&b.push(...f))}),b};return Array.from(new Set(u.map(l=>l.listId))).forEach(l=>{a.set(l,o(l,null))}),a}const $=class $ extends de.ElementBase{constructor(){super(),this._lists=ie([]),this._items=[],this._selection=[],this._focusedId=null,this._rangeAnchorId=null,this._dragState=null,this._liveMessage="Sortable list ready.",this._lastListsAttr=null,this._lastItemsAttr=null,this._lastSelectionAttr=null,this._lastLabelsAttr=null,this._canDropCallback=null,this._renderItemFn=null,this._renderListHeaderFn=null,this._renderEmptyStateFn=null,this._labels={},this._hydratedPersistKey=null,this._cloneSeed=1,this._dragImage=null,this._dragImageOffset={x:-14,y:-14},this._pendingFocusId=null,this._pointerGesture=null,this._pendingDropTarget=null,this._pendingTimer=null,this._focusWasInside=!1,this._revealPending=!1,this._externalTarget=null,this._nestModifier=!1,this._lastPointer=null,this._suppressAttributeRender=!1,this._autoScrollFrame=0,this._autoScrollPoint=null,this._autoScrollTick=()=>{this._autoScrollFrame=0;const e=this._autoScrollPoint;if(!e||!this._dragState||this._dragState.keyboard)return;const t=this.ownerDocument?.defaultView;let i=this._scrollOwn(e.x,e.y);const r=this._peerUnder(e.x,e.y);r&&r._scrollOwn(e.x,e.y)&&(i=!0);const s=ue(this),n=s?s.getBoundingClientRect():null,a=Math.max(0,n?n.top:0),d=Math.min(t?.innerHeight??0,n?n.bottom:1/0),o=V(e.y,a,d);o&&(s?s.scrollTop+=o:t?.scrollBy(0,o),i=!0),i&&(this._retarget(e.x,e.y,{timestamp:performance.now()}),this._autoScrollFrame=requestAnimationFrame(this._autoScrollTick))},this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onDragStart=this._onDragStart.bind(this),this._onPointerDown=this._onPointerDown.bind(this),this._onPointerMove=this._onPointerMove.bind(this),this._onPointerUp=this._onPointerUp.bind(this),this._onPointerCancel=this._onPointerCancel.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onTouchMove=this._onTouchMove.bind(this),this._onContextMenu=this._onContextMenu.bind(this),this._onDocumentKeyDown=this._onDocumentKeyDown.bind(this),this._onDocumentKeyUp=this._onDocumentKeyUp.bind(this)}static get observedAttributes(){return["lists","items","selection","filter-query","sort","persist-key","allow-filtered-drag","allow-nesting","drop-indicator-visibility","dropzone-style","drag-preview-size","drag-handle-mode","drag-handle-selector","custom-item-rendering","show-selection-badge","nest-trigger","touch-hold-delay","list-max-height","group","labels","hide-toolbar","disabled"]}shouldRenderOnAttributeChange(e,t,i){return this._suppressAttributeRender?!["lists","items","selection"].includes(e):!0}attributeChangedCallback(e,t,i){if(t!==i&&this.isConnected){if(e==="selection"&&!this._suppressAttributeRender&&this._canSyncInteractiveStateInPlace()){this._syncSelectionFromAttribute(i??null),this._syncSelectionVisualState();return}if(e==="show-selection-badge"&&this._canSyncInteractiveStateInPlace()){this._syncSelectionVisualState();return}super.attributeChangedCallback(e,t,i)}}connectedCallback(){super.connectedCallback(),$._instances.add(this),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.root.addEventListener("dragstart",this._onDragStart),this.root.addEventListener("pointerdown",this._onPointerDown),this.root.addEventListener("focusin",this._onFocusIn),this.root.addEventListener("touchmove",this._onTouchMove,{passive:!1}),this.root.addEventListener("contextmenu",this._onContextMenu),this.ownerDocument?.addEventListener("keydown",this._onDocumentKeyDown,!0),this.ownerDocument?.addEventListener("keyup",this._onDocumentKeyUp,!0),this.ownerDocument?.addEventListener("pointermove",this._onPointerMove,!0),this.ownerDocument?.addEventListener("pointerup",this._onPointerUp,!0),this.ownerDocument?.addEventListener("pointercancel",this._onPointerCancel,!0)}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this.root.removeEventListener("dragstart",this._onDragStart),this.root.removeEventListener("pointerdown",this._onPointerDown),this.root.removeEventListener("focusin",this._onFocusIn),this.root.removeEventListener("touchmove",this._onTouchMove),this.root.removeEventListener("contextmenu",this._onContextMenu),this._clearHoldTimer(),this.ownerDocument?.removeEventListener("keydown",this._onDocumentKeyDown,!0),this.ownerDocument?.removeEventListener("keyup",this._onDocumentKeyUp,!0),this.ownerDocument?.removeEventListener("pointermove",this._onPointerMove,!0),this.ownerDocument?.removeEventListener("pointerup",this._onPointerUp,!0),this.ownerDocument?.removeEventListener("pointercancel",this._onPointerCancel,!0),this._stopAutoScroll(),this._removeDragImage(),this._pendingTimer&&clearTimeout(this._pendingTimer),this._pendingTimer=null,$._instances.delete(this),this._setExternal(null),this._showExternalTarget(null),super.disconnectedCallback()}get lists(){return this._lists.map(G)}set lists(e){this.setAttribute("lists",JSON.stringify(e??[]))}get items(){return this._items.map(q)}set items(e){this.setAttribute("items",JSON.stringify(e??[]))}get canDrop(){return this._canDropCallback}set canDrop(e){this._canDropCallback=typeof e=="function"?e:null}get renderItem(){return this._renderItemFn}set renderItem(e){this._renderItemFn=typeof e=="function"?e:null,this.requestRender()}get renderListHeader(){return this._renderListHeaderFn}set renderListHeader(e){this._renderListHeaderFn=typeof e=="function"?e:null,this.requestRender()}get renderEmptyState(){return this._renderEmptyStateFn}set renderEmptyState(e){this._renderEmptyStateFn=typeof e=="function"?e:null,this.requestRender()}get group(){return this._group()}set group(e){e?this.setAttribute("group",e):this.removeAttribute("group")}_group(){return this.getAttribute("group")?.trim()||""}get labels(){return{...X,...this._labels}}set labels(e){!e||!Object.keys(e).length?this.removeAttribute("labels"):this.setAttribute("labels",JSON.stringify(e))}_t(e,t){return(this._labels[e]??X[e]).replace(/\{(\w+)\}/g,(r,s)=>String(t?.[s]??""))}get selection(){return[...this._selection]}set selection(e){this.setAttribute("selection",JSON.stringify(e??[]))}get sort(){return this.getAttribute("sort")==="label"?"label":"manual"}set sort(e){!e||e==="manual"?this.removeAttribute("sort"):this.setAttribute("sort",e)}get filterQuery(){return this.getAttribute("filter-query")||""}set filterQuery(e){e?this.setAttribute("filter-query",e):this.removeAttribute("filter-query")}select(e){this._setSelection(e,"api")}clearSelection(){this._setSelection([],"api")}cancelDrag(){this._cancelDrag(!0)}focusItem(e){this._items.some(t=>t.id===e)&&(this._focusedId=e,this._pendingFocusId=e,this._revealPending=!0,!this._applyInteractiveStateInPlace({restoreFocus:!0})&&this.requestRender())}moveSelection(e){this._syncSelectionFromAttribute(this.getAttribute("selection"));const t=this._selectedRootIds();return t.length?this._commitMove({listId:e.targetListId,parentId:e.parentId??null,beforeId:e.beforeId??null,mode:e.mode??(e.parentId?"inside":"before")},t,!!e.clone,e.source??"api"):!1}moveSelectionTo(e,t){if(!e||!(e instanceof $))return!1;if(e===this)return this.moveSelection(t);this._syncSelectionFromAttribute(this.getAttribute("selection"));const i=this._selectedRootIds();return i.length?this._transferTo(e,{listId:t.targetListId,parentId:t.parentId??null,beforeId:t.beforeId??null,mode:t.mode??(t.parentId?"inside":"before")},i,!!t.clone,t.source??"api"):!1}getPersistenceSnapshot(){return Y(this._items)}render(){this._syncStateFromAttributes();const e=this._measureItemShellRects(),t=new Set(this._draggingIds()),i=new Set(this._selection),s=!!this._dragState?.keyboard?this._projectedMoveResult():null,n=s?.items||this._items,a=new Set(s?.insertedRootIds||[]),d=!!this._dragState&&!this._dragState.keyboard&&!!this._dragState.dropTarget,o=ne(n,i,t,this.filterQuery,this.sort),c=this._resolvedFocusedId(o),l=this._isDragLocked(),p=this._selection.length,g=this.getAttribute("allow-nesting")!=="false",b=this.getAttribute("drop-indicator-visibility")==="always"?"always":"active",y=this._dropzoneStyle(),h=this.getAttribute("show-selection-badge")!=="false",f=this._dragHandleMode(),x=this._usesCustomHandleSelector(),D=l?this.sort==="label"?this._t("hintPausedSort"):this.filterQuery&&!this.hasAttribute("allow-filtered-drag")?this._t("hintPausedFilter"):this._t("hintDisabled"):this._dragState?.keyboard?this._t("hintKeyboard"):f==="item"?this._t("hintItem"):x?this._t("hintCustom"):this._t("hintHandle"),C=this.hasAttribute("hide-toolbar"),z=g&&!l&&!this._dragState?.keyboard?this._t(this._nestTrigger()==="area"?"hintNestArea":this._nestTrigger()==="modifier"?"hintNestModifier":"hintNestGutter"):"",E=`
|
|
876
|
+
<style>${ge}</style>
|
|
739
877
|
<div
|
|
740
878
|
class="root"
|
|
741
879
|
part="root"
|
|
742
|
-
data-drag-locked="${
|
|
880
|
+
data-drag-locked="${l}"
|
|
743
881
|
data-drag-preview="${a.size||d?"true":"false"}"
|
|
744
|
-
data-drop-indicator-visibility="${
|
|
745
|
-
data-dropzone-style="${
|
|
882
|
+
data-drop-indicator-visibility="${b}"
|
|
883
|
+
data-dropzone-style="${y}"
|
|
746
884
|
>
|
|
747
|
-
<div class="toolbar" part="toolbar">
|
|
748
|
-
<div class="helper" id="ui-sortable-helper">${
|
|
749
|
-
<div class="helper selection-summary">
|
|
750
|
-
<span class="selection-pill" part="selection-count">${
|
|
751
|
-
<span class="selection-text">${
|
|
885
|
+
<div class="toolbar" part="toolbar"${C?' data-hidden="true"':""}>
|
|
886
|
+
<div class="helper" id="ui-sortable-helper">${v(z?`${D} ${z}`:D)}</div>
|
|
887
|
+
<div class="helper selection-summary" data-count="${p}">
|
|
888
|
+
<span class="selection-pill" part="selection-count">${p}</span>
|
|
889
|
+
<span class="selection-text">${v(p===1?this._t("selectedOne"):this._t("selectedMany"))}</span>
|
|
752
890
|
</div>
|
|
753
891
|
</div>
|
|
754
892
|
<div class="lists" part="lists">
|
|
755
|
-
${this._lists.map(
|
|
893
|
+
${this._lists.map(_=>{const I=o.get(_.id)||[],P=I.length?this._renderListTree(n,_,c,t,g,a,h):"",k=_.orientation==="horizontal"?void 0:_.maxHeight??oe(this.getAttribute("list-max-height")),R=this._items.filter(L=>L.listId===_.id).length,m=_.maxItems!==void 0&&R>=_.maxItems,S=_.disabled?this._t("listReadOnly"):m?this._t("listFull",{max:_.maxItems??0}):_.cloneOnDrag?this._t("listClone"):_.accepts?.length?this._t("listAccepts",{lists:_.accepts.join(", ")}):"";return`
|
|
756
894
|
<section
|
|
757
895
|
class="list"
|
|
758
896
|
part="list"
|
|
759
|
-
data-list-id="${
|
|
760
|
-
data-orientation="${
|
|
761
|
-
data-disabled="${
|
|
762
|
-
|
|
897
|
+
data-list-id="${v(_.id)}"
|
|
898
|
+
data-orientation="${_.orientation}"
|
|
899
|
+
data-disabled="${_.disabled}"
|
|
900
|
+
data-full="${m}"
|
|
901
|
+
${this._renderListHeaderFn||this._renderEmptyStateFn?`data-rev="${ee(_.data)}"`:""}
|
|
902
|
+
aria-label="${v(_.label)}"
|
|
763
903
|
>
|
|
764
904
|
<header class="list-header">
|
|
765
|
-
<div class="list-custom-header" part="list-custom-header" data-list-header-target="${
|
|
905
|
+
<div class="list-custom-header" part="list-custom-header" data-list-header-target="${v(_.id)}"></div>
|
|
766
906
|
<div class="list-default-header">
|
|
767
907
|
<div class="list-topline">
|
|
768
|
-
<div class="list-label">${
|
|
769
|
-
<span class="list-count">${
|
|
908
|
+
<div class="list-label">${v(_.label)}</div>
|
|
909
|
+
<span class="list-count">${_.maxItems!==void 0?`${R}/${_.maxItems}`:I.length}</span>
|
|
770
910
|
</div>
|
|
771
|
-
${
|
|
772
|
-
${
|
|
911
|
+
${_.description?`<div class="list-description">${v(_.description)}</div>`:""}
|
|
912
|
+
${S?`<div class="list-helper">${v(S)}</div>`:""}
|
|
773
913
|
</div>
|
|
774
914
|
</header>
|
|
775
|
-
<div class="items" role="${
|
|
776
|
-
${
|
|
915
|
+
<div class="items" part="items"${k?` data-scroll="true" style="--ui-sortable-list-max-block-size: ${k}"`:""} role="${I.length?"listbox":"group"}" ${I.length?'aria-multiselectable="true"':""} aria-label="${v(_.label)}" aria-describedby="ui-sortable-helper">
|
|
916
|
+
${P||`<div class="list-custom-empty" part="list-custom-empty" data-list-empty-target="${v(_.id)}"></div><div class="empty">${v(_.emptyLabel||this._t("emptyList"))}</div>${this._renderDropzone({listId:_.id,parentId:null,beforeId:null,mode:"before"},this._t("dropHere"))}`}
|
|
777
917
|
</div>
|
|
778
918
|
</section>
|
|
779
919
|
`}).join("")}
|
|
780
920
|
</div>
|
|
781
|
-
<div class="sr-only" aria-live="polite" aria-atomic="true">${
|
|
782
|
-
</div>
|
|
783
|
-
`;this.setContent(z),queueMicrotask(()=>{this._restorePendingFocus(),this._applyCurrentDropTargetVisualState(),this._applyLiveMessage(),this._updatePointerDragPreview(),this._animateItemShellReflow(e)})}_syncStateFromAttributes(){const e=this.getAttribute("lists");e!==this._lastListsAttr&&(this._lastListsAttr=e,this._lists=Y(K(e)));const t=this.getAttribute("items");if(t!==this._lastItemsAttr){this._lastItemsAttr=t,this._items=U(this._lists,K(t)),this._lastSelectionAttr=null;const i=this.getAttribute("persist-key");i&&this._hydratedPersistKey!==i&&(this._items=this._restorePersistedItems(i,this._items),this._hydratedPersistKey=i)}const r=this.getAttribute("selection");r!==this._lastSelectionAttr&&this._syncSelectionFromAttribute(r),this._focusedId||(this._focusedId=this._items.find(i=>!i.hidden)?.id||null)}_restorePersistedItems(e,t){try{const r=window.localStorage.getItem(e);if(!r)return t;const i=JSON.parse(r);if(!i||typeof i!="object"||!Array.isArray(i.records))return t;const s=new Map(i.records.map(a=>[a.id,a])),n=t.map((a,d)=>{const o=s.get(a.id);return o?{...a,listId:this._lists.some(u=>u.id===o.listId)?o.listId:a.listId,parentId:typeof o.parentId=="string"?o.parentId:null,order:Number.isFinite(o.index)?o.index:d}:{...a,order:d}});return U(this._lists,n)}catch{return t}}_resolvedFocusedId(e){const t=new Set(Array.from(e.values()).flat().map(i=>i.id));return this._focusedId&&t.has(this._focusedId)?this._focusedId:Array.from(e.values()).flat().find(i=>!i.disabled)?.id||null}_restorePendingFocus(){const e=this._pendingFocusId||this._focusedId;if(!e)return;const t=typeof CSS<"u"&&typeof CSS.escape=="function"?CSS.escape(e):e.replace(/"/g,'\\"'),r=this.root.querySelector(`.item[data-id="${t}"]`);r&&(document.activeElement!==r&&r.focus({preventScroll:!0}),this._pendingFocusId=null)}_escapeSelectorValue(e){return typeof CSS<"u"&&typeof CSS.escape=="function"?CSS.escape(e):e.replace(/"/g,'\\"')}_findDropzone(e){const t=this._escapeSelectorValue(e.listId),r=this._escapeSelectorValue(e.parentId??""),i=this._escapeSelectorValue(e.beforeId??""),s=this._escapeSelectorValue(e.mode);return this.root.querySelector(`.dropzone[data-list-id="${t}"][data-parent-id="${r}"][data-before-id="${i}"][data-mode="${s}"]`)}_findItemElement(e){const t=this._escapeSelectorValue(e);return this.root.querySelector(`.item[data-id="${t}"]`)}_dragHandleMode(){return ce(this.getAttribute("drag-handle-mode"))}_dropzoneStyle(){return this.getAttribute("dropzone-style")==="container"?"container":"indicator"}_usesCustomHandleSelector(){return!!this.getAttribute("drag-handle-selector")?.trim()}_dragActivatorFromPath(e){const t=e.find(n=>n instanceof HTMLElement&&!!n.getAttribute("data-drag-trigger"));if(!t)return null;const r=t.getAttribute("data-drag-trigger"),i=r==="item"?"item":r==="custom"?"custom":"handle",s=t.getAttribute("data-id")||t.closest(".item[data-id]")?.getAttribute("data-id");return s?{element:t,id:s,kind:i}:null}_setDropTargetVisualState(e,t){if(!e)return;const r=this._findDropzone(e);r&&(r.setAttribute("data-active",t?"true":"false"),t?this._syncDropzoneContainerSize(r,e):this._clearDropzoneContainerSize(r)),e.mode==="inside"&&e.parentId&&this._findItemElement(e.parentId)?.setAttribute("data-drop-inside-active",t?"true":"false")}_applyCurrentDropTargetVisualState(e){this._setDropTargetVisualState(e??null,!1),this._setDropTargetVisualState(this._dragState?.dropTarget??null,!0)}_applyLiveMessage(){const e=this.root.querySelector(".sr-only[aria-live]");e&&(e.textContent=this._liveMessage)}_canSyncInteractiveStateInPlace(){return!!this.root.querySelector(".root")&&!this._dragState}_applyInteractiveStateInPlace(e){return this._canSyncInteractiveStateInPlace()?(this._syncSelectionVisualState(),e?.restoreFocus&&this._restorePendingFocus(),this._applyLiveMessage(),!0):!1}_hasCustomItemRendering(){return this.hasAttribute("custom-item-rendering")}_syncSelectionFromAttribute(e){this._lastSelectionAttr=e;const t=new Set(this._items.map(r=>r.id));this._selection=K(e).filter(r=>t.has(r)),!this._selection.length&&this._focusedId&&!t.has(this._focusedId)&&(this._focusedId=null)}_syncSelectionVisualState(){const e=new Set(this._selection),t=this.getAttribute("show-selection-badge")!=="false";this.root.querySelectorAll(".item[data-id]").forEach(s=>{const n=s.getAttribute("data-id");if(!n)return;const a=e.has(n),d=this._focusedId===n;s.setAttribute("data-selected",a?"true":"false"),s.setAttribute("aria-selected",a?"true":"false"),s.setAttribute("data-focused",d?"true":"false"),s.setAttribute("tabindex",d?"0":"-1");const o=s.querySelector('[data-selection-badge="true"]');if(o){const u=a&&t;o.hidden=!u,o.textContent=u?"Selected":""}});const r=this.root.querySelector(".selection-pill");r&&(r.textContent=String(this._selection.length));const i=this.root.querySelector(".selection-text");i&&(i.textContent=this._selection.length===1?"item selected":"items selected")}_clearDropzoneContainerSize(e){e.style.removeProperty("--ui-sortable-dropzone-match-block-size"),e.style.removeProperty("--ui-sortable-dropzone-match-inline-size")}_dropzoneReferenceElement(e,t){if(e.mode==="inside"&&e.parentId)return this._findItemElement(e.parentId);let r=t.nextElementSibling;for(;r;){if(r instanceof HTMLElement&&r.classList.contains("item-shell"))return r.querySelector(".item[data-id]");r=r.nextElementSibling}let i=t.previousElementSibling;for(;i;){if(i instanceof HTMLElement&&i.classList.contains("item-shell"))return i.querySelector(".item[data-id]");i=i.previousElementSibling}const s=this._escapeSelectorValue(e.listId),n=this.root.querySelector(`.list[data-list-id="${s}"] .items`),a=n?.querySelector(".item[data-id]");return a||n||null}_syncDropzoneContainerSize(e,t){if(this._clearDropzoneContainerSize(e),this._dropzoneStyle()!=="container")return;const r=this._dropzoneReferenceElement(t,e);if(!r)return;const i=r.getBoundingClientRect();e.style.setProperty("--ui-sortable-dropzone-match-block-size",`${Math.max(76,Math.round(i.height))}px`),e.style.setProperty("--ui-sortable-dropzone-match-inline-size",`${Math.max(180,Math.round(i.width))}px`)}_ensureDragPreviewOverlay(){if(this._dragPreviewOverlay&&this._dragPreviewOverlay.isConnected)return this._dragPreviewOverlay;const e=document.createElement("div");return e.className="drag-preview-overlay",e.setAttribute("data-visible","false"),this.root.appendChild(e),this._dragPreviewOverlay=e,e}_clearPointerDragPreview(){this._dragPreviewOverlay?.setAttribute("data-visible","false"),this._dragPreviewOverlay?.style.setProperty("left","-9999px"),this._dragPreviewOverlay?.style.setProperty("top","-9999px");const e=this.root.querySelector(".root");e&&!this._dragState?.keyboard&&e.setAttribute("data-drag-preview","false")}_pointerPreviewContent(){if(!this._dragState||this._dragState.keyboard)return null;const e=this._dragState.movedRootIds[0],t=this._items.find(r=>r.id===e);return t?{kicker:this._dragState.clone?"Copy preview":"Drop preview",title:this._dragState.clone?`${t.label} copy`:t.label,description:this._dragState.clone?"Release to add a copy here.":this._dragState.movedRootIds.length>1?"Release to place this selection here.":"Release to place this item here."}:null}_pointerPreviewSize(){if(this.getAttribute("drag-preview-size")==="compact"||!this._dragState||this._dragState.keyboard)return null;const e=this._dragState.movedRootIds[0],t=e?this._findItemElement(e):null;if(!t)return null;const r=window.getComputedStyle(t),i=de(r.transform);return{width:t.offsetWidth*i.x,height:t.offsetHeight*i.y}}_updatePointerDragPreview(){if(!this._dragState||this._dragState.keyboard){this._clearPointerDragPreview();return}const e=this._pointerPreviewContent();if(!e){this._clearPointerDragPreview();return}const t=this.root.querySelector(".root"),i=this._dragPreviewOverlay?.getAttribute("data-visible")==="true",s=this._pointerPreviewSize();if(!this._dragState.dropTarget){i&&t&&t.setAttribute("data-drag-preview","true");return}const n=this._findDropzone(this._dragState.dropTarget);if(!n){i&&t&&t.setAttribute("data-drag-preview","true");return}const a=this._ensureDragPreviewOverlay();a.innerHTML=`
|
|
784
|
-
<div class="placeholder-content">
|
|
785
|
-
<div class="placeholder-kicker">${I(e.kicker)}</div>
|
|
786
|
-
<div class="placeholder-title">${I(e.title)}</div>
|
|
787
|
-
<div class="placeholder-description">${I(e.description)}</div>
|
|
921
|
+
<div class="sr-only" aria-live="polite" aria-atomic="true">${v(this._liveMessage)}</div>
|
|
788
922
|
</div>
|
|
789
|
-
`;const d=n.getBoundingClientRect();t&&t.setAttribute("data-drag-preview","true"),a.style.setProperty("left","-9999px"),a.style.setProperty("top","-9999px"),s?(a.style.setProperty("inline-size",`${s.width}px`),a.style.setProperty("block-size",`${s.height}px`)):(a.style.removeProperty("inline-size"),a.style.removeProperty("block-size")),a.setAttribute("data-visible","true");const o=a.getBoundingClientRect(),u=s?.width??o.width,c=s?.height??o.height,h=Math.max(16,Math.min(d.left,window.innerWidth-u-16)),_=Math.max(16,Math.min(d.top+(d.height-c)/2,window.innerHeight-c-16));a.style.setProperty("left",`${Math.round(h)}px`),a.style.setProperty("top",`${Math.round(_)}px`)}_setDraggingVisualState(e,t){e.forEach(r=>{const i=this._findItemElement(r);i&&(i.setAttribute("data-dragging",t?"true":"false"),t&&i.getBoundingClientRect())})}_setDropTarget(e,t){const r=this._dragState?.dropTarget??null;if(!(!this._dragState||B(r,e))){if(this._pendingDropTarget=null,this._dragState.dropTarget=e,this._applyCurrentDropTargetVisualState(r),t?.announceLabel&&this._announce(t.announceLabel),this._dragState.keyboard){this.requestRender();return}this._updatePointerDragPreview()}}_queueDropTarget(e,t,r){if(!this._dragState)return;const i=this._dragState.dropTarget??null;if(B(i,e)){this._pendingDropTarget=null;return}if(!i&&e){this._setDropTarget(e,r);return}const s=typeof t=="number"&&Number.isFinite(t)?t:performance.now(),n=this._pendingDropTarget;if(n&&B(n.target,e)){const a=e?ne:ae;s-n.startedAt>=a&&this._setDropTarget(e,n.announceLabel?{announceLabel:n.announceLabel}:r);return}this._pendingDropTarget={target:e,startedAt:s,announceLabel:r?.announceLabel}}_releaseDropTarget(e,t){if(!this._dragState)return null;if(Number.isFinite(e)&&Number.isFinite(t)){const n=this._dropTargetFromPoint(e,t);if(n&&this._canDrop(n,this._dragState.movedRootIds))return this._pendingDropTarget=null,n}const r=this._pendingDropTarget?.target??null;this._pendingDropTarget=null;const i=n=>this._pointerIsOverList(n.listId,e,t);if(r&&this._canDrop(r,this._dragState.movedRootIds)&&i(r))return r;const s=this._dragState.dropTarget??null;return s&&this._canDrop(s,this._dragState.movedRootIds)&&i(s)?s:null}_pointerIsOverList(e,t,r){if(!Number.isFinite(t)||!Number.isFinite(r))return!0;const s=Array.from(this.root.querySelectorAll(".list[data-list-id]")).find(a=>a.getAttribute("data-list-id")===e);if(!s)return!0;const n=s.getBoundingClientRect();return t>=n.left&&t<=n.right&&r>=n.top&&r<=n.bottom}_pathFromPoint(e,t){const r=[],i=this.root;let s=typeof i.elementFromPoint=="function"?i.elementFromPoint(e,t):this.ownerDocument?.elementFromPoint(e,t)??null;for(;s&&(s instanceof HTMLElement&&r.push(s),s!==this);){if(s instanceof ShadowRoot){s=s.host;continue}s=s.parentNode,!s&&r[r.length-1]?.getRootNode()instanceof ShadowRoot&&(s=r[r.length-1].getRootNode().host)}return r}_measureItemShellRects(){const e=new Map;return this.root.querySelectorAll(".item-shell[data-item-shell]").forEach(t=>{const r=t.getAttribute("data-item-shell");if(!r)return;const i=t.getBoundingClientRect();e.set(r,{top:i.top,left:i.left})}),e}_animateItemShellReflow(e){if(!e.size)return;const t=new Set(this._draggingIds());this.root.querySelectorAll(".item-shell[data-item-shell]").forEach(r=>{const i=r.getAttribute("data-item-shell");if(!i||t.has(i))return;const s=e.get(i);if(!s)return;const n=r.getBoundingClientRect(),a=s.left-n.left,d=s.top-n.top;Math.abs(a)<.5&&Math.abs(d)<.5||(r.style.transition="none",r.style.transform=`translate(${a}px, ${d}px)`,r.style.willChange="transform",r.getBoundingClientRect(),requestAnimationFrame(()=>{r.style.transition="transform 180ms ease",r.style.transform="";const o=()=>{r.style.transition="",r.style.willChange="",r.removeEventListener("transitionend",o)};r.addEventListener("transitionend",o),window.setTimeout(o,220)}))})}_previewCloneSubtreeItem(e,t){const r=e.id.includes("--copy-")?e.id.split("--copy-")[0]:e.id;return{...e,id:`${r}--preview`,label:t[0]===e.id?`${e.label} copy`:e.label}}_projectedMoveResult(){return!this._dragState?.dropTarget||!this._canDrop(this._dragState.dropTarget,this._dragState.movedRootIds)?null:ue(this._items,this._lists,this._dragState.dropTarget,this._dragState.movedRootIds,this._dragState.clone,(e,t)=>this._previewCloneSubtreeItem(e,t))}_renderListTree(e,t,r,i,s,n,a){const d=T(e),o=E(e),u=c=>{const h=o.get(k(t.id,c))||[],_=this.sort==="label"?[...h].sort((S,m)=>{const v=d.get(S),D=d.get(m);return!v||!D?0:v.label.localeCompare(D.label)}):h;let f="";return _.forEach(S=>{const m=d.get(S);if(!m||m.hidden)return;const v=this._renderChildBranch(m,r,i,u,s,n,a);!W(m,this.filterQuery)&&!v.includes('class="item"')||(f+=this._renderDropzone({listId:t.id,parentId:c,beforeId:S,mode:"before"},"Drop here"),f+=v)}),f+=this._renderDropzone({listId:t.id,parentId:c,beforeId:null,mode:"before"},"Drop here"),f};return`<div class="tree">${u(null)}</div>`}_renderChildBranch(e,t,r,i,s,n,a){const d=I(e.id),o=n.has(e.id),u=o?"":i(e.id),c=u.includes('class="item"'),h=o?!1:this._selection.includes(e.id),_=o?!1:r.has(e.id),f=e.disabled,S=f||e.dragDisabled||this._isDragLocked(),m=this._dragState?.dropTarget?.mode==="inside"&&this._dragState.dropTarget.parentId===e.id,v=this._dragState?.clone?"Copy preview":"Drop preview",D=this._dragState?.clone?"Release to add a copy here.":this._dragState&&this._dragState.movedRootIds.length>1?"Release to place this selection here.":"Release to place this item here.",A=this._dragHandleMode(),z=this._usesCustomHandleSelector(),b=z?"custom":A,y=!z&&A==="handle";return`
|
|
923
|
+
`,F=this._captureScroll();this._focusWasInside=!!this.root.activeElement,this.setContent(E),this._restoreScroll(F),this._fillCustomTargets(),queueMicrotask(()=>{this._restorePendingFocus(),this._dragState?.keyboard&&this.root.querySelector(".item-placeholder")?.scrollIntoView?.({block:"nearest",inline:"nearest"}),this._applyCurrentDropTargetVisualState(),this._applyLiveMessage(),this._animateItemShellReflow(e)})}_syncStateFromAttributes(){const e=this.getAttribute("lists");e!==this._lastListsAttr&&(this._lastListsAttr=e,this._lists=ie(j(e)));const t=this.getAttribute("items");if(t!==this._lastItemsAttr){this._lastItemsAttr=t,this._items=J(this._lists,j(t)),this._lastSelectionAttr=null;const s=this.getAttribute("persist-key");s&&this._hydratedPersistKey!==s&&(this._items=this._restorePersistedItems(s,this._items),this._hydratedPersistKey=s)}const i=this.getAttribute("selection");i!==this._lastSelectionAttr&&this._syncSelectionFromAttribute(i);const r=this.getAttribute("labels");r!==this._lastLabelsAttr&&(this._lastLabelsAttr=r,this._labels=me(r)),this._focusedId||(this._focusedId=this._items.find(s=>!s.hidden)?.id||null)}_restorePersistedItems(e,t){try{const i=window.localStorage.getItem(e);if(!i)return t;const r=JSON.parse(i);if(!r||typeof r!="object"||!Array.isArray(r.records))return t;const s=new Map(r.records.map(a=>[a.id,a])),n=t.map((a,d)=>{const o=s.get(a.id);return o?{...a,listId:this._lists.some(c=>c.id===o.listId)?o.listId:a.listId,parentId:typeof o.parentId=="string"?o.parentId:null,order:Number.isFinite(o.index)?o.index:d}:{...a,order:d}});return J(this._lists,n)}catch{return t}}_resolvedFocusedId(e){const t=new Set(Array.from(e.values()).flat().map(r=>r.id));return this._focusedId&&t.has(this._focusedId)?this._focusedId:Array.from(e.values()).flat().find(r=>!r.disabled)?.id||null}_restorePendingFocus(){const e=this._pendingFocusId||(this._focusWasInside?this._focusedId:null);if(this._focusWasInside=!1,!e)return;const t=typeof CSS<"u"&&typeof CSS.escape=="function"?CSS.escape(e):e.replace(/"/g,'\\"'),i=this.root.querySelector(`.item[data-id="${t}"]`);i&&(document.activeElement!==i&&i.focus({preventScroll:!0}),this._revealPending?(this._revealPending=!1,i.scrollIntoView?.({block:"nearest",inline:"nearest"})):this._revealInBoard(i),this._pendingFocusId=null)}_captureScroll(){const e=this.root.querySelector(".lists");if(!e)return null;const t=new Map;return this.root.querySelectorAll(".list[data-list-id]").forEach(i=>{const r=i.querySelector(".items"),s=i.getAttribute("data-list-id");r&&s&&(r.scrollLeft||r.scrollTop)&&t.set(s,{left:r.scrollLeft,top:r.scrollTop})}),{board:e.scrollLeft,lists:t}}_restoreScroll(e){if(!e)return;const t=this.root.querySelector(".lists");t&&e.board&&(t.scrollLeft=e.board),e.lists.size&&this.root.querySelectorAll(".list[data-list-id]").forEach(i=>{const r=e.lists.get(i.getAttribute("data-list-id")||""),s=i.querySelector(".items");!r||!s||(s.scrollLeft=r.left,s.scrollTop=r.top)})}_revealInBoard(e){const t=this.root.querySelector(".lists"),i=e.closest(".list");if(!t||!i||t.scrollWidth<=t.clientWidth+1)return;const r=t.getBoundingClientRect(),s=i.getBoundingClientRect();s.left<r.left?t.scrollLeft-=r.left-s.left+4:s.right>r.right&&(t.scrollLeft+=Math.min(s.right-r.right+4,s.left-r.left))}_escapeSelectorValue(e){return typeof CSS<"u"&&typeof CSS.escape=="function"?CSS.escape(e):e.replace(/"/g,'\\"')}_findDropzone(e){const t=this._escapeSelectorValue(e.listId),i=this._escapeSelectorValue(e.parentId??""),r=this._escapeSelectorValue(e.beforeId??""),s=this._escapeSelectorValue(e.mode);return this.root.querySelector(`.dropzone[data-list-id="${t}"][data-parent-id="${i}"][data-before-id="${r}"][data-mode="${s}"]`)}_findItemElement(e){const t=this._escapeSelectorValue(e);return this.root.querySelector(`.item[data-id="${t}"]`)}_dragHandleMode(){return fe(this.getAttribute("drag-handle-mode"))}_nestTrigger(){const e=this.getAttribute("nest-trigger");return e==="modifier"||e==="area"?e:"gutter"}_dropzoneStyle(){return this.getAttribute("dropzone-style")==="container"?"container":"indicator"}_usesCustomHandleSelector(){return!!this.getAttribute("drag-handle-selector")?.trim()}_dragActivatorFromPath(e){const t=e.find(n=>n instanceof HTMLElement&&!!n.getAttribute("data-drag-trigger"));if(!t)return null;const i=t.getAttribute("data-drag-trigger"),r=i==="item"?"item":i==="custom"?"custom":"handle",s=t.getAttribute("data-id")||t.closest(".item[data-id]")?.getAttribute("data-id");return s?{element:t,id:s,kind:r}:null}_setDropTargetVisualState(e,t){if(!e)return;const i=this._findDropzone(e);i&&(i.setAttribute("data-active",t?"true":"false"),t?this._syncDropzoneContainerSize(i,e):this._clearDropzoneContainerSize(i)),e.mode==="inside"&&e.parentId&&this._findItemElement(e.parentId)?.setAttribute("data-drop-inside-active",t?"true":"false")}_applyCurrentDropTargetVisualState(e){this._setDropTargetVisualState(e??null,!1),this._setDropTargetVisualState(this._dragState?.dropTarget??null,!0)}_applyLiveMessage(){const e=this.root.querySelector(".sr-only[aria-live]");e&&(e.textContent=this._liveMessage)}_canSyncInteractiveStateInPlace(){return!!this.root.querySelector(".root")&&!this._dragState}_applyInteractiveStateInPlace(e){return this._canSyncInteractiveStateInPlace()?(this._syncSelectionVisualState(),e?.restoreFocus&&this._restorePendingFocus(),this._applyLiveMessage(),!0):!1}_fillCustomTargets(e){if(!this._renderItemFn&&!this._renderListHeaderFn&&!this._renderEmptyStateFn)return;const t=this._isDragLocked(),i=new Map(this._lists.map(d=>[d.id,d])),r=(d,o)=>{let c;try{c=o()}catch(l){console.error("ui-sortable: a render function threw; the built-in markup is shown.",l);return}typeof c=="string"?d.innerHTML=c:c&&typeof c.nodeType=="number"&&d.replaceChildren(c)},s=this._renderItemFn;if(s){const d=new Map(this._items.map(l=>[l.id,l])),o=new Set(this._selection),c=this.getAttribute("drag-handle-selector")?.trim()||"";this.root.querySelectorAll(".item-custom-content[data-item-content-target]").forEach(l=>{const p=l.getAttribute("data-item-content-target")||"";if(e?!e.itemIds.has(p):l.hasChildNodes())return;const g=d.get(p);if(!g)return;e&&l.replaceChildren();const b=i.get(g.listId);r(l,()=>s(q(g),{selected:o.has(p),disabled:g.disabled,dragDisabled:g.dragDisabled,cloneOnDrag:g.cloneOnDrag||!!b?.cloneOnDrag,list:b?G(b):void 0})),c&&this._markCustomHandles(l,p,c)})}if(e)return;const n=this._renderListHeaderFn;n&&this.root.querySelectorAll(".list-custom-header[data-list-header-target]").forEach(d=>{if(d.hasChildNodes())return;const o=i.get(d.getAttribute("data-list-header-target")||"");if(!o)return;const c=this._items.filter(l=>l.listId===o.id).length;r(d,()=>n(G(o),{itemCount:c,dragLocked:t}))});const a=this._renderEmptyStateFn;a&&this.root.querySelectorAll(".list-custom-empty[data-list-empty-target]").forEach(d=>{if(d.hasChildNodes())return;const o=i.get(d.getAttribute("data-list-empty-target")||"");if(!o)return;const c=this._items.filter(l=>l.listId===o.id).length;r(d,()=>a(G(o),{itemCount:c,dragLocked:t,filterQuery:this.filterQuery}))})}_markCustomHandles(e,t,i){let r;try{r=e.querySelectorAll(i)}catch{return}r.forEach(s=>{s.setAttribute("data-sortable-custom-handle",""),s.setAttribute("data-drag-trigger","custom"),s.setAttribute("data-id",t),s.hasAttribute("tabindex")||s.setAttribute("tabindex","-1")})}_hasCustomItemRendering(){return this.hasAttribute("custom-item-rendering")||!!this._renderItemFn}_syncSelectionFromAttribute(e){this._lastSelectionAttr=e;const t=new Set(this._items.map(i=>i.id));this._selection=j(e).filter(i=>t.has(i)),!this._selection.length&&this._focusedId&&!t.has(this._focusedId)&&(this._focusedId=null)}_syncSelectionVisualState(){const e=new Set(this._selection),t=this.getAttribute("show-selection-badge")!=="false",i=new Set;this.root.querySelectorAll(".item[data-id]").forEach(n=>{const a=n.getAttribute("data-id");if(!a)return;const d=e.has(a);n.getAttribute("data-selected")==="true"!==d&&i.add(a);const o=this._focusedId===a;n.setAttribute("data-selected",d?"true":"false"),n.setAttribute("aria-selected",d?"true":"false"),n.setAttribute("data-focused",o?"true":"false"),n.setAttribute("tabindex",o?"0":"-1");const c=n.querySelector('[data-selection-badge="true"]');if(c){const l=d&&t;c.hidden=!l,c.textContent=l?this._t("badgeSelected"):""}}),i.size&&this._renderItemFn&&this._fillCustomTargets({itemIds:i}),this.root.querySelector(".selection-summary")?.setAttribute("data-count",String(this._selection.length));const r=this.root.querySelector(".selection-pill");r&&(r.textContent=String(this._selection.length));const s=this.root.querySelector(".selection-text");s&&(s.textContent=this._selection.length===1?this._t("selectedOne"):this._t("selectedMany"))}_clearDropzoneContainerSize(e){e.style.removeProperty("--ui-sortable-dropzone-match-block-size"),e.style.removeProperty("--ui-sortable-dropzone-match-inline-size")}_dropzoneReferenceElement(e,t){if(e.mode==="inside"&&e.parentId)return this._findItemElement(e.parentId);let i=t.nextElementSibling;for(;i;){if(i instanceof HTMLElement&&i.classList.contains("item-shell"))return i.querySelector(".item[data-id]");i=i.nextElementSibling}let r=t.previousElementSibling;for(;r;){if(r instanceof HTMLElement&&r.classList.contains("item-shell"))return r.querySelector(".item[data-id]");r=r.previousElementSibling}const s=this._escapeSelectorValue(e.listId),n=this.root.querySelector(`.list[data-list-id="${s}"] .items`),a=n?.querySelector(".item[data-id]");return a||n||null}_syncDropzoneContainerSize(e,t){if(this._clearDropzoneContainerSize(e),this._dropzoneStyle()!=="container")return;const i=this._dropzoneReferenceElement(t,e);if(!i)return;const r=i.getBoundingClientRect();e.style.setProperty("--ui-sortable-dropzone-match-block-size",`${Math.max(76,Math.round(r.height))}px`),e.style.setProperty("--ui-sortable-dropzone-match-inline-size",`${Math.max(180,Math.round(r.width))}px`)}_clearPointerDragPreview(){const e=this.root.querySelector(".root");e&&!this._dragState?.keyboard&&e.setAttribute("data-drag-preview","false")}_setDraggingVisualState(e,t){t&&this._dragState?.clone&&!this._dragState.keyboard||e.forEach(i=>{const r=this._findItemElement(i);r&&(r.setAttribute("data-dragging",t?"true":"false"),t&&r.getBoundingClientRect())})}_setDropTarget(e,t){const i=this._dragState?.dropTarget??null;if(!(!this._dragState||H(i,e))){if(this._pendingDropTarget=null,this._dragState.dropTarget=e,this._applyCurrentDropTargetVisualState(i),t?.announceLabel&&this._announce(t.announceLabel),this._dragState.keyboard){this.requestRender();return}this.root.querySelector(".root")?.setAttribute("data-drag-preview",e?"true":"false")}}_queueDropTarget(e,t,i){if(!this._dragState)return;const r=this._dragState.dropTarget??null;if(H(r,e)){this._pendingDropTarget=null;return}if(!r&&e){this._setDropTarget(e,i);return}const s=typeof t=="number"&&Number.isFinite(t)?t:performance.now(),n=this._pendingDropTarget;if(n&&H(n.target,e)){const a=e?W:Q;s-n.startedAt>=a&&this._setDropTarget(e,n.announceLabel?{announceLabel:n.announceLabel}:i);return}this._pendingDropTarget={target:e,startedAt:s,announceLabel:i?.announceLabel},this._schedulePendingFlush(e?W:Q)}_schedulePendingFlush(e){this._pendingTimer&&clearTimeout(this._pendingTimer),this._pendingTimer=setTimeout(()=>{this._pendingTimer=null;const t=this._pendingDropTarget;!t||!this._dragState||this._dragState.committed||this._dragState.keyboard||this._setDropTarget(t.target,t.announceLabel?{announceLabel:t.announceLabel}:void 0)},e+8)}_releaseDropTarget(e,t){if(!this._dragState)return null;if(Number.isFinite(e)&&Number.isFinite(t)){const n=this._dropTargetFromPoint(e,t);if(n&&this._canDrop(n,this._dragState.movedRootIds))return this._pendingDropTarget=null,n}const i=this._pendingDropTarget?.target??null;this._pendingDropTarget=null;const r=n=>this._pointerIsOverList(n.listId,e,t);if(i&&this._canDrop(i,this._dragState.movedRootIds)&&r(i))return i;const s=this._dragState.dropTarget??null;return s&&this._canDrop(s,this._dragState.movedRootIds)&&r(s)?s:null}_pointerIsOverList(e,t,i){if(!Number.isFinite(t)||!Number.isFinite(i))return!0;const s=Array.from(this.root.querySelectorAll(".list[data-list-id]")).find(a=>a.getAttribute("data-list-id")===e);if(!s)return!0;const n=s.getBoundingClientRect();return t>=n.left&&t<=n.right&&i>=n.top&&i<=n.bottom}_pathFromPoint(e,t){const i=[],r=this.root;let s=typeof r.elementFromPoint=="function"?r.elementFromPoint(e,t):this.ownerDocument?.elementFromPoint?.(e,t)??null;for(;s&&(s instanceof HTMLElement&&i.push(s),s!==this);){if(s instanceof ShadowRoot){s=s.host;continue}s=s.parentNode,!s&&i[i.length-1]?.getRootNode()instanceof ShadowRoot&&(s=i[i.length-1].getRootNode().host)}return i}_measureItemShellRects(){const e=new Map;return this.root.querySelectorAll(".item-shell[data-item-shell]").forEach(t=>{const i=t.getAttribute("data-item-shell");if(!i)return;const r=t.getBoundingClientRect();e.set(i,{top:r.top,left:r.left})}),e}_animateItemShellReflow(e){if(!e.size)return;const t=new Set(this._draggingIds());this.root.querySelectorAll(".item-shell[data-item-shell]").forEach(i=>{const r=i.getAttribute("data-item-shell");if(!r||t.has(r))return;const s=e.get(r);if(!s)return;const n=i.getBoundingClientRect(),a=s.left-n.left,d=s.top-n.top;Math.abs(a)<.5&&Math.abs(d)<.5||(i.style.transition="none",i.style.transform=`translate(${a}px, ${d}px)`,i.style.willChange="transform",i.getBoundingClientRect(),requestAnimationFrame(()=>{i.style.transition="transform 180ms ease",i.style.transform="";const o=()=>{i.style.transition="",i.style.willChange="",i.removeEventListener("transitionend",o)};i.addEventListener("transitionend",o),window.setTimeout(o,220)}))})}_previewCloneSubtreeItem(e,t){const i=e.id.includes("--copy-")?e.id.split("--copy-")[0]:e.id;return{...e,id:`${i}--preview`,label:t[0]===e.id?`${e.label} copy`:e.label}}_projectedMoveResult(){return!this._dragState?.dropTarget||!this._canDrop(this._dragState.dropTarget,this._dragState.movedRootIds)?null:U(this._items,this._lists,this._dragState.dropTarget,this._dragState.movedRootIds,this._dragState.clone,(e,t)=>this._previewCloneSubtreeItem(e,t))}_renderListTree(e,t,i,r,s,n,a){const d=T(e),o=M(e),c=l=>{const p=o.get(w(t.id,l))||[],g=this.sort==="label"?[...p].sort((y,h)=>{const f=d.get(y),x=d.get(h);return!f||!x?0:f.label.localeCompare(x.label)}):p;let b="";return g.forEach(y=>{const h=d.get(y);if(!h||h.hidden)return;const f=this._renderChildBranch(h,i,r,c,s,n,a);!ae(h,this.filterQuery)&&!se(f)||(b+=this._renderDropzone({listId:t.id,parentId:l,beforeId:y,mode:"before"},this._t("dropHere")),b+=f)}),b+=this._renderDropzone({listId:t.id,parentId:l,beforeId:null,mode:"before"},this._t("dropHere")),b};return`<div class="tree">${c(null)}</div>`}_renderChildBranch(e,t,i,r,s,n,a){const d=v(e.id),o=n.has(e.id),c=o?"":r(e.id),l=se(c),p=o?!1:this._selection.includes(e.id),g=o?!1:i.has(e.id),b=e.disabled,y=b||e.dragDisabled||this._isDragLocked(),h=this._dragState?.dropTarget?.mode==="inside"&&this._dragState.dropTarget.parentId===e.id,f=this._t(this._dragState?.clone?"copyPreview":"dropPreview"),x=this._t(this._dragState?.clone?"releaseCopy":this._dragState&&this._dragState.movedRootIds.length>1?"releaseMoveMany":"releaseMove"),D=this._dragHandleMode(),C=this._usesCustomHandleSelector(),z=C?"custom":D,E=!C&&D==="handle";return`
|
|
790
924
|
<div class="item-shell" data-item-shell="${d}">
|
|
791
925
|
<div
|
|
792
926
|
class="item${o?" item-placeholder":""}"
|
|
793
927
|
part="item"
|
|
794
928
|
data-id="${d}"
|
|
795
|
-
data-drag-handle-mode="${
|
|
796
|
-
${!o&&
|
|
797
|
-
data-selected="${
|
|
929
|
+
data-drag-handle-mode="${z}"
|
|
930
|
+
${!o&&z==="item"?'data-drag-trigger="item"':""}
|
|
931
|
+
data-selected="${p}"
|
|
798
932
|
data-focused="${o?"false":t===e.id}"
|
|
799
|
-
data-dragging="${
|
|
800
|
-
data-disabled="${
|
|
801
|
-
data-drop-inside-active="${
|
|
933
|
+
data-dragging="${g}"
|
|
934
|
+
data-disabled="${b}"
|
|
935
|
+
data-drop-inside-active="${h?"true":"false"}"
|
|
936
|
+
${this._renderItemFn&&!o?`data-rev="${ee(e.data)}"`:""}
|
|
802
937
|
role="${o?"presentation":"option"}"
|
|
803
|
-
aria-selected="${o?"false":
|
|
804
|
-
aria-disabled="${
|
|
938
|
+
aria-selected="${o?"false":p}"
|
|
939
|
+
aria-disabled="${b}"
|
|
805
940
|
aria-hidden="${o?"true":"false"}"
|
|
806
941
|
tabindex="${o?"-1":t===e.id?"0":"-1"}"
|
|
807
942
|
>
|
|
808
943
|
${o?`
|
|
809
944
|
<div class="placeholder-content">
|
|
810
|
-
<div class="placeholder-kicker">${
|
|
811
|
-
<div class="placeholder-title">${
|
|
812
|
-
<div class="placeholder-description">${
|
|
945
|
+
<div class="placeholder-kicker">${v(f)}</div>
|
|
946
|
+
<div class="placeholder-title">${v(e.label)}</div>
|
|
947
|
+
<div class="placeholder-description">${v(x)}</div>
|
|
813
948
|
</div>
|
|
814
949
|
`:`
|
|
815
|
-
${
|
|
950
|
+
${E?`
|
|
816
951
|
<span
|
|
817
952
|
class="handle"
|
|
818
953
|
part="handle"
|
|
@@ -822,7 +957,7 @@
|
|
|
822
957
|
data-drag-trigger="handle"
|
|
823
958
|
data-id="${d}"
|
|
824
959
|
draggable="false"
|
|
825
|
-
${
|
|
960
|
+
${y?"disabled":""}
|
|
826
961
|
>
|
|
827
962
|
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
|
|
828
963
|
<circle cx="5" cy="4" r="1.25"></circle>
|
|
@@ -837,32 +972,32 @@
|
|
|
837
972
|
<div class="item-content" data-action="select" data-id="${d}">
|
|
838
973
|
<div class="item-custom-content" part="item-custom-content" data-item-content-target="${d}"></div>
|
|
839
974
|
<div class="item-default-content">
|
|
840
|
-
<div class="item-title">${
|
|
841
|
-
${e.description?`<div class="item-description">${
|
|
975
|
+
<div class="item-title">${v(e.label)}</div>
|
|
976
|
+
${e.description?`<div class="item-description">${v(e.description)}</div>`:""}
|
|
842
977
|
<div class="item-meta">
|
|
843
|
-
<span class="item-badge selection-badge" data-selection-badge="true" ${
|
|
844
|
-
${e.cloneOnDrag
|
|
845
|
-
${e.dragDisabled
|
|
846
|
-
${s
|
|
978
|
+
<span class="item-badge selection-badge" data-selection-badge="true" ${p&&a?"":"hidden"}>${p&&a?v(this._t("badgeSelected")):""}</span>
|
|
979
|
+
${e.cloneOnDrag?`<span class="item-badge">${v(this._t("badgeClone"))}</span>`:""}
|
|
980
|
+
${e.dragDisabled?`<span class="item-badge">${v(this._t("badgePinned"))}</span>`:""}
|
|
981
|
+
${s?`<span class="item-badge drop-badge">${v(this._t("nestHere"))}</span>`:""}
|
|
847
982
|
</div>
|
|
848
983
|
</div>
|
|
849
984
|
</div>
|
|
850
985
|
`}
|
|
851
986
|
</div>
|
|
852
|
-
${s&&!o?this._renderDropzone({listId:e.listId,parentId:e.id,beforeId:null,mode:"inside"},"
|
|
853
|
-
${
|
|
987
|
+
${s&&!o?this._renderDropzone({listId:e.listId,parentId:e.id,beforeId:null,mode:"inside"},this._t("nestHere")):""}
|
|
988
|
+
${l?`<div class="children">${c}</div>`:""}
|
|
854
989
|
</div>
|
|
855
|
-
`}_renderDropzone(e,t){const
|
|
990
|
+
`}_renderDropzone(e,t){const i=this._dragState?.dropTarget??this._externalTarget,r=i&&i.listId===e.listId&&i.parentId===e.parentId&&i.beforeId===e.beforeId&&i.mode===e.mode;return`
|
|
856
991
|
<div
|
|
857
992
|
class="dropzone"
|
|
858
993
|
part="dropzone"
|
|
859
|
-
data-list-id="${
|
|
860
|
-
data-parent-id="${
|
|
861
|
-
data-before-id="${
|
|
994
|
+
data-list-id="${v(e.listId)}"
|
|
995
|
+
data-parent-id="${v(e.parentId??"")}"
|
|
996
|
+
data-before-id="${v(e.beforeId??"")}"
|
|
862
997
|
data-mode="${e.mode}"
|
|
863
998
|
data-active="${r?"true":"false"}"
|
|
864
999
|
aria-hidden="true"
|
|
865
1000
|
>
|
|
866
|
-
<span class="dropzone-label">${
|
|
1001
|
+
<span class="dropzone-label">${v(t)}</span>
|
|
867
1002
|
</div>
|
|
868
|
-
`}_onClick(e){const t=e.composedPath(),r=t.find(o=>o instanceof HTMLElement&&o.classList?.contains("toolbar")),i=this._dragActivatorFromPath(t),s=t.find(o=>o instanceof HTMLElement&&o.classList.contains("item"));if(i&&i.kind!=="item")return;if(!s)return r&&!(e.target instanceof HTMLButtonElement),void 0;const n=s.getAttribute("data-id");if(!n)return;const a=this._items.find(o=>o.id===n);if(!a||a.disabled)return;const d=e;if(d.shiftKey?this._selectRangeTo(n):d.metaKey||d.ctrlKey?this._toggleSelection(n):this._setSelection([n],"pointer"),this._focusedId=n,this._rangeAnchorId=n,this._pendingFocusId=n,this._hasCustomItemRendering()){this._syncSelectionVisualState(),this._restorePendingFocus();return}this.requestRender()}_onFocusIn(e){const r=e.composedPath().find(i=>i instanceof HTMLElement&&i.classList.contains("item"))?.getAttribute("data-id");r&&(this._focusedId=r,this._syncSelectionVisualState())}_isForeignControl(e){const t=e.composedPath()[0];return!(t instanceof HTMLElement)||t.classList.contains("handle")||t.classList.contains("item")?!1:t.isContentEditable||t.matches('input, textarea, select, button, summary, a[href], [role="button"], [role="textbox"], [role="combobox"]')}_onKeyDown(e){if(this._isForeignControl(e))return;const t=this._visibleItemIds();if(!t.length)return;const r=this._focusedId&&t.includes(this._focusedId)?this._focusedId:t[0],i=t.indexOf(r),s=this._items.find(c=>c.id===r),a=(s?this._lists.find(c=>c.id===s.listId):null)?.orientation==="horizontal",d=this._isRtl(),o=a?d?"ArrowLeft":"ArrowRight":"ArrowDown",u=a?d?"ArrowRight":"ArrowLeft":"ArrowUp";if(!this._dragState?.keyboard){if(e.key===o){e.preventDefault(),this._moveFocusBy(t,i,1);return}if(e.key===u){e.preventDefault(),this._moveFocusBy(t,i,-1);return}if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){e.preventDefault(),this._setSelection(t,"keyboard"),this._announce(`${t.length} items selected.`);return}if(e.key==="Enter"){e.preventDefault(),this._setSelection([r],"keyboard");return}if(e.key===" "||e.code==="Space"){if(e.preventDefault(),this._isDragLocked()){this._announce("Dragging is disabled right now.");return}const c=this._selectedRootIds(r);if(!c.length)return;const h=this._itemClonesOnDrag(r);this._dragState={snapshot:this._items.map(P),movedRootIds:c,originId:r,clone:h,keyboard:!0,dropTarget:this._initialKeyboardDropTarget(r),committed:!1};const _=c.length===1?`Lifted ${s?.label||"item"}.`:`Lifted ${c.length} items.`;this._announce(`${_} Use arrow keys to choose a destination.`),this.requestRender();return}if(e.key==="Escape"){this._setSelection([],"keyboard");return}return}if(e.key==="Escape"){e.preventDefault(),this._cancelDrag(!0);return}if(e.key==="Enter"||e.key===" "||e.code==="Space"){e.preventDefault();const c=this._dragState.dropTarget;if(!c)return;this._commitMove(c,this._dragState.movedRootIds,this._dragState.clone,"keyboard");return}if(["ArrowDown","ArrowUp","ArrowLeft","ArrowRight"].includes(e.key)){e.preventDefault();const c=d?"ArrowLeft":"ArrowRight",h=e.key==="ArrowDown"||e.key===c?1:-1;this._moveKeyboardDropTarget(h)}}_isRtl(){const e=this.ownerDocument?.defaultView?.getComputedStyle(this).direction;return e?e==="rtl":this.closest("[dir]")?.getAttribute("dir")==="rtl"}_moveFocusBy(e,t,r){const i=Math.max(0,Math.min(e.length-1,t+r)),s=e[i];this._focusedId=s,this._pendingFocusId=s,!this._applyInteractiveStateInPlace({restoreFocus:!0})&&this.requestRender()}_onDragStart(e){const t=this._dragActivatorFromPath(e.composedPath()),r=t?.id;if(!t||!r){e.preventDefault();return}if(this._isDragLocked()){e.preventDefault(),this._announce("Dragging is disabled right now.");return}const i=this._items.find(a=>a.id===r);if(!i||i.disabled||i.dragDisabled){e.preventDefault();return}const s=this._selection.includes(r)?this._selectedRootIds(r):[r];this._selection.includes(r)||this._setSelection([r],"pointer");const n=this._itemClonesOnDrag(r);this._dragState={snapshot:this._items.map(P),movedRootIds:s,originId:r,clone:n,keyboard:!1,dropTarget:null,committed:!1},e.dataTransfer&&(e.dataTransfer.effectAllowed=n?"copyMove":"move",e.dataTransfer.setData("text/plain",s.join(",")),this._applyDragImage(e.dataTransfer,s.length)),this._announce(n?`Dragging ${s.length===1?i.label:`${s.length} items`} as a copy.`:`Dragging ${s.length===1?i.label:`${s.length} items`}.`),this.requestRender()}_onDragOver(e){if(!this._dragState||this._dragState.keyboard)return;const t=this._dropTargetFromEvent(e);if(!t||!this._canDrop(t,this._dragState.movedRootIds)){this._queueDropTarget(null,e.timeStamp);return}e.preventDefault(),this._queueDropTarget(t,e.timeStamp),e.dataTransfer&&(e.dataTransfer.dropEffect=this._dragState.clone?"copy":"move")}_onDrop(e){if(!this._dragState||this._dragState.keyboard)return;const t=this._dropTargetFromEvent(e);!t||!this._canDrop(t,this._dragState.movedRootIds)||(e.preventDefault(),this._commitMove(t,this._dragState.movedRootIds,this._dragState.clone,"pointer"))}_onDocumentKeyDown(e){e.key==="Escape"&&(!this._dragState||this._dragState.keyboard||(e.preventDefault(),this._cancelDrag(!0)))}_onDragEnd(){!this._dragState||this._dragState.keyboard||this._dragState.committed||(this._setDraggingVisualState(this._draggingIds(),!1),this._pendingDropTarget=null,this._setDropTargetVisualState(this._dragState.dropTarget,!1),this._clearPointerDragPreview(),this._dragState=null,this._removeDragImage(),this._announce("Drag cancelled."),this.requestRender())}_dropTargetFromEvent(e){return this._dropTargetFromPath(e.composedPath(),e.clientX,e.clientY)}_dropTargetFromPath(e,t,r){const i=e.find(y=>y instanceof HTMLElement&&y.classList.contains("dropzone"));if(i){const y={listId:i.getAttribute("data-list-id")||"",parentId:i.getAttribute("data-parent-id")||null,beforeId:i.getAttribute("data-before-id")||null,mode:i.getAttribute("data-mode")==="inside"?"inside":"before"};if(y.listId)return y}const s=e.find(y=>y instanceof HTMLElement&&y.classList.contains("item"));if(!s){const R=e.find($=>$ instanceof HTMLElement&&$.classList.contains("list")&&$.hasAttribute("data-list-id"))?.getAttribute("data-list-id");return R?{listId:R,parentId:null,beforeId:null,mode:"before"}:null}const n=s.getAttribute("data-id");if(!n)return null;const a=this._items.find(y=>y.id===n);if(!a)return null;const d=this._lists.find(y=>y.id===a.listId),o=s.getBoundingClientRect(),u=d?.orientation==="horizontal",c=u?o.left:o.top,h=u?o.right:o.bottom,_=u?t:r,f=Math.max(1,h-c),S=(_-c)/f,m=u&&this._isRtl()?1-S:S,v=this.getAttribute("allow-nesting")!=="false"&&!a.disabled;if(m<=.34)return{listId:a.listId,parentId:a.parentId,beforeId:a.id,mode:"before"};if(v&&m>=.34&&m<=.74)return{listId:a.listId,parentId:a.id,beforeId:null,mode:"inside"};const A=E(this._items).get(k(a.listId,a.parentId))||[],z=A.indexOf(a.id),b=z>=0&&A[z+1]||null;return{listId:a.listId,parentId:a.parentId,beforeId:b,mode:"before"}}_dropTargetFromPoint(e,t){return this._dropTargetFromPath(this._pathFromPoint(e,t),e,t)}_beginPointerDrag(e,t){if(!this._pointerGesture||this._dragState)return;const r=this._items.find(i=>i.id===this._pointerGesture?.originId);r&&(this._dragState={snapshot:this._items.map(P),movedRootIds:[...this._pointerGesture.movedRootIds],originId:this._pointerGesture.originId,clone:this._pointerGesture.clone,keyboard:!1,dropTarget:null,committed:!1},this._pendingDropTarget=null,this._applyPointerPreview(e,t,this._dragState.movedRootIds.length,this._dragState.clone),this._setDraggingVisualState(this._draggingIds(),!0),this._announce(this._dragState.clone?`Dragging ${this._dragState.movedRootIds.length===1?r.label:`${this._dragState.movedRootIds.length} items`} as a copy.`:`Dragging ${this._dragState.movedRootIds.length===1?r.label:`${this._dragState.movedRootIds.length} items`}.`))}_onPointerDown(e){const t=this._dragActivatorFromPath(e.composedPath()),r=t?.id;if(!t||!r)return;if(this._isDragLocked()){e.preventDefault(),this._announce("Dragging is disabled right now.");return}const i=this._items.find(n=>n.id===r);if(!i||i.disabled||i.dragDisabled){e.preventDefault();return}e.preventDefault();try{t.element.setPointerCapture?.(e.pointerId)}catch{}const s=this._selection.includes(r)?this._selectedRootIds(r):[r];this._pointerGesture={pointerId:e.pointerId,pointerType:e.pointerType,originId:r,movedRootIds:s,clone:this._itemClonesOnDrag(r),startX:e.clientX,startY:e.clientY,moved:!1,captureTarget:t.element}}_onPointerMove(e){if(!(!this._pointerGesture||e.pointerId!==this._pointerGesture.pointerId)){if(e.preventDefault(),!this._pointerGesture.moved){if(Math.hypot(e.clientX-this._pointerGesture.startX,e.clientY-this._pointerGesture.startY)<6)return;this._pointerGesture.moved=!0,this._beginPointerDrag(e.clientX,e.clientY)}if(!(!this._dragState||this._dragState.keyboard)&&(this._movePointerPreview(e.clientX,e.clientY),this._updateAutoScroll(e.clientX,e.clientY),!this._dragState.committed)){const t=this._dropTargetFromPoint(e.clientX,e.clientY);if(!t||!this._canDrop(t,this._dragState.movedRootIds)){this._queueDropTarget(null,e.timeStamp);return}this._queueDropTarget(t,e.timeStamp)}}}_updateAutoScroll(e,t){this._autoScrollPoint={x:e,y:t},!this._autoScrollFrame&&typeof requestAnimationFrame=="function"&&(this._autoScrollFrame=requestAnimationFrame(this._autoScrollTick))}_stopAutoScroll(){this._autoScrollFrame&&typeof cancelAnimationFrame=="function"&&cancelAnimationFrame(this._autoScrollFrame),this._autoScrollFrame=0,this._autoScrollPoint=null}_onPointerUp(e){if(!this._pointerGesture||e.pointerId!==this._pointerGesture.pointerId)return;e.preventDefault();try{this._pointerGesture.captureTarget?.releasePointerCapture?.(e.pointerId)}catch{}const t=this._pointerGesture;if(this._pointerGesture=null,this._stopAutoScroll(),!this._dragState||this._dragState.keyboard)return;const r=t.moved?this._releaseDropTarget(e.clientX,e.clientY):null;if(t.moved&&r){this._commitMove(r,this._dragState.movedRootIds,this._dragState.clone,"pointer");return}t.moved?this._cancelDrag(!0):(this._setDropTargetVisualState(this._dragState.dropTarget,!1),this._clearPointerDragPreview(),this._dragState=null,this._removeDragImage(),this.requestRender())}_onPointerCancel(e){!this._pointerGesture||e.pointerId!==this._pointerGesture.pointerId||(this._pointerGesture=null,this._stopAutoScroll(),this._dragState&&this._cancelDrag(!0))}_setSelection(e,t){const r=new Set(this._items.map(a=>a.id)),i=Array.from(new Set(e.filter(a=>r.has(a)))),s=[...this._selection];this._selection=i,this._rangeAnchorId=i[i.length-1]||null,this._focusedId=i[i.length-1]||this._focusedId;const n=X(i);if(this.getAttribute("selection")!==n){this._lastSelectionAttr=n,this._suppressAttributeRender=!0;try{i.length?this.setAttribute("selection",n):this.removeAttribute("selection")}finally{this._suppressAttributeRender=!1}}if(this.dispatchEvent(new CustomEvent("selection-change",{detail:{selection:[...i],previousSelection:s},bubbles:!0,composed:!0})),t!=="restore"){if(this._applyInteractiveStateInPlace({restoreFocus:!0}))return;this.requestRender()}}_toggleSelection(e){const t=this._selection.includes(e)?this._selection.filter(r=>r!==e):[...this._selection,e];this._setSelection(t,"pointer"),this._announce(`${t.length} items selected.`)}_selectRangeTo(e){const t=this._visibleItemIds(),r=this._rangeAnchorId||this._focusedId||e,i=t.indexOf(r),s=t.indexOf(e);if(i<0||s<0){this._setSelection([e],"pointer");return}const[n,a]=i<=s?[i,s]:[s,i];this._setSelection(t.slice(n,a+1),"pointer"),this._announce(`${a-n+1} items selected.`)}_visibleItemIds(){const e=Q(this._items,new Set(this._selection),new Set(this._draggingIds()),this.filterQuery,this.sort);return Array.from(e.values()).flat().filter(t=>!t.disabled).map(t=>t.id)}_selectedRootIds(e){const t=this._selection.length?[...this._selection]:e?[e]:[],r=T(this._items),i=new Set(t);return t.filter(s=>{const n=r.get(s);if(!n)return!1;let a=n.parentId;for(;a;){if(i.has(a))return!1;a=r.get(a)?.parentId??null}return!n.disabled})}_draggingIds(){if(!this._dragState)return[];const e=T(this._items),t=E(this._items),r=[],i=s=>{r.push(s);const n=e.get(s);if(!n)return;(t.get(k(n.listId,s))||[]).forEach(i)};return this._dragState.movedRootIds.forEach(i),r}_itemClonesOnDrag(e){const t=this._items.find(i=>i.id===e);return t?t.cloneOnDrag?!0:!!this._lists.find(i=>i.id===t.listId)?.cloneOnDrag:!1}_isDragLocked(){return!!(this.hasAttribute("disabled")||this.sort!=="manual"||this.filterQuery&&!this.hasAttribute("allow-filtered-drag"))}_canDrop(e,t){if(this._isDragLocked())return!1;const r=this._lists.find(o=>o.id===e.listId);if(!r||r.disabled)return!1;const i=T(this._items),s=new Set,n=E(this._items),a=o=>{s.add(o);const u=i.get(o);u&&(n.get(k(u.listId,o))||[]).forEach(a)};if(t.forEach(a),e.parentId&&s.has(e.parentId)||e.beforeId&&s.has(e.beforeId))return!1;const d=Array.from(new Set(t.map(o=>i.get(o)?.listId).filter(Boolean)));return!(r.accepts?.length&&d.some(o=>!r.accepts?.includes(o))||e.mode==="inside"&&this.getAttribute("allow-nesting")==="false")}_commitMove(e,t,r,i){if(!this._canDrop(e,t))return;const s=T(this._items),n=E(this._items),a=new Set,d=[],o=p=>{const w=s.get(p);!w||a.has(p)||(a.add(p),d.push(p),(n.get(k(w.listId,p))||[]).forEach(o))};t.forEach(o);const u=this._items.map(P),c=u.filter(p=>a.has(p.id)),h=r?u.map(P):u.filter(p=>!a.has(p.id)),_=r?c.map(p=>this._cloneSubtreeItem(p,d)):c.map(P),f=new Map,S=new Map;r&&c.forEach((p,w)=>{f.set(p.id,_[w].id),S.set(_[w].id,p.id)}),_.forEach(p=>{const w=r?S.get(p.id):p.id,F=w?s.get(w):null;F&&(r&&(p.parentId=F.parentId&&f.has(F.parentId)&&f.get(F.parentId)||null),p.listId=e.listId)});const m=t.map(p=>f.get(p)||p),v=[...h,..._],D=E(h),A=k(e.listId,e.parentId),z=[...D.get(A)||[]],b=e.beforeId?z.indexOf(e.beforeId):z.length,y=b>=0?b:z.length;z.splice(y,0,...m),D.set(A,z),E(_).forEach((p,w)=>{const[,F]=w.split("::");(F||"")!=="__root__"&&D.set(w,[...p])});const $=T(v);m.forEach(p=>{const w=$.get(p);w&&(w.parentId=e.parentId,w.listId=e.listId)});const O=[],L=new Set,q=(p,w)=>{(D.get(k(p,w))||[]).forEach((V,ee)=>{const N=$.get(V);!N||L.has(V)||(L.add(V),N.listId=p,N.parentId=w,N.order=ee,O.push(N),q(p,V))})};this._lists.forEach(p=>q(p.id,null)),v.forEach(p=>{L.has(p.id)||(p.parentId=null,O.push(p))}),this._dragState&&(this._dragState.committed=!0),this._items=O.map(P),this._clearPointerDragPreview(),this._dragState=null,this._removeDragImage();const H=[...m],g=[...this._selection];this._selection=H,this._focusedId=H[0]||null,this._pendingFocusId=this._focusedId,this._syncAttributesFromState();const x=J(this._items);this._persistSnapshot(x);const M=t.map(p=>s.get(p)).filter(p=>!!p),C=r?"clone":e.mode==="inside"?"nest":M.some(p=>p.listId!==e.listId)?"transfer":"reorder",G={items:this.items,lists:this.lists,selection:[...H],previousSelection:g,movedIds:[...m],source:i,operation:C,persistence:x};this.dispatchEvent(new CustomEvent("change",{detail:G,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("persist-request",{detail:G,bubbles:!0,composed:!0})),this._announce(this._messageForMove(C,m.length,e)),this.requestRender()}_syncAttributesFromState(){const e=he(this._lists),t=pe(this._items),r=X(this._selection);this._lastListsAttr=e,this._lastItemsAttr=t,this._lastSelectionAttr=r,this._suppressAttributeRender=!0;try{this.setAttribute("lists",e),this.setAttribute("items",t),this._selection.length?this.setAttribute("selection",r):this.removeAttribute("selection")}finally{this._suppressAttributeRender=!1}}_cloneSubtreeItem(e,t){const i=`copy-${this._cloneSeed++}`,n=`${e.id.includes("--copy-")?e.id.split("--copy-")[0]:e.id}--${i}`;return{...e,id:n,label:t[0]===e.id?`${e.label} copy`:e.label}}_messageForMove(e,t,r){const s=this._lists.find(n=>n.id===r.listId)?.label||r.listId;return e==="clone"?`${t===1?"Item copied":`${t} items copied`} into ${s}.`:e==="nest"?`${t===1?"Item nested":`${t} items nested`} in ${s}.`:e==="transfer"?`${t===1?"Item moved":`${t} items moved`} to ${s}.`:`${t===1?"Item reordered":`${t} items reordered`} in ${s}.`}_persistSnapshot(e){const t=this.getAttribute("persist-key");if(t)try{window.localStorage.setItem(t,JSON.stringify(e))}catch{}}_announce(e){this._liveMessage=e,this._applyLiveMessage()}_cancelDrag(e){this._stopAutoScroll(),this._dragState&&(this._setDraggingVisualState(this._draggingIds(),!1),this._pendingDropTarget=null,this._setDropTargetVisualState(this._dragState.dropTarget,!1),this._clearPointerDragPreview(),this._items=this._dragState.snapshot.map(P),this._dragState=null,this._pointerGesture=null,this._removeDragImage(),e&&this._announce("Drag cancelled."),this._syncAttributesFromState(),this.requestRender())}_applyDragImage(e,t){this._removeDragImage();const r=document.createElement("div");r.textContent=t===1?"Dragging item":`Dragging ${t} items`,r.style.position="fixed",r.style.top="-999px",r.style.left="-999px",r.style.padding="8px 12px",r.style.borderRadius="999px",r.style.background="rgba(15, 23, 42, 0.92)",r.style.color="#f8fafc",r.style.font="600 12px/1 Inter, sans-serif",r.style.pointerEvents="none",document.body.appendChild(r),e.setDragImage(r,12,12),this._dragImage=r}_removeDragImage(){this._dragImage?.remove(),this._dragImage=null}_removeDragPreviewOverlay(){this._dragPreviewOverlay?.remove(),this._dragPreviewOverlay=null}_applyPointerPreview(e,t,r,i){this._removeDragImage();const s=document.createElement("div");s.textContent=i?r===1?"Copying item":`Copying ${r} items`:r===1?"Moving item":`Moving ${r} items`,s.style.position="fixed",s.style.top="0",s.style.left="0",s.style.zIndex="2147483647",s.style.padding="8px 12px",s.style.borderRadius="999px",s.style.background="rgba(15, 23, 42, 0.92)",s.style.color="#f8fafc",s.style.font="600 12px/1 Inter, sans-serif",s.style.pointerEvents="none",s.style.boxShadow="0 12px 28px rgba(15, 23, 42, 0.22)",document.body.appendChild(s),this._dragImage=s,this._movePointerPreview(e,t)}_movePointerPreview(e,t){this._dragImage&&(this._dragImage.style.transform=`translate(${Math.round(e+14)}px, ${Math.round(t+14)}px)`)}_keyboardDropTargets(){const e=T(this._items),t=E(this._items),r=[],i=this.getAttribute("allow-nesting")!=="false",s=(n,a)=>{const d=t.get(k(n,a))||[];d.forEach(o=>{const u=e.get(o);!u||u.hidden||(r.push({listId:n,parentId:a,beforeId:o,mode:"before",label:`Before ${u.label}`}),i&&r.push({listId:n,parentId:o,beforeId:null,mode:"inside",label:`Nest inside ${u.label}`}),s(n,o))}),a?i&&d.length>0&&r.push({listId:n,parentId:a,beforeId:null,mode:"before",label:"After children"}):r.push({listId:n,parentId:a,beforeId:null,mode:"before",label:`End of ${this._lists.find(o=>o.id===n)?.label||n}`})};return this._lists.forEach(n=>s(n.id,null)),r.filter(n=>this._canDrop(n,this._dragState?.movedRootIds||[]))}_initialKeyboardDropTarget(e){const t=this._items.find(r=>r.id===e);return t?{listId:t.listId,parentId:t.parentId,beforeId:e,mode:"before"}:null}_moveKeyboardDropTarget(e){if(!this._dragState)return;const t=this._keyboardDropTargets();if(!t.length)return;const r=Math.max(0,t.findIndex(s=>s.listId===this._dragState?.dropTarget?.listId&&s.parentId===this._dragState?.dropTarget?.parentId&&s.beforeId===this._dragState?.dropTarget?.beforeId&&s.mode===this._dragState?.dropTarget?.mode)),i=Math.max(0,Math.min(t.length-1,r+e));this._setDropTarget(t[i],{announceLabel:t[i].label})}}typeof customElements<"u"&&!customElements.get("ui-sortable")&&customElements.define("ui-sortable",Z);exports.UISortable=Z;
|
|
1003
|
+
`}_onClick(e){const t=e.composedPath(),i=t.find(o=>o instanceof HTMLElement&&o.classList?.contains("toolbar")),r=this._dragActivatorFromPath(t),s=t.find(o=>o instanceof HTMLElement&&o.classList.contains("item"));if(r&&r.kind!=="item")return;if(!s)return i&&!(e.target instanceof HTMLButtonElement),void 0;const n=s.getAttribute("data-id");if(!n)return;const a=this._items.find(o=>o.id===n);if(!a||a.disabled)return;const d=e;if(d.shiftKey?this._selectRangeTo(n):d.metaKey||d.ctrlKey?this._toggleSelection(n):this._setSelection([n],"pointer"),this._focusedId=n,this._rangeAnchorId=n,this._pendingFocusId=n,this._hasCustomItemRendering()){this._syncSelectionVisualState(),this._restorePendingFocus();return}this.requestRender()}_onFocusIn(e){const i=e.composedPath().find(r=>r instanceof HTMLElement&&r.classList.contains("item"))?.getAttribute("data-id");i&&(this._focusedId=i,this._syncSelectionVisualState())}_isForeignControl(e){const t=e.composedPath()[0];return!(t instanceof HTMLElement)||t.classList.contains("handle")||t.classList.contains("item")?!1:t.isContentEditable||t.matches('input, textarea, select, button, summary, a[href], [role="button"], [role="textbox"], [role="combobox"]')}_onKeyDown(e){if(this._isForeignControl(e))return;const t=this._visibleItemIds();if(!t.length)return;const i=this._focusedId&&t.includes(this._focusedId)?this._focusedId:t[0],r=t.indexOf(i),s=this._items.find(l=>l.id===i),a=(s?this._lists.find(l=>l.id===s.listId):null)?.orientation==="horizontal",d=this._isRtl(),o=a?d?"ArrowLeft":"ArrowRight":"ArrowDown",c=a?d?"ArrowRight":"ArrowLeft":"ArrowUp";if(!this._dragState?.keyboard){if(e.key===o){e.preventDefault(),this._moveFocusBy(t,r,1);return}if(e.key===c){e.preventDefault(),this._moveFocusBy(t,r,-1);return}if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){e.preventDefault(),this._setSelection(t,"keyboard"),this._announce(this._t("announceSelectedMany",{count:t.length}));return}if(e.key==="Enter"){e.preventDefault(),this._setSelection([i],"keyboard");return}if(e.key===" "||e.code==="Space"){if(e.preventDefault(),this._isDragLocked()){this._announce(this._t("announceDragDisabled"));return}const l=this._selectedRootIds(i);if(!l.length)return;const p=this._itemClonesOnDrag(i);this._dragState={snapshot:this._items.map(A),movedRootIds:l,originId:i,clone:p,keyboard:!0,dropTarget:this._initialKeyboardDropTarget(i),committed:!1};const g=l.length===1?this._t("announceLifted",{label:s?.label||"item"}):this._t("announceLiftedMany",{count:l.length});this._announce(`${g} ${this._t("announceLiftedHelp")}`),this.requestRender();return}if(e.key==="Escape"){this._setSelection([],"keyboard");return}return}if(e.key==="Escape"){e.preventDefault(),this._cancelDrag(!0);return}if(e.key==="Enter"||e.key===" "||e.code==="Space"){e.preventDefault();const l=this._dragState.dropTarget;if(!l)return;this._commitMove(l,this._dragState.movedRootIds,this._dragState.clone,"keyboard");return}if(["ArrowDown","ArrowUp","ArrowLeft","ArrowRight"].includes(e.key)){e.preventDefault();const l=d?"ArrowLeft":"ArrowRight",p=e.key==="ArrowDown"||e.key===l?1:-1;this._moveKeyboardDropTarget(p)}}_isRtl(){const e=this.ownerDocument?.defaultView?.getComputedStyle(this).direction;return e?e==="rtl":this.closest("[dir]")?.getAttribute("dir")==="rtl"}_moveFocusBy(e,t,i){const r=Math.max(0,Math.min(e.length-1,t+i)),s=e[r];this._focusedId=s,this._pendingFocusId=s,this._revealPending=!0,!this._applyInteractiveStateInPlace({restoreFocus:!0})&&this.requestRender()}_onDragStart(e){(this._pointerGesture||this._dragState&&!this._dragState.keyboard)&&e.preventDefault()}_onDocumentKeyDown(e){if(e.key==="Alt"){this._setNestModifier(!0);return}e.key==="Escape"&&(!this._dragState||this._dragState.keyboard||(e.preventDefault(),this._cancelDrag(!0)))}_onDocumentKeyUp(e){e.key==="Alt"&&this._setNestModifier(!1)}_setNestModifier(e){this._nestModifier!==e&&(this._nestModifier=e,!(!this._dragState||this._dragState.keyboard||this._dragState.committed||!this._lastPointer)&&this._retarget(this._lastPointer.x,this._lastPointer.y,{immediate:!0}))}_retarget(e,t,i){const r=this._dragState;if(!r||r.keyboard||r.committed)return;const s=this._externalAt(e,t);if(s){r.dropTarget&&this._setDropTarget(null),this._pendingDropTarget=null,this._noteRefusal(!!s.target&&!s.usable),this._setExternal(s.usable&&s.target?{peer:s.peer,target:s.target}:null);return}this._setExternal(null);const n=this._dropTargetFromPoint(e,t),a=n&&this._canDrop(n,r.movedRootIds)?n:null;this._noteRefusal(!!n&&!a),i.immediate?this._setDropTarget(a):this._queueDropTarget(a,i.timestamp??performance.now())}_peerUnder(e,t){const i=this._group();if(!i)return null;const r=s=>{const n=s.getBoundingClientRect();return e>=n.left&&e<=n.right&&t>=n.top&&t<=n.bottom&&n.width>0&&n.height>0};if(r(this))return null;for(const s of $._instances)if(!(s===this||s._group()!==i||!s.isConnected||s.ownerDocument!==this.ownerDocument)&&r(s))return s;return null}_externalAt(e,t){if(!this._dragState||this._dragState.keyboard)return null;const i=this._peerUnder(e,t);if(!i)return null;const r=this._sessionFor(this._dragState.movedRootIds,this._dragState.clone);i._nestModifier=this._nestModifier;const s=i._dropTargetFromPoint(e,t),n=!!s&&i._canDrop(s,r.rootIds,r.clone,r);return{peer:i,target:s,usable:n}}_setExternal(e){const t=this._dragState;if(!t)return;const i=t.external??null;if(!(i&&e&&i.peer===e.peer&&H(i.target,e.target))){if(!i&&!e){t.external=null;return}i?.peer._showExternalTarget(null),t.external=e,e?.peer._showExternalTarget(e.target)}}_showExternalTarget(e){H(this._externalTarget,e)||(this._setDropTargetVisualState(this._externalTarget,!1),this._externalTarget=e,this._setDropTargetVisualState(e,!0))}_sessionFor(e,t){const i=this._dragState?.session;if(i&&i.clone===t&&i.rootIds.join()===e.join())return i;const r=T(this._items),s=M(this._items),n=new Set,a=[],d=c=>{const l=r.get(c);!l||n.has(c)||(n.add(c),a.push(A(l)),(s.get(w(l.listId,c))||[]).forEach(d))};e.forEach(d);const o={source:this,rootIds:[...e],items:a,clone:t,sourceListIds:Array.from(new Set(e.map(c=>r.get(c)?.listId).filter(c=>!!c)))};return this._dragState&&(this._dragState.session=o),o}_transferTo(e,t,i,r,s){const n=()=>(this._dragState&&this._cancelDrag(!1),this._announce(this._t("announceRejected")),!1),a=this._sessionFor(i,r);if(!e._canDrop(t,a.rootIds,a.clone,a))return n();const d=new Set(e._items.map(h=>h.id)),o=new Map;a.items.forEach(h=>{if(!r){o.set(h.id,h.id);return}const f=h.id.includes("--copy-")?h.id.split("--copy-")[0]:h.id;let x="";do x=`${f}--copy-${this._cloneSeed++}`;while(d.has(x));d.add(x),o.set(h.id,x)});const c=a.items.map(h=>{const f=a.rootIds.indexOf(h.id);return{...A(h),id:o.get(h.id)||h.id,parentId:h.parentId&&o.has(h.parentId)&&o.get(h.parentId)||null,listId:t.listId,label:r&&f===0?`${h.label} copy`:h.label,...h.data!==void 0?{data:B(h.data)}:{}}}),l=a.rootIds.map(h=>o.get(h)||h),p=U([...e._items,...c],e._lists,t,l,!1,h=>h),g=e._lists.find(h=>h.id===t.listId),b={items:p.items,movedIds:l,nextSelection:[...l],operation:r?"clone":t.mode==="inside"?"nest":"transfer",target:t,clone:r,source:s,external:{direction:"in",peer:this}};let y=null;if(!r){const h=new Set(a.items.map(f=>f.id));y={items:J(this._lists,this._items.filter(f=>!h.has(f.id)).map(A)),movedIds:[...a.rootIds],nextSelection:this._selection.filter(f=>!h.has(f)),operation:"transfer",target:t,clone:!1,source:s,external:{direction:"out",peer:e},destination:g?.label||t.listId}}return!e._askBeforeChange(b)||y&&!this._askBeforeChange(y)?n():(this._setExternal(null),e._showExternalTarget(null),y?this._applyPlan(y):(this._dragState&&(this._dragState.committed=!0),this._stopAutoScroll(),this._clearPointerDragPreview(),this._dragState=null,this._removeDragImage(),this.requestRender()),e._applyPlan(b),!0)}_noteRefusal(e){this._dragImage?.toggleAttribute&&this._dragImage.toggleAttribute("data-refused",e)}_dropTargetFromPath(e,t,i){const r=e.find(I=>I instanceof HTMLElement&&I.classList.contains("dropzone"));if(r){const I={listId:r.getAttribute("data-list-id")||"",parentId:r.getAttribute("data-parent-id")||null,beforeId:r.getAttribute("data-before-id")||null,mode:r.getAttribute("data-mode")==="inside"?"inside":"before"};if(I.listId)return I}const s=e.find(I=>I instanceof HTMLElement&&I.classList.contains("item"));if(!s){const P=e.find(k=>k instanceof HTMLElement&&k.classList.contains("list")&&k.hasAttribute("data-list-id"))?.getAttribute("data-list-id");return P?{listId:P,parentId:null,beforeId:null,mode:"before"}:null}const n=s.getAttribute("data-id");if(!n)return null;const a=this._items.find(I=>I.id===n);if(!a)return null;const d=this._lists.find(I=>I.id===a.listId),o=s.getBoundingClientRect(),c=d?.orientation==="horizontal",l=c?o.left:o.top,p=c?o.right:o.bottom,g=c?t:i,b=Math.max(1,p-l),y=(g-l)/b,h=c&&this._isRtl()?1-y:y,f=this.getAttribute("allow-nesting")!=="false"&&!a.disabled,x=this._nestTrigger(),D=f&&(x==="area"?h>.34&&h<=.74:h>=.25&&h<=.75&&(this._nestModifier||x==="gutter"&&this._inNestGutter(o,t,i,c))),C=x==="area"?h<=.34:h<.5;if(D)return{listId:a.listId,parentId:a.id,beforeId:null,mode:"inside"};if(C)return{listId:a.listId,parentId:a.parentId,beforeId:a.id,mode:"before"};const E=M(this._items).get(w(a.listId,a.parentId))||[],F=E.indexOf(a.id),_=F>=0&&E[F+1]||null;return{listId:a.listId,parentId:a.parentId,beforeId:_,mode:"before"}}_inNestGutter(e,t,i,r){if(r){const a=e.bottom-e.top;return i>=e.bottom-Math.max(24,Math.min(70,a*.3))}const s=e.right-e.left,n=Math.max(48,Math.min(140,s*.3));return this._isRtl()?t<=e.left+n:t>=e.right-n}_dropTargetFromPoint(e,t){return this._dropTargetFromPath(this._pathFromPoint(e,t),e,t)}_beginPointerDrag(e,t){if(!this._pointerGesture||this._dragState)return;const i=this._items.find(r=>r.id===this._pointerGesture?.originId);i&&(this._dragState={snapshot:this._items.map(A),movedRootIds:[...this._pointerGesture.movedRootIds],originId:this._pointerGesture.originId,clone:this._pointerGesture.clone,keyboard:!1,dropTarget:null,committed:!1},this._pendingDropTarget=null,this._applyPointerPreview(e,t,this._dragState.movedRootIds.length,this._dragState.clone,{x:this._pointerGesture.startX,y:this._pointerGesture.startY}),this._setDraggingVisualState(this._draggingIds(),!0),this._announceDragging(i.label,this._dragState.movedRootIds.length,this._dragState.clone))}_onPointerDown(e){const t=this._dragActivatorFromPath(e.composedPath()),i=t?.id;if(!t||!i)return;if(this._isDragLocked()){e.preventDefault(),this._announce(this._t("announceDragDisabled"));return}const r=this._items.find(a=>a.id===i);if(!r||r.disabled||r.dragDisabled){e.preventDefault();return}const s=e.pointerType==="touch"&&t.kind!=="handle"&&this._touchHoldDelay()>0;s||e.preventDefault();try{t.element.setPointerCapture?.(e.pointerId)}catch{}this._clearHoldTimer();const n=this._selection.includes(i)?this._selectedRootIds(i):[i];if(this._pointerGesture={pointerId:e.pointerId,pointerType:e.pointerType,originId:i,movedRootIds:n,clone:this._itemClonesOnDrag(i),startX:e.clientX,startY:e.clientY,moved:!1,captureTarget:t.element,hold:s,holdTimer:null},s){const a=this._pointerGesture;a.holdTimer=setTimeout(()=>{if(a.holdTimer=null,!(this._pointerGesture!==a||a.moved)){a.hold=!1,a.moved=!0,this._beginPointerDrag(a.startX,a.startY),this._lastPointer={x:a.startX,y:a.startY};try{this.ownerDocument?.defaultView?.navigator?.vibrate?.(8)}catch{}}},this._touchHoldDelay())}}_touchHoldDelay(){const e=this.getAttribute("touch-hold-delay");if(e===null||e.trim()==="")return Z;const t=Number(e);return Number.isFinite(t)?Math.min(2e3,Math.max(0,t)):Z}_clearHoldTimer(){this._pointerGesture?.holdTimer&&clearTimeout(this._pointerGesture.holdTimer),this._pointerGesture&&(this._pointerGesture.holdTimer=null)}_onTouchMove(e){this._dragState&&!this._dragState.keyboard&&e.cancelable&&e.preventDefault()}_onContextMenu(e){(this._pointerGesture?.pointerType==="touch"||this._dragState&&!this._dragState.keyboard)&&e.preventDefault()}_onPointerMove(e){if(!(!this._pointerGesture||e.pointerId!==this._pointerGesture.pointerId)){if(this._pointerGesture.hold){Math.hypot(e.clientX-this._pointerGesture.startX,e.clientY-this._pointerGesture.startY)>pe&&(this._clearHoldTimer(),this._pointerGesture=null);return}if(e.preventDefault(),!this._pointerGesture.moved){if(Math.hypot(e.clientX-this._pointerGesture.startX,e.clientY-this._pointerGesture.startY)<6)return;this._pointerGesture.moved=!0,this._beginPointerDrag(e.clientX,e.clientY)}!this._dragState||this._dragState.keyboard||(this._nestModifier=!!e.altKey,this._lastPointer={x:e.clientX,y:e.clientY},this._movePointerPreview(e.clientX,e.clientY),this._updateAutoScroll(e.clientX,e.clientY),this._retarget(e.clientX,e.clientY,{timestamp:e.timeStamp}))}}_updateAutoScroll(e,t){this._autoScrollPoint={x:e,y:t},!this._autoScrollFrame&&typeof requestAnimationFrame=="function"&&(this._autoScrollFrame=requestAnimationFrame(this._autoScrollTick))}_stopAutoScroll(){this._autoScrollFrame&&typeof cancelAnimationFrame=="function"&&cancelAnimationFrame(this._autoScrollFrame),this._autoScrollFrame=0,this._autoScrollPoint=null}_scrollOwn(e,t){const i=this.ownerDocument?.defaultView;let r=!1;const s=this.root.querySelector(".lists");if(s&&s.scrollWidth>s.clientWidth+1){const a=s.getBoundingClientRect(),d=V(e,Math.max(0,a.left),Math.min(i?.innerWidth??1/0,a.right));d&&(s.scrollLeft+=d,r=!0)}const n=this._pathFromPoint(e,t).find(a=>a.classList?.contains("items"));if(n&&n.scrollHeight>n.clientHeight+1&&i?.getComputedStyle(n).overflowY!=="visible"){const a=n.getBoundingClientRect(),d=V(t,a.top,a.bottom);d&&(n.scrollTop+=d,r=!0)}return r}_onPointerUp(e){if(!this._pointerGesture||e.pointerId!==this._pointerGesture.pointerId)return;e.preventDefault();try{this._pointerGesture.captureTarget?.releasePointerCapture?.(e.pointerId)}catch{}const t=this._pointerGesture;if(this._clearHoldTimer(),this._pointerGesture=null,this._stopAutoScroll(),!this._dragState||this._dragState.keyboard)return;this._nestModifier=!!e.altKey;const i=t.moved?this._externalAt(e.clientX,e.clientY):null;if(i){i.usable&&i.target?this._transferTo(i.peer,i.target,this._dragState.movedRootIds,this._dragState.clone,"pointer"):this._cancelDrag(!0);return}const r=t.moved?this._releaseDropTarget(e.clientX,e.clientY):null;if(t.moved&&r){this._commitMove(r,this._dragState.movedRootIds,this._dragState.clone,"pointer");return}t.moved?this._cancelDrag(!0):(this._setDropTargetVisualState(this._dragState.dropTarget,!1),this._clearPointerDragPreview(),this._dragState=null,this._removeDragImage(),this.requestRender())}_onPointerCancel(e){!this._pointerGesture||e.pointerId!==this._pointerGesture.pointerId||(this._clearHoldTimer(),this._pointerGesture=null,this._stopAutoScroll(),this._dragState&&this._cancelDrag(!0))}_setSelection(e,t){const i=new Set(this._items.map(a=>a.id)),r=Array.from(new Set(e.filter(a=>i.has(a)))),s=[...this._selection];this._selection=r,this._rangeAnchorId=r[r.length-1]||null,this._focusedId=r[r.length-1]||this._focusedId;const n=re(r);if(this.getAttribute("selection")!==n){this._lastSelectionAttr=n,this._suppressAttributeRender=!0;try{r.length?this.setAttribute("selection",n):this.removeAttribute("selection")}finally{this._suppressAttributeRender=!1}}if(this.dispatchEvent(new CustomEvent("selection-change",{detail:{selection:[...r],previousSelection:s},bubbles:!0,composed:!0})),t!=="restore"){if(this._applyInteractiveStateInPlace({restoreFocus:!0}))return;this.requestRender()}}_toggleSelection(e){const t=this._selection.includes(e)?this._selection.filter(i=>i!==e):[...this._selection,e];this._setSelection(t,"pointer"),this._announce(this._t("announceSelectedMany",{count:t.length}))}_selectRangeTo(e){const t=this._visibleItemIds(),i=this._rangeAnchorId||this._focusedId||e,r=t.indexOf(i),s=t.indexOf(e);if(r<0||s<0){this._setSelection([e],"pointer");return}const[n,a]=r<=s?[r,s]:[s,r];this._setSelection(t.slice(n,a+1),"pointer"),this._announce(this._t("announceSelectedMany",{count:a-n+1}))}_visibleItemIds(){const e=ne(this._items,new Set(this._selection),new Set(this._draggingIds()),this.filterQuery,this.sort);return Array.from(e.values()).flat().filter(t=>!t.disabled).map(t=>t.id)}_selectedRootIds(e){const t=this._selection.length?[...this._selection]:e?[e]:[],i=T(this._items),r=new Set(t);return t.filter(s=>{const n=i.get(s);if(!n)return!1;let a=n.parentId;for(;a;){if(r.has(a))return!1;a=i.get(a)?.parentId??null}return!n.disabled})}_draggingIds(){if(!this._dragState)return[];const e=T(this._items),t=M(this._items),i=[],r=s=>{i.push(s);const n=e.get(s);if(!n)return;(t.get(w(n.listId,s))||[]).forEach(r)};return this._dragState.movedRootIds.forEach(r),i}_itemClonesOnDrag(e){const t=this._items.find(r=>r.id===e);return t?t.cloneOnDrag?!0:!!this._lists.find(r=>r.id===t.listId)?.cloneOnDrag:!1}_isDragLocked(){return!!(this.hasAttribute("disabled")||this.sort!=="manual"||this.filterQuery&&!this.hasAttribute("allow-filtered-drag"))}_canDrop(e,t,i=this._dragState?.clone??!1,r){if(this._isDragLocked())return!1;const s=this._lists.find(l=>l.id===e.listId);if(!s||s.disabled)return!1;const n=T(this._items),a=new Set,d=M(this._items);if(r)r.items.forEach(l=>a.add(l.id));else{const l=p=>{a.add(p);const g=n.get(p);g&&(d.get(w(g.listId,p))||[]).forEach(l)};if(t.forEach(l),e.parentId&&a.has(e.parentId)||e.beforeId&&a.has(e.beforeId))return!1}if(r&&!r.clone&&r.items.some(l=>n.has(l.id)))return!1;const o=r?r.sourceListIds:Array.from(new Set(t.map(l=>n.get(l)?.listId).filter(Boolean)));if(s.accepts?.length&&o.some(l=>!s.accepts?.includes(l))||e.mode==="inside"&&this.getAttribute("allow-nesting")==="false")return!1;if(s.maxItems!==void 0){const l=this._items.filter(g=>g.listId===e.listId),p=r?r.items.length:i?a.size:Array.from(a).filter(g=>n.get(g)?.listId!==e.listId).length;if(p>0&&l.length+p>s.maxItems)return!1}const c=this._canDropCallback;if(c)try{const l=r?r.items.filter(g=>r.rootIds.includes(g.id)):t.map(g=>n.get(g)).filter(g=>!!g);if(!c({items:l.map(q),movedIds:[...t],targetListId:e.listId,parentId:e.parentId,beforeId:e.beforeId,mode:e.mode,clone:i,...r?{from:r.source}:{}}))return!1}catch(l){return console.error("ui-sortable: canDrop threw; the drop is refused.",l),!1}return!0}_commitMove(e,t,i,r){if(!this._canDrop(e,t,i))return!1;const s=T(this._items),n=U(this._items,this._lists,e,t,i,(c,l)=>this._cloneSubtreeItem(c,l)),a=t.map(c=>s.get(c)).filter(c=>!!c),d=i?"clone":e.mode==="inside"?"nest":a.some(c=>c.listId!==e.listId)?"transfer":"reorder",o={items:n.items,movedIds:n.insertedRootIds,nextSelection:[...n.insertedRootIds],operation:d,target:e,clone:i,source:r};return this._askBeforeChange(o)?(this._applyPlan(o),!0):(this._dragState&&this._cancelDrag(!1),this._announce(this._t("announceRejected")),!1)}_askBeforeChange(e){return this.dispatchEvent(new CustomEvent("before-change",{detail:{items:e.items.map(q),lists:this.lists,selection:[...e.nextSelection],previousSelection:[...this._selection],movedIds:[...e.movedIds],source:e.source,operation:e.operation,persistence:Y(e.items),target:{listId:e.target.listId,parentId:e.target.parentId,beforeId:e.target.beforeId,mode:e.target.mode},clone:e.clone,...e.external?{external:e.external}:{}},bubbles:!0,composed:!0,cancelable:!0}))}_applyPlan(e){const t=[...this._selection];this._dragState&&(this._dragState.committed=!0),this._items=e.items.map(A),this._clearPointerDragPreview(),this._dragState=null,this._removeDragImage(),this._selection=[...e.nextSelection],this._focusedId=e.nextSelection[0]||null,this._pendingFocusId=this._focusedId,this._syncAttributesFromState();const i=Y(this._items);this._persistSnapshot(i);const r={items:this.items,lists:this.lists,selection:[...e.nextSelection],previousSelection:t,movedIds:[...e.movedIds],source:e.source,operation:e.operation,persistence:i,...e.external?{external:e.external}:{}};this.dispatchEvent(new CustomEvent("change",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("persist-request",{detail:r,bubbles:!0,composed:!0})),this._announce(this._messageForMove(e.operation,e.movedIds.length,e.target,e.destination)),this.requestRender()}_syncAttributesFromState(){const e=_e(this._lists),t=be(this._items),i=re(this._selection);this._lastListsAttr=e,this._lastItemsAttr=t,this._lastSelectionAttr=i,this._suppressAttributeRender=!0;try{this.setAttribute("lists",e),this.setAttribute("items",t),this._selection.length?this.setAttribute("selection",i):this.removeAttribute("selection")}finally{this._suppressAttributeRender=!1}}_cloneSubtreeItem(e,t){const r=`copy-${this._cloneSeed++}`,n=`${e.id.includes("--copy-")?e.id.split("--copy-")[0]:e.id}--${r}`;return{...e,id:n,label:t[0]===e.id?`${e.label} copy`:e.label,data:B(e.data)}}_messageForMove(e,t,i,r){const s=this._lists.find(d=>d.id===i.listId),n=r||s?.label||i.listId,a={count:t,list:n};return e==="clone"?this._t(t===1?"announceCopiedOne":"announceCopiedMany",a):e==="nest"?this._t(t===1?"announceNestedOne":"announceNestedMany",a):e==="transfer"?this._t(t===1?"announceMovedOne":"announceMovedMany",a):this._t(t===1?"announceReorderedOne":"announceReorderedMany",a)}_announceDragging(e,t,i){t===1?this._announce(this._t(i?"announceDraggingCopy":"announceDragging",{label:e})):this._announce(this._t(i?"announceDraggingCopyMany":"announceDraggingMany",{count:t}))}_persistSnapshot(e){const t=this.getAttribute("persist-key");if(t)try{window.localStorage.setItem(t,JSON.stringify(e))}catch{}}_announce(e){this._liveMessage=e,this._applyLiveMessage()}_cancelDrag(e){this._stopAutoScroll(),this._dragState&&(this._setDraggingVisualState(this._draggingIds(),!1),this._pendingDropTarget=null,this._setExternal(null),this._setDropTargetVisualState(this._dragState.dropTarget,!1),this._clearPointerDragPreview(),this._items=this._dragState.snapshot.map(A),this._dragState=null,this._clearHoldTimer(),this._pointerGesture=null,this._removeDragImage(),e&&this._announce(this._t("announceCancelled")),this._syncAttributesFromState(),this.requestRender())}_removeDragImage(){this._dragImage?.remove(),this._dragImage=null}_applyPointerPreview(e,t,i,r,s){this._removeDragImage();const n=this._dragState?this._findItemElement(this._dragState.originId):null,a=n?this._buildDragGhost(n,i,r,s):null;if(a)this.root.appendChild(a),this._dragImage=a;else{const d=document.createElement("div");d.className="drag-pill",d.textContent=r?i===1?this._t("copyingOne"):this._t("copyingMany",{count:i}):i===1?this._t("movingOne"):this._t("movingMany",{count:i}),this.root.appendChild(d),this._dragImage=d,this._dragImageOffset={x:-14,y:-14}}this._movePointerPreview(e,t)}_buildDragGhost(e,t,i,r){const s=e.getBoundingClientRect(),n=e.cloneNode(!0);if(n.classList.add("item-ghost"),["id","data-id","data-drag-trigger","tabindex","role","aria-selected","aria-disabled"].forEach(c=>{n.removeAttribute(c)}),n.querySelectorAll("[id], [data-id], [data-drag-trigger], [tabindex]").forEach(c=>{["id","data-id","data-drag-trigger","tabindex"].forEach(l=>c.removeAttribute(l))}),n.setAttribute("part","drag-ghost"),n.setAttribute("aria-hidden","true"),n.setAttribute("inert",""),n.setAttribute("data-dragging","false"),n.setAttribute("data-focused","false"),n.setAttribute("data-drop-inside-active","false"),t>1&&n.setAttribute("data-count","stack"),t>1||i){const c=document.createElement("span");c.className="ghost-badge",c.textContent=t>1?String(t):"+",n.appendChild(c)}const a=this.getAttribute("drag-preview-size")==="compact";a&&n.setAttribute("data-compact","true");const d=a?Math.min(s.width,240):s.width;n.style.inlineSize=`${Math.round(d)}px`;const o=!!r&&Number.isFinite(r.x)&&Number.isFinite(r.y);return this._dragImageOffset={x:o?Math.min(Math.max(r.x-s.left,0),d):d/2,y:o?Math.min(Math.max(r.y-s.top,0),s.height):s.height/2},n}_movePointerPreview(e,t){const i=this._dragImage;i&&(i.isConnected||this.root.appendChild(i),i.style.transform=`translate(${Math.round(e-this._dragImageOffset.x)}px, ${Math.round(t-this._dragImageOffset.y)}px)`)}_keyboardDropTargets(){const e=T(this._items),t=M(this._items),i=[],r=this.getAttribute("allow-nesting")!=="false",s=(n,a)=>{const d=t.get(w(n,a))||[];d.forEach(o=>{const c=e.get(o);!c||c.hidden||(i.push({listId:n,parentId:a,beforeId:o,mode:"before",label:this._t("targetBefore",{label:c.label})}),r&&i.push({listId:n,parentId:o,beforeId:null,mode:"inside",label:this._t("targetInside",{label:c.label})}),s(n,o))}),a?r&&d.length>0&&i.push({listId:n,parentId:a,beforeId:null,mode:"before",label:this._t("targetAfterChildren")}):i.push({listId:n,parentId:a,beforeId:null,mode:"before",label:this._t("targetEnd",{list:this._lists.find(o=>o.id===n)?.label||n})})};return this._lists.forEach(n=>s(n.id,null)),i.filter(n=>this._canDrop(n,this._dragState?.movedRootIds||[]))}_initialKeyboardDropTarget(e){const t=this._items.find(i=>i.id===e);return t?{listId:t.listId,parentId:t.parentId,beforeId:e,mode:"before"}:null}_moveKeyboardDropTarget(e){if(!this._dragState)return;const t=this._keyboardDropTargets();if(!t.length)return;const i=Math.max(0,t.findIndex(s=>s.listId===this._dragState?.dropTarget?.listId&&s.parentId===this._dragState?.dropTarget?.parentId&&s.beforeId===this._dragState?.dropTarget?.beforeId&&s.mode===this._dragState?.dropTarget?.mode)),r=Math.max(0,Math.min(t.length-1,i+e));this._setDropTarget(t[r],{announceLabel:t[r].label})}};$._instances=new Set;let K=$;typeof customElements<"u"&&!customElements.get("ui-sortable")&&customElements.define("ui-sortable",K);exports.UISortable=K;
|