pds-dev-kit-web-test 2.7.494 → 2.7.495

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/src/common/assets/icons/fill/Plugin.d.ts +4 -0
  2. package/dist/src/common/assets/icons/fill/Plugin.js +30 -0
  3. package/dist/src/common/assets/icons/fill/index.d.ts +1 -0
  4. package/dist/src/common/assets/icons/fill/index.js +2 -0
  5. package/dist/src/common/assets/icons/line/Plugin.d.ts +4 -0
  6. package/dist/src/common/assets/icons/line/Plugin.js +30 -0
  7. package/dist/src/common/assets/icons/line/index.d.ts +1 -0
  8. package/dist/src/common/assets/icons/line/index.js +2 -0
  9. package/dist/src/common/styles/colorSet/UIColor.json +3 -1
  10. package/dist/src/common/styles/colorSet/index.d.ts +925 -923
  11. package/dist/src/common/styles/colorSet/index.js +3 -3
  12. package/dist/src/common/styles/colorSet/ui-type.d.ts +2 -0
  13. package/dist/src/desktop/components/BoxItem/BoxItem.d.ts +1 -1
  14. package/dist/src/desktop/components/BoxItem/BoxItem.js +23 -11
  15. package/dist/src/desktop/components/ReactionButton/ReactionButton.js +1 -1
  16. package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.d.ts +1 -1
  17. package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js +13 -3
  18. package/dist/src/mobile/components/BoxItem/BoxItem.d.ts +1 -1
  19. package/dist/src/mobile/components/BoxItem/BoxItem.js +23 -11
  20. package/dist/src/mobile/components/MobileTabBar/MobileTabBar.d.ts +3 -1
  21. package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js +13 -2
  22. package/dist/src/mobile/components/ReactionButton/ReactionButton.js +1 -1
  23. package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js +2 -1
  24. package/dist/src/sub/DynamicLayout/CompositionRenderer/createCompositions.js +6 -1
  25. package/dist/src/sub/DynamicLayout/gleStyles.js +1 -1
  26. package/dist/src/sub/DynamicLayout/mock_section.json +1587 -7849
  27. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js +9 -11
  28. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js +31 -24
  29. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +9 -11
  30. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/types.d.ts +3 -3
  31. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parsePlacement.js +1 -1
  32. package/package.json +1 -1
  33. package/release-note.md +2 -2
@@ -69,7 +69,7 @@ var createComponent = function (type, getDesignType, getLocation, designType) {
69
69
  function ContentsCarousel(props) {
70
70
  var _a, _b;
71
71
  var _c = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _c.device, mode = _c.mode, queryData = _c.queryData;
72
- var compositions = props.compositions, index = props.index, _d = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, CB_STYLE_PROP_CONTENTSCAROUSELDESIGN = props.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN, CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD = props.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD, CB_STYLE_PROP_CONTENTSCAROUSELBUTTON = props.CB_STYLE_PROP_CONTENTSCAROUSELBUTTON, CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR = props.CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_CONTENTSCAROUSEL.CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE;
72
+ var compositions = props.compositions, index = props.index, _d = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, CB_STYLE_PROP_CONTENTSCAROUSELDESIGN = props.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN, CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD = props.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD, CB_STYLE_PROP_CONTENTSCAROUSELBUTTON = props.CB_STYLE_PROP_CONTENTSCAROUSELBUTTON, CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR = props.CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_CONTENTSCAROUSEL.CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE;
73
73
  var CB_STYLE_PROP_CONTENTSCAROUSEL = __assign(__assign(__assign(__assign({}, CB_STYLE_PROP_CONTENTSCAROUSELDESIGN), CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD), CB_STYLE_PROP_CONTENTSCAROUSELBUTTON), CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR);
74
74
  var autoPlayEnabled = device === 'DESKTOP'
75
75
  ? CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD_SPEC_AUTOPLAYUSE
@@ -93,14 +93,11 @@ function ContentsCarousel(props) {
93
93
  }), customProgressbarNormalStyle = _h.normalStyle, customProgressbarHoverStyle = _h.hoverStyle;
94
94
  var _j = (0, useSwiper_1.useSwiper)(), swiperRef = _j.swiperRef, progressRef = _j.progressRef, leftTimeMsRef = _j.leftTimeMsRef, isBeginning = _j.isBeginning, isEnd = _j.isEnd, onSwiper = _j.onSwiper, onSlideChangeTransitionEnd = _j.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _j.onAutoplayTimeLeft, onClickPrevBtn = _j.onClickPrevBtn, onClickNextBtn = _j.onClickNextBtn;
95
95
  var _k = (0, react_1.useState)(false), isHovered = _k[0], setIsHovered = _k[1];
96
- var queryPath = "".concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, "/").concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING, "/").concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET);
97
- var orderedCompositions = CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE === 'VALUE'
98
- ? __spreadArray([], CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
99
- .sort(function (a, b) { return a.order - b.order; })
100
- .map(function (item) {
101
- return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
102
- })
103
- : compositions.filter(function (comp) { return comp.isDefault; });
96
+ var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
97
+ .sort(function (a, b) { return a.order - b.order; })
98
+ .map(function (item) {
99
+ return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
100
+ });
104
101
  var loop = contentsCarouselNormalStyle.loop && orderedCompositions.length >= displayCounts;
105
102
  // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
106
103
  var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
@@ -164,6 +161,7 @@ function ContentsCarousel(props) {
164
161
  if (mode === 'EDIT') {
165
162
  style.visibility = 'visible';
166
163
  }
164
+ var isHidden = style.visibility === 'hidden';
167
165
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), Object.entries(componentGroups).map(function (_a) {
168
166
  var position = _a[0], groupComponents = _a[1];
169
167
  return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentscarousel-button-group ccb-elements ".concat(position), ref: function (el) {
@@ -176,7 +174,7 @@ function ContentsCarousel(props) {
176
174
  }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, 'GROUP', 'GROUP', 'GROUP')), { zIndex: 3, position: 'absolute' }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentscarousel-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) {
177
175
  return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type));
178
176
  }) })) }), position));
179
- }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () {
177
+ }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box ".concat(isHidden ? ' hidden' : ''), normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () {
180
178
  setIsHovered(true);
181
179
  }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-columns": displayCounts, "data-number-of-items": displayCounts, "data-column-gap": columnGap, "data-cols": displayCounts, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), orderedCompositions.length > 0 ? ((0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-contentscarousel-layout-box", ref: layoutRef, style: __assign({}, pointerEventsObj) }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-contentscarousel-wrapper", ccbInset: ccbInset, customStyle: isHovered
182
180
  ? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle
@@ -186,7 +184,7 @@ function ContentsCarousel(props) {
186
184
  justifyContent: layout.justifyContent
187
185
  } }, { children: (0, jsx_runtime_1.jsx)(ContentsCarouselCore_1.default, __assign({ ref: swiperRef, className: "cb-contentscarousel", allowTouchMove: mode !== 'EDIT' ? true : false, onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: displayCounts, styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle, effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE.toLowerCase(), loop: loop, displayCounts: displayCounts }, { children: (0, createCompositions_1.createCompositions)({
188
186
  valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
189
- queryPath: queryPath,
187
+ queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA,
190
188
  limit: displayCounts,
191
189
  queryData: queryData,
192
190
  compositions: orderedCompositions,
@@ -65,16 +65,16 @@ var createComponent = function (type, getDesignType, getLocation, designType, si
65
65
  };
66
66
  };
67
67
  function ContentsList(props) {
68
- var _a, _b, _c, _d;
69
- var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _e.device, mode = _e.mode, queryData = _e.queryData;
68
+ var _a, _b, _c, _d, _e, _f;
69
+ var _g = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _g.device, mode = _g.mode, queryData = _g.queryData;
70
70
  var index = props.index, compositions = props.compositions, CB_CONTENT_PROP_CONTENTSLIST = props.CB_CONTENT_PROP_CONTENTSLIST, CB_STYLE_PROP_CONTENTSLISTDESIGN = props.CB_STYLE_PROP_CONTENTSLISTDESIGN, CB_STYLE_PROP_CONTENTSLISTPAGINATION = props.CB_STYLE_PROP_CONTENTSLISTPAGINATION, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_LAYOUT_PROP_PADDING = props.CB_LAYOUT_PROP_PADDING, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_LAYOUT_PROP_HEIGHTADJUSTMENT = props.CB_LAYOUT_PROP_HEIGHTADJUSTMENT;
71
71
  var
72
72
  // CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS,
73
- CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING, CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET, CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
74
- var _f = (0, react_1.useState)(false), isHovered = _f[0], setIsHovered = _f[1];
75
- var _g = (0, react_1.useState)(1), currentPage = _g[0], setCurrentPage = _g[1];
76
- var queryPath = "".concat(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, "/").concat(CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING, "/").concat(CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET);
77
- var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[queryPath];
73
+ CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
74
+ var _h = (0, react_1.useState)(false), isHovered = _h[0], setIsHovered = _h[1];
75
+ var _j = (0, react_1.useState)(1), currentPage = _j[0], setCurrentPage = _j[1];
76
+ var parsedQueryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
77
+ var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[parsedQueryPath];
78
78
  // list의 minheight / minwidth를 계산
79
79
  var numberOfColumns = device === 'DESKTOP'
80
80
  ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS
@@ -86,19 +86,19 @@ function ContentsList(props) {
86
86
  ? queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length
87
87
  : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length) / displayCounts);
88
88
  var CB_STYLE_PROP_CONTENTSLIST = __assign(__assign({}, CB_STYLE_PROP_CONTENTSLISTDESIGN), CB_STYLE_PROP_CONTENTSLISTPAGINATION);
89
- var _h = (0, util_1.parseProperties)(props, device), style = _h.style, hoverStyle = _h.hoverStyle, layout = _h.layout, effect = _h.effect, overlayStyle = _h.overlayStyle;
89
+ var _k = (0, util_1.parseProperties)(props, device), style = _k.style, hoverStyle = _k.hoverStyle, layout = _k.layout, effect = _k.effect, overlayStyle = _k.overlayStyle;
90
90
  var contentPropCss = (0, contentsListUtils_1.parseGridContentProp)({
91
91
  props: CB_CONTENT_PROP_CONTENTSLIST,
92
92
  device: device
93
93
  }).contentPropCss;
94
- var _j = (0, contentsListUtils_1.parseGridStyleProp)({
94
+ var _l = (0, contentsListUtils_1.parseGridStyleProp)({
95
95
  props: CB_STYLE_PROP_CONTENTSLIST,
96
96
  device: device
97
- }), stylePropCss = _j.stylePropCss, hoverStylePropCss = _j.hoverStylePropCss;
98
- var _k = (0, contentsListUtils_1.parsePaginationStyleProp)({
97
+ }), stylePropCss = _l.stylePropCss, hoverStylePropCss = _l.hoverStylePropCss;
98
+ var _m = (0, contentsListUtils_1.parsePaginationStyleProp)({
99
99
  props: CB_STYLE_PROP_CONTENTSLIST,
100
100
  device: device
101
- }), paginationNormalStyle = _k.normalStyle, paginationHoverStyle = _k.hoverStyle;
101
+ }), paginationNormalStyle = _m.normalStyle, paginationHoverStyle = _m.hoverStyle;
102
102
  // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
103
103
  var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
104
104
  var cbRef = (0, react_1.useRef)(null);
@@ -135,6 +135,9 @@ function ContentsList(props) {
135
135
  CB_LAYOUT_PROP_PADDING.CB_LAYOUT_PROP_PADDING_SPEC_PADDING.right;
136
136
  var paddingTB = CB_LAYOUT_PROP_PADDING.CB_LAYOUT_PROP_PADDING_SPEC_PADDING.top +
137
137
  CB_LAYOUT_PROP_PADDING.CB_LAYOUT_PROP_PADDING_SPEC_PADDING.bottom;
138
+ var queryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
139
+ var queryLength = (_f = (_e = queryData === null || queryData === void 0 ? void 0 : queryData[queryPath]) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0;
140
+ // const displayedItemLength = Math.max(0, Math.min(endIndex, queryLength) - startIndex);
138
141
  var numberOfRows = Math.ceil(displayCounts / numberOfColumns);
139
142
  var listMinWidth = oneCompositionMinWidth * numberOfColumns + (numberOfColumns - 1) * columnGap + paddingLR;
140
143
  var listMinHeight = oneCompositionMinHeight * numberOfRows +
@@ -144,9 +147,9 @@ function ContentsList(props) {
144
147
  var components = [
145
148
  createPagination(paginationNormalStyle, paginationHoverStyle, isHovered)
146
149
  ].filter(function (component) { return component !== undefined; });
147
- var _l = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _l.layoutRef, positionRefs = _l.positionRefs,
150
+ var _o = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _o.layoutRef, positionRefs = _o.positionRefs,
148
151
  // ccbInset,
149
- componentGroups = _l.componentGroups, getPositionStyle = _l.getPositionStyle, getComponentGroupLayout = _l.getComponentGroupLayout;
152
+ componentGroups = _o.componentGroups, getPositionStyle = _o.getPositionStyle, getComponentGroupLayout = _o.getComponentGroupLayout;
150
153
  var ccbInset = {
151
154
  top: '0px',
152
155
  right: '0px',
@@ -166,13 +169,11 @@ function ContentsList(props) {
166
169
  var isMobile = device === 'MOBILE';
167
170
  var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
168
171
  var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
169
- var orderedCompositions = CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE === 'VALUE'
170
- ? __spreadArray([], CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
171
- .sort(function (a, b) { return a.order - b.order; })
172
- .map(function (item) {
173
- return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
174
- })
175
- : compositions.filter(function (comp) { return comp.isDefault; });
172
+ var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
173
+ .sort(function (a, b) { return a.order - b.order; })
174
+ .map(function (item) {
175
+ return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
176
+ });
176
177
  var heightFitContentByDevice = device === 'DESKTOP'
177
178
  ? CB_LAYOUT_PROP_HEIGHTADJUSTMENT === null || CB_LAYOUT_PROP_HEIGHTADJUSTMENT === void 0 ? void 0 : CB_LAYOUT_PROP_HEIGHTADJUSTMENT.CB_LAYOUT_PROP_HEIGHTADJUSTMENT_SPEC_HEIGHTFITCONTENT
178
179
  : CB_LAYOUT_PROP_HEIGHTADJUSTMENT === null || CB_LAYOUT_PROP_HEIGHTADJUSTMENT === void 0 ? void 0 : CB_LAYOUT_PROP_HEIGHTADJUSTMENT['CB_LAYOUT_PROP_HEIGHTADJUSTMENT_SPEC_HEIGHTFITCONTENT:MOBILE'];
@@ -181,6 +182,7 @@ function ContentsList(props) {
181
182
  if (mode === 'EDIT') {
182
183
  style.visibility = 'visible';
183
184
  }
185
+ var isHidden = style.visibility === 'hidden';
184
186
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), isEditModeAndHeightFitContent && ((0, jsx_runtime_1.jsx)(S_HeightFitContentCover_1.S_HeightFitContentCover, { className: "height-fit-content-cover", bottomText: t('str_10106') })), Object.entries(componentGroups).map(function (_a) {
185
187
  var position = _a[0], groupComponents = _a[1];
186
188
  return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentslist-button-group ccb-elements", ref: function (el) {
@@ -190,10 +192,11 @@ function ContentsList(props) {
190
192
  else {
191
193
  delete positionRefs.current[position];
192
194
  }
193
- }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, 'GROUP', 'GROUP', 'GROUP')), { zIndex: 3, position: 'absolute' }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentslist-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) {
195
+ }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, 'GROUP', 'GROUP', 'GROUP')), { zIndex: 3, position: 'absolute', visibility: isHidden ? 'hidden' : 'visible' }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentslist-button-layout-box", style: (getComponentGroupLayout(groupComponents, position),
196
+ { visibility: isHidden ? 'hidden' : 'visible' }) }, { children: groupComponents.map(function (component) {
194
197
  return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type));
195
198
  }) })) }), position));
196
- }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-items": CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length, "data-number-of-columns": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-min-width": listMinWidth, "data-min-height": listMinHeight, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), orderedCompositions.length > 0 ? ((0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef, style: {
199
+ }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box ccb-layout-box ".concat(isHidden ? 'hidden' : ''), normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-items": CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length, "data-number-of-columns": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-min-width": listMinWidth, "data-min-height": listMinHeight, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), orderedCompositions.length > 0 ? ((0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef, style: {
197
200
  display: layout.display,
198
201
  flexDirection: layout.flexDirection,
199
202
  justifyContent: layout.justifyContent
@@ -201,7 +204,7 @@ function ContentsList(props) {
201
204
  // NOTE: 위 CSS 프롭과 정리
202
205
  style: { gridTemplateRows: "repeat(".concat(numberOfRows, ", 1fr)") } }, { children: (0, createCompositions_1.createCompositions)({
203
206
  valueType: CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE,
204
- queryPath: queryPath,
207
+ queryPath: CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA,
205
208
  limit: displayCounts,
206
209
  queryData: queryData,
207
210
  compositions: orderedCompositions,
@@ -250,6 +253,10 @@ var S_ContentsListWrapper = styled_components_1.default.div(templateObject_4 ||
250
253
  var ccbInset = _a.ccbInset;
251
254
  return ccbInset.top;
252
255
  });
256
+ function removeFirstSegment(path) {
257
+ var segments = path.split('/');
258
+ return segments.slice(1).join('/');
259
+ }
253
260
  function getStandardComposition(compositions, valueType) {
254
261
  if (valueType === 'DATA') {
255
262
  return compositions.find(function (composition) { return composition.isDefault; });
@@ -72,7 +72,7 @@ size) {
72
72
  function SlideBanner(props) {
73
73
  var _a;
74
74
  var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, mode = _b.mode, queryData = _b.queryData;
75
- var index = props.index, _c = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING, CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET, CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, CB_STYLE_PROP_SLIDEBANNERDESIGN = props.CB_STYLE_PROP_SLIDEBANNERDESIGN, CB_STYLE_PROP_SLIDEBANNERPAGINATION = props.CB_STYLE_PROP_SLIDEBANNERPAGINATION, CB_STYLE_PROP_SLIDEBANNERBUTTON = props.CB_STYLE_PROP_SLIDEBANNERBUTTON, CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD = props.CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD, CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR = props.CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_SLIDEBANNER.CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE;
75
+ var index = props.index, _c = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, CB_STYLE_PROP_SLIDEBANNERDESIGN = props.CB_STYLE_PROP_SLIDEBANNERDESIGN, CB_STYLE_PROP_SLIDEBANNERPAGINATION = props.CB_STYLE_PROP_SLIDEBANNERPAGINATION, CB_STYLE_PROP_SLIDEBANNERBUTTON = props.CB_STYLE_PROP_SLIDEBANNERBUTTON, CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD = props.CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD, CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR = props.CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_SLIDEBANNER.CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE;
76
76
  var compositions = props.compositions;
77
77
  var CB_STYLE_PROP_SLIDEBANNER = __assign(__assign(__assign(__assign(__assign({}, CB_STYLE_PROP_SLIDEBANNERDESIGN), CB_STYLE_PROP_SLIDEBANNERPAGINATION), CB_STYLE_PROP_SLIDEBANNERBUTTON), CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD), CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR);
78
78
  var autoPlayEnabled = device === 'DESKTOP'
@@ -146,18 +146,16 @@ function SlideBanner(props) {
146
146
  var isMobile = device === 'MOBILE';
147
147
  var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
148
148
  var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
149
- var queryPath = "".concat(CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, "/").concat(CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING, "/").concat(CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET);
150
- var orderedCompositions = CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE === 'VALUE'
151
- ? __spreadArray([], CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
152
- .sort(function (a, b) { return a.order - b.order; })
153
- .map(function (item) {
154
- return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
155
- })
156
- : compositions.filter(function (comp) { return comp.isDefault; });
149
+ var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
150
+ .sort(function (a, b) { return a.order - b.order; })
151
+ .map(function (item) {
152
+ return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
153
+ });
157
154
  var isEditModeAndHidden = style.visibility === 'hidden' && mode === 'EDIT';
158
155
  if (mode === 'EDIT') {
159
156
  style.visibility = 'visible';
160
157
  }
158
+ var isHidden = style.visibility === 'hidden';
161
159
  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.jsxs)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [Object.entries(componentGroups).map(function (_a) {
162
160
  var position = _a[0], groupComponents = _a[1];
163
161
  return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-group ccb-elements ".concat(position), ref: function (el) {
@@ -170,11 +168,11 @@ function SlideBanner(props) {
170
168
  }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, 'GROUP', 'GROUP', 'GROUP')), { zIndex: 3, position: 'absolute' }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) {
171
169
  return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type));
172
170
  }) })) }), position));
173
- }), (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), orderedCompositions.length > 0 ? ((0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-slidebanner-layout-box", ref: layoutRef }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-slidebanner-wrapper", ccbInset: ccbInset, customStyle: isHovered
171
+ }), (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box ".concat(isHidden ? 'hidden' : ''), normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), orderedCompositions.length > 0 ? ((0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-slidebanner-layout-box", ref: layoutRef }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-slidebanner-wrapper", ccbInset: ccbInset, customStyle: isHovered
174
172
  ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle
175
173
  : slideBannerNormalStyle === null || slideBannerNormalStyle === void 0 ? void 0 : slideBannerNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(SlideBannerCore_1.default, __assign({ ref: swiperRef, className: "cb-slidebanner", onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: 1, styles: isHovered ? slideBannerHoverStyle : slideBannerNormalStyle, effect: CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
176
174
  valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
177
- queryPath: queryPath,
175
+ queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
178
176
  limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
179
177
  queryData: queryData,
180
178
  compositions: orderedCompositions,
@@ -46,7 +46,7 @@ export type CB_CONTENT_PROP_CONTENTSCAROUSEL = {
46
46
  CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE: CCB_VALUE_TYPE;
47
47
  CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA: STRING_PLAIN;
48
48
  CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING: STRING_PLAIN;
49
- CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET: NUMBER_INTEGER;
49
+ CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_OFFSET: NUMBER_INTEGER;
50
50
  CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS: ManualItem[];
51
51
  CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS: NUMBER_INTEGER;
52
52
  CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS: NUMBER_INTEGER;
@@ -56,7 +56,7 @@ export type CB_CONTENT_PROP_SLIDEBANNER = {
56
56
  CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE: CCB_VALUE_TYPE;
57
57
  CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA: STRING_PLAIN;
58
58
  CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING: STRING_PLAIN;
59
- CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET: NUMBER_INTEGER;
59
+ CB_CONTENT_PROP_SLIDEBANNER_SPEC_OFFSET: NUMBER_INTEGER;
60
60
  CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS: ManualItem[];
61
61
  CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS: NUMBER_INTEGER;
62
62
  };
@@ -65,7 +65,7 @@ export type CB_CONTENT_PROP_CONTENTSLIST = {
65
65
  CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA: STRING_PLAIN;
66
66
  CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING: STRING_PLAIN;
67
67
  CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAFILTER: STRING_PLAIN;
68
- CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET: NUMBER_INTEGER;
68
+ CB_CONTENT_PROP_CONTENTSLIST_SPEC_OFFSET: NUMBER_INTEGER;
69
69
  CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS: ManualItem[];
70
70
  CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS: NUMBER_INTEGER;
71
71
  CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS: NUMBER_INTEGER;
@@ -86,7 +86,7 @@ function parsePropPlacement(props, id, cbCode, zOrders, heightFitContent, cbRest
86
86
  var AUTO_RESIZE_CODES = ['none'];
87
87
  function getResizeHandles(heightFitContent) {
88
88
  if (heightFitContent) {
89
- return ['e', 'w'];
89
+ return ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'];
90
90
  }
91
91
  return ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'];
92
92
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.7.494",
3
+ "version": "2.7.495",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.280]
2
+ ## [v2.2.285]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
6
 
7
- * 컬러키 업데이트
7
+ * [PUB-1402] MobileTabBar에 autoScrollMode 추가