pds-dev-kit-web-test 2.7.208 → 2.7.210
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/mock_slideBanner.js +2 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js +1 -5
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +3 -3
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBannerCore.js +12 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomPagination.js +23 -14
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts +4 -0
- package/package.json +1 -1
|
@@ -4575,9 +4575,9 @@ exports.SAMPLE_SLIDEBANNER_CB = {
|
|
|
4575
4575
|
'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE': null,
|
|
4576
4576
|
CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSECONDARYCOLOR: '#0E0104F5',
|
|
4577
4577
|
'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE': null,
|
|
4578
|
-
CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSIZE: '
|
|
4578
|
+
CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSIZE: 'SMALL',
|
|
4579
4579
|
'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSIZE:MOBILE': null,
|
|
4580
|
-
CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSTYLE: '
|
|
4580
|
+
CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSTYLE: 'DESIGN15',
|
|
4581
4581
|
'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSTYLE:MOBILE': null
|
|
4582
4582
|
},
|
|
4583
4583
|
CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD: {
|
|
@@ -159,11 +159,7 @@ function ContentsCarousel(props) {
|
|
|
159
159
|
display: layout.display,
|
|
160
160
|
flexDirection: layout.flexDirection,
|
|
161
161
|
justifyContent: layout.justifyContent
|
|
162
|
-
} }, { 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: Math.min(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS.length), styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle, effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE ===
|
|
163
|
-
? 'cards'
|
|
164
|
-
: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === 'FADEOUTANDIN'
|
|
165
|
-
? 'fade'
|
|
166
|
-
: 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)({
|
|
162
|
+
} }, { 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: Math.min(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS.length), 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() }, { children: (0, createCompositions_1.createCompositions)({
|
|
167
163
|
valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
|
|
168
164
|
queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA,
|
|
169
165
|
limit: displayCounts,
|
|
@@ -62,7 +62,7 @@ var createComponent = function (type, getDesignType, getLocation) {
|
|
|
62
62
|
};
|
|
63
63
|
function SlideBanner(props) {
|
|
64
64
|
var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode, queryData = _a.queryData;
|
|
65
|
-
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_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS = _b.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;
|
|
65
|
+
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_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS = _b.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;
|
|
66
66
|
var compositions = props.compositions;
|
|
67
67
|
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);
|
|
68
68
|
var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, overlayStyle = _c.overlayStyle, effect = _c.effect;
|
|
@@ -151,13 +151,13 @@ function SlideBanner(props) {
|
|
|
151
151
|
delete positionRefs.current[position];
|
|
152
152
|
}
|
|
153
153
|
}, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { zIndex: 3 }) }, { 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));
|
|
154
|
-
}), (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 }, { children: (0, createCompositions_1.createCompositions)({
|
|
154
|
+
}), (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 === null || CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
|
|
155
155
|
valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
|
|
156
156
|
queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
|
|
157
157
|
limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
|
|
158
158
|
queryData: queryData,
|
|
159
159
|
compositions: orderedCompositions
|
|
160
|
-
}) })) })) }))] })) }))] }));
|
|
160
|
+
}) }), CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE) })) }))] })) }))] }));
|
|
161
161
|
}
|
|
162
162
|
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"])));
|
|
163
163
|
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"])));
|
|
@@ -32,7 +32,18 @@ var SlideBannerCore = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
32
32
|
return ((0, jsx_runtime_1.jsx)(react_2.Swiper, __assign({ ref: ref, style: {
|
|
33
33
|
width: '100%',
|
|
34
34
|
height: '100%'
|
|
35
|
-
},
|
|
35
|
+
}, slidesPerView: slidesPerView, scrollbar: styles.scrollbar, freeMode: styles.freeMode, autoplay: styles.useAutoplay ? styles.autoplay : false, loop: styles.loop, modules: [
|
|
36
|
+
swiper_1.Pagination,
|
|
37
|
+
swiper_1.Navigation,
|
|
38
|
+
swiper_1.Scrollbar,
|
|
39
|
+
swiper_1.FreeMode,
|
|
40
|
+
swiper_1.Autoplay,
|
|
41
|
+
swiper_1.EffectCube,
|
|
42
|
+
swiper_1.EffectFade,
|
|
43
|
+
swiper_1.EffectCards,
|
|
44
|
+
swiper_1.EffectCoverflow,
|
|
45
|
+
swiper_1.EffectFlip
|
|
46
|
+
] }, props, { children: Array.isArray(children) ? (children.map(function (slide, index) { return (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: slide }, index); })) : ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: children })) })));
|
|
36
47
|
});
|
|
37
48
|
SlideBannerCore.displayName = 'SlideBannerCore';
|
|
38
49
|
exports.default = SlideBannerCore;
|
|
@@ -64,9 +64,9 @@ var CustomPagination = function (_a) {
|
|
|
64
64
|
case 'DESIGN2':
|
|
65
65
|
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: "/ ".concat(total) }))] })));
|
|
66
66
|
case 'DESIGN3':
|
|
67
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: styles.secondaryColor }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
|
|
67
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: styles.secondaryColor, style: { height: size } }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
|
|
68
68
|
case 'DESIGN4':
|
|
69
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: styles.secondaryColor }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
|
|
69
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: styles.secondaryColor, style: { height: size } }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
|
|
70
70
|
case 'DESIGN5':
|
|
71
71
|
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevBtnClick, disabled: isPrevBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: {
|
|
72
72
|
marginLeft: '8px',
|
|
@@ -80,7 +80,7 @@ var CustomPagination = function (_a) {
|
|
|
80
80
|
color: styles.primaryColor || 'inherit'
|
|
81
81
|
}, styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: "body2Regular" }, { children: "/ ".concat(total) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNextBtnClick, disabled: isNextBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_right", size: iconSize }) }))] })));
|
|
82
82
|
case 'DESIGN7':
|
|
83
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevBtnClick, disabled: isPrevBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNextBtnClick, disabled: isNextBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
|
|
83
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevBtnClick, disabled: isPrevBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: styles.secondaryColor, style: { height: size } }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNextBtnClick, disabled: isNextBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
|
|
84
84
|
case 'DESIGN8':
|
|
85
85
|
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevBtnClick, disabled: isPrevBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_left", size: size === 16 ? 16 : 32 }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: styles.secondaryColor }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNextBtnClick, disabled: isNextBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_right", size: iconSize }) }))] })));
|
|
86
86
|
case 'DESIGN9':
|
|
@@ -88,7 +88,7 @@ var CustomPagination = function (_a) {
|
|
|
88
88
|
paddingLeft: '8px',
|
|
89
89
|
paddingRight: '8px',
|
|
90
90
|
color: styles.primaryColor || 'inherit'
|
|
91
|
-
}, styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "HORIZONTAL" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
|
|
91
|
+
}, styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "HORIZONTAL", color: styles.secondaryColor, style: { width: size } }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
|
|
92
92
|
case 'DESIGN10':
|
|
93
93
|
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ direction: "column", gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: {
|
|
94
94
|
paddingLeft: '8px',
|
|
@@ -96,17 +96,17 @@ var CustomPagination = function (_a) {
|
|
|
96
96
|
color: styles.primaryColor || 'inherit'
|
|
97
97
|
}, styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "HORIZONTAL", color: styles.secondaryColor }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
|
|
98
98
|
case 'DESIGN11':
|
|
99
|
-
return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: index + 1 === current ? styles.primaryColor : styles.secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
|
|
99
|
+
return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { size: size, color: index + 1 === current ? styles.primaryColor : styles.secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
|
|
100
100
|
case 'DESIGN12':
|
|
101
|
-
return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: index + 1 === current ? styles.primaryColor : styles.secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
|
|
101
|
+
return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { size: size, color: index + 1 === current ? styles.primaryColor : styles.secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
|
|
102
102
|
case 'DESIGN13':
|
|
103
|
-
return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px", style: { color: styles.secondaryColor || 'inherit' } }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: index + 1 === current ? styles.primaryColor : styles.secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
|
|
103
|
+
return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px", style: { color: styles.secondaryColor || 'inherit' } }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { size: size, color: index + 1 === current ? styles.primaryColor : styles.secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
|
|
104
104
|
case 'DESIGN14':
|
|
105
|
-
return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px", style: { color: styles.secondaryColor || 'inherit' } }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: index + 1 === current ? styles.primaryColor : styles.secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
|
|
105
|
+
return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px", style: { color: styles.secondaryColor || 'inherit' } }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { size: size, color: index + 1 === current ? styles.primaryColor : styles.secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
|
|
106
106
|
case 'DESIGN15':
|
|
107
|
-
return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { color: index + 1 === current ? styles.primaryColor : styles.secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
|
|
107
|
+
return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { size: size, color: index + 1 === current ? styles.primaryColor : styles.secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
|
|
108
108
|
case 'DESIGN16':
|
|
109
|
-
return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { color: index + 1 === current ? styles.primaryColor : styles.secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
|
|
109
|
+
return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { size: size, color: index + 1 === current ? styles.primaryColor : styles.secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
|
|
110
110
|
default:
|
|
111
111
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
112
112
|
}
|
|
@@ -126,7 +126,7 @@ var FlexBox = styled_components_1.default.div(templateObject_1 || (templateObjec
|
|
|
126
126
|
var _b = _a.justifyContent, justifyContent = _b === void 0 ? 'center' : _b;
|
|
127
127
|
return justifyContent;
|
|
128
128
|
});
|
|
129
|
-
var S_Pagination = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n max-width: 120px
|
|
129
|
+
var S_Pagination = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n /* max-width: 120px; */\n padding: 5px;\n"], ["\n /* max-width: 120px; */\n padding: 5px;\n"])));
|
|
130
130
|
var body2Bold = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
131
131
|
var theme = _a.theme;
|
|
132
132
|
return theme.desktopFontSize.body2;
|
|
@@ -173,15 +173,24 @@ var S_Divider = styled_components_1.default.div(templateObject_8 || (templateObj
|
|
|
173
173
|
var type = _a.type;
|
|
174
174
|
return (type === 'VERTICAL' ? verticalDivider : horizontalDivider);
|
|
175
175
|
});
|
|
176
|
-
var S_Dot = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 50%;\n cursor: pointer;\n height:
|
|
176
|
+
var S_Dot = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 50%;\n cursor: pointer;\n height: ", "px;\n width: ", "px;\n"], ["\n background-color: ", ";\n border-radius: 50%;\n cursor: pointer;\n height: ", "px;\n width: ", "px;\n"])), function (_a) {
|
|
177
177
|
var color = _a.color;
|
|
178
178
|
return color;
|
|
179
|
+
}, function (_a) {
|
|
180
|
+
var size = _a.size;
|
|
181
|
+
return size;
|
|
182
|
+
}, function (_a) {
|
|
183
|
+
var size = _a.size;
|
|
184
|
+
return size;
|
|
179
185
|
});
|
|
180
|
-
var S_Bar = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n cursor: pointer;\n height: 2px;\n width:
|
|
186
|
+
var S_Bar = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n cursor: pointer;\n height: 2px;\n width: ", "px;\n"], ["\n background-color: ", ";\n cursor: pointer;\n height: 2px;\n width: ", "px;\n"])), function (_a) {
|
|
181
187
|
var color = _a.color;
|
|
182
188
|
return color;
|
|
189
|
+
}, function (_a) {
|
|
190
|
+
var size = _a.size;
|
|
191
|
+
return size;
|
|
183
192
|
});
|
|
184
|
-
var S_Pointer = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n cursor: ", ";\n
|
|
193
|
+
var S_Pointer = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-items: center;\n cursor: ", ";\n display: flex;\n justify-content: center;\n opacity: ", ";\n"], ["\n align-items: center;\n cursor: ", ";\n display: flex;\n justify-content: center;\n opacity: ", ";\n"])), function (_a) {
|
|
185
194
|
var disabled = _a.disabled;
|
|
186
195
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
187
196
|
}, function (_a) {
|
|
@@ -168,6 +168,10 @@ export type CB_SLIDEBANNER_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
|
|
|
168
168
|
CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
|
|
169
169
|
CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
|
|
170
170
|
CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
|
|
171
|
+
CB_EFFECT_PROP_SLIDEBANNER: CB_EFFECT_PROP_SLIDEBANNER;
|
|
172
|
+
};
|
|
173
|
+
export type CB_EFFECT_PROP_SLIDEBANNER = {
|
|
174
|
+
CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE: 'SLIDE' | 'CUBE' | 'FADE' | 'CARDS' | 'COVERFLOW' | 'FLIP';
|
|
171
175
|
};
|
|
172
176
|
export type CB_LIST_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
|
|
173
177
|
CB_CONTENT_PROP_CONTENTSLIST: CB_CONTENT_PROP_CONTENTSLIST;
|