@rio-cloud/uikit-mcp 1.1.10 → 1.1.11

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 (210) hide show
  1. package/README.md +2 -1
  2. package/dist/doc-metadata.json +90 -90
  3. package/dist/docs/components/accentBar.md +1 -1
  4. package/dist/docs/components/activity.md +1 -1
  5. package/dist/docs/components/analyticsAnalysisOverlay.md +3 -1
  6. package/dist/docs/components/animatedNumber.md +1 -1
  7. package/dist/docs/components/animatedTextReveal.md +6 -6
  8. package/dist/docs/components/animations.md +22 -22
  9. package/dist/docs/components/appHeader.md +1 -1
  10. package/dist/docs/components/appLayout.md +27 -77
  11. package/dist/docs/components/appNavigationBar.md +1 -1
  12. package/dist/docs/components/areaCharts.md +7 -5
  13. package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
  14. package/dist/docs/components/assetTree.md +418 -364
  15. package/dist/docs/components/autosuggests.md +1 -1
  16. package/dist/docs/components/avatar.md +1 -1
  17. package/dist/docs/components/banner.md +2 -2
  18. package/dist/docs/components/barCharts.md +4 -2
  19. package/dist/docs/components/barList.md +10 -10
  20. package/dist/docs/components/basicMap.md +45 -1
  21. package/dist/docs/components/bottomSheet.md +1 -1
  22. package/dist/docs/components/button.md +1 -1
  23. package/dist/docs/components/buttonToolbar.md +1 -1
  24. package/dist/docs/components/calendarStripe.md +39 -35
  25. package/dist/docs/components/card.md +1 -1
  26. package/dist/docs/components/carousel.md +1 -1
  27. package/dist/docs/components/chartColors.md +3 -1
  28. package/dist/docs/components/chartsGettingStarted.md +3 -1
  29. package/dist/docs/components/chat.md +2 -2
  30. package/dist/docs/components/checkbox.md +3 -1
  31. package/dist/docs/components/circularProgress.md +8 -8
  32. package/dist/docs/components/clearableInput.md +1 -1
  33. package/dist/docs/components/collapse.md +4 -2
  34. package/dist/docs/components/composedCharts.md +17 -15
  35. package/dist/docs/components/contentLoader.md +1 -1
  36. package/dist/docs/components/dataTabs.md +1 -1
  37. package/dist/docs/components/datepickers.md +30 -28
  38. package/dist/docs/components/dayPicker.md +52 -2
  39. package/dist/docs/components/dayPickerCalendar.md +44 -24
  40. package/dist/docs/components/dialogs.md +1 -1
  41. package/dist/docs/components/divider.md +1 -1
  42. package/dist/docs/components/dropdowns.md +3253 -3241
  43. package/dist/docs/components/editableContent.md +1 -1
  44. package/dist/docs/components/expander.md +1 -1
  45. package/dist/docs/components/fade.md +1 -1
  46. package/dist/docs/components/fadeExpander.md +1 -1
  47. package/dist/docs/components/fadeUp.md +2 -2
  48. package/dist/docs/components/feedback.md +1 -1
  49. package/dist/docs/components/filePickers.md +1 -1
  50. package/dist/docs/components/formLabel.md +1 -1
  51. package/dist/docs/components/groupedItemList.md +1 -1
  52. package/dist/docs/components/htmlTable.md +69 -69
  53. package/dist/docs/components/iconList.md +4 -4
  54. package/dist/docs/components/imagePreloader.md +1 -1
  55. package/dist/docs/components/labeledElement.md +1 -1
  56. package/dist/docs/components/licensePlate.md +1 -1
  57. package/dist/docs/components/lineCharts.md +5 -3
  58. package/dist/docs/components/listMenu.md +1 -1
  59. package/dist/docs/components/loadMore.md +1 -1
  60. package/dist/docs/components/mainNavigation.md +1 -1
  61. package/dist/docs/components/mapCircle.md +1 -1
  62. package/dist/docs/components/mapCluster.md +3 -1
  63. package/dist/docs/components/mapContext.md +1 -1
  64. package/dist/docs/components/mapDraggableMarker.md +1 -1
  65. package/dist/docs/components/mapGettingStarted.md +39 -1
  66. package/dist/docs/components/mapInfoBubble.md +1 -1
  67. package/dist/docs/components/mapLayerGroup.md +1 -1
  68. package/dist/docs/components/mapMarker.md +3 -1
  69. package/dist/docs/components/mapPolygon.md +1 -1
  70. package/dist/docs/components/mapRoute.md +1 -1
  71. package/dist/docs/components/mapSettings.md +6 -1
  72. package/dist/docs/components/mapUtils.md +1 -1
  73. package/dist/docs/components/mapViewportHistory.md +287 -0
  74. package/dist/docs/components/multiselects.md +7 -1
  75. package/dist/docs/components/noData.md +1 -1
  76. package/dist/docs/components/notifications.md +1 -1
  77. package/dist/docs/components/numbercontrol.md +1 -1
  78. package/dist/docs/components/onboarding.md +1 -1
  79. package/dist/docs/components/page.md +1 -1
  80. package/dist/docs/components/pager.md +1 -1
  81. package/dist/docs/components/pieCharts.md +38 -36
  82. package/dist/docs/components/popover.md +1 -1
  83. package/dist/docs/components/position.md +1 -1
  84. package/dist/docs/components/radialBarCharts.md +27 -25
  85. package/dist/docs/components/radioCardGroup.md +1 -1
  86. package/dist/docs/components/radiobutton.md +3 -1
  87. package/dist/docs/components/releaseNotes.md +1 -1
  88. package/dist/docs/components/resizer.md +3 -1
  89. package/dist/docs/components/responsiveColumnStripe.md +3 -1
  90. package/dist/docs/components/responsiveVideo.md +1 -1
  91. package/dist/docs/components/rioglyph.md +1 -1
  92. package/dist/docs/components/rules.md +1 -1
  93. package/dist/docs/components/saveableInput.md +17 -17
  94. package/dist/docs/components/selects.md +168 -51
  95. package/dist/docs/components/sidebar.md +1 -1
  96. package/dist/docs/components/sliders.md +1 -1
  97. package/dist/docs/components/smoothScrollbars.md +3 -1
  98. package/dist/docs/components/spinners.md +1 -1
  99. package/dist/docs/components/states.md +15 -1
  100. package/dist/docs/components/statsWidgets.md +1 -1
  101. package/dist/docs/components/statusBar.md +3 -1
  102. package/dist/docs/components/stepButton.md +1 -1
  103. package/dist/docs/components/steppedProgressBars.md +1 -1
  104. package/dist/docs/components/subNavigation.md +1 -1
  105. package/dist/docs/components/supportMarker.md +1 -1
  106. package/dist/docs/components/svgImage.md +1 -1
  107. package/dist/docs/components/switch.md +3 -1
  108. package/dist/docs/components/table.md +1998 -221
  109. package/dist/docs/components/tableControls.md +5 -5
  110. package/dist/docs/components/tagManager.md +1 -1
  111. package/dist/docs/components/tags.md +1 -1
  112. package/dist/docs/components/teaser.md +3 -1
  113. package/dist/docs/components/textTruncateMiddle.md +1 -1
  114. package/dist/docs/components/timeline.md +1 -1
  115. package/dist/docs/components/timepicker.md +3 -1
  116. package/dist/docs/components/toggleButton.md +1 -1
  117. package/dist/docs/components/tooltip.md +5 -1
  118. package/dist/docs/components/tracker.md +1 -1
  119. package/dist/docs/components/virtualList.md +57 -57
  120. package/dist/docs/foundations.md +276 -110
  121. package/dist/docs/start/changelog.md +21 -1
  122. package/dist/docs/start/goodtoknow.md +8 -2
  123. package/dist/docs/start/guidelines/color-combinations.md +5 -1
  124. package/dist/docs/start/guidelines/custom-css.md +26 -2
  125. package/dist/docs/start/guidelines/custom-rioglyph.md +20 -2
  126. package/dist/docs/start/guidelines/formatting.md +2256 -249
  127. package/dist/docs/start/guidelines/iframe.md +37 -1
  128. package/dist/docs/start/guidelines/obfuscate-data.md +26 -2
  129. package/dist/docs/start/guidelines/print-css.md +16 -2
  130. package/dist/docs/start/guidelines/spinner.md +1 -1
  131. package/dist/docs/start/guidelines/state-in-url.md +1138 -11
  132. package/dist/docs/start/guidelines/supported-browsers.md +9 -2
  133. package/dist/docs/start/guidelines/writing.md +228 -2
  134. package/dist/docs/start/howto.md +160 -10
  135. package/dist/docs/start/intro.md +40 -2
  136. package/dist/docs/start/responsiveness.md +29 -1
  137. package/dist/docs/templates/ai-assistant.md +1 -1
  138. package/dist/docs/templates/common-table.md +9 -9
  139. package/dist/docs/templates/detail-views.md +2 -2
  140. package/dist/docs/templates/expandable-details.md +1 -1
  141. package/dist/docs/templates/feature-cards.md +37 -37
  142. package/dist/docs/templates/form-summary.md +15 -15
  143. package/dist/docs/templates/form-toggle.md +1 -1
  144. package/dist/docs/templates/list-blocks.md +135 -135
  145. package/dist/docs/templates/loading-progress.md +1 -1
  146. package/dist/docs/templates/options-panel.md +1 -1
  147. package/dist/docs/templates/panel-variants.md +1 -1
  148. package/dist/docs/templates/progress-cards.md +1 -1
  149. package/dist/docs/templates/progress-success.md +1 -1
  150. package/dist/docs/templates/settings-form.md +18 -18
  151. package/dist/docs/templates/stats-blocks.md +12 -12
  152. package/dist/docs/templates/table-panel.md +1 -1
  153. package/dist/docs/templates/usage-cards.md +1 -1
  154. package/dist/docs/utilities/classNames.md +89 -1
  155. package/dist/docs/utilities/deviceUtils.md +1 -1
  156. package/dist/docs/utilities/featureToggles.md +182 -2
  157. package/dist/docs/utilities/fuelTypeUtils.md +1 -1
  158. package/dist/docs/utilities/getTrackingAttributes.md +46 -1
  159. package/dist/docs/utilities/routeUtils.md +210 -2
  160. package/dist/docs/utilities/useAfterMount.md +1 -1
  161. package/dist/docs/utilities/useAutoAnimate.md +1 -1
  162. package/dist/docs/utilities/useAverage.md +1 -1
  163. package/dist/docs/utilities/useClickOutside.md +1 -1
  164. package/dist/docs/utilities/useClipboard.md +2 -2
  165. package/dist/docs/utilities/useCookies.md +1 -1
  166. package/dist/docs/utilities/useCount.md +1 -1
  167. package/dist/docs/utilities/useDarkMode.md +1 -1
  168. package/dist/docs/utilities/useDebugInfo.md +3 -3
  169. package/dist/docs/utilities/useDraggableElement.md +1 -1
  170. package/dist/docs/utilities/useEffectOnce.md +1 -1
  171. package/dist/docs/utilities/useElapsedTime.md +1 -1
  172. package/dist/docs/utilities/useElementSize.md +1 -1
  173. package/dist/docs/utilities/useEsc.md +1 -1
  174. package/dist/docs/utilities/useEvent.md +1 -1
  175. package/dist/docs/utilities/useFocusTrap.md +1 -1
  176. package/dist/docs/utilities/useFullscreen.md +1 -1
  177. package/dist/docs/utilities/useHover.md +1 -1
  178. package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
  179. package/dist/docs/utilities/useInterval.md +1 -1
  180. package/dist/docs/utilities/useIsFocusWithin.md +1 -1
  181. package/dist/docs/utilities/useKey.md +1 -1
  182. package/dist/docs/utilities/useLocalStorage.md +1 -1
  183. package/dist/docs/utilities/useLocationSuggestions.md +1 -1
  184. package/dist/docs/utilities/useMax.md +1 -1
  185. package/dist/docs/utilities/useMin.md +1 -1
  186. package/dist/docs/utilities/useMutationObserver.md +1 -1
  187. package/dist/docs/utilities/useOnScreen.md +1 -1
  188. package/dist/docs/utilities/useOnlineStatus.md +1 -1
  189. package/dist/docs/utilities/usePostMessage.md +1 -1
  190. package/dist/docs/utilities/usePostMessageSender.md +1 -1
  191. package/dist/docs/utilities/usePrevious.md +111 -1
  192. package/dist/docs/utilities/useResizeObserver.md +1 -1
  193. package/dist/docs/utilities/useRioCookieConsent.md +1 -1
  194. package/dist/docs/utilities/useScrollPosition.md +1 -1
  195. package/dist/docs/utilities/useSearch.md +1 -1
  196. package/dist/docs/utilities/useSearchHighlight.md +1 -1
  197. package/dist/docs/utilities/useSorting.md +1 -1
  198. package/dist/docs/utilities/useStateWithValidation.md +1 -1
  199. package/dist/docs/utilities/useSum.md +1 -1
  200. package/dist/docs/utilities/useTableExport.md +61 -61
  201. package/dist/docs/utilities/useTableSelection.md +72 -72
  202. package/dist/docs/utilities/useTimeout.md +1 -1
  203. package/dist/docs/utilities/useToggle.md +1 -1
  204. package/dist/docs/utilities/useUrlState.md +1 -1
  205. package/dist/docs/utilities/useWindowResize.md +1 -1
  206. package/dist/index.mjs +173 -69
  207. package/dist/search-synonyms.json +214 -76
  208. package/dist/version.json +2 -2
  209. package/package.json +4 -5
  210. package/dist/docs/components/mapRouteGenerator.md +0 -6
@@ -3,46 +3,48 @@
3
3
  *Category:* Components
4
4
  *Section:* Selection
5
5
  *Source:* https://uikit.developers.rio.cloud/#/components/assetTree
6
- *Captured:* 2026-04-20T12:54:02.398Z
6
+ *Captured:* 2026-04-27T14:57:37.479Z
7
7
 
8
8
  ## AssetTree
9
9
 
10
+ The asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.
11
+
10
12
  ### Example: Example 1
11
13
 
12
14
  Filter
13
15
 
14
- 5192
16
+ 5241
15
17
  4
16
18
 
17
- Group - Abdiel Stracke - 7208 11
19
+ Group - Abbie D'Amore - 4617 14
18
20
 
19
- Group - Abel Nolan DDS - 7395 10
21
+ Group - Abdullah Gorczany - 4604 12
20
22
 
21
- Group - Abel Welch - 8471 14
23
+ Group - Ada Bergnaum - 6885 15
22
24
 
23
- Group - Adan Dickinson-Romaguera - 1669 8
25
+ Group - Adam Spencer - 1326 6
24
26
 
25
- Group - Adell Lang - 1397 9
27
+ Group - Adrain Rice - 3568 7
26
28
 
27
- Group - Agnes Runte - 2275 8
29
+ Group - Agustin Sawayn - 9288 13
28
30
 
29
- Group - Alanna Veum - 4822 7
31
+ Group - Agustina Mitchell - 7938 12
30
32
 
31
- Group - Albert Lehner - 6018 8
33
+ Group - Alba Dickens - 4029 15
32
34
 
33
- Group - Alberto Mitchell I - 5020 8
35
+ Group - Albert Larkin Jr. - 4366 12
34
36
 
35
- Group - Alda Spencer - 6590 11
37
+ Group - Albert Turcotte - 3213 17
36
38
 
37
- Group - Alejandro Little III - 9613 11
39
+ Group - Albertha Maggio Jr. - 5254 14
38
40
 
39
- Group - Alison Greenfelder Jr. - 4942 17
41
+ Group - Alejandro Dach Jr. - 7483 17
40
42
 
41
- Group - Allie Keeling - 1242 13
43
+ Group - Alek Goldner - 1787 12
42
44
 
43
- Group - Alonzo Dooley - 9191 6
45
+ Group - Alek Hettinger V - 4864 13
44
46
 
45
- Group - Alonzo O'Kon - 9115 8
47
+ Group - Alessandra Effertz - 8203 14
46
48
 
47
49
  200
48
50
 
@@ -556,27 +558,26 @@ export default AssetTreeExample;
556
558
 
557
559
  ### Example: Example 2
558
560
 
559
- 12
560
561
  9
561
- 2
562
- 7
562
+ 10
563
+ 5
564
+ 6
563
565
 
564
566
  My Empty Group 3
565
567
 
566
568
  Truck Group East 5
567
569
 
568
- Truck Group North 5
569
- N18-G616 / M-AN 1025
570
- N18-G906 / M-AN 1001
571
- N18-G959 / M-AN 1004
572
- N18-G970 / M-AN 1002
573
- N18-G975 / M-AN 1027
570
+ Truck Group North 4
571
+ N18-G259 / M-AN 1006
572
+ N18-G545 / M-AN 1029
573
+ N18-G632 / M-AN 1011
574
+ N18-G845 / M-AN 1003
574
575
 
575
- Truck Group South 8
576
+ Truck Group South 7
576
577
 
577
- Truck Group West 2
578
+ Truck Group West 6
578
579
 
579
- All my unassigned Trucks 7
580
+ All my unassigned Trucks 5
580
581
 
581
582
  Current category:
582
583
  assets
@@ -772,24 +773,24 @@ export default AssetTreeSingleSelectExample;
772
773
  <div class="display-flex justify-content-between align-items-start width-100pct">
773
774
  <div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
774
775
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
775
- <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
776
+ <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
776
777
  </span>
777
- <span class="TreeLabelCount label label-condensed label-muted label-filled">12</span>
778
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">9</span>
778
779
  </div>
779
780
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
780
781
  <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
781
782
  </span>
782
- <span class="TreeLabelCount label label-condensed label-muted label-filled">9</span>
783
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">10</span>
783
784
  </div>
784
785
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
785
786
  <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
786
787
  </span>
787
- <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
788
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
788
789
  </div>
789
790
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
790
- <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
791
+ <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
791
792
  </span>
792
- <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
793
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">6</span>
793
794
  </div>
794
795
  </div>
795
796
  </div>
@@ -826,53 +827,44 @@ export default AssetTreeSingleSelectExample;
826
827
  <span class="TreeLabelNameText">
827
828
  <span class="TreeLabelNameTextHeadline">Truck Group North</span>
828
829
  </span>
829
- <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
830
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
830
831
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
831
832
  </span>
832
833
  </span>
833
834
  </div>
834
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9725">
835
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
835
836
  <span class="TreeLabel TreeLabelName">
836
- <span class="rioglyph rioglyph-van">
837
+ <span class="rioglyph rioglyph-bus">
837
838
  </span>
838
839
  <span class="TreeLabelNameText">
839
- <span class="TreeLabelNameTextHeadline">N18-G616 / M-AN 1025</span>
840
+ <span class="TreeLabelNameTextHeadline">N18-G259 / M-AN 1006</span>
840
841
  </span>
841
842
  </span>
842
843
  </div>
843
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
844
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9729">
844
845
  <span class="TreeLabel TreeLabelName">
845
- <span class="rioglyph rioglyph-trailer">
846
+ <span class="rioglyph rioglyph-van">
846
847
  </span>
847
848
  <span class="TreeLabelNameText">
848
- <span class="TreeLabelNameTextHeadline">N18-G906 / M-AN 1001</span>
849
+ <span class="TreeLabelNameTextHeadline">N18-G545 / M-AN 1029</span>
849
850
  </span>
850
851
  </span>
851
852
  </div>
852
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d974">
853
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9711">
853
854
  <span class="TreeLabel TreeLabelName">
854
855
  <span class="rioglyph rioglyph-trailer">
855
856
  </span>
856
857
  <span class="TreeLabelNameText">
857
- <span class="TreeLabelNameTextHeadline">N18-G959 / M-AN 1004</span>
858
+ <span class="TreeLabelNameTextHeadline">N18-G632 / M-AN 1011</span>
858
859
  </span>
859
860
  </span>
860
861
  </div>
861
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
862
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d973">
862
863
  <span class="TreeLabel TreeLabelName">
863
864
  <span class="rioglyph rioglyph-bus">
864
865
  </span>
865
866
  <span class="TreeLabelNameText">
866
- <span class="TreeLabelNameTextHeadline">N18-G970 / M-AN 1002</span>
867
- </span>
868
- </span>
869
- </div>
870
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9727">
871
- <span class="TreeLabel TreeLabelName">
872
- <span class="rioglyph rioglyph-trailer">
873
- </span>
874
- <span class="TreeLabelNameText">
875
- <span class="TreeLabelNameTextHeadline">N18-G975 / M-AN 1027</span>
867
+ <span class="TreeLabelNameTextHeadline">N18-G845 / M-AN 1003</span>
876
868
  </span>
877
869
  </span>
878
870
  </div>
@@ -883,7 +875,7 @@ export default AssetTreeSingleSelectExample;
883
875
  <span class="TreeLabelNameText">
884
876
  <span class="TreeLabelNameTextHeadline">Truck Group South</span>
885
877
  </span>
886
- <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
878
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
887
879
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
888
880
  </span>
889
881
  </span>
@@ -895,7 +887,7 @@ export default AssetTreeSingleSelectExample;
895
887
  <span class="TreeLabelNameText">
896
888
  <span class="TreeLabelNameTextHeadline">Truck Group West</span>
897
889
  </span>
898
- <span class="TreeLabelCount label label-muted label-filled label-condensed">2</span>
890
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
899
891
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
900
892
  </span>
901
893
  </span>
@@ -907,7 +899,7 @@ export default AssetTreeSingleSelectExample;
907
899
  <span class="TreeLabelNameText">
908
900
  <span class="TreeLabelNameTextHeadline">All my unassigned Trucks</span>
909
901
  </span>
910
- <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
902
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
911
903
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
912
904
  </span>
913
905
  </span>
@@ -1092,32 +1084,44 @@ export default AssetTreeSingleSelectExample;
1092
1084
 
1093
1085
  ## AssetTree with multiple asset filter in summary
1094
1086
 
1087
+ When using fuel filter, please check out the fuel type utils that ease the implementation of mapping vehicle fuel types to common fuel type groups.
1088
+
1095
1089
  ### Example: Example 3
1096
1090
 
1097
- 7
1098
1091
  3
1099
- 4
1092
+ 8
1100
1093
  6
1094
+ 3
1101
1095
 
1102
- 13
1103
- 5
1096
+ 9
1097
+ 2
1098
+ 7
1104
1099
  1
1105
1100
  1
1106
1101
 
1107
- Mixed Vehicles 11
1108
- Vehicle-1849 Debug: lpg
1109
- Vehicle-2383 Debug: heavy_fuel_oil
1110
- Vehicle-3352 Debug: gas
1111
- Vehicle-4157 Debug: diesel
1112
- Vehicle-5855 Debug: gas
1113
- Vehicle-6456 Debug: lpg
1114
- Vehicle-7193 Debug: heavy_fuel_oil
1115
- Vehicle-7464 Debug: diesel
1116
- Vehicle-8699 Debug: gas
1117
- Vehicle-8981 Debug: dual_fuel_diesel_cng
1118
- Vehicle-9946 Debug: heavy_fuel_oil
1119
-
1120
- Ungrouped 9
1102
+ Mixed Vehicles 14
1103
+
1104
+ Vehicle-1032 Debug: lpg
1105
+
1106
+ Vehicle-1530 Debug: diesel
1107
+
1108
+ Vehicle-1885 Debug: electric
1109
+
1110
+ Vehicle-2261 Debug: electric
1111
+
1112
+ Vehicle-3321 Debug: electric
1113
+
1114
+ Vehicle-6234 Debug: gas
1115
+
1116
+ Vehicle-6675 Debug: gas
1117
+
1118
+ Vehicle-6884 Debug: dual_fuel_diesel_cng
1119
+
1120
+ Vehicle-7323 Debug: hydrogen
1121
+
1122
+ Vehicle-8654 Debug: diesel
1123
+
1124
+ Vehicle-8759 Debug: electric
1121
1125
 
1122
1126
  Selected groups:
1123
1127
 
@@ -1451,34 +1455,39 @@ export default AssetTreeExample;
1451
1455
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1452
1456
  <span class="rioglyph rioglyph-truck-baseline text-size-16 margin-right-2">
1453
1457
  </span>
1454
- <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
1458
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
1455
1459
  </div>
1456
1460
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1457
1461
  <span class="rioglyph rioglyph-bus-baseline text-size-16 margin-right-2">
1458
1462
  </span>
1459
- <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
1463
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">8</span>
1460
1464
  </div>
1461
1465
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1462
1466
  <span class="rioglyph rioglyph-van-baseline text-size-16 margin-right-2">
1463
1467
  </span>
1464
- <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
1468
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">6</span>
1465
1469
  </div>
1466
1470
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1467
1471
  <span class="rioglyph rioglyph-car-baseline text-size-16 margin-right-2">
1468
1472
  </span>
1469
- <span class="TreeLabelCount label label-condensed label-muted label-filled">6</span>
1473
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
1470
1474
  </div>
1471
1475
  </div>
1472
1476
  <div class="TreeSummaryRow display-grid grid-cols-4 gap-10">
1473
1477
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1474
1478
  <span class="rioglyph rioglyph-fuel-liquid text-size-16 margin-right-2">
1475
1479
  </span>
1476
- <span class="TreeLabelCount label label-condensed label-muted label-filled">13</span>
1480
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">9</span>
1477
1481
  </div>
1478
1482
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1479
1483
  <span class="rioglyph rioglyph-fuel-gas text-size-16 margin-right-2">
1480
1484
  </span>
1481
- <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
1485
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
1486
+ </div>
1487
+ <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1488
+ <span class="rioglyph rioglyph-fuel-electric text-size-16 margin-right-2">
1489
+ </span>
1490
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
1482
1491
  </div>
1483
1492
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1484
1493
  <span class="rioglyph rioglyph-fuel-hydrogen text-size-16 margin-right-2">
@@ -1495,7 +1504,7 @@ export default AssetTreeExample;
1495
1504
  </div>
1496
1505
  <div>
1497
1506
  <div class="dropdown btn-group TreeHeaderOptions height-20">
1498
- <button type="button" id="k0xshifd6sg" class="btn btn-default btn-sm btn-icon-only btn-component dropdown-toggle hover-bg-white border-none text-color-gray hover-text-color-dark" tabindex="0">
1507
+ <button type="button" id="9uzjfkuoqvt" class="btn btn-default btn-sm btn-icon-only btn-component dropdown-toggle hover-bg-white border-none text-color-gray hover-text-color-dark" tabindex="0">
1499
1508
  <span class="rioglyph rioglyph-option-vertical" aria-hidden="true">
1500
1509
  </span>
1501
1510
  </button>
@@ -1504,269 +1513,314 @@ export default AssetTreeExample;
1504
1513
  </div>
1505
1514
  </div>
1506
1515
  <div class="TreeRoot user-select-none overflow-hidden" style="position: relative;">
1507
- <div class="TreeNodeContainer user-select-none overflow-hidden open" data-id="group-1">
1508
- <div class="TreeNode from-group" data-key="group-1">
1509
- <label class="checkbox TreeCheckbox" tabindex="0">
1510
- <input type="checkbox" class="TreeCheckbox">
1511
- <span class="checkbox-text">
1512
- </span>
1513
- </label>
1514
- <span class="TreeLabel TreeLabelName">
1515
- <span class="TreeLabelNameText">
1516
- <span class="TreeLabelNameTextHeadline">Mixed Vehicles</span>
1517
- </span>
1518
- <span class="TreeLabelCount label label-muted label-filled label-condensed">11</span>
1519
- <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1520
- </span>
1521
- </span>
1522
- </div>
1523
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9716">
1524
- <label class="checkbox TreeCheckbox" tabindex="0">
1525
- <input type="checkbox" class="TreeCheckbox">
1526
- <span class="checkbox-text">
1527
- </span>
1528
- </label>
1529
- <span class="TreeLabel TreeLabelName">
1530
- <span class="rioglyph-icon-pair">
1531
- <span class="rioglyph rioglyph-van">
1532
- </span>
1533
- <span class="rioglyph rioglyph-fuel-gas">
1534
- </span>
1535
- </span>
1536
- <span class="TreeLabelNameText">
1537
- <span class="TreeLabelNameTextHeadline">Vehicle-1849</span>
1538
- <span class="TreeLabelNameTextSubline">
1539
- <span>Debug: lpg</span>
1540
- </span>
1541
- </span>
1542
- </span>
1543
- </div>
1544
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d970">
1545
- <label class="checkbox TreeCheckbox" tabindex="0">
1546
- <input type="checkbox" class="TreeCheckbox">
1547
- <span class="checkbox-text">
1548
- </span>
1549
- </label>
1550
- <span class="TreeLabel TreeLabelName">
1551
- <span class="rioglyph-icon-pair">
1552
- <span class="rioglyph rioglyph-truck">
1553
- </span>
1554
- <span class="rioglyph rioglyph-fuel-liquid">
1555
- </span>
1556
- </span>
1557
- <span class="TreeLabelNameText">
1558
- <span class="TreeLabelNameTextHeadline">Vehicle-2383</span>
1559
- <span class="TreeLabelNameTextSubline">
1560
- <span>Debug: heavy_fuel_oil</span>
1561
- </span>
1562
- </span>
1563
- </span>
1564
- </div>
1565
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9714">
1566
- <label class="checkbox TreeCheckbox" tabindex="0">
1567
- <input type="checkbox" class="TreeCheckbox">
1568
- <span class="checkbox-text">
1569
- </span>
1570
- </label>
1571
- <span class="TreeLabel TreeLabelName">
1572
- <span class="rioglyph-icon-pair">
1573
- <span class="rioglyph rioglyph-bus">
1574
- </span>
1575
- <span class="rioglyph rioglyph-fuel-liquid">
1576
- </span>
1577
- </span>
1578
- <span class="TreeLabelNameText">
1579
- <span class="TreeLabelNameTextHeadline">Vehicle-3352</span>
1580
- <span class="TreeLabelNameTextSubline">
1581
- <span>Debug: gas</span>
1582
- </span>
1583
- </span>
1584
- </span>
1585
- </div>
1586
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d979">
1587
- <label class="checkbox TreeCheckbox" tabindex="0">
1588
- <input type="checkbox" class="TreeCheckbox">
1589
- <span class="checkbox-text">
1590
- </span>
1591
- </label>
1592
- <span class="TreeLabel TreeLabelName">
1593
- <span class="rioglyph-icon-pair">
1594
- <span class="rioglyph rioglyph-car">
1595
- </span>
1596
- <span class="rioglyph rioglyph-fuel-liquid">
1597
- </span>
1598
- </span>
1599
- <span class="TreeLabelNameText">
1600
- <span class="TreeLabelNameTextHeadline">Vehicle-4157</span>
1601
- <span class="TreeLabelNameTextSubline">
1602
- <span>Debug: diesel</span>
1603
- </span>
1604
- </span>
1605
- </span>
1606
- </div>
1607
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d973">
1608
- <label class="checkbox TreeCheckbox" tabindex="0">
1609
- <input type="checkbox" class="TreeCheckbox">
1610
- <span class="checkbox-text">
1611
- </span>
1612
- </label>
1613
- <span class="TreeLabel TreeLabelName">
1614
- <span class="rioglyph-icon-pair">
1615
- <span class="rioglyph rioglyph-car">
1616
- </span>
1617
- <span class="rioglyph rioglyph-fuel-liquid">
1618
- </span>
1619
- </span>
1620
- <span class="TreeLabelNameText">
1621
- <span class="TreeLabelNameTextHeadline">Vehicle-5855</span>
1622
- <span class="TreeLabelNameTextSubline">
1623
- <span>Debug: gas</span>
1624
- </span>
1625
- </span>
1626
- </span>
1627
- </div>
1628
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d974">
1629
- <label class="checkbox TreeCheckbox" tabindex="0">
1630
- <input type="checkbox" class="TreeCheckbox">
1631
- <span class="checkbox-text">
1632
- </span>
1633
- </label>
1634
- <span class="TreeLabel TreeLabelName">
1635
- <span class="rioglyph-icon-pair">
1636
- <span class="rioglyph rioglyph-van">
1637
- </span>
1638
- <span class="rioglyph rioglyph-fuel-gas">
1639
- </span>
1640
- </span>
1641
- <span class="TreeLabelNameText">
1642
- <span class="TreeLabelNameTextHeadline">Vehicle-6456</span>
1643
- <span class="TreeLabelNameTextSubline">
1644
- <span>Debug: lpg</span>
1645
- </span>
1646
- </span>
1647
- </span>
1648
- </div>
1649
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
1650
- <label class="checkbox TreeCheckbox" tabindex="0">
1651
- <input type="checkbox" class="TreeCheckbox">
1652
- <span class="checkbox-text">
1653
- </span>
1654
- </label>
1655
- <span class="TreeLabel TreeLabelName">
1656
- <span class="rioglyph-icon-pair">
1657
- <span class="rioglyph rioglyph-truck">
1658
- </span>
1659
- <span class="rioglyph rioglyph-fuel-liquid">
1660
- </span>
1661
- </span>
1662
- <span class="TreeLabelNameText">
1663
- <span class="TreeLabelNameTextHeadline">Vehicle-7193</span>
1664
- <span class="TreeLabelNameTextSubline">
1665
- <span>Debug: heavy_fuel_oil</span>
1666
- </span>
1667
- </span>
1668
- </span>
1669
- </div>
1670
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d975">
1671
- <label class="checkbox TreeCheckbox" tabindex="0">
1672
- <input type="checkbox" class="TreeCheckbox">
1673
- <span class="checkbox-text">
1674
- </span>
1675
- </label>
1676
- <span class="TreeLabel TreeLabelName">
1677
- <span class="rioglyph-icon-pair">
1678
- <span class="rioglyph rioglyph-van">
1679
- </span>
1680
- <span class="rioglyph rioglyph-fuel-liquid">
1681
- </span>
1682
- </span>
1683
- <span class="TreeLabelNameText">
1684
- <span class="TreeLabelNameTextHeadline">Vehicle-7464</span>
1685
- <span class="TreeLabelNameTextSubline">
1686
- <span>Debug: diesel</span>
1687
- </span>
1688
- </span>
1689
- </span>
1690
- </div>
1691
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d978">
1692
- <label class="checkbox TreeCheckbox" tabindex="0">
1693
- <input type="checkbox" class="TreeCheckbox">
1694
- <span class="checkbox-text">
1695
- </span>
1696
- </label>
1697
- <span class="TreeLabel TreeLabelName">
1698
- <span class="rioglyph-icon-pair">
1699
- <span class="rioglyph rioglyph-car">
1700
- </span>
1701
- <span class="rioglyph rioglyph-fuel-liquid">
1702
- </span>
1703
- </span>
1704
- <span class="TreeLabelNameText">
1705
- <span class="TreeLabelNameTextHeadline">Vehicle-8699</span>
1706
- <span class="TreeLabelNameTextSubline">
1707
- <span>Debug: gas</span>
1708
- </span>
1709
- </span>
1710
- </span>
1711
- </div>
1712
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9713">
1713
- <label class="checkbox TreeCheckbox" tabindex="0">
1714
- <input type="checkbox" class="TreeCheckbox">
1715
- <span class="checkbox-text">
1716
- </span>
1717
- </label>
1718
- <span class="TreeLabel TreeLabelName">
1719
- <span class="rioglyph-icon-pair">
1720
- <span class="rioglyph rioglyph-van">
1721
- </span>
1722
- <span class="rioglyph rioglyph-fuel-mix">
1723
- </span>
1724
- </span>
1725
- <span class="TreeLabelNameText">
1726
- <span class="TreeLabelNameTextHeadline">Vehicle-8981</span>
1727
- <span class="TreeLabelNameTextSubline">
1728
- <span>Debug: dual_fuel_diesel_cng</span>
1729
- </span>
1730
- </span>
1731
- </span>
1516
+ <div class="tree-virtual-scrollbar scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
1517
+ <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
1518
+ <div class="scrollbar-content-wrapper">
1519
+ <div class="grouped-list" style="height: 825px; position: relative;">
1520
+ <div data-index="0" class="virtualized-tree-item group-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(0px);">
1521
+ <div class="TreeNodeContainer user-select-none overflow-hidden open" data-id="group-1">
1522
+ <div class="TreeNode from-group" data-key="group-1">
1523
+ <label class="checkbox TreeCheckbox" tabindex="0">
1524
+ <input type="checkbox" class="TreeCheckbox">
1525
+ <span class="checkbox-text">
1526
+ </span>
1527
+ </label>
1528
+ <span class="TreeLabel TreeLabelName">
1529
+ <span class="TreeLabelNameText">
1530
+ <span class="TreeLabelNameTextHeadline">Mixed Vehicles</span>
1531
+ </span>
1532
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">14</span>
1533
+ <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1534
+ </span>
1535
+ </span>
1536
+ </div>
1537
+ </div>
1538
+ </div>
1539
+ <div data-index="1" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(41px);">
1540
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1541
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9710">
1542
+ <label class="checkbox TreeCheckbox" tabindex="0">
1543
+ <input type="checkbox" class="TreeCheckbox">
1544
+ <span class="checkbox-text">
1545
+ </span>
1546
+ </label>
1547
+ <span class="TreeLabel TreeLabelName">
1548
+ <span class="rioglyph-icon-pair">
1549
+ <span class="rioglyph rioglyph-van">
1550
+ </span>
1551
+ <span class="rioglyph rioglyph-fuel-gas">
1552
+ </span>
1553
+ </span>
1554
+ <span class="TreeLabelNameText">
1555
+ <span class="TreeLabelNameTextHeadline">Vehicle-1032</span>
1556
+ <span class="TreeLabelNameTextSubline">
1557
+ <span>Debug: lpg</span>
1558
+ </span>
1559
+ </span>
1560
+ </span>
1561
+ </div>
1562
+ </div>
1563
+ </div>
1564
+ <div data-index="2" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(95px);">
1565
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1566
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
1567
+ <label class="checkbox TreeCheckbox" tabindex="0">
1568
+ <input type="checkbox" class="TreeCheckbox">
1569
+ <span class="checkbox-text">
1570
+ </span>
1571
+ </label>
1572
+ <span class="TreeLabel TreeLabelName">
1573
+ <span class="rioglyph-icon-pair">
1574
+ <span class="rioglyph rioglyph-bus">
1575
+ </span>
1576
+ <span class="rioglyph rioglyph-fuel-liquid">
1577
+ </span>
1578
+ </span>
1579
+ <span class="TreeLabelNameText">
1580
+ <span class="TreeLabelNameTextHeadline">Vehicle-1530</span>
1581
+ <span class="TreeLabelNameTextSubline">
1582
+ <span>Debug: diesel</span>
1583
+ </span>
1584
+ </span>
1585
+ </span>
1586
+ </div>
1587
+ </div>
1588
+ </div>
1589
+ <div data-index="3" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(149px);">
1590
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1591
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
1592
+ <label class="checkbox TreeCheckbox" tabindex="0">
1593
+ <input type="checkbox" class="TreeCheckbox">
1594
+ <span class="checkbox-text">
1595
+ </span>
1596
+ </label>
1597
+ <span class="TreeLabel TreeLabelName">
1598
+ <span class="rioglyph-icon-pair">
1599
+ <span class="rioglyph rioglyph-van">
1600
+ </span>
1601
+ <span class="rioglyph rioglyph-fuel-electric">
1602
+ </span>
1603
+ </span>
1604
+ <span class="TreeLabelNameText">
1605
+ <span class="TreeLabelNameTextHeadline">Vehicle-1885</span>
1606
+ <span class="TreeLabelNameTextSubline">
1607
+ <span>Debug: electric</span>
1608
+ </span>
1609
+ </span>
1610
+ </span>
1611
+ </div>
1612
+ </div>
1613
+ </div>
1614
+ <div data-index="4" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(203px);">
1615
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1616
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d970">
1617
+ <label class="checkbox TreeCheckbox" tabindex="0">
1618
+ <input type="checkbox" class="TreeCheckbox">
1619
+ <span class="checkbox-text">
1620
+ </span>
1621
+ </label>
1622
+ <span class="TreeLabel TreeLabelName">
1623
+ <span class="rioglyph-icon-pair">
1624
+ <span class="rioglyph rioglyph-van">
1625
+ </span>
1626
+ <span class="rioglyph rioglyph-fuel-electric">
1627
+ </span>
1628
+ </span>
1629
+ <span class="TreeLabelNameText">
1630
+ <span class="TreeLabelNameTextHeadline">Vehicle-2261</span>
1631
+ <span class="TreeLabelNameTextSubline">
1632
+ <span>Debug: electric</span>
1633
+ </span>
1634
+ </span>
1635
+ </span>
1636
+ </div>
1637
+ </div>
1638
+ </div>
1639
+ <div data-index="5" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(257px);">
1640
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1641
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9719">
1642
+ <label class="checkbox TreeCheckbox" tabindex="0">
1643
+ <input type="checkbox" class="TreeCheckbox">
1644
+ <span class="checkbox-text">
1645
+ </span>
1646
+ </label>
1647
+ <span class="TreeLabel TreeLabelName">
1648
+ <span class="rioglyph-icon-pair">
1649
+ <span class="rioglyph rioglyph-bus">
1650
+ </span>
1651
+ <span class="rioglyph rioglyph-fuel-electric">
1652
+ </span>
1653
+ </span>
1654
+ <span class="TreeLabelNameText">
1655
+ <span class="TreeLabelNameTextHeadline">Vehicle-3321</span>
1656
+ <span class="TreeLabelNameTextSubline">
1657
+ <span>Debug: electric</span>
1658
+ </span>
1659
+ </span>
1660
+ </span>
1661
+ </div>
1662
+ </div>
1663
+ </div>
1664
+ <div data-index="6" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(311px);">
1665
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1666
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9715">
1667
+ <label class="checkbox TreeCheckbox" tabindex="0">
1668
+ <input type="checkbox" class="TreeCheckbox">
1669
+ <span class="checkbox-text">
1670
+ </span>
1671
+ </label>
1672
+ <span class="TreeLabel TreeLabelName">
1673
+ <span class="rioglyph-icon-pair">
1674
+ <span class="rioglyph rioglyph-car">
1675
+ </span>
1676
+ <span class="rioglyph rioglyph-fuel-liquid">
1677
+ </span>
1678
+ </span>
1679
+ <span class="TreeLabelNameText">
1680
+ <span class="TreeLabelNameTextHeadline">Vehicle-6234</span>
1681
+ <span class="TreeLabelNameTextSubline">
1682
+ <span>Debug: gas</span>
1683
+ </span>
1684
+ </span>
1685
+ </span>
1686
+ </div>
1687
+ </div>
1688
+ </div>
1689
+ <div data-index="7" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(365px);">
1690
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1691
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9716">
1692
+ <label class="checkbox TreeCheckbox" tabindex="0">
1693
+ <input type="checkbox" class="TreeCheckbox">
1694
+ <span class="checkbox-text">
1695
+ </span>
1696
+ </label>
1697
+ <span class="TreeLabel TreeLabelName">
1698
+ <span class="rioglyph-icon-pair">
1699
+ <span class="rioglyph rioglyph-bus">
1700
+ </span>
1701
+ <span class="rioglyph rioglyph-fuel-liquid">
1702
+ </span>
1703
+ </span>
1704
+ <span class="TreeLabelNameText">
1705
+ <span class="TreeLabelNameTextHeadline">Vehicle-6675</span>
1706
+ <span class="TreeLabelNameTextSubline">
1707
+ <span>Debug: gas</span>
1708
+ </span>
1709
+ </span>
1710
+ </span>
1711
+ </div>
1712
+ </div>
1713
+ </div>
1714
+ <div data-index="8" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(419px);">
1715
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1716
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9712">
1717
+ <label class="checkbox TreeCheckbox" tabindex="0">
1718
+ <input type="checkbox" class="TreeCheckbox">
1719
+ <span class="checkbox-text">
1720
+ </span>
1721
+ </label>
1722
+ <span class="TreeLabel TreeLabelName">
1723
+ <span class="rioglyph-icon-pair">
1724
+ <span class="rioglyph rioglyph-bus">
1725
+ </span>
1726
+ <span class="rioglyph rioglyph-fuel-mix">
1727
+ </span>
1728
+ </span>
1729
+ <span class="TreeLabelNameText">
1730
+ <span class="TreeLabelNameTextHeadline">Vehicle-6884</span>
1731
+ <span class="TreeLabelNameTextSubline">
1732
+ <span>Debug: dual_fuel_diesel_cng</span>
1733
+ </span>
1734
+ </span>
1735
+ </span>
1736
+ </div>
1737
+ </div>
1738
+ </div>
1739
+ <div data-index="9" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(473px);">
1740
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1741
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d979">
1742
+ <label class="checkbox TreeCheckbox" tabindex="0">
1743
+ <input type="checkbox" class="TreeCheckbox">
1744
+ <span class="checkbox-text">
1745
+ </span>
1746
+ </label>
1747
+ <span class="TreeLabel TreeLabelName">
1748
+ <span class="rioglyph-icon-pair">
1749
+ <span class="rioglyph rioglyph-bus">
1750
+ </span>
1751
+ <span class="rioglyph rioglyph-fuel-hydrogen">
1752
+ </span>
1753
+ </span>
1754
+ <span class="TreeLabelNameText">
1755
+ <span class="TreeLabelNameTextHeadline">Vehicle-7323</span>
1756
+ <span class="TreeLabelNameTextSubline">
1757
+ <span>Debug: hydrogen</span>
1758
+ </span>
1759
+ </span>
1760
+ </span>
1761
+ </div>
1762
+ </div>
1763
+ </div>
1764
+ <div data-index="10" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(527px);">
1765
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1766
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d978">
1767
+ <label class="checkbox TreeCheckbox" tabindex="0">
1768
+ <input type="checkbox" class="TreeCheckbox">
1769
+ <span class="checkbox-text">
1770
+ </span>
1771
+ </label>
1772
+ <span class="TreeLabel TreeLabelName">
1773
+ <span class="rioglyph-icon-pair">
1774
+ <span class="rioglyph rioglyph-bus">
1775
+ </span>
1776
+ <span class="rioglyph rioglyph-fuel-liquid">
1777
+ </span>
1778
+ </span>
1779
+ <span class="TreeLabelNameText">
1780
+ <span class="TreeLabelNameTextHeadline">Vehicle-8654</span>
1781
+ <span class="TreeLabelNameTextSubline">
1782
+ <span>Debug: diesel</span>
1783
+ </span>
1784
+ </span>
1785
+ </span>
1786
+ </div>
1787
+ </div>
1788
+ </div>
1789
+ <div data-index="11" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(581px);">
1790
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1791
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9714">
1792
+ <label class="checkbox TreeCheckbox" tabindex="0">
1793
+ <input type="checkbox" class="TreeCheckbox">
1794
+ <span class="checkbox-text">
1795
+ </span>
1796
+ </label>
1797
+ <span class="TreeLabel TreeLabelName">
1798
+ <span class="rioglyph-icon-pair">
1799
+ <span class="rioglyph rioglyph-truck">
1800
+ </span>
1801
+ <span class="rioglyph rioglyph-fuel-electric">
1802
+ </span>
1803
+ </span>
1804
+ <span class="TreeLabelNameText">
1805
+ <span class="TreeLabelNameTextHeadline">Vehicle-8759</span>
1806
+ <span class="TreeLabelNameTextSubline">
1807
+ <span>Debug: electric</span>
1808
+ </span>
1809
+ </span>
1810
+ </span>
1811
+ </div>
1812
+ </div>
1813
+ </div>
1814
+ </div>
1815
+ </div>
1732
1816
  </div>
1733
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d977">
1734
- <label class="checkbox TreeCheckbox" tabindex="0">
1735
- <input type="checkbox" class="TreeCheckbox">
1736
- <span class="checkbox-text">
1737
- </span>
1738
- </label>
1739
- <span class="TreeLabel TreeLabelName">
1740
- <span class="rioglyph-icon-pair">
1741
- <span class="rioglyph rioglyph-car">
1742
- </span>
1743
- <span class="rioglyph rioglyph-fuel-liquid">
1744
- </span>
1745
- </span>
1746
- <span class="TreeLabelNameText">
1747
- <span class="TreeLabelNameTextHeadline">Vehicle-9946</span>
1748
- <span class="TreeLabelNameTextSubline">
1749
- <span>Debug: heavy_fuel_oil</span>
1750
- </span>
1751
- </span>
1752
- </span>
1817
+ <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
1818
+ <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
1819
+ </div>
1753
1820
  </div>
1754
- </div>
1755
- <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="unassigned-group">
1756
- <div class="TreeNode from-group" data-key="unassigned-group">
1757
- <label class="checkbox TreeCheckbox" tabindex="0">
1758
- <input type="checkbox" class="TreeCheckbox">
1759
- <span class="checkbox-text">
1760
- </span>
1761
- </label>
1762
- <span class="TreeLabel TreeLabelName">
1763
- <span class="TreeLabelNameText">
1764
- <span class="TreeLabelNameTextHeadline">Ungrouped</span>
1765
- </span>
1766
- <span class="TreeLabelCount label label-muted label-filled label-condensed">9</span>
1767
- <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1768
- </span>
1769
- </span>
1821
+ <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
1822
+ <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
1823
+ </div>
1770
1824
  </div>
1771
1825
  </div>
1772
1826
  </div>
@@ -2344,11 +2398,11 @@ export default AssetTreeWithCustomSummaryExample;
2344
2398
 
2345
2399
  ### Example: Example 5
2346
2400
 
2347
- Group 01 3
2401
+ Group 01 11
2348
2402
 
2349
- Group 02 10
2403
+ Group 02 3
2350
2404
 
2351
- Group 03 7
2405
+ Group 03 6
2352
2406
 
2353
2407
  #### React (tsx)
2354
2408
 
@@ -2449,7 +2503,7 @@ export default () => {
2449
2503
  <span class="TreeLabelNameText">
2450
2504
  <span class="TreeLabelNameTextHeadline">Group 01</span>
2451
2505
  </span>
2452
- <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
2506
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">11</span>
2453
2507
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2454
2508
  </span>
2455
2509
  </span>
@@ -2464,7 +2518,7 @@ export default () => {
2464
2518
  <span class="TreeLabelNameText">
2465
2519
  <span class="TreeLabelNameTextHeadline">Group 02</span>
2466
2520
  </span>
2467
- <span class="TreeLabelCount label label-muted label-filled label-condensed">10</span>
2521
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
2468
2522
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2469
2523
  </span>
2470
2524
  </span>
@@ -2479,7 +2533,7 @@ export default () => {
2479
2533
  <span class="TreeLabelNameText">
2480
2534
  <span class="TreeLabelNameTextHeadline">Group 03</span>
2481
2535
  </span>
2482
- <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
2536
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
2483
2537
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2484
2538
  </span>
2485
2539
  </span>
@@ -2643,11 +2697,11 @@ Tree with header and search
2643
2697
 
2644
2698
  Folder 01 3
2645
2699
 
2646
- Folder 02 5
2700
+ Folder 02 7
2647
2701
 
2648
- Folder 03 4
2702
+ Folder 03 7
2649
2703
 
2650
- Folder 04 8
2704
+ Folder 04 3
2651
2705
 
2652
2706
  Selected items:
2653
2707
 
@@ -2805,7 +2859,7 @@ export default TreeOnlyExample;
2805
2859
  <span class="TreeLabelNameText">
2806
2860
  <span class="TreeLabelNameTextHeadline">Folder 02</span>
2807
2861
  </span>
2808
- <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
2862
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
2809
2863
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2810
2864
  </span>
2811
2865
  </span>
@@ -2819,7 +2873,7 @@ export default TreeOnlyExample;
2819
2873
  <span class="TreeLabelNameText">
2820
2874
  <span class="TreeLabelNameTextHeadline">Folder 03</span>
2821
2875
  </span>
2822
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
2876
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
2823
2877
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2824
2878
  </span>
2825
2879
  </span>
@@ -2833,7 +2887,7 @@ export default TreeOnlyExample;
2833
2887
  <span class="TreeLabelNameText">
2834
2888
  <span class="TreeLabelNameTextHeadline">Folder 04</span>
2835
2889
  </span>
2836
- <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
2890
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
2837
2891
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2838
2892
  </span>
2839
2893
  </span>
@@ -2907,13 +2961,13 @@ export default TreeOnlyExample;
2907
2961
 
2908
2962
  Tree without header and search
2909
2963
 
2910
- Folder 01 4
2964
+ Folder 01 6
2911
2965
 
2912
- Folder 02 4
2966
+ Folder 02 7
2913
2967
 
2914
- Folder 03 6
2968
+ Folder 03 3
2915
2969
 
2916
- Folder 04 6
2970
+ Folder 04 4
2917
2971
 
2918
2972
  Selected items:
2919
2973
 
@@ -3033,7 +3087,7 @@ export default TreeOnlyExample;
3033
3087
  <span class="TreeLabelNameText">
3034
3088
  <span class="TreeLabelNameTextHeadline">Folder 01</span>
3035
3089
  </span>
3036
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
3090
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
3037
3091
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
3038
3092
  </span>
3039
3093
  </span>
@@ -3047,7 +3101,7 @@ export default TreeOnlyExample;
3047
3101
  <span class="TreeLabelNameText">
3048
3102
  <span class="TreeLabelNameTextHeadline">Folder 02</span>
3049
3103
  </span>
3050
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
3104
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
3051
3105
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
3052
3106
  </span>
3053
3107
  </span>
@@ -3061,7 +3115,7 @@ export default TreeOnlyExample;
3061
3115
  <span class="TreeLabelNameText">
3062
3116
  <span class="TreeLabelNameTextHeadline">Folder 03</span>
3063
3117
  </span>
3064
- <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
3118
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
3065
3119
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
3066
3120
  </span>
3067
3121
  </span>
@@ -3075,7 +3129,7 @@ export default TreeOnlyExample;
3075
3129
  <span class="TreeLabelNameText">
3076
3130
  <span class="TreeLabelNameTextHeadline">Folder 04</span>
3077
3131
  </span>
3078
- <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
3132
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
3079
3133
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
3080
3134
  </span>
3081
3135
  </span>