@progress/kendo-themes-html 5.8.2-dev.6 → 5.9.1-dev.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/action-sheet/tests/action-sheet-data-table.js +945 -0
- package/dist/action-sheet/tests/action-sheet-data-table.js.map +7 -0
- package/dist/action-sheet/tests/action-sheet-date-time-selector.js +112 -80
- package/dist/action-sheet/tests/action-sheet-date-time-selector.js.map +4 -4
- package/dist/action-sheet/tests/action-sheet-time-selector.js +121 -81
- package/dist/action-sheet/tests/action-sheet-time-selector.js.map +4 -4
- package/dist/calendar/tests/calendar-classic-jquery.js +5 -5
- package/dist/calendar/tests/calendar-classic-jquery.js.map +1 -1
- package/dist/calendar/tests/calendar-infinite-rtl.js +7 -7
- package/dist/calendar/tests/calendar-infinite-rtl.js.map +2 -2
- package/dist/calendar/tests/calendar-infinite.js +7 -7
- package/dist/calendar/tests/calendar-infinite.js.map +1 -1
- package/dist/calendar/tests/calendar-modern-size.js +895 -0
- package/dist/calendar/tests/calendar-modern-size.js.map +7 -0
- package/dist/coloreditor/tests/coloreditor-focused-colorgradient.js +684 -0
- package/dist/coloreditor/tests/coloreditor-focused-colorgradient.js.map +7 -0
- package/dist/datetime-selector/tests/datetime-selector.js +142 -138
- package/dist/datetime-selector/tests/datetime-selector.js.map +4 -4
- package/dist/form/tests/form-field-dateinputs-angular.js.map +2 -2
- package/dist/form/tests/form-field-dateinputs-react.js.map +2 -2
- package/dist/grid/tests/grid-editing-custom-editor.js.map +2 -2
- package/dist/grid/tests/grid-filter-row.js.map +2 -2
- package/dist/icon/tests/icons.js +1 -0
- package/dist/icon/tests/icons.js.map +2 -2
- package/dist/index.js +218 -172
- package/dist/index.js.map +4 -4
- package/dist/scheduler/tests/scheduler-edit-dialog.js.map +2 -2
- package/dist/time-selector/tests/time-selector.js +200 -397
- package/dist/time-selector/tests/time-selector.js.map +4 -4
- package/dist/time-selector/time-selector-column.js +108 -0
- package/dist/time-selector/time-selector-column.js.map +7 -0
- package/dist/time-selector/time-selector-fast-selection.js +255 -0
- package/dist/time-selector/time-selector-fast-selection.js.map +7 -0
- package/dist/time-selector/time-selector-header.js +65 -0
- package/dist/time-selector/time-selector-header.js.map +7 -0
- package/dist/time-selector/time-selector.js +138 -99
- package/dist/time-selector/time-selector.js.map +4 -4
- package/dist/timedurationpicker/tests/timedurationpicker-expanded.js +718 -0
- package/dist/timedurationpicker/tests/timedurationpicker-expanded.js.map +7 -0
- package/dist/timedurationpicker/tests/timedurationpicker.js +576 -0
- package/dist/timedurationpicker/tests/timedurationpicker.js.map +7 -0
- package/dist/timedurationpicker/timedurationpicker.js +494 -0
- package/dist/timedurationpicker/timedurationpicker.js.map +7 -0
- package/dist/timepicker/tests/timepicker-adaptive.js +128 -83
- package/dist/timepicker/tests/timepicker-adaptive.js.map +4 -4
- package/dist/timepicker/tests/timepicker-flat.js.map +2 -2
- package/dist/timepicker/tests/timepicker-outline.js.map +2 -2
- package/dist/timepicker/tests/timepicker.js.map +2 -2
- package/dist/timepicker/timepicker.js.map +2 -2
- package/package.json +2 -2
- package/src/action-sheet/tests/action-sheet-data-table.tsx +203 -0
- package/src/action-sheet/tests/action-sheet-date-time-selector.tsx +7 -3
- package/src/action-sheet/tests/action-sheet-time-selector.tsx +12 -3
- package/src/calendar/tests/calendar-classic-jquery.tsx +5 -5
- package/src/calendar/tests/calendar-infinite-rtl.tsx +7 -7
- package/src/calendar/tests/calendar-infinite.tsx +7 -7
- package/src/calendar/tests/calendar-modern-size.tsx +39 -0
- package/src/coloreditor/tests/coloreditor-focused-colorgradient.tsx +107 -0
- package/src/datetime-selector/tests/datetime-selector.tsx +6 -150
- package/src/icon/tests/icons.tsx +1 -0
- package/src/index.ts +1 -0
- package/src/time-selector/index.ts +3 -0
- package/src/time-selector/tests/time-selector.tsx +30 -407
- package/src/time-selector/time-selector-column.tsx +82 -0
- package/src/time-selector/time-selector-fast-selection.tsx +36 -0
- package/src/time-selector/time-selector-header.tsx +40 -0
- package/src/time-selector/time-selector.tsx +41 -63
- package/src/timedurationpicker/index.ts +1 -0
- package/src/timedurationpicker/tests/timedurationpicker-expanded.tsx +59 -0
- package/src/timedurationpicker/tests/timedurationpicker.tsx +81 -0
- package/src/timedurationpicker/timedurationpicker.tsx +83 -0
- package/src/timepicker/tests/timepicker-adaptive.tsx +19 -10
- package/src/timepicker/timepicker.tsx +0 -1
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import ReactDOM from 'react-dom/client';
|
|
3
|
+
import { Calendar } from '../../calendar';
|
|
4
|
+
|
|
5
|
+
const root = ReactDOM.createRoot(
|
|
6
|
+
document.getElementById('app') as HTMLElement
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
root.render(
|
|
10
|
+
<>
|
|
11
|
+
<div id="test-area" className="k-d-grid k-grid-cols-3">
|
|
12
|
+
|
|
13
|
+
<span>small</span>
|
|
14
|
+
<span>medium</span>
|
|
15
|
+
<span>large</span>
|
|
16
|
+
|
|
17
|
+
<section>
|
|
18
|
+
<Calendar calendarView="month" size="small"></Calendar>
|
|
19
|
+
</section>
|
|
20
|
+
<section>
|
|
21
|
+
<Calendar calendarView="month" showOtherMonth size="medium"></Calendar>
|
|
22
|
+
</section>
|
|
23
|
+
<section>
|
|
24
|
+
<Calendar calendarView="month" showOtherMonth showWeek size="large"></Calendar>
|
|
25
|
+
</section>
|
|
26
|
+
|
|
27
|
+
<section>
|
|
28
|
+
<Calendar calendarView="year" calendarHeaderText="2019" size="small"></Calendar>
|
|
29
|
+
</section>
|
|
30
|
+
<section>
|
|
31
|
+
<Calendar calendarView="decade" calendarHeaderText="2020 - 2029" size="medium"></Calendar>
|
|
32
|
+
</section>
|
|
33
|
+
<section>
|
|
34
|
+
<Calendar calendarView="century" calendarHeaderText="2000 - 2099" size="large"></Calendar>
|
|
35
|
+
</section>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
</>
|
|
39
|
+
);
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import ReactDOM from 'react-dom/client';
|
|
3
|
+
import { ActionButtons } from '../../action-buttons';
|
|
4
|
+
import { Button } from '../../button';
|
|
5
|
+
import { ColorPreview } from '../../color-preview';
|
|
6
|
+
import { NumericTextbox } from '../../numerictextbox';
|
|
7
|
+
|
|
8
|
+
const root = ReactDOM.createRoot(
|
|
9
|
+
document.getElementById('app') as HTMLElement
|
|
10
|
+
);
|
|
11
|
+
|
|
12
|
+
const styles = `
|
|
13
|
+
.k-hue-slider {
|
|
14
|
+
--kendo-slider-start: 0;
|
|
15
|
+
--kendo-slider-end: 0;
|
|
16
|
+
}
|
|
17
|
+
.k-alpha-slider {
|
|
18
|
+
--kendo-slider-start: 0;
|
|
19
|
+
--kendo-slider-end: 100;
|
|
20
|
+
}
|
|
21
|
+
`;
|
|
22
|
+
|
|
23
|
+
root.render(
|
|
24
|
+
<>
|
|
25
|
+
<style>{styles}</style>
|
|
26
|
+
<div id="test-area" className="k-d-grid k-grid-cols-1">
|
|
27
|
+
|
|
28
|
+
<span>Focused Cologradient Inside ColorEditor</span>
|
|
29
|
+
|
|
30
|
+
<section>
|
|
31
|
+
<div className="k-flatcolorpicker k-coloreditor">
|
|
32
|
+
<div className="k-coloreditor-header k-hstack">
|
|
33
|
+
<div className="k-coloreditor-header-actions k-hstack"></div>
|
|
34
|
+
<div className="k-spacer"></div>
|
|
35
|
+
<div className="k-coloreditor-header-actions k-hstack">
|
|
36
|
+
<Button fillMode="flat" icon="reset-color"></Button>
|
|
37
|
+
<div className="k-coloreditor-preview k-vstack">
|
|
38
|
+
<ColorPreview className="k-coloreditor-preview-color" />
|
|
39
|
+
<ColorPreview className="k-coloreditor-current-color" color="fuchsia"/>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
<div className="k-coloreditor-views k-vstack">
|
|
44
|
+
<div className="k-focus k-colorgradient">
|
|
45
|
+
<div className="k-colorgradient-canvas k-hstack">
|
|
46
|
+
<div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
|
|
47
|
+
<div className="k-hsv-gradient">
|
|
48
|
+
<div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
<div className="k-hsv-controls k-hstack">
|
|
52
|
+
<div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
|
|
53
|
+
<div className="k-slider-track-wrap">
|
|
54
|
+
<div className="k-slider-track">
|
|
55
|
+
<div className="k-slider-selection"></div>
|
|
56
|
+
<a className="k-draghandle k-draghandle-end"></a>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
<div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider">
|
|
61
|
+
<div className="k-slider-track-wrap">
|
|
62
|
+
<div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
|
|
63
|
+
<div className="k-slider-selection"></div>
|
|
64
|
+
<a className="k-draghandle k-draghandle-end"></a>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
<div className="k-colorgradient-inputs k-hstack">
|
|
71
|
+
<div className="k-vstack">
|
|
72
|
+
<Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode" />
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<div className="k-vstack">
|
|
76
|
+
<NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
|
|
77
|
+
<label className="k-colorgradient-input-label">R</label>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<div className="k-vstack">
|
|
81
|
+
<NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
|
|
82
|
+
<label className="k-colorgradient-input-label">G</label>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<div className="k-vstack">
|
|
86
|
+
<NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
|
|
87
|
+
<label className="k-colorgradient-input-label">B</label>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<div className="k-vstack">
|
|
91
|
+
<NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
|
|
92
|
+
<label className="k-colorgradient-input-label">A</label>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
|
|
98
|
+
<ActionButtons className="k-coloreditor-footer" alignment="end">
|
|
99
|
+
<Button className="k-coloreditor-cancel">Cancel</Button>
|
|
100
|
+
<Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
|
|
101
|
+
</ActionButtons>
|
|
102
|
+
</div>
|
|
103
|
+
</section>
|
|
104
|
+
|
|
105
|
+
</div>
|
|
106
|
+
</>
|
|
107
|
+
);
|
|
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
|
|
|
3
3
|
import { ActionButtons } from '../../action-buttons';
|
|
4
4
|
import { Button } from '../../button';
|
|
5
5
|
import { Calendar } from '../../calendar';
|
|
6
|
+
import { TimeSelector, TimeSelectorHeader } from '../../time-selector';
|
|
6
7
|
|
|
7
8
|
const root = ReactDOM.createRoot(
|
|
8
9
|
document.getElementById('app') as HTMLElement
|
|
@@ -68,156 +69,11 @@ root.render(
|
|
|
68
69
|
<div className="k-datetime-calendar-wrap">
|
|
69
70
|
</div>
|
|
70
71
|
<div className="k-datetime-time-wrap">
|
|
71
|
-
<
|
|
72
|
-
<
|
|
73
|
-
<
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
</div>
|
|
77
|
-
<div className="k-time-list-container">
|
|
78
|
-
<span className="k-time-highlight"></span>
|
|
79
|
-
<div className="k-time-list-wrapper">
|
|
80
|
-
<span className="k-title">Hour</span>
|
|
81
|
-
<div className="k-time-list">
|
|
82
|
-
<div className="k-content k-scrollable k-time-container">
|
|
83
|
-
<ul className="k-reset" style={{ transform: "translateY(97px)" }}>
|
|
84
|
-
<li className="k-item">
|
|
85
|
-
<span>0</span>
|
|
86
|
-
</li>
|
|
87
|
-
<li className="k-item">
|
|
88
|
-
<span>1</span>
|
|
89
|
-
</li>
|
|
90
|
-
<li className="k-item">
|
|
91
|
-
<span>2</span>
|
|
92
|
-
</li>
|
|
93
|
-
<li className="k-item">
|
|
94
|
-
<span>3</span>
|
|
95
|
-
</li>
|
|
96
|
-
<li className="k-item">
|
|
97
|
-
<span>4</span>
|
|
98
|
-
</li>
|
|
99
|
-
<li className="k-item">
|
|
100
|
-
<span>5</span>
|
|
101
|
-
</li>
|
|
102
|
-
<li className="k-item">
|
|
103
|
-
<span>6</span>
|
|
104
|
-
</li>
|
|
105
|
-
<li className="k-item">
|
|
106
|
-
<span>7</span>
|
|
107
|
-
</li>
|
|
108
|
-
<li className="k-item">
|
|
109
|
-
<span>8</span>
|
|
110
|
-
</li>
|
|
111
|
-
<li className="k-item">
|
|
112
|
-
<span>9</span>
|
|
113
|
-
</li>
|
|
114
|
-
</ul>
|
|
115
|
-
<div className="k-scrollable-placeholder"></div>
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
<div className="k-time-separator">:</div>
|
|
120
|
-
<div className="k-time-list-wrapper k-focus">
|
|
121
|
-
<span className="k-title">Minute</span>
|
|
122
|
-
<div className="k-time-list">
|
|
123
|
-
<div className="k-content k-scrollable k-time-container">
|
|
124
|
-
<ul className="k-reset" style={{ transform: "translateY(97px)" }}>
|
|
125
|
-
<li className="k-item">
|
|
126
|
-
<span>0</span>
|
|
127
|
-
</li>
|
|
128
|
-
<li className="k-item">
|
|
129
|
-
<span>1</span>
|
|
130
|
-
</li>
|
|
131
|
-
<li className="k-item">
|
|
132
|
-
<span>2</span>
|
|
133
|
-
</li>
|
|
134
|
-
<li className="k-item">
|
|
135
|
-
<span>3</span>
|
|
136
|
-
</li>
|
|
137
|
-
<li className="k-item">
|
|
138
|
-
<span>4</span>
|
|
139
|
-
</li>
|
|
140
|
-
<li className="k-item">
|
|
141
|
-
<span>5</span>
|
|
142
|
-
</li>
|
|
143
|
-
<li className="k-item">
|
|
144
|
-
<span>6</span>
|
|
145
|
-
</li>
|
|
146
|
-
<li className="k-item">
|
|
147
|
-
<span>7</span>
|
|
148
|
-
</li>
|
|
149
|
-
<li className="k-item">
|
|
150
|
-
<span>8</span>
|
|
151
|
-
</li>
|
|
152
|
-
<li className="k-item">
|
|
153
|
-
<span>9</span>
|
|
154
|
-
</li>
|
|
155
|
-
</ul>
|
|
156
|
-
<div className="k-scrollable-placeholder"></div>
|
|
157
|
-
</div>
|
|
158
|
-
</div>
|
|
159
|
-
</div>
|
|
160
|
-
<div className="k-time-separator">:</div>
|
|
161
|
-
<div className="k-time-list-wrapper">
|
|
162
|
-
<span className="k-title">Second</span>
|
|
163
|
-
<div className="k-time-list">
|
|
164
|
-
<div className="k-content k-scrollable k-time-container">
|
|
165
|
-
<ul className="k-reset" style={{ transform: "translateY(97px)" }}>
|
|
166
|
-
<li className="k-item">
|
|
167
|
-
<span>0</span>
|
|
168
|
-
</li>
|
|
169
|
-
<li className="k-item">
|
|
170
|
-
<span>1</span>
|
|
171
|
-
</li>
|
|
172
|
-
<li className="k-item">
|
|
173
|
-
<span>2</span>
|
|
174
|
-
</li>
|
|
175
|
-
<li className="k-item">
|
|
176
|
-
<span>3</span>
|
|
177
|
-
</li>
|
|
178
|
-
<li className="k-item">
|
|
179
|
-
<span>4</span>
|
|
180
|
-
</li>
|
|
181
|
-
<li className="k-item">
|
|
182
|
-
<span>5</span>
|
|
183
|
-
</li>
|
|
184
|
-
<li className="k-item">
|
|
185
|
-
<span>6</span>
|
|
186
|
-
</li>
|
|
187
|
-
<li className="k-item">
|
|
188
|
-
<span>7</span>
|
|
189
|
-
</li>
|
|
190
|
-
<li className="k-item">
|
|
191
|
-
<span>8</span>
|
|
192
|
-
</li>
|
|
193
|
-
<li className="k-item">
|
|
194
|
-
<span>9</span>
|
|
195
|
-
</li>
|
|
196
|
-
</ul>
|
|
197
|
-
<div className="k-scrollable-placeholder"></div>
|
|
198
|
-
</div>
|
|
199
|
-
</div>
|
|
200
|
-
</div>
|
|
201
|
-
<div className="k-time-separator">:</div>
|
|
202
|
-
<div className="k-time-list-wrapper">
|
|
203
|
-
<span className="k-title">AM/PM</span>
|
|
204
|
-
<div className="k-time-list">
|
|
205
|
-
<div className="k-content k-scrollable k-time-container">
|
|
206
|
-
<ul className="k-reset" style={{ transform: "translateY(97px)" }}>
|
|
207
|
-
<li className="k-item">
|
|
208
|
-
<span>AM</span>
|
|
209
|
-
</li>
|
|
210
|
-
<li className="k-item">
|
|
211
|
-
<span>PM</span>
|
|
212
|
-
</li>
|
|
213
|
-
</ul>
|
|
214
|
-
<div className="k-scrollable-placeholder"></div>
|
|
215
|
-
</div>
|
|
216
|
-
</div>
|
|
217
|
-
</div>
|
|
218
|
-
</div>
|
|
219
|
-
</div>
|
|
220
|
-
</div>
|
|
72
|
+
<TimeSelector columns={[ "HH", "mm", "ss", "tt" ]} focusedColumn="mm" header={(
|
|
73
|
+
<TimeSelectorHeader title="10:00:00 AM">
|
|
74
|
+
<Button fillMode="flat" className="k-time-now">Now</Button>
|
|
75
|
+
</TimeSelectorHeader>
|
|
76
|
+
)}/>
|
|
221
77
|
</div>
|
|
222
78
|
</div>
|
|
223
79
|
<ActionButtons className="k-datetime-footer" alignment="stretched">
|
package/src/icon/tests/icons.tsx
CHANGED
package/src/index.ts
CHANGED
|
@@ -45,6 +45,7 @@ export * from './datepicker/index';
|
|
|
45
45
|
export * from './timepicker/index';
|
|
46
46
|
export * from './datetimepicker/index';
|
|
47
47
|
export * from './daterangepicker/index';
|
|
48
|
+
export * from './timedurationpicker/index';
|
|
48
49
|
export * from './dropdowngrid/index';
|
|
49
50
|
export * from './dropdownlist/index';
|
|
50
51
|
// export * from './dropdowntree/index';
|