@progress/kendo-themes-html 5.6.1-dev.3 → 5.6.1-dev.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/datetime-selector/tests/datetime-selector.js +1 -1
  2. package/dist/datetime-selector/tests/datetime-selector.js.map +1 -1
  3. package/dist/dialog/tests/dialog-in-window.js +2 -2
  4. package/dist/dialog/tests/dialog-in-window.js.map +2 -2
  5. package/dist/editor/tests/editor-jquery.js +49 -49
  6. package/dist/editor/tests/editor-jquery.js.map +2 -2
  7. package/dist/icon/tests/icons.js +5 -5
  8. package/dist/icon/tests/icons.js.map +1 -1
  9. package/dist/scheduler/tests/scheduler-angular-day-rtl.js +11 -11
  10. package/dist/scheduler/tests/scheduler-angular-day-rtl.js.map +2 -2
  11. package/dist/scheduler/tests/scheduler-angular-rtl.js +3 -3
  12. package/dist/scheduler/tests/scheduler-angular-rtl.js.map +2 -2
  13. package/dist/scheduler/tests/scheduler-angular.js +3 -3
  14. package/dist/scheduler/tests/scheduler-angular.js.map +2 -2
  15. package/dist/scheduler/tests/scheduler-jquery-agenda.js +2 -2
  16. package/dist/scheduler/tests/scheduler-jquery-agenda.js.map +1 -1
  17. package/dist/time-selector/tests/time-selector.js +2 -2
  18. package/dist/time-selector/tests/time-selector.js.map +1 -1
  19. package/dist/time-selector/time-selector.js +1 -1
  20. package/dist/time-selector/time-selector.js.map +1 -1
  21. package/dist/timepicker/tests/timepicker-adaptive.js +1 -1
  22. package/dist/timepicker/tests/timepicker-adaptive.js.map +1 -1
  23. package/dist/upload/tests/upload-react.js +62 -312
  24. package/dist/upload/tests/upload-react.js.map +4 -4
  25. package/package.json +3 -3
  26. package/src/datetime-selector/tests/datetime-selector.tsx +1 -1
  27. package/src/dialog/tests/dialog-in-window.tsx +2 -2
  28. package/src/editor/tests/editor-jquery.tsx +49 -49
  29. package/src/icon/tests/icons.tsx +5 -5
  30. package/src/scheduler/tests/scheduler-angular-day-rtl.tsx +11 -11
  31. package/src/scheduler/tests/scheduler-angular-rtl.tsx +3 -3
  32. package/src/scheduler/tests/scheduler-angular.tsx +3 -3
  33. package/src/scheduler/tests/scheduler-jquery-agenda.tsx +2 -2
  34. package/src/time-selector/tests/time-selector.tsx +2 -2
  35. package/src/time-selector/time-selector.tsx +1 -1
  36. package/src/upload/tests/upload-react.tsx +29 -236
package/src/upload/tests/upload-react.tsx CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
2
  import ReactDOM from 'react-dom/client';
3
3
  import { Button } from '../../button';
4
- import { ActionButtons } from '../../action-buttons';
5
4
  import { Icon } from '../../icon';
6
5
 
7
6
  const root = ReactDOM.createRoot(
@@ -14,277 +13,71 @@ const style = `
14
13
  }
15
14
  `;
16
15
 
17
- const progressStyle = {
18
- width: '100%',
19
- transition: "opacity 0.5s ease-in-out 0s",
20
- };
21
-
22
- const progress70Style = {
23
- width: "70%",
24
- transition: "opacity 0.5s ease-in-out 0s",
25
- };
26
-
27
- const progress17Style = {
28
- width: "17%",
29
- transition: "opacity 0.5s ease-in-out 0s",
30
- };
31
-
32
- const progress0Style = {
33
- width: "0%",
34
- transition: "opacity 0.5s ease-in-out 0s",
35
- };
36
-
37
-
38
16
  root.render(
39
17
  <>
40
18
  <style>{style}</style>
41
19
  <div id="test-area" className="k-d-grid k-grid-cols-2">
20
+
42
21
  <section>
43
- <div className="k-widget k-upload k-header">
22
+ <div className="k-widget k-upload">
44
23
  <div className="k-dropzone">
45
24
  <Button className="k-upload-button">Select files...</Button>
46
- <div className="k-upload-status k-upload-status-total"><Icon name="loading"></Icon>Uploading...</div>
25
+ <em className="k-dropzone-hint k-hidden">Drop files here to upload</em><strong className="k-upload-status k-upload-status-total"><Icon name="upload"></Icon>Uploading...</strong>
47
26
  </div>
27
+
48
28
  <ul className="k-upload-files k-reset">
49
29
  <li className="k-file k-file-invalid">
50
30
  <div className="k-file-single">
51
- <span className="k-progress" style={progress0Style}></span>
52
- <span className="k-file-invalid-extension-wrapper">
53
- <span className="k-file-invalid-icon">!</span>
54
- <span className="k-file-state"></span>
55
- </span>
31
+ <div className="k-progressbar k-hidden"><span className="k-progress" style={{ width: "60%" }}></span></div>
32
+ <span className="k-file-invalid-group-wrapper"><Icon className="k-file-group" name="file-image"></Icon><span className="k-file-state"></span></span>
56
33
  <span className="k-file-name-size-wrapper">
57
- <span className="k-file-name k-file-name-invalid">Video_File_with_Very_Very_Very_Very_Long_Name.psd</span>
58
- <span className="k-file-validation-message">File type not allowed.</span>
34
+ <span className="k-file-name k-file-name-invalid">Video_File_with_Very_Very_Very_Very_Long_Name.jpg</span>
35
+ <span className="k-file-validation-message k-text-error">File type not allowed.</span>
59
36
  </span>
60
37
  <strong className="k-upload-status">
61
- <Button fillMode="flat" className="k-upload-action" icon="close"></Button>
38
+ <Button icon="close" fillMode="flat" className="k-upload-action"></Button>
62
39
  </strong>
63
40
  </div>
64
41
  </li>
65
42
  <li className="k-file k-file-progress">
66
- <div className="k-file-single">
67
- <span className="k-progress" style={progress70Style}></span>
68
- <span className="k-file-extension-wrapper">
69
- <span className="k-file-extension">mkv</span>
70
- <span className="k-file-state"></span>
71
- </span>
72
- <span className="k-file-name-size-wrapper">
73
- <span className="k-file-name">Document.mkv</span>
74
- <span className="k-file-size">156.33 MB</span>
75
- </span>
76
- <strong className="k-upload-status">
77
- <span className="k-upload-pct">70%</span>
78
- <Button fillMode="flat" className="k-upload-action" icon="cancel"></Button>
79
- </strong>
80
- </div>
43
+ <div className="k-progressbar"><span className="k-progress" style={{ width: "60%" }}></span></div>
44
+ <span className="k-file-group-wrapper"><Icon className="k-file-group" name="file-pdf"></Icon><span className="k-file-state">uploaded</span></span>
45
+ <span className="k-file-name-size-wrapper">
46
+ <span className="k-file-name">Document.txt</span>
47
+ <span className="k-file-size">225.68 KB</span>
48
+ </span>
49
+ <strong className="k-upload-status">
50
+ <Button icon="close" fillMode="flat" className="k-upload-action"></Button>
51
+ </strong>
81
52
  </li>
82
53
  </ul>
83
54
  </div>
84
55
  </section>
85
56
 
86
57
  <section>
87
- <div className="k-widget k-upload k-header">
58
+ <div className="k-widget k-upload">
88
59
  <div className="k-dropzone">
89
60
  <Button className="k-upload-button">Select files...</Button>
90
- <div className="k-upload-status k-upload-status-total"><Icon name="check"></Icon>Done</div>
91
- </div>
92
- <ul className="k-upload-files k-reset">
93
- <li className="k-file k-file-success">
94
- <div className="k-file-single">
95
- <span className="k-progress" style={progressStyle}></span>
96
- <span className="k-file-extension-wrapper">
97
- <span className="k-file-extension">png</span>
98
- <span className="k-file-state"></span>
99
- </span>
100
- <span className="k-file-name-size-wrapper">
101
- <span className="k-file-name">Image1_With_Very_Very_Very_Very_Long_Name.png</span>
102
- <span className="k-file-size">24.34 KB</span>
103
- </span>
104
- <strong className="k-upload-status">
105
- <Button fillMode="flat" className="k-upload-action" icon="close"></Button>
106
- </strong>
107
- </div>
108
- </li>
109
- <li className="k-file k-file-success">
110
- <div className="k-file-single">
111
- <span className="k-progress" style={progressStyle}></span>
112
- <span className="k-file-extension-wrapper">
113
- <span className="k-file-extension">png</span>
114
- <span className="k-file-state"></span>
115
- </span>
116
- <span className="k-file-name-size-wrapper">
117
- <span className="k-file-name">Image2.png</span>
118
- <span className="k-file-size">19.85 KB</span>
119
- </span>
120
- <strong className="k-upload-status">
121
- <Button fillMode="flat" className="k-upload-action" icon="close"></Button>
122
- </strong>
123
- </div>
124
- </li>
125
- </ul>
126
- </div>
127
- </section>
128
-
129
- <section>
130
- <div className="k-widget k-upload k-header">
131
- <div className="k-dropzone">
132
- <Button className="k-upload-button">Select files...</Button>
133
- <div className="k-dropzone-hint">Drop files here to upload</div>
134
- </div>
135
- </div>
136
- </section>
137
-
138
- <section>
139
- <div className="k-widget k-upload k-header">
140
- <div className="k-dropzone k-dropzone-active k-dropzone-hovered">
141
- <Button className="k-upload-button">Select files...</Button>
142
- <div className="k-dropzone-hint">Drop files here to upload</div>
143
- </div>
144
- </div>
145
- </section>
146
-
147
- <section>
148
- <div className="k-widget k-upload k-header k-state-disabled">
149
- <div className="k-dropzone">
150
- <Button className="k-upload-button">Select files...</Button>
151
- <div className="k-dropzone-hint">Drop files here to upload</div>
152
- </div>
153
- </div>
154
- </section>
155
-
156
- <section>
157
- <div className="k-widget k-upload k-header">
158
- <div className="k-dropzone">
159
- <Button className="k-upload-button">Select files...</Button>
160
- <div className="k-upload-status k-upload-status-total"><Icon name="check"></Icon>Done</div>
61
+ <em className="k-dropzone-hint k-hidden">Drop files here to upload</em><strong className="k-upload-status k-upload-status-total"><Icon name="check"></Icon>Done</strong>
161
62
  </div>
162
63
  <ul className="k-upload-files k-reset">
163
64
  <li className="k-file k-file-success">
164
65
  <div className="k-file-multiple">
165
- <span className="k-progress" style={progressStyle}></span>
166
- <span className="k-multiple-files-extension-wrapper">
167
- <span className="k-file-state"></span>
168
- </span>
169
- <span className="k-file-name-size-wrapper">
170
- <span className="k-file-name">Video_File_with_Very_Very_Very_Very_Long_Name.jpg</span>
171
- <span className="k-file-name">Video_File_with_Very_Very_Very_Very_Long_Name2.png</span>
172
- <span className="k-file-name">Video3.png</span>
173
- <span className="k-file-name">Video4.jpg</span>
174
- <span className="k-file-information">Total: 4 files, 152.21 KB</span>
175
- </span>
176
- <strong className="k-upload-status">
177
- <Button fillMode="flat" className="k-upload-action" icon="close"></Button>
178
- </strong>
179
- </div>
180
- </li>
181
- </ul>
182
- </div>
183
- </section>
184
-
185
- <section>
186
- <div className="k-widget k-upload k-header">
187
- <div className="k-dropzone">
188
- <Button className="k-upload-button">Select files...</Button>
189
- <div className="k-upload-status k-upload-status-total"><Icon name="loading"></Icon>Uploading...</div>
190
- </div>
191
- <ul className="k-upload-files k-reset">
192
- <li className="k-file k-file-progress">
193
- <div className="k-file-multiple">
194
- <span className="k-progress" style={progress17Style}></span>
195
- <span className="k-multiple-files-extension-wrapper">
196
- <span className="k-file-state"></span>
197
- </span>
198
- <span className="k-file-name-size-wrapper">
199
- <span className="k-file-name">Image_With_Very_Very_Very_Very_Very_Long_Name1.pdf</span>
200
- <span className="k-file-name">Image_With_Very_Very_Very_Very_Very_Long_Name2.pdf</span>
201
- <span className="k-file-name">Image3.pdf</span>
202
- <span className="k-file-name">Image4.jpg</span>
203
- <span className="k-file-information">Total: 4 files, 1.35 MB</span>
204
- </span>
205
- <strong className="k-upload-status">
206
- <span className="k-upload-pct">17%</span>
207
- <Button fillMode="flat" className="k-upload-action" icon="cancel"></Button>
208
- </strong>
209
- </div>
210
- </li>
211
- </ul>
212
- </div>
213
- </section>
214
-
215
- <section>
216
- <div className="k-widget k-upload k-header">
217
- <div className="k-dropzone">
218
- <Button className="k-upload-button">Select files...</Button>
219
- </div>
220
- <ul className="k-upload-files k-reset">
221
- <li className="k-file k-file-invalid">
222
- <div className="k-file-multiple">
223
- <span className="k-progress" style={progress0Style}></span>
224
- <span className="k-multiple-files-invalid-extension-wrapper">
225
- <span className="k-file-invalid-icon">!</span>
226
- <span className="k-file-state"></span>
227
- </span>
228
- <span className="k-file-name-size-wrapper">
229
- <span className="k-file-name">Movie_With_Very_Very_Very_Very_Very_Long_Name1.png</span>
230
- <span className="k-file-name">Movie2.jpg</span>
231
- <span className="k-file-name k-file-name-invalid">Image1.mkv</span>
232
- <span className="k-file-name k-file-name-invalid">Image2.mkv</span>
233
- <span className="k-file-validation-message">Invalid file(s). Please check file upload requirements.</span>
234
- </span>
235
- <strong className="k-upload-status">
236
- <Button fillMode="flat" className="k-upload-action" icon="close"></Button>
237
- </strong>
238
- </div>
239
- </li>
240
- </ul>
241
- </div>
242
- </section>
243
-
244
- <section>
245
- <div className="k-widget k-upload k-header">
246
- <div className="k-dropzone">
247
- <Button className="k-upload-button">Select files...</Button>
248
- <div className="k-dropzone-hint">Drop files here to upload</div>
249
- </div>
250
- <ul className="k-upload-files k-reset">
251
- <li className="k-file">
252
- <div className="k-file-single">
253
- <span className="k-progress" style={progress0Style}></span>
254
- <span className="k-file-extension-wrapper">
255
- <span className="k-file-extension">png</span>
256
- <span className="k-file-state"></span>
257
- </span>
258
- <span className="k-file-name-size-wrapper">
259
- <span className="k-file-name">Image_With_Very_Very_Very_Very_Very_Long_Name1.png</span>
260
- <span className="k-file-size">51.23 KB</span>
261
- </span>
262
- <strong className="k-upload-status">
263
- <Button fillMode="flat" className="k-upload-action" icon="close"></Button>
264
- </strong>
265
- </div>
266
- </li>
267
- <li className="k-file">
268
- <div className="k-file-single">
269
- <span className="k-progress" style={progress0Style}></span>
270
- <span className="k-file-extension-wrapper">
271
- <span className="k-file-extension">jpg</span>
272
- <span className="k-file-state"></span>
273
- </span>
274
- <span className="k-file-name-size-wrapper">
275
- <span className="k-file-name">Image_With_Very_Very_Very_Very_Very_Long_Name2.jpg</span>
276
- <span className="k-file-size">106.43 KB</span>
66
+ <div className="k-progressbar" hidden><span className="k-progress" style={{ width: "0%" }}></span></div>
67
+ <span className="k-multiple-files-group-wrapper"><Icon className="k-file-group" name="files"></Icon><span className="k-file-state">uploaded</span></span>
68
+ <span className="k-multiple-files-wrapper">
69
+ <span className="k-file-name-size-wrapper"><span className="k-file-name">Video_File_with_Very_Very_Very_Very_Long_Name.png</span><span className="k-file-size">19.61 KB</span></span>
70
+ <span className="k-file-name-size-wrapper"> <span className="k-file-name">Video_File_with_Very_Very_Very_VeryLong_Name2.jpg</span><span className="k-file-size">106.43 KB</span> </span>
71
+ <span className="k-file-name-size-wrapper"> <span className="k-file-name">Video3.png</span><span className="k-file-size">24.34 KB</span> </span>
72
+ <span className="k-file-name-size-wrapper"> <span className="k-file-name">Video4.png</span><span className="k-file-size">19.85 KB</span> </span>
73
+ <span className="k-file-information k-hidden">Total: 4 files, 170.22 KB</span><span className="k-file-validation-message k-text-success">4 File(s) uploaded successfully.</span>
277
74
  </span>
278
75
  <strong className="k-upload-status">
279
- <Button fillMode="flat" className="k-upload-action" icon="close"></Button>
76
+ <Button icon="close" fillMode="flat" className="k-upload-action"></Button>
280
77
  </strong>
281
78
  </div>
282
79
  </li>
283
80
  </ul>
284
- <ActionButtons alignment="end">
285
- <Button className="k-clear-selected">Clear</Button>
286
- <Button themeColor="primary" className="k-upload-selected">Upload</Button>
287
- </ActionButtons>
288
81
  </div>
289
82
  </section>
290
83
  </div>