@progress/kendo-themes-html 7.0.3-dev.0 → 7.0.3-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 (349) hide show
  1. package/dist/cjs/badge/templates/badge-normal.js +4370 -0
  2. package/dist/cjs/badge/templates/icon-badge.js +4376 -0
  3. package/dist/cjs/badge/tests/badge-cutout-border.js +4421 -0
  4. package/dist/cjs/badge/tests/badge-misc.js +63 -73
  5. package/dist/cjs/badge/tests/badge-outline.js +4392 -0
  6. package/dist/cjs/badge/tests/badge-position-outline.js +4454 -0
  7. package/dist/cjs/badge/tests/badge-position-solid.js +4454 -0
  8. package/dist/cjs/badge/tests/badge-size.js +4235 -63
  9. package/dist/cjs/badge/tests/badge-solid.js +4392 -0
  10. package/dist/cjs/breadcrumb/breadcrumb-link.js +1 -0
  11. package/dist/cjs/breadcrumb/{tests → templates}/breadcrumb-adaptive.js +237 -260
  12. package/dist/cjs/breadcrumb/templates/breadcrumb-normal.js +4520 -0
  13. package/dist/cjs/breadcrumb/templates/breadcrumb-root-adaptive.js +4543 -0
  14. package/dist/cjs/breadcrumb/templates/breadcrumb-root.js +4542 -0
  15. package/dist/cjs/breadcrumb/tests/breadcrumb-items-rtl.js +5202 -0
  16. package/dist/cjs/breadcrumb/tests/breadcrumb-items.js +5202 -0
  17. package/dist/cjs/breadcrumb/tests/breadcrumb-rtl.js +469 -945
  18. package/dist/cjs/breadcrumb/tests/breadcrumb-size.js +55 -53
  19. package/dist/cjs/breadcrumb/tests/breadcrumb.js +405 -951
  20. package/dist/cjs/captcha/captcha.spec.js +29 -13
  21. package/dist/cjs/captcha/{tests/captcha-loading.js → templates/captcha-normal.js} +37 -24
  22. package/dist/cjs/captcha/tests/captcha-rtl.js +4987 -0
  23. package/dist/cjs/captcha/tests/captcha.js +41 -18
  24. package/dist/cjs/chat/chat.spec.js +4 -4
  25. package/dist/cjs/chat/templates/chat-normal.js +5142 -0
  26. package/dist/cjs/chat/templates/chat-with-options.js +5143 -0
  27. package/dist/cjs/chat/templates/chat-with-toolbar.js +5144 -0
  28. package/dist/cjs/chat/tests/chat-content-rtl.js +5455 -0
  29. package/dist/cjs/chat/tests/{chat-scrollable-deck.js → chat-content.js} +115 -37
  30. package/dist/cjs/chat/tests/chat-rtl.js +300 -472
  31. package/dist/cjs/chat/tests/chat.js +296 -484
  32. package/dist/cjs/dropzone/dropzone.spec.js +11 -9
  33. package/dist/cjs/dropzone/templates/dropzone-normal.js +4364 -0
  34. package/dist/cjs/dropzone/templates/dropzone-with-note.js +4370 -0
  35. package/dist/cjs/dropzone/tests/dropzone-states.js +4386 -0
  36. package/dist/cjs/dropzone/tests/dropzone.js +37 -19
  37. package/dist/cjs/editor/tests/editor-find-replace.js +225 -52
  38. package/dist/cjs/editor/tests/editor-image-editor.js +936 -15
  39. package/dist/cjs/editor/tests/editor-table-wizard.js +301 -128
  40. package/dist/cjs/filemanager/tests/filemanager-contextmenu.js +529 -453
  41. package/dist/cjs/filemanager/tests/filemanager-drag-hint.js +529 -453
  42. package/dist/cjs/filemanager/tests/filemanager-gridview.js +594 -518
  43. package/dist/cjs/filemanager/tests/filemanager-listview.js +548 -472
  44. package/dist/cjs/filemanager/tests/filemanager-preview.js +647 -571
  45. package/dist/cjs/form/templates/form-horizontal.js +5920 -0
  46. package/dist/cjs/form/templates/form-normal.js +5919 -0
  47. package/dist/cjs/form/tests/form-field-dateinputs.js +895 -58
  48. package/dist/cjs/form/tests/form-field-dropdowns.js +394 -59
  49. package/dist/cjs/form/tests/form-field-fieldset.js +1003 -27
  50. package/dist/cjs/form/tests/form-field-inputs-rtl.js +898 -238
  51. package/dist/cjs/form/tests/form-field-inputs.js +2304 -1664
  52. package/dist/cjs/form/tests/form-grid-layout.js +192 -22
  53. package/dist/cjs/form/tests/form-misc.js +874 -43
  54. package/dist/cjs/form/tests/form-sizes.js +680 -505
  55. package/dist/cjs/gantt/tests/gantt-editing-popup-general.js +202 -29
  56. package/dist/cjs/gantt/tests/gantt-editing-popup-other.js +684 -29
  57. package/dist/cjs/grid/tests/grid-angular.js +156 -146
  58. package/dist/cjs/grid/tests/grid-column-resizing-actions.js +279 -106
  59. package/dist/cjs/grid/tests/grid-editing-popup.js +187 -14
  60. package/dist/cjs/grid/tests/grid-rtl-angular.js +102 -92
  61. package/dist/cjs/grid/tests/grid-rtl.js +95 -85
  62. package/dist/cjs/grid/tests/grid-selection-aggregates.js +104 -94
  63. package/dist/cjs/grid/tests/grid-size-sm-comp-sm.js +480 -470
  64. package/dist/cjs/grid/tests/grid-size-sm.js +480 -470
  65. package/dist/cjs/grid/tests/grid-virtualization.js +418 -408
  66. package/dist/cjs/grid/tests/grid.js +120 -110
  67. package/dist/cjs/imageeditor/tests/imageeditor-crop-pane.js +217 -44
  68. package/dist/cjs/imageeditor/tests/imageeditor-resize-pane.js +205 -32
  69. package/dist/cjs/index.js +4482 -4153
  70. package/dist/cjs/loader/templates/loader-container-normal.js +250 -0
  71. package/dist/cjs/loader/templates/loader-converging.js +250 -0
  72. package/dist/cjs/loader/templates/loader-infinite.js +250 -0
  73. package/dist/cjs/loader/templates/loader-normal.js +250 -0
  74. package/dist/cjs/loader/tests/{loader-sizes.js → loader-colors.js} +32 -23
  75. package/dist/cjs/loader/tests/loader-container-colors.js +20 -25
  76. package/dist/cjs/loader/tests/loader-container-overlay.js +26 -13
  77. package/dist/cjs/loader/tests/loader-container.js +27 -20
  78. package/dist/cjs/loader/tests/loader.js +27 -46
  79. package/dist/cjs/pdf-viewer/tests/pdf-viewer-blank-page.js +28 -21
  80. package/dist/cjs/scheduler/tests/scheduler-edit-dialog.js +309 -125
  81. package/dist/cjs/scheduler/tests/scheduler-editing-weekly.js +420 -236
  82. package/dist/cjs/skeleton/index.js +28 -1
  83. package/dist/cjs/skeleton/templates/skeleton-circle.js +83 -0
  84. package/dist/cjs/skeleton/templates/skeleton-normal.js +77 -0
  85. package/dist/cjs/skeleton/templates/skeleton-rectangle.js +83 -0
  86. package/dist/cjs/skeleton/tests/skeleton.js +38 -14
  87. package/dist/cjs/spreadsheet/tests/spreadsheet-data-validation.js +370 -322
  88. package/dist/cjs/spreadsheet/tests/spreadsheet-file-dialogs.js +548 -368
  89. package/dist/cjs/spreadsheet/tests/spreadsheet-find-replace-dialog.js +450 -277
  90. package/dist/cjs/spreadsheet/tests/spreadsheet-format-dialogs.js +950 -777
  91. package/dist/cjs/spreadsheet/tests/spreadsheet-formula-dialog.js +308 -28
  92. package/dist/cjs/spreadsheet/tests/spreadsheet-insert-dialogs.js +1119 -933
  93. package/dist/cjs/spreadsheet/tests/spreadsheet-print.js +782 -734
  94. package/dist/cjs/spreadsheet/tests/spreadsheet-sheets-bar.js +924 -67
  95. package/dist/cjs/taskboard/tests/taskboard-pane.js +299 -126
  96. package/dist/cjs/treelist/tests/treelist-editing-popup.js +673 -18
  97. package/dist/esm/badge/templates/badge-normal.js +4354 -0
  98. package/dist/esm/badge/templates/icon-badge.js +4360 -0
  99. package/dist/esm/badge/tests/badge-cutout-border.js +4405 -0
  100. package/dist/esm/badge/tests/badge-misc.js +62 -72
  101. package/dist/esm/badge/tests/badge-outline.js +4376 -0
  102. package/dist/esm/badge/tests/badge-position-outline.js +4438 -0
  103. package/dist/esm/badge/tests/badge-position-solid.js +4438 -0
  104. package/dist/esm/badge/tests/badge-size.js +4242 -64
  105. package/dist/esm/badge/tests/badge-solid.js +4376 -0
  106. package/dist/esm/breadcrumb/breadcrumb-link.js +1 -0
  107. package/dist/esm/breadcrumb/templates/breadcrumb-adaptive.js +4507 -0
  108. package/dist/esm/breadcrumb/templates/breadcrumb-normal.js +4504 -0
  109. package/dist/esm/breadcrumb/{tests/breadcrumb-adaptive.js → templates/breadcrumb-root-adaptive.js} +258 -261
  110. package/dist/esm/breadcrumb/templates/breadcrumb-root.js +4526 -0
  111. package/dist/esm/breadcrumb/tests/breadcrumb-items-rtl.js +5186 -0
  112. package/dist/esm/breadcrumb/tests/breadcrumb-items.js +5186 -0
  113. package/dist/esm/breadcrumb/tests/breadcrumb-rtl.js +470 -946
  114. package/dist/esm/breadcrumb/tests/breadcrumb-size.js +56 -54
  115. package/dist/esm/breadcrumb/tests/breadcrumb.js +406 -952
  116. package/dist/esm/captcha/captcha.spec.js +24 -8
  117. package/dist/esm/captcha/{tests/captcha-loading.js → templates/captcha-normal.js} +28 -15
  118. package/dist/esm/captcha/tests/captcha-rtl.js +4971 -0
  119. package/dist/esm/captcha/tests/captcha.js +36 -13
  120. package/dist/esm/chat/chat.spec.js +4 -4
  121. package/dist/esm/chat/templates/chat-normal.js +5126 -0
  122. package/dist/esm/chat/templates/chat-with-options.js +5127 -0
  123. package/dist/esm/chat/templates/chat-with-toolbar.js +5128 -0
  124. package/dist/esm/chat/tests/chat-content-rtl.js +5439 -0
  125. package/dist/esm/chat/tests/{chat-scrollable-deck.js → chat-content.js} +111 -33
  126. package/dist/esm/chat/tests/chat-rtl.js +300 -472
  127. package/dist/esm/chat/tests/chat.js +295 -483
  128. package/dist/esm/dropzone/dropzone.spec.js +11 -9
  129. package/dist/esm/dropzone/templates/dropzone-normal.js +4348 -0
  130. package/dist/esm/dropzone/templates/dropzone-with-note.js +4354 -0
  131. package/dist/esm/dropzone/tests/dropzone-states.js +4370 -0
  132. package/dist/esm/dropzone/tests/dropzone.js +34 -16
  133. package/dist/esm/editor/tests/editor-find-replace.js +225 -52
  134. package/dist/esm/editor/tests/editor-image-editor.js +936 -15
  135. package/dist/esm/editor/tests/editor-table-wizard.js +301 -128
  136. package/dist/esm/filemanager/tests/filemanager-contextmenu.js +529 -453
  137. package/dist/esm/filemanager/tests/filemanager-drag-hint.js +529 -453
  138. package/dist/esm/filemanager/tests/filemanager-gridview.js +594 -518
  139. package/dist/esm/filemanager/tests/filemanager-listview.js +548 -472
  140. package/dist/esm/filemanager/tests/filemanager-preview.js +647 -571
  141. package/dist/esm/form/templates/form-horizontal.js +5904 -0
  142. package/dist/esm/form/templates/form-normal.js +5903 -0
  143. package/dist/esm/form/tests/form-field-dateinputs.js +895 -58
  144. package/dist/esm/form/tests/form-field-dropdowns.js +395 -60
  145. package/dist/esm/form/tests/form-field-fieldset.js +1003 -27
  146. package/dist/esm/form/tests/form-field-inputs-rtl.js +898 -238
  147. package/dist/esm/form/tests/form-field-inputs.js +2317 -1677
  148. package/dist/esm/form/tests/form-grid-layout.js +192 -22
  149. package/dist/esm/form/tests/form-misc.js +874 -43
  150. package/dist/esm/form/tests/form-sizes.js +680 -505
  151. package/dist/esm/gantt/tests/gantt-editing-popup-general.js +202 -29
  152. package/dist/esm/gantt/tests/gantt-editing-popup-other.js +684 -29
  153. package/dist/esm/grid/tests/grid-angular.js +126 -116
  154. package/dist/esm/grid/tests/grid-column-resizing-actions.js +279 -106
  155. package/dist/esm/grid/tests/grid-editing-popup.js +187 -14
  156. package/dist/esm/grid/tests/grid-rtl-angular.js +84 -74
  157. package/dist/esm/grid/tests/grid-rtl.js +80 -70
  158. package/dist/esm/grid/tests/grid-selection-aggregates.js +76 -66
  159. package/dist/esm/grid/tests/grid-size-sm-comp-sm.js +383 -373
  160. package/dist/esm/grid/tests/grid-size-sm.js +383 -373
  161. package/dist/esm/grid/tests/grid-virtualization.js +366 -356
  162. package/dist/esm/grid/tests/grid.js +100 -90
  163. package/dist/esm/imageeditor/tests/imageeditor-crop-pane.js +217 -44
  164. package/dist/esm/imageeditor/tests/imageeditor-resize-pane.js +205 -32
  165. package/dist/esm/index.js +4462 -4133
  166. package/dist/esm/loader/templates/loader-container-normal.js +228 -0
  167. package/dist/esm/loader/templates/loader-converging.js +228 -0
  168. package/dist/esm/loader/templates/loader-infinite.js +228 -0
  169. package/dist/esm/loader/templates/loader-normal.js +228 -0
  170. package/dist/esm/loader/tests/{loader-sizes.js → loader-colors.js} +29 -20
  171. package/dist/esm/loader/tests/loader-container-colors.js +19 -24
  172. package/dist/esm/loader/tests/loader-container-overlay.js +24 -11
  173. package/dist/esm/loader/tests/loader-container.js +25 -18
  174. package/dist/esm/loader/tests/loader.js +27 -46
  175. package/dist/esm/pdf-viewer/tests/pdf-viewer-blank-page.js +26 -19
  176. package/dist/esm/scheduler/tests/scheduler-edit-dialog.js +309 -125
  177. package/dist/esm/scheduler/tests/scheduler-editing-weekly.js +420 -236
  178. package/dist/esm/skeleton/index.js +28 -1
  179. package/dist/esm/skeleton/templates/skeleton-circle.js +61 -0
  180. package/dist/esm/skeleton/templates/skeleton-normal.js +55 -0
  181. package/dist/esm/skeleton/templates/skeleton-rectangle.js +61 -0
  182. package/dist/esm/skeleton/tests/skeleton.js +35 -11
  183. package/dist/esm/spreadsheet/tests/spreadsheet-data-validation.js +370 -322
  184. package/dist/esm/spreadsheet/tests/spreadsheet-file-dialogs.js +549 -369
  185. package/dist/esm/spreadsheet/tests/spreadsheet-find-replace-dialog.js +451 -278
  186. package/dist/esm/spreadsheet/tests/spreadsheet-format-dialogs.js +948 -775
  187. package/dist/esm/spreadsheet/tests/spreadsheet-formula-dialog.js +309 -29
  188. package/dist/esm/spreadsheet/tests/spreadsheet-insert-dialogs.js +1124 -938
  189. package/dist/esm/spreadsheet/tests/spreadsheet-print.js +587 -539
  190. package/dist/esm/spreadsheet/tests/spreadsheet-sheets-bar.js +925 -68
  191. package/dist/esm/taskboard/tests/taskboard-pane.js +299 -126
  192. package/dist/esm/treelist/tests/treelist-editing-popup.js +673 -18
  193. package/dist/types/badge/index.d.ts +2 -0
  194. package/dist/types/badge/templates/badge-normal.d.ts +1 -0
  195. package/dist/types/badge/templates/icon-badge.d.ts +1 -0
  196. package/dist/types/breadcrumb/breadcrumb-link.d.ts +4 -1
  197. package/dist/types/breadcrumb/index.d.ts +4 -0
  198. package/dist/types/breadcrumb/templates/breadcrumb-adaptive.d.ts +1 -0
  199. package/dist/types/breadcrumb/templates/breadcrumb-normal.d.ts +1 -0
  200. package/dist/types/breadcrumb/templates/breadcrumb-root-adaptive.d.ts +1 -0
  201. package/dist/types/breadcrumb/templates/breadcrumb-root.d.ts +1 -0
  202. package/dist/types/breadcrumb/tests/breadcrumb-items.d.ts +2 -0
  203. package/dist/types/captcha/index.d.ts +1 -0
  204. package/dist/types/captcha/templates/captcha-normal.d.ts +1 -0
  205. package/dist/types/captcha/tests/captcha-rtl.d.ts +2 -0
  206. package/dist/types/chat/index.d.ts +3 -0
  207. package/dist/types/chat/templates/chat-normal.d.ts +1 -0
  208. package/dist/types/chat/templates/chat-with-options.d.ts +1 -0
  209. package/dist/types/chat/templates/chat-with-toolbar.d.ts +1 -0
  210. package/dist/types/chat/tests/chat-content-rtl.d.ts +2 -0
  211. package/dist/types/chat/tests/chat-content.d.ts +2 -0
  212. package/dist/types/dropzone/dropzone.spec.d.ts +12 -3
  213. package/dist/types/dropzone/index.d.ts +2 -0
  214. package/dist/types/dropzone/templates/dropzone-normal.d.ts +1 -0
  215. package/dist/types/dropzone/templates/dropzone-with-note.d.ts +1 -0
  216. package/dist/types/dropzone/tests/dropzone-states.d.ts +2 -0
  217. package/dist/types/form/index.d.ts +2 -0
  218. package/dist/types/form/templates/form-horizontal.d.ts +1 -0
  219. package/dist/types/form/templates/form-normal.d.ts +1 -0
  220. package/dist/types/index.d.ts +1 -0
  221. package/dist/types/loader/index.d.ts +4 -0
  222. package/dist/types/loader/templates/loader-container-normal.d.ts +1 -0
  223. package/dist/types/loader/templates/loader-converging.d.ts +1 -0
  224. package/dist/types/loader/templates/loader-infinite.d.ts +1 -0
  225. package/dist/types/loader/templates/loader-normal.d.ts +1 -0
  226. package/dist/types/loader/tests/loader-colors.d.ts +2 -0
  227. package/dist/types/skeleton/index.d.ts +3 -0
  228. package/dist/types/skeleton/templates/skeleton-circle.d.ts +1 -0
  229. package/dist/types/skeleton/templates/skeleton-normal.d.ts +1 -0
  230. package/dist/types/skeleton/templates/skeleton-rectangle.d.ts +1 -0
  231. package/package.json +2 -2
  232. package/src/badge/index.ts +2 -0
  233. package/src/badge/templates/badge-normal.tsx +3 -0
  234. package/src/badge/templates/icon-badge.tsx +11 -0
  235. package/src/badge/tests/badge-cutout-border.tsx +91 -0
  236. package/src/badge/tests/badge-misc.tsx +73 -136
  237. package/src/badge/tests/badge-outline.tsx +29 -0
  238. package/src/badge/tests/badge-position-outline.tsx +171 -0
  239. package/src/badge/tests/{badge-position.tsx → badge-position-solid.tsx} +36 -36
  240. package/src/badge/tests/badge-size.tsx +28 -65
  241. package/src/badge/tests/badge-solid.tsx +29 -0
  242. package/src/breadcrumb/breadcrumb-link.tsx +2 -0
  243. package/src/breadcrumb/index.ts +4 -0
  244. package/src/breadcrumb/templates/breadcrumb-adaptive.tsx +37 -0
  245. package/src/breadcrumb/templates/breadcrumb-normal.tsx +36 -0
  246. package/src/breadcrumb/templates/breadcrumb-root-adaptive.tsx +45 -0
  247. package/src/breadcrumb/templates/breadcrumb-root.tsx +41 -0
  248. package/src/breadcrumb/tests/breadcrumb-items-rtl.tsx +194 -0
  249. package/src/breadcrumb/tests/breadcrumb-items.tsx +194 -0
  250. package/src/breadcrumb/tests/breadcrumb-rtl.tsx +107 -187
  251. package/src/breadcrumb/tests/breadcrumb-size.tsx +27 -78
  252. package/src/breadcrumb/tests/breadcrumb.tsx +59 -253
  253. package/src/captcha/captcha.spec.tsx +2 -2
  254. package/src/captcha/index.ts +1 -0
  255. package/src/captcha/templates/captcha-normal.tsx +5 -0
  256. package/src/captcha/tests/captcha-rtl.tsx +16 -0
  257. package/src/captcha/tests/captcha.tsx +9 -6
  258. package/src/chat/chat.spec.tsx +4 -4
  259. package/src/chat/index.ts +3 -0
  260. package/src/chat/templates/chat-normal.tsx +23 -0
  261. package/src/chat/templates/chat-with-options.tsx +25 -0
  262. package/src/chat/templates/chat-with-toolbar.tsx +26 -0
  263. package/src/chat/tests/chat-content-rtl.tsx +166 -0
  264. package/src/chat/tests/chat-content.tsx +166 -0
  265. package/src/chat/tests/chat-rtl.tsx +28 -40
  266. package/src/chat/tests/chat.tsx +22 -78
  267. package/src/dropzone/dropzone.spec.tsx +13 -5
  268. package/src/dropzone/index.ts +2 -0
  269. package/src/dropzone/templates/dropzone-normal.tsx +3 -0
  270. package/src/dropzone/templates/dropzone-with-note.tsx +7 -0
  271. package/src/dropzone/tests/dropzone-states.tsx +22 -0
  272. package/src/dropzone/tests/dropzone.tsx +11 -9
  273. package/src/editor/tests/editor-find-replace.tsx +5 -5
  274. package/src/editor/tests/editor-image-editor.tsx +3 -3
  275. package/src/editor/tests/editor-table-wizard.tsx +7 -7
  276. package/src/filemanager/tests/filemanager-contextmenu.tsx +3 -3
  277. package/src/filemanager/tests/filemanager-drag-hint.tsx +3 -3
  278. package/src/filemanager/tests/filemanager-gridview.tsx +5 -5
  279. package/src/filemanager/tests/filemanager-listview.tsx +5 -5
  280. package/src/filemanager/tests/filemanager-preview.tsx +7 -7
  281. package/src/form/index.ts +2 -0
  282. package/src/form/templates/form-horizontal.tsx +48 -0
  283. package/src/form/templates/form-normal.tsx +47 -0
  284. package/src/form/tests/form-field-dateinputs.tsx +9 -9
  285. package/src/form/tests/form-field-dropdowns.tsx +9 -9
  286. package/src/form/tests/form-field-fieldset.tsx +9 -7
  287. package/src/form/tests/form-field-inputs-rtl.tsx +10 -10
  288. package/src/form/tests/form-field-inputs.tsx +37 -69
  289. package/src/form/tests/form-grid-layout.tsx +3 -9
  290. package/src/form/tests/form-misc.tsx +7 -22
  291. package/src/form/tests/form-sizes.tsx +27 -59
  292. package/src/gantt/tests/gantt-editing-popup-general.tsx +3 -3
  293. package/src/gantt/tests/gantt-editing-popup-other.tsx +3 -3
  294. package/src/grid/tests/grid-angular.tsx +2 -2
  295. package/src/grid/tests/grid-column-resizing-actions.tsx +3 -3
  296. package/src/grid/tests/grid-editing-popup.tsx +3 -3
  297. package/src/grid/tests/grid-rtl-angular.tsx +3 -3
  298. package/src/grid/tests/grid-rtl.tsx +3 -3
  299. package/src/grid/tests/grid-selection-aggregates.tsx +5 -5
  300. package/src/grid/tests/grid-size-sm-comp-sm.tsx +3 -3
  301. package/src/grid/tests/grid-size-sm.tsx +3 -3
  302. package/src/grid/tests/grid-virtualization.tsx +201 -201
  303. package/src/grid/tests/grid.tsx +3 -3
  304. package/src/imageeditor/tests/imageeditor-crop-pane.tsx +3 -3
  305. package/src/imageeditor/tests/imageeditor-resize-pane.tsx +3 -3
  306. package/src/index.ts +1 -1
  307. package/src/loader/index.ts +4 -0
  308. package/src/loader/templates/loader-container-normal.tsx +5 -0
  309. package/src/loader/templates/loader-converging.tsx +5 -0
  310. package/src/loader/templates/loader-infinite.tsx +5 -0
  311. package/src/loader/templates/loader-normal.tsx +5 -0
  312. package/src/loader/tests/loader-colors.tsx +34 -0
  313. package/src/loader/tests/loader-container-colors.tsx +11 -52
  314. package/src/loader/tests/loader-container-overlay.tsx +5 -5
  315. package/src/loader/tests/loader-container.tsx +16 -35
  316. package/src/loader/tests/loader.tsx +15 -129
  317. package/src/pdf-viewer/tests/pdf-viewer-blank-page.tsx +2 -2
  318. package/src/scheduler/tests/scheduler-edit-dialog.tsx +3 -3
  319. package/src/scheduler/tests/scheduler-editing-weekly.tsx +3 -3
  320. package/src/skeleton/index.tsx +3 -0
  321. package/src/skeleton/templates/skeleton-circle.tsx +7 -0
  322. package/src/skeleton/templates/skeleton-normal.tsx +3 -0
  323. package/src/skeleton/templates/skeleton-rectangle.tsx +7 -0
  324. package/src/skeleton/tests/skeleton.tsx +10 -10
  325. package/src/spreadsheet/tests/spreadsheet-data-validation.tsx +3 -3
  326. package/src/spreadsheet/tests/spreadsheet-file-dialogs.tsx +5 -5
  327. package/src/spreadsheet/tests/spreadsheet-find-replace-dialog.tsx +3 -3
  328. package/src/spreadsheet/tests/spreadsheet-format-dialogs.tsx +5 -5
  329. package/src/spreadsheet/tests/spreadsheet-formula-dialog.tsx +3 -3
  330. package/src/spreadsheet/tests/spreadsheet-insert-dialogs.tsx +11 -11
  331. package/src/spreadsheet/tests/spreadsheet-print.tsx +5 -5
  332. package/src/spreadsheet/tests/spreadsheet-sheets-bar.tsx +3 -3
  333. package/src/taskboard/tests/taskboard-pane.tsx +5 -5
  334. package/src/treelist/tests/treelist-editing-popup.tsx +3 -3
  335. package/dist/cjs/badge/tests/badge-position.js +0 -250
  336. package/dist/cjs/badge/tests/badge.js +0 -357
  337. package/dist/esm/badge/tests/badge-position.js +0 -228
  338. package/dist/esm/badge/tests/badge.js +0 -335
  339. package/src/badge/tests/badge.tsx +0 -221
  340. package/src/breadcrumb/tests/breadcrumb-adaptive.tsx +0 -82
  341. package/src/captcha/tests/captcha-loading.tsx +0 -13
  342. package/src/chat/tests/chat-scrollable-deck.tsx +0 -64
  343. package/src/loader/tests/loader-sizes.tsx +0 -54
  344. /package/dist/types/badge/tests/{badge-position.d.ts → badge-cutout-border.d.ts} +0 -0
  345. /package/dist/types/badge/tests/{badge.d.ts → badge-outline.d.ts} +0 -0
  346. /package/dist/types/{breadcrumb/tests/breadcrumb-adaptive.d.ts → badge/tests/badge-position-outline.d.ts} +0 -0
  347. /package/dist/types/{captcha/tests/captcha-loading.d.ts → badge/tests/badge-position-solid.d.ts} +0 -0
  348. /package/dist/types/{chat/tests/chat-scrollable-deck.d.ts → badge/tests/badge-solid.d.ts} +0 -0
  349. /package/dist/types/{loader/tests/loader-sizes.d.ts → breadcrumb/tests/breadcrumb-items-rtl.d.ts} +0 -0
package/src/breadcrumb/templates/breadcrumb-root-adaptive.tsx ADDED
@@ -0,0 +1,45 @@
1
+ import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbItemText, BreadcrumbLink, BreadcrumbRootItemContainer } from "..";
2
+ import { Icon } from "../../icon";
3
+
4
+ export const BreadcrumbRootAdaptive = ({ collapsing, ...other }: any) => (
5
+ <Breadcrumb
6
+ collapsing={collapsing}
7
+ children={
8
+ <>
9
+ <BreadcrumbRootItemContainer>
10
+ <BreadcrumbItem root>
11
+ <BreadcrumbLink root icontext>
12
+ <Icon icon="home" />
13
+ <BreadcrumbItemText text="Start item"></BreadcrumbItemText>
14
+ </BreadcrumbLink>
15
+ </BreadcrumbItem>
16
+ </BreadcrumbRootItemContainer>
17
+
18
+ <BreadcrumbContainer collapsing={collapsing}>
19
+ <BreadcrumbItem>
20
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
21
+ </BreadcrumbItem>
22
+ <BreadcrumbItem>
23
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
24
+ <BreadcrumbLink>
25
+ <BreadcrumbItemText text="Item 03"></BreadcrumbItemText>
26
+ </BreadcrumbLink>
27
+ </BreadcrumbItem>
28
+ <BreadcrumbItem>
29
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
30
+ <BreadcrumbLink>
31
+ <BreadcrumbItemText text="Item 04"></BreadcrumbItemText>
32
+ </BreadcrumbLink>
33
+ </BreadcrumbItem>
34
+ <BreadcrumbItem last>
35
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
36
+ <BreadcrumbLink>
37
+ <BreadcrumbItemText text="Item 05"></BreadcrumbItemText>
38
+ </BreadcrumbLink>
39
+ </BreadcrumbItem>
40
+ </BreadcrumbContainer>
41
+ </>
42
+ }
43
+ {...other}>
44
+ </Breadcrumb>
45
+ );
package/src/breadcrumb/templates/breadcrumb-root.tsx ADDED
@@ -0,0 +1,41 @@
1
+ import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbItemText, BreadcrumbLink, BreadcrumbRootItemContainer } from "..";
2
+ import { Icon } from "../../icon";
3
+
4
+ export const BreadcrumbRoot = ({ collapsing, ...other }: any) => (
5
+ <Breadcrumb
6
+ collapsing={collapsing}
7
+ children={
8
+ <>
9
+ <BreadcrumbRootItemContainer>
10
+ <BreadcrumbItem root>
11
+ <BreadcrumbLink root icontext>
12
+ <Icon icon="home" />
13
+ <BreadcrumbItemText text="Start item"></BreadcrumbItemText>
14
+ </BreadcrumbLink>
15
+ </BreadcrumbItem>
16
+ </BreadcrumbRootItemContainer>
17
+ <BreadcrumbContainer collapsing={collapsing}>
18
+ <BreadcrumbItem>
19
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
20
+ <BreadcrumbLink>
21
+ <BreadcrumbItemText text="Item 01"></BreadcrumbItemText>
22
+ </BreadcrumbLink>
23
+ </BreadcrumbItem>
24
+ <BreadcrumbItem>
25
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
26
+ <BreadcrumbLink>
27
+ <BreadcrumbItemText text="Item 02"></BreadcrumbItemText>
28
+ </BreadcrumbLink>
29
+ </BreadcrumbItem>
30
+ <BreadcrumbItem last>
31
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
32
+ <BreadcrumbLink>
33
+ <BreadcrumbItemText text="Item 03"></BreadcrumbItemText>
34
+ </BreadcrumbLink>
35
+ </BreadcrumbItem>
36
+ </BreadcrumbContainer>
37
+ </>
38
+ }
39
+ {...other}>
40
+ </Breadcrumb>
41
+ );
package/src/breadcrumb/tests/breadcrumb-items-rtl.tsx ADDED
@@ -0,0 +1,194 @@
1
+ import { Icon } from '../../icon';
2
+ import { Textbox } from '../../textbox';
3
+ import { BreadcrumbContainer, BreadcrumbInputContainer, BreadcrumbItem, BreadcrumbItemText, BreadcrumbLink, BreadcrumbNormal, BreadcrumbRoot, BreadcrumbRootItemContainer } from '..';
4
+
5
+
6
+ export default () =>(
7
+ <>
8
+ <div id="test-area" className="k-d-grid k-grid-cols-2 k-rtl">
9
+ <span className="k-colspan-all k-col-span-full">Item states</span>
10
+
11
+ <span>Icon & Image items with Text</span>
12
+ <span>Text items</span>
13
+
14
+ <div>
15
+ <BreadcrumbRoot collapsing="wrap" style={{ width: "400px" }}>
16
+ <BreadcrumbRootItemContainer>
17
+ <BreadcrumbItem root>
18
+ <BreadcrumbLink root icon>
19
+ <Icon icon="home" />
20
+ </BreadcrumbLink>
21
+ </BreadcrumbItem>
22
+ </BreadcrumbRootItemContainer>
23
+
24
+ <BreadcrumbContainer collapsing="wrap">
25
+
26
+ {[ "normal", ...BreadcrumbLink.states ].map((state) => (
27
+ <BreadcrumbItem>
28
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
29
+ <BreadcrumbLink {...{ [state]: true }} icontext>
30
+ <Icon icon="clock" />
31
+ <BreadcrumbItemText text={state}></BreadcrumbItemText>
32
+ </BreadcrumbLink>
33
+ </BreadcrumbItem>
34
+ ))
35
+ }
36
+ {[ "normal", ...BreadcrumbLink.states ].map((state) => (
37
+ <BreadcrumbItem>
38
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
39
+ <BreadcrumbLink {...{ [state]: true }}>
40
+ <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
41
+ <BreadcrumbItemText text={state}></BreadcrumbItemText>
42
+ </BreadcrumbLink>
43
+ </BreadcrumbItem>
44
+ ))
45
+ }
46
+ </BreadcrumbContainer>
47
+ </BreadcrumbRoot>
48
+ </div>
49
+
50
+ <div>
51
+ <BreadcrumbRoot collapsing="wrap" style={{ width: "400px" }}>
52
+ <BreadcrumbRootItemContainer>
53
+ <BreadcrumbItem root>
54
+ <BreadcrumbLink root icon>
55
+ <Icon icon="home" />
56
+ </BreadcrumbLink>
57
+ </BreadcrumbItem>
58
+ </BreadcrumbRootItemContainer>
59
+
60
+ <BreadcrumbContainer collapsing="wrap">
61
+ {[ "normal", ...BreadcrumbLink.states ].map((state) => (
62
+ <BreadcrumbItem>
63
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
64
+ <BreadcrumbLink {...{ [state]: true }}>
65
+ <BreadcrumbItemText text={state}></BreadcrumbItemText>
66
+ </BreadcrumbLink>
67
+ </BreadcrumbItem>
68
+ ))
69
+ }
70
+ {[ "normal", ...BreadcrumbLink.states ].map((state) => (
71
+ <BreadcrumbItem>
72
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
73
+ <BreadcrumbLink {...{ [state]: true }}>
74
+ <BreadcrumbItemText text={`long_text ${state}`}></BreadcrumbItemText>
75
+ </BreadcrumbLink>
76
+ </BreadcrumbItem>
77
+ ))
78
+ }
79
+ </BreadcrumbContainer>
80
+ </BreadcrumbRoot>
81
+ </div>
82
+
83
+ <span className="k-colspan-all k-col-span-full">Icon & Image items</span>
84
+
85
+ <div>
86
+ <BreadcrumbRoot collapsing="wrap" style={{ width: "400px" }}>
87
+ <BreadcrumbRootItemContainer>
88
+ <BreadcrumbItem root>
89
+ <BreadcrumbLink root icon>
90
+ <Icon icon="home" />
91
+ </BreadcrumbLink>
92
+ </BreadcrumbItem>
93
+ </BreadcrumbRootItemContainer>
94
+
95
+ <BreadcrumbContainer collapsing="wrap">
96
+ {[ "normal", ...BreadcrumbLink.states ].map((state) => (
97
+ <BreadcrumbItem>
98
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
99
+ <BreadcrumbLink {...{ [state]: true }} icon>
100
+ <Icon icon="clock" />
101
+ </BreadcrumbLink>
102
+ </BreadcrumbItem>
103
+ ))
104
+ }
105
+ {[ "normal", ...BreadcrumbLink.states ].map((state) => (
106
+ <BreadcrumbItem>
107
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
108
+ <BreadcrumbLink {...{ [state]: true }}>
109
+ <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
110
+ </BreadcrumbLink>
111
+ </BreadcrumbItem>
112
+ ))
113
+ }
114
+ </BreadcrumbContainer>
115
+ </BreadcrumbRoot>
116
+ </div>
117
+
118
+ <span className="k-colspan-all k-col-span-full">Navigation Mode</span>
119
+
120
+ {[ "normal", ...BreadcrumbLink.states ].map((state) => (
121
+ <div>
122
+ <BreadcrumbNormal>
123
+ <BreadcrumbContainer>
124
+ <BreadcrumbItem root>
125
+ <BreadcrumbLink root icon {...{ [state]: true }}>
126
+ <Icon icon="home" />
127
+ </BreadcrumbLink>
128
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
129
+ </BreadcrumbItem>
130
+ <BreadcrumbItem>
131
+ <BreadcrumbLink>
132
+ <BreadcrumbItemText text="First item"></BreadcrumbItemText>
133
+ </BreadcrumbLink>
134
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
135
+ </BreadcrumbItem>
136
+ <BreadcrumbItem>
137
+ <BreadcrumbLink>
138
+ <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
139
+ </BreadcrumbLink>
140
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
141
+ </BreadcrumbItem>
142
+ <BreadcrumbItem last>
143
+ <BreadcrumbLink {...{ [state]: true }}>
144
+ <BreadcrumbItemText text={`Last ${state}`}></BreadcrumbItemText>
145
+ </BreadcrumbLink>
146
+ </BreadcrumbItem>
147
+ </BreadcrumbContainer>
148
+ </BreadcrumbNormal>
149
+ </div>
150
+ ))
151
+ }
152
+
153
+ <span className="k-colspan-all k-col-span-full">Edit Mode</span>
154
+
155
+ <div>
156
+ <BreadcrumbNormal focus>
157
+ <BreadcrumbContainer>
158
+ <BreadcrumbItem root>
159
+ <BreadcrumbLink root icon>
160
+ <Icon icon="home" />
161
+ </BreadcrumbLink>
162
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
163
+ </BreadcrumbItem>
164
+ <BreadcrumbItem>
165
+ <BreadcrumbLink>
166
+ <BreadcrumbItemText text="First item"></BreadcrumbItemText>
167
+ </BreadcrumbLink>
168
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
169
+ </BreadcrumbItem>
170
+ <BreadcrumbItem>
171
+ <BreadcrumbLink>
172
+ <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
173
+ </BreadcrumbLink>
174
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
175
+ </BreadcrumbItem>
176
+ <BreadcrumbItem last>
177
+ <BreadcrumbLink disabled>
178
+ <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
179
+ </BreadcrumbLink>
180
+ </BreadcrumbItem>
181
+ </BreadcrumbContainer>
182
+ </BreadcrumbNormal>
183
+ </div>
184
+
185
+ <div>
186
+ <BreadcrumbNormal>
187
+ <BreadcrumbInputContainer>
188
+ <Textbox showClearButton={false} value="First item/Second item/Third item" />
189
+ </BreadcrumbInputContainer>
190
+ </BreadcrumbNormal>
191
+ </div>
192
+ </div>
193
+ </>
194
+ );
package/src/breadcrumb/tests/breadcrumb-items.tsx ADDED
@@ -0,0 +1,194 @@
1
+ import { Icon } from '../../icon';
2
+ import { Textbox } from '../../textbox';
3
+ import { BreadcrumbContainer, BreadcrumbInputContainer, BreadcrumbItem, BreadcrumbItemText, BreadcrumbLink, BreadcrumbNormal, BreadcrumbRoot, BreadcrumbRootItemContainer } from '..';
4
+
5
+
6
+ export default () =>(
7
+ <>
8
+ <div id="test-area" className="k-d-grid k-grid-cols-2">
9
+ <span className="k-colspan-all k-col-span-full">Item states</span>
10
+
11
+ <span>Icon & Image items with Text</span>
12
+ <span>Text items</span>
13
+
14
+ <div>
15
+ <BreadcrumbRoot collapsing="wrap" style={{ width: "400px" }}>
16
+ <BreadcrumbRootItemContainer>
17
+ <BreadcrumbItem root>
18
+ <BreadcrumbLink root icon>
19
+ <Icon icon="home" />
20
+ </BreadcrumbLink>
21
+ </BreadcrumbItem>
22
+ </BreadcrumbRootItemContainer>
23
+
24
+ <BreadcrumbContainer collapsing="wrap">
25
+
26
+ {[ "normal", ...BreadcrumbLink.states ].map((state) => (
27
+ <BreadcrumbItem>
28
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
29
+ <BreadcrumbLink {...{ [state]: true }} icontext>
30
+ <Icon icon="clock" />
31
+ <BreadcrumbItemText text={state}></BreadcrumbItemText>
32
+ </BreadcrumbLink>
33
+ </BreadcrumbItem>
34
+ ))
35
+ }
36
+ {[ "normal", ...BreadcrumbLink.states ].map((state) => (
37
+ <BreadcrumbItem>
38
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
39
+ <BreadcrumbLink {...{ [state]: true }}>
40
+ <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
41
+ <BreadcrumbItemText text={state}></BreadcrumbItemText>
42
+ </BreadcrumbLink>
43
+ </BreadcrumbItem>
44
+ ))
45
+ }
46
+ </BreadcrumbContainer>
47
+ </BreadcrumbRoot>
48
+ </div>
49
+
50
+ <div>
51
+ <BreadcrumbRoot collapsing="wrap" style={{ width: "400px" }}>
52
+ <BreadcrumbRootItemContainer>
53
+ <BreadcrumbItem root>
54
+ <BreadcrumbLink root icon>
55
+ <Icon icon="home" />
56
+ </BreadcrumbLink>
57
+ </BreadcrumbItem>
58
+ </BreadcrumbRootItemContainer>
59
+
60
+ <BreadcrumbContainer collapsing="wrap">
61
+ {[ "normal", ...BreadcrumbLink.states ].map((state) => (
62
+ <BreadcrumbItem>
63
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
64
+ <BreadcrumbLink {...{ [state]: true }}>
65
+ <BreadcrumbItemText text={state}></BreadcrumbItemText>
66
+ </BreadcrumbLink>
67
+ </BreadcrumbItem>
68
+ ))
69
+ }
70
+ {[ "normal", ...BreadcrumbLink.states ].map((state) => (
71
+ <BreadcrumbItem>
72
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
73
+ <BreadcrumbLink {...{ [state]: true }}>
74
+ <BreadcrumbItemText text={`long_text ${state}`}></BreadcrumbItemText>
75
+ </BreadcrumbLink>
76
+ </BreadcrumbItem>
77
+ ))
78
+ }
79
+ </BreadcrumbContainer>
80
+ </BreadcrumbRoot>
81
+ </div>
82
+
83
+ <span className="k-colspan-all k-col-span-full">Icon & Image items</span>
84
+
85
+ <div>
86
+ <BreadcrumbRoot collapsing="wrap" style={{ width: "400px" }}>
87
+ <BreadcrumbRootItemContainer>
88
+ <BreadcrumbItem root>
89
+ <BreadcrumbLink root icon>
90
+ <Icon icon="home" />
91
+ </BreadcrumbLink>
92
+ </BreadcrumbItem>
93
+ </BreadcrumbRootItemContainer>
94
+
95
+ <BreadcrumbContainer collapsing="wrap">
96
+ {[ "normal", ...BreadcrumbLink.states ].map((state) => (
97
+ <BreadcrumbItem>
98
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
99
+ <BreadcrumbLink {...{ [state]: true }} icon>
100
+ <Icon icon="clock" />
101
+ </BreadcrumbLink>
102
+ </BreadcrumbItem>
103
+ ))
104
+ }
105
+ {[ "normal", ...BreadcrumbLink.states ].map((state) => (
106
+ <BreadcrumbItem>
107
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
108
+ <BreadcrumbLink {...{ [state]: true }}>
109
+ <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
110
+ </BreadcrumbLink>
111
+ </BreadcrumbItem>
112
+ ))
113
+ }
114
+ </BreadcrumbContainer>
115
+ </BreadcrumbRoot>
116
+ </div>
117
+
118
+ <span className="k-colspan-all k-col-span-full">Navigation Mode</span>
119
+
120
+ {[ "normal", ...BreadcrumbLink.states ].map((state) => (
121
+ <div>
122
+ <BreadcrumbNormal>
123
+ <BreadcrumbContainer>
124
+ <BreadcrumbItem root>
125
+ <BreadcrumbLink root icon {...{ [state]: true }}>
126
+ <Icon icon="home" />
127
+ </BreadcrumbLink>
128
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
129
+ </BreadcrumbItem>
130
+ <BreadcrumbItem>
131
+ <BreadcrumbLink>
132
+ <BreadcrumbItemText text="First item"></BreadcrumbItemText>
133
+ </BreadcrumbLink>
134
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
135
+ </BreadcrumbItem>
136
+ <BreadcrumbItem>
137
+ <BreadcrumbLink>
138
+ <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
139
+ </BreadcrumbLink>
140
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
141
+ </BreadcrumbItem>
142
+ <BreadcrumbItem last>
143
+ <BreadcrumbLink {...{ [state]: true }}>
144
+ <BreadcrumbItemText text={`Last ${state}`}></BreadcrumbItemText>
145
+ </BreadcrumbLink>
146
+ </BreadcrumbItem>
147
+ </BreadcrumbContainer>
148
+ </BreadcrumbNormal>
149
+ </div>
150
+ ))
151
+ }
152
+
153
+ <span className="k-colspan-all k-col-span-full">Edit Mode</span>
154
+
155
+ <div>
156
+ <BreadcrumbNormal focus>
157
+ <BreadcrumbContainer>
158
+ <BreadcrumbItem root>
159
+ <BreadcrumbLink root icon>
160
+ <Icon icon="home" />
161
+ </BreadcrumbLink>
162
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
163
+ </BreadcrumbItem>
164
+ <BreadcrumbItem>
165
+ <BreadcrumbLink>
166
+ <BreadcrumbItemText text="First item"></BreadcrumbItemText>
167
+ </BreadcrumbLink>
168
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
169
+ </BreadcrumbItem>
170
+ <BreadcrumbItem>
171
+ <BreadcrumbLink>
172
+ <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
173
+ </BreadcrumbLink>
174
+ <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
175
+ </BreadcrumbItem>
176
+ <BreadcrumbItem last>
177
+ <BreadcrumbLink disabled>
178
+ <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
179
+ </BreadcrumbLink>
180
+ </BreadcrumbItem>
181
+ </BreadcrumbContainer>
182
+ </BreadcrumbNormal>
183
+ </div>
184
+
185
+ <div>
186
+ <BreadcrumbNormal>
187
+ <BreadcrumbInputContainer>
188
+ <Textbox showClearButton={false} value="First item/Second item/Third item" />
189
+ </BreadcrumbInputContainer>
190
+ </BreadcrumbNormal>
191
+ </div>
192
+ </div>
193
+ </>
194
+ );