pds-dev-kit-web-test 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +9 -1
- package/dist/src/common/styles/colorSet/PaletteColor_light.json +9 -1
- package/dist/src/common/styles/colorSet/SemanticColor.json +6 -1
- package/dist/src/common/styles/colorSet/UIColor.json +11 -1
- package/dist/src/common/styles/colorSet/index.d.ts +768 -737
- package/dist/src/common/styles/colorSet/index.js +3 -3
- package/dist/src/common/styles/colorSet/ui-type.d.ts +10 -0
- package/dist/src/common/styles/movement/animationStyle.js +8 -8
- package/dist/src/desktop/components/AdminList/AdminList.d.ts +1 -1
- package/dist/src/desktop/components/AdminList/AdminList.js +1 -1
- package/dist/src/desktop/components/AdminList/HeaderRow.d.ts +1 -1
- package/dist/src/desktop/components/AdminList/HeaderRow.js +10 -9
- package/dist/src/desktop/components/AdminListItem/AdminListItem.d.ts +1 -1
- package/dist/src/desktop/components/AdminListItem/AdminListItem.js +37 -23
- package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.d.ts +1 -1
- package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.js +5 -1
- package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.d.ts +1 -1
- package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js +60 -9
- package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFL.d.ts +1 -1
- package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFL.js +50 -12
- package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.d.ts +1 -1
- package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.js +13 -3
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts +1 -1
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js +1 -0
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.d.ts +1 -1
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.js +6 -4
- package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts +1 -1
- package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js +5 -1
- package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/ContentsContainer.d.ts +3 -2
- package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/ContentsContainer.js +2 -2
- package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSA.d.ts +3 -2
- package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSA.js +2 -2
- package/dist/src/mobile/layout/LayoutMS/ContainersBox/ContainersBox.d.ts +3 -2
- package/dist/src/mobile/layout/LayoutMS/ContainersBox/ContainersBox.js +2 -2
- package/package.json +1 -1
- package/release-note.md +6 -6
|
@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
/* eslint-disable import/order */
|
|
7
7
|
var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
|
|
8
8
|
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
|
9
|
-
var UIColor_json_1 = __importDefault(require("./UIColor.json"));
|
|
10
9
|
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
|
10
|
+
var UIColor_json_1 = __importDefault(require("./UIColor.json"));
|
|
11
11
|
var colorSet = {
|
|
12
12
|
SemanticColor: SemanticColor_json_1.default,
|
|
13
13
|
PaletteColor_light: PaletteColor_light_json_1.default,
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
|
15
|
+
UIColor: UIColor_json_1.default
|
|
16
16
|
};
|
|
17
17
|
exports.default = colorSet;
|
|
@@ -734,4 +734,14 @@ export interface UITheme {
|
|
|
734
734
|
ui_domain_record_card_status_4: string;
|
|
735
735
|
ui_cpnt_button_fill_base_tutorialmodal: string;
|
|
736
736
|
ui_cpnt_toolbar_base: string;
|
|
737
|
+
ui_76: string;
|
|
738
|
+
ui_89: string;
|
|
739
|
+
ui_90: string;
|
|
740
|
+
ui_91: string;
|
|
741
|
+
ui_92: string;
|
|
742
|
+
ui_93: string;
|
|
743
|
+
ui_94: string;
|
|
744
|
+
ui_95: string;
|
|
745
|
+
ui_cpnt_icon_sys_brandsecondary_variant: string;
|
|
746
|
+
ui_96: string;
|
|
737
747
|
}
|
|
@@ -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
|
|
11
|
-
exports.dialogOffAni = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out
|
|
12
|
-
exports.dialogOverlayOnAni = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out
|
|
13
|
-
exports.dialogOverlayOffAni = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out
|
|
14
|
-
exports.modalOnAni = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out
|
|
15
|
-
exports.modalOffAni = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out
|
|
16
|
-
exports.modalOverlayOnAni = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out
|
|
17
|
-
exports.modalOverlayOffAni = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n animation: ", " 0.2s ease-in-out
|
|
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;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { PDSValueOption } from '../../../common';
|
|
3
3
|
import type { TFunctionResult } from 'i18next';
|
|
4
|
-
declare type ColumnWidthType = 'small' | 'medium' | 'large';
|
|
4
|
+
declare type ColumnWidthType = 'small' | 'medium' | 'large' | 'xlarge';
|
|
5
5
|
declare type Props = {
|
|
6
6
|
selectionMode?: 'none' | 'single' | 'multi';
|
|
7
7
|
headerRowMode?: 'none' | 'use';
|
|
@@ -72,7 +72,7 @@ function AdminList(_a) {
|
|
|
72
72
|
}
|
|
73
73
|
if (!selectedIds.length) {
|
|
74
74
|
checkboxMethods.reset();
|
|
75
|
-
selectAllMethods.
|
|
75
|
+
selectAllMethods.setValue(headerRowCheckboxName, false);
|
|
76
76
|
if (maintainIds === null || maintainIds === void 0 ? void 0 : maintainIds.length) {
|
|
77
77
|
setIsBulkActionBarOpen(true);
|
|
78
78
|
maintainIds.forEach(function (id) { return checkboxMethods.setValue(id.toString(), true); });
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { TFunctionResult } from 'i18next';
|
|
3
|
-
declare type ColumnWidthType = 'small' | 'medium' | 'large';
|
|
3
|
+
declare type ColumnWidthType = 'small' | 'medium' | 'large' | 'xlarge';
|
|
4
4
|
declare type Props = {
|
|
5
5
|
selectionMode: 'none' | 'single' | 'multi';
|
|
6
6
|
column2HeaderText?: TFunctionResult;
|
|
@@ -48,8 +48,9 @@ function HeaderRow(_a) {
|
|
|
48
48
|
var small = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 56px;\n"], ["\n width: 56px;\n"])));
|
|
49
49
|
var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 80px;\n"], ["\n width: 80px;\n"])));
|
|
50
50
|
var large = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 144px;\n"], ["\n width: 144px;\n"])));
|
|
51
|
-
var
|
|
52
|
-
var
|
|
51
|
+
var xlarge = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 240px;\n"], ["\n width: 240px;\n"])));
|
|
52
|
+
var flexibleHideColumnStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n @media only screen and (max-width: 1400px) {\n .hidableColumn {\n display: none;\n }\n }\n"], ["\n @media only screen and (max-width: 1400px) {\n .hidableColumn {\n display: none;\n }\n }\n"])));
|
|
53
|
+
var S_HeaderRow = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n height: 48px;\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n height: 48px;\n\n ", "\n"])), function (_a) {
|
|
53
54
|
var theme = _a.theme;
|
|
54
55
|
return theme.ui_cpnt_list_base_area;
|
|
55
56
|
}, function (_a) {
|
|
@@ -59,9 +60,9 @@ var S_HeaderRow = styled_components_1.default.div(templateObject_5 || (templateO
|
|
|
59
60
|
var flexibleHideInfoMode = _a.flexibleHideInfoMode;
|
|
60
61
|
return flexibleHideInfoMode === 'use' && flexibleHideColumnStyle;
|
|
61
62
|
});
|
|
62
|
-
var S_CheckBox = styled_components_1.default.div(
|
|
63
|
-
var S_FlexColumn = styled_components_1.default.div(
|
|
64
|
-
var S_Column = styled_components_1.default.div(
|
|
63
|
+
var S_CheckBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"])));
|
|
64
|
+
var S_FlexColumn = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n flex: 1;\n min-width: 80px;\n"], ["\n flex: 1;\n min-width: 80px;\n"])));
|
|
65
|
+
var S_Column = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"])), function (_a) {
|
|
65
66
|
var theme = _a.theme;
|
|
66
67
|
return theme.spacing.spacingC;
|
|
67
68
|
}, function (_a) {
|
|
@@ -69,15 +70,15 @@ var S_Column = styled_components_1.default.div(templateObject_8 || (templateObje
|
|
|
69
70
|
return theme.spacing.spacingC;
|
|
70
71
|
}, function (_a) {
|
|
71
72
|
var columnSize = _a.columnSize;
|
|
72
|
-
return columnSize && { small: small, medium: medium, large: large }[columnSize];
|
|
73
|
+
return columnSize && { small: small, medium: medium, large: large, xlarge: xlarge }[columnSize];
|
|
73
74
|
});
|
|
74
|
-
var S_QuickActionButtonBox = styled_components_1.default.div(
|
|
75
|
+
var S_QuickActionButtonBox = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n display: flex;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
|
|
75
76
|
var theme = _a.theme;
|
|
76
77
|
return theme.spacing.spacingC;
|
|
77
78
|
}, function (_a) {
|
|
78
79
|
var theme = _a.theme;
|
|
79
80
|
return theme.spacing.spacingE;
|
|
80
81
|
});
|
|
81
|
-
var S_EmptyDiv = styled_components_1.default.div(
|
|
82
|
+
var S_EmptyDiv = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n height: 100%;\n width: 56px;\n"], ["\n height: 100%;\n width: 56px;\n"])));
|
|
82
83
|
exports.default = HeaderRow;
|
|
83
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
84
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { PDSTextType } from '../../../common';
|
|
3
3
|
import type { TFunctionResult } from 'i18next';
|
|
4
|
-
declare type ColumnWidthType = 'small' | 'medium' | 'large';
|
|
4
|
+
declare type ColumnWidthType = 'small' | 'medium' | 'large' | 'xlarge';
|
|
5
5
|
declare type ColumnTextType = 'normal' | 'active' | 'active2' | 'inactive' | 'report' | 'report2';
|
|
6
6
|
export declare type AdminListItemProps = {
|
|
7
7
|
rowSize?: 'high' | 'medium' | 'low';
|
|
@@ -161,17 +161,18 @@ var lowRow = (0, styled_components_1.css)(templateObject_3 || (templateObject_3
|
|
|
161
161
|
var smallColumnWidth = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 56px;\n"], ["\n width: 56px;\n"])));
|
|
162
162
|
var mediumColumnWidth = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 80px;\n"], ["\n width: 80px;\n"])));
|
|
163
163
|
var largeColumnWidth = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 144px;\n"], ["\n width: 144px;\n"])));
|
|
164
|
-
var
|
|
165
|
-
var
|
|
166
|
-
var
|
|
164
|
+
var xlargeColumnWidth = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 240px;\n"], ["\n width: 240px;\n"])));
|
|
165
|
+
var fixedColumn = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
|
|
166
|
+
var hoverColumn = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
167
|
+
var hoverQuickActionBtnBox = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: none;\n height: 100%;\n position: absolute;\n right: 0;\n"], ["\n align-items: center;\n background-color: ", ";\n display: none;\n height: 100%;\n position: absolute;\n right: 0;\n"])), function (_a) {
|
|
167
168
|
var theme = _a.theme;
|
|
168
169
|
return theme.ui_cpnt_datatable_textbutton_base_02;
|
|
169
170
|
});
|
|
170
|
-
var fixedQuickActionBtnBox = (0, styled_components_1.css)(
|
|
171
|
+
var fixedQuickActionBtnBox = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n visibility: hidden;\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n visibility: hidden;\n"])), function (_a) {
|
|
171
172
|
var theme = _a.theme;
|
|
172
173
|
return theme.ui_cpnt_datatable_textbutton_base_01;
|
|
173
174
|
});
|
|
174
|
-
var S_QuickActionButtonBox = styled_components_1.default.div(
|
|
175
|
+
var S_QuickActionButtonBox = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"])), function (_a) {
|
|
175
176
|
var theme = _a.theme;
|
|
176
177
|
return theme.spacing.spacingC;
|
|
177
178
|
}, function (_a) {
|
|
@@ -182,60 +183,73 @@ var S_QuickActionButtonBox = styled_components_1.default.div(templateObject_11 |
|
|
|
182
183
|
return quickActionBtnType &&
|
|
183
184
|
{ fix: fixedQuickActionBtnBox, hover: hoverQuickActionBtnBox }[quickActionBtnType];
|
|
184
185
|
});
|
|
185
|
-
var S_QuickActionButton = styled_components_1.default.div(
|
|
186
|
+
var S_QuickActionButton = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n cursor: ", ";\n display: flex;\n height: 56px;\n justify-content: center;\n width: 56px;\n"], ["\n align-items: center;\n cursor: ", ";\n display: flex;\n height: 56px;\n justify-content: center;\n width: 56px;\n"])), function (_a) {
|
|
186
187
|
var disabled = _a.disabled;
|
|
187
188
|
return (disabled ? 'default' : 'pointer');
|
|
188
189
|
});
|
|
189
|
-
var S_Selection = styled_components_1.default.div(
|
|
190
|
-
var S_ImageWrapper = styled_components_1.default.div(
|
|
190
|
+
var S_Selection = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"])));
|
|
191
|
+
var S_ImageWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n margin-right: ", ";\n\n ", "\n"], ["\n margin-right: ", ";\n\n ", "\n"])), function (_a) {
|
|
191
192
|
var theme = _a.theme;
|
|
192
193
|
return theme.spacing.spacingD;
|
|
193
194
|
}, function (_a) {
|
|
194
195
|
var rowSize = _a.rowSize;
|
|
195
|
-
return rowSize === 'high' && (0, styled_components_1.css)(
|
|
196
|
+
return rowSize === 'high' && (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n "], ["\n align-items: center;\n display: flex;\n height: 100%;\n "])));
|
|
196
197
|
});
|
|
197
|
-
var S_ImageColumn = styled_components_1.default.div(
|
|
198
|
+
var S_ImageColumn = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n flex: 1;\n min-width: 80px;\n overflow: auto;\n padding: ", ";\n\n ", "\n"], ["\n flex: 1;\n min-width: 80px;\n overflow: auto;\n padding: ", ";\n\n ", "\n"])), function (_a) {
|
|
198
199
|
var theme = _a.theme;
|
|
199
200
|
return theme.spacing.spacingC;
|
|
200
201
|
}, function (_a) {
|
|
201
202
|
var rowSize = _a.rowSize;
|
|
202
203
|
return rowSize === 'high'
|
|
203
|
-
? (0, styled_components_1.css)(
|
|
204
|
+
? (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n height: 200px;\n "], ["\n box-sizing: border-box;\n display: flex;\n height: 200px;\n "]))) : (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n "], ["\n align-items: center;\n display: flex;\n "])));
|
|
204
205
|
});
|
|
205
|
-
var S_HighTextWrapper = styled_components_1.default.div(
|
|
206
|
+
var S_HighTextWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n height: 100%;\n overflow: auto;\n\n ", "\n"], ["\n height: 100%;\n overflow: auto;\n\n ", "\n"])), function (_a) {
|
|
206
207
|
var hasScroll = _a.hasScroll;
|
|
207
|
-
return !hasScroll && (0, styled_components_1.css)(
|
|
208
|
+
return !hasScroll && (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n "], ["\n align-items: center;\n display: flex;\n "])));
|
|
208
209
|
});
|
|
209
|
-
var S_RowTextWrapper = styled_components_1.default.div(
|
|
210
|
+
var S_RowTextWrapper = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n overflow: auto;\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n display: flex;\n overflow: auto;\n\n ", ";\n ", ";\n"])), function (_a) {
|
|
210
211
|
var columnSize = _a.columnSize;
|
|
211
212
|
return columnSize &&
|
|
212
|
-
{
|
|
213
|
+
{
|
|
214
|
+
small: smallColumnWidth,
|
|
215
|
+
medium: mediumColumnWidth,
|
|
216
|
+
large: largeColumnWidth,
|
|
217
|
+
xlarge: xlargeColumnWidth
|
|
218
|
+
}[columnSize];
|
|
213
219
|
}, function (_a) {
|
|
214
220
|
var quickActionBtnType = _a.quickActionBtnType;
|
|
215
221
|
return quickActionBtnType && { fix: fixedColumn, hover: hoverColumn }[quickActionBtnType];
|
|
216
222
|
});
|
|
217
|
-
var S_Column = styled_components_1.default.div(
|
|
223
|
+
var S_Column = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n display: flex;\n height: auto;\n max-height: 100%;\n overflow: auto;\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n ", ";\n"], ["\n display: flex;\n height: auto;\n max-height: 100%;\n overflow: auto;\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n ", ";\n"])), function (_a) {
|
|
224
|
+
var theme = _a.theme;
|
|
225
|
+
return theme.spacing.spacingC;
|
|
226
|
+
}, function (_a) {
|
|
218
227
|
var theme = _a.theme;
|
|
219
228
|
return theme.spacing.spacingC;
|
|
220
229
|
}, function (_a) {
|
|
221
230
|
var columnSize = _a.columnSize;
|
|
222
231
|
return columnSize &&
|
|
223
|
-
{
|
|
232
|
+
{
|
|
233
|
+
small: smallColumnWidth,
|
|
234
|
+
medium: mediumColumnWidth,
|
|
235
|
+
large: largeColumnWidth,
|
|
236
|
+
xlarge: xlargeColumnWidth
|
|
237
|
+
}[columnSize];
|
|
224
238
|
}, function (_a) {
|
|
225
239
|
var quickActionBtnType = _a.quickActionBtnType;
|
|
226
240
|
return quickActionBtnType && { fix: fixedColumn, hover: hoverColumn }[quickActionBtnType];
|
|
227
241
|
});
|
|
228
|
-
var S_SelectionColumn = styled_components_1.default.div(
|
|
242
|
+
var S_SelectionColumn = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-top: ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-top: ", ";\n"])), function (_a) {
|
|
229
243
|
var theme = _a.theme, rowSize = _a.rowSize;
|
|
230
244
|
return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
|
|
231
245
|
}, function (_a) {
|
|
232
246
|
var theme = _a.theme, rowSize = _a.rowSize;
|
|
233
247
|
return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
|
|
234
248
|
});
|
|
235
|
-
var hoverAdminListItem = (0, styled_components_1.css)(
|
|
236
|
-
var fixedAdminListItem = (0, styled_components_1.css)(
|
|
237
|
-
var flexibleHideColumnStyle = (0, styled_components_1.css)(
|
|
238
|
-
var S_AdminListItem = styled_components_1.default.div(
|
|
249
|
+
var hoverAdminListItem = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n align-items: center;\n position: relative;\n"], ["\n align-items: center;\n position: relative;\n"])));
|
|
250
|
+
var fixedAdminListItem = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n justify-content: space-between;\n"], ["\n justify-content: space-between;\n"])));
|
|
251
|
+
var flexibleHideColumnStyle = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n @media only screen and (max-width: 1400px) {\n .hidableColumn {\n display: none;\n }\n }\n"], ["\n @media only screen and (max-width: 1400px) {\n .hidableColumn {\n display: none;\n }\n }\n"])));
|
|
252
|
+
var S_AdminListItem = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", "\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", "\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n\n ", "\n"])), function (_a) {
|
|
239
253
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
240
254
|
return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
|
|
241
255
|
}, function (_a) {
|
|
@@ -259,4 +273,4 @@ var S_AdminListItem = styled_components_1.default.div(templateObject_27 || (temp
|
|
|
259
273
|
return flexibleHideInfoMode === 'use' && flexibleHideColumnStyle;
|
|
260
274
|
});
|
|
261
275
|
exports.default = AdminListItem;
|
|
262
|
-
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, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27;
|
|
276
|
+
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, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28;
|
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;
|
|
@@ -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;
|
|
@@ -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;
|
|
@@ -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
|
-
|
|
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
|
|
46
|
-
var
|
|
47
|
-
var
|
|
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(
|
|
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(
|
|
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(
|
|
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;
|
|
@@ -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
|
|
46
|
-
var
|
|
47
|
-
var
|
|
48
|
-
var
|
|
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:
|
|
55
|
-
WFL_2:
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
77
|
-
var S_Content2 = styled_components_1.default.div(
|
|
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' | '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;
|