@eturnity/eturnity_reusable_components 8.19.8-EPDM-13618.0 → 8.19.8-EPDM-14690.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 (575) hide show
  1. package/README.md +29 -29
  2. package/package.json +85 -85
  3. package/src/App.vue +30 -30
  4. package/src/DemoChart.vue +424 -0
  5. package/src/Test.vue +64 -64
  6. package/src/TestChart.vue +229 -0
  7. package/src/assets/icons/arrow_down.svg +3 -3
  8. package/src/assets/icons/arrow_up_red.svg +3 -3
  9. package/src/assets/icons/black_spinner.svg +35 -35
  10. package/src/assets/icons/delete_icon.svg +11 -11
  11. package/src/assets/icons/delete_icon_gray.svg +11 -11
  12. package/src/assets/icons/drag_icon.svg +8 -8
  13. package/src/assets/icons/external_icon.svg +6 -6
  14. package/src/assets/icons/language_icon.svg +6 -6
  15. package/src/assets/icons/pdf_icon.svg +6 -6
  16. package/src/assets/icons/plus_button.svg +4 -4
  17. package/src/assets/icons/search_icon_black.svg +3 -3
  18. package/src/assets/icons/subposition_icon.svg +3 -3
  19. package/src/assets/icons/subposition_marker.svg +3 -3
  20. package/src/assets/icons/warning_icon.svg +3 -3
  21. package/src/assets/svgIcons/2d_active.svg +7 -7
  22. package/src/assets/svgIcons/2d_inactive.svg +8 -8
  23. package/src/assets/svgIcons/3d_active.svg +7 -7
  24. package/src/assets/svgIcons/3d_inactive.svg +8 -8
  25. package/src/assets/svgIcons/_readme.md +7 -7
  26. package/src/assets/svgIcons/ac_power.svg +4 -4
  27. package/src/assets/svgIcons/accept.svg +5 -5
  28. package/src/assets/svgIcons/activate_panels_active.svg +22 -22
  29. package/src/assets/svgIcons/activate_panels_inactive.svg +20 -20
  30. package/src/assets/svgIcons/add_icon-1.svg +3 -3
  31. package/src/assets/svgIcons/add_icon.svg +4 -4
  32. package/src/assets/svgIcons/add_plus.svg +4 -4
  33. package/src/assets/svgIcons/address_book.svg +3 -3
  34. package/src/assets/svgIcons/adjust_roof.svg +6 -6
  35. package/src/assets/svgIcons/after_sale_as_a_service.svg +6 -6
  36. package/src/assets/svgIcons/all_good.svg +3 -3
  37. package/src/assets/svgIcons/angle_active.svg +5 -5
  38. package/src/assets/svgIcons/angle_inactive.svg +4 -4
  39. package/src/assets/svgIcons/area_active.svg +11 -11
  40. package/src/assets/svgIcons/area_inactive.svg +26 -26
  41. package/src/assets/svgIcons/areas_tool.svg +14 -14
  42. package/src/assets/svgIcons/arrow_down.svg +3 -3
  43. package/src/assets/svgIcons/arrow_down_unfilled.svg +4 -4
  44. package/src/assets/svgIcons/arrow_left.svg +4 -4
  45. package/src/assets/svgIcons/arrow_long_left.svg +3 -3
  46. package/src/assets/svgIcons/arrow_long_right.svg +3 -3
  47. package/src/assets/svgIcons/arrow_right.svg +4 -4
  48. package/src/assets/svgIcons/arrow_up.svg +3 -3
  49. package/src/assets/svgIcons/arrow_up_unfilled.svg +4 -4
  50. package/src/assets/svgIcons/attachment.svg +3 -3
  51. package/src/assets/svgIcons/base_layer.svg +3 -3
  52. package/src/assets/svgIcons/battery.svg +3 -3
  53. package/src/assets/svgIcons/bell.svg +3 -3
  54. package/src/assets/svgIcons/bell_alt.svg +3 -3
  55. package/src/assets/svgIcons/bexio.svg +4 -4
  56. package/src/assets/svgIcons/bold.svg +3 -3
  57. package/src/assets/svgIcons/bom.svg +3 -3
  58. package/src/assets/svgIcons/bom_generation.svg +10 -10
  59. package/src/assets/svgIcons/bookmaker.svg +3 -3
  60. package/src/assets/svgIcons/bubble.svg +3 -3
  61. package/src/assets/svgIcons/bug.svg +5 -5
  62. package/src/assets/svgIcons/buildings.svg +55 -55
  63. package/src/assets/svgIcons/bullet_list.svg +8 -8
  64. package/src/assets/svgIcons/calendar.svg +7 -7
  65. package/src/assets/svgIcons/calendar_icon.svg +7 -7
  66. package/src/assets/svgIcons/call.svg +3 -3
  67. package/src/assets/svgIcons/camera.svg +3 -3
  68. package/src/assets/svgIcons/car.svg +3 -3
  69. package/src/assets/svgIcons/cart.svg +3 -3
  70. package/src/assets/svgIcons/charger_icon_white.svg +44 -44
  71. package/src/assets/svgIcons/chassis_ground_symbol.svg +27 -27
  72. package/src/assets/svgIcons/checkbox.svg +3 -3
  73. package/src/assets/svgIcons/checkmark.svg +3 -3
  74. package/src/assets/svgIcons/checkmark_white.svg +4 -4
  75. package/src/assets/svgIcons/clear_formatting.svg +7 -7
  76. package/src/assets/svgIcons/clenergy.svg +3 -3
  77. package/src/assets/svgIcons/clickable_info.svg +4 -4
  78. package/src/assets/svgIcons/clickable_info_white.svg +5 -5
  79. package/src/assets/svgIcons/clip.svg +3 -3
  80. package/src/assets/svgIcons/clock.svg +17 -17
  81. package/src/assets/svgIcons/clock_full.svg +3 -3
  82. package/src/assets/svgIcons/close.svg +4 -4
  83. package/src/assets/svgIcons/co_branding.svg +5 -5
  84. package/src/assets/svgIcons/collapse.svg +4 -4
  85. package/src/assets/svgIcons/collapse_all.svg +3 -3
  86. package/src/assets/svgIcons/collections.svg +3 -3
  87. package/src/assets/svgIcons/component_library.svg +7 -7
  88. package/src/assets/svgIcons/consumption_tariffs.svg +43 -43
  89. package/src/assets/svgIcons/context_menu-1.svg +6 -6
  90. package/src/assets/svgIcons/context_menu-2.svg +5 -5
  91. package/src/assets/svgIcons/context_menu.svg +5 -5
  92. package/src/assets/svgIcons/context_menu_tabs.svg +5 -5
  93. package/src/assets/svgIcons/cross.svg +4 -4
  94. package/src/assets/svgIcons/current_variant.svg +4 -4
  95. package/src/assets/svgIcons/customer.svg +3 -3
  96. package/src/assets/svgIcons/dashboard.svg +3 -3
  97. package/src/assets/svgIcons/data_transfer.svg +3 -3
  98. package/src/assets/svgIcons/deadline.svg +4 -4
  99. package/src/assets/svgIcons/deal_flow.svg +3 -3
  100. package/src/assets/svgIcons/delete.svg +4 -4
  101. package/src/assets/svgIcons/delete_area_active.svg +16 -16
  102. package/src/assets/svgIcons/delete_area_inactive.svg +15 -15
  103. package/src/assets/svgIcons/direction_active-1.svg +12 -12
  104. package/src/assets/svgIcons/direction_active.svg +5 -5
  105. package/src/assets/svgIcons/direction_arrow.svg +4 -4
  106. package/src/assets/svgIcons/direction_inactive.svg +4 -4
  107. package/src/assets/svgIcons/dislike.svg +3 -3
  108. package/src/assets/svgIcons/distance_tool.svg +8 -8
  109. package/src/assets/svgIcons/distances_active.svg +9 -9
  110. package/src/assets/svgIcons/distances_inactive.svg +8 -8
  111. package/src/assets/svgIcons/distort_tool.svg +10 -10
  112. package/src/assets/svgIcons/distort_tool2.svg +16 -16
  113. package/src/assets/svgIcons/document.svg +3 -3
  114. package/src/assets/svgIcons/documents.svg +3 -3
  115. package/src/assets/svgIcons/documents_landscape.svg +3 -3
  116. package/src/assets/svgIcons/double_arrow_long.svg +4 -4
  117. package/src/assets/svgIcons/downarrow.svg +3 -3
  118. package/src/assets/svgIcons/download.svg +4 -4
  119. package/src/assets/svgIcons/drag_icon.svg +8 -8
  120. package/src/assets/svgIcons/draggable_corner.svg +5 -5
  121. package/src/assets/svgIcons/draw_tool.svg +3 -3
  122. package/src/assets/svgIcons/duplicate-1.svg +8 -8
  123. package/src/assets/svgIcons/duplicate-2.svg +5 -5
  124. package/src/assets/svgIcons/duplicate.svg +3 -3
  125. package/src/assets/svgIcons/e-mobility_configurator.svg +6 -6
  126. package/src/assets/svgIcons/e_signature.svg +5 -5
  127. package/src/assets/svgIcons/ed_ac.svg +3 -3
  128. package/src/assets/svgIcons/ed_ac_path.svg +3 -3
  129. package/src/assets/svgIcons/ed_acgrid.svg +3 -3
  130. package/src/assets/svgIcons/ed_acgrid_old.svg +4 -4
  131. package/src/assets/svgIcons/ed_arrow_both.svg +3 -3
  132. package/src/assets/svgIcons/ed_arrow_left.svg +3 -3
  133. package/src/assets/svgIcons/ed_arrow_right.svg +3 -3
  134. package/src/assets/svgIcons/ed_battery.svg +3 -3
  135. package/src/assets/svgIcons/ed_batteryacinverter.svg +3 -3
  136. package/src/assets/svgIcons/ed_batteryintegratedinverter.svg +3 -3
  137. package/src/assets/svgIcons/ed_cirquitbreaker.svg +3 -3
  138. package/src/assets/svgIcons/ed_cirquitbreaker_magnetic.svg +3 -3
  139. package/src/assets/svgIcons/ed_cirquitbreaker_thermal.svg +3 -3
  140. package/src/assets/svgIcons/ed_cirquitbreaker_thermal_magnetic.svg +3 -3
  141. package/src/assets/svgIcons/ed_consumption.svg +3 -3
  142. package/src/assets/svgIcons/ed_dc.svg +3 -3
  143. package/src/assets/svgIcons/ed_disconnector.svg +3 -3
  144. package/src/assets/svgIcons/ed_disconnector_fuse.svg +3 -3
  145. package/src/assets/svgIcons/ed_disconnector_fuse_switch.svg +3 -3
  146. package/src/assets/svgIcons/ed_disconnector_loadbreak_switch.svg +3 -3
  147. package/src/assets/svgIcons/ed_disconnector_switch.svg +3 -3
  148. package/src/assets/svgIcons/ed_disconnector_switch_auto_release.svg +3 -3
  149. package/src/assets/svgIcons/ed_energymanagement_rectangle.svg +3 -3
  150. package/src/assets/svgIcons/ed_evcharger.svg +3 -3
  151. package/src/assets/svgIcons/ed_flexiblecomponent_circle.svg +3 -3
  152. package/src/assets/svgIcons/ed_flexiblecomponent_square.svg +3 -3
  153. package/src/assets/svgIcons/ed_fuse.svg +3 -3
  154. package/src/assets/svgIcons/ed_ground.svg +3 -3
  155. package/src/assets/svgIcons/ed_heatpump.svg +3 -3
  156. package/src/assets/svgIcons/ed_icon_battery.svg +3 -3
  157. package/src/assets/svgIcons/ed_icon_circle.svg +3 -3
  158. package/src/assets/svgIcons/ed_icon_heatpump.svg +3 -3
  159. package/src/assets/svgIcons/ed_icon_inverter.svg +8 -8
  160. package/src/assets/svgIcons/ed_icon_m.svg +3 -3
  161. package/src/assets/svgIcons/ed_icon_optimizer.svg +11 -11
  162. package/src/assets/svgIcons/ed_icon_optimizer_path.svg +11 -11
  163. package/src/assets/svgIcons/ed_integratedbatteryinverter.svg +3 -3
  164. package/src/assets/svgIcons/ed_inverter-blank.svg +3 -3
  165. package/src/assets/svgIcons/ed_mainsconnection.svg +3 -3
  166. package/src/assets/svgIcons/ed_meter-blank.svg +3 -3
  167. package/src/assets/svgIcons/ed_meter_arrowleft.svg +3 -3
  168. package/src/assets/svgIcons/ed_meter_arrowright.svg +3 -3
  169. package/src/assets/svgIcons/ed_meter_bidirectional.svg +3 -3
  170. package/src/assets/svgIcons/ed_networkandsystemprotection_double.svg +3 -3
  171. package/src/assets/svgIcons/ed_networkandsystemprotection_single.svg +3 -3
  172. package/src/assets/svgIcons/ed_pvpanel (Stroke).svg +3 -3
  173. package/src/assets/svgIcons/ed_pvpanel.svg +3 -3
  174. package/src/assets/svgIcons/ed_rcd.svg +3 -3
  175. package/src/assets/svgIcons/ed_rcd_simple.svg +3 -3
  176. package/src/assets/svgIcons/ed_spd.svg +3 -3
  177. package/src/assets/svgIcons/ed_stringwithoptimizer.svg +5 -5
  178. package/src/assets/svgIcons/ed_stringwithoutoptimizer.svg +7 -7
  179. package/src/assets/svgIcons/ed_transformer.svg +3 -3
  180. package/src/assets/svgIcons/edit.svg +3 -3
  181. package/src/assets/svgIcons/edit_button.svg +3 -3
  182. package/src/assets/svgIcons/edit_stroke.svg +3 -3
  183. package/src/assets/svgIcons/efs.svg +5 -5
  184. package/src/assets/svgIcons/electricity_tariff.svg +3 -3
  185. package/src/assets/svgIcons/email.svg +3 -3
  186. package/src/assets/svgIcons/ems-1.svg +3 -3
  187. package/src/assets/svgIcons/ems.svg +3 -3
  188. package/src/assets/svgIcons/end_of_the_list.svg +5 -5
  189. package/src/assets/svgIcons/energy_meter.svg +3 -3
  190. package/src/assets/svgIcons/erase.svg +4 -4
  191. package/src/assets/svgIcons/erase_white.svg +4 -4
  192. package/src/assets/svgIcons/expand_all.svg +4 -4
  193. package/src/assets/svgIcons/export_document.svg +3 -3
  194. package/src/assets/svgIcons/external_icon.svg +5 -5
  195. package/src/assets/svgIcons/fav_icon.svg +4 -4
  196. package/src/assets/svgIcons/filter.svg +3 -3
  197. package/src/assets/svgIcons/finance.svg +3 -3
  198. package/src/assets/svgIcons/financing_for_pv-1.svg +5 -5
  199. package/src/assets/svgIcons/financing_for_pv-2.svg +3 -3
  200. package/src/assets/svgIcons/financing_for_pv.svg +3 -3
  201. package/src/assets/svgIcons/finish-1.svg +4 -4
  202. package/src/assets/svgIcons/finish.svg +3 -3
  203. package/src/assets/svgIcons/flatten.svg +11 -11
  204. package/src/assets/svgIcons/flatten_roof.svg +20 -20
  205. package/src/assets/svgIcons/folder.svg +3 -3
  206. package/src/assets/svgIcons/free_technology.svg +3 -3
  207. package/src/assets/svgIcons/ground_symbol.svg +28 -28
  208. package/src/assets/svgIcons/handle.svg +5 -5
  209. package/src/assets/svgIcons/heat_calc.svg +7 -7
  210. package/src/assets/svgIcons/heat_pump.svg +5 -5
  211. package/src/assets/svgIcons/heating_system.svg +3 -3
  212. package/src/assets/svgIcons/height_equalize.svg +3 -3
  213. package/src/assets/svgIcons/height_snap.svg +3 -3
  214. package/src/assets/svgIcons/house.svg +3 -3
  215. package/src/assets/svgIcons/house_3d-1.svg +7 -7
  216. package/src/assets/svgIcons/house_3d.svg +7 -7
  217. package/src/assets/svgIcons/house_sun.svg +3 -3
  218. package/src/assets/svgIcons/hybrid.svg +4 -4
  219. package/src/assets/svgIcons/inclination.svg +2 -2
  220. package/src/assets/svgIcons/info.svg +3 -3
  221. package/src/assets/svgIcons/initial_situation.svg +3 -3
  222. package/src/assets/svgIcons/integrations.svg +3 -3
  223. package/src/assets/svgIcons/intro-tour-1.svg +3 -3
  224. package/src/assets/svgIcons/intro-tour.svg +3 -3
  225. package/src/assets/svgIcons/inverter.svg +3 -3
  226. package/src/assets/svgIcons/italic.svg +3 -3
  227. package/src/assets/svgIcons/k2.svg +4 -4
  228. package/src/assets/svgIcons/kanban_view.svg +6 -6
  229. package/src/assets/svgIcons/key.svg +3 -3
  230. package/src/assets/svgIcons/lake.svg +29 -29
  231. package/src/assets/svgIcons/layers_close.svg +4 -4
  232. package/src/assets/svgIcons/layers_open.svg +4 -4
  233. package/src/assets/svgIcons/lead_marketplace.svg +6 -6
  234. package/src/assets/svgIcons/lead_provider.svg +4 -4
  235. package/src/assets/svgIcons/legend.svg +3 -3
  236. package/src/assets/svgIcons/length_2d.svg +2 -2
  237. package/src/assets/svgIcons/length_3d.svg +4 -4
  238. package/src/assets/svgIcons/length_calculator.svg +2 -2
  239. package/src/assets/svgIcons/length_in_2d_active.svg +12 -12
  240. package/src/assets/svgIcons/length_in_2d_inctive.svg +13 -13
  241. package/src/assets/svgIcons/light_bulb.svg +3 -3
  242. package/src/assets/svgIcons/like.svg +3 -3
  243. package/src/assets/svgIcons/line_graph.svg +3 -3
  244. package/src/assets/svgIcons/local_subsidies.svg +18 -18
  245. package/src/assets/svgIcons/location.svg +3 -3
  246. package/src/assets/svgIcons/lock.svg +3 -3
  247. package/src/assets/svgIcons/logout.svg +3 -3
  248. package/src/assets/svgIcons/loop.svg +3 -3
  249. package/src/assets/svgIcons/low-vegetation.svg +37 -37
  250. package/src/assets/svgIcons/lunch.svg +4 -4
  251. package/src/assets/svgIcons/magic_tool.svg +6 -6
  252. package/src/assets/svgIcons/map_icon.svg +5 -5
  253. package/src/assets/svgIcons/map_settings.svg +3 -3
  254. package/src/assets/svgIcons/margin_tool.svg +4 -4
  255. package/src/assets/svgIcons/meeting.svg +6 -6
  256. package/src/assets/svgIcons/module.svg +3 -3
  257. package/src/assets/svgIcons/move_copy.svg +4 -4
  258. package/src/assets/svgIcons/move_down.svg +3 -3
  259. package/src/assets/svgIcons/move_left.svg +3 -3
  260. package/src/assets/svgIcons/move_right.svg +3 -3
  261. package/src/assets/svgIcons/move_up.svg +3 -3
  262. package/src/assets/svgIcons/new_area_inactive.svg +11 -11
  263. package/src/assets/svgIcons/next.svg +4 -4
  264. package/src/assets/svgIcons/normal-tg.svg +30 -30
  265. package/src/assets/svgIcons/normal-vegetation.svg +53 -53
  266. package/src/assets/svgIcons/not_equal_to.svg +3 -3
  267. package/src/assets/svgIcons/numbered_list.svg +6 -6
  268. package/src/assets/svgIcons/obstacle_tool.svg +8 -8
  269. package/src/assets/svgIcons/obstacle_tool_origin.svg +3 -3
  270. package/src/assets/svgIcons/offset_tool.svg +8 -8
  271. package/src/assets/svgIcons/open-tg.svg +21 -21
  272. package/src/assets/svgIcons/optimizer.svg +3 -3
  273. package/src/assets/svgIcons/order.svg +3 -3
  274. package/src/assets/svgIcons/outline_tool.svg +11 -11
  275. package/src/assets/svgIcons/pan_tool.svg +12 -12
  276. package/src/assets/svgIcons/panels_tool.svg +8 -8
  277. package/src/assets/svgIcons/pen_tool.svg +4 -4
  278. package/src/assets/svgIcons/picker_tool.svg +4 -4
  279. package/src/assets/svgIcons/picture.svg +3 -3
  280. package/src/assets/svgIcons/pin.svg +5 -5
  281. package/src/assets/svgIcons/plus_button.svg +4 -4
  282. package/src/assets/svgIcons/presentation.svg +3 -3
  283. package/src/assets/svgIcons/preview.svg +3 -3
  284. package/src/assets/svgIcons/previous.svg +4 -4
  285. package/src/assets/svgIcons/profile-1.svg +4 -4
  286. package/src/assets/svgIcons/profile.svg +3 -3
  287. package/src/assets/svgIcons/profitability.svg +3 -3
  288. package/src/assets/svgIcons/project_analysis.svg +3 -3
  289. package/src/assets/svgIcons/project_settings.svg +3 -3
  290. package/src/assets/svgIcons/protected-tg.svg +47 -47
  291. package/src/assets/svgIcons/pv.svg +3 -3
  292. package/src/assets/svgIcons/question_mark.svg +3 -3
  293. package/src/assets/svgIcons/question_mark_white.svg +4 -4
  294. package/src/assets/svgIcons/quotations.svg +6 -6
  295. package/src/assets/svgIcons/rectangle.svg +3 -3
  296. package/src/assets/svgIcons/redo.svg +6 -6
  297. package/src/assets/svgIcons/refresh.svg +3 -3
  298. package/src/assets/svgIcons/reorder_string.svg +3 -3
  299. package/src/assets/svgIcons/resizer.svg +5 -5
  300. package/src/assets/svgIcons/roof_layer.svg +3 -3
  301. package/src/assets/svgIcons/rotate_tool.svg +3 -3
  302. package/src/assets/svgIcons/rotate_view.svg +5 -5
  303. package/src/assets/svgIcons/ruler_tool.svg +3 -3
  304. package/src/assets/svgIcons/run_simulation.svg +3 -3
  305. package/src/assets/svgIcons/save.svg +3 -3
  306. package/src/assets/svgIcons/scaling_tool.svg +8 -8
  307. package/src/assets/svgIcons/sea.svg +34 -34
  308. package/src/assets/svgIcons/search.svg +3 -3
  309. package/src/assets/svgIcons/security.svg +3 -3
  310. package/src/assets/svgIcons/settings.svg +3 -3
  311. package/src/assets/svgIcons/show_in_a_new_tab.svg +12 -12
  312. package/src/assets/svgIcons/smartphone.svg +4 -4
  313. package/src/assets/svgIcons/solar_calc.svg +13 -13
  314. package/src/assets/svgIcons/solarmarkt.svg +3 -3
  315. package/src/assets/svgIcons/sorting.svg +4 -4
  316. package/src/assets/svgIcons/split.svg +12 -12
  317. package/src/assets/svgIcons/star.svg +3 -3
  318. package/src/assets/svgIcons/start_of_the_list.svg +5 -5
  319. package/src/assets/svgIcons/strikethrough.svg +4 -4
  320. package/src/assets/svgIcons/string_design.svg +5 -5
  321. package/src/assets/svgIcons/string_directions.svg +10 -10
  322. package/src/assets/svgIcons/subscriptions.svg +3 -3
  323. package/src/assets/svgIcons/subsidies-2.svg +3 -3
  324. package/src/assets/svgIcons/subsidies.svg +3 -3
  325. package/src/assets/svgIcons/subtract_icon.svg +3 -3
  326. package/src/assets/svgIcons/suitcase.svg +3 -3
  327. package/src/assets/svgIcons/summer.svg +3 -3
  328. package/src/assets/svgIcons/switch_polarity.svg +5 -5
  329. package/src/assets/svgIcons/table_view.svg +3 -3
  330. package/src/assets/svgIcons/template_icon_not_clickable.svg +6 -6
  331. package/src/assets/svgIcons/text_column_one.svg +6 -6
  332. package/src/assets/svgIcons/text_column_three.svg +14 -14
  333. package/src/assets/svgIcons/text_column_two.svg +10 -10
  334. package/src/assets/svgIcons/text_icon.svg +3 -3
  335. package/src/assets/svgIcons/transfer.svg +4 -4
  336. package/src/assets/svgIcons/transparent_warning.svg +4 -4
  337. package/src/assets/svgIcons/trim_tool.svg +4 -4
  338. package/src/assets/svgIcons/truck.svg +3 -3
  339. package/src/assets/svgIcons/underlined.svg +3 -3
  340. package/src/assets/svgIcons/undo.svg +6 -6
  341. package/src/assets/svgIcons/uparrow.svg +3 -3
  342. package/src/assets/svgIcons/update.svg +3 -3
  343. package/src/assets/svgIcons/upload_avatar-1.svg +12 -12
  344. package/src/assets/svgIcons/upload_avatar.svg +5 -5
  345. package/src/assets/svgIcons/upload_image.svg +8 -8
  346. package/src/assets/svgIcons/upload_image_tool.svg +7 -7
  347. package/src/assets/svgIcons/variants.svg +3 -3
  348. package/src/assets/svgIcons/vdv.svg +5 -5
  349. package/src/assets/svgIcons/vertical_tool.svg +3 -3
  350. package/src/assets/svgIcons/virtual_storage.svg +3 -3
  351. package/src/assets/svgIcons/warning.svg +4 -4
  352. package/src/assets/svgIcons/warning_triangle.svg +3 -3
  353. package/src/assets/svgIcons/warning_triangle_white.svg +5 -5
  354. package/src/assets/svgIcons/way.svg +5 -5
  355. package/src/assets/svgIcons/wifi.svg +3 -3
  356. package/src/assets/svgIcons/winter.svg +3 -3
  357. package/src/assets/svgIcons/workflow_template.svg +11 -11
  358. package/src/assets/svgIcons//360/237/223/221 Documents/ed_ac.svg" +3 -3
  359. package/src/assets/svgIcons//360/237/223/221 Documents/ed_arrow_both.svg" +7 -7
  360. package/src/assets/svgIcons//360/237/223/221 Documents/ed_arrow_left.svg" +7 -7
  361. package/src/assets/svgIcons//360/237/223/221 Documents/ed_arrow_right.svg" +7 -7
  362. package/src/assets/svgIcons//360/237/223/221 Documents/ed_battery.svg" +4 -4
  363. package/src/assets/svgIcons//360/237/223/221 Documents/ed_batteryacinverter.svg" +5 -5
  364. package/src/assets/svgIcons//360/237/223/221 Documents/ed_batteryintegratedinverter.svg" +5 -5
  365. package/src/assets/svgIcons//360/237/223/221 Documents/ed_cirquitbreaker.svg" +6 -6
  366. package/src/assets/svgIcons//360/237/223/221 Documents/ed_cirquitbreaker_magnetic.svg" +9 -9
  367. package/src/assets/svgIcons//360/237/223/221 Documents/ed_cirquitbreaker_thermal.svg" +5 -5
  368. package/src/assets/svgIcons//360/237/223/221 Documents/ed_cirquitbreaker_thermal_magnetic.svg" +10 -10
  369. package/src/assets/svgIcons//360/237/223/221 Documents/ed_consumption.svg" +5 -5
  370. package/src/assets/svgIcons//360/237/223/221 Documents/ed_dc.svg" +3 -3
  371. package/src/assets/svgIcons//360/237/223/221 Documents/ed_disconnector.svg" +5 -5
  372. package/src/assets/svgIcons//360/237/223/221 Documents/ed_disconnector_fuse.svg" +6 -6
  373. package/src/assets/svgIcons//360/237/223/221 Documents/ed_disconnector_fuse_switch.svg" +7 -7
  374. package/src/assets/svgIcons//360/237/223/221 Documents/ed_disconnector_loadbreak_switch.svg" +7 -7
  375. package/src/assets/svgIcons//360/237/223/221 Documents/ed_disconnector_switch.svg" +6 -6
  376. package/src/assets/svgIcons//360/237/223/221 Documents/ed_disconnector_switch_auto_release.svg" +7 -7
  377. package/src/assets/svgIcons//360/237/223/221 Documents/ed_energymanagement_rectangle.svg" +3 -3
  378. package/src/assets/svgIcons//360/237/223/221 Documents/ed_evcharger.svg" +8 -8
  379. package/src/assets/svgIcons//360/237/223/221 Documents/ed_flexiblecomponent_circle.svg" +3 -3
  380. package/src/assets/svgIcons//360/237/223/221 Documents/ed_flexiblecomponent_square.svg" +3 -3
  381. package/src/assets/svgIcons//360/237/223/221 Documents/ed_fuse.svg" +4 -4
  382. package/src/assets/svgIcons//360/237/223/221 Documents/ed_ground.svg" +6 -6
  383. package/src/assets/svgIcons//360/237/223/221 Documents/ed_heatpump.svg" +4 -4
  384. package/src/assets/svgIcons//360/237/223/221 Documents/ed_icon_battery.svg" +3 -3
  385. package/src/assets/svgIcons//360/237/223/221 Documents/ed_icon_circle.svg" +3 -3
  386. package/src/assets/svgIcons//360/237/223/221 Documents/ed_icon_heatpump.svg" +3 -3
  387. package/src/assets/svgIcons//360/237/223/221 Documents/ed_icon_inverter.svg" +3 -3
  388. package/src/assets/svgIcons//360/237/223/221 Documents/ed_icon_optimizer.svg" +3 -3
  389. package/src/assets/svgIcons//360/237/223/221 Documents/ed_integratedbatteryinverter.svg" +3 -3
  390. package/src/assets/svgIcons//360/237/223/221 Documents/ed_inverter-blank.svg" +3 -3
  391. package/src/assets/svgIcons//360/237/223/221 Documents/ed_mainsconnection.svg" +3 -3
  392. package/src/assets/svgIcons//360/237/223/221 Documents/ed_meter-blank.svg" +3 -3
  393. package/src/assets/svgIcons//360/237/223/221 Documents/ed_meter_arrowleft.svg" +8 -8
  394. package/src/assets/svgIcons//360/237/223/221 Documents/ed_meter_arrowright.svg" +8 -8
  395. package/src/assets/svgIcons//360/237/223/221 Documents/ed_meter_bidirectional.svg" +8 -8
  396. package/src/assets/svgIcons//360/237/223/221 Documents/ed_networkandsystemprotection_double.svg" +15 -15
  397. package/src/assets/svgIcons//360/237/223/221 Documents/ed_networkandsystemprotection_single.svg" +10 -10
  398. package/src/assets/svgIcons//360/237/223/221 Documents/ed_pvpanel.svg" +7 -7
  399. package/src/assets/svgIcons//360/237/223/221 Documents/ed_rcd.svg" +7 -7
  400. package/src/assets/svgIcons//360/237/223/221 Documents/ed_rcd_simple.svg" +4 -4
  401. package/src/assets/svgIcons//360/237/223/221 Documents/ed_spd.svg" +9 -9
  402. package/src/assets/svgIcons//360/237/223/221 Documents/ed_stringwithoptimizer.svg" +5 -5
  403. package/src/assets/svgIcons//360/237/223/221 Documents/ed_stringwithoutoptimizer.svg" +13 -13
  404. package/src/assets/svgIcons//360/237/223/221 Documents/ed_transformer.svg" +6 -6
  405. package/src/assets/tests/__mocks__/iconCache.js +1 -1
  406. package/src/assets/tests/__mocks__/svgMock.js +1 -1
  407. package/src/assets/tests/helpers.js +12 -12
  408. package/src/assets/theme.js +688 -700
  409. package/src/components/addNewButton/AddNewButton.stories.js +17 -17
  410. package/src/components/addNewButton/addNewButton.spec.js +23 -23
  411. package/src/components/addNewButton/index.vue +66 -66
  412. package/src/components/banner/actionBanner/ActionBanner.stories.js +45 -45
  413. package/src/components/banner/actionBanner/actionBanner.spec.js +76 -76
  414. package/src/components/banner/actionBanner/index.vue +86 -86
  415. package/src/components/banner/banner/Banner.stories.js +120 -120
  416. package/src/components/banner/banner/banner.spec.js +149 -149
  417. package/src/components/banner/banner/index.vue +205 -205
  418. package/src/components/banner/infoBanner/InfoBanner.spec.js +57 -57
  419. package/src/components/banner/infoBanner/InfoBanner.stories.js +84 -84
  420. package/src/components/banner/infoBanner/index.vue +97 -97
  421. package/src/components/banner/notificationBanner/index.vue +131 -131
  422. package/src/components/barchart/BottomFields.vue +337 -253
  423. package/src/components/barchart/ChartControls.vue +113 -113
  424. package/src/components/barchart/SelectionBox.vue +150 -150
  425. package/src/components/barchart/composables/index.js +5 -5
  426. package/src/components/barchart/composables/useAxisCalculations.js +104 -104
  427. package/src/components/barchart/composables/useChartData.js +114 -114
  428. package/src/components/barchart/composables/useChartScroll.js +61 -61
  429. package/src/components/barchart/composables/useSelection.js +75 -75
  430. package/src/components/barchart/composables/useTooltip.js +125 -100
  431. package/src/components/barchart/index.vue +423 -385
  432. package/src/components/barchart/styles/bottomFields.js +80 -66
  433. package/src/components/barchart/styles/chart.js +273 -272
  434. package/src/components/barchart/styles/chartControls.js +59 -59
  435. package/src/components/buttons/buttonIcon/ButtonIcon.stories.js +167 -167
  436. package/src/components/buttons/buttonIcon/index.vue +301 -301
  437. package/src/components/buttons/closeButton/CloseButton.stories.js +25 -25
  438. package/src/components/buttons/closeButton/index.vue +62 -62
  439. package/src/components/buttons/mainButton/MainButton.stories.js +145 -145
  440. package/src/components/buttons/mainButton/index.vue +248 -256
  441. package/src/components/buttons/mainButton/mainButton.spec.js +35 -35
  442. package/src/components/buttons/splitButtons/index.vue +86 -86
  443. package/src/components/card/Card.stories.js +79 -79
  444. package/src/components/card/card.spec.js +135 -135
  445. package/src/components/card/index.vue +116 -116
  446. package/src/components/collapsableInfoText/index.vue +127 -127
  447. package/src/components/deleteIcon/DeleteIcon.stories.js +29 -29
  448. package/src/components/deleteIcon/index.vue +78 -78
  449. package/src/components/draggableCard/defaultProps.js +16 -16
  450. package/src/components/draggableCard/draggableCard.spec.js +99 -99
  451. package/src/components/draggableCard/draggableCard.stories.js +135 -135
  452. package/src/components/draggableCard/index.vue +363 -363
  453. package/src/components/draggableInputHandle/index.vue +46 -46
  454. package/src/components/dropdown/Dropdown.stories.js +53 -53
  455. package/src/components/dropdown/index.vue +138 -146
  456. package/src/components/errorMessage/errorMessage.spec.js +34 -34
  457. package/src/components/errorMessage/errorMessage.stories.js +35 -35
  458. package/src/components/errorMessage/index.vue +64 -64
  459. package/src/components/filter/filterSettings.vue +672 -672
  460. package/src/components/filter/index.vue +154 -154
  461. package/src/components/filter/parentDropdown.vue +91 -91
  462. package/src/components/filterComponent/viewFilter.vue +605 -605
  463. package/src/components/filterComponent/viewSettings.vue +281 -281
  464. package/src/components/filterComponent/viewSort.vue +330 -330
  465. package/src/components/icon/Icon.stories.js +220 -220
  466. package/src/components/icon/icon.spec.js +66 -66
  467. package/src/components/icon/iconCache.mjs +23 -23
  468. package/src/components/icon/iconCollection.vue +83 -83
  469. package/src/components/icon/index.vue +240 -240
  470. package/src/components/iconWrapper/index.vue +184 -184
  471. package/src/components/infoCard/InfoCard.stories.js +170 -170
  472. package/src/components/infoCard/defaultProps.js +7 -7
  473. package/src/components/infoCard/index.vue +172 -160
  474. package/src/components/infoCard/infoCard.spec.js +64 -64
  475. package/src/components/infoLabel/index.vue +63 -63
  476. package/src/components/infoText/constants.js +4 -4
  477. package/src/components/infoText/index.vue +650 -645
  478. package/src/components/infoText/infoText.spec.js +67 -67
  479. package/src/components/infoText/infoText.stories.js +48 -48
  480. package/src/components/infoText/placeholder.vue +225 -225
  481. package/src/components/inputs/checkbox/Checkbox.stories.js +63 -63
  482. package/src/components/inputs/checkbox/checkbox.spec.js +109 -109
  483. package/src/components/inputs/checkbox/index.vue +250 -250
  484. package/src/components/inputs/inputNumber/InputNumber.stories.js +150 -150
  485. package/src/components/inputs/inputNumber/index.vue +1088 -1006
  486. package/src/components/inputs/inputNumberQuestion/index.vue +218 -218
  487. package/src/components/inputs/inputText/InputText.stories.js +70 -70
  488. package/src/components/inputs/inputText/index.vue +478 -478
  489. package/src/components/inputs/inputText/inputText.spec.js +588 -588
  490. package/src/components/inputs/radioButton/RadioButton.stories.js +77 -77
  491. package/src/components/inputs/radioButton/defaultProps.js +31 -31
  492. package/src/components/inputs/radioButton/index.vue +336 -336
  493. package/src/components/inputs/radioButton/radioButton.spec.js +306 -306
  494. package/src/components/inputs/searchInput/SearchInput.stories.js +66 -66
  495. package/src/components/inputs/searchInput/defaultProps.js +12 -12
  496. package/src/components/inputs/searchInput/index.vue +181 -181
  497. package/src/components/inputs/searchInput/searchInput.spec.js +64 -64
  498. package/src/components/inputs/select/index.vue +1080 -1080
  499. package/src/components/inputs/select/option/index.vue +176 -176
  500. package/src/components/inputs/select/select.stories.js +58 -58
  501. package/src/components/inputs/slider/index.vue +126 -126
  502. package/src/components/inputs/switchField/index.vue +266 -266
  503. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +127 -127
  504. package/src/components/inputs/textAreaInput/index.vue +204 -204
  505. package/src/components/inputs/toggle/Toggle.stories.js +77 -77
  506. package/src/components/inputs/toggle/index.vue +322 -322
  507. package/src/components/inputs/toggle/toggle.spec.js +102 -102
  508. package/src/components/label/index.vue +98 -98
  509. package/src/components/markerItem/index.vue +95 -95
  510. package/src/components/modals/actionModal/actionModal.spec.js +52 -52
  511. package/src/components/modals/actionModal/actionModal.stories.js +53 -53
  512. package/src/components/modals/actionModal/index.vue +64 -64
  513. package/src/components/modals/infoModal/index.vue +82 -82
  514. package/src/components/modals/infoModal/infoModal.spec.js +55 -55
  515. package/src/components/modals/infoModal/infoModal.stories.js +47 -47
  516. package/src/components/modals/modal/index.vue +211 -211
  517. package/src/components/modals/modal/modal.stories.js +31 -31
  518. package/src/components/navigationTabs/index.vue +114 -114
  519. package/src/components/pageSubtitle/PageSubtitle.stories.js +58 -58
  520. package/src/components/pageSubtitle/index.vue +78 -78
  521. package/src/components/pageSubtitle/pageSubtitle.spec.js +46 -46
  522. package/src/components/pageTitle/PageTitle.stories.js +95 -95
  523. package/src/components/pageTitle/index.vue +90 -91
  524. package/src/components/pageTitle/pageTitle.spec.js +46 -46
  525. package/src/components/pagination/index.vue +148 -148
  526. package/src/components/paginationV2/index.vue +175 -175
  527. package/src/components/panelRangeInfo/index.vue +196 -196
  528. package/src/components/progressBar/index.vue +125 -116
  529. package/src/components/projectMarker/ProjectMarker.stories.js +130 -130
  530. package/src/components/projectMarker/index.vue +301 -301
  531. package/src/components/rangeSlider/Slider.vue +578 -578
  532. package/src/components/rangeSlider/index.vue +517 -517
  533. package/src/components/rangeSlider/utils/dom.js +49 -49
  534. package/src/components/rangeSlider/utils/fns.js +26 -26
  535. package/src/components/roundTabs/index.vue +107 -107
  536. package/src/components/selectedOptions/index.vue +473 -473
  537. package/src/components/selectedOptions/selectedOptions.spec.js +176 -176
  538. package/src/components/selectedOptions/selectedOptions.stories.js +253 -253
  539. package/src/components/sideMenu/index.vue +325 -325
  540. package/src/components/spinner/Spinner.stories.js +86 -86
  541. package/src/components/spinner/index.vue +129 -129
  542. package/src/components/spinner/spinner.spec.js +69 -69
  543. package/src/components/spinnerGif/SpinnerGif.stories.js +86 -86
  544. package/src/components/spinnerGif/index.vue +98 -98
  545. package/src/components/tableDropdown/TableDropdown.stories.js +192 -192
  546. package/src/components/tableDropdown/index.vue +692 -692
  547. package/src/components/tables/mainTable/MainTable.stories.js +151 -151
  548. package/src/components/tables/mainTable/exampleNested.vue +328 -328
  549. package/src/components/tables/mainTable/index.vue +523 -524
  550. package/src/components/tables/viewTable/index.vue +195 -195
  551. package/src/components/tabsHeader/TabsHeader.stories.js +142 -142
  552. package/src/components/tabsHeader/index.vue +150 -150
  553. package/src/components/threeDots/index.vue +413 -413
  554. package/src/components/videoThumbnail/index.vue +103 -103
  555. package/src/components/videoThumbnail/videoThumbnail.stories.js +106 -106
  556. package/src/helpers/currencyMapping.js +28 -28
  557. package/src/helpers/dateTimeFormatting.js +51 -51
  558. package/src/helpers/isObjectEqual.js +22 -22
  559. package/src/helpers/numberConverter.js +103 -103
  560. package/src/helpers/toLocaleNumber.js +11 -11
  561. package/src/helpers/translateLang.js +199 -199
  562. package/src/main.js +8 -8
  563. package/src/mixins/inputValidations.js +97 -97
  564. package/src/router/dynamicRoutes.js +23 -23
  565. package/src/stories/Button.stories.js +48 -48
  566. package/src/stories/Button.vue +52 -52
  567. package/src/stories/Configure.mdx +364 -364
  568. package/src/stories/Header.stories.js +41 -41
  569. package/src/stories/Header.vue +59 -59
  570. package/src/stories/Page.stories.js +30 -30
  571. package/src/stories/Page.vue +83 -83
  572. package/src/stories/button.css +30 -30
  573. package/src/stories/header.css +32 -32
  574. package/src/stories/page.css +69 -69
  575. package/src/utils/index.js +12 -12
@@ -1,1080 +1,1080 @@
1
- <template>
2
- <Container
3
- :no-relative="noRelative"
4
- :select-width="selectWidth"
5
- @mouseenter="mouseEnterHandler"
6
- @mouseleave="mouseLeaveHandler"
7
- >
8
- <InputWrapper
9
- :align-items="alignItems"
10
- :has-label="!!label && label.length > 0"
11
- :min-width="minWidth"
12
- :no-relative="noRelative"
13
- :text-center="textCenter"
14
- >
15
- <LabelWrapper
16
- v-if="label"
17
- :data-id="labelDataId"
18
- :data-qa-id="dataQaId + '_label'"
19
- :info-text-message="!!infoTextMessage || !!$slots.infoText"
20
- >
21
- <InputLabel
22
- :font-color="
23
- labelFontColor || colorMode == 'dark' || colorMode == 'transparent'
24
- ? 'white'
25
- : 'eturnityGrey'
26
- "
27
- :font-size="fontSize"
28
- >{{ label }}
29
- <OptionalLabel v-if="labelOptional">
30
- ({{ $gettext('Optional') }})</OptionalLabel
31
- >
32
- </InputLabel>
33
- <InfoText
34
- v-if="infoTextMessage || !!$slots.infoText"
35
- :align-arrow="infoTextAlignArrow"
36
- :max-width="infoTextWidth"
37
- :size="infoTextSize"
38
- :text="infoTextMessage"
39
- :width="infoTextWidth"
40
- >
41
- <slot name="infoText"></slot>
42
- </InfoText>
43
- </LabelWrapper>
44
- <SelectButtonWrapper :disabled="disabled">
45
- <SelectButton
46
- ref="select"
47
- :bg-color="
48
- buttonBgColor
49
- ? buttonBgColor
50
- : colorMode == 'dark'
51
- ? 'transparentBlack1'
52
- : colorMode == 'transparent'
53
- ? 'transparent'
54
- : 'white'
55
- "
56
- class="select-button"
57
- :color-mode="colorMode"
58
- :data-id="dataId"
59
- :data-qa-id="dataQaId"
60
- :disabled="disabled"
61
- :font-color="
62
- buttonFontColor || colorMode == 'dark' || colorMode == 'transparent'
63
- ? 'white'
64
- : 'black'
65
- "
66
- :font-size="fontSize"
67
- :has-error="hasError"
68
- :has-no-padding="isSearchBarVisible || !hasSelectButtonPadding"
69
- :height="height"
70
- :is-search-bar-visible="isSearchBarVisible"
71
- :no-relative="noRelative"
72
- :padding-left="paddingLeft"
73
- :select-height="selectHeight"
74
- :select-min-height="selectMinHeight"
75
- :select-width="selectWidth"
76
- :show-border="showBorder"
77
- :show-disabled-background="showDisabledBackground"
78
- :table-padding-left="tablePaddingLeft"
79
- :text-center="textCenter"
80
- @click="toggleDropdown"
81
- @keydown="onKeyDown"
82
- >
83
- <DraggableInputHandle
84
- v-if="isDraggable && !isSearchBarVisible"
85
- :height="selectHeight"
86
- />
87
- <InputText
88
- v-if="isSearchBarVisible"
89
- ref="searchInput"
90
- background-color="transparent"
91
- :font-color="
92
- buttonFontColor ||
93
- colorMode == 'dark' ||
94
- colorMode == 'transparent'
95
- ? 'white'
96
- : 'black'
97
- "
98
- :font-size="fontSize"
99
- input-height="34px"
100
- :input-width="computedWidth"
101
- :no-border="true"
102
- tabindex="0"
103
- :value="textSearch"
104
- @click.stop
105
- @input-change="searchChange"
106
- @keydown.stop="onKeyDown"
107
- />
108
- <Selector
109
- v-else
110
- :disabled="disabled"
111
- :padding-left="paddingLeft"
112
- :select-width="selectWidth"
113
- :show-border="showBorder"
114
- >
115
- <slot name="selector" :selected-value="selectedValue"></slot>
116
- </Selector>
117
- <Caret
118
- v-if="showCaret"
119
- class="caret_dropdown"
120
- :color-mode="colorMode"
121
- @click.stop="toggleCaretDropdown"
122
- >
123
- <Icon
124
- v-if="isDropdownOpen"
125
- :color="
126
- caretColor || colorMode == 'dark' || colorMode == 'transparent'
127
- ? 'white'
128
- : 'transparentBlack1'
129
- "
130
- name="arrow_up"
131
- :size="colorMode === 'transparent' ? '8px' : '12px'"
132
- />
133
- <Icon
134
- v-else
135
- :color="
136
- caretColor || colorMode == 'dark' || colorMode == 'transparent'
137
- ? 'white'
138
- : 'transparentBlack1'
139
- "
140
- name="arrow_down"
141
- :size="colorMode === 'transparent' ? '8px' : '12px'"
142
- />
143
- </Caret>
144
- </SelectButton>
145
- <DropdownWrapper ref="dropdownWrapperRef" :no-relative="noRelative">
146
- <Component
147
- :is="shouldUseTeleport ? 'Teleport' : 'div'"
148
- :to="shouldUseTeleport ? 'body' : undefined"
149
- >
150
- <SelectDropdown
151
- v-show="isSelectDropdownShown"
152
- ref="dropdown"
153
- :bg-color="
154
- colorMode == 'dark' || colorMode == 'transparent'
155
- ? 'black'
156
- : 'white'
157
- "
158
- class="rc-select-dropdown"
159
- :dropdown-position="dropdownPosition"
160
- :font-color="
161
- dropdownFontColor ||
162
- colorMode == 'dark' ||
163
- colorMode == 'transparent'
164
- ? 'white'
165
- : 'black'
166
- "
167
- :font-size="fontSize"
168
- :hovered-bg-color="
169
- colorMode == 'dark'
170
- ? '#000000'
171
- : colorMode == 'transparent'
172
- ? 'grey6'
173
- : dropdownBgColor
174
- "
175
- :hovered-index="hoveredIndex"
176
- :hovered-value="hoveredValue"
177
- :is-active="isActive"
178
- :is-fixed-dropdown-position="isFixedDropdownPosition"
179
- :is-parent-modal="isParentModal"
180
- :is-teleport="shouldUseTeleport"
181
- :min-width="minWidth"
182
- :no-relative="noRelative"
183
- :option-width="getOptionWidth"
184
- :selected-value="selectedValue"
185
- :style="
186
- shouldUseTeleport
187
- ? {
188
- transform: `translate(${dropdownPosition?.left}px, ${
189
- noRelative ? 'auto' : `${dropdownPosition?.top}px`
190
- })`,
191
- }
192
- : undefined
193
- "
194
- @click.stop
195
- @mouseleave="optionLeave"
196
- @option-hovered="optionHovered"
197
- @option-selected="optionSelected"
198
- >
199
- <slot name="dropdown"></slot>
200
- </SelectDropdown>
201
- </Component>
202
- </DropdownWrapper>
203
- </SelectButtonWrapper>
204
- </InputWrapper>
205
- </Container>
206
- </template>
207
-
208
- <script>
209
- //How to use it
210
- // <Select
211
- // hoverDropdown="true"
212
- // selectWidth="100%"
213
- // minWidth="220px"
214
- // optionWidth="50%"
215
- // label="that is a label"
216
- // alignItems="vertical"
217
- // label-data-id="test-label-data-id"
218
- // data-id="test-data-id"
219
- // :hasSelectButtonPadding="false"
220
- // >
221
- // <template #selector="{selectedValue}">
222
- // value selected: {{selectedValue}}
223
- // </template>
224
- // <template #dropdown>
225
- // <Option value="1">value one</Option>
226
- // <Option value="2">value two</Option>
227
- // <Option value="3">value three</Option>
228
- // <Option value="4">value four</Option>
229
- // </template>
230
- // </Select>
231
-
232
- import { Teleport, inject } from 'vue'
233
- import styled from 'vue3-styled-components'
234
- import InfoText from '../../infoText'
235
- import Icon from '../../icon'
236
- import InputText from '../inputText'
237
- import DraggableInputHandle from '../../draggableInputHandle'
238
- import { debounce } from '../../../utils'
239
-
240
- const CARET_WIDTH = '30px'
241
- const BORDER_WIDTH = '1px'
242
-
243
- const CaretAttrs = { colorMode: String }
244
- const Caret = styled('div', CaretAttrs)`
245
- display: flex;
246
- align-items: center;
247
- justify-content: center;
248
- width: ${(props) =>
249
- props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
250
- min-width: ${(props) =>
251
- props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
252
- height: 100%;
253
- align-items: center;
254
- cursor: pointer;
255
- margin-left: auto;
256
- `
257
-
258
- const selectorProps = {
259
- disabled: Boolean,
260
- selectWidth: String,
261
- paddingLeft: String,
262
- showBorder: Boolean,
263
- }
264
- const Selector = styled('div', selectorProps)`
265
- color: ${(props) => (props.disabled ? props.theme.colors.grey2 : '')};
266
- ${(props) =>
267
- props.selectWidth === '100%'
268
- ? 'width: 100%;'
269
- : `width: calc(${props.selectWidth} -
270
- (
271
- ${CARET_WIDTH} +
272
- ${props.paddingLeft}
273
- ${props.showBorder ? `+ (${BORDER_WIDTH} * 2)` : ''}
274
- )
275
- );
276
- white-space: nowrap;
277
- text-overflow: ellipsis;
278
- overflow: hidden;`}
279
- `
280
-
281
- const labelAttrs = { fontSize: String, fontColor: String }
282
- const InputLabel = styled('div', labelAttrs)`
283
- color: ${(props) =>
284
- props.theme.colors[props.fontColor]
285
- ? props.theme.colors[props.fontColor]
286
- : props.fontColor};
287
- font-size: ${(props) => props.fontSize};
288
- font-weight: 700;
289
- `
290
- const OptionalLabel = styled.span`
291
- font-weight: 300;
292
- text-transform: lowercase;
293
- `
294
- const inputProps = {
295
- selectWidth: String,
296
- optionWidth: String,
297
- noRelative: Boolean,
298
- textCenter: Boolean,
299
- }
300
- const Container = styled('div', inputProps)`
301
- width: ${(props) => props.selectWidth};
302
- position: ${(props) => (props.noRelative ? 'static' : 'relative')};
303
- display: inline-block;
304
- text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
305
- `
306
-
307
- const LabelWrapperAttrs = { infoTextMessage: Boolean }
308
- const LabelWrapper = styled('div', LabelWrapperAttrs)`
309
- display: inline-grid;
310
- grid-template-columns: ${(props) =>
311
- props.infoTextMessage ? 'auto auto' : 'auto'};
312
- grid-gap: 12px;
313
- align-items: center;
314
- justify-content: start;
315
- `
316
-
317
- const SelectButtonWrapperAttrs = {
318
- disabled: Boolean,
319
- }
320
- const SelectButtonWrapper = styled('div', SelectButtonWrapperAttrs)`
321
- ${(props) => (props.disabled ? 'cursor: not-allowed' : 'cursor: pointer')};
322
- `
323
-
324
- const selectButtonAttrs = {
325
- bgColor: String,
326
- fontColor: String,
327
- hasError: Boolean,
328
- disabled: Boolean,
329
- selectHeight: String,
330
- selectWidth: String,
331
- height: String,
332
- selectMinHeight: String,
333
- hasNoPadding: Boolean,
334
- showBorder: Boolean,
335
- paddingLeft: String,
336
- noRelative: Boolean,
337
- tablePaddingLeft: String,
338
- showDisabledBackground: Boolean,
339
- colorMode: String,
340
- isSearchBarVisible: Boolean,
341
- textCenter: Boolean,
342
- }
343
- const SelectButton = styled('div', selectButtonAttrs)`
344
- position: ${(props) => (props.noRelative ? 'static' : 'relative')};
345
- box-sizing: border-box;
346
- border-radius: 4px;
347
- max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
348
- ${(props) =>
349
- props.colorMode === 'transparent'
350
- ? props.isSearchBarVisible
351
- ? 'padding: 10px 15px 10px 5px;'
352
- : 'padding: 10px 15px;'
353
- : props.isSearchBarVisible
354
- ? ''
355
- : `padding-left: ${
356
- props.hasNoPadding
357
- ? '0'
358
- : props.tablePaddingLeft
359
- ? props.tablePaddingLeft
360
- : props.paddingLeft
361
- }`};
362
- text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
363
- min-height: ${(props) =>
364
- props.selectHeight
365
- ? props.selectHeight
366
- : props.selectMinHeight
367
- ? props.selectMinHeight
368
- : props.height
369
- ? props.height
370
- : '36px'};
371
- display: flex;
372
- align-items: center;
373
- height: ${(props) => props.selectHeight};
374
- ${({ showBorder, theme, hasError }) =>
375
- showBorder &&
376
- `
377
- border: ${BORDER_WIDTH} solid ${
378
- hasError ? theme.colors.red : theme.colors.grey4
379
- }
380
- `}
381
- opacity: ${(props) =>
382
- props.colorMode === 'transparent' && props.disabled ? '0.4' : '1'};
383
- background-color: ${(props) =>
384
- props.colorMode === 'transparent'
385
- ? 'transparent'
386
- : props.disabled && props.showDisabledBackground
387
- ? props.theme.colors.grey5
388
- : props.theme.colors[props.bgColor]
389
- ? props.theme.colors[props.bgColor]
390
- : props.bgColor} !important;
391
- color: ${(props) =>
392
- props.colorMode === 'transparent'
393
- ? props.theme.colors.white
394
- : props.disabled && props.showDisabledBackground
395
- ? props.theme.colors.black
396
- : props.theme.colors[props.fontColor]
397
- ? props.theme.colors[props.fontColor]
398
- : props.fontColor};
399
- ${(props) => (props.disabled ? 'pointer-events: none' : '')};
400
- overflow: hidden;
401
- & > .handle {
402
- border-right: ${(props) =>
403
- props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
404
- 1px solid;
405
- }
406
- `
407
- const selectDropdownAttrs = {
408
- hoveredBgColor: String,
409
- bgColor: String,
410
- fontColor: String,
411
- optionWidth: String,
412
- hoveredIndex: Number,
413
- fontSize: String,
414
- dropdownPosition: Object,
415
- hoveredValue: Number | String,
416
- selectedValue: Number | String,
417
- noRelative: Boolean,
418
- minWidth: String,
419
- isParentModal: Boolean,
420
- isFixedDropdownPosition: Boolean,
421
- isTeleport: Boolean,
422
- }
423
- const SelectDropdown = styled('div', selectDropdownAttrs)`
424
- box-sizing: border-box;
425
- z-index: ${(props) =>
426
- props.isActive ? '2' : props.isParentModal ? '9999999' : '99999'};
427
- position: ${(props) =>
428
- props.isFixedDropdownPosition ? 'fixed' : 'absolute'};
429
- top: ${(props) => (props.isTeleport ? '0px' : '4px')};
430
- left: 0px;
431
- border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
432
- border-radius: 4px;
433
- display: flex;
434
- flex-direction: column;
435
- align-items: flex-start;
436
- padding: 0px;
437
- box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
438
- width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
439
- min-width: ${(props) =>
440
- props.minWidth
441
- ? props.minWidth
442
- : props.optionWidth
443
- ? props.optionWidth
444
- : '100%'};
445
- background-color: ${(props) =>
446
- props.theme.colors[props.bgColor]
447
- ? props.theme.colors[props.bgColor]
448
- : props.bgColor};
449
- color: ${(props) =>
450
- props.theme.colors[props.fontColor]
451
- ? props.theme.colors[props.fontColor]
452
- : props.fontColor};
453
- max-height: 300px;
454
- overflow-y: auto;
455
- & > div[data-value='${(props) => props.hoveredValue}'] {
456
- background-color: ${(props) =>
457
- props.theme.colors[props.hoveredBgColor]
458
- ? props.theme.colors[props.hoveredBgColor]
459
- : props.hoveredBgColor};
460
- }
461
- font-size: ${(props) => props.fontSize};
462
- `
463
- SelectDropdown.emits = ['option-hovered', 'option-selected']
464
- const DropdownAttrs = { noRelative: Boolean }
465
- const DropdownWrapper = styled('div', DropdownAttrs)`
466
- position: ${(props) => (props.noRelative ? 'static' : 'relative')};
467
- `
468
- const inputAttrs = {
469
- alignItems: String,
470
- hasLabel: Boolean,
471
- minWidth: String,
472
- noRelative: Boolean,
473
- }
474
- const InputWrapper = styled('div', inputAttrs)`
475
- position: ${(props) => (props.noRelative ? 'static' : 'relative')};
476
- display: grid;
477
- width: 100%;
478
- min-width: ${(props) => (props.minWidth ? props.minWidth : '150px')};
479
- align-items: center;
480
- gap: 8px;
481
- grid-template-columns: ${(props) =>
482
- props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
483
- `
484
-
485
- const DROPDOWN_HEIGHT_OFFSET = 4
486
- const DROPDOWN_TOP_OFFSET = 21
487
- const MIN_OPTION_LENGTH = 5
488
-
489
- const DROPDOWN_MENU_POSITIONS = {
490
- Automatic: 'automatic',
491
- Bottom: 'bottom',
492
- }
493
-
494
- export default {
495
- name: 'RCselect',
496
-
497
- components: {
498
- SelectButton,
499
- SelectButtonWrapper,
500
- SelectDropdown,
501
- Container,
502
- InputLabel,
503
- LabelWrapper,
504
- OptionalLabel,
505
- InfoText,
506
- InputWrapper,
507
- DropdownWrapper,
508
- Icon,
509
- Caret,
510
- Selector,
511
- InputText,
512
- Teleport,
513
- DraggableInputHandle,
514
- },
515
-
516
- props: {
517
- value: {
518
- required: false,
519
- default: null,
520
- },
521
- fontSize: {
522
- required: false,
523
- default: '13px',
524
- },
525
- noRelative: {
526
- required: false,
527
- default: false,
528
- },
529
- label: {
530
- required: false,
531
- },
532
- labelOptional: {
533
- required: false,
534
- default: false,
535
- },
536
- labelDataId: {
537
- required: false,
538
- default: '',
539
- },
540
- infoTextMessage: {
541
- required: false,
542
- },
543
- selectWidth: {
544
- type: String,
545
- required: false,
546
- default: '100%',
547
- },
548
- minWidth: {
549
- required: false,
550
- },
551
- maxWidth: {
552
- required: false,
553
- },
554
- selectHeight: {
555
- type: String,
556
- required: false,
557
- default: null,
558
- },
559
- height: {
560
- required: false,
561
- default: null,
562
- },
563
- selectMinHeight: {
564
- required: false,
565
- default: '36px',
566
- },
567
- optionWidth: {
568
- required: false,
569
- default: null,
570
- },
571
- hoverDropdown: {
572
- required: false,
573
- default: false,
574
- },
575
- dropdownAutoClose: {
576
- required: false,
577
- default: false,
578
- },
579
- alignItems: {
580
- required: false,
581
- default: 'horizontal',
582
- },
583
- buttonBgColor: {
584
- required: false,
585
- },
586
- buttonFontColor: {
587
- required: false,
588
- },
589
- dropdownBgColor: {
590
- required: false,
591
- default: 'grey5',
592
- },
593
- dropdownFontColor: {
594
- required: false,
595
- },
596
- dropDownArrowVisible: {
597
- required: false,
598
- default: true,
599
- },
600
- caretColor: {
601
- required: false,
602
- },
603
- labelFontColor: {
604
- required: false,
605
- },
606
- colorMode: {
607
- required: false,
608
- default: 'light',
609
- },
610
- isSearchable: {
611
- required: false,
612
- default: true,
613
- },
614
- hasError: {
615
- required: false,
616
- default: false,
617
- },
618
- disabled: {
619
- required: false,
620
- type: Boolean,
621
- default: false,
622
- },
623
- isAutoSearch: {
624
- required: false,
625
- default: true,
626
- },
627
- showBorder: {
628
- required: false,
629
- default: true,
630
- },
631
- infoTextSize: {
632
- required: false,
633
- default: '14px',
634
- },
635
- dataId: {
636
- type: String,
637
- default: '',
638
- },
639
- dataQaId: {
640
- type: String,
641
- default: '',
642
- },
643
- hasSelectButtonPadding: {
644
- required: false,
645
- type: Boolean,
646
- default: true,
647
- },
648
- isDraggable: {
649
- type: Boolean,
650
- default: false,
651
- },
652
- leftPadding: {
653
- type: String,
654
- default: '15px',
655
- },
656
- tablePaddingLeft: {
657
- required: false,
658
- },
659
- showDisabledBackground: {
660
- required: false,
661
- default: true,
662
- },
663
- minOptionLength: {
664
- type: Number,
665
- default: MIN_OPTION_LENGTH,
666
- },
667
- dropdownMenuPosition: {
668
- type: String,
669
- default: DROPDOWN_MENU_POSITIONS.Automatic, // options: ['automatic', bottom]
670
- },
671
- infoTextWidth: {
672
- type: String,
673
- required: false,
674
- },
675
- infoTextAlignArrow: {
676
- type: String,
677
- required: false,
678
- },
679
- showCaret: {
680
- type: Boolean,
681
- required: false,
682
- default: true,
683
- },
684
- textCenter: {
685
- type: Boolean,
686
- required: false,
687
- default: false,
688
- },
689
- isFixedDropdownPosition: {
690
- type: Boolean,
691
- required: false,
692
- default: false,
693
- },
694
- shouldUseTeleport: {
695
- type: Boolean,
696
- required: false,
697
- default: true,
698
- },
699
- },
700
- setup() {
701
- const modalRef = inject('modalRef')
702
-
703
- return {
704
- modalRef,
705
- }
706
- },
707
-
708
- data() {
709
- return {
710
- selectedValue: null,
711
- paddingLeft: this.isDraggable ? '30px' : this.leftPadding,
712
- isDropdownOpen: false,
713
- isActive: false,
714
- textSearch: '',
715
- hoveredIndex: 0,
716
- isClickOutsideActive: false,
717
- dropdownPosition: {
718
- left: null,
719
- top: null,
720
- },
721
- dropdownWidth: null,
722
- hoveredValue: null,
723
- isDisplayedAtBottom: true,
724
- selectTopPosition: 0,
725
- selectAndDropdownDistance: 0,
726
- animationFrameId: null,
727
- }
728
- },
729
- computed: {
730
- optionLength() {
731
- if (this.isDropdownOpen) {
732
- return this.$refs.dropdown.$el.childElementCount > 1
733
- ? this.$refs.dropdown.$el.childElementCount
734
- : this.$refs.dropdown.$el.children[0]
735
- ? this.$refs.dropdown.$el.children[0].childElementCount
736
- : 0
737
- }
738
-
739
- return 0
740
- },
741
- isSearchBarVisible() {
742
- return (
743
- this.isSearchable &&
744
- this.optionLength >= this.minOptionLength &&
745
- this.isDropdownOpen
746
- )
747
- },
748
- computedWidth() {
749
- function removePX(item) {
750
- return Number(item.replace('px', ''))
751
- }
752
-
753
- return this.selectWidth === '100%'
754
- ? '100%'
755
- : removePX(this.selectWidth) - removePX(CARET_WIDTH) + 'px'
756
- },
757
- getOptionWidth() {
758
- if (this.optionWidth) return this.optionWidth
759
-
760
- return this.dropdownWidth
761
- },
762
- isSelectDropdownShown() {
763
- return (
764
- this.isDropdownOpen &&
765
- this.dropdownPosition.left !== null &&
766
- (!this.isSearchable || this.isSearchable)
767
- )
768
- },
769
- isMobileDevice() {
770
- const userAgent =
771
- navigator.userAgent || navigator.vendor || window.opera
772
- const touchCapable =
773
- 'ontouchstart' in window ||
774
- navigator.maxTouchPoints > 0 ||
775
- navigator.msMaxTouchPoints > 0
776
-
777
- return (
778
- /Android/i.test(userAgent) ||
779
- /iPad|iPhone|iPod/.test(userAgent) ||
780
- (/Macintosh/.test(userAgent) && touchCapable) ||
781
- /windows phone/i.test(userAgent)
782
- )
783
- },
784
- isParentModal() {
785
- return !!this.modalRef
786
- },
787
- },
788
- watch: {
789
- value(val) {
790
- this.selectedValue = val
791
- },
792
- async isDropdownOpen(val) {
793
- if (val) {
794
- this.$emit('on-dropdown-open')
795
- setTimeout(() => {
796
- this.isClickOutsideActive = true
797
- }, 10)
798
- await this.$nextTick()
799
- this.handleSetDropdownOffet()
800
- if (!this.isFixedDropdownPosition) this.calculateSelectTopPosition()
801
- } else {
802
- this.dropdownPosition.left = null
803
- if (this.animationFrameId) {
804
- cancelAnimationFrame(this.animationFrameId)
805
- this.animationFrameId = null
806
- }
807
- setTimeout(() => {
808
- this.isClickOutsideActive = false
809
- }, 10)
810
- }
811
- if (val && this.isSearchable) {
812
- this.$nextTick(() => {
813
- if (this.$refs.searchInput && !this.isMobileDevice) {
814
- this.$refs.searchInput.$el.querySelector('input').focus()
815
- }
816
- })
817
- }
818
- },
819
- isSelectDropdownShown(isShown) {
820
- if (!isShown) return
821
- // Need to wait for 1ms to make sure the dropdown menu is shown in the DOM
822
- // before getting the distance between the select and the dropdown menu
823
- setTimeout(() => {
824
- this.getDistanceBetweenSelectAndDropdownMenu()
825
- }, 100)
826
- },
827
- selectTopPosition() {
828
- this.dropdownPosition.top =
829
- this.selectTopPosition +
830
- this.$refs.select.$el.clientHeight +
831
- this.selectAndDropdownDistance
832
- },
833
- },
834
- mounted() {
835
- this.observeDropdownHeight()
836
- this.observeSelectWidth()
837
- window.addEventListener('resize', this.handleSetDropdownOffet)
838
- if (!this.isFixedDropdownPosition)
839
- document.body.addEventListener(
840
- 'scroll',
841
- this.calculateSelectTopPosition
842
- )
843
- },
844
- beforeMount() {
845
- this.selectedValue = this.value
846
- document.addEventListener('click', this.clickOutside)
847
- this.getDropdownPosition()
848
- window.removeEventListener('resize', this.handleSetDropdownOffet)
849
- if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
850
- if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
851
- if (!this.isFixedDropdownPosition) {
852
- document.body.removeEventListener(
853
- 'scroll',
854
- this.calculateSelectTopPosition
855
- )
856
- }
857
- },
858
- unmounted() {
859
- document.removeEventListener('click', this.clickOutside)
860
- },
861
- methods: {
862
- focus() {
863
- this.isActive = true
864
- },
865
- blur(e) {
866
- this.isActive = false
867
- this.$emit('blur', e)
868
- },
869
- toggleDropdown() {
870
- this.isDropdownOpen = !this.isDropdownOpen
871
- },
872
- toggleCaretDropdown() {
873
- this.isDropdownOpen = !this.isDropdownOpen
874
- },
875
- closeDropdown() {
876
- this.blur()
877
- this.clearSearch()
878
- this.isDropdownOpen = false
879
- },
880
- clearSearch() {
881
- this.textSearch = ''
882
- this.searchChange('')
883
- },
884
- optionSelected(e) {
885
- this.selectedValue = e
886
- this.closeDropdown()
887
- this.blur()
888
- this.$emit('input-change', e)
889
- },
890
- optionHovered: debounce(function (e) {
891
- this.hoveredValue = e
892
- }, 300),
893
- mouseEnterHandler() {
894
- if (this.hoverDropdown) {
895
- this.focus()
896
- this.isDropdownOpen = true
897
- }
898
- },
899
- mouseLeaveHandler() {
900
- if (this.hoverDropdown) {
901
- this.blur()
902
- }
903
- },
904
- optionLeave() {
905
- if (this.dropdownAutoClose) {
906
- this.isDropdownOpen = false
907
- }
908
- },
909
- searchChange(value) {
910
- this.textSearch = value
911
- this.$emit('search-change', value)
912
- const dropdownChildren = [...this.$refs.dropdown.$el.children]
913
- dropdownChildren.forEach((el) => {
914
- if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
915
- el.style.display = 'none'
916
-
917
- return
918
- }
919
-
920
- el.style.display = 'inherit'
921
- })
922
- },
923
- clickOutside(event) {
924
- const dropdownRef = this.$refs.dropdown
925
- if (!this.isClickOutsideActive) return
926
- if (
927
- this.$refs.select.$el == event.target ||
928
- this.$refs.select.$el.contains(event.target) ||
929
- event.target.id === 'more-button' ||
930
- event.target.closest('.options-container') ||
931
- event.target.parentNode === dropdownRef.$el ||
932
- dropdownRef.$el.contains(event.target)
933
- ) {
934
- return
935
- } else {
936
- this.closeDropdown()
937
- }
938
- },
939
- onKeyDown(e) {
940
- if (e.key == 'ArrowDown') {
941
- this.onArrowPress(1)
942
- } else if (e.key == 'ArrowUp') {
943
- this.onArrowPress(-1)
944
- } else if (e.key == 'Enter') {
945
- const optionHoveredComponent = [...this.$refs.dropdown.$el.children][
946
- (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
947
- ]
948
- this.optionSelected(optionHoveredComponent.$el.dataset.value)
949
- }
950
- },
951
- // If some part of the dropdown menu is outside viewport of the bottom of the screen,
952
- // we need to offset it and display it at the top of the select dropdown instead
953
- async getDropdownPosition() {
954
- if (
955
- !this.$refs.dropdownWrapperRef ||
956
- !this.$refs.select ||
957
- !this.$refs.dropdown
958
- ) {
959
- return
960
- }
961
- await this.$nextTick()
962
- this.isDisplayedAtBottom = await this.generateDropdownPosition()
963
- // If the dropdown menu is going to be displayed at the bottom,
964
- // we need reverify its position after a dom update (nextTick)
965
- await this.$nextTick()
966
- if (this.isDisplayedAtBottom) this.generateDropdownPosition()
967
- },
968
- async generateDropdownPosition() {
969
- const isDropdownNotCompletelyVisible =
970
- await this.isBottomOfDropdownOutOfViewport()
971
- const dropdownWrapperEl = this.$refs.dropdownWrapperRef.$el
972
- const selectButtonHeight = this.$refs.select.$el.clientHeight
973
- const dropdownHeight = this.$refs.dropdown.$el.clientHeight
974
- const dropdownWrapperRelativeHeight =
975
- dropdownWrapperEl.getBoundingClientRect().top +
976
- window.scrollY +
977
- DROPDOWN_HEIGHT_OFFSET
978
-
979
- const top =
980
- isDropdownNotCompletelyVisible ||
981
- (!isDropdownNotCompletelyVisible &&
982
- this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom)
983
- ? dropdownWrapperRelativeHeight
984
- : dropdownWrapperRelativeHeight -
985
- dropdownHeight -
986
- selectButtonHeight -
987
- DROPDOWN_TOP_OFFSET
988
- const left = this.dropdownPosition.left
989
- ? this.dropdownPosition.left
990
- : dropdownWrapperEl.getBoundingClientRect().left + window.scrollX
991
-
992
- this.dropdownPosition = { left: Math.floor(left), top: Math.floor(top) }
993
-
994
- return isDropdownNotCompletelyVisible
995
- },
996
- async isBottomOfDropdownOutOfViewport() {
997
- if (
998
- !this.$refs.dropdown ||
999
- this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom
1000
- ) {
1001
- return false
1002
- }
1003
-
1004
- await this.$nextTick()
1005
- const rect = this.$refs.dropdown.$el.getBoundingClientRect()
1006
- const windowHeight =
1007
- window.innerHeight || document.documentElement.clientHeight
1008
-
1009
- if (windowHeight <= 650) return true
1010
-
1011
- // using Math.floor because the offsets may contain decimals we are not going to consider here
1012
- return Math.floor(rect.top) + Math.floor(rect.height) <= windowHeight
1013
- },
1014
- observeDropdownHeight() {
1015
- if (!this.$refs.dropdown) return
1016
- this.dropdownResizeObserver = new ResizeObserver(() => {
1017
- this.$nextTick(() => this.getDropdownPosition())
1018
- })
1019
- this.dropdownResizeObserver.observe(this.$refs.dropdown.$el)
1020
- },
1021
- handleSetDropdownOffet() {
1022
- if (!this.$refs.select) return
1023
- this.dropdownPosition.left = Math.floor(
1024
- this.$refs.select.$el.getBoundingClientRect().left
1025
- )
1026
- this.getDropdownWidth()
1027
- },
1028
- observeSelectWidth() {
1029
- if (!this.$refs.select) return
1030
- this.selectResizeObserver = new ResizeObserver(() =>
1031
- // eslint-disable-next-line vue/valid-next-tick
1032
- this.$nextTick(() => this.getDropdownWidth())
1033
- )
1034
- this.selectResizeObserver.observe(this.$refs.dropdown.$el)
1035
- },
1036
- async getDropdownWidth() {
1037
- if (!this.$refs.select) return
1038
- await this.$nextTick()
1039
- this.dropdownWidth = `${this.$refs.select.$el.clientWidth}px`
1040
- },
1041
- onArrowPress(dir) {
1042
- let newHoveredElem
1043
- const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
1044
- `[data-value="${this.hoveredValue}"]`
1045
- )
1046
- if (currentHoveredElem) {
1047
- if (dir > 0) {
1048
- newHoveredElem = currentHoveredElem.nextElementSibling
1049
- } else {
1050
- newHoveredElem = currentHoveredElem.previousElementSibling
1051
- }
1052
- if (newHoveredElem) {
1053
- this.hoveredValue = newHoveredElem.getAttribute('data-value')
1054
- const topPos = newHoveredElem.offsetTop
1055
- this.$refs.dropdown.$el.scrollTop = topPos
1056
- }
1057
- }
1058
- },
1059
- getDistanceBetweenSelectAndDropdownMenu() {
1060
- const wholeSelectTopPosition =
1061
- this.selectTopPosition + this.$refs.select.$el.clientHeight
1062
- this.selectAndDropdownDistance =
1063
- this.dropdownPosition.top - wholeSelectTopPosition
1064
- },
1065
- calculateSelectTopPosition() {
1066
- const selectRef = this.$refs.select
1067
- if (selectRef) {
1068
- const currentTopPosition =
1069
- selectRef.$el.getBoundingClientRect().top + window.scrollY
1070
- if (this.selectTopPosition !== currentTopPosition) {
1071
- this.selectTopPosition = currentTopPosition
1072
- }
1073
- }
1074
- this.animationFrameId = requestAnimationFrame(
1075
- this.calculateSelectTopPosition
1076
- )
1077
- },
1078
- },
1079
- }
1080
- </script>
1
+ <template>
2
+ <Container
3
+ :no-relative="noRelative"
4
+ :select-width="selectWidth"
5
+ @mouseenter="mouseEnterHandler"
6
+ @mouseleave="mouseLeaveHandler"
7
+ >
8
+ <InputWrapper
9
+ :align-items="alignItems"
10
+ :has-label="!!label && label.length > 0"
11
+ :min-width="minWidth"
12
+ :no-relative="noRelative"
13
+ :text-center="textCenter"
14
+ >
15
+ <LabelWrapper
16
+ v-if="label"
17
+ :data-id="labelDataId"
18
+ :data-qa-id="dataQaId + '_label'"
19
+ :info-text-message="!!infoTextMessage || !!$slots.infoText"
20
+ >
21
+ <InputLabel
22
+ :font-color="
23
+ labelFontColor || colorMode == 'dark' || colorMode == 'transparent'
24
+ ? 'white'
25
+ : 'eturnityGrey'
26
+ "
27
+ :font-size="fontSize"
28
+ >{{ label }}
29
+ <OptionalLabel v-if="labelOptional">
30
+ ({{ $gettext('Optional') }})</OptionalLabel
31
+ >
32
+ </InputLabel>
33
+ <InfoText
34
+ v-if="infoTextMessage || !!$slots.infoText"
35
+ :align-arrow="infoTextAlignArrow"
36
+ :max-width="infoTextWidth"
37
+ :size="infoTextSize"
38
+ :text="infoTextMessage"
39
+ :width="infoTextWidth"
40
+ >
41
+ <slot name="infoText"></slot>
42
+ </InfoText>
43
+ </LabelWrapper>
44
+ <SelectButtonWrapper :disabled="disabled">
45
+ <SelectButton
46
+ ref="select"
47
+ :bg-color="
48
+ buttonBgColor
49
+ ? buttonBgColor
50
+ : colorMode == 'dark'
51
+ ? 'transparentBlack1'
52
+ : colorMode == 'transparent'
53
+ ? 'transparent'
54
+ : 'white'
55
+ "
56
+ class="select-button"
57
+ :color-mode="colorMode"
58
+ :data-id="dataId"
59
+ :data-qa-id="dataQaId"
60
+ :disabled="disabled"
61
+ :font-color="
62
+ buttonFontColor || colorMode == 'dark' || colorMode == 'transparent'
63
+ ? 'white'
64
+ : 'black'
65
+ "
66
+ :font-size="fontSize"
67
+ :has-error="hasError"
68
+ :has-no-padding="isSearchBarVisible || !hasSelectButtonPadding"
69
+ :height="height"
70
+ :is-search-bar-visible="isSearchBarVisible"
71
+ :no-relative="noRelative"
72
+ :padding-left="paddingLeft"
73
+ :select-height="selectHeight"
74
+ :select-min-height="selectMinHeight"
75
+ :select-width="selectWidth"
76
+ :show-border="showBorder"
77
+ :show-disabled-background="showDisabledBackground"
78
+ :table-padding-left="tablePaddingLeft"
79
+ :text-center="textCenter"
80
+ @click="toggleDropdown"
81
+ @keydown="onKeyDown"
82
+ >
83
+ <DraggableInputHandle
84
+ v-if="isDraggable && !isSearchBarVisible"
85
+ :height="selectHeight"
86
+ />
87
+ <InputText
88
+ v-if="isSearchBarVisible"
89
+ ref="searchInput"
90
+ background-color="transparent"
91
+ :font-color="
92
+ buttonFontColor ||
93
+ colorMode == 'dark' ||
94
+ colorMode == 'transparent'
95
+ ? 'white'
96
+ : 'black'
97
+ "
98
+ :font-size="fontSize"
99
+ input-height="34px"
100
+ :input-width="computedWidth"
101
+ :no-border="true"
102
+ tabindex="0"
103
+ :value="textSearch"
104
+ @click.stop
105
+ @input-change="searchChange"
106
+ @keydown.stop="onKeyDown"
107
+ />
108
+ <Selector
109
+ v-else
110
+ :disabled="disabled"
111
+ :padding-left="paddingLeft"
112
+ :select-width="selectWidth"
113
+ :show-border="showBorder"
114
+ >
115
+ <slot name="selector" :selected-value="selectedValue"></slot>
116
+ </Selector>
117
+ <Caret
118
+ v-if="showCaret"
119
+ class="caret_dropdown"
120
+ :color-mode="colorMode"
121
+ @click.stop="toggleCaretDropdown"
122
+ >
123
+ <Icon
124
+ v-if="isDropdownOpen"
125
+ :color="
126
+ caretColor || colorMode == 'dark' || colorMode == 'transparent'
127
+ ? 'white'
128
+ : 'transparentBlack1'
129
+ "
130
+ name="arrow_up"
131
+ :size="colorMode === 'transparent' ? '8px' : '12px'"
132
+ />
133
+ <Icon
134
+ v-else
135
+ :color="
136
+ caretColor || colorMode == 'dark' || colorMode == 'transparent'
137
+ ? 'white'
138
+ : 'transparentBlack1'
139
+ "
140
+ name="arrow_down"
141
+ :size="colorMode === 'transparent' ? '8px' : '12px'"
142
+ />
143
+ </Caret>
144
+ </SelectButton>
145
+ <DropdownWrapper ref="dropdownWrapperRef" :no-relative="noRelative">
146
+ <Component
147
+ :is="shouldUseTeleport ? 'Teleport' : 'div'"
148
+ :to="shouldUseTeleport ? 'body' : undefined"
149
+ >
150
+ <SelectDropdown
151
+ v-show="isSelectDropdownShown"
152
+ ref="dropdown"
153
+ :bg-color="
154
+ colorMode == 'dark' || colorMode == 'transparent'
155
+ ? 'black'
156
+ : 'white'
157
+ "
158
+ class="rc-select-dropdown"
159
+ :dropdown-position="dropdownPosition"
160
+ :font-color="
161
+ dropdownFontColor ||
162
+ colorMode == 'dark' ||
163
+ colorMode == 'transparent'
164
+ ? 'white'
165
+ : 'black'
166
+ "
167
+ :font-size="fontSize"
168
+ :hovered-bg-color="
169
+ colorMode == 'dark'
170
+ ? '#000000'
171
+ : colorMode == 'transparent'
172
+ ? 'grey6'
173
+ : dropdownBgColor
174
+ "
175
+ :hovered-index="hoveredIndex"
176
+ :hovered-value="hoveredValue"
177
+ :is-active="isActive"
178
+ :is-fixed-dropdown-position="isFixedDropdownPosition"
179
+ :is-parent-modal="isParentModal"
180
+ :is-teleport="shouldUseTeleport"
181
+ :min-width="minWidth"
182
+ :no-relative="noRelative"
183
+ :option-width="getOptionWidth"
184
+ :selected-value="selectedValue"
185
+ :style="
186
+ shouldUseTeleport
187
+ ? {
188
+ transform: `translate(${dropdownPosition?.left}px, ${
189
+ noRelative ? 'auto' : `${dropdownPosition?.top}px`
190
+ })`,
191
+ }
192
+ : undefined
193
+ "
194
+ @click.stop
195
+ @mouseleave="optionLeave"
196
+ @option-hovered="optionHovered"
197
+ @option-selected="optionSelected"
198
+ >
199
+ <slot name="dropdown"></slot>
200
+ </SelectDropdown>
201
+ </Component>
202
+ </DropdownWrapper>
203
+ </SelectButtonWrapper>
204
+ </InputWrapper>
205
+ </Container>
206
+ </template>
207
+
208
+ <script>
209
+ //How to use it
210
+ // <Select
211
+ // hoverDropdown="true"
212
+ // selectWidth="100%"
213
+ // minWidth="220px"
214
+ // optionWidth="50%"
215
+ // label="that is a label"
216
+ // alignItems="vertical"
217
+ // label-data-id="test-label-data-id"
218
+ // data-id="test-data-id"
219
+ // :hasSelectButtonPadding="false"
220
+ // >
221
+ // <template #selector="{selectedValue}">
222
+ // value selected: {{selectedValue}}
223
+ // </template>
224
+ // <template #dropdown>
225
+ // <Option value="1">value one</Option>
226
+ // <Option value="2">value two</Option>
227
+ // <Option value="3">value three</Option>
228
+ // <Option value="4">value four</Option>
229
+ // </template>
230
+ // </Select>
231
+
232
+ import { Teleport, inject } from 'vue'
233
+ import styled from 'vue3-styled-components'
234
+ import InfoText from '../../infoText'
235
+ import Icon from '../../icon'
236
+ import InputText from '../inputText'
237
+ import DraggableInputHandle from '../../draggableInputHandle'
238
+ import { debounce } from '../../../utils'
239
+
240
+ const CARET_WIDTH = '30px'
241
+ const BORDER_WIDTH = '1px'
242
+
243
+ const CaretAttrs = { colorMode: String }
244
+ const Caret = styled('div', CaretAttrs)`
245
+ display: flex;
246
+ align-items: center;
247
+ justify-content: center;
248
+ width: ${(props) =>
249
+ props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
250
+ min-width: ${(props) =>
251
+ props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
252
+ height: 100%;
253
+ align-items: center;
254
+ cursor: pointer;
255
+ margin-left: auto;
256
+ `
257
+
258
+ const selectorProps = {
259
+ disabled: Boolean,
260
+ selectWidth: String,
261
+ paddingLeft: String,
262
+ showBorder: Boolean,
263
+ }
264
+ const Selector = styled('div', selectorProps)`
265
+ color: ${(props) => (props.disabled ? props.theme.colors.grey2 : '')};
266
+ ${(props) =>
267
+ props.selectWidth === '100%'
268
+ ? 'width: 100%;'
269
+ : `width: calc(${props.selectWidth} -
270
+ (
271
+ ${CARET_WIDTH} +
272
+ ${props.paddingLeft}
273
+ ${props.showBorder ? `+ (${BORDER_WIDTH} * 2)` : ''}
274
+ )
275
+ );
276
+ white-space: nowrap;
277
+ text-overflow: ellipsis;
278
+ overflow: hidden;`}
279
+ `
280
+
281
+ const labelAttrs = { fontSize: String, fontColor: String }
282
+ const InputLabel = styled('div', labelAttrs)`
283
+ color: ${(props) =>
284
+ props.theme.colors[props.fontColor]
285
+ ? props.theme.colors[props.fontColor]
286
+ : props.fontColor};
287
+ font-size: ${(props) => props.fontSize};
288
+ font-weight: 700;
289
+ `
290
+ const OptionalLabel = styled.span`
291
+ font-weight: 300;
292
+ text-transform: lowercase;
293
+ `
294
+ const inputProps = {
295
+ selectWidth: String,
296
+ optionWidth: String,
297
+ noRelative: Boolean,
298
+ textCenter: Boolean,
299
+ }
300
+ const Container = styled('div', inputProps)`
301
+ width: ${(props) => props.selectWidth};
302
+ position: ${(props) => (props.noRelative ? 'static' : 'relative')};
303
+ display: inline-block;
304
+ text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
305
+ `
306
+
307
+ const LabelWrapperAttrs = { infoTextMessage: Boolean }
308
+ const LabelWrapper = styled('div', LabelWrapperAttrs)`
309
+ display: inline-grid;
310
+ grid-template-columns: ${(props) =>
311
+ props.infoTextMessage ? 'auto auto' : 'auto'};
312
+ grid-gap: 12px;
313
+ align-items: center;
314
+ justify-content: start;
315
+ `
316
+
317
+ const SelectButtonWrapperAttrs = {
318
+ disabled: Boolean,
319
+ }
320
+ const SelectButtonWrapper = styled('div', SelectButtonWrapperAttrs)`
321
+ ${(props) => (props.disabled ? 'cursor: not-allowed' : 'cursor: pointer')};
322
+ `
323
+
324
+ const selectButtonAttrs = {
325
+ bgColor: String,
326
+ fontColor: String,
327
+ hasError: Boolean,
328
+ disabled: Boolean,
329
+ selectHeight: String,
330
+ selectWidth: String,
331
+ height: String,
332
+ selectMinHeight: String,
333
+ hasNoPadding: Boolean,
334
+ showBorder: Boolean,
335
+ paddingLeft: String,
336
+ noRelative: Boolean,
337
+ tablePaddingLeft: String,
338
+ showDisabledBackground: Boolean,
339
+ colorMode: String,
340
+ isSearchBarVisible: Boolean,
341
+ textCenter: Boolean,
342
+ }
343
+ const SelectButton = styled('div', selectButtonAttrs)`
344
+ position: ${(props) => (props.noRelative ? 'static' : 'relative')};
345
+ box-sizing: border-box;
346
+ border-radius: 4px;
347
+ max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
348
+ ${(props) =>
349
+ props.colorMode === 'transparent'
350
+ ? props.isSearchBarVisible
351
+ ? 'padding: 10px 15px 10px 5px;'
352
+ : 'padding: 10px 15px;'
353
+ : props.isSearchBarVisible
354
+ ? ''
355
+ : `padding-left: ${
356
+ props.hasNoPadding
357
+ ? '0'
358
+ : props.tablePaddingLeft
359
+ ? props.tablePaddingLeft
360
+ : props.paddingLeft
361
+ }`};
362
+ text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
363
+ min-height: ${(props) =>
364
+ props.selectHeight
365
+ ? props.selectHeight
366
+ : props.selectMinHeight
367
+ ? props.selectMinHeight
368
+ : props.height
369
+ ? props.height
370
+ : '36px'};
371
+ display: flex;
372
+ align-items: center;
373
+ height: ${(props) => props.selectHeight};
374
+ ${({ showBorder, theme, hasError }) =>
375
+ showBorder &&
376
+ `
377
+ border: ${BORDER_WIDTH} solid ${
378
+ hasError ? theme.colors.red : theme.colors.grey4
379
+ }
380
+ `}
381
+ opacity: ${(props) =>
382
+ props.colorMode === 'transparent' && props.disabled ? '0.4' : '1'};
383
+ background-color: ${(props) =>
384
+ props.colorMode === 'transparent'
385
+ ? 'transparent'
386
+ : props.disabled && props.showDisabledBackground
387
+ ? props.theme.colors.grey5
388
+ : props.theme.colors[props.bgColor]
389
+ ? props.theme.colors[props.bgColor]
390
+ : props.bgColor} !important;
391
+ color: ${(props) =>
392
+ props.colorMode === 'transparent'
393
+ ? props.theme.colors.white
394
+ : props.disabled && props.showDisabledBackground
395
+ ? props.theme.colors.black
396
+ : props.theme.colors[props.fontColor]
397
+ ? props.theme.colors[props.fontColor]
398
+ : props.fontColor};
399
+ ${(props) => (props.disabled ? 'pointer-events: none' : '')};
400
+ overflow: hidden;
401
+ & > .handle {
402
+ border-right: ${(props) =>
403
+ props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
404
+ 1px solid;
405
+ }
406
+ `
407
+ const selectDropdownAttrs = {
408
+ hoveredBgColor: String,
409
+ bgColor: String,
410
+ fontColor: String,
411
+ optionWidth: String,
412
+ hoveredIndex: Number,
413
+ fontSize: String,
414
+ dropdownPosition: Object,
415
+ hoveredValue: Number | String,
416
+ selectedValue: Number | String,
417
+ noRelative: Boolean,
418
+ minWidth: String,
419
+ isParentModal: Boolean,
420
+ isFixedDropdownPosition: Boolean,
421
+ isTeleport: Boolean,
422
+ }
423
+ const SelectDropdown = styled('div', selectDropdownAttrs)`
424
+ box-sizing: border-box;
425
+ z-index: ${(props) =>
426
+ props.isActive ? '2' : props.isParentModal ? '9999999' : '99999'};
427
+ position: ${(props) =>
428
+ props.isFixedDropdownPosition ? 'fixed' : 'absolute'};
429
+ top: ${(props) => (props.isTeleport ? '0px' : '4px')};
430
+ left: 0px;
431
+ border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
432
+ border-radius: 4px;
433
+ display: flex;
434
+ flex-direction: column;
435
+ align-items: flex-start;
436
+ padding: 0px;
437
+ box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
438
+ width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
439
+ min-width: ${(props) =>
440
+ props.minWidth
441
+ ? props.minWidth
442
+ : props.optionWidth
443
+ ? props.optionWidth
444
+ : '100%'};
445
+ background-color: ${(props) =>
446
+ props.theme.colors[props.bgColor]
447
+ ? props.theme.colors[props.bgColor]
448
+ : props.bgColor};
449
+ color: ${(props) =>
450
+ props.theme.colors[props.fontColor]
451
+ ? props.theme.colors[props.fontColor]
452
+ : props.fontColor};
453
+ max-height: 300px;
454
+ overflow-y: auto;
455
+ & > div[data-value='${(props) => props.hoveredValue}'] {
456
+ background-color: ${(props) =>
457
+ props.theme.colors[props.hoveredBgColor]
458
+ ? props.theme.colors[props.hoveredBgColor]
459
+ : props.hoveredBgColor};
460
+ }
461
+ font-size: ${(props) => props.fontSize};
462
+ `
463
+ SelectDropdown.emits = ['option-hovered', 'option-selected']
464
+ const DropdownAttrs = { noRelative: Boolean }
465
+ const DropdownWrapper = styled('div', DropdownAttrs)`
466
+ position: ${(props) => (props.noRelative ? 'static' : 'relative')};
467
+ `
468
+ const inputAttrs = {
469
+ alignItems: String,
470
+ hasLabel: Boolean,
471
+ minWidth: String,
472
+ noRelative: Boolean,
473
+ }
474
+ const InputWrapper = styled('div', inputAttrs)`
475
+ position: ${(props) => (props.noRelative ? 'static' : 'relative')};
476
+ display: grid;
477
+ width: 100%;
478
+ min-width: ${(props) => (props.minWidth ? props.minWidth : '150px')};
479
+ align-items: center;
480
+ gap: 8px;
481
+ grid-template-columns: ${(props) =>
482
+ props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
483
+ `
484
+
485
+ const DROPDOWN_HEIGHT_OFFSET = 4
486
+ const DROPDOWN_TOP_OFFSET = 21
487
+ const MIN_OPTION_LENGTH = 5
488
+
489
+ const DROPDOWN_MENU_POSITIONS = {
490
+ Automatic: 'automatic',
491
+ Bottom: 'bottom',
492
+ }
493
+
494
+ export default {
495
+ name: 'RCselect',
496
+
497
+ components: {
498
+ SelectButton,
499
+ SelectButtonWrapper,
500
+ SelectDropdown,
501
+ Container,
502
+ InputLabel,
503
+ LabelWrapper,
504
+ OptionalLabel,
505
+ InfoText,
506
+ InputWrapper,
507
+ DropdownWrapper,
508
+ Icon,
509
+ Caret,
510
+ Selector,
511
+ InputText,
512
+ Teleport,
513
+ DraggableInputHandle,
514
+ },
515
+
516
+ props: {
517
+ value: {
518
+ required: false,
519
+ default: null,
520
+ },
521
+ fontSize: {
522
+ required: false,
523
+ default: '13px',
524
+ },
525
+ noRelative: {
526
+ required: false,
527
+ default: false,
528
+ },
529
+ label: {
530
+ required: false,
531
+ },
532
+ labelOptional: {
533
+ required: false,
534
+ default: false,
535
+ },
536
+ labelDataId: {
537
+ required: false,
538
+ default: '',
539
+ },
540
+ infoTextMessage: {
541
+ required: false,
542
+ },
543
+ selectWidth: {
544
+ type: String,
545
+ required: false,
546
+ default: '100%',
547
+ },
548
+ minWidth: {
549
+ required: false,
550
+ },
551
+ maxWidth: {
552
+ required: false,
553
+ },
554
+ selectHeight: {
555
+ type: String,
556
+ required: false,
557
+ default: null,
558
+ },
559
+ height: {
560
+ required: false,
561
+ default: null,
562
+ },
563
+ selectMinHeight: {
564
+ required: false,
565
+ default: '36px',
566
+ },
567
+ optionWidth: {
568
+ required: false,
569
+ default: null,
570
+ },
571
+ hoverDropdown: {
572
+ required: false,
573
+ default: false,
574
+ },
575
+ dropdownAutoClose: {
576
+ required: false,
577
+ default: false,
578
+ },
579
+ alignItems: {
580
+ required: false,
581
+ default: 'horizontal',
582
+ },
583
+ buttonBgColor: {
584
+ required: false,
585
+ },
586
+ buttonFontColor: {
587
+ required: false,
588
+ },
589
+ dropdownBgColor: {
590
+ required: false,
591
+ default: 'grey5',
592
+ },
593
+ dropdownFontColor: {
594
+ required: false,
595
+ },
596
+ dropDownArrowVisible: {
597
+ required: false,
598
+ default: true,
599
+ },
600
+ caretColor: {
601
+ required: false,
602
+ },
603
+ labelFontColor: {
604
+ required: false,
605
+ },
606
+ colorMode: {
607
+ required: false,
608
+ default: 'light',
609
+ },
610
+ isSearchable: {
611
+ required: false,
612
+ default: true,
613
+ },
614
+ hasError: {
615
+ required: false,
616
+ default: false,
617
+ },
618
+ disabled: {
619
+ required: false,
620
+ type: Boolean,
621
+ default: false,
622
+ },
623
+ isAutoSearch: {
624
+ required: false,
625
+ default: true,
626
+ },
627
+ showBorder: {
628
+ required: false,
629
+ default: true,
630
+ },
631
+ infoTextSize: {
632
+ required: false,
633
+ default: '14px',
634
+ },
635
+ dataId: {
636
+ type: String,
637
+ default: '',
638
+ },
639
+ dataQaId: {
640
+ type: String,
641
+ default: '',
642
+ },
643
+ hasSelectButtonPadding: {
644
+ required: false,
645
+ type: Boolean,
646
+ default: true,
647
+ },
648
+ isDraggable: {
649
+ type: Boolean,
650
+ default: false,
651
+ },
652
+ leftPadding: {
653
+ type: String,
654
+ default: '15px',
655
+ },
656
+ tablePaddingLeft: {
657
+ required: false,
658
+ },
659
+ showDisabledBackground: {
660
+ required: false,
661
+ default: true,
662
+ },
663
+ minOptionLength: {
664
+ type: Number,
665
+ default: MIN_OPTION_LENGTH,
666
+ },
667
+ dropdownMenuPosition: {
668
+ type: String,
669
+ default: DROPDOWN_MENU_POSITIONS.Automatic, // options: ['automatic', bottom]
670
+ },
671
+ infoTextWidth: {
672
+ type: String,
673
+ required: false,
674
+ },
675
+ infoTextAlignArrow: {
676
+ type: String,
677
+ required: false,
678
+ },
679
+ showCaret: {
680
+ type: Boolean,
681
+ required: false,
682
+ default: true,
683
+ },
684
+ textCenter: {
685
+ type: Boolean,
686
+ required: false,
687
+ default: false,
688
+ },
689
+ isFixedDropdownPosition: {
690
+ type: Boolean,
691
+ required: false,
692
+ default: false,
693
+ },
694
+ shouldUseTeleport: {
695
+ type: Boolean,
696
+ required: false,
697
+ default: true,
698
+ },
699
+ },
700
+ setup() {
701
+ const modalRef = inject('modalRef')
702
+
703
+ return {
704
+ modalRef,
705
+ }
706
+ },
707
+
708
+ data() {
709
+ return {
710
+ selectedValue: null,
711
+ paddingLeft: this.isDraggable ? '30px' : this.leftPadding,
712
+ isDropdownOpen: false,
713
+ isActive: false,
714
+ textSearch: '',
715
+ hoveredIndex: 0,
716
+ isClickOutsideActive: false,
717
+ dropdownPosition: {
718
+ left: null,
719
+ top: null,
720
+ },
721
+ dropdownWidth: null,
722
+ hoveredValue: null,
723
+ isDisplayedAtBottom: true,
724
+ selectTopPosition: 0,
725
+ selectAndDropdownDistance: 0,
726
+ animationFrameId: null,
727
+ }
728
+ },
729
+ computed: {
730
+ optionLength() {
731
+ if (this.isDropdownOpen) {
732
+ return this.$refs.dropdown.$el.childElementCount > 1
733
+ ? this.$refs.dropdown.$el.childElementCount
734
+ : this.$refs.dropdown.$el.children[0]
735
+ ? this.$refs.dropdown.$el.children[0].childElementCount
736
+ : 0
737
+ }
738
+
739
+ return 0
740
+ },
741
+ isSearchBarVisible() {
742
+ return (
743
+ this.isSearchable &&
744
+ this.optionLength >= this.minOptionLength &&
745
+ this.isDropdownOpen
746
+ )
747
+ },
748
+ computedWidth() {
749
+ function removePX(item) {
750
+ return Number(item.replace('px', ''))
751
+ }
752
+
753
+ return this.selectWidth === '100%'
754
+ ? '100%'
755
+ : removePX(this.selectWidth) - removePX(CARET_WIDTH) + 'px'
756
+ },
757
+ getOptionWidth() {
758
+ if (this.optionWidth) return this.optionWidth
759
+
760
+ return this.dropdownWidth
761
+ },
762
+ isSelectDropdownShown() {
763
+ return (
764
+ this.isDropdownOpen &&
765
+ this.dropdownPosition.left !== null &&
766
+ (!this.isSearchable || this.isSearchable)
767
+ )
768
+ },
769
+ isMobileDevice() {
770
+ const userAgent =
771
+ navigator.userAgent || navigator.vendor || window.opera
772
+ const touchCapable =
773
+ 'ontouchstart' in window ||
774
+ navigator.maxTouchPoints > 0 ||
775
+ navigator.msMaxTouchPoints > 0
776
+
777
+ return (
778
+ /Android/i.test(userAgent) ||
779
+ /iPad|iPhone|iPod/.test(userAgent) ||
780
+ (/Macintosh/.test(userAgent) && touchCapable) ||
781
+ /windows phone/i.test(userAgent)
782
+ )
783
+ },
784
+ isParentModal() {
785
+ return !!this.modalRef
786
+ },
787
+ },
788
+ watch: {
789
+ value(val) {
790
+ this.selectedValue = val
791
+ },
792
+ async isDropdownOpen(val) {
793
+ if (val) {
794
+ this.$emit('on-dropdown-open')
795
+ setTimeout(() => {
796
+ this.isClickOutsideActive = true
797
+ }, 10)
798
+ await this.$nextTick()
799
+ this.handleSetDropdownOffet()
800
+ if (!this.isFixedDropdownPosition) this.calculateSelectTopPosition()
801
+ } else {
802
+ this.dropdownPosition.left = null
803
+ if (this.animationFrameId) {
804
+ cancelAnimationFrame(this.animationFrameId)
805
+ this.animationFrameId = null
806
+ }
807
+ setTimeout(() => {
808
+ this.isClickOutsideActive = false
809
+ }, 10)
810
+ }
811
+ if (val && this.isSearchable) {
812
+ this.$nextTick(() => {
813
+ if (this.$refs.searchInput && !this.isMobileDevice) {
814
+ this.$refs.searchInput.$el.querySelector('input').focus()
815
+ }
816
+ })
817
+ }
818
+ },
819
+ isSelectDropdownShown(isShown) {
820
+ if (!isShown) return
821
+ // Need to wait for 1ms to make sure the dropdown menu is shown in the DOM
822
+ // before getting the distance between the select and the dropdown menu
823
+ setTimeout(() => {
824
+ this.getDistanceBetweenSelectAndDropdownMenu()
825
+ }, 100)
826
+ },
827
+ selectTopPosition() {
828
+ this.dropdownPosition.top =
829
+ this.selectTopPosition +
830
+ this.$refs.select.$el.clientHeight +
831
+ this.selectAndDropdownDistance
832
+ },
833
+ },
834
+ mounted() {
835
+ this.observeDropdownHeight()
836
+ this.observeSelectWidth()
837
+ window.addEventListener('resize', this.handleSetDropdownOffet)
838
+ if (!this.isFixedDropdownPosition)
839
+ document.body.addEventListener(
840
+ 'scroll',
841
+ this.calculateSelectTopPosition
842
+ )
843
+ },
844
+ beforeMount() {
845
+ this.selectedValue = this.value
846
+ document.addEventListener('click', this.clickOutside)
847
+ this.getDropdownPosition()
848
+ window.removeEventListener('resize', this.handleSetDropdownOffet)
849
+ if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
850
+ if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
851
+ if (!this.isFixedDropdownPosition) {
852
+ document.body.removeEventListener(
853
+ 'scroll',
854
+ this.calculateSelectTopPosition
855
+ )
856
+ }
857
+ },
858
+ unmounted() {
859
+ document.removeEventListener('click', this.clickOutside)
860
+ },
861
+ methods: {
862
+ focus() {
863
+ this.isActive = true
864
+ },
865
+ blur(e) {
866
+ this.isActive = false
867
+ this.$emit('blur', e)
868
+ },
869
+ toggleDropdown() {
870
+ this.isDropdownOpen = !this.isDropdownOpen
871
+ },
872
+ toggleCaretDropdown() {
873
+ this.isDropdownOpen = !this.isDropdownOpen
874
+ },
875
+ closeDropdown() {
876
+ this.blur()
877
+ this.clearSearch()
878
+ this.isDropdownOpen = false
879
+ },
880
+ clearSearch() {
881
+ this.textSearch = ''
882
+ this.searchChange('')
883
+ },
884
+ optionSelected(e) {
885
+ this.selectedValue = e
886
+ this.closeDropdown()
887
+ this.blur()
888
+ this.$emit('input-change', e)
889
+ },
890
+ optionHovered: debounce(function (e) {
891
+ this.hoveredValue = e
892
+ }, 300),
893
+ mouseEnterHandler() {
894
+ if (this.hoverDropdown) {
895
+ this.focus()
896
+ this.isDropdownOpen = true
897
+ }
898
+ },
899
+ mouseLeaveHandler() {
900
+ if (this.hoverDropdown) {
901
+ this.blur()
902
+ }
903
+ },
904
+ optionLeave() {
905
+ if (this.dropdownAutoClose) {
906
+ this.isDropdownOpen = false
907
+ }
908
+ },
909
+ searchChange(value) {
910
+ this.textSearch = value
911
+ this.$emit('search-change', value)
912
+ const dropdownChildren = [...this.$refs.dropdown.$el.children]
913
+ dropdownChildren.forEach((el) => {
914
+ if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
915
+ el.style.display = 'none'
916
+
917
+ return
918
+ }
919
+
920
+ el.style.display = 'inherit'
921
+ })
922
+ },
923
+ clickOutside(event) {
924
+ const dropdownRef = this.$refs.dropdown
925
+ if (!this.isClickOutsideActive) return
926
+ if (
927
+ this.$refs.select.$el == event.target ||
928
+ this.$refs.select.$el.contains(event.target) ||
929
+ event.target.id === 'more-button' ||
930
+ event.target.closest('.options-container') ||
931
+ event.target.parentNode === dropdownRef.$el ||
932
+ dropdownRef.$el.contains(event.target)
933
+ ) {
934
+ return
935
+ } else {
936
+ this.closeDropdown()
937
+ }
938
+ },
939
+ onKeyDown(e) {
940
+ if (e.key == 'ArrowDown') {
941
+ this.onArrowPress(1)
942
+ } else if (e.key == 'ArrowUp') {
943
+ this.onArrowPress(-1)
944
+ } else if (e.key == 'Enter') {
945
+ const optionHoveredComponent = [...this.$refs.dropdown.$el.children][
946
+ (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
947
+ ]
948
+ this.optionSelected(optionHoveredComponent.$el.dataset.value)
949
+ }
950
+ },
951
+ // If some part of the dropdown menu is outside viewport of the bottom of the screen,
952
+ // we need to offset it and display it at the top of the select dropdown instead
953
+ async getDropdownPosition() {
954
+ if (
955
+ !this.$refs.dropdownWrapperRef ||
956
+ !this.$refs.select ||
957
+ !this.$refs.dropdown
958
+ ) {
959
+ return
960
+ }
961
+ await this.$nextTick()
962
+ this.isDisplayedAtBottom = await this.generateDropdownPosition()
963
+ // If the dropdown menu is going to be displayed at the bottom,
964
+ // we need reverify its position after a dom update (nextTick)
965
+ await this.$nextTick()
966
+ if (this.isDisplayedAtBottom) this.generateDropdownPosition()
967
+ },
968
+ async generateDropdownPosition() {
969
+ const isDropdownNotCompletelyVisible =
970
+ await this.isBottomOfDropdownOutOfViewport()
971
+ const dropdownWrapperEl = this.$refs.dropdownWrapperRef.$el
972
+ const selectButtonHeight = this.$refs.select.$el.clientHeight
973
+ const dropdownHeight = this.$refs.dropdown.$el.clientHeight
974
+ const dropdownWrapperRelativeHeight =
975
+ dropdownWrapperEl.getBoundingClientRect().top +
976
+ window.scrollY +
977
+ DROPDOWN_HEIGHT_OFFSET
978
+
979
+ const top =
980
+ isDropdownNotCompletelyVisible ||
981
+ (!isDropdownNotCompletelyVisible &&
982
+ this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom)
983
+ ? dropdownWrapperRelativeHeight
984
+ : dropdownWrapperRelativeHeight -
985
+ dropdownHeight -
986
+ selectButtonHeight -
987
+ DROPDOWN_TOP_OFFSET
988
+ const left = this.dropdownPosition.left
989
+ ? this.dropdownPosition.left
990
+ : dropdownWrapperEl.getBoundingClientRect().left + window.scrollX
991
+
992
+ this.dropdownPosition = { left: Math.floor(left), top: Math.floor(top) }
993
+
994
+ return isDropdownNotCompletelyVisible
995
+ },
996
+ async isBottomOfDropdownOutOfViewport() {
997
+ if (
998
+ !this.$refs.dropdown ||
999
+ this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom
1000
+ ) {
1001
+ return false
1002
+ }
1003
+
1004
+ await this.$nextTick()
1005
+ const rect = this.$refs.dropdown.$el.getBoundingClientRect()
1006
+ const windowHeight =
1007
+ window.innerHeight || document.documentElement.clientHeight
1008
+
1009
+ if (windowHeight <= 650) return true
1010
+
1011
+ // using Math.floor because the offsets may contain decimals we are not going to consider here
1012
+ return Math.floor(rect.top) + Math.floor(rect.height) <= windowHeight
1013
+ },
1014
+ observeDropdownHeight() {
1015
+ if (!this.$refs.dropdown) return
1016
+ this.dropdownResizeObserver = new ResizeObserver(() => {
1017
+ this.$nextTick(() => this.getDropdownPosition())
1018
+ })
1019
+ this.dropdownResizeObserver.observe(this.$refs.dropdown.$el)
1020
+ },
1021
+ handleSetDropdownOffet() {
1022
+ if (!this.$refs.select) return
1023
+ this.dropdownPosition.left = Math.floor(
1024
+ this.$refs.select.$el.getBoundingClientRect().left
1025
+ )
1026
+ this.getDropdownWidth()
1027
+ },
1028
+ observeSelectWidth() {
1029
+ if (!this.$refs.select) return
1030
+ this.selectResizeObserver = new ResizeObserver(() =>
1031
+ // eslint-disable-next-line vue/valid-next-tick
1032
+ this.$nextTick(() => this.getDropdownWidth())
1033
+ )
1034
+ this.selectResizeObserver.observe(this.$refs.dropdown.$el)
1035
+ },
1036
+ async getDropdownWidth() {
1037
+ if (!this.$refs.select) return
1038
+ await this.$nextTick()
1039
+ this.dropdownWidth = `${this.$refs.select.$el.clientWidth}px`
1040
+ },
1041
+ onArrowPress(dir) {
1042
+ let newHoveredElem
1043
+ const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
1044
+ `[data-value="${this.hoveredValue}"]`
1045
+ )
1046
+ if (currentHoveredElem) {
1047
+ if (dir > 0) {
1048
+ newHoveredElem = currentHoveredElem.nextElementSibling
1049
+ } else {
1050
+ newHoveredElem = currentHoveredElem.previousElementSibling
1051
+ }
1052
+ if (newHoveredElem) {
1053
+ this.hoveredValue = newHoveredElem.getAttribute('data-value')
1054
+ const topPos = newHoveredElem.offsetTop
1055
+ this.$refs.dropdown.$el.scrollTop = topPos
1056
+ }
1057
+ }
1058
+ },
1059
+ getDistanceBetweenSelectAndDropdownMenu() {
1060
+ const wholeSelectTopPosition =
1061
+ this.selectTopPosition + this.$refs.select.$el.clientHeight
1062
+ this.selectAndDropdownDistance =
1063
+ this.dropdownPosition.top - wholeSelectTopPosition
1064
+ },
1065
+ calculateSelectTopPosition() {
1066
+ const selectRef = this.$refs.select
1067
+ if (selectRef) {
1068
+ const currentTopPosition =
1069
+ selectRef.$el.getBoundingClientRect().top + window.scrollY
1070
+ if (this.selectTopPosition !== currentTopPosition) {
1071
+ this.selectTopPosition = currentTopPosition
1072
+ }
1073
+ }
1074
+ this.animationFrameId = requestAnimationFrame(
1075
+ this.calculateSelectTopPosition
1076
+ )
1077
+ },
1078
+ },
1079
+ }
1080
+ </script>