pds-dev-kit-web 1.4.51 → 1.4.53

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 (26) hide show
  1. package/dist/index.d.ts +2 -2
  2. package/dist/index.js +7 -3
  3. package/dist/src/common/assets/icons/line/PhotoMultiple.d.ts +4 -0
  4. package/dist/src/common/assets/icons/line/PhotoMultiple.js +37 -0
  5. package/dist/src/common/assets/icons/line/Unlock.d.ts +4 -0
  6. package/dist/src/common/assets/icons/line/Unlock.js +36 -0
  7. package/dist/src/common/assets/icons/line/index.d.ts +2 -0
  8. package/dist/src/common/assets/icons/line/index.js +4 -0
  9. package/dist/src/common/index.d.ts +2 -2
  10. package/dist/src/common/index.js +5 -1
  11. package/dist/src/common/styles/index.d.ts +48 -0
  12. package/dist/src/common/styles/index.js +6 -0
  13. package/dist/src/common/styles/theme.d.ts +24 -0
  14. package/dist/src/common/styles/theme.js +27 -3
  15. package/dist/src/common/types/styled-components.d.ts +24 -0
  16. package/dist/src/desktop/components/BasicList/BasicList.d.ts +2 -1
  17. package/dist/src/desktop/components/BasicList/BasicList.js +4 -4
  18. package/dist/src/desktop/components/BasicListItem/BasicListItem.d.ts +4 -1
  19. package/dist/src/desktop/components/BasicListItem/BasicListItem.js +50 -18
  20. package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.js +1 -1
  21. package/dist/src/mobile/components/BasicList/BasicList.d.ts +2 -1
  22. package/dist/src/mobile/components/BasicList/BasicList.js +4 -4
  23. package/dist/src/mobile/components/BasicListItem/BasicListItem.d.ts +3 -1
  24. package/dist/src/mobile/components/BasicListItem/BasicListItem.js +50 -18
  25. package/package.json +1 -1
  26. package/release-note.md +13 -8
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme, theme, Form, PDSIconType, ForwardedRefType } from './src/common';
1
+ import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme, theme, Form, PDSIconType, ForwardedRefType } from './src/common';
2
2
  export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, PDSIconType, ForwardedRefType };
3
- export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme };
3
+ export { fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme };
4
4
  export { theme };
5
5
  export { Form };
6
6
  import { Divider, Icon, ImageView, Spacing, Switch } from './src/hybrid';
package/dist/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeadlessModal = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
4
- exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_DynamicDesktopNavBarTemplates = exports.D_UserDesktopSideTab = exports.D_DynamicDesktopNavBar = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = void 0;
5
- exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileBasicModal = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = void 0;
3
+ exports.D_DesktopTabBar = exports.D_DesktopHeadlessModal = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
4
+ exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_DynamicDesktopNavBarTemplates = exports.D_UserDesktopSideTab = exports.D_DynamicDesktopNavBar = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_Dropdown = void 0;
5
+ exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileBasicModal = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = void 0;
6
6
  /* eslint-disable import/order */
7
7
  /* eslint-disable import/first */
8
8
  // common
@@ -10,8 +10,12 @@ var common_1 = require("./src/common");
10
10
  Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function () { return common_1.fontWeight; } });
11
11
  Object.defineProperty(exports, "desktopFontSize", { enumerable: true, get: function () { return common_1.desktopFontSize; } });
12
12
  Object.defineProperty(exports, "desktopLineHeight", { enumerable: true, get: function () { return common_1.desktopLineHeight; } });
13
+ Object.defineProperty(exports, "desktopEditorFontSize", { enumerable: true, get: function () { return common_1.desktopEditorFontSize; } });
14
+ Object.defineProperty(exports, "desktopEditorLineHeight", { enumerable: true, get: function () { return common_1.desktopEditorLineHeight; } });
13
15
  Object.defineProperty(exports, "mobileFontSize", { enumerable: true, get: function () { return common_1.mobileFontSize; } });
14
16
  Object.defineProperty(exports, "mobileLineHeight", { enumerable: true, get: function () { return common_1.mobileLineHeight; } });
17
+ Object.defineProperty(exports, "mobileEditorFontSize", { enumerable: true, get: function () { return common_1.mobileEditorFontSize; } });
18
+ Object.defineProperty(exports, "mobileEditorLineHeight", { enumerable: true, get: function () { return common_1.mobileEditorLineHeight; } });
15
19
  Object.defineProperty(exports, "boxShadow", { enumerable: true, get: function () { return common_1.boxShadow; } });
16
20
  Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return common_1.spacing; } });
17
21
  Object.defineProperty(exports, "uiColors", { enumerable: true, get: function () { return common_1.uiColors; } });
package/dist/src/common/assets/icons/line/PhotoMultiple.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import IconType from '../IconType';
3
+ declare const PhotoMultiple: ({ color, size, ...rest }: IconType) => JSX.Element;
4
+ export default PhotoMultiple;
package/dist/src/common/assets/icons/line/PhotoMultiple.js ADDED
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ var __importDefault = (this && this.__importDefault) || function (mod) {
25
+ return (mod && mod.__esModule) ? mod : { "default": mod };
26
+ };
27
+ Object.defineProperty(exports, "__esModule", { value: true });
28
+ var react_1 = __importDefault(require("react"));
29
+ var PhotoMultiple = function (_a) {
30
+ var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
31
+ return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
32
+ react_1.default.createElement("g", { fill: "none", fillRule: "evenodd" },
33
+ react_1.default.createElement("path", { stroke: color, strokeLinejoin: "round", strokeWidth: "1.5", d: "M14.5929,21.5165 L5.4069,21.5165 C3.7509,21.5165 2.4069,20.1735 2.4069,18.5165 L2.4069,9.3305 C2.4069,7.6745 3.7509,6.3305 5.4069,6.3305 L14.5929,6.3305 C16.2499,6.3305 17.5929,7.6745 17.5929,9.3305 L17.5929,18.5165 C17.5929,20.1735 16.2499,21.5165 14.5929,21.5165 Z" }),
34
+ react_1.default.createElement("path", { stroke: color, strokeLinejoin: "round", strokeWidth: "1.5", d: "M6.2548,6.3309 L6.2548,5.4839 C6.2548,3.8269 7.5978,2.4839 9.2548,2.4839 L18.4408,2.4839 C20.0968,2.4839 21.4408,3.8269 21.4408,5.4839 L21.4408,14.6689 C21.4408,16.3259 20.0968,17.6689 18.4408,17.6689 L17.5928,17.6689" }),
35
+ react_1.default.createElement("path", { fill: color, d: "M14.6542,10.5486 C14.6542,9.7626 14.0162,9.1246 13.2302,9.1246 C12.4432,9.1246 11.8062,9.7626 11.8062,10.5486 C11.8062,11.3346 12.4432,11.9726 13.2302,11.9726 C14.0162,11.9726 14.6542,11.3346 14.6542,10.5486 M17.5929,15.9679 L15.7049,14.4989 C15.2169,14.1189 14.5379,14.1039 14.0339,14.4619 L12.5149,15.5389 C12.1609,15.7899 11.6809,15.7639 11.3559,15.4759 L8.2279,12.7039 C7.7119,12.2469 6.9399,12.2329 6.4079,12.6709 L2.4069,15.9679 C2.4069,18.0009 2.3169,21.5169 5.4069,21.5169 C8.4979,21.5169 13.0039,21.5899 14.5929,21.5169 C17.9399,21.3619 17.5929,15.9679 17.5929,15.9679" }))));
36
+ };
37
+ exports.default = PhotoMultiple;
package/dist/src/common/assets/icons/line/Unlock.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import IconType from '../IconType';
3
+ declare const Unlock: ({ color, size, ...rest }: IconType) => JSX.Element;
4
+ export default Unlock;
package/dist/src/common/assets/icons/line/Unlock.js ADDED
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ var __importDefault = (this && this.__importDefault) || function (mod) {
25
+ return (mod && mod.__esModule) ? mod : { "default": mod };
26
+ };
27
+ Object.defineProperty(exports, "__esModule", { value: true });
28
+ var react_1 = __importDefault(require("react"));
29
+ var Unlock = function (_a) {
30
+ var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
31
+ return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
32
+ react_1.default.createElement("g", { fill: "none", fillRule: "evenodd" },
33
+ react_1.default.createElement("path", { fill: color, d: "M17.7976,7.2085 C19.6206,7.2085 21.0976,8.6855 21.0976,10.5085 L21.0976,19.2805 C21.0976,21.1025 19.6206,22.5805 17.7976,22.5805 L6.2026,22.5805 C4.3796,22.5805 2.9026,21.1025 2.9026,19.2805 L2.9026,10.5085 C2.9026,8.6855 4.3796,7.2085 6.2026,7.2085 Z M17.7976,8.7085 L6.2026,8.7085 C5.2096,8.7085 4.4026,9.5155 4.4026,10.5085 L4.4026,19.2805 C4.4026,20.2725 5.2096,21.0805 6.2026,21.0805 L17.7976,21.0805 C18.7896,21.0805 19.5976,20.2725 19.5976,19.2805 L19.5976,10.5085 C19.5976,9.5155 18.7896,8.7085 17.7976,8.7085 Z M11.9999,11.2656 C13.1489,11.2656 14.0809,12.1976 14.0809,13.3466 C14.0809,14.16216 13.6113436,14.868392 12.9279209,15.209606 L12.9272,18.1343 C12.9272,18.5543 12.5862,18.8953 12.1662,18.8953 L11.8342,18.8953 C11.4132,18.8953 11.0732,18.5543 11.0732,18.1343 L11.0725463,15.2099389 C10.388762,14.8688516 9.9189,14.1624254 9.9189,13.3466 C9.9189,12.1976 10.8509,11.2656 11.9999,11.2656 Z" }),
34
+ react_1.default.createElement("path", { stroke: color, strokeLinecap: "round", strokeWidth: "1.5", d: "M7.4784,7.8186 L7.4784,5.8946 C7.4784,3.4226 9.2904,1.4196 11.5264,1.4196 L12.4734,1.4196 C13.5094,1.4196 14.4544,1.8496 15.1704,2.5566" }))));
35
+ };
36
+ exports.default = Unlock;
package/dist/src/common/assets/icons/line/index.d.ts CHANGED
@@ -77,6 +77,7 @@ declare const lineIcons: {
77
77
  readonly ic_payment_regularly: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
78
78
  readonly ic_payment_setting: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
79
79
  readonly ic_photo: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
80
+ readonly ic_photo_multiple: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
80
81
  readonly ic_plan: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
81
82
  readonly ic_plus: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
82
83
  readonly ic_plus_circle: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -128,6 +129,7 @@ declare const lineIcons: {
128
129
  readonly ic_toggle_up: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
129
130
  readonly ic_trashcan: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
130
131
  readonly ic_unavailable: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
132
+ readonly ic_unlock: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
131
133
  readonly ic_upload: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
132
134
  readonly ic_video: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
133
135
  readonly ic_videocall: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
package/dist/src/common/assets/icons/line/index.js CHANGED
@@ -80,6 +80,7 @@ var PaymentOnetime_1 = __importDefault(require("./PaymentOnetime"));
80
80
  var PaymentRegularly_1 = __importDefault(require("./PaymentRegularly"));
81
81
  var PaymentSetting_1 = __importDefault(require("./PaymentSetting"));
82
82
  var Photo_1 = __importDefault(require("./Photo"));
83
+ var PhotoMultiple_1 = __importDefault(require("./PhotoMultiple"));
83
84
  var Plan_1 = __importDefault(require("./Plan"));
84
85
  var Plus_1 = __importDefault(require("./Plus"));
85
86
  var PlusCircle_1 = __importDefault(require("./PlusCircle"));
@@ -131,6 +132,7 @@ var ToggleDown_1 = __importDefault(require("./ToggleDown"));
131
132
  var ToggleUp_1 = __importDefault(require("./ToggleUp"));
132
133
  var Trashcan_1 = __importDefault(require("./Trashcan"));
133
134
  var Unavailable_1 = __importDefault(require("./Unavailable"));
135
+ var Unlock_1 = __importDefault(require("./Unlock"));
134
136
  var Upload_1 = __importDefault(require("./Upload"));
135
137
  var Video_1 = __importDefault(require("./Video"));
136
138
  var Videocall_1 = __importDefault(require("./Videocall"));
@@ -226,6 +228,7 @@ var lineIcons = {
226
228
  ic_payment_regularly: PaymentRegularly_1.default,
227
229
  ic_payment_setting: PaymentSetting_1.default,
228
230
  ic_photo: Photo_1.default,
231
+ ic_photo_multiple: PhotoMultiple_1.default,
229
232
  ic_plan: Plan_1.default,
230
233
  ic_plus: Plus_1.default,
231
234
  ic_plus_circle: PlusCircle_1.default,
@@ -277,6 +280,7 @@ var lineIcons = {
277
280
  ic_toggle_up: ToggleUp_1.default,
278
281
  ic_trashcan: Trashcan_1.default,
279
282
  ic_unavailable: Unavailable_1.default,
283
+ ic_unlock: Unlock_1.default,
280
284
  ic_upload: Upload_1.default,
281
285
  ic_video: Video_1.default,
282
286
  ic_videocall: Videocall_1.default,
package/dist/src/common/index.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import { UITheme } from './styles/colorSet/ui-type';
2
2
  import { IFormValues, FillIconNameKeys, LineIconNameKeys, PDSIconType, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, ForwardedRefType } from './types';
3
3
  export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PDSIconType, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, ForwardedRefType };
4
- import { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing } from './styles/theme';
4
+ import { fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing } from './styles/theme';
5
5
  import { uiColors, customTheme } from './styles/ui-colors';
6
- export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme };
6
+ export { fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme };
7
7
  import { theme } from './styles';
8
8
  export { theme };
9
9
  import { Form } from './components';
package/dist/src/common/index.js CHANGED
@@ -2,14 +2,18 @@
2
2
  /* eslint-disable import/order */
3
3
  /* eslint-disable import/first */
4
4
  Object.defineProperty(exports, "__esModule", { value: true });
5
- exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
5
+ exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
6
6
  // theme
7
7
  var theme_1 = require("./styles/theme");
8
8
  Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function () { return theme_1.fontWeight; } });
9
9
  Object.defineProperty(exports, "desktopFontSize", { enumerable: true, get: function () { return theme_1.desktopFontSize; } });
10
10
  Object.defineProperty(exports, "desktopLineHeight", { enumerable: true, get: function () { return theme_1.desktopLineHeight; } });
11
+ Object.defineProperty(exports, "desktopEditorFontSize", { enumerable: true, get: function () { return theme_1.desktopEditorFontSize; } });
12
+ Object.defineProperty(exports, "desktopEditorLineHeight", { enumerable: true, get: function () { return theme_1.desktopEditorLineHeight; } });
11
13
  Object.defineProperty(exports, "mobileFontSize", { enumerable: true, get: function () { return theme_1.mobileFontSize; } });
12
14
  Object.defineProperty(exports, "mobileLineHeight", { enumerable: true, get: function () { return theme_1.mobileLineHeight; } });
15
+ Object.defineProperty(exports, "mobileEditorFontSize", { enumerable: true, get: function () { return theme_1.mobileEditorFontSize; } });
16
+ Object.defineProperty(exports, "mobileEditorLineHeight", { enumerable: true, get: function () { return theme_1.mobileEditorLineHeight; } });
13
17
  Object.defineProperty(exports, "boxShadow", { enumerable: true, get: function () { return theme_1.boxShadow; } });
14
18
  Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return theme_1.spacing; } });
15
19
  var ui_colors_1 = require("./styles/ui-colors");
package/dist/src/common/styles/index.d.ts CHANGED
@@ -30,6 +30,18 @@ export declare const theme: {
30
30
  blog1: string;
31
31
  singleLine: string;
32
32
  };
33
+ desktopEditorFontSize: {
34
+ h1: string;
35
+ h2: string;
36
+ h3: string;
37
+ p: string;
38
+ };
39
+ desktopEditorLineHeight: {
40
+ h1: string;
41
+ h2: string;
42
+ h3: string;
43
+ p: string;
44
+ };
33
45
  mobileFontSize: {
34
46
  displayHeading: string;
35
47
  heading: string;
@@ -57,5 +69,41 @@ export declare const theme: {
57
69
  blog1: string;
58
70
  singleLine: string;
59
71
  };
72
+ mobileEditorFontSize: {
73
+ h1: string;
74
+ h2: string;
75
+ h3: string;
76
+ p: string;
77
+ };
78
+ mobileEditorLineHeight: {
79
+ h1: string;
80
+ h2: string;
81
+ h3: string;
82
+ p: string;
83
+ };
84
+ boxShadow: {
85
+ elevation0: string;
86
+ elevation1: string;
87
+ elevation2: string;
88
+ elevation3: string;
89
+ elevation4: string;
90
+ elevation5: string;
91
+ };
92
+ spacing: {
93
+ spacingA: string;
94
+ spacingB: string;
95
+ spacingC: string;
96
+ spacingD: string;
97
+ spacingE: string;
98
+ spacingF: string;
99
+ spacingG: string;
100
+ spacingH: string;
101
+ spacingI: string;
102
+ spacingJ: string;
103
+ spacingK: string;
104
+ spacingL: string;
105
+ spacingM: string;
106
+ spacingN: string;
107
+ };
60
108
  uiColors: import("..").UITheme;
61
109
  };
package/dist/src/common/styles/index.js CHANGED
@@ -7,7 +7,13 @@ exports.theme = {
7
7
  fontWeight: theme_1.fontWeight,
8
8
  desktopFontSize: theme_1.desktopFontSize,
9
9
  desktopLineHeight: theme_1.desktopLineHeight,
10
+ desktopEditorFontSize: theme_1.desktopEditorFontSize,
11
+ desktopEditorLineHeight: theme_1.desktopEditorLineHeight,
10
12
  mobileFontSize: theme_1.mobileFontSize,
11
13
  mobileLineHeight: theme_1.mobileLineHeight,
14
+ mobileEditorFontSize: theme_1.mobileEditorFontSize,
15
+ mobileEditorLineHeight: theme_1.mobileEditorLineHeight,
16
+ boxShadow: theme_1.boxShadow,
17
+ spacing: theme_1.spacing,
12
18
  uiColors: ui_colors_1.uiColors
13
19
  };
package/dist/src/common/styles/theme.d.ts CHANGED
@@ -30,6 +30,18 @@ export declare const desktopLineHeight: {
30
30
  blog1: string;
31
31
  singleLine: string;
32
32
  };
33
+ export declare const desktopEditorFontSize: {
34
+ h1: string;
35
+ h2: string;
36
+ h3: string;
37
+ p: string;
38
+ };
39
+ export declare const desktopEditorLineHeight: {
40
+ h1: string;
41
+ h2: string;
42
+ h3: string;
43
+ p: string;
44
+ };
33
45
  export declare const mobileFontSize: {
34
46
  displayHeading: string;
35
47
  heading: string;
@@ -57,6 +69,18 @@ export declare const mobileLineHeight: {
57
69
  blog1: string;
58
70
  singleLine: string;
59
71
  };
72
+ export declare const mobileEditorFontSize: {
73
+ h1: string;
74
+ h2: string;
75
+ h3: string;
76
+ p: string;
77
+ };
78
+ export declare const mobileEditorLineHeight: {
79
+ h1: string;
80
+ h2: string;
81
+ h3: string;
82
+ p: string;
83
+ };
60
84
  export declare const boxShadow: {
61
85
  elevation0: string;
62
86
  elevation1: string;
package/dist/src/common/styles/theme.js CHANGED
@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.themeByGivenTone = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
14
+ exports.themeByGivenTone = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
15
15
  var ui_colors_1 = require("./ui-colors");
16
16
  exports.fontWeight = {
17
17
  normal: '500',
@@ -44,6 +44,18 @@ exports.desktopLineHeight = {
44
44
  blog1: '1.6',
45
45
  singleLine: '1'
46
46
  };
47
+ exports.desktopEditorFontSize = {
48
+ h1: '38px',
49
+ h2: '30px',
50
+ h3: '24px',
51
+ p: '18px'
52
+ };
53
+ exports.desktopEditorLineHeight = {
54
+ h1: '1.5',
55
+ h2: '1.5',
56
+ h3: '1.5',
57
+ p: '1.8'
58
+ };
47
59
  exports.mobileFontSize = {
48
60
  displayHeading: '32px',
49
61
  heading: '24px',
@@ -71,6 +83,18 @@ exports.mobileLineHeight = {
71
83
  blog1: '1.6',
72
84
  singleLine: '1'
73
85
  };
86
+ exports.mobileEditorFontSize = {
87
+ h1: '38px',
88
+ h2: '30px',
89
+ h3: '24px',
90
+ p: '18px'
91
+ };
92
+ exports.mobileEditorLineHeight = {
93
+ h1: '1.5',
94
+ h2: '1.5',
95
+ h3: '1.5',
96
+ p: '1.8'
97
+ };
74
98
  exports.boxShadow = {
75
99
  elevation0: '0 0 0 0 #0003',
76
100
  elevation1: '0 2px 8px 0 #0003',
@@ -95,7 +119,7 @@ exports.spacing = {
95
119
  spacingM: '288px',
96
120
  spacingN: '320px'
97
121
  };
98
- var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
99
- var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, ui_colors_1.customTheme)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing })); };
122
+ var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
123
+ var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, ui_colors_1.customTheme)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing })); };
100
124
  exports.themeByGivenTone = themeByGivenTone;
101
125
  exports.default = theme;
package/dist/src/common/types/styled-components.d.ts CHANGED
@@ -31,6 +31,18 @@ export interface PdsDevKitTheme {
31
31
  blog1: '1.6';
32
32
  singleLine: '1';
33
33
  };
34
+ desktopEditorFontSize: {
35
+ h1: '38px';
36
+ h2: '30px';
37
+ h3: '24px';
38
+ p: '18px';
39
+ };
40
+ desktopEditorLineHeight: {
41
+ h1: '1.5';
42
+ h2: '1.5';
43
+ h3: '1.5';
44
+ p: '1.8';
45
+ };
34
46
  mobileFontSize: {
35
47
  displayHeading: '32px';
36
48
  heading: '24px';
@@ -58,6 +70,18 @@ export interface PdsDevKitTheme {
58
70
  blog1: '1.6';
59
71
  singleLine: '1';
60
72
  };
73
+ mobileEditorFontSize: {
74
+ h1: '38px';
75
+ h2: '30px';
76
+ h3: '24px';
77
+ p: '18px';
78
+ };
79
+ mobileEditorLineHeight: {
80
+ h1: '1.5';
81
+ h2: '1.5';
82
+ h3: '1.5';
83
+ p: '1.8';
84
+ };
61
85
  boxShadow: {
62
86
  elevation0: '0 0 0 0 #0003';
63
87
  elevation1: '0 2px 8px 0 #0003';
package/dist/src/desktop/components/BasicList/BasicList.d.ts CHANGED
@@ -8,6 +8,7 @@ declare type BasicListProps = {
8
8
  columns?: 1 | 2 | 3 | 4 | 5 | 6;
9
9
  columnSpacing?: 0 | 16 | 24;
10
10
  rowSpacing?: 0 | 24 | 32 | 48 | 64;
11
+ spacingMode?: 'none' | 'use';
11
12
  };
12
- declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing }: BasicListProps): JSX.Element;
13
+ declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing, spacingMode }: BasicListProps): JSX.Element;
13
14
  export default BasicList;
package/dist/src/desktop/components/BasicList/BasicList.js CHANGED
@@ -12,9 +12,9 @@ var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var hybrid_1 = require("../../../hybrid");
13
13
  var TextLabel_1 = require("../TextLabel");
14
14
  function BasicList(_a) {
15
- var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e;
15
+ var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e, _f = _a.spacingMode, spacingMode = _f === void 0 ? 'use' : _f;
16
16
  return (react_1.default.createElement(react_1.default.Fragment, null,
17
- (titleText || captionText) && (react_1.default.createElement(S_TitleBox, null,
17
+ (titleText || captionText) && (react_1.default.createElement(S_TitleBox, { spacingMode: spacingMode },
18
18
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme }),
19
19
  titleText && captionText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }),
20
20
  captionText && react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "body2Regular" }))),
@@ -24,8 +24,8 @@ var S_TitleBox = styled_components_1.default.div(templateObject_1 || (templateOb
24
24
  var theme = _a.theme;
25
25
  return "" + theme.spacing.spacingD;
26
26
  }, function (_a) {
27
- var theme = _a.theme;
28
- return "0 " + theme.spacing.spacingE;
27
+ var spacingMode = _a.spacingMode, theme = _a.theme;
28
+ return spacingMode === 'use' && "0 " + theme.spacing.spacingE;
29
29
  });
30
30
  var S_BasicListWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n column-gap: ", ";\n display: grid;\n grid-template-columns: ", ";\n row-gap: ", ";\n"], ["\n column-gap: ", ";\n display: grid;\n grid-template-columns: ", ";\n row-gap: ", ";\n"])), function (_a) {
31
31
  var columnSpacing = _a.columnSpacing;
package/dist/src/desktop/components/BasicListItem/BasicListItem.d.ts CHANGED
@@ -28,6 +28,7 @@ export declare type BasicListItemProps = {
28
28
  switchName?: string;
29
29
  switchState?: 'normal' | 'disabled';
30
30
  switchStatus?: 'off' | 'on';
31
+ spacingMode?: 'none' | 'use';
31
32
  onClick?: () => void;
32
33
  onClickIBtn1?: () => void;
33
34
  onClickIBtn2?: () => void;
@@ -42,6 +43,8 @@ export declare type StyleProps = {
42
43
  badgeStatus?: 'cancel' | 'active' | 'inactive';
43
44
  imageIconMode?: 'none' | 'image' | 'icon';
44
45
  displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
46
+ hasOnClick?: boolean;
47
+ spacingMode?: 'none' | 'use';
45
48
  };
46
- declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
49
+ declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
47
50
  export default BasicListItem;
package/dist/src/desktop/components/BasicListItem/BasicListItem.js CHANGED
@@ -17,7 +17,7 @@ var MainButton_1 = require("../MainButton");
17
17
  var Radio_1 = require("../Radio");
18
18
  var TextLabel_1 = require("../TextLabel");
19
19
  function BasicListItem(_a) {
20
- var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch;
20
+ var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, _s = _a.spacingMode, spacingMode = _s === void 0 ? 'use' : _s, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch;
21
21
  var methods = (0, react_hook_form_1.useFormContext)();
22
22
  var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
23
23
  var handleCheckBoxClick = function (e) {
@@ -84,23 +84,52 @@ function BasicListItem(_a) {
84
84
  }
85
85
  }
86
86
  };
87
- return (react_1.default.createElement(S_BasicListItem, { displayType: displayType, selectionMode: selectionMode, isSelected: isSelected, onClick: handleClick },
88
- react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText },
87
+ var isBadgeLeftSpacingChecker = function (value) {
88
+ if (spacingMode !== value || selectionMode !== value) {
89
+ return true;
90
+ }
91
+ return false;
92
+ };
93
+ var isImageIconLeftSpacingChecker = function (value) {
94
+ if (selectionMode !== value ||
95
+ badgeMode !== value ||
96
+ (selectionMode === value && badgeMode === value && spacingMode !== value)) {
97
+ return true;
98
+ }
99
+ return false;
100
+ };
101
+ var isTextLabelLeftSpacingChecker = function (value) {
102
+ if (selectionMode !== value ||
103
+ badgeMode !== value ||
104
+ imageIconMode !== value ||
105
+ (selectionMode && badgeMode && imageIconMode && spacingMode) !== value) {
106
+ return true;
107
+ }
108
+ return false;
109
+ };
110
+ var isRightSpacingChecker = function (value) {
111
+ if (spacingMode === value) {
112
+ return false;
113
+ }
114
+ return true;
115
+ };
116
+ return (react_1.default.createElement(S_BasicListItem, { displayType: displayType, selectionMode: selectionMode, isSelected: isSelected, onClick: handleClick, hasOnClick: !!onClick, spacingMode: spacingMode },
117
+ react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode },
89
118
  react_1.default.createElement(S_LeftBox, null,
90
119
  selectionMode !== 'none' && (react_1.default.createElement(S_SelectionBoxWrapper, { selectionMode: selectionMode },
91
120
  selectionMode === 'check' && checkboxId && (react_1.default.createElement(Checkbox_1.Checkbox, { name: checkboxId.toString(), state: "normal", onChange: handleCheckBoxClick })),
92
121
  selectionMode === 'radio' && radioValue && radioId && (react_1.default.createElement(Radio_1.Radio, { name: radioId, value: radioValue, onChange: handleRadioClick, checked: radioId === radioValue })))),
93
122
  badgeMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
94
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
123
+ isBadgeLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
95
124
  react_1.default.createElement(S_Badge, { badgeStatus: badgeStatus }))),
96
125
  imageIconMode === 'image' && (react_1.default.createElement(react_1.default.Fragment, null,
97
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
126
+ isImageIconLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
98
127
  react_1.default.createElement(hybrid_1.ImageView, { width: 40, height: 40, src: imageSrc, scaleType: "cover", shapeType: imageShapeType }))),
99
128
  imageIconMode === 'icon' && (react_1.default.createElement(react_1.default.Fragment, null,
100
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
129
+ isImageIconLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
101
130
  react_1.default.createElement(S_IconWrapper, null,
102
131
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, fillType: iconFillType, size: 24, colorKey: "ui_cpnt_list_icon_02" })))),
103
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
132
+ isTextLabelLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
104
133
  react_1.default.createElement(S_TextBox, null,
105
134
  react_1.default.createElement(S_TextWrapper, null,
106
135
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', styleTheme: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular', singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })),
@@ -111,7 +140,7 @@ function BasicListItem(_a) {
111
140
  react_1.default.createElement(S_RightBox, { displayType: displayType },
112
141
  (displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
113
142
  react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
114
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
143
+ isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
115
144
  (displayType === 'ibtn_amount1' ||
116
145
  displayType === 'ibtn_amount2' ||
117
146
  displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -119,19 +148,19 @@ function BasicListItem(_a) {
119
148
  react_1.default.createElement(S_IconWrapper, null, iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click, iconColorKey: "ui_cpnt_button_icon_default" }))))),
120
149
  displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
121
150
  react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onClick: handleMBtnClick }),
122
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
151
+ isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
123
152
  displayType === 'switch' && switchName && (react_1.default.createElement(S_SwitchWrapper, null,
124
153
  react_1.default.createElement(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }),
125
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
126
- react_1.default.createElement(S_DividerWrapper, null, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
154
+ isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
155
+ react_1.default.createElement(S_DividerWrapper, { spacingMode: spacingMode }, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
127
156
  }
128
157
  var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n cursor: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n cursor: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: ", ";\n"])), function (_a) {
129
158
  var theme = _a.theme, isSelected = _a.isSelected;
130
159
  return isSelected ? theme.ui_cpnt_list_base_area_select : theme.ui_cpnt_list_base_area;
131
160
  }, function (_a) {
132
- var displayType = _a.displayType, selectionMode = _a.selectionMode, onClick = _a.onClick;
161
+ var displayType = _a.displayType, selectionMode = _a.selectionMode, hasOnClick = _a.hasOnClick;
133
162
  if (displayType === 'ibtn_amount1' || displayType === 'ibtn_text' || displayType === 'none') {
134
- if (onClick) {
163
+ if (hasOnClick) {
135
164
  return 'pointer';
136
165
  }
137
166
  }
@@ -140,15 +169,15 @@ var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templa
140
169
  }
141
170
  return 'default';
142
171
  }, function (_a) {
143
- var theme = _a.theme;
144
- return "0 " + theme.spacing.spacingC;
172
+ var spacingMode = _a.spacingMode, theme = _a.theme;
173
+ return spacingMode === 'use' && "0 " + theme.spacing.spacingC;
145
174
  });
146
175
  var S_BasicListItemBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: ", ";\n padding: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n height: ", ";\n padding: ", ";\n width: 100%;\n"])), function (_a) {
147
176
  var imageIconMode = _a.imageIconMode, captionText = _a.captionText;
148
177
  return imageIconMode === 'image' || captionText ? '80px' : '56px';
149
178
  }, function (_a) {
150
- var theme = _a.theme;
151
- return "0 " + theme.spacing.spacingC;
179
+ var spacingMode = _a.spacingMode, theme = _a.theme;
180
+ return spacingMode === 'use' && "0 " + theme.spacing.spacingC;
152
181
  });
153
182
  var S_LeftBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex: 7;\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex: 7;\n width: 100%;\n"])));
154
183
  var S_SelectionBoxWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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"])));
@@ -169,6 +198,9 @@ var S_RightBox = styled_components_1.default.div(templateObject_9 || (templateOb
169
198
  return (displayType === 'text' ? '40px' : 'auto');
170
199
  });
171
200
  var S_SwitchWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n min-width: 68px;\n min-height: 32px;\n position: relative;\n right: 0;\n"], ["\n display: flex;\n justify-content: flex-end;\n min-width: 68px;\n min-height: 32px;\n position: relative;\n right: 0;\n"])));
172
- var S_DividerWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: calc(100% - 24px);\n"], ["\n width: calc(100% - 24px);\n"])));
201
+ var S_DividerWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
202
+ var spacingMode = _a.spacingMode;
203
+ return (spacingMode !== 'none' ? 'calc(100% - 24px)' : '100%');
204
+ });
173
205
  exports.default = BasicListItem;
174
206
  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/layout/LayoutWF/ContainersBox/ContainersBox.js CHANGED
@@ -73,7 +73,7 @@ var ContainersBox = function (_a) {
73
73
  var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
74
74
  var S_TopWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
75
75
  var S_BottomBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n overflow: hidden;\n align-items: flex-start;\n display: flex;\n"], ["\n flex: 1;\n overflow: hidden;\n align-items: flex-start;\n display: flex;\n"])));
76
- var S_RightBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex: 1;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex: 1;\n flex-direction: column;\n height: 100%;\n"])));
76
+ var S_RightBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex: 1;\n flex-direction: column;\n height: 100%;\n max-width: 100%;\n"], ["\n display: flex;\n flex: 1;\n flex-direction: column;\n height: 100%;\n max-width: 100%;\n"])));
77
77
  var S_ContentsWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n flex: 1;\n overflow: hidden;\n"], ["\n flex: 1;\n overflow: hidden;\n"])));
78
78
  exports.default = ContainersBox;
79
79
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/src/mobile/components/BasicList/BasicList.d.ts CHANGED
@@ -8,6 +8,7 @@ declare type BasicListProps = {
8
8
  columns?: 1 | 2 | 3 | 4 | 5 | 6;
9
9
  columnSpacing?: 0 | 16 | 24;
10
10
  rowSpacing?: 0 | 24 | 32 | 48 | 64;
11
+ spacingMode?: 'none' | 'use';
11
12
  };
12
- declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing }: BasicListProps): JSX.Element;
13
+ declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing, spacingMode }: BasicListProps): JSX.Element;
13
14
  export default BasicList;
package/dist/src/mobile/components/BasicList/BasicList.js CHANGED
@@ -12,9 +12,9 @@ var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var hybrid_1 = require("../../../hybrid");
13
13
  var TextLabel_1 = require("../TextLabel");
14
14
  function BasicList(_a) {
15
- var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e;
15
+ var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e, _f = _a.spacingMode, spacingMode = _f === void 0 ? 'use' : _f;
16
16
  return (react_1.default.createElement(react_1.default.Fragment, null,
17
- (titleText || captionText) && (react_1.default.createElement(S_TitleBox, null,
17
+ (titleText || captionText) && (react_1.default.createElement(S_TitleBox, { spacingMode: spacingMode },
18
18
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme }),
19
19
  titleText && captionText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }),
20
20
  captionText && react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "body2Regular" }))),
@@ -24,8 +24,8 @@ var S_TitleBox = styled_components_1.default.div(templateObject_1 || (templateOb
24
24
  var theme = _a.theme;
25
25
  return "" + theme.spacing.spacingD;
26
26
  }, function (_a) {
27
- var theme = _a.theme;
28
- return "0 " + theme.spacing.spacingE;
27
+ var spacingMode = _a.spacingMode, theme = _a.theme;
28
+ return spacingMode === 'use' && "0 " + theme.spacing.spacingE;
29
29
  });
30
30
  var S_BasicListWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n column-gap: ", ";\n display: grid;\n grid-template-columns: ", ";\n row-gap: ", ";\n"], ["\n column-gap: ", ";\n display: grid;\n grid-template-columns: ", ";\n row-gap: ", ";\n"])), function (_a) {
31
31
  var columnSpacing = _a.columnSpacing;
package/dist/src/mobile/components/BasicListItem/BasicListItem.d.ts CHANGED
@@ -28,6 +28,7 @@ export declare type BasicListItemProps = {
28
28
  switchName?: string;
29
29
  switchState?: 'normal' | 'disabled';
30
30
  switchStatus?: 'off' | 'on';
31
+ spacingMode?: 'none' | 'use';
31
32
  onClick?: () => void;
32
33
  onClickIBtn1?: () => void;
33
34
  onClickIBtn2?: () => void;
@@ -42,6 +43,7 @@ export declare type StyleProps = {
42
43
  badgeStatus?: 'cancel' | 'active' | 'inactive';
43
44
  imageIconMode?: 'none' | 'image' | 'icon';
44
45
  displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
46
+ spacingMode?: 'none' | 'use';
45
47
  };
46
- declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
48
+ declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
47
49
  export default BasicListItem;
package/dist/src/mobile/components/BasicListItem/BasicListItem.js CHANGED
@@ -17,7 +17,7 @@ var MainButton_1 = require("../MainButton");
17
17
  var Radio_1 = require("../Radio");
18
18
  var TextLabel_1 = require("../TextLabel");
19
19
  function BasicListItem(_a) {
20
- var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
20
+ var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, _s = _a.spacingMode, spacingMode = _s === void 0 ? 'use' : _s, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
21
21
  var methods = (0, react_hook_form_1.useFormContext)();
22
22
  var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
23
23
  var handleCheckBoxClick = function (e) {
@@ -84,23 +84,52 @@ function BasicListItem(_a) {
84
84
  }
85
85
  }
86
86
  };
87
- return (react_1.default.createElement(S_BasicListItem, { isSelected: isSelected, onClick: handleClick },
88
- react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText },
87
+ var isBadgeLeftSpacingChecker = function (value) {
88
+ if (spacingMode !== value || selectionMode !== value) {
89
+ return true;
90
+ }
91
+ return false;
92
+ };
93
+ var isImageIconLeftSpacingChecker = function (value) {
94
+ if (selectionMode !== value ||
95
+ badgeMode !== value ||
96
+ (selectionMode === value && badgeMode === value && spacingMode !== value)) {
97
+ return true;
98
+ }
99
+ return false;
100
+ };
101
+ var isTextLabelLeftSpacingChecker = function (value) {
102
+ if (selectionMode !== value ||
103
+ badgeMode !== value ||
104
+ imageIconMode !== value ||
105
+ (selectionMode && badgeMode && imageIconMode && spacingMode) !== value) {
106
+ return true;
107
+ }
108
+ return false;
109
+ };
110
+ var isRightSpacingChecker = function (value) {
111
+ if (spacingMode === value) {
112
+ return false;
113
+ }
114
+ return true;
115
+ };
116
+ return (react_1.default.createElement(S_BasicListItem, { isSelected: isSelected, onClick: handleClick, spacingMode: spacingMode },
117
+ react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode },
89
118
  react_1.default.createElement(S_LeftBox, null,
90
- selectionMode !== 'none' && checkboxId && (react_1.default.createElement(S_SelectionBoxWrapper, { selectionMode: selectionMode },
91
- selectionMode === 'check' && (react_1.default.createElement(Checkbox_1.Checkbox, { name: checkboxId.toString(), state: "normal", onChange: handleCheckBoxClick })),
119
+ selectionMode !== 'none' && (react_1.default.createElement(S_SelectionBoxWrapper, { selectionMode: selectionMode },
120
+ selectionMode === 'check' && checkboxId && (react_1.default.createElement(Checkbox_1.Checkbox, { name: checkboxId.toString(), state: "normal", onChange: handleCheckBoxClick })),
92
121
  selectionMode === 'radio' && radioValue && radioId && (react_1.default.createElement(Radio_1.Radio, { name: radioId, value: radioValue, onChange: handleRadioClick, checked: radioId === radioValue })))),
93
122
  badgeMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
94
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
123
+ isBadgeLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
95
124
  react_1.default.createElement(S_Badge, { badgeStatus: badgeStatus }))),
96
125
  imageIconMode === 'image' && (react_1.default.createElement(react_1.default.Fragment, null,
97
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
126
+ isImageIconLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
98
127
  react_1.default.createElement(hybrid_1.ImageView, { width: 40, height: 40, src: imageSrc, scaleType: "cover", shapeType: imageShapeType }))),
99
128
  imageIconMode === 'icon' && (react_1.default.createElement(react_1.default.Fragment, null,
100
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
129
+ isImageIconLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
101
130
  react_1.default.createElement(S_IconWrapper, null,
102
131
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, fillType: iconFillType, size: 24, colorKey: "ui_cpnt_list_icon_02" })))),
103
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
132
+ isTextLabelLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
104
133
  react_1.default.createElement(S_TextBox, null,
105
134
  react_1.default.createElement(S_TextWrapper, null,
106
135
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', styleTheme: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular', singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })),
@@ -111,7 +140,7 @@ function BasicListItem(_a) {
111
140
  react_1.default.createElement(S_RightBox, { displayType: displayType },
112
141
  (displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
113
142
  react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
114
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
143
+ isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
115
144
  (displayType === 'ibtn_amount1' ||
116
145
  displayType === 'ibtn_amount2' ||
117
146
  displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -119,25 +148,25 @@ function BasicListItem(_a) {
119
148
  react_1.default.createElement(S_IconWrapper, null, iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click, iconColorKey: "ui_cpnt_button_icon_default" }))))),
120
149
  displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
121
150
  react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onMouseDown: handleMBtnClick }),
122
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
151
+ isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
123
152
  displayType === 'switch' && switchName && (react_1.default.createElement(S_SwitchWrapper, null,
124
153
  react_1.default.createElement(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }),
125
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
126
- react_1.default.createElement(S_DividerWrapper, null, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
154
+ isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
155
+ react_1.default.createElement(S_DividerWrapper, { spacingMode: spacingMode }, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
127
156
  }
128
157
  var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: ", ";\n"])), function (_a) {
129
158
  var theme = _a.theme, isSelected = _a.isSelected;
130
159
  return isSelected ? theme.ui_cpnt_list_base_area_select : theme.ui_cpnt_list_base_area;
131
160
  }, function (_a) {
132
- var theme = _a.theme;
133
- return "0 " + theme.spacing.spacingC;
161
+ var spacingMode = _a.spacingMode, theme = _a.theme;
162
+ return spacingMode === 'use' && "0 " + theme.spacing.spacingC;
134
163
  });
135
164
  var S_BasicListItemBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: ", ";\n padding: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n height: ", ";\n padding: ", ";\n width: 100%;\n"])), function (_a) {
136
165
  var imageIconMode = _a.imageIconMode, captionText = _a.captionText;
137
166
  return imageIconMode === 'image' || captionText ? '80px' : '56px';
138
167
  }, function (_a) {
139
- var theme = _a.theme;
140
- return "0 " + theme.spacing.spacingC;
168
+ var spacingMode = _a.spacingMode, theme = _a.theme;
169
+ return spacingMode === 'use' && "0 " + theme.spacing.spacingC;
141
170
  });
142
171
  var S_LeftBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex: 7;\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex: 7;\n width: 100%;\n"])));
143
172
  var S_SelectionBoxWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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"])));
@@ -158,6 +187,9 @@ var S_RightBox = styled_components_1.default.div(templateObject_9 || (templateOb
158
187
  return (displayType === 'text' ? '40px' : 'auto');
159
188
  });
160
189
  var S_SwitchWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n min-width: 68px;\n min-height: 32px;\n position: relative;\n right: 0;\n"], ["\n display: flex;\n justify-content: flex-end;\n min-width: 68px;\n min-height: 32px;\n position: relative;\n right: 0;\n"])));
161
- var S_DividerWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: calc(100% - 24px);\n"], ["\n width: calc(100% - 24px);\n"])));
190
+ var S_DividerWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
191
+ var spacingMode = _a.spacingMode;
192
+ return (spacingMode !== 'none' ? 'calc(100% - 24px)' : '100%');
193
+ });
162
194
  exports.default = BasicListItem;
163
195
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.4.51",
3
+ "version": "1.4.53",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,11 +1,16 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.4.51]
2
+ ## [v1.4.53]
3
3
 
4
- ### Component
5
- * AdminList
6
- * headerRowCheckboxName prop 추가
7
- * AdminListItem
8
- * ref 추가
4
+ ### Package
5
+ * theme에 editor text 관련 값 추가
6
+ * desktopEditorFontSize
7
+ * desktopEditorLineHeight
8
+ * mobileEditorFontSize
9
+ * mobileEditorLineHeight
9
10
 
10
- ### Color
11
- * 컬러 키 값 22.09.15 14시 55분 기준 싱크
11
+ ### Component
12
+ * BasicList
13
+ * spacingMode props 추가
14
+ * BasicListItem
15
+ * spacingMode props 추가
16
+ * 액션이 없는 경우에도 커서가 포인터로 나타나는 문제 해결