pds-dev-kit-web-test 2.7.492 → 2.7.494

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 (28) hide show
  1. package/dist/src/common/assets/icons/fill/index.d.ts +0 -1
  2. package/dist/src/common/assets/icons/fill/index.js +0 -2
  3. package/dist/src/common/assets/icons/line/index.d.ts +0 -1
  4. package/dist/src/common/assets/icons/line/index.js +0 -2
  5. package/dist/src/common/styles/colorSet/UIColor.json +1 -3
  6. package/dist/src/common/styles/colorSet/index.d.ts +387 -389
  7. package/dist/src/common/styles/colorSet/index.js +3 -3
  8. package/dist/src/common/styles/colorSet/ui-type.d.ts +0 -2
  9. package/dist/src/desktop/components/BoxItem/BoxItem.d.ts +1 -1
  10. package/dist/src/desktop/components/BoxItem/BoxItem.js +11 -23
  11. package/dist/src/desktop/components/ReactionButton/ReactionButton.js +1 -1
  12. package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.d.ts +1 -1
  13. package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js +3 -13
  14. package/dist/src/mobile/components/BoxItem/BoxItem.d.ts +1 -1
  15. package/dist/src/mobile/components/BoxItem/BoxItem.js +11 -23
  16. package/dist/src/mobile/components/ReactionButton/ReactionButton.js +1 -1
  17. package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js +1 -2
  18. package/dist/src/sub/DynamicLayout/CompositionRenderer/createCompositions.js +1 -6
  19. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js +10 -7
  20. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js +22 -27
  21. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +10 -7
  22. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/types.d.ts +3 -3
  23. package/package.json +1 -1
  24. package/release-note.md +2 -2
  25. package/dist/src/common/assets/icons/fill/Plugin.d.ts +0 -4
  26. package/dist/src/common/assets/icons/fill/Plugin.js +0 -30
  27. package/dist/src/common/assets/icons/line/Plugin.d.ts +0 -4
  28. package/dist/src/common/assets/icons/line/Plugin.js +0 -30
package/dist/src/common/styles/colorSet/index.js CHANGED
@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  /* eslint-disable import/order */
7
7
  var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
8
- var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
9
8
  var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
10
9
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
10
+ var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
11
11
  var colorSet = {
12
12
  SemanticColor: SemanticColor_json_1.default,
13
- PaletteColor_Dark: PaletteColor_Dark_json_1.default,
14
13
  PaletteColor_light: PaletteColor_light_json_1.default,
15
- UIColor: UIColor_json_1.default
14
+ UIColor: UIColor_json_1.default,
15
+ PaletteColor_Dark: PaletteColor_Dark_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
package/dist/src/common/styles/colorSet/ui-type.d.ts CHANGED
@@ -918,6 +918,4 @@ export interface UITheme {
918
918
  ui_147: string;
919
919
  ui_sw_subsidebar_label_text_emphasis: string;
920
920
  ui_pa_figure_text_secondary: string;
921
- ui_148: string;
922
- ui_149: string;
923
921
  }
package/dist/src/desktop/components/BoxItem/BoxItem.d.ts CHANGED
@@ -3,7 +3,7 @@ import type { PDSIconType, PDSTextType, UiColors } from '../../../common/types';
3
3
  type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
4
4
  export type BoxItemProps = {
5
5
  selectionMode?: 'none' | 'use';
6
- state?: 'normal' | 'disabled' | 'read_only';
6
+ state?: 'normal' | 'disabled';
7
7
  checkboxMode?: 'none' | 'use';
8
8
  checkboxState?: 'checked' | 'unchecked' | 'indeterminate';
9
9
  indicatorMode?: 'none' | 'use';
package/dist/src/desktop/components/BoxItem/BoxItem.js CHANGED
@@ -44,7 +44,7 @@ var paddingSpacing = {
44
44
  function BoxItem(_a) {
45
45
  var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.checkboxState, checkboxState = _d === void 0 ? 'unchecked' : _d, _e = _a.indicatorMode, indicatorMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.selectState, selectState = _g === void 0 ? 'unselected' : _g, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _h = _a.titleTextLineLimit, titleTextLineLimit = _h === void 0 ? 2 : _h, _j = _a.titleTextColorKey, titleTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _j, _k = _a.titleTextWordBreak, titleTextWordBreak = _k === void 0 ? 'normal' : _k, descText = _a.descText, _l = _a.descTextColorKey, descTextColorKey = _l === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _l, _m = _a.descTextWordBreak, descTextWordBreak = _m === void 0 ? 'normal' : _m, _o = _a.descLineLimit, descLineLimit = _o === void 0 ? 2 : _o, _p = _a.imageMode, imageMode = _p === void 0 ? 'none' : _p, _q = _a.imageShapeType, imageShapeType = _q === void 0 ? 'round' : _q, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _r = _a.imageRatio, imageRatio = _r === void 0 ? '1_1' : _r, _s = _a.imageScaleType, imageScaleType = _s === void 0 ? 'cover' : _s, _t = _a.chipMode, chipMode = _t === void 0 ? 'none' : _t, chipText = _a.chipText, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _u = _a.displayType, displayType = _u === void 0 ? 'none' : _u, iBtn1IconName = _a.iBtn1IconName, _v = _a.iBtn1IconFillType, iBtn1IconFillType = _v === void 0 ? 'line' : _v, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _w = _a.iBtn2IconFillType, iBtn2IconFillType = _w === void 0 ? 'line' : _w, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, _x = _a.iBtn3IconFillType, iBtn3IconFillType = _x === void 0 ? 'line' : _x, iBtn3IconColorKey = _a.iBtn3IconColorKey, overrideBorderColorKey = _a.overrideBorderColorKey, _y = _a.paddingTop, paddingTop = _y === void 0 ? 'spacing_d' : _y, _z = _a.paddingRight, paddingRight = _z === void 0 ? 'spacing_d' : _z, _0 = _a.paddingBottom, paddingBottom = _0 === void 0 ? 'spacing_d' : _0, _1 = _a.paddingLeft, paddingLeft = _1 === void 0 ? 'spacing_d' : _1, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
46
46
  var handleClick = function () {
47
- if (state === 'disabled' || state === 'read_only') {
47
+ if (state === 'disabled') {
48
48
  return;
49
49
  }
50
50
  if (onClick) {
@@ -53,7 +53,7 @@ function BoxItem(_a) {
53
53
  };
54
54
  var handleIBtn1Click = function (e) {
55
55
  e.stopPropagation();
56
- if (state === 'disabled' || state === 'read_only') {
56
+ if (state === 'disabled') {
57
57
  return;
58
58
  }
59
59
  if (onClickIBtn1) {
@@ -62,7 +62,7 @@ function BoxItem(_a) {
62
62
  };
63
63
  var handleIBtn2Click = function (e) {
64
64
  e.stopPropagation();
65
- if (state === 'disabled' || state === 'read_only') {
65
+ if (state === 'disabled') {
66
66
  return;
67
67
  }
68
68
  if (onClickIBtn2) {
@@ -71,40 +71,28 @@ function BoxItem(_a) {
71
71
  };
72
72
  var handleIBtn3Click = function (e) {
73
73
  e.stopPropagation();
74
- if (state === 'disabled' || state === 'read_only') {
74
+ if (state === 'disabled') {
75
75
  return;
76
76
  }
77
77
  if (onClickIBtn3) {
78
78
  onClickIBtn3(id);
79
79
  }
80
80
  };
81
- return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled' || state === 'read_only'
82
- ? undefined
83
- : selectState === 'selected'
84
- ? 'blue'
85
- : undefined, overrideBorderColorKey: state === 'disabled'
81
+ return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled' ? undefined : selectState === 'selected' ? 'blue' : undefined, overrideBorderColorKey: state === 'disabled'
86
82
  ? 'ui_cpnt_sheet_base'
87
83
  : selectState === 'selected'
88
- ? state === 'read_only'
89
- ? 'ui_cpnt_sheet_border_04'
90
- : overrideBorderColorKey
91
- ? overrideBorderColorKey
92
- : undefined
84
+ ? overrideBorderColorKey
85
+ ? overrideBorderColorKey
86
+ : undefined
93
87
  : 'ui_cpnt_sheet_base', borderWidth: selectionMode === 'use' ? 2 : undefined, overrideCSS: {
94
88
  display: 'flex',
95
89
  flexDirection: 'row',
96
90
  alignItems: 'center',
97
91
  justifyContent: 'space-between',
98
92
  maxWidth: '100%',
99
- cursor: state === 'disabled' || state === 'read_only'
100
- ? 'default'
101
- : selectionMode === 'use'
102
- ? 'pointer'
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' ||
107
- (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" })] }))] })] })) })));
93
+ cursor: state === 'disabled' ? 'default' : selectionMode === 'use' ? 'pointer' : 'default'
94
+ } }, { 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' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' ? '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' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular", wordBreak: descTextWordBreak }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
95
+ (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, 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, 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, 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, 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, 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, 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
96
  }
109
97
  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) {
110
98
  var theme = _a.theme;
package/dist/src/desktop/components/ReactionButton/ReactionButton.js CHANGED
@@ -98,7 +98,7 @@ function ReactionButton(_a) {
98
98
  return value;
99
99
  return (0, numberHelper_1.formatCompactNumber)(value);
100
100
  };
101
- return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", type: "button", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
101
+ return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
102
102
  }
103
103
  var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n height: 32px;\n justify-content: center;\n padding: 0;\n\n ", "\n\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n height: 32px;\n justify-content: center;\n padding: 0;\n\n ", "\n\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n"])), transitionStyle_1.ButtonTransition, function (_a) {
104
104
  var theme = _a.theme;
package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.d.ts CHANGED
@@ -4,7 +4,7 @@ type TextObj = {
4
4
  path: string;
5
5
  title: PDSTextType;
6
6
  };
7
- type StyleTheme = 'main' | 'content' | 'content2' | 'content3';
7
+ type StyleTheme = 'main' | 'content' | 'content2';
8
8
  type UserDesktopTabBarProps = {
9
9
  itemArray?: PDSTabItemOption[];
10
10
  styleTheme?: StyleTheme;
package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js CHANGED
@@ -59,9 +59,6 @@ function UserDesktopTabBar(_a) {
59
59
  if (styleTheme === 'content2') {
60
60
  return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content2", text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }) }), index));
61
61
  }
62
- if (styleTheme === 'content3') {
63
- return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content3", text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }) }), index));
64
- }
65
62
  return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
66
63
  }) })));
67
64
  }
@@ -91,8 +88,6 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (template
91
88
  return contentStyle;
92
89
  case 'content2':
93
90
  return content2Style;
94
- case 'content3':
95
- return content3Style;
96
91
  default:
97
92
  return mainStyle;
98
93
  }
@@ -142,11 +137,7 @@ var content2Style = (0, styled_components_1.css)(templateObject_5 || (templateOb
142
137
  var isActive = _a.isActive;
143
138
  return isActive && "border-radius: 24px;";
144
139
  });
145
- var content3Style = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n cursor: pointer;\n display: flex;\n height: 48px;\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n"], ["\n align-items: center;\n cursor: pointer;\n display: flex;\n height: 48px;\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n"])), function (_a) {
146
- var theme = _a.theme;
147
- return theme.spacing.spacingE;
148
- });
149
- var S_TabBar = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: ", ";\n background-color: ", ";\n border-bottom: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: ", ";\n justify-content: center;\n"], ["\n align-items: ", ";\n background-color: ", ";\n border-bottom: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: ", ";\n justify-content: center;\n"])), function (_a) {
140
+ var S_TabBar = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: ", ";\n background-color: ", ";\n border-bottom: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: ", ";\n justify-content: center;\n"], ["\n align-items: ", ";\n background-color: ", ";\n border-bottom: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: ", ";\n justify-content: center;\n"])), function (_a) {
150
141
  var styleTheme = _a.styleTheme;
151
142
  return styleTheme === 'content2' && 'center';
152
143
  }, function (_a) {
@@ -154,7 +145,7 @@ var S_TabBar = styled_components_1.default.div(templateObject_7 || (templateObje
154
145
  return theme.ui_cpnt_tabbar_base_area;
155
146
  }, function (_a) {
156
147
  var styleTheme = _a.styleTheme, theme = _a.theme;
157
- return !['content2', 'content3'].includes(styleTheme) && "1px solid ".concat(theme.ui_cpnt_divider);
148
+ return styleTheme !== 'content2' && "1px solid ".concat(theme.ui_cpnt_divider);
158
149
  }, function (_a) {
159
150
  var styleTheme = _a.styleTheme;
160
151
  switch (styleTheme) {
@@ -162,10 +153,9 @@ var S_TabBar = styled_components_1.default.div(templateObject_7 || (templateObje
162
153
  return '64px';
163
154
  case 'content2':
164
155
  return '96px';
165
- case 'content3':
166
156
  default:
167
157
  return '48px';
168
158
  }
169
159
  });
170
160
  exports.default = UserDesktopTabBar;
171
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
161
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/dist/src/mobile/components/BoxItem/BoxItem.d.ts CHANGED
@@ -3,7 +3,7 @@ import type { PDSIconType, PDSTextType, UiColors } from '../../../common/types';
3
3
  type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
4
4
  export type BoxItemProps = {
5
5
  selectionMode?: 'none' | 'use';
6
- state?: 'normal' | 'disabled' | 'read_only';
6
+ state?: 'normal' | 'disabled';
7
7
  checkboxMode?: 'none' | 'use';
8
8
  checkboxState?: 'checked' | 'unchecked' | 'indeterminate';
9
9
  indicatorMode?: 'none' | 'use';
package/dist/src/mobile/components/BoxItem/BoxItem.js CHANGED
@@ -44,7 +44,7 @@ var paddingSpacing = {
44
44
  function BoxItem(_a) {
45
45
  var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.checkboxMode, checkboxMode = _c === void 0 ? 'none' : _c, _d = _a.checkboxState, checkboxState = _d === void 0 ? 'unchecked' : _d, _e = _a.indicatorMode, indicatorMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.selectState, selectState = _g === void 0 ? 'unselected' : _g, titleText = _a.titleText, titleFontSize = _a.titleFontSize, _h = _a.titleTextLineLimit, titleTextLineLimit = _h === void 0 ? 2 : _h, _j = _a.titleTextColorKey, titleTextColorKey = _j === void 0 ? 'ui_cpnt_textlabel_sys_primary' : _j, _k = _a.titleTextWordBreak, titleTextWordBreak = _k === void 0 ? 'normal' : _k, descText = _a.descText, _l = _a.descTextColorKey, descTextColorKey = _l === void 0 ? 'ui_cpnt_textlabel_sys_secondary' : _l, _m = _a.descLineLimit, descLineLimit = _m === void 0 ? 2 : _m, _o = _a.descTextWordBreak, descTextWordBreak = _o === void 0 ? 'normal' : _o, _p = _a.imageMode, imageMode = _p === void 0 ? 'none' : _p, _q = _a.imageShapeType, imageShapeType = _q === void 0 ? 'round' : _q, imageSrc = _a.imageSrc, imageWidth = _a.imageWidth, _r = _a.imageRatio, imageRatio = _r === void 0 ? '1_1' : _r, _s = _a.imageScaleType, imageScaleType = _s === void 0 ? 'cover' : _s, _t = _a.chipMode, chipMode = _t === void 0 ? 'none' : _t, chipText = _a.chipText, chipOverrideTextColorKey = _a.chipOverrideTextColorKey, chipOverrideBackgroundColorKey = _a.chipOverrideBackgroundColorKey, _u = _a.displayType, displayType = _u === void 0 ? 'none' : _u, iBtn1IconName = _a.iBtn1IconName, _v = _a.iBtn1IconFillType, iBtn1IconFillType = _v === void 0 ? 'line' : _v, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _w = _a.iBtn2IconFillType, iBtn2IconFillType = _w === void 0 ? 'line' : _w, iBtn2IconColorKey = _a.iBtn2IconColorKey, iBtn3IconName = _a.iBtn3IconName, overrideBorderColorKey = _a.overrideBorderColorKey, _x = _a.iBtn3IconFillType, iBtn3IconFillType = _x === void 0 ? 'line' : _x, iBtn3IconColorKey = _a.iBtn3IconColorKey, _y = _a.paddingTop, paddingTop = _y === void 0 ? 'spacing_d' : _y, _z = _a.paddingRight, paddingRight = _z === void 0 ? 'spacing_d' : _z, _0 = _a.paddingBottom, paddingBottom = _0 === void 0 ? 'spacing_d' : _0, _1 = _a.paddingLeft, paddingLeft = _1 === void 0 ? 'spacing_d' : _1, id = _a.id, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
46
46
  var handleClick = function () {
47
- if (state === 'disabled' || state === 'read_only') {
47
+ if (state === 'disabled') {
48
48
  return;
49
49
  }
50
50
  if (onClick) {
@@ -53,7 +53,7 @@ function BoxItem(_a) {
53
53
  };
54
54
  var handleIBtn1Click = function (e) {
55
55
  e.stopPropagation();
56
- if (state === 'disabled' || state === 'read_only') {
56
+ if (state === 'disabled') {
57
57
  return;
58
58
  }
59
59
  if (onClickIBtn1) {
@@ -62,7 +62,7 @@ function BoxItem(_a) {
62
62
  };
63
63
  var handleIBtn2Click = function (e) {
64
64
  e.stopPropagation();
65
- if (state === 'disabled' || state === 'read_only') {
65
+ if (state === 'disabled') {
66
66
  return;
67
67
  }
68
68
  if (onClickIBtn2) {
@@ -71,39 +71,27 @@ function BoxItem(_a) {
71
71
  };
72
72
  var handleIBtn3Click = function (e) {
73
73
  e.stopPropagation();
74
- if (state === 'disabled' || state === 'read_only') {
74
+ if (state === 'disabled') {
75
75
  return;
76
76
  }
77
77
  if (onClickIBtn3) {
78
78
  onClickIBtn3(id);
79
79
  }
80
80
  };
81
- return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled' || state === 'read_only'
82
- ? undefined
83
- : selectState === 'selected'
84
- ? 'blue'
85
- : undefined, overrideBorderColorKey: state === 'disabled'
81
+ return ((0, jsx_runtime_1.jsx)(S_BoxItem, __assign({ "x-pds-name": "BoxItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick }, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ shapeType: "round", radius: 16, width: "100%", height: "responsive", paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, borderMode: "use", borderColorTheme: state === 'disabled' ? undefined : selectState === 'selected' ? 'blue' : undefined, overrideBorderColorKey: state === 'disabled'
86
82
  ? 'ui_cpnt_sheet_base'
87
83
  : selectState === 'selected'
88
- ? state === 'read_only'
89
- ? 'ui_cpnt_sheet_border_04'
90
- : overrideBorderColorKey
91
- ? overrideBorderColorKey
92
- : undefined
84
+ ? overrideBorderColorKey
85
+ ? overrideBorderColorKey
86
+ : undefined
93
87
  : 'ui_cpnt_sheet_base', borderWidth: selectionMode === 'use' ? 2 : undefined, overrideCSS: {
94
88
  display: 'flex',
95
89
  flexDirection: 'row',
96
90
  alignItems: 'center',
97
91
  justifyContent: 'space-between',
98
- cursor: state === 'disabled' || state === 'read_only'
99
- ? 'default'
100
- : selectionMode === 'use'
101
- ? 'pointer'
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' ||
106
- (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" })] }))] })] })) })));
92
+ cursor: state === 'disabled' ? 'default' : selectionMode === 'use' ? 'pointer' : 'default'
93
+ } }, { 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' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' ? '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' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, wordBreak: descTextWordBreak, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
94
+ (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, 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, 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, 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, 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, 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, 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
95
  }
108
96
  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) {
109
97
  var theme = _a.theme;
package/dist/src/mobile/components/ReactionButton/ReactionButton.js CHANGED
@@ -97,7 +97,7 @@ function ReactionButton(_a) {
97
97
  return value;
98
98
  return (0, numberHelper_1.formatCompactNumber)(value);
99
99
  };
100
- return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", type: "button", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
100
+ return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() })] })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })));
101
101
  }
102
102
  var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding: 0;\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding: 0;\n"])));
103
103
  var S_ReactionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), ReactionButtonStyle);
package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js CHANGED
@@ -158,7 +158,7 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props) {
158
158
  paddingRight: padding.right,
159
159
  paddingLeft: padding.left,
160
160
  width: '100%',
161
- height: HEIGHT_AUTO_CODES.includes(ccbCode) ? 'auto' : '100%'
161
+ height: ccbCode === types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL ? 'auto' : '100%'
162
162
  } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ className: "composition-container", "data-cols": cols, "data-rows": rows, "data-row-height": rowHeight, "data-col-width": "10px", ref: containerRef, cols: cols, rowHeight: rowHeight, sectionRow: rows, "data-wrapper-paddingT": padding.top, "data-wrapper-paddingB": padding.bottom, "data-wrapper-paddingL": padding.left, "data-wrapper-paddingR": padding.right, style: {
163
163
  width: customSectionStyles.width,
164
164
  maxWidth: customSectionStyles.maxWidth
@@ -166,6 +166,5 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props) {
166
166
  });
167
167
  var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: grid; /* Space between grid items */\n gap: 10px;\n grid-auto-rows: minmax(", ", auto);\n grid-template-columns: repeat(", ", 1fr);\n grid-template-rows: repeat(\n ", ",\n minmax(", ", auto)\n );\n /* height: 100%; */\n padding: 10px 10px;\n width: 100%;\n\n * {\n box-sizing: border-box;\n }\n"], ["\n display: grid; /* Space between grid items */\n gap: 10px;\n grid-auto-rows: minmax(", ", auto);\n grid-template-columns: repeat(", ", 1fr);\n grid-template-rows: repeat(\n ", ",\n minmax(", ", auto)\n );\n /* height: 100%; */\n padding: 10px 10px;\n width: 100%;\n\n * {\n box-sizing: border-box;\n }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
168
168
  var S_COMPOSITIONWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
169
- var HEIGHT_AUTO_CODES = [types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL, types_1.CB_ALL_CODES.CB_LIST];
170
169
  exports.default = react_1.default.memo(Composition);
171
170
  var templateObject_1, templateObject_2;
package/dist/src/sub/DynamicLayout/CompositionRenderer/createCompositions.js CHANGED
@@ -44,8 +44,7 @@ function createCompositions(_a) {
44
44
  if (queryPath === 'NONE' || !queryPath || !queryData) {
45
45
  return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC544\uC9C1 \uC5F0\uACB0\uB41C \uCFFC\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }, "no-query")];
46
46
  }
47
- var parsedQueryPath = removeFirstSegment(queryPath);
48
- var queryDataValue = queryData[parsedQueryPath];
47
+ var queryDataValue = queryData[queryPath];
49
48
  var queryComposition = compositions.find(function (composition) { return composition.isDefault; });
50
49
  // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 해당 키가 없는 경우
51
50
  if (!queryDataValue) {
@@ -58,10 +57,6 @@ function createCompositions(_a) {
58
57
  return queryDataValue.slice(0, limit).map(function (query, index) { return ((0, jsx_runtime_1.jsx)(compositionQueryContext_1.CCBQueryPathContext.Provider, __assign({ value: { queryData: query } }, { children: (0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, queryComposition, { ccbCode: componentBlockCode })) }), index)); });
59
58
  }
60
59
  exports.createCompositions = createCompositions;
61
- function removeFirstSegment(path) {
62
- var segments = path.split('/');
63
- return segments.slice(1).join('/');
64
- }
65
60
  function EmptyString() {
66
61
  var t = (0, react_i18next_1.useTranslation)('translation').t;
67
62
  return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t('str_9806') });
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js CHANGED
@@ -69,7 +69,7 @@ var createComponent = function (type, getDesignType, getLocation, designType) {
69
69
  function ContentsCarousel(props) {
70
70
  var _a, _b;
71
71
  var _c = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _c.device, mode = _c.mode, queryData = _c.queryData;
72
- var compositions = props.compositions, index = props.index, _d = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, CB_STYLE_PROP_CONTENTSCAROUSELDESIGN = props.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN, CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD = props.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD, CB_STYLE_PROP_CONTENTSCAROUSELBUTTON = props.CB_STYLE_PROP_CONTENTSCAROUSELBUTTON, CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR = props.CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_CONTENTSCAROUSEL.CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE;
72
+ var compositions = props.compositions, index = props.index, _d = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, CB_STYLE_PROP_CONTENTSCAROUSELDESIGN = props.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN, CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD = props.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD, CB_STYLE_PROP_CONTENTSCAROUSELBUTTON = props.CB_STYLE_PROP_CONTENTSCAROUSELBUTTON, CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR = props.CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_CONTENTSCAROUSEL.CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE;
73
73
  var CB_STYLE_PROP_CONTENTSCAROUSEL = __assign(__assign(__assign(__assign({}, CB_STYLE_PROP_CONTENTSCAROUSELDESIGN), CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD), CB_STYLE_PROP_CONTENTSCAROUSELBUTTON), CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR);
74
74
  var autoPlayEnabled = device === 'DESKTOP'
75
75
  ? CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD_SPEC_AUTOPLAYUSE
@@ -93,11 +93,14 @@ function ContentsCarousel(props) {
93
93
  }), customProgressbarNormalStyle = _h.normalStyle, customProgressbarHoverStyle = _h.hoverStyle;
94
94
  var _j = (0, useSwiper_1.useSwiper)(), swiperRef = _j.swiperRef, progressRef = _j.progressRef, leftTimeMsRef = _j.leftTimeMsRef, isBeginning = _j.isBeginning, isEnd = _j.isEnd, onSwiper = _j.onSwiper, onSlideChangeTransitionEnd = _j.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _j.onAutoplayTimeLeft, onClickPrevBtn = _j.onClickPrevBtn, onClickNextBtn = _j.onClickNextBtn;
95
95
  var _k = (0, react_1.useState)(false), isHovered = _k[0], setIsHovered = _k[1];
96
- var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
97
- .sort(function (a, b) { return a.order - b.order; })
98
- .map(function (item) {
99
- return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
100
- });
96
+ var queryPath = "".concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, "/").concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING, "/").concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET);
97
+ var orderedCompositions = CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE === 'VALUE'
98
+ ? __spreadArray([], CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
99
+ .sort(function (a, b) { return a.order - b.order; })
100
+ .map(function (item) {
101
+ return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
102
+ })
103
+ : compositions.filter(function (comp) { return comp.isDefault; });
101
104
  var loop = contentsCarouselNormalStyle.loop && orderedCompositions.length >= displayCounts;
102
105
  // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
103
106
  var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
@@ -183,7 +186,7 @@ function ContentsCarousel(props) {
183
186
  justifyContent: layout.justifyContent
184
187
  } }, { children: (0, jsx_runtime_1.jsx)(ContentsCarouselCore_1.default, __assign({ ref: swiperRef, className: "cb-contentscarousel", allowTouchMove: mode !== 'EDIT' ? true : false, onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: displayCounts, styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle, effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE.toLowerCase(), loop: loop, displayCounts: displayCounts }, { children: (0, createCompositions_1.createCompositions)({
185
188
  valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
186
- queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA,
189
+ queryPath: queryPath,
187
190
  limit: displayCounts,
188
191
  queryData: queryData,
189
192
  compositions: orderedCompositions,
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js CHANGED
@@ -65,16 +65,16 @@ var createComponent = function (type, getDesignType, getLocation, designType, si
65
65
  };
66
66
  };
67
67
  function ContentsList(props) {
68
- var _a, _b, _c, _d, _e, _f;
69
- var _g = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _g.device, mode = _g.mode, queryData = _g.queryData;
68
+ var _a, _b, _c, _d;
69
+ var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _e.device, mode = _e.mode, queryData = _e.queryData;
70
70
  var index = props.index, compositions = props.compositions, CB_CONTENT_PROP_CONTENTSLIST = props.CB_CONTENT_PROP_CONTENTSLIST, CB_STYLE_PROP_CONTENTSLISTDESIGN = props.CB_STYLE_PROP_CONTENTSLISTDESIGN, CB_STYLE_PROP_CONTENTSLISTPAGINATION = props.CB_STYLE_PROP_CONTENTSLISTPAGINATION, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_LAYOUT_PROP_PADDING = props.CB_LAYOUT_PROP_PADDING, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_LAYOUT_PROP_HEIGHTADJUSTMENT = props.CB_LAYOUT_PROP_HEIGHTADJUSTMENT;
71
71
  var
72
72
  // CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS,
73
- CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
74
- var _h = (0, react_1.useState)(false), isHovered = _h[0], setIsHovered = _h[1];
75
- var _j = (0, react_1.useState)(1), currentPage = _j[0], setCurrentPage = _j[1];
76
- var parsedQueryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
77
- var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[parsedQueryPath];
73
+ CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING, CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET, CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
74
+ var _f = (0, react_1.useState)(false), isHovered = _f[0], setIsHovered = _f[1];
75
+ var _g = (0, react_1.useState)(1), currentPage = _g[0], setCurrentPage = _g[1];
76
+ var queryPath = "".concat(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, "/").concat(CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING, "/").concat(CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET);
77
+ var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[queryPath];
78
78
  // list의 minheight / minwidth를 계산
79
79
  var numberOfColumns = device === 'DESKTOP'
80
80
  ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS
@@ -86,19 +86,19 @@ function ContentsList(props) {
86
86
  ? queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length
87
87
  : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length) / displayCounts);
88
88
  var CB_STYLE_PROP_CONTENTSLIST = __assign(__assign({}, CB_STYLE_PROP_CONTENTSLISTDESIGN), CB_STYLE_PROP_CONTENTSLISTPAGINATION);
89
- var _k = (0, util_1.parseProperties)(props, device), style = _k.style, hoverStyle = _k.hoverStyle, layout = _k.layout, effect = _k.effect, overlayStyle = _k.overlayStyle;
89
+ var _h = (0, util_1.parseProperties)(props, device), style = _h.style, hoverStyle = _h.hoverStyle, layout = _h.layout, effect = _h.effect, overlayStyle = _h.overlayStyle;
90
90
  var contentPropCss = (0, contentsListUtils_1.parseGridContentProp)({
91
91
  props: CB_CONTENT_PROP_CONTENTSLIST,
92
92
  device: device
93
93
  }).contentPropCss;
94
- var _l = (0, contentsListUtils_1.parseGridStyleProp)({
94
+ var _j = (0, contentsListUtils_1.parseGridStyleProp)({
95
95
  props: CB_STYLE_PROP_CONTENTSLIST,
96
96
  device: device
97
- }), stylePropCss = _l.stylePropCss, hoverStylePropCss = _l.hoverStylePropCss;
98
- var _m = (0, contentsListUtils_1.parsePaginationStyleProp)({
97
+ }), stylePropCss = _j.stylePropCss, hoverStylePropCss = _j.hoverStylePropCss;
98
+ var _k = (0, contentsListUtils_1.parsePaginationStyleProp)({
99
99
  props: CB_STYLE_PROP_CONTENTSLIST,
100
100
  device: device
101
- }), paginationNormalStyle = _m.normalStyle, paginationHoverStyle = _m.hoverStyle;
101
+ }), paginationNormalStyle = _k.normalStyle, paginationHoverStyle = _k.hoverStyle;
102
102
  // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
103
103
  var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
104
104
  var cbRef = (0, react_1.useRef)(null);
@@ -135,9 +135,6 @@ function ContentsList(props) {
135
135
  CB_LAYOUT_PROP_PADDING.CB_LAYOUT_PROP_PADDING_SPEC_PADDING.right;
136
136
  var paddingTB = CB_LAYOUT_PROP_PADDING.CB_LAYOUT_PROP_PADDING_SPEC_PADDING.top +
137
137
  CB_LAYOUT_PROP_PADDING.CB_LAYOUT_PROP_PADDING_SPEC_PADDING.bottom;
138
- var queryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
139
- var queryLength = (_f = (_e = queryData === null || queryData === void 0 ? void 0 : queryData[queryPath]) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0;
140
- // const displayedItemLength = Math.max(0, Math.min(endIndex, queryLength) - startIndex);
141
138
  var numberOfRows = Math.ceil(displayCounts / numberOfColumns);
142
139
  var listMinWidth = oneCompositionMinWidth * numberOfColumns + (numberOfColumns - 1) * columnGap + paddingLR;
143
140
  var listMinHeight = oneCompositionMinHeight * numberOfRows +
@@ -147,9 +144,9 @@ function ContentsList(props) {
147
144
  var components = [
148
145
  createPagination(paginationNormalStyle, paginationHoverStyle, isHovered)
149
146
  ].filter(function (component) { return component !== undefined; });
150
- var _o = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _o.layoutRef, positionRefs = _o.positionRefs,
147
+ var _l = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _l.layoutRef, positionRefs = _l.positionRefs,
151
148
  // ccbInset,
152
- componentGroups = _o.componentGroups, getPositionStyle = _o.getPositionStyle, getComponentGroupLayout = _o.getComponentGroupLayout;
149
+ componentGroups = _l.componentGroups, getPositionStyle = _l.getPositionStyle, getComponentGroupLayout = _l.getComponentGroupLayout;
153
150
  var ccbInset = {
154
151
  top: '0px',
155
152
  right: '0px',
@@ -169,11 +166,13 @@ function ContentsList(props) {
169
166
  var isMobile = device === 'MOBILE';
170
167
  var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
171
168
  var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
172
- var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
173
- .sort(function (a, b) { return a.order - b.order; })
174
- .map(function (item) {
175
- return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
176
- });
169
+ var orderedCompositions = CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE === 'VALUE'
170
+ ? __spreadArray([], CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
171
+ .sort(function (a, b) { return a.order - b.order; })
172
+ .map(function (item) {
173
+ return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
174
+ })
175
+ : compositions.filter(function (comp) { return comp.isDefault; });
177
176
  var heightFitContentByDevice = device === 'DESKTOP'
178
177
  ? CB_LAYOUT_PROP_HEIGHTADJUSTMENT === null || CB_LAYOUT_PROP_HEIGHTADJUSTMENT === void 0 ? void 0 : CB_LAYOUT_PROP_HEIGHTADJUSTMENT.CB_LAYOUT_PROP_HEIGHTADJUSTMENT_SPEC_HEIGHTFITCONTENT
179
178
  : CB_LAYOUT_PROP_HEIGHTADJUSTMENT === null || CB_LAYOUT_PROP_HEIGHTADJUSTMENT === void 0 ? void 0 : CB_LAYOUT_PROP_HEIGHTADJUSTMENT['CB_LAYOUT_PROP_HEIGHTADJUSTMENT_SPEC_HEIGHTFITCONTENT:MOBILE'];
@@ -202,7 +201,7 @@ function ContentsList(props) {
202
201
  // NOTE: 위 CSS 프롭과 정리
203
202
  style: { gridTemplateRows: "repeat(".concat(numberOfRows, ", 1fr)") } }, { children: (0, createCompositions_1.createCompositions)({
204
203
  valueType: CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE,
205
- queryPath: CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA,
204
+ queryPath: queryPath,
206
205
  limit: displayCounts,
207
206
  queryData: queryData,
208
207
  compositions: orderedCompositions,
@@ -251,10 +250,6 @@ var S_ContentsListWrapper = styled_components_1.default.div(templateObject_4 ||
251
250
  var ccbInset = _a.ccbInset;
252
251
  return ccbInset.top;
253
252
  });
254
- function removeFirstSegment(path) {
255
- var segments = path.split('/');
256
- return segments.slice(1).join('/');
257
- }
258
253
  function getStandardComposition(compositions, valueType) {
259
254
  if (valueType === 'DATA') {
260
255
  return compositions.find(function (composition) { return composition.isDefault; });
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js CHANGED
@@ -72,7 +72,7 @@ size) {
72
72
  function SlideBanner(props) {
73
73
  var _a;
74
74
  var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, mode = _b.mode, queryData = _b.queryData;
75
- var index = props.index, _c = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, CB_STYLE_PROP_SLIDEBANNERDESIGN = props.CB_STYLE_PROP_SLIDEBANNERDESIGN, CB_STYLE_PROP_SLIDEBANNERPAGINATION = props.CB_STYLE_PROP_SLIDEBANNERPAGINATION, CB_STYLE_PROP_SLIDEBANNERBUTTON = props.CB_STYLE_PROP_SLIDEBANNERBUTTON, CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD = props.CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD, CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR = props.CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_SLIDEBANNER.CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE;
75
+ var index = props.index, _c = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING, CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET, CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, CB_STYLE_PROP_SLIDEBANNERDESIGN = props.CB_STYLE_PROP_SLIDEBANNERDESIGN, CB_STYLE_PROP_SLIDEBANNERPAGINATION = props.CB_STYLE_PROP_SLIDEBANNERPAGINATION, CB_STYLE_PROP_SLIDEBANNERBUTTON = props.CB_STYLE_PROP_SLIDEBANNERBUTTON, CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD = props.CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD, CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR = props.CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_SLIDEBANNER.CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE;
76
76
  var compositions = props.compositions;
77
77
  var CB_STYLE_PROP_SLIDEBANNER = __assign(__assign(__assign(__assign(__assign({}, CB_STYLE_PROP_SLIDEBANNERDESIGN), CB_STYLE_PROP_SLIDEBANNERPAGINATION), CB_STYLE_PROP_SLIDEBANNERBUTTON), CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD), CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR);
78
78
  var autoPlayEnabled = device === 'DESKTOP'
@@ -146,11 +146,14 @@ function SlideBanner(props) {
146
146
  var isMobile = device === 'MOBILE';
147
147
  var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
148
148
  var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
149
- var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
150
- .sort(function (a, b) { return a.order - b.order; })
151
- .map(function (item) {
152
- return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
153
- });
149
+ var queryPath = "".concat(CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, "/").concat(CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING, "/").concat(CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET);
150
+ var orderedCompositions = CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE === 'VALUE'
151
+ ? __spreadArray([], CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
152
+ .sort(function (a, b) { return a.order - b.order; })
153
+ .map(function (item) {
154
+ return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
155
+ })
156
+ : compositions.filter(function (comp) { return comp.isDefault; });
154
157
  var isEditModeAndHidden = style.visibility === 'hidden' && mode === 'EDIT';
155
158
  if (mode === 'EDIT') {
156
159
  style.visibility = 'visible';
@@ -171,7 +174,7 @@ function SlideBanner(props) {
171
174
  ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle
172
175
  : slideBannerNormalStyle === null || slideBannerNormalStyle === void 0 ? void 0 : slideBannerNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(SlideBannerCore_1.default, __assign({ ref: swiperRef, className: "cb-slidebanner", onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: 1, styles: isHovered ? slideBannerHoverStyle : slideBannerNormalStyle, effect: CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
173
176
  valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
174
- queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
177
+ queryPath: queryPath,
175
178
  limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
176
179
  queryData: queryData,
177
180
  compositions: orderedCompositions,