pds-dev-kit-web 2.2.40 → 2.2.42

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 (13) hide show
  1. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +3 -1
  2. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +20 -9
  3. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +3 -1
  4. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +20 -9
  5. package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts +3 -4
  6. package/dist/src/sub/DynamicLayout/pagesPreviewMock.js +11 -12
  7. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.d.ts +1 -0
  8. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js +30 -2
  9. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/parseYoutubeContentProp.d.ts +9 -1
  10. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/parseYoutubeContentProp.js +31 -6
  11. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/types.d.ts +2 -3
  12. package/package.json +1 -1
  13. package/release-note.md +6 -6
package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts CHANGED
@@ -14,7 +14,9 @@ export type ChatBubbleListItemProps = {
14
14
  contextMenuOptionArray?: PDSValueOption[];
15
15
  contextMenuState?: 'normal' | 'disabled';
16
16
  children?: React.ReactNode;
17
+ downloadIBtnMode?: 'use' | 'none';
17
18
  onClickContextMenuItem?: (option: PDSValueOption) => void;
19
+ onClickDownloadIBtn?: () => void;
18
20
  };
19
- declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, countMode, countText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
21
+ declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, countMode, countText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
20
22
  export default ChatBubbleListItem;
package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js CHANGED
@@ -68,8 +68,8 @@ var profileImageBorderColorTheme = {
68
68
  transparent: 'ui_cpnt_list_chatbubble_base_transparent'
69
69
  };
70
70
  function ChatBubbleListItem(_a) {
71
- var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
72
- var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
71
+ var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, _g = _a.downloadIBtnMode, downloadIBtnMode = _g === void 0 ? 'none' : _g, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn;
72
+ var _h = (0, react_1.useState)(false), isContextMenuOpen = _h[0], setIsContextMenuOpen = _h[1];
73
73
  var contextMenuRef = (0, react_1.useRef)(null);
74
74
  var chatBody = document.querySelector('#chatMessageBox');
75
75
  var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -140,7 +140,7 @@ function ChatBubbleListItem(_a) {
140
140
  }
141
141
  setIsContextMenuOpen(false);
142
142
  };
143
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] })))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
143
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "line", shapeType: "circular", iconFillType: "line", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "line", shapeType: "circular", iconFillType: "line", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
144
144
  }
145
145
  var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
146
146
  var theme = _a.theme;
@@ -166,13 +166,24 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_5 || (te
166
166
  return (isOtherAvatarImpact ? ImageViewBrandPrimary : ImageViewDefault);
167
167
  });
168
168
  var S_RightBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
169
- var S_ChatBubbleBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
170
- var MyChatBubble = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
171
- var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n flex: 1;\n\n ", ";\n"], ["\n display: flex;\n flex: 1;\n\n ", ";\n"])), function (_a) {
169
+ var S_DownloadIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-left: ", ";\n margin-right: ", ";\n"], ["\n margin-left: ", ";\n margin-right: ", ";\n"])), function (_a) {
170
+ var isMe = _a.isMe, theme = _a.theme;
171
+ return !isMe && theme.spacing.spacingB;
172
+ }, function (_a) {
173
+ var isMe = _a.isMe, theme = _a.theme;
174
+ return isMe && theme.spacing.spacingB;
175
+ });
176
+ var S_Box = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"])));
177
+ 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"])));
178
+ var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
179
+ var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n flex: 1;\n\n ", ";\n"], ["\n display: flex;\n flex: 1;\n\n ", ";\n"])), function (_a) {
172
180
  var isMe = _a.isMe;
173
181
  return isMe && MyChatBubble;
174
182
  });
175
- var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: ", ";\n align-self: flex-end;\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: ", ";\n align-self: flex-end;\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
183
+ var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: ", ";\n align-self: ", ";\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: ", ";\n align-self: ", ";\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
184
+ var isMe = _a.isMe;
185
+ return isMe && 'flex-end';
186
+ }, function (_a) {
176
187
  var isMe = _a.isMe;
177
188
  return isMe && 'flex-end';
178
189
  }, function (_a) {
@@ -182,7 +193,7 @@ var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templa
182
193
  var isMe = _a.isMe, theme = _a.theme;
183
194
  return isMe && theme.spacing.spacingA;
184
195
  });
185
- var S_SeeMoreButton = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
196
+ var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
186
197
  var theme = _a.theme;
187
198
  return theme.spacing.spacingB;
188
199
  }, function (_a) {
@@ -196,4 +207,4 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_11 || (temp
196
207
  return hoverMode === 'use' && '1';
197
208
  });
198
209
  exports.default = ChatBubbleListItem;
199
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
210
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts CHANGED
@@ -14,7 +14,9 @@ export type ChatBubbleListItemProps = {
14
14
  contextMenuOptionArray?: PDSValueOption[];
15
15
  contextMenuState?: 'normal' | 'disabled';
16
16
  children?: React.ReactNode;
17
+ downloadIBtnMode?: 'use' | 'none';
17
18
  onClickContextMenuItem?: (option: PDSValueOption) => void;
19
+ onClickDownloadIBtn?: () => void;
18
20
  };
19
- declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, countMode, countText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
21
+ declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, countMode, countText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
20
22
  export default ChatBubbleListItem;
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js CHANGED
@@ -68,8 +68,8 @@ var profileImageBorderColorTheme = {
68
68
  transparent: 'ui_cpnt_list_chatbubble_base_transparent'
69
69
  };
70
70
  function ChatBubbleListItem(_a) {
71
- var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
72
- var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
71
+ var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, _g = _a.downloadIBtnMode, downloadIBtnMode = _g === void 0 ? 'none' : _g, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn;
72
+ var _h = (0, react_1.useState)(false), isContextMenuOpen = _h[0], setIsContextMenuOpen = _h[1];
73
73
  var contextMenuRef = (0, react_1.useRef)(null);
74
74
  var chatBody = document.querySelector('#chatMessageBox');
75
75
  var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -142,7 +142,7 @@ function ChatBubbleListItem(_a) {
142
142
  }
143
143
  setIsContextMenuOpen(false);
144
144
  };
145
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] })))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
145
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "line", shapeType: "circular", iconFillType: "line", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "line", shapeType: "circular", iconFillType: "line", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
146
146
  }
147
147
  var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
148
148
  var theme = _a.theme;
@@ -168,13 +168,24 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_5 || (te
168
168
  return (isOtherAvatarImpact ? ImageViewBrandPrimary : ImageViewDefault);
169
169
  });
170
170
  var S_RightBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
171
- var S_ChatBubbleBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
172
- var MyChatBubble = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
173
- var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n flex: 1;\n\n ", ";\n"], ["\n display: flex;\n flex: 1;\n\n ", ";\n"])), function (_a) {
171
+ var S_DownloadIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-left: ", ";\n margin-right: ", ";\n"], ["\n margin-left: ", ";\n margin-right: ", ";\n"])), function (_a) {
172
+ var isMe = _a.isMe, theme = _a.theme;
173
+ return !isMe && theme.spacing.spacingB;
174
+ }, function (_a) {
175
+ var isMe = _a.isMe, theme = _a.theme;
176
+ return isMe && theme.spacing.spacingB;
177
+ });
178
+ var S_Box = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"])));
179
+ 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"])));
180
+ var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
181
+ var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n flex: 1;\n\n ", ";\n"], ["\n display: flex;\n flex: 1;\n\n ", ";\n"])), function (_a) {
174
182
  var isMe = _a.isMe;
175
183
  return isMe && MyChatBubble;
176
184
  });
177
- var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: ", ";\n align-self: flex-end;\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: ", ";\n align-self: flex-end;\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
185
+ var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: ", ";\n align-self: ", ";\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: ", ";\n align-self: ", ";\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
186
+ var isMe = _a.isMe;
187
+ return isMe && 'flex-end';
188
+ }, function (_a) {
178
189
  var isMe = _a.isMe;
179
190
  return isMe && 'flex-end';
180
191
  }, function (_a) {
@@ -184,7 +195,7 @@ var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templa
184
195
  var isMe = _a.isMe, theme = _a.theme;
185
196
  return isMe && theme.spacing.spacingA;
186
197
  });
187
- var S_SeeMoreButton = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
198
+ var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
188
199
  var theme = _a.theme;
189
200
  return theme.spacing.spacingB;
190
201
  }, function (_a) {
@@ -198,4 +209,4 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_11 || (temp
198
209
  return hoverMode === 'use' && '1';
199
210
  });
200
211
  exports.default = ChatBubbleListItem;
201
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
212
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts CHANGED
@@ -699,15 +699,14 @@ export declare const sampleCustomsection1: {
699
699
  CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: boolean;
700
700
  };
701
701
  CB_CONTENT_PROP_YOUTUBE: {
702
- CB_CONTENT_PROP_YOUTUBE_SPEC_ENDTIME: number;
703
- CB_CONTENT_PROP_YOUTUBE_SPEC_MPLAY: boolean;
704
- CB_CONTENT_PROP_YOUTUBE_SPEC_REPLAY: boolean;
702
+ CB_CONTENT_PROP_YOUTUBE_SPEC_AUTOPLAY: boolean;
703
+ CB_CONTENT_PROP_YOUTUBE_SPEC_MAUTOPLAY: boolean;
705
704
  CB_CONTENT_PROP_YOUTUBE_SPEC_SRC: string;
706
705
  CB_CONTENT_PROP_YOUTUBE_SPEC_STARTTIME: number;
707
706
  };
708
707
  CB_EFFECT_PROP_ENTANIM: {
709
708
  CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: string;
710
- 'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': string;
709
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': null;
711
710
  CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: number;
712
711
  'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': null;
713
712
  CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: number;
package/dist/src/sub/DynamicLayout/pagesPreviewMock.js CHANGED
@@ -659,15 +659,14 @@ exports.sampleCustomsection1 = {
659
659
  CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: true
660
660
  },
661
661
  CB_CONTENT_PROP_YOUTUBE: {
662
- CB_CONTENT_PROP_YOUTUBE_SPEC_ENDTIME: 10,
663
- CB_CONTENT_PROP_YOUTUBE_SPEC_MPLAY: true,
664
- CB_CONTENT_PROP_YOUTUBE_SPEC_REPLAY: true,
662
+ CB_CONTENT_PROP_YOUTUBE_SPEC_AUTOPLAY: false,
663
+ CB_CONTENT_PROP_YOUTUBE_SPEC_MAUTOPLAY: false,
665
664
  CB_CONTENT_PROP_YOUTUBE_SPEC_SRC: 'https://www.youtube.com/watch?v=ryYFcl57bVo',
666
665
  CB_CONTENT_PROP_YOUTUBE_SPEC_STARTTIME: 0
667
666
  },
668
667
  CB_EFFECT_PROP_ENTANIM: {
669
- CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: 'SLIDEINLEFT',
670
- 'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': 'HEARTBEAT',
668
+ CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: 'NONE',
669
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': null,
671
670
  CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: 1,
672
671
  'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': null,
673
672
  CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: 1,
@@ -693,16 +692,16 @@ exports.sampleCustomsection1 = {
693
692
  'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': null
694
693
  },
695
694
  CB_PLACEMENT_PROP_PLACEMENT: {
696
- CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 2,
697
- 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 1,
698
- CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 4,
699
- 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 3,
695
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 8,
696
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 8,
697
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 12,
698
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 8,
700
699
  CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 1,
701
700
  'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': 2,
702
701
  CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: 1,
703
702
  'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': 2,
704
- CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: 2,
705
- 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': 2
703
+ CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: 20,
704
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': 20
706
705
  },
707
706
  CB_STYLE_PROP_BGCOLOR: {
708
707
  CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE: 90,
@@ -1147,7 +1146,7 @@ exports.sampleCustomsection1 = {
1147
1146
  availableTemplates: [],
1148
1147
  schema: 'GENERAL'
1149
1148
  },
1150
- order: 1,
1149
+ order: 5,
1151
1150
  program: '',
1152
1151
  programData: {},
1153
1152
  properties: {
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import type { CB_YOUTUBE_PROPERTIES_TYPE } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
3
3
  type Props = CB_YOUTUBE_PROPERTIES_TYPE;
4
+ export type YOUTUBE_AUTOPLAY_TRIGGER_POINT = 'ALWAYS' | 'VIEWPORT-FREEZE' | 'VIEWPORT';
4
5
  declare function Youtube(props: Props): JSX.Element;
5
6
  export default Youtube;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js CHANGED
@@ -29,10 +29,11 @@ var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverB
29
29
  var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
30
30
  var S_HiddenCover_1 = require("../components/S_HiddenCover");
31
31
  var parseYoutubeContentProp_1 = __importDefault(require("./parseYoutubeContentProp"));
32
+ var YOUTUBE_AUTOPLAY_TRIGGER_POINT = 'VIEWPORT';
32
33
  function Youtube(props) {
33
34
  var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
34
35
  var CB_CONTENT_PROP_YOUTUBE = props.CB_CONTENT_PROP_YOUTUBE, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
35
- var _b = (0, parseYoutubeContentProp_1.default)(CB_CONTENT_PROP_YOUTUBE), youtubeSrc = _b.youtubeSrc, thumbnailSrc = _b.thumbnailSrc, id = _b.id;
36
+ var _b = (0, parseYoutubeContentProp_1.default)(CB_CONTENT_PROP_YOUTUBE, device, YOUTUBE_AUTOPLAY_TRIGGER_POINT), youtubeSrc = _b.youtubeSrc, thumbnailSrc = _b.thumbnailSrc, id = _b.id, cbAutoplayMode = _b.cbAutoplayMode;
36
37
  var isEditMode = mode === 'EDIT';
37
38
  var _c = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _c.style, bgColorHoverStyle = _c.hoverStyle;
38
39
  var _d = (0, util_1.parseProperties)(props, device), propsStyle = _d.style, propsHoverStyle = _d.hoverStyle, layoutStyle = _d.layout, effect = _d.effect;
@@ -49,7 +50,34 @@ function Youtube(props) {
49
50
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
50
51
  var hasEffect = !isNoneEffectType;
51
52
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
52
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc })] })) : ((0, jsx_runtime_1.jsx)(S_Iframe, { title: id, src: youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
53
+ var iframeRef = (0, react_1.useRef)(null);
54
+ var autoplayRef = (0, react_1.useRef)(null);
55
+ var autoplayEntry = (0, hooks_1.useIntersectionObserver)(autoplayRef, {
56
+ freezeOnceVisible: YOUTUBE_AUTOPLAY_TRIGGER_POINT === 'VIEWPORT-FREEZE' ? true : false
57
+ });
58
+ var onLoadIframe = function () {
59
+ var _a;
60
+ if (!((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
61
+ return;
62
+ }
63
+ if (cbAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
64
+ iframeRef.current.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
65
+ }
66
+ };
67
+ // NOTE: Effect for AUTO-PLAY
68
+ (0, react_1.useEffect)(function () {
69
+ var _a;
70
+ if (!((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
71
+ return;
72
+ }
73
+ if (cbAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
74
+ iframeRef.current.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
75
+ }
76
+ if (cbAutoplayMode === 'VIEWPORT' && !(autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
77
+ iframeRef.current.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
78
+ }
79
+ }, [autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting, cbAutoplayMode]);
80
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ ref: autoplayRef, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc })] })) : ((0, jsx_runtime_1.jsx)(S_Iframe, { ref: iframeRef, title: id, src: youtubeSrc, onLoad: onLoadIframe, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
53
81
  }
54
82
  function getBGColorStyles(props, device) {
55
83
  var availableSpecCodes = [
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/parseYoutubeContentProp.d.ts CHANGED
@@ -1,7 +1,15 @@
1
1
  import type { CB_CONTENT_PROP_YOUTUBE_TYPE } from './types';
2
- declare function parseYoutubeContentProp(props: CB_CONTENT_PROP_YOUTUBE_TYPE): {
2
+ import type { YOUTUBE_AUTOPLAY_TRIGGER_POINT } from './Youtube';
3
+ import type { Device } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
4
+ declare function parseYoutubeContentProp(props: CB_CONTENT_PROP_YOUTUBE_TYPE, device: Device, autoplayTriggerPoint: YOUTUBE_AUTOPLAY_TRIGGER_POINT): {
3
5
  id: string;
4
6
  youtubeSrc: string;
5
7
  thumbnailSrc: string;
8
+ cbAutoplayMode?: undefined;
9
+ } | {
10
+ id: string;
11
+ youtubeSrc: string;
12
+ thumbnailSrc: string;
13
+ cbAutoplayMode: string;
6
14
  };
7
15
  export default parseYoutubeContentProp;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/parseYoutubeContentProp.js CHANGED
@@ -1,9 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- function parseYoutubeContentProp(props) {
3
+ function parseYoutubeContentProp(props, device, autoplayTriggerPoint) {
4
4
  var id = getYoutubeId(props.CB_CONTENT_PROP_YOUTUBE_SPEC_SRC);
5
5
  var start = props.CB_CONTENT_PROP_YOUTUBE_SPEC_STARTTIME;
6
- var end = props.CB_CONTENT_PROP_YOUTUBE_SPEC_ENDTIME;
6
+ var shouldAutoPlay = device === 'DESKTOP'
7
+ ? props.CB_CONTENT_PROP_YOUTUBE_SPEC_AUTOPLAY
8
+ : props.CB_CONTENT_PROP_YOUTUBE_SPEC_MAUTOPLAY;
9
+ var cbAutoplayMode = shouldAutoPlay ? autoplayTriggerPoint : 'NONE';
7
10
  if (!id) {
8
11
  return {
9
12
  id: 'no-id',
@@ -13,8 +16,9 @@ function parseYoutubeContentProp(props) {
13
16
  }
14
17
  return {
15
18
  id: id,
16
- youtubeSrc: getEmbedUrl(id, start, end),
17
- thumbnailSrc: getThumbnailUrl(id)
19
+ youtubeSrc: getEmbedUrl(id, { start: start, shouldAutoPlay: shouldAutoPlay, autoplayMode: autoplayTriggerPoint }),
20
+ thumbnailSrc: getThumbnailUrl(id),
21
+ cbAutoplayMode: cbAutoplayMode
18
22
  };
19
23
  }
20
24
  function getYoutubeId(src) {
@@ -27,7 +31,28 @@ function getYoutubeId(src) {
27
31
  function getThumbnailUrl(id) {
28
32
  return "https://img.youtube.com/vi/".concat(id, "/0.jpg");
29
33
  }
30
- function getEmbedUrl(id, start, end) {
31
- return "https://www.youtube.com/embed/".concat(id, "?start=").concat(start, "&end=").concat(end);
34
+ function getEmbedUrl(id, _a) {
35
+ var start = _a.start, autoplayMode = _a.autoplayMode, shouldAutoPlay = _a.shouldAutoPlay;
36
+ try {
37
+ var url = new URL("https://www.youtube.com/embed/".concat(id));
38
+ url.searchParams.set('start', "".concat(start));
39
+ if (!shouldAutoPlay) {
40
+ return url.href;
41
+ }
42
+ // NOTE: AUTOPLAY PARAMS
43
+ if (autoplayMode === 'ALWAYS') {
44
+ url.searchParams.set('autoplay', '1');
45
+ }
46
+ if (autoplayMode === 'VIEWPORT') {
47
+ url.searchParams.set('enablejsapi', '1');
48
+ }
49
+ url.searchParams.set('mute', '1');
50
+ url.searchParams.set('loop', '1');
51
+ url.searchParams.set('playlist', "".concat(id));
52
+ return url.href;
53
+ }
54
+ catch (error) {
55
+ return "https://www.youtube.com/embed/".concat(id, "?start=").concat(start);
56
+ }
32
57
  }
33
58
  exports.default = parseYoutubeContentProp;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/types.d.ts CHANGED
@@ -1,10 +1,9 @@
1
1
  import type { ENUM_STRING, NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
2
2
  export type CB_CONTENT_PROP_YOUTUBE_TYPE = {
3
- CB_CONTENT_PROP_YOUTUBE_SPEC_ENDTIME: number;
4
- CB_CONTENT_PROP_YOUTUBE_SPEC_MPLAY: boolean;
5
- CB_CONTENT_PROP_YOUTUBE_SPEC_REPLAY: boolean;
6
3
  CB_CONTENT_PROP_YOUTUBE_SPEC_SRC: string;
7
4
  CB_CONTENT_PROP_YOUTUBE_SPEC_STARTTIME: number;
5
+ CB_CONTENT_PROP_YOUTUBE_SPEC_AUTOPLAY: boolean;
6
+ CB_CONTENT_PROP_YOUTUBE_SPEC_MAUTOPLAY: boolean;
8
7
  };
9
8
  export type CB_STYLE_PROP_BGCOLOR_ENUM_GRADIENT = 'LINEAR' | 'RADIAL';
10
9
  export type CB_STYLE_PROP_BGCOLOR_ENUM_TYPE = 'NONE' | 'SOLID' | 'GRADIENT';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.40",
3
+ "version": "2.2.42",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.40]
3
- ## urgent|https://design.storybook.publ.biz/
2
+ ## [v2.2.42]
3
+ ## daily|https://design.storybook.publ.biz/
4
4
 
5
- ### Component
6
- * TextField
7
- * overrideIBtn1IconColorKey prop 추가
8
- * overrideIBtn2IconColorKey prop 추가
5
+ ### component
6
+ * ChatBubbleListItem
7
+ * downloadIBtnMode prop 추가
8
+ * onClickDownloadIBtn prop 추가