pds-dev-kit-web 1.4.37 → 1.4.40

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.
@@ -150,11 +150,11 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_7 || (te
150
150
  });
151
151
  var S_RightBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
152
152
  var S_ChatBubbleBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
153
- var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n justify-content: end;\n"], ["\n justify-content: end;\n"])));
153
+ var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
154
154
  var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n\n ", ";\n"], ["\n flex: 1;\n display: flex;\n\n ", ";\n"])), function (_a) {
155
155
  var isMy = _a.isMy;
156
156
  return isMy && MyChatBubble;
157
157
  });
158
- var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-self: end;\n display: flex;\n"], ["\n align-self: end;\n display: flex;\n"])));
158
+ var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
159
159
  exports.default = ChatBubbleListItem;
160
160
  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;
@@ -22,7 +22,7 @@ function ChatTextField(_a) {
22
22
  }
23
23
  };
24
24
  return (react_1.default.createElement(react_1.default.Fragment, null,
25
- react_1.default.createElement(S_FooterContentWrapper, null,
25
+ react_1.default.createElement(S_FooterContentWrapper, { footerIBtn2IconName: footerIBtn2IconName, footerIBtn3IconName: footerIBtn3IconName },
26
26
  footerIBtn3IconName && (react_1.default.createElement(react_1.default.Fragment, null, footerIBtn3Type === 'button' ? (react_1.default.createElement(IconButton_1.IconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
27
27
  ? 'ui_cpnt_button_icon_primary'
28
28
  : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, onClick: onClickFooterIBtn3 })) : (react_1.default.createElement(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
@@ -43,8 +43,10 @@ function ChatTextField(_a) {
43
43
  react_1.default.createElement(IconButton_1.IconButton, { iconName: submitIBtnIconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: isSubmitBtnActive ? 'ui_cpnt_button_icon_primary' : 'ui_cpnt_button_icon_disabled', iconFillType: submitIBtnIconFillType, iconSize: 24, type: "submit", state: isSubmitBtnActive ? 'normal' : 'disabled' }))));
44
44
  }
45
45
  var S_FooterContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
46
- var theme = _a.theme;
47
- return theme.spacing.spacingE;
46
+ var theme = _a.theme, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn3IconName = _a.footerIBtn3IconName;
47
+ return footerIBtn2IconName || footerIBtn3IconName
48
+ ? "" + theme.spacing.spacingC
49
+ : "" + theme.spacing.spacingE;
48
50
  }, function (_a) {
49
51
  var theme = _a.theme;
50
52
  return theme.spacing.spacingC;
@@ -26,13 +26,13 @@ function Header(_a) {
26
26
  var styleTheme = _a.styleTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1;
27
27
  return (react_1.default.createElement(S_HeaderContentWrapper, null,
28
28
  react_1.default.createElement(S_HeaderLeftBox, null,
29
- titleText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[styleTheme] })),
29
+ titleText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[styleTheme], wordBreak: "break_all" })),
30
30
  descText && (react_1.default.createElement(react_1.default.Fragment, null,
31
31
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c" }),
32
- react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined }))),
32
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" }))),
33
33
  captionText && (react_1.default.createElement(react_1.default.Fragment, null,
34
34
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
35
- react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined })))),
35
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" })))),
36
36
  headerDisplayType === 'ibtn1' && headerIBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[styleTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))));
37
37
  }
38
38
  var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
@@ -30,7 +30,7 @@ function ContextMenuItemNavBox(_a) {
30
30
  menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), isContextMenu: true })),
31
31
  menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { openNewTab: true, isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
32
32
  menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(InternalLinkMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
33
- menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }) }))));
33
+ menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }) }))));
34
34
  }
35
35
  var S_ContextMenuItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n cursor: pointer;\n display: flex;\n height: 32px;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n align-items: center;\n background-color: ", ";\n cursor: pointer;\n display: flex;\n height: 32px;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
36
36
  var theme = _a.theme;
@@ -150,11 +150,11 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_7 || (te
150
150
  });
151
151
  var S_RightBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
152
152
  var S_ChatBubbleBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
153
- var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n justify-content: end;\n"], ["\n justify-content: end;\n"])));
153
+ var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
154
154
  var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n\n ", ";\n"], ["\n flex: 1;\n display: flex;\n\n ", ";\n"])), function (_a) {
155
155
  var isMy = _a.isMy;
156
156
  return isMy && MyChatBubble;
157
157
  });
158
- var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-self: end;\n display: flex;\n"], ["\n align-self: end;\n display: flex;\n"])));
158
+ var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
159
159
  exports.default = ChatBubbleListItem;
160
160
  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;
@@ -22,7 +22,7 @@ function ChatTextField(_a) {
22
22
  }
23
23
  };
24
24
  return (react_1.default.createElement(react_1.default.Fragment, null,
25
- react_1.default.createElement(S_FooterContentWrapper, null,
25
+ react_1.default.createElement(S_FooterContentWrapper, { footerIBtn2IconName: footerIBtn2IconName, footerIBtn3IconName: footerIBtn3IconName },
26
26
  footerIBtn3IconName && (react_1.default.createElement(react_1.default.Fragment, null, footerIBtn3Type === 'button' ? (react_1.default.createElement(IconButton_1.IconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
27
27
  ? 'ui_cpnt_button_icon_primary'
28
28
  : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, onClick: onClickFooterIBtn3 })) : (react_1.default.createElement(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
@@ -43,8 +43,10 @@ function ChatTextField(_a) {
43
43
  react_1.default.createElement(IconButton_1.IconButton, { iconName: submitIBtnIconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: isSubmitBtnActive ? 'ui_cpnt_button_icon_primary' : 'ui_cpnt_button_icon_disabled', iconFillType: submitIBtnIconFillType, iconSize: 24, type: "submit", state: isSubmitBtnActive ? 'normal' : 'disabled' }))));
44
44
  }
45
45
  var S_FooterContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
46
- var theme = _a.theme;
47
- return theme.spacing.spacingE;
46
+ var theme = _a.theme, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn3IconName = _a.footerIBtn3IconName;
47
+ return footerIBtn2IconName || footerIBtn3IconName
48
+ ? "" + theme.spacing.spacingC
49
+ : "" + theme.spacing.spacingE;
48
50
  }, function (_a) {
49
51
  var theme = _a.theme;
50
52
  return theme.spacing.spacingC;
@@ -26,13 +26,13 @@ function Header(_a) {
26
26
  var styleTheme = _a.styleTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1;
27
27
  return (react_1.default.createElement(S_HeaderContentWrapper, null,
28
28
  react_1.default.createElement(S_HeaderLeftBox, null,
29
- titleText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[styleTheme] })),
29
+ titleText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[styleTheme], wordBreak: "break_all" })),
30
30
  descText && (react_1.default.createElement(react_1.default.Fragment, null,
31
31
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c" }),
32
- react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined }))),
32
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" }))),
33
33
  captionText && (react_1.default.createElement(react_1.default.Fragment, null,
34
34
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
35
- react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined })))),
35
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" })))),
36
36
  headerDisplayType === 'ibtn1' && headerIBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[styleTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))));
37
37
  }
38
38
  var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
@@ -55,19 +55,19 @@ function MobileHeaderBar(_a) {
55
55
  if (captionText) {
56
56
  return (react_1.default.createElement(S_CaptionTextBox, null,
57
57
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }),
58
- react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center" }),
58
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }),
59
59
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "height" }),
60
- react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption2Regular", singleLineMode: "use", textAlign: "center" })));
60
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption2Regular", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 })));
61
61
  }
62
62
  return (react_1.default.createElement(S_TextTypeBox, null,
63
- react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center" })));
63
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 })));
64
64
  }
65
65
  case 'profile': {
66
66
  return (react_1.default.createElement(S_ProfileWrapper, null,
67
67
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
68
68
  react_1.default.createElement(hybrid_1.ImageView, { src: imageSrc, shapeType: "circular", width: 40, ratio: "1_1", scaleType: "cover", borderMode: "use" }),
69
69
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
70
- react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "caption1Regular", singleLineMode: "use" }),
70
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "caption1Regular", singleLineMode: "use", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }),
71
71
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" })));
72
72
  }
73
73
  case 'image': {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.4.37",
3
+ "version": "1.4.40",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,6 +1,8 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.4.37]
2
+ ## [v1.4.40]
3
3
 
4
- ### Layout
5
- * WTU_1
6
- * Container2 좌측 라인 추가
4
+ ### Component
5
+ * ChatBubbleListItem
6
+ * 시간 표시가 하단에 붙을 수 있도록 수정 (align-self:end;를 align-self:flex-end;로 변경)
7
+ * DynamicDesktopNavbar
8
+ * 단순 표시용(DISPLAY_ONLY)이 2수준에 들어갔을 경우 스타일 변경