pds-dev-kit-web 1.9.21 → 1.9.22

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.
@@ -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' | '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;
@@ -32,7 +32,9 @@ var ContentsContainer = function (_a) {
32
32
  WFJ_1: ((0, jsx_runtime_1.jsx)(variation_1.WFJ, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
33
33
  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
34
  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))
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)),
36
+ 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)),
37
+ 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
38
  }[layoutType] }, void 0));
37
39
  };
38
40
  exports.default = ContentsContainer;
@@ -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;
@@ -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;
@@ -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' | '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;
@@ -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 ? ({
@@ -80,7 +82,9 @@ var ContainersBox = function (_a) {
80
82
  WFJ_1: (0, jsx_runtime_1.jsx)(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }, void 0),
81
83
  WFK_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
82
84
  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)
85
+ WFL_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
86
+ WFL_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
87
+ WFL_4: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0)
84
88
  }[layoutType], (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [{
85
89
  WFA_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
86
90
  WFA_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
@@ -109,7 +113,9 @@ var ContainersBox = function (_a) {
109
113
  WFJ_1: (0, jsx_runtime_1.jsx)(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }, void 0),
110
114
  WFK_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
111
115
  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)
116
+ WFL_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
117
+ WFL_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
118
+ WFL_4: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0)
113
119
  }[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
120
  small: (0, jsx_runtime_1.jsx)(Containers_1.StepContainer, { stepType: "step_864", stepContent: stepContent }, void 0),
115
121
  large: (0, jsx_runtime_1.jsx)(Containers_1.StepContainer, { stepType: "step_1152", stepContent: stepContent }, void 0)
@@ -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;
@@ -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)),
@@ -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;
@@ -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;
@@ -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;
@@ -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.22",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,7 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.9.21]
2
+ ## [v1.9.22]
3
3
 
4
- ### Component
5
- * column3Width - column10Width prop에 xlarge 추가
6
- * column3Text - column10Text에서 세로 스크롤이 생겼을 경우 중앙이 아닌 상단부터 내용이 보여질 수 있도록 수정
7
- ### Color
8
- * 컬러 키 값 23.03.10 14시 54분 기준 싱크
4
+ ### Layout
5
+ * WFL_3 생성
6
+ * WFL_4 생성
7
+ * WTP_2 생성