@eturnity/eturnity_reusable_components 7.45.5-EPDM-11314.2 → 7.45.5-EPDM-10609.1

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 (368) 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/checkmark.svg +3 -0
  64. package/src/assets/svgIcons/clear_formatting.svg +7 -7
  65. package/src/assets/svgIcons/clickable_info.svg +4 -4
  66. package/src/assets/svgIcons/clip.svg +3 -3
  67. package/src/assets/svgIcons/clock.svg +17 -17
  68. package/src/assets/svgIcons/clock_full.svg +3 -3
  69. package/src/assets/svgIcons/close_for_modals,_tool_tips.svg +4 -4
  70. package/src/assets/svgIcons/co_branding.svg +5 -5
  71. package/src/assets/svgIcons/collapse.svg +4 -4
  72. package/src/assets/svgIcons/collections.svg +3 -3
  73. package/src/assets/svgIcons/component_library.svg +7 -7
  74. package/src/assets/svgIcons/consumption_tariffs.svg +43 -43
  75. package/src/assets/svgIcons/context_menu-1.svg +6 -6
  76. package/src/assets/svgIcons/context_menu-2.svg +5 -5
  77. package/src/assets/svgIcons/context_menu.svg +5 -5
  78. package/src/assets/svgIcons/context_menu_tabs.svg +5 -5
  79. package/src/assets/svgIcons/cross.svg +4 -4
  80. package/src/assets/svgIcons/current_variant.svg +4 -4
  81. package/src/assets/svgIcons/dashboard.svg +3 -3
  82. package/src/assets/svgIcons/data_transfer.svg +3 -3
  83. package/src/assets/svgIcons/deadline.svg +4 -4
  84. package/src/assets/svgIcons/deal_flow.svg +5 -5
  85. package/src/assets/svgIcons/delete.svg +4 -4
  86. package/src/assets/svgIcons/delete_area_active.svg +16 -16
  87. package/src/assets/svgIcons/delete_area_inactive.svg +15 -15
  88. package/src/assets/svgIcons/direction_active-1.svg +12 -12
  89. package/src/assets/svgIcons/direction_active.svg +5 -5
  90. package/src/assets/svgIcons/direction_arrow.svg +4 -4
  91. package/src/assets/svgIcons/direction_inactive.svg +4 -4
  92. package/src/assets/svgIcons/dislike.svg +3 -3
  93. package/src/assets/svgIcons/distance_tool.svg +8 -8
  94. package/src/assets/svgIcons/distances_active.svg +9 -9
  95. package/src/assets/svgIcons/distances_inactive.svg +8 -8
  96. package/src/assets/svgIcons/distort_tool.svg +10 -10
  97. package/src/assets/svgIcons/distort_tool2.svg +16 -16
  98. package/src/assets/svgIcons/document.svg +3 -3
  99. package/src/assets/svgIcons/documents.svg +4 -4
  100. package/src/assets/svgIcons/downarrow.svg +3 -3
  101. package/src/assets/svgIcons/download.svg +4 -4
  102. package/src/assets/svgIcons/drag_icon.svg +8 -8
  103. package/src/assets/svgIcons/draggable_corner.svg +5 -5
  104. package/src/assets/svgIcons/draw_tool.svg +3 -3
  105. package/src/assets/svgIcons/duplicate-1.svg +8 -8
  106. package/src/assets/svgIcons/duplicate-2.svg +5 -5
  107. package/src/assets/svgIcons/duplicate.svg +4 -4
  108. package/src/assets/svgIcons/e-mobility_configurator.svg +6 -6
  109. package/src/assets/svgIcons/e_signature.svg +5 -5
  110. package/src/assets/svgIcons/edit_button.svg +3 -3
  111. package/src/assets/svgIcons/electricity_tariff.svg +3 -3
  112. package/src/assets/svgIcons/email.svg +3 -3
  113. package/src/assets/svgIcons/ems-1.svg +3 -3
  114. package/src/assets/svgIcons/ems.svg +3 -3
  115. package/src/assets/svgIcons/end_of_the_list.svg +5 -5
  116. package/src/assets/svgIcons/erase.svg +4 -4
  117. package/src/assets/svgIcons/external_icon.svg +5 -5
  118. package/src/assets/svgIcons/fav_icon.svg +4 -4
  119. package/src/assets/svgIcons/finance.svg +3 -3
  120. package/src/assets/svgIcons/financing_for_pv-1.svg +5 -5
  121. package/src/assets/svgIcons/financing_for_pv-2.svg +3 -3
  122. package/src/assets/svgIcons/financing_for_pv.svg +6 -6
  123. package/src/assets/svgIcons/finish-1.svg +4 -4
  124. package/src/assets/svgIcons/finish.svg +3 -3
  125. package/src/assets/svgIcons/flatten.svg +11 -11
  126. package/src/assets/svgIcons/flatten_roof.svg +20 -20
  127. package/src/assets/svgIcons/folder.svg +3 -3
  128. package/src/assets/svgIcons/free_technology.svg +5 -5
  129. package/src/assets/svgIcons/handle.svg +5 -5
  130. package/src/assets/svgIcons/heat_calc.svg +7 -7
  131. package/src/assets/svgIcons/height_equalize.svg +3 -3
  132. package/src/assets/svgIcons/height_snap.svg +3 -3
  133. package/src/assets/svgIcons/house.svg +3 -3
  134. package/src/assets/svgIcons/house_3d-1.svg +7 -7
  135. package/src/assets/svgIcons/house_3d.svg +7 -7
  136. package/src/assets/svgIcons/inclination.svg +2 -2
  137. package/src/assets/svgIcons/info.svg +3 -3
  138. package/src/assets/svgIcons/initial_situation.svg +3 -3
  139. package/src/assets/svgIcons/integrations.svg +3 -3
  140. package/src/assets/svgIcons/intro-tour-1.svg +3 -3
  141. package/src/assets/svgIcons/intro-tour.svg +3 -3
  142. package/src/assets/svgIcons/inverter-1.svg +5 -5
  143. package/src/assets/svgIcons/inverter.svg +3 -3
  144. package/src/assets/svgIcons/italic.svg +3 -3
  145. package/src/assets/svgIcons/key.svg +3 -3
  146. package/src/assets/svgIcons/lake.svg +29 -29
  147. package/src/assets/svgIcons/layers_close.svg +4 -4
  148. package/src/assets/svgIcons/layers_open.svg +4 -4
  149. package/src/assets/svgIcons/lead_marketplace.svg +6 -6
  150. package/src/assets/svgIcons/lead_provider.svg +4 -4
  151. package/src/assets/svgIcons/length_2d.svg +2 -2
  152. package/src/assets/svgIcons/length_3d.svg +4 -4
  153. package/src/assets/svgIcons/length_calculator.svg +2 -2
  154. package/src/assets/svgIcons/length_in_2d_active.svg +12 -12
  155. package/src/assets/svgIcons/length_in_2d_inctive.svg +13 -13
  156. package/src/assets/svgIcons/light_bulb.svg +3 -3
  157. package/src/assets/svgIcons/like.svg +3 -3
  158. package/src/assets/svgIcons/line_graph.svg +3 -3
  159. package/src/assets/svgIcons/local_subsidies.svg +18 -18
  160. package/src/assets/svgIcons/location.svg +3 -3
  161. package/src/assets/svgIcons/lock.svg +3 -3
  162. package/src/assets/svgIcons/logout.svg +3 -3
  163. package/src/assets/svgIcons/loop.svg +3 -3
  164. package/src/assets/svgIcons/low-vegetation.svg +37 -37
  165. package/src/assets/svgIcons/lunch.svg +4 -4
  166. package/src/assets/svgIcons/magic_tool.svg +6 -6
  167. package/src/assets/svgIcons/map_icon.svg +5 -5
  168. package/src/assets/svgIcons/map_settings.svg +3 -3
  169. package/src/assets/svgIcons/margin_tool.svg +4 -4
  170. package/src/assets/svgIcons/meeting.svg +6 -6
  171. package/src/assets/svgIcons/move_copy.svg +4 -4
  172. package/src/assets/svgIcons/new_area_inactive.svg +11 -11
  173. package/src/assets/svgIcons/next.svg +4 -4
  174. package/src/assets/svgIcons/normal-tg.svg +30 -30
  175. package/src/assets/svgIcons/normal-vegetation.svg +53 -53
  176. package/src/assets/svgIcons/not_equal_to.svg +3 -3
  177. package/src/assets/svgIcons/numbered_list.svg +6 -6
  178. package/src/assets/svgIcons/obstacle_tool.svg +8 -8
  179. package/src/assets/svgIcons/obstacle_tool_origin.svg +3 -3
  180. package/src/assets/svgIcons/offset_tool.svg +8 -8
  181. package/src/assets/svgIcons/open-tg.svg +21 -21
  182. package/src/assets/svgIcons/outline_tool.svg +11 -11
  183. package/src/assets/svgIcons/pan_tool.svg +12 -12
  184. package/src/assets/svgIcons/panels_tool.svg +8 -8
  185. package/src/assets/svgIcons/pen_tool.svg +4 -4
  186. package/src/assets/svgIcons/picker_tool.svg +4 -4
  187. package/src/assets/svgIcons/picture.svg +3 -3
  188. package/src/assets/svgIcons/pin.svg +5 -5
  189. package/src/assets/svgIcons/presentation.svg +3 -3
  190. package/src/assets/svgIcons/previous.svg +4 -4
  191. package/src/assets/svgIcons/profile-1.svg +4 -4
  192. package/src/assets/svgIcons/profile.svg +4 -4
  193. package/src/assets/svgIcons/profitability.svg +3 -3
  194. package/src/assets/svgIcons/project_analysis.svg +4 -4
  195. package/src/assets/svgIcons/project_settings.svg +4 -4
  196. package/src/assets/svgIcons/protected-tg.svg +47 -47
  197. package/src/assets/svgIcons/pv.svg +3 -3
  198. package/src/assets/svgIcons/quotations.svg +6 -6
  199. package/src/assets/svgIcons/redo.svg +6 -6
  200. package/src/assets/svgIcons/resizer.svg +5 -5
  201. package/src/assets/svgIcons/roof_layer.svg +3 -3
  202. package/src/assets/svgIcons/rotate_tool.svg +3 -3
  203. package/src/assets/svgIcons/rotate_view.svg +5 -5
  204. package/src/assets/svgIcons/ruler_tool.svg +3 -3
  205. package/src/assets/svgIcons/run_simulation.svg +3 -3
  206. package/src/assets/svgIcons/save.svg +3 -3
  207. package/src/assets/svgIcons/scaling_tool.svg +8 -8
  208. package/src/assets/svgIcons/sea.svg +34 -34
  209. package/src/assets/svgIcons/search.svg +3 -3
  210. package/src/assets/svgIcons/security.svg +3 -3
  211. package/src/assets/svgIcons/settings.svg +3 -3
  212. package/src/assets/svgIcons/show_in_a_new_tab.svg +12 -12
  213. package/src/assets/svgIcons/smartphone.svg +4 -4
  214. package/src/assets/svgIcons/solar_calc.svg +13 -13
  215. package/src/assets/svgIcons/sorting.svg +4 -4
  216. package/src/assets/svgIcons/split.svg +12 -12
  217. package/src/assets/svgIcons/start_of_the_list.svg +5 -5
  218. package/src/assets/svgIcons/strikethrough.svg +4 -4
  219. package/src/assets/svgIcons/subscriptions.svg +3 -3
  220. package/src/assets/svgIcons/subsidies-1.svg +5 -5
  221. package/src/assets/svgIcons/subsidies-2.svg +3 -3
  222. package/src/assets/svgIcons/subsidies.svg +3 -3
  223. package/src/assets/svgIcons/subtract_icon.svg +3 -3
  224. package/src/assets/svgIcons/suitcase.svg +3 -3
  225. package/src/assets/svgIcons/summer.svg +3 -3
  226. package/src/assets/svgIcons/template_icon_not_clickable.svg +6 -6
  227. package/src/assets/svgIcons/transfer.svg +4 -4
  228. package/src/assets/svgIcons/trim_tool.svg +4 -4
  229. package/src/assets/svgIcons/truck.svg +3 -3
  230. package/src/assets/svgIcons/underlined.svg +3 -3
  231. package/src/assets/svgIcons/undo.svg +6 -6
  232. package/src/assets/svgIcons/uparrow.svg +3 -3
  233. package/src/assets/svgIcons/update.svg +3 -3
  234. package/src/assets/svgIcons/upload_avatar-1.svg +12 -12
  235. package/src/assets/svgIcons/upload_avatar.svg +5 -5
  236. package/src/assets/svgIcons/upload_image.svg +8 -8
  237. package/src/assets/svgIcons/upload_image_tool.svg +7 -7
  238. package/src/assets/svgIcons/variants.svg +6 -6
  239. package/src/assets/svgIcons/vertical_tool.svg +3 -3
  240. package/src/assets/svgIcons/virtual_storage.svg +4 -4
  241. package/src/assets/svgIcons/warning.svg +4 -4
  242. package/src/assets/svgIcons/way.svg +5 -5
  243. package/src/assets/svgIcons/wifi.svg +3 -3
  244. package/src/assets/svgIcons/winter.svg +3 -3
  245. package/src/assets/svgIcons/workflow_template.svg +11 -11
  246. package/src/assets/tests/__mocks__/iconCache.js +1 -1
  247. package/src/assets/tests/__mocks__/svgMock.js +1 -1
  248. package/src/assets/tests/helpers.js +12 -12
  249. package/src/assets/theme.js +45 -44
  250. package/src/components/addNewButton/AddNewButton.stories.js +17 -17
  251. package/src/components/addNewButton/addNewButton.spec.js +23 -23
  252. package/src/components/addNewButton/index.vue +62 -62
  253. package/src/components/banner/actionBanner/ActionBanner.stories.js +45 -45
  254. package/src/components/banner/actionBanner/actionBanner.spec.js +76 -76
  255. package/src/components/banner/actionBanner/index.vue +86 -86
  256. package/src/components/banner/banner/Banner.stories.js +64 -64
  257. package/src/components/banner/banner/banner.spec.js +149 -149
  258. package/src/components/banner/banner/index.vue +205 -205
  259. package/src/components/banner/infoBanner/InfoBanner.spec.js +70 -70
  260. package/src/components/banner/infoBanner/InfoBanner.stories.js +42 -42
  261. package/src/components/banner/infoBanner/index.vue +97 -97
  262. package/src/components/buttons/buttonIcon/index.vue +145 -145
  263. package/src/components/buttons/closeButton/CloseButton.stories.js +25 -25
  264. package/src/components/buttons/closeButton/index.vue +62 -62
  265. package/src/components/buttons/mainButton/MainButton.stories.js +51 -51
  266. package/src/components/buttons/mainButton/index.vue +150 -150
  267. package/src/components/buttons/mainButton/mainButton.spec.js +35 -35
  268. package/src/components/card/Card.stories.js +79 -79
  269. package/src/components/card/card.spec.js +135 -135
  270. package/src/components/card/index.vue +116 -116
  271. package/src/components/collapsableInfoText/index.vue +127 -127
  272. package/src/components/deleteIcon/DeleteIcon.stories.js +29 -29
  273. package/src/components/deleteIcon/index.vue +78 -78
  274. package/src/components/draggableInputHandle/index.vue +46 -46
  275. package/src/components/dropdown/Dropdown.stories.js +53 -53
  276. package/src/components/dropdown/index.vue +138 -138
  277. package/src/components/errorMessage/index.vue +64 -64
  278. package/src/components/filter/filterSettings.vue +669 -669
  279. package/src/components/filter/index.vue +154 -154
  280. package/src/components/filter/parentDropdown.vue +91 -91
  281. package/src/components/icon/Icons.stories.js +41 -41
  282. package/src/components/icon/iconCache.mjs +23 -23
  283. package/src/components/icon/iconCollection.vue +82 -82
  284. package/src/components/icon/index.vue +140 -140
  285. package/src/components/iconWrapper/index.vue +179 -179
  286. package/src/components/infoCard/index.vue +67 -140
  287. package/src/components/infoText/constants.js +4 -0
  288. package/src/components/infoText/index.vue +287 -190
  289. package/src/components/inputs/checkbox/Checkbox.stories.js +63 -63
  290. package/src/components/inputs/checkbox/checkbox.spec.js +109 -109
  291. package/src/components/inputs/checkbox/index.vue +225 -225
  292. package/src/components/inputs/inputNumber/InputNumber.stories.js +150 -150
  293. package/src/components/inputs/inputNumber/index.vue +789 -789
  294. package/src/components/inputs/inputNumberQuestion/index.vue +218 -218
  295. package/src/components/inputs/inputText/InputText.stories.js +75 -75
  296. package/src/components/inputs/inputText/index.vue +380 -380
  297. package/src/components/inputs/radioButton/RadioButton.stories.js +77 -77
  298. package/src/components/inputs/radioButton/defaultProps.js +33 -31
  299. package/src/components/inputs/radioButton/index.vue +309 -309
  300. package/src/components/inputs/radioButton/radioButton.spec.js +269 -269
  301. package/src/components/inputs/searchInput/SearchInput.stories.js +40 -40
  302. package/src/components/inputs/searchInput/index.vue +151 -151
  303. package/src/components/inputs/select/index.vue +910 -918
  304. package/src/components/inputs/select/option/index.vue +156 -156
  305. package/src/components/inputs/select/select.stories.js +58 -58
  306. package/src/components/inputs/slider/index.vue +126 -126
  307. package/src/components/inputs/switchField/index.vue +254 -254
  308. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +127 -127
  309. package/src/components/inputs/textAreaInput/index.vue +198 -198
  310. package/src/components/inputs/toggle/Toggle.stories.js +77 -77
  311. package/src/components/inputs/toggle/index.vue +317 -317
  312. package/src/components/inputs/toggle/toggle.spec.js +102 -102
  313. package/src/components/label/index.vue +99 -99
  314. package/src/components/markerItem/index.vue +88 -88
  315. package/src/components/modals/actionModal/index.vue +64 -64
  316. package/src/components/modals/infoModal/index.vue +52 -52
  317. package/src/components/modals/modal/index.vue +190 -196
  318. package/src/components/modals/modal/modal.stories.js +31 -31
  319. package/src/components/navigationTabs/index.vue +114 -114
  320. package/src/components/pageSubtitle/PageSubtitle.stories.js +59 -59
  321. package/src/components/pageSubtitle/index.vue +78 -78
  322. package/src/components/pageSubtitle/pageSubtitle.spec.js +46 -46
  323. package/src/components/pageTitle/PageTitle.stories.js +95 -95
  324. package/src/components/pageTitle/index.vue +91 -91
  325. package/src/components/pageTitle/pageTitle.spec.js +46 -46
  326. package/src/components/pagination/index.vue +148 -148
  327. package/src/components/progressBar/index.vue +125 -125
  328. package/src/components/projectMarker/index.vue +300 -300
  329. package/src/components/rangeSlider/Slider.vue +573 -573
  330. package/src/components/rangeSlider/index.vue +517 -517
  331. package/src/components/rangeSlider/utils/dom.js +49 -49
  332. package/src/components/rangeSlider/utils/fns.js +26 -26
  333. package/src/components/roundTabs/index.vue +107 -107
  334. package/src/components/selectedOptions/index.vue +471 -471
  335. package/src/components/selectedOptions/selectedOptions.spec.js +176 -176
  336. package/src/components/selectedOptions/selectedOptions.stories.js +155 -155
  337. package/src/components/sideMenu/index.vue +270 -270
  338. package/src/components/spinner/Spinner.stories.js +34 -34
  339. package/src/components/spinner/index.vue +85 -85
  340. package/src/components/spinner/spinner.spec.js +69 -69
  341. package/src/components/tableDropdown/index.vue +638 -638
  342. package/src/components/tables/mainTable/exampleNested.vue +328 -328
  343. package/src/components/tables/mainTable/index.vue +510 -510
  344. package/src/components/tables/viewTable/index.vue +195 -195
  345. package/src/components/tabsHeader/index.vue +83 -83
  346. package/src/components/threeDots/index.vue +413 -413
  347. package/src/components/videoThumbnail/index.vue +103 -103
  348. package/src/components/videoThumbnail/videoThumbnail.stories.js +33 -33
  349. package/src/helpers/currencyMapping.js +28 -28
  350. package/src/helpers/numberConverter.js +103 -103
  351. package/src/helpers/translateLang.js +128 -128
  352. package/src/main.js +7 -7
  353. package/src/mixins/inputValidations.js +97 -97
  354. package/src/router/dynamicRoutes.js +23 -23
  355. package/src/stories/Button.stories.js +48 -48
  356. package/src/stories/Button.vue +52 -52
  357. package/src/stories/Configure.mdx +364 -364
  358. package/src/stories/Header.stories.js +41 -41
  359. package/src/stories/Header.vue +59 -59
  360. package/src/stories/Page.stories.js +30 -30
  361. package/src/stories/Page.vue +83 -83
  362. package/src/stories/button.css +30 -30
  363. package/src/stories/header.css +32 -32
  364. package/src/stories/page.css +69 -69
  365. package/src/utils/index.js +12 -12
  366. package/src/components/infoCard/InfoCard.stories.js +0 -144
  367. package/src/components/infoCard/defaultProps.js +0 -7
  368. package/src/components/infoCard/infoCard.spec.js +0 -56
@@ -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>