@georapbox/files-dropzone-element 2.1.0 → 2.2.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/dist/custom-elements.json +535 -0
- package/dist/files-dropzone-defined.js +2 -2
- package/dist/files-dropzone-defined.js.map +2 -2
- package/dist/files-dropzone.d.ts +17 -16
- package/dist/files-dropzone.d.ts.map +1 -1
- package/dist/files-dropzone.js +3 -3
- package/dist/files-dropzone.js.map +2 -2
- package/package.json +5 -2
- package/src/files-dropzone.js +33 -20
|
@@ -0,0 +1,535 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/files-dropzone.js",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "class",
|
|
11
|
+
"description": "",
|
|
12
|
+
"name": "FilesDropzone",
|
|
13
|
+
"cssProperties": [
|
|
14
|
+
{
|
|
15
|
+
"description": "The border width of the dropzone.",
|
|
16
|
+
"name": "--dropzone-border-width"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"description": "The border style of the dropzone.",
|
|
20
|
+
"name": "--dropzone-border-style"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"description": "The border radius of the dropzone.",
|
|
24
|
+
"name": "--dropzone-border-radius"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"description": "The border color of the dropzone.",
|
|
28
|
+
"name": "--dropzone-border-color"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"description": "The border color of the dropzone when dragging over it.",
|
|
32
|
+
"name": "--dropzone-border-color-dragover"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"description": "The border color of the dropzone when hovering over it.",
|
|
36
|
+
"name": "--dropzone-border-color-hover"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"description": "The background color of the dropzone.",
|
|
40
|
+
"name": "--dropzone-background-color"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"description": "The background color of the dropzone when dragging over it.",
|
|
44
|
+
"name": "--dropzone-background-color-dragover"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"description": "The background color of the dropzone when hovering over it.",
|
|
48
|
+
"name": "--dropzone-background-color-hover"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"description": "The text color of the dropzone.",
|
|
52
|
+
"name": "--dropzone-body-color"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"description": "The text color of the dropzone when dragging over it.",
|
|
56
|
+
"name": "--dropzone-body-color-dragover"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"description": "The text color of the dropzone when hovering over it.",
|
|
60
|
+
"name": "--dropzone-body-color-hover"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"description": "The RGB value of the dropzone's focus shadow.",
|
|
64
|
+
"name": "--dropzone-focus-shadow-rgb"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"description": "The box shadow of the dropzone when focused.",
|
|
68
|
+
"name": "--dropzone-focus-box-shadow"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"description": "The transition's duration for the dropzone area.",
|
|
72
|
+
"name": "--dropzone-transition-duration"
|
|
73
|
+
}
|
|
74
|
+
],
|
|
75
|
+
"cssParts": [
|
|
76
|
+
{
|
|
77
|
+
"description": "The dropzone element.",
|
|
78
|
+
"name": "dropzone"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"description": "The state of the dropzone when dragging over it.",
|
|
82
|
+
"name": "dropzone--dragover"
|
|
83
|
+
}
|
|
84
|
+
],
|
|
85
|
+
"slots": [
|
|
86
|
+
{
|
|
87
|
+
"description": "The default slot content of the dropzone.",
|
|
88
|
+
"name": ""
|
|
89
|
+
}
|
|
90
|
+
],
|
|
91
|
+
"members": [
|
|
92
|
+
{
|
|
93
|
+
"kind": "field",
|
|
94
|
+
"name": "ERROR_CODES",
|
|
95
|
+
"static": true,
|
|
96
|
+
"default": "({ FILE_DIALOG_OPEN_FAILED: 'FILE_DIALOG_OPEN_FAILED', FILE_INPUT_CHANGE_FAILED: 'FILE_INPUT_CHANGE_FAILED', DROP_EVENT_PROCESSING_FAILED: 'DROP_EVENT_PROCESSING_FAILED', UNKNOWN_ERROR: 'UNKNOWN_ERROR' })",
|
|
97
|
+
"description": "Central list of error codes used in drop error event.",
|
|
98
|
+
"readonly": true
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"kind": "field",
|
|
102
|
+
"name": "REJECTION_CODES",
|
|
103
|
+
"static": true,
|
|
104
|
+
"default": "({ TOO_MANY_FILES: 'TOO_MANY_FILES', FILE_TOO_LARGE: 'FILE_TOO_LARGE', FILE_TOO_SMALL: 'FILE_TOO_SMALL', INVALID_MIME_TYPE: 'INVALID_MIME_TYPE' })",
|
|
105
|
+
"description": "Central list of rejection codes for files that are rejected during the drop process.",
|
|
106
|
+
"readonly": true
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"kind": "field",
|
|
110
|
+
"name": "#fileInput",
|
|
111
|
+
"privacy": "private",
|
|
112
|
+
"type": {
|
|
113
|
+
"text": "Nullable<HTMLInputElement>"
|
|
114
|
+
},
|
|
115
|
+
"default": "null"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"kind": "field",
|
|
119
|
+
"name": "#dropzoneEl",
|
|
120
|
+
"privacy": "private",
|
|
121
|
+
"type": {
|
|
122
|
+
"text": "Nullable<HTMLElement>"
|
|
123
|
+
},
|
|
124
|
+
"default": "null"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"kind": "field",
|
|
128
|
+
"name": "accept",
|
|
129
|
+
"description": "A comma-separated list of unique file type specifiers describing file types to allow.",
|
|
130
|
+
"type": {
|
|
131
|
+
"text": "string"
|
|
132
|
+
},
|
|
133
|
+
"default": "''",
|
|
134
|
+
"attribute": "accept"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"kind": "field",
|
|
138
|
+
"name": "disabled",
|
|
139
|
+
"description": "Determines whether the dropzone is disabled.",
|
|
140
|
+
"type": {
|
|
141
|
+
"text": "boolean"
|
|
142
|
+
},
|
|
143
|
+
"default": "false",
|
|
144
|
+
"attribute": "disabled"
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"kind": "field",
|
|
148
|
+
"name": "maxFiles",
|
|
149
|
+
"description": "The maximum number of files allowed to be dropped.",
|
|
150
|
+
"type": {
|
|
151
|
+
"text": "number"
|
|
152
|
+
},
|
|
153
|
+
"default": "Infinity",
|
|
154
|
+
"attribute": "max-files"
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
"kind": "field",
|
|
158
|
+
"name": "maxSize",
|
|
159
|
+
"description": "The maximum file size allowed in bytes.",
|
|
160
|
+
"type": {
|
|
161
|
+
"text": "number"
|
|
162
|
+
},
|
|
163
|
+
"default": "Infinity",
|
|
164
|
+
"attribute": "max-size"
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"kind": "field",
|
|
168
|
+
"name": "minSize",
|
|
169
|
+
"description": "The minimum file size allowed in bytes.",
|
|
170
|
+
"type": {
|
|
171
|
+
"text": "number"
|
|
172
|
+
},
|
|
173
|
+
"default": "0",
|
|
174
|
+
"attribute": "min-size"
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"kind": "field",
|
|
178
|
+
"name": "multiple",
|
|
179
|
+
"description": "Allows multiple files to be dropped.",
|
|
180
|
+
"type": {
|
|
181
|
+
"text": "boolean"
|
|
182
|
+
},
|
|
183
|
+
"default": "false",
|
|
184
|
+
"attribute": "multiple"
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
"kind": "field",
|
|
188
|
+
"name": "autoFocus",
|
|
189
|
+
"description": "Automatically focuses the dropzone when it's connected to the DOM.",
|
|
190
|
+
"type": {
|
|
191
|
+
"text": "boolean"
|
|
192
|
+
},
|
|
193
|
+
"default": "false",
|
|
194
|
+
"attribute": "auto-focus"
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"kind": "field",
|
|
198
|
+
"name": "noStyle",
|
|
199
|
+
"description": "Prevents the dropzone from applying any styling.",
|
|
200
|
+
"type": {
|
|
201
|
+
"text": "boolean"
|
|
202
|
+
},
|
|
203
|
+
"default": "false",
|
|
204
|
+
"attribute": "no-style"
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"kind": "method",
|
|
208
|
+
"name": "#emitEvent",
|
|
209
|
+
"privacy": "private",
|
|
210
|
+
"parameters": [
|
|
211
|
+
{
|
|
212
|
+
"name": "name",
|
|
213
|
+
"description": "The name of the event.",
|
|
214
|
+
"type": {
|
|
215
|
+
"text": "string"
|
|
216
|
+
}
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"name": "detail",
|
|
220
|
+
"description": "The detail payload of the event.",
|
|
221
|
+
"optional": true,
|
|
222
|
+
"type": {
|
|
223
|
+
"text": "D"
|
|
224
|
+
}
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"name": "init",
|
|
228
|
+
"description": "Override the default event initialization options.",
|
|
229
|
+
"optional": true,
|
|
230
|
+
"type": {
|
|
231
|
+
"text": "CustomEventInit<D>"
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
],
|
|
235
|
+
"description": "Emit a custom event with the given name and detail.",
|
|
236
|
+
"return": {
|
|
237
|
+
"type": {
|
|
238
|
+
"text": "boolean"
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
"kind": "method",
|
|
244
|
+
"name": "#emitErrorEvent",
|
|
245
|
+
"privacy": "private",
|
|
246
|
+
"parameters": [
|
|
247
|
+
{
|
|
248
|
+
"name": "code",
|
|
249
|
+
"description": "Stable identifier for the type of error that occurred.",
|
|
250
|
+
"type": {
|
|
251
|
+
"text": "FilesDropzoneErrorCode"
|
|
252
|
+
}
|
|
253
|
+
},
|
|
254
|
+
{
|
|
255
|
+
"name": "error",
|
|
256
|
+
"description": "The underlying error that triggered the event.",
|
|
257
|
+
"type": {
|
|
258
|
+
"text": "unknown"
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
],
|
|
262
|
+
"description": "Emit a standardized error event with typed detail."
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
"kind": "field",
|
|
266
|
+
"name": "#handleFileInputChange",
|
|
267
|
+
"privacy": "private",
|
|
268
|
+
"description": "Handles the change event of the file input.",
|
|
269
|
+
"parameters": [
|
|
270
|
+
{
|
|
271
|
+
"description": "The event object.",
|
|
272
|
+
"name": "evt",
|
|
273
|
+
"type": {
|
|
274
|
+
"text": "*"
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
]
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
"kind": "field",
|
|
281
|
+
"name": "#handleDragEnter",
|
|
282
|
+
"privacy": "private",
|
|
283
|
+
"description": "Handles the dragenter event of the dropzone."
|
|
284
|
+
},
|
|
285
|
+
{
|
|
286
|
+
"kind": "field",
|
|
287
|
+
"name": "#handleDragOver",
|
|
288
|
+
"privacy": "private",
|
|
289
|
+
"description": "Handles the dragover event of the dropzone.",
|
|
290
|
+
"parameters": [
|
|
291
|
+
{
|
|
292
|
+
"description": "The event object.",
|
|
293
|
+
"name": "evt",
|
|
294
|
+
"type": {
|
|
295
|
+
"text": "*"
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
]
|
|
299
|
+
},
|
|
300
|
+
{
|
|
301
|
+
"kind": "field",
|
|
302
|
+
"name": "#handleDragLeave",
|
|
303
|
+
"privacy": "private",
|
|
304
|
+
"description": "Handles the dragleave event of the dropzone."
|
|
305
|
+
},
|
|
306
|
+
{
|
|
307
|
+
"kind": "field",
|
|
308
|
+
"name": "#handleDrop",
|
|
309
|
+
"privacy": "private",
|
|
310
|
+
"description": "Handles the drop event of the dropzone.",
|
|
311
|
+
"parameters": [
|
|
312
|
+
{
|
|
313
|
+
"description": "The event object.",
|
|
314
|
+
"name": "evt",
|
|
315
|
+
"type": {
|
|
316
|
+
"text": "*"
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
]
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
"kind": "field",
|
|
323
|
+
"name": "#handleClick",
|
|
324
|
+
"privacy": "private",
|
|
325
|
+
"description": "Handles the click event of the dropzone."
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
"kind": "field",
|
|
329
|
+
"name": "#handleKeyUp",
|
|
330
|
+
"privacy": "private",
|
|
331
|
+
"description": "Handles the keyup event of the dropzone.",
|
|
332
|
+
"parameters": [
|
|
333
|
+
{
|
|
334
|
+
"description": "The event object.",
|
|
335
|
+
"name": "evt",
|
|
336
|
+
"type": {
|
|
337
|
+
"text": "*"
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
]
|
|
341
|
+
},
|
|
342
|
+
{
|
|
343
|
+
"kind": "method",
|
|
344
|
+
"name": "#handleFilesSelect",
|
|
345
|
+
"privacy": "private",
|
|
346
|
+
"parameters": [
|
|
347
|
+
{
|
|
348
|
+
"name": "files",
|
|
349
|
+
"description": "The files to handle.",
|
|
350
|
+
"type": {
|
|
351
|
+
"text": "File[]"
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
],
|
|
355
|
+
"description": "Handles the selection of files."
|
|
356
|
+
},
|
|
357
|
+
{
|
|
358
|
+
"kind": "method",
|
|
359
|
+
"name": "openFileDialog",
|
|
360
|
+
"description": "Opens the file dialog programmatically."
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
"kind": "method",
|
|
364
|
+
"name": "#upgradeProperty",
|
|
365
|
+
"privacy": "private",
|
|
366
|
+
"parameters": [
|
|
367
|
+
{
|
|
368
|
+
"name": "prop",
|
|
369
|
+
"description": "The property name to upgrade.",
|
|
370
|
+
"type": {
|
|
371
|
+
"text": "'accept' | 'disabled' | 'maxFiles' | 'maxSize' | 'minSize' | 'multiple' | 'autoFocus' | 'noStyle'"
|
|
372
|
+
}
|
|
373
|
+
}
|
|
374
|
+
],
|
|
375
|
+
"description": "This is to safe guard against cases where, for instance, a framework may have added the element to the page and set a\nvalue on one of its properties, but lazy loaded its definition. Without this guard, the upgraded element would miss that\nproperty and the instance property would prevent the class property setter from ever being called.\n\nhttps://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties"
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
"kind": "method",
|
|
379
|
+
"name": "defineCustomElement",
|
|
380
|
+
"static": true,
|
|
381
|
+
"parameters": [
|
|
382
|
+
{
|
|
383
|
+
"name": "elementName",
|
|
384
|
+
"default": "COMPONENT_NAME",
|
|
385
|
+
"description": "The name of the custom element.",
|
|
386
|
+
"optional": true,
|
|
387
|
+
"type": {
|
|
388
|
+
"text": "string"
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
],
|
|
392
|
+
"description": "Defines a custom element with the given name.\nThe name must contain a dash (-)."
|
|
393
|
+
}
|
|
394
|
+
],
|
|
395
|
+
"events": [
|
|
396
|
+
{
|
|
397
|
+
"description": "Fired when files are dropped.",
|
|
398
|
+
"name": "files-dropzone-drop"
|
|
399
|
+
},
|
|
400
|
+
{
|
|
401
|
+
"description": "Fired when files dropped files are accepted.",
|
|
402
|
+
"name": "files-dropzone-drop-accepted"
|
|
403
|
+
},
|
|
404
|
+
{
|
|
405
|
+
"description": "Fired when files dropped files are rejected.",
|
|
406
|
+
"name": "files-dropzone-drop-rejected"
|
|
407
|
+
},
|
|
408
|
+
{
|
|
409
|
+
"description": "Fired when files are dragged into the dropzone.",
|
|
410
|
+
"name": "files-dropzone-dragenter"
|
|
411
|
+
},
|
|
412
|
+
{
|
|
413
|
+
"description": "Fired when files are dragged over the dropzone.",
|
|
414
|
+
"name": "files-dropzone-dragover"
|
|
415
|
+
},
|
|
416
|
+
{
|
|
417
|
+
"description": "Fired when files are dragged out of the dropzone.",
|
|
418
|
+
"name": "files-dropzone-dragleave"
|
|
419
|
+
},
|
|
420
|
+
{
|
|
421
|
+
"description": "Fired when there is any error in the process of reading dropped files or directories.",
|
|
422
|
+
"name": "files-dropzone-error"
|
|
423
|
+
}
|
|
424
|
+
],
|
|
425
|
+
"attributes": [
|
|
426
|
+
{
|
|
427
|
+
"name": "accept",
|
|
428
|
+
"description": "A comma-separated list of unique file type specifiers describing file types to allow.",
|
|
429
|
+
"type": {
|
|
430
|
+
"text": "string"
|
|
431
|
+
},
|
|
432
|
+
"default": "''",
|
|
433
|
+
"fieldName": "accept"
|
|
434
|
+
},
|
|
435
|
+
{
|
|
436
|
+
"name": "disabled",
|
|
437
|
+
"description": "Determines whether the dropzone is disabled.",
|
|
438
|
+
"type": {
|
|
439
|
+
"text": "boolean"
|
|
440
|
+
},
|
|
441
|
+
"default": "false",
|
|
442
|
+
"fieldName": "disabled"
|
|
443
|
+
},
|
|
444
|
+
{
|
|
445
|
+
"name": "multiple",
|
|
446
|
+
"description": "Allows multiple files to be dropped.",
|
|
447
|
+
"type": {
|
|
448
|
+
"text": "boolean"
|
|
449
|
+
},
|
|
450
|
+
"default": "false",
|
|
451
|
+
"fieldName": "multiple"
|
|
452
|
+
},
|
|
453
|
+
{
|
|
454
|
+
"name": "max-files",
|
|
455
|
+
"description": "The maximum number of files allowed to be dropped.",
|
|
456
|
+
"type": {
|
|
457
|
+
"text": "number"
|
|
458
|
+
},
|
|
459
|
+
"default": "Infinity",
|
|
460
|
+
"fieldName": "maxFiles"
|
|
461
|
+
},
|
|
462
|
+
{
|
|
463
|
+
"name": "max-size",
|
|
464
|
+
"description": "The maximum file size allowed in bytes.",
|
|
465
|
+
"type": {
|
|
466
|
+
"text": "number"
|
|
467
|
+
},
|
|
468
|
+
"default": "Infinity",
|
|
469
|
+
"fieldName": "maxSize"
|
|
470
|
+
},
|
|
471
|
+
{
|
|
472
|
+
"name": "min-size",
|
|
473
|
+
"description": "The minimum file size allowed in bytes.",
|
|
474
|
+
"type": {
|
|
475
|
+
"text": "number"
|
|
476
|
+
},
|
|
477
|
+
"default": "0",
|
|
478
|
+
"fieldName": "minSize"
|
|
479
|
+
},
|
|
480
|
+
{
|
|
481
|
+
"name": "auto-focus",
|
|
482
|
+
"description": "Automatically focuses the dropzone when it's connected to the DOM.",
|
|
483
|
+
"type": {
|
|
484
|
+
"text": "boolean"
|
|
485
|
+
},
|
|
486
|
+
"default": "false",
|
|
487
|
+
"fieldName": "autoFocus"
|
|
488
|
+
},
|
|
489
|
+
{
|
|
490
|
+
"name": "no-style",
|
|
491
|
+
"description": "Prevents the dropzone from applying any styling.",
|
|
492
|
+
"type": {
|
|
493
|
+
"text": "boolean"
|
|
494
|
+
},
|
|
495
|
+
"default": "false",
|
|
496
|
+
"fieldName": "noStyle"
|
|
497
|
+
}
|
|
498
|
+
],
|
|
499
|
+
"superclass": {
|
|
500
|
+
"name": "HTMLElement"
|
|
501
|
+
},
|
|
502
|
+
"tagName": "files-dropzone",
|
|
503
|
+
"customElement": true,
|
|
504
|
+
"summary": "A custom element that allows users to drag and drop files into it."
|
|
505
|
+
},
|
|
506
|
+
{
|
|
507
|
+
"kind": "variable",
|
|
508
|
+
"name": "detail",
|
|
509
|
+
"type": {
|
|
510
|
+
"text": "FilesDropzoneErrorDetail"
|
|
511
|
+
},
|
|
512
|
+
"default": "{ code, error }"
|
|
513
|
+
}
|
|
514
|
+
],
|
|
515
|
+
"exports": [
|
|
516
|
+
{
|
|
517
|
+
"kind": "custom-element-definition",
|
|
518
|
+
"name": "files-dropzone",
|
|
519
|
+
"declaration": {
|
|
520
|
+
"name": "FilesDropzone",
|
|
521
|
+
"module": "src/files-dropzone.js"
|
|
522
|
+
}
|
|
523
|
+
},
|
|
524
|
+
{
|
|
525
|
+
"kind": "js",
|
|
526
|
+
"name": "FilesDropzone",
|
|
527
|
+
"declaration": {
|
|
528
|
+
"name": "FilesDropzone",
|
|
529
|
+
"module": "src/files-dropzone.js"
|
|
530
|
+
}
|
|
531
|
+
}
|
|
532
|
+
]
|
|
533
|
+
}
|
|
534
|
+
]
|
|
535
|
+
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @georapbox/files-dropzone-element
|
|
3
3
|
* A custom element that creates a drag and drop zone for files
|
|
4
4
|
*
|
|
5
|
-
* @version 2.
|
|
5
|
+
* @version 2.2.0
|
|
6
6
|
* @homepage https://github.com/georapbox/files-dropzone-element#readme
|
|
7
7
|
* @author George Raptis <georapbox@gmail.com>
|
|
8
8
|
* @license MIT
|
|
@@ -90,5 +90,5 @@ function h(o,e=""){if(!e)return!0;let t=[...new Set(e.split(",").map(r=>r.trim()
|
|
|
90
90
|
<div part="dropzone" class="dropzone" id="dropzone" tabindex="0" role="button" aria-disabled="false">
|
|
91
91
|
<slot><span>Drag 'n' drop files here, or click to select files</span></slot>
|
|
92
92
|
</div>
|
|
93
|
-
`;var
|
|
93
|
+
`;var a=class o extends HTMLElement{static ERROR_CODES={FILE_DIALOG_OPEN_FAILED:"FILE_DIALOG_OPEN_FAILED",FILE_INPUT_CHANGE_FAILED:"FILE_INPUT_CHANGE_FAILED",DROP_EVENT_PROCESSING_FAILED:"DROP_EVENT_PROCESSING_FAILED",UNKNOWN_ERROR:"UNKNOWN_ERROR"};static REJECTION_CODES={TOO_MANY_FILES:"TOO_MANY_FILES",FILE_TOO_LARGE:"FILE_TOO_LARGE",FILE_TOO_SMALL:"FILE_TOO_SMALL",INVALID_MIME_TYPE:"INVALID_MIME_TYPE"};#t=null;#e=null;constructor(){super(),this.shadowRoot||this.attachShadow({mode:"open",delegatesFocus:!0}).appendChild(v.content.cloneNode(!0)),this.shadowRoot&&(this.#t=this.shadowRoot.getElementById("file-input"),this.#e=this.shadowRoot.getElementById("dropzone"))}static get observedAttributes(){return["accept","disabled","multiple"]}attributeChangedCallback(e,t,i){e==="accept"&&t!==i&&this.#t&&(this.#t.accept=this.accept),e==="disabled"&&t!==i&&this.#t&&(this.#t.disabled=this.disabled,this.disabled?(this.#e?.removeAttribute("tabindex"),this.#e?.setAttribute("aria-disabled","true")):(this.#e?.setAttribute("tabindex","0"),this.#e?.setAttribute("aria-disabled","false"))),e==="multiple"&&t!==i&&this.#t&&(this.#t.multiple=this.multiple)}connectedCallback(){this.#o("accept"),this.#o("disabled"),this.#o("maxFiles"),this.#o("maxSize"),this.#o("minSize"),this.#o("multiple"),this.#o("autoFocus"),this.#o("noStyle"),this.#t?.addEventListener("change",this.#s),this.#e?.addEventListener("dragenter",this.#n),this.#e?.addEventListener("dragover",this.#a),this.#e?.addEventListener("dragleave",this.#d),this.#e?.addEventListener("drop",this.#l),this.#e?.addEventListener("click",this.#c),this.#e?.addEventListener("keyup",this.#p),this.autoFocus&&this.#e?.focus()}disconnectedCallback(){this.#t?.removeEventListener("change",this.#s),this.#e?.removeEventListener("dragenter",this.#n),this.#e?.removeEventListener("dragover",this.#a),this.#e?.removeEventListener("dragleave",this.#d),this.#e?.removeEventListener("drop",this.#l),this.#e?.removeEventListener("click",this.#c),this.#e?.removeEventListener("keyup",this.#p)}get accept(){return this.getAttribute("accept")||""}set accept(e){this.setAttribute("accept",e!=null?e.toString():e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){this.toggleAttribute("disabled",!!e)}get maxFiles(){let e=Number(this.getAttribute("max-files"))||0;return e<=0?1/0:Math.floor(Math.abs(e))}set maxFiles(e){this.setAttribute("max-files",e!=null?e.toString():e)}get maxSize(){let e=this.getAttribute("max-size");if(e===null)return 1/0;let t=Number(e);return Number.isNaN(t)?1/0:t}set maxSize(e){this.setAttribute("max-size",e!=null?e.toString():e)}get minSize(){let e=this.getAttribute("min-size");if(e===null)return 0;let t=Number(e);return Number.isNaN(t)?0:t}set minSize(e){this.setAttribute("min-size",e!=null?e.toString():e)}get multiple(){return this.hasAttribute("multiple")}set multiple(e){this.toggleAttribute("multiple",!!e)}get autoFocus(){return this.hasAttribute("auto-focus")}set autoFocus(e){this.toggleAttribute("auto-focus",!!e)}get noStyle(){return this.hasAttribute("no-style")}set noStyle(e){this.toggleAttribute("no-style",!!e)}#i(e,t,i){let s={bubbles:!0,composed:!0,cancelable:!1,...i,detail:t},r=new CustomEvent(`${b}-${e}`,s);return this.dispatchEvent(r)}#r(e,t){let i={code:e,error:t};this.#i("error",i)}#s=async e=>{try{this.#h(await d(e))}catch(t){this.#r(o.ERROR_CODES.FILE_INPUT_CHANGE_FAILED,t)}};#n=()=>{this.disabled||this.#i("dragenter")};#a=e=>{if(e.preventDefault(),this.disabled){e.dataTransfer.dropEffect="none";return}e.dataTransfer.dropEffect="copy",this.#e&&(this.#e.classList.add("dropzone--dragover"),this.#e.part.add("dropzone--dragover")),this.#i("dragover")};#d=()=>{this.disabled||(this.#e&&(this.#e.classList.remove("dropzone--dragover"),this.#e.part.remove("dropzone--dragover")),this.#i("dragleave"))};#l=async e=>{if(!this.disabled){e.preventDefault(),this.#e&&(this.#e.classList.remove("dropzone--dragover"),this.#e.part.remove("dropzone--dragover"));try{this.#h(await d(e))}catch(t){this.#r(o.ERROR_CODES.DROP_EVENT_PROCESSING_FAILED,t)}}};#c=()=>{this.disabled||this.openFileDialog()};#p=e=>{this.disabled||(e.key===" "||e.key==="Enter")&&this.openFileDialog()};#h(e){if(!Array.isArray(e)||!e.length)return;let t=[],i=[],s=e.length;if(!this.multiple&&s>1)for(let r of e)i.push({file:r,errors:[{code:o.REJECTION_CODES.TOO_MANY_FILES,message:"Too many files selected. Only 1 file is allowed."}]});else if(this.multiple&&s>this.maxFiles)for(let r of e)i.push({file:r,errors:[{code:o.REJECTION_CODES.TOO_MANY_FILES,message:`Too many files selected. Only ${this.maxFiles} ${this.maxFiles>1?"files are":"file is"} allowed.`}]});else for(let r of e){let l=h(r,this.accept),c=r.size>this.maxSize,p=r.size<this.minSize;if(l&&!c&&!p)t.push(r);else{let n=[];l||n.push({code:o.REJECTION_CODES.INVALID_MIME_TYPE,message:`File type "${r.type}" is not accepted.`}),c&&n.push({code:o.REJECTION_CODES.FILE_TOO_LARGE,message:`File size ${r.size} exceeds the maximum size of ${this.maxSize}.`}),p&&n.push({code:o.REJECTION_CODES.FILE_TOO_SMALL,message:`File size ${r.size} is smaller than the minimum size of ${this.minSize}.`}),i.push({file:r,errors:n})}}this.#i("drop",{acceptedFiles:t,rejectedFiles:i}),t.length>0&&this.#i("drop-accepted",{acceptedFiles:t}),i.length>0&&this.#i("drop-rejected",{rejectedFiles:i}),this.#t&&(this.#t.value=this.#t.defaultValue)}openFileDialog(){if(!(this.disabled||!this.#t)){if("showPicker"in HTMLInputElement.prototype&&typeof this.#t.showPicker=="function"){try{this.#t.showPicker()}catch(e){this.#r(o.ERROR_CODES.FILE_DIALOG_OPEN_FAILED,e)}return}this.#t.click()}}#o(e){let t=this;if(Object.prototype.hasOwnProperty.call(t,e)){let i=t[e];delete t[e],t[e]=i}}static defineCustomElement(e=b){typeof window<"u"&&!window.customElements.get(e)&&window.customElements.define(e,o)}};a.defineCustomElement();export{a as FilesDropzone};
|
|
94
94
|
//# sourceMappingURL=files-dropzone-defined.js.map
|