@deepfuture/dui-components 0.0.12 → 0.0.14

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.
Files changed (89) hide show
  1. package/_deprecated/center/center.js +2 -2
  2. package/_deprecated/hstack/hstack.js +79 -33
  3. package/_deprecated/page-inset/page-inset.js +104 -56
  4. package/_deprecated/vstack/vstack.js +61 -19
  5. package/accordion/accordion-item.js +217 -147
  6. package/accordion/accordion.js +214 -149
  7. package/alert-dialog/alert-dialog-close.js +2 -2
  8. package/alert-dialog/alert-dialog-popup.js +230 -166
  9. package/alert-dialog/alert-dialog-trigger.js +2 -2
  10. package/alert-dialog/alert-dialog.js +128 -73
  11. package/avatar/avatar.js +175 -115
  12. package/badge/badge.js +2 -2
  13. package/breadcrumb/breadcrumb-ellipsis.js +2 -2
  14. package/breadcrumb/breadcrumb-item.js +2 -2
  15. package/breadcrumb/breadcrumb-link.js +2 -2
  16. package/breadcrumb/breadcrumb-page.js +2 -2
  17. package/breadcrumb/breadcrumb-separator.js +2 -2
  18. package/breadcrumb/breadcrumb.js +2 -2
  19. package/button/button.js +109 -65
  20. package/calendar/calendar.js +368 -290
  21. package/checkbox/checkbox-group.js +146 -87
  22. package/checkbox/checkbox.js +232 -167
  23. package/collapsible/collapsible.js +210 -132
  24. package/combobox/combobox.js +318 -252
  25. package/command/command-empty.js +67 -25
  26. package/command/command-group.js +87 -47
  27. package/command/command-input.js +84 -44
  28. package/command/command-item.js +168 -124
  29. package/command/command-list.js +60 -18
  30. package/command/command-separator.js +2 -2
  31. package/command/command-shortcut.js +2 -2
  32. package/command/command.js +297 -232
  33. package/data-table/data-table.js +225 -153
  34. package/dialog/dialog-close.js +2 -2
  35. package/dialog/dialog-popup.js +247 -181
  36. package/dialog/dialog-trigger.js +2 -2
  37. package/dialog/dialog.js +128 -73
  38. package/dropzone/dropzone.js +310 -249
  39. package/icon/icon.js +2 -2
  40. package/input/input.js +204 -143
  41. package/link/link.js +62 -24
  42. package/menu/menu-item.js +66 -24
  43. package/menu/menu.js +189 -136
  44. package/menubar/menubar.js +142 -91
  45. package/number-field/number-field.js +277 -204
  46. package/package.json +2 -3
  47. package/popover/popover-close.js +2 -2
  48. package/popover/popover-popup.js +126 -76
  49. package/popover/popover-trigger.js +2 -2
  50. package/popover/popover.js +181 -120
  51. package/portal/portal.js +128 -86
  52. package/preview-card/preview-card-popup.js +114 -66
  53. package/preview-card/preview-card-trigger.js +2 -2
  54. package/preview-card/preview-card.js +211 -142
  55. package/progress/progress.js +91 -45
  56. package/radio/radio-group.js +153 -90
  57. package/radio/radio.js +137 -94
  58. package/scroll-area/scroll-area.js +382 -283
  59. package/select/select.js +260 -203
  60. package/separator/separator.js +60 -18
  61. package/sidebar/sidebar-content.js +2 -2
  62. package/sidebar/sidebar-footer.js +2 -2
  63. package/sidebar/sidebar-group-label.js +2 -2
  64. package/sidebar/sidebar-group.js +2 -2
  65. package/sidebar/sidebar-header.js +2 -2
  66. package/sidebar/sidebar-inset.js +2 -2
  67. package/sidebar/sidebar-menu-button.js +118 -74
  68. package/sidebar/sidebar-menu-item.js +2 -2
  69. package/sidebar/sidebar-menu.js +2 -2
  70. package/sidebar/sidebar-provider.js +202 -129
  71. package/sidebar/sidebar-separator.js +2 -2
  72. package/sidebar/sidebar-trigger.js +2 -2
  73. package/sidebar/sidebar.js +150 -85
  74. package/slider/slider.js +217 -159
  75. package/spinner/spinner.js +70 -28
  76. package/switch/switch.js +174 -111
  77. package/tabs/tab.js +89 -47
  78. package/tabs/tabs-indicator.js +2 -2
  79. package/tabs/tabs-list.js +92 -54
  80. package/tabs/tabs-panel.js +90 -44
  81. package/tabs/tabs.js +130 -71
  82. package/textarea/textarea.js +153 -95
  83. package/toggle/toggle-group.js +184 -125
  84. package/toggle/toggle.js +131 -76
  85. package/toolbar/toolbar.js +79 -33
  86. package/tooltip/tooltip-popup.js +108 -60
  87. package/tooltip/tooltip-trigger.js +93 -55
  88. package/tooltip/tooltip.js +225 -154
  89. package/trunc/trunc.js +78 -34
@@ -1,13 +1,44 @@
1
1
  /** Ported from original DUI: deep-future-app/app/client/components/dui/dropzone */
2
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6
- return c > 3 && r && Object.defineProperty(target, key, r), r;
2
+ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
3
+ function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
4
+ var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
5
+ var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
6
+ var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
7
+ var _, done = false;
8
+ for (var i = decorators.length - 1; i >= 0; i--) {
9
+ var context = {};
10
+ for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
11
+ for (var p in contextIn.access) context.access[p] = contextIn.access[p];
12
+ context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
13
+ var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
14
+ if (kind === "accessor") {
15
+ if (result === void 0) continue;
16
+ if (result === null || typeof result !== "object") throw new TypeError("Object expected");
17
+ if (_ = accept(result.get)) descriptor.get = _;
18
+ if (_ = accept(result.set)) descriptor.set = _;
19
+ if (_ = accept(result.init)) initializers.unshift(_);
20
+ }
21
+ else if (_ = accept(result)) {
22
+ if (kind === "field") initializers.unshift(_);
23
+ else descriptor[key] = _;
24
+ }
25
+ }
26
+ if (target) Object.defineProperty(target, contextIn.name, descriptor);
27
+ done = true;
28
+ };
29
+ var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
30
+ var useValue = arguments.length > 2;
31
+ for (var i = 0; i < initializers.length; i++) {
32
+ value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
33
+ }
34
+ return useValue ? value : void 0;
35
+ };
36
+ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
37
+ if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
38
+ return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
7
39
  };
8
- var _a;
9
40
  import { css, html, LitElement } from "lit";
10
- import { property } from "lit/decorators.js";
41
+ import { property, state } from "lit/decorators.js";
11
42
  import { base } from "@deepfuture/dui-core/base";
12
43
  import { customEvent } from "@deepfuture/dui-core/event";
13
44
  // Event Factories
@@ -67,240 +98,293 @@ const styles = css `
67
98
  * @fires dragleave - File dragged away from the dropzone.
68
99
  * @fires dropzone-error - Internal error (e.g. file dialog failure).
69
100
  */
70
- export class DuiDropzone extends LitElement {
71
- static { this.tagName = "dui-dropzone"; }
72
- static { this.styles = [base, styles]; }
73
- static { this.ERROR_CODES = {
74
- FILE_DIALOG_OPEN_FAILED: "FILE_DIALOG_OPEN_FAILED",
75
- FILE_PROCESSING_FAILED: "FILE_PROCESSING_FAILED",
76
- }; }
77
- static { this.REJECTION_CODES = {
78
- TOO_MANY_FILES: "TOO_MANY_FILES",
79
- FILE_TOO_LARGE: "FILE_TOO_LARGE",
80
- FILE_TOO_SMALL: "FILE_TOO_SMALL",
81
- FILE_INVALID_TYPE: "FILE_INVALID_TYPE",
82
- }; }
83
- #accept_accessor_storage;
84
- /** Accepted file types (e.g. "image/*,.pdf"). */
85
- get accept() { return this.#accept_accessor_storage; }
86
- set accept(value) { this.#accept_accessor_storage = value; }
87
- #multiple_accessor_storage = false;
88
- /** Allow multiple files. */
89
- get multiple() { return this.#multiple_accessor_storage; }
90
- set multiple(value) { this.#multiple_accessor_storage = value; }
91
- #disabled_accessor_storage = false;
92
- /** Disable the dropzone. */
93
- get disabled() { return this.#disabled_accessor_storage; }
94
- set disabled(value) { this.#disabled_accessor_storage = value; }
95
- #maxFiles_accessor_storage = Infinity;
96
- /** Maximum number of files allowed. */
97
- get maxFiles() { return this.#maxFiles_accessor_storage; }
98
- set maxFiles(value) { this.#maxFiles_accessor_storage = value; }
99
- #maxSize_accessor_storage = Infinity;
100
- /** Maximum file size in bytes. */
101
- get maxSize() { return this.#maxSize_accessor_storage; }
102
- set maxSize(value) { this.#maxSize_accessor_storage = value; }
103
- #minSize_accessor_storage = 0;
104
- /** Minimum file size in bytes. */
105
- get minSize() { return this.#minSize_accessor_storage; }
106
- set minSize(value) { this.#minSize_accessor_storage = value; }
107
- #autoFocus_accessor_storage = false;
108
- /** Auto-focus the dropzone on mount. */
109
- get autoFocus() { return this.#autoFocus_accessor_storage; }
110
- set autoFocus(value) { this.#autoFocus_accessor_storage = value; }
111
- #noStyle_accessor_storage = false;
112
- /** Disable default dropzone styling. */
113
- get noStyle() { return this.#noStyle_accessor_storage; }
114
- set noStyle(value) { this.#noStyle_accessor_storage = value; }
115
- #isDragOver_accessor_storage = false;
116
- get #isDragOver() { return this.#isDragOver_accessor_storage; }
117
- set #isDragOver(value) { this.#isDragOver_accessor_storage = value; }
118
- connectedCallback() {
119
- super.connectedCallback();
120
- if (this.autoFocus && !this.disabled) {
121
- this.updateComplete.then(() => {
122
- this.shadowRoot?.querySelector("[part='root']")?.focus();
123
- });
124
- }
125
- }
126
- /** Opens the native file dialog programmatically. */
127
- openFileDialog() {
128
- if (this.disabled)
129
- return;
130
- const input = this.shadowRoot?.querySelector('input[type="file"]');
131
- if (!input)
132
- return;
133
- try {
134
- input.click();
135
- }
136
- catch (error) {
137
- this.dispatchEvent(dropzoneErrorEvent({
138
- error,
139
- code: _a.ERROR_CODES.FILE_DIALOG_OPEN_FAILED,
140
- }));
101
+ let DuiDropzone = (() => {
102
+ var _a;
103
+ let _classSuper = LitElement;
104
+ let _accept_decorators;
105
+ let _accept_initializers = [];
106
+ let _accept_extraInitializers = [];
107
+ let _multiple_decorators;
108
+ let _multiple_initializers = [];
109
+ let _multiple_extraInitializers = [];
110
+ let _disabled_decorators;
111
+ let _disabled_initializers = [];
112
+ let _disabled_extraInitializers = [];
113
+ let _maxFiles_decorators;
114
+ let _maxFiles_initializers = [];
115
+ let _maxFiles_extraInitializers = [];
116
+ let _maxSize_decorators;
117
+ let _maxSize_initializers = [];
118
+ let _maxSize_extraInitializers = [];
119
+ let _minSize_decorators;
120
+ let _minSize_initializers = [];
121
+ let _minSize_extraInitializers = [];
122
+ let _autoFocus_decorators;
123
+ let _autoFocus_initializers = [];
124
+ let _autoFocus_extraInitializers = [];
125
+ let _noStyle_decorators;
126
+ let _noStyle_initializers = [];
127
+ let _noStyle_extraInitializers = [];
128
+ let _private_isDragOver_decorators;
129
+ let _private_isDragOver_initializers = [];
130
+ let _private_isDragOver_extraInitializers = [];
131
+ let _private_isDragOver_descriptor;
132
+ return class DuiDropzone extends _classSuper {
133
+ static {
134
+ const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
135
+ _accept_decorators = [property({ type: String, reflect: true })];
136
+ _multiple_decorators = [property({ type: Boolean, reflect: true })];
137
+ _disabled_decorators = [property({ type: Boolean, reflect: true })];
138
+ _maxFiles_decorators = [property({ type: Number, reflect: true, attribute: "max-files" })];
139
+ _maxSize_decorators = [property({ type: Number, reflect: true, attribute: "max-size" })];
140
+ _minSize_decorators = [property({ type: Number, reflect: true, attribute: "min-size" })];
141
+ _autoFocus_decorators = [property({ type: Boolean, reflect: true, attribute: "auto-focus" })];
142
+ _noStyle_decorators = [property({ type: Boolean, reflect: true, attribute: "no-style" })];
143
+ _private_isDragOver_decorators = [state()];
144
+ __esDecorate(this, null, _accept_decorators, { kind: "accessor", name: "accept", static: false, private: false, access: { has: obj => "accept" in obj, get: obj => obj.accept, set: (obj, value) => { obj.accept = value; } }, metadata: _metadata }, _accept_initializers, _accept_extraInitializers);
145
+ __esDecorate(this, null, _multiple_decorators, { kind: "accessor", name: "multiple", static: false, private: false, access: { has: obj => "multiple" in obj, get: obj => obj.multiple, set: (obj, value) => { obj.multiple = value; } }, metadata: _metadata }, _multiple_initializers, _multiple_extraInitializers);
146
+ __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
147
+ __esDecorate(this, null, _maxFiles_decorators, { kind: "accessor", name: "maxFiles", static: false, private: false, access: { has: obj => "maxFiles" in obj, get: obj => obj.maxFiles, set: (obj, value) => { obj.maxFiles = value; } }, metadata: _metadata }, _maxFiles_initializers, _maxFiles_extraInitializers);
148
+ __esDecorate(this, null, _maxSize_decorators, { kind: "accessor", name: "maxSize", static: false, private: false, access: { has: obj => "maxSize" in obj, get: obj => obj.maxSize, set: (obj, value) => { obj.maxSize = value; } }, metadata: _metadata }, _maxSize_initializers, _maxSize_extraInitializers);
149
+ __esDecorate(this, null, _minSize_decorators, { kind: "accessor", name: "minSize", static: false, private: false, access: { has: obj => "minSize" in obj, get: obj => obj.minSize, set: (obj, value) => { obj.minSize = value; } }, metadata: _metadata }, _minSize_initializers, _minSize_extraInitializers);
150
+ __esDecorate(this, null, _autoFocus_decorators, { kind: "accessor", name: "autoFocus", static: false, private: false, access: { has: obj => "autoFocus" in obj, get: obj => obj.autoFocus, set: (obj, value) => { obj.autoFocus = value; } }, metadata: _metadata }, _autoFocus_initializers, _autoFocus_extraInitializers);
151
+ __esDecorate(this, null, _noStyle_decorators, { kind: "accessor", name: "noStyle", static: false, private: false, access: { has: obj => "noStyle" in obj, get: obj => obj.noStyle, set: (obj, value) => { obj.noStyle = value; } }, metadata: _metadata }, _noStyle_initializers, _noStyle_extraInitializers);
152
+ __esDecorate(this, _private_isDragOver_descriptor = { get: __setFunctionName(function () { return this.#isDragOver_accessor_storage; }, "#isDragOver", "get"), set: __setFunctionName(function (value) { this.#isDragOver_accessor_storage = value; }, "#isDragOver", "set") }, _private_isDragOver_decorators, { kind: "accessor", name: "#isDragOver", static: false, private: true, access: { has: obj => #isDragOver in obj, get: obj => obj.#isDragOver, set: (obj, value) => { obj.#isDragOver = value; } }, metadata: _metadata }, _private_isDragOver_initializers, _private_isDragOver_extraInitializers);
153
+ if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
141
154
  }
142
- }
143
- #handleDragEnter = (e) => {
144
- e.preventDefault();
145
- e.stopPropagation();
146
- if (this.disabled)
147
- return;
148
- this.#isDragOver = true;
149
- this.dispatchEvent(dropzoneDragEnterEvent());
150
- };
151
- #handleDragOver = (e) => {
152
- e.preventDefault();
153
- e.stopPropagation();
154
- if (this.disabled)
155
- return;
156
- if (e.dataTransfer) {
157
- e.dataTransfer.dropEffect = "copy";
158
- }
159
- this.dispatchEvent(dropzoneDragOverEvent());
160
- };
161
- #handleDragLeave = (e) => {
162
- e.preventDefault();
163
- e.stopPropagation();
164
- if (this.disabled)
165
- return;
166
- this.#isDragOver = false;
167
- this.dispatchEvent(dropzoneDragLeaveEvent());
168
- };
169
- #handleDrop = (e) => {
170
- e.preventDefault();
171
- e.stopPropagation();
172
- if (this.disabled)
173
- return;
174
- this.#isDragOver = false;
175
- try {
176
- const files = Array.from(e.dataTransfer?.files ?? []);
177
- this.#processFiles(files);
155
+ static tagName = "dui-dropzone";
156
+ static styles = [base, styles];
157
+ static ERROR_CODES = {
158
+ FILE_DIALOG_OPEN_FAILED: "FILE_DIALOG_OPEN_FAILED",
159
+ FILE_PROCESSING_FAILED: "FILE_PROCESSING_FAILED",
160
+ };
161
+ static REJECTION_CODES = {
162
+ TOO_MANY_FILES: "TOO_MANY_FILES",
163
+ FILE_TOO_LARGE: "FILE_TOO_LARGE",
164
+ FILE_TOO_SMALL: "FILE_TOO_SMALL",
165
+ FILE_INVALID_TYPE: "FILE_INVALID_TYPE",
166
+ };
167
+ #accept_accessor_storage = __runInitializers(this, _accept_initializers, void 0);
168
+ /** Accepted file types (e.g. "image/*,.pdf"). */
169
+ get accept() { return this.#accept_accessor_storage; }
170
+ set accept(value) { this.#accept_accessor_storage = value; }
171
+ #multiple_accessor_storage = (__runInitializers(this, _accept_extraInitializers), __runInitializers(this, _multiple_initializers, false));
172
+ /** Allow multiple files. */
173
+ get multiple() { return this.#multiple_accessor_storage; }
174
+ set multiple(value) { this.#multiple_accessor_storage = value; }
175
+ #disabled_accessor_storage = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _disabled_initializers, false));
176
+ /** Disable the dropzone. */
177
+ get disabled() { return this.#disabled_accessor_storage; }
178
+ set disabled(value) { this.#disabled_accessor_storage = value; }
179
+ #maxFiles_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _maxFiles_initializers, Infinity));
180
+ /** Maximum number of files allowed. */
181
+ get maxFiles() { return this.#maxFiles_accessor_storage; }
182
+ set maxFiles(value) { this.#maxFiles_accessor_storage = value; }
183
+ #maxSize_accessor_storage = (__runInitializers(this, _maxFiles_extraInitializers), __runInitializers(this, _maxSize_initializers, Infinity));
184
+ /** Maximum file size in bytes. */
185
+ get maxSize() { return this.#maxSize_accessor_storage; }
186
+ set maxSize(value) { this.#maxSize_accessor_storage = value; }
187
+ #minSize_accessor_storage = (__runInitializers(this, _maxSize_extraInitializers), __runInitializers(this, _minSize_initializers, 0));
188
+ /** Minimum file size in bytes. */
189
+ get minSize() { return this.#minSize_accessor_storage; }
190
+ set minSize(value) { this.#minSize_accessor_storage = value; }
191
+ #autoFocus_accessor_storage = (__runInitializers(this, _minSize_extraInitializers), __runInitializers(this, _autoFocus_initializers, false));
192
+ /** Auto-focus the dropzone on mount. */
193
+ get autoFocus() { return this.#autoFocus_accessor_storage; }
194
+ set autoFocus(value) { this.#autoFocus_accessor_storage = value; }
195
+ #noStyle_accessor_storage = (__runInitializers(this, _autoFocus_extraInitializers), __runInitializers(this, _noStyle_initializers, false));
196
+ /** Disable default dropzone styling. */
197
+ get noStyle() { return this.#noStyle_accessor_storage; }
198
+ set noStyle(value) { this.#noStyle_accessor_storage = value; }
199
+ #isDragOver_accessor_storage = (__runInitializers(this, _noStyle_extraInitializers), __runInitializers(this, _private_isDragOver_initializers, false));
200
+ get #isDragOver() { return _private_isDragOver_descriptor.get.call(this); }
201
+ set #isDragOver(value) { return _private_isDragOver_descriptor.set.call(this, value); }
202
+ connectedCallback() {
203
+ super.connectedCallback();
204
+ if (this.autoFocus && !this.disabled) {
205
+ this.updateComplete.then(() => {
206
+ this.shadowRoot?.querySelector("[part='root']")?.focus();
207
+ });
208
+ }
178
209
  }
179
- catch (error) {
180
- this.dispatchEvent(dropzoneErrorEvent({
181
- error,
182
- code: _a.ERROR_CODES.FILE_PROCESSING_FAILED,
183
- }));
210
+ /** Opens the native file dialog programmatically. */
211
+ openFileDialog() {
212
+ if (this.disabled)
213
+ return;
214
+ const input = this.shadowRoot?.querySelector('input[type="file"]');
215
+ if (!input)
216
+ return;
217
+ try {
218
+ input.click();
219
+ }
220
+ catch (error) {
221
+ this.dispatchEvent(dropzoneErrorEvent({
222
+ error,
223
+ code: DuiDropzone.ERROR_CODES.FILE_DIALOG_OPEN_FAILED,
224
+ }));
225
+ }
184
226
  }
185
- };
186
- #handleClick = () => {
187
- if (this.disabled)
188
- return;
189
- this.openFileDialog();
190
- };
191
- #handleKeyDown = (e) => {
192
- if (this.disabled)
193
- return;
194
- if (e.key === "Enter" || e.key === " ") {
227
+ #handleDragEnter = (__runInitializers(this, _private_isDragOver_extraInitializers), (e) => {
228
+ e.preventDefault();
229
+ e.stopPropagation();
230
+ if (this.disabled)
231
+ return;
232
+ this.#isDragOver = true;
233
+ this.dispatchEvent(dropzoneDragEnterEvent());
234
+ });
235
+ #handleDragOver = (e) => {
195
236
  e.preventDefault();
237
+ e.stopPropagation();
238
+ if (this.disabled)
239
+ return;
240
+ if (e.dataTransfer) {
241
+ e.dataTransfer.dropEffect = "copy";
242
+ }
243
+ this.dispatchEvent(dropzoneDragOverEvent());
244
+ };
245
+ #handleDragLeave = (e) => {
246
+ e.preventDefault();
247
+ e.stopPropagation();
248
+ if (this.disabled)
249
+ return;
250
+ this.#isDragOver = false;
251
+ this.dispatchEvent(dropzoneDragLeaveEvent());
252
+ };
253
+ #handleDrop = (e) => {
254
+ e.preventDefault();
255
+ e.stopPropagation();
256
+ if (this.disabled)
257
+ return;
258
+ this.#isDragOver = false;
259
+ try {
260
+ const files = Array.from(e.dataTransfer?.files ?? []);
261
+ this.#processFiles(files);
262
+ }
263
+ catch (error) {
264
+ this.dispatchEvent(dropzoneErrorEvent({
265
+ error,
266
+ code: DuiDropzone.ERROR_CODES.FILE_PROCESSING_FAILED,
267
+ }));
268
+ }
269
+ };
270
+ #handleClick = () => {
271
+ if (this.disabled)
272
+ return;
196
273
  this.openFileDialog();
197
- }
198
- };
199
- #handleInputChange = (e) => {
200
- if (this.disabled)
201
- return;
202
- const input = e.target;
203
- const files = Array.from(input.files ?? []);
204
- try {
205
- this.#processFiles(files);
206
- }
207
- catch (error) {
208
- this.dispatchEvent(dropzoneErrorEvent({
209
- error,
210
- code: _a.ERROR_CODES.FILE_PROCESSING_FAILED,
211
- }));
212
- }
213
- finally {
214
- input.value = "";
215
- }
216
- };
217
- #processFiles(files) {
218
- const { acceptedFiles, rejectedFiles } = this.#validateFiles(files);
219
- this.dispatchEvent(dropzoneDropEvent({ acceptedFiles, rejectedFiles }));
220
- if (acceptedFiles.length > 0) {
221
- this.dispatchEvent(dropAcceptedEvent({ acceptedFiles }));
222
- }
223
- if (rejectedFiles.length > 0) {
224
- this.dispatchEvent(dropRejectedEvent({ rejectedFiles }));
225
- }
226
- }
227
- #validateFiles(files) {
228
- const acceptedFiles = [];
229
- const rejectedFiles = [];
230
- const maxAllowed = this.multiple ? this.maxFiles : 1;
231
- if (files.length > maxAllowed) {
232
- for (const file of files) {
233
- rejectedFiles.push({
234
- file,
235
- errors: [
236
- {
237
- code: _a.REJECTION_CODES.TOO_MANY_FILES,
238
- message: this.multiple
239
- ? `Too many files. Maximum allowed is ${this.maxFiles}.`
240
- : "Multiple files not allowed.",
241
- },
242
- ],
243
- });
274
+ };
275
+ #handleKeyDown = (e) => {
276
+ if (this.disabled)
277
+ return;
278
+ if (e.key === "Enter" || e.key === " ") {
279
+ e.preventDefault();
280
+ this.openFileDialog();
244
281
  }
245
- return { acceptedFiles, rejectedFiles };
246
- }
247
- for (const file of files) {
248
- const errors = [];
249
- if (file.size > this.maxSize) {
250
- errors.push({
251
- code: _a.REJECTION_CODES.FILE_TOO_LARGE,
252
- message: `File is too large. Maximum size is ${this.maxSize} bytes.`,
253
- });
282
+ };
283
+ #handleInputChange = (e) => {
284
+ if (this.disabled)
285
+ return;
286
+ const input = e.target;
287
+ const files = Array.from(input.files ?? []);
288
+ try {
289
+ this.#processFiles(files);
254
290
  }
255
- if (file.size < this.minSize) {
256
- errors.push({
257
- code: _a.REJECTION_CODES.FILE_TOO_SMALL,
258
- message: `File is too small. Minimum size is ${this.minSize} bytes.`,
259
- });
291
+ catch (error) {
292
+ this.dispatchEvent(dropzoneErrorEvent({
293
+ error,
294
+ code: DuiDropzone.ERROR_CODES.FILE_PROCESSING_FAILED,
295
+ }));
260
296
  }
261
- if (this.accept && !this.#isValidFileType(file)) {
262
- errors.push({
263
- code: _a.REJECTION_CODES.FILE_INVALID_TYPE,
264
- message: `File type not accepted. Allowed types: ${this.accept}`,
265
- });
297
+ finally {
298
+ input.value = "";
266
299
  }
267
- if (errors.length > 0) {
268
- rejectedFiles.push({ file, errors });
300
+ };
301
+ #processFiles(files) {
302
+ const { acceptedFiles, rejectedFiles } = this.#validateFiles(files);
303
+ this.dispatchEvent(dropzoneDropEvent({ acceptedFiles, rejectedFiles }));
304
+ if (acceptedFiles.length > 0) {
305
+ this.dispatchEvent(dropAcceptedEvent({ acceptedFiles }));
269
306
  }
270
- else {
271
- acceptedFiles.push(file);
307
+ if (rejectedFiles.length > 0) {
308
+ this.dispatchEvent(dropRejectedEvent({ rejectedFiles }));
272
309
  }
273
310
  }
274
- return { acceptedFiles, rejectedFiles };
275
- }
276
- #isValidFileType(file) {
277
- if (!this.accept)
278
- return true;
279
- const acceptedTypes = this.accept
280
- .split(",")
281
- .map((type) => type.trim().toLowerCase());
282
- for (const acceptedType of acceptedTypes) {
283
- if (acceptedType.startsWith(".")) {
284
- if (file.name.toLowerCase().endsWith(acceptedType)) {
285
- return true;
311
+ #validateFiles(files) {
312
+ const acceptedFiles = [];
313
+ const rejectedFiles = [];
314
+ const maxAllowed = this.multiple ? this.maxFiles : 1;
315
+ if (files.length > maxAllowed) {
316
+ for (const file of files) {
317
+ rejectedFiles.push({
318
+ file,
319
+ errors: [
320
+ {
321
+ code: DuiDropzone.REJECTION_CODES.TOO_MANY_FILES,
322
+ message: this.multiple
323
+ ? `Too many files. Maximum allowed is ${this.maxFiles}.`
324
+ : "Multiple files not allowed.",
325
+ },
326
+ ],
327
+ });
286
328
  }
329
+ return { acceptedFiles, rejectedFiles };
287
330
  }
288
- else if (acceptedType.endsWith("/*")) {
289
- const baseType = acceptedType.slice(0, -2);
290
- if (file.type.toLowerCase().startsWith(baseType)) {
291
- return true;
331
+ for (const file of files) {
332
+ const errors = [];
333
+ if (file.size > this.maxSize) {
334
+ errors.push({
335
+ code: DuiDropzone.REJECTION_CODES.FILE_TOO_LARGE,
336
+ message: `File is too large. Maximum size is ${this.maxSize} bytes.`,
337
+ });
338
+ }
339
+ if (file.size < this.minSize) {
340
+ errors.push({
341
+ code: DuiDropzone.REJECTION_CODES.FILE_TOO_SMALL,
342
+ message: `File is too small. Minimum size is ${this.minSize} bytes.`,
343
+ });
344
+ }
345
+ if (this.accept && !this.#isValidFileType(file)) {
346
+ errors.push({
347
+ code: DuiDropzone.REJECTION_CODES.FILE_INVALID_TYPE,
348
+ message: `File type not accepted. Allowed types: ${this.accept}`,
349
+ });
350
+ }
351
+ if (errors.length > 0) {
352
+ rejectedFiles.push({ file, errors });
353
+ }
354
+ else {
355
+ acceptedFiles.push(file);
292
356
  }
293
357
  }
294
- else {
295
- if (file.type.toLowerCase() === acceptedType) {
296
- return true;
358
+ return { acceptedFiles, rejectedFiles };
359
+ }
360
+ #isValidFileType(file) {
361
+ if (!this.accept)
362
+ return true;
363
+ const acceptedTypes = this.accept
364
+ .split(",")
365
+ .map((type) => type.trim().toLowerCase());
366
+ for (const acceptedType of acceptedTypes) {
367
+ if (acceptedType.startsWith(".")) {
368
+ if (file.name.toLowerCase().endsWith(acceptedType)) {
369
+ return true;
370
+ }
371
+ }
372
+ else if (acceptedType.endsWith("/*")) {
373
+ const baseType = acceptedType.slice(0, -2);
374
+ if (file.type.toLowerCase().startsWith(baseType)) {
375
+ return true;
376
+ }
377
+ }
378
+ else {
379
+ if (file.type.toLowerCase() === acceptedType) {
380
+ return true;
381
+ }
297
382
  }
298
383
  }
384
+ return false;
299
385
  }
300
- return false;
301
- }
302
- render() {
303
- return html `
386
+ render() {
387
+ return html `
304
388
  <div
305
389
  part="root"
306
390
  tabindex="${this.disabled ? -1 : 0}"
@@ -327,30 +411,7 @@ export class DuiDropzone extends LitElement {
327
411
  hidden
328
412
  />
329
413
  `;
330
- }
331
- }
332
- _a = DuiDropzone;
333
- __decorate([
334
- property({ type: String, reflect: true })
335
- ], DuiDropzone.prototype, "accept", null);
336
- __decorate([
337
- property({ type: Boolean, reflect: true })
338
- ], DuiDropzone.prototype, "multiple", null);
339
- __decorate([
340
- property({ type: Boolean, reflect: true })
341
- ], DuiDropzone.prototype, "disabled", null);
342
- __decorate([
343
- property({ type: Number, reflect: true, attribute: "max-files" })
344
- ], DuiDropzone.prototype, "maxFiles", null);
345
- __decorate([
346
- property({ type: Number, reflect: true, attribute: "max-size" })
347
- ], DuiDropzone.prototype, "maxSize", null);
348
- __decorate([
349
- property({ type: Number, reflect: true, attribute: "min-size" })
350
- ], DuiDropzone.prototype, "minSize", null);
351
- __decorate([
352
- property({ type: Boolean, reflect: true, attribute: "auto-focus" })
353
- ], DuiDropzone.prototype, "autoFocus", null);
354
- __decorate([
355
- property({ type: Boolean, reflect: true, attribute: "no-style" })
356
- ], DuiDropzone.prototype, "noStyle", null);
414
+ }
415
+ };
416
+ })();
417
+ export { DuiDropzone };
package/icon/icon.js CHANGED
@@ -26,8 +26,8 @@ const styles = css `
26
26
  * @cssprop [--icon-color=currentColor] - Icon color.
27
27
  */
28
28
  export class DuiIcon extends LitElement {
29
- static { this.tagName = "dui-icon"; }
30
- static { this.styles = [base, styles]; }
29
+ static tagName = "dui-icon";
30
+ static styles = [base, styles];
31
31
  render() {
32
32
  return html `<slot></slot>`;
33
33
  }