@eturnity/eturnity_reusable_components 7.45.5-EPDM-11692.0 → 7.45.5-EPDM-11313-EPDM-11314.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (366) 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 +44 -44
  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/InfoBanner.spec.js +70 -70
  259. package/src/components/banner/infoBanner/InfoBanner.stories.js +42 -42
  260. package/src/components/banner/infoBanner/index.vue +97 -97
  261. package/src/components/buttons/buttonIcon/index.vue +145 -145
  262. package/src/components/buttons/closeButton/CloseButton.stories.js +25 -25
  263. package/src/components/buttons/closeButton/index.vue +62 -62
  264. package/src/components/buttons/mainButton/MainButton.stories.js +51 -51
  265. package/src/components/buttons/mainButton/index.vue +155 -150
  266. package/src/components/buttons/mainButton/mainButton.spec.js +35 -35
  267. package/src/components/card/Card.stories.js +79 -79
  268. package/src/components/card/card.spec.js +135 -135
  269. package/src/components/card/index.vue +116 -116
  270. package/src/components/collapsableInfoText/index.vue +127 -127
  271. package/src/components/deleteIcon/DeleteIcon.stories.js +29 -29
  272. package/src/components/deleteIcon/index.vue +78 -78
  273. package/src/components/draggableInputHandle/index.vue +46 -46
  274. package/src/components/dropdown/Dropdown.stories.js +53 -53
  275. package/src/components/dropdown/index.vue +138 -138
  276. package/src/components/errorMessage/index.vue +64 -64
  277. package/src/components/filter/filterSettings.vue +669 -669
  278. package/src/components/filter/index.vue +154 -154
  279. package/src/components/filter/parentDropdown.vue +91 -91
  280. package/src/components/icon/Icons.stories.js +41 -41
  281. package/src/components/icon/iconCache.mjs +23 -23
  282. package/src/components/icon/iconCollection.vue +82 -82
  283. package/src/components/icon/index.vue +140 -140
  284. package/src/components/iconWrapper/index.vue +179 -179
  285. package/src/components/infoCard/InfoCard.stories.js +144 -144
  286. package/src/components/infoCard/defaultProps.js +7 -7
  287. package/src/components/infoCard/index.vue +140 -140
  288. package/src/components/infoCard/infoCard.spec.js +56 -56
  289. package/src/components/infoText/index.vue +190 -190
  290. package/src/components/inputs/checkbox/Checkbox.stories.js +63 -63
  291. package/src/components/inputs/checkbox/checkbox.spec.js +109 -109
  292. package/src/components/inputs/checkbox/index.vue +225 -225
  293. package/src/components/inputs/inputNumber/InputNumber.stories.js +150 -150
  294. package/src/components/inputs/inputNumber/index.vue +789 -789
  295. package/src/components/inputs/inputNumberQuestion/index.vue +218 -218
  296. package/src/components/inputs/inputText/InputText.stories.js +75 -75
  297. package/src/components/inputs/inputText/index.vue +380 -380
  298. package/src/components/inputs/radioButton/RadioButton.stories.js +77 -77
  299. package/src/components/inputs/radioButton/defaultProps.js +31 -31
  300. package/src/components/inputs/radioButton/index.vue +309 -309
  301. package/src/components/inputs/radioButton/radioButton.spec.js +269 -269
  302. package/src/components/inputs/searchInput/SearchInput.stories.js +40 -40
  303. package/src/components/inputs/searchInput/index.vue +151 -151
  304. package/src/components/inputs/select/index.vue +918 -917
  305. package/src/components/inputs/select/option/index.vue +156 -156
  306. package/src/components/inputs/select/select.stories.js +58 -58
  307. package/src/components/inputs/slider/index.vue +126 -126
  308. package/src/components/inputs/switchField/index.vue +254 -254
  309. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +127 -127
  310. package/src/components/inputs/textAreaInput/index.vue +198 -198
  311. package/src/components/inputs/toggle/Toggle.stories.js +77 -77
  312. package/src/components/inputs/toggle/index.vue +317 -317
  313. package/src/components/inputs/toggle/toggle.spec.js +102 -102
  314. package/src/components/label/index.vue +99 -99
  315. package/src/components/markerItem/index.vue +88 -88
  316. package/src/components/modals/actionModal/index.vue +64 -64
  317. package/src/components/modals/infoModal/index.vue +52 -52
  318. package/src/components/modals/modal/index.vue +196 -196
  319. package/src/components/modals/modal/modal.stories.js +31 -31
  320. package/src/components/navigationTabs/index.vue +114 -114
  321. package/src/components/pageSubtitle/PageSubtitle.stories.js +59 -59
  322. package/src/components/pageSubtitle/index.vue +78 -78
  323. package/src/components/pageSubtitle/pageSubtitle.spec.js +46 -46
  324. package/src/components/pageTitle/PageTitle.stories.js +95 -95
  325. package/src/components/pageTitle/index.vue +91 -91
  326. package/src/components/pageTitle/pageTitle.spec.js +46 -46
  327. package/src/components/pagination/index.vue +148 -148
  328. package/src/components/progressBar/index.vue +125 -125
  329. package/src/components/projectMarker/index.vue +300 -300
  330. package/src/components/rangeSlider/Slider.vue +573 -573
  331. package/src/components/rangeSlider/index.vue +517 -517
  332. package/src/components/rangeSlider/utils/dom.js +49 -49
  333. package/src/components/rangeSlider/utils/fns.js +26 -26
  334. package/src/components/roundTabs/index.vue +107 -107
  335. package/src/components/selectedOptions/index.vue +471 -471
  336. package/src/components/selectedOptions/selectedOptions.spec.js +176 -176
  337. package/src/components/selectedOptions/selectedOptions.stories.js +155 -155
  338. package/src/components/sideMenu/index.vue +270 -270
  339. package/src/components/spinner/Spinner.stories.js +34 -34
  340. package/src/components/spinner/index.vue +85 -85
  341. package/src/components/spinner/spinner.spec.js +69 -69
  342. package/src/components/tableDropdown/index.vue +638 -638
  343. package/src/components/tables/mainTable/exampleNested.vue +328 -328
  344. package/src/components/tables/mainTable/index.vue +510 -510
  345. package/src/components/tables/viewTable/index.vue +195 -195
  346. package/src/components/tabsHeader/index.vue +83 -83
  347. package/src/components/threeDots/index.vue +413 -413
  348. package/src/components/videoThumbnail/index.vue +103 -103
  349. package/src/components/videoThumbnail/videoThumbnail.stories.js +33 -33
  350. package/src/helpers/currencyMapping.js +28 -28
  351. package/src/helpers/numberConverter.js +103 -103
  352. package/src/helpers/translateLang.js +128 -128
  353. package/src/main.js +7 -7
  354. package/src/mixins/inputValidations.js +97 -97
  355. package/src/router/dynamicRoutes.js +23 -23
  356. package/src/stories/Button.stories.js +48 -48
  357. package/src/stories/Button.vue +52 -52
  358. package/src/stories/Configure.mdx +364 -364
  359. package/src/stories/Header.stories.js +41 -41
  360. package/src/stories/Header.vue +59 -59
  361. package/src/stories/Page.stories.js +30 -30
  362. package/src/stories/Page.vue +83 -83
  363. package/src/stories/button.css +30 -30
  364. package/src/stories/header.css +32 -32
  365. package/src/stories/page.css +69 -69
  366. package/src/utils/index.js +12 -12
@@ -1,64 +1,64 @@
1
- <template>
2
- <Modal :is-open="isOpen" @on-close="closeModal">
3
- <ModalContainer>
4
- <ModalTitle v-if="$slots.title">
5
- <slot name="title"></slot>
6
- </ModalTitle>
7
- <TextContainer v-if="$slots.body">
8
- <slot name="body"></slot>
9
- </TextContainer>
10
- <ButtonContainer v-if="$slots.buttons">
11
- <slot name="buttons"></slot>
12
- </ButtonContainer>
13
- </ModalContainer>
14
- </Modal>
15
- </template>
16
- <script>
17
- import styled from 'vue3-styled-components'
18
- import Modal from '../modal'
19
- const ModalContainer = styled.div`
20
- width: 450px;
21
- min-height: 205px;
22
- padding: 40px 40px 30px 40px;
23
- `
24
- const ModalTitle = styled.div`
25
- color: ${(props) => props.theme.colors.black};
26
- font-family: ${(props) => props.theme.fonts.mainFont};
27
- font-size: 18px;
28
- font-style: normal;
29
- font-weight: 700;
30
- line-height: 120%;
31
- text-transform: uppercase;
32
- `
33
- const ButtonContainer = styled.div`
34
- display: inline-flex;
35
- align-items: flex-start;
36
- gap: 20px;
37
- `
38
- const TextContainer = styled.div`
39
- color: ${(props) => props.theme.colors.black};
40
- font-family: ${(props) => props.theme.fonts.mainFont};
41
- font-size: 13px;
42
- font-style: normal;
43
- font-weight: 400;
44
- line-height: normal;
45
- padding: 30px 0px;
46
- white-space: pre-wrap;
47
- `
48
- export default {
49
- name: 'ActionModal',
50
- components: {
51
- Modal,
52
- ModalContainer,
53
- ModalTitle,
54
- ButtonContainer,
55
- TextContainer,
56
- },
57
- props: ['isOpen'],
58
- methods: {
59
- closeModal() {
60
- this.$emit('on-close')
61
- },
62
- },
63
- }
64
- </script>
1
+ <template>
2
+ <Modal :is-open="isOpen" @on-close="closeModal">
3
+ <ModalContainer>
4
+ <ModalTitle v-if="$slots.title">
5
+ <slot name="title"></slot>
6
+ </ModalTitle>
7
+ <TextContainer v-if="$slots.body">
8
+ <slot name="body"></slot>
9
+ </TextContainer>
10
+ <ButtonContainer v-if="$slots.buttons">
11
+ <slot name="buttons"></slot>
12
+ </ButtonContainer>
13
+ </ModalContainer>
14
+ </Modal>
15
+ </template>
16
+ <script>
17
+ import styled from 'vue3-styled-components'
18
+ import Modal from '../modal'
19
+ const ModalContainer = styled.div`
20
+ width: 450px;
21
+ min-height: 205px;
22
+ padding: 40px 40px 30px 40px;
23
+ `
24
+ const ModalTitle = styled.div`
25
+ color: ${(props) => props.theme.colors.black};
26
+ font-family: ${(props) => props.theme.fonts.mainFont};
27
+ font-size: 18px;
28
+ font-style: normal;
29
+ font-weight: 700;
30
+ line-height: 120%;
31
+ text-transform: uppercase;
32
+ `
33
+ const ButtonContainer = styled.div`
34
+ display: inline-flex;
35
+ align-items: flex-start;
36
+ gap: 20px;
37
+ `
38
+ const TextContainer = styled.div`
39
+ color: ${(props) => props.theme.colors.black};
40
+ font-family: ${(props) => props.theme.fonts.mainFont};
41
+ font-size: 13px;
42
+ font-style: normal;
43
+ font-weight: 400;
44
+ line-height: normal;
45
+ padding: 30px 0px;
46
+ white-space: pre-wrap;
47
+ `
48
+ export default {
49
+ name: 'ActionModal',
50
+ components: {
51
+ Modal,
52
+ ModalContainer,
53
+ ModalTitle,
54
+ ButtonContainer,
55
+ TextContainer,
56
+ },
57
+ props: ['isOpen'],
58
+ methods: {
59
+ closeModal() {
60
+ this.$emit('on-close')
61
+ },
62
+ },
63
+ }
64
+ </script>
@@ -1,52 +1,52 @@
1
- <template>
2
- <ActionModal :is-open="isOpen" @on-close="closeModal">
3
- <ModalContainer>
4
- <template #title>
5
- <slot name="title"></slot>
6
- </template>
7
- <template #body>
8
- <slot name="body"></slot>
9
- </template>
10
- <template #buttons>
11
- <ButtonContainer>
12
- <RCMainButton
13
- min-width="150px"
14
- :text="$gettext('Got it')"
15
- type="primary"
16
- @click="closeModal"
17
- />
18
- </ButtonContainer>
19
- </template>
20
- </ModalContainer>
21
- </ActionModal>
22
- </template>
23
- <script>
24
- import styled from 'vue3-styled-components'
25
- import ActionModal from '../actionModal'
26
- import RCMainButton from '../../buttons/mainButton'
27
- const ModalContainer = styled.div`
28
- width: 450px;
29
- min-height: 205px;
30
- padding: 40px 40px 30px 40px;
31
- `
32
- const ButtonContainer = styled.div`
33
- display: inline-flex;
34
- align-items: flex-start;
35
- gap: 20px;
36
- `
37
- export default {
38
- name: 'InfoModal',
39
- components: {
40
- ModalContainer,
41
- ButtonContainer,
42
- ActionModal,
43
- RCMainButton,
44
- },
45
- props: ['isOpen'],
46
- methods: {
47
- closeModal() {
48
- this.$emit('on-close')
49
- },
50
- },
51
- }
52
- </script>
1
+ <template>
2
+ <ActionModal :is-open="isOpen" @on-close="closeModal">
3
+ <ModalContainer>
4
+ <template #title>
5
+ <slot name="title"></slot>
6
+ </template>
7
+ <template #body>
8
+ <slot name="body"></slot>
9
+ </template>
10
+ <template #buttons>
11
+ <ButtonContainer>
12
+ <RCMainButton
13
+ min-width="150px"
14
+ :text="$gettext('Got it')"
15
+ type="primary"
16
+ @click="closeModal"
17
+ />
18
+ </ButtonContainer>
19
+ </template>
20
+ </ModalContainer>
21
+ </ActionModal>
22
+ </template>
23
+ <script>
24
+ import styled from 'vue3-styled-components'
25
+ import ActionModal from '../actionModal'
26
+ import RCMainButton from '../../buttons/mainButton'
27
+ const ModalContainer = styled.div`
28
+ width: 450px;
29
+ min-height: 205px;
30
+ padding: 40px 40px 30px 40px;
31
+ `
32
+ const ButtonContainer = styled.div`
33
+ display: inline-flex;
34
+ align-items: flex-start;
35
+ gap: 20px;
36
+ `
37
+ export default {
38
+ name: 'InfoModal',
39
+ components: {
40
+ ModalContainer,
41
+ ButtonContainer,
42
+ ActionModal,
43
+ RCMainButton,
44
+ },
45
+ props: ['isOpen'],
46
+ methods: {
47
+ closeModal() {
48
+ this.$emit('on-close')
49
+ },
50
+ },
51
+ }
52
+ </script>
@@ -1,196 +1,196 @@
1
- <template>
2
- <PageWrapper
3
- :backdrop="backdrop"
4
- :class="{ visible: isOpen, hidden: !isOpen }"
5
- :is-open="isOpen"
6
- :position="position"
7
- >
8
- <ModalContainer :overflow="overflowRule" @click="onClickModalContainer">
9
- <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
10
- <ContentContainer :visible="!isLoading">
11
- <slot></slot>
12
- </ContentContainer>
13
- <CloseButton v-if="!hideClose" class="close" @click="onCloseModal()" />
14
- </ModalContainer>
15
- </PageWrapper>
16
- </template>
17
-
18
- <script>
19
- // Rules: (as defined in https://e-turnity.atlassian.net/browse/EPDM-9694)
20
- // 1. On clicking the “escape” key, close the modal onCloseModal()
21
- // 2. Always prevent outside close
22
- // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
23
- // This is a more flexible modal box, where the parent can decide how the body of the modal looks
24
- // To use:
25
- // <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true" :stopPropagation="false">
26
- // <div>Data....</div>
27
- // </modal>
28
-
29
- import styled from 'vue3-styled-components'
30
- import CloseButton from '../../buttons/closeButton'
31
- import Spinner from '../../spinner'
32
-
33
- const contentAttrs = { visible: Boolean }
34
- const ContentContainer = styled('div', contentAttrs)`
35
- visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
36
- `
37
-
38
- const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
39
- const PageWrapper = styled('div', pageAttrs)`
40
- position: ${(props) => props.position}
41
- display: grid;
42
- top: 0;
43
- left: 0;
44
- width: 100%;
45
- height: 100%;
46
- background-color: ${(props) =>
47
- props.backdrop == 'dark'
48
- ? 'rgba(0, 0, 0, 0.4)'
49
- : 'rgba(255, 255, 255, 0.9)'};
50
- z-index: 99999;
51
- overflow: auto;
52
-
53
- &.visible {
54
- visibility: visible;
55
- opacity: 1;
56
- transition: visibility 0s linear 0s, opacity 300ms;
57
- }
58
-
59
- &.hidden {
60
- visibility: hidden;
61
- opacity: 0;
62
- transition: visibility 0s linear 300ms, opacity 300ms;
63
- }
64
-
65
- @media (max-width: 425px) {
66
- background: white;
67
- }
68
- `
69
-
70
- const modalContainerAttrs = { overflow: String }
71
- const ModalContainer = styled('div', modalContainerAttrs)`
72
- align-self: center;
73
- justify-self: center;
74
- position: relative;
75
- box-shadow: 0px 4px 4px 3px rgba(0, 0, 0, 0.1);
76
- border-radius: 4px;
77
- background: white;
78
- margin: 0 auto;
79
- overflow: ${(props) => props.overflow};
80
- max-width: 95%;
81
- max-height: 95%;
82
- min-width: 100px;
83
- min-height: 100px;
84
-
85
- ::-webkit-scrollbar {
86
- width: 0.3em;
87
- height: 100%;
88
- background-color: ${(props) => props.theme.colors.grey5};
89
- }
90
-
91
- /* Make scrollbar visible when needed */
92
- ::-webkit-scrollbar-thumb {
93
- background-color: ${(props) => props.theme.colors.grey3};
94
- }
95
-
96
- /* Make scrollbar track visible when needed */
97
- ::-webkit-scrollbar-track {
98
- background-color: ${(props) => props.theme.colors.grey5};
99
- }
100
-
101
- .close {
102
- position: absolute;
103
- right: 20px;
104
- top: 20px;
105
-
106
- @media (max-width: 425px) {
107
- right: 14px;
108
- top: 12px;
109
- background: white;
110
- position: fixed;
111
- z-index: 99;
112
- }
113
- }
114
-
115
- @media (max-width: 425px) {
116
- width: 100%;
117
- height: 100%;
118
- box-shadow: none;
119
- }
120
- `
121
-
122
- export default {
123
- name: 'Modal',
124
- components: {
125
- PageWrapper,
126
- ModalContainer,
127
- CloseButton,
128
- Spinner,
129
- ContentContainer,
130
- },
131
- props: {
132
- isOpen: {
133
- required: true,
134
- default: false,
135
- },
136
- isLoading: {
137
- required: false,
138
- default: false,
139
- },
140
- hideClose: {
141
- required: false,
142
- default: false,
143
- },
144
- backdrop: {
145
- required: false,
146
- default: 'white',
147
- },
148
- position: {
149
- required: false,
150
- default: 'fixed',
151
- },
152
- stopPropagation: {
153
- type: Boolean,
154
- default: true,
155
- },
156
- overflowRule: {
157
- required: false,
158
- type: String,
159
- default: 'auto',
160
- },
161
- },
162
- watch: {
163
- isOpen: {
164
- immediate: true,
165
- handler(isOpen) {
166
- document.body.style.overflow = isOpen ? 'hidden' : null
167
- if (isOpen) {
168
- window.addEventListener('keydown', this.handleKeyDown)
169
- } else {
170
- window.removeEventListener('keydown', this.handleKeyDown)
171
- }
172
- },
173
- },
174
- },
175
- beforeUnmount() {
176
- document.body.style.overflow = null
177
- window.removeEventListener('keydown', this.handleKeyDown)
178
- },
179
- methods: {
180
- onCloseModal() {
181
- document.body.style.overflow = null
182
- this.$emit('on-close')
183
- },
184
- handleKeyDown({ key }) {
185
- if (key === 'Escape') {
186
- this.onCloseModal()
187
- }
188
- },
189
- onClickModalContainer(event) {
190
- if (this.stopPropagation) {
191
- event.stopPropagation()
192
- }
193
- },
194
- },
195
- }
196
- </script>
1
+ <template>
2
+ <PageWrapper
3
+ :backdrop="backdrop"
4
+ :class="{ visible: isOpen, hidden: !isOpen }"
5
+ :is-open="isOpen"
6
+ :position="position"
7
+ >
8
+ <ModalContainer :overflow="overflowRule" @click="onClickModalContainer">
9
+ <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
10
+ <ContentContainer :visible="!isLoading">
11
+ <slot></slot>
12
+ </ContentContainer>
13
+ <CloseButton v-if="!hideClose" class="close" @click="onCloseModal()" />
14
+ </ModalContainer>
15
+ </PageWrapper>
16
+ </template>
17
+
18
+ <script>
19
+ // Rules: (as defined in https://e-turnity.atlassian.net/browse/EPDM-9694)
20
+ // 1. On clicking the “escape” key, close the modal onCloseModal()
21
+ // 2. Always prevent outside close
22
+ // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
23
+ // This is a more flexible modal box, where the parent can decide how the body of the modal looks
24
+ // To use:
25
+ // <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true" :stopPropagation="false">
26
+ // <div>Data....</div>
27
+ // </modal>
28
+
29
+ import styled from 'vue3-styled-components'
30
+ import CloseButton from '../../buttons/closeButton'
31
+ import Spinner from '../../spinner'
32
+
33
+ const contentAttrs = { visible: Boolean }
34
+ const ContentContainer = styled('div', contentAttrs)`
35
+ visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
36
+ `
37
+
38
+ const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
39
+ const PageWrapper = styled('div', pageAttrs)`
40
+ position: ${(props) => props.position}
41
+ display: grid;
42
+ top: 0;
43
+ left: 0;
44
+ width: 100%;
45
+ height: 100%;
46
+ background-color: ${(props) =>
47
+ props.backdrop == 'dark'
48
+ ? 'rgba(0, 0, 0, 0.4)'
49
+ : 'rgba(255, 255, 255, 0.9)'};
50
+ z-index: 99999;
51
+ overflow: auto;
52
+
53
+ &.visible {
54
+ visibility: visible;
55
+ opacity: 1;
56
+ transition: visibility 0s linear 0s, opacity 300ms;
57
+ }
58
+
59
+ &.hidden {
60
+ visibility: hidden;
61
+ opacity: 0;
62
+ transition: visibility 0s linear 300ms, opacity 300ms;
63
+ }
64
+
65
+ @media (max-width: 425px) {
66
+ background: white;
67
+ }
68
+ `
69
+
70
+ const modalContainerAttrs = { overflow: String }
71
+ const ModalContainer = styled('div', modalContainerAttrs)`
72
+ align-self: center;
73
+ justify-self: center;
74
+ position: relative;
75
+ box-shadow: 0px 4px 4px 3px rgba(0, 0, 0, 0.1);
76
+ border-radius: 4px;
77
+ background: white;
78
+ margin: 0 auto;
79
+ overflow: ${(props) => props.overflow};
80
+ max-width: 95%;
81
+ max-height: 95%;
82
+ min-width: 100px;
83
+ min-height: 100px;
84
+
85
+ ::-webkit-scrollbar {
86
+ width: 0.3em;
87
+ height: 100%;
88
+ background-color: ${(props) => props.theme.colors.grey5};
89
+ }
90
+
91
+ /* Make scrollbar visible when needed */
92
+ ::-webkit-scrollbar-thumb {
93
+ background-color: ${(props) => props.theme.colors.grey3};
94
+ }
95
+
96
+ /* Make scrollbar track visible when needed */
97
+ ::-webkit-scrollbar-track {
98
+ background-color: ${(props) => props.theme.colors.grey5};
99
+ }
100
+
101
+ .close {
102
+ position: absolute;
103
+ right: 20px;
104
+ top: 20px;
105
+
106
+ @media (max-width: 425px) {
107
+ right: 14px;
108
+ top: 12px;
109
+ background: white;
110
+ position: fixed;
111
+ z-index: 99;
112
+ }
113
+ }
114
+
115
+ @media (max-width: 425px) {
116
+ width: 100%;
117
+ height: 100%;
118
+ box-shadow: none;
119
+ }
120
+ `
121
+
122
+ export default {
123
+ name: 'Modal',
124
+ components: {
125
+ PageWrapper,
126
+ ModalContainer,
127
+ CloseButton,
128
+ Spinner,
129
+ ContentContainer,
130
+ },
131
+ props: {
132
+ isOpen: {
133
+ required: true,
134
+ default: false,
135
+ },
136
+ isLoading: {
137
+ required: false,
138
+ default: false,
139
+ },
140
+ hideClose: {
141
+ required: false,
142
+ default: false,
143
+ },
144
+ backdrop: {
145
+ required: false,
146
+ default: 'white',
147
+ },
148
+ position: {
149
+ required: false,
150
+ default: 'fixed',
151
+ },
152
+ stopPropagation: {
153
+ type: Boolean,
154
+ default: true,
155
+ },
156
+ overflowRule: {
157
+ required: false,
158
+ type: String,
159
+ default: 'auto',
160
+ },
161
+ },
162
+ watch: {
163
+ isOpen: {
164
+ immediate: true,
165
+ handler(isOpen) {
166
+ document.body.style.overflow = isOpen ? 'hidden' : null
167
+ if (isOpen) {
168
+ window.addEventListener('keydown', this.handleKeyDown)
169
+ } else {
170
+ window.removeEventListener('keydown', this.handleKeyDown)
171
+ }
172
+ },
173
+ },
174
+ },
175
+ beforeUnmount() {
176
+ document.body.style.overflow = null
177
+ window.removeEventListener('keydown', this.handleKeyDown)
178
+ },
179
+ methods: {
180
+ onCloseModal() {
181
+ document.body.style.overflow = null
182
+ this.$emit('on-close')
183
+ },
184
+ handleKeyDown({ key }) {
185
+ if (key === 'Escape') {
186
+ this.onCloseModal()
187
+ }
188
+ },
189
+ onClickModalContainer(event) {
190
+ if (this.stopPropagation) {
191
+ event.stopPropagation()
192
+ }
193
+ },
194
+ },
195
+ }
196
+ </script>