@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,83 +1,83 @@
1
- <template>
2
- <Wrapper>
3
- <IconWrapper v-for="iconItem in iconList" :key="iconItem.name">
4
- <div>
5
- color:{{ color }}
6
- <RCIcon
7
- :color="color"
8
- :hovered-color="hoveredColor"
9
- :name="iconItem.name"
10
- :size="size"
11
- />
12
- </div>
13
- <h3>{{ iconItem.name }}</h3>
14
- </IconWrapper>
15
- </Wrapper>
16
- </template>
17
-
18
- <script>
19
- import RCIcon from './index.vue'
20
- import styled from 'vue3-styled-components'
21
-
22
- const Wrapper = styled.div`
23
- display: block;
24
- text-align: center;
25
- justify-items: center;
26
- width: 100%;
27
- background-color: #ccc;
28
- `
29
- const IconWrapper = styled.div`
30
- display: inline-flex;
31
- flex-direction: column;
32
- background-color: white;
33
- border-radius: 6px;
34
- padding: 10px;
35
- width: 220px;
36
- text-align: center;
37
- margin: 10px;
38
- `
39
- export default {
40
- name: 'CollectionComponent',
41
- components: { RCIcon, IconWrapper, Wrapper },
42
- props: {
43
- size: { required: false, type: String, default: '30px' },
44
- color: { required: false, type: String, default: 'white' },
45
- hoveredColor: { required: false, type: String, default: 'grey' },
46
- },
47
- data() {
48
- return {
49
- iconList: [],
50
- }
51
- },
52
-
53
- // mounted() {
54
- // this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
55
- // },
56
- async mounted() {
57
- // Use import.meta.glob to import SVGs dynamically
58
- const icons = import.meta.glob('../../assets/svgIcons/*.svg')
59
-
60
- for (const path in icons) {
61
- const module = await icons[path]()
62
-
63
- this.iconList.push({
64
- pathLong: module.default,
65
- pathShort: path,
66
- name: path.replace('.svg', '').replace('../../assets/svgIcons/', ''),
67
- })
68
- }
69
- },
70
-
71
- methods: {
72
- importAll(r) {
73
- r.keys().forEach((key) =>
74
- this.iconList.push({
75
- pathLong: r(key),
76
- pathShort: key,
77
- name: key.replace('.svg', '').replace('./', ''),
78
- })
79
- )
80
- },
81
- },
82
- }
83
- </script>
1
+ <template>
2
+ <Wrapper>
3
+ <IconWrapper v-for="iconItem in iconList" :key="iconItem.name">
4
+ <div>
5
+ color:{{ color }}
6
+ <RCIcon
7
+ :color="color"
8
+ :hovered-color="hoveredColor"
9
+ :name="iconItem.name"
10
+ :size="size"
11
+ />
12
+ </div>
13
+ <h3>{{ iconItem.name }}</h3>
14
+ </IconWrapper>
15
+ </Wrapper>
16
+ </template>
17
+
18
+ <script>
19
+ import RCIcon from './index.vue'
20
+ import styled from 'vue3-styled-components'
21
+
22
+ const Wrapper = styled.div`
23
+ display: block;
24
+ text-align: center;
25
+ justify-items: center;
26
+ width: 100%;
27
+ background-color: #ccc;
28
+ `
29
+ const IconWrapper = styled.div`
30
+ display: inline-flex;
31
+ flex-direction: column;
32
+ background-color: white;
33
+ border-radius: 6px;
34
+ padding: 10px;
35
+ width: 220px;
36
+ text-align: center;
37
+ margin: 10px;
38
+ `
39
+ export default {
40
+ name: 'CollectionComponent',
41
+ components: { RCIcon, IconWrapper, Wrapper },
42
+ props: {
43
+ size: { required: false, type: String, default: '30px' },
44
+ color: { required: false, type: String, default: 'white' },
45
+ hoveredColor: { required: false, type: String, default: 'grey' },
46
+ },
47
+ data() {
48
+ return {
49
+ iconList: [],
50
+ }
51
+ },
52
+
53
+ // mounted() {
54
+ // this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
55
+ // },
56
+ async mounted() {
57
+ // Use import.meta.glob to import SVGs dynamically
58
+ const icons = import.meta.glob('../../assets/svgIcons/*.svg')
59
+
60
+ for (const path in icons) {
61
+ const module = await icons[path]()
62
+
63
+ this.iconList.push({
64
+ pathLong: module.default,
65
+ pathShort: path,
66
+ name: path.replace('.svg', '').replace('../../assets/svgIcons/', ''),
67
+ })
68
+ }
69
+ },
70
+
71
+ methods: {
72
+ importAll(r) {
73
+ r.keys().forEach((key) =>
74
+ this.iconList.push({
75
+ pathLong: r(key),
76
+ pathShort: key,
77
+ name: key.replace('.svg', '').replace('./', ''),
78
+ })
79
+ )
80
+ },
81
+ },
82
+ }
83
+ </script>
@@ -1,240 +1,240 @@
1
- <template>
2
- <Wrapper
3
- :cursor="cursor"
4
- data-test-id="icon_wrapper"
5
- :disabled="disabled"
6
- :height="height ? height : size"
7
- :width="width ? width : size"
8
- >
9
- <IconImage
10
- :animation="animation"
11
- :background-color="backgroundColor"
12
- :color="color"
13
- data-test-id="icon_image"
14
- :disable-hover="disableHover"
15
- :fill-type="fillType"
16
- :hovered-color="hoveredColor"
17
- :show-count="showCount"
18
- >
19
- <i data-test-id="icon_svg" v-html="icon.html"></i>
20
- </IconImage>
21
- <StrikedLine
22
- v-if="isStriked"
23
- :color="color"
24
- data-test-id="icon_striked_line"
25
- />
26
- <CountWrapper v-if="count > 0" data-test-id="icon_count">
27
- {{ counter }}
28
- </CountWrapper>
29
- </Wrapper>
30
- </template>
31
-
32
- <script setup>
33
- // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
34
- // How to use:
35
- //<icon
36
- // name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
37
- // color="red"
38
- // hoveredColor="blue"
39
- // size="60px" by default, this is 30px
40
- // cursor="default"
41
- // isStriked = "true"
42
- // />
43
-
44
- import { computed, onMounted, reactive, watch } from 'vue'
45
- import styled from 'vue3-styled-components'
46
- import { fetchIcon } from './iconCache.mjs'
47
-
48
- const props = defineProps({
49
- disabled: {
50
- required: false,
51
- default: false,
52
- type: Boolean,
53
- },
54
- name: {
55
- required: true,
56
- type: String,
57
- },
58
- color: {
59
- required: false,
60
- default: null,
61
- type: String,
62
- },
63
- hoveredColor: {
64
- required: false,
65
- default: null,
66
- type: String,
67
- },
68
- size: {
69
- required: false,
70
- default: '30px',
71
- type: String,
72
- },
73
- width: {
74
- type: String,
75
- required: false,
76
- default: '',
77
- },
78
- height: {
79
- type: String,
80
- required: false,
81
- default: '',
82
- },
83
- cursor: {
84
- required: false,
85
- default: null,
86
- type: String,
87
- },
88
- isStriked: {
89
- required: false,
90
- default: false,
91
- type: Boolean,
92
- },
93
- backgroundColor: {
94
- required: false,
95
- default: null,
96
- type: String,
97
- },
98
- count: {
99
- required: false,
100
- default: 0,
101
- type: Number,
102
- },
103
- animation: {
104
- required: false,
105
- default: 'none',
106
- type: String,
107
- },
108
- fillType: {
109
- required: false,
110
- default: 'fill',
111
- type: String,
112
- },
113
- disableHover: {
114
- type: Boolean,
115
- default: false,
116
- },
117
- showCount: {
118
- type: Boolean,
119
- default: false,
120
- },
121
- })
122
-
123
- const Wrapper = styled('div', {
124
- height: String,
125
- width: String,
126
- disabled: Boolean,
127
- cursor: String,
128
- })`
129
- display: flex;
130
- position: relative;
131
- align-content: center;
132
- justify-content: center;
133
- width: ${(props) => props.width};
134
- height: ${(props) => props.height};
135
- min-width: ${(props) => props.width};
136
- min-height: ${(props) => props.height};
137
- cursor: ${(props) => (props.disabled ? 'not-allowed' : props.cursor)};
138
- line-height: 0;
139
- `
140
-
141
- const CountWrapper = styled('div')`
142
- position: absolute;
143
- top: -7px;
144
- right: -7px;
145
- background-color: ${({ theme }) => theme.colors.red};
146
- color: ${({ theme }) => theme.colors.white};
147
- border-radius: 100%;
148
- width: 15px;
149
- height: 15px;
150
- display: flex;
151
- justify-content: center;
152
- align-items: center;
153
- font-size: 10px;
154
- `
155
-
156
- const StrikedLine = styled('div', { color: String })`
157
- display: flex;
158
- position: absolute;
159
- bottom: 0;
160
- left: 0;
161
- align-content: center;
162
- justify-content: center;
163
- width: 143%;
164
- height: 8%;
165
- background-color: ${({ theme, color }) => theme.colors[color] || color};
166
- min-height: 0;
167
- line-height: 0;
168
- transform-origin: 0% 100%;
169
- transform: rotate(-45deg);
170
- `
171
- const IconImageAttrs = {
172
- color: String,
173
- backgroundColor: String,
174
- hoveredColor: String,
175
- animation: String,
176
- fillType: String,
177
- disableHover: Boolean,
178
- showCount: Boolean,
179
- }
180
- const IconImage = styled('div', IconImageAttrs)`
181
- animation: ${(props) => props.animation};
182
- width: 100%;
183
- svg {
184
- width: 100%;
185
- height: 100%;
186
- background-color: ${(props) =>
187
- props.backgroundColor ? props.backgroundColor : 'transparent'};
188
- padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
189
- border-radius: ${(props) =>
190
- props.showCount ? '8px 0 0 8px' : props.backgroundColor ? '8px' : '0'};
191
- }
192
- svg path:not(.fix, .isStrokePath) {
193
- ${({ theme, color, fillType }) =>
194
- color && `${fillType}: ${theme.colors[color] || color};`}
195
- }
196
- svg .isStroke {
197
- ${({ theme, color }) =>
198
- color && `stroke: ${theme.colors[color] || color};`}
199
- }
200
- svg .isFill {
201
- ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
202
- }
203
- svg .isStrokePath:not(.fix) {
204
- ${({ theme, color }) =>
205
- color && `stroke: ${theme.colors[color] || color};`}
206
- }
207
- ${(props) =>
208
- !props.disableHover &&
209
- `
210
- &:hover svg path:not(.fix, .isStrokePath) {
211
- ${`${props.fillType}: ${props.hoveredColor || props.color};`}
212
- &:hover svg isStrokePath:not(.fix) {
213
- ${`stroke: ${props.hoveredColor || props.color};`}
214
- }
215
- &:hover + div {
216
- background-color: ${props.hoveredColor};
217
- }
218
- `}
219
-
220
- @keyframes fade {
221
- 50% {
222
- opacity: 0.3;
223
- }
224
- }
225
- `
226
-
227
- const icon = reactive({ html: '' })
228
-
229
- const loadSvg = async () => {
230
- icon.html = await fetchIcon(props.name.toLowerCase())
231
- }
232
-
233
- const counter = computed(() =>
234
- props.count > 9 ? '9+' : props.count.toString()
235
- )
236
-
237
- onMounted(() => loadSvg())
238
-
239
- watch(() => props.name, loadSvg)
240
- </script>
1
+ <template>
2
+ <Wrapper
3
+ :cursor="cursor"
4
+ data-test-id="icon_wrapper"
5
+ :disabled="disabled"
6
+ :height="height ? height : size"
7
+ :width="width ? width : size"
8
+ >
9
+ <IconImage
10
+ :animation="animation"
11
+ :background-color="backgroundColor"
12
+ :color="color"
13
+ data-test-id="icon_image"
14
+ :disable-hover="disableHover"
15
+ :fill-type="fillType"
16
+ :hovered-color="hoveredColor"
17
+ :show-count="showCount"
18
+ >
19
+ <i data-test-id="icon_svg" v-html="icon.html"></i>
20
+ </IconImage>
21
+ <StrikedLine
22
+ v-if="isStriked"
23
+ :color="color"
24
+ data-test-id="icon_striked_line"
25
+ />
26
+ <CountWrapper v-if="count > 0" data-test-id="icon_count">
27
+ {{ counter }}
28
+ </CountWrapper>
29
+ </Wrapper>
30
+ </template>
31
+
32
+ <script setup>
33
+ // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
34
+ // How to use:
35
+ //<icon
36
+ // name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
37
+ // color="red"
38
+ // hoveredColor="blue"
39
+ // size="60px" by default, this is 30px
40
+ // cursor="default"
41
+ // isStriked = "true"
42
+ // />
43
+
44
+ import { computed, onMounted, reactive, watch } from 'vue'
45
+ import styled from 'vue3-styled-components'
46
+ import { fetchIcon } from './iconCache.mjs'
47
+
48
+ const props = defineProps({
49
+ disabled: {
50
+ required: false,
51
+ default: false,
52
+ type: Boolean,
53
+ },
54
+ name: {
55
+ required: true,
56
+ type: String,
57
+ },
58
+ color: {
59
+ required: false,
60
+ default: null,
61
+ type: String,
62
+ },
63
+ hoveredColor: {
64
+ required: false,
65
+ default: null,
66
+ type: String,
67
+ },
68
+ size: {
69
+ required: false,
70
+ default: '30px',
71
+ type: String,
72
+ },
73
+ width: {
74
+ type: String,
75
+ required: false,
76
+ default: '',
77
+ },
78
+ height: {
79
+ type: String,
80
+ required: false,
81
+ default: '',
82
+ },
83
+ cursor: {
84
+ required: false,
85
+ default: null,
86
+ type: String,
87
+ },
88
+ isStriked: {
89
+ required: false,
90
+ default: false,
91
+ type: Boolean,
92
+ },
93
+ backgroundColor: {
94
+ required: false,
95
+ default: null,
96
+ type: String,
97
+ },
98
+ count: {
99
+ required: false,
100
+ default: 0,
101
+ type: Number,
102
+ },
103
+ animation: {
104
+ required: false,
105
+ default: 'none',
106
+ type: String,
107
+ },
108
+ fillType: {
109
+ required: false,
110
+ default: 'fill',
111
+ type: String,
112
+ },
113
+ disableHover: {
114
+ type: Boolean,
115
+ default: false,
116
+ },
117
+ showCount: {
118
+ type: Boolean,
119
+ default: false,
120
+ },
121
+ })
122
+
123
+ const Wrapper = styled('div', {
124
+ height: String,
125
+ width: String,
126
+ disabled: Boolean,
127
+ cursor: String,
128
+ })`
129
+ display: flex;
130
+ position: relative;
131
+ align-content: center;
132
+ justify-content: center;
133
+ width: ${(props) => props.width};
134
+ height: ${(props) => props.height};
135
+ min-width: ${(props) => props.width};
136
+ min-height: ${(props) => props.height};
137
+ cursor: ${(props) => (props.disabled ? 'not-allowed' : props.cursor)};
138
+ line-height: 0;
139
+ `
140
+
141
+ const CountWrapper = styled('div')`
142
+ position: absolute;
143
+ top: -7px;
144
+ right: -7px;
145
+ background-color: ${({ theme }) => theme.colors.red};
146
+ color: ${({ theme }) => theme.colors.white};
147
+ border-radius: 100%;
148
+ width: 15px;
149
+ height: 15px;
150
+ display: flex;
151
+ justify-content: center;
152
+ align-items: center;
153
+ font-size: 10px;
154
+ `
155
+
156
+ const StrikedLine = styled('div', { color: String })`
157
+ display: flex;
158
+ position: absolute;
159
+ bottom: 0;
160
+ left: 0;
161
+ align-content: center;
162
+ justify-content: center;
163
+ width: 143%;
164
+ height: 8%;
165
+ background-color: ${({ theme, color }) => theme.colors[color] || color};
166
+ min-height: 0;
167
+ line-height: 0;
168
+ transform-origin: 0% 100%;
169
+ transform: rotate(-45deg);
170
+ `
171
+ const IconImageAttrs = {
172
+ color: String,
173
+ backgroundColor: String,
174
+ hoveredColor: String,
175
+ animation: String,
176
+ fillType: String,
177
+ disableHover: Boolean,
178
+ showCount: Boolean,
179
+ }
180
+ const IconImage = styled('div', IconImageAttrs)`
181
+ animation: ${(props) => props.animation};
182
+ width: 100%;
183
+ svg {
184
+ width: 100%;
185
+ height: 100%;
186
+ background-color: ${(props) =>
187
+ props.backgroundColor ? props.backgroundColor : 'transparent'};
188
+ padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
189
+ border-radius: ${(props) =>
190
+ props.showCount ? '8px 0 0 8px' : props.backgroundColor ? '8px' : '0'};
191
+ }
192
+ svg path:not(.fix, .isStrokePath) {
193
+ ${({ theme, color, fillType }) =>
194
+ color && `${fillType}: ${theme.colors[color] || color};`}
195
+ }
196
+ svg .isStroke {
197
+ ${({ theme, color }) =>
198
+ color && `stroke: ${theme.colors[color] || color};`}
199
+ }
200
+ svg .isFill {
201
+ ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
202
+ }
203
+ svg .isStrokePath:not(.fix) {
204
+ ${({ theme, color }) =>
205
+ color && `stroke: ${theme.colors[color] || color};`}
206
+ }
207
+ ${(props) =>
208
+ !props.disableHover &&
209
+ `
210
+ &:hover svg path:not(.fix, .isStrokePath) {
211
+ ${`${props.fillType}: ${props.hoveredColor || props.color};`}
212
+ &:hover svg isStrokePath:not(.fix) {
213
+ ${`stroke: ${props.hoveredColor || props.color};`}
214
+ }
215
+ &:hover + div {
216
+ background-color: ${props.hoveredColor};
217
+ }
218
+ `}
219
+
220
+ @keyframes fade {
221
+ 50% {
222
+ opacity: 0.3;
223
+ }
224
+ }
225
+ `
226
+
227
+ const icon = reactive({ html: '' })
228
+
229
+ const loadSvg = async () => {
230
+ icon.html = await fetchIcon(props.name.toLowerCase())
231
+ }
232
+
233
+ const counter = computed(() =>
234
+ props.count > 9 ? '9+' : props.count.toString()
235
+ )
236
+
237
+ onMounted(() => loadSvg())
238
+
239
+ watch(() => props.name, loadSvg)
240
+ </script>