pds-dev-kit-web-test 0.1.7 → 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.
Files changed (65) hide show
  1. package/dist/index.d.ts +0 -1
  2. package/dist/index.js +1 -8
  3. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +9 -1
  4. package/dist/src/common/styles/colorSet/PaletteColor_light.json +9 -1
  5. package/dist/src/common/styles/colorSet/SemanticColor.json +6 -1
  6. package/dist/src/common/styles/colorSet/UIColor.json +11 -1
  7. package/dist/src/common/styles/colorSet/index.d.ts +768 -737
  8. package/dist/src/common/styles/colorSet/index.js +3 -3
  9. package/dist/src/common/styles/colorSet/ui-type.d.ts +10 -0
  10. package/dist/src/common/styles/movement/animationStyle.js +8 -8
  11. package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js +1 -1
  12. package/dist/src/desktop/components/AdminList/AdminList.d.ts +1 -1
  13. package/dist/src/desktop/components/AdminList/AdminList.js +1 -1
  14. package/dist/src/desktop/components/AdminList/HeaderRow.d.ts +1 -1
  15. package/dist/src/desktop/components/AdminList/HeaderRow.js +10 -9
  16. package/dist/src/desktop/components/AdminListItem/AdminListItem.d.ts +1 -1
  17. package/dist/src/desktop/components/AdminListItem/AdminListItem.js +37 -23
  18. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.d.ts +1 -1
  19. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.js +5 -1
  20. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.d.ts +1 -1
  21. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js +60 -9
  22. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFL.d.ts +1 -1
  23. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFL.js +50 -12
  24. package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.d.ts +1 -1
  25. package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.js +13 -3
  26. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts +1 -1
  27. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js +1 -0
  28. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.d.ts +1 -1
  29. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.js +6 -4
  30. package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts +1 -1
  31. package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js +5 -1
  32. package/dist/src/sub/index.d.ts +0 -1
  33. package/dist/src/sub/index.js +1 -11
  34. package/package.json +1 -1
  35. package/release-note.md +7 -5
  36. package/dist/src/sub/AdminList/AdminList/AdminList.d.ts +0 -47
  37. package/dist/src/sub/AdminList/AdminList/AdminList.js +0 -224
  38. package/dist/src/sub/AdminList/AdminList/HeaderRow.d.ts +0 -30
  39. package/dist/src/sub/AdminList/AdminList/HeaderRow.js +0 -84
  40. package/dist/src/sub/AdminList/AdminList/index.d.ts +0 -1
  41. package/dist/src/sub/AdminList/AdminList/index.js +0 -8
  42. package/dist/src/sub/AdminList/AdminListHeader/AdminListHeader.d.ts +0 -18
  43. package/dist/src/sub/AdminList/AdminListHeader/AdminListHeader.js +0 -60
  44. package/dist/src/sub/AdminList/AdminListHeader/HeaderBar.d.ts +0 -17
  45. package/dist/src/sub/AdminList/AdminListHeader/HeaderBar.js +0 -85
  46. package/dist/src/sub/AdminList/AdminListHeader/index.d.ts +0 -1
  47. package/dist/src/sub/AdminList/AdminListHeader/index.js +0 -8
  48. package/dist/src/sub/AdminList/AdminListItem/AdminListItem.d.ts +0 -57
  49. package/dist/src/sub/AdminList/AdminListItem/AdminListItem.js +0 -263
  50. package/dist/src/sub/AdminList/AdminListItem/index.d.ts +0 -1
  51. package/dist/src/sub/AdminList/AdminListItem/index.js +0 -8
  52. package/dist/src/sub/AdminList/BulkActionBar/BulkActionBar.d.ts +0 -31
  53. package/dist/src/sub/AdminList/BulkActionBar/BulkActionBar.js +0 -31
  54. package/dist/src/sub/AdminList/BulkActionBar/index.d.ts +0 -1
  55. package/dist/src/sub/AdminList/BulkActionBar/index.js +0 -8
  56. package/dist/src/sub/AdminList/ToolBar/ChipList.d.ts +0 -9
  57. package/dist/src/sub/AdminList/ToolBar/ChipList.js +0 -29
  58. package/dist/src/sub/AdminList/ToolBar/SearchField.d.ts +0 -15
  59. package/dist/src/sub/AdminList/ToolBar/SearchField.js +0 -266
  60. package/dist/src/sub/AdminList/ToolBar/ToolBar.d.ts +0 -26
  61. package/dist/src/sub/AdminList/ToolBar/ToolBar.js +0 -85
  62. package/dist/src/sub/AdminList/ToolBar/index.d.ts +0 -1
  63. package/dist/src/sub/AdminList/ToolBar/index.js +0 -8
  64. package/dist/src/sub/AdminList/index.d.ts +0 -5
  65. package/dist/src/sub/AdminList/index.js +0 -13
package/dist/src/common/styles/colorSet/index.js CHANGED
@@ -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
- UIColor: UIColor_json_1.default,
15
- PaletteColor_Dark: PaletteColor_Dark_json_1.default
14
+ PaletteColor_Dark: PaletteColor_Dark_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
@@ -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
  }
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/common/components/TextFieldBase/TextFieldBase.js CHANGED
@@ -275,7 +275,7 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
275
275
  }[state];
276
276
  }, function (_a) {
277
277
  var textPadding = _a.textPadding;
278
- return textPadding && "padding: " + textPadding + ";";
278
+ return textPadding && "padding: " + textPadding;
279
279
  });
280
280
  var S_Input = styled_components_1.default.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n flex: 1;\n line-height: ", ";\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"], ["\n ", "\n flex: 1;\n line-height: ", ";\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), basicStyle, function (_a) {
281
281
  var theme = _a.theme;
package/dist/src/desktop/components/AdminList/AdminList.d.ts CHANGED
@@ -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';
package/dist/src/desktop/components/AdminList/AdminList.js CHANGED
@@ -72,7 +72,7 @@ function AdminList(_a) {
72
72
  }
73
73
  if (!selectedIds.length) {
74
74
  checkboxMethods.reset();
75
- selectAllMethods.reset();
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); });
package/dist/src/desktop/components/AdminList/HeaderRow.d.ts CHANGED
@@ -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;
package/dist/src/desktop/components/AdminList/HeaderRow.js CHANGED
@@ -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 flexibleHideColumnStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __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"])));
52
- var S_HeaderRow = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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) {
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(templateObject_6 || (templateObject_6 = __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"])));
63
- var S_FlexColumn = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n flex: 1;\n min-width: 80px;\n"], ["\n flex: 1;\n min-width: 80px;\n"])));
64
- var S_Column = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"])), function (_a) {
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(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n display: flex;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
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(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n height: 100%;\n width: 56px;\n"], ["\n height: 100%;\n width: 56px;\n"])));
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;
package/dist/src/desktop/components/AdminListItem/AdminListItem.d.ts CHANGED
@@ -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';
package/dist/src/desktop/components/AdminListItem/AdminListItem.js CHANGED
@@ -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 fixedColumn = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
165
- var hoverColumn = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
166
- var hoverQuickActionBtnBox = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __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) {
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)(templateObject_10 || (templateObject_10 = __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
+ 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(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"])), function (_a) {
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(templateObject_12 || (templateObject_12 = __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
+ 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(templateObject_13 || (templateObject_13 = __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"])));
190
- var S_ImageWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n margin-right: ", ";\n\n ", "\n"], ["\n margin-right: ", ";\n\n ", "\n"])), function (_a) {
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)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n "], ["\n align-items: center;\n display: flex;\n height: 100%;\n "])));
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(templateObject_18 || (templateObject_18 = __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
+ 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)(templateObject_16 || (templateObject_16 = __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_17 || (templateObject_17 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n "], ["\n align-items: center;\n display: flex;\n "])));
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(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n height: 100%;\n overflow: auto;\n\n ", "\n"], ["\n height: 100%;\n overflow: auto;\n\n ", "\n"])), function (_a) {
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)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n "], ["\n align-items: center;\n display: flex;\n "])));
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(templateObject_21 || (templateObject_21 = __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
+ 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
- { small: smallColumnWidth, medium: mediumColumnWidth, large: largeColumnWidth }[columnSize];
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(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n overflow: auto;\n padding: ", ";\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n display: flex;\n overflow: auto;\n padding: ", ";\n\n ", ";\n ", ";\n"])), function (_a) {
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
- { small: smallColumnWidth, medium: mediumColumnWidth, large: largeColumnWidth }[columnSize];
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(templateObject_23 || (templateObject_23 = __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) {
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)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n align-items: center;\n position: relative;\n"], ["\n align-items: center;\n position: relative;\n"])));
236
- var fixedAdminListItem = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n justify-content: space-between;\n"], ["\n justify-content: space-between;\n"])));
237
- var flexibleHideColumnStyle = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __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"])));
238
- var S_AdminListItem = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\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 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) {
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;
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;