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

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