pds-dev-kit-web 2.1.6 → 2.1.7

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 (25) hide show
  1. package/dist/src/common/types/components.d.ts +1 -0
  2. package/dist/src/desktop/components/BasicButtonGroup/BasicButtonGroup.js +11 -4
  3. package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js +1 -1
  4. package/dist/src/desktop/components/IconButton/IconButton.d.ts +1 -1
  5. package/dist/src/desktop/components/IconButton/IconButton.js +19 -14
  6. package/dist/src/desktop/components/SegmentedButtonGroup/SegmentedButtonGroup.d.ts +1 -0
  7. package/dist/src/desktop/components/SegmentedButtonGroup/SegmentedButtonGroup.js +6 -3
  8. package/dist/src/desktop/components/Slider/Slider.js +1 -1
  9. package/dist/src/desktop/components/TextField/TextField.d.ts +2 -1
  10. package/dist/src/desktop/components/TextField/TextField.js +5 -5
  11. package/dist/src/desktop/components/TextLabel/TextLabel.js +6 -18
  12. package/dist/src/desktop/components/UploadIconButton/UploadIconButton.d.ts +1 -1
  13. package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js +18 -13
  14. package/dist/src/mobile/components/BasicButtonGroup/BasicButtonGroup.js +11 -4
  15. package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js +1 -1
  16. package/dist/src/mobile/components/IconButton/IconButton.d.ts +1 -1
  17. package/dist/src/mobile/components/IconButton/IconButton.js +11 -6
  18. package/dist/src/mobile/components/SegmentedButtonGroup/SegmentedButtonGroup.d.ts +1 -0
  19. package/dist/src/mobile/components/SegmentedButtonGroup/SegmentedButtonGroup.js +6 -3
  20. package/dist/src/mobile/components/TextField/TextField.d.ts +2 -1
  21. package/dist/src/mobile/components/TextField/TextField.js +5 -5
  22. package/dist/src/mobile/components/UploadIconButton/UploadIconButton.d.ts +1 -1
  23. package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js +10 -5
  24. package/package.json +1 -1
  25. package/release-note.md +16 -13
package/dist/src/common/types/components.d.ts CHANGED
@@ -27,6 +27,7 @@ export declare type BasicButtonGroupValueOption = {
27
27
  iconName: FillIconNameKeys | LineIconNameKeys;
28
28
  iconFillType?: 'fill' | 'line';
29
29
  state?: 'normal' | 'disabled';
30
+ iconColorTheme?: 'none' | 'red';
30
31
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
31
32
  onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
32
33
  };
package/dist/src/desktop/components/BasicButtonGroup/BasicButtonGroup.js CHANGED
@@ -39,11 +39,18 @@ var components_1 = require("../../../hybrid/components");
39
39
  var styled_components_1 = __importStar(require("styled-components"));
40
40
  function BasicButtonGroup(_a) {
41
41
  var _b = _a.size, size = _b === void 0 ? 'medium' : _b, valueArray = _a.valueArray, _c = _a.state, state = _c === void 0 ? 'normal' : _c;
42
+ var getColorKey = function (buttonState, iconColorTheme) {
43
+ if (state === 'disabled' || buttonState === 'disabled') {
44
+ return 'ui_cpnt_button_icon_disabled';
45
+ }
46
+ if (iconColorTheme === 'red') {
47
+ return 'ui_cpnt_button_icon_error';
48
+ }
49
+ return 'ui_cpnt_button_icon_enabled';
50
+ };
42
51
  return ((0, jsx_runtime_1.jsx)(S_BasicButtonGroup, __assign({ "x-pds-name": "BasicButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: valueArray.map(function (_a, index) {
43
- var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
44
- return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: state === 'disabled' || buttonState === 'disabled'
45
- ? 'ui_cpnt_button_icon_disabled'
46
- : 'ui_cpnt_button_icon_enabled' }, void 0) }), iconName + index));
52
+ var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, _d = _a.iconColorTheme, iconColorTheme = _d === void 0 ? 'none' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
53
+ return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }, void 0) }), iconName + index));
47
54
  }) }), void 0));
48
55
  }
49
56
  var S_BasicButtonGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: max-content;\n\n & > button:not(:last-child) {\n margin-right: ", ";\n }\n"], ["\n width: max-content;\n\n & > button:not(:last-child) {\n margin-right: ", ";\n }\n"])), function (_a) {
package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js CHANGED
@@ -39,7 +39,7 @@ var components_1 = require("../../../hybrid/components");
39
39
  var styled_components_1 = __importStar(require("styled-components"));
40
40
  var TextLabel_1 = require("../TextLabel");
41
41
  function ContextMenuItem(_a) {
42
- var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, displayType = _a.displayType, onClick = _a.onClick, text = _a.text, value = _a.value;
42
+ var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.displayType, displayType = _e === void 0 ? 'text_only' : _e, onClick = _a.onClick, text = _a.text, value = _a.value;
43
43
  var handleClick = function () {
44
44
  if (state === 'disabled') {
45
45
  return;
package/dist/src/desktop/components/IconButton/IconButton.d.ts CHANGED
@@ -4,7 +4,7 @@ export declare type IconButtonProps = {
4
4
  tooltipText?: PDSTextType;
5
5
  tooltipPosition?: 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
6
6
  fillType?: 'fill' | 'line';
7
- shapeType?: 'circular' | 'rectangle';
7
+ shapeType?: 'circular' | 'rectangle' | 'round';
8
8
  baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
9
9
  baseColorKey?: UiColors;
10
10
  borderColorKey?: UiColors;
package/dist/src/desktop/components/IconButton/IconButton.js CHANGED
@@ -143,20 +143,25 @@ var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
143
143
  var medium = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
144
144
  var small = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n height: 32px;\n width: 32px;\n"], ["\n height: 32px;\n width: 32px;\n"])));
145
145
  var xsmall = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 24px;\n width: 24px;\n"], ["\n height: 24px;\n width: 24px;\n"])));
146
- var line1ColorTheme = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n border-color: ", ";\n"], ["\n border-color: ", ";\n"])), function (_a) {
146
+ var roundStyle = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
147
+ var baseSize = _a.baseSize;
148
+ return baseSize &&
149
+ { xxlarge: '24px', large: '14px', medium: '12px', small: '10px', xsmall: '8px' }[baseSize];
150
+ });
151
+ var line1ColorTheme = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n border-color: ", ";\n"], ["\n border-color: ", ";\n"])), function (_a) {
147
152
  var theme = _a.theme;
148
153
  return theme.ui_cpnt_button_line_border_error;
149
154
  });
150
- var line2ColorTheme = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n border-color: ", ";\n"], ["\n border-color: ", ";\n"])), function (_a) {
155
+ var line2ColorTheme = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n border-color: ", ";\n"], ["\n border-color: ", ";\n"])), function (_a) {
151
156
  var theme = _a.theme;
152
157
  return theme.ui_cpnt_button_line_border_primary;
153
158
  });
154
- var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
159
+ var iconButtonStyle = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
155
160
  var state = _a.state;
156
161
  return (state === 'normal' ? 'pointer' : 'default');
157
162
  }, function (_a) {
158
163
  var shapeType = _a.shapeType;
159
- return shapeType && { circular: 'border-radius: 50%', rectangle: '' }[shapeType];
164
+ return shapeType && { circular: 'border-radius: 50%', rectangle: '', round: roundStyle }[shapeType];
160
165
  }, function (_a) {
161
166
  var theme = _a.theme, shadow = _a.shadow;
162
167
  return shadow === 'visible' && "box-shadow: " + theme.boxShadow.elevation2;
@@ -178,8 +183,8 @@ var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templat
178
183
  xsmall: xsmall
179
184
  }[baseSize];
180
185
  });
181
- var S_IconButton = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), iconButtonStyle);
182
- var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
186
+ var S_IconButton = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), iconButtonStyle);
187
+ var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
183
188
  var baseSize = _a.baseSize;
184
189
  return baseSize &&
185
190
  {
@@ -190,13 +195,13 @@ var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_14 || (
190
195
  xsmall: constants_1.TOOLTIP_POSITION_SPACING.xsmall
191
196
  }[baseSize];
192
197
  });
193
- var tooltipLeftTop = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n bottom: ", ";\n right: 0;\n"], ["\n bottom: ", ";\n right: 0;\n"])), tooltipPositionSpacing);
194
- var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n right: 0;\n top: ", ";\n"], ["\n right: 0;\n top: ", ";\n"])), tooltipPositionSpacing);
195
- var tooltipCenterTop = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n bottom: ", ";\n"], ["\n bottom: ", ";\n"])), tooltipPositionSpacing);
196
- var tooltipCenterBottom = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n top: ", ";\n"], ["\n top: ", ";\n"])), tooltipPositionSpacing);
197
- var tooltipRightTop = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n bottom: ", ";\n left: 0;\n"], ["\n bottom: ", ";\n left: 0;\n"])), tooltipPositionSpacing);
198
- var tooltipRightBottom = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n left: 0;\n top: ", ";\n"], ["\n left: 0;\n top: ", ";\n"])), tooltipPositionSpacing);
199
- var S_TooltipWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding: ", ";\n position: absolute;\n width: max-content;\n z-index: 400;\n\n ", ";\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding: ", ";\n position: absolute;\n width: max-content;\n z-index: 400;\n\n ", ";\n\n ", "\n"])), function (_a) {
198
+ var tooltipLeftTop = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n bottom: ", ";\n right: 0;\n"], ["\n bottom: ", ";\n right: 0;\n"])), tooltipPositionSpacing);
199
+ var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n right: 0;\n top: ", ";\n"], ["\n right: 0;\n top: ", ";\n"])), tooltipPositionSpacing);
200
+ var tooltipCenterTop = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n bottom: ", ";\n"], ["\n bottom: ", ";\n"])), tooltipPositionSpacing);
201
+ var tooltipCenterBottom = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n top: ", ";\n"], ["\n top: ", ";\n"])), tooltipPositionSpacing);
202
+ var tooltipRightTop = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n bottom: ", ";\n left: 0;\n"], ["\n bottom: ", ";\n left: 0;\n"])), tooltipPositionSpacing);
203
+ var tooltipRightBottom = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n left: 0;\n top: ", ";\n"], ["\n left: 0;\n top: ", ";\n"])), tooltipPositionSpacing);
204
+ var S_TooltipWrapper = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding: ", ";\n position: absolute;\n width: max-content;\n z-index: 400;\n\n ", ";\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding: ", ";\n position: absolute;\n width: max-content;\n z-index: 400;\n\n ", ";\n\n ", "\n"])), function (_a) {
200
205
  var theme = _a.theme;
201
206
  return theme.ui_cpnt_button_tooltip_base;
202
207
  }, function (_a) {
@@ -221,4 +226,4 @@ var S_TooltipWrapper = styled_components_1.default.div(templateObject_21 || (tem
221
226
  }[tooltipPosition];
222
227
  });
223
228
  exports.default = IconButton;
224
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
229
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
package/dist/src/desktop/components/SegmentedButtonGroup/SegmentedButtonGroup.d.ts CHANGED
@@ -4,6 +4,7 @@ declare type SegmentedButtonGroupValueOption = Pick<PDSValueOption, 'value'> & {
4
4
  iconName: FillIconNameKeys | LineIconNameKeys;
5
5
  iconFillType?: 'fill' | 'line';
6
6
  state?: 'normal' | 'disabled';
7
+ iconColorTheme?: 'none' | 'red';
7
8
  };
8
9
  export declare type SegmentedButtonGroupProps = {
9
10
  size?: 'large' | 'medium' | 'small';
package/dist/src/desktop/components/SegmentedButtonGroup/SegmentedButtonGroup.js CHANGED
@@ -55,18 +55,21 @@ function SegmentedButtonGroup(_a) {
55
55
  }
56
56
  return value === currentButtonValue;
57
57
  };
58
- var getIconColorKey = function (isSelected, isDisabled) {
58
+ var getIconColorKey = function (isSelected, isDisabled, iconColorTheme) {
59
59
  if (isDisabled) {
60
60
  return 'ui_cpnt_button_icon_disabled';
61
61
  }
62
62
  if (isSelected) {
63
63
  return 'ui_cpnt_button_icon_white';
64
64
  }
65
+ if (iconColorTheme === 'red') {
66
+ return 'ui_cpnt_button_icon_error';
67
+ }
65
68
  return 'ui_cpnt_button_icon_enabled';
66
69
  };
67
70
  return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", selectedType: selectedType }, { children: valueArray.map(function (_a) {
68
- var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c;
69
- return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectedType: selectedType, isSelected: checkSelection(currentButtonValue) }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled') }, void 0) }), String(currentButtonValue)));
71
+ var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, _d = _a.iconColorTheme, iconColorTheme = _d === void 0 ? 'none' : _d;
72
+ return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectedType: selectedType, isSelected: checkSelection(currentButtonValue) }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }, void 0) }), String(currentButtonValue)));
70
73
  }) }), void 0));
71
74
  }
72
75
  var S_SegmentedButtonGroupGroups = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: max-content;\n\n & > button:not(:last-child) {\n margin-right: ", ";\n }\n"], ["\n width: max-content;\n\n & > button:not(:last-child) {\n margin-right: ", ";\n }\n"])), function (_a) {
package/dist/src/desktop/components/Slider/Slider.js CHANGED
@@ -137,7 +137,7 @@ function Slider(_a, ref) {
137
137
  }
138
138
  inputRef.current = node;
139
139
  };
140
- return ((0, jsx_runtime_1.jsxs)(S_SliderBox, __assign({ "x-pds-name": "Slider", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use", textAlign: "right" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(S_SliderWrapper, __assign({ customWidth: customWidth, responsiveMode: responsiveMode }, { children: (0, jsx_runtime_1.jsxs)(S_Slider, __assign({ customWidth: customWidth, isDisabled: state === 'disabled', responsiveMode: responsiveMode, thumbPercentage: defaultThumbPercentage, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(S_Track, { ref: trackRef, thumbPercentage: defaultThumbPercentage, isDisabled: state === 'disabled' }, void 0), (0, jsx_runtime_1.jsxs)(S_Thumb, __assign({ ref: thumbRef, thumbPercentage: defaultThumbPercentage, isDragging: isDragging, isDisabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(S_Range, { ref: handleRangeRef, type: "range", name: name, min: min, max: max, step: step, defaultValue: defaultValue, onInput: handleChange, onClick: handleClick }, void 0), tooltipText && isTooltipVisible && ((0, jsx_runtime_1.jsx)(S_Tooltip, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, styleTheme: "caption2Regular", colorOverride: "ui_cpnt_textlabel_button_tooltip", singleLineMode: "use" }, void 0) }, void 0))] }), void 0)] }), void 0) }), void 0), suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use" }, void 0)] }, void 0))] }), void 0));
140
+ return ((0, jsx_runtime_1.jsxs)(S_SliderBox, __assign({ "x-pds-name": "Slider", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use", textAlign: "right" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(S_SliderWrapper, __assign({ customWidth: customWidth, responsiveMode: responsiveMode }, { children: (0, jsx_runtime_1.jsxs)(S_Slider, __assign({ customWidth: customWidth, isDisabled: state === 'disabled', responsiveMode: responsiveMode, thumbPercentage: defaultThumbPercentage, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(S_Track, { ref: trackRef, thumbPercentage: defaultThumbPercentage, isDisabled: state === 'disabled' }, void 0), (0, jsx_runtime_1.jsxs)(S_Thumb, __assign({ ref: thumbRef, thumbPercentage: defaultThumbPercentage, isDragging: isDragging, isDisabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(S_Range, { ref: handleRangeRef, type: "range", name: name, min: min, max: max, step: step, defaultValue: defaultValue, onInput: handleChange, onClick: handleClick }, void 0), tooltipText && isTooltipVisible && ((0, jsx_runtime_1.jsx)(S_Tooltip, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, styleTheme: "caption2Regular", colorOverride: "ui_cpnt_textlabel_button_tooltip", singleLineMode: "use" }, void 0) }, void 0))] }), void 0)] }), void 0) }), void 0), suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use" }, void 0)] }, void 0))] }), void 0));
141
141
  }
142
142
  var S_SliderBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n"])));
143
143
  var S_SliderWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n position: relative;\n width: ", ";\n"], ["\n display: flex;\n position: relative;\n width: ", ";\n"])), function (_a) {
package/dist/src/desktop/components/TextField/TextField.d.ts CHANGED
@@ -34,6 +34,7 @@ export declare type TextFieldProps = {
34
34
  autoComplete?: string;
35
35
  numberStepperMode?: 'none' | 'use';
36
36
  numberStep?: number;
37
+ deleteBtnMode?: 'none' | 'use';
37
38
  onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
38
39
  onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
39
40
  onClickIBtn1?: () => void;
@@ -43,5 +44,5 @@ export declare type TextFieldProps = {
43
44
  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
44
45
  onTarget?: () => void;
45
46
  };
46
- declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
47
+ declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
47
48
  export default TextField;
package/dist/src/desktop/components/TextField/TextField.js CHANGED
@@ -46,7 +46,7 @@ var IconButton_1 = require("../IconButton");
46
46
  var TextLabel_1 = require("../TextLabel");
47
47
  function TextField(_a) {
48
48
  var _b;
49
- var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
49
+ var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.deleteBtnMode, deleteBtnMode = _u === void 0 ? 'use' : _u, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
50
50
  var basicThemeIconColors = {
51
51
  normal: 'ui_cpnt_button_icon_default',
52
52
  read_only: 'ui_cpnt_button_icon_default',
@@ -62,9 +62,9 @@ function TextField(_a) {
62
62
  read_only: 'ui_cpnt_textfield_icon_colortheme_transparent_readonly',
63
63
  disabled: 'ui_cpnt_textfield_icon_colortheme_transparent_disabled'
64
64
  };
65
- var _u = (0, react_1.useState)(false), isFocused = _u[0], setIsFocused = _u[1];
66
- var _v = (0, react_hook_form_1.useFormContext)(), register = _v.register, trigger = _v.trigger, errors = _v.formState.errors;
67
- var _w = register(name, validation), validateOnChange = _w.onChange, validateOnBlur = _w.onBlur;
65
+ var _v = (0, react_1.useState)(false), isFocused = _v[0], setIsFocused = _v[1];
66
+ var _w = (0, react_hook_form_1.useFormContext)(), register = _w.register, trigger = _w.trigger, errors = _w.formState.errors;
67
+ var _x = register(name, validation), validateOnChange = _x.onChange, validateOnBlur = _x.onBlur;
68
68
  var isError = Object.keys(errors).some(function (error) { return error === name; });
69
69
  var handleClickIBtn1 = function () {
70
70
  if (onClickIBtn1) {
@@ -136,7 +136,7 @@ function TextField(_a) {
136
136
  break;
137
137
  }
138
138
  }
139
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: inputType === 'number' && numberStepperMode === 'use' ? 'right' : textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", textAlign: "right", singleLineMode: "use" }, void 0), size === 'large' ? ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0))] }, void 0)), iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
139
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: inputType === 'number' && numberStepperMode === 'use' ? 'right' : textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", textAlign: "right", singleLineMode: "use" }, void 0), size === 'large' ? ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0))] }, void 0)), iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
140
140
  {
141
141
  none: basicThemeIconColors[state],
142
142
  dark: darkThemeIconColors[state],
package/dist/src/desktop/components/TextLabel/TextLabel.js CHANGED
@@ -395,31 +395,19 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_41 || (templ
395
395
  }
396
396
  });
397
397
  var S_IconWrapper = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"])));
398
- var S_TooltipWrapper = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n z-index: 400;\n\n ", ";\n\n ", ";\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n z-index: 400;\n\n ", ";\n\n ", ";\n"])), function (_a) {
398
+ var S_TooltipWrapper = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n z-index: 400;\n ", "\n\n ", ";\n\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n z-index: 400;\n ", "\n\n ", ";\n\n ", ";\n"])), function (_a) {
399
399
  var theme = _a.theme;
400
- return theme.ui_cpnt_contextmenu_base;
400
+ return theme.ui_cpnt_button_tooltip_base;
401
401
  }, function (_a) {
402
402
  var theme = _a.theme;
403
- return theme.ui_cpnt_contextmenu_border;
404
- }, function (_a) {
405
- var theme = _a.theme;
406
- return theme.boxShadow.elevation2;
407
- }, function (_a) {
408
- var theme = _a.theme;
409
- return theme.ui_cpnt_textlabel_sys_secondary;
410
- }, function (_a) {
411
- var theme = _a.theme;
412
- return theme.desktopFontSize.caption2;
413
- }, function (_a) {
414
- var theme = _a.theme;
415
- return theme.fontWeight.normal;
403
+ return theme.spacing.spacingA;
416
404
  }, function (_a) {
417
405
  var theme = _a.theme;
418
- return theme.desktopLineHeight.caption2;
406
+ return theme.ui_cpnt_textlabel_button_tooltip;
419
407
  }, function (_a) {
420
408
  var theme = _a.theme;
421
- return theme.spacing.spacingC;
422
- }, function (_a) {
409
+ return theme.spacing.spacingA + " " + theme.spacing.spacingB;
410
+ }, caption2Regular, function (_a) {
423
411
  var isTooltipOpen = _a.isTooltipOpen;
424
412
  return !isTooltipOpen && 'display: none';
425
413
  }, function (_a) {
package/dist/src/desktop/components/UploadIconButton/UploadIconButton.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
3
3
  export declare type UploadIconButtonProps = {
4
4
  fillType?: 'fill' | 'line';
5
- shapeType?: 'circular' | 'rectangle';
5
+ shapeType?: 'circular' | 'rectangle' | 'round';
6
6
  baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
7
7
  baseColorKey?: UiColors;
8
8
  borderColorKey?: UiColors;
package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js CHANGED
@@ -137,15 +137,20 @@ var large = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 =
137
137
  var medium = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
138
138
  var small = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n height: 32px;\n width: 32px;\n"], ["\n height: 32px;\n width: 32px;\n"])));
139
139
  var xsmall = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n height: 24px;\n width: 24px;\n"], ["\n height: 24px;\n width: 24px;\n"])));
140
- var S_UploadIconButton = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: ", ";\n box-shadow: ", ";\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: ", ";\n box-shadow: ", ";\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n"])), function (_a) {
141
- var shapeType = _a.shapeType;
142
- return shapeType === 'circular' && '50%';
143
- }, function (_a) {
140
+ var roundStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
141
+ var baseSize = _a.baseSize;
142
+ return baseSize &&
143
+ { xxlarge: '24px', large: '14px', medium: '12px', small: '10px', xsmall: '8px' }[baseSize];
144
+ });
145
+ var S_UploadIconButton = styled_components_1.default.label(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-shadow: ", ";\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-shadow: ", ";\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
144
146
  var theme = _a.theme, shadow = _a.shadow;
145
147
  return shadow === 'visible' && theme.boxShadow.elevation2;
146
148
  }, function (_a) {
147
149
  var isDisabled = _a.isDisabled;
148
150
  return (isDisabled ? 'default' : 'pointer');
151
+ }, function (_a) {
152
+ var shapeType = _a.shapeType;
153
+ return shapeType && { circular: 'border-radius: 50%', rectangle: '', round: roundStyle }[shapeType];
149
154
  }, function (_a) {
150
155
  var fillType = _a.fillType;
151
156
  return fillType &&
@@ -164,7 +169,7 @@ var S_UploadIconButton = styled_components_1.default.label(templateObject_12 ||
164
169
  xsmall: xsmall
165
170
  }[baseSize];
166
171
  });
167
- var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
172
+ var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
168
173
  var baseSize = _a.baseSize;
169
174
  return baseSize &&
170
175
  {
@@ -175,13 +180,13 @@ var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_13 || (
175
180
  xsmall: constants_1.TOOLTIP_POSITION_SPACING.xsmall
176
181
  }[baseSize];
177
182
  });
178
- var tooltipLeftTop = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n bottom: ", ";\n right: 0;\n"], ["\n bottom: ", ";\n right: 0;\n"])), tooltipPositionSpacing);
179
- var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n right: 0;\n top: ", ";\n"], ["\n right: 0;\n top: ", ";\n"])), tooltipPositionSpacing);
180
- var tooltipCenterTop = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n bottom: ", ";\n"], ["\n bottom: ", ";\n"])), tooltipPositionSpacing);
181
- var tooltipCenterBottom = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n top: ", ";\n"], ["\n top: ", ";\n"])), tooltipPositionSpacing);
182
- var tooltipRightTop = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n bottom: ", ";\n left: 0;\n"], ["\n bottom: ", ";\n left: 0;\n"])), tooltipPositionSpacing);
183
- var tooltipRightBottom = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n left: 0;\n top: ", ";\n"], ["\n left: 0;\n top: ", ";\n"])), tooltipPositionSpacing);
184
- var S_TooltipWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding: ", ";\n position: absolute;\n width: max-content;\n z-index: 400;\n\n ", ";\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding: ", ";\n position: absolute;\n width: max-content;\n z-index: 400;\n\n ", ";\n\n ", "\n"])), function (_a) {
183
+ var tooltipLeftTop = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n bottom: ", ";\n right: 0;\n"], ["\n bottom: ", ";\n right: 0;\n"])), tooltipPositionSpacing);
184
+ var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n right: 0;\n top: ", ";\n"], ["\n right: 0;\n top: ", ";\n"])), tooltipPositionSpacing);
185
+ var tooltipCenterTop = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n bottom: ", ";\n"], ["\n bottom: ", ";\n"])), tooltipPositionSpacing);
186
+ var tooltipCenterBottom = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n top: ", ";\n"], ["\n top: ", ";\n"])), tooltipPositionSpacing);
187
+ var tooltipRightTop = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n bottom: ", ";\n left: 0;\n"], ["\n bottom: ", ";\n left: 0;\n"])), tooltipPositionSpacing);
188
+ var tooltipRightBottom = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n left: 0;\n top: ", ";\n"], ["\n left: 0;\n top: ", ";\n"])), tooltipPositionSpacing);
189
+ var S_TooltipWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding: ", ";\n position: absolute;\n width: max-content;\n z-index: 400;\n\n ", ";\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding: ", ";\n position: absolute;\n width: max-content;\n z-index: 400;\n\n ", ";\n\n ", "\n"])), function (_a) {
185
190
  var theme = _a.theme;
186
191
  return theme.ui_cpnt_button_tooltip_base;
187
192
  }, function (_a) {
@@ -206,4 +211,4 @@ var S_TooltipWrapper = styled_components_1.default.div(templateObject_20 || (tem
206
211
  }[tooltipPosition];
207
212
  });
208
213
  exports.default = UploadIconButton;
209
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
214
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
package/dist/src/mobile/components/BasicButtonGroup/BasicButtonGroup.js CHANGED
@@ -39,11 +39,18 @@ var components_1 = require("../../../hybrid/components");
39
39
  var styled_components_1 = __importStar(require("styled-components"));
40
40
  function BasicButtonGroup(_a) {
41
41
  var _b = _a.size, size = _b === void 0 ? 'medium' : _b, valueArray = _a.valueArray, _c = _a.state, state = _c === void 0 ? 'normal' : _c;
42
+ var getColorKey = function (buttonState, iconColorTheme) {
43
+ if (state === 'disabled' || buttonState === 'disabled') {
44
+ return 'ui_cpnt_button_icon_disabled';
45
+ }
46
+ if (iconColorTheme === 'red') {
47
+ return 'ui_cpnt_button_icon_error';
48
+ }
49
+ return 'ui_cpnt_button_icon_enabled';
50
+ };
42
51
  return ((0, jsx_runtime_1.jsx)(S_BasicButtonGroup, __assign({ "x-pds-name": "BasicButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: valueArray.map(function (_a, index) {
43
- var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
44
- return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: state === 'disabled' || buttonState === 'disabled'
45
- ? 'ui_cpnt_button_icon_disabled'
46
- : 'ui_cpnt_button_icon_enabled' }, void 0) }), iconName + index));
52
+ var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, _d = _a.iconColorTheme, iconColorTheme = _d === void 0 ? 'none' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
53
+ return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }, void 0) }), iconName + index));
47
54
  }) }), void 0));
48
55
  }
49
56
  var S_BasicButtonGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: max-content;\n\n & > button:not(:last-child) {\n margin-right: ", ";\n }\n"], ["\n width: max-content;\n\n & > button:not(:last-child) {\n margin-right: ", ";\n }\n"])), function (_a) {
package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js CHANGED
@@ -39,7 +39,7 @@ var components_1 = require("../../../hybrid/components");
39
39
  var styled_components_1 = __importStar(require("styled-components"));
40
40
  var TextLabel_1 = require("../TextLabel");
41
41
  function ContextMenuItem(_a) {
42
- var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, displayType = _a.displayType, onClick = _a.onClick, text = _a.text, value = _a.value;
42
+ var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.displayType, displayType = _e === void 0 ? 'text_only' : _e, onClick = _a.onClick, text = _a.text, value = _a.value;
43
43
  var handleClick = function () {
44
44
  if (state === 'disabled') {
45
45
  return;
package/dist/src/mobile/components/IconButton/IconButton.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
3
3
  export declare type IconButtonProps = {
4
4
  fillType?: 'fill' | 'line';
5
- shapeType?: 'circular' | 'rectangle';
5
+ shapeType?: 'circular' | 'rectangle' | 'round';
6
6
  baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
7
7
  baseColorKey?: UiColors;
8
8
  borderColorKey?: UiColors;
package/dist/src/mobile/components/IconButton/IconButton.js CHANGED
@@ -128,17 +128,22 @@ var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
128
128
  var medium = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
129
129
  var small = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n height: 32px;\n width: 32px;\n"], ["\n height: 32px;\n width: 32px;\n"])));
130
130
  var xsmall = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 24px;\n width: 24px;\n"], ["\n height: 24px;\n width: 24px;\n"])));
131
- var line1ColorTheme = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n border-color: ", ";\n"], ["\n border-color: ", ";\n"])), function (_a) {
131
+ var roundStyle = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
132
+ var baseSize = _a.baseSize;
133
+ return baseSize &&
134
+ { xxlarge: '24px', large: '14px', medium: '12px', small: '10px', xsmall: '8px' }[baseSize];
135
+ });
136
+ var line1ColorTheme = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n border-color: ", ";\n"], ["\n border-color: ", ";\n"])), function (_a) {
132
137
  var theme = _a.theme;
133
138
  return theme.ui_cpnt_button_line_border_error;
134
139
  });
135
- var line2ColorTheme = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n border-color: ", ";\n"], ["\n border-color: ", ";\n"])), function (_a) {
140
+ var line2ColorTheme = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n border-color: ", ";\n"], ["\n border-color: ", ";\n"])), function (_a) {
136
141
  var theme = _a.theme;
137
142
  return theme.ui_cpnt_button_line_border_primary;
138
143
  });
139
- var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
144
+ var iconButtonStyle = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
140
145
  var shapeType = _a.shapeType;
141
- return shapeType && { circular: 'border-radius: 50%', rectangle: '' }[shapeType];
146
+ return shapeType && { circular: 'border-radius: 50%', rectangle: '', round: roundStyle }[shapeType];
142
147
  }, function (_a) {
143
148
  var theme = _a.theme, shadow = _a.shadow;
144
149
  return shadow === 'visible' && "box-shadow: " + theme.boxShadow.elevation2;
@@ -160,6 +165,6 @@ var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templat
160
165
  xsmall: xsmall
161
166
  }[baseSize];
162
167
  });
163
- var S_IconButton = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), iconButtonStyle);
168
+ var S_IconButton = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), iconButtonStyle);
164
169
  exports.default = IconButton;
165
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
170
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
package/dist/src/mobile/components/SegmentedButtonGroup/SegmentedButtonGroup.d.ts CHANGED
@@ -4,6 +4,7 @@ declare type SegmentedButtonGroupValueOption = Pick<PDSValueOption, 'value'> & {
4
4
  iconName: FillIconNameKeys | LineIconNameKeys;
5
5
  iconFillType?: 'fill' | 'line';
6
6
  state?: 'normal' | 'disabled';
7
+ iconColorTheme?: 'none' | 'red';
7
8
  };
8
9
  export declare type SegmentedButtonGroupProps = {
9
10
  size?: 'large' | 'medium' | 'small';
package/dist/src/mobile/components/SegmentedButtonGroup/SegmentedButtonGroup.js CHANGED
@@ -55,18 +55,21 @@ function SegmentedButtonGroup(_a) {
55
55
  }
56
56
  return value === currentButtonValue;
57
57
  };
58
- var getIconColorKey = function (isSelected, isDisabled) {
58
+ var getIconColorKey = function (isSelected, isDisabled, iconColorTheme) {
59
59
  if (isDisabled) {
60
60
  return 'ui_cpnt_button_icon_disabled';
61
61
  }
62
62
  if (isSelected) {
63
63
  return 'ui_cpnt_button_icon_white';
64
64
  }
65
+ if (iconColorTheme === 'red') {
66
+ return 'ui_cpnt_button_icon_error';
67
+ }
65
68
  return 'ui_cpnt_button_icon_enabled';
66
69
  };
67
70
  return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile", selectedType: selectedType }, { children: valueArray.map(function (_a) {
68
- var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c;
69
- return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectedType: selectedType, isSelected: checkSelection(currentButtonValue) }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled') }, void 0) }), String(currentButtonValue)));
71
+ var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.iconColorTheme, iconColorTheme = _c === void 0 ? 'none' : _c, _d = _a.state, buttonState = _d === void 0 ? 'normal' : _d;
72
+ return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectedType: selectedType, isSelected: checkSelection(currentButtonValue) }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }, void 0) }), String(currentButtonValue)));
70
73
  }) }), void 0));
71
74
  }
72
75
  var S_SegmentedButtonGroupGroups = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: max-content;\n\n & > button:not(:last-child) {\n margin-right: ", ";\n }\n"], ["\n width: max-content;\n\n & > button:not(:last-child) {\n margin-right: ", ";\n }\n"])), function (_a) {
package/dist/src/mobile/components/TextField/TextField.d.ts CHANGED
@@ -34,6 +34,7 @@ export declare type TextFieldProps = {
34
34
  autoComplete?: string;
35
35
  numberStepperMode?: 'none' | 'use';
36
36
  numberStep?: number;
37
+ deleteBtnMode?: 'none' | 'use';
37
38
  onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
38
39
  onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
39
40
  onClickIBtn1?: () => void;
@@ -43,5 +44,5 @@ export declare type TextFieldProps = {
43
44
  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
44
45
  onTarget?: () => void;
45
46
  };
46
- declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
47
+ declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
47
48
  export default TextField;
package/dist/src/mobile/components/TextField/TextField.js CHANGED
@@ -46,7 +46,7 @@ var IconButton_1 = require("../IconButton");
46
46
  var TextLabel_1 = require("../TextLabel");
47
47
  function TextField(_a) {
48
48
  var _b;
49
- var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
49
+ var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.deleteBtnMode, deleteBtnMode = _u === void 0 ? 'use' : _u, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
50
50
  var basicThemeIconColors = {
51
51
  normal: 'ui_cpnt_button_icon_default',
52
52
  read_only: 'ui_cpnt_button_icon_default',
@@ -62,9 +62,9 @@ function TextField(_a) {
62
62
  read_only: 'ui_cpnt_textfield_icon_colortheme_transparent_readonly',
63
63
  disabled: 'ui_cpnt_textfield_icon_colortheme_transparent_disabled'
64
64
  };
65
- var _u = (0, react_1.useState)(false), isFocused = _u[0], setIsFocused = _u[1];
66
- var _v = (0, react_hook_form_1.useFormContext)(), register = _v.register, trigger = _v.trigger, errors = _v.formState.errors;
67
- var _w = register(name, validation), validateOnChange = _w.onChange, validateOnBlur = _w.onBlur;
65
+ var _v = (0, react_1.useState)(false), isFocused = _v[0], setIsFocused = _v[1];
66
+ var _w = (0, react_hook_form_1.useFormContext)(), register = _w.register, trigger = _w.trigger, errors = _w.formState.errors;
67
+ var _x = register(name, validation), validateOnChange = _x.onChange, validateOnBlur = _x.onBlur;
68
68
  var isError = Object.keys(errors).some(function (error) { return error === name; });
69
69
  var handleClickIBtn1 = function () {
70
70
  if (onClickIBtn1) {
@@ -136,7 +136,7 @@ function TextField(_a) {
136
136
  break;
137
137
  }
138
138
  }
139
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: inputType === 'number' && numberStepperMode === 'use' ? 'right' : textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", textAlign: "right", singleLineMode: "use" }, void 0), size === 'large' ? ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0))] }, void 0)), iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
139
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: inputType === 'number' && numberStepperMode === 'use' ? 'right' : textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", textAlign: "right", singleLineMode: "use" }, void 0), size === 'large' ? ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0))] }, void 0)), iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
140
140
  {
141
141
  none: basicThemeIconColors[state],
142
142
  dark: darkThemeIconColors[state],
package/dist/src/mobile/components/UploadIconButton/UploadIconButton.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
3
3
  export declare type UploadIconButtonProps = {
4
4
  fillType?: 'fill' | 'line';
5
- shapeType?: 'circular' | 'rectangle';
5
+ shapeType?: 'circular' | 'rectangle' | 'round';
6
6
  baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
7
7
  baseColorKey?: UiColors;
8
8
  borderColorKey?: UiColors;
package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js CHANGED
@@ -122,12 +122,17 @@ var large = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 =
122
122
  var medium = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
123
123
  var small = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n height: 32px;\n width: 32px;\n"], ["\n height: 32px;\n width: 32px;\n"])));
124
124
  var xsmall = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n height: 24px;\n width: 24px;\n"], ["\n height: 24px;\n width: 24px;\n"])));
125
- var S_UploadIconButton = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: ", ";\n box-shadow: ", ";\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: ", ";\n box-shadow: ", ";\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n\n ", ";\n\n ", ";\n"])), function (_a) {
126
- var shapeType = _a.shapeType;
127
- return shapeType === 'circular' && '50%';
128
- }, function (_a) {
125
+ var roundStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
126
+ var baseSize = _a.baseSize;
127
+ return baseSize &&
128
+ { xxlarge: '24px', large: '14px', medium: '12px', small: '10px', xsmall: '8px' }[baseSize];
129
+ });
130
+ var S_UploadIconButton = styled_components_1.default.label(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-shadow: ", ";\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-shadow: ", ";\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
129
131
  var theme = _a.theme, shadow = _a.shadow;
130
132
  return shadow === 'visible' && theme.boxShadow.elevation2;
133
+ }, function (_a) {
134
+ var shapeType = _a.shapeType;
135
+ return shapeType && { circular: 'border-radius: 50%', rectangle: '', round: roundStyle }[shapeType];
131
136
  }, function (_a) {
132
137
  var fillType = _a.fillType;
133
138
  return fillType &&
@@ -147,4 +152,4 @@ var S_UploadIconButton = styled_components_1.default.label(templateObject_12 ||
147
152
  }[baseSize];
148
153
  });
149
154
  exports.default = UploadIconButton;
150
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
155
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.1.6",
3
+ "version": "2.1.7",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,18 +1,21 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.1.6]
2
+ ## [v2.1.7]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
- ### Package
6
- * type
7
- * BasicButtonGroupValueOption export 처리
8
- * ContextMenuItemValueOption export 처리
9
- * DropdownValueOption export 처리
10
- * AdminListDropdownValueOption export 처리'
11
5
  ### Components
12
- * AdminList
13
- * Dropdown을 사용하는 부분의 type 변경
6
+ * BasicButtonGroup
7
+ * valueArray에 iconColorTheme='none' | 'red' 추가
14
8
  * ContextMenuItem
15
- * option과 onClick의 type 변경
16
- ### Color
17
- * 컬러 키 값 23.07.12 18시 11분 기준 싱크
18
-
9
+ * displayType prop에 default value 지정
10
+ * SegmentedButtonGroup
11
+ * iconColorTheme='red' 추가
12
+ * IconButton
13
+ * shapeType prop에 round option 추가
14
+ * UploadIconButton
15
+ * shapeType prop에 round option 추가
16
+ * TextField
17
+ * deleteBtnMode추가
18
+ * TextLabel
19
+ * tooltip 디자인 변경(통일성 위해)
20
+ * D_Slider
21
+ * x-pds-device-type을 mobile에서 desktop으로 변경