pds-dev-kit-web 2.2.287 → 2.2.289
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.
- package/dist/src/desktop/components/BoxItem/BoxItem.js +1 -3
- package/dist/src/hybrid/components/ImageView/ImageView.d.ts +2 -1
- package/dist/src/hybrid/components/ImageView/ImageView.js +2 -2
- package/dist/src/mobile/components/BoxItem/BoxItem.js +1 -3
- package/package.json +1 -1
- package/release-note.md +2 -2
|
@@ -101,9 +101,7 @@ function BoxItem(_a) {
|
|
|
101
101
|
: selectionMode === 'use'
|
|
102
102
|
? 'pointer'
|
|
103
103
|
: 'default'
|
|
104
|
-
} }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use", wordBreak: titleTextWordBreak })), descText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: descText, colorOverride: state === 'disabled' || state === 'read_only'
|
|
105
|
-
? 'ui_cpnt_textlabel_sys_secondary'
|
|
106
|
-
: descTextColorKey, lineLimit: descLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular", wordBreak: descTextWordBreak }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
|
|
104
|
+
} }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use", wordBreak: titleTextWordBreak })), descText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: descText, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : descTextColorKey, lineLimit: descLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular", wordBreak: descTextWordBreak }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
|
|
107
105
|
(chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, iconSize: 20, state: state === 'normal' ? 'normal' : 'disabled', baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn3Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, state: state === 'normal' ? 'normal' : 'disabled', onClick: handleIBtn1Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
|
|
108
106
|
}
|
|
109
107
|
var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"])), function (_a) {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export type ImageViewProps = {
|
|
3
3
|
src?: string;
|
|
4
|
+
altText?: string;
|
|
4
5
|
shapeType?: 'round' | 'circular' | 'rectangle';
|
|
5
6
|
radius?: 8 | 16 | 24;
|
|
6
7
|
width?: number | 'responsive';
|
|
@@ -13,5 +14,5 @@ export type ImageViewProps = {
|
|
|
13
14
|
backgroundFillMode?: 'use' | 'none';
|
|
14
15
|
isLoading?: boolean;
|
|
15
16
|
};
|
|
16
|
-
declare const ImageView: ({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: ImageViewProps) => JSX.Element;
|
|
17
|
+
declare const ImageView: ({ src, altText, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: ImageViewProps) => JSX.Element;
|
|
17
18
|
export default ImageView;
|
|
@@ -42,7 +42,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
42
42
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
43
43
|
var styles_1 = require("../../../common/styles");
|
|
44
44
|
var ImageView = function (_a) {
|
|
45
|
-
var src = _a.src, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, _c = _a.radius, radius = _c === void 0 ? 8 : _c, width = _a.width, height = _a.height, noImageHeight = _a.noImageHeight, noImageWidth = _a.noImageWidth, _d = _a.ratio, ratio = _d === void 0 ? 'auto' : _d, _e = _a.scaleType, scaleType = _e === void 0 ? 'none' : _e, _f = _a.borderMode, borderMode = _f === void 0 ? 'none' : _f, _g = _a.backgroundFillMode, backgroundFillMode = _g === void 0 ? 'none' : _g, isLoading = _a.isLoading;
|
|
45
|
+
var src = _a.src, altText = _a.altText, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, _c = _a.radius, radius = _c === void 0 ? 8 : _c, width = _a.width, height = _a.height, noImageHeight = _a.noImageHeight, noImageWidth = _a.noImageWidth, _d = _a.ratio, ratio = _d === void 0 ? 'auto' : _d, _e = _a.scaleType, scaleType = _e === void 0 ? 'none' : _e, _f = _a.borderMode, borderMode = _f === void 0 ? 'none' : _f, _g = _a.backgroundFillMode, backgroundFillMode = _g === void 0 ? 'none' : _g, isLoading = _a.isLoading;
|
|
46
46
|
var LoadingAutoImageView = function () {
|
|
47
47
|
if (width && !height && !noImageHeight) {
|
|
48
48
|
return ((0, jsx_runtime_1.jsx)(S_LoadingRatioImageViewWrapper, __assign({ "$width": width, shapeType: shapeType, "$radius": radius }, { children: (0, jsx_runtime_1.jsx)(S_LoadingRatioImageView, { ratio: "4_3" }) })));
|
|
@@ -66,7 +66,7 @@ var ImageView = function (_a) {
|
|
|
66
66
|
if (isLoading) {
|
|
67
67
|
return LoadingImageView();
|
|
68
68
|
}
|
|
69
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ratio === 'auto' ? ((0, jsx_runtime_1.jsx)(S_AutoImageViewWrapper, __assign({ "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode, "$src": src }, { children: src && ((0, jsx_runtime_1.jsx)(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })) }))) : ((0, jsx_runtime_1.jsx)(S_RatioImageViewWrapper, __assign({ "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$width": width, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode }, { children: (0, jsx_runtime_1.jsx)(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio }) }))) }));
|
|
69
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ratio === 'auto' ? ((0, jsx_runtime_1.jsx)(S_AutoImageViewWrapper, __assign({ "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode, "$src": src }, { children: src && ((0, jsx_runtime_1.jsx)(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType, alt: altText })) }))) : ((0, jsx_runtime_1.jsx)(S_RatioImageViewWrapper, __assign({ "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$width": width, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode }, { children: (0, jsx_runtime_1.jsx)(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio, title: altText }) }))) }));
|
|
70
70
|
};
|
|
71
71
|
return ImageViewVariation();
|
|
72
72
|
};
|
|
@@ -100,9 +100,7 @@ function BoxItem(_a) {
|
|
|
100
100
|
: selectionMode === 'use'
|
|
101
101
|
? 'pointer'
|
|
102
102
|
: 'default'
|
|
103
|
-
} }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: titleText, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, wordBreak: titleTextWordBreak, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: descText, colorOverride: state === 'disabled' || state === 'read_only'
|
|
104
|
-
? 'ui_cpnt_textlabel_sys_secondary'
|
|
105
|
-
: descTextColorKey, lineLimit: descLineLimit, wordBreak: descTextWordBreak, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
|
|
103
|
+
} }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { checked: checkboxState === 'checked', isIndeterminate: checkboxState === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: titleText, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, wordBreak: titleTextWordBreak, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: descText, colorTheme: state === 'disabled' || state === 'read_only' ? 'sysTextTertiary' : undefined, colorOverride: state === 'disabled' || state === 'read_only' ? undefined : descTextColorKey, lineLimit: descLineLimit, wordBreak: descTextWordBreak, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
|
|
106
104
|
(chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, onClick: handleIBtn3Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state === 'normal' ? 'normal' : 'disabled', iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
|
|
107
105
|
}
|
|
108
106
|
var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: ", ";\n width: 100%;\n"])), function (_a) {
|
package/package.json
CHANGED
package/release-note.md
CHANGED