@progress/kendo-themes-html 5.5.1-dev.1 → 5.5.1-dev.2

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 (52) hide show
  1. package/dist/calendar/calendar-footer.js +1 -2
  2. package/dist/calendar/calendar-footer.js.map +2 -2
  3. package/dist/calendar/calendar-table-head.js +4 -2
  4. package/dist/calendar/calendar-table-head.js.map +2 -2
  5. package/dist/calendar/calendar-table.js +4 -2
  6. package/dist/calendar/calendar-table.js.map +2 -2
  7. package/dist/calendar/calendar-view.js +4 -2
  8. package/dist/calendar/calendar-view.js.map +2 -2
  9. package/dist/calendar/calendar.js +4 -2
  10. package/dist/calendar/calendar.js.map +2 -2
  11. package/dist/calendar/tests/calendar-classic-jquery.js +5 -5
  12. package/dist/calendar/tests/calendar-classic-jquery.js.map +2 -2
  13. package/dist/calendar/tests/calendar-modern-angular.js +4 -2
  14. package/dist/calendar/tests/calendar-modern-angular.js.map +2 -2
  15. package/dist/calendar/tests/calendar-modern-jquery.js +4 -2
  16. package/dist/calendar/tests/calendar-modern-jquery.js.map +2 -2
  17. package/dist/datepicker/tests/datepicker-adaptive.js +779 -0
  18. package/dist/datepicker/tests/datepicker-adaptive.js.map +7 -0
  19. package/dist/datetime-selector/tests/datetime-selector.js +4 -2
  20. package/dist/datetime-selector/tests/datetime-selector.js.map +2 -2
  21. package/dist/dropdownlist/tests/dropdownlist-adaptive.js +488 -0
  22. package/dist/dropdownlist/tests/dropdownlist-adaptive.js.map +7 -0
  23. package/dist/multiviewcalendar/multiviewcalendar.js +4 -2
  24. package/dist/multiviewcalendar/multiviewcalendar.js.map +2 -2
  25. package/dist/multiviewcalendar/tests/multiviewcalendar-angular.js +4 -2
  26. package/dist/multiviewcalendar/tests/multiviewcalendar-angular.js.map +2 -2
  27. package/dist/multiviewcalendar/tests/multiviewcalendar-jquery.js +4 -2
  28. package/dist/multiviewcalendar/tests/multiviewcalendar-jquery.js.map +2 -2
  29. package/dist/multiviewcalendar/tests/multiviewcalendar-react.js +4 -2
  30. package/dist/multiviewcalendar/tests/multiviewcalendar-react.js.map +2 -2
  31. package/dist/multiviewcalendar/tests/multiviewcalendar-vertical-angular.js +4 -2
  32. package/dist/multiviewcalendar/tests/multiviewcalendar-vertical-angular.js.map +2 -2
  33. package/dist/multiviewcalendar/tests/multiviewcalendar-vertical-jquery.js +4 -2
  34. package/dist/multiviewcalendar/tests/multiviewcalendar-vertical-jquery.js.map +2 -2
  35. package/dist/multiviewcalendar/tests/multiviewcalendar-vertical-react.js +4 -2
  36. package/dist/multiviewcalendar/tests/multiviewcalendar-vertical-react.js.map +2 -2
  37. package/dist/progressbar/tests/circular-progressbar-angular.js +59 -0
  38. package/dist/progressbar/tests/circular-progressbar-angular.js.map +7 -0
  39. package/dist/time-selector/time-selector.js +294 -0
  40. package/dist/time-selector/time-selector.js.map +7 -0
  41. package/dist/timepicker/tests/timepicker-adaptive.js +363 -0
  42. package/dist/timepicker/tests/timepicker-adaptive.js.map +7 -0
  43. package/package.json +2 -2
  44. package/src/calendar/calendar-footer.tsx +1 -1
  45. package/src/calendar/calendar.tsx +5 -1
  46. package/src/calendar/tests/calendar-classic-jquery.tsx +5 -5
  47. package/src/datepicker/tests/datepicker-adaptive.tsx +76 -0
  48. package/src/dropdownlist/tests/dropdownlist-adaptive.tsx +96 -0
  49. package/src/progressbar/tests/circular-progressbar-angular.tsx +35 -0
  50. package/src/time-selector/index.ts +1 -0
  51. package/src/time-selector/time-selector.tsx +186 -0
  52. package/src/timepicker/tests/timepicker-adaptive.tsx +76 -0
package/src/datepicker/tests/datepicker-adaptive.tsx ADDED
@@ -0,0 +1,76 @@
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom/client';
3
+ import { Button } from '../../button';
4
+ import { Calendar } from '../../calendar';
5
+
6
+ const root = ReactDOM.createRoot(
7
+ document.getElementById('app') as HTMLElement
8
+ );
9
+
10
+ const styles = `
11
+ .k-actionsheet-container {
12
+ width: 100%;
13
+ height: 600px;
14
+ position: relative;
15
+ transform: translateZ(0);
16
+ }
17
+ `;
18
+
19
+ root.render(
20
+ <>
21
+ <style>{styles}</style>
22
+ <div id="test-area" className="k-d-grid k-grid-cols-2">
23
+
24
+ <span>partial</span>
25
+ <span>full screen</span>
26
+
27
+ <section>
28
+ <div className="k-actionsheet-container">
29
+ <div className="k-overlay"></div>
30
+
31
+ <div className="k-actionsheet k-actionsheet-bottom k-adaptive-actionsheet">
32
+ <div className="k-actionsheet-titlebar">
33
+ <div className="k-actionsheet-title k-text-center">
34
+ <div>Select dates</div>
35
+ <div className="k-text-muted">DD / MM / YY</div>
36
+ </div>
37
+ <div className="k-actionsheet-actions">
38
+ <Button icon="x" fillMode="flat"></Button>
39
+ </div>
40
+ </div>
41
+ <div className="k-actionsheet-content">
42
+ <Calendar size="large"></Calendar>
43
+ </div>
44
+ <div className="k-actionsheet-footer k-actions k-actions-stretched">
45
+ <Button size="large" themeColor="primary">Select date</Button>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </section>
50
+ <section>
51
+ <div className="k-actionsheet-container">
52
+ <div className="k-overlay"></div>
53
+
54
+ <div className="k-actionsheet k-actionsheet-bottom k-actionsheet-fullscreen k-adaptive-actionsheet">
55
+ <div className="k-actionsheet-titlebar">
56
+ <div className="k-actionsheet-title k-text-center">
57
+ <div>Select dates</div>
58
+ <div className="k-text-muted">DD / MM / YY</div>
59
+ </div>
60
+ <div className="k-actionsheet-actions">
61
+ <Button icon="x" fillMode="flat"></Button>
62
+ </div>
63
+ </div>
64
+ <div className="k-actionsheet-content">
65
+ <Calendar size="large"></Calendar>
66
+ </div>
67
+ <div className="k-actionsheet-footer k-actions k-actions-stretched">
68
+ <Button size="large" themeColor="primary">Select date</Button>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </section>
73
+ </div>
74
+
75
+ </>
76
+ );
package/src/dropdownlist/tests/dropdownlist-adaptive.tsx ADDED
@@ -0,0 +1,96 @@
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom/client';
3
+ import { Button } from '../../button';
4
+ import { List, ListItem } from '../../list';
5
+
6
+ const root = ReactDOM.createRoot(
7
+ document.getElementById('app') as HTMLElement
8
+ );
9
+
10
+ const styles = `
11
+ .k-actionsheet-container {
12
+ width: 100%;
13
+ height: 600px;
14
+ position: relative;
15
+ transform: translateZ(0);
16
+ }
17
+ `;
18
+
19
+ root.render(
20
+ <>
21
+ <style>{styles}</style>
22
+ <div id="test-area" className="k-d-grid k-grid-cols-2">
23
+
24
+ <span>partial</span>
25
+ <span>full screen</span>
26
+
27
+ <section>
28
+ <div className="k-actionsheet-container">
29
+ <div className="k-overlay"></div>
30
+
31
+ <div className="k-actionsheet k-actionsheet-bottom k-adaptive-actionsheet">
32
+ <div className="k-actionsheet-titlebar">
33
+ <div className="k-actionsheet-title k-text-center">
34
+ <div>Dropdownlist label</div>
35
+ </div>
36
+ <div className="k-actionsheet-actions">
37
+ <Button icon="x" fillMode="flat"></Button>
38
+ </div>
39
+ </div>
40
+ <div className="k-actionsheet-content">
41
+ <List size="large">
42
+ <ListItem>List item</ListItem>
43
+ <ListItem hover>Hover</ListItem>
44
+ <ListItem focus>Focus</ListItem>
45
+ <ListItem selected>Selected</ListItem>
46
+ <ListItem hover selected>Hover selected</ListItem>
47
+ <ListItem disabled>Disabled</ListItem>
48
+ <ListItem>List item with very long text, that spans on multiple lines</ListItem>
49
+ <ListItem showCheckbox>Checkbox</ListItem>
50
+ <ListItem showIcon iconName="cog">Icon</ListItem>
51
+ <ListItem showCheckbox showIcon iconName="cog">Checkbox icon</ListItem>
52
+ </List>
53
+ </div>
54
+ <div className="k-actionsheet-footer k-actions k-actions-stretched">
55
+ <Button size="large" themeColor="primary">Select date</Button>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ </section>
60
+ <section>
61
+ <div className="k-actionsheet-container">
62
+ <div className="k-overlay"></div>
63
+
64
+ <div className="k-actionsheet k-actionsheet-bottom k-actionsheet-fullscreen k-adaptive-actionsheet">
65
+ <div className="k-actionsheet-titlebar">
66
+ <div className="k-actionsheet-title k-text-center">
67
+ <div>Dropdownlist label</div>
68
+ </div>
69
+ <div className="k-actionsheet-actions">
70
+ <Button icon="x" fillMode="flat"></Button>
71
+ </div>
72
+ </div>
73
+ <div className="k-actionsheet-content">
74
+ <List size="large">
75
+ <ListItem>List item</ListItem>
76
+ <ListItem hover>Hover</ListItem>
77
+ <ListItem focus>Focus</ListItem>
78
+ <ListItem selected>Selected</ListItem>
79
+ <ListItem hover selected>Hover selected</ListItem>
80
+ <ListItem disabled>Disabled</ListItem>
81
+ <ListItem>List item with very long text, that spans on multiple lines</ListItem>
82
+ <ListItem showCheckbox>Checkbox</ListItem>
83
+ <ListItem showIcon iconName="cog">Icon</ListItem>
84
+ <ListItem showCheckbox showIcon iconName="cog">Checkbox icon</ListItem>
85
+ </List>
86
+ </div>
87
+ <div className="k-actionsheet-footer k-actions k-actions-stretched">
88
+ <Button size="large" themeColor="primary">Select date</Button>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </section>
93
+ </div>
94
+
95
+ </>
96
+ );
package/src/progressbar/tests/circular-progressbar-angular.tsx ADDED
@@ -0,0 +1,35 @@
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom/client';
3
+
4
+ const root = ReactDOM.createRoot(
5
+ document.getElementById('app') as HTMLElement
6
+ );
7
+
8
+ const style = `
9
+ #test-area {
10
+ justify-items: center;
11
+ }
12
+ `;
13
+
14
+ root.render(
15
+ <>
16
+ <style>{style}</style>
17
+ <div id="test-area">
18
+ <div style={{ width: "200px", height: "200px" }} className="k-circular-progressbar">
19
+ <div className="k-circular-progressbar-surface">
20
+ <div>
21
+ <svg>
22
+ <g>
23
+ <circle strokeWidth="9.5" className="k-circular-progressbar-scale" r="90" cx="100" cy="100"></circle>
24
+ <circle style={{ strokeDasharray: "565.487", strokeDashoffset: "989.602" }} strokeWidth="9.5" className="k-circular-progressbar-arc" r="90" cx="100" cy="100"></circle>
25
+ </g>
26
+ </svg>
27
+ <div style={{ left: "70.5px", top: "91px" }} className="k-circular-progressbar-label">
28
+ value: 75
29
+ </div>
30
+ </div>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ </>
35
+ );
package/src/time-selector/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './time-selector';
package/src/time-selector/time-selector.tsx ADDED
@@ -0,0 +1,186 @@
1
+ import * as React from 'react';
2
+ import { classNames, kendoThemeMaps } from '../utils';
3
+ import { Button } from '../button';
4
+
5
+ export interface TimeSelectorProps {
6
+ className?: string;
7
+ value?: string;
8
+ size?: null | 'small' | 'medium' | 'large';
9
+ disabled?: boolean;
10
+ }
11
+
12
+ export class TimeSelector extends React.Component<TimeSelectorProps> {
13
+
14
+ static defaultProps = {
15
+ size: 'medium'
16
+ };
17
+
18
+ render() {
19
+
20
+ const {
21
+ className,
22
+ size
23
+ } = this.props;
24
+
25
+ return (
26
+ <div
27
+ className={classNames(
28
+ className,
29
+ 'k-timeselector',
30
+ {
31
+ [`k-timeselector-${kendoThemeMaps.sizeMap[size!] || size}`]: size,
32
+ }
33
+
34
+ )}>
35
+ <div className="k-time-part">
36
+ <div className="k-time-header">
37
+ <span className="k-title">10:00:00 AM</span>
38
+ <Button fillMode="flat" className="k-time-now">Now</Button>
39
+ </div>
40
+ <div className="k-time-list-container">
41
+ <span className="k-time-highlight"></span>
42
+ <div className="k-time-list-wrapper">
43
+ <span className="k-title">Hour</span>
44
+ <div className="k-time-list">
45
+ <div className="k-content k-scrollable k-time-container">
46
+ <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
47
+ <li className="k-item">
48
+ <span>0</span>
49
+ </li>
50
+ <li className="k-item">
51
+ <span>1</span>
52
+ </li>
53
+ <li className="k-item">
54
+ <span>2</span>
55
+ </li>
56
+ <li className="k-item">
57
+ <span>3</span>
58
+ </li>
59
+ <li className="k-item">
60
+ <span>4</span>
61
+ </li>
62
+ <li className="k-item">
63
+ <span>5</span>
64
+ </li>
65
+ <li className="k-item">
66
+ <span>6</span>
67
+ </li>
68
+ <li className="k-item">
69
+ <span>7</span>
70
+ </li>
71
+ <li className="k-item">
72
+ <span>8</span>
73
+ </li>
74
+ <li className="k-item">
75
+ <span>9</span>
76
+ </li>
77
+ </ul>
78
+ <div className="k-scrollable-placeholder"></div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ <div className="k-time-separator">:</div>
83
+ <div className="k-time-list-wrapper k-state-focused">
84
+ <span className="k-title">Minute</span>
85
+ <div className="k-time-list">
86
+ <div className="k-content k-scrollable k-time-container">
87
+ <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
88
+ <li className="k-item">
89
+ <span>0</span>
90
+ </li>
91
+ <li className="k-item">
92
+ <span>1</span>
93
+ </li>
94
+ <li className="k-item">
95
+ <span>2</span>
96
+ </li>
97
+ <li className="k-item">
98
+ <span>3</span>
99
+ </li>
100
+ <li className="k-item">
101
+ <span>4</span>
102
+ </li>
103
+ <li className="k-item">
104
+ <span>5</span>
105
+ </li>
106
+ <li className="k-item">
107
+ <span>6</span>
108
+ </li>
109
+ <li className="k-item">
110
+ <span>7</span>
111
+ </li>
112
+ <li className="k-item">
113
+ <span>8</span>
114
+ </li>
115
+ <li className="k-item">
116
+ <span>9</span>
117
+ </li>
118
+ </ul>
119
+ <div className="k-scrollable-placeholder"></div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ <div className="k-time-separator">:</div>
124
+ <div className="k-time-list-wrapper">
125
+ <span className="k-title">Second</span>
126
+ <div className="k-time-list">
127
+ <div className="k-content k-scrollable k-time-container">
128
+ <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
129
+ <li className="k-item">
130
+ <span>0</span>
131
+ </li>
132
+ <li className="k-item">
133
+ <span>1</span>
134
+ </li>
135
+ <li className="k-item">
136
+ <span>2</span>
137
+ </li>
138
+ <li className="k-item">
139
+ <span>3</span>
140
+ </li>
141
+ <li className="k-item">
142
+ <span>4</span>
143
+ </li>
144
+ <li className="k-item">
145
+ <span>5</span>
146
+ </li>
147
+ <li className="k-item">
148
+ <span>6</span>
149
+ </li>
150
+ <li className="k-item">
151
+ <span>7</span>
152
+ </li>
153
+ <li className="k-item">
154
+ <span>8</span>
155
+ </li>
156
+ <li className="k-item">
157
+ <span>9</span>
158
+ </li>
159
+ </ul>
160
+ <div className="k-scrollable-placeholder"></div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <div className="k-time-separator">:</div>
165
+ <div className="k-time-list-wrapper">
166
+ <span className="k-title">AM/PM</span>
167
+ <div className="k-time-list">
168
+ <div className="k-content k-scrollable k-time-container">
169
+ <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
170
+ <li className="k-item">
171
+ <span>AM</span>
172
+ </li>
173
+ <li className="k-item">
174
+ <span>PM</span>
175
+ </li>
176
+ </ul>
177
+ <div className="k-scrollable-placeholder"></div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ );
185
+ }
186
+ }
package/src/timepicker/tests/timepicker-adaptive.tsx ADDED
@@ -0,0 +1,76 @@
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom/client';
3
+ import { Button } from '../../button';
4
+ import { TimeSelector } from '../../time-selector';
5
+
6
+ const root = ReactDOM.createRoot(
7
+ document.getElementById('app') as HTMLElement
8
+ );
9
+
10
+ const styles = `
11
+ .k-actionsheet-container {
12
+ width: 100%;
13
+ height: 600px;
14
+ position: relative;
15
+ transform: translateZ(0);
16
+ }
17
+ `;
18
+
19
+ root.render(
20
+ <>
21
+ <style>{styles}</style>
22
+ <div id="test-area" className="k-d-grid k-grid-cols-2">
23
+
24
+ <span>partial</span>
25
+ <span>full screen</span>
26
+
27
+ <section>
28
+ <div className="k-actionsheet-container">
29
+ <div className="k-overlay"></div>
30
+
31
+ <div className="k-actionsheet k-actionsheet-bottom k-adaptive-actionsheet">
32
+ <div className="k-actionsheet-titlebar">
33
+ <div className="k-actionsheet-title k-text-center">
34
+ <div>Select dates</div>
35
+ <div className="k-text-muted">DD / MM / YY</div>
36
+ </div>
37
+ <div className="k-actionsheet-actions">
38
+ <Button icon="x" fillMode="flat"></Button>
39
+ </div>
40
+ </div>
41
+ <div className="k-actionsheet-content">
42
+ <TimeSelector size="large"></TimeSelector>
43
+ </div>
44
+ <div className="k-actionsheet-footer k-actions k-actions-stretched">
45
+ <Button size="large" themeColor="primary">Select date</Button>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </section>
50
+ <section>
51
+ <div className="k-actionsheet-container">
52
+ <div className="k-overlay"></div>
53
+
54
+ <div className="k-actionsheet k-actionsheet-bottom k-actionsheet-fullscreen k-adaptive-actionsheet">
55
+ <div className="k-actionsheet-titlebar">
56
+ <div className="k-actionsheet-title k-text-center">
57
+ <div>Select dates</div>
58
+ <div className="k-text-muted">DD / MM / YY</div>
59
+ </div>
60
+ <div className="k-actionsheet-actions">
61
+ <Button icon="x" fillMode="flat"></Button>
62
+ </div>
63
+ </div>
64
+ <div className="k-actionsheet-content">
65
+ <TimeSelector size="large"></TimeSelector>
66
+ </div>
67
+ <div className="k-actionsheet-footer k-actions k-actions-stretched">
68
+ <Button size="large" themeColor="primary">Select date</Button>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </section>
73
+ </div>
74
+
75
+ </>
76
+ );