pds-dev-kit-web-test 2.5.669 → 2.5.671
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.
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js +10 -6
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js +10 -9
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +9 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/hooks/useFlexGridLayout.js +12 -12
- package/package.json +1 -1
@@ -90,7 +90,15 @@ function ContentsCarousel(props) {
|
|
90
90
|
createNextButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
|
91
91
|
{ type: 'PROGRESSBAR', position: 'INSET5' }
|
92
92
|
].filter(function (component) { return component !== undefined; });
|
93
|
-
var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs,
|
93
|
+
var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs,
|
94
|
+
// ccbInset,
|
95
|
+
componentGroups = _k.componentGroups, getPositionStyle = _k.getPositionStyle, getComponentGroupLayout = _k.getComponentGroupLayout;
|
96
|
+
var ccbInset = {
|
97
|
+
top: '0px',
|
98
|
+
right: '0px',
|
99
|
+
bottom: '0px',
|
100
|
+
left: '0px'
|
101
|
+
};
|
94
102
|
var renderElements = function (component) {
|
95
103
|
switch (component.type) {
|
96
104
|
case 'PREV':
|
@@ -118,11 +126,7 @@ function ContentsCarousel(props) {
|
|
118
126
|
delete positionRefs.current[position];
|
119
127
|
}
|
120
128
|
}, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { zIndex: 3 }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentscarousel-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) { return renderElements(component); }) })) }), position));
|
121
|
-
}), (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 ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle
|
122
|
-
// overflow: 'hidden'
|
123
|
-
), hoverStyle: __assign({}, hoverStyle
|
124
|
-
// overflow: 'hidden'
|
125
|
-
), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-columns": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-number-of-items": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-column-gap": columnGap, "data-cols": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: (0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-contentscarousel-layout-box", ref: layoutRef }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-contentscarousel-wrapper", ccbInset: ccbInset, customStyle: isHovered
|
129
|
+
}), (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 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-columns": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-number-of-items": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-column-gap": columnGap, "data-cols": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: (0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-contentscarousel-layout-box", ref: layoutRef }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-contentscarousel-wrapper", ccbInset: ccbInset, customStyle: isHovered
|
126
130
|
? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle
|
127
131
|
: contentsCarouselNormalStyle === null || contentsCarouselNormalStyle === void 0 ? void 0 : contentsCarouselNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(ContentsCarouselCore_1.default, __assign({ ref: swiperRef, className: "cb-contentscarousel", onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle }, { children: (0, createCompositions_1.createCompositions)({
|
128
132
|
valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
|
@@ -119,7 +119,15 @@ function ContentsList(props) {
|
|
119
119
|
var components = [
|
120
120
|
createPagination(paginationNormalStyle, paginationHoverStyle, isHovered)
|
121
121
|
].filter(function (component) { return component !== undefined; });
|
122
|
-
var _l = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _l.layoutRef, positionRefs = _l.positionRefs,
|
122
|
+
var _l = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _l.layoutRef, positionRefs = _l.positionRefs,
|
123
|
+
// ccbInset,
|
124
|
+
componentGroups = _l.componentGroups, getPositionStyle = _l.getPositionStyle, getComponentGroupLayout = _l.getComponentGroupLayout;
|
125
|
+
var ccbInset = {
|
126
|
+
top: '0px',
|
127
|
+
right: '0px',
|
128
|
+
bottom: '0px',
|
129
|
+
left: '0px'
|
130
|
+
};
|
123
131
|
var renderElements = function (component) {
|
124
132
|
switch (component.type) {
|
125
133
|
case 'PAGINATION':
|
@@ -142,14 +150,7 @@ function ContentsList(props) {
|
|
142
150
|
delete positionRefs.current[position];
|
143
151
|
}
|
144
152
|
}, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { zIndex: 3 }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentslist-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) { return renderElements(component); }) })) }), position));
|
145
|
-
}), (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({ 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_ITEMCOUNTS, "data-number-of-columns": CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, "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.jsxs)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef }, { 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.jsxs)(S_ContentsListWrapper, __assign({ className: "cb-contentslist-wrapper",
|
146
|
-
// ccbInset={ccbInset}
|
147
|
-
ccbInset: {
|
148
|
-
top: '0px',
|
149
|
-
right: '0px',
|
150
|
-
bottom: '0px',
|
151
|
-
left: '0px'
|
152
|
-
}, contentPropCss: contentPropCss, stylePropCss: isHovered ? hoverStylePropCss : stylePropCss }, { children: [(0, createCompositions_1.createCompositions)({
|
153
|
+
}), (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({ 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_ITEMCOUNTS, "data-number-of-columns": CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, "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.jsxs)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef }, { 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.jsxs)(S_ContentsListWrapper, __assign({ className: "cb-contentslist-wrapper", ccbInset: ccbInset, contentPropCss: contentPropCss, stylePropCss: isHovered ? hoverStylePropCss : stylePropCss }, { children: [(0, createCompositions_1.createCompositions)({
|
153
154
|
valueType: CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE,
|
154
155
|
queryPath: CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA,
|
155
156
|
limit: CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS,
|
@@ -96,7 +96,15 @@ function SlideBanner(props) {
|
|
96
96
|
createPagination(customPaginationNormalStyle, customPaginationHoverStyle, isHovered),
|
97
97
|
{ type: 'PROGRESSBAR', position: 'INSET5' }
|
98
98
|
].filter(function (component) { return component !== undefined; });
|
99
|
-
var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs,
|
99
|
+
var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs,
|
100
|
+
// ccbInset,
|
101
|
+
componentGroups = _k.componentGroups, getPositionStyle = _k.getPositionStyle, getComponentGroupLayout = _k.getComponentGroupLayout;
|
102
|
+
var ccbInset = {
|
103
|
+
top: '0px',
|
104
|
+
right: '0px',
|
105
|
+
bottom: '0px',
|
106
|
+
left: '0px'
|
107
|
+
};
|
100
108
|
var renderElements = function (component) {
|
101
109
|
var _a;
|
102
110
|
switch (component.type) {
|
@@ -78,18 +78,18 @@ var useFlexGridLayout = function (_a) {
|
|
78
78
|
var ccbCenterX = ccbLeft + ccbWidth / 2;
|
79
79
|
var ccbCenterY = ccbTop + ccbHeight / 2;
|
80
80
|
var positions = {
|
81
|
-
OUTSET1: { top:
|
82
|
-
OUTSET2: { top:
|
83
|
-
OUTSET3: { top:
|
84
|
-
OUTSET4: { top: ccbTop, right:
|
85
|
-
OUTSET5: { top: "".concat(ccbCenterY, "px"), right:
|
86
|
-
OUTSET6: { bottom: ccbBottom, right:
|
87
|
-
OUTSET7: { bottom:
|
88
|
-
OUTSET8: { bottom:
|
89
|
-
OUTSET9: { bottom:
|
90
|
-
OUTSET10: { bottom: ccbBottom, left:
|
91
|
-
OUTSET11: { top: "".concat(ccbCenterY, "px"), left:
|
92
|
-
OUTSET12: { top: ccbTop, left:
|
81
|
+
OUTSET1: { top: -50, left: ccbLeft },
|
82
|
+
OUTSET2: { top: -50, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
|
83
|
+
OUTSET3: { top: -50, right: ccbRight },
|
84
|
+
OUTSET4: { top: ccbTop, right: 50 },
|
85
|
+
OUTSET5: { top: "".concat(ccbCenterY, "px"), right: 50, transform: 'translateY(-50%)' },
|
86
|
+
OUTSET6: { bottom: ccbBottom, right: 50 },
|
87
|
+
OUTSET7: { bottom: -50, right: ccbRight },
|
88
|
+
OUTSET8: { bottom: -50, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
|
89
|
+
OUTSET9: { bottom: -50, left: ccbLeft },
|
90
|
+
OUTSET10: { bottom: ccbBottom, left: -50 },
|
91
|
+
OUTSET11: { top: "".concat(ccbCenterY, "px"), left: -50, transform: 'translateY(-50%)' },
|
92
|
+
OUTSET12: { top: ccbTop, left: -50 },
|
93
93
|
INSET1: { top: ccbTop + GAP, left: ccbLeft + GAP },
|
94
94
|
INSET2: { top: ccbTop + GAP, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
|
95
95
|
INSET3: { top: ccbTop + GAP, right: ccbRight + GAP },
|