pds-dev-kit-web-test 2.7.268 → 2.7.271

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 (6) hide show
  1. package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js +1 -1
  2. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js +1 -1
  3. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +5 -3
  4. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.d.ts +2 -1
  5. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.js +13 -11
  6. package/package.json +1 -1
package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js CHANGED
@@ -68,7 +68,7 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
68
68
  var colsDesktop = (_a = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS) !== null && _a !== void 0 ? _a : 24;
69
69
  var colsMobile = (_b = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS:MOBILE']) !== null && _b !== void 0 ? _b : 8;
70
70
  var rowsDesktop = (_c = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS) !== null && _c !== void 0 ? _c : 26;
71
- var rowsMobile = (_d = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS:MOBILE']) !== null && _d !== void 0 ? _d : 26;
71
+ var rowsMobile = (_d = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS:MOBILE']) !== null && _d !== void 0 ? _d : rowsDesktop;
72
72
  var rows = isMobile ? rowsMobile : rowsDesktop;
73
73
  var cols = isMobile ? colsMobile : colsDesktop;
74
74
  var containerRef = (0, react_1.useRef)(null);
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js CHANGED
@@ -180,7 +180,7 @@ function ContentsCarousel(props) {
180
180
  compositions: orderedCompositions
181
181
  }) }), CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE +
182
182
  autoPlayEnabled +
183
- compositions.length) })) }))] })) }))] }));
183
+ orderedCompositions.length) })) }))] })) }))] }));
184
184
  }
185
185
  var S_Overlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: inherit;\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n border-radius: inherit;\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n"])));
186
186
  function getIsBgMedia(isMobile, specs) {
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js CHANGED
@@ -128,7 +128,7 @@ function SlideBanner(props) {
128
128
  case 'PAGINATION':
129
129
  return ((0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? customPaginationHoverStyle : customPaginationNormalStyle, current: currentSlide, isPrevBtnDisabled: loop ? false : isBeginning, isNextBtnDisabled: loop ? false : isEnd, total: ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slides.length) || 0, onBulletClick: onClickBullet, onPrevBtnClick: onClickPrevBtn, onNextBtnClick: onClickNextBtn, style: positionStyle }));
130
130
  case 'PROGRESSBAR':
131
- return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
131
+ return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { slidesLength: orderedCompositions.length, progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
132
132
  default:
133
133
  return null;
134
134
  }
@@ -154,13 +154,15 @@ function SlideBanner(props) {
154
154
  }, 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) {
155
155
  return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type));
156
156
  }) })) }), position));
157
- }), (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 () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { 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 }), (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, autoplay: autoPlayEnabled, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: 1, styles: isHovered ? slideBannerHoverStyle : slideBannerNormalStyle, effect: CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
157
+ }), (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 () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { 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 }), (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, effect: CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
158
158
  valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
159
159
  queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
160
160
  limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
161
161
  queryData: queryData,
162
162
  compositions: orderedCompositions
163
- }) }), CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE + autoPlayEnabled) })) }))] })) }))] }));
163
+ }) }), CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE +
164
+ autoPlayEnabled +
165
+ orderedCompositions.length) })) }))] })) }))] }));
164
166
  }
165
167
  var S_Overlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: inherit;\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n border-radius: inherit;\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n"])));
166
168
  var S_CustomBackgroundWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n border-radius: inherit;\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 border-radius: inherit;\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"])));
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.d.ts CHANGED
@@ -4,6 +4,7 @@ type Props = {
4
4
  styles: CustomProgressbarProps;
5
5
  progressRef: React.RefObject<number>;
6
6
  leftTimeMsRef: React.RefObject<number>;
7
+ slidesLength: number;
7
8
  };
8
- export declare const CustomProgressbar: ({ styles, progressRef, leftTimeMsRef }: Props) => JSX.Element;
9
+ export declare const CustomProgressbar: ({ styles, progressRef, leftTimeMsRef, slidesLength }: Props) => JSX.Element;
9
10
  export default CustomProgressbar;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.js CHANGED
@@ -24,7 +24,7 @@ var react_1 = require("react");
24
24
  var styled_components_1 = __importDefault(require("styled-components"));
25
25
  var progressConfigs_1 = require("./progressConfigs");
26
26
  var CustomProgressbar = function (_a) {
27
- var styles = _a.styles, progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef;
27
+ var styles = _a.styles, progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef, slidesLength = _a.slidesLength;
28
28
  var _b = (0, react_1.useState)(0), leftTimeSec = _b[0], setLeftTimeSec = _b[1];
29
29
  var _c = (0, react_1.useState)(0), progress = _c[0], setProgress = _c[1];
30
30
  (0, react_1.useEffect)(function () {
@@ -55,19 +55,21 @@ var CustomProgressbar = function (_a) {
55
55
  animationId = requestAnimationFrame(updateProgress);
56
56
  return function () { return cancelAnimationFrame(animationId); };
57
57
  }, []);
58
+ var progressRender = slidesLength > 1 ? progress : 0;
59
+ var timeLeftRender = slidesLength > 1 ? leftTimeSec : 0;
58
60
  var renderProgressByType = function () {
59
61
  var _a, _b, _c, _d, _e;
60
62
  switch (styles.type) {
61
63
  case 'NONE':
62
64
  return null;
63
65
  case 'DESIGN1':
64
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_a = styles.size) !== null && _a !== void 0 ? _a : 'MEDIUM', progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
66
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_a = styles.size) !== null && _a !== void 0 ? _a : 'MEDIUM', progress: progressRender, leftTimeSec: timeLeftRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
65
67
  // case 'DESIGN2':
66
68
  // return (
67
69
  // <ProgressDesign2
68
70
  // size={styles.size ?? 'MEDIUM'}
69
- // progress={progress}
70
- // leftTimeSec={leftTimeSec}
71
+ // progress={progressRender}
72
+ // leftTimeSec={timeLeftRender}
71
73
  // progressColor={styles.primaryColor}
72
74
  // bufferColor={styles.secondaryColor}
73
75
  // />
@@ -76,37 +78,37 @@ var CustomProgressbar = function (_a) {
76
78
  // return (
77
79
  // <ProgressDesign3
78
80
  // size={styles.size ?? 'MEDIUM'}
79
- // progress={progress}
81
+ // progress={progressRender}
80
82
  // progressColor={styles.primaryColor}
81
83
  // bufferColor={styles.secondaryColor}
82
84
  // />
83
85
  // );
84
86
  case 'DESIGN2':
85
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size: (_b = styles.size) !== null && _b !== void 0 ? _b : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
87
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size: (_b = styles.size) !== null && _b !== void 0 ? _b : 'MEDIUM', progress: progressRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
86
88
  // case 'DESIGN5':
87
89
  // return (
88
90
  // <ProgressDesign5
89
91
  // size={styles.size ?? 'MEDIUM'}
90
- // progress={progress}
92
+ // progress={progressRender}
91
93
  // progressColor={styles.primaryColor}
92
94
  // bufferColor={styles.secondaryColor}
93
95
  // />
94
96
  // );
95
97
  case 'DESIGN3':
96
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size: (_c = styles.size) !== null && _c !== void 0 ? _c : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
98
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size: (_c = styles.size) !== null && _c !== void 0 ? _c : 'MEDIUM', progress: progressRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
97
99
  case 'DESIGN4':
98
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size: (_d = styles.size) !== null && _d !== void 0 ? _d : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
100
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size: (_d = styles.size) !== null && _d !== void 0 ? _d : 'MEDIUM', progress: progressRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
99
101
  // case 'DESIGN8':
100
102
  // return (
101
103
  // <ProgressDesign8
102
104
  // size={styles.size ?? 'MEDIUM'}
103
- // progress={progress}
105
+ // progress={progressRender}
104
106
  // progressColor={styles.primaryColor}
105
107
  // bufferColor={styles.secondaryColor}
106
108
  // />
107
109
  // );
108
110
  default:
109
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor, size: (_e = styles.size) !== null && _e !== void 0 ? _e : 'MEDIUM' }));
111
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progressRender, leftTimeSec: timeLeftRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor, size: (_e = styles.size) !== null && _e !== void 0 ? _e : 'MEDIUM' }));
110
112
  }
111
113
  };
112
114
  return ((0, jsx_runtime_1.jsx)(S_ProgressWrapper, __assign({ className: "cb-contentscarousel-progressbar-wrapper", "$size": styles.size }, { children: renderProgressByType() })));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.7.268",
3
+ "version": "2.7.271",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",