pds-dev-kit-web 1.9.0-beta.5 → 1.9.0-beta.6

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 (33) hide show
  1. package/dist/src/common/assets/icons/line/CsBold.d.ts +4 -0
  2. package/dist/src/common/assets/icons/line/CsBold.js +34 -0
  3. package/dist/src/common/assets/icons/line/CsFace.d.ts +4 -0
  4. package/dist/src/common/assets/icons/line/CsFace.js +34 -0
  5. package/dist/src/common/assets/icons/line/index.d.ts +2 -0
  6. package/dist/src/common/assets/icons/line/index.js +4 -0
  7. package/dist/src/common/styles/colorSet/UIColor.json +2 -1
  8. package/dist/src/common/styles/colorSet/index.d.ts +99 -98
  9. package/dist/src/common/styles/colorSet/index.js +2 -2
  10. package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
  11. package/dist/src/common/styles/scroll/scrollbarStyle.d.ts +2 -0
  12. package/dist/src/common/styles/scroll/scrollbarStyle.js +14 -0
  13. package/dist/src/desktop/components/AdminList/AdminList.d.ts +2 -1
  14. package/dist/src/desktop/components/AdminList/AdminList.js +4 -4
  15. package/dist/src/desktop/components/AdminList/HeaderRow.d.ts +2 -1
  16. package/dist/src/desktop/components/AdminList/HeaderRow.js +21 -17
  17. package/dist/src/desktop/components/AdminListItem/AdminListItem.d.ts +1 -0
  18. package/dist/src/desktop/components/AdminListItem/AdminListItem.js +17 -13
  19. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js +9 -12
  20. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFB.js +8 -11
  21. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFE.js +17 -20
  22. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFL.js +11 -33
  23. package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSA.js +3 -2
  24. package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSD.js +3 -2
  25. package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSE.js +3 -2
  26. package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSF.js +5 -4
  27. package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSG.js +5 -4
  28. package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.js +14 -17
  29. package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.js +6 -9
  30. package/dist/storybook-static/{main.bea0ee46.iframe.bundle.d.ts → main.c8ffb728.iframe.bundle.d.ts} +1 -16
  31. package/dist/storybook-static/{main.bea0ee46.iframe.bundle.js → main.c8ffb728.iframe.bundle.js} +35 -27
  32. package/package.json +1 -1
  33. package/release-note.md +11 -85
package/dist/src/desktop/components/AdminListItem/AdminListItem.js CHANGED
@@ -31,13 +31,13 @@ var hybrid_1 = require("../../../hybrid");
31
31
  var Checkbox_1 = require("../Checkbox");
32
32
  var TextLabel_1 = require("../TextLabel");
33
33
  var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
34
- var _b = _a.rowSize, rowSize = _b === void 0 ? 'medium' : _b, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'multi' : _c, _d = _a.column2Type, column2Type = _d === void 0 ? 'image_text' : _d, imageSrc = _a.imageSrc, _e = _a.imageShapeType, imageShapeType = _e === void 0 ? 'rectangle' : _e, _f = _a.imageScaleType, imageScaleType = _f === void 0 ? 'cover' : _f, _g = _a.imageRadius, imageRadius = _g === void 0 ? 8 : _g, _h = _a.imageRatio, imageRatio = _h === void 0 ? '16_9' : _h, column2Text = _a.column2Text, column3Text = _a.column3Text, _j = _a.column3TextWidth, column3TextWidth = _j === void 0 ? 'small' : _j, _k = _a.column3TextStyleTheme, column3TextStyleTheme = _k === void 0 ? 'normal' : _k, column4Text = _a.column4Text, _l = _a.column4TextWidth, column4TextWidth = _l === void 0 ? 'small' : _l, _m = _a.column4TextStyleTheme, column4TextStyleTheme = _m === void 0 ? 'normal' : _m, column5Text = _a.column5Text, _o = _a.column5TextWidth, column5TextWidth = _o === void 0 ? 'small' : _o, _p = _a.column5TextStyleTheme, column5TextStyleTheme = _p === void 0 ? 'normal' : _p, column6Text = _a.column6Text, _q = _a.column6TextWidth, column6TextWidth = _q === void 0 ? 'small' : _q, _r = _a.column6TextStyleTheme, column6TextStyleTheme = _r === void 0 ? 'normal' : _r, column7Text = _a.column7Text, _s = _a.column7TextWidth, column7TextWidth = _s === void 0 ? 'small' : _s, _t = _a.column7TextStyleTheme, column7TextStyleTheme = _t === void 0 ? 'normal' : _t, column8Text = _a.column8Text, _u = _a.column8TextWidth, column8TextWidth = _u === void 0 ? 'small' : _u, _v = _a.column8TextStyleTheme, column8TextStyleTheme = _v === void 0 ? 'normal' : _v, column9Text = _a.column9Text, _w = _a.column9TextWidth, column9TextWidth = _w === void 0 ? 'small' : _w, _x = _a.column9TextStyleTheme, column9TextStyleTheme = _x === void 0 ? 'normal' : _x, column10Text = _a.column10Text, _y = _a.column10TextWidth, column10TextWidth = _y === void 0 ? 'small' : _y, _z = _a.column10TextStyleTheme, column10TextStyleTheme = _z === void 0 ? 'normal' : _z, _0 = _a.quickActionBtnMode, quickActionBtnMode = _0 === void 0 ? 'btn_amount2' : _0, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _1 = _a.quickActionBtnType, quickActionBtnType = _1 === void 0 ? 'fix' : _1, _2 = _a.quickActionBtn1State, quickActionBtn1State = _2 === void 0 ? 'normal' : _2, _3 = _a.quickActionBtn2State, quickActionBtn2State = _3 === void 0 ? 'normal' : _3, _4 = _a.quickActionBtn3State, quickActionBtn3State = _4 === void 0 ? 'normal' : _4, _5 = _a.selectedState, selectedState = _5 === void 0 ? 'basic' : _5, id = _a.id, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onClickItem = _a.onClickItem;
34
+ var _b = _a.rowSize, rowSize = _b === void 0 ? 'medium' : _b, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'multi' : _c, _d = _a.column2Type, column2Type = _d === void 0 ? 'image_text' : _d, imageSrc = _a.imageSrc, _e = _a.imageShapeType, imageShapeType = _e === void 0 ? 'rectangle' : _e, _f = _a.imageScaleType, imageScaleType = _f === void 0 ? 'cover' : _f, _g = _a.imageRadius, imageRadius = _g === void 0 ? 8 : _g, _h = _a.imageRatio, imageRatio = _h === void 0 ? '16_9' : _h, column2Text = _a.column2Text, column3Text = _a.column3Text, _j = _a.column3TextWidth, column3TextWidth = _j === void 0 ? 'small' : _j, _k = _a.column3TextStyleTheme, column3TextStyleTheme = _k === void 0 ? 'normal' : _k, column4Text = _a.column4Text, _l = _a.column4TextWidth, column4TextWidth = _l === void 0 ? 'small' : _l, _m = _a.column4TextStyleTheme, column4TextStyleTheme = _m === void 0 ? 'normal' : _m, column5Text = _a.column5Text, _o = _a.column5TextWidth, column5TextWidth = _o === void 0 ? 'small' : _o, _p = _a.column5TextStyleTheme, column5TextStyleTheme = _p === void 0 ? 'normal' : _p, column6Text = _a.column6Text, _q = _a.column6TextWidth, column6TextWidth = _q === void 0 ? 'small' : _q, _r = _a.column6TextStyleTheme, column6TextStyleTheme = _r === void 0 ? 'normal' : _r, column7Text = _a.column7Text, _s = _a.column7TextWidth, column7TextWidth = _s === void 0 ? 'small' : _s, _t = _a.column7TextStyleTheme, column7TextStyleTheme = _t === void 0 ? 'normal' : _t, column8Text = _a.column8Text, _u = _a.column8TextWidth, column8TextWidth = _u === void 0 ? 'small' : _u, _v = _a.column8TextStyleTheme, column8TextStyleTheme = _v === void 0 ? 'normal' : _v, column9Text = _a.column9Text, _w = _a.column9TextWidth, column9TextWidth = _w === void 0 ? 'small' : _w, _x = _a.column9TextStyleTheme, column9TextStyleTheme = _x === void 0 ? 'normal' : _x, column10Text = _a.column10Text, _y = _a.column10TextWidth, column10TextWidth = _y === void 0 ? 'small' : _y, _z = _a.column10TextStyleTheme, column10TextStyleTheme = _z === void 0 ? 'normal' : _z, _0 = _a.quickActionBtnMode, quickActionBtnMode = _0 === void 0 ? 'btn_amount2' : _0, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _1 = _a.quickActionBtnType, quickActionBtnType = _1 === void 0 ? 'fix' : _1, _2 = _a.quickActionBtn1State, quickActionBtn1State = _2 === void 0 ? 'normal' : _2, _3 = _a.quickActionBtn2State, quickActionBtn2State = _3 === void 0 ? 'normal' : _3, _4 = _a.quickActionBtn3State, quickActionBtn3State = _4 === void 0 ? 'normal' : _4, _5 = _a.selectedState, selectedState = _5 === void 0 ? 'basic' : _5, id = _a.id, _6 = _a.flexibleHideInfoMode, flexibleHideInfoMode = _6 === void 0 ? 'use' : _6, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onClickItem = _a.onClickItem;
35
35
  var methods = (0, react_hook_form_1.useFormContext)();
36
36
  var isSelected = (0, react_hook_form_1.useWatch)({
37
37
  control: methods.control,
38
38
  name: id.toString()
39
39
  });
40
- var _6 = (0, react_1.useState)(false), hasScroll = _6[0], setHasScroll = _6[1];
40
+ var _7 = (0, react_1.useState)(false), hasScroll = _7[0], setHasScroll = _7[1];
41
41
  var contentRef = (0, react_1.useRef)(null);
42
42
  (0, react_1.useEffect)(function () {
43
43
  if (!contentRef || !contentRef.current)
@@ -147,7 +147,7 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
147
147
  }
148
148
  }
149
149
  }
150
- return (react_1.default.createElement(S_AdminListItem, { "x-pds-name": "AdminListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", ref: ref, rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType },
150
+ return (react_1.default.createElement(S_AdminListItem, { "x-pds-name": "AdminListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", ref: ref, rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType, flexibleHideInfoMode: flexibleHideInfoMode },
151
151
  react_1.default.createElement(S_SelectionColumn, { rowSize: rowSize }, selectionMode === 'multi' && (react_1.default.createElement(S_Selection, null,
152
152
  react_1.default.createElement(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' ? 'disabled' : 'normal' })))),
153
153
  react_1.default.createElement(S_ImageColumn, { rowSize: rowSize },
@@ -157,21 +157,21 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
157
157
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 2 }))),
158
158
  rowSize === 'high' && (react_1.default.createElement(S_HighTextWrapper, { ref: contentRef, hasScroll: hasScroll },
159
159
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" })))),
160
- column3Text && (react_1.default.createElement(S_Column, { columnSize: column3TextWidth },
160
+ column3Text && (react_1.default.createElement(S_Column, { columnSize: column3TextWidth, className: "hidableColumn" },
161
161
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column3Text, styleTheme: column3TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column3TextStyleTheme) }))),
162
- column4Text && (react_1.default.createElement(S_Column, { columnSize: column4TextWidth },
162
+ column4Text && (react_1.default.createElement(S_Column, { columnSize: column4TextWidth, className: "hidableColumn" },
163
163
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column4Text, styleTheme: column4TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column4TextStyleTheme) }))),
164
- column5Text && (react_1.default.createElement(S_Column, { columnSize: column5TextWidth },
164
+ column5Text && (react_1.default.createElement(S_Column, { columnSize: column5TextWidth, className: "hidableColumn" },
165
165
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column5Text, styleTheme: column5TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column5TextStyleTheme) }))),
166
- column6Text && (react_1.default.createElement(S_Column, { columnSize: column6TextWidth },
166
+ column6Text && (react_1.default.createElement(S_Column, { columnSize: column6TextWidth, className: "hidableColumn" },
167
167
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column6Text, styleTheme: column6TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column6TextStyleTheme) }))),
168
- column7Text && (react_1.default.createElement(S_Column, { columnSize: column7TextWidth },
168
+ column7Text && (react_1.default.createElement(S_Column, { columnSize: column7TextWidth, className: "hidableColumn" },
169
169
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column7Text, styleTheme: column7TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column7TextStyleTheme) }))),
170
- column8Text && (react_1.default.createElement(S_Column, { columnSize: column8TextWidth },
170
+ column8Text && (react_1.default.createElement(S_Column, { columnSize: column8TextWidth, className: "hidableColumn" },
171
171
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column8Text, styleTheme: column8TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column8TextStyleTheme) }))),
172
- column9Text && (react_1.default.createElement(S_Column, { columnSize: column9TextWidth },
172
+ column9Text && (react_1.default.createElement(S_Column, { columnSize: column9TextWidth, className: "hidableColumn" },
173
173
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column9Text, styleTheme: column9TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column9TextStyleTheme) }))),
174
- column10Text && (react_1.default.createElement(S_Column, { columnSize: column10TextWidth },
174
+ column10Text && (react_1.default.createElement(S_Column, { columnSize: column10TextWidth, className: "hidableColumn" },
175
175
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column10Text, styleTheme: column10TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column10TextStyleTheme) }))),
176
176
  quickActionBtnMode !== 'none' && (react_1.default.createElement(S_QuickActionButtonBox, { quickActionBtnType: quickActionBtnType }, quickActionButtons())),
177
177
  quickActionBtnType === 'hover' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" })));
@@ -255,7 +255,8 @@ var S_SelectionColumn = styled_components_1.default.div(templateObject_23 || (te
255
255
  });
256
256
  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"])));
257
257
  var fixedAdminListItem = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n justify-content: space-between;\n"], ["\n justify-content: space-between;\n"])));
258
- var S_AdminListItem = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __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 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"])), function (_a) {
258
+ 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"])));
259
+ 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) {
259
260
  var theme = _a.theme, isSelected = _a.isSelected;
260
261
  return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
261
262
  }, function (_a) {
@@ -274,6 +275,9 @@ var S_AdminListItem = styled_components_1.default.div(templateObject_26 || (temp
274
275
  }, S_QuickActionButtonBox, function (_a) {
275
276
  var quickActionBtnType = _a.quickActionBtnType;
276
277
  return quickActionBtnType === 'hover' && 'flex';
278
+ }, function (_a) {
279
+ var flexibleHideInfoMode = _a.flexibleHideInfoMode;
280
+ return flexibleHideInfoMode === 'use' && flexibleHideColumnStyle;
277
281
  });
278
282
  exports.default = AdminListItem;
279
- 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;
283
+ 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;
package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js CHANGED
@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var components_1 = require("../../../../../../common/components");
32
+ var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
32
33
  var WFA = function (_a) {
33
34
  var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
34
35
  return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -36,24 +37,20 @@ var WFA = function (_a) {
36
37
  react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", layoutType: layoutType, areaColor: areaColor },
37
38
  react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA" }, content1)))))));
38
39
  };
39
- var scrollVisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n\n ::-webkit-scrollbar-track {\n margin-top: 24px;\n margin-bottom: 24px;\n }\n\n ::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n"], ["\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n\n ::-webkit-scrollbar-track {\n margin-top: 24px;\n margin-bottom: 24px;\n }\n\n ::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n"])), function (_a) {
40
- var theme = _a.theme;
41
- return theme.ui_container_scroll;
42
- });
43
- var WFA_1AreaStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 432px;\n"], ["\n width: 432px;\n"])));
44
- var WFA_2AreaStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 608px;\n"], ["\n width: 608px;\n"])));
45
- var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
40
+ var WFA_1AreaStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 432px;\n"], ["\n width: 432px;\n"])));
41
+ var WFA_2AreaStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 608px;\n"], ["\n width: 608px;\n"])));
42
+ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
46
43
  var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
47
44
  return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
48
45
  });
49
- var S_ContentsContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n height: 60vh;\n max-height: 640px;\n justify-content: center;\n width: 864px;\n overflow-x: hidden;\n overflow-y: overlay;\n border-radius: 24px;\n ", ";\n\n ", "\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n height: 60vh;\n max-height: 640px;\n justify-content: center;\n width: 864px;\n overflow-x: hidden;\n overflow-y: overlay;\n border-radius: 24px;\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
46
+ var S_ContentsContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n height: 60vh;\n max-height: 640px;\n justify-content: center;\n width: 864px;\n overflow-x: hidden;\n overflow-y: overlay;\n border-radius: 24px;\n ", ";\n\n ", "\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n height: 60vh;\n max-height: 640px;\n justify-content: center;\n width: 864px;\n overflow-x: hidden;\n overflow-y: overlay;\n border-radius: 24px;\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
50
47
  var theme = _a.theme;
51
48
  return theme.ui_wizard_contentscontainer01_background;
52
49
  }, function (_a) {
53
50
  var containerColor = _a.containerColor;
54
51
  return "background-color: " + containerColor;
55
- }, scrollVisible, overrideStyleContainer1);
56
- var S_ContentsArea = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-top: 64px;\n padding-bottom: 64px;\n\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n padding-top: 64px;\n padding-bottom: 64px;\n\n ", ";\n ", ";\n"])), function (_a) {
52
+ }, scrollbarStyle_1.scrollbarWithPaddingStyle, overrideStyleContainer1);
53
+ var S_ContentsArea = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-top: 64px;\n padding-bottom: 64px;\n\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n padding-top: 64px;\n padding-bottom: 64px;\n\n ", ";\n ", ";\n"])), function (_a) {
57
54
  var layoutType = _a.layoutType;
58
55
  return ({
59
56
  WFA_1: WFA_1AreaStyle,
@@ -63,6 +60,6 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_6 || (templa
63
60
  var areaColor = _a.areaColor;
64
61
  return "background-color: " + areaColor;
65
62
  });
66
- var S_Content1 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
63
+ var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
67
64
  exports.default = WFA;
68
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
65
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFB.js CHANGED
@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var components_1 = require("../../../../../../common/components");
32
+ var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
32
33
  var WFB = function (_a) {
33
34
  var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
34
35
  return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
@@ -36,26 +37,22 @@ var WFB = function (_a) {
36
37
  react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB" }, content1),
37
38
  react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB" }, content2))))));
38
39
  };
39
- var scrollVisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n\n ::-webkit-scrollbar-track {\n margin-top: 24px;\n margin-bottom: 24px;\n }\n\n ::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n"], ["\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n\n ::-webkit-scrollbar-track {\n margin-top: 24px;\n margin-bottom: 24px;\n }\n\n ::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n"])), function (_a) {
40
- var theme = _a.theme;
41
- return theme.ui_container_scroll;
42
- });
43
- var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
40
+ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
44
41
  var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
45
42
  return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
46
43
  });
47
- var S_ContentsContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n height: 60vh;\n max-height: 640px;\n justify-content: center;\n width: 864px;\n overflow-x: hidden;\n overflow-y: overlay;\n border-radius: 24px;\n ", ";\n\n ", "\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n height: 60vh;\n max-height: 640px;\n justify-content: center;\n width: 864px;\n overflow-x: hidden;\n overflow-y: overlay;\n border-radius: 24px;\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
44
+ var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n height: 60vh;\n max-height: 640px;\n justify-content: center;\n width: 864px;\n overflow-x: hidden;\n overflow-y: overlay;\n border-radius: 24px;\n ", ";\n\n ", "\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n height: 60vh;\n max-height: 640px;\n justify-content: center;\n width: 864px;\n overflow-x: hidden;\n overflow-y: overlay;\n border-radius: 24px;\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
48
45
  var theme = _a.theme;
49
46
  return theme.ui_wizard_contentscontainer01_background;
50
47
  }, function (_a) {
51
48
  var containerColor = _a.containerColor;
52
49
  return "background-color: " + containerColor;
53
- }, scrollVisible, overrideStyleContainer1);
54
- var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n margin: 0 48px;\n padding-top: 80px;\n padding-bottom: 64px;\n width: 100%;\n ", ";\n"], ["\n box-sizing: border-box;\n display: flex;\n margin: 0 48px;\n padding-top: 80px;\n padding-bottom: 64px;\n width: 100%;\n ", ";\n"])), function (_a) {
50
+ }, scrollbarStyle_1.scrollbarWithPaddingStyle, overrideStyleContainer1);
51
+ var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n margin: 0 48px;\n padding-top: 64px;\n padding-bottom: 64px;\n width: 100%;\n ", ";\n"], ["\n box-sizing: border-box;\n display: flex;\n margin: 0 48px;\n padding-top: 64px;\n padding-bottom: 64px;\n width: 100%;\n ", ";\n"])), function (_a) {
55
52
  var areaColor = _a.areaColor;
56
53
  return "background-color: " + areaColor;
57
54
  });
58
- var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 360px;\n"], ["\n width: 360px;\n"])));
59
- var S_Content2 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-left: 48px;\n width: 360px;\n"], ["\n margin-left: 48px;\n width: 360px;\n"])));
55
+ var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 360px;\n"], ["\n width: 360px;\n"])));
56
+ var S_Content2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-left: 48px;\n width: 360px;\n"], ["\n margin-left: 48px;\n width: 360px;\n"])));
60
57
  exports.default = WFB;
61
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
58
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFE.js CHANGED
@@ -29,31 +29,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var components_1 = require("../../../../../../common/components");
32
+ var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
32
33
  var WFE = function (_a) {
33
34
  var layoutType = _a.layoutType, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
34
35
  return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
35
36
  react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType, areaColor: areaColor },
36
37
  react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType }, content1))))));
37
38
  };
38
- var scrollVisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n\n ::-webkit-scrollbar-track {\n margin-top: 24px;\n margin-bottom: 24px;\n }\n\n ::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n"], ["\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n\n ::-webkit-scrollbar-track {\n margin-top: 24px;\n margin-bottom: 24px;\n }\n\n ::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n"])), function (_a) {
39
- var theme = _a.theme;
40
- return theme.ui_container_scroll;
41
- });
42
- var WFE_1ContainerStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n overflow: hidden;\n border-radius: 24px;\n width: 864px;\n"], ["\n overflow: hidden;\n border-radius: 24px;\n width: 864px;\n"])));
43
- var WFE_2ContainerStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n overflow-x: hidden;\n overflow-y: auto;\n border-radius: 24px;\n width: 864px;\n"], ["\n overflow-x: hidden;\n overflow-y: auto;\n border-radius: 24px;\n width: 864px;\n"])));
44
- var WFE_3ContainerStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n overflow: hidden;\n border-radius: 24px;\n width: 1152px;\n"], ["\n overflow: hidden;\n border-radius: 24px;\n width: 1152px;\n"])));
45
- var WFE_4ContainerStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n overflow-x: hidden;\n overflow-y: auto;\n border-radius: 24px;\n width: 1152px;\n"], ["\n overflow-x: hidden;\n overflow-y: auto;\n border-radius: 24px;\n width: 1152px;\n"])));
46
- var WFE_1AreaStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
47
- var WFE_2AreaStyle = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-top: 24px;\n"], ["\n box-sizing: border-box;\n padding-top: 24px;\n"])));
48
- var WFE_3AreaStyle = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
49
- var WFE_4AreaStyle = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-top: 24px;\n"], ["\n box-sizing: border-box;\n padding-top: 24px;\n"])));
50
- var WFE_1Content1Style = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
51
- var WFE_3Content1Style = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
52
- var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
39
+ var WFE_1ContainerStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n overflow: hidden;\n border-radius: 24px;\n width: 864px;\n"], ["\n overflow: hidden;\n border-radius: 24px;\n width: 864px;\n"])));
40
+ var WFE_2ContainerStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n overflow-x: hidden;\n overflow-y: auto;\n border-radius: 24px;\n width: 864px;\n"], ["\n overflow-x: hidden;\n overflow-y: auto;\n border-radius: 24px;\n width: 864px;\n"])));
41
+ var WFE_3ContainerStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n overflow: hidden;\n border-radius: 24px;\n width: 1152px;\n"], ["\n overflow: hidden;\n border-radius: 24px;\n width: 1152px;\n"])));
42
+ var WFE_4ContainerStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n overflow-x: hidden;\n overflow-y: auto;\n border-radius: 24px;\n width: 1152px;\n"], ["\n overflow-x: hidden;\n overflow-y: auto;\n border-radius: 24px;\n width: 1152px;\n"])));
43
+ var WFE_1AreaStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
44
+ var WFE_2AreaStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-top: 24px;\n"], ["\n box-sizing: border-box;\n padding-top: 24px;\n"])));
45
+ var WFE_3AreaStyle = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
46
+ var WFE_4AreaStyle = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-top: 24px;\n"], ["\n box-sizing: border-box;\n padding-top: 24px;\n"])));
47
+ var WFE_1Content1Style = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
48
+ var WFE_3Content1Style = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
49
+ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
53
50
  var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
54
51
  return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
55
52
  });
56
- var S_ContentsContainer = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: center;\n height: 60vh;\n max-height: 640px;\n\n ", ";\n ", ";\n\n ", "\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: center;\n height: 60vh;\n max-height: 640px;\n\n ", ";\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
53
+ var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: center;\n height: 60vh;\n max-height: 640px;\n\n ", ";\n ", ";\n\n ", "\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: center;\n height: 60vh;\n max-height: 640px;\n\n ", ";\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
57
54
  var theme = _a.theme;
58
55
  return theme.ui_wizard_contentscontainer01_background;
59
56
  }, function (_a) {
@@ -67,8 +64,8 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_13 || (
67
64
  }, function (_a) {
68
65
  var containerColor = _a.containerColor;
69
66
  return "background-color: " + containerColor;
70
- }, scrollVisible, overrideStyleContainer1);
71
- var S_ContentsArea = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n width: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
67
+ }, scrollbarStyle_1.scrollbarWithPaddingStyle, overrideStyleContainer1);
68
+ var S_ContentsArea = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n width: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
72
69
  var layoutType = _a.layoutType;
73
70
  return ({
74
71
  WFE_1: WFE_1AreaStyle,
@@ -80,7 +77,7 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_14 || (templ
80
77
  var areaColor = _a.areaColor;
81
78
  return "background-color: " + areaColor;
82
79
  });
83
- var S_Content1 = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
80
+ var S_Content1 = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
84
81
  var layoutType = _a.layoutType;
85
82
  return ({
86
83
  WFE_1: WFE_1Content1Style,
@@ -90,4 +87,4 @@ var S_Content1 = styled_components_1.default.div(templateObject_15 || (templateO
90
87
  }[layoutType]);
91
88
  });
92
89
  exports.default = WFE;
93
- 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;
90
+ 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.js CHANGED
@@ -3,32 +3,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
7
- if (k2 === undefined) k2 = k;
8
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
6
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
8
  };
28
9
  Object.defineProperty(exports, "__esModule", { value: true });
29
10
  var react_1 = __importDefault(require("react"));
30
- var styled_components_1 = __importStar(require("styled-components"));
11
+ var styled_components_1 = __importDefault(require("styled-components"));
31
12
  var components_1 = require("../../../../../../common/components");
13
+ var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
32
14
  var WFL = function (_a) {
33
15
  var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
34
16
  return (react_1.default.createElement(S_Box, null,
@@ -37,34 +19,30 @@ var WFL = function (_a) {
37
19
  react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", areaColor: areaColor },
38
20
  react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL" }, content2))))));
39
21
  };
40
- var scrollVisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n\n ::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n"], ["\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n\n ::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n"])), function (_a) {
41
- var theme = _a.theme;
42
- return theme.ui_container_scroll;
43
- });
44
- var S_Box = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n height: 60vh;\n max-height: 640px;\n"], ["\n display: flex;\n height: 60vh;\n max-height: 640px;\n"])));
45
- var S_ContentsContainer1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n width: 480px;\n box-sizing: border-box;\n padding: 0 48px;\n overflow-x: hidden;\n overflow-y: auto;\n border-radius: 24px 0 0 24px;\n\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n width: 480px;\n box-sizing: border-box;\n padding: 0 48px;\n overflow-x: hidden;\n overflow-y: auto;\n border-radius: 24px 0 0 24px;\n\n ", ";\n\n ", "\n"])), function (_a) {
22
+ var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n height: 60vh;\n max-height: 640px;\n"], ["\n display: flex;\n height: 60vh;\n max-height: 640px;\n"])));
23
+ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n width: 480px;\n box-sizing: border-box;\n padding: 0 48px;\n overflow-x: hidden;\n overflow-y: auto;\n border-radius: 24px 0 0 24px;\n\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n width: 480px;\n box-sizing: border-box;\n padding: 0 48px;\n overflow-x: hidden;\n overflow-y: auto;\n border-radius: 24px 0 0 24px;\n\n ", ";\n\n ", "\n"])), function (_a) {
46
24
  var theme = _a.theme;
47
25
  return theme.ui_wizard_contentscontainer01_background;
48
26
  }, function (_a) {
49
27
  var containerColor = _a.containerColor;
50
28
  return "background-color: " + containerColor;
51
- }, scrollVisible);
52
- var S_ContentsContainer2 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n height: 100%;\n width: 672px;\n border-radius: 0 24px 24px 0;\n overflow: hidden;\n\n ", ";\n"], ["\n background-color: ", ";\n height: 100%;\n width: 672px;\n border-radius: 0 24px 24px 0;\n overflow: hidden;\n\n ", ";\n"])), function (_a) {
29
+ }, scrollbarStyle_1.scrollbarStyle);
30
+ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n height: 100%;\n width: 672px;\n border-radius: 0 24px 24px 0;\n overflow: hidden;\n\n ", ";\n"], ["\n background-color: ", ";\n height: 100%;\n width: 672px;\n border-radius: 0 24px 24px 0;\n overflow: hidden;\n\n ", ";\n"])), function (_a) {
53
31
  var theme = _a.theme;
54
32
  return theme.ui_wizard_contentscontainer02_background;
55
33
  }, function (_a) {
56
34
  var containerColor = _a.containerColor;
57
35
  return "background-color: " + containerColor;
58
36
  });
59
- var S_ContentsArea1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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) {
37
+ var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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) {
60
38
  var areaColor = _a.areaColor;
61
39
  return "background-color: " + areaColor;
62
40
  });
63
- var S_ContentsArea2 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 100%;\n\n ", ";\n"], ["\n height: 100%;\n\n ", ";\n"])), function (_a) {
41
+ var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 100%;\n\n ", ";\n"], ["\n height: 100%;\n\n ", ";\n"])), function (_a) {
64
42
  var areaColor = _a.areaColor;
65
43
  return "background-color: " + areaColor;
66
44
  });
67
- var S_Content1 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
68
- var S_Content2 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
45
+ var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
46
+ var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
69
47
  exports.default = WFL;
70
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
48
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSA.js CHANGED
@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var components_1 = require("../../../../../../common/components");
32
+ var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
32
33
  var WSA = function (_a) {
33
34
  var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
34
35
  return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSA", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSA", areaColor: areaColor },
@@ -38,13 +39,13 @@ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (
38
39
  var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
39
40
  return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
40
41
  });
41
- var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n box-sizing: border-box;\n height: 100%;\n min-width: 960px;\n overflow-x: hidden;\n overflow-y: auto;\n padding-left: 24px;\n padding-right: 24px;\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n box-sizing: border-box;\n height: 100%;\n min-width: 960px;\n overflow-x: hidden;\n overflow-y: auto;\n padding-left: 24px;\n padding-right: 24px;\n ", ";\n\n ", "\n"])), function (_a) {
42
+ var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n box-sizing: border-box;\n height: 100%;\n min-width: 960px;\n overflow-x: hidden;\n overflow-y: auto;\n padding-left: 24px;\n padding-right: 24px;\n ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n box-sizing: border-box;\n height: 100%;\n min-width: 960px;\n overflow-x: hidden;\n overflow-y: auto;\n padding-left: 24px;\n padding-right: 24px;\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
42
43
  var theme = _a.theme;
43
44
  return theme.ui_contentscontainer01_background;
44
45
  }, function (_a) {
45
46
  var containerColor = _a.containerColor;
46
47
  return "background-color: " + containerColor;
47
- }, overrideStyleContainer1);
48
+ }, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
48
49
  var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n min-width: 912px;\n padding-bottom: 88px;\n padding-top: 24px;\n ", ";\n"], ["\n box-sizing: border-box;\n min-width: 912px;\n padding-bottom: 88px;\n padding-top: 24px;\n ", ";\n"])), function (_a) {
49
50
  var areaColor = _a.areaColor;
50
51
  return "background-color: " + areaColor;
package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSD.js CHANGED
@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var components_1 = require("../../../../../../common/components");
32
+ var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
32
33
  var WSD = function (_a) {
33
34
  var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
34
35
  return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSD", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSD", areaColor: areaColor },
@@ -38,13 +39,13 @@ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (
38
39
  var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
39
40
  return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
40
41
  });
41
- var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n box-sizing: border-box;\n height: 100%;\n min-width: 960px;\n overflow-x: hidden;\n overflow-y: auto;\n padding-left: 24px;\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n box-sizing: border-box;\n height: 100%;\n min-width: 960px;\n overflow-x: hidden;\n overflow-y: auto;\n padding-left: 24px;\n ", ";\n\n ", "\n"])), function (_a) {
42
+ var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n box-sizing: border-box;\n height: 100%;\n min-width: 960px;\n overflow-x: hidden;\n overflow-y: auto;\n padding-left: 24px;\n ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n box-sizing: border-box;\n height: 100%;\n min-width: 960px;\n overflow-x: hidden;\n overflow-y: auto;\n padding-left: 24px;\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
42
43
  var theme = _a.theme;
43
44
  return theme.ui_contentscontainer01_background;
44
45
  }, function (_a) {
45
46
  var containerColor = _a.containerColor;
46
47
  return "background-color: " + containerColor;
47
- }, overrideStyleContainer1);
48
+ }, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
48
49
  var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n max-width: 720px;\n min-width: 512px;\n padding-bottom: 88px;\n padding-top: 24px;\n width: 53%;\n ", ";\n"], ["\n box-sizing: border-box;\n max-width: 720px;\n min-width: 512px;\n padding-bottom: 88px;\n padding-top: 24px;\n width: 53%;\n ", ";\n"])), function (_a) {
49
50
  var areaColor = _a.areaColor;
50
51
  return "background-color: " + areaColor;
package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSE.js CHANGED
@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var components_1 = require("../../../../../../common/components");
32
+ var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
32
33
  var WSE = function (_a) {
33
34
  var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
34
35
  return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSE", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSE", areaColor: areaColor },
@@ -39,13 +40,13 @@ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (
39
40
  var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
40
41
  return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
41
42
  });
42
- var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n box-sizing: border-box;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n padding-left: 24px;\n padding-right: 24px;\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n box-sizing: border-box;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n padding-left: 24px;\n padding-right: 24px;\n ", ";\n\n ", "\n"])), function (_a) {
43
+ var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n box-sizing: border-box;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n padding-left: 24px;\n padding-right: 24px;\n ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n box-sizing: border-box;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n padding-left: 24px;\n padding-right: 24px;\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
43
44
  var theme = _a.theme;
44
45
  return theme.ui_contentscontainer01_background;
45
46
  }, function (_a) {
46
47
  var containerColor = _a.containerColor;
47
48
  return "background-color: " + containerColor;
48
- }, overrideStyleContainer1);
49
+ }, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
49
50
  var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n padding-bottom: 88px;\n padding-top: 24px;\n ", ";\n"], ["\n box-sizing: border-box;\n display: flex;\n padding-bottom: 88px;\n padding-top: 24px;\n ", ";\n"])), function (_a) {
50
51
  var areaColor = _a.areaColor;
51
52
  return "background-color: " + areaColor;
package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSF.js CHANGED
@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var components_1 = require("../../../../../../common/components");
32
+ var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
32
33
  var WSF = function (_a) {
33
34
  var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
34
35
  return (react_1.default.createElement(S_Box, null,
@@ -46,7 +47,7 @@ var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (
46
47
  return overrideContainer2ColorKey && theme[overrideContainer2ColorKey];
47
48
  });
48
49
  var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n"], ["\n display: flex;\n height: 100%;\n"])));
49
- var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
50
+ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
50
51
  var theme = _a.theme;
51
52
  return theme.ui_contentscontainer01_background;
52
53
  }, function (_a) {
@@ -63,8 +64,8 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (
63
64
  }, function (_a) {
64
65
  var containerColor = _a.containerColor;
65
66
  return "background-color: " + containerColor;
66
- }, overrideStyleContainer1);
67
- var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n flex-grow: 1;\n min-width: 480px;\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n flex-grow: 1;\n min-width: 480px;\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
67
+ }, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
68
+ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n flex-grow: 1;\n min-width: 480px;\n ", ";\n ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n flex-grow: 1;\n min-width: 480px;\n ", ";\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
68
69
  var theme = _a.theme;
69
70
  return theme.ui_contentscontainer02_background;
70
71
  }, function (_a) {
@@ -84,7 +85,7 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (
84
85
  }, function (_a) {
85
86
  var containerColor = _a.containerColor;
86
87
  return "background-color: " + containerColor;
87
- }, overrideStyleContainer2);
88
+ }, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer2);
88
89
  var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-top: 24px;\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n padding-top: 24px;\n ", ";\n ", ";\n"])), function (_a) {
89
90
  var layoutType = _a.layoutType;
90
91
  return ({
package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSG.js CHANGED
@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var components_1 = require("../../../../../../common/components");
32
+ var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
32
33
  var WSG = function (_a) {
33
34
  var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
34
35
  return (react_1.default.createElement(S_Box, null,
@@ -46,7 +47,7 @@ var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (
46
47
  return overrideContainer2ColorKey && theme[overrideContainer2ColorKey];
47
48
  });
48
49
  var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n"], ["\n display: flex;\n height: 100%;\n"])));
49
- var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
50
+ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
50
51
  var theme = _a.theme;
51
52
  return theme.ui_contentscontainer01_background;
52
53
  }, function (_a) {
@@ -61,8 +62,8 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (
61
62
  }, function (_a) {
62
63
  var containerColor = _a.containerColor;
63
64
  return "background-color: " + containerColor;
64
- }, overrideStyleContainer1);
65
- var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
65
+ }, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
66
+ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n min-width: 480px;\n width: 50%;\n ", ";\n ", ";\n\n ", "\n ", "\n"])), function (_a) {
66
67
  var theme = _a.theme;
67
68
  return theme.ui_contentscontainer02_background;
68
69
  }, function (_a) {
@@ -80,7 +81,7 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (
80
81
  }, function (_a) {
81
82
  var containerColor = _a.containerColor;
82
83
  return "background-color: " + containerColor;
83
- }, overrideStyleContainer2);
84
+ }, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer2);
84
85
  var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-top: 24px;\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n padding-top: 24px;\n ", ";\n ", ";\n"])), function (_a) {
85
86
  var layoutType = _a.layoutType;
86
87
  return ({