pds-dev-kit-web-test 2.7.121 → 2.7.123

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 (3) hide show
  1. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js +42 -15
  2. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +38 -11
  3. package/package.json +1 -1
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js CHANGED
@@ -20,10 +20,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  var jsx_runtime_1 = require("react/jsx-runtime");
22
22
  var react_1 = require("react");
23
+ var CustomSectionBackgroundMedia_1 = require("../../../../../../../DynamicLayout/components/Section/components/CustomSectionBackgroundMedia");
23
24
  var createCompositions_1 = require("../../../../../../../DynamicLayout/CompositionRenderer/createCompositions");
24
25
  var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
25
26
  var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
26
27
  var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
28
+ var isNullOrUndefined_1 = __importDefault(require("../../../../../../../DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
27
29
  var styled_components_1 = __importDefault(require("styled-components"));
28
30
  var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
29
31
  var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
@@ -51,7 +53,7 @@ var createComponent = function (type, getDesignType, getLocation) {
51
53
  function ContentsCarousel(props) {
52
54
  var _a;
53
55
  var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, mode = _b.mode, queryData = _b.queryData;
54
- var compositions = props.compositions, index = props.index, _c = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_STYLE_PROP_CONTENTSCAROUSEL = props.CB_STYLE_PROP_CONTENTSCAROUSEL, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_CONTENTSCAROUSEL.CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE;
56
+ var compositions = props.compositions, index = props.index, _c = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_STYLE_PROP_CONTENTSCAROUSEL = props.CB_STYLE_PROP_CONTENTSCAROUSEL, 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;
55
57
  var _d = (0, util_1.parseProperties)(props, device), style = _d.style, hoverStyle = _d.hoverStyle, layout = _d.layout, effect = _d.effect;
56
58
  var _e = (0, contentsCarouselUtils_1.parseCarouselStyleToCarouselCoreProp)({
57
59
  props: CB_STYLE_PROP_CONTENTSCAROUSEL,
@@ -117,6 +119,10 @@ function ContentsCarousel(props) {
117
119
  : (_a = CB_STYLE_PROP_CONTENTSCAROUSEL['CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING:MOBILE']) !== null && _a !== void 0 ? _a : CB_STYLE_PROP_CONTENTSCAROUSEL.CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING;
118
120
  var columnGap = columnGapEnum === 'NARROW' ? 8 : columnGapEnum === 'NORMAL' ? 24 : 36;
119
121
  var pointerEventsObj = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
122
+ var backgroundRef = (0, react_1.useRef)(null);
123
+ var isMobile = device === 'MOBILE';
124
+ var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
125
+ var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
120
126
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Object.entries(componentGroups).map(function (_a) {
121
127
  var position = _a[0], groupComponents = _a[1];
122
128
  return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentscarousel-button-group ccb-elements", ref: function (el) {
@@ -127,19 +133,39 @@ function ContentsCarousel(props) {
127
133
  delete positionRefs.current[position];
128
134
  }
129
135
  }, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { pointerEvents: 'none', 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));
130
- }), (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, style: __assign({}, pointerEventsObj) }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-contentscarousel-wrapper", ccbInset: ccbInset, customStyle: isHovered
131
- ? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle
132
- : contentsCarouselNormalStyle === null || contentsCarouselNormalStyle === void 0 ? void 0 : contentsCarouselNormalStyle.customStyle }, { 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: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle, effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === 'CARD'
133
- ? 'cards'
134
- : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === 'FADEOUTANDIN'
135
- ? 'fade'
136
- : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
137
- valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
138
- queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA,
139
- limit: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS,
140
- queryData: queryData,
141
- compositions: compositions
142
- }) }), CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE) })) })) })) }))] }));
136
+ }), (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.jsxs)(S_SwiperLayout, __assign({ className: "cb-contentscarousel-layout-box", ref: layoutRef, style: __assign({}, pointerEventsObj) }, { 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_SwiperWrapper, __assign({ className: "cb-contentscarousel-wrapper", ccbInset: ccbInset, customStyle: isHovered
137
+ ? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle
138
+ : contentsCarouselNormalStyle === null || contentsCarouselNormalStyle === void 0 ? void 0 : contentsCarouselNormalStyle.customStyle }, { 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: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle, effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === 'CARD'
139
+ ? 'cards'
140
+ : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === 'FADEOUTANDIN'
141
+ ? 'fade'
142
+ : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
143
+ valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
144
+ queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA,
145
+ limit: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS,
146
+ queryData: queryData,
147
+ compositions: compositions
148
+ }) }), CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE) }))] })) })) }))] }));
149
+ }
150
+ function getIsBgMedia(isMobile, specs) {
151
+ if (!specs) {
152
+ return false;
153
+ }
154
+ if (isMobile) {
155
+ return specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'] !== 'NONE';
156
+ }
157
+ return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE !== 'NONE';
158
+ }
159
+ function getMediaType(isMobile, specs) {
160
+ if (!specs) {
161
+ return 'NONE';
162
+ }
163
+ if (isMobile) {
164
+ return (0, isNullOrUndefined_1.default)(specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'])
165
+ ? specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE
166
+ : specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'];
167
+ }
168
+ return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE;
143
169
  }
144
170
  var S_SwiperLayout = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n margin: 0 auto;\n position: relative;\n width: 100%;\n"], ["\n height: 100%;\n margin: 0 auto;\n position: relative;\n width: 100%;\n"])));
145
171
  var S_SwiperWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n bottom: ", ";\n left: ", ";\n position: absolute;\n right: ", ";\n top: ", ";\n ", ";\n"], ["\n bottom: ", ";\n left: ", ";\n position: absolute;\n right: ", ";\n top: ", ";\n ", ";\n"])), function (_a) {
@@ -158,5 +184,6 @@ var S_SwiperWrapper = styled_components_1.default.div(templateObject_2 || (templ
158
184
  var customStyle = _a.customStyle;
159
185
  return customStyle;
160
186
  });
187
+ var S_CustomBackgroundWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n bottom: 0;\n display: flex;\n justify-content: center;\n left: 0;\n overflow: hidden;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -2;\n"], ["\n align-items: center;\n bottom: 0;\n display: flex;\n justify-content: center;\n left: 0;\n overflow: hidden;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -2;\n"])));
161
188
  exports.default = ContentsCarousel;
162
- var templateObject_1, templateObject_2;
189
+ var templateObject_1, templateObject_2, templateObject_3;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js CHANGED
@@ -20,10 +20,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  var jsx_runtime_1 = require("react/jsx-runtime");
22
22
  var react_1 = require("react");
23
+ var CustomSectionBackgroundMedia_1 = require("../../../../../../../DynamicLayout/components/Section/components/CustomSectionBackgroundMedia");
23
24
  var createCompositions_1 = require("../../../../../../../DynamicLayout/CompositionRenderer/createCompositions");
24
25
  var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
25
26
  var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
26
27
  var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
28
+ var isNullOrUndefined_1 = __importDefault(require("../../../../../../../DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
27
29
  var styled_components_1 = __importDefault(require("styled-components"));
28
30
  var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
29
31
  var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
@@ -51,7 +53,7 @@ var createComponent = function (type, getDesignType, getLocation) {
51
53
  };
52
54
  function SlideBanner(props) {
53
55
  var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode, queryData = _a.queryData;
54
- var index = props.index, _b = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_STYLE_PROP_SLIDEBANNER = props.CB_STYLE_PROP_SLIDEBANNER, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
56
+ var index = props.index, _b = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_STYLE_PROP_SLIDEBANNER = props.CB_STYLE_PROP_SLIDEBANNER, 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;
55
57
  var compositions = props.compositions;
56
58
  var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, effect = _c.effect;
57
59
  var _d = (0, slideBannerUtils_1.parseSlideBannerStyleToSlideBannerCoreProp)({
@@ -120,6 +122,10 @@ function SlideBanner(props) {
120
122
  return null;
121
123
  }
122
124
  };
125
+ var backgroundRef = (0, react_1.useRef)(null);
126
+ var isMobile = device === 'MOBILE';
127
+ var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
128
+ var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
123
129
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Object.entries(componentGroups).map(function (_a) {
124
130
  var position = _a[0], groupComponents = _a[1];
125
131
  return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-group ccb-elements", ref: function (el) {
@@ -130,16 +136,37 @@ function SlideBanner(props) {
130
136
  delete positionRefs.current[position];
131
137
  }
132
138
  }, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { zIndex: 3, pointerEvents: 'none' }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) { return renderElements(component); }) })) }), position));
133
- }), (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); } }, { children: (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 ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle : 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 }, { children: (0, createCompositions_1.createCompositions)({
134
- valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
135
- queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
136
- limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
137
- queryData: queryData,
138
- compositions: compositions
139
- }) })) })) })) })) }))] }));
139
+ }), (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); } }, { children: (0, jsx_runtime_1.jsxs)(S_SwiperLayout, __assign({ className: "cb-slidebanner-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.jsx)(S_SwiperWrapper, __assign({ className: "cb-slidebanner-wrapper", ccbInset: ccbInset, customStyle: isHovered ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle : 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 }, { children: (0, createCompositions_1.createCompositions)({
140
+ valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
141
+ queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
142
+ limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
143
+ queryData: queryData,
144
+ compositions: compositions
145
+ }) })) }))] })) })) }))] }));
140
146
  }
141
- var S_SwiperLayout = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n margin: 0 auto;\n position: relative;\n width: 100%;\n"], ["\n height: 100%;\n margin: 0 auto;\n position: relative;\n width: 100%;\n"])));
142
- var S_SwiperWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n bottom: ", ";\n left: ", ";\n position: absolute;\n right: ", ";\n top: ", ";\n ", ";\n"], ["\n bottom: ", ";\n left: ", ";\n position: absolute;\n right: ", ";\n top: ", ";\n ", ";\n"])), function (_a) {
147
+ var S_CustomBackgroundWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n bottom: 0;\n display: flex;\n justify-content: center;\n left: 0;\n overflow: hidden;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -2;\n"], ["\n align-items: center;\n bottom: 0;\n display: flex;\n justify-content: center;\n left: 0;\n overflow: hidden;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -2;\n"])));
148
+ function getIsBgMedia(isMobile, specs) {
149
+ if (!specs) {
150
+ return false;
151
+ }
152
+ if (isMobile) {
153
+ return specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'] !== 'NONE';
154
+ }
155
+ return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE !== 'NONE';
156
+ }
157
+ function getMediaType(isMobile, specs) {
158
+ if (!specs) {
159
+ return 'NONE';
160
+ }
161
+ if (isMobile) {
162
+ return (0, isNullOrUndefined_1.default)(specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'])
163
+ ? specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE
164
+ : specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'];
165
+ }
166
+ return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE;
167
+ }
168
+ var S_SwiperLayout = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n margin: 0 auto;\n position: relative;\n width: 100%;\n"], ["\n height: 100%;\n margin: 0 auto;\n position: relative;\n width: 100%;\n"])));
169
+ var S_SwiperWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n bottom: ", ";\n left: ", ";\n position: absolute;\n right: ", ";\n top: ", ";\n ", ";\n"], ["\n bottom: ", ";\n left: ", ";\n position: absolute;\n right: ", ";\n top: ", ";\n ", ";\n"])), function (_a) {
143
170
  var ccbInset = _a.ccbInset;
144
171
  return ccbInset.bottom;
145
172
  }, function (_a) {
@@ -156,4 +183,4 @@ var S_SwiperWrapper = styled_components_1.default.div(templateObject_2 || (templ
156
183
  return customStyle;
157
184
  });
158
185
  exports.default = SlideBanner;
159
- var templateObject_1, templateObject_2;
186
+ var templateObject_1, templateObject_2, templateObject_3;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.7.121",
3
+ "version": "2.7.123",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",