@eturnity/eturnity_reusable_components 7.39.4-EPDM-11313.0 → 7.39.4-EPDM-12383.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (356) hide show
  1. package/README.md +29 -29
  2. package/package.json +85 -85
  3. package/src/App.vue +30 -30
  4. package/src/Test.vue +128 -128
  5. package/src/assets/icons/arrow_down.svg +3 -3
  6. package/src/assets/icons/arrow_up_red.svg +3 -3
  7. package/src/assets/icons/black_spinner.svg +35 -35
  8. package/src/assets/icons/delete_icon.svg +11 -11
  9. package/src/assets/icons/delete_icon_gray.svg +11 -11
  10. package/src/assets/icons/drag_icon.svg +8 -8
  11. package/src/assets/icons/external_icon.svg +6 -6
  12. package/src/assets/icons/language_icon.svg +6 -6
  13. package/src/assets/icons/pdf_icon.svg +6 -6
  14. package/src/assets/icons/plus_button.svg +4 -4
  15. package/src/assets/icons/search_icon_black.svg +3 -3
  16. package/src/assets/icons/subposition_icon.svg +3 -3
  17. package/src/assets/icons/subposition_marker.svg +3 -3
  18. package/src/assets/icons/warning_icon.svg +3 -3
  19. package/src/assets/svgIcons/2d_active.svg +7 -7
  20. package/src/assets/svgIcons/2d_inactive.svg +8 -8
  21. package/src/assets/svgIcons/3d_active.svg +7 -7
  22. package/src/assets/svgIcons/3d_inactive.svg +8 -8
  23. package/src/assets/svgIcons/_readme.md +7 -7
  24. package/src/assets/svgIcons/accept.svg +5 -5
  25. package/src/assets/svgIcons/activate_panels_active.svg +22 -22
  26. package/src/assets/svgIcons/activate_panels_inactive.svg +20 -20
  27. package/src/assets/svgIcons/add_icon-1.svg +3 -3
  28. package/src/assets/svgIcons/add_icon.svg +4 -4
  29. package/src/assets/svgIcons/address_book.svg +3 -3
  30. package/src/assets/svgIcons/adjust_roof.svg +6 -6
  31. package/src/assets/svgIcons/after_sale_as_a_service.svg +6 -6
  32. package/src/assets/svgIcons/all_good.svg +3 -3
  33. package/src/assets/svgIcons/angle_active.svg +5 -5
  34. package/src/assets/svgIcons/angle_inactive.svg +4 -4
  35. package/src/assets/svgIcons/area_active.svg +11 -11
  36. package/src/assets/svgIcons/area_inactive.svg +26 -26
  37. package/src/assets/svgIcons/areas_tool.svg +14 -14
  38. package/src/assets/svgIcons/arrow_down.svg +3 -3
  39. package/src/assets/svgIcons/arrow_left.svg +4 -4
  40. package/src/assets/svgIcons/arrow_right.svg +4 -4
  41. package/src/assets/svgIcons/arrow_up.svg +3 -3
  42. package/src/assets/svgIcons/attachment.svg +3 -3
  43. package/src/assets/svgIcons/base_layer.svg +3 -3
  44. package/src/assets/svgIcons/battery.svg +3 -3
  45. package/src/assets/svgIcons/bell.svg +3 -3
  46. package/src/assets/svgIcons/bexio.svg +4 -4
  47. package/src/assets/svgIcons/bold.svg +3 -3
  48. package/src/assets/svgIcons/bom.svg +3 -3
  49. package/src/assets/svgIcons/bom_generation.svg +10 -10
  50. package/src/assets/svgIcons/bookmaker.svg +3 -3
  51. package/src/assets/svgIcons/bubble.svg +3 -3
  52. package/src/assets/svgIcons/bug.svg +5 -5
  53. package/src/assets/svgIcons/buildings.svg +55 -55
  54. package/src/assets/svgIcons/bullet_list.svg +8 -8
  55. package/src/assets/svgIcons/calendar.svg +7 -7
  56. package/src/assets/svgIcons/calendar_icon.svg +7 -7
  57. package/src/assets/svgIcons/call.svg +3 -3
  58. package/src/assets/svgIcons/camera.svg +3 -3
  59. package/src/assets/svgIcons/car.svg +3 -3
  60. package/src/assets/svgIcons/cart.svg +3 -3
  61. package/src/assets/svgIcons/charger_icon_white.svg +44 -44
  62. package/src/assets/svgIcons/checkbox.svg +3 -3
  63. package/src/assets/svgIcons/clear_formatting.svg +7 -7
  64. package/src/assets/svgIcons/clickable_info.svg +4 -4
  65. package/src/assets/svgIcons/clip.svg +3 -3
  66. package/src/assets/svgIcons/clock.svg +17 -17
  67. package/src/assets/svgIcons/clock_full.svg +3 -3
  68. package/src/assets/svgIcons/close_for_modals,_tool_tips.svg +4 -4
  69. package/src/assets/svgIcons/co_branding.svg +5 -5
  70. package/src/assets/svgIcons/collapse.svg +4 -4
  71. package/src/assets/svgIcons/collections.svg +3 -3
  72. package/src/assets/svgIcons/component_library.svg +7 -7
  73. package/src/assets/svgIcons/consumption_tariffs.svg +43 -43
  74. package/src/assets/svgIcons/context_menu-1.svg +6 -6
  75. package/src/assets/svgIcons/context_menu-2.svg +5 -5
  76. package/src/assets/svgIcons/context_menu.svg +5 -5
  77. package/src/assets/svgIcons/context_menu_tabs.svg +5 -5
  78. package/src/assets/svgIcons/cross.svg +4 -4
  79. package/src/assets/svgIcons/current_variant.svg +4 -4
  80. package/src/assets/svgIcons/dashboard.svg +3 -3
  81. package/src/assets/svgIcons/data_transfer.svg +3 -3
  82. package/src/assets/svgIcons/deadline.svg +4 -4
  83. package/src/assets/svgIcons/deal_flow.svg +5 -5
  84. package/src/assets/svgIcons/delete.svg +4 -4
  85. package/src/assets/svgIcons/delete_area_active.svg +16 -16
  86. package/src/assets/svgIcons/delete_area_inactive.svg +15 -15
  87. package/src/assets/svgIcons/direction_active-1.svg +12 -12
  88. package/src/assets/svgIcons/direction_active.svg +5 -5
  89. package/src/assets/svgIcons/direction_arrow.svg +4 -4
  90. package/src/assets/svgIcons/direction_inactive.svg +4 -4
  91. package/src/assets/svgIcons/dislike.svg +3 -3
  92. package/src/assets/svgIcons/distance_tool.svg +8 -8
  93. package/src/assets/svgIcons/distances_active.svg +9 -9
  94. package/src/assets/svgIcons/distances_inactive.svg +8 -8
  95. package/src/assets/svgIcons/distort_tool.svg +10 -10
  96. package/src/assets/svgIcons/distort_tool2.svg +16 -16
  97. package/src/assets/svgIcons/document.svg +3 -3
  98. package/src/assets/svgIcons/documents.svg +4 -4
  99. package/src/assets/svgIcons/downarrow.svg +3 -3
  100. package/src/assets/svgIcons/download.svg +4 -4
  101. package/src/assets/svgIcons/drag_icon.svg +8 -8
  102. package/src/assets/svgIcons/draggable_corner.svg +5 -5
  103. package/src/assets/svgIcons/draw_tool.svg +3 -3
  104. package/src/assets/svgIcons/duplicate-1.svg +8 -8
  105. package/src/assets/svgIcons/duplicate-2.svg +5 -5
  106. package/src/assets/svgIcons/duplicate.svg +4 -4
  107. package/src/assets/svgIcons/e-mobility_configurator.svg +6 -6
  108. package/src/assets/svgIcons/e_signature.svg +5 -5
  109. package/src/assets/svgIcons/edit_button.svg +3 -3
  110. package/src/assets/svgIcons/electricity_tariff.svg +3 -3
  111. package/src/assets/svgIcons/email.svg +3 -3
  112. package/src/assets/svgIcons/ems-1.svg +3 -3
  113. package/src/assets/svgIcons/ems.svg +3 -3
  114. package/src/assets/svgIcons/end_of_the_list.svg +5 -5
  115. package/src/assets/svgIcons/erase.svg +4 -4
  116. package/src/assets/svgIcons/external_icon.svg +5 -5
  117. package/src/assets/svgIcons/fav_icon.svg +4 -4
  118. package/src/assets/svgIcons/finance.svg +3 -3
  119. package/src/assets/svgIcons/financing_for_pv-1.svg +5 -5
  120. package/src/assets/svgIcons/financing_for_pv-2.svg +3 -3
  121. package/src/assets/svgIcons/financing_for_pv.svg +6 -6
  122. package/src/assets/svgIcons/finish-1.svg +4 -4
  123. package/src/assets/svgIcons/finish.svg +3 -3
  124. package/src/assets/svgIcons/flatten.svg +11 -11
  125. package/src/assets/svgIcons/flatten_roof.svg +20 -20
  126. package/src/assets/svgIcons/folder.svg +3 -3
  127. package/src/assets/svgIcons/free_technology.svg +5 -5
  128. package/src/assets/svgIcons/handle.svg +5 -5
  129. package/src/assets/svgIcons/heat_calc.svg +7 -7
  130. package/src/assets/svgIcons/height_equalize.svg +3 -3
  131. package/src/assets/svgIcons/height_snap.svg +3 -3
  132. package/src/assets/svgIcons/house.svg +3 -3
  133. package/src/assets/svgIcons/house_3d-1.svg +7 -7
  134. package/src/assets/svgIcons/house_3d.svg +7 -7
  135. package/src/assets/svgIcons/inclination.svg +2 -2
  136. package/src/assets/svgIcons/info.svg +3 -3
  137. package/src/assets/svgIcons/initial_situation.svg +3 -3
  138. package/src/assets/svgIcons/integrations.svg +3 -3
  139. package/src/assets/svgIcons/intro-tour-1.svg +3 -3
  140. package/src/assets/svgIcons/intro-tour.svg +3 -3
  141. package/src/assets/svgIcons/inverter-1.svg +5 -5
  142. package/src/assets/svgIcons/inverter.svg +3 -3
  143. package/src/assets/svgIcons/italic.svg +3 -3
  144. package/src/assets/svgIcons/key.svg +3 -3
  145. package/src/assets/svgIcons/lake.svg +29 -29
  146. package/src/assets/svgIcons/layers_close.svg +4 -4
  147. package/src/assets/svgIcons/layers_open.svg +4 -4
  148. package/src/assets/svgIcons/lead_marketplace.svg +6 -6
  149. package/src/assets/svgIcons/lead_provider.svg +4 -4
  150. package/src/assets/svgIcons/length_2d.svg +2 -2
  151. package/src/assets/svgIcons/length_3d.svg +4 -4
  152. package/src/assets/svgIcons/length_calculator.svg +2 -2
  153. package/src/assets/svgIcons/length_in_2d_active.svg +12 -12
  154. package/src/assets/svgIcons/length_in_2d_inctive.svg +13 -13
  155. package/src/assets/svgIcons/light_bulb.svg +3 -3
  156. package/src/assets/svgIcons/like.svg +3 -3
  157. package/src/assets/svgIcons/line_graph.svg +3 -3
  158. package/src/assets/svgIcons/local_subsidies.svg +18 -18
  159. package/src/assets/svgIcons/location.svg +3 -3
  160. package/src/assets/svgIcons/lock.svg +3 -3
  161. package/src/assets/svgIcons/logout.svg +3 -3
  162. package/src/assets/svgIcons/loop.svg +3 -3
  163. package/src/assets/svgIcons/low-vegetation.svg +37 -37
  164. package/src/assets/svgIcons/lunch.svg +4 -4
  165. package/src/assets/svgIcons/magic_tool.svg +6 -6
  166. package/src/assets/svgIcons/map_icon.svg +5 -5
  167. package/src/assets/svgIcons/map_settings.svg +3 -3
  168. package/src/assets/svgIcons/margin_tool.svg +4 -4
  169. package/src/assets/svgIcons/meeting.svg +6 -6
  170. package/src/assets/svgIcons/move_copy.svg +4 -4
  171. package/src/assets/svgIcons/new_area_inactive.svg +11 -11
  172. package/src/assets/svgIcons/next.svg +4 -4
  173. package/src/assets/svgIcons/normal-tg.svg +30 -30
  174. package/src/assets/svgIcons/normal-vegetation.svg +53 -53
  175. package/src/assets/svgIcons/not_equal_to.svg +3 -3
  176. package/src/assets/svgIcons/numbered_list.svg +6 -6
  177. package/src/assets/svgIcons/obstacle_tool.svg +8 -8
  178. package/src/assets/svgIcons/obstacle_tool_origin.svg +3 -3
  179. package/src/assets/svgIcons/offset_tool.svg +8 -8
  180. package/src/assets/svgIcons/open-tg.svg +21 -21
  181. package/src/assets/svgIcons/outline_tool.svg +11 -11
  182. package/src/assets/svgIcons/pan_tool.svg +12 -12
  183. package/src/assets/svgIcons/panels_tool.svg +8 -8
  184. package/src/assets/svgIcons/pen_tool.svg +4 -4
  185. package/src/assets/svgIcons/picker_tool.svg +4 -4
  186. package/src/assets/svgIcons/picture.svg +3 -3
  187. package/src/assets/svgIcons/pin.svg +5 -5
  188. package/src/assets/svgIcons/presentation.svg +3 -3
  189. package/src/assets/svgIcons/previous.svg +4 -4
  190. package/src/assets/svgIcons/profile-1.svg +4 -4
  191. package/src/assets/svgIcons/profile.svg +4 -4
  192. package/src/assets/svgIcons/profitability.svg +3 -3
  193. package/src/assets/svgIcons/project_analysis.svg +4 -4
  194. package/src/assets/svgIcons/project_settings.svg +4 -4
  195. package/src/assets/svgIcons/protected-tg.svg +47 -47
  196. package/src/assets/svgIcons/pv.svg +3 -3
  197. package/src/assets/svgIcons/quotations.svg +6 -6
  198. package/src/assets/svgIcons/redo.svg +6 -6
  199. package/src/assets/svgIcons/resizer.svg +5 -5
  200. package/src/assets/svgIcons/roof_layer.svg +3 -3
  201. package/src/assets/svgIcons/rotate_tool.svg +3 -3
  202. package/src/assets/svgIcons/rotate_view.svg +5 -5
  203. package/src/assets/svgIcons/ruler_tool.svg +3 -3
  204. package/src/assets/svgIcons/run_simulation.svg +3 -3
  205. package/src/assets/svgIcons/save.svg +3 -3
  206. package/src/assets/svgIcons/scaling_tool.svg +8 -8
  207. package/src/assets/svgIcons/sea.svg +34 -34
  208. package/src/assets/svgIcons/search.svg +3 -3
  209. package/src/assets/svgIcons/security.svg +3 -3
  210. package/src/assets/svgIcons/settings.svg +3 -3
  211. package/src/assets/svgIcons/show_in_a_new_tab.svg +12 -12
  212. package/src/assets/svgIcons/smartphone.svg +4 -4
  213. package/src/assets/svgIcons/solar_calc.svg +13 -13
  214. package/src/assets/svgIcons/sorting.svg +4 -4
  215. package/src/assets/svgIcons/split.svg +12 -12
  216. package/src/assets/svgIcons/start_of_the_list.svg +5 -5
  217. package/src/assets/svgIcons/strikethrough.svg +4 -4
  218. package/src/assets/svgIcons/subscriptions.svg +3 -3
  219. package/src/assets/svgIcons/subsidies-1.svg +5 -5
  220. package/src/assets/svgIcons/subsidies-2.svg +3 -3
  221. package/src/assets/svgIcons/subsidies.svg +3 -3
  222. package/src/assets/svgIcons/subtract_icon.svg +3 -3
  223. package/src/assets/svgIcons/suitcase.svg +3 -3
  224. package/src/assets/svgIcons/summer.svg +3 -3
  225. package/src/assets/svgIcons/template_icon_not_clickable.svg +6 -6
  226. package/src/assets/svgIcons/transfer.svg +4 -4
  227. package/src/assets/svgIcons/trim_tool.svg +4 -4
  228. package/src/assets/svgIcons/truck.svg +3 -3
  229. package/src/assets/svgIcons/underlined.svg +3 -3
  230. package/src/assets/svgIcons/undo.svg +6 -6
  231. package/src/assets/svgIcons/uparrow.svg +3 -3
  232. package/src/assets/svgIcons/update.svg +3 -3
  233. package/src/assets/svgIcons/upload_avatar-1.svg +12 -12
  234. package/src/assets/svgIcons/upload_avatar.svg +5 -5
  235. package/src/assets/svgIcons/upload_image.svg +8 -8
  236. package/src/assets/svgIcons/upload_image_tool.svg +7 -7
  237. package/src/assets/svgIcons/variants.svg +6 -6
  238. package/src/assets/svgIcons/vertical_tool.svg +3 -3
  239. package/src/assets/svgIcons/virtual_storage.svg +4 -4
  240. package/src/assets/svgIcons/warning.svg +4 -4
  241. package/src/assets/svgIcons/way.svg +5 -5
  242. package/src/assets/svgIcons/wifi.svg +3 -3
  243. package/src/assets/svgIcons/winter.svg +3 -3
  244. package/src/assets/svgIcons/workflow_template.svg +11 -11
  245. package/src/assets/tests/__mocks__/iconCache.js +1 -1
  246. package/src/assets/tests/__mocks__/svgMock.js +1 -1
  247. package/src/assets/tests/helpers.js +12 -12
  248. package/src/assets/theme.js +41 -41
  249. package/src/components/addNewButton/AddNewButton.stories.js +17 -17
  250. package/src/components/addNewButton/addNewButton.spec.js +23 -23
  251. package/src/components/addNewButton/index.vue +62 -62
  252. package/src/components/banner/actionBanner/ActionBanner.stories.js +45 -45
  253. package/src/components/banner/actionBanner/actionBanner.spec.js +76 -76
  254. package/src/components/banner/actionBanner/index.vue +86 -86
  255. package/src/components/banner/banner/Banner.stories.js +64 -64
  256. package/src/components/banner/banner/banner.spec.js +149 -149
  257. package/src/components/banner/banner/index.vue +205 -205
  258. package/src/components/banner/infoBanner/index.vue +57 -57
  259. package/src/components/buttons/buttonIcon/index.vue +145 -145
  260. package/src/components/buttons/closeButton/CloseButton.stories.js +25 -25
  261. package/src/components/buttons/closeButton/index.vue +62 -62
  262. package/src/components/buttons/mainButton/MainButton.stories.js +51 -51
  263. package/src/components/buttons/mainButton/index.vue +150 -155
  264. package/src/components/buttons/mainButton/mainButton.spec.js +35 -35
  265. package/src/components/card/index.vue +96 -96
  266. package/src/components/collapsableInfoText/index.vue +127 -127
  267. package/src/components/deleteIcon/DeleteIcon.stories.js +29 -29
  268. package/src/components/deleteIcon/index.vue +78 -78
  269. package/src/components/draggableInputHandle/index.vue +46 -46
  270. package/src/components/dropdown/Dropdown.stories.js +53 -53
  271. package/src/components/dropdown/index.vue +138 -138
  272. package/src/components/errorMessage/index.vue +64 -64
  273. package/src/components/filter/filterSettings.vue +669 -669
  274. package/src/components/filter/index.vue +154 -154
  275. package/src/components/filter/parentDropdown.vue +91 -91
  276. package/src/components/icon/Icons.stories.js +41 -41
  277. package/src/components/icon/iconCache.mjs +23 -23
  278. package/src/components/icon/iconCollection.vue +82 -82
  279. package/src/components/icon/index.vue +140 -140
  280. package/src/components/iconWrapper/index.vue +179 -179
  281. package/src/components/infoCard/index.vue +40 -40
  282. package/src/components/infoText/index.vue +170 -170
  283. package/src/components/inputs/checkbox/Checkbox.stories.js +63 -63
  284. package/src/components/inputs/checkbox/checkbox.spec.js +109 -109
  285. package/src/components/inputs/checkbox/index.vue +225 -225
  286. package/src/components/inputs/inputNumber/InputNumber.stories.js +150 -150
  287. package/src/components/inputs/inputNumber/index.vue +800 -789
  288. package/src/components/inputs/inputNumberQuestion/index.vue +218 -218
  289. package/src/components/inputs/inputText/InputText.stories.js +75 -75
  290. package/src/components/inputs/inputText/index.vue +376 -376
  291. package/src/components/inputs/radioButton/RadioButton.stories.js +58 -58
  292. package/src/components/inputs/radioButton/index.vue +273 -273
  293. package/src/components/inputs/searchInput/SearchInput.stories.js +40 -40
  294. package/src/components/inputs/searchInput/index.vue +151 -151
  295. package/src/components/inputs/select/index.vue +916 -910
  296. package/src/components/inputs/select/option/index.vue +156 -156
  297. package/src/components/inputs/select/select.stories.js +58 -58
  298. package/src/components/inputs/slider/index.vue +126 -126
  299. package/src/components/inputs/switchField/index.vue +254 -254
  300. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +127 -127
  301. package/src/components/inputs/textAreaInput/index.vue +198 -198
  302. package/src/components/inputs/toggle/Toggle.stories.js +77 -77
  303. package/src/components/inputs/toggle/index.vue +317 -317
  304. package/src/components/inputs/toggle/toggle.spec.js +102 -102
  305. package/src/components/label/index.vue +99 -99
  306. package/src/components/markerItem/index.vue +88 -88
  307. package/src/components/modals/actionModal/index.vue +64 -64
  308. package/src/components/modals/infoModal/index.vue +52 -52
  309. package/src/components/modals/modal/index.vue +190 -190
  310. package/src/components/modals/modal/modal.stories.js +31 -31
  311. package/src/components/navigationTabs/index.vue +114 -114
  312. package/src/components/pageSubtitle/PageSubtitle.stories.js +59 -59
  313. package/src/components/pageSubtitle/index.vue +78 -78
  314. package/src/components/pageSubtitle/pageSubtitle.spec.js +46 -46
  315. package/src/components/pageTitle/PageTitle.stories.js +95 -95
  316. package/src/components/pageTitle/index.vue +91 -91
  317. package/src/components/pageTitle/pageTitle.spec.js +46 -46
  318. package/src/components/pagination/index.vue +148 -148
  319. package/src/components/progressBar/index.vue +125 -125
  320. package/src/components/projectMarker/index.vue +300 -300
  321. package/src/components/rangeSlider/Slider.vue +573 -573
  322. package/src/components/rangeSlider/index.vue +517 -517
  323. package/src/components/rangeSlider/utils/dom.js +49 -49
  324. package/src/components/rangeSlider/utils/fns.js +26 -26
  325. package/src/components/selectedOptions/index.vue +471 -471
  326. package/src/components/selectedOptions/selectedOptions.spec.js +176 -176
  327. package/src/components/selectedOptions/selectedOptions.stories.js +155 -155
  328. package/src/components/sideMenu/index.vue +270 -270
  329. package/src/components/spinner/Spinner.stories.js +34 -34
  330. package/src/components/spinner/index.vue +85 -85
  331. package/src/components/spinner/spinner.spec.js +69 -69
  332. package/src/components/tableDropdown/index.vue +638 -638
  333. package/src/components/tables/mainTable/exampleNested.vue +328 -328
  334. package/src/components/tables/mainTable/index.vue +510 -510
  335. package/src/components/tables/viewTable/index.vue +195 -195
  336. package/src/components/tabsHeader/index.vue +83 -83
  337. package/src/components/threeDots/index.vue +413 -413
  338. package/src/components/videoThumbnail/index.vue +103 -103
  339. package/src/components/videoThumbnail/videoThumbnail.stories.js +33 -33
  340. package/src/helpers/currencyMapping.js +28 -28
  341. package/src/helpers/numberConverter.js +103 -103
  342. package/src/helpers/translateLang.js +128 -128
  343. package/src/main.js +7 -7
  344. package/src/mixins/inputValidations.js +97 -97
  345. package/src/router/dynamicRoutes.js +23 -23
  346. package/src/stories/Button.stories.js +48 -48
  347. package/src/stories/Button.vue +52 -52
  348. package/src/stories/Configure.mdx +364 -364
  349. package/src/stories/Header.stories.js +41 -41
  350. package/src/stories/Header.vue +59 -59
  351. package/src/stories/Page.stories.js +30 -30
  352. package/src/stories/Page.vue +83 -83
  353. package/src/stories/button.css +30 -30
  354. package/src/stories/header.css +32 -32
  355. package/src/stories/page.css +69 -69
  356. package/src/utils/index.js +12 -12
@@ -1,102 +1,102 @@
1
- /* eslint-disable */
2
- import { mount } from '@vue/test-utils'
3
- import RCToggle from '@/components/inputs/toggle'
4
- import theme from '@/assets/theme'
5
-
6
- jest.mock('@/components/icon/iconCache.mjs', () => ({
7
- // need to mock this due to how jest handles import.meta
8
- fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
9
- }))
10
-
11
- describe('RCToggle.vue', () => {
12
- it('toggle is rendered and emits correct payload on change', async () => {
13
- const wrapper = mount(RCToggle, {
14
- props: { isChecked: true, label: 'Test label', disabled: false },
15
- global: {
16
- provide: {
17
- theme,
18
- },
19
- },
20
- })
21
- const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
22
-
23
- // check that the element exists
24
- expect(toggleWrapper.exists()).toBe(true)
25
- expect(toggleWrapper.attributes('checked')).toBe('true')
26
-
27
- // Log attributes to see what is rendered (commented out just for reference)
28
- // console.log('attributes', toggleWrapper.attributes())
29
- // console.log('All of the Toggles' attributes', wrapper.vm)
30
-
31
- // Test the label
32
- expect(wrapper.text()).toContain('Test label')
33
-
34
- // Test the click
35
- const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
36
- await pageWrapper.trigger('click')
37
- expect(wrapper.emitted('on-toggle-change')).toBeTruthy()
38
- const emittedEvent = wrapper.emitted('on-toggle-change')
39
- // To inspect emitted events:
40
- // console.log('Emitted events', wrapper.emitted())
41
- expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
42
- // Check the payload of the event
43
- expect(emittedEvent[0]).toEqual([false])
44
- }),
45
- it('toggle disabled does not emit anything', async () => {
46
- const wrapper = mount(RCToggle, {
47
- props: { isChecked: false, disabled: true },
48
- global: {
49
- provide: {
50
- theme,
51
- },
52
- },
53
- })
54
- const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
55
- expect(toggleWrapper.attributes('checked')).toBe('false')
56
-
57
- // Test the click
58
- const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
59
- await pageWrapper.trigger('click')
60
-
61
- // Inspect emitted events
62
- const emittedEvents = wrapper.emitted('on-toggle-change')
63
-
64
- // Verify that no events were emitted
65
- expect(emittedEvents).toBeUndefined() // No event should be emitted
66
- }),
67
- it('should toggle back and forth on multiple clicks', async () => {
68
- const wrapper = mount(RCToggle, {
69
- props: { isChecked: false, disabled: false },
70
- global: {
71
- provide: {
72
- theme,
73
- },
74
- },
75
- })
76
- const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
77
- // Initial state
78
- expect(toggleWrapper.attributes('checked')).toBe('false')
79
-
80
- // Trigger click and check events
81
- const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
82
- await pageWrapper.trigger('click')
83
- let emittedEvent = wrapper.emitted('on-toggle-change')
84
- expect(emittedEvent).toBeTruthy() // Ensure that the event was emitted
85
- expect(emittedEvent).toHaveLength(1) // Ensure that only one event was emitted
86
- expect(emittedEvent[0]).toEqual([true]) // Check the payload of the first click
87
- await wrapper.setProps({ isChecked: true }) // manually update the props
88
-
89
- // Trigger click again and check events
90
- await pageWrapper.trigger('click')
91
- emittedEvent = wrapper.emitted('on-toggle-change')
92
- expect(emittedEvent).toHaveLength(2) // Ensure that the event count has increased
93
- expect(emittedEvent[1]).toEqual([false]) // Check the payload of the second click
94
- await wrapper.setProps({ isChecked: false }) // manually update the props
95
-
96
- // Trigger click again and check events
97
- await pageWrapper.trigger('click')
98
- emittedEvent = wrapper.emitted('on-toggle-change')
99
- expect(emittedEvent).toHaveLength(3) // Ensure that the event count has increased
100
- expect(emittedEvent[2]).toEqual([true]) // Check the payload of the third click
101
- })
102
- })
1
+ /* eslint-disable */
2
+ import { mount } from '@vue/test-utils'
3
+ import RCToggle from '@/components/inputs/toggle'
4
+ import theme from '@/assets/theme'
5
+
6
+ jest.mock('@/components/icon/iconCache.mjs', () => ({
7
+ // need to mock this due to how jest handles import.meta
8
+ fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
9
+ }))
10
+
11
+ describe('RCToggle.vue', () => {
12
+ it('toggle is rendered and emits correct payload on change', async () => {
13
+ const wrapper = mount(RCToggle, {
14
+ props: { isChecked: true, label: 'Test label', disabled: false },
15
+ global: {
16
+ provide: {
17
+ theme,
18
+ },
19
+ },
20
+ })
21
+ const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
22
+
23
+ // check that the element exists
24
+ expect(toggleWrapper.exists()).toBe(true)
25
+ expect(toggleWrapper.attributes('checked')).toBe('true')
26
+
27
+ // Log attributes to see what is rendered (commented out just for reference)
28
+ // console.log('attributes', toggleWrapper.attributes())
29
+ // console.log('All of the Toggles' attributes', wrapper.vm)
30
+
31
+ // Test the label
32
+ expect(wrapper.text()).toContain('Test label')
33
+
34
+ // Test the click
35
+ const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
36
+ await pageWrapper.trigger('click')
37
+ expect(wrapper.emitted('on-toggle-change')).toBeTruthy()
38
+ const emittedEvent = wrapper.emitted('on-toggle-change')
39
+ // To inspect emitted events:
40
+ // console.log('Emitted events', wrapper.emitted())
41
+ expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
42
+ // Check the payload of the event
43
+ expect(emittedEvent[0]).toEqual([false])
44
+ }),
45
+ it('toggle disabled does not emit anything', async () => {
46
+ const wrapper = mount(RCToggle, {
47
+ props: { isChecked: false, disabled: true },
48
+ global: {
49
+ provide: {
50
+ theme,
51
+ },
52
+ },
53
+ })
54
+ const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
55
+ expect(toggleWrapper.attributes('checked')).toBe('false')
56
+
57
+ // Test the click
58
+ const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
59
+ await pageWrapper.trigger('click')
60
+
61
+ // Inspect emitted events
62
+ const emittedEvents = wrapper.emitted('on-toggle-change')
63
+
64
+ // Verify that no events were emitted
65
+ expect(emittedEvents).toBeUndefined() // No event should be emitted
66
+ }),
67
+ it('should toggle back and forth on multiple clicks', async () => {
68
+ const wrapper = mount(RCToggle, {
69
+ props: { isChecked: false, disabled: false },
70
+ global: {
71
+ provide: {
72
+ theme,
73
+ },
74
+ },
75
+ })
76
+ const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
77
+ // Initial state
78
+ expect(toggleWrapper.attributes('checked')).toBe('false')
79
+
80
+ // Trigger click and check events
81
+ const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
82
+ await pageWrapper.trigger('click')
83
+ let emittedEvent = wrapper.emitted('on-toggle-change')
84
+ expect(emittedEvent).toBeTruthy() // Ensure that the event was emitted
85
+ expect(emittedEvent).toHaveLength(1) // Ensure that only one event was emitted
86
+ expect(emittedEvent[0]).toEqual([true]) // Check the payload of the first click
87
+ await wrapper.setProps({ isChecked: true }) // manually update the props
88
+
89
+ // Trigger click again and check events
90
+ await pageWrapper.trigger('click')
91
+ emittedEvent = wrapper.emitted('on-toggle-change')
92
+ expect(emittedEvent).toHaveLength(2) // Ensure that the event count has increased
93
+ expect(emittedEvent[1]).toEqual([false]) // Check the payload of the second click
94
+ await wrapper.setProps({ isChecked: false }) // manually update the props
95
+
96
+ // Trigger click again and check events
97
+ await pageWrapper.trigger('click')
98
+ emittedEvent = wrapper.emitted('on-toggle-change')
99
+ expect(emittedEvent).toHaveLength(3) // Ensure that the event count has increased
100
+ expect(emittedEvent[2]).toEqual([true]) // Check the payload of the third click
101
+ })
102
+ })
@@ -1,99 +1,99 @@
1
- <template>
2
- <LabelWrapper :label-align="labelAlign">
3
- <InputLabel :font-size="fontSize" :label-font-color="labelFontColor">
4
- <slot></slot>
5
- <OptionalLabel v-if="labelOptional">
6
- ({{ $gettext('Optional') }})
7
- </OptionalLabel>
8
- </InputLabel>
9
- <InfoText
10
- v-if="infoTextMessage"
11
- :align-arrow="infoTextAlign"
12
- border-color="#ccc"
13
- :size="fontSize ? fontSize : '16px'"
14
- :text="infoTextMessage"
15
- />
16
- </LabelWrapper>
17
- </template>
18
-
19
- <script>
20
- import styled from 'vue3-styled-components'
21
- import InfoText from '../infoText'
22
-
23
- const labelAttrs = { fontSize: String, labelFontColor: String }
24
- const InputLabel = styled('div', labelAttrs)`
25
- color: ${(props) =>
26
- props.theme.colors[props.labelFontColor]
27
- ? props.theme.colors[props.labelFontColor]
28
- : props.labelFontColor
29
- ? props.labelFontColor
30
- : props.theme.colors.eturnityGrey};
31
-
32
- font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
33
- font-weight: 700;
34
- `
35
- const OptionalLabel = styled.span`
36
- font-weight: 300;
37
- `
38
-
39
- const LabelWrapper = styled('div', { labelAlign: String })`
40
- ${(props) =>
41
- props.labelAlign == 'horizontal'
42
- ? 'display: inline-grid;'
43
- : 'display: grid;'}
44
- ${(props) =>
45
- props.labelAlign == 'horizontal'
46
- ? 'margin-right: 10px;'
47
- : 'margin-bottom: 8px;'}
48
- vertical-align: center;
49
- grid-template-columns: auto auto;
50
- grid-gap: 12px;
51
- align-items: center;
52
- justify-content: start;
53
- `
54
- export default {
55
- // import labelText from "@eturnity/eturnity_reusable_components/src/components/label"
56
- // To use:
57
- // <label-text
58
- // infoTextAlign="right" // left by default
59
- // infoTextMessage="My info message"
60
- // label="Question 5"
61
- // />
62
- name: 'InputText',
63
- components: {
64
- InfoText,
65
- InputLabel,
66
- LabelWrapper,
67
- OptionalLabel,
68
- },
69
- props: {
70
- infoTextMessage: {
71
- required: false,
72
- },
73
- infoTextAlign: {
74
- required: false,
75
- },
76
- labelOptional: {
77
- required: false,
78
- default: false,
79
- },
80
- fontSize: {
81
- required: false,
82
- default: null,
83
- },
84
- labelFontColor: {
85
- required: false,
86
- default: 'black',
87
- },
88
- labelAlign: {
89
- required: false,
90
- default: 'vertical',
91
- },
92
- },
93
- data() {
94
- return {
95
- inputTypeData: 'text',
96
- }
97
- },
98
- }
99
- </script>
1
+ <template>
2
+ <LabelWrapper :label-align="labelAlign">
3
+ <InputLabel :font-size="fontSize" :label-font-color="labelFontColor">
4
+ <slot></slot>
5
+ <OptionalLabel v-if="labelOptional">
6
+ ({{ $gettext('Optional') }})
7
+ </OptionalLabel>
8
+ </InputLabel>
9
+ <InfoText
10
+ v-if="infoTextMessage"
11
+ :align-arrow="infoTextAlign"
12
+ border-color="#ccc"
13
+ :size="fontSize ? fontSize : '16px'"
14
+ :text="infoTextMessage"
15
+ />
16
+ </LabelWrapper>
17
+ </template>
18
+
19
+ <script>
20
+ import styled from 'vue3-styled-components'
21
+ import InfoText from '../infoText'
22
+
23
+ const labelAttrs = { fontSize: String, labelFontColor: String }
24
+ const InputLabel = styled('div', labelAttrs)`
25
+ color: ${(props) =>
26
+ props.theme.colors[props.labelFontColor]
27
+ ? props.theme.colors[props.labelFontColor]
28
+ : props.labelFontColor
29
+ ? props.labelFontColor
30
+ : props.theme.colors.eturnityGrey};
31
+
32
+ font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
33
+ font-weight: 700;
34
+ `
35
+ const OptionalLabel = styled.span`
36
+ font-weight: 300;
37
+ `
38
+
39
+ const LabelWrapper = styled('div', { labelAlign: String })`
40
+ ${(props) =>
41
+ props.labelAlign == 'horizontal'
42
+ ? 'display: inline-grid;'
43
+ : 'display: grid;'}
44
+ ${(props) =>
45
+ props.labelAlign == 'horizontal'
46
+ ? 'margin-right: 10px;'
47
+ : 'margin-bottom: 8px;'}
48
+ vertical-align: center;
49
+ grid-template-columns: auto auto;
50
+ grid-gap: 12px;
51
+ align-items: center;
52
+ justify-content: start;
53
+ `
54
+ export default {
55
+ // import labelText from "@eturnity/eturnity_reusable_components/src/components/label"
56
+ // To use:
57
+ // <label-text
58
+ // infoTextAlign="right" // left by default
59
+ // infoTextMessage="My info message"
60
+ // label="Question 5"
61
+ // />
62
+ name: 'InputText',
63
+ components: {
64
+ InfoText,
65
+ InputLabel,
66
+ LabelWrapper,
67
+ OptionalLabel,
68
+ },
69
+ props: {
70
+ infoTextMessage: {
71
+ required: false,
72
+ },
73
+ infoTextAlign: {
74
+ required: false,
75
+ },
76
+ labelOptional: {
77
+ required: false,
78
+ default: false,
79
+ },
80
+ fontSize: {
81
+ required: false,
82
+ default: null,
83
+ },
84
+ labelFontColor: {
85
+ required: false,
86
+ default: 'black',
87
+ },
88
+ labelAlign: {
89
+ required: false,
90
+ default: 'vertical',
91
+ },
92
+ },
93
+ data() {
94
+ return {
95
+ inputTypeData: 'text',
96
+ }
97
+ },
98
+ }
99
+ </script>
@@ -1,88 +1,88 @@
1
- <template>
2
- <PageContainer>
3
- <MarkerContainer
4
- :background-color="backgroundColor"
5
- :cursor="cursor"
6
- :has-icon="!!iconName"
7
- >
8
- <Icon
9
- v-if="!!iconName"
10
- color="white"
11
- :cursor="cursor"
12
- :name="iconName"
13
- size="10px"
14
- />
15
- <span>{{ label }}</span>
16
- </MarkerContainer>
17
- </PageContainer>
18
- </template>
19
-
20
- <script>
21
- // import MarkerItem from "@eturnity/eturnity_reusable_components/src/components/markerItem"
22
- // To use:
23
- // <marker-item
24
- // label="Label"
25
- // backgroundColor="#ab5348"
26
- // iconName="icon_name"
27
- // cursor="pointer"
28
- // />
29
-
30
- import styled from 'vue3-styled-components'
31
- import Icon from '../icon'
32
-
33
- const PageContainer = styled.div`
34
- display: flex;
35
- align-items: center;
36
- font-size: 12px;
37
- line-height: 14px;
38
- `
39
-
40
- const MarkerAttrs = {
41
- backgroundColor: String,
42
- hasIcon: Boolean,
43
- cursor: String,
44
- }
45
- const MarkerContainer = styled('div', MarkerAttrs)`
46
- display: grid;
47
- grid-template-columns: ${(props) => (props.hasIcon ? 'auto 1fr' : '1fr')};
48
- grid-gap: 5px;
49
- position: relative;
50
- align-items: center;
51
- padding: 2px 7px;
52
- color: ${(props) => props.theme.colors.white};
53
- background-color: ${(props) =>
54
- props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
55
- border: 1px solid
56
- ${(props) =>
57
- props.backgroundColor
58
- ? props.backgroundColor
59
- : props.theme.colors.grey3};
60
- border-radius: 4px;
61
- white-space: nowrap;
62
- cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
63
- `
64
-
65
- export default {
66
- name: 'ProjectMarker',
67
- components: {
68
- PageContainer,
69
- MarkerContainer,
70
- Icon,
71
- },
72
- props: {
73
- backgroundColor: {
74
- required: false,
75
- },
76
- iconName: {
77
- required: false,
78
- },
79
- label: {
80
- required: true,
81
- },
82
- cursor: {
83
- required: false,
84
- default: 'default',
85
- },
86
- },
87
- }
88
- </script>
1
+ <template>
2
+ <PageContainer>
3
+ <MarkerContainer
4
+ :background-color="backgroundColor"
5
+ :cursor="cursor"
6
+ :has-icon="!!iconName"
7
+ >
8
+ <Icon
9
+ v-if="!!iconName"
10
+ color="white"
11
+ :cursor="cursor"
12
+ :name="iconName"
13
+ size="10px"
14
+ />
15
+ <span>{{ label }}</span>
16
+ </MarkerContainer>
17
+ </PageContainer>
18
+ </template>
19
+
20
+ <script>
21
+ // import MarkerItem from "@eturnity/eturnity_reusable_components/src/components/markerItem"
22
+ // To use:
23
+ // <marker-item
24
+ // label="Label"
25
+ // backgroundColor="#ab5348"
26
+ // iconName="icon_name"
27
+ // cursor="pointer"
28
+ // />
29
+
30
+ import styled from 'vue3-styled-components'
31
+ import Icon from '../icon'
32
+
33
+ const PageContainer = styled.div`
34
+ display: flex;
35
+ align-items: center;
36
+ font-size: 12px;
37
+ line-height: 14px;
38
+ `
39
+
40
+ const MarkerAttrs = {
41
+ backgroundColor: String,
42
+ hasIcon: Boolean,
43
+ cursor: String,
44
+ }
45
+ const MarkerContainer = styled('div', MarkerAttrs)`
46
+ display: grid;
47
+ grid-template-columns: ${(props) => (props.hasIcon ? 'auto 1fr' : '1fr')};
48
+ grid-gap: 5px;
49
+ position: relative;
50
+ align-items: center;
51
+ padding: 2px 7px;
52
+ color: ${(props) => props.theme.colors.white};
53
+ background-color: ${(props) =>
54
+ props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
55
+ border: 1px solid
56
+ ${(props) =>
57
+ props.backgroundColor
58
+ ? props.backgroundColor
59
+ : props.theme.colors.grey3};
60
+ border-radius: 4px;
61
+ white-space: nowrap;
62
+ cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
63
+ `
64
+
65
+ export default {
66
+ name: 'ProjectMarker',
67
+ components: {
68
+ PageContainer,
69
+ MarkerContainer,
70
+ Icon,
71
+ },
72
+ props: {
73
+ backgroundColor: {
74
+ required: false,
75
+ },
76
+ iconName: {
77
+ required: false,
78
+ },
79
+ label: {
80
+ required: true,
81
+ },
82
+ cursor: {
83
+ required: false,
84
+ default: 'default',
85
+ },
86
+ },
87
+ }
88
+ </script>