basecoat-css 0.2.2 → 0.2.4
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/basecoat.cdn.css +15 -14
- package/dist/basecoat.cdn.min.css +1 -1
- package/dist/basecoat.css +8 -4
- package/dist/js/all.js +197 -101
- package/dist/js/all.min.js +1 -1
- package/dist/js/dropdown-menu.js +50 -29
- package/dist/js/dropdown-menu.min.js +1 -1
- package/dist/js/popover.js +22 -7
- package/dist/js/popover.min.js +1 -1
- package/dist/js/select.js +95 -41
- package/dist/js/select.min.js +1 -1
- package/dist/js/sidebar.js +16 -10
- package/dist/js/sidebar.min.js +1 -1
- package/dist/js/tabs.js +6 -6
- package/dist/js/toast.js +8 -8
- package/dist/js/toast.min.js +1 -1
- package/package.json +1 -1
- package/dist/js/dark-mode.js +0 -10
- package/dist/js/dark-mode.min.js +0 -1
package/dist/basecoat.css
CHANGED
|
@@ -504,7 +504,7 @@
|
|
|
504
504
|
/* Dropdown Menu */
|
|
505
505
|
@layer components {
|
|
506
506
|
.dropdown-menu {
|
|
507
|
-
@apply relative inline-flex
|
|
507
|
+
@apply relative inline-flex;
|
|
508
508
|
|
|
509
509
|
[data-popover] {
|
|
510
510
|
@apply p-1;
|
|
@@ -514,12 +514,16 @@
|
|
|
514
514
|
[role='menuitemcheckbox'],
|
|
515
515
|
[role='menuitemradio'] {
|
|
516
516
|
@apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;
|
|
517
|
-
|
|
517
|
+
|
|
518
|
+
&:not([aria-disabled='true']) {
|
|
519
|
+
@apply focus-visible:bg-accent focus-visible:text-accent-foreground hover:bg-accent hover:text-accent-foreground;
|
|
520
|
+
}
|
|
521
|
+
|
|
518
522
|
&.active {
|
|
519
523
|
@apply bg-accent text-accent-foreground;
|
|
520
524
|
}
|
|
521
525
|
}
|
|
522
|
-
[role='menu'] [role=
|
|
526
|
+
[role='menu'] [role='heading'] {
|
|
523
527
|
@apply flex px-2 py-1.5 text-sm font-medium;
|
|
524
528
|
}
|
|
525
529
|
[role='separator'] {
|
|
@@ -734,7 +738,7 @@
|
|
|
734
738
|
@apply bg-[image:var(--check-icon)] bg-no-repeat bg-position-[center_right_0.5rem] bg-size-[0.875rem];
|
|
735
739
|
}
|
|
736
740
|
}
|
|
737
|
-
[role='listbox'] [role=
|
|
741
|
+
[role='listbox'] [role='heading'] {
|
|
738
742
|
@apply flex text-muted-foreground px-2 py-1.5 text-xs;
|
|
739
743
|
}
|
|
740
744
|
[role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
|
package/dist/js/all.js
CHANGED
|
@@ -5,26 +5,41 @@
|
|
|
5
5
|
const menu = popover.querySelector('[role="menu"]');
|
|
6
6
|
|
|
7
7
|
if (!trigger || !menu || !popover) {
|
|
8
|
-
|
|
8
|
+
const missing = [];
|
|
9
|
+
if (!trigger) missing.push('trigger');
|
|
10
|
+
if (!menu) missing.push('menu');
|
|
11
|
+
if (!popover) missing.push('popover');
|
|
12
|
+
console.error(`Dropdown menu initialisation failed. Missing element(s): ${missing.join(', ')}`, dropdownMenuComponent);
|
|
9
13
|
return;
|
|
10
14
|
}
|
|
11
15
|
|
|
12
16
|
let menuItems = [];
|
|
13
17
|
let activeIndex = -1;
|
|
14
18
|
|
|
15
|
-
const
|
|
19
|
+
const closePopover = (focusOnTrigger = true) => {
|
|
16
20
|
if (trigger.getAttribute('aria-expanded') === 'false') return;
|
|
17
21
|
trigger.setAttribute('aria-expanded', 'false');
|
|
18
22
|
trigger.removeAttribute('aria-activedescendant');
|
|
19
23
|
popover.setAttribute('aria-hidden', 'true');
|
|
20
|
-
|
|
21
|
-
|
|
24
|
+
|
|
25
|
+
if (focusOnTrigger) {
|
|
26
|
+
trigger.focus();
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
setActiveItem(-1);
|
|
22
30
|
};
|
|
23
31
|
|
|
24
|
-
const
|
|
32
|
+
const openPopover = () => {
|
|
33
|
+
document.dispatchEvent(new CustomEvent('basecoat:popover', {
|
|
34
|
+
detail: { source: dropdownMenuComponent }
|
|
35
|
+
}));
|
|
36
|
+
|
|
25
37
|
trigger.setAttribute('aria-expanded', 'true');
|
|
26
38
|
popover.setAttribute('aria-hidden', 'false');
|
|
27
|
-
menuItems = Array.from(menu.querySelectorAll('[role^="menuitem"]
|
|
39
|
+
menuItems = Array.from(menu.querySelectorAll('[role^="menuitem"]')).filter(item =>
|
|
40
|
+
!item.hasAttribute('disabled') &&
|
|
41
|
+
item.getAttribute('aria-disabled') !== 'true'
|
|
42
|
+
);
|
|
28
43
|
if (menuItems.length > 0) {
|
|
29
44
|
setActiveItem(0);
|
|
30
45
|
}
|
|
@@ -47,24 +62,24 @@
|
|
|
47
62
|
trigger.addEventListener('click', () => {
|
|
48
63
|
const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
|
|
49
64
|
if (isExpanded) {
|
|
50
|
-
|
|
65
|
+
closePopover();
|
|
51
66
|
} else {
|
|
52
|
-
|
|
67
|
+
openPopover();
|
|
53
68
|
}
|
|
54
69
|
});
|
|
55
70
|
|
|
56
|
-
dropdownMenuComponent.addEventListener('keydown', (
|
|
71
|
+
dropdownMenuComponent.addEventListener('keydown', (event) => {
|
|
57
72
|
const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
|
|
58
73
|
|
|
59
|
-
if (
|
|
60
|
-
if (isExpanded)
|
|
74
|
+
if (event.key === 'Escape') {
|
|
75
|
+
if (isExpanded) closePopover();
|
|
61
76
|
return;
|
|
62
77
|
}
|
|
63
78
|
|
|
64
79
|
if (!isExpanded) {
|
|
65
|
-
if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(
|
|
66
|
-
|
|
67
|
-
|
|
80
|
+
if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {
|
|
81
|
+
event.preventDefault();
|
|
82
|
+
openPopover();
|
|
68
83
|
}
|
|
69
84
|
return;
|
|
70
85
|
}
|
|
@@ -73,28 +88,28 @@
|
|
|
73
88
|
|
|
74
89
|
let nextIndex = activeIndex;
|
|
75
90
|
|
|
76
|
-
switch (
|
|
91
|
+
switch (event.key) {
|
|
77
92
|
case 'ArrowDown':
|
|
78
|
-
|
|
79
|
-
nextIndex = activeIndex
|
|
93
|
+
event.preventDefault();
|
|
94
|
+
nextIndex = Math.min(activeIndex + 1, menuItems.length - 1);
|
|
80
95
|
break;
|
|
81
96
|
case 'ArrowUp':
|
|
82
|
-
|
|
83
|
-
nextIndex = activeIndex
|
|
97
|
+
event.preventDefault();
|
|
98
|
+
nextIndex = Math.max(activeIndex - 1, 0);
|
|
84
99
|
break;
|
|
85
100
|
case 'Home':
|
|
86
|
-
|
|
101
|
+
event.preventDefault();
|
|
87
102
|
nextIndex = 0;
|
|
88
103
|
break;
|
|
89
104
|
case 'End':
|
|
90
|
-
|
|
105
|
+
event.preventDefault();
|
|
91
106
|
nextIndex = menuItems.length - 1;
|
|
92
107
|
break;
|
|
93
108
|
case 'Enter':
|
|
94
109
|
case ' ':
|
|
95
|
-
|
|
110
|
+
event.preventDefault();
|
|
96
111
|
menuItems[activeIndex]?.click();
|
|
97
|
-
|
|
112
|
+
closePopover();
|
|
98
113
|
return;
|
|
99
114
|
}
|
|
100
115
|
|
|
@@ -103,15 +118,21 @@
|
|
|
103
118
|
}
|
|
104
119
|
});
|
|
105
120
|
|
|
106
|
-
menu.addEventListener('click', (
|
|
107
|
-
if (
|
|
108
|
-
|
|
121
|
+
menu.addEventListener('click', (event) => {
|
|
122
|
+
if (event.target.closest('[role^="menuitem"]')) {
|
|
123
|
+
closePopover();
|
|
109
124
|
}
|
|
110
125
|
});
|
|
111
126
|
|
|
112
|
-
document.addEventListener('click', (
|
|
113
|
-
if (!dropdownMenuComponent.contains(
|
|
114
|
-
|
|
127
|
+
document.addEventListener('click', (event) => {
|
|
128
|
+
if (!dropdownMenuComponent.contains(event.target)) {
|
|
129
|
+
closePopover();
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
|
|
133
|
+
document.addEventListener('basecoat:popover', (event) => {
|
|
134
|
+
if (event.detail.source !== dropdownMenuComponent) {
|
|
135
|
+
closePopover(false);
|
|
115
136
|
}
|
|
116
137
|
});
|
|
117
138
|
|
|
@@ -140,18 +161,27 @@
|
|
|
140
161
|
const content = popoverComponent.querySelector(':scope > [data-popover]');
|
|
141
162
|
|
|
142
163
|
if (!trigger || !content) {
|
|
143
|
-
|
|
164
|
+
const missing = [];
|
|
165
|
+
if (!trigger) missing.push('trigger');
|
|
166
|
+
if (!content) missing.push('content');
|
|
167
|
+
console.error(`Popover initialisation failed. Missing element(s): ${missing.join(', ')}`, popoverComponent);
|
|
144
168
|
return;
|
|
145
169
|
}
|
|
146
170
|
|
|
147
|
-
const closePopover = () => {
|
|
171
|
+
const closePopover = (focusOnTrigger = true) => {
|
|
148
172
|
if (trigger.getAttribute('aria-expanded') === 'false') return;
|
|
149
173
|
trigger.setAttribute('aria-expanded', 'false');
|
|
150
174
|
content.setAttribute('aria-hidden', 'true');
|
|
151
|
-
|
|
175
|
+
if (focusOnTrigger) {
|
|
176
|
+
trigger.focus();
|
|
177
|
+
}
|
|
152
178
|
};
|
|
153
179
|
|
|
154
180
|
const openPopover = () => {
|
|
181
|
+
document.dispatchEvent(new CustomEvent('basecoat:popover', {
|
|
182
|
+
detail: { source: popoverComponent }
|
|
183
|
+
}));
|
|
184
|
+
|
|
155
185
|
const elementToFocus = content.querySelector('[autofocus]');
|
|
156
186
|
if (elementToFocus) {
|
|
157
187
|
content.addEventListener('transitionend', () => {
|
|
@@ -172,18 +202,24 @@
|
|
|
172
202
|
}
|
|
173
203
|
});
|
|
174
204
|
|
|
175
|
-
popoverComponent.addEventListener('keydown', (
|
|
176
|
-
if (
|
|
205
|
+
popoverComponent.addEventListener('keydown', (event) => {
|
|
206
|
+
if (event.key === 'Escape') {
|
|
177
207
|
closePopover();
|
|
178
208
|
}
|
|
179
209
|
});
|
|
180
210
|
|
|
181
|
-
document.addEventListener('click', (
|
|
182
|
-
if (!popoverComponent.contains(
|
|
211
|
+
document.addEventListener('click', (event) => {
|
|
212
|
+
if (!popoverComponent.contains(event.target)) {
|
|
183
213
|
closePopover();
|
|
184
214
|
}
|
|
185
215
|
});
|
|
186
216
|
|
|
217
|
+
document.addEventListener('basecoat:popover', (event) => {
|
|
218
|
+
if (event.detail.source !== popoverComponent) {
|
|
219
|
+
closePopover(false);
|
|
220
|
+
}
|
|
221
|
+
});
|
|
222
|
+
|
|
187
223
|
popoverComponent.dataset.popoverInitialized = true;
|
|
188
224
|
};
|
|
189
225
|
|
|
@@ -212,12 +248,25 @@
|
|
|
212
248
|
const listbox = popover.querySelector('[role="listbox"]');
|
|
213
249
|
const input = selectComponent.querySelector(':scope > input[type="hidden"]');
|
|
214
250
|
const filter = selectComponent.querySelector('header input[type="text"]');
|
|
215
|
-
if (!trigger || !popover || !listbox || !input)
|
|
251
|
+
if (!trigger || !popover || !listbox || !input) {
|
|
252
|
+
const missing = [];
|
|
253
|
+
if (!trigger) missing.push('trigger');
|
|
254
|
+
if (!popover) missing.push('popover');
|
|
255
|
+
if (!listbox) missing.push('listbox');
|
|
256
|
+
if (!input) missing.push('input');
|
|
257
|
+
console.error(`Select component initialisation failed. Missing element(s): ${missing.join(', ')}`, selectComponent);
|
|
258
|
+
return;
|
|
259
|
+
}
|
|
216
260
|
|
|
217
261
|
const options = Array.from(listbox.querySelectorAll('[role="option"]'));
|
|
218
262
|
let visibleOptions = [...options];
|
|
219
263
|
let activeIndex = -1;
|
|
220
264
|
|
|
265
|
+
const hasTransition = () => {
|
|
266
|
+
const style = getComputedStyle(popover);
|
|
267
|
+
return parseFloat(style.transitionDuration) > 0 || parseFloat(style.transitionDelay) > 0;
|
|
268
|
+
};
|
|
269
|
+
|
|
221
270
|
const updateValue = (option) => {
|
|
222
271
|
if (option) {
|
|
223
272
|
selectedValue.innerHTML = option.dataset.label || option.innerHTML;
|
|
@@ -227,14 +276,26 @@
|
|
|
227
276
|
}
|
|
228
277
|
};
|
|
229
278
|
|
|
230
|
-
const closePopover = () => {
|
|
231
|
-
popover.
|
|
232
|
-
|
|
279
|
+
const closePopover = (focusOnTrigger = true) => {
|
|
280
|
+
if (popover.getAttribute('aria-hidden') === 'true') return;
|
|
281
|
+
|
|
233
282
|
if (filter) {
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
283
|
+
const resetFilter = () => {
|
|
284
|
+
filter.value = '';
|
|
285
|
+
visibleOptions = [...options];
|
|
286
|
+
options.forEach(opt => opt.setAttribute('aria-hidden', 'false'));
|
|
287
|
+
};
|
|
288
|
+
|
|
289
|
+
if (hasTransition()) {
|
|
290
|
+
popover.addEventListener('transitionend', resetFilter, { once: true });
|
|
291
|
+
} else {
|
|
292
|
+
resetFilter();
|
|
293
|
+
}
|
|
237
294
|
}
|
|
295
|
+
|
|
296
|
+
if (focusOnTrigger) trigger.focus();
|
|
297
|
+
popover.setAttribute('aria-hidden', 'true');
|
|
298
|
+
trigger.setAttribute('aria-expanded', 'false');
|
|
238
299
|
trigger.removeAttribute('aria-activedescendant');
|
|
239
300
|
if (activeIndex > -1) options[activeIndex]?.classList.remove('active');
|
|
240
301
|
activeIndex = -1;
|
|
@@ -243,10 +304,17 @@
|
|
|
243
304
|
const selectOption = (option) => {
|
|
244
305
|
if (!option) return;
|
|
245
306
|
|
|
246
|
-
if (option.dataset.value) {
|
|
307
|
+
if (option.dataset.value != null) {
|
|
247
308
|
updateValue(option);
|
|
248
309
|
}
|
|
310
|
+
|
|
249
311
|
closePopover();
|
|
312
|
+
|
|
313
|
+
const event = new CustomEvent('change', {
|
|
314
|
+
detail: { value: option.dataset.value },
|
|
315
|
+
bubbles: true
|
|
316
|
+
});
|
|
317
|
+
selectComponent.dispatchEvent(event);
|
|
250
318
|
};
|
|
251
319
|
|
|
252
320
|
if (filter) {
|
|
@@ -273,36 +341,36 @@
|
|
|
273
341
|
filter.addEventListener('input', filterOptions);
|
|
274
342
|
}
|
|
275
343
|
|
|
276
|
-
let initialOption = options.find(opt =>
|
|
344
|
+
let initialOption = options.find(opt => opt.dataset.value === input.value);
|
|
277
345
|
if (!initialOption && options.length > 0) initialOption = options[0];
|
|
278
346
|
|
|
279
347
|
updateValue(initialOption);
|
|
280
348
|
|
|
281
|
-
const handleKeyNavigation = (
|
|
349
|
+
const handleKeyNavigation = (event) => {
|
|
282
350
|
const isPopoverOpen = popover.getAttribute('aria-hidden') === 'false';
|
|
283
351
|
|
|
284
|
-
if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End', 'Escape'].includes(
|
|
352
|
+
if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End', 'Escape'].includes(event.key)) {
|
|
285
353
|
return;
|
|
286
354
|
}
|
|
287
355
|
|
|
288
356
|
if (!isPopoverOpen) {
|
|
289
|
-
if (
|
|
290
|
-
|
|
357
|
+
if (event.key !== 'Enter' && event.key !== 'Escape') {
|
|
358
|
+
event.preventDefault();
|
|
291
359
|
trigger.click();
|
|
292
360
|
}
|
|
293
361
|
return;
|
|
294
362
|
}
|
|
295
363
|
|
|
296
|
-
|
|
364
|
+
event.preventDefault();
|
|
297
365
|
|
|
298
|
-
if (
|
|
366
|
+
if (event.key === 'Escape') {
|
|
299
367
|
closePopover();
|
|
300
368
|
return;
|
|
301
369
|
}
|
|
302
370
|
|
|
303
|
-
if (
|
|
371
|
+
if (event.key === 'Enter') {
|
|
304
372
|
if (activeIndex > -1) {
|
|
305
|
-
selectOption(
|
|
373
|
+
selectOption(options[activeIndex]);
|
|
306
374
|
}
|
|
307
375
|
return;
|
|
308
376
|
}
|
|
@@ -312,7 +380,7 @@
|
|
|
312
380
|
const currentVisibleIndex = activeIndex > -1 ? visibleOptions.indexOf(options[activeIndex]) : -1;
|
|
313
381
|
let nextVisibleIndex = currentVisibleIndex;
|
|
314
382
|
|
|
315
|
-
switch (
|
|
383
|
+
switch (event.key) {
|
|
316
384
|
case 'ArrowDown':
|
|
317
385
|
if (currentVisibleIndex < visibleOptions.length - 1) {
|
|
318
386
|
nextVisibleIndex = currentVisibleIndex + 1;
|
|
@@ -322,7 +390,7 @@
|
|
|
322
390
|
if (currentVisibleIndex > 0) {
|
|
323
391
|
nextVisibleIndex = currentVisibleIndex - 1;
|
|
324
392
|
} else if (currentVisibleIndex === -1) {
|
|
325
|
-
nextVisibleIndex = 0;
|
|
393
|
+
nextVisibleIndex = 0;
|
|
326
394
|
}
|
|
327
395
|
break;
|
|
328
396
|
case 'Home':
|
|
@@ -354,41 +422,63 @@
|
|
|
354
422
|
filter.addEventListener('keydown', handleKeyNavigation);
|
|
355
423
|
}
|
|
356
424
|
|
|
425
|
+
const openPopover = () => {
|
|
426
|
+
document.dispatchEvent(new CustomEvent('basecoat:popover', {
|
|
427
|
+
detail: { source: selectComponent }
|
|
428
|
+
}));
|
|
429
|
+
|
|
430
|
+
if (filter) {
|
|
431
|
+
if (hasTransition()) {
|
|
432
|
+
popover.addEventListener('transitionend', () => {
|
|
433
|
+
filter.focus();
|
|
434
|
+
}, { once: true });
|
|
435
|
+
} else {
|
|
436
|
+
filter.focus();
|
|
437
|
+
}
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
popover.setAttribute('aria-hidden', 'false');
|
|
441
|
+
trigger.setAttribute('aria-expanded', 'true');
|
|
442
|
+
|
|
443
|
+
const selectedOption = listbox.querySelector('[role="option"][aria-selected="true"]');
|
|
444
|
+
if (selectedOption) {
|
|
445
|
+
if (activeIndex > -1) {
|
|
446
|
+
options[activeIndex]?.classList.remove('active');
|
|
447
|
+
}
|
|
448
|
+
activeIndex = options.indexOf(selectedOption);
|
|
449
|
+
selectedOption.classList.add('active');
|
|
450
|
+
if (selectedOption.id) {
|
|
451
|
+
trigger.setAttribute('aria-activedescendant', selectedOption.id);
|
|
452
|
+
}
|
|
453
|
+
selectedOption.scrollIntoView({ block: 'nearest' });
|
|
454
|
+
}
|
|
455
|
+
};
|
|
456
|
+
|
|
357
457
|
trigger.addEventListener('click', () => {
|
|
358
458
|
const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
|
|
359
|
-
|
|
360
459
|
if (isExpanded) {
|
|
361
460
|
closePopover();
|
|
362
461
|
} else {
|
|
363
|
-
|
|
364
|
-
trigger.setAttribute('aria-expanded', 'true');
|
|
365
|
-
if (filter) filter.focus();
|
|
366
|
-
|
|
367
|
-
const selectedOption = listbox.querySelector('[role="option"][aria-selected="true"]');
|
|
368
|
-
if (selectedOption) {
|
|
369
|
-
if (activeIndex > -1) {
|
|
370
|
-
options[activeIndex]?.classList.remove('active');
|
|
371
|
-
}
|
|
372
|
-
activeIndex = options.indexOf(selectedOption);
|
|
373
|
-
selectedOption.classList.add('active');
|
|
374
|
-
if (selectedOption.id) {
|
|
375
|
-
trigger.setAttribute('aria-activedescendant', selectedOption.id);
|
|
376
|
-
}
|
|
377
|
-
selectedOption.scrollIntoView({ block: 'nearest' });
|
|
378
|
-
}
|
|
462
|
+
openPopover();
|
|
379
463
|
}
|
|
380
464
|
});
|
|
381
465
|
|
|
382
|
-
listbox.addEventListener('click', (
|
|
383
|
-
const clickedOption =
|
|
466
|
+
listbox.addEventListener('click', (event) => {
|
|
467
|
+
const clickedOption = event.target.closest('[role="option"]');
|
|
384
468
|
if (clickedOption) {
|
|
385
469
|
selectOption(clickedOption);
|
|
386
470
|
}
|
|
387
471
|
});
|
|
388
472
|
|
|
389
|
-
document.addEventListener('click', (
|
|
390
|
-
if (!selectComponent.contains(
|
|
391
|
-
closePopover();
|
|
473
|
+
document.addEventListener('click', (event) => {
|
|
474
|
+
if (!selectComponent.contains(event.target)) {
|
|
475
|
+
closePopover(false);
|
|
476
|
+
}
|
|
477
|
+
});
|
|
478
|
+
|
|
479
|
+
document.addEventListener('basecoat:popover', (event) => {
|
|
480
|
+
if (event.detail.source !== selectComponent) {
|
|
481
|
+
closePopover(false);
|
|
392
482
|
}
|
|
393
483
|
});
|
|
394
484
|
|
|
@@ -470,18 +560,24 @@
|
|
|
470
560
|
|
|
471
561
|
const sidebarId = sidebarComponent.id;
|
|
472
562
|
|
|
473
|
-
|
|
474
|
-
if (
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
563
|
+
document.addEventListener('basecoat:sidebar', (event) => {
|
|
564
|
+
if (event.detail?.id && event.detail.id !== sidebarId) return;
|
|
565
|
+
|
|
566
|
+
switch (event.detail?.action) {
|
|
567
|
+
case 'open':
|
|
568
|
+
setState(true);
|
|
569
|
+
break;
|
|
570
|
+
case 'close':
|
|
571
|
+
setState(false);
|
|
572
|
+
break;
|
|
573
|
+
default:
|
|
574
|
+
setState(!open);
|
|
575
|
+
break;
|
|
576
|
+
}
|
|
481
577
|
});
|
|
482
578
|
|
|
483
|
-
sidebarComponent.addEventListener('click', (
|
|
484
|
-
const target =
|
|
579
|
+
sidebarComponent.addEventListener('click', (event) => {
|
|
580
|
+
const target = event.target;
|
|
485
581
|
const nav = sidebarComponent.querySelector('nav');
|
|
486
582
|
|
|
487
583
|
const isMobile = window.innerWidth < breakpoint;
|
|
@@ -544,19 +640,19 @@
|
|
|
544
640
|
if (activePanel) activePanel.hidden = false;
|
|
545
641
|
};
|
|
546
642
|
|
|
547
|
-
tablist.addEventListener('click', (
|
|
548
|
-
const clickedTab =
|
|
643
|
+
tablist.addEventListener('click', (event) => {
|
|
644
|
+
const clickedTab = event.target.closest('[role="tab"]');
|
|
549
645
|
if (clickedTab) selectTab(clickedTab);
|
|
550
646
|
});
|
|
551
647
|
|
|
552
|
-
tablist.addEventListener('keydown', (
|
|
553
|
-
const currentTab =
|
|
648
|
+
tablist.addEventListener('keydown', (event) => {
|
|
649
|
+
const currentTab = event.target;
|
|
554
650
|
if (!tabs.includes(currentTab)) return;
|
|
555
651
|
|
|
556
652
|
let nextTab;
|
|
557
653
|
const currentIndex = tabs.indexOf(currentTab);
|
|
558
654
|
|
|
559
|
-
switch (
|
|
655
|
+
switch (event.key) {
|
|
560
656
|
case 'ArrowRight':
|
|
561
657
|
nextTab = tabs[(currentIndex + 1) % tabs.length];
|
|
562
658
|
break;
|
|
@@ -573,7 +669,7 @@
|
|
|
573
669
|
return;
|
|
574
670
|
}
|
|
575
671
|
|
|
576
|
-
|
|
672
|
+
event.preventDefault();
|
|
577
673
|
selectTab(nextTab);
|
|
578
674
|
nextTab.focus();
|
|
579
675
|
});
|
|
@@ -615,11 +711,11 @@
|
|
|
615
711
|
|
|
616
712
|
toaster.addEventListener('mouseenter', pauseAllTimeouts);
|
|
617
713
|
toaster.addEventListener('mouseleave', resumeAllTimeouts);
|
|
618
|
-
toaster.addEventListener('click', (
|
|
619
|
-
const actionLink =
|
|
620
|
-
const actionButton =
|
|
714
|
+
toaster.addEventListener('click', (event) => {
|
|
715
|
+
const actionLink = event.target.closest('.toast footer a');
|
|
716
|
+
const actionButton = event.target.closest('.toast footer button');
|
|
621
717
|
if (actionLink || actionButton) {
|
|
622
|
-
closeToast(
|
|
718
|
+
closeToast(event.target.closest('.toast'));
|
|
623
719
|
}
|
|
624
720
|
});
|
|
625
721
|
|
|
@@ -709,8 +805,8 @@
|
|
|
709
805
|
try {
|
|
710
806
|
const func = new Function('close', actionString);
|
|
711
807
|
func(() => closeToast(toast));
|
|
712
|
-
} catch (
|
|
713
|
-
console.error('Error executing toast action:',
|
|
808
|
+
} catch (event) {
|
|
809
|
+
console.error('Error executing toast action:', event);
|
|
714
810
|
}
|
|
715
811
|
}
|
|
716
812
|
|
|
@@ -766,12 +862,12 @@
|
|
|
766
862
|
const initialToaster = document.getElementById('toaster');
|
|
767
863
|
if (initialToaster) initToaster(initialToaster);
|
|
768
864
|
|
|
769
|
-
|
|
865
|
+
document.addEventListener('basecoat:toast', (event) => {
|
|
770
866
|
if (!toaster) {
|
|
771
867
|
console.error('Cannot create toast: toaster container not found on page.');
|
|
772
868
|
return;
|
|
773
869
|
}
|
|
774
|
-
const config =
|
|
870
|
+
const config = event.detail?.config || {};
|
|
775
871
|
const toastElement = createToast(config);
|
|
776
872
|
toaster.appendChild(toastElement);
|
|
777
873
|
});
|
package/dist/js/all.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{const e=e=>{const t=e.querySelector(":scope > button"),a=e.querySelector(":scope > [data-popover]"),n=a.querySelector('[role="menu"]');if(!t||!n||!a)return void console.error("Dropdown menu component is missing a trigger, a menu, or a popover content element.",e);let r=[],i=-1;const o=()=>{"false"!==t.getAttribute("aria-expanded")&&(t.setAttribute("aria-expanded","false"),t.removeAttribute("aria-activedescendant"),a.setAttribute("aria-hidden","true"),t.focus(),i=-1)},d=()=>{t.setAttribute("aria-expanded","true"),a.setAttribute("aria-hidden","false"),r=Array.from(n.querySelectorAll('[role^="menuitem"]:not([disabled])')),r.length>0&&s(0)},s=e=>{if(i>-1&&r[i]&&r[i].classList.remove("active"),i=e,i>-1&&r[i]){const e=r[i];e.classList.add("active"),t.setAttribute("aria-activedescendant",e.id)}else t.removeAttribute("aria-activedescendant")};t.addEventListener("click",(()=>{"true"===t.getAttribute("aria-expanded")?o():d()})),e.addEventListener("keydown",(e=>{const a="true"===t.getAttribute("aria-expanded");if("Escape"===e.key)return void(a&&o());if(!a)return void(["ArrowDown","ArrowUp","Enter"," "].includes(e.key)&&(e.preventDefault(),d()));if(0===r.length)return;let n=i;switch(e.key){case"ArrowDown":e.preventDefault(),n=i<r.length-1?i+1:0;break;case"ArrowUp":e.preventDefault(),n=i>0?i-1:r.length-1;break;case"Home":e.preventDefault(),n=0;break;case"End":e.preventDefault(),n=r.length-1;break;case"Enter":case" ":return e.preventDefault(),r[i]?.click(),void o()}n!==i&&s(n)})),n.addEventListener("click",(e=>{e.target.closest('[role^="menuitem"]')&&o()})),document.addEventListener("click",(t=>{e.contains(t.target)||o()})),e.dataset.dropdownMenuInitialized=!0};document.querySelectorAll(".dropdown-menu:not([data-dropdown-menu-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches(".dropdown-menu:not([data-dropdown-menu-initialized])")&&e(t),t.querySelectorAll(".dropdown-menu:not([data-dropdown-menu-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})(),(()=>{const e=e=>{const t=e.querySelector(":scope > button"),a=e.querySelector(":scope > [data-popover]");if(!t||!a)return void console.error("Popover component is missing a trigger button or a content element.",e);const n=()=>{"false"!==t.getAttribute("aria-expanded")&&(t.setAttribute("aria-expanded","false"),a.setAttribute("aria-hidden","true"),t.focus())};t.addEventListener("click",(()=>{"true"===t.getAttribute("aria-expanded")?n():(()=>{const e=a.querySelector("[autofocus]");e&&a.addEventListener("transitionend",(()=>{e.focus()}),{once:!0}),t.setAttribute("aria-expanded","true"),a.setAttribute("aria-hidden","false")})()})),e.addEventListener("keydown",(e=>{"Escape"===e.key&&n()})),document.addEventListener("click",(t=>{e.contains(t.target)||n()})),e.dataset.popoverInitialized=!0};document.querySelectorAll(".popover:not([data-popover-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches(".popover:not([data-popover-initialized])")&&e(t),t.querySelectorAll(".popover:not([data-popover-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})(),(()=>{const e=e=>{const t=e.querySelector(":scope > button"),a=t.querySelector(":scope > span"),n=e.querySelector(":scope > [data-popover]"),r=n.querySelector('[role="listbox"]'),i=e.querySelector(':scope > input[type="hidden"]'),o=e.querySelector('header input[type="text"]');if(!(t&&n&&r&&i))return;const d=Array.from(r.querySelectorAll('[role="option"]'));let s=[...d],c=-1;const l=e=>{e&&(a.innerHTML=e.dataset.label||e.innerHTML,i.value=e.dataset.value,r.querySelector('[role="option"][aria-selected="true"]')?.removeAttribute("aria-selected"),e.setAttribute("aria-selected","true"))},u=()=>{n.setAttribute("aria-hidden","true"),t.setAttribute("aria-expanded","false"),o&&(o.value="",s=[...d],d.forEach((e=>e.setAttribute("aria-hidden","false")))),t.removeAttribute("aria-activedescendant"),c>-1&&d[c]?.classList.remove("active"),c=-1},h=e=>{e&&(e.dataset.value&&l(e),u())};if(o){const e=()=>{const e=o.value.trim().toLowerCase();c>-1&&(d[c].classList.remove("active"),t.removeAttribute("aria-activedescendant"),c=-1),s=[],d.forEach((t=>{const a=(t.dataset.label||t.textContent).trim().toLowerCase().includes(e);t.setAttribute("aria-hidden",String(!a)),a&&s.push(t)}))};o.addEventListener("input",e)}let v=d.find((e=>i.value&&e.dataset.value===i.value));!v&&d.length>0&&(v=d[0]),l(v);const p=e=>{const a="false"===n.getAttribute("aria-hidden");if(!["ArrowDown","ArrowUp","Enter","Home","End","Escape"].includes(e.key))return;if(!a)return void("Enter"!==e.key&&"Escape"!==e.key&&(e.preventDefault(),t.click()));if(e.preventDefault(),"Escape"===e.key)return void u();if("Enter"===e.key)return void(c>-1&&h(s[c]));if(0===s.length)return;const r=c>-1?s.indexOf(d[c]):-1;let i=r;switch(e.key){case"ArrowDown":r<s.length-1&&(i=r+1);break;case"ArrowUp":r>0?i=r-1:-1===r&&(i=0);break;case"Home":i=0;break;case"End":i=s.length-1}if(i!==r){r>-1&&s[r].classList.remove("active");const e=s[i];e.classList.add("active"),c=d.indexOf(e),e.id&&t.setAttribute("aria-activedescendant",e.id),e.scrollIntoView({block:"nearest",behavior:"smooth"})}};t.addEventListener("keydown",p),o&&o.addEventListener("keydown",p),t.addEventListener("click",(()=>{if("true"===t.getAttribute("aria-expanded"))u();else{n.setAttribute("aria-hidden","false"),t.setAttribute("aria-expanded","true"),o&&o.focus();const e=r.querySelector('[role="option"][aria-selected="true"]');e&&(c>-1&&d[c]?.classList.remove("active"),c=d.indexOf(e),e.classList.add("active"),e.id&&t.setAttribute("aria-activedescendant",e.id),e.scrollIntoView({block:"nearest"}))}})),r.addEventListener("click",(e=>{const t=e.target.closest('[role="option"]');t&&h(t)})),document.addEventListener("click",(t=>{e.contains(t.target)||u()})),n.setAttribute("aria-hidden","true"),e.dataset.selectInitialized=!0};document.querySelectorAll("div.select:not([data-select-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches("div.select:not([data-select-initialized])")&&e(t),t.querySelectorAll("div.select:not([data-select-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})(),(()=>{if(!window.history.__basecoatPatched){const e=window.history.pushState;window.history.pushState=function(...t){e.apply(this,t),window.dispatchEvent(new Event("basecoat:locationchange"))};const t=window.history.replaceState;window.history.replaceState=function(...e){t.apply(this,e),window.dispatchEvent(new Event("basecoat:locationchange"))},window.history.__basecoatPatched=!0}const e=e=>{const t="false"!==e.dataset.initialOpen,a="true"===e.dataset.initialMobileOpen,n=parseInt(e.dataset.breakpoint)||768;let r=n>0?window.innerWidth>=n?t:a:t;const i=()=>{const t=window.location.pathname.replace(/\/$/,"");e.querySelectorAll("a").forEach((e=>{if(e.hasAttribute("data-ignore-current"))return;new URL(e.href).pathname.replace(/\/$/,"")===t?e.setAttribute("aria-current","page"):e.removeAttribute("aria-current")}))},o=()=>{e.setAttribute("aria-hidden",!r),r?e.removeAttribute("inert"):e.setAttribute("inert","")},d=e=>{r=e,o()},s=e.id;window.addEventListener("sidebar:open",(e=>{e.detail?.id&&e.detail.id!==s||d(!0)})),window.addEventListener("sidebar:close",(e=>{e.detail?.id&&e.detail.id!==s||d(!1)})),window.addEventListener("sidebar:toggle",(e=>{e.detail?.id&&e.detail.id!==s||d(!r)})),e.addEventListener("click",(t=>{const a=t.target,r=e.querySelector("nav");if(window.innerWidth<n&&a.closest("a, button")&&!a.closest("[data-keep-mobile-sidebar-open]"))return document.activeElement&&document.activeElement.blur(),void d(!1);(a===e||r&&!r.contains(a))&&(document.activeElement&&document.activeElement.blur(),d(!1))})),window.addEventListener("popstate",i),window.addEventListener("basecoat:locationchange",i),o(),i(),e.dataset.sidebarInitialized=!0};document.querySelectorAll(".sidebar:not([data-sidebar-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches(".sidebar:not([data-sidebar-initialized])")&&e(t),t.querySelectorAll(".sidebar:not([data-sidebar-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})(),(()=>{const e=e=>{const t=e.querySelector('[role="tablist"]');if(!t)return;const a=Array.from(t.querySelectorAll('[role="tab"]')),n=a.map((e=>document.getElementById(e.getAttribute("aria-controls")))).filter(Boolean),r=e=>{a.forEach(((e,t)=>{e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1"),n[t]&&(n[t].hidden=!0)})),e.setAttribute("aria-selected","true"),e.setAttribute("tabindex","0");const t=document.getElementById(e.getAttribute("aria-controls"));t&&(t.hidden=!1)};t.addEventListener("click",(e=>{const t=e.target.closest('[role="tab"]');t&&r(t)})),t.addEventListener("keydown",(e=>{const t=e.target;if(!a.includes(t))return;let n;const i=a.indexOf(t);switch(e.key){case"ArrowRight":n=a[(i+1)%a.length];break;case"ArrowLeft":n=a[(i-1+a.length)%a.length];break;case"Home":n=a[0];break;case"End":n=a[a.length-1];break;default:return}e.preventDefault(),r(n),n.focus()})),e.dataset.tabsInitialized=!0};document.querySelectorAll(".tabs:not([data-tabs-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches(".tabs:not([data-tabs-initialized])")&&e(t),t.querySelectorAll(".tabs:not([data-tabs-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})(),(()=>{let e;const t=new WeakMap;let a=!1;const n={success:'<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',error:'<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>',info:'<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',warning:'<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'};function r(t){t.dataset.toasterInitialized||(e=t,e.addEventListener("mouseenter",o),e.addEventListener("mouseleave",d),e.addEventListener("click",(e=>{const t=e.target.closest(".toast footer a"),a=e.target.closest(".toast footer button");(t||a)&&s(e.target.closest(".toast"))})),e.querySelectorAll(".toast:not([data-toast-initialized])").forEach(i),e.dataset.toasterInitialized="true")}function i(e){if(e.dataset.toastInitialized)return;const n=parseInt(e.dataset.duration),r=-1!==n?n||("error"===e.dataset.category?5e3:3e3):-1,i={remainingTime:r,timeoutId:null,startTime:null};-1!==r&&(a?i.timeoutId=null:(i.startTime=Date.now(),i.timeoutId=setTimeout((()=>s(e)),r))),t.set(e,i),e.dataset.toastInitialized="true"}function o(){a||(a=!0,e.querySelectorAll('.toast:not([aria-hidden="true"])').forEach((e=>{if(!t.has(e))return;const a=t.get(e);a.timeoutId&&(clearTimeout(a.timeoutId),a.timeoutId=null,a.remainingTime-=Date.now()-a.startTime)})))}function d(){a&&(a=!1,e.querySelectorAll('.toast:not([aria-hidden="true"])').forEach((e=>{if(!t.has(e))return;const a=t.get(e);-1===a.remainingTime||a.timeoutId||(a.remainingTime>0?(a.startTime=Date.now(),a.timeoutId=setTimeout((()=>s(e)),a.remainingTime)):s(e))})))}function s(e){if(!t.has(e))return;const a=t.get(e);clearTimeout(a.timeoutId),t.delete(e),document.activeElement&&document.activeElement.blur(),e.setAttribute("aria-hidden","true"),e.addEventListener("transitionend",(()=>e.remove()),{once:!0})}const c=document.getElementById("toaster");c&&r(c),window.addEventListener("basecoat:toast",(t=>{if(!e)return void console.error("Cannot create toast: toaster container not found on page.");const a=function(e){const{category:t="info",title:a,description:r,action:i,cancel:o,duration:d,icon:s}=e,c=s||t&&n[t]||"",l=a?`<h2>${a}</h2>`:"",u=r?`<p>${r}</p>`:"",h=i?.href?`<a href="${i.href}" class="btn" data-toast-action>${i.label}</a>`:i?.onclick?`<button type="button" class="btn" data-toast-action onclick="${i.onclick}">${i.label}</button>`:"",v=o?`<button type="button" class="btn-outline h-6 text-xs px-2.5 rounded-sm" data-toast-cancel onclick="${o?.onclick}">${o.label}</button>`:"",p=`\n <div\n class="toast"\n role="${"error"===t?"alert":"status"}"\n aria-atomic="true"\n ${t?`data-category="${t}"`:""}\n ${void 0!==d?`data-duration="${d}"`:""}\n >\n <div class="toast-content">\n ${c}\n <section>\n ${l}\n ${u}\n </section>\n ${h||v?`<footer>${h}${v}</footer>`:""}\n </div>\n </div>\n </div>\n `,b=document.createElement("template");return b.innerHTML=p.trim(),b.content.firstChild}(t.detail?.config||{});e.appendChild(a)}));new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches("#toaster")&&r(t),e&&t.matches(".toast:not([data-toast-initialized])")&&i(t))}))}))})).observe(document.body,{childList:!0,subtree:!0})})();
|
|
1
|
+
(()=>{const e=e=>{const t=e.querySelector(":scope > button"),a=e.querySelector(":scope > [data-popover]"),n=a.querySelector('[role="menu"]');if(!t||!n||!a){const r=[];return t||r.push("trigger"),n||r.push("menu"),a||r.push("popover"),void console.error(`Dropdown menu initialisation failed. Missing element(s): ${r.join(", ")}`,e)}let r=[],i=-1;const o=(e=!0)=>{"false"!==t.getAttribute("aria-expanded")&&(t.setAttribute("aria-expanded","false"),t.removeAttribute("aria-activedescendant"),a.setAttribute("aria-hidden","true"),e&&t.focus(),d(-1))},s=()=>{document.dispatchEvent(new CustomEvent("basecoat:popover",{detail:{source:e}})),t.setAttribute("aria-expanded","true"),a.setAttribute("aria-hidden","false"),r=Array.from(n.querySelectorAll('[role^="menuitem"]')).filter((e=>!e.hasAttribute("disabled")&&"true"!==e.getAttribute("aria-disabled"))),r.length>0&&d(0)},d=e=>{if(i>-1&&r[i]&&r[i].classList.remove("active"),i=e,i>-1&&r[i]){const e=r[i];e.classList.add("active"),t.setAttribute("aria-activedescendant",e.id)}else t.removeAttribute("aria-activedescendant")};t.addEventListener("click",(()=>{"true"===t.getAttribute("aria-expanded")?o():s()})),e.addEventListener("keydown",(e=>{const a="true"===t.getAttribute("aria-expanded");if("Escape"===e.key)return void(a&&o());if(!a)return void(["ArrowDown","ArrowUp","Enter"," "].includes(e.key)&&(e.preventDefault(),s()));if(0===r.length)return;let n=i;switch(e.key){case"ArrowDown":e.preventDefault(),n=Math.min(i+1,r.length-1);break;case"ArrowUp":e.preventDefault(),n=Math.max(i-1,0);break;case"Home":e.preventDefault(),n=0;break;case"End":e.preventDefault(),n=r.length-1;break;case"Enter":case" ":return e.preventDefault(),r[i]?.click(),void o()}n!==i&&d(n)})),n.addEventListener("click",(e=>{e.target.closest('[role^="menuitem"]')&&o()})),document.addEventListener("click",(t=>{e.contains(t.target)||o()})),document.addEventListener("basecoat:popover",(t=>{t.detail.source!==e&&o(!1)})),e.dataset.dropdownMenuInitialized=!0};document.querySelectorAll(".dropdown-menu:not([data-dropdown-menu-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches(".dropdown-menu:not([data-dropdown-menu-initialized])")&&e(t),t.querySelectorAll(".dropdown-menu:not([data-dropdown-menu-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})(),(()=>{const e=e=>{const t=e.querySelector(":scope > button"),a=e.querySelector(":scope > [data-popover]");if(!t||!a){const n=[];return t||n.push("trigger"),a||n.push("content"),void console.error(`Popover initialisation failed. Missing element(s): ${n.join(", ")}`,e)}const n=(e=!0)=>{"false"!==t.getAttribute("aria-expanded")&&(t.setAttribute("aria-expanded","false"),a.setAttribute("aria-hidden","true"),e&&t.focus())};t.addEventListener("click",(()=>{"true"===t.getAttribute("aria-expanded")?n():(()=>{document.dispatchEvent(new CustomEvent("basecoat:popover",{detail:{source:e}}));const n=a.querySelector("[autofocus]");n&&a.addEventListener("transitionend",(()=>{n.focus()}),{once:!0}),t.setAttribute("aria-expanded","true"),a.setAttribute("aria-hidden","false")})()})),e.addEventListener("keydown",(e=>{"Escape"===e.key&&n()})),document.addEventListener("click",(t=>{e.contains(t.target)||n()})),document.addEventListener("basecoat:popover",(t=>{t.detail.source!==e&&n(!1)})),e.dataset.popoverInitialized=!0};document.querySelectorAll(".popover:not([data-popover-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches(".popover:not([data-popover-initialized])")&&e(t),t.querySelectorAll(".popover:not([data-popover-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})(),(()=>{const e=e=>{const t=e.querySelector(":scope > button"),a=t.querySelector(":scope > span"),n=e.querySelector(":scope > [data-popover]"),r=n.querySelector('[role="listbox"]'),i=e.querySelector(':scope > input[type="hidden"]'),o=e.querySelector('header input[type="text"]');if(!(t&&n&&r&&i)){const a=[];return t||a.push("trigger"),n||a.push("popover"),r||a.push("listbox"),i||a.push("input"),void console.error(`Select component initialisation failed. Missing element(s): ${a.join(", ")}`,e)}const s=Array.from(r.querySelectorAll('[role="option"]'));let d=[...s],c=-1;const l=()=>{const e=getComputedStyle(n);return parseFloat(e.transitionDuration)>0||parseFloat(e.transitionDelay)>0},u=e=>{e&&(a.innerHTML=e.dataset.label||e.innerHTML,i.value=e.dataset.value,r.querySelector('[role="option"][aria-selected="true"]')?.removeAttribute("aria-selected"),e.setAttribute("aria-selected","true"))},p=(e=!0)=>{if("true"!==n.getAttribute("aria-hidden")){if(o){const e=()=>{o.value="",d=[...s],s.forEach((e=>e.setAttribute("aria-hidden","false")))};l()?n.addEventListener("transitionend",e,{once:!0}):e()}e&&t.focus(),n.setAttribute("aria-hidden","true"),t.setAttribute("aria-expanded","false"),t.removeAttribute("aria-activedescendant"),c>-1&&s[c]?.classList.remove("active"),c=-1}},h=t=>{if(!t)return;null!=t.dataset.value&&u(t),p();const a=new CustomEvent("change",{detail:{value:t.dataset.value},bubbles:!0});e.dispatchEvent(a)};if(o){const e=()=>{const e=o.value.trim().toLowerCase();c>-1&&(s[c].classList.remove("active"),t.removeAttribute("aria-activedescendant"),c=-1),d=[],s.forEach((t=>{const a=(t.dataset.label||t.textContent).trim().toLowerCase().includes(e);t.setAttribute("aria-hidden",String(!a)),a&&d.push(t)}))};o.addEventListener("input",e)}let v=s.find((e=>e.dataset.value===i.value));!v&&s.length>0&&(v=s[0]),u(v);const b=e=>{const a="false"===n.getAttribute("aria-hidden");if(!["ArrowDown","ArrowUp","Enter","Home","End","Escape"].includes(e.key))return;if(!a)return void("Enter"!==e.key&&"Escape"!==e.key&&(e.preventDefault(),t.click()));if(e.preventDefault(),"Escape"===e.key)return void p();if("Enter"===e.key)return void(c>-1&&h(s[c]));if(0===d.length)return;const r=c>-1?d.indexOf(s[c]):-1;let i=r;switch(e.key){case"ArrowDown":r<d.length-1&&(i=r+1);break;case"ArrowUp":r>0?i=r-1:-1===r&&(i=0);break;case"Home":i=0;break;case"End":i=d.length-1}if(i!==r){r>-1&&d[r].classList.remove("active");const e=d[i];e.classList.add("active"),c=s.indexOf(e),e.id&&t.setAttribute("aria-activedescendant",e.id),e.scrollIntoView({block:"nearest",behavior:"smooth"})}};t.addEventListener("keydown",b),o&&o.addEventListener("keydown",b);t.addEventListener("click",(()=>{"true"===t.getAttribute("aria-expanded")?p():(()=>{document.dispatchEvent(new CustomEvent("basecoat:popover",{detail:{source:e}})),o&&(l()?n.addEventListener("transitionend",(()=>{o.focus()}),{once:!0}):o.focus()),n.setAttribute("aria-hidden","false"),t.setAttribute("aria-expanded","true");const a=r.querySelector('[role="option"][aria-selected="true"]');a&&(c>-1&&s[c]?.classList.remove("active"),c=s.indexOf(a),a.classList.add("active"),a.id&&t.setAttribute("aria-activedescendant",a.id),a.scrollIntoView({block:"nearest"}))})()})),r.addEventListener("click",(e=>{const t=e.target.closest('[role="option"]');t&&h(t)})),document.addEventListener("click",(t=>{e.contains(t.target)||p(!1)})),document.addEventListener("basecoat:popover",(t=>{t.detail.source!==e&&p(!1)})),n.setAttribute("aria-hidden","true"),e.dataset.selectInitialized=!0};document.querySelectorAll("div.select:not([data-select-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches("div.select:not([data-select-initialized])")&&e(t),t.querySelectorAll("div.select:not([data-select-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})(),(()=>{if(!window.history.__basecoatPatched){const e=window.history.pushState;window.history.pushState=function(...t){e.apply(this,t),window.dispatchEvent(new Event("basecoat:locationchange"))};const t=window.history.replaceState;window.history.replaceState=function(...e){t.apply(this,e),window.dispatchEvent(new Event("basecoat:locationchange"))},window.history.__basecoatPatched=!0}const e=e=>{const t="false"!==e.dataset.initialOpen,a="true"===e.dataset.initialMobileOpen,n=parseInt(e.dataset.breakpoint)||768;let r=n>0?window.innerWidth>=n?t:a:t;const i=()=>{const t=window.location.pathname.replace(/\/$/,"");e.querySelectorAll("a").forEach((e=>{if(e.hasAttribute("data-ignore-current"))return;new URL(e.href).pathname.replace(/\/$/,"")===t?e.setAttribute("aria-current","page"):e.removeAttribute("aria-current")}))},o=()=>{e.setAttribute("aria-hidden",!r),r?e.removeAttribute("inert"):e.setAttribute("inert","")},s=e=>{r=e,o()},d=e.id;document.addEventListener("basecoat:sidebar",(e=>{if(!e.detail?.id||e.detail.id===d)switch(e.detail?.action){case"open":s(!0);break;case"close":s(!1);break;default:s(!r)}})),e.addEventListener("click",(t=>{const a=t.target,r=e.querySelector("nav");if(window.innerWidth<n&&a.closest("a, button")&&!a.closest("[data-keep-mobile-sidebar-open]"))return document.activeElement&&document.activeElement.blur(),void s(!1);(a===e||r&&!r.contains(a))&&(document.activeElement&&document.activeElement.blur(),s(!1))})),window.addEventListener("popstate",i),window.addEventListener("basecoat:locationchange",i),o(),i(),e.dataset.sidebarInitialized=!0};document.querySelectorAll(".sidebar:not([data-sidebar-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches(".sidebar:not([data-sidebar-initialized])")&&e(t),t.querySelectorAll(".sidebar:not([data-sidebar-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})(),(()=>{const e=e=>{const t=e.querySelector('[role="tablist"]');if(!t)return;const a=Array.from(t.querySelectorAll('[role="tab"]')),n=a.map((e=>document.getElementById(e.getAttribute("aria-controls")))).filter(Boolean),r=e=>{a.forEach(((e,t)=>{e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1"),n[t]&&(n[t].hidden=!0)})),e.setAttribute("aria-selected","true"),e.setAttribute("tabindex","0");const t=document.getElementById(e.getAttribute("aria-controls"));t&&(t.hidden=!1)};t.addEventListener("click",(e=>{const t=e.target.closest('[role="tab"]');t&&r(t)})),t.addEventListener("keydown",(e=>{const t=e.target;if(!a.includes(t))return;let n;const i=a.indexOf(t);switch(e.key){case"ArrowRight":n=a[(i+1)%a.length];break;case"ArrowLeft":n=a[(i-1+a.length)%a.length];break;case"Home":n=a[0];break;case"End":n=a[a.length-1];break;default:return}e.preventDefault(),r(n),n.focus()})),e.dataset.tabsInitialized=!0};document.querySelectorAll(".tabs:not([data-tabs-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches(".tabs:not([data-tabs-initialized])")&&e(t),t.querySelectorAll(".tabs:not([data-tabs-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})(),(()=>{let e;const t=new WeakMap;let a=!1;const n={success:'<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',error:'<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>',info:'<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',warning:'<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'};function r(t){t.dataset.toasterInitialized||(e=t,e.addEventListener("mouseenter",o),e.addEventListener("mouseleave",s),e.addEventListener("click",(e=>{const t=e.target.closest(".toast footer a"),a=e.target.closest(".toast footer button");(t||a)&&d(e.target.closest(".toast"))})),e.querySelectorAll(".toast:not([data-toast-initialized])").forEach(i),e.dataset.toasterInitialized="true")}function i(e){if(e.dataset.toastInitialized)return;const n=parseInt(e.dataset.duration),r=-1!==n?n||("error"===e.dataset.category?5e3:3e3):-1,i={remainingTime:r,timeoutId:null,startTime:null};-1!==r&&(a?i.timeoutId=null:(i.startTime=Date.now(),i.timeoutId=setTimeout((()=>d(e)),r))),t.set(e,i),e.dataset.toastInitialized="true"}function o(){a||(a=!0,e.querySelectorAll('.toast:not([aria-hidden="true"])').forEach((e=>{if(!t.has(e))return;const a=t.get(e);a.timeoutId&&(clearTimeout(a.timeoutId),a.timeoutId=null,a.remainingTime-=Date.now()-a.startTime)})))}function s(){a&&(a=!1,e.querySelectorAll('.toast:not([aria-hidden="true"])').forEach((e=>{if(!t.has(e))return;const a=t.get(e);-1===a.remainingTime||a.timeoutId||(a.remainingTime>0?(a.startTime=Date.now(),a.timeoutId=setTimeout((()=>d(e)),a.remainingTime)):d(e))})))}function d(e){if(!t.has(e))return;const a=t.get(e);clearTimeout(a.timeoutId),t.delete(e),document.activeElement&&document.activeElement.blur(),e.setAttribute("aria-hidden","true"),e.addEventListener("transitionend",(()=>e.remove()),{once:!0})}const c=document.getElementById("toaster");c&&r(c),document.addEventListener("basecoat:toast",(t=>{if(!e)return void console.error("Cannot create toast: toaster container not found on page.");const a=function(e){const{category:t="info",title:a,description:r,action:i,cancel:o,duration:s,icon:d}=e,c=d||t&&n[t]||"",l=a?`<h2>${a}</h2>`:"",u=r?`<p>${r}</p>`:"",p=i?.href?`<a href="${i.href}" class="btn" data-toast-action>${i.label}</a>`:i?.onclick?`<button type="button" class="btn" data-toast-action onclick="${i.onclick}">${i.label}</button>`:"",h=o?`<button type="button" class="btn-outline h-6 text-xs px-2.5 rounded-sm" data-toast-cancel onclick="${o?.onclick}">${o.label}</button>`:"",v=`\n <div\n class="toast"\n role="${"error"===t?"alert":"status"}"\n aria-atomic="true"\n ${t?`data-category="${t}"`:""}\n ${void 0!==s?`data-duration="${s}"`:""}\n >\n <div class="toast-content">\n ${c}\n <section>\n ${l}\n ${u}\n </section>\n ${p||h?`<footer>${p}${h}</footer>`:""}\n </div>\n </div>\n </div>\n `,b=document.createElement("template");return b.innerHTML=v.trim(),b.content.firstChild}(t.detail?.config||{});e.appendChild(a)}));new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches("#toaster")&&r(t),e&&t.matches(".toast:not([data-toast-initialized])")&&i(t))}))}))})).observe(document.body,{childList:!0,subtree:!0})})();
|