@dxc-technology/halstack-react 0.0.0-4e9134c → 0.0.0-4ec6fe9

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 (212) hide show
  1. package/README.md +1 -1
  2. package/dist/ThemeContext.js +134 -100
  3. package/dist/V3Select/V3Select.js +549 -0
  4. package/dist/V3Select/index.d.ts +27 -0
  5. package/dist/V3Textarea/V3Textarea.js +264 -0
  6. package/dist/V3Textarea/index.d.ts +27 -0
  7. package/dist/accordion/Accordion.js +66 -59
  8. package/dist/accordion/index.d.ts +28 -0
  9. package/dist/accordion-group/AccordionGroup.js +1 -3
  10. package/dist/accordion-group/index.d.ts +16 -0
  11. package/dist/alert/Alert.js +126 -111
  12. package/dist/alert/index.d.ts +51 -0
  13. package/dist/box/Box.js +1 -9
  14. package/dist/box/index.d.ts +25 -0
  15. package/dist/button/Button.js +33 -27
  16. package/dist/button/index.d.ts +24 -0
  17. package/dist/card/index.d.ts +22 -0
  18. package/dist/checkbox/Checkbox.js +26 -21
  19. package/dist/checkbox/index.d.ts +24 -0
  20. package/dist/chip/Chip.js +21 -25
  21. package/dist/chip/index.d.ts +22 -0
  22. package/dist/common/variables.js +771 -547
  23. package/dist/date/Date.js +7 -9
  24. package/dist/date/index.d.ts +27 -0
  25. package/dist/{new-date/NewDate.js → date-input/DateInput.js} +77 -72
  26. package/dist/date-input/index.d.ts +95 -0
  27. package/dist/dialog/Dialog.js +15 -32
  28. package/dist/dialog/index.d.ts +18 -0
  29. package/dist/dropdown/Dropdown.js +108 -68
  30. package/dist/dropdown/index.d.ts +26 -0
  31. package/dist/file-input/FileInput.js +644 -0
  32. package/dist/file-input/FileItem.js +287 -0
  33. package/dist/file-input/index.d.ts +81 -0
  34. package/dist/footer/Footer.js +63 -49
  35. package/dist/footer/Icons.js +77 -0
  36. package/dist/footer/index.d.ts +25 -0
  37. package/dist/header/Header.js +123 -84
  38. package/dist/header/Icons.js +59 -0
  39. package/dist/header/index.d.ts +25 -0
  40. package/dist/heading/Heading.js +13 -5
  41. package/dist/heading/index.d.ts +17 -0
  42. package/dist/input-text/Icons.js +22 -0
  43. package/dist/input-text/InputText.js +93 -60
  44. package/dist/input-text/index.d.ts +36 -0
  45. package/dist/layout/ApplicationLayout.js +5 -9
  46. package/dist/layout/Icons.js +55 -0
  47. package/dist/link/Link.js +4 -8
  48. package/dist/link/index.d.ts +23 -0
  49. package/dist/main.d.ts +40 -0
  50. package/dist/main.js +38 -30
  51. package/dist/{number/Number.js → number-input/NumberInput.js} +13 -11
  52. package/dist/{number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
  53. package/dist/number-input/index.d.ts +113 -0
  54. package/dist/paginator/Icons.js +66 -0
  55. package/dist/paginator/Paginator.js +60 -38
  56. package/dist/paginator/index.d.ts +20 -0
  57. package/dist/{password/Password.js → password-input/PasswordInput.js} +21 -14
  58. package/dist/password-input/index.d.ts +94 -0
  59. package/dist/progress-bar/ProgressBar.js +62 -26
  60. package/dist/progress-bar/index.d.ts +18 -0
  61. package/dist/radio/index.d.ts +23 -0
  62. package/dist/resultsetTable/index.d.ts +19 -0
  63. package/dist/select/Select.js +872 -339
  64. package/dist/select/index.d.ts +53 -0
  65. package/dist/sidenav/Sidenav.js +11 -15
  66. package/dist/sidenav/index.d.ts +13 -0
  67. package/dist/slider/Slider.js +155 -66
  68. package/dist/slider/index.d.ts +29 -0
  69. package/dist/spinner/Spinner.js +225 -58
  70. package/dist/spinner/index.d.ts +17 -0
  71. package/dist/switch/index.d.ts +24 -0
  72. package/dist/table/Table.js +5 -1
  73. package/dist/table/index.d.ts +13 -0
  74. package/dist/tabs/index.d.ts +19 -0
  75. package/dist/tag/Tag.js +37 -35
  76. package/dist/tag/index.d.ts +24 -0
  77. package/dist/{new-input-text/NewInputText.js → text-input/TextInput.js} +192 -175
  78. package/dist/text-input/index.d.ts +135 -0
  79. package/dist/textarea/Textarea.js +233 -124
  80. package/dist/textarea/index.d.ts +117 -0
  81. package/dist/toggle/index.d.ts +21 -0
  82. package/dist/toggle-group/ToggleGroup.js +130 -44
  83. package/dist/toggle-group/index.d.ts +21 -0
  84. package/dist/upload/buttons-upload/ButtonsUpload.js +12 -12
  85. package/dist/upload/buttons-upload/Icons.js +40 -0
  86. package/dist/upload/dragAndDropArea/DragAndDropArea.js +23 -19
  87. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  88. package/dist/upload/file-upload/FileToUpload.js +27 -22
  89. package/dist/upload/file-upload/Icons.js +66 -0
  90. package/dist/upload/index.d.ts +15 -0
  91. package/dist/upload/transaction/Icons.js +160 -0
  92. package/dist/upload/transaction/Transaction.js +18 -41
  93. package/dist/upload/transactions/Transactions.js +11 -11
  94. package/dist/wizard/Icons.js +65 -0
  95. package/dist/wizard/Wizard.js +11 -17
  96. package/dist/wizard/index.d.ts +18 -0
  97. package/package.json +6 -9
  98. package/test/Date.test.js +13 -11
  99. package/test/{NewDate.test.js → DateInput.test.js} +71 -29
  100. package/test/FileInput.test.js +201 -0
  101. package/test/Footer.test.js +2 -7
  102. package/test/Header.test.js +5 -10
  103. package/test/Heading.test.js +60 -12
  104. package/test/{Number.test.js → NumberInput.test.js} +85 -67
  105. package/test/Paginator.test.js +6 -2
  106. package/test/PasswordInput.test.js +83 -0
  107. package/test/ResultsetTable.test.js +6 -6
  108. package/test/Select.test.js +371 -148
  109. package/test/Slider.test.js +9 -17
  110. package/test/Spinner.test.js +5 -0
  111. package/test/{NewInputText.test.js → TextInput.test.js} +149 -234
  112. package/test/Textarea.test.js +193 -0
  113. package/test/ToggleGroup.test.js +5 -1
  114. package/test/Upload.test.js +1 -1
  115. package/test/V3Select.test.js +212 -0
  116. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  117. package/dist/accordion/Accordion.stories.js +0 -207
  118. package/dist/accordion/readme.md +0 -96
  119. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  120. package/dist/accordion-group/readme.md +0 -70
  121. package/dist/alert/Alert.stories.js +0 -158
  122. package/dist/alert/close.svg +0 -4
  123. package/dist/alert/error.svg +0 -4
  124. package/dist/alert/info.svg +0 -4
  125. package/dist/alert/readme.md +0 -43
  126. package/dist/alert/success.svg +0 -4
  127. package/dist/alert/warning.svg +0 -4
  128. package/dist/button/Button.stories.js +0 -224
  129. package/dist/button/readme.md +0 -93
  130. package/dist/checkbox/Checkbox.stories.js +0 -144
  131. package/dist/checkbox/readme.md +0 -116
  132. package/dist/date/Date.stories.js +0 -205
  133. package/dist/date/readme.md +0 -73
  134. package/dist/dialog/Dialog.stories.js +0 -217
  135. package/dist/dialog/readme.md +0 -32
  136. package/dist/dropdown/Dropdown.stories.js +0 -249
  137. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  138. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  139. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  140. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  141. package/dist/dropdown/readme.md +0 -69
  142. package/dist/footer/Footer.stories.js +0 -94
  143. package/dist/footer/dxc_logo.svg +0 -15
  144. package/dist/footer/readme.md +0 -41
  145. package/dist/header/Header.stories.js +0 -176
  146. package/dist/header/close_icon.svg +0 -1
  147. package/dist/header/dxc_logo_black.svg +0 -8
  148. package/dist/header/hamb_menu_black.svg +0 -1
  149. package/dist/header/hamb_menu_white.svg +0 -1
  150. package/dist/header/readme.md +0 -33
  151. package/dist/input-text/InputText.stories.js +0 -209
  152. package/dist/input-text/error.svg +0 -1
  153. package/dist/input-text/readme.md +0 -91
  154. package/dist/layout/facebook.svg +0 -45
  155. package/dist/layout/linkedin.svg +0 -50
  156. package/dist/layout/twitter.svg +0 -53
  157. package/dist/link/readme.md +0 -51
  158. package/dist/new-textarea/NewTextarea.js +0 -342
  159. package/dist/paginator/images/next.svg +0 -3
  160. package/dist/paginator/images/nextPage.svg +0 -3
  161. package/dist/paginator/images/previous.svg +0 -3
  162. package/dist/paginator/images/previousPage.svg +0 -3
  163. package/dist/paginator/readme.md +0 -50
  164. package/dist/password/styles.css +0 -3
  165. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  166. package/dist/progress-bar/readme.md +0 -63
  167. package/dist/radio/Radio.stories.js +0 -166
  168. package/dist/radio/readme.md +0 -70
  169. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  170. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  171. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  172. package/dist/select/Select.stories.js +0 -235
  173. package/dist/select/readme.md +0 -72
  174. package/dist/slider/Slider.stories.js +0 -241
  175. package/dist/slider/readme.md +0 -64
  176. package/dist/spinner/Spinner.stories.js +0 -183
  177. package/dist/spinner/readme.md +0 -65
  178. package/dist/switch/Switch.stories.js +0 -134
  179. package/dist/switch/readme.md +0 -133
  180. package/dist/tabs/Tabs.stories.js +0 -130
  181. package/dist/tabs/readme.md +0 -78
  182. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  183. package/dist/tabs-for-sections/readme.md +0 -78
  184. package/dist/toggle/Toggle.stories.js +0 -297
  185. package/dist/toggle/readme.md +0 -80
  186. package/dist/toggle-group/readme.md +0 -82
  187. package/dist/upload/Upload.stories.js +0 -72
  188. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  189. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  190. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  191. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  192. package/dist/upload/file-upload/audio-icon.svg +0 -4
  193. package/dist/upload/file-upload/close.svg +0 -4
  194. package/dist/upload/file-upload/file-icon.svg +0 -4
  195. package/dist/upload/file-upload/video-icon.svg +0 -4
  196. package/dist/upload/readme.md +0 -37
  197. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  198. package/dist/upload/transaction/audio-icon.svg +0 -4
  199. package/dist/upload/transaction/error-icon.svg +0 -4
  200. package/dist/upload/transaction/file-icon-err.svg +0 -4
  201. package/dist/upload/transaction/file-icon.svg +0 -4
  202. package/dist/upload/transaction/image-icon-err.svg +0 -4
  203. package/dist/upload/transaction/image-icon.svg +0 -4
  204. package/dist/upload/transaction/success-icon.svg +0 -4
  205. package/dist/upload/transaction/video-icon-err.svg +0 -4
  206. package/dist/upload/transaction/video-icon.svg +0 -4
  207. package/dist/wizard/invalid_icon.svg +0 -5
  208. package/dist/wizard/valid_icon.svg +0 -5
  209. package/dist/wizard/validation-wrong.svg +0 -6
  210. package/test/NewTextarea.test.js +0 -202
  211. package/test/Password.test.js +0 -76
  212. package/test/TabsForSections.test.js +0 -34
@@ -33,11 +33,31 @@ var _uuid = require("uuid");
33
33
 
34
34
  var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
35
35
 
36
- var _NumberContext = _interopRequireDefault(require("../number/NumberContext.js"));
36
+ var _NumberInputContext = _interopRequireDefault(require("../number-input/NumberInputContext.js"));
37
37
 
38
- function _templateObject15() {
38
+ function _templateObject17() {
39
39
  var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n padding: calc((39px - 1.75em) / 2) 0 calc((39px - 1.75em) / 2) 1em;\n align-items: center;\n font-size: 0.875rem;\n line-height: 1.75em;\n"]);
40
40
 
41
+ _templateObject17 = function _templateObject17() {
42
+ return data;
43
+ };
44
+
45
+ return data;
46
+ }
47
+
48
+ function _templateObject16() {
49
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n margin-right: 0.5rem;\n height: 18px;\n width: 18px;\n color: ", ";\n\n svg {\n line-height: 1.75em;\n font-size: 0.875rem;\n }\n"]);
50
+
51
+ _templateObject16 = function _templateObject16() {
52
+ return data;
53
+ };
54
+
55
+ return data;
56
+ }
57
+
58
+ function _templateObject15() {
59
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n padding: calc((39px - 1.75em) / 2) 0 calc((39px - 1.75em) / 2) 1em;\n color: ", ";\n font-size: 0.875rem;\n line-height: 1.75em;\n"]);
60
+
41
61
  _templateObject15 = function _templateObject15() {
42
62
  return data;
43
63
  };
@@ -46,7 +66,7 @@ function _templateObject15() {
46
66
  }
47
67
 
48
68
  function _templateObject14() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n padding: calc((39px - 1.75em) / 2) 0 calc((39px - 1.75em) / 2) 1em;\n color: ", ";\n font-size: 0.875rem;\n line-height: 1.75em;\n"]);
69
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n padding: calc((39px - 1.75em) / 2) 0 calc((39px - 1.75em) / 2) 1em;\n line-height: 1.75em;\n list-style-type: none;\n cursor: pointer;\n\n ", "\n"]);
50
70
 
51
71
  _templateObject14 = function _templateObject14() {
52
72
  return data;
@@ -56,7 +76,7 @@ function _templateObject14() {
56
76
  }
57
77
 
58
78
  function _templateObject13() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n padding: calc((39px - 1.75em) / 2) 0 calc((39px - 1.75em) / 2) 1em;\n line-height: 1.75em;\n list-style-type: none;\n cursor: pointer;\n\n ", "\n"]);
79
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n position: absolute;\n z-index: 1;\n max-height: 160px;\n overflow: auto;\n top: calc(100% + 4px);\n left: 0;\n margin: 0;\n padding: 0;\n width: 100%;\n box-sizing: border-box;\n cursor: default;\n border-radius: 4px;\n border: 1px solid ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n"]);
60
80
 
61
81
  _templateObject13 = function _templateObject13() {
62
82
  return data;
@@ -66,7 +86,7 @@ function _templateObject13() {
66
86
  }
67
87
 
68
88
  function _templateObject12() {
69
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n position: absolute;\n z-index: 1;\n max-height: 160px;\n overflow: auto;\n top: calc(100% + 4px);\n left: 0;\n margin: 0;\n padding: 0;\n width: 100%;\n box-sizing: border-box;\n cursor: default;\n border-radius: 4px;\n border: 1px solid ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n"]);
89
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n min-height: 1.5em;\n color: ", ";\n font-family: ", ";\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.5em;\n"]);
70
90
 
71
91
  _templateObject12 = function _templateObject12() {
72
92
  return data;
@@ -76,7 +96,7 @@ function _templateObject12() {
76
96
  }
77
97
 
78
98
  function _templateObject11() {
79
- var data = (0, _taggedTemplateLiteral2["default"])(["\n min-height: 1.5em;\n color: ", ";\n font-family: ", ";\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.5em;\n"]);
99
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n padding: 3px;\n height: 18px;\n width: 18px;\n margin-left: calc(1rem * 0.25);\n color: ", ";\n\n svg {\n line-height: 18px;\n font-size: 1.25rem;\n }\n"]);
80
100
 
81
101
  _templateObject11 = function _templateObject11() {
82
102
  return data;
@@ -86,7 +106,7 @@ function _templateObject11() {
86
106
  }
87
107
 
88
108
  function _templateObject10() {
89
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n height: 18px;\n width: 18px;\n margin-left: calc(1rem * 0.25);\n pointer-events: none;\n color: ", ";\n\n svg {\n line-height: 18px;\n font-size: 1.25rem;\n }\n"]);
109
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n height: calc(1rem * 1.5);\n line-height: calc(1rem * 1.5);\n margin: 0 calc(1rem * 0.25);\n padding: 0 0 0 calc(1rem * 0.5);\n ", ";\n font-family: ", ";\n font-size: 1rem;\n pointer-events: none;\n"]);
90
110
 
91
111
  _templateObject10 = function _templateObject10() {
92
112
  return data;
@@ -96,7 +116,7 @@ function _templateObject10() {
96
116
  }
97
117
 
98
118
  function _templateObject9() {
99
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: calc(1rem * 1.5);\n line-height: calc(1rem * 1.5);\n margin: 0 calc(1rem * 0.25);\n padding: 0 0 0 calc(1rem * 0.5);\n ", ";\n font-family: ", ";\n font-size: 1rem;\n pointer-events: none;\n"]);
119
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n height: calc(1rem * 1.5);\n line-height: calc(1rem * 1.5);\n margin-left: calc(1rem * 0.25);\n padding: 0 calc(1rem * 0.5) 0 0;\n ", ";\n font-family: ", ";\n font-size: 1rem;\n pointer-events: none;\n"]);
100
120
 
101
121
  _templateObject9 = function _templateObject9() {
102
122
  return data;
@@ -106,7 +126,7 @@ function _templateObject9() {
106
126
  }
107
127
 
108
128
  function _templateObject8() {
109
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: calc(1rem * 1.5);\n line-height: calc(1rem * 1.5);\n margin-left: calc(1rem * 0.25);\n padding: 0 calc(1rem * 0.5) 0 0;\n ", ";\n font-family: ", ";\n font-size: 1rem;\n pointer-events: none;\n"]);
129
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n height: 24px;\n width: 24px;\n font-size: 1rem;\n font-family: ", ";\n border: 1px solid transparent;\n border-radius: 2px;\n padding: 3px;\n margin-left: calc(1rem * 0.25);\n ", "\n\n box-shadow: 0 0 0 2px transparent;\n background-color: ", ";\n\n color: ", ";\n\n ", "\n\n svg {\n line-height: 18px;\n }\n"]);
110
130
 
111
131
  _templateObject8 = function _templateObject8() {
112
132
  return data;
@@ -116,7 +136,7 @@ function _templateObject8() {
116
136
  }
117
137
 
118
138
  function _templateObject7() {
119
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n height: 24px;\n width: 24px;\n font-size: 1rem;\n font-family: ", ";\n border: 1px solid transparent;\n border-radius: 4px;\n padding: 3px;\n margin-left: calc(1rem * 0.25);\n ", ";\n\n background-color: ", ";\n\n color: ", ";\n\n ", "\n\n svg {\n line-height: 18px;\n }\n"]);
139
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 16px;\n height: 16px;\n"]);
120
140
 
121
141
  _templateObject7 = function _templateObject7() {
122
142
  return data;
@@ -136,7 +156,7 @@ function _templateObject6() {
136
156
  }
137
157
 
138
158
  function _templateObject5() {
139
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n position: relative;\n align-items: center;\n height: calc(calc(1rem * 2.5) - calc(1px * 2));\n margin: calc(1rem * 0.25) 0;\n padding: 0 calc(1rem * 0.5);\n\n ", "\n\n box-shadow: 0 0 0 2px transparent;\n border-radius: 4px;\n border: 1px solid\n ", ";\n ", "\n\n ", ";\n ", ";\n"]);
159
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n position: relative;\n align-items: center;\n height: calc(calc(1rem * 2.5) - calc(1px * 2));\n margin: calc(1rem * 0.25) 0;\n padding: 0 calc(1rem * 0.5);\n\n ", "\n box-shadow: 0 0 0 2px transparent;\n border-radius: 4px;\n border: 1px solid\n ", ";\n ", "\n ", ";\n\n ", ";\n"]);
140
160
 
141
161
  _templateObject5 = function _templateObject5() {
142
162
  return data;
@@ -146,7 +166,7 @@ function _templateObject5() {
146
166
  }
147
167
 
148
168
  function _templateObject4() {
149
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.5em;\n"]);
169
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
150
170
 
151
171
  _templateObject4 = function _templateObject4() {
152
172
  return data;
@@ -166,7 +186,7 @@ function _templateObject3() {
166
186
  }
167
187
 
168
188
  function _templateObject2() {
169
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.75em;\n"]);
189
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
170
190
 
171
191
  _templateObject2 = function _templateObject2() {
172
192
  return data;
@@ -206,19 +226,25 @@ var makeCancelable = function makeCancelable(promise) {
206
226
  };
207
227
  };
208
228
 
209
- var getLengthErrorMessage = function getLengthErrorMessage(length) {
210
- return "Min length ".concat(length.min, ", Max length ").concat(length.max, ".");
229
+ var getNotOptionalErrorMessage = function getNotOptionalErrorMessage() {
230
+ return "This field is required. Please, enter a value.";
211
231
  };
212
232
 
213
- var patternMatch = function patternMatch(pattern, value) {
214
- return new RegExp(pattern).test(value);
233
+ var getLengthErrorMessage = function getLengthErrorMessage(length) {
234
+ return "Min length ".concat(length.min, ", max length ").concat(length.max, ".");
215
235
  };
216
236
 
217
237
  var getPatternErrorMessage = function getPatternErrorMessage() {
218
238
  return "Please match the format requested.";
219
239
  };
220
240
 
221
- var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
241
+ var patternMatch = function patternMatch(pattern, value) {
242
+ return new RegExp(pattern).test(value);
243
+ };
244
+
245
+ var DxcTextInput = _react["default"].forwardRef(function (_ref, ref) {
246
+ var _action$title;
247
+
222
248
  var _ref$label = _ref.label,
223
249
  label = _ref$label === void 0 ? "" : _ref$label,
224
250
  _ref$name = _ref.name,
@@ -243,12 +269,14 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
243
269
  onBlur = _ref.onBlur,
244
270
  _ref$error = _ref.error,
245
271
  error = _ref$error === void 0 ? "" : _ref$error,
246
- margin = _ref.margin,
247
- _ref$size = _ref.size,
248
- size = _ref$size === void 0 ? "medium" : _ref$size,
249
272
  suggestions = _ref.suggestions,
250
273
  pattern = _ref.pattern,
251
274
  length = _ref.length,
275
+ _ref$autocomplete = _ref.autocomplete,
276
+ autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
277
+ margin = _ref.margin,
278
+ _ref$size = _ref.size,
279
+ size = _ref$size === void 0 ? "medium" : _ref$size,
252
280
  _ref$tabIndex = _ref.tabIndex,
253
281
  tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
254
282
 
@@ -269,67 +297,44 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
269
297
 
270
298
  var _useState7 = (0, _react.useState)(false),
271
299
  _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
272
- isError = _useState8[0],
273
- changeIsError = _useState8[1];
300
+ isScrollable = _useState8[0],
301
+ changeIsScrollable = _useState8[1];
274
302
 
275
303
  var _useState9 = (0, _react.useState)(false),
276
304
  _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
277
- isScrollable = _useState10[0],
278
- changeIsScrollable = _useState10[1];
305
+ isActiveSuggestion = _useState10[0],
306
+ changeIsActiveSuggestion = _useState10[1];
279
307
 
280
308
  var _useState11 = (0, _react.useState)(false),
281
309
  _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
282
- isActiveSuggestion = _useState12[0],
283
- changeIsActiveSuggestion = _useState12[1];
310
+ isAutosuggestError = _useState12[0],
311
+ changeIsAutosuggestError = _useState12[1];
284
312
 
285
- var _useState13 = (0, _react.useState)(false),
313
+ var _useState13 = (0, _react.useState)([]),
286
314
  _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
287
- isAutosuggestError = _useState14[0],
288
- changeIsAutosuggestError = _useState14[1];
315
+ filteredSuggestions = _useState14[0],
316
+ changeFilteredSuggestions = _useState14[1];
289
317
 
290
- var _useState15 = (0, _react.useState)(""),
318
+ var _useState15 = (0, _react.useState)(-1),
291
319
  _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
292
- validationError = _useState16[0],
293
- changeValidationError = _useState16[1];
294
-
295
- var _useState17 = (0, _react.useState)([]),
296
- _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
297
- filteredSuggestions = _useState18[0],
298
- changeFilteredSuggestions = _useState18[1];
299
-
300
- var _useState19 = (0, _react.useState)(-1),
301
- _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
302
- visualFocusedSuggIndex = _useState20[0],
303
- changeVisualFocusedSuggIndex = _useState20[1];
304
-
305
- var _useState21 = (0, _react.useState)(null),
306
- _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
307
- minNumber = _useState22[0],
308
- setMinNumber = _useState22[1];
309
-
310
- var _useState23 = (0, _react.useState)(null),
311
- _useState24 = (0, _slicedToArray2["default"])(_useState23, 2),
312
- maxNumber = _useState24[0],
313
- setMaxNumber = _useState24[1];
314
-
315
- var _useState25 = (0, _react.useState)(null),
316
- _useState26 = (0, _slicedToArray2["default"])(_useState25, 2),
317
- stepNumber = _useState26[0],
318
- setStepNumber = _useState26[1];
320
+ visualFocusedSuggIndex = _useState16[0],
321
+ changeVisualFocusedSuggIndex = _useState16[1];
322
+
323
+ var _useState17 = (0, _react.useState)("input-".concat((0, _uuid.v4)())),
324
+ _useState18 = (0, _slicedToArray2["default"])(_useState17, 1),
325
+ inputId = _useState18[0];
319
326
 
320
327
  var suggestionsRef = (0, _react.useRef)(null);
321
328
  var inputRef = (0, _react.useRef)(null);
322
329
  var actionRef = (0, _react.useRef)(null);
323
330
  var colorsTheme = (0, _useTheme["default"])();
324
331
  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
325
- var inputId = "input-".concat((0, _uuid.v4)());
326
332
  var autosuggestId = "".concat(inputId, "-listBox");
327
- var numberContext = (0, _react.useContext)(_NumberContext["default"]);
333
+ var errorId = "error-message-".concat(inputId);
334
+ var numberInputContext = (0, _react.useContext)(_NumberInputContext["default"]);
328
335
 
329
- var changeValue = function changeValue(newValue) {
330
- var changedValue = typeof newValue === "number" ? newValue.toString() : newValue;
331
- value !== null && value !== void 0 ? value : setInnerValue(newValue);
332
- typeof onChange === "function" && onChange(changedValue);
336
+ var isNotOptional = function isNotOptional(value) {
337
+ return value === "" && !optional;
333
338
  };
334
339
 
335
340
  var isLengthIncorrect = function isLengthIncorrect(value) {
@@ -337,15 +342,17 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
337
342
  };
338
343
 
339
344
  var isNumberIncorrect = function isNumberIncorrect(value) {
340
- return minNumber && parseInt(value) < minNumber || maxNumber && parseInt(value) > maxNumber;
345
+ return (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) && parseInt(value) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) && parseInt(value) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);
346
+ };
347
+
348
+ var isTextInputType = function isTextInputType() {
349
+ var _inputRef$current, _inputRef$current2;
350
+
351
+ return !(inputRef !== null && inputRef !== void 0 && (_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.getAttribute("type")) || (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.getAttribute("type")) === "text";
341
352
  };
342
353
 
343
354
  var getNumberErrorMessage = function getNumberErrorMessage(value) {
344
- if (minNumber && parseInt(value) < minNumber) {
345
- return "Value must be greater than or equal to ".concat(minNumber, ".");
346
- } else if (maxNumber && parseInt(value) > maxNumber) {
347
- return "Value must be less than or equal to ".concat(maxNumber, ".");
348
- }
355
+ if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && parseInt(value) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) return "Value must be greater than or equal to ".concat(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber, ".");else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(value) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) return "Value must be less than or equal to ".concat(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber, ".");
349
356
  };
350
357
 
351
358
  var hasInputSuggestions = function hasInputSuggestions() {
@@ -361,6 +368,27 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
361
368
  changeVisualFocusedSuggIndex(-1);
362
369
  };
363
370
 
371
+ var changeValue = function changeValue(newValue) {
372
+ value !== null && value !== void 0 ? value : setInnerValue(newValue);
373
+ var changedValue = typeof newValue === "number" ? newValue.toString() : newValue;
374
+ if (isNotOptional(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
375
+ value: changedValue,
376
+ error: getNotOptionalErrorMessage()
377
+ });else if (isLengthIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
378
+ value: changedValue,
379
+ error: getLengthErrorMessage(length)
380
+ });else if (newValue && pattern && !patternMatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
381
+ value: changedValue,
382
+ error: getPatternErrorMessage()
383
+ });else if (newValue && isNumberIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
384
+ value: changedValue,
385
+ error: getNumberErrorMessage(newValue)
386
+ });else onChange === null || onChange === void 0 ? void 0 : onChange({
387
+ value: changedValue,
388
+ error: null
389
+ });
390
+ };
391
+
364
392
  var handleInputContainerOnClick = function handleInputContainerOnClick() {
365
393
  document.activeElement !== actionRef.current && inputRef.current.focus();
366
394
  };
@@ -376,36 +404,22 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
376
404
 
377
405
  var handleIOnBlur = function handleIOnBlur(event) {
378
406
  suggestions && closeSuggestions();
379
-
380
- if (isLengthIncorrect(event.target.value)) {
381
- changeIsError(true);
382
- changeValidationError(getLengthErrorMessage(length, event));
383
- onBlur === null || onBlur === void 0 ? void 0 : onBlur({
384
- value: event.target.value,
385
- error: getLengthErrorMessage(length)
386
- });
387
- } else if (event.target.value && pattern && !patternMatch(pattern, event.target.value)) {
388
- changeIsError(true);
389
- changeValidationError(getPatternErrorMessage());
390
- onBlur === null || onBlur === void 0 ? void 0 : onBlur({
391
- value: event.target.value,
392
- error: getPatternErrorMessage()
393
- });
394
- } else if (event.target.value && isNumberIncorrect(event.target.value)) {
395
- changeIsError(true);
396
- changeValidationError(getNumberErrorMessage(event.target.value));
397
- onBlur === null || onBlur === void 0 ? void 0 : onBlur({
398
- value: event.target.value,
399
- error: getNumberErrorMessage(event.target.value)
400
- });
401
- } else {
402
- changeIsError(false);
403
- changeValidationError("");
404
- onBlur === null || onBlur === void 0 ? void 0 : onBlur({
405
- value: event.target.value,
406
- error: null
407
- });
408
- }
407
+ if (isNotOptional(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
408
+ value: event.target.value,
409
+ error: getNotOptionalErrorMessage()
410
+ });else if (isLengthIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
411
+ value: event.target.value,
412
+ error: getLengthErrorMessage(length)
413
+ });else if (event.target.value && pattern && !patternMatch(pattern, event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
414
+ value: event.target.value,
415
+ error: getPatternErrorMessage()
416
+ });else if (event.target.value && isNumberIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
417
+ value: event.target.value,
418
+ error: getNumberErrorMessage(event.target.value)
419
+ });else onBlur === null || onBlur === void 0 ? void 0 : onBlur({
420
+ value: event.target.value,
421
+ error: null
422
+ });
409
423
  };
410
424
 
411
425
  var handleIOnFocus = function handleIOnFocus() {
@@ -416,7 +430,7 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
416
430
  switch (event.keyCode) {
417
431
  case 40:
418
432
  // Arrow Down
419
- if (numberContext) {
433
+ if (numberInputContext) {
420
434
  decrementNumber();
421
435
  event.preventDefault();
422
436
  } else {
@@ -436,7 +450,7 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
436
450
 
437
451
  case 38:
438
452
  // Arrow Up
439
- if (numberContext) {
453
+ if (numberInputContext) {
440
454
  incrementNumber();
441
455
  event.preventDefault();
442
456
  } else {
@@ -478,15 +492,12 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
478
492
  };
479
493
 
480
494
  var setNumberProps = function setNumberProps(type, min, max, step) {
481
- var _inputRef$current, _inputRef$current2, _inputRef$current3, _inputRef$current4;
495
+ var _inputRef$current3, _inputRef$current4, _inputRef$current5, _inputRef$current6;
482
496
 
483
- type && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.setAttribute("type", type));
484
- min && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.setAttribute("min", min));
485
- max && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.setAttribute("max", max));
486
- step && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.setAttribute("step", step));
487
- setMinNumber(min);
488
- setMaxNumber(max);
489
- setStepNumber(step);
497
+ type && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.setAttribute("type", type));
498
+ min && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.setAttribute("min", min));
499
+ max && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.setAttribute("max", max));
500
+ step && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : _inputRef$current6.setAttribute("step", step));
490
501
  };
491
502
 
492
503
  (0, _react.useLayoutEffect)(function () {
@@ -498,8 +509,6 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
498
509
  return changeIsScrollable(false);
499
510
  }, [isScrollable, visualFocusedSuggIndex]);
500
511
  (0, _react.useEffect)(function () {
501
- var _inputRef$current5;
502
-
503
512
  if (typeof suggestions === "function") {
504
513
  changeIsSearching(true);
505
514
  changeIsAutosuggestError(false);
@@ -525,10 +534,7 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
525
534
  changeVisualFocusedSuggIndex(-1);
526
535
  }
527
536
 
528
- numberContext && setNumberProps(numberContext.typeNumber, numberContext.minNumber, numberContext.maxNumber, numberContext.stepNumber);
529
- inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.addEventListener("wheel", function (event) {
530
- return event.preventDefault();
531
- });
537
+ numberInputContext && setNumberProps(numberInputContext.typeNumber, numberInputContext.minNumber, numberInputContext.maxNumber, numberInputContext.stepNumber);
532
538
  }, [value, innerValue, suggestions]);
533
539
  var defaultClearAction = {
534
540
  onClick: function onClick() {
@@ -561,18 +567,18 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
561
567
  }));
562
568
 
563
569
  var decrementNumber = function decrementNumber() {
564
- var numberValue = value || innerValue;
570
+ var numberValue = value !== null && value !== void 0 ? value : innerValue;
565
571
 
566
- if (minNumber && parseInt(numberValue) < minNumber) {
572
+ if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && parseInt(numberValue) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) {
567
573
  changeValue(parseInt(numberValue));
568
- } else if (maxNumber && parseInt(numberValue) > maxNumber) {
569
- changeValue(maxNumber);
570
- } else if (minNumber && (parseInt(numberValue) === minNumber || numberValue === "" || stepNumber && parseInt(numberValue) - stepNumber < minNumber)) {
571
- changeValue(minNumber);
572
- } else if (stepNumber && minNumber && parseInt(numberValue) - stepNumber >= minNumber || stepNumber && numberValue !== "") {
573
- changeValue(parseInt(numberValue) - stepNumber);
574
- } else if (stepNumber && numberValue == "") {
575
- changeValue(-stepNumber);
574
+ } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(numberValue) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) {
575
+ changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);
576
+ } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && (parseInt(numberValue) === (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || numberValue === "" || numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && parseInt(numberValue) - (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber))) {
577
+ changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);
578
+ } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && parseInt(numberValue) - (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) >= (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberValue !== "") {
579
+ changeValue(parseInt(numberValue) - (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber));
580
+ } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberValue == "") {
581
+ changeValue(-(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber));
576
582
  } else if (numberValue === "") {
577
583
  changeValue(-1);
578
584
  } else {
@@ -581,18 +587,18 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
581
587
  };
582
588
 
583
589
  var incrementNumber = function incrementNumber() {
584
- var numberValue = value || innerValue;
590
+ var numberValue = value !== null && value !== void 0 ? value : innerValue;
585
591
 
586
- if (maxNumber && parseInt(numberValue) > maxNumber) {
592
+ if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(numberValue) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) {
587
593
  changeValue(parseInt(numberValue));
588
- } else if (minNumber && (parseInt(numberValue) < minNumber || numberValue === "")) {
589
- changeValue(minNumber);
590
- } else if (maxNumber && (parseInt(numberValue) === maxNumber || stepNumber && parseInt(numberValue) + stepNumber > maxNumber)) {
591
- changeValue(maxNumber);
592
- } else if (stepNumber && maxNumber && parseInt(numberValue) + stepNumber <= maxNumber || stepNumber && numberValue !== "") {
593
- changeValue(parseInt(numberValue) + stepNumber);
594
- } else if (stepNumber && numberValue == "") {
595
- changeValue(stepNumber);
594
+ } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && (parseInt(numberValue) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || numberValue === "")) {
595
+ changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);
596
+ } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && (parseInt(numberValue) === (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) || numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && parseInt(numberValue) + (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber))) {
597
+ changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);
598
+ } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(numberValue) + (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) <= (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) || numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberValue !== "") {
599
+ changeValue(parseInt(numberValue) + (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber));
600
+ } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberValue == "") {
601
+ changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber);
596
602
  } else if (numberValue === "") {
597
603
  changeValue(1);
598
604
  } else {
@@ -637,12 +643,6 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
637
643
  }))
638
644
  };
639
645
 
640
- var isTextInputType = function isTextInputType() {
641
- var _inputRef$current6, _inputRef$current7;
642
-
643
- return !(inputRef !== null && inputRef !== void 0 && (_inputRef$current6 = inputRef.current) !== null && _inputRef$current6 !== void 0 && _inputRef$current6.getAttribute("type")) || (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 ? void 0 : _inputRef$current7.getAttribute("type")) === "text";
644
- };
645
-
646
646
  var HighlightedSuggestion = function HighlightedSuggestion(_ref2) {
647
647
  var suggestion = _ref2.suggestion,
648
648
  index = _ref2.index;
@@ -651,11 +651,11 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
651
651
  var noMatchedWords = suggestion.replace(regEx, "");
652
652
  return _react["default"].createElement(Suggestion, {
653
653
  id: "suggestion-".concat(index),
654
- onMouseDown: function onMouseDown() {
655
- changeIsActiveSuggestion(true);
654
+ onMouseDown: function onMouseDown(event) {
655
+ event.button === 0 && changeIsActiveSuggestion(true);
656
656
  },
657
- onMouseUp: function onMouseUp() {
658
- if (isActiveSuggestion) {
657
+ onMouseUp: function onMouseUp(event) {
658
+ if (event.button === 0 && isActiveSuggestion) {
659
659
  changeValue(suggestion);
660
660
  changeIsActiveSuggestion(false);
661
661
  closeSuggestions();
@@ -675,7 +675,7 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
675
675
  };
676
676
 
677
677
  return _react["default"].createElement(_styledComponents.ThemeProvider, {
678
- theme: colorsTheme.newInputText
678
+ theme: colorsTheme.textInput
679
679
  }, _react["default"].createElement(DxcInput, {
680
680
  margin: margin,
681
681
  ref: ref,
@@ -688,7 +688,7 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
688
688
  disabled: disabled,
689
689
  backgroundType: backgroundType
690
690
  }, helperText), _react["default"].createElement(InputContainer, {
691
- error: error || validationError,
691
+ error: error,
692
692
  disabled: disabled,
693
693
  backgroundType: backgroundType,
694
694
  onClick: handleInputContainerOnClick
@@ -709,13 +709,19 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
709
709
  ref: inputRef,
710
710
  backgroundType: backgroundType,
711
711
  pattern: pattern,
712
+ minLength: length === null || length === void 0 ? void 0 : length.min,
713
+ maxLength: length === null || length === void 0 ? void 0 : length.max,
714
+ autoComplete: autocomplete,
712
715
  tabIndex: tabIndex,
713
716
  role: isTextInputType() && hasInputSuggestions() ? "combobox" : "textbox",
714
717
  "aria-autocomplete": isTextInputType() && hasInputSuggestions() ? "list" : undefined,
715
718
  "aria-controls": isTextInputType() && hasInputSuggestions() ? inputId : undefined,
716
719
  "aria-expanded": isTextInputType() && hasInputSuggestions() ? isOpen ? "true" : "false" : undefined,
717
- "aria-activedescendant": isTextInputType() && hasInputSuggestions() && isOpen && visualFocusedSuggIndex !== -1 ? "suggestion-".concat(visualFocusedSuggIndex) : undefined
718
- }), (error || isError) && _react["default"].createElement(ErrorIcon, {
720
+ "aria-activedescendant": isTextInputType() && hasInputSuggestions() && isOpen && visualFocusedSuggIndex !== -1 ? "suggestion-".concat(visualFocusedSuggIndex) : undefined,
721
+ "aria-invalid": error ? "true" : "false",
722
+ "aria-describedby": error ? errorId : undefined,
723
+ "aria-required": optional ? "false" : "true"
724
+ }), !disabled && error && _react["default"].createElement(ErrorIcon, {
719
725
  backgroundType: backgroundType,
720
726
  "aria-label": "Error"
721
727
  }, errorIcon), !disabled && clearable && (value !== null && value !== void 0 ? value : innerValue).length > 0 && _react["default"].createElement(Action, {
@@ -723,7 +729,7 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
723
729
  backgroundType: backgroundType,
724
730
  tabIndex: tabIndex,
725
731
  "aria-label": "Clear"
726
- }, defaultClearAction.icon), (numberContext === null || numberContext === void 0 ? void 0 : numberContext.typeNumber) === "number" ? _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(Action, {
732
+ }, defaultClearAction.icon), (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" ? _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(Action, {
727
733
  ref: actionRef,
728
734
  disabled: disabled,
729
735
  onClick: decrementAction.onClick,
@@ -741,9 +747,12 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
741
747
  ref: actionRef,
742
748
  disabled: disabled,
743
749
  onClick: action.onClick,
750
+ title: (_action$title = action.title) !== null && _action$title !== void 0 ? _action$title : action.title,
744
751
  backgroundType: backgroundType,
745
752
  tabIndex: tabIndex
746
- }, action.icon), suffix && _react["default"].createElement(Suffix, {
753
+ }, typeof action.icon === "string" ? _react["default"].createElement(ActionIcon, {
754
+ src: action.icon
755
+ }) : action.icon), suffix && _react["default"].createElement(Suffix, {
747
756
  disabled: disabled,
748
757
  backgroundType: backgroundType
749
758
  }, suffix), isOpen && _react["default"].createElement(Suggestions, {
@@ -764,11 +773,12 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
764
773
  suggestion: suggestion,
765
774
  index: index
766
775
  });
767
- }), isSearching && _react["default"].createElement(SuggestionsSystemMessage, null, "Searching..."), isAutosuggestError && _react["default"].createElement(SuggestionsError, null, _react["default"].createElement(ErrorIcon, {
776
+ }), isSearching && _react["default"].createElement(SuggestionsSystemMessage, null, "Searching..."), isAutosuggestError && _react["default"].createElement(SuggestionsError, null, _react["default"].createElement(SuggestionsErrorIcon, {
768
777
  backgroundType: backgroundType
769
- }, errorIcon), "Error fetching data"))), _react["default"].createElement(Error, {
778
+ }, errorIcon), "Error fetching data"))), !disabled && _react["default"].createElement(Error, {
779
+ id: errorId,
770
780
  backgroundType: backgroundType
771
- }, error || validationError)));
781
+ }, error)));
772
782
  });
773
783
 
774
784
  var sizes = {
@@ -806,6 +816,8 @@ var Label = _styledComponents["default"].label(_templateObject2(), function (pro
806
816
  return props.theme.labelFontStyle;
807
817
  }, function (props) {
808
818
  return props.theme.labelFontWeight;
819
+ }, function (props) {
820
+ return props.theme.labelLineHeight;
809
821
  });
810
822
 
811
823
  var OptionalLabel = _styledComponents["default"].span(_templateObject3(), function (props) {
@@ -822,6 +834,8 @@ var HelperText = _styledComponents["default"].span(_templateObject4(), function
822
834
  return props.theme.helperTextFontStyle;
823
835
  }, function (props) {
824
836
  return props.theme.helperTextFontWeight;
837
+ }, function (props) {
838
+ return props.theme.helperTextLineHeight;
825
839
  });
826
840
 
827
841
  var InputContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
@@ -852,10 +866,12 @@ var Input = _styledComponents["default"].input(_templateObject6(), function (pro
852
866
  return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledPlaceholderFontColorOnDark : props.theme.disabledPlaceholderFontColor : props.backgroundType === "dark" ? props.theme.placeholderFontColorOnDark : props.theme.placeholderFontColor;
853
867
  });
854
868
 
855
- var Action = _styledComponents["default"].button(_templateObject7(), function (props) {
869
+ var ActionIcon = _styledComponents["default"].img(_templateObject7());
870
+
871
+ var Action = _styledComponents["default"].button(_templateObject8(), function (props) {
856
872
  return props.theme.fontFamily;
857
873
  }, function (props) {
858
- return props.disabled ? "cursor: not-allowed;" : "cursor: pointer";
874
+ return props.disabled ? "cursor: not-allowed;" : "cursor: pointer;";
859
875
  }, function (props) {
860
876
  return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledActionBackgroundColorOnDark : props.theme.disabledActionBackgroundColor : props.backgroundType === "dark" ? props.theme.actionBackgroundColorOnDark : props.theme.actionBackgroundColor;
861
877
  }, function (props) {
@@ -864,31 +880,31 @@ var Action = _styledComponents["default"].button(_templateObject7(), function (p
864
880
  return !props.disabled && "\n &:hover {\n background-color: ".concat(props.backgroundType === "dark" ? props.theme.hoverActionBackgroundColorOnDark : props.theme.hoverActionBackgroundColor, ";\n color: ").concat(props.backgroundType === "dark" ? props.theme.hoverActionIconColorOnDark : props.theme.hoverActionIconColor, ";\n }\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px ").concat(props.backgroundType === "dark" ? props.theme.focusActionBorderColorOnDark : props.theme.focusActionBorderColor, ";\n color: ").concat(props.backgroundType === "dark" ? props.theme.focusActionIconColorOnDark : props.theme.focusActionIconColor, ";\n }\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px ").concat(props.backgroundType === "dark" ? props.theme.focusActionBorderColorOnDark : props.theme.focusActionBorderColor, ";\n color: ").concat(props.backgroundType === "dark" ? props.theme.focusActionIconColorOnDark : props.theme.focusActionIconColor, ";\n }\n &:active {\n background-color: ").concat(props.backgroundType === "dark" ? props.theme.activeActionBackgroundColorOnDark : props.theme.activeActionBackgroundColor, ";\n color: ").concat(props.backgroundType === "dark" ? props.theme.activeActionIconColorOnDark : props.theme.activeActionIconColor, ";\n }\n ");
865
881
  });
866
882
 
867
- var Prefix = _styledComponents["default"].span(_templateObject8(), function (props) {
883
+ var Prefix = _styledComponents["default"].span(_templateObject9(), function (props) {
868
884
  var color = props.disabled ? props.backgroundType === "dark" ? props.theme.disabledPrefixColorOnDark : props.theme.disabledPrefixColor : props.backgroundType === "dark" ? props.theme.prefixColorOnDark : props.theme.prefixColor;
869
885
  return "color: ".concat(color, "; border-right: 1px solid ").concat(color, ";");
870
886
  }, function (props) {
871
887
  return props.theme.fontFamily;
872
888
  });
873
889
 
874
- var Suffix = _styledComponents["default"].span(_templateObject9(), function (props) {
890
+ var Suffix = _styledComponents["default"].span(_templateObject10(), function (props) {
875
891
  var color = props.disabled ? props.backgroundType === "dark" ? props.theme.disabledSuffixColorOnDark : props.theme.disabledSuffixColor : props.backgroundType === "dark" ? props.theme.suffixColorOnDark : props.theme.suffixColor;
876
892
  return "color: ".concat(color, "; border-left: 1px solid ").concat(color, ";");
877
893
  }, function (props) {
878
894
  return props.theme.fontFamily;
879
895
  });
880
896
 
881
- var ErrorIcon = _styledComponents["default"].span(_templateObject10(), function (props) {
897
+ var ErrorIcon = _styledComponents["default"].span(_templateObject11(), function (props) {
882
898
  return props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor;
883
899
  });
884
900
 
885
- var Error = _styledComponents["default"].span(_templateObject11(), function (props) {
901
+ var Error = _styledComponents["default"].span(_templateObject12(), function (props) {
886
902
  return props.backgroundType === "dark" ? props.theme.errorMessageColorOnDark : props.theme.errorMessageColor;
887
903
  }, function (props) {
888
904
  return props.theme.fontFamily;
889
905
  });
890
906
 
891
- var Suggestions = _styledComponents["default"].ul(_templateObject12(), function (props) {
907
+ var Suggestions = _styledComponents["default"].ul(_templateObject13(), function (props) {
892
908
  return props.isError ? props.theme.errorMessageBackgroundColor : "#ffffff";
893
909
  }, function (props) {
894
910
  return props.isError ? props.theme.errorMessageBorderColor : props.theme.enabledBorderColor;
@@ -904,17 +920,21 @@ var Suggestions = _styledComponents["default"].ul(_templateObject12(), function
904
920
  return props.theme.listOptionFontWeight;
905
921
  });
906
922
 
907
- var Suggestion = _styledComponents["default"].li(_templateObject13(), function (props) {
923
+ var Suggestion = _styledComponents["default"].li(_templateObject14(), function (props) {
908
924
  return props.active ? "background-color: ".concat(props.theme.activeListOptionBackgroundColor, ";") : props.visualFocused && "background-color: ".concat(props.theme.hoverListOptionBackgroundColor, ";");
909
925
  });
910
926
 
911
- var SuggestionsSystemMessage = _styledComponents["default"].span(_templateObject14(), function (props) {
927
+ var SuggestionsSystemMessage = _styledComponents["default"].span(_templateObject15(), function (props) {
912
928
  return props.theme.systemMessageFontColor;
913
929
  });
914
930
 
915
- var SuggestionsError = _styledComponents["default"].span(_templateObject15());
931
+ var SuggestionsErrorIcon = _styledComponents["default"].span(_templateObject16(), function (props) {
932
+ return props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor;
933
+ });
934
+
935
+ var SuggestionsError = _styledComponents["default"].span(_templateObject17());
916
936
 
917
- DxcNewInputText.propTypes = {
937
+ DxcTextInput.propTypes = {
918
938
  label: _propTypes["default"].string,
919
939
  name: _propTypes["default"].string,
920
940
  value: _propTypes["default"].string,
@@ -922,22 +942,19 @@ DxcNewInputText.propTypes = {
922
942
  placeholder: _propTypes["default"].string,
923
943
  action: _propTypes["default"].shape({
924
944
  onClick: _propTypes["default"].func.isRequired,
925
- icon: _propTypes["default"].shape({
945
+ icon: _propTypes["default"].oneOfType([_propTypes["default"].shape({
926
946
  type: _propTypes["default"].oneOf(["svg"])
927
- }).isRequired
947
+ }), _propTypes["default"].string]).isRequired
928
948
  }),
929
949
  clearable: _propTypes["default"].bool,
930
950
  disabled: _propTypes["default"].bool,
931
951
  optional: _propTypes["default"].bool,
932
- prefix: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].shape({
933
- type: _propTypes["default"].oneOf(["svg"])
934
- })]),
935
- suffix: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].shape({
936
- type: _propTypes["default"].oneOf(["svg"])
937
- })]),
952
+ prefix: _propTypes["default"].string,
953
+ suffix: _propTypes["default"].string,
938
954
  onChange: _propTypes["default"].func,
939
955
  onBlur: _propTypes["default"].func,
940
956
  error: _propTypes["default"].string,
957
+ autocomplete: _propTypes["default"].string,
941
958
  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
942
959
  top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
943
960
  bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
@@ -953,5 +970,5 @@ DxcNewInputText.propTypes = {
953
970
  }),
954
971
  tabIndex: _propTypes["default"].number
955
972
  };
956
- var _default = DxcNewInputText;
973
+ var _default = DxcTextInput;
957
974
  exports["default"] = _default;