@eturnity/eturnity_reusable_components 7.32.1 → 7.33.0-EPDM-11313.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 (322) hide show
  1. package/.eslintrc.js +184 -184
  2. package/.prettierrc +9 -9
  3. package/.storybook/main.js +8 -8
  4. package/.storybook/preview.js +46 -46
  5. package/README.md +29 -29
  6. package/babel.config.js +5 -5
  7. package/package.json +50 -50
  8. package/postcss.config.js +6 -6
  9. package/src/App.vue +110 -110
  10. package/src/assets/icons/arrow_down.svg +3 -3
  11. package/src/assets/icons/arrow_up_red.svg +3 -3
  12. package/src/assets/icons/black_spinner.svg +35 -35
  13. package/src/assets/icons/delete_icon.svg +11 -11
  14. package/src/assets/icons/delete_icon_gray.svg +11 -11
  15. package/src/assets/icons/drag_icon.svg +8 -8
  16. package/src/assets/icons/external_icon.svg +6 -6
  17. package/src/assets/icons/language_icon.svg +6 -6
  18. package/src/assets/icons/pdf_icon.svg +6 -6
  19. package/src/assets/icons/plus_button.svg +4 -4
  20. package/src/assets/icons/search_icon_black.svg +3 -3
  21. package/src/assets/icons/subposition_icon.svg +3 -3
  22. package/src/assets/icons/subposition_marker.svg +3 -3
  23. package/src/assets/icons/warning_icon.svg +3 -3
  24. package/src/assets/svgIcons/2d_active.svg +7 -7
  25. package/src/assets/svgIcons/2d_inactive.svg +8 -8
  26. package/src/assets/svgIcons/3d_active.svg +7 -7
  27. package/src/assets/svgIcons/3d_inactive.svg +8 -8
  28. package/src/assets/svgIcons/_readme.md +7 -7
  29. package/src/assets/svgIcons/accept.svg +5 -5
  30. package/src/assets/svgIcons/activate_panels_active.svg +22 -22
  31. package/src/assets/svgIcons/activate_panels_inactive.svg +20 -20
  32. package/src/assets/svgIcons/add_icon-1.svg +3 -3
  33. package/src/assets/svgIcons/add_icon.svg +4 -4
  34. package/src/assets/svgIcons/address_book.svg +3 -3
  35. package/src/assets/svgIcons/after_sale_as_a_service.svg +6 -6
  36. package/src/assets/svgIcons/all_good.svg +3 -3
  37. package/src/assets/svgIcons/angle_active.svg +5 -5
  38. package/src/assets/svgIcons/angle_inactive.svg +4 -4
  39. package/src/assets/svgIcons/area_active.svg +11 -11
  40. package/src/assets/svgIcons/area_inactive.svg +26 -26
  41. package/src/assets/svgIcons/areas_tool.svg +14 -14
  42. package/src/assets/svgIcons/arrow_down.svg +3 -3
  43. package/src/assets/svgIcons/arrow_left.svg +4 -4
  44. package/src/assets/svgIcons/arrow_right.svg +4 -4
  45. package/src/assets/svgIcons/arrow_up.svg +3 -3
  46. package/src/assets/svgIcons/attachment.svg +3 -3
  47. package/src/assets/svgIcons/base_layer.svg +3 -3
  48. package/src/assets/svgIcons/battery.svg +3 -3
  49. package/src/assets/svgIcons/bell.svg +3 -3
  50. package/src/assets/svgIcons/bexio.svg +4 -4
  51. package/src/assets/svgIcons/bold.svg +3 -3
  52. package/src/assets/svgIcons/bom.svg +3 -3
  53. package/src/assets/svgIcons/bom_generation.svg +10 -10
  54. package/src/assets/svgIcons/bookmaker.svg +3 -3
  55. package/src/assets/svgIcons/bubble.svg +3 -3
  56. package/src/assets/svgIcons/bug.svg +5 -5
  57. package/src/assets/svgIcons/bullet_list.svg +8 -8
  58. package/src/assets/svgIcons/calendar.svg +7 -7
  59. package/src/assets/svgIcons/calendar_icon.svg +7 -7
  60. package/src/assets/svgIcons/call.svg +3 -3
  61. package/src/assets/svgIcons/camera.svg +3 -3
  62. package/src/assets/svgIcons/car.svg +3 -3
  63. package/src/assets/svgIcons/cart.svg +3 -3
  64. package/src/assets/svgIcons/charger_icon_white.svg +44 -44
  65. package/src/assets/svgIcons/checkbox.svg +3 -3
  66. package/src/assets/svgIcons/clear_formatting.svg +7 -7
  67. package/src/assets/svgIcons/clickable_info.svg +4 -4
  68. package/src/assets/svgIcons/clip.svg +3 -3
  69. package/src/assets/svgIcons/clock.svg +17 -17
  70. package/src/assets/svgIcons/clock_full.svg +3 -3
  71. package/src/assets/svgIcons/close_for_modals,_tool_tips.svg +4 -4
  72. package/src/assets/svgIcons/co_branding.svg +5 -5
  73. package/src/assets/svgIcons/collapse.svg +4 -4
  74. package/src/assets/svgIcons/collections.svg +3 -3
  75. package/src/assets/svgIcons/component_library.svg +7 -7
  76. package/src/assets/svgIcons/consumption_tariffs.svg +43 -43
  77. package/src/assets/svgIcons/context_menu-1.svg +6 -6
  78. package/src/assets/svgIcons/context_menu-2.svg +5 -5
  79. package/src/assets/svgIcons/context_menu.svg +5 -5
  80. package/src/assets/svgIcons/context_menu_tabs.svg +5 -5
  81. package/src/assets/svgIcons/cross.svg +4 -4
  82. package/src/assets/svgIcons/current_variant.svg +4 -4
  83. package/src/assets/svgIcons/dashboard.svg +3 -3
  84. package/src/assets/svgIcons/data_transfer.svg +3 -3
  85. package/src/assets/svgIcons/deadline.svg +4 -4
  86. package/src/assets/svgIcons/deal_flow.svg +5 -5
  87. package/src/assets/svgIcons/delete.svg +4 -4
  88. package/src/assets/svgIcons/delete_area_active.svg +16 -16
  89. package/src/assets/svgIcons/delete_area_inactive.svg +15 -15
  90. package/src/assets/svgIcons/direction_active-1.svg +12 -12
  91. package/src/assets/svgIcons/direction_active.svg +5 -5
  92. package/src/assets/svgIcons/direction_arrow.svg +4 -4
  93. package/src/assets/svgIcons/direction_inactive.svg +4 -4
  94. package/src/assets/svgIcons/dislike.svg +3 -3
  95. package/src/assets/svgIcons/distance_tool.svg +8 -8
  96. package/src/assets/svgIcons/distances_active.svg +9 -9
  97. package/src/assets/svgIcons/distances_inactive.svg +8 -8
  98. package/src/assets/svgIcons/distort_tool.svg +10 -10
  99. package/src/assets/svgIcons/distort_tool2.svg +16 -16
  100. package/src/assets/svgIcons/document.svg +3 -3
  101. package/src/assets/svgIcons/documents.svg +4 -4
  102. package/src/assets/svgIcons/downarrow.svg +3 -3
  103. package/src/assets/svgIcons/download.svg +4 -4
  104. package/src/assets/svgIcons/drag_icon.svg +8 -8
  105. package/src/assets/svgIcons/draggable_corner.svg +5 -5
  106. package/src/assets/svgIcons/draw_tool.svg +3 -3
  107. package/src/assets/svgIcons/duplicate-1.svg +8 -8
  108. package/src/assets/svgIcons/duplicate-2.svg +5 -5
  109. package/src/assets/svgIcons/duplicate.svg +4 -4
  110. package/src/assets/svgIcons/e-mobility_configurator.svg +6 -6
  111. package/src/assets/svgIcons/e_signature.svg +5 -5
  112. package/src/assets/svgIcons/edit_button.svg +3 -3
  113. package/src/assets/svgIcons/electricity_tariff.svg +3 -3
  114. package/src/assets/svgIcons/email.svg +3 -3
  115. package/src/assets/svgIcons/ems-1.svg +3 -3
  116. package/src/assets/svgIcons/ems.svg +3 -3
  117. package/src/assets/svgIcons/end_of_the_list.svg +5 -5
  118. package/src/assets/svgIcons/erase.svg +4 -4
  119. package/src/assets/svgIcons/external_icon.svg +5 -5
  120. package/src/assets/svgIcons/fav_icon.svg +4 -4
  121. package/src/assets/svgIcons/finance.svg +3 -3
  122. package/src/assets/svgIcons/financing_for_pv-1.svg +5 -5
  123. package/src/assets/svgIcons/financing_for_pv-2.svg +3 -3
  124. package/src/assets/svgIcons/financing_for_pv.svg +6 -6
  125. package/src/assets/svgIcons/finish-1.svg +4 -4
  126. package/src/assets/svgIcons/finish.svg +3 -3
  127. package/src/assets/svgIcons/flatten.svg +11 -11
  128. package/src/assets/svgIcons/flatten_roof.svg +20 -20
  129. package/src/assets/svgIcons/folder.svg +3 -3
  130. package/src/assets/svgIcons/free_technology.svg +5 -5
  131. package/src/assets/svgIcons/handle.svg +5 -5
  132. package/src/assets/svgIcons/heat_calc.svg +7 -7
  133. package/src/assets/svgIcons/height_equalize.svg +3 -3
  134. package/src/assets/svgIcons/height_snap.svg +3 -3
  135. package/src/assets/svgIcons/house.svg +3 -3
  136. package/src/assets/svgIcons/house_3d-1.svg +7 -7
  137. package/src/assets/svgIcons/house_3d.svg +7 -7
  138. package/src/assets/svgIcons/inclination.svg +2 -2
  139. package/src/assets/svgIcons/info.svg +3 -3
  140. package/src/assets/svgIcons/initial_situation.svg +3 -3
  141. package/src/assets/svgIcons/integrations.svg +3 -3
  142. package/src/assets/svgIcons/intro-tour-1.svg +3 -3
  143. package/src/assets/svgIcons/intro-tour.svg +3 -3
  144. package/src/assets/svgIcons/inverter-1.svg +5 -5
  145. package/src/assets/svgIcons/inverter.svg +3 -3
  146. package/src/assets/svgIcons/italic.svg +3 -3
  147. package/src/assets/svgIcons/key.svg +3 -3
  148. package/src/assets/svgIcons/layers_close.svg +4 -4
  149. package/src/assets/svgIcons/layers_open.svg +4 -4
  150. package/src/assets/svgIcons/lead_marketplace.svg +6 -6
  151. package/src/assets/svgIcons/lead_provider.svg +4 -4
  152. package/src/assets/svgIcons/length_2d.svg +2 -2
  153. package/src/assets/svgIcons/length_3d.svg +4 -4
  154. package/src/assets/svgIcons/length_calculator.svg +2 -2
  155. package/src/assets/svgIcons/length_in_2d_active.svg +12 -12
  156. package/src/assets/svgIcons/length_in_2d_inctive.svg +13 -13
  157. package/src/assets/svgIcons/light_bulb.svg +3 -3
  158. package/src/assets/svgIcons/like.svg +3 -3
  159. package/src/assets/svgIcons/line_graph.svg +3 -3
  160. package/src/assets/svgIcons/local_subsidies.svg +18 -18
  161. package/src/assets/svgIcons/location.svg +3 -3
  162. package/src/assets/svgIcons/lock.svg +3 -3
  163. package/src/assets/svgIcons/logout.svg +3 -3
  164. package/src/assets/svgIcons/loop.svg +3 -3
  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/not_equal_to.svg +3 -3
  175. package/src/assets/svgIcons/numbered_list.svg +6 -6
  176. package/src/assets/svgIcons/obstacle_tool.svg +9 -9
  177. package/src/assets/svgIcons/obstacle_tool_origin.svg +3 -3
  178. package/src/assets/svgIcons/offset_tool.svg +8 -8
  179. package/src/assets/svgIcons/outline_tool.svg +11 -11
  180. package/src/assets/svgIcons/pan_tool.svg +12 -12
  181. package/src/assets/svgIcons/panels_tool.svg +8 -8
  182. package/src/assets/svgIcons/pen_tool.svg +4 -4
  183. package/src/assets/svgIcons/picker_tool.svg +4 -4
  184. package/src/assets/svgIcons/picture.svg +3 -3
  185. package/src/assets/svgIcons/pin.svg +5 -5
  186. package/src/assets/svgIcons/presentation.svg +3 -3
  187. package/src/assets/svgIcons/previous.svg +4 -4
  188. package/src/assets/svgIcons/profile-1.svg +4 -4
  189. package/src/assets/svgIcons/profile.svg +4 -4
  190. package/src/assets/svgIcons/profitability.svg +3 -3
  191. package/src/assets/svgIcons/project_analysis.svg +4 -4
  192. package/src/assets/svgIcons/project_settings.svg +4 -4
  193. package/src/assets/svgIcons/pv.svg +3 -3
  194. package/src/assets/svgIcons/quotations.svg +6 -6
  195. package/src/assets/svgIcons/redo.svg +6 -6
  196. package/src/assets/svgIcons/resizer.svg +5 -5
  197. package/src/assets/svgIcons/roof_layer.svg +3 -3
  198. package/src/assets/svgIcons/rotate_tool.svg +3 -3
  199. package/src/assets/svgIcons/rotate_view.svg +5 -5
  200. package/src/assets/svgIcons/ruler_tool.svg +3 -3
  201. package/src/assets/svgIcons/run_simulation.svg +3 -3
  202. package/src/assets/svgIcons/save.svg +3 -3
  203. package/src/assets/svgIcons/scaling_tool.svg +8 -8
  204. package/src/assets/svgIcons/search.svg +3 -3
  205. package/src/assets/svgIcons/security.svg +3 -3
  206. package/src/assets/svgIcons/settings.svg +3 -3
  207. package/src/assets/svgIcons/show_in_a_new_tab.svg +12 -12
  208. package/src/assets/svgIcons/smartphone.svg +4 -4
  209. package/src/assets/svgIcons/solar_calc.svg +13 -13
  210. package/src/assets/svgIcons/sorting.svg +4 -4
  211. package/src/assets/svgIcons/split.svg +12 -12
  212. package/src/assets/svgIcons/start_of_the_list.svg +5 -5
  213. package/src/assets/svgIcons/strikethrough.svg +4 -4
  214. package/src/assets/svgIcons/subscriptions.svg +3 -3
  215. package/src/assets/svgIcons/subsidies-1.svg +5 -5
  216. package/src/assets/svgIcons/subsidies-2.svg +3 -3
  217. package/src/assets/svgIcons/subsidies.svg +3 -3
  218. package/src/assets/svgIcons/subtract_icon.svg +3 -3
  219. package/src/assets/svgIcons/suitcase.svg +3 -3
  220. package/src/assets/svgIcons/summer.svg +3 -3
  221. package/src/assets/svgIcons/template_icon_not_clickable.svg +6 -6
  222. package/src/assets/svgIcons/transfer.svg +4 -4
  223. package/src/assets/svgIcons/trim_tool.svg +4 -4
  224. package/src/assets/svgIcons/truck.svg +3 -3
  225. package/src/assets/svgIcons/underlined.svg +3 -3
  226. package/src/assets/svgIcons/undo.svg +6 -6
  227. package/src/assets/svgIcons/uparrow.svg +3 -3
  228. package/src/assets/svgIcons/update.svg +3 -3
  229. package/src/assets/svgIcons/upload_avatar-1.svg +12 -12
  230. package/src/assets/svgIcons/upload_avatar.svg +5 -5
  231. package/src/assets/svgIcons/upload_image.svg +8 -8
  232. package/src/assets/svgIcons/upload_image_tool.svg +7 -7
  233. package/src/assets/svgIcons/variants.svg +6 -6
  234. package/src/assets/svgIcons/vertical_tool.svg +3 -3
  235. package/src/assets/svgIcons/virtual_storage.svg +4 -4
  236. package/src/assets/svgIcons/warning.svg +4 -4
  237. package/src/assets/svgIcons/way.svg +5 -5
  238. package/src/assets/svgIcons/wifi.svg +3 -3
  239. package/src/assets/svgIcons/winter.svg +3 -3
  240. package/src/assets/svgIcons/workflow_template.svg +11 -11
  241. package/src/assets/theme.js +41 -41
  242. package/src/components/addNewButton/AddNewButton.stories.js +24 -24
  243. package/src/components/addNewButton/index.vue +61 -61
  244. package/src/components/banner/actionBanner/index.vue +64 -64
  245. package/src/components/banner/banner/banner.stories.js +31 -31
  246. package/src/components/banner/banner/index.vue +188 -188
  247. package/src/components/banner/infoBanner/index.vue +57 -57
  248. package/src/components/buttons/buttonIcon/index.vue +145 -145
  249. package/src/components/buttons/closeButton/CloseButton.stories.js +29 -29
  250. package/src/components/buttons/closeButton/index.vue +61 -61
  251. package/src/components/buttons/mainButton/index.vue +144 -140
  252. package/src/components/card/index.vue +96 -96
  253. package/src/components/collapsableInfoText/index.vue +127 -127
  254. package/src/components/deleteIcon/DeleteIcon.stories.js +29 -29
  255. package/src/components/deleteIcon/index.vue +78 -78
  256. package/src/components/draggableInputHandle/index.vue +46 -46
  257. package/src/components/dropdown/Dropdown.stories.js +53 -53
  258. package/src/components/dropdown/index.vue +138 -138
  259. package/src/components/errorMessage/index.vue +64 -64
  260. package/src/components/filter/filterSettings.vue +639 -639
  261. package/src/components/filter/index.vue +154 -154
  262. package/src/components/filter/parentDropdown.vue +91 -91
  263. package/src/components/icon/Icons.stories.js +41 -41
  264. package/src/components/icon/iconCache.js +23 -23
  265. package/src/components/icon/iconCollection.vue +68 -68
  266. package/src/components/icon/index.vue +140 -140
  267. package/src/components/iconWrapper/index.vue +179 -179
  268. package/src/components/infoCard/index.vue +40 -40
  269. package/src/components/infoText/index.vue +170 -170
  270. package/src/components/inputs/checkbox/Checkbox.stories.js +57 -57
  271. package/src/components/inputs/checkbox/index.vue +224 -224
  272. package/src/components/inputs/inputNumber/InputNumber.stories.js +150 -150
  273. package/src/components/inputs/inputNumber/index.vue +789 -784
  274. package/src/components/inputs/inputNumberQuestion/index.vue +218 -218
  275. package/src/components/inputs/inputText/InputText.stories.js +75 -75
  276. package/src/components/inputs/inputText/index.vue +376 -376
  277. package/src/components/inputs/radioButton/RadioButton.stories.js +58 -58
  278. package/src/components/inputs/radioButton/index.vue +273 -273
  279. package/src/components/inputs/searchInput/SearchInput.stories.js +40 -40
  280. package/src/components/inputs/searchInput/index.vue +151 -151
  281. package/src/components/inputs/select/index.vue +908 -907
  282. package/src/components/inputs/select/option/index.vue +148 -148
  283. package/src/components/inputs/select/select.stories.js +58 -58
  284. package/src/components/inputs/slider/index.vue +126 -126
  285. package/src/components/inputs/switchField/index.vue +254 -254
  286. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +127 -127
  287. package/src/components/inputs/textAreaInput/index.vue +198 -198
  288. package/src/components/inputs/toggle/Toggle.stories.js +77 -77
  289. package/src/components/inputs/toggle/index.vue +285 -285
  290. package/src/components/label/index.vue +99 -99
  291. package/src/components/markerItem/index.vue +88 -88
  292. package/src/components/modals/actionModal/index.vue +64 -64
  293. package/src/components/modals/infoModal/index.vue +52 -52
  294. package/src/components/modals/modal/index.vue +188 -188
  295. package/src/components/modals/modal/modal.stories.js +31 -31
  296. package/src/components/navigationTabs/index.vue +114 -114
  297. package/src/components/pageSubtitle/index.vue +67 -67
  298. package/src/components/pageTitle/index.vue +68 -68
  299. package/src/components/pagination/index.vue +148 -148
  300. package/src/components/progressBar/index.vue +125 -125
  301. package/src/components/projectMarker/index.vue +300 -300
  302. package/src/components/rangeSlider/Slider.vue +573 -573
  303. package/src/components/rangeSlider/index.vue +517 -517
  304. package/src/components/rangeSlider/utils/dom.js +49 -49
  305. package/src/components/rangeSlider/utils/fns.js +26 -26
  306. package/src/components/selectedOptions/index.vue +145 -145
  307. package/src/components/sideMenu/index.vue +270 -270
  308. package/src/components/spinner/index.vue +68 -68
  309. package/src/components/tableDropdown/index.vue +638 -638
  310. package/src/components/tables/mainTable/exampleNested.vue +328 -328
  311. package/src/components/tables/mainTable/index.vue +510 -510
  312. package/src/components/tables/viewTable/index.vue +195 -195
  313. package/src/components/tabsHeader/index.vue +83 -83
  314. package/src/components/threeDots/index.vue +413 -413
  315. package/src/components/videoThumbnail/index.vue +103 -103
  316. package/src/components/videoThumbnail/videoThumbnail.stories.js +33 -33
  317. package/src/helpers/currencyMapping.js +28 -28
  318. package/src/helpers/numberConverter.js +103 -103
  319. package/src/helpers/translateLang.js +128 -128
  320. package/src/main.js +6 -6
  321. package/src/mixins/inputValidations.js +97 -97
  322. package/src/utils/index.js +12 -0
@@ -1,784 +1,789 @@
1
- <template>
2
- <Container :align-items="alignItems" :input-width="inputWidth">
3
- <LabelSlotWrapper
4
- v-if="hasLabelSlot"
5
- :align-items="alignItems"
6
- :border-color="borderColor"
7
- :is-error="isError"
8
- :is-interactive="isInteractive"
9
- :no-border="noBorder"
10
- @mousedown="initInteraction"
11
- >
12
- <slot name="label"></slot>
13
- </LabelSlotWrapper>
14
-
15
- <LabelWrapper v-if="labelText">
16
- <LabelText :data-id="labelDataId" :label-font-color="labelFontColor">
17
- {{ labelText }}
18
- </LabelText>
19
-
20
- <InfoText
21
- v-if="labelInfoText"
22
- :align-arrow="labelInfoAlign"
23
- :text="labelInfoText"
24
- />
25
- </LabelWrapper>
26
- <InputWrapper>
27
- <InputContainer
28
- v-bind="$attrs"
29
- ref="inputField1"
30
- :align-items="alignItems"
31
- :background-color="backgroundColor"
32
- :border-color="borderColor"
33
- :data-id="inputDataId"
34
- :disabled="disabled"
35
- :font-color="fontColor"
36
- :font-size="fontSize"
37
- :has-label-slot="hasLabelSlot"
38
- :has-slot="hasSlot"
39
- :has-unit="unitName && !!unitName.length"
40
- :input-height="inputHeight"
41
- :is-disabled="disabled"
42
- :is-error="isError"
43
- :is-interactive="isInteractive"
44
- :min-width="minWidth"
45
- :no-border="noBorder"
46
- :placeholder="displayedPlaceholder"
47
- :show-linear-unit-name="showLinearUnitName"
48
- :slot-size="slotSize"
49
- :text-align="textAlign"
50
- :value="formatWithCurrency(value)"
51
- @blur="onInputBlur($event)"
52
- @focus="focusInput()"
53
- @input="onInput($event)"
54
- @keyup.enter="onEnterPress"
55
- />
56
- <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
57
- <slot></slot>
58
- </SlotContainer>
59
-
60
- <UnitContainer
61
- v-if="unitName && showLinearUnitName && !hasSlot"
62
- :has-length="!!textInput.length"
63
- :is-error="isError"
64
- >{{ unitName }}</UnitContainer
65
- >
66
- <IconWrapper
67
- v-if="isError && !showLinearUnitName"
68
- :margin-right="showSelect ? selectWidth : 0"
69
- size="16px"
70
- >
71
- <Icon cursor="default" name="warning" size="16px" />
72
- </IconWrapper>
73
- <SelectWrapper v-if="showSelect">
74
- <Divider />
75
- <Select
76
- :select-width="`${selectWidth}px`"
77
- :show-border="false"
78
- @input-change="$emit('select-change', $event)"
79
- >
80
- <template #selector>
81
- <SelectText>{{ getSelectValue }}</SelectText>
82
- </template>
83
- <template #dropdown>
84
- <Option
85
- v-for="item in selectOptions"
86
- :key="item.value"
87
- :value="item.value"
88
- >
89
- {{ item.label }}
90
- </Option>
91
- </template>
92
- </Select>
93
- </SelectWrapper>
94
- </InputWrapper>
95
- <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
96
- </Container>
97
- </template>
98
-
99
- <script>
100
- // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
101
- //This component should be used for questions with input fields only
102
- //How to use:
103
- // <input-number
104
- // placeholder="Enter distance"
105
- // :isError="false" //default is false
106
- // inputWidth="150px" //by default, this is 100%
107
- // minWidth="100px"
108
- // :numberPrecision="3"
109
- // minDecimals="2"
110
- // unitName="pc"
111
- // :value="inputValue" //required -- String
112
- // @input-change="onInputChange($event)" //required
113
- // @on-enter-click="onInputSubmit()"
114
- // :errorMessage="Enter a number between 1 and 10"
115
- // :disabled="false"
116
- // :noBorder="true"
117
- // textAlign="left" // "left, right, center"
118
- // :showLinearUnitName="true"
119
- // fontSize="13px"
120
- // labelText="Number of Modules"
121
- // labelInfoText="Here is some information for you..."
122
- // labelInfoAlign="left"
123
- // :minNumber="0"
124
- // fontColor="blue"
125
- // >
126
- //<template name=label><img>....</template>
127
- //</inputNumber>
128
- import styled from 'vue3-styled-components'
129
- import {
130
- stringToNumber,
131
- numberToString,
132
- } from '../../../helpers/numberConverter'
133
- import InfoText from '../../infoText'
134
- import ErrorMessage from '../../errorMessage'
135
- import Select from '../select'
136
- import Option from '../select/option'
137
- import warningIcon from '../../../assets/icons/error_icon.png'
138
- import Icon from '../../icon'
139
-
140
- const inputProps = {
141
- isError: Boolean,
142
- hasUnit: Boolean,
143
- inputWidth: String,
144
- minWidth: String,
145
- isDisabled: Boolean,
146
- noBorder: Boolean,
147
- textAlign: String,
148
- fontSize: String,
149
- fontColor: String,
150
- backgroundColor: String,
151
- hasSlot: Boolean,
152
- hasLabelSlot: Boolean,
153
- slotSize: String,
154
- inputHeight: String,
155
- isInteractive: Boolean,
156
- alignItems: String,
157
- labelFontColor: String,
158
- borderColor: String,
159
- showLinearUnitName: Boolean,
160
- }
161
-
162
- const Container = styled('div', inputProps)`
163
- width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
164
- position: relative;
165
- display: grid;
166
- grid-template-columns: ${(props) =>
167
- props.alignItems === 'vertical' ? '1fr' : 'auto 1fr'};
168
- `
169
-
170
- const InputContainer = styled('input', inputProps)`
171
- border: ${(props) =>
172
- props.isError
173
- ? '1px solid ' + props.theme.colors.red
174
- : props.noBorder
175
- ? 'none'
176
- : props.borderColor
177
- ? props.theme.colors[props.borderColor]
178
- ? '1px solid ' + props.theme.colors[props.borderColor]
179
- : '1px solid ' + props.borderColor
180
- : '1px solid ' + props.theme.colors.grey4};
181
- height: ${(props) => props.inputHeight};
182
- max-height: ${(props) => props.inputHeight};
183
- padding: 0 10px;
184
- padding-right: ${({ slotSize, isError, showLinearUnitName }) =>
185
- slotSize
186
- ? isError && !showLinearUnitName
187
- ? 'calc(' + slotSize + ' + 24px)'
188
- : 'calc(' + slotSize + ' + 10px)'
189
- : isError && !showLinearUnitName
190
- ? '24px'
191
- : '5px'};
192
- border-radius: ${(props) =>
193
- props.isInteractive && props.alignItems != 'vertical'
194
- ? '0 4px 4px 0'
195
- : '4px'};
196
- text-align: ${(props) => props.textAlign};
197
- cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
198
- font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
199
- color: ${(props) =>
200
- props.isError
201
- ? props.theme.colors.grey6
202
- : props.isDisabled
203
- ? props.theme.colors.grey2
204
- : props.fontColor
205
- ? props.fontColor + ' !important'
206
- : props.theme.colors.black};
207
- background-color: ${(props) =>
208
- props.backgroundColor
209
- ? props.backgroundColor + ' !important'
210
- : props.theme.colors.white};
211
- width: ${(props) =>
212
- props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
213
- min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
214
- background-color: ${(props) =>
215
- props.isDisabled ? props.theme.colors.grey5 : '#fff'};
216
- box-sizing: border-box;
217
-
218
- &::placeholder {
219
- color: ${(props) => props.theme.colors.grey2};
220
- }
221
-
222
- &:focus {
223
- outline: none;
224
- }
225
- `
226
-
227
- const InputWrapper = styled.span`
228
- position: relative;
229
- `
230
-
231
- const UnitContainer = styled('span', inputProps)`
232
- border-left: 1px solid
233
- ${(props) =>
234
- props.isError
235
- ? props.theme.colors.red
236
- : props.hasLength
237
- ? props.theme.colors.black
238
- : props.theme.colors.mediumGray};
239
- position: absolute;
240
- right: 10px;
241
- top: 10px;
242
- padding-left: 10px;
243
- text-align: right;
244
- color: ${(props) =>
245
- props.isError
246
- ? props.theme.colors.red
247
- : props.hasLength
248
- ? props.theme.colors.black
249
- : props.theme.colors.mediumGray};
250
- `
251
-
252
- const SlotContainer = styled('span', inputProps)`
253
- text-align: right;
254
- border-left: 1px solid
255
- ${(props) =>
256
- props.isError
257
- ? props.theme.colors.red
258
- : props.hasLength
259
- ? props.theme.colors.black
260
- : props.theme.colors.mediumGray};
261
- position: absolute;
262
- width: ${(props) =>
263
- props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
264
- right: 10px;
265
- top: 10px;
266
- padding-left: 10px;
267
- color: ${(props) =>
268
- props.isError
269
- ? props.theme.colors.red
270
- : props.hasLength
271
- ? props.theme.colors.black
272
- : props.theme.colors.mediumGray};
273
- `
274
-
275
- const LabelWrapper = styled('div', inputProps)`
276
- display: flex;
277
- align-items: center;
278
- gap: 10px;
279
- margin-bottom: 8px;
280
- cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
281
- `
282
- const LabelSlotWrapper = styled('div', inputProps)`
283
- display: flex;
284
- gap: 10px;
285
- align-items: center;
286
- cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
287
- border: ${(props) =>
288
- props.alignItems == 'vertical'
289
- ? 'none'
290
- : props.isError
291
- ? '1px solid ' + props.theme.colors.red
292
- : props.noBorder
293
- ? 'none'
294
- : props.borderColor
295
- ? props.theme.colors[props.borderColor]
296
- ? '1px solid ' + props.theme.colors[props.borderColor]
297
- : '1px solid ' + props.borderColor
298
- : '1px solid ' + props.theme.colors.grey4};
299
- border-radius: 4px 0 0 4px;
300
- border-right: none;
301
- `
302
-
303
- const LabelText = styled('div', inputProps)`
304
- font-size: 13px;
305
- color: ${(props) =>
306
- props.theme.colors[props.labelFontColor]
307
- ? props.theme.colors[props.labelFontColor]
308
- : props.labelFontColor};
309
- font-weight: 700;
310
- `
311
-
312
- const IconAttrs = { size: String, marginRight: Number }
313
- const IconWrapper = styled('div', IconAttrs)`
314
- position: absolute;
315
- top: 0;
316
- bottom: 0;
317
- margin: auto;
318
- right: ${(props) => props.marginRight + 10}px;
319
- height: ${(props) => (props.size ? props.size : 'auto')};
320
- `
321
-
322
- const SelectText = styled.div`
323
- font-size: 13px;
324
- `
325
-
326
- const SelectWrapper = styled.div`
327
- position: absolute;
328
- top: 2px;
329
- right: 2px;
330
- display: flex;
331
- height: 100%;
332
- `
333
-
334
- const Divider = styled.div`
335
- margin-top: 6px;
336
- height: calc(100% - 16px);
337
- width: 1px;
338
- background-color: ${({ theme }) => theme.colors.grey4};
339
- `
340
-
341
- export default {
342
- name: 'InputNumber',
343
- components: {
344
- Container,
345
- InputContainer,
346
- InputWrapper,
347
- UnitContainer,
348
- ErrorMessage,
349
- LabelWrapper,
350
- LabelSlotWrapper,
351
- LabelText,
352
- InfoText,
353
- Icon,
354
- SlotContainer,
355
- IconWrapper,
356
- Select,
357
- Option,
358
- SelectWrapper,
359
- SelectText,
360
- Divider,
361
- },
362
- inheritAttrs: false,
363
- props: {
364
- placeholder: {
365
- required: false,
366
- default: '',
367
- },
368
- isError: {
369
- required: false,
370
- default: false,
371
- },
372
- inputWidth: {
373
- required: false,
374
- default: null,
375
- },
376
- minWidth: {
377
- required: false,
378
- default: null,
379
- },
380
- inputHeight: {
381
- required: false,
382
- default: '40px',
383
- },
384
- value: {
385
- required: true,
386
- default: null,
387
- },
388
- clearInput: {
389
- required: false,
390
- default: false,
391
- },
392
- alignItems: {
393
- required: false,
394
- default: 'vertical',
395
- },
396
- errorMessage: {
397
- required: false,
398
- default: 'Please insert a correct number',
399
- },
400
- numberPrecision: {
401
- required: false,
402
- default: 0,
403
- },
404
- minDecimals: {
405
- required: false,
406
- default: 0,
407
- },
408
- unitName: {
409
- required: false,
410
- default: '',
411
- },
412
- showLinearUnitName: {
413
- required: false,
414
- default: false,
415
- },
416
- disabled: {
417
- required: false,
418
- default: false,
419
- },
420
- noBorder: {
421
- required: false,
422
- default: false,
423
- },
424
- borderColor: {
425
- required: false,
426
- },
427
- textAlign: {
428
- required: false,
429
- default: 'left',
430
- },
431
- fontSize: {
432
- required: false,
433
- default: '13px',
434
- },
435
- isInteractive: {
436
- required: false,
437
- default: false,
438
- },
439
- interactionStep: {
440
- required: false,
441
- default: 1,
442
- },
443
- labelText: {
444
- required: false,
445
- default: null,
446
- },
447
- labelInfoText: {
448
- required: false,
449
- default: null,
450
- },
451
- labelInfoAlign: {
452
- required: false,
453
- default: 'left',
454
- },
455
- defaultNumber: {
456
- required: false,
457
- default: null,
458
- },
459
- minNumber: {
460
- required: false,
461
- default: null,
462
- },
463
- fontColor: {
464
- required: false,
465
- default: null,
466
- },
467
- backgroundColor: {
468
- required: false,
469
- default: null,
470
- },
471
- numberToStringEnabled: {
472
- required: false,
473
- default: true,
474
- },
475
- allowNegative: {
476
- required: false,
477
- default: true,
478
- },
479
- slotSize: {
480
- required: false,
481
- },
482
- labelFontColor: {
483
- required: false,
484
- default: 'eturnityGrey',
485
- },
486
- focus: {
487
- required: false,
488
- default: false,
489
- },
490
- labelDataId: {
491
- required: false,
492
- default: '',
493
- },
494
- inputDataId: {
495
- required: false,
496
- default: '',
497
- },
498
- showSelect: {
499
- type: Boolean,
500
- default: false,
501
- },
502
- selectWidth: {
503
- type: Number,
504
- default: 70,
505
- },
506
- selectOptions: {
507
- type: Array,
508
- default: () => [],
509
- },
510
- selectValue: {
511
- type: [String, Number],
512
- default: null,
513
- },
514
- },
515
- data() {
516
- return {
517
- textInput: '',
518
- isFocused: false,
519
- warningIcon: warningIcon,
520
- }
521
- },
522
- computed: {
523
- displayedPlaceholder() {
524
- if (this.placeholder) return this.placeholder
525
- if (this.defaultNumber)
526
- return `${this.defaultNumber} ${this.unitName ? this.unitName : ''}`
527
- return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
528
- },
529
- hasSlot() {
530
- return !!this.$slots.default
531
- },
532
- hasLabelSlot() {
533
- return !!this.$slots.label
534
- },
535
- getSelectValue() {
536
- const item = this.selectOptions.find(
537
- ({ value }) => value === this.selectValue
538
- )
539
-
540
- return item ? item.label : '-'
541
- },
542
- },
543
- watch: {
544
- focus(value) {
545
- if (value) {
546
- this.focusInput()
547
- }
548
- },
549
- clearInput: function (value) {
550
- if (value) {
551
- // If the value is typed, then we should clear the textInput on Continue
552
- this.textInput = ''
553
- }
554
- },
555
- },
556
- created() {
557
- if (this.value) {
558
- this.textInput = numberToString({
559
- value: this.value,
560
- numberPrecision: this.numberPrecision,
561
- minDecimals: this.minDecimals,
562
- })
563
- } else if (this.defaultNumber !== null) {
564
- this.textInput = numberToString({
565
- value: this.defaultNumber,
566
- numberPrecision: this.numberPrecision,
567
- minDecimals: this.minDecimals,
568
- })
569
- } else if (this.minNumber !== null) {
570
- this.textInput = numberToString({
571
- value: this.minNumber,
572
- numberPrecision: this.numberPrecision,
573
- minDecimals: this.minDecimals,
574
- })
575
- }
576
- },
577
- mounted() {
578
- if (this.focus) {
579
- this.focusInput()
580
- }
581
- },
582
- methods: {
583
- onEnterPress() {
584
- this.$emit('on-enter-click')
585
- this.$refs.inputField1.$el.blur()
586
- },
587
- onChangeHandler(event) {
588
- if (isNaN(event) || event === '') {
589
- event = this.defaultNumber
590
- ? this.defaultNumber
591
- : this.minNumber || this.minNumber === 0
592
- ? this.minNumber
593
- : event
594
- }
595
- if (!this.allowNegative) {
596
- event = Math.abs(event)
597
- }
598
- event = parseFloat(event)
599
- // Need to return an integer rather than a string
600
- this.$emit('input-change', event)
601
- },
602
- onEvaluateCode(event) {
603
- // function to perform math on the code
604
- // filter the string in case of any malicious content
605
- const val = event.target.value
606
- let filtered = val.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
607
- filtered = filtered.split(/([-+*/()])/)
608
- let formatted = filtered.map((item) => {
609
- if (
610
- item === '+' ||
611
- item === '-' ||
612
- item === '*' ||
613
- item === '/' ||
614
- item === '(' ||
615
- item === ')' ||
616
- item === ''
617
- ) {
618
- return item
619
- } else {
620
- let num = stringToNumber({
621
- value: item,
622
- numberPrecision: false,
623
- minDecimals: this.minDecimals,
624
- })
625
- return num
626
- }
627
- })
628
- let evaluated
629
- formatted = this.removeStringItemsAfterLastNumber(formatted)
630
- evaluated = eval(formatted.join(' '))
631
- if (typeof evaluated === 'string') {
632
- evaluated = stringToNumber({
633
- value: evaluated,
634
- numberPrecision: this.numberPrecision,
635
- minDecimals: this.minDecimals,
636
- })
637
- } else if (typeof evaluated === 'number') {
638
- evaluated = evaluated.toFixed(this.numberPrecision)
639
- }
640
- return evaluated
641
- },
642
- removeStringItemsAfterLastNumber(array) {
643
- // fixed in EPDM-6487, in order to prevent 'Unexpected end of input'
644
- let lastNumberIndex = -1
645
- // Find the index of the last number in the array
646
- for (let i = array.length - 1; i >= 0; i--) {
647
- if (typeof array[i] === 'number') {
648
- lastNumberIndex = i
649
- break
650
- }
651
- }
652
- // if there are no numbers, return an empty array
653
- if (lastNumberIndex === -1) {
654
- return []
655
- }
656
- // Remove non-numeric items after the last number
657
- if (lastNumberIndex !== -1) {
658
- const newArray = array.slice(0, lastNumberIndex + 1)
659
- return newArray
660
- }
661
- return array
662
- },
663
- onInput(event) {
664
- if (!this.isFocused) {
665
- return
666
- }
667
- if (event.target.value === '') {
668
- this.$emit('on-input', '')
669
- }
670
- let evaluatedVal
671
- try {
672
- evaluatedVal = this.onEvaluateCode(event)
673
- } finally {
674
- if (evaluatedVal && this.value != evaluatedVal) {
675
- this.$emit('on-input', evaluatedVal)
676
- }
677
- }
678
- },
679
- onInputBlur(e) {
680
- this.isFocused = false
681
- let value = e.target.value
682
- let evaluatedInput = this.onEvaluateCode(e)
683
- this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
684
- if ((evaluatedInput && value.length) || this.minNumber !== null) {
685
- this.textInput = numberToString({
686
- value:
687
- evaluatedInput && value.length
688
- ? evaluatedInput
689
- : this.defaultNumber
690
- ? this.defaultNumber
691
- : this.minNumber,
692
- numberPrecision: this.numberPrecision,
693
- minDecimals: this.minDecimals,
694
- })
695
- }
696
- let adjustedMinValue =
697
- evaluatedInput && evaluatedInput.length
698
- ? evaluatedInput
699
- : this.defaultNumber
700
- ? this.defaultNumber
701
- : this.minNumber || this.minNumber === 0
702
- ? this.minNumber
703
- : ''
704
- this.$emit('input-blur', adjustedMinValue)
705
- },
706
- focusInput() {
707
- if (this.disabled) {
708
- return
709
- }
710
- this.isFocused = true
711
- this.$nextTick(() => {
712
- this.$refs.inputField1.$el.select()
713
- })
714
- this.$emit('input-focus')
715
- },
716
- blurInput() {
717
- if (this.disabled) {
718
- return
719
- }
720
- this.isFocused = false
721
- this.$nextTick(() => {
722
- this.$refs.inputField1.$el.blur()
723
- })
724
- },
725
- formatWithCurrency(value) {
726
- let adjustedMinValue =
727
- value || value === 0
728
- ? value
729
- : this.defaultNumber
730
- ? this.defaultNumber
731
- : this.minNumber || this.minNumber === 0
732
- ? this.minNumber
733
- : ''
734
- if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
735
- let input = this.numberToStringEnabled
736
- ? numberToString({
737
- value: adjustedMinValue,
738
- numberPrecision: this.numberPrecision,
739
- minDecimals: this.minDecimals,
740
- })
741
- : adjustedMinValue
742
- let unit = this.showLinearUnitName ? '' : this.unitName
743
- //return input + ' ' + unit
744
- return input + ' ' + unit
745
- } else if (!adjustedMinValue && adjustedMinValue !== 0) {
746
- return ''
747
- } else {
748
- return this.numberToStringEnabled
749
- ? numberToString({
750
- value: adjustedMinValue,
751
- numberPrecision: this.numberPrecision,
752
- minDecimals: this.minDecimals,
753
- })
754
- : adjustedMinValue
755
- }
756
- },
757
- initInteraction(e) {
758
- this.focusInput()
759
- e.preventDefault()
760
- window.addEventListener('mousemove', this.interact, false)
761
- window.addEventListener('mouseup', this.stopInteract, false)
762
- },
763
- interact(e) {
764
- e.preventDefault()
765
- let value = parseFloat(this.value || 0)
766
- value += parseFloat(this.interactionStep) * parseInt(e.movementX)
767
- this.$emit('on-input-drag', value)
768
-
769
- this.textInput = numberToString({
770
- value: value && value.length ? value : this.minNumber,
771
- numberPrecision: this.numberPrecision,
772
- minDecimals: this.minDecimals,
773
- })
774
- //this.value=value
775
- },
776
- stopInteract(e) {
777
- e.preventDefault()
778
- window.removeEventListener('mousemove', this.interact, false)
779
- window.removeEventListener('mouseup', this.stopInteract, false)
780
- this.blurInput()
781
- },
782
- },
783
- }
784
- </script>
1
+ <template>
2
+ <Container :align-items="alignItems" :input-width="inputWidth">
3
+ <LabelSlotWrapper
4
+ v-if="hasLabelSlot"
5
+ :align-items="alignItems"
6
+ :border-color="borderColor"
7
+ :is-error="isError"
8
+ :is-interactive="isInteractive"
9
+ :no-border="noBorder"
10
+ @mousedown="initInteraction"
11
+ >
12
+ <slot name="label"></slot>
13
+ </LabelSlotWrapper>
14
+
15
+ <LabelWrapper v-if="labelText">
16
+ <LabelText :data-id="labelDataId" :label-font-color="labelFontColor">
17
+ {{ labelText }}
18
+ </LabelText>
19
+
20
+ <InfoText
21
+ v-if="labelInfoText"
22
+ :align-arrow="labelInfoAlign"
23
+ :text="labelInfoText"
24
+ />
25
+ </LabelWrapper>
26
+ <InputWrapper>
27
+ <InputContainer
28
+ v-bind="$attrs"
29
+ ref="inputField1"
30
+ :align-items="alignItems"
31
+ :background-color="backgroundColor"
32
+ :border-color="borderColor"
33
+ :data-id="inputDataId"
34
+ :disabled="disabled"
35
+ :font-color="fontColor"
36
+ :font-size="fontSize"
37
+ :has-label-slot="hasLabelSlot"
38
+ :has-slot="hasSlot"
39
+ :has-unit="unitName && !!unitName.length"
40
+ :input-height="inputHeight"
41
+ :is-disabled="disabled"
42
+ :is-error="isError"
43
+ :is-interactive="isInteractive"
44
+ :min-width="minWidth"
45
+ :no-border="noBorder"
46
+ :placeholder="displayedPlaceholder"
47
+ :show-linear-unit-name="showLinearUnitName"
48
+ :slot-size="slotSize"
49
+ :text-align="textAlign"
50
+ :value="formatWithCurrency(value)"
51
+ @blur="onInputBlur($event)"
52
+ @focus="focusInput()"
53
+ @input="onInput($event)"
54
+ @keyup.enter="onEnterPress"
55
+ />
56
+ <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
57
+ <slot></slot>
58
+ </SlotContainer>
59
+
60
+ <UnitContainer
61
+ v-if="unitName && showLinearUnitName && !hasSlot"
62
+ :has-length="!!textInput.length"
63
+ :is-error="isError"
64
+ >{{ unitName }}</UnitContainer
65
+ >
66
+ <IconWrapper
67
+ v-if="isError && !showLinearUnitName"
68
+ :margin-right="showSelect ? selectWidth : 0"
69
+ size="16px"
70
+ >
71
+ <Icon cursor="default" name="warning" size="16px" />
72
+ </IconWrapper>
73
+ <SelectWrapper v-if="showSelect">
74
+ <Divider />
75
+ <Select
76
+ :disabled="isSelectDisabled"
77
+ :select-width="`${selectWidth}px`"
78
+ :show-border="false"
79
+ @input-change="$emit('select-change', $event)"
80
+ >
81
+ <template #selector>
82
+ <SelectText>{{ getSelectValue }}</SelectText>
83
+ </template>
84
+ <template #dropdown>
85
+ <Option
86
+ v-for="item in selectOptions"
87
+ :key="item.value"
88
+ :value="item.value"
89
+ >
90
+ {{ item.label }}
91
+ </Option>
92
+ </template>
93
+ </Select>
94
+ </SelectWrapper>
95
+ </InputWrapper>
96
+ <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
97
+ </Container>
98
+ </template>
99
+
100
+ <script>
101
+ // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
102
+ //This component should be used for questions with input fields only
103
+ //How to use:
104
+ // <input-number
105
+ // placeholder="Enter distance"
106
+ // :isError="false" //default is false
107
+ // inputWidth="150px" //by default, this is 100%
108
+ // minWidth="100px"
109
+ // :numberPrecision="3"
110
+ // minDecimals="2"
111
+ // unitName="pc"
112
+ // :value="inputValue" //required -- String
113
+ // @input-change="onInputChange($event)" //required
114
+ // @on-enter-click="onInputSubmit()"
115
+ // :errorMessage="Enter a number between 1 and 10"
116
+ // :disabled="false"
117
+ // :noBorder="true"
118
+ // textAlign="left" // "left, right, center"
119
+ // :showLinearUnitName="true"
120
+ // fontSize="13px"
121
+ // labelText="Number of Modules"
122
+ // labelInfoText="Here is some information for you..."
123
+ // labelInfoAlign="left"
124
+ // :minNumber="0"
125
+ // fontColor="blue"
126
+ // >
127
+ //<template name=label><img>....</template>
128
+ //</inputNumber>
129
+ import styled from 'vue3-styled-components'
130
+ import {
131
+ stringToNumber,
132
+ numberToString,
133
+ } from '../../../helpers/numberConverter'
134
+ import InfoText from '../../infoText'
135
+ import ErrorMessage from '../../errorMessage'
136
+ import Select from '../select'
137
+ import Option from '../select/option'
138
+ import warningIcon from '../../../assets/icons/error_icon.png'
139
+ import Icon from '../../icon'
140
+
141
+ const inputProps = {
142
+ isError: Boolean,
143
+ hasUnit: Boolean,
144
+ inputWidth: String,
145
+ minWidth: String,
146
+ isDisabled: Boolean,
147
+ noBorder: Boolean,
148
+ textAlign: String,
149
+ fontSize: String,
150
+ fontColor: String,
151
+ backgroundColor: String,
152
+ hasSlot: Boolean,
153
+ hasLabelSlot: Boolean,
154
+ slotSize: String,
155
+ inputHeight: String,
156
+ isInteractive: Boolean,
157
+ alignItems: String,
158
+ labelFontColor: String,
159
+ borderColor: String,
160
+ showLinearUnitName: Boolean,
161
+ }
162
+
163
+ const Container = styled('div', inputProps)`
164
+ width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
165
+ position: relative;
166
+ display: grid;
167
+ grid-template-columns: ${(props) =>
168
+ props.alignItems === 'vertical' ? '1fr' : 'auto 1fr'};
169
+ `
170
+
171
+ const InputContainer = styled('input', inputProps)`
172
+ border: ${(props) =>
173
+ props.isError
174
+ ? '1px solid ' + props.theme.colors.red
175
+ : props.noBorder
176
+ ? 'none'
177
+ : props.borderColor
178
+ ? props.theme.colors[props.borderColor]
179
+ ? '1px solid ' + props.theme.colors[props.borderColor]
180
+ : '1px solid ' + props.borderColor
181
+ : '1px solid ' + props.theme.colors.grey4};
182
+ height: ${(props) => props.inputHeight};
183
+ max-height: ${(props) => props.inputHeight};
184
+ padding: 0 10px;
185
+ padding-right: ${({ slotSize, isError, showLinearUnitName }) =>
186
+ slotSize
187
+ ? isError && !showLinearUnitName
188
+ ? 'calc(' + slotSize + ' + 24px)'
189
+ : 'calc(' + slotSize + ' + 10px)'
190
+ : isError && !showLinearUnitName
191
+ ? '24px'
192
+ : '5px'};
193
+ border-radius: ${(props) =>
194
+ props.isInteractive && props.alignItems != 'vertical'
195
+ ? '0 4px 4px 0'
196
+ : '4px'};
197
+ text-align: ${(props) => props.textAlign};
198
+ cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
199
+ font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
200
+ color: ${(props) =>
201
+ props.isError
202
+ ? props.theme.colors.grey6
203
+ : props.isDisabled
204
+ ? props.theme.colors.grey2
205
+ : props.fontColor
206
+ ? props.fontColor + ' !important'
207
+ : props.theme.colors.black};
208
+ background-color: ${(props) =>
209
+ props.backgroundColor
210
+ ? props.backgroundColor + ' !important'
211
+ : props.theme.colors.white};
212
+ width: ${(props) =>
213
+ props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
214
+ min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
215
+ background-color: ${(props) =>
216
+ props.isDisabled ? props.theme.colors.grey5 : '#fff'};
217
+ box-sizing: border-box;
218
+
219
+ &::placeholder {
220
+ color: ${(props) => props.theme.colors.grey2};
221
+ }
222
+
223
+ &:focus {
224
+ outline: none;
225
+ }
226
+ `
227
+
228
+ const InputWrapper = styled.span`
229
+ position: relative;
230
+ `
231
+
232
+ const UnitContainer = styled('span', inputProps)`
233
+ border-left: 1px solid
234
+ ${(props) =>
235
+ props.isError
236
+ ? props.theme.colors.red
237
+ : props.hasLength
238
+ ? props.theme.colors.black
239
+ : props.theme.colors.mediumGray};
240
+ position: absolute;
241
+ right: 10px;
242
+ top: 10px;
243
+ padding-left: 10px;
244
+ text-align: right;
245
+ color: ${(props) =>
246
+ props.isError
247
+ ? props.theme.colors.red
248
+ : props.hasLength
249
+ ? props.theme.colors.black
250
+ : props.theme.colors.mediumGray};
251
+ `
252
+
253
+ const SlotContainer = styled('span', inputProps)`
254
+ text-align: right;
255
+ border-left: 1px solid
256
+ ${(props) =>
257
+ props.isError
258
+ ? props.theme.colors.red
259
+ : props.hasLength
260
+ ? props.theme.colors.black
261
+ : props.theme.colors.mediumGray};
262
+ position: absolute;
263
+ width: ${(props) =>
264
+ props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
265
+ right: 10px;
266
+ top: 10px;
267
+ padding-left: 10px;
268
+ color: ${(props) =>
269
+ props.isError
270
+ ? props.theme.colors.red
271
+ : props.hasLength
272
+ ? props.theme.colors.black
273
+ : props.theme.colors.mediumGray};
274
+ `
275
+
276
+ const LabelWrapper = styled('div', inputProps)`
277
+ display: flex;
278
+ align-items: center;
279
+ gap: 10px;
280
+ margin-bottom: 8px;
281
+ cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
282
+ `
283
+ const LabelSlotWrapper = styled('div', inputProps)`
284
+ display: flex;
285
+ gap: 10px;
286
+ align-items: center;
287
+ cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
288
+ border: ${(props) =>
289
+ props.alignItems == 'vertical'
290
+ ? 'none'
291
+ : props.isError
292
+ ? '1px solid ' + props.theme.colors.red
293
+ : props.noBorder
294
+ ? 'none'
295
+ : props.borderColor
296
+ ? props.theme.colors[props.borderColor]
297
+ ? '1px solid ' + props.theme.colors[props.borderColor]
298
+ : '1px solid ' + props.borderColor
299
+ : '1px solid ' + props.theme.colors.grey4};
300
+ border-radius: 4px 0 0 4px;
301
+ border-right: none;
302
+ `
303
+
304
+ const LabelText = styled('div', inputProps)`
305
+ font-size: 13px;
306
+ color: ${(props) =>
307
+ props.theme.colors[props.labelFontColor]
308
+ ? props.theme.colors[props.labelFontColor]
309
+ : props.labelFontColor};
310
+ font-weight: 700;
311
+ `
312
+
313
+ const IconAttrs = { size: String, marginRight: Number }
314
+ const IconWrapper = styled('div', IconAttrs)`
315
+ position: absolute;
316
+ top: 0;
317
+ bottom: 0;
318
+ margin: auto;
319
+ right: ${(props) => props.marginRight + 10}px;
320
+ height: ${(props) => (props.size ? props.size : 'auto')};
321
+ `
322
+
323
+ const SelectText = styled.div`
324
+ font-size: 13px;
325
+ `
326
+
327
+ const SelectWrapper = styled.div`
328
+ position: absolute;
329
+ top: 2px;
330
+ right: 2px;
331
+ display: flex;
332
+ height: 100%;
333
+ `
334
+
335
+ const Divider = styled.div`
336
+ margin-top: 6px;
337
+ height: calc(100% - 16px);
338
+ width: 1px;
339
+ background-color: ${({ theme }) => theme.colors.grey4};
340
+ `
341
+
342
+ export default {
343
+ name: 'InputNumber',
344
+ components: {
345
+ Container,
346
+ InputContainer,
347
+ InputWrapper,
348
+ UnitContainer,
349
+ ErrorMessage,
350
+ LabelWrapper,
351
+ LabelSlotWrapper,
352
+ LabelText,
353
+ InfoText,
354
+ Icon,
355
+ SlotContainer,
356
+ IconWrapper,
357
+ Select,
358
+ Option,
359
+ SelectWrapper,
360
+ SelectText,
361
+ Divider,
362
+ },
363
+ inheritAttrs: false,
364
+ props: {
365
+ placeholder: {
366
+ required: false,
367
+ default: '',
368
+ },
369
+ isError: {
370
+ required: false,
371
+ default: false,
372
+ },
373
+ inputWidth: {
374
+ required: false,
375
+ default: null,
376
+ },
377
+ minWidth: {
378
+ required: false,
379
+ default: null,
380
+ },
381
+ inputHeight: {
382
+ required: false,
383
+ default: '40px',
384
+ },
385
+ value: {
386
+ required: true,
387
+ default: null,
388
+ },
389
+ clearInput: {
390
+ required: false,
391
+ default: false,
392
+ },
393
+ alignItems: {
394
+ required: false,
395
+ default: 'vertical',
396
+ },
397
+ errorMessage: {
398
+ required: false,
399
+ default: 'Please insert a correct number',
400
+ },
401
+ numberPrecision: {
402
+ required: false,
403
+ default: 0,
404
+ },
405
+ minDecimals: {
406
+ required: false,
407
+ default: 0,
408
+ },
409
+ unitName: {
410
+ required: false,
411
+ default: '',
412
+ },
413
+ showLinearUnitName: {
414
+ required: false,
415
+ default: false,
416
+ },
417
+ disabled: {
418
+ required: false,
419
+ default: false,
420
+ },
421
+ noBorder: {
422
+ required: false,
423
+ default: false,
424
+ },
425
+ borderColor: {
426
+ required: false,
427
+ },
428
+ textAlign: {
429
+ required: false,
430
+ default: 'left',
431
+ },
432
+ fontSize: {
433
+ required: false,
434
+ default: '13px',
435
+ },
436
+ isInteractive: {
437
+ required: false,
438
+ default: false,
439
+ },
440
+ interactionStep: {
441
+ required: false,
442
+ default: 1,
443
+ },
444
+ labelText: {
445
+ required: false,
446
+ default: null,
447
+ },
448
+ labelInfoText: {
449
+ required: false,
450
+ default: null,
451
+ },
452
+ labelInfoAlign: {
453
+ required: false,
454
+ default: 'left',
455
+ },
456
+ defaultNumber: {
457
+ required: false,
458
+ default: null,
459
+ },
460
+ minNumber: {
461
+ required: false,
462
+ default: null,
463
+ },
464
+ fontColor: {
465
+ required: false,
466
+ default: null,
467
+ },
468
+ backgroundColor: {
469
+ required: false,
470
+ default: null,
471
+ },
472
+ numberToStringEnabled: {
473
+ required: false,
474
+ default: true,
475
+ },
476
+ allowNegative: {
477
+ required: false,
478
+ default: true,
479
+ },
480
+ slotSize: {
481
+ required: false,
482
+ },
483
+ labelFontColor: {
484
+ required: false,
485
+ default: 'eturnityGrey',
486
+ },
487
+ focus: {
488
+ required: false,
489
+ default: false,
490
+ },
491
+ labelDataId: {
492
+ required: false,
493
+ default: '',
494
+ },
495
+ inputDataId: {
496
+ required: false,
497
+ default: '',
498
+ },
499
+ showSelect: {
500
+ type: Boolean,
501
+ default: false,
502
+ },
503
+ selectWidth: {
504
+ type: Number,
505
+ default: 70,
506
+ },
507
+ selectOptions: {
508
+ type: Array,
509
+ default: () => [],
510
+ },
511
+ selectValue: {
512
+ type: [String, Number],
513
+ default: null,
514
+ },
515
+ isSelectDisabled: {
516
+ type: Boolean,
517
+ default: false,
518
+ },
519
+ },
520
+ data() {
521
+ return {
522
+ textInput: '',
523
+ isFocused: false,
524
+ warningIcon: warningIcon,
525
+ }
526
+ },
527
+ computed: {
528
+ displayedPlaceholder() {
529
+ if (this.placeholder) return this.placeholder
530
+ if (this.defaultNumber)
531
+ return `${this.defaultNumber} ${this.unitName ? this.unitName : ''}`
532
+ return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
533
+ },
534
+ hasSlot() {
535
+ return !!this.$slots.default
536
+ },
537
+ hasLabelSlot() {
538
+ return !!this.$slots.label
539
+ },
540
+ getSelectValue() {
541
+ const item = this.selectOptions.find(
542
+ ({ value }) => value === this.selectValue
543
+ )
544
+
545
+ return item ? item.label : '-'
546
+ },
547
+ },
548
+ watch: {
549
+ focus(value) {
550
+ if (value) {
551
+ this.focusInput()
552
+ }
553
+ },
554
+ clearInput: function (value) {
555
+ if (value) {
556
+ // If the value is typed, then we should clear the textInput on Continue
557
+ this.textInput = ''
558
+ }
559
+ },
560
+ },
561
+ created() {
562
+ if (this.value) {
563
+ this.textInput = numberToString({
564
+ value: this.value,
565
+ numberPrecision: this.numberPrecision,
566
+ minDecimals: this.minDecimals,
567
+ })
568
+ } else if (this.defaultNumber !== null) {
569
+ this.textInput = numberToString({
570
+ value: this.defaultNumber,
571
+ numberPrecision: this.numberPrecision,
572
+ minDecimals: this.minDecimals,
573
+ })
574
+ } else if (this.minNumber !== null) {
575
+ this.textInput = numberToString({
576
+ value: this.minNumber,
577
+ numberPrecision: this.numberPrecision,
578
+ minDecimals: this.minDecimals,
579
+ })
580
+ }
581
+ },
582
+ mounted() {
583
+ if (this.focus) {
584
+ this.focusInput()
585
+ }
586
+ },
587
+ methods: {
588
+ onEnterPress() {
589
+ this.$emit('on-enter-click')
590
+ this.$refs.inputField1.$el.blur()
591
+ },
592
+ onChangeHandler(event) {
593
+ if (isNaN(event) || event === '') {
594
+ event = this.defaultNumber
595
+ ? this.defaultNumber
596
+ : this.minNumber || this.minNumber === 0
597
+ ? this.minNumber
598
+ : event
599
+ }
600
+ if (!this.allowNegative) {
601
+ event = Math.abs(event)
602
+ }
603
+ event = parseFloat(event)
604
+ // Need to return an integer rather than a string
605
+ this.$emit('input-change', event)
606
+ },
607
+ onEvaluateCode(event) {
608
+ // function to perform math on the code
609
+ // filter the string in case of any malicious content
610
+ const val = event.target.value
611
+ let filtered = val.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
612
+ filtered = filtered.split(/([-+*/()])/)
613
+ let formatted = filtered.map((item) => {
614
+ if (
615
+ item === '+' ||
616
+ item === '-' ||
617
+ item === '*' ||
618
+ item === '/' ||
619
+ item === '(' ||
620
+ item === ')' ||
621
+ item === ''
622
+ ) {
623
+ return item
624
+ } else {
625
+ let num = stringToNumber({
626
+ value: item,
627
+ numberPrecision: false,
628
+ minDecimals: this.minDecimals,
629
+ })
630
+ return num
631
+ }
632
+ })
633
+ let evaluated
634
+ formatted = this.removeStringItemsAfterLastNumber(formatted)
635
+ evaluated = eval(formatted.join(' '))
636
+ if (typeof evaluated === 'string') {
637
+ evaluated = stringToNumber({
638
+ value: evaluated,
639
+ numberPrecision: this.numberPrecision,
640
+ minDecimals: this.minDecimals,
641
+ })
642
+ } else if (typeof evaluated === 'number') {
643
+ evaluated = evaluated.toFixed(this.numberPrecision)
644
+ }
645
+ return evaluated
646
+ },
647
+ removeStringItemsAfterLastNumber(array) {
648
+ // fixed in EPDM-6487, in order to prevent 'Unexpected end of input'
649
+ let lastNumberIndex = -1
650
+ // Find the index of the last number in the array
651
+ for (let i = array.length - 1; i >= 0; i--) {
652
+ if (typeof array[i] === 'number') {
653
+ lastNumberIndex = i
654
+ break
655
+ }
656
+ }
657
+ // if there are no numbers, return an empty array
658
+ if (lastNumberIndex === -1) {
659
+ return []
660
+ }
661
+ // Remove non-numeric items after the last number
662
+ if (lastNumberIndex !== -1) {
663
+ const newArray = array.slice(0, lastNumberIndex + 1)
664
+ return newArray
665
+ }
666
+ return array
667
+ },
668
+ onInput(event) {
669
+ if (!this.isFocused) {
670
+ return
671
+ }
672
+ if (event.target.value === '') {
673
+ this.$emit('on-input', '')
674
+ }
675
+ let evaluatedVal
676
+ try {
677
+ evaluatedVal = this.onEvaluateCode(event)
678
+ } finally {
679
+ if (evaluatedVal && this.value != evaluatedVal) {
680
+ this.$emit('on-input', evaluatedVal)
681
+ }
682
+ }
683
+ },
684
+ onInputBlur(e) {
685
+ this.isFocused = false
686
+ let value = e.target.value
687
+ let evaluatedInput = this.onEvaluateCode(e)
688
+ this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
689
+ if ((evaluatedInput && value.length) || this.minNumber !== null) {
690
+ this.textInput = numberToString({
691
+ value:
692
+ evaluatedInput && value.length
693
+ ? evaluatedInput
694
+ : this.defaultNumber
695
+ ? this.defaultNumber
696
+ : this.minNumber,
697
+ numberPrecision: this.numberPrecision,
698
+ minDecimals: this.minDecimals,
699
+ })
700
+ }
701
+ let adjustedMinValue =
702
+ evaluatedInput && evaluatedInput.length
703
+ ? evaluatedInput
704
+ : this.defaultNumber
705
+ ? this.defaultNumber
706
+ : this.minNumber || this.minNumber === 0
707
+ ? this.minNumber
708
+ : ''
709
+ this.$emit('input-blur', adjustedMinValue)
710
+ },
711
+ focusInput() {
712
+ if (this.disabled) {
713
+ return
714
+ }
715
+ this.isFocused = true
716
+ this.$nextTick(() => {
717
+ this.$refs.inputField1.$el.select()
718
+ })
719
+ this.$emit('input-focus')
720
+ },
721
+ blurInput() {
722
+ if (this.disabled) {
723
+ return
724
+ }
725
+ this.isFocused = false
726
+ this.$nextTick(() => {
727
+ this.$refs.inputField1.$el.blur()
728
+ })
729
+ },
730
+ formatWithCurrency(value) {
731
+ let adjustedMinValue =
732
+ value || value === 0
733
+ ? value
734
+ : this.defaultNumber
735
+ ? this.defaultNumber
736
+ : this.minNumber || this.minNumber === 0
737
+ ? this.minNumber
738
+ : ''
739
+ if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
740
+ let input = this.numberToStringEnabled
741
+ ? numberToString({
742
+ value: adjustedMinValue,
743
+ numberPrecision: this.numberPrecision,
744
+ minDecimals: this.minDecimals,
745
+ })
746
+ : adjustedMinValue
747
+ let unit = this.showLinearUnitName ? '' : this.unitName
748
+ //return input + ' ' + unit
749
+ return input + ' ' + unit
750
+ } else if (!adjustedMinValue && adjustedMinValue !== 0) {
751
+ return ''
752
+ } else {
753
+ return this.numberToStringEnabled
754
+ ? numberToString({
755
+ value: adjustedMinValue,
756
+ numberPrecision: this.numberPrecision,
757
+ minDecimals: this.minDecimals,
758
+ })
759
+ : adjustedMinValue
760
+ }
761
+ },
762
+ initInteraction(e) {
763
+ this.focusInput()
764
+ e.preventDefault()
765
+ window.addEventListener('mousemove', this.interact, false)
766
+ window.addEventListener('mouseup', this.stopInteract, false)
767
+ },
768
+ interact(e) {
769
+ e.preventDefault()
770
+ let value = parseFloat(this.value || 0)
771
+ value += parseFloat(this.interactionStep) * parseInt(e.movementX)
772
+ this.$emit('on-input-drag', value)
773
+
774
+ this.textInput = numberToString({
775
+ value: value && value.length ? value : this.minNumber,
776
+ numberPrecision: this.numberPrecision,
777
+ minDecimals: this.minDecimals,
778
+ })
779
+ //this.value=value
780
+ },
781
+ stopInteract(e) {
782
+ e.preventDefault()
783
+ window.removeEventListener('mousemove', this.interact, false)
784
+ window.removeEventListener('mouseup', this.stopInteract, false)
785
+ this.blurInput()
786
+ },
787
+ },
788
+ }
789
+ </script>