@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,109 +1,109 @@
1
- /* eslint-disable */
2
- import { mount } from '@vue/test-utils'
3
- import Checkbox from '@/components/inputs/checkbox'
4
- import theme from '@/assets/theme'
5
-
6
- describe('Checkbox Component', () => {
7
- let wrapper
8
-
9
- beforeEach(() => {
10
- wrapper = mount(Checkbox, {
11
- props: {
12
- isChecked: false,
13
- label: 'Click me',
14
- isDisabled: false,
15
- dataId: 'checkbox_wrapper',
16
- },
17
- global: {
18
- provide: {
19
- theme,
20
- },
21
- },
22
- })
23
- })
24
- it('checkbox is rendered and emits correct payload on change', async () => {
25
- const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
26
-
27
- // check that the element exists with correct props
28
- expect(checkboxWrapper.exists()).toBe(true)
29
- expect(wrapper.vm.isChecked).toBe(false)
30
- expect(wrapper.vm.label).toBe('Click me')
31
- expect(wrapper.vm.size).toBe('medium')
32
- expect(wrapper.vm.isDisabled).toBe(false)
33
-
34
- // Test the change
35
- const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
36
- await inputCheckbox.trigger('change')
37
- expect(wrapper.emitted('on-event-handler')).toBeTruthy()
38
- const emittedEvent = wrapper.emitted('on-event-handler')
39
- // To inspect emitted events:
40
- expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
41
- // Check the payload of the event
42
- expect(emittedEvent[0]).toEqual([true])
43
- })
44
- it('disabled should not emit anything', async () => {
45
- const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
46
- await wrapper.setProps({ isDisabled: true })
47
-
48
- // check that the element exists with correct props
49
- expect(checkboxWrapper.exists()).toBe(true)
50
- expect(wrapper.vm.isDisabled).toBe(true)
51
-
52
- // Test the change
53
- const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
54
- await inputCheckbox.trigger('change')
55
- // expect(wrapper.emitted('on-event-handler')).toBeTruthy()
56
- const emittedEvents = wrapper.emitted('on-event-handler')
57
- // To inspect emitted events:
58
- expect(emittedEvents).toBeUndefined() // No event should be emitted
59
- })
60
- it('checkbox can handle multiple clicks', async () => {
61
- const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
62
-
63
- // check that the element exists with correct props
64
- expect(checkboxWrapper.exists()).toBe(true)
65
- expect(wrapper.vm.isChecked).toBe(false)
66
-
67
- // Test the change
68
- const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
69
- await inputCheckbox.trigger('change')
70
- expect(wrapper.emitted('on-event-handler')).toBeTruthy()
71
- const emittedEvent = wrapper.emitted('on-event-handler')
72
- expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
73
- // Check the payload of the event
74
- expect(emittedEvent[0]).toEqual([true])
75
- await wrapper.setProps({ isChecked: true }) // manually update the props
76
-
77
- // test the 2nd click
78
- await inputCheckbox.trigger('change')
79
- expect(wrapper.emitted('on-event-handler')).toBeTruthy()
80
- expect(emittedEvent).toHaveLength(2) // Check if the event was emitted exactly once
81
- // Check the payload of the event
82
- expect(emittedEvent[1]).toEqual([false])
83
- await wrapper.setProps({ isChecked: false }) // manually update the props
84
-
85
- // test the 3rd click
86
- await inputCheckbox.trigger('change')
87
- expect(wrapper.emitted('on-event-handler')).toBeTruthy()
88
- expect(emittedEvent).toHaveLength(3) // Check if the event was emitted exactly once
89
- // Check the payload of the event
90
- expect(emittedEvent[2]).toEqual([true])
91
- await wrapper.setProps({ isChecked: true }) // manually update the props
92
- })
93
- it('should have a custom background color', async () => {
94
- const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
95
- await wrapper.setProps({ backgroundColor: theme.colors.red })
96
-
97
- // check that the element exists with correct props
98
- expect(checkboxWrapper.exists()).toBe(true)
99
- expect(wrapper.vm.backgroundColor).toBe(theme.colors.red)
100
- })
101
- it('should have a custom checkbox color', async () => {
102
- const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
103
- await wrapper.setProps({ checkColor: theme.colors.brightBlue })
104
-
105
- // check that the element exists with correct props
106
- expect(checkboxWrapper.exists()).toBe(true)
107
- expect(wrapper.vm.checkColor).toBe(theme.colors.brightBlue)
108
- })
109
- })
1
+ /* eslint-disable */
2
+ import { mount } from '@vue/test-utils'
3
+ import Checkbox from '@/components/inputs/checkbox'
4
+ import theme from '@/assets/theme'
5
+
6
+ describe('Checkbox Component', () => {
7
+ let wrapper
8
+
9
+ beforeEach(() => {
10
+ wrapper = mount(Checkbox, {
11
+ props: {
12
+ isChecked: false,
13
+ label: 'Click me',
14
+ isDisabled: false,
15
+ dataId: 'checkbox_wrapper',
16
+ },
17
+ global: {
18
+ provide: {
19
+ theme,
20
+ },
21
+ },
22
+ })
23
+ })
24
+ it('checkbox is rendered and emits correct payload on change', async () => {
25
+ const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
26
+
27
+ // check that the element exists with correct props
28
+ expect(checkboxWrapper.exists()).toBe(true)
29
+ expect(wrapper.vm.isChecked).toBe(false)
30
+ expect(wrapper.vm.label).toBe('Click me')
31
+ expect(wrapper.vm.size).toBe('medium')
32
+ expect(wrapper.vm.isDisabled).toBe(false)
33
+
34
+ // Test the change
35
+ const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
36
+ await inputCheckbox.trigger('change')
37
+ expect(wrapper.emitted('on-event-handler')).toBeTruthy()
38
+ const emittedEvent = wrapper.emitted('on-event-handler')
39
+ // To inspect emitted events:
40
+ expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
41
+ // Check the payload of the event
42
+ expect(emittedEvent[0]).toEqual([true])
43
+ })
44
+ it('disabled should not emit anything', async () => {
45
+ const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
46
+ await wrapper.setProps({ isDisabled: true })
47
+
48
+ // check that the element exists with correct props
49
+ expect(checkboxWrapper.exists()).toBe(true)
50
+ expect(wrapper.vm.isDisabled).toBe(true)
51
+
52
+ // Test the change
53
+ const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
54
+ await inputCheckbox.trigger('change')
55
+ // expect(wrapper.emitted('on-event-handler')).toBeTruthy()
56
+ const emittedEvents = wrapper.emitted('on-event-handler')
57
+ // To inspect emitted events:
58
+ expect(emittedEvents).toBeUndefined() // No event should be emitted
59
+ })
60
+ it('checkbox can handle multiple clicks', async () => {
61
+ const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
62
+
63
+ // check that the element exists with correct props
64
+ expect(checkboxWrapper.exists()).toBe(true)
65
+ expect(wrapper.vm.isChecked).toBe(false)
66
+
67
+ // Test the change
68
+ const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
69
+ await inputCheckbox.trigger('change')
70
+ expect(wrapper.emitted('on-event-handler')).toBeTruthy()
71
+ const emittedEvent = wrapper.emitted('on-event-handler')
72
+ expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
73
+ // Check the payload of the event
74
+ expect(emittedEvent[0]).toEqual([true])
75
+ await wrapper.setProps({ isChecked: true }) // manually update the props
76
+
77
+ // test the 2nd click
78
+ await inputCheckbox.trigger('change')
79
+ expect(wrapper.emitted('on-event-handler')).toBeTruthy()
80
+ expect(emittedEvent).toHaveLength(2) // Check if the event was emitted exactly once
81
+ // Check the payload of the event
82
+ expect(emittedEvent[1]).toEqual([false])
83
+ await wrapper.setProps({ isChecked: false }) // manually update the props
84
+
85
+ // test the 3rd click
86
+ await inputCheckbox.trigger('change')
87
+ expect(wrapper.emitted('on-event-handler')).toBeTruthy()
88
+ expect(emittedEvent).toHaveLength(3) // Check if the event was emitted exactly once
89
+ // Check the payload of the event
90
+ expect(emittedEvent[2]).toEqual([true])
91
+ await wrapper.setProps({ isChecked: true }) // manually update the props
92
+ })
93
+ it('should have a custom background color', async () => {
94
+ const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
95
+ await wrapper.setProps({ backgroundColor: theme.colors.red })
96
+
97
+ // check that the element exists with correct props
98
+ expect(checkboxWrapper.exists()).toBe(true)
99
+ expect(wrapper.vm.backgroundColor).toBe(theme.colors.red)
100
+ })
101
+ it('should have a custom checkbox color', async () => {
102
+ const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
103
+ await wrapper.setProps({ checkColor: theme.colors.brightBlue })
104
+
105
+ // check that the element exists with correct props
106
+ expect(checkboxWrapper.exists()).toBe(true)
107
+ expect(wrapper.vm.checkColor).toBe(theme.colors.brightBlue)
108
+ })
109
+ })
@@ -1,225 +1,225 @@
1
- <template>
2
- <ComponentWrapper @click.stop>
3
- <Container
4
- :background-color="backgroundColor"
5
- :check-color="checkColor"
6
- :cursor-type="cursorType"
7
- :data-test-id="dataId"
8
- :has-label="hasLabel"
9
- :is-checked="isChecked"
10
- :is-disabled="isDisabled"
11
- :size="size"
12
- >
13
- <InputCheckbox
14
- :checked="isChecked"
15
- :data-id="dataId"
16
- type="checkbox"
17
- @change="onChangeHandler(!isChecked)"
18
- />
19
- <CheckWrapper :has-label="hasLabel">
20
- <span class="checkmark"></span>
21
- </CheckWrapper>
22
- <LabelText v-if="hasLabel">
23
- {{ label }}
24
- </LabelText>
25
- </Container>
26
- </ComponentWrapper>
27
- </template>
28
-
29
- <script>
30
- // import Checkbox from "@eturnity/eturnity_reusable_components/src/components/inputs/checkbox"
31
- //To use:
32
- // <checkbox
33
- // label="Do you accept the Terms?"
34
- // :isChecked="isChecked" //required
35
- // @on-event-handler="onInputChange($event)" //required
36
- // checkColor="blue"
37
- // size="small"
38
- // backgroundColor="red"
39
- // :isDisabled="true"
40
- // cursorType="default"
41
- // />
42
- import styled from 'vue3-styled-components'
43
-
44
- const ComponentWrapper = styled.div`
45
- min-height: 18px;
46
- `
47
-
48
- const CheckWrapper = styled('div', { hasLabel: Boolean })`
49
- ${(props) =>
50
- props.hasLabel &&
51
- `
52
- display: flex;
53
- align-items: center;
54
- `}
55
- `
56
-
57
- const containerAttrs = {
58
- checkColor: String,
59
- size: String,
60
- hasLabel: Boolean,
61
- backgroundColor: String,
62
- isChecked: Boolean,
63
- isDisabled: Boolean,
64
- cursorType: String,
65
- }
66
- const Container = styled('label', containerAttrs)`
67
- display: grid;
68
- grid-template-columns: ${(props) =>
69
- props.hasLabel ? '16px auto' : '16px'};
70
- grid-gap: 16px;
71
- align-content: center;
72
- color: ${(props) => props.theme.colors.black};
73
- position: relative;
74
- cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
75
- font-size: 16px;
76
- user-select: none;
77
-
78
- .checkmark {
79
- position: absolute;
80
- height: ${(props) =>
81
- props.size === 'medium'
82
- ? '25px'
83
- : props.size === 'small'
84
- ? '16px'
85
- : '25px'};
86
- width: ${(props) =>
87
- props.size === 'medium'
88
- ? '25px'
89
- : props.size === 'small'
90
- ? '16px'
91
- : '25px'};
92
- background-color: ${(props) =>
93
- props.isChecked
94
- ? props.backgroundColor
95
- ? props.backgroundColor
96
- : props.theme.colors.green
97
- : props.isDisabled
98
- ? props.theme.colors.lightGray
99
- : props.theme.colors.white};
100
- border-radius: 4px;
101
- border: 1px solid
102
- ${(props) =>
103
- props.isChecked
104
- ? props.backgroundColor
105
- ? props.backgroundColor
106
- : props.theme.colors.green
107
- : props.theme.colors.mediumGray};
108
-
109
- &:after {
110
- content: '';
111
- position: absolute;
112
- display: ${(props) => (props.isChecked ? 'block' : 'none')};
113
- }
114
- }
115
-
116
- .checkmark:after {
117
- left: ${(props) =>
118
- props.size === 'medium'
119
- ? '9px'
120
- : props.size === 'small'
121
- ? '5px'
122
- : '9px'};
123
- top: ${(props) =>
124
- props.size === 'medium'
125
- ? '5px'
126
- : props.size === 'small'
127
- ? '2px'
128
- : '5px'};
129
- width: ${(props) =>
130
- props.size === 'medium'
131
- ? '5px'
132
- : props.size === 'small'
133
- ? '3px'
134
- : '5px'};
135
- height: ${(props) =>
136
- props.size === 'medium'
137
- ? '10px'
138
- : props.size === 'small'
139
- ? '6px'
140
- : '10px'};
141
- border: solid
142
- ${(props) =>
143
- props.checkColor ? props.checkColor : props.theme.colors.white};
144
- border-width: ${(props) =>
145
- props.size === 'medium'
146
- ? '0 3px 3px 0'
147
- : props.size === 'small'
148
- ? '0 2px 2px 0'
149
- : '0 3px 3px 0'};
150
- transform: rotate(45deg);
151
- }
152
- `
153
-
154
- const InputCheckbox = styled.input`
155
- cursor: pointer;
156
- position: absolute;
157
- opacity: 0;
158
- cursor: pointer;
159
- height: 0;
160
- width: 0;
161
- `
162
-
163
- const LabelText = styled.div`
164
- font-size: 13px;
165
- display: grid;
166
- align-items: flex-start;
167
- min-height: 18px;
168
- `
169
-
170
- export default {
171
- name: 'Checkbox',
172
- components: {
173
- ComponentWrapper,
174
- Container,
175
- InputCheckbox,
176
- LabelText,
177
- CheckWrapper,
178
- },
179
- props: {
180
- label: {
181
- required: false,
182
- default: '',
183
- },
184
- isChecked: {
185
- required: true,
186
- default: false,
187
- },
188
- checkColor: {
189
- required: false,
190
- },
191
- size: {
192
- required: false,
193
- default: 'medium', // small, medium
194
- },
195
- backgroundColor: {
196
- required: false,
197
- },
198
- isDisabled: {
199
- required: false,
200
- default: false,
201
- },
202
- dataId: {
203
- type: String,
204
- default: '',
205
- },
206
- cursorType: {
207
- type: String,
208
- default: 'pointer',
209
- },
210
- },
211
- computed: {
212
- hasLabel() {
213
- return !!this.label && !!this.label.length
214
- },
215
- },
216
- methods: {
217
- onChangeHandler(value) {
218
- if (this.isDisabled) {
219
- return
220
- }
221
- this.$emit('on-event-handler', value)
222
- },
223
- },
224
- }
225
- </script>
1
+ <template>
2
+ <ComponentWrapper @click.stop>
3
+ <Container
4
+ :background-color="backgroundColor"
5
+ :check-color="checkColor"
6
+ :cursor-type="cursorType"
7
+ :data-test-id="dataId"
8
+ :has-label="hasLabel"
9
+ :is-checked="isChecked"
10
+ :is-disabled="isDisabled"
11
+ :size="size"
12
+ >
13
+ <InputCheckbox
14
+ :checked="isChecked"
15
+ :data-id="dataId"
16
+ type="checkbox"
17
+ @change="onChangeHandler(!isChecked)"
18
+ />
19
+ <CheckWrapper :has-label="hasLabel">
20
+ <span class="checkmark"></span>
21
+ </CheckWrapper>
22
+ <LabelText v-if="hasLabel">
23
+ {{ label }}
24
+ </LabelText>
25
+ </Container>
26
+ </ComponentWrapper>
27
+ </template>
28
+
29
+ <script>
30
+ // import Checkbox from "@eturnity/eturnity_reusable_components/src/components/inputs/checkbox"
31
+ //To use:
32
+ // <checkbox
33
+ // label="Do you accept the Terms?"
34
+ // :isChecked="isChecked" //required
35
+ // @on-event-handler="onInputChange($event)" //required
36
+ // checkColor="blue"
37
+ // size="small"
38
+ // backgroundColor="red"
39
+ // :isDisabled="true"
40
+ // cursorType="default"
41
+ // />
42
+ import styled from 'vue3-styled-components'
43
+
44
+ const ComponentWrapper = styled.div`
45
+ min-height: 18px;
46
+ `
47
+
48
+ const CheckWrapper = styled('div', { hasLabel: Boolean })`
49
+ ${(props) =>
50
+ props.hasLabel &&
51
+ `
52
+ display: flex;
53
+ align-items: center;
54
+ `}
55
+ `
56
+
57
+ const containerAttrs = {
58
+ checkColor: String,
59
+ size: String,
60
+ hasLabel: Boolean,
61
+ backgroundColor: String,
62
+ isChecked: Boolean,
63
+ isDisabled: Boolean,
64
+ cursorType: String,
65
+ }
66
+ const Container = styled('label', containerAttrs)`
67
+ display: grid;
68
+ grid-template-columns: ${(props) =>
69
+ props.hasLabel ? '16px auto' : '16px'};
70
+ grid-gap: 16px;
71
+ align-content: center;
72
+ color: ${(props) => props.theme.colors.black};
73
+ position: relative;
74
+ cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
75
+ font-size: 16px;
76
+ user-select: none;
77
+
78
+ .checkmark {
79
+ position: absolute;
80
+ height: ${(props) =>
81
+ props.size === 'medium'
82
+ ? '25px'
83
+ : props.size === 'small'
84
+ ? '16px'
85
+ : '25px'};
86
+ width: ${(props) =>
87
+ props.size === 'medium'
88
+ ? '25px'
89
+ : props.size === 'small'
90
+ ? '16px'
91
+ : '25px'};
92
+ background-color: ${(props) =>
93
+ props.isChecked
94
+ ? props.backgroundColor
95
+ ? props.backgroundColor
96
+ : props.theme.colors.green
97
+ : props.isDisabled
98
+ ? props.theme.colors.lightGray
99
+ : props.theme.colors.white};
100
+ border-radius: 4px;
101
+ border: 1px solid
102
+ ${(props) =>
103
+ props.isChecked
104
+ ? props.backgroundColor
105
+ ? props.backgroundColor
106
+ : props.theme.colors.green
107
+ : props.theme.colors.mediumGray};
108
+
109
+ &:after {
110
+ content: '';
111
+ position: absolute;
112
+ display: ${(props) => (props.isChecked ? 'block' : 'none')};
113
+ }
114
+ }
115
+
116
+ .checkmark:after {
117
+ left: ${(props) =>
118
+ props.size === 'medium'
119
+ ? '9px'
120
+ : props.size === 'small'
121
+ ? '5px'
122
+ : '9px'};
123
+ top: ${(props) =>
124
+ props.size === 'medium'
125
+ ? '5px'
126
+ : props.size === 'small'
127
+ ? '2px'
128
+ : '5px'};
129
+ width: ${(props) =>
130
+ props.size === 'medium'
131
+ ? '5px'
132
+ : props.size === 'small'
133
+ ? '3px'
134
+ : '5px'};
135
+ height: ${(props) =>
136
+ props.size === 'medium'
137
+ ? '10px'
138
+ : props.size === 'small'
139
+ ? '6px'
140
+ : '10px'};
141
+ border: solid
142
+ ${(props) =>
143
+ props.checkColor ? props.checkColor : props.theme.colors.white};
144
+ border-width: ${(props) =>
145
+ props.size === 'medium'
146
+ ? '0 3px 3px 0'
147
+ : props.size === 'small'
148
+ ? '0 2px 2px 0'
149
+ : '0 3px 3px 0'};
150
+ transform: rotate(45deg);
151
+ }
152
+ `
153
+
154
+ const InputCheckbox = styled.input`
155
+ cursor: pointer;
156
+ position: absolute;
157
+ opacity: 0;
158
+ cursor: pointer;
159
+ height: 0;
160
+ width: 0;
161
+ `
162
+
163
+ const LabelText = styled.div`
164
+ font-size: 13px;
165
+ display: grid;
166
+ align-items: flex-start;
167
+ min-height: 18px;
168
+ `
169
+
170
+ export default {
171
+ name: 'Checkbox',
172
+ components: {
173
+ ComponentWrapper,
174
+ Container,
175
+ InputCheckbox,
176
+ LabelText,
177
+ CheckWrapper,
178
+ },
179
+ props: {
180
+ label: {
181
+ required: false,
182
+ default: '',
183
+ },
184
+ isChecked: {
185
+ required: true,
186
+ default: false,
187
+ },
188
+ checkColor: {
189
+ required: false,
190
+ },
191
+ size: {
192
+ required: false,
193
+ default: 'medium', // small, medium
194
+ },
195
+ backgroundColor: {
196
+ required: false,
197
+ },
198
+ isDisabled: {
199
+ required: false,
200
+ default: false,
201
+ },
202
+ dataId: {
203
+ type: String,
204
+ default: '',
205
+ },
206
+ cursorType: {
207
+ type: String,
208
+ default: 'pointer',
209
+ },
210
+ },
211
+ computed: {
212
+ hasLabel() {
213
+ return !!this.label && !!this.label.length
214
+ },
215
+ },
216
+ methods: {
217
+ onChangeHandler(value) {
218
+ if (this.isDisabled) {
219
+ return
220
+ }
221
+ this.$emit('on-event-handler', value)
222
+ },
223
+ },
224
+ }
225
+ </script>