@dxc-technology/halstack-react 0.0.0-b821bfb → 0.0.0-ba408d4

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 (78) hide show
  1. package/BackgroundColorContext.js +8 -4
  2. package/ThemeContext.js +84 -88
  3. package/V3Select/V3Select.js +33 -127
  4. package/V3Textarea/V3Textarea.js +10 -14
  5. package/accordion/Accordion.js +23 -87
  6. package/accordion-group/AccordionGroup.js +13 -15
  7. package/alert/Alert.js +38 -132
  8. package/badge/Badge.js +9 -13
  9. package/box/Box.js +9 -13
  10. package/button/Button.d.ts +4 -0
  11. package/button/Button.js +15 -71
  12. package/button/Button.stories.tsx +306 -0
  13. package/button/types.d.ts +57 -0
  14. package/button/types.js +5 -0
  15. package/card/Card.js +19 -73
  16. package/checkbox/Checkbox.js +13 -37
  17. package/chip/Chip.js +17 -61
  18. package/common/RequiredComponent.js +3 -11
  19. package/common/variables.js +3 -1
  20. package/date/Date.js +16 -22
  21. package/date-input/DateInput.js +18 -22
  22. package/dialog/Dialog.js +16 -50
  23. package/dropdown/Dropdown.js +37 -131
  24. package/file-input/FileInput.js +48 -160
  25. package/file-input/FileItem.js +29 -123
  26. package/footer/Footer.js +34 -158
  27. package/footer/Icons.js +13 -13
  28. package/header/Header.js +35 -179
  29. package/header/Icons.js +11 -11
  30. package/heading/Heading.js +18 -72
  31. package/input-text/Icons.js +2 -2
  32. package/input-text/InputText.js +36 -130
  33. package/input-text/index.d.ts +1 -1
  34. package/layout/ApplicationLayout.js +31 -123
  35. package/layout/Icons.js +7 -7
  36. package/link/Link.js +18 -72
  37. package/main.d.ts +44 -40
  38. package/main.js +91 -87
  39. package/number-input/NumberInput.js +5 -13
  40. package/number-input/NumberInputContext.js +1 -1
  41. package/package.json +14 -11
  42. package/paginator/Icons.js +9 -9
  43. package/paginator/Paginator.d.ts +4 -0
  44. package/paginator/Paginator.js +24 -131
  45. package/paginator/types.d.ts +38 -0
  46. package/paginator/types.js +5 -0
  47. package/password-input/PasswordInput.js +15 -19
  48. package/progress-bar/ProgressBar.js +18 -72
  49. package/radio/Radio.js +12 -26
  50. package/resultsetTable/ResultsetTable.js +35 -119
  51. package/select/Select.js +161 -434
  52. package/sidenav/Sidenav.js +15 -49
  53. package/slider/Slider.js +19 -83
  54. package/spinner/Spinner.js +38 -152
  55. package/switch/Switch.js +12 -26
  56. package/table/Table.js +10 -24
  57. package/tabs/Tabs.js +26 -110
  58. package/tag/Tag.js +22 -96
  59. package/text-input/TextInput.js +104 -271
  60. package/textarea/Textarea.js +20 -72
  61. package/toggle/Toggle.js +15 -49
  62. package/toggle-group/ToggleGroup.js +23 -107
  63. package/upload/Upload.js +11 -15
  64. package/upload/buttons-upload/ButtonsUpload.js +13 -37
  65. package/upload/buttons-upload/Icons.js +7 -7
  66. package/upload/dragAndDropArea/DragAndDropArea.js +24 -128
  67. package/upload/dragAndDropArea/Icons.js +6 -6
  68. package/upload/file-upload/FileToUpload.js +16 -90
  69. package/upload/file-upload/Icons.js +13 -13
  70. package/upload/files-upload/FilesToUpload.js +12 -26
  71. package/upload/transaction/Icons.js +31 -31
  72. package/upload/transaction/Transaction.js +17 -61
  73. package/upload/transactions/Transactions.js +13 -57
  74. package/wizard/Icons.js +8 -8
  75. package/wizard/Wizard.js +31 -165
  76. package/button/Button.stories.js +0 -27
  77. package/button/index.d.ts +0 -24
  78. package/paginator/index.d.ts +0 -20
package/card/Card.js CHANGED
@@ -1,9 +1,9 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
4
 
5
+ var _typeof3 = require("@babel/runtime/helpers/typeof");
6
+
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
@@ -29,65 +29,11 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
29
29
 
30
30
  var _Box = _interopRequireDefault(require("../box/Box"));
31
31
 
32
- function _templateObject6() {
33
- var data = (0, _taggedTemplateLiteral2["default"])(["\n flex-grow: 1;\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n overflow: hidden;\n"]);
34
-
35
- _templateObject6 = function _templateObject6() {
36
- return data;
37
- };
38
-
39
- return data;
40
- }
41
-
42
- function _templateObject5() {
43
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 35%;\n height: 100%;\n flex-shrink: 0;\n background: ", ";\n justify-content: center;\n align-items: center;\n display: inline-flex;\n"]);
44
-
45
- _templateObject5 = function _templateObject5() {
46
- return data;
47
- };
48
-
49
- return data;
50
- }
51
-
52
- function _templateObject4() {
53
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n object-fit: ", ";\n"]);
54
-
55
- _templateObject4 = function _templateObject4() {
56
- return data;
57
- };
58
-
59
- return data;
60
- }
61
-
62
- function _templateObject3() {
63
- var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n text-decoration: none;\n"]);
64
-
65
- _templateObject3 = function _templateObject3() {
66
- return data;
67
- };
68
-
69
- return data;
70
- }
71
-
72
- function _templateObject2() {
73
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-direction: ", ";\n height: ", ";\n width: ", ";\n &:hover {\n border-color: ", ";\n }\n"]);
74
-
75
- _templateObject2 = function _templateObject2() {
76
- return data;
77
- };
78
-
79
- return data;
80
- }
81
-
82
- function _templateObject() {
83
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n cursor: ", ";\n outline: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
32
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
84
33
 
85
- _templateObject = function _templateObject() {
86
- return data;
87
- };
34
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
88
35
 
89
- return data;
90
- }
36
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
91
37
 
92
38
  var DxcCard = function DxcCard(_ref) {
93
39
  var imageSrc = _ref.imageSrc,
@@ -110,25 +56,25 @@ var DxcCard = function DxcCard(_ref) {
110
56
  isHovered = _useState2[0],
111
57
  changeIsHovered = _useState2[1];
112
58
 
113
- var tagContent = _react["default"].createElement(_Box["default"], {
59
+ var tagContent = /*#__PURE__*/_react["default"].createElement(_Box["default"], {
114
60
  shadowDepth: outlined ? 0 : isHovered && (onClick || linkHref) ? 2 : 1
115
- }, _react["default"].createElement(_styledComponents.ThemeProvider, {
61
+ }, /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
116
62
  theme: colorsTheme.card
117
- }, _react["default"].createElement(CardContainer, {
63
+ }, /*#__PURE__*/_react["default"].createElement(CardContainer, {
118
64
  hasAction: onClick || linkHref,
119
65
  outlined: outlined,
120
66
  imagePosition: imagePosition
121
- }, imageSrc && _react["default"].createElement(ImageContainer, {
67
+ }, imageSrc && /*#__PURE__*/_react["default"].createElement(ImageContainer, {
122
68
  imageBgColor: imageBgColor
123
- }, _react["default"].createElement(TagImage, {
69
+ }, /*#__PURE__*/_react["default"].createElement(TagImage, {
124
70
  imagePadding: imagePadding,
125
71
  cover: imageCover,
126
72
  src: imageSrc
127
- })), _react["default"].createElement(CardContent, {
73
+ })), /*#__PURE__*/_react["default"].createElement(CardContent, {
128
74
  contentPadding: contentPadding
129
75
  }, children))));
130
76
 
131
- return _react["default"].createElement(StyledDxcCard, {
77
+ return /*#__PURE__*/_react["default"].createElement(StyledDxcCard, {
132
78
  margin: margin,
133
79
  onMouseEnter: function onMouseEnter() {
134
80
  return changeIsHovered(true);
@@ -139,13 +85,13 @@ var DxcCard = function DxcCard(_ref) {
139
85
  onClick: onClick,
140
86
  hasAction: onClick,
141
87
  tabIndex: typeof onClick === "function" && !linkHref ? tabIndex : -1
142
- }, linkHref && _react["default"].createElement(StyledLink, {
88
+ }, linkHref && /*#__PURE__*/_react["default"].createElement(StyledLink, {
143
89
  tabIndex: tabIndex,
144
90
  href: linkHref
145
91
  }, tagContent) || tagContent);
146
92
  };
147
93
 
148
- var StyledDxcCard = _styledComponents["default"].div(_templateObject(), function (_ref2) {
94
+ var StyledDxcCard = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n cursor: ", ";\n outline: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (_ref2) {
149
95
  var hasAction = _ref2.hasAction;
150
96
  return hasAction && "pointer" || "unset";
151
97
  }, function (_ref3) {
@@ -168,7 +114,7 @@ var StyledDxcCard = _styledComponents["default"].div(_templateObject(), function
168
114
  return margin && margin.left ? _variables.spaces[margin.left] : "";
169
115
  });
170
116
 
171
- var CardContainer = _styledComponents["default"].div(_templateObject2(), function (_ref9) {
117
+ var CardContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-direction: ", ";\n height: ", ";\n width: ", ";\n &:hover {\n border-color: ", ";\n }\n"])), function (_ref9) {
172
118
  var imagePosition = _ref9.imagePosition;
173
119
  return imagePosition === "before" && "row" || "row-reverse";
174
120
  }, function (props) {
@@ -180,9 +126,9 @@ var CardContainer = _styledComponents["default"].div(_templateObject2(), functio
180
126
  return hasAction ? "" : "unset";
181
127
  });
182
128
 
183
- var StyledLink = _styledComponents["default"].a(_templateObject3());
129
+ var StyledLink = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n text-decoration: none;\n"])));
184
130
 
185
- var TagImage = _styledComponents["default"].img(_templateObject4(), function (_ref11) {
131
+ var TagImage = _styledComponents["default"].img(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n object-fit: ", ";\n"])), function (_ref11) {
186
132
  var imagePadding = _ref11.imagePadding;
187
133
  return !imagePadding ? "100%" : "calc(100% - ".concat(_variables.spaces[imagePadding], " - ").concat(_variables.spaces[imagePadding], ")");
188
134
  }, function (_ref12) {
@@ -193,12 +139,12 @@ var TagImage = _styledComponents["default"].img(_templateObject4(), function (_r
193
139
  return cover ? "cover" : "contain";
194
140
  });
195
141
 
196
- var ImageContainer = _styledComponents["default"].div(_templateObject5(), function (_ref14) {
142
+ var ImageContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n width: 35%;\n height: 100%;\n flex-shrink: 0;\n background: ", ";\n justify-content: center;\n align-items: center;\n display: inline-flex;\n"])), function (_ref14) {
197
143
  var imageBgColor = _ref14.imageBgColor;
198
144
  return imageBgColor;
199
145
  });
200
146
 
201
- var CardContent = _styledComponents["default"].div(_templateObject6(), function (_ref15) {
147
+ var CardContent = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n flex-grow: 1;\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n overflow: hidden;\n"])), function (_ref15) {
202
148
  var contentPadding = _ref15.contentPadding;
203
149
  return contentPadding && (0, _typeof2["default"])(contentPadding) !== "object" ? _variables.spaces[contentPadding] : "0px";
204
150
  }, function (_ref16) {
@@ -1,9 +1,9 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
4
 
5
+ var _typeof3 = require("@babel/runtime/helpers/typeof");
6
+
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
@@ -35,35 +35,11 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
35
35
 
36
36
  var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
37
37
 
38
- function _templateObject3() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n width: 16px;\n height: 16px;\n position: absolute;\n left: ", ";\n right: ", ";\n z-index: 0;\n margin-left: ", ";\n margin-right: ", ";\n"]);
40
-
41
- _templateObject3 = function _templateObject3() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- function _templateObject2() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n width: ", ";\n display: inline-flex;\n align-items: center;\n cursor: ", ";\n position: relative;\n flex-direction: ", ";\n .MuiCheckbox-colorSecondary {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n &.Mui-disabled {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n opacity: 0.34;\n }\n }\n }\n &.Mui-checked {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: transparent;\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n background-color: transparent;\n color: ", ";\n }\n }\n }\n }\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n width: 24px;\n height: 24px;\n }\n }\n }\n\n .MuiIconButton-colorSecondary {\n &:hover {\n background-color: transparent;\n }\n }\n .MuiButtonBase-root {\n &:hover {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n }\n\n &.Mui-focusVisible {\n .MuiIconButton-label {\n box-shadow: 0 0 0 2px\n ", ";\n }\n }\n z-index: 1;\n margin-left: ", ";\n margin-right: ", ";\n padding: 0px;\n left: ", ";\n right: ", ";\n }\n"]);
38
+ var _templateObject, _templateObject2, _templateObject3;
50
39
 
51
- _templateObject2 = function _templateObject2() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- function _templateObject() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n"]);
60
-
61
- _templateObject = function _templateObject() {
62
- return data;
63
- };
40
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
64
41
 
65
- return data;
66
- }
42
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
67
43
 
68
44
  var DxcCheckbox = function DxcCheckbox(_ref) {
69
45
  var checked = _ref.checked,
@@ -117,9 +93,9 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
117
93
  setIsLabelHovered(!isLabelHovered);
118
94
  };
119
95
 
120
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
96
+ return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
121
97
  theme: colorsTheme.checkbox
122
- }, _react["default"].createElement(CheckboxContainer, {
98
+ }, /*#__PURE__*/_react["default"].createElement(CheckboxContainer, {
123
99
  id: name,
124
100
  brightness: _variables.componentTokens,
125
101
  label: label,
@@ -129,7 +105,7 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
129
105
  size: size,
130
106
  backgroundType: backgroundType,
131
107
  isLabelHovered: isLabelHovered
132
- }, _react["default"].createElement(_Checkbox["default"], {
108
+ }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
133
109
  checked: checked != undefined ? checked : innerChecked,
134
110
  inputProps: {
135
111
  name: name,
@@ -143,12 +119,12 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
143
119
  disableRipple: true,
144
120
  className: "test",
145
121
  tabIndex: tabIndex
146
- }), _react["default"].createElement(CheckboxBlackBack, {
122
+ }), /*#__PURE__*/_react["default"].createElement(CheckboxBlackBack, {
147
123
  labelPosition: labelPosition,
148
124
  disabled: disabled,
149
125
  checked: checked != undefined ? checked : innerChecked,
150
126
  backgroundType: backgroundType
151
- }), required && _react["default"].createElement(_RequiredComponent["default"], null), label && _react["default"].createElement(LabelContainer, {
127
+ }), required && /*#__PURE__*/_react["default"].createElement(_RequiredComponent["default"], null), label && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
152
128
  labelPosition: labelPosition,
153
129
  onClick: disabled === true ? function (e) {} : handlerCheckboxChange,
154
130
  disabled: disabled,
@@ -215,7 +191,7 @@ var getNotDisabledColor = function getNotDisabledColor(props, element) {
215
191
  }
216
192
  };
217
193
 
218
- var LabelContainer = _styledComponents["default"].span(_templateObject(), function (props) {
194
+ var LabelContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n"])), function (props) {
219
195
  return props.disabled ? getDisabledColor(props, "label") : getNotDisabledColor(props, "label");
220
196
  }, function (props) {
221
197
  return props.disabled ? "not-allowed" : "pointer";
@@ -227,7 +203,7 @@ var LabelContainer = _styledComponents["default"].span(_templateObject(), functi
227
203
  return props.theme.fontWeight;
228
204
  });
229
205
 
230
- var CheckboxContainer = _styledComponents["default"].span(_templateObject2(), function (props) {
206
+ var CheckboxContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n width: ", ";\n display: inline-flex;\n align-items: center;\n cursor: ", ";\n position: relative;\n flex-direction: ", ";\n .MuiCheckbox-colorSecondary {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n &.Mui-disabled {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n opacity: 0.34;\n }\n }\n }\n &.Mui-checked {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: transparent;\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n background-color: transparent;\n color: ", ";\n }\n }\n }\n }\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n width: 24px;\n height: 24px;\n }\n }\n }\n\n .MuiIconButton-colorSecondary {\n &:hover {\n background-color: transparent;\n }\n }\n .MuiButtonBase-root {\n &:hover {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n }\n\n &.Mui-focusVisible {\n .MuiIconButton-label {\n box-shadow: 0 0 0 2px\n ", ";\n }\n }\n z-index: 1;\n margin-left: ", ";\n margin-right: ", ";\n padding: 0px;\n left: ", ";\n right: ", ";\n }\n"])), function (props) {
231
207
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
232
208
  }, function (props) {
233
209
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -265,7 +241,7 @@ var CheckboxContainer = _styledComponents["default"].span(_templateObject2(), fu
265
241
  return props.labelPosition === "before" ? "1px" : "unset";
266
242
  });
267
243
 
268
- var CheckboxBlackBack = _styledComponents["default"].span(_templateObject3(), function (props) {
244
+ var CheckboxBlackBack = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n width: 16px;\n height: 16px;\n position: absolute;\n left: ", ";\n right: ", ";\n z-index: 0;\n margin-left: ", ";\n margin-right: ", ";\n"])), function (props) {
269
245
  return !props.checked ? "transparent" : props.disabled ? getDisabledColor(props, "check") : getNotDisabledColor(props, "check");
270
246
  }, function (props) {
271
247
  return props.labelPosition === "before" ? "unset" : "5px";
package/chip/Chip.js CHANGED
@@ -1,9 +1,9 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
4
 
5
+ var _typeof3 = require("@babel/runtime/helpers/typeof");
6
+
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
@@ -27,55 +27,11 @@ var _utils = require("../common/utils.js");
27
27
 
28
28
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
29
29
 
30
- function _templateObject5() {
31
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n ", "\n ", "\n width: ", ";\n height: ", ";\n overflow: hidden;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n &:focus {\n outline-color: ", ";\n outline-width: 2px;\n ", "\n }\n"]);
32
-
33
- _templateObject5 = function _templateObject5() {
34
- return data;
35
- };
36
-
37
- return data;
38
- }
39
-
40
- function _templateObject4() {
41
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n ", "\n margin-right: ", ";\n width: ", ";\n height: ", ";\n"]);
42
-
43
- _templateObject4 = function _templateObject4() {
44
- return data;
45
- };
46
-
47
- return data;
48
- }
49
-
50
- function _templateObject3() {
51
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n ", "\n margin-left: ", ";\n width: ", ";\n height: ", ";\n"]);
52
-
53
- _templateObject3 = function _templateObject3() {
54
- return data;
55
- };
56
-
57
- return data;
58
- }
59
-
60
- function _templateObject2() {
61
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-family: ", ";\n font-weight: ", ";\n font-style: ", ";\n color: ", ";\n cursor: ", ";\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n"]);
62
-
63
- _templateObject2 = function _templateObject2() {
64
- return data;
65
- };
66
-
67
- return data;
68
- }
69
-
70
- function _templateObject() {
71
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n min-height: 40px;\n max-width: ", ";\n background-color: ", ";\n border-radius: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n cursor: ", ";\n"]);
30
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
72
31
 
73
- _templateObject = function _templateObject() {
74
- return data;
75
- };
32
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
76
33
 
77
- return data;
78
- }
34
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
79
35
 
80
36
  var DxcChip = function DxcChip(_ref) {
81
37
  var label = _ref.label,
@@ -90,12 +46,12 @@ var DxcChip = function DxcChip(_ref) {
90
46
  _ref$tabIndex = _ref.tabIndex,
91
47
  tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
92
48
  var colorsTheme = (0, _useTheme["default"])();
93
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
49
+ return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
94
50
  theme: colorsTheme.chip
95
- }, _react["default"].createElement(StyledDxcChip, {
51
+ }, /*#__PURE__*/_react["default"].createElement(StyledDxcChip, {
96
52
  disabled: disabled,
97
53
  margin: margin
98
- }, prefixIcon ? _react["default"].createElement(IconContainer, {
54
+ }, prefixIcon ? /*#__PURE__*/_react["default"].createElement(IconContainer, {
99
55
  disabled: disabled,
100
56
  prefixIcon: true,
101
57
  label: label,
@@ -105,7 +61,7 @@ var DxcChip = function DxcChip(_ref) {
105
61
  return onClickPrefix && !disabled && onClickPrefix(label);
106
62
  },
107
63
  interactuable: typeof onClickPrefix === "function" && !disabled
108
- }, (0, _typeof2["default"])(prefixIcon) === "object" ? prefixIcon : _react["default"].createElement(prefixIcon)) : prefixIconSrc && _react["default"].createElement(PrefixIconContainer, {
64
+ }, (0, _typeof2["default"])(prefixIcon) === "object" ? prefixIcon : /*#__PURE__*/_react["default"].createElement(prefixIcon)) : prefixIconSrc && /*#__PURE__*/_react["default"].createElement(PrefixIconContainer, {
109
65
  disabled: disabled,
110
66
  src: prefixIconSrc,
111
67
  label: label,
@@ -114,11 +70,11 @@ var DxcChip = function DxcChip(_ref) {
114
70
  return onClickPrefix && !disabled && onClickPrefix(label);
115
71
  },
116
72
  interactuable: typeof onClickPrefix === "function" && !disabled
117
- }), label && _react["default"].createElement(ChipTextContainer, {
73
+ }), label && /*#__PURE__*/_react["default"].createElement(ChipTextContainer, {
118
74
  disabled: disabled,
119
75
  prefixIconSrc: prefixIconSrc,
120
76
  suffixIconSrc: suffixIconSrc
121
- }, label), suffixIcon ? _react["default"].createElement(IconContainer, {
77
+ }, label), suffixIcon ? /*#__PURE__*/_react["default"].createElement(IconContainer, {
122
78
  disabled: disabled,
123
79
  suffixIcon: true,
124
80
  mode: "suffix",
@@ -128,7 +84,7 @@ var DxcChip = function DxcChip(_ref) {
128
84
  return onClickSuffix && !disabled && onClickSuffix(label);
129
85
  },
130
86
  interactuable: typeof onClickSuffix === "function" && !disabled
131
- }, (0, _typeof2["default"])(suffixIcon) === "object" ? suffixIcon : _react["default"].createElement(suffixIcon)) : suffixIconSrc && _react["default"].createElement(SuffixIconContainer, {
87
+ }, (0, _typeof2["default"])(suffixIcon) === "object" ? suffixIcon : /*#__PURE__*/_react["default"].createElement(suffixIcon)) : suffixIconSrc && /*#__PURE__*/_react["default"].createElement(SuffixIconContainer, {
132
88
  disabled: disabled,
133
89
  src: suffixIconSrc,
134
90
  label: label,
@@ -152,7 +108,7 @@ var getCursor = function getCursor(interactuable, disabled) {
152
108
  return "cursor:default; outline:none;";
153
109
  };
154
110
 
155
- var StyledDxcChip = _styledComponents["default"].div(_templateObject(), function (_ref2) {
111
+ var StyledDxcChip = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n min-height: 40px;\n max-width: ", ";\n background-color: ", ";\n border-radius: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n cursor: ", ";\n"])), function (_ref2) {
156
112
  var margin = _ref2.margin;
157
113
  return "calc(100% - 40px - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
158
114
  }, function (props) {
@@ -188,7 +144,7 @@ var StyledDxcChip = _styledComponents["default"].div(_templateObject(), function
188
144
  return disabled && "not-allowed";
189
145
  });
190
146
 
191
- var ChipTextContainer = _styledComponents["default"].span(_templateObject2(), function (props) {
147
+ var ChipTextContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-family: ", ";\n font-weight: ", ";\n font-style: ", ";\n color: ", ";\n cursor: ", ";\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n"])), function (props) {
192
148
  return props.theme.fontSize;
193
149
  }, function (props) {
194
150
  return props.theme.fontFamily;
@@ -203,7 +159,7 @@ var ChipTextContainer = _styledComponents["default"].span(_templateObject2(), fu
203
159
  return disabled && "not-allowed" || "default";
204
160
  });
205
161
 
206
- var SuffixIconContainer = _styledComponents["default"].img(_templateObject3(), function (props) {
162
+ var SuffixIconContainer = _styledComponents["default"].img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n ", "\n margin-left: ", ";\n width: ", ";\n height: ", ";\n"])), function (props) {
207
163
  return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
208
164
  }, function (props) {
209
165
  return getCursor(props.interactuable, props.disabled);
@@ -215,7 +171,7 @@ var SuffixIconContainer = _styledComponents["default"].img(_templateObject3(), f
215
171
  return props.theme.iconSize;
216
172
  });
217
173
 
218
- var PrefixIconContainer = _styledComponents["default"].img(_templateObject4(), function (props) {
174
+ var PrefixIconContainer = _styledComponents["default"].img(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n ", "\n margin-right: ", ";\n width: ", ";\n height: ", ";\n"])), function (props) {
219
175
  return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
220
176
  }, function (props) {
221
177
  return getCursor(props.interactuable, props.disabled);
@@ -227,7 +183,7 @@ var PrefixIconContainer = _styledComponents["default"].img(_templateObject4(), f
227
183
  return props.theme.iconSize;
228
184
  });
229
185
 
230
- var IconContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
186
+ var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n ", "\n ", "\n width: ", ";\n height: ", ";\n overflow: hidden;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n &:focus {\n outline-color: ", ";\n outline-width: 2px;\n ", "\n }\n"])), function (props) {
231
187
  return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
232
188
  }, function (props) {
233
189
  return props.prefixIcon ? "margin-right: ".concat((props.label || props.suffixIcon || props.suffixIconSrc) && props.theme.iconSpacing || (props.prefixIcon || props.prefixIconSrc) && "0", ";") : "margin-left: ".concat((props.label || props.prefixIcon || props.prefixIconSrc) && props.theme.iconSpacing || (props.prefixIcon || props.prefixIconSrc) && "0", ";");
@@ -15,23 +15,15 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
15
15
 
16
16
  var _propTypes = _interopRequireDefault(require("prop-types"));
17
17
 
18
- function _templateObject() {
19
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: #d0011b;\n margin-right: 1px;\n cursor: default;\n"]);
20
-
21
- _templateObject = function _templateObject() {
22
- return data;
23
- };
24
-
25
- return data;
26
- }
18
+ var _templateObject;
27
19
 
28
20
  var DxcRequired = function DxcRequired(_ref) {
29
21
  var _ref$theme = _ref.theme,
30
22
  theme = _ref$theme === void 0 ? "light" : _ref$theme;
31
- return _react["default"].createElement(RequiredSpan, null, "*");
23
+ return /*#__PURE__*/_react["default"].createElement(RequiredSpan, null, "*");
32
24
  };
33
25
 
34
- var RequiredSpan = _styledComponents["default"].span(_templateObject());
26
+ var RequiredSpan = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n color: #d0011b;\n margin-right: 1px;\n cursor: default;\n"])));
35
27
 
36
28
  DxcRequired.propTypes = {
37
29
  theme: _propTypes["default"].oneOf(["dark", "light"])
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.typeface = exports.responsiveSizes = exports.spaces = exports.componentTokens = exports.globalTokens = void 0;
8
+ exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.componentTokens = void 0;
9
9
 
10
10
  var _Icons = require("../header/Icons");
11
11
 
@@ -1280,6 +1280,8 @@ var componentTokens = {
1280
1280
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
1281
1281
  hoverErrorBorderColor: globalTokens.color_red_600,
1282
1282
  hoverErrorBorderColorOnDark: "#fe677b",
1283
+ inputMarginTop: globalTokens.spacing_02,
1284
+ inputMarginBottom: globalTokens.spacing_02,
1283
1285
  errorMessageColor: globalTokens.hal_red_s_41,
1284
1286
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
1285
1287
  labelFontColor: globalTokens.hal_black,
package/date/Date.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
6
 
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
@@ -41,17 +41,11 @@ var _variables = require("../common/variables.js");
41
41
 
42
42
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
43
43
 
44
- var _DxcDate$propTypes;
44
+ var _templateObject, _DxcDate$propTypes;
45
45
 
46
- function _templateObject() {
47
- var data = (0, _taggedTemplateLiteral2["default"])([""]);
46
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
48
47
 
49
- _templateObject = function _templateObject() {
50
- return data;
51
- };
52
-
53
- return data;
54
- }
48
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
55
49
 
56
50
  var DxcDate = function DxcDate(_ref) {
57
51
  var value = _ref.value,
@@ -142,16 +136,16 @@ var DxcDate = function DxcDate(_ref) {
142
136
  };
143
137
 
144
138
  var calendarSVG = function calendarSVG() {
145
- return _react["default"].createElement("svg", {
139
+ return /*#__PURE__*/_react["default"].createElement("svg", {
146
140
  xmlns: "http://www.w3.org/2000/svg",
147
141
  height: "24",
148
142
  viewBox: "0 0 24 24",
149
143
  width: "24",
150
144
  fill: "currentColor"
151
- }, _react["default"].createElement("path", {
145
+ }, /*#__PURE__*/_react["default"].createElement("path", {
152
146
  "data-testid": "calendarIcon",
153
147
  d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
154
- }), _react["default"].createElement("path", {
148
+ }), /*#__PURE__*/_react["default"].createElement("path", {
155
149
  d: "M0 0h24v24H0z",
156
150
  fill: "none"
157
151
  }));
@@ -295,15 +289,15 @@ var DxcDate = function DxcDate(_ref) {
295
289
  }
296
290
  }
297
291
  });
298
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
292
+ return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
299
293
  theme: colorsTheme
300
- }, _react["default"].createElement(_core.MuiThemeProvider, {
294
+ }, /*#__PURE__*/_react["default"].createElement(_core.MuiThemeProvider, {
301
295
  theme: dateTheme
302
- }, _react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
296
+ }, /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
303
297
  utils: _dateFns["default"]
304
- }, _react["default"].createElement(StyledDPicker, {
298
+ }, /*#__PURE__*/_react["default"].createElement(StyledDPicker, {
305
299
  margin: margin
306
- }, _react["default"].createElement(_InputText["default"], {
300
+ }, /*#__PURE__*/_react["default"].createElement(_InputText["default"], {
307
301
  label: label,
308
302
  name: name,
309
303
  suffixIcon: calendarSVG,
@@ -319,7 +313,7 @@ var DxcDate = function DxcDate(_ref) {
319
313
  onChange: onChangeInput,
320
314
  onBlur: onBlur && handlerInputBlur || null,
321
315
  tabIndex: tabIndex
322
- }), _react["default"].createElement(_Popover["default"], {
316
+ }), /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
323
317
  open: isOpen,
324
318
  anchorEl: anchorEl,
325
319
  anchorOrigin: {
@@ -335,9 +329,9 @@ var DxcDate = function DxcDate(_ref) {
335
329
  marginTop: "10px"
336
330
  }
337
331
  }
338
- }, _react["default"].createElement(_ClickAwayListener["default"], {
332
+ }, /*#__PURE__*/_react["default"].createElement(_ClickAwayListener["default"], {
339
333
  onClickAway: handlerPickerClose
340
- }, _react["default"].createElement(_core.Paper, null, _react["default"].createElement(_pickers.DatePicker, {
334
+ }, /*#__PURE__*/_react["default"].createElement(_core.Paper, null, /*#__PURE__*/_react["default"].createElement(_pickers.DatePicker, {
341
335
  variant: "static",
342
336
  value: getValueForPicker(),
343
337
  onChange: function onChange(date) {
@@ -354,7 +348,7 @@ var sizes = {
354
348
  fillParent: "100%"
355
349
  };
356
350
 
357
- var StyledDPicker = _styledComponents["default"].div(_templateObject());
351
+ var StyledDPicker = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
358
352
 
359
353
  DxcDate.propTypes = (_DxcDate$propTypes = {
360
354
  value: _propTypes["default"].string,