@incursa/ui-kit 1.7.0 → 1.9.0
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/NOTICE +8 -0
- package/README.md +18 -0
- package/dist/icons/index.js +371 -0
- package/dist/icons/package.json +3 -0
- package/dist/inc-design-language.css +115 -1
- package/dist/inc-design-language.css.map +1 -1
- package/dist/inc-design-language.js +1558 -1462
- package/dist/inc-design-language.min.css +1 -1
- package/dist/inc-design-language.min.css.map +1 -1
- package/dist/mcp/components/cards.json +3 -3
- package/dist/mcp/components/metrics.json +3 -3
- package/dist/mcp/components/states.json +3 -3
- package/dist/mcp/examples/data-grid-advanced.json +2 -2
- package/dist/mcp/examples/demo.json +2 -2
- package/dist/mcp/examples/overlay-workflows.json +2 -2
- package/dist/mcp/examples/reference.json +2 -2
- package/dist/mcp/examples/states.json +2 -2
- package/dist/mcp/examples/web-components.json +2 -2
- package/dist/mcp/guides/allowed-web-component-families.json +2 -2
- package/dist/mcp/guides/latest.json +2 -2
- package/dist/mcp/guides/package-metadata.json +2 -2
- package/dist/mcp/guides/update.json +2 -2
- package/dist/mcp/install.json +1 -1
- package/dist/mcp/patterns/data-grid-advanced.json +2 -2
- package/dist/mcp/patterns/demo.json +2 -2
- package/dist/mcp/patterns/overlay-workflows.json +2 -2
- package/dist/mcp/patterns/reference.json +2 -2
- package/dist/mcp/patterns/states.json +2 -2
- package/dist/mcp/patterns/web-components.json +2 -2
- package/dist/mcp/resources.json +81 -78
- package/dist/mcp/search-index.json +22 -22
- package/dist/mcp/update.json +2 -2
- package/dist/mcp/worker.mjs +331 -286
- package/dist/mcp/worker.mjs.map +2 -2
- package/dist/web-components/README.md +7 -0
- package/dist/web-components/RUNTIME-NOTES.md +2 -0
- package/dist/web-components/components/actions.js +149 -2
- package/dist/web-components/components/feedback.js +63 -12
- package/dist/web-components/components/visualizations.js +629 -0
- package/dist/web-components/index.js +3642 -139
- package/package.json +13 -3
- package/src/icons/index.js +229 -0
- package/src/icons/package.json +3 -0
- package/src/inc-design-language.js +12 -11
- package/src/inc-design-language.scss +132 -1
- package/src/web-components/README.md +7 -0
- package/src/web-components/RUNTIME-NOTES.md +2 -0
- package/src/web-components/components/actions.js +149 -2
- package/src/web-components/components/feedback.js +63 -12
- package/src/web-components/components/visualizations.js +629 -0
- package/src/web-components/index.js +8 -0
|
@@ -1,1160 +1,1369 @@
|
|
|
1
|
-
(
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
1
|
+
(() => {
|
|
2
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
3
|
+
var __esm = (fn, res) => function __init() {
|
|
4
|
+
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
5
|
+
};
|
|
6
|
+
var __commonJS = (cb, mod) => function __require() {
|
|
7
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
// node_modules/lucide/dist/esm/defaultAttributes.mjs
|
|
11
|
+
var defaultAttributes;
|
|
12
|
+
var init_defaultAttributes = __esm({
|
|
13
|
+
"node_modules/lucide/dist/esm/defaultAttributes.mjs"() {
|
|
14
|
+
defaultAttributes = {
|
|
15
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
16
|
+
width: 24,
|
|
17
|
+
height: 24,
|
|
18
|
+
viewBox: "0 0 24 24",
|
|
19
|
+
fill: "none",
|
|
20
|
+
stroke: "currentColor",
|
|
21
|
+
"stroke-width": 2,
|
|
22
|
+
"stroke-linecap": "round",
|
|
23
|
+
"stroke-linejoin": "round"
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
// node_modules/lucide/dist/esm/createElement.mjs
|
|
29
|
+
var createSVGElement, createElement;
|
|
30
|
+
var init_createElement = __esm({
|
|
31
|
+
"node_modules/lucide/dist/esm/createElement.mjs"() {
|
|
32
|
+
init_defaultAttributes();
|
|
33
|
+
createSVGElement = ([tag, attrs, children]) => {
|
|
34
|
+
const element = document.createElementNS("http://www.w3.org/2000/svg", tag);
|
|
35
|
+
Object.keys(attrs).forEach((name) => {
|
|
36
|
+
element.setAttribute(name, String(attrs[name]));
|
|
37
|
+
});
|
|
38
|
+
if (children?.length) {
|
|
39
|
+
children.forEach((child) => {
|
|
40
|
+
const childElement = createSVGElement(child);
|
|
41
|
+
element.appendChild(childElement);
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
return element;
|
|
45
|
+
};
|
|
46
|
+
createElement = (iconNode, customAttrs = {}) => {
|
|
47
|
+
const tag = "svg";
|
|
48
|
+
const attrs = {
|
|
49
|
+
...defaultAttributes,
|
|
50
|
+
...customAttrs
|
|
51
|
+
};
|
|
52
|
+
return createSVGElement([tag, attrs, iconNode]);
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
// node_modules/lucide/dist/esm/icons/circle-check.mjs
|
|
58
|
+
var CircleCheck;
|
|
59
|
+
var init_circle_check = __esm({
|
|
60
|
+
"node_modules/lucide/dist/esm/icons/circle-check.mjs"() {
|
|
61
|
+
CircleCheck = [
|
|
62
|
+
["circle", { cx: "12", cy: "12", r: "10" }],
|
|
63
|
+
["path", { d: "m9 12 2 2 4-4" }]
|
|
64
|
+
];
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
// node_modules/lucide/dist/esm/icons/circle-question-mark.mjs
|
|
69
|
+
var CircleQuestionMark;
|
|
70
|
+
var init_circle_question_mark = __esm({
|
|
71
|
+
"node_modules/lucide/dist/esm/icons/circle-question-mark.mjs"() {
|
|
72
|
+
CircleQuestionMark = [
|
|
73
|
+
["circle", { cx: "12", cy: "12", r: "10" }],
|
|
74
|
+
["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }],
|
|
75
|
+
["path", { d: "M12 17h.01" }]
|
|
76
|
+
];
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
// node_modules/lucide/dist/esm/icons/circle-x.mjs
|
|
81
|
+
var CircleX;
|
|
82
|
+
var init_circle_x = __esm({
|
|
83
|
+
"node_modules/lucide/dist/esm/icons/circle-x.mjs"() {
|
|
84
|
+
CircleX = [
|
|
85
|
+
["circle", { cx: "12", cy: "12", r: "10" }],
|
|
86
|
+
["path", { d: "m15 9-6 6" }],
|
|
87
|
+
["path", { d: "m9 9 6 6" }]
|
|
88
|
+
];
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
// node_modules/lucide/dist/esm/icons/download.mjs
|
|
93
|
+
var Download;
|
|
94
|
+
var init_download = __esm({
|
|
95
|
+
"node_modules/lucide/dist/esm/icons/download.mjs"() {
|
|
96
|
+
Download = [
|
|
97
|
+
["path", { d: "M12 15V3" }],
|
|
98
|
+
["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }],
|
|
99
|
+
["path", { d: "m7 10 5 5 5-5" }]
|
|
100
|
+
];
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
// node_modules/lucide/dist/esm/icons/external-link.mjs
|
|
105
|
+
var ExternalLink;
|
|
106
|
+
var init_external_link = __esm({
|
|
107
|
+
"node_modules/lucide/dist/esm/icons/external-link.mjs"() {
|
|
108
|
+
ExternalLink = [
|
|
109
|
+
["path", { d: "M15 3h6v6" }],
|
|
110
|
+
["path", { d: "M10 14 21 3" }],
|
|
111
|
+
["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }]
|
|
112
|
+
];
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
|
|
116
|
+
// node_modules/lucide/dist/esm/icons/file-text.mjs
|
|
117
|
+
var FileText;
|
|
118
|
+
var init_file_text = __esm({
|
|
119
|
+
"node_modules/lucide/dist/esm/icons/file-text.mjs"() {
|
|
120
|
+
FileText = [
|
|
121
|
+
[
|
|
122
|
+
"path",
|
|
123
|
+
{
|
|
124
|
+
d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
|
|
125
|
+
}
|
|
126
|
+
],
|
|
127
|
+
["path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }],
|
|
128
|
+
["path", { d: "M10 9H8" }],
|
|
129
|
+
["path", { d: "M16 13H8" }],
|
|
130
|
+
["path", { d: "M16 17H8" }]
|
|
131
|
+
];
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
// node_modules/lucide/dist/esm/icons/folder-plus.mjs
|
|
136
|
+
var FolderPlus;
|
|
137
|
+
var init_folder_plus = __esm({
|
|
138
|
+
"node_modules/lucide/dist/esm/icons/folder-plus.mjs"() {
|
|
139
|
+
FolderPlus = [
|
|
140
|
+
["path", { d: "M12 10v6" }],
|
|
141
|
+
["path", { d: "M9 13h6" }],
|
|
142
|
+
[
|
|
143
|
+
"path",
|
|
144
|
+
{
|
|
145
|
+
d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
|
|
146
|
+
}
|
|
147
|
+
]
|
|
148
|
+
];
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
|
|
152
|
+
// node_modules/lucide/dist/esm/icons/info.mjs
|
|
153
|
+
var Info;
|
|
154
|
+
var init_info = __esm({
|
|
155
|
+
"node_modules/lucide/dist/esm/icons/info.mjs"() {
|
|
156
|
+
Info = [
|
|
157
|
+
["circle", { cx: "12", cy: "12", r: "10" }],
|
|
158
|
+
["path", { d: "M12 16v-4" }],
|
|
159
|
+
["path", { d: "M12 8h.01" }]
|
|
160
|
+
];
|
|
161
|
+
}
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
// node_modules/lucide/dist/esm/icons/lock.mjs
|
|
165
|
+
var Lock;
|
|
166
|
+
var init_lock = __esm({
|
|
167
|
+
"node_modules/lucide/dist/esm/icons/lock.mjs"() {
|
|
168
|
+
Lock = [
|
|
169
|
+
["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }],
|
|
170
|
+
["path", { d: "M7 11V7a5 5 0 0 1 10 0v4" }]
|
|
171
|
+
];
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
// node_modules/lucide/dist/esm/icons/pause.mjs
|
|
176
|
+
var Pause;
|
|
177
|
+
var init_pause = __esm({
|
|
178
|
+
"node_modules/lucide/dist/esm/icons/pause.mjs"() {
|
|
179
|
+
Pause = [
|
|
180
|
+
["rect", { x: "14", y: "3", width: "5", height: "18", rx: "1" }],
|
|
181
|
+
["rect", { x: "5", y: "3", width: "5", height: "18", rx: "1" }]
|
|
182
|
+
];
|
|
183
|
+
}
|
|
184
|
+
});
|
|
185
|
+
|
|
186
|
+
// node_modules/lucide/dist/esm/icons/play.mjs
|
|
187
|
+
var Play;
|
|
188
|
+
var init_play = __esm({
|
|
189
|
+
"node_modules/lucide/dist/esm/icons/play.mjs"() {
|
|
190
|
+
Play = [
|
|
191
|
+
[
|
|
192
|
+
"path",
|
|
193
|
+
{ d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" }
|
|
194
|
+
]
|
|
195
|
+
];
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
|
|
199
|
+
// node_modules/lucide/dist/esm/icons/refresh-cw.mjs
|
|
200
|
+
var RefreshCw;
|
|
201
|
+
var init_refresh_cw = __esm({
|
|
202
|
+
"node_modules/lucide/dist/esm/icons/refresh-cw.mjs"() {
|
|
203
|
+
RefreshCw = [
|
|
204
|
+
["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }],
|
|
205
|
+
["path", { d: "M21 3v5h-5" }],
|
|
206
|
+
["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }],
|
|
207
|
+
["path", { d: "M8 16H3v5" }]
|
|
208
|
+
];
|
|
209
|
+
}
|
|
210
|
+
});
|
|
211
|
+
|
|
212
|
+
// node_modules/lucide/dist/esm/icons/search-x.mjs
|
|
213
|
+
var SearchX;
|
|
214
|
+
var init_search_x = __esm({
|
|
215
|
+
"node_modules/lucide/dist/esm/icons/search-x.mjs"() {
|
|
216
|
+
SearchX = [
|
|
217
|
+
["path", { d: "m13.5 8.5-5 5" }],
|
|
218
|
+
["path", { d: "m8.5 8.5 5 5" }],
|
|
219
|
+
["circle", { cx: "11", cy: "11", r: "8" }],
|
|
220
|
+
["path", { d: "m21 21-4.3-4.3" }]
|
|
221
|
+
];
|
|
222
|
+
}
|
|
223
|
+
});
|
|
224
|
+
|
|
225
|
+
// node_modules/lucide/dist/esm/icons/settings.mjs
|
|
226
|
+
var Settings;
|
|
227
|
+
var init_settings = __esm({
|
|
228
|
+
"node_modules/lucide/dist/esm/icons/settings.mjs"() {
|
|
229
|
+
Settings = [
|
|
230
|
+
[
|
|
231
|
+
"path",
|
|
232
|
+
{
|
|
233
|
+
d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
|
|
234
|
+
}
|
|
235
|
+
],
|
|
236
|
+
["circle", { cx: "12", cy: "12", r: "3" }]
|
|
237
|
+
];
|
|
238
|
+
}
|
|
239
|
+
});
|
|
240
|
+
|
|
241
|
+
// node_modules/lucide/dist/esm/icons/shield-check.mjs
|
|
242
|
+
var ShieldCheck;
|
|
243
|
+
var init_shield_check = __esm({
|
|
244
|
+
"node_modules/lucide/dist/esm/icons/shield-check.mjs"() {
|
|
245
|
+
ShieldCheck = [
|
|
246
|
+
[
|
|
247
|
+
"path",
|
|
248
|
+
{
|
|
249
|
+
d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
|
|
250
|
+
}
|
|
251
|
+
],
|
|
252
|
+
["path", { d: "m9 12 2 2 4-4" }]
|
|
253
|
+
];
|
|
254
|
+
}
|
|
255
|
+
});
|
|
256
|
+
|
|
257
|
+
// node_modules/lucide/dist/esm/icons/triangle-alert.mjs
|
|
258
|
+
var TriangleAlert;
|
|
259
|
+
var init_triangle_alert = __esm({
|
|
260
|
+
"node_modules/lucide/dist/esm/icons/triangle-alert.mjs"() {
|
|
261
|
+
TriangleAlert = [
|
|
262
|
+
["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" }],
|
|
263
|
+
["path", { d: "M12 9v4" }],
|
|
264
|
+
["path", { d: "M12 17h.01" }]
|
|
265
|
+
];
|
|
266
|
+
}
|
|
267
|
+
});
|
|
268
|
+
|
|
269
|
+
// node_modules/lucide/dist/esm/icons/upload.mjs
|
|
270
|
+
var Upload;
|
|
271
|
+
var init_upload = __esm({
|
|
272
|
+
"node_modules/lucide/dist/esm/icons/upload.mjs"() {
|
|
273
|
+
Upload = [
|
|
274
|
+
["path", { d: "M12 3v12" }],
|
|
275
|
+
["path", { d: "m17 8-5-5-5 5" }],
|
|
276
|
+
["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }]
|
|
277
|
+
];
|
|
278
|
+
}
|
|
279
|
+
});
|
|
280
|
+
|
|
281
|
+
// src/icons/index.js
|
|
282
|
+
function getNamespace() {
|
|
283
|
+
if (typeof globalThis === "undefined") {
|
|
284
|
+
return null;
|
|
285
|
+
}
|
|
286
|
+
const root = globalThis.IncWebComponents || (globalThis.IncWebComponents = {});
|
|
287
|
+
const icons = root.icons || (root.icons = {});
|
|
288
|
+
if (!icons.names) {
|
|
289
|
+
icons.names = ICON_NAMES;
|
|
290
|
+
}
|
|
291
|
+
if (!icons.defaultRenderer) {
|
|
292
|
+
icons.defaultRenderer = renderDefaultIcon;
|
|
293
|
+
}
|
|
294
|
+
if (!icons.render) {
|
|
295
|
+
icons.render = renderIncIcon;
|
|
296
|
+
}
|
|
297
|
+
if (!icons.setRenderer) {
|
|
298
|
+
icons.setRenderer = setIconRenderer;
|
|
299
|
+
}
|
|
300
|
+
return icons;
|
|
301
|
+
}
|
|
302
|
+
function normalizeIconName(name) {
|
|
303
|
+
return String(name || "").trim().toLowerCase().replace(/[_\s]+/g, "-");
|
|
304
|
+
}
|
|
305
|
+
function normalizeSize(value) {
|
|
306
|
+
const parsed = Number.parseFloat(value);
|
|
307
|
+
return Number.isFinite(parsed) && parsed > 0 ? parsed : DEFAULT_SIZE;
|
|
308
|
+
}
|
|
309
|
+
function buildIconAttributes(name, options = {}) {
|
|
310
|
+
const size = normalizeSize(options.size);
|
|
311
|
+
const className = options.className || "inc-icon";
|
|
312
|
+
const attrs = {
|
|
313
|
+
width: size,
|
|
314
|
+
height: size,
|
|
315
|
+
"data-inc-icon": name,
|
|
316
|
+
class: className,
|
|
317
|
+
focusable: "false"
|
|
54
318
|
};
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
319
|
+
if (options.decorative !== false) {
|
|
320
|
+
attrs["aria-hidden"] = "true";
|
|
321
|
+
} else {
|
|
322
|
+
attrs.role = "img";
|
|
323
|
+
attrs["aria-label"] = options.label || name;
|
|
324
|
+
}
|
|
325
|
+
return attrs;
|
|
326
|
+
}
|
|
327
|
+
function renderDefaultIcon(name, options = {}) {
|
|
328
|
+
const normalizedName = normalizeIconName(name);
|
|
329
|
+
const iconNode = ICON_NODES[normalizedName] || ICON_NODES.info;
|
|
330
|
+
if (typeof document === "undefined") {
|
|
331
|
+
return "";
|
|
332
|
+
}
|
|
333
|
+
return createElement(iconNode, buildIconAttributes(normalizedName, options));
|
|
334
|
+
}
|
|
335
|
+
function coerceIconResult(result) {
|
|
336
|
+
if (!result || typeof document === "undefined") {
|
|
337
|
+
return null;
|
|
338
|
+
}
|
|
339
|
+
if (result instanceof Node) {
|
|
340
|
+
return result;
|
|
341
|
+
}
|
|
342
|
+
if (typeof result === "string") {
|
|
343
|
+
const template = document.createElement("template");
|
|
344
|
+
template.innerHTML = result.trim();
|
|
345
|
+
return template.content.firstElementChild || null;
|
|
346
|
+
}
|
|
347
|
+
return null;
|
|
348
|
+
}
|
|
349
|
+
function getIconRenderer() {
|
|
350
|
+
const namespace = getNamespace();
|
|
351
|
+
return typeof namespace?.renderer === "function" ? namespace.renderer : renderDefaultIcon;
|
|
352
|
+
}
|
|
353
|
+
function setIconRenderer(renderer) {
|
|
354
|
+
const namespace = getNamespace();
|
|
355
|
+
if (!namespace) {
|
|
356
|
+
return null;
|
|
357
|
+
}
|
|
358
|
+
if (renderer == null) {
|
|
359
|
+
delete namespace.renderer;
|
|
360
|
+
return null;
|
|
361
|
+
}
|
|
362
|
+
if (typeof renderer !== "function") {
|
|
363
|
+
throw new TypeError("Inc icon renderer must be a function.");
|
|
364
|
+
}
|
|
365
|
+
namespace.renderer = renderer;
|
|
366
|
+
return renderer;
|
|
367
|
+
}
|
|
368
|
+
function renderIncIcon(name, options = {}) {
|
|
369
|
+
const normalizedName = normalizeIconName(name) || "info";
|
|
370
|
+
const renderer = getIconRenderer();
|
|
371
|
+
const rendered = renderer(normalizedName, options);
|
|
372
|
+
const icon = coerceIconResult(rendered) || coerceIconResult(renderDefaultIcon(normalizedName, options));
|
|
373
|
+
if (icon instanceof Element && options.decorative !== false) {
|
|
374
|
+
icon.setAttribute("aria-hidden", "true");
|
|
375
|
+
icon.removeAttribute("aria-label");
|
|
376
|
+
icon.removeAttribute("role");
|
|
377
|
+
}
|
|
378
|
+
return icon;
|
|
379
|
+
}
|
|
380
|
+
function replaceIconContents(container, name, options = {}) {
|
|
381
|
+
if (!(container instanceof Element)) {
|
|
382
|
+
return null;
|
|
383
|
+
}
|
|
384
|
+
container.replaceChildren();
|
|
385
|
+
const icon = renderIncIcon(name, options);
|
|
386
|
+
if (icon) {
|
|
387
|
+
icon.setAttribute("data-inc-generated-icon", "true");
|
|
388
|
+
icon.setAttribute("data-inc-icon-upgraded", "true");
|
|
389
|
+
container.append(icon);
|
|
390
|
+
}
|
|
391
|
+
return icon;
|
|
392
|
+
}
|
|
393
|
+
function upgradeIconPlaceholders(root = typeof document !== "undefined" ? document : null) {
|
|
394
|
+
if (!root || typeof root.querySelectorAll !== "function") {
|
|
395
|
+
return [];
|
|
396
|
+
}
|
|
397
|
+
const upgraded = [];
|
|
398
|
+
root.querySelectorAll("[data-inc-icon]").forEach((node) => {
|
|
399
|
+
if (!(node instanceof Element)) {
|
|
400
|
+
return;
|
|
401
|
+
}
|
|
402
|
+
const name = node.getAttribute("data-inc-icon");
|
|
403
|
+
if (!name || node.hasAttribute("data-inc-icon-upgraded") || node.hasAttribute("data-inc-generated-icon")) {
|
|
404
|
+
return;
|
|
405
|
+
}
|
|
406
|
+
replaceIconContents(node, name, {
|
|
407
|
+
className: node.getAttribute("data-inc-icon-class") || "inc-icon",
|
|
408
|
+
decorative: node.getAttribute("aria-hidden") !== "false",
|
|
409
|
+
label: node.getAttribute("aria-label") || void 0,
|
|
410
|
+
size: node.getAttribute("data-inc-icon-size") || void 0
|
|
411
|
+
});
|
|
412
|
+
node.setAttribute("data-inc-icon-upgraded", "true");
|
|
413
|
+
upgraded.push(node);
|
|
414
|
+
});
|
|
415
|
+
return upgraded;
|
|
416
|
+
}
|
|
417
|
+
var ICON_NODES, ICON_NAMES, DEFAULT_SIZE;
|
|
418
|
+
var init_icons = __esm({
|
|
419
|
+
"src/icons/index.js"() {
|
|
420
|
+
init_createElement();
|
|
421
|
+
init_circle_check();
|
|
422
|
+
init_circle_question_mark();
|
|
423
|
+
init_circle_x();
|
|
424
|
+
init_download();
|
|
425
|
+
init_external_link();
|
|
426
|
+
init_file_text();
|
|
427
|
+
init_folder_plus();
|
|
428
|
+
init_info();
|
|
429
|
+
init_lock();
|
|
430
|
+
init_pause();
|
|
431
|
+
init_play();
|
|
432
|
+
init_refresh_cw();
|
|
433
|
+
init_search_x();
|
|
434
|
+
init_settings();
|
|
435
|
+
init_shield_check();
|
|
436
|
+
init_triangle_alert();
|
|
437
|
+
init_upload();
|
|
438
|
+
ICON_NODES = Object.freeze({
|
|
439
|
+
info: Info,
|
|
440
|
+
help: CircleQuestionMark,
|
|
441
|
+
success: CircleCheck,
|
|
442
|
+
warning: TriangleAlert,
|
|
443
|
+
error: CircleX,
|
|
444
|
+
upload: Upload,
|
|
445
|
+
document: FileText,
|
|
446
|
+
download: Download,
|
|
447
|
+
settings: Settings,
|
|
448
|
+
"external-link": ExternalLink,
|
|
449
|
+
empty: FolderPlus,
|
|
450
|
+
"no-results": SearchX,
|
|
451
|
+
loading: RefreshCw,
|
|
452
|
+
lock: Lock,
|
|
453
|
+
pause: Pause,
|
|
454
|
+
play: Play,
|
|
455
|
+
permission: ShieldCheck
|
|
456
|
+
});
|
|
457
|
+
ICON_NAMES = Object.freeze(Object.keys(ICON_NODES));
|
|
458
|
+
DEFAULT_SIZE = 16;
|
|
459
|
+
getNamespace();
|
|
460
|
+
}
|
|
461
|
+
});
|
|
462
|
+
|
|
463
|
+
// src/inc-design-language.js
|
|
464
|
+
var require_inc_design_language = __commonJS({
|
|
465
|
+
"src/inc-design-language.js"() {
|
|
466
|
+
init_icons();
|
|
467
|
+
(function() {
|
|
468
|
+
"use strict";
|
|
469
|
+
const selectors = {
|
|
470
|
+
menuToggle: '[data-inc-toggle="menu"]',
|
|
471
|
+
menu: ".inc-dropdown__menu",
|
|
472
|
+
collapseToggle: '[data-inc-toggle="collapse"]',
|
|
473
|
+
tabToggle: '[data-inc-toggle="tab"]',
|
|
474
|
+
themeMode: "[data-inc-theme-mode]:not(html)",
|
|
475
|
+
themeToggle: "[data-inc-theme-toggle]",
|
|
476
|
+
themeSelect: "[data-inc-theme-select]",
|
|
477
|
+
themeLabel: "[data-inc-theme-label]",
|
|
478
|
+
themeSwitcher: "[data-inc-theme-switcher], details.inc-theme-switcher",
|
|
479
|
+
nativeDialogOpen: "[data-inc-native-dialog-open]",
|
|
480
|
+
icon: "[data-inc-icon]",
|
|
481
|
+
autoRefresh: "[data-inc-auto-refresh]",
|
|
482
|
+
autoRefreshToggle: '[data-inc-action="auto-refresh-toggle"]',
|
|
483
|
+
fileExample: "[data-inc-file-example]",
|
|
484
|
+
fileDropzone: "[data-inc-file-dropzone]",
|
|
485
|
+
fileInput: "[data-inc-file-input]",
|
|
486
|
+
fileBrowse: "[data-inc-file-browse]",
|
|
487
|
+
fileList: "[data-inc-file-list]",
|
|
488
|
+
fileRemove: '[data-inc-action="file-remove"]',
|
|
489
|
+
modalToggle: '[data-inc-toggle="modal"]',
|
|
490
|
+
modalDismiss: '[data-inc-dismiss="modal"]',
|
|
491
|
+
offcanvasToggle: '[data-inc-toggle="offcanvas"]',
|
|
492
|
+
offcanvasDismiss: '[data-inc-dismiss="offcanvas"]',
|
|
493
|
+
userMenu: ".inc-user-menu",
|
|
494
|
+
tabPane: ".inc-tab-pane",
|
|
495
|
+
modal: ".inc-modal",
|
|
496
|
+
offcanvas: ".inc-offcanvas"
|
|
497
|
+
};
|
|
498
|
+
const focusableSelector = [
|
|
499
|
+
"a[href]",
|
|
500
|
+
"button:not([disabled])",
|
|
501
|
+
'input:not([disabled]):not([type="hidden"])',
|
|
502
|
+
"select:not([disabled])",
|
|
503
|
+
"textarea:not([disabled])",
|
|
504
|
+
'[tabindex]:not([tabindex="-1"])'
|
|
505
|
+
].join(", ");
|
|
506
|
+
const autoRefreshControllers = [];
|
|
507
|
+
let autoRefreshReloadScheduled = false;
|
|
508
|
+
const themeModes = ["light", "dark", "system"];
|
|
509
|
+
const themeDescriptions = {
|
|
510
|
+
light: "Use the brighter application palette.",
|
|
511
|
+
dark: "Use the darker application palette.",
|
|
512
|
+
system: "Match the device preference automatically."
|
|
513
|
+
};
|
|
514
|
+
const themeStorageKey = "inc-theme-mode";
|
|
515
|
+
const themeState = {
|
|
516
|
+
mode: "system",
|
|
517
|
+
resolved: "light"
|
|
518
|
+
};
|
|
519
|
+
let themeMediaQuery = null;
|
|
520
|
+
let themeMediaListenerBound = false;
|
|
521
|
+
let themeStorageListenerBound = false;
|
|
522
|
+
let themeInitialized = false;
|
|
523
|
+
function isThemeMode(value) {
|
|
524
|
+
return themeModes.includes(value);
|
|
525
|
+
}
|
|
526
|
+
function getThemeLabel(mode) {
|
|
527
|
+
if (!isThemeMode(mode)) {
|
|
66
528
|
return "System";
|
|
529
|
+
}
|
|
530
|
+
return mode.charAt(0).toUpperCase() + mode.slice(1);
|
|
67
531
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
return mode === "system"
|
|
74
|
-
? `${getThemeLabel(mode)} (${getThemeLabel(resolved)})`
|
|
75
|
-
: getThemeLabel(mode);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
function getStoredThemeMode() {
|
|
79
|
-
try {
|
|
532
|
+
function getThemeStatusLabel(mode = themeState.mode, resolved = themeState.resolved) {
|
|
533
|
+
return mode === "system" ? `${getThemeLabel(mode)} (${getThemeLabel(resolved)})` : getThemeLabel(mode);
|
|
534
|
+
}
|
|
535
|
+
function getStoredThemeMode() {
|
|
536
|
+
try {
|
|
80
537
|
const stored = window.localStorage.getItem(themeStorageKey);
|
|
81
538
|
return isThemeMode(stored) ? stored : null;
|
|
82
|
-
|
|
539
|
+
} catch {
|
|
83
540
|
return null;
|
|
541
|
+
}
|
|
84
542
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|| root.dataset.incThemeMode
|
|
92
|
-
|| root.getAttribute("data-bs-theme")
|
|
93
|
-
|| "system";
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
function persistThemeMode(mode) {
|
|
97
|
-
try {
|
|
543
|
+
function getConfiguredThemeMode() {
|
|
544
|
+
const root = document.documentElement;
|
|
545
|
+
return root.getAttribute("data-inc-theme-mode") || root.dataset.incThemeMode || root.getAttribute("data-bs-theme") || "system";
|
|
546
|
+
}
|
|
547
|
+
function persistThemeMode(mode) {
|
|
548
|
+
try {
|
|
98
549
|
if (mode === "system") {
|
|
99
|
-
|
|
100
|
-
|
|
550
|
+
window.localStorage.removeItem(themeStorageKey);
|
|
551
|
+
return;
|
|
101
552
|
}
|
|
102
|
-
|
|
103
553
|
window.localStorage.setItem(themeStorageKey, mode);
|
|
104
|
-
|
|
105
|
-
|
|
554
|
+
} catch {
|
|
555
|
+
}
|
|
106
556
|
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
function getSystemTheme() {
|
|
110
|
-
if (!window.matchMedia) {
|
|
557
|
+
function getSystemTheme() {
|
|
558
|
+
if (!window.matchMedia) {
|
|
111
559
|
return "light";
|
|
560
|
+
}
|
|
561
|
+
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
112
562
|
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
return mode === "system" ? getSystemTheme() : mode;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
function syncThemeControls(mode, resolved) {
|
|
122
|
-
document.querySelectorAll(selectors.themeMode).forEach((control) => {
|
|
563
|
+
function resolveThemeMode(mode) {
|
|
564
|
+
return mode === "system" ? getSystemTheme() : mode;
|
|
565
|
+
}
|
|
566
|
+
function syncThemeControls(mode, resolved) {
|
|
567
|
+
document.querySelectorAll(selectors.themeMode).forEach((control) => {
|
|
123
568
|
if (!(control instanceof HTMLElement)) {
|
|
124
|
-
|
|
569
|
+
return;
|
|
125
570
|
}
|
|
126
|
-
|
|
127
571
|
const controlMode = control.getAttribute("data-inc-theme-mode");
|
|
128
572
|
const isSelected = controlMode === mode;
|
|
129
573
|
const role = control.getAttribute("role");
|
|
130
|
-
|
|
131
574
|
control.classList.toggle("active", isSelected);
|
|
132
575
|
control.classList.toggle("is-selected", isSelected);
|
|
133
|
-
|
|
134
576
|
if (role === "menuitemradio" || role === "radio") {
|
|
135
|
-
|
|
577
|
+
control.setAttribute("aria-checked", isSelected ? "true" : "false");
|
|
136
578
|
} else if (control.tagName === "BUTTON" || control.tagName === "A") {
|
|
137
|
-
|
|
579
|
+
control.setAttribute("aria-pressed", isSelected ? "true" : "false");
|
|
138
580
|
}
|
|
139
|
-
|
|
140
581
|
if (control.tagName === "INPUT" && (control.type === "radio" || control.type === "checkbox")) {
|
|
141
|
-
|
|
582
|
+
control.checked = isSelected;
|
|
142
583
|
}
|
|
143
|
-
|
|
144
584
|
if (control.tagName === "OPTION") {
|
|
145
|
-
|
|
585
|
+
control.selected = isSelected;
|
|
146
586
|
}
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
document.querySelectorAll(selectors.themeSelect).forEach((control) => {
|
|
587
|
+
});
|
|
588
|
+
document.querySelectorAll(selectors.themeSelect).forEach((control) => {
|
|
150
589
|
if (control instanceof HTMLSelectElement) {
|
|
151
|
-
|
|
590
|
+
control.value = mode;
|
|
152
591
|
}
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
document.querySelectorAll(selectors.themeLabel).forEach((label) => {
|
|
592
|
+
});
|
|
593
|
+
document.querySelectorAll(selectors.themeLabel).forEach((label) => {
|
|
156
594
|
if (!(label instanceof HTMLElement)) {
|
|
157
|
-
|
|
595
|
+
return;
|
|
158
596
|
}
|
|
159
|
-
|
|
160
597
|
const labelType = label.getAttribute("data-inc-theme-label") || "status";
|
|
161
|
-
|
|
162
598
|
if (labelType === "resolved") {
|
|
163
|
-
|
|
164
|
-
|
|
599
|
+
label.textContent = getThemeLabel(resolved);
|
|
600
|
+
return;
|
|
165
601
|
}
|
|
166
|
-
|
|
167
602
|
if (labelType === "mode") {
|
|
168
|
-
|
|
169
|
-
|
|
603
|
+
label.textContent = getThemeLabel(mode);
|
|
604
|
+
return;
|
|
170
605
|
}
|
|
171
|
-
|
|
172
606
|
label.textContent = getThemeStatusLabel(mode, resolved);
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
document.querySelectorAll(selectors.themeSwitcher).forEach((switcher) => {
|
|
607
|
+
});
|
|
608
|
+
document.querySelectorAll(selectors.themeSwitcher).forEach((switcher) => {
|
|
176
609
|
if (!(switcher instanceof HTMLElement)) {
|
|
177
|
-
|
|
610
|
+
return;
|
|
178
611
|
}
|
|
179
|
-
|
|
180
612
|
switcher.dataset.incThemeModeState = mode;
|
|
181
613
|
switcher.dataset.incThemeResolved = resolved;
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
document.documentElement.dispatchEvent(new CustomEvent("inc-theme-change", {
|
|
614
|
+
});
|
|
615
|
+
}
|
|
616
|
+
function publishThemeChange() {
|
|
617
|
+
document.documentElement.dispatchEvent(new CustomEvent("inc-theme-change", {
|
|
187
618
|
bubbles: true,
|
|
188
619
|
composed: true,
|
|
189
620
|
detail: {
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
root.dataset.incThemeModeState = nextMode;
|
|
208
|
-
root.dataset.incThemeResolved = resolved;
|
|
209
|
-
|
|
210
|
-
if (options.persist !== false) {
|
|
621
|
+
mode: themeState.mode,
|
|
622
|
+
resolved: themeState.resolved
|
|
623
|
+
}
|
|
624
|
+
}));
|
|
625
|
+
}
|
|
626
|
+
function applyThemeMode(mode, options = {}) {
|
|
627
|
+
const nextMode = isThemeMode(mode) ? mode : "system";
|
|
628
|
+
const resolved = resolveThemeMode(nextMode);
|
|
629
|
+
const root = document.documentElement;
|
|
630
|
+
themeState.mode = nextMode;
|
|
631
|
+
themeState.resolved = resolved;
|
|
632
|
+
root.setAttribute("data-inc-theme-mode", nextMode);
|
|
633
|
+
root.setAttribute("data-bs-theme", resolved);
|
|
634
|
+
root.style.colorScheme = resolved;
|
|
635
|
+
root.dataset.incThemeModeState = nextMode;
|
|
636
|
+
root.dataset.incThemeResolved = resolved;
|
|
637
|
+
if (options.persist !== false) {
|
|
211
638
|
persistThemeMode(nextMode);
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
if (options.syncControls !== false) {
|
|
639
|
+
}
|
|
640
|
+
if (options.syncControls !== false) {
|
|
215
641
|
syncThemeControls(nextMode, resolved);
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
if (options.dispatch !== false) {
|
|
642
|
+
}
|
|
643
|
+
if (options.dispatch !== false) {
|
|
219
644
|
publishThemeChange();
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
const switcher = document.createElement("details");
|
|
257
|
-
const summary = document.createElement("summary");
|
|
258
|
-
const meta = document.createElement("span");
|
|
259
|
-
const label = document.createElement("span");
|
|
260
|
-
const status = document.createElement("span");
|
|
261
|
-
const panel = document.createElement("div");
|
|
262
|
-
const header = document.createElement("div");
|
|
263
|
-
|
|
264
|
-
switcher.className = "inc-native-menu inc-theme-switcher";
|
|
265
|
-
|
|
266
|
-
if (options.variant === "navbar") {
|
|
645
|
+
}
|
|
646
|
+
return themeState;
|
|
647
|
+
}
|
|
648
|
+
function cycleThemeMode() {
|
|
649
|
+
const currentIndex = themeModes.indexOf(themeState.mode);
|
|
650
|
+
const nextMode = themeModes[(currentIndex + 1) % themeModes.length];
|
|
651
|
+
return applyThemeMode(nextMode);
|
|
652
|
+
}
|
|
653
|
+
function createThemeSwitcherOption(mode) {
|
|
654
|
+
const button = document.createElement("button");
|
|
655
|
+
const body = document.createElement("span");
|
|
656
|
+
const label = document.createElement("span");
|
|
657
|
+
const detail = document.createElement("span");
|
|
658
|
+
button.type = "button";
|
|
659
|
+
button.className = "inc-theme-switcher__option";
|
|
660
|
+
button.setAttribute("data-inc-theme-mode", mode);
|
|
661
|
+
button.setAttribute("role", "menuitemradio");
|
|
662
|
+
body.className = "inc-theme-switcher__option-body";
|
|
663
|
+
label.className = "inc-theme-switcher__option-label";
|
|
664
|
+
label.textContent = getThemeLabel(mode);
|
|
665
|
+
detail.className = "inc-theme-switcher__option-detail";
|
|
666
|
+
detail.textContent = themeDescriptions[mode];
|
|
667
|
+
body.append(label, detail);
|
|
668
|
+
button.append(body);
|
|
669
|
+
return button;
|
|
670
|
+
}
|
|
671
|
+
function createThemeSwitcher(options = {}) {
|
|
672
|
+
const switcher = document.createElement("details");
|
|
673
|
+
const summary = document.createElement("summary");
|
|
674
|
+
const meta = document.createElement("span");
|
|
675
|
+
const label = document.createElement("span");
|
|
676
|
+
const status = document.createElement("span");
|
|
677
|
+
const panel = document.createElement("div");
|
|
678
|
+
const header = document.createElement("div");
|
|
679
|
+
switcher.className = "inc-native-menu inc-theme-switcher";
|
|
680
|
+
if (options.variant === "navbar") {
|
|
267
681
|
switcher.classList.add("inc-native-menu--navbar");
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
if (options.block) {
|
|
682
|
+
}
|
|
683
|
+
if (options.block) {
|
|
271
684
|
switcher.classList.add("inc-native-menu--block");
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
header.textContent = options.heading || "Choose appearance";
|
|
290
|
-
panel.append(header);
|
|
291
|
-
|
|
292
|
-
themeModes.forEach((mode) => {
|
|
685
|
+
}
|
|
686
|
+
summary.className = "inc-native-menu__summary inc-theme-switcher__summary";
|
|
687
|
+
meta.className = "inc-theme-switcher__meta";
|
|
688
|
+
label.className = "inc-theme-switcher__label";
|
|
689
|
+
label.textContent = options.label || "Theme";
|
|
690
|
+
status.className = "inc-theme-switcher__status";
|
|
691
|
+
status.setAttribute("data-inc-theme-label", "status");
|
|
692
|
+
status.textContent = getThemeStatusLabel();
|
|
693
|
+
meta.append(label, status);
|
|
694
|
+
summary.append(meta);
|
|
695
|
+
panel.className = "inc-native-menu__panel inc-theme-switcher__panel";
|
|
696
|
+
panel.setAttribute("role", "menu");
|
|
697
|
+
panel.setAttribute("aria-label", options.menuLabel || "Theme");
|
|
698
|
+
header.className = "inc-native-menu__header";
|
|
699
|
+
header.textContent = options.heading || "Choose appearance";
|
|
700
|
+
panel.append(header);
|
|
701
|
+
themeModes.forEach((mode) => {
|
|
293
702
|
panel.append(createThemeSwitcherOption(mode));
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
function mountThemeSwitcher(target, options = {}) {
|
|
303
|
-
let host = target;
|
|
304
|
-
|
|
305
|
-
if (typeof target === "string") {
|
|
703
|
+
});
|
|
704
|
+
switcher.append(summary, panel);
|
|
705
|
+
syncThemeControls(themeState.mode, themeState.resolved);
|
|
706
|
+
return switcher;
|
|
707
|
+
}
|
|
708
|
+
function mountThemeSwitcher(target, options = {}) {
|
|
709
|
+
let host = target;
|
|
710
|
+
if (typeof target === "string") {
|
|
306
711
|
host = document.querySelector(target);
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
if (!(host instanceof HTMLElement)) {
|
|
712
|
+
}
|
|
713
|
+
if (!(host instanceof HTMLElement)) {
|
|
310
714
|
return null;
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
function getThemeSwitcherOptions(control) {
|
|
321
|
-
const panel = control.closest(".inc-theme-switcher__panel");
|
|
322
|
-
|
|
323
|
-
if (!panel) {
|
|
715
|
+
}
|
|
716
|
+
const switcher = createThemeSwitcher(options);
|
|
717
|
+
host.replaceChildren(switcher);
|
|
718
|
+
syncThemeControls(themeState.mode, themeState.resolved);
|
|
719
|
+
return switcher;
|
|
720
|
+
}
|
|
721
|
+
function getThemeSwitcherOptions(control) {
|
|
722
|
+
const panel = control.closest(".inc-theme-switcher__panel");
|
|
723
|
+
if (!panel) {
|
|
324
724
|
return [];
|
|
725
|
+
}
|
|
726
|
+
return Array.from(panel.querySelectorAll(selectors.themeMode)).filter((option) => option.closest(".inc-theme-switcher__panel") === panel);
|
|
325
727
|
}
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
function focusThemeSwitcherOption(control, direction) {
|
|
331
|
-
const options = getThemeSwitcherOptions(control);
|
|
332
|
-
|
|
333
|
-
if (!options.length) {
|
|
728
|
+
function focusThemeSwitcherOption(control, direction) {
|
|
729
|
+
const options = getThemeSwitcherOptions(control);
|
|
730
|
+
if (!options.length) {
|
|
334
731
|
return;
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
if (direction === "first") {
|
|
732
|
+
}
|
|
733
|
+
const activeIndex = options.findIndex((option) => option === control);
|
|
734
|
+
if (direction === "first") {
|
|
340
735
|
options[0]?.focus();
|
|
341
736
|
return;
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
if (direction === "last") {
|
|
737
|
+
}
|
|
738
|
+
if (direction === "last") {
|
|
345
739
|
options[options.length - 1]?.focus();
|
|
346
740
|
return;
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
function initializeThemeSwitchers() {
|
|
356
|
-
document.querySelectorAll(selectors.themeSwitcher).forEach((switcher) => {
|
|
741
|
+
}
|
|
742
|
+
const delta = direction === "next" ? 1 : -1;
|
|
743
|
+
const startIndex = activeIndex === -1 ? 0 : activeIndex;
|
|
744
|
+
const nextIndex = (startIndex + delta + options.length) % options.length;
|
|
745
|
+
options[nextIndex]?.focus();
|
|
746
|
+
}
|
|
747
|
+
function initializeThemeSwitchers() {
|
|
748
|
+
document.querySelectorAll(selectors.themeSwitcher).forEach((switcher) => {
|
|
357
749
|
if (!(switcher instanceof HTMLElement) || switcher.dataset.incThemeSwitcherInitialized === "true") {
|
|
358
|
-
|
|
750
|
+
return;
|
|
359
751
|
}
|
|
360
|
-
|
|
361
752
|
switcher.dataset.incThemeSwitcherInitialized = "true";
|
|
362
|
-
|
|
363
753
|
if (switcher.matches("details.inc-theme-switcher")) {
|
|
364
|
-
|
|
365
|
-
|
|
754
|
+
syncThemeControls(themeState.mode, themeState.resolved);
|
|
755
|
+
return;
|
|
366
756
|
}
|
|
367
|
-
|
|
368
757
|
if (switcher.querySelector(selectors.themeMode)) {
|
|
369
|
-
|
|
370
|
-
|
|
758
|
+
syncThemeControls(themeState.mode, themeState.resolved);
|
|
759
|
+
return;
|
|
371
760
|
}
|
|
372
|
-
|
|
373
761
|
mountThemeSwitcher(switcher, {
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
heading: switcher.getAttribute("data-inc-theme-switcher-heading") || "Choose appearance",
|
|
762
|
+
variant: switcher.getAttribute("data-inc-theme-switcher-variant") || (switcher.closest(".inc-navbar, .inc-navbar__utilities") ? "navbar" : void 0),
|
|
763
|
+
block: switcher.hasAttribute("data-inc-theme-switcher-block"),
|
|
764
|
+
label: switcher.getAttribute("data-inc-theme-switcher-label") || "Theme",
|
|
765
|
+
menuLabel: switcher.getAttribute("data-inc-theme-switcher-menu-label") || "Theme",
|
|
766
|
+
heading: switcher.getAttribute("data-inc-theme-switcher-heading") || "Choose appearance"
|
|
380
767
|
});
|
|
381
|
-
|
|
382
|
-
}
|
|
383
|
-
|
|
384
|
-
function bindThemeMediaListener() {
|
|
385
|
-
if (themeMediaListenerBound || !window.matchMedia) {
|
|
386
|
-
return;
|
|
768
|
+
});
|
|
387
769
|
}
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
770
|
+
function bindThemeMediaListener() {
|
|
771
|
+
if (themeMediaListenerBound || !window.matchMedia) {
|
|
772
|
+
return;
|
|
773
|
+
}
|
|
774
|
+
themeMediaListenerBound = true;
|
|
775
|
+
themeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
776
|
+
const handleThemePreferenceChange = () => {
|
|
393
777
|
if (themeState.mode === "system") {
|
|
394
|
-
|
|
778
|
+
applyThemeMode("system", { persist: false });
|
|
395
779
|
}
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
if (typeof themeMediaQuery.addEventListener === "function") {
|
|
780
|
+
};
|
|
781
|
+
if (typeof themeMediaQuery.addEventListener === "function") {
|
|
399
782
|
themeMediaQuery.addEventListener("change", handleThemePreferenceChange);
|
|
400
|
-
|
|
783
|
+
} else if (typeof themeMediaQuery.addListener === "function") {
|
|
401
784
|
themeMediaQuery.addListener(handleThemePreferenceChange);
|
|
785
|
+
}
|
|
402
786
|
}
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
function bindThemeStorageListener() {
|
|
406
|
-
if (themeStorageListenerBound) {
|
|
787
|
+
function bindThemeStorageListener() {
|
|
788
|
+
if (themeStorageListenerBound) {
|
|
407
789
|
return;
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
window.addEventListener("storage", (event) => {
|
|
790
|
+
}
|
|
791
|
+
themeStorageListenerBound = true;
|
|
792
|
+
window.addEventListener("storage", (event) => {
|
|
413
793
|
if (event.key !== themeStorageKey) {
|
|
414
|
-
|
|
794
|
+
return;
|
|
415
795
|
}
|
|
416
|
-
|
|
417
796
|
applyThemeMode(getStoredThemeMode() || getConfiguredThemeMode(), {
|
|
418
|
-
|
|
797
|
+
persist: false
|
|
419
798
|
});
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
if (themeInitialized) {
|
|
799
|
+
});
|
|
800
|
+
}
|
|
801
|
+
function initializeTheme() {
|
|
802
|
+
if (themeInitialized) {
|
|
425
803
|
syncThemeControls(themeState.mode, themeState.resolved);
|
|
426
804
|
initializeThemeSwitchers();
|
|
427
805
|
return themeState;
|
|
806
|
+
}
|
|
807
|
+
themeInitialized = true;
|
|
808
|
+
applyThemeMode(getStoredThemeMode() || getConfiguredThemeMode(), {
|
|
809
|
+
persist: false
|
|
810
|
+
});
|
|
811
|
+
bindThemeMediaListener();
|
|
812
|
+
bindThemeStorageListener();
|
|
813
|
+
initializeThemeSwitchers();
|
|
814
|
+
syncThemeControls(themeState.mode, themeState.resolved);
|
|
815
|
+
return themeState;
|
|
428
816
|
}
|
|
429
|
-
|
|
430
|
-
themeInitialized = true;
|
|
431
|
-
|
|
432
817
|
applyThemeMode(getStoredThemeMode() || getConfiguredThemeMode(), {
|
|
433
|
-
|
|
818
|
+
dispatch: false,
|
|
819
|
+
persist: false,
|
|
820
|
+
syncControls: false
|
|
434
821
|
});
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
initializeThemeSwitchers();
|
|
439
|
-
syncThemeControls(themeState.mode, themeState.resolved);
|
|
440
|
-
|
|
441
|
-
return themeState;
|
|
442
|
-
}
|
|
443
|
-
|
|
444
|
-
applyThemeMode(getStoredThemeMode() || getConfiguredThemeMode(), {
|
|
445
|
-
dispatch: false,
|
|
446
|
-
persist: false,
|
|
447
|
-
syncControls: false,
|
|
448
|
-
});
|
|
449
|
-
|
|
450
|
-
function getTarget(trigger) {
|
|
451
|
-
const rawTarget = trigger.getAttribute("data-inc-target")
|
|
452
|
-
|| trigger.getAttribute("href")
|
|
453
|
-
|| (trigger.getAttribute("aria-controls") ? `#${trigger.getAttribute("aria-controls")}` : "");
|
|
454
|
-
|
|
455
|
-
if (!rawTarget || rawTarget === "#") {
|
|
822
|
+
function getTarget(trigger) {
|
|
823
|
+
const rawTarget = trigger.getAttribute("data-inc-target") || trigger.getAttribute("href") || (trigger.getAttribute("aria-controls") ? `#${trigger.getAttribute("aria-controls")}` : "");
|
|
824
|
+
if (!rawTarget || rawTarget === "#") {
|
|
456
825
|
return null;
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
try {
|
|
826
|
+
}
|
|
827
|
+
try {
|
|
460
828
|
return document.querySelector(rawTarget);
|
|
461
|
-
|
|
829
|
+
} catch {
|
|
462
830
|
return null;
|
|
831
|
+
}
|
|
463
832
|
}
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
function getFocusableElements(container) {
|
|
467
|
-
if (!container) {
|
|
833
|
+
function getFocusableElements(container) {
|
|
834
|
+
if (!container) {
|
|
468
835
|
return [];
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
return Array.from(container.querySelectorAll(focusableSelector)).filter((element) => {
|
|
836
|
+
}
|
|
837
|
+
return Array.from(container.querySelectorAll(focusableSelector)).filter((element) => {
|
|
472
838
|
if (!(element instanceof HTMLElement)) {
|
|
473
|
-
|
|
839
|
+
return false;
|
|
474
840
|
}
|
|
475
|
-
|
|
476
841
|
if (element.hidden || element.getAttribute("aria-hidden") === "true") {
|
|
477
|
-
|
|
842
|
+
return false;
|
|
478
843
|
}
|
|
479
|
-
|
|
480
844
|
return element.tabIndex >= 0;
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
if (explicitFocus instanceof HTMLElement) {
|
|
845
|
+
});
|
|
846
|
+
}
|
|
847
|
+
function focusWithin(container, direction = "first") {
|
|
848
|
+
const explicitFocus = container.querySelector("[data-inc-initial-focus]");
|
|
849
|
+
if (explicitFocus instanceof HTMLElement) {
|
|
488
850
|
explicitFocus.focus();
|
|
489
851
|
return true;
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
if (!focusable.length) {
|
|
852
|
+
}
|
|
853
|
+
const focusable = getFocusableElements(container);
|
|
854
|
+
if (!focusable.length) {
|
|
495
855
|
if (container instanceof HTMLElement) {
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
return true;
|
|
856
|
+
if (!container.hasAttribute("tabindex")) {
|
|
857
|
+
container.tabIndex = -1;
|
|
858
|
+
}
|
|
859
|
+
container.focus();
|
|
860
|
+
return true;
|
|
502
861
|
}
|
|
503
|
-
|
|
504
862
|
return false;
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
if (direction === "last") {
|
|
863
|
+
}
|
|
864
|
+
if (direction === "last") {
|
|
508
865
|
focusable[focusable.length - 1].focus();
|
|
509
866
|
return true;
|
|
867
|
+
}
|
|
868
|
+
focusable[0].focus();
|
|
869
|
+
return true;
|
|
510
870
|
}
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
return true;
|
|
514
|
-
}
|
|
515
|
-
|
|
516
|
-
function rememberTrigger(target, trigger) {
|
|
517
|
-
if (target instanceof HTMLElement && trigger instanceof HTMLElement) {
|
|
871
|
+
function rememberTrigger(target, trigger) {
|
|
872
|
+
if (target instanceof HTMLElement && trigger instanceof HTMLElement) {
|
|
518
873
|
target._incReturnFocus = trigger;
|
|
874
|
+
}
|
|
519
875
|
}
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
function restoreTriggerFocus(target) {
|
|
523
|
-
if (!(target instanceof HTMLElement)) {
|
|
876
|
+
function restoreTriggerFocus(target) {
|
|
877
|
+
if (!(target instanceof HTMLElement)) {
|
|
524
878
|
return;
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
if (trigger instanceof HTMLElement && document.contains(trigger)) {
|
|
879
|
+
}
|
|
880
|
+
const trigger = target._incReturnFocus;
|
|
881
|
+
if (trigger instanceof HTMLElement && document.contains(trigger)) {
|
|
530
882
|
trigger.focus();
|
|
883
|
+
}
|
|
884
|
+
delete target._incReturnFocus;
|
|
531
885
|
}
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
function closeMenu(toggle, options = {}) {
|
|
537
|
-
const menu = getTarget(toggle);
|
|
538
|
-
|
|
539
|
-
if (!menu) {
|
|
886
|
+
function closeMenu(toggle, options = {}) {
|
|
887
|
+
const menu = getTarget(toggle);
|
|
888
|
+
if (!menu) {
|
|
540
889
|
return;
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
if (options.restoreFocus) {
|
|
890
|
+
}
|
|
891
|
+
menu.classList.remove("show");
|
|
892
|
+
toggle.setAttribute("aria-expanded", "false");
|
|
893
|
+
if (options.restoreFocus) {
|
|
547
894
|
toggle.focus();
|
|
895
|
+
}
|
|
548
896
|
}
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
const menu = getTarget(toggle);
|
|
553
|
-
|
|
554
|
-
if (!menu) {
|
|
897
|
+
function openMenu(toggle, options = {}) {
|
|
898
|
+
const menu = getTarget(toggle);
|
|
899
|
+
if (!menu) {
|
|
555
900
|
return;
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
if (options.focus === "first") {
|
|
901
|
+
}
|
|
902
|
+
menu.classList.add("show");
|
|
903
|
+
toggle.setAttribute("aria-expanded", "true");
|
|
904
|
+
if (options.focus === "first") {
|
|
562
905
|
const items = getMenuItems(menu);
|
|
563
906
|
items[0]?.focus();
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
if (options.focus === "last") {
|
|
907
|
+
}
|
|
908
|
+
if (options.focus === "last") {
|
|
567
909
|
const items = getMenuItems(menu);
|
|
568
910
|
items[items.length - 1]?.focus();
|
|
911
|
+
}
|
|
569
912
|
}
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
function closeAllMenus(exceptToggle) {
|
|
573
|
-
document.querySelectorAll(selectors.menuToggle).forEach((toggle) => {
|
|
913
|
+
function closeAllMenus(exceptToggle) {
|
|
914
|
+
document.querySelectorAll(selectors.menuToggle).forEach((toggle) => {
|
|
574
915
|
if (exceptToggle && toggle === exceptToggle) {
|
|
575
|
-
|
|
916
|
+
return;
|
|
576
917
|
}
|
|
577
|
-
|
|
578
918
|
closeMenu(toggle);
|
|
579
|
-
|
|
580
|
-
}
|
|
581
|
-
|
|
582
|
-
function getMenuItems(menu) {
|
|
583
|
-
return getFocusableElements(menu).filter((item) => item.closest(selectors.menu) === menu);
|
|
584
|
-
}
|
|
585
|
-
|
|
586
|
-
function focusMenuItem(menu, direction) {
|
|
587
|
-
const items = getMenuItems(menu);
|
|
588
|
-
|
|
589
|
-
if (!items.length) {
|
|
590
|
-
return;
|
|
919
|
+
});
|
|
591
920
|
}
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
921
|
+
function getMenuItems(menu) {
|
|
922
|
+
return getFocusableElements(menu).filter((item) => item.closest(selectors.menu) === menu);
|
|
923
|
+
}
|
|
924
|
+
function focusMenuItem(menu, direction) {
|
|
925
|
+
const items = getMenuItems(menu);
|
|
926
|
+
if (!items.length) {
|
|
927
|
+
return;
|
|
928
|
+
}
|
|
929
|
+
const activeIndex = items.findIndex((item) => item === document.activeElement);
|
|
930
|
+
if (direction === "first") {
|
|
596
931
|
items[0].focus();
|
|
597
932
|
return;
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
if (direction === "last") {
|
|
933
|
+
}
|
|
934
|
+
if (direction === "last") {
|
|
601
935
|
items[items.length - 1].focus();
|
|
602
936
|
return;
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
function toggleCollapse(trigger) {
|
|
618
|
-
const target = getTarget(trigger);
|
|
619
|
-
|
|
620
|
-
if (!target) {
|
|
937
|
+
}
|
|
938
|
+
const delta = direction === "next" ? 1 : -1;
|
|
939
|
+
const startIndex = activeIndex === -1 ? delta > 0 ? 0 : items.length - 1 : activeIndex;
|
|
940
|
+
const nextIndex = (startIndex + delta + items.length) % items.length;
|
|
941
|
+
items[nextIndex].focus();
|
|
942
|
+
}
|
|
943
|
+
function setCollapseState(trigger, target, expanded) {
|
|
944
|
+
trigger.setAttribute("aria-expanded", expanded ? "true" : "false");
|
|
945
|
+
trigger.classList.toggle("collapsed", !expanded);
|
|
946
|
+
target.classList.toggle("show", expanded);
|
|
947
|
+
}
|
|
948
|
+
function toggleCollapse(trigger) {
|
|
949
|
+
const target = getTarget(trigger);
|
|
950
|
+
if (!target) {
|
|
621
951
|
return;
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
if (accordionRoot && shouldExpand) {
|
|
952
|
+
}
|
|
953
|
+
const shouldExpand = !target.classList.contains("show");
|
|
954
|
+
const accordionRoot = trigger.closest("[data-inc-accordion]");
|
|
955
|
+
if (accordionRoot && shouldExpand) {
|
|
628
956
|
accordionRoot.querySelectorAll(selectors.collapseToggle).forEach((otherTrigger) => {
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
setCollapseState(otherTrigger, otherTarget, false);
|
|
637
|
-
}
|
|
957
|
+
if (otherTrigger === trigger) {
|
|
958
|
+
return;
|
|
959
|
+
}
|
|
960
|
+
const otherTarget = getTarget(otherTrigger);
|
|
961
|
+
if (otherTarget) {
|
|
962
|
+
setCollapseState(otherTrigger, otherTarget, false);
|
|
963
|
+
}
|
|
638
964
|
});
|
|
965
|
+
}
|
|
966
|
+
setCollapseState(trigger, target, shouldExpand);
|
|
639
967
|
}
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
}
|
|
643
|
-
|
|
644
|
-
function getTabList(trigger) {
|
|
645
|
-
return trigger.closest('[role="tablist"], .inc-tabs-nav');
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
function getTabsForList(listRoot) {
|
|
649
|
-
return Array.from(listRoot.querySelectorAll(selectors.tabToggle));
|
|
650
|
-
}
|
|
651
|
-
|
|
652
|
-
function activateTab(trigger, options = {}) {
|
|
653
|
-
const listRoot = getTabList(trigger);
|
|
654
|
-
|
|
655
|
-
if (!listRoot) {
|
|
656
|
-
return;
|
|
968
|
+
function getTabList(trigger) {
|
|
969
|
+
return trigger.closest('[role="tablist"], .inc-tabs-nav');
|
|
657
970
|
}
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
const targetPane = getTarget(trigger);
|
|
661
|
-
|
|
662
|
-
if (!targetPane) {
|
|
663
|
-
return;
|
|
971
|
+
function getTabsForList(listRoot) {
|
|
972
|
+
return Array.from(listRoot.querySelectorAll(selectors.tabToggle));
|
|
664
973
|
}
|
|
665
|
-
|
|
666
|
-
|
|
974
|
+
function activateTab(trigger, options = {}) {
|
|
975
|
+
const listRoot = getTabList(trigger);
|
|
976
|
+
if (!listRoot) {
|
|
977
|
+
return;
|
|
978
|
+
}
|
|
979
|
+
const tabs = getTabsForList(listRoot);
|
|
980
|
+
const targetPane = getTarget(trigger);
|
|
981
|
+
if (!targetPane) {
|
|
982
|
+
return;
|
|
983
|
+
}
|
|
984
|
+
tabs.forEach((tab) => {
|
|
667
985
|
const pane = getTarget(tab);
|
|
668
986
|
const isActive = tab === trigger;
|
|
669
|
-
|
|
670
987
|
tab.classList.toggle("active", isActive);
|
|
671
988
|
tab.setAttribute("aria-selected", isActive ? "true" : "false");
|
|
672
989
|
tab.tabIndex = isActive ? 0 : -1;
|
|
673
|
-
|
|
674
990
|
if (pane) {
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
991
|
+
pane.classList.toggle("active", isActive);
|
|
992
|
+
pane.classList.toggle("show", isActive);
|
|
993
|
+
pane.hidden = !isActive;
|
|
678
994
|
}
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
if (options.focus && trigger instanceof HTMLElement) {
|
|
995
|
+
});
|
|
996
|
+
if (options.focus && trigger instanceof HTMLElement) {
|
|
682
997
|
trigger.focus();
|
|
998
|
+
}
|
|
683
999
|
}
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
const listRoot = getTabList(trigger);
|
|
688
|
-
|
|
689
|
-
if (!listRoot) {
|
|
1000
|
+
function focusTab(trigger, direction) {
|
|
1001
|
+
const listRoot = getTabList(trigger);
|
|
1002
|
+
if (!listRoot) {
|
|
690
1003
|
return;
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
if (activeIndex === -1 || !tabs.length) {
|
|
1004
|
+
}
|
|
1005
|
+
const tabs = getTabsForList(listRoot);
|
|
1006
|
+
const activeIndex = tabs.findIndex((tab) => tab === trigger);
|
|
1007
|
+
if (activeIndex === -1 || !tabs.length) {
|
|
697
1008
|
return;
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
if (direction === "first") {
|
|
1009
|
+
}
|
|
1010
|
+
let nextTab = trigger;
|
|
1011
|
+
if (direction === "first") {
|
|
703
1012
|
nextTab = tabs[0];
|
|
704
|
-
|
|
1013
|
+
} else if (direction === "last") {
|
|
705
1014
|
nextTab = tabs[tabs.length - 1];
|
|
706
|
-
|
|
1015
|
+
} else {
|
|
707
1016
|
const delta = direction === "next" ? 1 : -1;
|
|
708
1017
|
const nextIndex = (activeIndex + delta + tabs.length) % tabs.length;
|
|
709
1018
|
nextTab = tabs[nextIndex];
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
function openModal(trigger) {
|
|
724
|
-
const modal = getTarget(trigger);
|
|
725
|
-
|
|
726
|
-
if (!modal) {
|
|
1019
|
+
}
|
|
1020
|
+
activateTab(nextTab, { focus: true });
|
|
1021
|
+
}
|
|
1022
|
+
function syncOverlayBodyState() {
|
|
1023
|
+
const hasOpenModal = document.querySelector(`${selectors.modal}.is-open`);
|
|
1024
|
+
const hasOpenOffcanvas = document.querySelector(`${selectors.offcanvas}.is-open`);
|
|
1025
|
+
document.body.classList.toggle("inc-modal-open", Boolean(hasOpenModal));
|
|
1026
|
+
document.body.classList.toggle("inc-offcanvas-open", Boolean(hasOpenOffcanvas));
|
|
1027
|
+
}
|
|
1028
|
+
function openModal(trigger) {
|
|
1029
|
+
const modal = getTarget(trigger);
|
|
1030
|
+
if (!modal) {
|
|
727
1031
|
return;
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
function closeModal(modal, options = {}) {
|
|
739
|
-
if (!modal) {
|
|
1032
|
+
}
|
|
1033
|
+
rememberTrigger(modal, trigger);
|
|
1034
|
+
modal.hidden = false;
|
|
1035
|
+
modal.classList.add("is-open");
|
|
1036
|
+
modal.setAttribute("aria-hidden", "false");
|
|
1037
|
+
syncOverlayBodyState();
|
|
1038
|
+
focusWithin(modal);
|
|
1039
|
+
}
|
|
1040
|
+
function closeModal(modal, options = {}) {
|
|
1041
|
+
if (!modal) {
|
|
740
1042
|
return;
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
if (options.restoreFocus !== false) {
|
|
1043
|
+
}
|
|
1044
|
+
modal.classList.remove("is-open");
|
|
1045
|
+
modal.setAttribute("aria-hidden", "true");
|
|
1046
|
+
modal.hidden = true;
|
|
1047
|
+
syncOverlayBodyState();
|
|
1048
|
+
if (options.restoreFocus !== false) {
|
|
749
1049
|
restoreTriggerFocus(modal);
|
|
1050
|
+
}
|
|
750
1051
|
}
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
function getOffcanvasBackdrops(target) {
|
|
754
|
-
if (!target.id) {
|
|
1052
|
+
function getOffcanvasBackdrops(target) {
|
|
1053
|
+
if (!target.id) {
|
|
755
1054
|
return [];
|
|
1055
|
+
}
|
|
1056
|
+
return Array.from(document.querySelectorAll(`[data-inc-backdrop-for="${target.id}"]`));
|
|
756
1057
|
}
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
function openOffcanvas(trigger) {
|
|
762
|
-
const panel = getTarget(trigger);
|
|
763
|
-
|
|
764
|
-
if (!panel) {
|
|
1058
|
+
function openOffcanvas(trigger) {
|
|
1059
|
+
const panel = getTarget(trigger);
|
|
1060
|
+
if (!panel) {
|
|
765
1061
|
return;
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
getOffcanvasBackdrops(panel).forEach((backdrop) => {
|
|
1062
|
+
}
|
|
1063
|
+
rememberTrigger(panel, trigger);
|
|
1064
|
+
panel.classList.add("is-open");
|
|
1065
|
+
panel.setAttribute("aria-hidden", "false");
|
|
1066
|
+
getOffcanvasBackdrops(panel).forEach((backdrop) => {
|
|
772
1067
|
backdrop.classList.add("is-open");
|
|
773
1068
|
backdrop.hidden = false;
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
if (!(dialog instanceof HTMLElement) || dialog.tagName !== "DIALOG" || dialog.open) {
|
|
1069
|
+
});
|
|
1070
|
+
syncOverlayBodyState();
|
|
1071
|
+
focusWithin(panel);
|
|
1072
|
+
}
|
|
1073
|
+
function openNativeDialog(trigger) {
|
|
1074
|
+
const dialogId = trigger.getAttribute("data-inc-native-dialog-open");
|
|
1075
|
+
const dialog = dialogId ? document.getElementById(dialogId) : null;
|
|
1076
|
+
if (!(dialog instanceof HTMLElement) || dialog.tagName !== "DIALOG" || dialog.open) {
|
|
784
1077
|
return;
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
if (typeof dialog.showModal === "function") {
|
|
1078
|
+
}
|
|
1079
|
+
if (typeof dialog.showModal === "function") {
|
|
788
1080
|
dialog.showModal();
|
|
789
1081
|
return;
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
if (typeof dialog.show === "function") {
|
|
1082
|
+
}
|
|
1083
|
+
if (typeof dialog.show === "function") {
|
|
793
1084
|
dialog.show();
|
|
1085
|
+
}
|
|
794
1086
|
}
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
function closeOffcanvas(panel, options = {}) {
|
|
798
|
-
if (!panel) {
|
|
1087
|
+
function closeOffcanvas(panel, options = {}) {
|
|
1088
|
+
if (!panel) {
|
|
799
1089
|
return;
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
getOffcanvasBackdrops(panel).forEach((backdrop) => {
|
|
1090
|
+
}
|
|
1091
|
+
panel.classList.remove("is-open");
|
|
1092
|
+
panel.setAttribute("aria-hidden", "true");
|
|
1093
|
+
getOffcanvasBackdrops(panel).forEach((backdrop) => {
|
|
805
1094
|
backdrop.classList.remove("is-open");
|
|
806
1095
|
backdrop.hidden = true;
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
if (options.restoreFocus !== false) {
|
|
1096
|
+
});
|
|
1097
|
+
syncOverlayBodyState();
|
|
1098
|
+
if (options.restoreFocus !== false) {
|
|
811
1099
|
restoreTriggerFocus(panel);
|
|
1100
|
+
}
|
|
812
1101
|
}
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
function getTopOpenOverlay() {
|
|
816
|
-
const overlays = [
|
|
1102
|
+
function getTopOpenOverlay() {
|
|
1103
|
+
const overlays = [
|
|
817
1104
|
...document.querySelectorAll(`${selectors.modal}.is-open, ${selectors.offcanvas}.is-open`)
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
const parsed = Number.parseInt(value || "", 10);
|
|
825
|
-
|
|
826
|
-
if (!Number.isFinite(parsed) || parsed < 1) {
|
|
1105
|
+
];
|
|
1106
|
+
return overlays[overlays.length - 1] || null;
|
|
1107
|
+
}
|
|
1108
|
+
function parsePositiveInteger(value) {
|
|
1109
|
+
const parsed = Number.parseInt(value || "", 10);
|
|
1110
|
+
if (!Number.isFinite(parsed) || parsed < 1) {
|
|
827
1111
|
return null;
|
|
1112
|
+
}
|
|
1113
|
+
return parsed;
|
|
828
1114
|
}
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
}
|
|
832
|
-
|
|
833
|
-
function formatFileExampleSize(bytes) {
|
|
834
|
-
if (!Number.isFinite(bytes) || bytes <= 0) {
|
|
1115
|
+
function formatFileExampleSize(bytes) {
|
|
1116
|
+
if (!Number.isFinite(bytes) || bytes <= 0) {
|
|
835
1117
|
return "0 B";
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
if (bytes < 1024) {
|
|
1118
|
+
}
|
|
1119
|
+
if (bytes < 1024) {
|
|
839
1120
|
return `${bytes} B`;
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
while (value >= 1024 && unitIndex < (units.length - 1)) {
|
|
1121
|
+
}
|
|
1122
|
+
const units = ["KB", "MB", "GB", "TB"];
|
|
1123
|
+
let value = bytes / 1024;
|
|
1124
|
+
let unitIndex = 0;
|
|
1125
|
+
while (value >= 1024 && unitIndex < units.length - 1) {
|
|
847
1126
|
value /= 1024;
|
|
848
1127
|
unitIndex += 1;
|
|
1128
|
+
}
|
|
1129
|
+
const precision = value >= 10 ? 0 : 1;
|
|
1130
|
+
return `${value.toFixed(precision)} ${units[unitIndex]}`;
|
|
849
1131
|
}
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
return `${value.toFixed(precision)} ${units[unitIndex]}`;
|
|
853
|
-
}
|
|
854
|
-
|
|
855
|
-
function getFileExampleTypeLabel(file) {
|
|
856
|
-
if (!(file instanceof File)) {
|
|
1132
|
+
function getFileExampleTypeLabel(file) {
|
|
1133
|
+
if (!(file instanceof File)) {
|
|
857
1134
|
return "File";
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
if (extensionMatch?.[1]) {
|
|
1135
|
+
}
|
|
1136
|
+
const extensionMatch = /\.([a-z0-9]+)$/i.exec(file.name || "");
|
|
1137
|
+
if (extensionMatch?.[1]) {
|
|
862
1138
|
return extensionMatch[1].toUpperCase();
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
if (typeof file.type === "string" && file.type.includes("/")) {
|
|
1139
|
+
}
|
|
1140
|
+
if (typeof file.type === "string" && file.type.includes("/")) {
|
|
866
1141
|
return file.type.split("/").at(-1)?.toUpperCase() || "File";
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
remove.setAttribute("data-inc-action", "file-remove");
|
|
908
|
-
remove.setAttribute("aria-label", `Remove ${file.name}`);
|
|
909
|
-
|
|
910
|
-
actions.append(preview, remove);
|
|
911
|
-
row.append(meta, badge, actions);
|
|
912
|
-
return row;
|
|
913
|
-
}
|
|
914
|
-
|
|
915
|
-
function revokeFileExampleRow(row) {
|
|
916
|
-
if (!(row instanceof HTMLElement)) {
|
|
1142
|
+
}
|
|
1143
|
+
return "File";
|
|
1144
|
+
}
|
|
1145
|
+
function createFileExampleRow(file) {
|
|
1146
|
+
const row = document.createElement("div");
|
|
1147
|
+
const meta = document.createElement("div");
|
|
1148
|
+
const name = document.createElement("p");
|
|
1149
|
+
const detail = document.createElement("p");
|
|
1150
|
+
const badge = document.createElement("span");
|
|
1151
|
+
const actions = document.createElement("div");
|
|
1152
|
+
const preview = document.createElement("a");
|
|
1153
|
+
const remove = document.createElement("button");
|
|
1154
|
+
const objectUrl = URL.createObjectURL(file);
|
|
1155
|
+
row.className = "inc-file-row";
|
|
1156
|
+
row._incFileExampleObjectUrl = objectUrl;
|
|
1157
|
+
meta.className = "inc-file-row__meta";
|
|
1158
|
+
name.className = "inc-file-row__name";
|
|
1159
|
+
name.textContent = file.name || "untitled-file";
|
|
1160
|
+
detail.className = "inc-file-row__detail";
|
|
1161
|
+
detail.textContent = `${getFileExampleTypeLabel(file)} \u2022 ${formatFileExampleSize(file.size)} \u2022 selected just now`;
|
|
1162
|
+
meta.append(name, detail);
|
|
1163
|
+
badge.className = "inc-badge inc-badge--secondary inc-badge--pill";
|
|
1164
|
+
badge.textContent = "Ready";
|
|
1165
|
+
actions.className = "inc-file-row__actions";
|
|
1166
|
+
preview.className = "inc-btn inc-btn--outline-secondary inc-btn--sm";
|
|
1167
|
+
preview.href = objectUrl;
|
|
1168
|
+
preview.target = "_blank";
|
|
1169
|
+
preview.rel = "noreferrer";
|
|
1170
|
+
preview.textContent = "Preview";
|
|
1171
|
+
remove.type = "button";
|
|
1172
|
+
remove.className = "inc-btn inc-btn--secondary inc-btn--sm";
|
|
1173
|
+
remove.textContent = "Remove";
|
|
1174
|
+
remove.setAttribute("data-inc-action", "file-remove");
|
|
1175
|
+
remove.setAttribute("aria-label", `Remove ${file.name}`);
|
|
1176
|
+
actions.append(preview, remove);
|
|
1177
|
+
row.append(meta, badge, actions);
|
|
1178
|
+
return row;
|
|
1179
|
+
}
|
|
1180
|
+
function revokeFileExampleRow(row) {
|
|
1181
|
+
if (!(row instanceof HTMLElement)) {
|
|
917
1182
|
return;
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
if (typeof row._incFileExampleObjectUrl === "string" && row._incFileExampleObjectUrl) {
|
|
1183
|
+
}
|
|
1184
|
+
if (typeof row._incFileExampleObjectUrl === "string" && row._incFileExampleObjectUrl) {
|
|
921
1185
|
URL.revokeObjectURL(row._incFileExampleObjectUrl);
|
|
922
1186
|
row._incFileExampleObjectUrl = "";
|
|
1187
|
+
}
|
|
923
1188
|
}
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
const { list } = controller.parts;
|
|
928
|
-
if (!(list instanceof HTMLElement)) {
|
|
1189
|
+
function updateFileExampleEmptyState(controller) {
|
|
1190
|
+
const { list } = controller.parts;
|
|
1191
|
+
if (!(list instanceof HTMLElement)) {
|
|
929
1192
|
return;
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
if (rows.length > 0) {
|
|
1193
|
+
}
|
|
1194
|
+
const rows = list.querySelectorAll(".inc-file-row");
|
|
1195
|
+
let empty = list.querySelector("[data-inc-file-empty]");
|
|
1196
|
+
if (rows.length > 0) {
|
|
936
1197
|
if (empty instanceof HTMLElement) {
|
|
937
|
-
|
|
1198
|
+
empty.hidden = true;
|
|
938
1199
|
}
|
|
939
1200
|
return;
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
if (!(empty instanceof HTMLElement)) {
|
|
1201
|
+
}
|
|
1202
|
+
if (!(empty instanceof HTMLElement)) {
|
|
943
1203
|
empty = document.createElement("p");
|
|
944
1204
|
empty.className = "inc-text inc-text--small inc-text--muted";
|
|
945
1205
|
empty.setAttribute("data-inc-file-empty", "");
|
|
946
1206
|
empty.textContent = controller.emptyText;
|
|
947
1207
|
list.append(empty);
|
|
1208
|
+
}
|
|
1209
|
+
empty.hidden = false;
|
|
948
1210
|
}
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
function appendFilesToExample(controller, files) {
|
|
954
|
-
const { list } = controller.parts;
|
|
955
|
-
if (!(list instanceof HTMLElement)) {
|
|
1211
|
+
function appendFilesToExample(controller, files) {
|
|
1212
|
+
const { list } = controller.parts;
|
|
1213
|
+
if (!(list instanceof HTMLElement)) {
|
|
956
1214
|
return;
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
if (!fileItems.length) {
|
|
1215
|
+
}
|
|
1216
|
+
const fileItems = Array.from(files || []).filter((file) => file instanceof File);
|
|
1217
|
+
if (!fileItems.length) {
|
|
961
1218
|
return;
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
fileItems.forEach((file) => {
|
|
1219
|
+
}
|
|
1220
|
+
fileItems.forEach((file) => {
|
|
965
1221
|
list.append(createFileExampleRow(file));
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
updateFileExampleEmptyState(controller);
|
|
969
|
-
}
|
|
970
|
-
|
|
971
|
-
function dataTransferIncludesFiles(dataTransfer) {
|
|
972
|
-
if (!dataTransfer) {
|
|
973
|
-
return false;
|
|
1222
|
+
});
|
|
1223
|
+
updateFileExampleEmptyState(controller);
|
|
974
1224
|
}
|
|
975
|
-
|
|
976
|
-
|
|
1225
|
+
function dataTransferIncludesFiles(dataTransfer) {
|
|
1226
|
+
if (!dataTransfer) {
|
|
1227
|
+
return false;
|
|
1228
|
+
}
|
|
1229
|
+
if (dataTransfer.files?.length) {
|
|
977
1230
|
return true;
|
|
1231
|
+
}
|
|
1232
|
+
return Array.from(dataTransfer.types || []).includes("Files");
|
|
978
1233
|
}
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
function setFileDropzoneActiveState(controller, isActive) {
|
|
984
|
-
const { dropzone } = controller.parts;
|
|
985
|
-
if (!(dropzone instanceof HTMLElement)) {
|
|
1234
|
+
function setFileDropzoneActiveState(controller, isActive) {
|
|
1235
|
+
const { dropzone } = controller.parts;
|
|
1236
|
+
if (!(dropzone instanceof HTMLElement)) {
|
|
986
1237
|
return;
|
|
1238
|
+
}
|
|
1239
|
+
dropzone.classList.toggle("is-drag-over", Boolean(isActive));
|
|
987
1240
|
}
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
function openFileExamplePicker(controller) {
|
|
993
|
-
const { input } = controller.parts;
|
|
994
|
-
if (!(input instanceof HTMLInputElement)) {
|
|
1241
|
+
function openFileExamplePicker(controller) {
|
|
1242
|
+
const { input } = controller.parts;
|
|
1243
|
+
if (!(input instanceof HTMLInputElement)) {
|
|
995
1244
|
return;
|
|
1245
|
+
}
|
|
1246
|
+
input.click();
|
|
996
1247
|
}
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
}
|
|
1000
|
-
|
|
1001
|
-
function initializeFileExamples() {
|
|
1002
|
-
document.querySelectorAll(selectors.fileExample).forEach((root) => {
|
|
1248
|
+
function initializeFileExamples() {
|
|
1249
|
+
document.querySelectorAll(selectors.fileExample).forEach((root) => {
|
|
1003
1250
|
if (!(root instanceof HTMLElement) || root._incFileExampleInitialized) {
|
|
1004
|
-
|
|
1251
|
+
return;
|
|
1005
1252
|
}
|
|
1006
|
-
|
|
1007
1253
|
const controller = {
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1254
|
+
root,
|
|
1255
|
+
parts: {
|
|
1256
|
+
dropzone: root.querySelector(selectors.fileDropzone),
|
|
1257
|
+
input: root.querySelector(selectors.fileInput),
|
|
1258
|
+
browse: root.querySelector(selectors.fileBrowse),
|
|
1259
|
+
list: root.querySelector(selectors.fileList)
|
|
1260
|
+
},
|
|
1261
|
+
emptyText: root.getAttribute("data-inc-file-empty-text") || "No files selected yet.",
|
|
1262
|
+
dragDepth: 0
|
|
1017
1263
|
};
|
|
1018
|
-
|
|
1019
1264
|
const { dropzone, input, browse, list } = controller.parts;
|
|
1020
1265
|
if (!(dropzone instanceof HTMLElement) || !(input instanceof HTMLInputElement) || !(list instanceof HTMLElement)) {
|
|
1021
|
-
|
|
1266
|
+
return;
|
|
1022
1267
|
}
|
|
1023
|
-
|
|
1024
1268
|
root._incFileExampleInitialized = true;
|
|
1025
1269
|
root._incFileExampleController = controller;
|
|
1026
|
-
|
|
1027
1270
|
dropzone.setAttribute("tabindex", dropzone.getAttribute("tabindex") || "0");
|
|
1028
1271
|
dropzone.setAttribute("role", dropzone.getAttribute("role") || "button");
|
|
1029
1272
|
dropzone.setAttribute("aria-label", dropzone.getAttribute("aria-label") || "Drop files here or browse for files");
|
|
1030
|
-
|
|
1031
1273
|
const browseAction = (event) => {
|
|
1032
|
-
|
|
1033
|
-
|
|
1274
|
+
event.preventDefault();
|
|
1275
|
+
openFileExamplePicker(controller);
|
|
1034
1276
|
};
|
|
1035
|
-
|
|
1036
1277
|
if (browse instanceof HTMLElement) {
|
|
1037
|
-
|
|
1278
|
+
browse.addEventListener("click", browseAction);
|
|
1038
1279
|
}
|
|
1039
|
-
|
|
1040
1280
|
dropzone.addEventListener("click", (event) => {
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
openFileExamplePicker(controller);
|
|
1281
|
+
if (event.target instanceof Element && event.target.closest("a, button, input, label")) {
|
|
1282
|
+
return;
|
|
1283
|
+
}
|
|
1284
|
+
openFileExamplePicker(controller);
|
|
1046
1285
|
});
|
|
1047
|
-
|
|
1048
1286
|
dropzone.addEventListener("keydown", (event) => {
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
openFileExamplePicker(controller);
|
|
1287
|
+
if (event.key !== "Enter" && event.key !== " ") {
|
|
1288
|
+
return;
|
|
1289
|
+
}
|
|
1290
|
+
event.preventDefault();
|
|
1291
|
+
openFileExamplePicker(controller);
|
|
1055
1292
|
});
|
|
1056
|
-
|
|
1057
1293
|
dropzone.addEventListener("dragenter", (event) => {
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
setFileDropzoneActiveState(controller, true);
|
|
1294
|
+
if (!dataTransferIncludesFiles(event.dataTransfer)) {
|
|
1295
|
+
return;
|
|
1296
|
+
}
|
|
1297
|
+
event.preventDefault();
|
|
1298
|
+
controller.dragDepth += 1;
|
|
1299
|
+
setFileDropzoneActiveState(controller, true);
|
|
1065
1300
|
});
|
|
1066
|
-
|
|
1067
1301
|
dropzone.addEventListener("dragover", (event) => {
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
setFileDropzoneActiveState(controller, true);
|
|
1302
|
+
if (!dataTransferIncludesFiles(event.dataTransfer)) {
|
|
1303
|
+
return;
|
|
1304
|
+
}
|
|
1305
|
+
event.preventDefault();
|
|
1306
|
+
if (event.dataTransfer) {
|
|
1307
|
+
event.dataTransfer.dropEffect = "copy";
|
|
1308
|
+
}
|
|
1309
|
+
setFileDropzoneActiveState(controller, true);
|
|
1077
1310
|
});
|
|
1078
|
-
|
|
1079
1311
|
dropzone.addEventListener("dragleave", (event) => {
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
setFileDropzoneActiveState(controller, false);
|
|
1089
|
-
}
|
|
1312
|
+
if (!dataTransferIncludesFiles(event.dataTransfer)) {
|
|
1313
|
+
return;
|
|
1314
|
+
}
|
|
1315
|
+
event.preventDefault();
|
|
1316
|
+
controller.dragDepth = Math.max(0, controller.dragDepth - 1);
|
|
1317
|
+
if (controller.dragDepth === 0 || !dropzone.contains(event.relatedTarget)) {
|
|
1318
|
+
setFileDropzoneActiveState(controller, false);
|
|
1319
|
+
}
|
|
1090
1320
|
});
|
|
1091
|
-
|
|
1092
1321
|
dropzone.addEventListener("drop", (event) => {
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
appendFilesToExample(controller, event.dataTransfer?.files);
|
|
1322
|
+
if (!dataTransferIncludesFiles(event.dataTransfer)) {
|
|
1323
|
+
return;
|
|
1324
|
+
}
|
|
1325
|
+
event.preventDefault();
|
|
1326
|
+
controller.dragDepth = 0;
|
|
1327
|
+
setFileDropzoneActiveState(controller, false);
|
|
1328
|
+
appendFilesToExample(controller, event.dataTransfer?.files);
|
|
1101
1329
|
});
|
|
1102
|
-
|
|
1103
1330
|
input.addEventListener("change", () => {
|
|
1104
|
-
|
|
1105
|
-
|
|
1331
|
+
appendFilesToExample(controller, input.files);
|
|
1332
|
+
input.value = "";
|
|
1106
1333
|
});
|
|
1107
|
-
|
|
1108
1334
|
list.addEventListener("click", (event) => {
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
updateFileExampleEmptyState(controller);
|
|
1335
|
+
const removeButton = event.target.closest(selectors.fileRemove);
|
|
1336
|
+
if (!removeButton) {
|
|
1337
|
+
return;
|
|
1338
|
+
}
|
|
1339
|
+
event.preventDefault();
|
|
1340
|
+
const row = removeButton.closest(".inc-file-row");
|
|
1341
|
+
revokeFileExampleRow(row);
|
|
1342
|
+
row?.remove();
|
|
1343
|
+
updateFileExampleEmptyState(controller);
|
|
1119
1344
|
});
|
|
1120
|
-
|
|
1121
1345
|
updateFileExampleEmptyState(controller);
|
|
1122
|
-
|
|
1123
|
-
}
|
|
1124
|
-
|
|
1125
|
-
function formatAutoRefreshRemaining(totalSeconds) {
|
|
1126
|
-
if (totalSeconds < 60) {
|
|
1127
|
-
return `${totalSeconds}s`;
|
|
1346
|
+
});
|
|
1128
1347
|
}
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
const AUTO_REFRESH_PLAY_ICON = `
|
|
1141
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
|
1142
|
-
<path d="M4 3.5v9l8-4.5-8-4.5z"></path>
|
|
1143
|
-
</svg>`.trim();
|
|
1144
|
-
|
|
1145
|
-
function getAutoRefreshParts(root) {
|
|
1146
|
-
const toggle = root.querySelector(".inc-auto-refresh__toggle");
|
|
1147
|
-
|
|
1148
|
-
if (toggle instanceof HTMLElement) {
|
|
1348
|
+
function formatAutoRefreshRemaining(totalSeconds) {
|
|
1349
|
+
if (totalSeconds < 60) {
|
|
1350
|
+
return `${totalSeconds}s`;
|
|
1351
|
+
}
|
|
1352
|
+
const minutes = Math.floor(totalSeconds / 60);
|
|
1353
|
+
const seconds = totalSeconds % 60;
|
|
1354
|
+
return `${minutes}m ${seconds}s`;
|
|
1355
|
+
}
|
|
1356
|
+
function getAutoRefreshParts(root) {
|
|
1357
|
+
const toggle = root.querySelector(".inc-auto-refresh__toggle");
|
|
1358
|
+
if (toggle instanceof HTMLElement) {
|
|
1149
1359
|
if (!toggle.querySelector(".inc-auto-refresh__toggle-icon")) {
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1360
|
+
const icon = document.createElement("span");
|
|
1361
|
+
icon.className = "inc-auto-refresh__toggle-icon";
|
|
1362
|
+
icon.setAttribute("aria-hidden", "true");
|
|
1363
|
+
toggle.prepend(icon);
|
|
1154
1364
|
}
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
return {
|
|
1365
|
+
}
|
|
1366
|
+
return {
|
|
1158
1367
|
countdown: root.querySelector(".inc-auto-refresh__countdown"),
|
|
1159
1368
|
label: root.querySelector(".inc-auto-refresh__label"),
|
|
1160
1369
|
value: root.querySelector(".inc-auto-refresh__value"),
|
|
@@ -1162,700 +1371,587 @@
|
|
|
1162
1371
|
statusText: root.querySelector(".inc-auto-refresh__status-text"),
|
|
1163
1372
|
toggle,
|
|
1164
1373
|
toggleIcon: root.querySelector(".inc-auto-refresh__toggle-icon"),
|
|
1165
|
-
toggleText: root.querySelector(".inc-auto-refresh__toggle-text")
|
|
1166
|
-
|
|
1167
|
-
}
|
|
1168
|
-
|
|
1169
|
-
function updateAutoRefreshToggle(controller) {
|
|
1170
|
-
const { parts, isPaused, isLoading, pauseActionLabel, resumeActionLabel } = controller;
|
|
1171
|
-
|
|
1172
|
-
if (!(parts.toggle instanceof HTMLElement)) {
|
|
1173
|
-
return;
|
|
1374
|
+
toggleText: root.querySelector(".inc-auto-refresh__toggle-text")
|
|
1375
|
+
};
|
|
1174
1376
|
}
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1377
|
+
function updateAutoRefreshToggle(controller) {
|
|
1378
|
+
const { parts, isPaused, isLoading, pauseActionLabel, resumeActionLabel } = controller;
|
|
1379
|
+
if (!(parts.toggle instanceof HTMLElement)) {
|
|
1380
|
+
return;
|
|
1381
|
+
}
|
|
1382
|
+
const actionLabel = isPaused ? resumeActionLabel : pauseActionLabel;
|
|
1383
|
+
parts.toggle.disabled = Boolean(isLoading);
|
|
1384
|
+
parts.toggle.setAttribute("aria-pressed", isPaused ? "true" : "false");
|
|
1385
|
+
parts.toggle.setAttribute("aria-label", actionLabel);
|
|
1386
|
+
if (parts.toggleText) {
|
|
1182
1387
|
parts.toggleText.textContent = actionLabel;
|
|
1388
|
+
}
|
|
1389
|
+
if (parts.toggleIcon instanceof HTMLElement) {
|
|
1390
|
+
replaceIconContents(parts.toggleIcon, isPaused ? "play" : "pause", {
|
|
1391
|
+
className: "inc-icon",
|
|
1392
|
+
decorative: true,
|
|
1393
|
+
size: 16
|
|
1394
|
+
});
|
|
1395
|
+
}
|
|
1183
1396
|
}
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
}
|
|
1188
|
-
}
|
|
1189
|
-
|
|
1190
|
-
function renderAutoRefreshCountdown(controller, remainingSeconds) {
|
|
1191
|
-
const { root, parts, refreshLabel } = controller;
|
|
1192
|
-
|
|
1193
|
-
if (parts.label) {
|
|
1397
|
+
function renderAutoRefreshCountdown(controller, remainingSeconds) {
|
|
1398
|
+
const { root, parts, refreshLabel } = controller;
|
|
1399
|
+
if (parts.label) {
|
|
1194
1400
|
parts.label.textContent = refreshLabel;
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
if (parts.value) {
|
|
1401
|
+
}
|
|
1402
|
+
if (parts.value) {
|
|
1198
1403
|
parts.value.textContent = formatAutoRefreshRemaining(remainingSeconds);
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
if (parts.countdown) {
|
|
1404
|
+
}
|
|
1405
|
+
root.classList.remove("is-paused");
|
|
1406
|
+
root.classList.remove("is-loading");
|
|
1407
|
+
root.setAttribute("aria-busy", "false");
|
|
1408
|
+
if (parts.countdown) {
|
|
1206
1409
|
parts.countdown.hidden = false;
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
if (parts.status) {
|
|
1410
|
+
}
|
|
1411
|
+
if (parts.status) {
|
|
1210
1412
|
parts.status.hidden = true;
|
|
1413
|
+
}
|
|
1414
|
+
updateAutoRefreshToggle(controller);
|
|
1211
1415
|
}
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
function renderAutoRefreshPaused(controller, remainingSeconds) {
|
|
1217
|
-
const { root, parts, pausedLabel } = controller;
|
|
1218
|
-
|
|
1219
|
-
if (parts.label) {
|
|
1416
|
+
function renderAutoRefreshPaused(controller, remainingSeconds) {
|
|
1417
|
+
const { root, parts, pausedLabel } = controller;
|
|
1418
|
+
if (parts.label) {
|
|
1220
1419
|
parts.label.textContent = pausedLabel;
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
if (parts.value) {
|
|
1420
|
+
}
|
|
1421
|
+
if (parts.value) {
|
|
1224
1422
|
parts.value.textContent = formatAutoRefreshRemaining(remainingSeconds);
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
if (parts.countdown) {
|
|
1423
|
+
}
|
|
1424
|
+
root.classList.add("is-paused");
|
|
1425
|
+
root.classList.remove("is-loading");
|
|
1426
|
+
root.setAttribute("aria-busy", "false");
|
|
1427
|
+
if (parts.countdown) {
|
|
1232
1428
|
parts.countdown.hidden = false;
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
if (parts.status) {
|
|
1429
|
+
}
|
|
1430
|
+
if (parts.status) {
|
|
1236
1431
|
parts.status.hidden = true;
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
root.classList.add("is-loading");
|
|
1247
|
-
root.setAttribute("aria-busy", "true");
|
|
1248
|
-
|
|
1249
|
-
if (parts.countdown) {
|
|
1432
|
+
}
|
|
1433
|
+
updateAutoRefreshToggle(controller);
|
|
1434
|
+
}
|
|
1435
|
+
function setAutoRefreshLoadingState(controller) {
|
|
1436
|
+
const { root, parts, loadingLabel } = controller;
|
|
1437
|
+
root.classList.remove("is-paused");
|
|
1438
|
+
root.classList.add("is-loading");
|
|
1439
|
+
root.setAttribute("aria-busy", "true");
|
|
1440
|
+
if (parts.countdown) {
|
|
1250
1441
|
parts.countdown.hidden = true;
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
if (parts.statusText) {
|
|
1442
|
+
}
|
|
1443
|
+
if (parts.statusText) {
|
|
1254
1444
|
parts.statusText.textContent = loadingLabel;
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
if (parts.status) {
|
|
1445
|
+
}
|
|
1446
|
+
if (parts.status) {
|
|
1258
1447
|
parts.status.hidden = false;
|
|
1448
|
+
}
|
|
1449
|
+
updateAutoRefreshToggle(controller);
|
|
1259
1450
|
}
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
}
|
|
1263
|
-
|
|
1264
|
-
function stopAutoRefreshController(controller) {
|
|
1265
|
-
if (controller.timeoutId) {
|
|
1451
|
+
function stopAutoRefreshController(controller) {
|
|
1452
|
+
if (controller.timeoutId) {
|
|
1266
1453
|
window.clearTimeout(controller.timeoutId);
|
|
1267
1454
|
controller.timeoutId = 0;
|
|
1455
|
+
}
|
|
1268
1456
|
}
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
function pauseAutoRefresh(controller) {
|
|
1272
|
-
if (autoRefreshReloadScheduled || controller.isLoading || controller.isPaused) {
|
|
1457
|
+
function pauseAutoRefresh(controller) {
|
|
1458
|
+
if (autoRefreshReloadScheduled || controller.isLoading || controller.isPaused) {
|
|
1273
1459
|
return;
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
function resumeAutoRefresh(controller) {
|
|
1283
|
-
if (autoRefreshReloadScheduled || controller.isLoading || !controller.isPaused) {
|
|
1460
|
+
}
|
|
1461
|
+
controller.isPaused = true;
|
|
1462
|
+
controller.remainingMs = Math.max(controller.deadline - Date.now(), 0);
|
|
1463
|
+
stopAutoRefreshController(controller);
|
|
1464
|
+
renderAutoRefreshPaused(controller, Math.max(1, Math.ceil(controller.remainingMs / 1e3)));
|
|
1465
|
+
}
|
|
1466
|
+
function resumeAutoRefresh(controller) {
|
|
1467
|
+
if (autoRefreshReloadScheduled || controller.isLoading || !controller.isPaused) {
|
|
1284
1468
|
return;
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
function toggleAutoRefresh(controller) {
|
|
1294
|
-
if (controller.isPaused) {
|
|
1469
|
+
}
|
|
1470
|
+
controller.isPaused = false;
|
|
1471
|
+
controller.deadline = Date.now() + controller.remainingMs;
|
|
1472
|
+
controller.remainingMs = 0;
|
|
1473
|
+
scheduleAutoRefreshTick(controller);
|
|
1474
|
+
}
|
|
1475
|
+
function toggleAutoRefresh(controller) {
|
|
1476
|
+
if (controller.isPaused) {
|
|
1295
1477
|
resumeAutoRefresh(controller);
|
|
1296
1478
|
return;
|
|
1479
|
+
}
|
|
1480
|
+
pauseAutoRefresh(controller);
|
|
1297
1481
|
}
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
}
|
|
1301
|
-
|
|
1302
|
-
function scheduleWindowReload() {
|
|
1303
|
-
if (autoRefreshReloadScheduled) {
|
|
1482
|
+
function scheduleWindowReload() {
|
|
1483
|
+
if (autoRefreshReloadScheduled) {
|
|
1304
1484
|
return;
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
const deferToPaint = window.requestAnimationFrame
|
|
1311
|
-
? window.requestAnimationFrame.bind(window)
|
|
1312
|
-
: (callback) => window.setTimeout(callback, 16);
|
|
1313
|
-
|
|
1314
|
-
deferToPaint(() => {
|
|
1485
|
+
}
|
|
1486
|
+
autoRefreshReloadScheduled = true;
|
|
1487
|
+
autoRefreshControllers.forEach((controller) => stopAutoRefreshController(controller));
|
|
1488
|
+
const deferToPaint = window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : (callback) => window.setTimeout(callback, 16);
|
|
1489
|
+
deferToPaint(() => {
|
|
1315
1490
|
window.setTimeout(() => {
|
|
1316
|
-
|
|
1491
|
+
window.location.reload();
|
|
1317
1492
|
}, 120);
|
|
1318
|
-
|
|
1319
|
-
}
|
|
1320
|
-
|
|
1321
|
-
function startAutoRefreshReload(controller) {
|
|
1322
|
-
if (autoRefreshReloadScheduled || controller.isLoading) {
|
|
1323
|
-
return;
|
|
1493
|
+
});
|
|
1324
1494
|
}
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
stopAutoRefreshController(controller);
|
|
1328
|
-
setAutoRefreshLoadingState(controller);
|
|
1329
|
-
scheduleWindowReload();
|
|
1330
|
-
}
|
|
1331
|
-
|
|
1332
|
-
function scheduleAutoRefreshTick(controller) {
|
|
1333
|
-
if (autoRefreshReloadScheduled || controller.isLoading || controller.isPaused) {
|
|
1495
|
+
function startAutoRefreshReload(controller) {
|
|
1496
|
+
if (autoRefreshReloadScheduled || controller.isLoading) {
|
|
1334
1497
|
return;
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1498
|
+
}
|
|
1499
|
+
controller.isLoading = true;
|
|
1500
|
+
stopAutoRefreshController(controller);
|
|
1501
|
+
setAutoRefreshLoadingState(controller);
|
|
1502
|
+
scheduleWindowReload();
|
|
1503
|
+
}
|
|
1504
|
+
function scheduleAutoRefreshTick(controller) {
|
|
1505
|
+
if (autoRefreshReloadScheduled || controller.isLoading || controller.isPaused) {
|
|
1506
|
+
return;
|
|
1507
|
+
}
|
|
1508
|
+
stopAutoRefreshController(controller);
|
|
1509
|
+
const remainingMs = controller.deadline - Date.now();
|
|
1510
|
+
if (remainingMs <= 0) {
|
|
1342
1511
|
startAutoRefreshReload(controller);
|
|
1343
1512
|
return;
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
const nextDelay = remainingMs % 1000 || 1000;
|
|
1350
|
-
controller.timeoutId = window.setTimeout(() => {
|
|
1513
|
+
}
|
|
1514
|
+
const remainingSeconds = Math.ceil(remainingMs / 1e3);
|
|
1515
|
+
renderAutoRefreshCountdown(controller, remainingSeconds);
|
|
1516
|
+
const nextDelay = remainingMs % 1e3 || 1e3;
|
|
1517
|
+
controller.timeoutId = window.setTimeout(() => {
|
|
1351
1518
|
scheduleAutoRefreshTick(controller);
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
document.querySelectorAll(selectors.autoRefresh).forEach((root) => {
|
|
1519
|
+
}, nextDelay);
|
|
1520
|
+
}
|
|
1521
|
+
function initializeAutoRefresh() {
|
|
1522
|
+
document.querySelectorAll(selectors.autoRefresh).forEach((root) => {
|
|
1357
1523
|
if (!(root instanceof HTMLElement) || root._incAutoRefreshInitialized) {
|
|
1358
|
-
|
|
1524
|
+
return;
|
|
1359
1525
|
}
|
|
1360
|
-
|
|
1361
1526
|
root._incAutoRefreshInitialized = true;
|
|
1362
|
-
|
|
1363
1527
|
const refreshSeconds = parsePositiveInteger(root.getAttribute("data-inc-refresh-seconds"));
|
|
1364
|
-
|
|
1365
1528
|
if (!refreshSeconds) {
|
|
1366
|
-
|
|
1529
|
+
return;
|
|
1367
1530
|
}
|
|
1368
|
-
|
|
1369
1531
|
const controller = {
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1532
|
+
root,
|
|
1533
|
+
parts: getAutoRefreshParts(root),
|
|
1534
|
+
refreshLabel: root.getAttribute("data-inc-refresh-label") || "Refresh in",
|
|
1535
|
+
loadingLabel: root.getAttribute("data-inc-refresh-loading-label") || "Refreshing",
|
|
1536
|
+
pausedLabel: root.getAttribute("data-inc-refresh-paused-label") || "Paused at",
|
|
1537
|
+
pauseActionLabel: root.getAttribute("data-inc-refresh-pause-action-label") || "Pause",
|
|
1538
|
+
resumeActionLabel: root.getAttribute("data-inc-refresh-resume-action-label") || "Resume",
|
|
1539
|
+
deadline: Date.now() + refreshSeconds * 1e3,
|
|
1540
|
+
remainingMs: refreshSeconds * 1e3,
|
|
1541
|
+
timeoutId: 0,
|
|
1542
|
+
isLoading: false,
|
|
1543
|
+
isPaused: false
|
|
1382
1544
|
};
|
|
1383
|
-
|
|
1384
1545
|
root._incAutoRefreshController = controller;
|
|
1385
1546
|
autoRefreshControllers.push(controller);
|
|
1386
1547
|
scheduleAutoRefreshTick(controller);
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
if (!document._incAutoRefreshVisibilityBound && autoRefreshControllers.length) {
|
|
1548
|
+
});
|
|
1549
|
+
if (!document._incAutoRefreshVisibilityBound && autoRefreshControllers.length) {
|
|
1390
1550
|
document._incAutoRefreshVisibilityBound = true;
|
|
1391
|
-
|
|
1392
1551
|
document.addEventListener("visibilitychange", () => {
|
|
1393
|
-
|
|
1394
|
-
|
|
1552
|
+
if (document.hidden || autoRefreshReloadScheduled) {
|
|
1553
|
+
return;
|
|
1554
|
+
}
|
|
1555
|
+
autoRefreshControllers.forEach((controller) => {
|
|
1556
|
+
if (controller.isLoading || controller.isPaused) {
|
|
1557
|
+
return;
|
|
1395
1558
|
}
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
if ((controller.deadline - Date.now()) <= 0) {
|
|
1403
|
-
startAutoRefreshReload(controller);
|
|
1404
|
-
return;
|
|
1405
|
-
}
|
|
1406
|
-
|
|
1407
|
-
scheduleAutoRefreshTick(controller);
|
|
1408
|
-
});
|
|
1559
|
+
if (controller.deadline - Date.now() <= 0) {
|
|
1560
|
+
startAutoRefreshReload(controller);
|
|
1561
|
+
return;
|
|
1562
|
+
}
|
|
1563
|
+
scheduleAutoRefreshTick(controller);
|
|
1564
|
+
});
|
|
1409
1565
|
});
|
|
1566
|
+
}
|
|
1410
1567
|
}
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
function trapFocus(event, container) {
|
|
1414
|
-
if (event.key !== "Tab") {
|
|
1568
|
+
function trapFocus(event, container) {
|
|
1569
|
+
if (event.key !== "Tab") {
|
|
1415
1570
|
return false;
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
if (!focusable.length) {
|
|
1571
|
+
}
|
|
1572
|
+
const focusable = getFocusableElements(container);
|
|
1573
|
+
if (!focusable.length) {
|
|
1421
1574
|
event.preventDefault();
|
|
1422
1575
|
focusWithin(container);
|
|
1423
1576
|
return true;
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
if (event.shiftKey && active === first) {
|
|
1577
|
+
}
|
|
1578
|
+
const first = focusable[0];
|
|
1579
|
+
const last = focusable[focusable.length - 1];
|
|
1580
|
+
const active = document.activeElement;
|
|
1581
|
+
if (event.shiftKey && active === first) {
|
|
1431
1582
|
event.preventDefault();
|
|
1432
1583
|
last.focus();
|
|
1433
1584
|
return true;
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
if (!event.shiftKey && active === last) {
|
|
1585
|
+
}
|
|
1586
|
+
if (!event.shiftKey && active === last) {
|
|
1437
1587
|
event.preventDefault();
|
|
1438
1588
|
first.focus();
|
|
1439
1589
|
return true;
|
|
1590
|
+
}
|
|
1591
|
+
return false;
|
|
1440
1592
|
}
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
}
|
|
1444
|
-
|
|
1445
|
-
function initializeMenus() {
|
|
1446
|
-
document.querySelectorAll(selectors.menuToggle).forEach((toggle) => {
|
|
1593
|
+
function initializeMenus() {
|
|
1594
|
+
document.querySelectorAll(selectors.menuToggle).forEach((toggle) => {
|
|
1447
1595
|
toggle.setAttribute("aria-expanded", "false");
|
|
1448
|
-
|
|
1449
1596
|
const menu = getTarget(toggle);
|
|
1450
|
-
|
|
1451
1597
|
if (menu?.id) {
|
|
1452
|
-
|
|
1598
|
+
toggle.setAttribute("aria-controls", menu.id);
|
|
1453
1599
|
}
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
document.querySelectorAll(selectors.collapseToggle).forEach((trigger) => {
|
|
1600
|
+
});
|
|
1601
|
+
}
|
|
1602
|
+
function initializeCollapses() {
|
|
1603
|
+
document.querySelectorAll(selectors.collapseToggle).forEach((trigger) => {
|
|
1459
1604
|
const target = getTarget(trigger);
|
|
1460
|
-
|
|
1461
1605
|
if (!target) {
|
|
1462
|
-
|
|
1606
|
+
return;
|
|
1463
1607
|
}
|
|
1464
|
-
|
|
1465
1608
|
setCollapseState(trigger, target, target.classList.contains("show"));
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
document.querySelectorAll(selectors.tabToggle).forEach((tab, index) => {
|
|
1609
|
+
});
|
|
1610
|
+
}
|
|
1611
|
+
function initializeTabs() {
|
|
1612
|
+
document.querySelectorAll(selectors.tabToggle).forEach((tab, index) => {
|
|
1471
1613
|
const pane = getTarget(tab);
|
|
1472
1614
|
const isActive = tab.classList.contains("active");
|
|
1473
|
-
|
|
1474
1615
|
if (!tab.id) {
|
|
1475
|
-
|
|
1616
|
+
tab.id = `inc-tab-${index + 1}`;
|
|
1476
1617
|
}
|
|
1477
|
-
|
|
1478
1618
|
tab.setAttribute("role", "tab");
|
|
1479
1619
|
tab.setAttribute("aria-selected", isActive ? "true" : "false");
|
|
1480
1620
|
tab.tabIndex = isActive ? 0 : -1;
|
|
1481
|
-
|
|
1482
1621
|
if (pane) {
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
pane.classList.toggle("active", isActive);
|
|
1622
|
+
if (pane.id) {
|
|
1623
|
+
tab.setAttribute("aria-controls", pane.id);
|
|
1624
|
+
}
|
|
1625
|
+
pane.setAttribute("role", "tabpanel");
|
|
1626
|
+
pane.setAttribute("aria-labelledby", tab.id);
|
|
1627
|
+
pane.hidden = !isActive;
|
|
1628
|
+
pane.classList.toggle("show", isActive);
|
|
1629
|
+
pane.classList.toggle("active", isActive);
|
|
1492
1630
|
}
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
document.querySelectorAll(selectors.tabPane).forEach((pane) => {
|
|
1631
|
+
});
|
|
1632
|
+
document.querySelectorAll(selectors.tabPane).forEach((pane) => {
|
|
1496
1633
|
const hasActiveTab = document.querySelector(`${selectors.tabToggle}[href="#${pane.id}"].active, ${selectors.tabToggle}[data-inc-target="#${pane.id}"].active, ${selectors.tabToggle}[aria-controls="${pane.id}"].active`);
|
|
1497
1634
|
pane.hidden = !hasActiveTab;
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
document.addEventListener("click", (event) => {
|
|
1635
|
+
});
|
|
1636
|
+
}
|
|
1637
|
+
function attachEventHandlers() {
|
|
1638
|
+
document.addEventListener("click", (event) => {
|
|
1503
1639
|
const themeToggle = event.target.closest(selectors.themeToggle);
|
|
1504
|
-
|
|
1505
1640
|
if (themeToggle) {
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1641
|
+
event.preventDefault();
|
|
1642
|
+
cycleThemeMode();
|
|
1643
|
+
return;
|
|
1509
1644
|
}
|
|
1510
|
-
|
|
1511
1645
|
const themeModeControl = event.target.closest(selectors.themeMode);
|
|
1512
|
-
|
|
1513
1646
|
if (themeModeControl && themeModeControl.tagName !== "INPUT") {
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
switcherSummary.focus();
|
|
1526
|
-
}
|
|
1527
|
-
|
|
1528
|
-
return;
|
|
1647
|
+
event.preventDefault();
|
|
1648
|
+
applyThemeMode(themeModeControl.getAttribute("data-inc-theme-mode"));
|
|
1649
|
+
const owningSwitcher = themeModeControl.closest("details.inc-theme-switcher");
|
|
1650
|
+
const switcherSummary = owningSwitcher?.querySelector("summary");
|
|
1651
|
+
if (owningSwitcher instanceof HTMLDetailsElement) {
|
|
1652
|
+
owningSwitcher.open = false;
|
|
1653
|
+
}
|
|
1654
|
+
if (switcherSummary instanceof HTMLElement) {
|
|
1655
|
+
switcherSummary.focus();
|
|
1656
|
+
}
|
|
1657
|
+
return;
|
|
1529
1658
|
}
|
|
1530
|
-
|
|
1531
1659
|
const autoRefreshToggle = event.target.closest(selectors.autoRefreshToggle);
|
|
1532
|
-
|
|
1533
1660
|
if (autoRefreshToggle) {
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
return;
|
|
1661
|
+
const autoRefreshRoot = autoRefreshToggle.closest(selectors.autoRefresh);
|
|
1662
|
+
const controller = autoRefreshRoot?._incAutoRefreshController;
|
|
1663
|
+
if (controller) {
|
|
1664
|
+
event.preventDefault();
|
|
1665
|
+
toggleAutoRefresh(controller);
|
|
1666
|
+
}
|
|
1667
|
+
return;
|
|
1543
1668
|
}
|
|
1544
|
-
|
|
1545
1669
|
const menuToggle = event.target.closest(selectors.menuToggle);
|
|
1546
|
-
|
|
1547
1670
|
if (menuToggle) {
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
}
|
|
1559
|
-
|
|
1560
|
-
return;
|
|
1671
|
+
event.preventDefault();
|
|
1672
|
+
const menu = getTarget(menuToggle);
|
|
1673
|
+
const isOpen = menu ? menu.classList.contains("show") : false;
|
|
1674
|
+
closeAllMenus(menuToggle);
|
|
1675
|
+
if (!isOpen) {
|
|
1676
|
+
openMenu(menuToggle);
|
|
1677
|
+
} else {
|
|
1678
|
+
closeMenu(menuToggle);
|
|
1679
|
+
}
|
|
1680
|
+
return;
|
|
1561
1681
|
}
|
|
1562
|
-
|
|
1563
1682
|
if (!event.target.closest(selectors.userMenu)) {
|
|
1564
|
-
|
|
1683
|
+
closeAllMenus();
|
|
1565
1684
|
}
|
|
1566
|
-
|
|
1567
1685
|
const collapseToggle = event.target.closest(selectors.collapseToggle);
|
|
1568
|
-
|
|
1569
1686
|
if (collapseToggle) {
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1687
|
+
event.preventDefault();
|
|
1688
|
+
toggleCollapse(collapseToggle);
|
|
1689
|
+
return;
|
|
1573
1690
|
}
|
|
1574
|
-
|
|
1575
1691
|
const tabToggle = event.target.closest(selectors.tabToggle);
|
|
1576
|
-
|
|
1577
1692
|
if (tabToggle) {
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
return;
|
|
1693
|
+
if (tabToggle.tagName === "A") {
|
|
1694
|
+
event.preventDefault();
|
|
1695
|
+
}
|
|
1696
|
+
activateTab(tabToggle);
|
|
1697
|
+
return;
|
|
1584
1698
|
}
|
|
1585
|
-
|
|
1586
1699
|
const nativeDialogOpen = event.target.closest(selectors.nativeDialogOpen);
|
|
1587
|
-
|
|
1588
1700
|
if (nativeDialogOpen) {
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1701
|
+
event.preventDefault();
|
|
1702
|
+
openNativeDialog(nativeDialogOpen);
|
|
1703
|
+
return;
|
|
1592
1704
|
}
|
|
1593
|
-
|
|
1594
1705
|
const modalToggle = event.target.closest(selectors.modalToggle);
|
|
1595
|
-
|
|
1596
1706
|
if (modalToggle) {
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1707
|
+
event.preventDefault();
|
|
1708
|
+
openModal(modalToggle);
|
|
1709
|
+
return;
|
|
1600
1710
|
}
|
|
1601
|
-
|
|
1602
1711
|
const modalDismiss = event.target.closest(selectors.modalDismiss);
|
|
1603
|
-
|
|
1604
1712
|
if (modalDismiss) {
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1713
|
+
event.preventDefault();
|
|
1714
|
+
const modal = modalDismiss.closest(selectors.modal) || getTarget(modalDismiss);
|
|
1715
|
+
closeModal(modal);
|
|
1716
|
+
return;
|
|
1609
1717
|
}
|
|
1610
|
-
|
|
1611
1718
|
const backdropModal = event.target.closest(`${selectors.modal}.is-open`);
|
|
1612
|
-
|
|
1613
1719
|
if (backdropModal && event.target.classList.contains("inc-modal__backdrop")) {
|
|
1614
|
-
|
|
1615
|
-
|
|
1720
|
+
closeModal(backdropModal);
|
|
1721
|
+
return;
|
|
1616
1722
|
}
|
|
1617
|
-
|
|
1618
1723
|
const offcanvasToggle = event.target.closest(selectors.offcanvasToggle);
|
|
1619
|
-
|
|
1620
1724
|
if (offcanvasToggle) {
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1725
|
+
event.preventDefault();
|
|
1726
|
+
openOffcanvas(offcanvasToggle);
|
|
1727
|
+
return;
|
|
1624
1728
|
}
|
|
1625
|
-
|
|
1626
1729
|
const offcanvasDismiss = event.target.closest(selectors.offcanvasDismiss);
|
|
1627
|
-
|
|
1628
1730
|
if (offcanvasDismiss) {
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1731
|
+
event.preventDefault();
|
|
1732
|
+
const panel = offcanvasDismiss.closest(selectors.offcanvas) || getTarget(offcanvasDismiss);
|
|
1733
|
+
closeOffcanvas(panel);
|
|
1734
|
+
return;
|
|
1633
1735
|
}
|
|
1634
|
-
|
|
1635
1736
|
const offcanvasBackdrop = event.target.closest("[data-inc-backdrop-for]");
|
|
1636
|
-
|
|
1637
1737
|
if (offcanvasBackdrop) {
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1738
|
+
const targetId = offcanvasBackdrop.getAttribute("data-inc-backdrop-for");
|
|
1739
|
+
const panel = targetId ? document.getElementById(targetId) : null;
|
|
1740
|
+
closeOffcanvas(panel);
|
|
1641
1741
|
}
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
document.addEventListener("change", (event) => {
|
|
1742
|
+
});
|
|
1743
|
+
document.addEventListener("change", (event) => {
|
|
1645
1744
|
const themeModeControl = event.target.closest(selectors.themeMode);
|
|
1646
|
-
|
|
1647
1745
|
if (themeModeControl) {
|
|
1648
|
-
|
|
1649
|
-
|
|
1746
|
+
applyThemeMode(themeModeControl.getAttribute("data-inc-theme-mode"));
|
|
1747
|
+
return;
|
|
1650
1748
|
}
|
|
1651
|
-
|
|
1652
1749
|
const themeSelect = event.target.closest(selectors.themeSelect);
|
|
1653
|
-
|
|
1654
1750
|
if (themeSelect) {
|
|
1655
|
-
|
|
1751
|
+
applyThemeMode(themeSelect.value);
|
|
1656
1752
|
}
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
document.addEventListener("keydown", (event) => {
|
|
1753
|
+
});
|
|
1754
|
+
document.addEventListener("keydown", (event) => {
|
|
1660
1755
|
const menuToggle = event.target.closest(selectors.menuToggle);
|
|
1661
1756
|
const menu = event.target.closest(selectors.menu);
|
|
1662
1757
|
const tabToggle = event.target.closest(selectors.tabToggle);
|
|
1663
1758
|
const themeModeControl = event.target.closest(selectors.themeMode);
|
|
1664
1759
|
const openOverlay = getTopOpenOverlay();
|
|
1665
|
-
|
|
1666
1760
|
if (themeModeControl && themeModeControl.closest(".inc-theme-switcher__panel")) {
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1761
|
+
if (event.key === "ArrowDown") {
|
|
1762
|
+
event.preventDefault();
|
|
1763
|
+
focusThemeSwitcherOption(themeModeControl, "next");
|
|
1764
|
+
return;
|
|
1765
|
+
}
|
|
1766
|
+
if (event.key === "ArrowUp") {
|
|
1767
|
+
event.preventDefault();
|
|
1768
|
+
focusThemeSwitcherOption(themeModeControl, "previous");
|
|
1769
|
+
return;
|
|
1770
|
+
}
|
|
1771
|
+
if (event.key === "Home") {
|
|
1772
|
+
event.preventDefault();
|
|
1773
|
+
focusThemeSwitcherOption(themeModeControl, "first");
|
|
1774
|
+
return;
|
|
1775
|
+
}
|
|
1776
|
+
if (event.key === "End") {
|
|
1777
|
+
event.preventDefault();
|
|
1778
|
+
focusThemeSwitcherOption(themeModeControl, "last");
|
|
1779
|
+
return;
|
|
1780
|
+
}
|
|
1781
|
+
if (event.key === "Escape") {
|
|
1782
|
+
const owningSwitcher = themeModeControl.closest("details.inc-theme-switcher");
|
|
1783
|
+
const switcherSummary = owningSwitcher?.querySelector("summary");
|
|
1784
|
+
if (owningSwitcher instanceof HTMLDetailsElement) {
|
|
1785
|
+
owningSwitcher.open = false;
|
|
1689
1786
|
}
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
const owningSwitcher = themeModeControl.closest("details.inc-theme-switcher");
|
|
1693
|
-
const switcherSummary = owningSwitcher?.querySelector("summary");
|
|
1694
|
-
|
|
1695
|
-
if (owningSwitcher instanceof HTMLDetailsElement) {
|
|
1696
|
-
owningSwitcher.open = false;
|
|
1697
|
-
}
|
|
1698
|
-
|
|
1699
|
-
if (switcherSummary instanceof HTMLElement) {
|
|
1700
|
-
switcherSummary.focus();
|
|
1701
|
-
}
|
|
1702
|
-
|
|
1703
|
-
return;
|
|
1787
|
+
if (switcherSummary instanceof HTMLElement) {
|
|
1788
|
+
switcherSummary.focus();
|
|
1704
1789
|
}
|
|
1790
|
+
return;
|
|
1791
|
+
}
|
|
1705
1792
|
}
|
|
1706
|
-
|
|
1707
1793
|
if (menuToggle) {
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
closeAllMenus(menuToggle);
|
|
1723
|
-
openMenu(menuToggle, { focus: "first" });
|
|
1724
|
-
}
|
|
1725
|
-
|
|
1726
|
-
return;
|
|
1794
|
+
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
|
1795
|
+
event.preventDefault();
|
|
1796
|
+
closeAllMenus(menuToggle);
|
|
1797
|
+
openMenu(menuToggle, { focus: event.key === "ArrowDown" ? "first" : "last" });
|
|
1798
|
+
return;
|
|
1799
|
+
}
|
|
1800
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
1801
|
+
event.preventDefault();
|
|
1802
|
+
const isExpanded = menuToggle.getAttribute("aria-expanded") === "true";
|
|
1803
|
+
if (isExpanded) {
|
|
1804
|
+
closeMenu(menuToggle);
|
|
1805
|
+
} else {
|
|
1806
|
+
closeAllMenus(menuToggle);
|
|
1807
|
+
openMenu(menuToggle, { focus: "first" });
|
|
1727
1808
|
}
|
|
1809
|
+
return;
|
|
1810
|
+
}
|
|
1728
1811
|
}
|
|
1729
|
-
|
|
1730
1812
|
if (menu) {
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
}
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
event.preventDefault();
|
|
1757
|
-
const owningToggle = document.querySelector(`${selectors.menuToggle}[aria-controls="${menu.id}"]`);
|
|
1758
|
-
|
|
1759
|
-
if (owningToggle) {
|
|
1760
|
-
closeMenu(owningToggle, { restoreFocus: true });
|
|
1761
|
-
}
|
|
1762
|
-
|
|
1763
|
-
return;
|
|
1813
|
+
if (event.key === "ArrowDown") {
|
|
1814
|
+
event.preventDefault();
|
|
1815
|
+
focusMenuItem(menu, "next");
|
|
1816
|
+
return;
|
|
1817
|
+
}
|
|
1818
|
+
if (event.key === "ArrowUp") {
|
|
1819
|
+
event.preventDefault();
|
|
1820
|
+
focusMenuItem(menu, "previous");
|
|
1821
|
+
return;
|
|
1822
|
+
}
|
|
1823
|
+
if (event.key === "Home") {
|
|
1824
|
+
event.preventDefault();
|
|
1825
|
+
focusMenuItem(menu, "first");
|
|
1826
|
+
return;
|
|
1827
|
+
}
|
|
1828
|
+
if (event.key === "End") {
|
|
1829
|
+
event.preventDefault();
|
|
1830
|
+
focusMenuItem(menu, "last");
|
|
1831
|
+
return;
|
|
1832
|
+
}
|
|
1833
|
+
if (event.key === "Escape") {
|
|
1834
|
+
event.preventDefault();
|
|
1835
|
+
const owningToggle = document.querySelector(`${selectors.menuToggle}[aria-controls="${menu.id}"]`);
|
|
1836
|
+
if (owningToggle) {
|
|
1837
|
+
closeMenu(owningToggle, { restoreFocus: true });
|
|
1764
1838
|
}
|
|
1839
|
+
return;
|
|
1840
|
+
}
|
|
1765
1841
|
}
|
|
1766
|
-
|
|
1767
1842
|
if (tabToggle) {
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
}
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
event.preventDefault();
|
|
1794
|
-
activateTab(tabToggle, { focus: true });
|
|
1795
|
-
return;
|
|
1796
|
-
}
|
|
1843
|
+
if (event.key === "ArrowRight" || event.key === "ArrowDown") {
|
|
1844
|
+
event.preventDefault();
|
|
1845
|
+
focusTab(tabToggle, "next");
|
|
1846
|
+
return;
|
|
1847
|
+
}
|
|
1848
|
+
if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
|
|
1849
|
+
event.preventDefault();
|
|
1850
|
+
focusTab(tabToggle, "previous");
|
|
1851
|
+
return;
|
|
1852
|
+
}
|
|
1853
|
+
if (event.key === "Home") {
|
|
1854
|
+
event.preventDefault();
|
|
1855
|
+
focusTab(tabToggle, "first");
|
|
1856
|
+
return;
|
|
1857
|
+
}
|
|
1858
|
+
if (event.key === "End") {
|
|
1859
|
+
event.preventDefault();
|
|
1860
|
+
focusTab(tabToggle, "last");
|
|
1861
|
+
return;
|
|
1862
|
+
}
|
|
1863
|
+
if ((event.key === "Enter" || event.key === " ") && tabToggle.tagName !== "BUTTON") {
|
|
1864
|
+
event.preventDefault();
|
|
1865
|
+
activateTab(tabToggle, { focus: true });
|
|
1866
|
+
return;
|
|
1867
|
+
}
|
|
1797
1868
|
}
|
|
1798
|
-
|
|
1799
1869
|
if (openOverlay && trapFocus(event, openOverlay)) {
|
|
1800
|
-
|
|
1870
|
+
return;
|
|
1801
1871
|
}
|
|
1802
|
-
|
|
1803
1872
|
if (event.key === "Escape") {
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
}
|
|
1816
|
-
|
|
1817
|
-
closeAllMenus();
|
|
1873
|
+
const openModal2 = document.querySelector(`${selectors.modal}.is-open`);
|
|
1874
|
+
const openPanel = document.querySelector(`${selectors.offcanvas}.is-open`);
|
|
1875
|
+
if (openModal2) {
|
|
1876
|
+
closeModal(openModal2);
|
|
1877
|
+
return;
|
|
1878
|
+
}
|
|
1879
|
+
if (openPanel) {
|
|
1880
|
+
closeOffcanvas(openPanel);
|
|
1881
|
+
return;
|
|
1882
|
+
}
|
|
1883
|
+
closeAllMenus();
|
|
1818
1884
|
}
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
getMode() {
|
|
1885
|
+
});
|
|
1886
|
+
}
|
|
1887
|
+
window.IncTheme = {
|
|
1888
|
+
getMode() {
|
|
1824
1889
|
return themeState.mode;
|
|
1825
|
-
|
|
1826
|
-
|
|
1890
|
+
},
|
|
1891
|
+
getResolvedTheme() {
|
|
1827
1892
|
return themeState.resolved;
|
|
1828
|
-
|
|
1829
|
-
|
|
1893
|
+
},
|
|
1894
|
+
setMode(mode) {
|
|
1830
1895
|
return applyThemeMode(mode);
|
|
1831
|
-
|
|
1832
|
-
|
|
1896
|
+
},
|
|
1897
|
+
cycleMode() {
|
|
1833
1898
|
return cycleThemeMode();
|
|
1834
|
-
|
|
1835
|
-
|
|
1899
|
+
},
|
|
1900
|
+
createSwitcher(options = {}) {
|
|
1836
1901
|
return createThemeSwitcher(options);
|
|
1837
|
-
|
|
1838
|
-
|
|
1902
|
+
},
|
|
1903
|
+
mountSwitcher(target, options = {}) {
|
|
1839
1904
|
return mountThemeSwitcher(target, options);
|
|
1840
|
-
|
|
1841
|
-
|
|
1905
|
+
},
|
|
1906
|
+
init() {
|
|
1842
1907
|
return initializeTheme();
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1908
|
+
}
|
|
1909
|
+
};
|
|
1910
|
+
function initialize() {
|
|
1911
|
+
initializeTheme();
|
|
1912
|
+
initializeMenus();
|
|
1913
|
+
initializeCollapses();
|
|
1914
|
+
initializeTabs();
|
|
1915
|
+
upgradeIconPlaceholders(document);
|
|
1916
|
+
initializeFileExamples();
|
|
1917
|
+
initializeAutoRefresh();
|
|
1918
|
+
attachEventHandlers();
|
|
1919
|
+
}
|
|
1920
|
+
if (document.readyState === "loading") {
|
|
1921
|
+
document.addEventListener("DOMContentLoaded", initialize, { once: true });
|
|
1922
|
+
} else {
|
|
1923
|
+
initialize();
|
|
1924
|
+
}
|
|
1925
|
+
})();
|
|
1860
1926
|
}
|
|
1927
|
+
});
|
|
1928
|
+
require_inc_design_language();
|
|
1861
1929
|
})();
|
|
1930
|
+
/*! Bundled license information:
|
|
1931
|
+
|
|
1932
|
+
lucide/dist/esm/defaultAttributes.mjs:
|
|
1933
|
+
lucide/dist/esm/createElement.mjs:
|
|
1934
|
+
lucide/dist/esm/icons/circle-check.mjs:
|
|
1935
|
+
lucide/dist/esm/icons/circle-question-mark.mjs:
|
|
1936
|
+
lucide/dist/esm/icons/circle-x.mjs:
|
|
1937
|
+
lucide/dist/esm/icons/download.mjs:
|
|
1938
|
+
lucide/dist/esm/icons/external-link.mjs:
|
|
1939
|
+
lucide/dist/esm/icons/file-text.mjs:
|
|
1940
|
+
lucide/dist/esm/icons/folder-plus.mjs:
|
|
1941
|
+
lucide/dist/esm/icons/info.mjs:
|
|
1942
|
+
lucide/dist/esm/icons/lock.mjs:
|
|
1943
|
+
lucide/dist/esm/icons/pause.mjs:
|
|
1944
|
+
lucide/dist/esm/icons/play.mjs:
|
|
1945
|
+
lucide/dist/esm/icons/refresh-cw.mjs:
|
|
1946
|
+
lucide/dist/esm/icons/search-x.mjs:
|
|
1947
|
+
lucide/dist/esm/icons/settings.mjs:
|
|
1948
|
+
lucide/dist/esm/icons/shield-check.mjs:
|
|
1949
|
+
lucide/dist/esm/icons/triangle-alert.mjs:
|
|
1950
|
+
lucide/dist/esm/icons/upload.mjs:
|
|
1951
|
+
(**
|
|
1952
|
+
* @license lucide v1.17.0 - ISC
|
|
1953
|
+
*
|
|
1954
|
+
* This source code is licensed under the ISC license.
|
|
1955
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
1956
|
+
*)
|
|
1957
|
+
*/
|