pds-dev-kit-web 1.9.21 → 1.9.23

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 (21) hide show
  1. package/dist/src/common/styles/colorSet/UIColor.json +2 -1
  2. package/dist/src/common/styles/colorSet/index.d.ts +749 -748
  3. package/dist/src/common/styles/colorSet/index.js +3 -3
  4. package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
  5. package/dist/src/common/styles/movement/animationStyle.js +8 -8
  6. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.d.ts +1 -1
  7. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.js +5 -1
  8. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.d.ts +1 -1
  9. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js +60 -9
  10. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFL.d.ts +1 -1
  11. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFL.js +50 -12
  12. package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.d.ts +1 -1
  13. package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.js +13 -3
  14. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts +1 -1
  15. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js +1 -0
  16. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.d.ts +1 -1
  17. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.js +6 -4
  18. package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts +1 -1
  19. package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js +5 -1
  20. package/package.json +1 -1
  21. package/release-note.md +8 -5
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_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
8
9
  var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
9
10
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
10
- var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
11
11
  var colorSet = {
12
12
  SemanticColor: SemanticColor_json_1.default,
13
+ PaletteColor_light: PaletteColor_light_json_1.default,
13
14
  PaletteColor_Dark: PaletteColor_Dark_json_1.default,
14
- UIColor: UIColor_json_1.default,
15
- PaletteColor_light: PaletteColor_light_json_1.default
15
+ UIColor: UIColor_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
package/dist/src/common/styles/colorSet/ui-type.d.ts CHANGED
@@ -743,4 +743,5 @@ export interface UITheme {
743
743
  ui_94: string;
744
744
  ui_95: string;
745
745
  ui_cpnt_icon_sys_brandsecondary_variant: string;
746
+ ui_96: string;
746
747
  }
package/dist/src/common/styles/movement/animationStyle.js CHANGED
@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
7
7
  exports.modalOverlayOffAni = exports.modalOverlayOnAni = exports.modalOffAni = exports.modalOnAni = exports.dialogOverlayOffAni = exports.dialogOverlayOnAni = exports.dialogOffAni = exports.dialogOnAni = void 0;
8
8
  var styled_components_1 = require("styled-components");
9
9
  var keyframes_1 = require("./keyframes");
10
- exports.dialogOnAni = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n transform-origin: 0 0;\n"], ["\n animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n transform-origin: 0 0;\n"])), keyframes_1.scaleBounceInIncludeTranslate, keyframes_1.fadeIn);
11
- exports.dialogOffAni = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n transform-origin: 0 0;\n"], ["\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n transform-origin: 0 0;\n"])), keyframes_1.scaleBounceOutIncludeTranslate, keyframes_1.fadeOut);
12
- exports.dialogOverlayOnAni = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out both;\n"], ["\n animation: ", " 0.2s ease-in-out both;\n"])), keyframes_1.fadeIn);
13
- exports.dialogOverlayOffAni = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out both;\n"], ["\n animation: ", " 0.2s ease-in-out both;\n"])), keyframes_1.fadeOut);
14
- exports.modalOnAni = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n transform-origin: 0 0;\n"], ["\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n transform-origin: 0 0;\n"])), keyframes_1.scaleBounceInIncludeTranslate02, keyframes_1.fadeIn);
15
- exports.modalOffAni = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n transform-origin: 0 0;\n"], ["\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n transform-origin: 0 0;\n"])), keyframes_1.scaleBounceOutIncludeTranslate02, keyframes_1.fadeOut);
16
- exports.modalOverlayOnAni = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out both;\n"], ["\n animation: ", " 0.2s ease-in-out both;\n"])), keyframes_1.fadeIn);
17
- exports.modalOverlayOffAni = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out both;\n"], ["\n animation: ", " 0.2s ease-in-out both;\n"])), keyframes_1.fadeOut);
10
+ exports.dialogOnAni = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n transform-origin: 0 0;\n"], ["\n animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n transform-origin: 0 0;\n"])), keyframes_1.scaleBounceInIncludeTranslate, keyframes_1.fadeIn);
11
+ exports.dialogOffAni = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n transform-origin: 0 0;\n"], ["\n animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n transform-origin: 0 0;\n"])), keyframes_1.scaleBounceOutIncludeTranslate, keyframes_1.fadeOut);
12
+ exports.dialogOverlayOnAni = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out;\n"], ["\n animation: ", " 0.2s ease-in-out;\n"])), keyframes_1.fadeIn);
13
+ exports.dialogOverlayOffAni = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out;\n"], ["\n animation: ", " 0.2s ease-in-out;\n"])), keyframes_1.fadeOut);
14
+ exports.modalOnAni = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n transform-origin: 0 0;\n"], ["\n animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n transform-origin: 0 0;\n"])), keyframes_1.scaleBounceInIncludeTranslate02, keyframes_1.fadeIn);
15
+ exports.modalOffAni = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n transform-origin: 0 0;\n"], ["\n animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n transform-origin: 0 0;\n"])), keyframes_1.scaleBounceOutIncludeTranslate02, keyframes_1.fadeOut);
16
+ exports.modalOverlayOnAni = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out;\n"], ["\n animation: ", " 0.2s ease-in-out;\n"])), keyframes_1.fadeIn);
17
+ exports.modalOverlayOffAni = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out;\n"], ["\n animation: ", " 0.2s ease-in-out;\n"])), keyframes_1.fadeOut);
18
18
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.d.ts CHANGED
@@ -3,7 +3,7 @@ import type { UiColors } from '../../../../../common';
3
3
  export declare type ContentsContainerProps = {
4
4
  content1?: JSX.Element;
5
5
  content2?: JSX.Element;
6
- layoutType: 'WFA_1' | 'WFA_2' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFE_3' | 'WFE_4' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1' | 'WFL_1' | 'WFL_2';
6
+ layoutType: 'WFA_1' | 'WFA_2' | 'WFA_3' | 'WFA_4' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFE_3' | 'WFE_4' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1' | 'WFL_1' | 'WFL_2' | 'WFL_3' | 'WFL_4';
7
7
  containerColor?: string;
8
8
  areaColor?: string;
9
9
  isLoadingContainer1?: boolean;
package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.js CHANGED
@@ -7,6 +7,8 @@ var ContentsContainer = function (_a) {
7
7
  return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
8
8
  WFA_1: ((0, jsx_runtime_1.jsx)(variation_1.WFA, { layoutType: "WFA_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
9
9
  WFA_2: ((0, jsx_runtime_1.jsx)(variation_1.WFA, { layoutType: "WFA_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
10
+ WFA_3: ((0, jsx_runtime_1.jsx)(variation_1.WFA, { layoutType: "WFA_3", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
11
+ WFA_4: ((0, jsx_runtime_1.jsx)(variation_1.WFA, { layoutType: "WFA_4", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
10
12
  WFB_1: ((0, jsx_runtime_1.jsx)(variation_1.WFB, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
11
13
  WFC_1: ((0, jsx_runtime_1.jsx)(variation_1.WFC, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
12
14
  WFD_1: ((0, jsx_runtime_1.jsx)(variation_1.WFD, { layoutType: "WFD_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
@@ -32,7 +34,9 @@ var ContentsContainer = function (_a) {
32
34
  WFJ_1: ((0, jsx_runtime_1.jsx)(variation_1.WFJ, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
33
35
  WFK_1: ((0, jsx_runtime_1.jsx)(variation_1.WFK, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0)),
34
36
  WFL_1: ((0, jsx_runtime_1.jsx)(variation_1.WFL, { layoutType: "WFL_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0)),
35
- WFL_2: ((0, jsx_runtime_1.jsx)(variation_1.WFL, { layoutType: "WFL_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0))
37
+ WFL_2: ((0, jsx_runtime_1.jsx)(variation_1.WFL, { layoutType: "WFL_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0)),
38
+ WFL_3: ((0, jsx_runtime_1.jsx)(variation_1.WFL, { layoutType: "WFL_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0)),
39
+ WFL_4: ((0, jsx_runtime_1.jsx)(variation_1.WFL, { layoutType: "WFL_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0))
36
40
  }[layoutType] }, void 0));
37
41
  };
38
42
  exports.default = ContentsContainer;
package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import type { UiColors } from '../../../../../../common';
3
3
  export declare type WFAProps = {
4
- layoutType: 'WFA_1' | 'WFA_2';
4
+ layoutType: 'WFA_1' | 'WFA_2' | 'WFA_3' | 'WFA_4';
5
5
  content1?: JSX.Element;
6
6
  containerColor?: string;
7
7
  areaColor?: string;
package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js CHANGED
@@ -35,36 +35,87 @@ var __importStar = (this && this.__importStar) || function (mod) {
35
35
  };
36
36
  Object.defineProperty(exports, "__esModule", { value: true });
37
37
  var jsx_runtime_1 = require("react/jsx-runtime");
38
+ var react_1 = require("react");
38
39
  var styled_components_1 = __importStar(require("styled-components"));
39
40
  var components_1 = require("../../../../../../common/components");
40
41
  var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
41
42
  var WFA = function (_a) {
42
43
  var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
43
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", 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": "WFA" }, { children: content1 }), void 0) }), void 0) }, void 0)) }), void 0) }, void 0));
44
+ var _b = (0, react_1.useState)(false), hasScroll = _b[0], setHasScroll = _b[1];
45
+ var contentRef = (0, react_1.useRef)(null);
46
+ var handleResize = function () {
47
+ if (!contentRef || !contentRef.current)
48
+ return;
49
+ var _a = contentRef.current, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
50
+ var isTextClamped = scrollHeight > clientHeight;
51
+ setHasScroll(isTextClamped);
52
+ };
53
+ /**
54
+ @when : 헤딩 레이아웃이 적용된 화면에 진입했을때
55
+ @expected : clientHeight와 scrollHeight를 감지하여 hasScroll의 상태를 업데이트 합니다.
56
+ @clear : -
57
+ */
58
+ (0, react_1.useEffect)(function () {
59
+ handleResize();
60
+ }, []);
61
+ /**
62
+ @when : 브라우저 화면 사이즈가 변경될 때
63
+ @expected : clientHeight와 scrollHeight를 감지하여 hasScroll의 상태를 업데이트 합니다.
64
+ @clear : 이벤트 등록을 해제합니다.
65
+ */
66
+ (0, react_1.useEffect)(function () {
67
+ window.addEventListener('resize', handleResize);
68
+ return function () {
69
+ window.removeEventListener('resize', handleResize);
70
+ };
71
+ }, []);
72
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, hasScroll: hasScroll, ref: contentRef }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", 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": "WFA" }, { children: content1 }), void 0) }), void 0) }, void 0)) }), void 0) }, void 0));
44
73
  };
45
- var WFA_1AreaStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 432px;\n"], ["\n width: 432px;\n"])));
46
- var WFA_2AreaStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 608px;\n"], ["\n width: 608px;\n"])));
47
- var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
74
+ var WFA_1ContainerStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n"], ["\n align-items: flex-start;\n"])));
75
+ var WFA_2ContainerStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: flex-start;\n"], ["\n align-items: flex-start;\n"])));
76
+ var WFA_3ContainerStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: flex-start;\n ", "\n"], ["\n align-items: flex-start;\n ", "\n"])), function (_a) {
77
+ var hasScroll = _a.hasScroll;
78
+ return !hasScroll && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n "], ["\n align-items: center;\n "])));
79
+ });
80
+ var WFA_4ContainerStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: flex-start;\n ", "\n"], ["\n align-items: flex-start;\n ", "\n"])), function (_a) {
81
+ var hasScroll = _a.hasScroll;
82
+ return !hasScroll && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n "], ["\n align-items: center;\n "])));
83
+ });
84
+ var WFA_1AreaStyle = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 432px;\n"], ["\n width: 432px;\n"])));
85
+ var WFA_2AreaStyle = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 608px;\n"], ["\n width: 608px;\n"])));
86
+ var WFA_3AreaStyle = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n width: 432px;\n"], ["\n width: 432px;\n"])));
87
+ var WFA_4AreaStyle = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 608px;\n"], ["\n width: 608px;\n"])));
88
+ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
48
89
  var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
49
90
  return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
50
91
  });
51
- var S_ContentsContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n border-radius: 24px;\n display: flex;\n height: 60vh;\n justify-content: center;\n max-height: 640px;\n overflow-x: hidden;\n overflow-y: overlay;\n width: 864px;\n ", ";\n\n ", "\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n border-radius: 24px;\n display: flex;\n height: 60vh;\n justify-content: center;\n max-height: 640px;\n overflow-x: hidden;\n overflow-y: overlay;\n width: 864px;\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
92
+ var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 24px;\n display: flex;\n height: 60vh;\n justify-content: center;\n max-height: 640px;\n overflow-x: hidden;\n overflow-y: overlay;\n width: 864px;\n ", ";\n ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n border-radius: 24px;\n display: flex;\n height: 60vh;\n justify-content: center;\n max-height: 640px;\n overflow-x: hidden;\n overflow-y: overlay;\n width: 864px;\n ", ";\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
52
93
  var theme = _a.theme;
53
94
  return theme.ui_wizard_contentscontainer01_background;
95
+ }, function (_a) {
96
+ var layoutType = _a.layoutType;
97
+ return ({
98
+ WFA_1: WFA_1ContainerStyle,
99
+ WFA_2: WFA_2ContainerStyle,
100
+ WFA_3: WFA_3ContainerStyle,
101
+ WFA_4: WFA_4ContainerStyle
102
+ }[layoutType]);
54
103
  }, function (_a) {
55
104
  var containerColor = _a.containerColor;
56
105
  return "background-color: " + containerColor;
57
106
  }, scrollbarStyle_1.scrollbarWithPaddingStyle, overrideStyleContainer1);
58
- var S_ContentsArea = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-bottom: 64px;\n padding-top: 64px;\n\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n padding-bottom: 64px;\n padding-top: 64px;\n\n ", ";\n ", ";\n"])), function (_a) {
107
+ var S_ContentsArea = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-bottom: 64px;\n padding-top: 64px;\n\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n padding-bottom: 64px;\n padding-top: 64px;\n\n ", ";\n ", ";\n"])), function (_a) {
59
108
  var layoutType = _a.layoutType;
60
109
  return ({
61
110
  WFA_1: WFA_1AreaStyle,
62
- WFA_2: WFA_2AreaStyle
111
+ WFA_2: WFA_2AreaStyle,
112
+ WFA_3: WFA_3AreaStyle,
113
+ WFA_4: WFA_4AreaStyle
63
114
  }[layoutType]);
64
115
  }, function (_a) {
65
116
  var areaColor = _a.areaColor;
66
117
  return "background-color: " + areaColor;
67
118
  });
68
- var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
119
+ var S_Content1 = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
69
120
  exports.default = WFA;
70
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
121
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFL.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import type { UiColors } from '../../../../../../common';
3
3
  export declare type WFLProps = {
4
- layoutType: 'WFL_1' | 'WFL_2';
4
+ layoutType: 'WFL_1' | 'WFL_2' | 'WFL_3' | 'WFL_4';
5
5
  content1?: JSX.Element;
6
6
  content2?: JSX.Element;
7
7
  containerColor?: string;
package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFL.js CHANGED
@@ -42,38 +42,76 @@ var WFL = function (_a) {
42
42
  var layoutType = _a.layoutType, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
43
43
  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": "WFL", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((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": "WFL", 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": "WFL", layoutType: layoutType }, { children: content1 }), void 0) }), void 0)) }), void 0), (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": "WFL", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((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": "WFL", layoutType: layoutType, areaColor: areaColor }, { 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": "WFL", layoutType: layoutType }, { children: content2 }), void 0) }), void 0)) }), void 0)] }, void 0));
44
44
  };
45
- var WFL_1ContainerStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0 48px;\n"], ["\n padding: 0 48px;\n"])));
46
- var WFL_2ContainerStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 0 24px;\n"], ["\n padding: 0 24px;\n"])));
47
- var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: 60vh;\n max-height: 640px;\n"], ["\n display: flex;\n height: 60vh;\n max-height: 640px;\n"])));
48
- var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 24px 0 0 24px;\n box-sizing: border-box;\n overflow-x: hidden;\n overflow-y: auto;\n width: 480px;\n\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-radius: 24px 0 0 24px;\n box-sizing: border-box;\n overflow-x: hidden;\n overflow-y: auto;\n width: 480px;\n\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
45
+ var WFL_1Container1Style = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0 48px;\n"], ["\n padding: 0 48px;\n"])));
46
+ var WFL_2Container1Style = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 0 24px;\n"], ["\n padding: 0 24px;\n"])));
47
+ var WFL_3Container1Style = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0 48px;\n"], ["\n padding: 0 48px;\n"])));
48
+ var WFL_4Container1Style = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0 24px;\n"], ["\n padding: 0 24px;\n"])));
49
+ var WFL_1Container2Style = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
50
+ var WFL_2Container2Style = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
51
+ var WFL_3Container2Style = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n overflow-x: hidden;\n overflow-y: auto;\n"], ["\n overflow-x: hidden;\n overflow-y: auto;\n"])));
52
+ var WFL_4Container2Style = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n overflow-x: hidden;\n overflow-y: auto;\n"], ["\n overflow-x: hidden;\n overflow-y: auto;\n"])));
53
+ var WFL_1Area2Style = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
54
+ var WFL_2Area2Style = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
55
+ var WFL_3Area2Style = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n padding-bottom: 64px;\n"], ["\n padding-bottom: 64px;\n"])));
56
+ var WFL_4Area2Style = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n padding-bottom: 64px;\n"], ["\n padding-bottom: 64px;\n"])));
57
+ var WFL_1Content2Style = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
58
+ var WFL_2Content2Style = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
59
+ var S_Box = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n height: 60vh;\n max-height: 640px;\n"], ["\n display: flex;\n height: 60vh;\n max-height: 640px;\n"])));
60
+ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 24px 0 0 24px;\n box-sizing: border-box;\n overflow-x: hidden;\n overflow-y: auto;\n width: 480px;\n\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-radius: 24px 0 0 24px;\n box-sizing: border-box;\n overflow-x: hidden;\n overflow-y: auto;\n width: 480px;\n\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
49
61
  var theme = _a.theme;
50
62
  return theme.ui_wizard_contentscontainer01_background;
51
63
  }, function (_a) {
52
64
  var layoutType = _a.layoutType;
53
65
  return ({
54
- WFL_1: WFL_1ContainerStyle,
55
- WFL_2: WFL_2ContainerStyle
66
+ WFL_1: WFL_1Container1Style,
67
+ WFL_2: WFL_2Container1Style,
68
+ WFL_3: WFL_3Container1Style,
69
+ WFL_4: WFL_4Container1Style
56
70
  }[layoutType]);
57
71
  }, function (_a) {
58
72
  var containerColor = _a.containerColor;
59
73
  return "background-color: " + containerColor;
60
74
  }, scrollbarStyle_1.scrollbarStyle);
61
- var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 0 24px 24px 0;\n height: 100%;\n overflow: hidden;\n width: 672px;\n\n ", ";\n"], ["\n background-color: ", ";\n border-radius: 0 24px 24px 0;\n height: 100%;\n overflow: hidden;\n width: 672px;\n\n ", ";\n"])), function (_a) {
75
+ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 0 24px 24px 0;\n width: 672px;\n\n ", ";\n ", ";\n"], ["\n background-color: ", ";\n border-radius: 0 24px 24px 0;\n width: 672px;\n\n ", ";\n ", ";\n"])), function (_a) {
62
76
  var theme = _a.theme;
63
77
  return theme.ui_wizard_contentscontainer02_background;
78
+ }, function (_a) {
79
+ var layoutType = _a.layoutType;
80
+ return ({
81
+ WFL_1: WFL_1Container2Style,
82
+ WFL_2: WFL_2Container2Style,
83
+ WFL_3: WFL_3Container2Style,
84
+ WFL_4: WFL_4Container2Style
85
+ }[layoutType]);
64
86
  }, function (_a) {
65
87
  var containerColor = _a.containerColor;
66
88
  return "background-color: " + containerColor;
67
89
  });
68
- var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-bottom: 64px;\n\n ", ";\n"], ["\n box-sizing: border-box;\n padding-bottom: 64px;\n\n ", ";\n"])), function (_a) {
90
+ var S_ContentsArea1 = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-bottom: 64px;\n\n ", ";\n"], ["\n box-sizing: border-box;\n padding-bottom: 64px;\n\n ", ";\n"])), function (_a) {
69
91
  var areaColor = _a.areaColor;
70
92
  return "background-color: " + areaColor;
71
93
  });
72
- var S_ContentsArea2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n height: 100%;\n\n ", ";\n"], ["\n height: 100%;\n\n ", ";\n"])), function (_a) {
94
+ var S_ContentsArea2 = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n box-sizing: border-box;\n\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n\n ", ";\n ", ";\n"])), function (_a) {
95
+ var layoutType = _a.layoutType;
96
+ return ({
97
+ WFL_1: WFL_1Area2Style,
98
+ WFL_2: WFL_2Area2Style,
99
+ WFL_3: WFL_3Area2Style,
100
+ WFL_4: WFL_4Area2Style
101
+ }[layoutType]);
102
+ }, function (_a) {
73
103
  var areaColor = _a.areaColor;
74
104
  return "background-color: " + areaColor;
75
105
  });
76
- var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
77
- var S_Content2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
106
+ var S_Content1 = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
107
+ var S_Content2 = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
108
+ var layoutType = _a.layoutType;
109
+ return ({
110
+ WFL_1: WFL_1Content2Style,
111
+ WFL_2: WFL_2Content2Style,
112
+ WFL_3: '',
113
+ WFL_4: ''
114
+ }[layoutType]);
115
+ });
78
116
  exports.default = WFL;
79
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
117
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import type { UiColors } from '../../../../common';
3
3
  export declare type ContainersBoxProps = {
4
- layoutType: 'WFA_1' | 'WFA_2' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFE_3' | 'WFE_4' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1' | 'WFL_1' | 'WFL_2';
4
+ layoutType: 'WFA_1' | 'WFA_2' | 'WFA_3' | 'WFA_4' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFE_3' | 'WFE_4' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1' | 'WFL_1' | 'WFL_2' | 'WFL_3' | 'WFL_4';
5
5
  pageMenuContent?: JSX.Element;
6
6
  subMenuContent?: JSX.Element;
7
7
  tabMenuContent?: JSX.Element;
package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.js CHANGED
@@ -46,7 +46,9 @@ var ContainersBox = function (_a) {
46
46
  var wizardContainerWidthType = layoutType === 'WFE_3' ||
47
47
  layoutType === 'WFE_4' ||
48
48
  layoutType === 'WFL_1' ||
49
- layoutType === 'WFL_2'
49
+ layoutType === 'WFL_2' ||
50
+ layoutType === 'WFL_3' ||
51
+ layoutType === 'WFL_4'
50
52
  ? 'large'
51
53
  : 'small';
52
54
  return ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ isWizardLayout: isWizardLayout }, { children: (0, jsx_runtime_1.jsxs)(S_ContainersBox, __assign({ isWizardLayout: isWizardLayout }, { children: [pageMenuContent && ((0, jsx_runtime_1.jsx)(S_TopWrapper, { children: isWizardLayout ? ({
@@ -55,6 +57,8 @@ var ContainersBox = function (_a) {
55
57
  }[wizardContainerWidthType]) : ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuContent: pageMenuContent }, void 0)) }, void 0)), (0, jsx_runtime_1.jsxs)(S_CenterBox, __assign({ isWizardLayout: isWizardLayout }, { children: [{
56
58
  WFA_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
57
59
  WFA_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
60
+ WFA_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
61
+ WFA_4: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
58
62
  WFB_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
59
63
  WFC_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
60
64
  WFD_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
@@ -80,10 +84,14 @@ var ContainersBox = function (_a) {
80
84
  WFJ_1: (0, jsx_runtime_1.jsx)(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }, void 0),
81
85
  WFK_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
82
86
  WFL_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
83
- WFL_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0)
87
+ WFL_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
88
+ WFL_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
89
+ WFL_4: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0)
84
90
  }[layoutType], (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [{
85
91
  WFA_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
86
92
  WFA_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
93
+ WFA_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
94
+ WFA_4: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
87
95
  WFB_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
88
96
  WFC_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
89
97
  WFD_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
@@ -109,7 +117,9 @@ var ContainersBox = function (_a) {
109
117
  WFJ_1: (0, jsx_runtime_1.jsx)(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }, void 0),
110
118
  WFK_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
111
119
  WFL_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
112
- WFL_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0)
120
+ WFL_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
121
+ WFL_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
122
+ WFL_4: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0)
113
123
  }[layoutType], (0, jsx_runtime_1.jsx)(S_ContentsWrapper, { children: (0, jsx_runtime_1.jsx)(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0) }, void 0)] }, void 0)] }), void 0), isWizardLayout && ((0, jsx_runtime_1.jsx)(S_BottomWrapper, { children: {
114
124
  small: (0, jsx_runtime_1.jsx)(Containers_1.StepContainer, { stepType: "step_864", stepContent: stepContent }, void 0),
115
125
  large: (0, jsx_runtime_1.jsx)(Containers_1.StepContainer, { stepType: "step_1152", stepContent: stepContent }, void 0)
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts CHANGED
@@ -3,7 +3,7 @@ import type { MutableRefObject } from 'react';
3
3
  export declare type ContentsContainerProps = {
4
4
  content1?: JSX.Element;
5
5
  content2?: JSX.Element;
6
- layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
6
+ layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
7
7
  containerColor?: string;
8
8
  areaColor?: string;
9
9
  isLoadingContainer1?: boolean;
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js CHANGED
@@ -43,6 +43,7 @@ var ContentsContainer = function (_a) {
43
43
  WTN_3: ((0, jsx_runtime_1.jsx)(variation_1.WTN, { layoutType: "WTN_3", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
44
44
  WTO_1: ((0, jsx_runtime_1.jsx)(variation_1.WTO, { layoutType: "WTO_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
45
45
  WTP_1: ((0, jsx_runtime_1.jsx)(variation_1.WTP, { layoutType: "WTP_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
46
+ WTP_2: ((0, jsx_runtime_1.jsx)(variation_1.WTP, { layoutType: "WTP_2", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
46
47
  WTQ_1: ((0, jsx_runtime_1.jsx)(variation_1.WTQ, { layoutType: "WTQ_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0)),
47
48
  WTS_1: ((0, jsx_runtime_1.jsx)(variation_1.WTS, { layoutType: "WTS_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
48
49
  WTS_2: ((0, jsx_runtime_1.jsx)(variation_1.WTS, { layoutType: "WTS_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.d.ts CHANGED
@@ -2,7 +2,7 @@ import type { UiColors } from '../../../../../../common';
2
2
  import type { MutableRefObject } from 'react';
3
3
  export declare type WTPProps = {
4
4
  content1?: JSX.Element;
5
- layoutType: 'WTP_1';
5
+ layoutType: 'WTP_1' | 'WTP_2';
6
6
  containerColor?: string;
7
7
  areaColor?: string;
8
8
  isLoadingContainer1?: boolean;
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.js CHANGED
@@ -52,15 +52,17 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (t
52
52
  var containerColor = _a.containerColor;
53
53
  return "background-color: " + containerColor;
54
54
  }, overrideStyleContainer1);
55
- var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-bottom: 88px;\n\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n padding-bottom: 88px;\n\n ", ";\n ", ";\n"])), function (_a) {
55
+ var WTP_1AreaStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding-bottom: 88px;\n"], ["\n padding-bottom: 88px;\n"])));
56
+ var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 664px;\n\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n width: 664px;\n\n ", ";\n ", ";\n"])), function (_a) {
56
57
  var layoutType = _a.layoutType;
57
58
  return ({
58
- WTP_1: 'width: 664px;'
59
+ WTP_1: WTP_1AreaStyle,
60
+ WTP_2: ''
59
61
  }[layoutType]);
60
62
  }, function (_a) {
61
63
  var areaColor = _a.areaColor;
62
64
  return "background-color: " + areaColor;
63
65
  });
64
- var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
66
+ var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
65
67
  exports.default = WTP;
66
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
68
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { UiColors } from '../../../../common';
2
2
  import type { MutableRefObject } from 'react';
3
3
  export declare type ContainersBoxProps = {
4
- layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
4
+ layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
5
5
  pageMenuContent?: JSX.Element;
6
6
  tabMenuContent?: JSX.Element;
7
7
  subMenuContent?: JSX.Element;
package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js CHANGED
@@ -78,6 +78,7 @@ var ContainersBox = function (_a) {
78
78
  WTN_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
79
79
  WTO_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
80
80
  WTP_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
81
+ WTP_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
81
82
  WTQ_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
82
83
  WTS_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
83
84
  WTS_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
@@ -123,6 +124,7 @@ var ContainersBox = function (_a) {
123
124
  WTN_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
124
125
  WTO_1: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor }, void 0)),
125
126
  WTP_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
127
+ WTP_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
126
128
  WTQ_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
127
129
  WTS_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
128
130
  WTS_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
@@ -168,6 +170,7 @@ var ContainersBox = function (_a) {
168
170
  WTN_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
169
171
  WTO_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
170
172
  WTP_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
173
+ WTP_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
171
174
  WTQ_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
172
175
  WTS_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
173
176
  WTS_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
@@ -213,6 +216,7 @@ var ContainersBox = function (_a) {
213
216
  WTN_3: '',
214
217
  WTO_1: ((0, jsx_runtime_1.jsx)(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent, containerColor: containerColor, areaColor: areaColor }, void 0)),
215
218
  WTP_1: ((0, jsx_runtime_1.jsx)(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent, containerColor: containerColor, areaColor: areaColor }, void 0)),
219
+ WTP_2: ((0, jsx_runtime_1.jsx)(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent, containerColor: containerColor, areaColor: areaColor }, void 0)),
216
220
  WTQ_1: '',
217
221
  WTS_1: '',
218
222
  WTS_2: '',
@@ -226,7 +230,7 @@ var S_RightBox = styled_components_1.default.div(templateObject_2 || (templateOb
226
230
  var flexStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
227
231
  var S_BottomWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n height: 100%;\n overflow: hidden;\n ", ";\n"], ["\n flex: 1;\n height: 100%;\n overflow: hidden;\n ", ";\n"])), function (_a) {
228
232
  var layoutType = _a.layoutType;
229
- return (layoutType === 'WTO_1' || layoutType === 'WTP_1') && flexStyle;
233
+ return (layoutType === 'WTO_1' || layoutType === 'WTP_1' || layoutType === 'WTP_2') && flexStyle;
230
234
  });
231
235
  exports.default = ContainersBox;
232
236
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.9.21",
3
+ "version": "1.9.23",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,11 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.9.21]
2
+ ## [v1.9.23]
3
3
 
4
- ### Component
5
- * column3Width - column10Width prop에 xlarge 추가
6
- * column3Text - column10Text에서 세로 스크롤이 생겼을 경우 중앙이 아닌 상단부터 내용이 보여질 수 있도록 수정
4
+ ### common
5
+ * animationStyle
6
+ * animation시에 부여되어있던 animation-fill-mode 옵션 제거 (DesktopAlertDialog, MobileAlertDialog, DesktopBasicModal, DesktopHeadlessModal, DesktopTutorialModal, MobileBasicModal에 영향)
7
+ ### Layout
8
+ * WFA_3 생성
9
+ * WFA_4 생성
7
10
  ### Color
8
- * 컬러 키 값 23.03.10 14시 54분 기준 싱크
11
+ * 컬러 키 값 23.03.14 14시 20분 기준 싱크