pds-dev-kit-web-test 2.5.706 → 2.5.708

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js

@@ -1,23 +1,33 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+
+var __makeTemplateObject = this && this.__makeTemplateObject || function (cooked, raw) {
+  if (Object.defineProperty) {
+    Object.defineProperty(cooked, "raw", {
+      value: raw
+    });
+  } else {
+    cooked.raw = raw;
+  }
+  return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var createCompositions_1 = require("../../../../../../../DynamicLayout/CompositionRenderer/createCompositions");
@@ -35,125 +45,253 @@ var contentsCarouselUtils_1 = require("./contentsCarouselUtils");
 var useFlexGridLayout_1 = require("./hooks/useFlexGridLayout");
 var useSwiper_1 = require("./hooks/useSwiper");
 var createComponent = function (type, getDesignType, getLocation) {
-    return function (normalStyle, hoverStyle, isHovered) {
-        var normalDesign = getDesignType(normalStyle);
-        var hoverDesign = getDesignType(hoverStyle);
-        if (isHovered && hoverDesign === 'NONE')
-            return undefined;
-        if (normalDesign === 'NONE')
-            return undefined;
-        return {
-            type: type,
-            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle)
-        };
+  return function (normalStyle, hoverStyle, isHovered) {
+    var normalDesign = getDesignType(normalStyle);
+    var hoverDesign = getDesignType(hoverStyle);
+    if (isHovered && hoverDesign === 'NONE') return undefined;
+    if (normalDesign === 'NONE') return undefined;
+    return {
+      type: type,
+      position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle)
     };
+  };
 };
 function ContentsCarousel(props) {
-    var _a;
-    var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, mode = _b.mode, queryData = _b.queryData;
-    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;
-    var _d = (0, util_1.parseProperties)(props, device), style = _d.style, hoverStyle = _d.hoverStyle, layout = _d.layout, effect = _d.effect;
-    var _e = (0, contentsCarouselUtils_1.parseCarouselStyleToCarouselCoreProp)({
-        props: CB_STYLE_PROP_CONTENTSCAROUSEL,
-        contentsPropsPartials: { CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS },
-        device: device
-    }), contentsCarouselNormalStyle = _e.normalStyle, contentsCarouselHoverStyle = _e.hoverStyle;
-    var _f = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomNavigationProp)({
-        props: CB_STYLE_PROP_CONTENTSCAROUSEL,
-        device: device
-    }), customNavigationNormalStyle = _f.normalStyle, customNavigationHoverStyle = _f.hoverStyle;
-    var _g = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomProgressbarProp)({
-        props: CB_STYLE_PROP_CONTENTSCAROUSEL,
-        device: device
-    }), customProgressbarNormalStyle = _g.normalStyle, customProgressbarHoverStyle = _g.hoverStyle;
-    var _h = (0, useSwiper_1.useSwiper)(), swiperRef = _h.swiperRef, progressRef = _h.progressRef, leftTimeMsRef = _h.leftTimeMsRef, isBeginning = _h.isBeginning, isEnd = _h.isEnd, onSwiper = _h.onSwiper, onSlideChangeTransitionEnd = _h.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _h.onAutoplayTimeLeft, onClickPrevBtn = _h.onClickPrevBtn, onClickNextBtn = _h.onClickNextBtn;
-    var _j = (0, react_1.useState)(false), isHovered = _j[0], setIsHovered = _j[1];
-    var loop = isHovered ? contentsCarouselHoverStyle.loop : contentsCarouselNormalStyle.loop;
-    // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
-    var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
-    // NOTE: EFFECT와 관련된 함수들입니다.
-    var cbRef = (0, react_1.useRef)(null);
-    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
-        index
-    ]);
-    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
-    var effectCssProperties = isVisible ? effect : {};
-    var isNoneEffectType = device === 'DESKTOP'
-        ? CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE === 'NONE'
-        : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
-    var hasEffect = !isNoneEffectType;
-    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    var createPrevButton = createComponent('PREV', function (style) { return style.prevBtnType || 'NONE'; }, function (style) { return style.prevBtnLocation || 'OUTSET1'; });
-    var createNextButton = createComponent('NEXT', function (style) { return style.nextBtnType || 'NONE'; }, function (style) { return style.nextBtnLocation || 'OUTSET1'; });
-    var components = [
-        createPrevButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
-        createNextButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
-        { type: 'PROGRESSBAR', position: 'INSET5' }
-    ].filter(function (component) { return component !== undefined; });
-    var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs, 
+  var _a;
+  var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext),
+    device = _b.device,
+    mode = _b.mode,
+    queryData = _b.queryData;
+  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;
+  var _d = (0, util_1.parseProperties)(props, device),
+    style = _d.style,
+    hoverStyle = _d.hoverStyle,
+    layout = _d.layout,
+    effect = _d.effect;
+  var _e = (0, contentsCarouselUtils_1.parseCarouselStyleToCarouselCoreProp)({
+      props: CB_STYLE_PROP_CONTENTSCAROUSEL,
+      contentsPropsPartials: {
+        CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS
+      },
+      device: device
+    }),
+    contentsCarouselNormalStyle = _e.normalStyle,
+    contentsCarouselHoverStyle = _e.hoverStyle;
+  var _f = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomNavigationProp)({
+      props: CB_STYLE_PROP_CONTENTSCAROUSEL,
+      device: device
+    }),
+    customNavigationNormalStyle = _f.normalStyle,
+    customNavigationHoverStyle = _f.hoverStyle;
+  var _g = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomProgressbarProp)({
+      props: CB_STYLE_PROP_CONTENTSCAROUSEL,
+      device: device
+    }),
+    customProgressbarNormalStyle = _g.normalStyle,
+    customProgressbarHoverStyle = _g.hoverStyle;
+  var _h = (0, useSwiper_1.useSwiper)(),
+    swiperRef = _h.swiperRef,
+    progressRef = _h.progressRef,
+    leftTimeMsRef = _h.leftTimeMsRef,
+    isBeginning = _h.isBeginning,
+    isEnd = _h.isEnd,
+    onSwiper = _h.onSwiper,
+    onSlideChangeTransitionEnd = _h.onSlideChangeTransitionEnd,
+    onAutoplayTimeLeft = _h.onAutoplayTimeLeft,
+    onClickPrevBtn = _h.onClickPrevBtn,
+    onClickNextBtn = _h.onClickNextBtn;
+  var _j = (0, react_1.useState)(false),
+    isHovered = _j[0],
+    setIsHovered = _j[1];
+  var loop = isHovered ? contentsCarouselHoverStyle.loop : contentsCarouselNormalStyle.loop;
+  // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
+  var editModeStyle = mode === 'EDIT' ? {
+    pointerEvents: 'none'
+  } : {};
+  // NOTE: EFFECT와 관련된 함수들입니다.
+  var cbRef = (0, react_1.useRef)(null);
+  var entry = (0, hooks_1.useIntersectionObserver)(cbRef, {
+    threshold: 0.2,
+    freezeOnceVisible: false
+  }, [index]);
+  var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+  var effectCssProperties = isVisible ? effect : {};
+  var isNoneEffectType = device === 'DESKTOP' ? CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE === 'NONE' : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
+  var hasEffect = !isNoneEffectType;
+  var effectVisibleStyle = hasEffect ? {
+    opacity: isVisible ? 1 : 0
+  } : {};
+  var createPrevButton = createComponent('PREV', function (style) {
+    return style.prevBtnType || 'NONE';
+  }, function (style) {
+    return style.prevBtnLocation || 'OUTSET1';
+  });
+  var createNextButton = createComponent('NEXT', function (style) {
+    return style.nextBtnType || 'NONE';
+  }, function (style) {
+    return style.nextBtnLocation || 'OUTSET1';
+  });
+  var components = [createPrevButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered), createNextButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered), {
+    type: 'PROGRESSBAR',
+    position: 'INSET5'
+  }].filter(function (component) {
+    return component !== undefined;
+  });
+  var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({
+      components: components
+    }),
+    layoutRef = _k.layoutRef,
+    positionRefs = _k.positionRefs,
     // ccbInset,
-    componentGroups = _k.componentGroups, getPositionStyle = _k.getPositionStyle, getComponentGroupLayout = _k.getComponentGroupLayout;
-    var ccbInset = {
-        top: '0px',
-        right: '0px',
-        bottom: '0px',
-        left: '0px'
-    };
-    var renderElements = function (component) {
-        switch (component.type) {
-            case 'PREV':
-                return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, styles: isHovered ? customNavigationHoverStyle : customNavigationNormalStyle, onClick: onClickPrevBtn }));
-            case 'NEXT':
-                return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: isHovered ? customNavigationHoverStyle : customNavigationNormalStyle, onClick: onClickNextBtn }));
-            case 'PROGRESSBAR':
-                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
-            default:
-                return null;
-        }
-    };
-    // NOTE: edit환경에서 hover가 작동하지 않아서 제외함 필요시 추가..
-    var columnGapEnum = device === 'DESKTOP'
-        ? CB_STYLE_PROP_CONTENTSCAROUSEL.CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING
-        : (_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;
-    var columnGap = columnGapEnum === 'NARROW' ? 8 : columnGapEnum === 'NORMAL' ? 24 : 36;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Object.entries(componentGroups).map(function (_a) {
-                var position = _a[0], groupComponents = _a[1];
-                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentscarousel-button-group ccb-elements", ref: function (el) {
-                        if (el) {
-                            positionRefs.current[position] = el;
-                        }
-                        else {
-                            delete positionRefs.current[position];
-                        }
-                    }, 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));
-            }), (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
-                                ? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle
-                                : 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, effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === 'CARD'
-                                    ? 'cards'
-                                    : 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)({
-                                    valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
-                                    queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA,
-                                    limit: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS,
-                                    queryData: queryData,
-                                    compositions: compositions
-                                }) }), CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE) })) })) })) }))] }));
+    componentGroups = _k.componentGroups,
+    getPositionStyle = _k.getPositionStyle,
+    getComponentGroupLayout = _k.getComponentGroupLayout;
+  var ccbInset = {
+    top: '0px',
+    right: '0px',
+    bottom: '0px',
+    left: '0px'
+  };
+  var renderElements = function (component) {
+    switch (component.type) {
+      case 'PREV':
+        return (0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, {
+          isDisabled: loop ? false : isBeginning,
+          styles: isHovered ? customNavigationHoverStyle : customNavigationNormalStyle,
+          onClick: onClickPrevBtn
+        });
+      case 'NEXT':
+        return (0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, {
+          isDisabled: loop ? false : isEnd,
+          styles: isHovered ? customNavigationHoverStyle : customNavigationNormalStyle,
+          onClick: onClickNextBtn
+        });
+      case 'PROGRESSBAR':
+        return (0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, {
+          progressRef: progressRef,
+          leftTimeMsRef: leftTimeMsRef,
+          styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle
+        });
+      default:
+        return null;
+    }
+  };
+  // NOTE: edit환경에서 hover가 작동하지 않아서 제외함 필요시 추가..
+  var columnGapEnum = device === 'DESKTOP' ? CB_STYLE_PROP_CONTENTSCAROUSEL.CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING : (_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;
+  var columnGap = columnGapEnum === 'NARROW' ? 8 : columnGapEnum === 'NORMAL' ? 24 : 36;
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [Object.entries(componentGroups).map(function (_a) {
+      var position = _a[0],
+        groupComponents = _a[1];
+      return (0, jsx_runtime_1.jsx)("div", __assign({
+        className: "cb-contentscarousel-button-group ccb-elements",
+        ref: function (el) {
+          if (el) {
+            positionRefs.current[position] = el;
+          } else {
+            delete positionRefs.current[position];
+          }
+        },
+        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);
+    }), (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 ? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle : 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,
+              effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === 'CARD' ? 'cards' : 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)({
+                valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
+                queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA,
+                limit: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS,
+                queryData: queryData,
+                compositions: compositions
+              })
+            }), CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE)
+          }))
+        }))
+      }))
+    }))]
+  });
 }
 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"])));
 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) {
-    var ccbInset = _a.ccbInset;
-    return ccbInset.bottom;
+  var ccbInset = _a.ccbInset;
+  return ccbInset.bottom;
 }, function (_a) {
-    var ccbInset = _a.ccbInset;
-    return ccbInset.left;
+  var ccbInset = _a.ccbInset;
+  return ccbInset.left;
 }, function (_a) {
-    var ccbInset = _a.ccbInset;
-    return ccbInset.right;
+  var ccbInset = _a.ccbInset;
+  return ccbInset.right;
 }, function (_a) {
-    var ccbInset = _a.ccbInset;
-    return ccbInset.top;
+  var ccbInset = _a.ccbInset;
+  return ccbInset.top;
 }, function (_a) {
-    var customStyle = _a.customStyle;
-    return customStyle;
+  var customStyle = _a.customStyle;
+  return customStyle;
 });
 exports.default = ContentsCarousel;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2;