@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/dist/slider/tests/slider.js CHANGED
@@ -344,8 +344,124 @@
344
344
  Button.className = BUTTON_CLASSNAME;
345
345
  Button.defaultProps = defaultProps2;
346
346
 
347
- // src/slider/tests/slider.tsx
347
+ // src/slider/slider.spec.tsx
348
348
  var import_jsx_runtime3 = __require("react/jsx-runtime");
349
+ var SLIDER_CLASSNAME = "k-slider";
350
+ var states3 = [
351
+ States.hover,
352
+ States.focus,
353
+ States.active,
354
+ States.disabled,
355
+ States.readonly
356
+ ];
357
+ var options3 = {};
358
+ var defaultProps3 = {
359
+ type: "single",
360
+ orientation: "horizontal",
361
+ readonly: false,
362
+ disabled: false,
363
+ handlePosition: "end"
364
+ };
365
+ var Slider = (props) => {
366
+ const {
367
+ type = defaultProps3.type,
368
+ orientation = defaultProps3.orientation,
369
+ readonly = defaultProps3.readonly,
370
+ disabled = defaultProps3.disabled,
371
+ handlePosition = defaultProps3.handlePosition,
372
+ hover,
373
+ focus,
374
+ active,
375
+ trackStyle,
376
+ dir
377
+ } = props;
378
+ let iconIncrease;
379
+ let iconDecrease;
380
+ if (orientation === "horizontal") {
381
+ iconIncrease = "caret-alt-right";
382
+ iconDecrease = "caret-alt-left";
383
+ } else if (orientation === "vertical") {
384
+ iconIncrease = "caret-alt-up";
385
+ iconDecrease = "caret-alt-down";
386
+ }
387
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: classNames(
388
+ SLIDER_CLASSNAME,
389
+ props.className,
390
+ stateClassNames(SLIDER_CLASSNAME, {
391
+ readonly,
392
+ disabled
393
+ }),
394
+ {
395
+ [`k-slider-${orientation}`]: orientation,
396
+ "k-colorgradient-slider": type === "gradient",
397
+ "k-range-slider": type === "range"
398
+ }
399
+ ), dir, children: [
400
+ type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
401
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
402
+ type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "k-reset k-slider-items", children: props.children }),
403
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", style: trackStyle, children: [
404
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
405
+ type === "range" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: classNames(
406
+ "k-draghandle",
407
+ "k-draghandle-start",
408
+ stateClassNames(SLIDER_CLASSNAME, {
409
+ hover,
410
+ focus,
411
+ active
412
+ })
413
+ ) }),
414
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: classNames(
415
+ "k-draghandle",
416
+ `k-draghandle-${handlePosition}`,
417
+ stateClassNames(SLIDER_CLASSNAME, {
418
+ hover,
419
+ focus,
420
+ active
421
+ })
422
+ ) })
423
+ ] })
424
+ ] }),
425
+ type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
426
+ ] });
427
+ };
428
+ Slider.states = states3;
429
+ Slider.options = options3;
430
+ Slider.className = SLIDER_CLASSNAME;
431
+ Slider.defaultProps = defaultProps3;
432
+
433
+ // src/slider/slider-tick.tsx
434
+ var import_jsx_runtime4 = __require("react/jsx-runtime");
435
+ var SLIDER_TICK_CLASSNAME = "k-tick";
436
+ var states4 = [];
437
+ var options4 = {};
438
+ var defaultProps4 = {
439
+ label: false
440
+ };
441
+ var SliderTick = (props) => {
442
+ const {
443
+ style: style2,
444
+ label = defaultProps4.label,
445
+ orientation,
446
+ large,
447
+ text
448
+ } = props;
449
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { className: classNames(
450
+ props.className,
451
+ SLIDER_TICK_CLASSNAME,
452
+ {
453
+ [`k-tick-${orientation}`]: orientation,
454
+ "k-tick-large": large
455
+ }
456
+ ), style: style2, children: label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-label", children: text }) });
457
+ };
458
+ SliderTick.states = states4;
459
+ SliderTick.options = options4;
460
+ SliderTick.className = SLIDER_TICK_CLASSNAME;
461
+ SliderTick.defaultProps = defaultProps4;
462
+
463
+ // src/slider/tests/slider.tsx
464
+ var import_jsx_runtime5 = __require("react/jsx-runtime");
349
465
  var root = import_client.default.createRoot(
350
466
  document.getElementById("app")
351
467
  );
@@ -369,222 +485,132 @@
369
485
  }
370
486
  `;
371
487
  root.render(
372
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
373
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: style }),
374
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
375
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", {}),
376
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Empty" }),
377
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Not Empty" }),
378
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Full" }),
379
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Normal" }),
380
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider k-slider-horizontal k-slider-0", children: [
381
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }),
382
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
383
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
384
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
385
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
386
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
387
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
388
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
389
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "5" }) }),
390
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
391
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
392
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
393
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
394
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "10" }) })
395
- ] }),
396
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
397
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
398
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end" })
399
- ] })
400
- ] }),
401
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" })
488
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
489
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: style }),
490
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
491
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", {}),
492
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Empty" }),
493
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Not Empty" }),
494
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Full" }),
495
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Normal" }),
496
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { className: "k-slider-0", children: [
497
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
498
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
499
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
500
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
501
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
502
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "5" }),
503
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
504
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
505
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
506
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
507
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "10" })
402
508
  ] }) }),
403
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider k-slider-horizontal k-slider-50", children: [
404
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }),
405
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
406
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
407
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
408
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
409
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
410
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
411
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
412
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "5" }) }),
413
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
414
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
415
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
416
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
417
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "10" }) })
418
- ] }),
419
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
420
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
421
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end k-hover" })
422
- ] })
423
- ] }),
424
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" })
509
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { className: "k-slider-50", hover: true, children: [
510
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
511
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
512
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
513
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
514
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
515
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "5" }),
516
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
517
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
518
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
519
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
520
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "10" })
425
521
  ] }) }),
426
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider k-slider-horizontal k-slider-100", children: [
427
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }),
428
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
429
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
430
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
431
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
432
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
433
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
434
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
435
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "5" }) }),
436
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
437
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
438
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
439
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
440
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "10" }) })
441
- ] }),
442
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
443
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
444
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end k-focus" })
445
- ] })
446
- ] }),
447
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" })
522
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { className: "k-slider-100", focus: true, children: [
523
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
524
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
525
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
526
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
527
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
528
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "5" }),
529
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
530
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
531
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
532
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
533
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "10" })
448
534
  ] }) }),
449
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Disabled" }),
450
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider k-slider-horizontal k-slider-0 k-disabled", children: [
451
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }),
452
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
453
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
454
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
455
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
456
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
457
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
458
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
459
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "5" }) }),
460
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
461
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
462
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
463
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
464
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "10" }) })
465
- ] }),
466
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
467
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
468
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end" })
469
- ] })
470
- ] }),
471
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" })
535
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Disabled" }),
536
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { className: "k-slider-0", disabled: true, children: [
537
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
538
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
539
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
540
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
541
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
542
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "5" }),
543
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
544
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
545
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
546
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
547
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "10" })
472
548
  ] }) }),
473
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider k-slider-horizontal k-slider-50 k-disabled", children: [
474
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }),
475
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
476
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
477
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
478
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
479
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
480
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
481
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
482
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "5" }) }),
483
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
484
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
485
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
486
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
487
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "10" }) })
488
- ] }),
489
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
490
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
491
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end" })
492
- ] })
493
- ] }),
494
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" })
549
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { className: "k-slider-50", disabled: true, children: [
550
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
551
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
552
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
553
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
554
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
555
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "5" }),
556
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
557
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
558
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
559
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
560
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "10" })
495
561
  ] }) }),
496
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider k-slider-horizontal k-slider-100 k-disabled", children: [
497
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }),
498
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
499
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
500
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
501
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
502
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
503
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
504
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
505
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "5" }) }),
506
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
507
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
508
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
509
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
510
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "10" }) })
511
- ] }),
512
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
513
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
514
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end" })
515
- ] })
516
- ] }),
517
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" })
562
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { className: "k-slider-100", disabled: true, children: [
563
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
564
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
565
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
566
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
567
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
568
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "5" }),
569
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
570
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
571
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
572
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
573
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "10" })
518
574
  ] }) }),
519
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Readonly" }),
520
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider k-slider-horizontal k-slider-0 k-readonly", children: [
521
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }),
522
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
523
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
524
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
525
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
526
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
527
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
528
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
529
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "5" }) }),
530
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
531
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
532
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
533
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
534
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "10" }) })
535
- ] }),
536
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
537
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
538
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end" })
539
- ] })
540
- ] }),
541
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" })
575
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Readonly" }),
576
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { className: "k-slider-0", readonly: true, children: [
577
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
578
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
579
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
580
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
581
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
582
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "5" }),
583
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
584
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
585
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
586
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
587
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "10" })
542
588
  ] }) }),
543
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider k-slider-horizontal k-slider-50 k-readonly", children: [
544
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }),
545
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
546
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
547
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
548
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
549
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
550
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
551
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
552
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "5" }) }),
553
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
554
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
555
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
556
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
557
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "10" }) })
558
- ] }),
559
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
560
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
561
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end" })
562
- ] })
563
- ] }),
564
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" })
589
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { className: "k-slider-50", readonly: true, children: [
590
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
591
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
592
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
593
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
594
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
595
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "5" }),
596
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
597
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
598
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
599
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
600
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "10" })
565
601
  ] }) }),
566
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider k-slider-horizontal k-slider-100 k-readonly", children: [
567
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-left", rounded: "full", className: "k-button-decrease" }),
568
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
569
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "k-reset k-slider-items", children: [
570
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "0" }) }),
571
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
572
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
573
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
574
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
575
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "5" }) }),
576
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
577
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
578
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
579
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick" }),
580
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "k-tick k-tick-large", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-label", children: "10" }) })
581
- ] }),
582
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", children: [
583
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
584
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "#", className: "k-draghandle k-draghandle-end" })
585
- ] })
586
- ] }),
587
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { icon: "caret-alt-right", rounded: "full", className: "k-button-increase" })
602
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Slider, { className: "k-slider-100", readonly: true, children: [
603
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "0" }),
604
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
605
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
606
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
607
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
608
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "5" }),
609
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
610
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
611
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
612
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, {}),
613
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderTick, { label: true, large: true, text: "10" })
588
614
  ] }) })
589
615
  ] })
590
616
  ] })