@progress/kendo-themes-html 6.3.1-dev.0 → 6.4.0-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.
Files changed (253) hide show
  1. package/dist/bottom-nav/bottom-nav-item.js +234 -0
  2. package/dist/bottom-nav/bottom-nav-item.js.map +7 -0
  3. package/dist/bottom-nav/bottom-nav.spec.js +122 -0
  4. package/dist/bottom-nav/bottom-nav.spec.js.map +7 -0
  5. package/dist/bottom-nav/tests/bottom-nav-colors.js +269 -358
  6. package/dist/bottom-nav/tests/bottom-nav-colors.js.map +4 -4
  7. package/dist/bottom-nav/tests/bottom-nav-items.js +168 -53
  8. package/dist/bottom-nav/tests/bottom-nav-items.js.map +4 -4
  9. package/dist/bottom-nav/tests/bottom-nav-rtl.js +153 -50
  10. package/dist/bottom-nav/tests/bottom-nav-rtl.js.map +4 -4
  11. package/dist/bottom-nav/tests/bottom-nav.js +167 -76
  12. package/dist/bottom-nav/tests/bottom-nav.js.map +4 -4
  13. package/dist/breadcrumb/breadcrumb-container.js +76 -0
  14. package/dist/breadcrumb/breadcrumb-container.js.map +7 -0
  15. package/dist/breadcrumb/breadcrumb-input-container.js +65 -0
  16. package/dist/breadcrumb/breadcrumb-input-container.js.map +7 -0
  17. package/dist/breadcrumb/breadcrumb-item-text.js +70 -0
  18. package/dist/breadcrumb/breadcrumb-item-text.js.map +7 -0
  19. package/dist/breadcrumb/breadcrumb-item.js +75 -0
  20. package/dist/breadcrumb/breadcrumb-item.js.map +7 -0
  21. package/dist/breadcrumb/breadcrumb-link.js +132 -0
  22. package/dist/breadcrumb/breadcrumb-link.js.map +7 -0
  23. package/dist/breadcrumb/breadcrumb-root-item-container.js +65 -0
  24. package/dist/breadcrumb/breadcrumb-root-item-container.js.map +7 -0
  25. package/dist/breadcrumb/breadcrumb.spec.js +125 -0
  26. package/dist/breadcrumb/breadcrumb.spec.js.map +7 -0
  27. package/dist/breadcrumb/tests/breadcrumb-rtl.js +349 -153
  28. package/dist/breadcrumb/tests/breadcrumb-rtl.js.map +4 -4
  29. package/dist/breadcrumb/tests/breadcrumb.js +349 -153
  30. package/dist/breadcrumb/tests/breadcrumb.js.map +4 -4
  31. package/dist/coloreditor/color-editor.spec.js +1586 -0
  32. package/dist/coloreditor/color-editor.spec.js.map +7 -0
  33. package/dist/coloreditor/tests/coloreditor-focused-colorgradient.js +821 -176
  34. package/dist/coloreditor/tests/coloreditor-focused-colorgradient.js.map +4 -4
  35. package/dist/coloreditor/tests/coloreditor-rtl.js +727 -265
  36. package/dist/coloreditor/tests/coloreditor-rtl.js.map +4 -4
  37. package/dist/coloreditor/tests/coloreditor-states.js +821 -176
  38. package/dist/coloreditor/tests/coloreditor-states.js.map +4 -4
  39. package/dist/coloreditor/tests/coloreditor-views.js +727 -265
  40. package/dist/coloreditor/tests/coloreditor-views.js.map +4 -4
  41. package/dist/coloreditor/tests/coloreditor.js +821 -176
  42. package/dist/coloreditor/tests/coloreditor.js.map +4 -4
  43. package/dist/colorgradient/color-contrast.js +199 -0
  44. package/dist/colorgradient/color-contrast.js.map +7 -0
  45. package/dist/colorgradient/color-gradient.spec.js +1246 -0
  46. package/dist/colorgradient/color-gradient.spec.js.map +7 -0
  47. package/dist/colorgradient/color-input.js +1029 -0
  48. package/dist/colorgradient/color-input.js.map +7 -0
  49. package/dist/colorgradient/tests/colorgradient-contrast.js +532 -155
  50. package/dist/colorgradient/tests/colorgradient-contrast.js.map +4 -4
  51. package/dist/colorgradient/tests/colorgradient-draghandle.js +536 -202
  52. package/dist/colorgradient/tests/colorgradient-draghandle.js.map +4 -4
  53. package/dist/colorgradient/tests/colorgradient-modes.js +433 -260
  54. package/dist/colorgradient/tests/colorgradient-modes.js.map +4 -4
  55. package/dist/colorgradient/tests/colorgradient-rtl.js +532 -155
  56. package/dist/colorgradient/tests/colorgradient-rtl.js.map +4 -4
  57. package/dist/colorgradient/tests/colorgradient-states.js +536 -132
  58. package/dist/colorgradient/tests/colorgradient-states.js.map +4 -4
  59. package/dist/colorgradient/tests/colorgradient.js +532 -132
  60. package/dist/colorgradient/tests/colorgradient.js.map +4 -4
  61. package/dist/colorpalette/colorpalette.spec.js +1 -1
  62. package/dist/colorpalette/colorpalette.spec.js.map +2 -2
  63. package/dist/colorpalette/tests/colorpalette-states.js +1 -1
  64. package/dist/colorpalette/tests/colorpalette-states.js.map +2 -2
  65. package/dist/colorpalette/tests/colorpalette-variants.js +1 -1
  66. package/dist/colorpalette/tests/colorpalette-variants.js.map +2 -2
  67. package/dist/colorpalette/tests/colorpalette.js +1 -1
  68. package/dist/colorpalette/tests/colorpalette.js.map +2 -2
  69. package/dist/colorpicker/tests/colorpicker-dropdown.js +757 -185
  70. package/dist/colorpicker/tests/colorpicker-dropdown.js.map +4 -4
  71. package/dist/editor/tests/editor-table-wizard.js +1984 -0
  72. package/dist/editor/tests/editor-table-wizard.js.map +7 -0
  73. package/dist/expansion-panel/expansion-panel.spec.js +253 -0
  74. package/dist/expansion-panel/expansion-panel.spec.js.map +7 -0
  75. package/dist/expansion-panel/tests/expansion-panel-rtl.js +100 -83
  76. package/dist/expansion-panel/tests/expansion-panel-rtl.js.map +4 -4
  77. package/dist/expansion-panel/tests/expansion-panel.js +100 -83
  78. package/dist/expansion-panel/tests/expansion-panel.js.map +4 -4
  79. package/dist/filemanager/tests/filemanager-contextmenu.js +492 -340
  80. package/dist/filemanager/tests/filemanager-contextmenu.js.map +4 -4
  81. package/dist/filemanager/tests/filemanager-drag-hint.js +468 -316
  82. package/dist/filemanager/tests/filemanager-drag-hint.js.map +4 -4
  83. package/dist/filemanager/tests/filemanager-gridview.js +533 -381
  84. package/dist/filemanager/tests/filemanager-gridview.js.map +4 -4
  85. package/dist/filemanager/tests/filemanager-listview.js +487 -335
  86. package/dist/filemanager/tests/filemanager-listview.js.map +4 -4
  87. package/dist/filemanager/tests/filemanager-preview.js +586 -434
  88. package/dist/filemanager/tests/filemanager-preview.js.map +4 -4
  89. package/dist/grid/tests/grid-column-menu-rtl.js +15 -15
  90. package/dist/grid/tests/grid-column-menu-rtl.js.map +2 -2
  91. package/dist/grid/tests/grid-column-menu.js +15 -15
  92. package/dist/grid/tests/grid-column-menu.js.map +2 -2
  93. package/dist/index.js +2131 -1244
  94. package/dist/index.js.map +4 -4
  95. package/dist/multiselecttree/multiselecttree.spec.js +1003 -0
  96. package/dist/multiselecttree/multiselecttree.spec.js.map +7 -0
  97. package/dist/multiselecttree/tests/multiselecttree-flat.js +1208 -0
  98. package/dist/multiselecttree/tests/multiselecttree-flat.js.map +7 -0
  99. package/dist/{editor/tests/editor-table-wizard-accessibility.js → multiselecttree/tests/multiselecttree-opened.js} +646 -645
  100. package/dist/multiselecttree/tests/multiselecttree-opened.js.map +7 -0
  101. package/dist/multiselecttree/tests/multiselecttree-outline.js +1208 -0
  102. package/dist/multiselecttree/tests/multiselecttree-outline.js.map +7 -0
  103. package/dist/multiselecttree/tests/multiselecttree-size.js +1107 -0
  104. package/dist/multiselecttree/tests/multiselecttree-size.js.map +7 -0
  105. package/dist/multiselecttree/tests/multiselecttree.js +1194 -0
  106. package/dist/multiselecttree/tests/multiselecttree.js.map +7 -0
  107. package/dist/pivotgrid/tests/pivotgrid-column-menus.js +8 -8
  108. package/dist/pivotgrid/tests/pivotgrid-column-menus.js.map +2 -2
  109. package/dist/scheduler/tests/scheduler-adaptive-agenda.js +6 -4
  110. package/dist/scheduler/tests/scheduler-adaptive-agenda.js.map +2 -2
  111. package/dist/scheduler/tests/scheduler-adaptive-day-resource-group.js +6 -4
  112. package/dist/scheduler/tests/scheduler-adaptive-day-resource-group.js.map +2 -2
  113. package/dist/scheduler/tests/scheduler-adaptive-day.js +6 -4
  114. package/dist/scheduler/tests/scheduler-adaptive-day.js.map +2 -2
  115. package/dist/scheduler/tests/scheduler-adaptive-month.js +6 -4
  116. package/dist/scheduler/tests/scheduler-adaptive-month.js.map +2 -2
  117. package/dist/scheduler/tests/scheduler-angular-agenda-rtl.js +8 -11
  118. package/dist/scheduler/tests/scheduler-angular-agenda-rtl.js.map +2 -2
  119. package/dist/scheduler/tests/scheduler-angular-agenda.js +8 -11
  120. package/dist/scheduler/tests/scheduler-angular-agenda.js.map +2 -2
  121. package/dist/scheduler/tests/scheduler-angular-day-rtl.js +8 -11
  122. package/dist/scheduler/tests/scheduler-angular-day-rtl.js.map +2 -2
  123. package/dist/scheduler/tests/scheduler-angular-month-rtl.js +8 -11
  124. package/dist/scheduler/tests/scheduler-angular-month-rtl.js.map +2 -2
  125. package/dist/scheduler/tests/scheduler-angular-month.js +8 -11
  126. package/dist/scheduler/tests/scheduler-angular-month.js.map +2 -2
  127. package/dist/scheduler/tests/scheduler-angular-rtl.js +8 -11
  128. package/dist/scheduler/tests/scheduler-angular-rtl.js.map +2 -2
  129. package/dist/scheduler/tests/scheduler-angular.js +8 -11
  130. package/dist/scheduler/tests/scheduler-angular.js.map +2 -2
  131. package/dist/scheduler/tests/scheduler-flex-layout.js +7 -10
  132. package/dist/scheduler/tests/scheduler-flex-layout.js.map +2 -2
  133. package/dist/scheduler/tests/scheduler-jquery-agenda.js +7 -10
  134. package/dist/scheduler/tests/scheduler-jquery-agenda.js.map +2 -2
  135. package/dist/scheduler/tests/scheduler-jquery-month.js +7 -10
  136. package/dist/scheduler/tests/scheduler-jquery-month.js.map +2 -2
  137. package/dist/scheduler/tests/scheduler-react-agenda.js +7 -10
  138. package/dist/scheduler/tests/scheduler-react-agenda.js.map +2 -2
  139. package/dist/scheduler/tests/scheduler-react-day.js +7 -10
  140. package/dist/scheduler/tests/scheduler-react-day.js.map +2 -2
  141. package/dist/scheduler/tests/scheduler-react-month.js +7 -10
  142. package/dist/scheduler/tests/scheduler-react-month.js.map +2 -2
  143. package/dist/scheduler/tests/scheduler-react-timeline-multi.js +7 -10
  144. package/dist/scheduler/tests/scheduler-react-timeline-multi.js.map +2 -2
  145. package/dist/scheduler/tests/scheduler-react-timeline.js +14 -20
  146. package/dist/scheduler/tests/scheduler-react-timeline.js.map +2 -2
  147. package/dist/scheduler/tests/scheduler-react-week.js +7 -10
  148. package/dist/scheduler/tests/scheduler-react-week.js.map +2 -2
  149. package/dist/scheduler/tests/scheduler-year.js +6 -9
  150. package/dist/scheduler/tests/scheduler-year.js.map +2 -2
  151. package/dist/scheduler/tests/scheduler.js +13 -19
  152. package/dist/scheduler/tests/scheduler.js.map +2 -2
  153. package/dist/slider/slider-tick.js +48 -0
  154. package/dist/slider/slider-tick.js.map +7 -0
  155. package/dist/slider/slider.spec.js +411 -0
  156. package/dist/slider/slider.spec.js.map +7 -0
  157. package/dist/slider/tests/slider-css-vars.js +300 -268
  158. package/dist/slider/tests/slider-css-vars.js.map +4 -4
  159. package/dist/slider/tests/slider-tick-absolute-position.js +155 -36
  160. package/dist/slider/tests/slider-tick-absolute-position.js.map +4 -4
  161. package/dist/slider/tests/slider.js +235 -209
  162. package/dist/slider/tests/slider.js.map +4 -4
  163. package/dist/spreadsheet/tests/spreadsheet-filter-menu.js +2 -2
  164. package/dist/spreadsheet/tests/spreadsheet-filter-menu.js.map +2 -2
  165. package/package.json +2 -2
  166. package/src/bottom-nav/bottom-nav-item.tsx +62 -0
  167. package/src/bottom-nav/bottom-nav.spec.tsx +76 -0
  168. package/src/bottom-nav/index.ts +2 -0
  169. package/src/bottom-nav/tests/bottom-nav-colors.tsx +109 -325
  170. package/src/bottom-nav/tests/bottom-nav-items.tsx +12 -22
  171. package/src/bottom-nav/tests/bottom-nav-rtl.tsx +13 -37
  172. package/src/bottom-nav/tests/bottom-nav.tsx +29 -77
  173. package/src/breadcrumb/breadcrumb-container.tsx +36 -0
  174. package/src/breadcrumb/breadcrumb-input-container.tsx +22 -0
  175. package/src/breadcrumb/breadcrumb-item-text.tsx +32 -0
  176. package/src/breadcrumb/breadcrumb-item.tsx +34 -0
  177. package/src/breadcrumb/breadcrumb-link.tsx +55 -0
  178. package/src/breadcrumb/breadcrumb-root-item-container.tsx +22 -0
  179. package/src/breadcrumb/breadcrumb.spec.tsx +55 -0
  180. package/src/breadcrumb/index.ts +7 -0
  181. package/src/breadcrumb/tests/breadcrumb-rtl.tsx +275 -231
  182. package/src/breadcrumb/tests/breadcrumb.tsx +274 -231
  183. package/src/coloreditor/color-editor.spec.tsx +93 -0
  184. package/src/coloreditor/index.ts +1 -0
  185. package/src/coloreditor/tests/coloreditor-focused-colorgradient.tsx +2 -76
  186. package/src/coloreditor/tests/coloreditor-rtl.tsx +3 -107
  187. package/src/coloreditor/tests/coloreditor-states.tsx +2 -77
  188. package/src/coloreditor/tests/coloreditor-views.tsx +3 -107
  189. package/src/coloreditor/tests/coloreditor.tsx +2 -77
  190. package/src/colorgradient/color-contrast.tsx +44 -0
  191. package/src/colorgradient/color-gradient.spec.tsx +102 -0
  192. package/src/colorgradient/color-input.tsx +123 -0
  193. package/src/colorgradient/index.ts +4 -0
  194. package/src/colorgradient/tests/colorgradient-contrast.tsx +2 -83
  195. package/src/colorgradient/tests/colorgradient-draghandle.tsx +4 -146
  196. package/src/colorgradient/tests/colorgradient-modes.tsx +6 -214
  197. package/src/colorgradient/tests/colorgradient-rtl.tsx +2 -74
  198. package/src/colorgradient/tests/colorgradient-states.tsx +14 -51
  199. package/src/colorgradient/tests/colorgradient.tsx +2 -55
  200. package/src/colorpalette/colorpalette.spec.tsx +5 -5
  201. package/src/colorpicker/tests/colorpicker-dropdown.tsx +7 -184
  202. package/src/editor/tests/editor-table-wizard.tsx +280 -0
  203. package/src/expansion-panel/expansion-panel.spec.tsx +86 -0
  204. package/src/expansion-panel/index.ts +1 -0
  205. package/src/expansion-panel/tests/expansion-panel-rtl.tsx +48 -111
  206. package/src/expansion-panel/tests/expansion-panel.tsx +49 -111
  207. package/src/filemanager/tests/filemanager-contextmenu.tsx +9 -8
  208. package/src/filemanager/tests/filemanager-drag-hint.tsx +9 -8
  209. package/src/filemanager/tests/filemanager-gridview.tsx +17 -16
  210. package/src/filemanager/tests/filemanager-listview.tsx +17 -16
  211. package/src/filemanager/tests/filemanager-preview.tsx +25 -24
  212. package/src/grid/tests/grid-column-menu-rtl.tsx +45 -15
  213. package/src/grid/tests/grid-column-menu.tsx +45 -15
  214. package/src/index.ts +7 -4
  215. package/src/multiselecttree/index.ts +1 -0
  216. package/src/multiselecttree/multiselecttree.spec.tsx +150 -0
  217. package/src/multiselecttree/tests/multiselecttree-flat.tsx +179 -0
  218. package/src/multiselecttree/tests/multiselecttree-opened.tsx +119 -0
  219. package/src/multiselecttree/tests/multiselecttree-outline.tsx +179 -0
  220. package/src/multiselecttree/tests/multiselecttree-size.tsx +54 -0
  221. package/src/multiselecttree/tests/multiselecttree.tsx +179 -0
  222. package/src/pivotgrid/tests/pivotgrid-column-menus.tsx +24 -8
  223. package/src/scheduler/tests/scheduler-adaptive-agenda.tsx +13 -14
  224. package/src/scheduler/tests/scheduler-adaptive-day-resource-group.tsx +13 -14
  225. package/src/scheduler/tests/scheduler-adaptive-day.tsx +13 -14
  226. package/src/scheduler/tests/scheduler-adaptive-month.tsx +13 -14
  227. package/src/scheduler/tests/scheduler-angular-agenda-rtl.tsx +13 -17
  228. package/src/scheduler/tests/scheduler-angular-agenda.tsx +13 -17
  229. package/src/scheduler/tests/scheduler-angular-day-rtl.tsx +13 -17
  230. package/src/scheduler/tests/scheduler-angular-month-rtl.tsx +13 -17
  231. package/src/scheduler/tests/scheduler-angular-month.tsx +13 -17
  232. package/src/scheduler/tests/scheduler-angular-rtl.tsx +13 -17
  233. package/src/scheduler/tests/scheduler-angular.tsx +13 -17
  234. package/src/scheduler/tests/scheduler-flex-layout.tsx +10 -14
  235. package/src/scheduler/tests/scheduler-jquery-agenda.tsx +10 -14
  236. package/src/scheduler/tests/scheduler-jquery-month.tsx +10 -14
  237. package/src/scheduler/tests/scheduler-react-agenda.tsx +10 -14
  238. package/src/scheduler/tests/scheduler-react-day.tsx +10 -14
  239. package/src/scheduler/tests/scheduler-react-month.tsx +10 -14
  240. package/src/scheduler/tests/scheduler-react-timeline-multi.tsx +10 -14
  241. package/src/scheduler/tests/scheduler-react-timeline.tsx +19 -28
  242. package/src/scheduler/tests/scheduler-react-week.tsx +10 -14
  243. package/src/scheduler/tests/scheduler-year.tsx +9 -13
  244. package/src/scheduler/tests/scheduler.tsx +20 -27
  245. package/src/slider/index.ts +2 -0
  246. package/src/slider/slider-tick.tsx +52 -0
  247. package/src/slider/slider.spec.tsx +120 -0
  248. package/src/slider/tests/slider-css-vars.tsx +185 -349
  249. package/src/slider/tests/slider-tick-absolute-position.tsx +40 -64
  250. package/src/slider/tests/slider.tsx +118 -262
  251. package/src/spreadsheet/tests/spreadsheet-filter-menu.tsx +6 -2
  252. package/dist/editor/tests/editor-table-wizard-accessibility.js.map +0 -7
  253. package/src/editor/tests/editor-table-wizard-accessibility.tsx +0 -69
package/src/slider/tests/slider-tick-absolute-position.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import ReactDOM from 'react-dom/client';
2
- import { Button } from '../../button';
2
+ import { Slider, SliderTick } from '../../slider';
3
3
 
4
4
  const root = ReactDOM.createRoot(
5
5
  document.getElementById('app') as HTMLElement
@@ -22,78 +22,54 @@ const style = `
22
22
  --kendo-slider-start: 20;
23
23
  --kendo-slider-end: 60;
24
24
  }
25
- `;
26
25
 
27
- root.render(
28
- <>
29
- <style>{style}</style>
30
- <div id="test-area" className="k-d-grid k-grid-cols-4">
26
+ .k-slider-items {
27
+ position: relative;
28
+ }
31
29
 
32
- <section>
33
- <div className="k-widget k-slider k-slider-horizontal">
34
- <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
35
- <div className="k-slider-track-wrap">
36
- <ul className="k-reset k-slider-items" style={{ position: 'relative' }}>
37
- <li className="k-tick k-tick-large k-tick-horizontal" style={{ zIndex: 1, position: 'absolute', left: '0%' }}>
38
- <span className="k-label">0</span>
39
- </li>
30
+ .k-slider-horizontal .k-slider-track .k-slider-selection {
31
+ width: 33%;
32
+ }
40
33
 
41
- <li className="k-tick k-tick-large k-tick-horizontal" style={{ zIndex: 1, position: 'absolute', left: '33%' }}>
42
- <span className="k-label">33</span>
43
- </li>
34
+ .k-slider-horizontal .k-slider-track .k-draghandle-end {
35
+ left: 33%;
36
+ z-index: 1;
37
+ }
44
38
 
45
- <li className="k-tick k-tick-large k-tick-horizontal" style={{ zIndex: 1, position: 'absolute', left: '50%' }}>
46
- <span className="k-label">50</span>
47
- </li>
39
+ .k-slider-vertical .k-slider-track .k-slider-selection {
40
+ bottom: 0;
41
+ height: 33%;
42
+ }
48
43
 
49
- <li className="k-tick k-tick-large k-tick-horizontal" style={{ zIndex: 1, position: 'absolute', left: '75%' }}>
50
- <span className="k-label">75</span>
51
- </li>
44
+ .k-slider-vertical .k-slider-track .k-draghandle-end {
45
+ bottom: 33%;
46
+ z-index: 1;
47
+ }
48
+ `;
52
49
 
53
- <li className="k-tick k-tick-large k-tick-horizontal" style={{ zIndex: 1, position: 'absolute', left: '100%' }}>
54
- <span className="k-label">100</span>
55
- </li>
56
- </ul>
57
- <div className="k-slider-track">
58
- <div className="k-slider-selection" style={{ width: '33%' }}></div>
59
- <a href="#" className="k-draghandle k-draghandle-end" style={{ left: '33%', zIndex: 1 }}></a>
60
- </div>
61
- </div>
62
- <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
63
- </div>
64
- </section>
50
+ root.render(
51
+ <>
52
+ <style>{style}</style>
53
+ <div id="test-area" className="k-d-grid k-grid-cols-2">
65
54
 
66
55
  <section>
67
- <div className="k-widget k-slider k-slider-vertical">
68
- <Button icon="caret-alt-down" rounded="full" className="k-button-decrease"></Button>
69
- <div className="k-slider-track-wrap">
70
- <ul className="k-reset k-slider-items" style={{ position: 'relative' }}>
71
- <li className="k-tick k-tick-large k-tick-vertical" style={{ zIndex: 1, position: 'absolute', bottom: '100%' }}>
72
- <span className="k-label">100</span>
73
- </li>
74
- <li className="k-tick k-tick-large k-tick-vertical" style={{ zIndex: 1, position: 'absolute', bottom: '75%' }}>
75
- <span className="k-label">75</span>
76
- </li>
77
-
78
- <li className="k-tick k-tick-large k-tick-vertical" style={{ zIndex: 1, position: 'absolute', bottom: '50%' }}>
79
- <span className="k-label">50</span>
80
- </li>
81
-
82
- <li className="k-tick k-tick-large k-tick-vertical" style={{ zIndex: 1, position: 'absolute', bottom: '33%' }}>
83
- <span className="k-label">33</span>
84
- </li>
56
+ <Slider>
57
+ <SliderTick label large orientation="horizontal" text="0" style={{ zIndex: 1, position: "absolute", left: "0%" }}/>
58
+ <SliderTick label large orientation="horizontal" text="33" style={{ zIndex: 1, position: "absolute", left: "33%" }}/>
59
+ <SliderTick label large orientation="horizontal" text="50" style={{ zIndex: 1, position: "absolute", left: "50%" }}/>
60
+ <SliderTick label large orientation="horizontal" text="75" style={{ zIndex: 1, position: "absolute", left: "75%" }}/>
61
+ <SliderTick label large orientation="horizontal" text="100" style={{ zIndex: 1, position: "absolute", left: "100%" }}/>
62
+ </Slider>
63
+ </section>
85
64
 
86
- <li className="k-tick k-tick-large k-tick-vertical" style={{ zIndex: 1, position: 'absolute', bottom: '0' }}>
87
- <span className="k-label">0</span>
88
- </li>
89
- </ul>
90
- <div className="k-slider-track">
91
- <div className="k-slider-selection" style={{ bottom: '0', height: '33%' }}></div>
92
- <a href="#" className="k-draghandle k-draghandle-end" style={{ bottom: '33%', zIndex: 1 }}></a>
93
- </div>
94
- </div>
95
- <Button icon="caret-alt-up" rounded="full" className="k-button-increase"></Button>
96
- </div>
65
+ <section style={{ justifySelf: "center" }} >
66
+ <Slider orientation="vertical">
67
+ <SliderTick label large orientation="vertical" text="0" style={{ zIndex: 1, position: "absolute", bottom: "0%" }}/>
68
+ <SliderTick label large orientation="vertical" text="33" style={{ zIndex: 1, position: "absolute", bottom: "33%" }}/>
69
+ <SliderTick label large orientation="vertical" text="50" style={{ zIndex: 1, position: "absolute", bottom: "50%" }}/>
70
+ <SliderTick label large orientation="vertical" text="75" style={{ zIndex: 1, position: "absolute", bottom: "75%" }}/>
71
+ <SliderTick label large orientation="vertical" text="100" style={{ zIndex: 1, position: "absolute", bottom: "100%" }}/>
72
+ </Slider>
97
73
  </section>
98
74
 
99
75
  </div>
package/src/slider/tests/slider.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import ReactDOM from 'react-dom/client';
2
- import { Button } from '../../button';
2
+ import { Slider, SliderTick } from '../../slider';
3
3
 
4
4
  const root = ReactDOM.createRoot(
5
5
  document.getElementById('app') as HTMLElement
@@ -36,288 +36,144 @@ root.render(
36
36
 
37
37
  <span>Normal</span>
38
38
  <section>
39
- <div className="k-slider k-slider-horizontal k-slider-0">
40
- <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
41
- <div className="k-slider-track-wrap">
42
- <ul className="k-reset k-slider-items">
43
- <li className="k-tick k-tick-large">
44
- <span className="k-label">0</span>
45
- </li>
46
- <li className="k-tick"></li>
47
- <li className="k-tick"></li>
48
- <li className="k-tick"></li>
49
- <li className="k-tick"></li>
50
- <li className="k-tick k-tick-large">
51
- <span className="k-label">5</span>
52
- </li>
53
- <li className="k-tick"></li>
54
- <li className="k-tick"></li>
55
- <li className="k-tick"></li>
56
- <li className="k-tick"></li>
57
- <li className="k-tick k-tick-large">
58
- <span className="k-label">10</span>
59
- </li>
60
- </ul>
61
- <div className="k-slider-track">
62
- <div className="k-slider-selection"></div>
63
- <a href="#" className="k-draghandle k-draghandle-end"></a>
64
- </div>
65
- </div>
66
- <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
67
- </div>
39
+ <Slider className="k-slider-0">
40
+ <SliderTick label large text="0"/>
41
+ <SliderTick />
42
+ <SliderTick />
43
+ <SliderTick />
44
+ <SliderTick />
45
+ <SliderTick label large text="5"/>
46
+ <SliderTick />
47
+ <SliderTick />
48
+ <SliderTick />
49
+ <SliderTick />
50
+ <SliderTick label large text="10"/>
51
+ </Slider>
68
52
  </section>
69
53
  <section>
70
- <div className="k-slider k-slider-horizontal k-slider-50">
71
- <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
72
- <div className="k-slider-track-wrap">
73
- <ul className="k-reset k-slider-items">
74
- <li className="k-tick k-tick-large">
75
- <span className="k-label">0</span>
76
- </li>
77
- <li className="k-tick"></li>
78
- <li className="k-tick"></li>
79
- <li className="k-tick"></li>
80
- <li className="k-tick"></li>
81
- <li className="k-tick k-tick-large">
82
- <span className="k-label">5</span>
83
- </li>
84
- <li className="k-tick"></li>
85
- <li className="k-tick"></li>
86
- <li className="k-tick"></li>
87
- <li className="k-tick"></li>
88
- <li className="k-tick k-tick-large">
89
- <span className="k-label">10</span>
90
- </li>
91
- </ul>
92
- <div className="k-slider-track">
93
- <div className="k-slider-selection"></div>
94
- <a href="#" className="k-draghandle k-draghandle-end k-hover"></a>
95
- </div>
96
- </div>
97
- <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
98
- </div>
54
+ <Slider className="k-slider-50" hover>
55
+ <SliderTick label large text="0"/>
56
+ <SliderTick />
57
+ <SliderTick />
58
+ <SliderTick />
59
+ <SliderTick />
60
+ <SliderTick label large text="5"/>
61
+ <SliderTick />
62
+ <SliderTick />
63
+ <SliderTick />
64
+ <SliderTick />
65
+ <SliderTick label large text="10"/>
66
+ </Slider>
99
67
  </section>
100
68
  <section>
101
- <div className="k-slider k-slider-horizontal k-slider-100">
102
- <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
103
- <div className="k-slider-track-wrap">
104
- <ul className="k-reset k-slider-items">
105
- <li className="k-tick k-tick-large">
106
- <span className="k-label">0</span>
107
- </li>
108
- <li className="k-tick"></li>
109
- <li className="k-tick"></li>
110
- <li className="k-tick"></li>
111
- <li className="k-tick"></li>
112
- <li className="k-tick k-tick-large">
113
- <span className="k-label">5</span>
114
- </li>
115
- <li className="k-tick"></li>
116
- <li className="k-tick"></li>
117
- <li className="k-tick"></li>
118
- <li className="k-tick"></li>
119
- <li className="k-tick k-tick-large">
120
- <span className="k-label">10</span>
121
- </li>
122
- </ul>
123
- <div className="k-slider-track">
124
- <div className="k-slider-selection"></div>
125
- <a href="#" className="k-draghandle k-draghandle-end k-focus"></a>
126
- </div>
127
- </div>
128
- <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
129
- </div>
69
+ <Slider className="k-slider-100" focus>
70
+ <SliderTick label large text="0"/>
71
+ <SliderTick />
72
+ <SliderTick />
73
+ <SliderTick />
74
+ <SliderTick />
75
+ <SliderTick label large text="5"/>
76
+ <SliderTick />
77
+ <SliderTick />
78
+ <SliderTick />
79
+ <SliderTick />
80
+ <SliderTick label large text="10"/>
81
+ </Slider>
130
82
  </section>
131
83
 
132
84
 
133
85
  <span>Disabled</span>
134
86
  <section>
135
- <div className="k-slider k-slider-horizontal k-slider-0 k-disabled">
136
- <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
137
- <div className="k-slider-track-wrap">
138
- <ul className="k-reset k-slider-items">
139
- <li className="k-tick k-tick-large">
140
- <span className="k-label">0</span>
141
- </li>
142
- <li className="k-tick"></li>
143
- <li className="k-tick"></li>
144
- <li className="k-tick"></li>
145
- <li className="k-tick"></li>
146
- <li className="k-tick k-tick-large">
147
- <span className="k-label">5</span>
148
- </li>
149
- <li className="k-tick"></li>
150
- <li className="k-tick"></li>
151
- <li className="k-tick"></li>
152
- <li className="k-tick"></li>
153
- <li className="k-tick k-tick-large">
154
- <span className="k-label">10</span>
155
- </li>
156
- </ul>
157
- <div className="k-slider-track">
158
- <div className="k-slider-selection"></div>
159
- <a href="#" className="k-draghandle k-draghandle-end"></a>
160
- </div>
161
- </div>
162
- <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
163
- </div>
87
+ <Slider className="k-slider-0" disabled>
88
+ <SliderTick label large text="0"/>
89
+ <SliderTick />
90
+ <SliderTick />
91
+ <SliderTick />
92
+ <SliderTick />
93
+ <SliderTick label large text="5"/>
94
+ <SliderTick />
95
+ <SliderTick />
96
+ <SliderTick />
97
+ <SliderTick />
98
+ <SliderTick label large text="10"/>
99
+ </Slider>
164
100
  </section>
165
101
  <section>
166
- <div className="k-slider k-slider-horizontal k-slider-50 k-disabled">
167
- <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
168
- <div className="k-slider-track-wrap">
169
- <ul className="k-reset k-slider-items">
170
- <li className="k-tick k-tick-large">
171
- <span className="k-label">0</span>
172
- </li>
173
- <li className="k-tick"></li>
174
- <li className="k-tick"></li>
175
- <li className="k-tick"></li>
176
- <li className="k-tick"></li>
177
- <li className="k-tick k-tick-large">
178
- <span className="k-label">5</span>
179
- </li>
180
- <li className="k-tick"></li>
181
- <li className="k-tick"></li>
182
- <li className="k-tick"></li>
183
- <li className="k-tick"></li>
184
- <li className="k-tick k-tick-large">
185
- <span className="k-label">10</span>
186
- </li>
187
- </ul>
188
- <div className="k-slider-track">
189
- <div className="k-slider-selection"></div>
190
- <a href="#" className="k-draghandle k-draghandle-end"></a>
191
- </div>
192
- </div>
193
- <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
194
- </div>
102
+ <Slider className="k-slider-50" disabled>
103
+ <SliderTick label large text="0"/>
104
+ <SliderTick />
105
+ <SliderTick />
106
+ <SliderTick />
107
+ <SliderTick />
108
+ <SliderTick label large text="5"/>
109
+ <SliderTick />
110
+ <SliderTick />
111
+ <SliderTick />
112
+ <SliderTick />
113
+ <SliderTick label large text="10"/>
114
+ </Slider>
195
115
  </section>
196
116
  <section>
197
- <div className="k-slider k-slider-horizontal k-slider-100 k-disabled">
198
- <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
199
- <div className="k-slider-track-wrap">
200
- <ul className="k-reset k-slider-items">
201
- <li className="k-tick k-tick-large">
202
- <span className="k-label">0</span>
203
- </li>
204
- <li className="k-tick"></li>
205
- <li className="k-tick"></li>
206
- <li className="k-tick"></li>
207
- <li className="k-tick"></li>
208
- <li className="k-tick k-tick-large">
209
- <span className="k-label">5</span>
210
- </li>
211
- <li className="k-tick"></li>
212
- <li className="k-tick"></li>
213
- <li className="k-tick"></li>
214
- <li className="k-tick"></li>
215
- <li className="k-tick k-tick-large">
216
- <span className="k-label">10</span>
217
- </li>
218
- </ul>
219
- <div className="k-slider-track">
220
- <div className="k-slider-selection"></div>
221
- <a href="#" className="k-draghandle k-draghandle-end"></a>
222
- </div>
223
- </div>
224
- <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
225
- </div>
117
+ <Slider className="k-slider-100" disabled>
118
+ <SliderTick label large text="0"/>
119
+ <SliderTick />
120
+ <SliderTick />
121
+ <SliderTick />
122
+ <SliderTick />
123
+ <SliderTick label large text="5"/>
124
+ <SliderTick />
125
+ <SliderTick />
126
+ <SliderTick />
127
+ <SliderTick />
128
+ <SliderTick label large text="10"/>
129
+ </Slider>
226
130
  </section>
227
131
 
228
132
  <span>Readonly</span>
229
133
  <section>
230
- <div className="k-slider k-slider-horizontal k-slider-0 k-readonly">
231
- <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
232
- <div className="k-slider-track-wrap">
233
- <ul className="k-reset k-slider-items">
234
- <li className="k-tick k-tick-large">
235
- <span className="k-label">0</span>
236
- </li>
237
- <li className="k-tick"></li>
238
- <li className="k-tick"></li>
239
- <li className="k-tick"></li>
240
- <li className="k-tick"></li>
241
- <li className="k-tick k-tick-large">
242
- <span className="k-label">5</span>
243
- </li>
244
- <li className="k-tick"></li>
245
- <li className="k-tick"></li>
246
- <li className="k-tick"></li>
247
- <li className="k-tick"></li>
248
- <li className="k-tick k-tick-large">
249
- <span className="k-label">10</span>
250
- </li>
251
- </ul>
252
- <div className="k-slider-track">
253
- <div className="k-slider-selection"></div>
254
- <a href="#" className="k-draghandle k-draghandle-end"></a>
255
- </div>
256
- </div>
257
- <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
258
- </div>
134
+ <Slider className="k-slider-0" readonly>
135
+ <SliderTick label large text="0"/>
136
+ <SliderTick />
137
+ <SliderTick />
138
+ <SliderTick />
139
+ <SliderTick />
140
+ <SliderTick label large text="5"/>
141
+ <SliderTick />
142
+ <SliderTick />
143
+ <SliderTick />
144
+ <SliderTick />
145
+ <SliderTick label large text="10"/>
146
+ </Slider>
259
147
  </section>
260
148
  <section>
261
- <div className="k-slider k-slider-horizontal k-slider-50 k-readonly">
262
- <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
263
- <div className="k-slider-track-wrap">
264
- <ul className="k-reset k-slider-items">
265
- <li className="k-tick k-tick-large">
266
- <span className="k-label">0</span>
267
- </li>
268
- <li className="k-tick"></li>
269
- <li className="k-tick"></li>
270
- <li className="k-tick"></li>
271
- <li className="k-tick"></li>
272
- <li className="k-tick k-tick-large">
273
- <span className="k-label">5</span>
274
- </li>
275
- <li className="k-tick"></li>
276
- <li className="k-tick"></li>
277
- <li className="k-tick"></li>
278
- <li className="k-tick"></li>
279
- <li className="k-tick k-tick-large">
280
- <span className="k-label">10</span>
281
- </li>
282
- </ul>
283
- <div className="k-slider-track">
284
- <div className="k-slider-selection"></div>
285
- <a href="#" className="k-draghandle k-draghandle-end"></a>
286
- </div>
287
- </div>
288
- <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
289
- </div>
149
+ <Slider className="k-slider-50" readonly>
150
+ <SliderTick label large text="0"/>
151
+ <SliderTick />
152
+ <SliderTick />
153
+ <SliderTick />
154
+ <SliderTick />
155
+ <SliderTick label large text="5"/>
156
+ <SliderTick />
157
+ <SliderTick />
158
+ <SliderTick />
159
+ <SliderTick />
160
+ <SliderTick label large text="10"/>
161
+ </Slider>
290
162
  </section>
291
163
  <section>
292
- <div className="k-slider k-slider-horizontal k-slider-100 k-readonly">
293
- <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
294
- <div className="k-slider-track-wrap">
295
- <ul className="k-reset k-slider-items">
296
- <li className="k-tick k-tick-large">
297
- <span className="k-label">0</span>
298
- </li>
299
- <li className="k-tick"></li>
300
- <li className="k-tick"></li>
301
- <li className="k-tick"></li>
302
- <li className="k-tick"></li>
303
- <li className="k-tick k-tick-large">
304
- <span className="k-label">5</span>
305
- </li>
306
- <li className="k-tick"></li>
307
- <li className="k-tick"></li>
308
- <li className="k-tick"></li>
309
- <li className="k-tick"></li>
310
- <li className="k-tick k-tick-large">
311
- <span className="k-label">10</span>
312
- </li>
313
- </ul>
314
- <div className="k-slider-track">
315
- <div className="k-slider-selection"></div>
316
- <a href="#" className="k-draghandle k-draghandle-end"></a>
317
- </div>
318
- </div>
319
- <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
320
- </div>
164
+ <Slider className="k-slider-100" readonly>
165
+ <SliderTick label large text="0"/>
166
+ <SliderTick />
167
+ <SliderTick />
168
+ <SliderTick />
169
+ <SliderTick />
170
+ <SliderTick label large text="5"/>
171
+ <SliderTick />
172
+ <SliderTick />
173
+ <SliderTick />
174
+ <SliderTick />
175
+ <SliderTick label large text="10"/>
176
+ </Slider>
321
177
  </section>
322
178
 
323
179
  </div>
package/src/spreadsheet/tests/spreadsheet-filter-menu.tsx CHANGED
@@ -38,7 +38,9 @@ root.render(
38
38
  <div className="k-columnmenu-item">
39
39
  Filter by condition
40
40
  <span className="k-spacer"></span>
41
- <Icon className="k-expander-indicator" name="arrow-chevron-down"></Icon>
41
+ <span className="k-expander-indicator">
42
+ <Icon name="arrow-chevron-down" />
43
+ </span>
42
44
  </div>
43
45
  </div>
44
46
  </div>
@@ -47,7 +49,9 @@ root.render(
47
49
  <div className="k-columnmenu-item">
48
50
  Filter by value
49
51
  <span className="k-spacer"></span>
50
- <Icon className="k-expander-indicator" name="arrow-chevron-up"></Icon>
52
+ <span className="k-expander-indicator">
53
+ <Icon name="arrow-chevron-up" />
54
+ </span>
51
55
  </div>
52
56
  <div className="k-columnmenu-item-content">
53
57
  <Searchbox placeholder="Search..." />