pds-dev-kit-web-test 2.7.481 → 2.7.483

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 (15) hide show
  1. package/dist/src/desktop/components/BoxItem/BoxItem.js +1 -1
  2. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts +2 -1
  3. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js +2 -2
  4. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.d.ts +3 -2
  5. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.js +35 -57
  6. package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts +2 -1
  7. package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js +2 -2
  8. package/dist/src/desktop/layout/LayoutWT/LayoutWT.d.ts +1 -0
  9. package/dist/src/mobile/components/BoxItem/BoxItem.js +1 -1
  10. package/dist/src/sub/DynamicLayout/CompositionRenderer/ComponentBlockMatcher.js +3 -0
  11. package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js +3 -2
  12. package/dist/src/sub/DynamicLayout/mock_section.json +11040 -146
  13. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/contentsListUtils.js +8 -11
  14. package/package.json +1 -1
  15. package/release-note.md +2 -2
package/dist/src/desktop/components/BoxItem/BoxItem.js CHANGED
@@ -92,7 +92,7 @@ function BoxItem(_a) {
92
92
  maxWidth: '100%',
93
93
  cursor: state === 'disabled' ? 'default' : selectionMode === 'use' ? 'pointer' : 'default'
94
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: 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" }), (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" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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" }), (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: 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" })] }))] }), 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" })] }))] })] })) })));
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" })] }))] })] })) })));
96
96
  }
97
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) {
98
98
  var theme = _a.theme;
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts CHANGED
@@ -14,6 +14,7 @@ export type ContentsContainerProps = {
14
14
  overrideContainer2ColorKey?: UiColors;
15
15
  overrideContainer3ColorKey?: UiColors;
16
16
  container1Ref?: MutableRefObject<HTMLDivElement | null>;
17
+ showDivider?: boolean;
17
18
  };
18
- declare const ContentsContainer: ({ content1, content2, content3, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, isLoadingContainer3, overrideContainer1ColorKey, overrideContainer2ColorKey, overrideContainer3ColorKey, container1Ref }: ContentsContainerProps) => JSX.Element;
19
+ declare const ContentsContainer: ({ content1, content2, content3, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, isLoadingContainer3, overrideContainer1ColorKey, overrideContainer2ColorKey, overrideContainer3ColorKey, container1Ref, showDivider }: ContentsContainerProps) => JSX.Element;
19
20
  export default ContentsContainer;
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js CHANGED
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  var jsx_runtime_1 = require("react/jsx-runtime");
4
4
  var variation_1 = require("./variation");
5
5
  var ContentsContainer = function (_a) {
6
- var content1 = _a.content1, content2 = _a.content2, content3 = _a.content3, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, isLoadingContainer3 = _a.isLoadingContainer3, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey, overrideContainer3ColorKey = _a.overrideContainer3ColorKey, container1Ref = _a.container1Ref;
6
+ var content1 = _a.content1, content2 = _a.content2, content3 = _a.content3, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, isLoadingContainer3 = _a.isLoadingContainer3, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey, overrideContainer3ColorKey = _a.overrideContainer3ColorKey, container1Ref = _a.container1Ref, showDivider = _a.showDivider;
7
7
  return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
8
8
  WTA_1: ((0, jsx_runtime_1.jsx)(variation_1.WTA, { layoutType: "WTA_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
9
9
  WTA_2: ((0, jsx_runtime_1.jsx)(variation_1.WTA, { layoutType: "WTA_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
@@ -50,7 +50,7 @@ var ContentsContainer = function (_a) {
50
50
  WTT_1: ((0, jsx_runtime_1.jsx)(variation_1.WTT, { layoutType: "WTT_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
51
51
  WTT_2: ((0, jsx_runtime_1.jsx)(variation_1.WTT, { layoutType: "WTT_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
52
52
  WTU_1: ((0, jsx_runtime_1.jsx)(variation_1.WTU, { layoutType: "WTU_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
53
- WTU_2: ((0, jsx_runtime_1.jsx)(variation_1.WTU, { layoutType: "WTU_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
53
+ WTU_2: ((0, jsx_runtime_1.jsx)(variation_1.WTU, { layoutType: "WTU_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey, showDivider: showDivider })),
54
54
  WTV_1: ((0, jsx_runtime_1.jsx)(variation_1.WTV, { layoutType: "WTV_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
55
55
  WTW_1: ((0, jsx_runtime_1.jsx)(variation_1.WTW, { layoutType: "WTW_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
56
56
  WTX_1: ((0, jsx_runtime_1.jsx)(variation_1.WTX, { layoutType: "WTX_1", content1: content1, content2: content2, content3: content3, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, isLoadingContainer3: isLoadingContainer3, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey, overrideContainer3ColorKey: overrideContainer3ColorKey }))
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.d.ts CHANGED
@@ -10,9 +10,10 @@ export type WTUProps = {
10
10
  isLoadingContainer2?: boolean;
11
11
  overrideContainer1ColorKey?: UiColors;
12
12
  overrideContainer2ColorKey?: UiColors;
13
+ showDivider?: boolean;
13
14
  };
14
15
  export type StyleProps = {
15
- $contentsArea2Width?: number;
16
+ $contentsAreaWidth?: number;
16
17
  };
17
- declare const WTU: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, overrideContainer1ColorKey, overrideContainer2ColorKey }: WTUProps) => JSX.Element;
18
+ declare const WTU: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, overrideContainer1ColorKey, overrideContainer2ColorKey, showDivider }: WTUProps) => JSX.Element;
18
19
  export default WTU;
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.js CHANGED
@@ -43,28 +43,30 @@ var react_1 = require("react");
43
43
  var styled_components_1 = __importStar(require("styled-components"));
44
44
  var components_1 = require("../../../../../../common/components");
45
45
  var WTU = function (_a) {
46
- var _b, _c;
47
- var content1 = _a.content1, content2 = _a.content2, _d = _a.layoutType, layoutType = _d === void 0 ? 'WTU_1' : _d, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
46
+ var content1 = _a.content1, content2 = _a.content2, _b = _a.layoutType, layoutType = _b === void 0 ? 'WTU_1' : _b, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey, _c = _a.showDivider, showDivider = _c === void 0 ? true : _c;
47
+ var contentsArea1Ref = (0, react_1.useRef)(null);
48
48
  var contentsArea2Ref = (0, react_1.useRef)(null);
49
- var _e = (0, react_1.useState)((_c = (_b = contentsArea2Ref.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) !== null && _c !== void 0 ? _c : 720), contentsArea2Width = _e[0], setContentsArea2Width = _e[1];
50
- var handleResize = function () {
51
- if (contentsArea2Ref === null || contentsArea2Ref.current === null) {
52
- return;
53
- }
54
- setContentsArea2Width(contentsArea2Ref.current.offsetWidth);
55
- };
49
+ var _d = (0, react_1.useState)(720), contentsAreaWidth = _d[0], setContentsAreaWidth = _d[1];
56
50
  /**
57
51
  @when : 브라우저 화면 사이즈가 변경될 때
58
- @expected : contentsArea2의 너비를 contentsArea2Width에 저장합니다.
52
+ @expected : 레이아웃 타입에 따라 적절한 ContentsArea의 너비를 contentsAreaWidth에 저장합니다.
59
53
  @clear : 이벤트 등록을 해제합니다.
60
54
  */
61
55
  (0, react_1.useEffect)(function () {
56
+ handleResize();
62
57
  window.addEventListener('resize', handleResize);
63
58
  return function () {
64
59
  window.removeEventListener('resize', handleResize);
65
60
  };
66
- }, []);
67
- return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, "$contentsArea2Width": contentsArea2Width }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey, "$contentsArea2Width": contentsArea2Width }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType, areaColor: areaColor, ref: contentsArea2Ref }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType }, { children: content2 })) }))) }))] }));
61
+ }, [layoutType]);
62
+ var handleResize = function () {
63
+ var targetRef = layoutType === 'WTU_1' ? contentsArea2Ref : contentsArea1Ref;
64
+ if (targetRef === null || targetRef.current === null) {
65
+ return;
66
+ }
67
+ setContentsAreaWidth(targetRef.current.offsetWidth);
68
+ };
69
+ return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, "$contentsAreaWidth": contentsAreaWidth }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType, areaColor: areaColor, ref: contentsArea1Ref }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey, showDivider: showDivider, "$contentsAreaWidth": contentsAreaWidth }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType, areaColor: areaColor, ref: contentsArea2Ref }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTU", layoutType: layoutType }, { children: content2 })) }))) }))] }));
68
70
  };
69
71
  var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
70
72
  var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
@@ -75,60 +77,36 @@ var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (
75
77
  return overrideContainer2ColorKey && theme[overrideContainer2ColorKey];
76
78
  });
77
79
  var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n"], ["\n display: flex;\n height: 100%;\n"])));
78
- var WTU_1Container1Style = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
79
- var $contentsArea2Width = _a.$contentsArea2Width;
80
- return "calc(50% - (".concat($contentsArea2Width, "px - 480px) / 2)");
81
- });
82
- var WTU_2Container1Style = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
83
- var $contentsArea2Width = _a.$contentsArea2Width;
84
- return "calc(50% + (".concat($contentsArea2Width, "px - 480px) / 2)");
85
- });
86
- var S_ContentsContainer1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
80
+ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n ", ";\n\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n ", ";\n\n ", "\n"])), function (_a) {
87
81
  var theme = _a.theme;
88
82
  return theme.ui_contentscontainer01_background;
89
83
  }, function (_a) {
90
- var $contentsArea2Width = _a.$contentsArea2Width;
91
- return "calc(50% - (".concat($contentsArea2Width, "px - 480px) / 2)");
92
- }, function (_a) {
93
- var layoutType = _a.layoutType;
94
- return ({
95
- WTU_1: WTU_1Container1Style,
96
- WTU_2: WTU_2Container1Style
97
- }[layoutType]);
84
+ var layoutType = _a.layoutType, $contentsAreaWidth = _a.$contentsAreaWidth;
85
+ return layoutType === 'WTU_1'
86
+ ? "calc(50% - (".concat($contentsAreaWidth, "px - 480px) / 2)")
87
+ : "calc(50% + (".concat($contentsAreaWidth, "px - 480px) / 2)");
98
88
  }, function (_a) {
99
89
  var containerColor = _a.containerColor;
100
90
  return "background-color: ".concat(containerColor);
101
91
  }, overrideStyleContainer1);
102
- var WTU_1Container2Style = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
103
- var $contentsArea2Width = _a.$contentsArea2Width;
104
- return "calc(50% + (".concat($contentsArea2Width, "px - 480px) / 2)");
105
- });
106
- var WTU_2Container2Style = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
107
- var $contentsArea2Width = _a.$contentsArea2Width;
108
- return "calc(50% - (".concat($contentsArea2Width, "px - 480px) / 2)");
109
- });
110
- var S_ContentsContainer2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n height: 100%;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n height: 100%;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
92
+ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-left: ", ";\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-left: ", ";\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n\n ", ";\n\n ", "\n"])), function (_a) {
111
93
  var theme = _a.theme;
112
94
  return theme.ui_contentscontainer02_background;
113
95
  }, function (_a) {
114
- var theme = _a.theme;
115
- return theme.ui_container_divider;
116
- }, function (_a) {
117
- var $contentsArea2Width = _a.$contentsArea2Width;
118
- return "calc(50% + (".concat($contentsArea2Width, "px - 480px) / 2)");
96
+ var showDivider = _a.showDivider, theme = _a.theme;
97
+ return showDivider ? "1px solid ".concat(theme.ui_container_divider) : 'none';
119
98
  }, function (_a) {
120
- var layoutType = _a.layoutType;
121
- return ({
122
- WTU_1: WTU_1Container2Style,
123
- WTU_2: WTU_2Container2Style
124
- }[layoutType]);
99
+ var layoutType = _a.layoutType, $contentsAreaWidth = _a.$contentsAreaWidth;
100
+ return layoutType === 'WTU_1'
101
+ ? "calc(50% + (".concat($contentsAreaWidth, "px - 480px) / 2)")
102
+ : "calc(50% - (".concat($contentsAreaWidth, "px - 480px) / 2)");
125
103
  }, function (_a) {
126
104
  var containerColor = _a.containerColor;
127
105
  return "background-color: ".concat(containerColor);
128
106
  }, overrideStyleContainer2);
129
- var WTU_1ContentsArea1 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n max-width: 480px;\n width: 480px;\n"], ["\n max-width: 480px;\n width: 480px;\n"])));
130
- var WTU_2ContentsArea1 = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"], ["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"])));
131
- var S_ContentsArea1 = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n box-sizing: border-box;\n height: 100%;\n\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n height: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
107
+ var WTU_1ContentsArea1 = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n max-width: 480px;\n width: 480px;\n"], ["\n max-width: 480px;\n width: 480px;\n"])));
108
+ var WTU_2ContentsArea1 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"], ["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"])));
109
+ var S_ContentsArea1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n box-sizing: border-box;\n height: 100%;\n\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n height: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
132
110
  var layoutType = _a.layoutType;
133
111
  return ({
134
112
  WTU_1: WTU_1ContentsArea1,
@@ -138,9 +116,9 @@ var S_ContentsArea1 = styled_components_1.default.div(templateObject_12 || (temp
138
116
  var areaColor = _a.areaColor;
139
117
  return "background-color: ".concat(areaColor);
140
118
  });
141
- var WTU_1ContentsArea2 = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"], ["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"])));
142
- var WTU_2ContentsArea2 = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n max-width: 480px;\n width: 480px;\n"], ["\n max-width: 480px;\n width: 480px;\n"])));
143
- var S_ContentsArea2 = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n height: 100%;\n\n ", ";\n ", ";\n"], ["\n height: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
119
+ var WTU_1ContentsArea2 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"], ["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"])));
120
+ var WTU_2ContentsArea2 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n max-width: 480px;\n width: 480px;\n"], ["\n max-width: 480px;\n width: 480px;\n"])));
121
+ var S_ContentsArea2 = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n height: 100%;\n\n ", ";\n ", ";\n"], ["\n height: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
144
122
  var layoutType = _a.layoutType;
145
123
  return ({
146
124
  WTU_1: WTU_1ContentsArea2,
@@ -150,7 +128,7 @@ var S_ContentsArea2 = styled_components_1.default.div(templateObject_15 || (temp
150
128
  var areaColor = _a.areaColor;
151
129
  return "background-color: ".concat(areaColor);
152
130
  });
153
- var S_Content1 = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
154
- var S_Content2 = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
131
+ var S_Content1 = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
132
+ var S_Content2 = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
155
133
  exports.default = WTU;
156
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
134
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts CHANGED
@@ -18,6 +18,7 @@ export type ContainersBoxProps = {
18
18
  overrideContainer2ColorKey?: UiColors;
19
19
  overrideContainer3ColorKey?: UiColors;
20
20
  container1Ref?: MutableRefObject<HTMLDivElement | null>;
21
+ showDivider?: boolean;
21
22
  };
22
- declare const ContainersBox: ({ layoutType, pageMenuContent, tabMenuContent, subMenuContent, content1, content2, content3, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, isLoadingContainer3, overrideContainer1ColorKey, overrideContainer2ColorKey, overrideContainer3ColorKey, container1Ref }: ContainersBoxProps) => JSX.Element;
23
+ declare const ContainersBox: ({ layoutType, pageMenuContent, tabMenuContent, subMenuContent, content1, content2, content3, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, isLoadingContainer3, overrideContainer1ColorKey, overrideContainer2ColorKey, overrideContainer3ColorKey, container1Ref, showDivider }: ContainersBoxProps) => JSX.Element;
23
24
  export default ContainersBox;
package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js CHANGED
@@ -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 Containers_1 = require("../Containers");
44
44
  var ContainersBox = function (_a) {
45
- var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, tabMenuContent = _a.tabMenuContent, subMenuContent = _a.subMenuContent, content1 = _a.content1, content2 = _a.content2, content3 = _a.content3, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, isLoadingContainer3 = _a.isLoadingContainer3, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey, overrideContainer3ColorKey = _a.overrideContainer3ColorKey, container1Ref = _a.container1Ref;
45
+ var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, tabMenuContent = _a.tabMenuContent, subMenuContent = _a.subMenuContent, content1 = _a.content1, content2 = _a.content2, content3 = _a.content3, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, isLoadingContainer3 = _a.isLoadingContainer3, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey, overrideContainer3ColorKey = _a.overrideContainer3ColorKey, container1Ref = _a.container1Ref, showDivider = _a.showDivider;
46
46
  return ((0, jsx_runtime_1.jsxs)(S_ContainersBox, { children: [{
47
47
  WTA_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
48
48
  WTA_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
@@ -243,7 +243,7 @@ var ContainersBox = function (_a) {
243
243
  WTV_1: '',
244
244
  WTW_1: '',
245
245
  WTX_1: ''
246
- }[layoutType], (0, jsx_runtime_1.jsx)(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, content3: content3, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, isLoadingContainer3: isLoadingContainer3, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey, overrideContainer3ColorKey: overrideContainer3ColorKey, container1Ref: container1Ref })] }))] })] }));
246
+ }[layoutType], (0, jsx_runtime_1.jsx)(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, content3: content3, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, isLoadingContainer3: isLoadingContainer3, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey, overrideContainer3ColorKey: overrideContainer3ColorKey, container1Ref: container1Ref, showDivider: showDivider })] }))] })] }));
247
247
  };
248
248
  var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n display: flex;\n height: 100%;\n"], ["\n align-items: flex-start;\n display: flex;\n height: 100%;\n"])));
249
249
  var S_RightBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex: 1;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex: 1;\n flex-direction: column;\n height: 100%;\n"])));
package/dist/src/desktop/layout/LayoutWT/LayoutWT.d.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  export type LayoutWTProps = {
3
3
  globalMenuContainer?: JSX.Element;
4
4
  children?: React.ReactNode;
5
+ showDivider?: boolean;
5
6
  };
6
7
  declare const LayoutWT: ({ globalMenuContainer, children }: LayoutWTProps) => JSX.Element;
7
8
  export default LayoutWT;
package/dist/src/mobile/components/BoxItem/BoxItem.js CHANGED
@@ -91,7 +91,7 @@ function BoxItem(_a) {
91
91
  justifyContent: 'space-between',
92
92
  cursor: state === 'disabled' ? 'default' : selectionMode === 'use' ? 'pointer' : 'default'
93
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: 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" }), (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" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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" }), (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: 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" })] }))] }), 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" })] }))] })] })) })));
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" })] }))] })] })) })));
95
95
  }
96
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) {
97
97
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/CompositionRenderer/ComponentBlockMatcher.js CHANGED
@@ -22,6 +22,7 @@ var Image_1 = __importDefault(require("../sections/CustomSection/components/Comp
22
22
  var RichText_1 = require("../sections/CustomSection/components/ComponentBlock/componentBlocks/RichText");
23
23
  var Text_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text"));
24
24
  var Twitter_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/componentBlocks/Twitter/Twitter"));
25
+ var VideoPlayer_1 = require("../sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer");
25
26
  var Youtube_1 = require("../sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube");
26
27
  var newUtils_1 = require("../sections/CustomSection/newUtils");
27
28
  var types_1 = require("../sections/CustomSection/types");
@@ -46,6 +47,8 @@ function ComponentBlockMatcher(_a) {
46
47
  return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue, { index: index }));
47
48
  case types_1.CB_ALL_CODES.CB_EMBED:
48
49
  return (0, jsx_runtime_1.jsx)(Embed_1.default, __assign({}, propsWithValue, { index: index }));
50
+ case types_1.CB_ALL_CODES.CB_VIDEOPLAYER:
51
+ return (0, jsx_runtime_1.jsx)(VideoPlayer_1.VideoPlayer, __assign({}, propsWithValue, { index: index }));
49
52
  case types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL: {
50
53
  return (0, jsx_runtime_1.jsx)("div", { children: "NOT SUPPORTED NESTED CAROUSEL" });
51
54
  }
package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js CHANGED
@@ -57,7 +57,7 @@ var groupUtils_1 = __importDefault(require("../utils/groupUtils"));
57
57
  var CompositionBackground_1 = __importDefault(require("./CompositionBackground"));
58
58
  var Composition = (0, react_1.forwardRef)(function CustomSection(props) {
59
59
  var _a, _b, _c, _d;
60
- var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _e.device, editingSectionId = _e.editingSectionId, mode = _e.mode, shortcutKeyMode = _e.shortcutKeyMode, sectionActionHandler = _e.sectionActionHandler;
60
+ var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _e.device, editingSectionId = _e.editingSectionId, mode = _e.mode, shortcutKeyMode = _e.shortcutKeyMode, sectionActionHandler = _e.sectionActionHandler, navigationHandler = _e.navigationHandler;
61
61
  var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties, ccbCode = props.ccbCode;
62
62
  var pedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
63
63
  var _f = jsonProperties, _g = _f.data, CB_PLACEMENT_PROP_COMPOSITION = _g.CB_PLACEMENT_PROP_COMPOSITION, CB_LAYOUT_PROP_PADDING = _g.CB_LAYOUT_PROP_PADDING, zOrders = _f.zOrders;
@@ -142,7 +142,8 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props) {
142
142
  })();
143
143
  var i18n = (0, react_i18next_1.useTranslation)('translation').i18n;
144
144
  return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
145
- device: device
145
+ device: device,
146
+ navigationHandler: navigationHandler
146
147
  } }, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, __assign({ strKeys: { str_grid_height_variable: i18n.t('str_grid_height_variable') }, isEditMode: isEditMode, style: {
147
148
  width: '100%',
148
149
  height: '100%',